/* Leckhampton Autocentre — site styles */
:root {
  --teal: #1ab4ce;
  --teal-hover: #42c6dc;
  --teal-deep: #0b7385;
  --ink: #1c2226;
  --ink-soft: #4b565d;
  --grey: #f2f4f5;
  --line: #dde2e5;
  --white: #fff;
  --radius: 6px;
  --radius-lg: 12px;
  /* Lifted light surface: the site rule for any light card or panel on a light background.
     Tinted face + defined edge + inner highlight + layered neutral shadow + soft pink ambient. */
  --lift-face: linear-gradient(180deg, #ffffff 0%, #f6f8f9 100%);
  --lift-edge: rgba(20, 26, 29, 0.1);
  --lift-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(20, 26, 29, 0.07),
    0 5px 12px -6px rgba(20, 26, 29, 0.13),
    0 18px 34px -18px rgba(20, 26, 29, 0.19),
    0 24px 50px -22px rgba(254, 2, 151, 0.17);
  --lift-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 4px rgba(20, 26, 29, 0.07),
    0 10px 20px -10px rgba(20, 26, 29, 0.17),
    0 26px 46px -22px rgba(20, 26, 29, 0.24),
    0 30px 62px -24px rgba(254, 2, 151, 0.23);
  --head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", "Segoe UI", Helvetica, Arial, sans-serif;
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(64px, 8vw, 104px);
  --ease: 0.3s ease;
  --magenta: #fe0297;
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  --in: cubic-bezier(0.7, 0, 0.84, 0);
  --header-h: 100px;
}
::selection { background: var(--teal); color: var(--ink); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font: 400 17px/1.55 var(--body);
  font-feature-settings: "kern" 1; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 {
  margin: 0; font-family: var(--head); font-weight: 700; line-height: 1.05;
  text-transform: uppercase; letter-spacing: 0.02em; hyphens: none;
}
h1 { font-size: clamp(40px, 6vw, 68px); }
h2 { font-size: clamp(32px, 4vw, 46px); }
h3 { font-size: 24px; letter-spacing: 0.03em; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.wrap { width: 100%; max-width: 1740px; margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 1100px) { :root { --gutter: 70px; } }
.section { padding: var(--section) 0; }
.section--grey { background: var(--grey); }
.eyebrow {
  display: block; margin-bottom: 12px; color: var(--teal-deep);
  font: 600 15px/1.2 var(--body); letter-spacing: 0.1em; text-transform: uppercase;
}
.lede { max-width: 60ch; color: var(--ink-soft); font-size: 18px; }
.section-head { margin-bottom: clamp(32px, 4vw, 48px); }
.section-head h2 { margin-bottom: 12px; }
.section-head .lede { margin: 0; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 12px 16px; background: var(--ink); color: #fff; }
.skip:focus { left: 8px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border: 2px solid transparent; border-radius: var(--radius);
  font: 700 19px/1 var(--head); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: background-color var(--ease), color var(--ease), border-color var(--ease), box-shadow var(--ease), transform 0.35s var(--out);
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); transition-duration: 0.1s; }
.btn--primary { background: var(--teal); color: var(--ink); }
.btn--primary:hover { background: var(--magenta); color: #fff; box-shadow: 0 10px 20px -14px rgba(254, 2, 151, 0.9); }
.btn--ghost { border-color: rgba(255, 255, 255, 0.75); color: #fff; }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; color: #fff; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #33404a; box-shadow: 0 10px 20px -14px rgba(20, 26, 29, 0.9); }
.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.text-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color var(--ease), text-decoration-color var(--ease);
}
.text-link:hover { color: var(--teal); text-decoration-color: var(--teal); }
.text-link svg { width: 18px; height: 18px; flex: none; transition: transform 0.4s var(--out); }
.text-link:hover svg { transform: translateX(3px); }

/* Header */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; color: #fff; }
.site-header::before { content: ""; position: absolute; inset: 0 0 -32px; z-index: -1; background: linear-gradient(180deg, rgba(20, 26, 29, 0.62) 0%, rgba(20, 26, 29, 0) 100%); pointer-events: none; }
.header-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--header-h); }
.logo { flex: none; display: block; }
.logo img { width: auto; height: 50px; }
.site-header .logo img { height: 68px; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.header-phone { order: 1; display: flex; align-items: center; min-height: 48px; padding: 0 10px 0 0; line-height: 1; text-decoration: none; }
.header-phone small { display: none; }
.header-phone span { font: 700 31px/1 var(--head); letter-spacing: 0.02em; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); transition: color var(--ease); }
.header-phone:hover span { color: var(--teal); }
.round-btn {
  display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%;
  transition: background-color var(--ease), color var(--ease), border-color var(--ease);
}
.round-btn svg { width: 21px; height: 21px; transition: transform 0.4s var(--out); }
.round-btn--call { order: 3; background: var(--teal); color: var(--ink); }
.round-btn--call:hover { background: var(--magenta); color: #fff; }
.round-btn--call:hover svg { transform: rotate(-12deg); }
.header-book { order: 2; min-height: 48px; padding: 0 22px; }
.menu-toggle {
  order: 4; display: inline-flex; align-items: center; min-height: 52px; padding: 0; border: 0; background: none;
  color: var(--ink); cursor: pointer;
}
.menu-toggle-label { display: none; }
.round-btn--call, .round-btn--menu { width: 52px; height: 52px; }
.round-btn--menu { background: var(--teal); color: var(--ink); }
.round-btn--call { margin-right: -4px; }
.burger, .x-lines { position: relative; display: block; width: 20px; height: 14px; }
.burger span, .x-lines span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; }
.burger span { transition: width 0.4s var(--out); }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 6px; width: 65%; }
.burger span:nth-child(3) { top: 12px; }
.menu-toggle:hover .round-btn--menu { background: var(--magenta); color: #fff; }
.menu-toggle:hover .burger span:nth-child(2) { width: 100%; }
@media (max-width: 1000px) { .header-phone { display: none; } }
@media (max-width: 900px) {
  :root { --header-h: 78px; }
  .logo img { height: 40px; }
  .site-header .logo img { height: 52px; }
  body { padding-bottom: 72px; }
}
@media (max-width: 600px) {
  .header-book { display: none; }
  .header-actions { gap: 10px; }
  .round-btn--call, .round-btn--menu { width: 48px; height: 48px; }
  .round-btn--call { margin-right: 0; }
}
@media (max-width: 380px) { .logo img { height: 34px; } .site-header .logo img { height: 44px; } }
@media (max-width: 359px) { .header-bar { gap: 12px; } .site-header .logo img { height: 36px; } .round-btn--call, .round-btn--menu { width: 44px; height: 44px; } }

/* Side menu */
html.menu-is-open { overflow: hidden; }
html.menu-is-open body { padding-right: var(--sbw, 0px); }
.menu-backdrop {
  position: fixed; inset: 0; z-index: 90; background: rgba(20, 26, 29, 0.55);
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s;
}
.menu-is-open .menu-backdrop { opacity: 1; visibility: visible; transition: opacity 0.45s ease; }
.side-menu {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; display: flex; flex-direction: column;
  width: min(480px, 100%); height: 100%; height: 100dvh; padding: 22px 40px 0;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background:
    linear-gradient(var(--magenta), var(--magenta)) 0 0 / 4px 0 no-repeat,
    linear-gradient(var(--teal), var(--teal)) 0 56px / 4px 0 no-repeat,
    var(--white);
  color: var(--ink); box-shadow: -28px 0 56px -40px rgba(20, 26, 29, 0.7);
  transform: translateX(100%); visibility: hidden;
  transition: transform 0.32s var(--in), visibility 0s 0.32s, background-size 0.2s ease;
}
.menu-is-open .side-menu {
  transform: none; visibility: visible;
  background-size: 4px 56px, 4px 100%, auto;
  transition: transform 0.55s var(--out), background-size 0.9s var(--out) 0.15s;
}
.side-menu-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.side-menu-top .logo img { height: 44px; }
.menu-close {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; border: 2px solid var(--ink); border-radius: 50%;
  background: none; color: var(--ink); cursor: pointer; transition: border-color var(--ease), color var(--ease), transform 0.45s var(--out);
}
.menu-close:hover { border-color: var(--magenta); color: var(--magenta); transform: rotate(90deg); }
.x-lines span { top: 6px; transition: transform 0.45s var(--out) 0.12s; }
.x-lines span:nth-child(1) { transform: translateY(-6px); }
.x-lines span:nth-child(2) { transform: translateY(6px); }
.menu-is-open .x-lines span:nth-child(1) { transform: rotate(45deg); }
.menu-is-open .x-lines span:nth-child(2) { transform: rotate(-45deg); }
.side-nav ul { margin: 0; padding: 8px 0 0; list-style: none; }
.side-nav li, .side-cta, .side-contact, .side-foot .social { opacity: 0; transform: translateX(32px); transition: opacity 0.2s ease, transform 0.2s ease; }
.menu-is-open .side-nav li, .menu-is-open .side-cta, .menu-is-open .side-contact, .menu-is-open .side-foot .social {
  opacity: 1; transform: none; transition: opacity 0.45s ease, transform 0.6s var(--out); transition-delay: calc(140ms + var(--i, 0) * 45ms);
}
.side-cta { --i: 5; }
.side-contact { --i: 6; }
.side-foot .social { --i: 7; }
.side-nav a {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 8px 0;
  border-bottom: 1px solid var(--line); font: 700 clamp(30px, 3.2vw, 38px)/1 var(--head); letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none;
}
.side-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--teal);
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--out);
}
.side-nav a span { position: relative; display: inline-block; transition: transform 0.45s var(--out), color var(--ease); }
.side-nav a span::before {
  content: ""; position: absolute; left: -30px; top: 50%; width: 18px; height: 3px; margin-top: -2px; border-radius: 2px;
  background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--out);
}
.side-nav a svg { width: 24px; height: 24px; flex: none; color: var(--teal-deep); opacity: 0; transform: translateX(-10px); transition: opacity var(--ease), transform 0.45s var(--out); }
.side-nav a:hover::after, .side-nav a:focus-visible::after { transform: scaleX(1); }
.side-nav a:hover span, .side-nav a:focus-visible span, .side-nav a[aria-current="page"] span { transform: translateX(30px); }
.side-nav a:hover span::before, .side-nav a:focus-visible span::before, .side-nav a[aria-current="page"] span::before { transform: scaleX(1); }
.side-nav a:hover svg, .side-nav a:focus-visible svg { opacity: 1; transform: none; }
.side-nav a[aria-current="page"] span::before { background: var(--magenta); }
.side-nav a:focus-visible { outline-offset: -3px; }
.side-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.side-cta .btn { padding: 0 14px; font-size: 17px; }
.side-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.side-contact a {
  display: flex; flex-direction: column; justify-content: center; min-height: 64px; padding: 10px 14px; border-radius: var(--radius);
  background: var(--grey); font: 700 21px/1.1 var(--head); letter-spacing: 0.02em; text-decoration: none; transition: background-color var(--ease), color var(--ease);
}
.side-contact small { margin-bottom: 5px; color: var(--ink-soft); font: 600 14px/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; }
.side-contact a:hover { background: #e5eaec; color: var(--teal-deep); }
.side-foot { position: relative; display: flex; align-items: flex-start; flex: 1 0 auto; min-height: 112px; max-height: 300px; margin-top: auto; padding-top: 28px; }
.side-foot::after {
  content: ""; position: absolute; left: -40px; right: -40px; bottom: 22px; height: 2px;
  background: linear-gradient(90deg, var(--magenta) 0 76px, transparent 76px 88px, var(--teal) 88px);
  transform: scaleX(0); transform-origin: right; transition: transform 0.2s ease;
}
.menu-is-open .side-foot::after { transform: none; transition: transform 1s var(--out) 0.25s; }
/* the car scales to the space left under the menu, so the panel never needs to scroll */
.side-car { position: absolute; top: 14px; right: -30px; bottom: 23px; left: 30%; display: flex; align-items: flex-end; justify-content: flex-end; margin: 0; pointer-events: none; }
.side-car img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; opacity: 0; transform: translateX(90px); clip-path: inset(0 0 0 100%); transition: opacity 0.2s ease, transform 0.2s ease, clip-path 0.2s ease; }
.menu-is-open .side-car img { opacity: 1; transform: none; clip-path: inset(0 0 0 0); transition: opacity 0.4s ease 0.3s, transform 1s var(--out) 0.3s, clip-path 0.9s var(--out) 0.3s; }
.side-foot .social a { border-color: var(--line); color: var(--ink); }
.side-foot .social a:hover { border-color: var(--magenta); color: var(--magenta); }
@media (max-width: 560px) {
  .side-menu { padding: 16px 20px 0; }
  .side-menu-top { padding-bottom: 16px; }
  .side-menu-top .logo img { height: 38px; }
  .side-nav a { min-height: 58px; font-size: 30px; }
  .side-cta .btn { min-height: 50px; font-size: 16px; }
  .side-contact a { font-size: 19px; }
  .side-foot { min-height: 96px; }
  .side-foot::after { left: -20px; right: -20px; }
  .side-car { right: -18px; left: 36%; }
}
@media (min-width: 561px) and (max-height: 780px) {
  .side-menu { padding-top: 16px; }
  .side-menu-top { padding-bottom: 12px; }
  .side-nav a { min-height: 52px; font-size: 32px; }
  .side-cta { margin-top: 14px; }
}
@media (max-width: 560px) and (max-height: 720px) {
  .side-menu-top { padding-bottom: 12px; }
  .side-nav a { min-height: 50px; font-size: 27px; }
  .side-cta { margin-top: 14px; }
}

/* Mobile action bar */
.action-bar { display: none; }
@media (max-width: 900px) {
  .action-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: var(--white); border-top: 1px solid var(--line);
  }
  .action-bar .btn { min-height: 52px; padding: 0 12px; }
}

/* Hero */
.hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(600px, 82vh, 760px); padding-top: var(--header-h); color: #fff; background: var(--ink); }
.hero picture, .hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0; transition: opacity 0.9s ease; }
.hero-video.is-playing { opacity: 1; }
/* decorative background video: no controls on any device; the poster image shows until it is actually playing */
.hero-video { pointer-events: none; }
.hero-video::-webkit-media-controls, .hero-video::-webkit-media-controls-start-playback-button, .hero-video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(20, 26, 29, 0.9) 0%, rgba(20, 26, 29, 0.72) 45%, rgba(20, 26, 29, 0.25) 100%);
}
.hero .wrap { padding-top: 56px; padding-bottom: 56px; }
.hero-inner { max-width: 640px; }
.hero .eyebrow { color: var(--teal); }
.hero h1 { margin-bottom: 18px; }
.hero p { max-width: 52ch; margin-bottom: 30px; color: #e6eaec; font-size: clamp(18px, 2vw, 20px); }
.hero .text-link { margin-top: 14px; color: #fff; }
.hero .text-link:hover { color: var(--teal); }
/* mobile: the hero sizes to its content (with a sensible floor) and centres it below the header */
@media (max-width: 700px) {
  .hero { align-items: center; min-height: clamp(460px, 70svh, 580px); }
  .hero::before { background: linear-gradient(180deg, rgba(20, 26, 29, 0.6) 0%, rgba(20, 26, 29, 0.74) 45%, rgba(20, 26, 29, 0.88) 100%); }
  .hero picture img, .hero-video { object-position: 50% 40%; }
  .hero .wrap { padding-top: 36px; padding-bottom: 44px; }
  .hero .eyebrow { margin-bottom: 12px; }
  .hero h1 { margin-bottom: 14px; font-size: clamp(34px, 9.6vw, 44px); line-height: 1; }
  .hero p { max-width: 34ch; margin-bottom: 26px; font-size: 17px; line-height: 1.5; }
  .hero .btn-row { gap: 10px; }
  .hero .btn-row .btn { flex: 1 1 100%; min-height: 50px; }
  .hero .text-link { margin-top: 16px; }
}
.nw { white-space: nowrap; }
@media (max-width: 360px) { .hero .eyebrow { letter-spacing: 0.1em; } }
@media (max-width: 700px) and (max-height: 700px) {
  .hero { min-height: 0; }
}
/* Home hero: centred */
.hero .hero-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.hero h1, .hero p { margin-left: auto; margin-right: auto; }
.hero h1 { max-width: 640px; }
.hero .btn-row { justify-content: center; }
@media (min-width: 701px) {
  .hero::before { background: radial-gradient(70% 80% at 50% 50%, rgba(20, 26, 29, 0.82) 0%, rgba(20, 26, 29, 0.62) 100%); }
}

/* Trust strip: one floating pill, lifted onto the hero edge on Home */
.trust { position: relative; z-index: 3; }
.hero + .trust { margin-top: -46px; }
.section + .trust { padding-bottom: clamp(48px, 6vw, 80px); }
.trust-bar {
  display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 10px 26px; list-style: none;
  background: var(--lift-face); border: 1px solid var(--lift-edge); border-radius: 999px; box-shadow: var(--lift-shadow);
}
.trust-item { position: relative; display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 12px 22px; }
.trust-item + .trust-item::before {
  content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 1px;
  background: linear-gradient(transparent, var(--line) 25%, var(--line) 75%, transparent);
}
.trust-icon {
  position: relative; display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 14px;
  background: rgba(26, 180, 206, 0.12); color: var(--teal-deep);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--out);
}
.trust-icon svg { display: block; width: 26px; height: 26px; overflow: visible; }
.trust-icon::after {
  content: ""; position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border: 2px solid var(--white); border-radius: 50%;
  background: var(--magenta); transform: scale(0); transition: transform 0.35s var(--out);
}
.trust-label { font: 600 19px/1.15 var(--head); letter-spacing: 0.05em; text-transform: uppercase; }
.trust-label::after {
  content: ""; display: block; width: 22px; height: 2px; margin-top: 8px; border-radius: 2px; background: var(--teal);
  transform-origin: left; transition: transform 0.4s var(--out);
}
@media (hover: hover) {
  .trust-item:hover .trust-icon { background: var(--magenta); color: #fff; transform: translateY(-2px) rotate(-4deg); }
  .trust-item:hover .trust-icon::after { background: var(--teal); transform: scale(1); }
  .trust-item:hover .trust-label::after { transform: scaleX(1.8); }
}
/* Draw-on: the inline script arms the strip only when it can animate; icons stay drawn otherwise */
.trust.is-armed .trust-icon { background-color: rgba(26, 180, 206, 0); }
.trust.is-armed .trust-icon svg > * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.trust.is-armed .trust-label::after { transform: scaleX(0); }
.trust.is-drawn .trust-icon { background-color: rgba(26, 180, 206, 0.12); transition: background-color 0.6s ease calc(var(--i) * 120ms); }
.trust.is-drawn .trust-icon svg > * { stroke-dashoffset: 0; transition: stroke-dashoffset 0.95s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--i) * 120ms + var(--j, 0) * 90ms); }
.trust.is-drawn .trust-label::after { transform: none; transition: transform 0.6s var(--out) calc(var(--i) * 120ms + 700ms); }
/* the pill overlaps the hero's bottom edge, so lift the video control and the hero copy clear of it */
@media (max-width: 1000px) {
  .hero + .trust { margin-top: -40px; }
  .trust-bar { grid-template-columns: 1fr 1fr; padding: 6px 10px; border-radius: 28px; }
  .trust-item { min-height: 72px; padding: 12px 18px; }
  .trust-item:nth-child(3)::before { display: none; }
  .trust-item:nth-child(n+3)::after {
    content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
  }
}
@media (max-width: 700px) { .hero:has(+ .trust) .wrap { padding-bottom: 76px; } }
@media (max-width: 560px) {
  .hero + .trust { margin-top: -32px; }
  .trust-bar { padding: 4px 6px; border-radius: 22px; }
  .trust-item { gap: 8px; min-height: 64px; padding: 10px 8px; }
  .trust-item + .trust-item::before { top: 14px; bottom: 14px; }
  .trust-item:nth-child(n+3)::after { left: 10px; right: 10px; }
  .trust-icon { width: 36px; height: 36px; border-radius: 10px; }
  .trust-icon svg { width: 20px; height: 20px; }
  .trust-icon::after { width: 9px; height: 9px; }
  .trust-label { font-size: 15px; letter-spacing: 0.03em; }
  .trust-label::after { display: none; }
}

/* Services intro: heading left, book/call panel right, one hairline with a teal accent ties both to the grid */
.section-head--split {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px 48px;
  margin-bottom: clamp(28px, 3.5vw, 40px); padding-bottom: clamp(24px, 3vw, 32px); border-bottom: 1px solid var(--line);
}
.section-head--split::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 64px; height: 2px; border-radius: 2px; background: var(--teal); }
.section-head--split h2 { margin-bottom: 10px; }
.quick-actions {
  display: grid; grid-template-columns: 1fr 1fr; min-width: 480px; overflow: hidden;
  border: 1px solid var(--lift-edge); border-radius: var(--radius-lg); background: var(--lift-face); box-shadow: var(--lift-shadow);
}
.qa {
  display: flex; align-items: center; gap: 14px; min-height: 80px; padding: 14px 18px;
  color: var(--ink); text-decoration: none; transition: background-color 0.3s ease;
}
.qa + .qa { border-left: 1px solid var(--lift-edge); }
.qa-icon {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(26, 180, 206, 0.12); color: var(--teal-deep);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--out);
}
.qa-icon svg { width: 21px; height: 21px; }
.qa small { display: block; margin-bottom: 4px; color: var(--ink-soft); font: 600 13px/1.2 var(--body); letter-spacing: 0.08em; text-transform: uppercase; }
.qa strong { display: block; font: 700 24px/1 var(--head); letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }
.qa > svg { flex: none; width: 18px; height: 18px; margin-left: auto; color: var(--teal-deep); transition: transform 0.4s var(--out); }
.qa:focus-visible { outline-offset: -3px; }
@media (hover: hover) {
  .qa:hover { background: rgba(254, 2, 151, 0.04); }
  .qa:hover .qa-icon { background: var(--magenta); color: #fff; transform: translateY(-1px) rotate(-4deg); }
  .qa:hover > svg { color: var(--magenta); transform: translateX(3px); }
}
@media (max-width: 900px) {
  .section-head--split { grid-template-columns: 1fr; }
  .quick-actions { min-width: 0; }
}
/* phones already have Call / Book in the fixed action bar */
@media (max-width: 600px) { .quick-actions { display: none; } }

/* Service tiles: bento grid. MOT leads (2x2), servicing runs wide, the rest are single cells */
.tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(190px, 16vw, 250px);
  gap: 16px; margin: 0; padding: 0; list-style: none;
}
.tiles > .bento-lg { grid-column: span 2; grid-row: span 2; }
.tiles > .bento-wide { grid-column: span 2; }
.tile {
  --rx: 0deg; --ry: 0deg; --lift: 0px; --ix: 0px; --iy: 0px;
  position: relative; display: block; height: 100%; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--ink); color: #fff; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(20, 26, 29, 0.06), 0 2px 6px -4px rgba(20, 26, 29, 0.2);
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
  transition: transform 0.6s var(--out), box-shadow 0.6s var(--out);
}
.tile.is-tracking { transition: transform 0.18s ease-out, box-shadow 0.6s var(--out); }
.tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: translate(var(--ix), var(--iy)) scale(1.02); transition: transform 0.9s var(--out);
}
.tile.is-tracking img { transition: transform 0.3s ease-out; }
.tile::before, .tile::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.tile::before { background: linear-gradient(180deg, rgba(20, 26, 29, 0) 38%, rgba(20, 26, 29, 0.86) 100%); }
.tile::after { background: linear-gradient(180deg, rgba(20, 26, 29, 0.1) 0%, rgba(20, 26, 29, 0.9) 100%); opacity: 0; transition: opacity 0.5s ease; }
.tile-body { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; }
.tile-title { display: block; font: 700 23px/1.05 var(--head); letter-spacing: 0.04em; text-transform: uppercase; text-wrap: balance; }
.bento-lg .tile-title { font-size: clamp(28px, 2.6vw, 36px); }
.tile-title::after {
  content: ""; display: block; width: 24px; height: 2px; margin-top: 10px; border-radius: 2px; background: var(--teal);
  transform-origin: left; transition: transform 0.5s var(--out);
}
.tile-sub { display: block; margin-top: 6px; color: var(--teal); font-weight: 600; font-size: 16px; }
.tile-desc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--out); }
.tile-desc > span { display: block; min-height: 0; overflow: hidden; }
.tile-desc > span > span {
  display: block; max-width: 36ch; margin-top: 10px; color: #e3e8eb; font-size: 16px; line-height: 1.45;
  opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.5s var(--out);
}
.tile-arrow {
  position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%; background: rgba(20, 26, 29, 0.35); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.tile-arrow svg { width: 17px; height: 17px; transform: rotate(-45deg); transition: transform 0.4s var(--out); }
.tile:focus-visible .tile-desc, .tile:focus-visible::after { grid-template-rows: 1fr; opacity: 1; }
.tile:focus-visible .tile-desc > span > span { opacity: 1; transform: none; }
@media (hover: hover) {
  .tiles > li:hover > .tile { --lift: -6px; box-shadow: 0 0 0 1px rgba(20, 26, 29, 0.06), 0 4px 8px -4px rgba(20, 26, 29, 0.18), 0 30px 50px -26px rgba(20, 26, 29, 0.6); }
  .tiles > li:hover > .tile img { transform: translate(var(--ix), var(--iy)) scale(1.07); }
  .tiles > li:hover > .tile::after { opacity: 1; }
  .tiles > li:hover > .tile .tile-desc { grid-template-rows: 1fr; }
  .tiles > li:hover > .tile .tile-desc > span > span { opacity: 1; transform: none; transition-delay: 0.08s; }
  .tiles > li:hover > .tile .tile-title::after { transform: scaleX(2); }
  .tiles > li:hover > .tile .tile-arrow { background: var(--teal); color: var(--ink); }
  .tiles > li:hover > .tile .tile-arrow svg { transform: rotate(-45deg) translateX(2px); }
}
/* touch: no hover, so descriptions stay visible wherever the card is wide enough to carry them */
@media (hover: none) {
  .tile-desc { display: block; }
  .tile-desc > span > span { opacity: 1; transform: none; }
}
@media (hover: none) and (max-width: 600px) {
  .tiles > li:not(.bento-lg) .tile-desc { display: none; }
}
.tile--cta { background: radial-gradient(120% 120% at 100% 0%, rgba(26, 180, 206, 0.2), rgba(26, 180, 206, 0) 60%), var(--ink); }
.tile--cta::before, .tile--cta::after { display: none; }
.tile--cta .tile-arrow svg, .tiles > li:hover > .tile--cta .tile-arrow svg { transform: none; }
.tile--cta .tile-title { font-size: 26px; }
.tile--cta .tile-title::after { background: var(--magenta); }
.tile--cta .tile-sub { font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; letter-spacing: 0.01em; line-height: 1.15; }
@media (max-width: 1000px) {
  .tiles { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 210px; gap: 12px; }
  .tiles > .bento-lg { grid-row: span 1; }
}
@media (max-width: 600px) {
  .tiles { grid-auto-rows: 158px; gap: 10px; }
  .tiles > .bento-wide { grid-column: span 1; }
  .tiles > .bento-cta { grid-column: span 2; }
  .tile-body { left: 14px; right: 14px; bottom: 14px; }
  .tile-title, .tile--cta .tile-title { font-size: 19px; }
  .bento-lg .tile-title { font-size: 24px; }
  .tile-title::after { margin-top: 8px; }
  .tile-sub, .tile--cta .tile-sub { font-size: 24px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.15; }
  .tile-desc > span > span { margin-top: 8px; font-size: 15px; }
  .tile-arrow { display: none; }
}

/* Split: image + text */

/* About: "studio" composition. Dark wall with a teal backlight, the car driving forward onto the light floor,
   heading + facts beside it. */
.garage-grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  grid-template-areas: "stage head" "stage pillars" "stage cta";
  grid-template-rows: auto auto 1fr; column-gap: clamp(48px, 6vw, 104px); align-items: start;
}
.garage-head { grid-area: head; align-self: end; }
.garage-head h2 { max-width: 13ch; margin-bottom: 14px; font-size: clamp(36px, 4.1vw, 56px); line-height: 1; }
.garage-sub { position: relative; margin-bottom: 18px; padding-top: 16px; color: var(--teal-deep); font-weight: 600; font-size: 18px; }
.garage-sub::before { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 2px; border-radius: 2px; background: var(--teal); transform-origin: left; }
.garage-lead { max-width: 54ch; margin: 0; color: var(--ink-soft); font-size: 18px; }
.garage-stage {
  grid-area: stage; align-self: center; position: relative; aspect-ratio: 1 / 1; container-type: inline-size;
  --wall-bottom: 20%; --car-w: 70%; --car-left: 15%; --car-bottom: 4%;
}
.stage-wall {
  position: absolute; inset: 0 0 var(--wall-bottom) 0; overflow: hidden; border-radius: 22px;
  background:
    radial-gradient(58% 60% at 50% 62%, rgba(26, 180, 206, 0.42), rgba(26, 180, 206, 0) 72%),
    radial-gradient(90% 70% at 50% 120%, rgba(254, 2, 151, 0.12), rgba(254, 2, 151, 0) 60%),
    linear-gradient(180deg, #232c31 0%, #151b1e 100%);
  box-shadow: 0 30px 60px -36px rgba(20, 26, 29, 0.7);
}
.stage-wall::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--magenta) 0 64px, transparent 64px 76px, var(--teal) 76px);
}
.stage-word {
  position: absolute; top: 15%; left: 50%; transform: translateX(-50%);
  font: 700 clamp(56px, 8vw, 118px)/0.9 var(--head); font-size: 16cqi; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.16);
}
.stage-plate {
  position: absolute; top: 22px; left: 26px; right: 26px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px 0;
  margin: 0; padding: 0; list-style: none; color: rgba(255, 255, 255, 0.82);
  font: 600 13px/1.4 var(--body); letter-spacing: 0.12em; text-transform: uppercase;
}
.stage-plate li + li::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 10px 2px; border-radius: 50%; background: var(--teal); vertical-align: middle; }
.stage-floor {
  position: absolute; left: 6%; right: 6%; bottom: 0; height: 10%; z-index: 1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(20, 26, 29, 0.16), rgba(20, 26, 29, 0) 100%);
}
.stage-car { position: absolute; left: var(--car-left); bottom: var(--car-bottom); z-index: 2; width: var(--car-w); height: auto; }
.pillars { grid-area: pillars; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; margin: 32px 0 0; padding: 0; list-style: none; }
.pillars li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-content: start; padding: 20px 0 18px; border-top: 1px solid var(--line); }
.pillar-icon { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(26, 180, 206, 0.12); color: var(--teal-deep); transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--out); }
.pillars h3 { margin: 2px 0 6px; font-size: 19px; letter-spacing: 0.04em; }
.pillars p { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.45; }
.garage-cta { grid-area: cta; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 26px; }
@media (hover: hover) {
  .pillars li:hover .pillar-icon { background: var(--magenta); color: #fff; }
  .pillars li:hover .pillar-icon { transform: translateY(-1px) rotate(-4deg); }
}
/* entrance: armed by site.js only when the section starts below the fold and motion is allowed */
.garage.is-armed .stage-wall { clip-path: inset(100% 0 0 0 round 22px); transition: clip-path 1s var(--out); }
.garage.is-armed .stage-word, .garage.is-armed .stage-plate { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease 0.45s, transform 1s var(--out) 0.45s; }
.garage.is-armed .stage-word { transform: translate(-50%, 16px); }
.garage.is-armed .stage-car { opacity: 0; transform: translateY(26px) scale(0.93); transform-origin: 50% 100%; transition: opacity 0.8s ease 0.3s, transform 1.2s var(--out) 0.3s; }
.garage.is-armed .stage-floor { opacity: 0; transform: scaleX(0.55); transition: opacity 0.8s ease 0.5s, transform 1.2s var(--out) 0.5s; }
.garage.is-armed .garage-head > *, .garage.is-armed .pillars li, .garage.is-armed .garage-cta { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.9s var(--out); }
.garage.is-armed .garage-head > :nth-child(2) { transition-delay: 0.08s; }
.garage.is-armed .garage-head > :nth-child(3) { transition-delay: 0.16s; }
.garage.is-armed .pillars li { transition-delay: calc(0.3s + var(--i) * 0.08s); }
.garage.is-armed .garage-cta { transition-delay: 0.65s; }
.garage.is-armed .garage-sub::before { transform: scaleX(0); transition: transform 0.9s var(--out) 0.3s; }
.garage.is-in .stage-wall { clip-path: inset(0 0 0 0 round 22px); }
.garage.is-in .stage-word { opacity: 1; transform: translateX(-50%); }
.garage.is-in .stage-plate, .garage.is-in .stage-car, .garage.is-in .garage-head > *, .garage.is-in .pillars li, .garage.is-in .garage-cta { opacity: 1; transform: none; }
.garage.is-in .stage-floor { opacity: 1; transform: none; }
.garage.is-in .garage-sub::before { transform: none; }
@media (max-width: 1000px) {
  .garage-grid { grid-template-columns: 1fr; grid-template-areas: "head" "stage" "pillars" "cta"; grid-template-rows: none; }
  .garage-head h2 { max-width: none; }
  .garage-stage { aspect-ratio: 16 / 10; margin-top: 32px; --wall-bottom: 18%; --car-w: 56%; --car-left: 22%; --car-bottom: 4%; }
}
@media (max-width: 600px) {
  .garage-stage { aspect-ratio: 5 / 4.4; margin-top: 24px; --wall-bottom: 17%; --car-w: 76%; --car-left: 12%; --car-bottom: 3%; }
  .garage-lead { font-size: 17px; }
  .stage-wall { border-radius: 16px; }
  .stage-plate { top: 14px; left: 14px; right: 14px; font-size: 11px; letter-spacing: 0.1em; }
  .stage-plate li + li::before { margin: 0 7px 2px; }
  .stage-word { top: 30%; }
  .pillars { grid-template-columns: 1fr; margin-top: 18px; }
  .pillars li { grid-template-columns: 36px 1fr; padding: 14px 0 12px; }
  .pillar-icon { width: 36px; height: 36px; border-radius: 10px; }
  .pillars h3 { font-size: 18px; margin-bottom: 4px; }
  .garage-cta .btn { flex: 1 1 100%; }
}

/* Manufacturer rail: a compact raised panel at the foot of the About band, cut from the same dark "studio"
   material as the About stage. One slow, seamless drift (two identical sets, margins not gaps, so -50% is the loop point). */
.brands { position: relative; margin-top: calc(var(--section) * -0.45); padding: 0 0 clamp(48px, 6vw, 80px); background: var(--grey); }
.brands-panel {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 32px;
  padding: 22px 28px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 20px;
  background:
    radial-gradient(50% 180% at 55% 0%, rgba(26, 180, 206, 0.2), rgba(26, 180, 206, 0) 70%),
    linear-gradient(180deg, #222b30 0%, #151a1d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 4px rgba(20, 26, 29, 0.12), 0 22px 40px -22px rgba(20, 26, 29, 0.5), 0 30px 60px -28px rgba(254, 2, 151, 0.2);
}
.brands-panel::before { content: ""; position: absolute; top: -1px; left: 28px; width: 64px; height: 2px; border-radius: 2px; background: var(--magenta); }
.brands-label {
  margin: 0; padding-right: 32px; border-right: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff; font: 700 20px/1.05 var(--head); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.brands-label span { color: var(--teal); }
.brands-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.brands-track { display: flex; width: max-content; animation: brands-drift 70s linear infinite; }
.brands-viewport:hover .brands-track { animation-play-state: paused; }
.brands-set { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.brands-set li { display: grid; place-items: center; flex: none; height: 48px; margin-right: 60px; }
.brands-set img { width: var(--w); height: var(--h); opacity: 0.6; transition: opacity 0.3s ease, transform 0.4s var(--out), filter 0.4s ease; }
.brands-set li:hover img { opacity: 1; transform: translateY(-2px); filter: drop-shadow(0 6px 10px rgba(26, 180, 206, 0.3)); }
@keyframes brands-drift { to { transform: translateX(-50%); } }
@media (max-width: 760px) {
  .brands { margin-top: calc(var(--section) * -0.35); }
  .brands-panel { grid-template-columns: 1fr; gap: 12px; padding: 18px 0 16px; border-radius: 16px; }
  .brands-panel::before { left: 50%; margin-left: -32px; }
  .brands-label { padding: 0; border: 0; font-size: 17px; text-align: center; }
  .brands-set li { height: 38px; margin-right: 44px; }
  .brands-set img { width: calc(var(--w) * 0.78); height: calc(var(--h) * 0.78); }
  .brands-track { animation-duration: 55s; }
}
@media (prefers-reduced-motion: reduce) {
  .brands-track { animation: none; }
  .brands-viewport { overflow-x: auto; scrollbar-width: none; }
  .brands-set + .brands-set { display: none; }
}

/* Tyre search: centred intro, then one console: the widget full width over the garage's own photo,
   with a slim three-up info strip beneath it in the same box. */
.tyres { position: relative; overflow: hidden; background: var(--white); }
.tyres::before {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 60%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 60%, rgba(26, 180, 206, 0.1), rgba(26, 180, 206, 0) 70%);
}
.tyres .wrap { position: relative; }
/* heading lives inside the console: above the widget on smaller screens, over the photo's open left side from 1200px
   (the widget's form sits on the right) */
.tyre-stage { position: relative; min-width: 0; }
.tyres-head { max-width: 640px; padding: clamp(20px, 3vw, 32px) clamp(18px, 3vw, 32px) 22px; color: #fff; text-align: left; }
.tyres-head h2 { margin: 0 0 14px; color: #fff; font-size: clamp(32px, 3.6vw, 54px); line-height: 1; }
.tyres-head p { max-width: 44ch; margin: 0; color: #d1dade; font-size: 18px; line-height: 1.55; }
.tyres-head p::before { content: ""; display: block; width: 56px; height: 3px; margin: 0 0 16px; border-radius: 2px; background: linear-gradient(90deg, var(--teal), var(--magenta)); }
@media (min-width: 1200px) {
  .tyres-head { position: absolute; z-index: 2; left: clamp(32px, 3.4vw, 56px); top: 50%; max-width: min(44%, calc(100% - 680px)); padding: 0; transform: translateY(-50%); pointer-events: none; }
  .tyres-head h2, .tyres-head p { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); }
  .tyre-widget.is-loaded::before { background: linear-gradient(90deg, rgba(20, 26, 29, 0.82) 0%, rgba(20, 26, 29, 0.5) 34%, rgba(20, 26, 29, 0.18) 58%, rgba(20, 26, 29, 0.45) 100%); }
  .tyres-console:has(.tyre-widget.is-empty) .tyres-head { position: static; max-width: 640px; padding: 32px 32px 22px; transform: none; }
}
.tyres-console {
  position: relative; display: grid; grid-template-columns: 1fr; gap: 12px; padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 22px; background: linear-gradient(180deg, #232c31 0%, #151a1d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 4px rgba(20, 26, 29, 0.12), 0 26px 50px -26px rgba(20, 26, 29, 0.55), 0 34px 70px -30px rgba(254, 2, 151, 0.24);
}
.tyres-console::before { content: ""; position: absolute; top: -1px; left: 32px; width: 64px; height: 2px; border-radius: 2px; background: var(--magenta); }
/* the widget runs the full width of the box; the garage's own photo fills the box behind it (site.js clears the
   widget's built-in backdrop and black fill so the photo shows through) */
.tyre-widget {
  position: relative; min-width: 0; min-height: 410px; overflow-x: auto; overflow-y: hidden; border-radius: 14px;
  background: linear-gradient(90deg, #0d1011, #1d2427 50%, #0d1011); background-size: 200% 100%; animation: shimmer 1.6s linear infinite;
}
.tyre-widget.is-loaded {
  min-height: 0; animation: none;
  background: #11171a url("https://static.wixstatic.com/media/de5e42_2ceea7cc4f21412b9e7c28a80e437838~mv2.jpeg/v1/fill/w_2400,h_900,al_c,q_80,enc_avif,quality_auto/tyres.jpeg") center / cover no-repeat;
}
.tyre-widget.is-loaded::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(20, 26, 29, 0.15) 0%, rgba(20, 26, 29, 0.35) 55%, rgba(20, 26, 29, 0.6) 100%);
}
.tyre-widget > :not(script) { position: relative; z-index: 1; }
@media (min-width:761px){ .tyre-widget > :not(script) { width: 100% !important; max-width: none !important; } }
.tyres-console:has(.tyre-widget.is-empty) .tyre-widget { display: none; }
.tyres-info {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 36px; padding: 20px 28px; border-radius: 14px;
  background: radial-gradient(60% 120% at 100% 0%, rgba(26, 180, 206, 0.12), rgba(26, 180, 206, 0) 70%), rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); color: #fff;
}
.tyres-info h3 { margin: 0; padding-right: 36px; border-right: 1px solid rgba(255, 255, 255, 0.12); font-size: 22px; letter-spacing: 0.04em; white-space: nowrap; }
.tyres-info ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; margin: 0; padding: 0; list-style: none; }
.tyres-info li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.info-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(26, 180, 206, 0.16); color: var(--teal); }
.tyres-info strong { display: block; margin-bottom: 2px; font: 700 17px/1.15 var(--head); letter-spacing: 0.04em; text-transform: uppercase; }
.tyres-info span:not(.info-icon) { display: block; color: #b9c4c9; font-size: 15px; line-height: 1.45; }
.tyres-info a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin-top: 2px; color: var(--teal); font-weight: 600; text-decoration: none; transition: color 0.25s ease; }
.tyres-info a svg { width: 16px; height: 16px; transition: transform 0.35s var(--out); }
.tyres-info a:hover { color: var(--magenta); }
.tyres-info a:hover svg { transform: translateX(3px); }
.tyres-help { margin: 16px 0 0; color: var(--ink-soft); font-size: 15px; text-align: center; }
.tyres-help a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--teal-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; transition: color 0.25s ease; }
.tyres-help a:hover { color: var(--magenta); }
.tyres-help svg { width: 16px; height: 16px; }
@media (max-width: 1100px) {
  .tyres-info { grid-template-columns: 1fr; }
  .tyres-info h3 { padding: 0; border: 0; }
}
@media (max-width: 760px) {
  .tyres-console { padding: 8px; border-radius: 16px; }
  .tyre-widget { border-radius: 10px; min-height: 360px; }
  .tyres-info { padding: 20px; }
  .tyres-info ul { grid-template-columns: 1fr; gap: 0; }
  .tyres-info li { padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.09); }
  .tyres-info li:first-child { border-top: 0; padding-top: 4px; }
}
@media (prefers-reduced-motion: reduce) { .tyre-widget { animation: none; } }

/* Complete car care: an art-directed text column. Kicker + two-tone heading + short lead, then a lifted service
   index (hovering a service swaps the studio photo to it), then a grouped CTA with a call block. */
.care-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); align-items: center; gap: 48px clamp(48px, 5vw, 88px); }
.care-text { max-width: 660px; }
.care-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 20px; color: var(--teal-deep); font: 600 13px/1.2 var(--body); letter-spacing: 0.18em; text-transform: uppercase; }
.care-kicker::before { content: ""; width: 44px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--teal), var(--magenta)); }
.care-kicker i { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); }
.care-head h2 { margin: 0 0 20px; font-size: clamp(40px, 4.4vw, 62px); line-height: 0.98; }
.care-head h2 span { display: block; color: var(--teal-deep); }
.care-lead { max-width: 54ch; margin: 0 0 32px; color: var(--ink-soft); font-size: 18px; line-height: 1.6; }

.care-index { position: relative; margin: 0 0 32px; border: 1px solid var(--lift-edge); border-radius: 18px; background: var(--lift-face); box-shadow: var(--lift-shadow); overflow: hidden; }
.care-index::before { content: ""; position: absolute; left: 0; top: 0; width: 96px; height: 3px; background: linear-gradient(90deg, var(--magenta), var(--teal)); }
.care-index-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 18px 22px 16px; border-bottom: 1px solid var(--line); }
.care-index-head > span:first-child { color: var(--ink); font: 700 15px/1 var(--head); letter-spacing: 0.14em; text-transform: uppercase; }
.care-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px; border: 1px solid rgba(11, 115, 133, 0.22); border-radius: 999px; background: rgba(26, 180, 206, 0.08); color: var(--teal-deep); font: 600 14px/1 var(--body); }
.care-pill svg { width: 17px; height: 17px; }
.care-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.care-services li { border-bottom: 1px solid var(--line); }
.care-services li:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line); }
.care-svc {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 60px; padding: 14px 14px 14px 18px;
  color: var(--ink); font: 600 19px/1.1 var(--head); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.care-svc::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; border-radius: 0 2px 2px 0; background: var(--magenta); transform: translateY(-50%); transition: height 0.35s var(--out); }
.care-svc svg { width: 18px; height: 18px; flex: none; color: var(--teal-deep); opacity: 0.55; transition: transform 0.35s var(--out), opacity 0.3s ease, color 0.3s ease; }
.care-svc:hover, .care-svc:focus-visible { background: rgba(26, 180, 206, 0.07); color: var(--ink); }
.care-svc:hover::before, .care-svc:focus-visible::before { height: 60%; }
.care-svc:hover svg, .care-svc:focus-visible svg { opacity: 1; color: var(--magenta); transform: translateX(3px); }
.care-svc:focus-visible { outline-offset: -3px; }
.care-index-foot { display: flex; gap: 12px; margin: 0; padding: 16px 22px 18px; color: var(--ink-soft); font-size: 16px; line-height: 1.55; }
.care-index-foot svg { flex: none; width: 22px; height: 22px; margin-top: 1px; padding: 3px; border-radius: 50%; background: var(--teal); color: #fff; stroke-width: 3; }

.care-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.care-call { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding-left: 28px; border-left: 1px solid rgba(20, 26, 29, 0.16); color: var(--ink); text-decoration: none; }
.care-call-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(11, 115, 133, 0.3); border-radius: 50%; color: var(--teal-deep); transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.care-call-icon svg { width: 18px; height: 18px; }
.care-call-text { display: grid; gap: 3px; }
.care-call small { color: var(--ink-soft); font-size: 14px; line-height: 1.2; }
.care-call strong { font: 700 20px/1.1 var(--head); letter-spacing: 0.04em; text-transform: uppercase; transition: color 0.3s ease; }
.care-call:hover .care-call-icon { border-color: var(--magenta); background: var(--magenta); color: #fff; }
.care-call:hover strong { color: var(--teal-deep); }

.care-visual { position: relative; justify-self: end; width: 100%; max-width: 680px; margin: 0; }
/* the photo emerges out of a dark studio panel: masked so it fades up into a teal glow, with an outline word
   behind it and a quiet row of workshop labels on top (same language as the homepage studio, different composition) */
.care-stage {
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 1 / 1; border-radius: 26px;
  background: radial-gradient(75% 55% at 55% 78%, rgba(26, 180, 206, 0.3), rgba(26, 180, 206, 0) 70%), radial-gradient(50% 35% at 100% 0%, rgba(254, 2, 151, 0.12), rgba(254, 2, 151, 0) 70%), linear-gradient(180deg, #252e33 0%, #161a1d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 4px rgba(20, 26, 29, 0.1), 0 30px 60px -30px rgba(20, 26, 29, 0.6), 0 44px 90px -44px rgba(254, 2, 151, 0.35);
}
.care-stage::after { content: ""; position: absolute; z-index: 3; left: 28px; bottom: 0; width: 96px; height: 3px; border-radius: 2px 2px 0 0; background: linear-gradient(90deg, var(--magenta), var(--teal)); }
.care-stage-tags { position: absolute; z-index: 3; top: 26px; left: 28px; right: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; color: #d1dade; font: 600 13px/1 var(--body); letter-spacing: 0.22em; text-transform: uppercase; }
.care-stage-tags span + span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 16px 2px 0; border-radius: 50%; background: var(--teal); vertical-align: middle; }
.care-stage-word {
  position: absolute; z-index: 0; top: 13%; left: 50%; transform: translateX(-50%); white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.28); font: 700 clamp(56px, 7.2vw, 108px)/1 var(--head); letter-spacing: 0.04em; text-transform: uppercase;
}
.care-photo { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 74%; -webkit-mask-image: radial-gradient(120% 95% at 50% 100%, #000 52%, transparent 88%); mask-image: radial-gradient(120% 95% at 50% 100%, #000 52%, transparent 88%); }
.care-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 0.55s ease, transform 1.2s var(--out); }
.care-stage:hover .care-shot.is-on { transform: scale(1.03); }
.care-shot.is-on { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .care-grid { grid-template-columns: minmax(0, 1fr); }
  .care-visual { justify-self: stretch; max-width: none; }
  .care-stage { aspect-ratio: 16 / 10; }
  .care-photo { left: 30%; height: 100%; -webkit-mask-image: radial-gradient(110% 120% at 100% 60%, #000 50%, transparent 90%); mask-image: radial-gradient(110% 120% at 100% 60%, #000 50%, transparent 90%); }
  .care-stage-word { top: auto; bottom: 18%; left: 24px; transform: none; }
}
@media (max-width: 640px) {
  .care-stage { aspect-ratio: 4 / 5; border-radius: 20px; }
  .care-photo { left: 0; height: 74%; -webkit-mask-image: radial-gradient(120% 95% at 50% 100%, #000 52%, transparent 88%); mask-image: radial-gradient(120% 95% at 50% 100%, #000 52%, transparent 88%); }
  .care-stage-word { top: 15%; bottom: auto; left: 50%; transform: translateX(-50%); font-size: 54px; }
  .care-stage-tags { left: 20px; right: 20px; top: 20px; gap: 6px 12px; font-size: 12px; letter-spacing: 0.18em; }
  .care-stage-tags span + span::before { margin-right: 12px; }
  .care-lead { font-size: 17px; margin-bottom: 26px; }
  .care-kicker { gap: 6px 10px; letter-spacing: 0.12em; }
  .care-kicker::before { display: none; }
  .care-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .care-services li:not(:nth-child(3n + 1)) { border-left: 0; }
  .care-services li:nth-child(2n) { border-left: 1px solid var(--line); }
  .care-svc { min-height: 54px; padding: 12px 14px 12px 18px; font-size: 18px; }
  .care-index-head, .care-index-foot { padding-left: 18px; padding-right: 18px; }
  .care-cta .btn { width: 100%; }
  .care-call { padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .care-shot, .care-svc, .care-svc svg, .care-svc::before { transition: none; } }

/* Reviews: open composition on a cool teal-tinted field (breaks from the grey care band above and the dark booking
   band below). Oversized outline quote mark as the one decorative layer; editorial header with a Google source badge;
   the Elfsight widget sits open on the field, never boxed. A skeleton holds its height until it renders. */
.reviews {
  position: relative; overflow: hidden;
  background:
    radial-gradient(48% 70% at 0% 0%, rgba(26, 180, 206, 0.16), rgba(26, 180, 206, 0) 70%),
    radial-gradient(40% 60% at 100% 100%, rgba(254, 2, 151, 0.07), rgba(254, 2, 151, 0) 70%),
    linear-gradient(180deg, #e4f1f4 0%, #f3f8f9 100%);
}
.reviews .wrap { position: relative; }
.reviews-quote {
  position: absolute; z-index: 0; top: clamp(-40px, -2.6vw, -16px); right: calc(var(--gutter) + clamp(8px, 3vw, 48px)); width: clamp(92px, 14vw, 200px); height: auto;
  fill: none; stroke: var(--teal); stroke-width: 1.4; opacity: 0.45; pointer-events: none;
}
.reviews-head {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px;
  padding-bottom: clamp(24px, 3vw, 32px); border-bottom: 1px solid rgba(20, 26, 29, 0.12);
}
.reviews-head::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 96px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--teal), var(--magenta)); }
.reviews-intro { padding-top: clamp(28px, 3vw, 44px); }
.reviews-intro h2 { margin: 0 0 14px; font-size: clamp(38px, 5vw, 64px); line-height: 0.98; }
.reviews-intro .lede { margin: 0; max-width: 52ch; }

.g-badge {
  display: grid; grid-template-columns: 56px auto; grid-template-rows: auto auto; column-gap: 16px; align-items: center;
  min-width: 280px; padding: 16px 22px 16px 16px; border: 1px solid var(--lift-edge); border-radius: 16px;
  background: var(--lift-face); box-shadow: var(--lift-shadow); color: var(--ink); text-decoration: none;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.35s var(--out);
}
.g-mark { grid-row: span 2; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--line); border-radius: 50%; background: #fff; }
.g-text small { display: block; color: var(--ink-soft); font: 600 13px/1.2 var(--body); letter-spacing: 0.1em; text-transform: uppercase; }
.g-text strong { display: block; font: 700 26px/1.05 var(--head); letter-spacing: 0.03em; }
.g-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--teal-deep); font-weight: 600; font-size: 16px; transition: color 0.3s ease; }
.g-go svg { width: 16px; height: 16px; transition: transform 0.4s var(--out); }
.g-badge:hover { border-color: rgba(254, 2, 151, 0.35); box-shadow: var(--lift-shadow-hover); transform: translateY(-2px); }
.g-badge:hover .g-go { color: var(--magenta); }
.g-badge:hover .g-go svg { transform: translateX(3px); }

.reviews-stage { position: relative; z-index: 1; margin-top: clamp(28px, 3.4vw, 44px); }
.reviews-widget { position: relative; min-height: 340px; }
.reviews-widget.is-loaded { min-height: 0; }
.reviews-skeleton { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; pointer-events: none; }
.reviews-skeleton span {
  border: 1px solid var(--lift-edge); border-radius: 14px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0.55)); background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
.reviews-widget.is-loaded .reviews-skeleton, .reviews-widget.is-empty .reviews-skeleton { display: none; }
.reviews-widget.is-empty { min-height: 0; }
.reviews-help { display: none; margin: 0; color: var(--ink-soft); font-size: 16px; }
.reviews-help a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--teal-deep); font-weight: 600; transition: color 0.3s ease; }
.reviews-help a svg { width: 16px; height: 16px; }
.reviews-help a:hover { color: var(--magenta); }
.reviews-stage:has(.reviews-widget.is-empty) .reviews-help { display: block; }

@media (max-width: 960px) {
  .reviews-skeleton { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews-skeleton span:nth-child(3) { display: none; }
}
@media (max-width: 760px) {
  .reviews-head { grid-template-columns: minmax(0, 1fr); }
  .g-badge { min-width: 0; justify-self: start; }
  .reviews-widget { min-height: 300px; }
  .reviews-skeleton { grid-template-columns: minmax(0, 1fr); }
  .reviews-skeleton span:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-skeleton span { animation: none; }
  .g-badge, .g-go svg { transition: none; }
  .g-badge:hover { transform: none; }
}

/* entrance: only for content that starts below the fold, motion allowed (site.js adds .js-rise) */
.js-rise .rise { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.9s var(--out); transition-delay: calc(var(--d, 0) * 90ms); }
.js-rise .rise.is-in { opacity: 1; transform: none; }

/* CTA band */
.cta-band { position: relative; isolation: isolate; padding: clamp(72px, 9vw, 112px) 0; color: #fff; background: var(--ink); text-align: left; }
.cta-band picture, .cta-band picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(20, 26, 29, 0.8); }
.cta-band h2 { max-width: 22ch; margin-bottom: 14px; }
.cta-band p { max-width: 50ch; margin-bottom: 28px; color: #e1e6e9; font-size: 18px; }

/* Homepage closing CTA: a slim horizontal band. Directional overlay keeps the left (copy) dense and lets the image
   breathe on the right behind the actions; a hairline teal-to-pink rule marks the top edge. */
.cta-band--split { padding: clamp(44px, 5vw, 68px) 0; }
.cta-band--split::before {
  background:
    linear-gradient(90deg, rgba(20, 26, 29, 0.92) 0%, rgba(20, 26, 29, 0.8) 45%, rgba(20, 26, 29, 0.6) 100%),
    linear-gradient(180deg, rgba(20, 26, 29, 0) 60%, rgba(20, 26, 29, 0.35) 100%);
}
.cta-band--split::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--teal), var(--magenta)); }
.cta-band--split picture img { object-position: 50% 45%; }
.cta-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px 64px; }
.cta-copy h2 { max-width: none; margin: 0 0 10px; font-size: clamp(36px, 3.6vw, 50px); line-height: 1; letter-spacing: 0.02em; white-space: nowrap; }
.cta-copy p { max-width: 46ch; margin: 0; color: #d9e0e3; font-size: 18px; line-height: 1.5; }
.cta-actions { display: grid; justify-items: end; gap: 18px; }
.cta-actions .btn-row { justify-content: flex-end; gap: 14px; }
.btn--glass { border-color: rgba(255, 255, 255, 0.55); background: rgba(20, 26, 29, 0.35); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn--glass:hover { border-color: var(--teal); background: rgba(26, 180, 206, 0.16); color: #fff; }
.cta-social { display: flex; align-items: center; gap: 10px; color: #b9c4c9; font: 600 14px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; }
.cta-social span { margin-right: 6px; }
.cta-social a {
  display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; color: #fff;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.35s var(--out);
}
.cta-social svg { width: 18px; height: 18px; fill: currentColor; }
.cta-social a:hover { border-color: var(--magenta); background: var(--magenta); transform: translateY(-2px); }
@media (max-width: 960px) {
  .cta-split { grid-template-columns: minmax(0, 1fr); }
  .cta-actions, .cta-actions .btn-row { justify-items: start; justify-content: flex-start; }
}
@media (max-width: 560px) {
  .cta-copy h2 { white-space: normal; }
  .cta-actions { justify-items: stretch; }
  .cta-actions .btn-row .btn { flex: 1 1 100%; }
  .cta-band--split picture img { object-position: 30% 50%; }
}
@media (prefers-reduced-motion: reduce) { .cta-social a { transition: none; } .cta-social a:hover { transform: none; } }

/* Internal-page closing CTA: an image-led card in the content width. The photo fills the card; a dark glass panel
   carries the action on the right, so the image leads without a full-bleed band. */
.cta-card-wrap { padding-top: 0; }
.cta-card {
  position: relative; isolation: isolate; display: flex; justify-content: flex-end; min-height: clamp(400px, 34vw, 480px); overflow: hidden;
  border-radius: 26px; background: var(--ink);
  box-shadow: 0 2px 4px rgba(20, 26, 29, 0.1), 0 30px 60px -32px rgba(20, 26, 29, 0.55), 0 44px 90px -44px rgba(254, 2, 151, 0.35);
}
.cta-card-media { position: absolute; z-index: -1; inset: 0; }
.cta-card-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.4s var(--out); }
.cta-card:hover .cta-card-media img { transform: scale(1.05); }
.cta-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 26, 29, 0.05) 0%, rgba(20, 26, 29, 0.25) 45%, rgba(20, 26, 29, 0.7) 100%); }
.cta-card-panel {
  position: relative; align-self: center; width: min(520px, 48%); margin: clamp(20px, 2.4vw, 32px); padding: clamp(28px, 3vw, 40px);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 20px; background: rgba(20, 26, 29, 0.78); color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.6);
}
.cta-card-panel::before { content: ""; position: absolute; left: clamp(28px, 3vw, 40px); top: -1px; width: 72px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--teal), var(--magenta)); }
.cta-card-panel .eyebrow { color: var(--teal); }
.cta-card-panel h2 { margin: 0 0 12px; color: #fff; font-size: clamp(30px, 3vw, 42px); line-height: 1.02; }
.cta-card-panel > p { margin: 0 0 24px; color: #d9e0e3; font-size: 17px; line-height: 1.55; }
.cta-card-panel .btn-row { gap: 12px; }
.cta-card-foot { margin: 22px 0 0 !important; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.12); color: #aab5bb !important; font-size: 15px !important; }
.cta-card-foot a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-left: 4px; color: #fff; font-weight: 600; text-decoration: none; transition: color 0.3s ease; }
.cta-card-foot a svg { width: 16px; height: 16px; color: var(--teal); transition: transform 0.4s var(--out), color 0.3s ease; }
.cta-card-foot a:hover, .cta-card-foot a:hover svg { color: var(--magenta); }
.cta-card-foot a:hover svg { transform: translateX(3px); }
@media (max-width: 1000px) {
  .cta-card { display: block; min-height: 0; }
  .cta-card-media { position: relative; z-index: 0; aspect-ratio: 16 / 9; }
  .cta-card-media::after { background: linear-gradient(180deg, rgba(20, 26, 29, 0) 55%, rgba(20, 26, 29, 0.9) 100%); }
  .cta-card-panel { width: auto; margin: -56px 16px 16px; }
}
@media (max-width: 560px) {
  .cta-card { border-radius: 20px; }
  .cta-card-media { aspect-ratio: 4 / 3; }
  .cta-card-panel { margin: -44px 10px 10px; padding: 24px 20px; }
  .cta-card-panel .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .cta-card-media img { transition: none; } .cta-card:hover .cta-card-media img { transform: scale(1.02); } }

/* Contact */
.form-card { padding: clamp(24px, 4vw, 40px); border: 1px solid var(--lift-edge); border-radius: var(--radius-lg); background: var(--lift-face); box-shadow: var(--lift-shadow); }
.form-card > h2 { margin-bottom: 8px; font-size: clamp(28px, 3vw, 36px); }
.form-card > p { color: var(--ink-soft); }

/* ========== Internal pages ==========
   Each page has its own composition on the shared tokens:
   About    – statement with inline photo capsules + spec bar, left-bleed garage photo beside a drawn rail, dark close.
   MOTs     – route "tickets", MOT class plates, dark process panel with a drawn timeline, servicing tiers.
   Services – dark recovery line with a framed photo, expanding workshop panels.
   Contact  – lifted contact rows beside the form, joined photo + address strip. */

/* ---- About ----
   Story spread: editorial copy beside the real Churchill Road shopfront on an offset tinted panel, a vertical address
   caption and a number-plate postcode badge. Values: a workshop job card (ticks draw in) overlapping a technician photo,
   with a family-run stamp. Local band: dark, photo sunk to the right, CTAs and three drop-by facts. */
.story-kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; color: var(--teal-deep); font: 600 13px/1.2 var(--body); letter-spacing: 0.18em; text-transform: uppercase; }
.story-kicker::before { content: ""; width: 40px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--magenta), var(--teal)); }
.story-kicker--dark { color: var(--teal); }

.story { overflow: hidden; }
.story-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 56px clamp(56px, 7vw, 120px); }
.story-copy { max-width: 560px; }
.story-copy h2 { margin: 0 0 22px; font-size: clamp(40px, 4.6vw, 64px); line-height: 0.96; }
.story-copy h2 span { display: block; color: var(--teal-deep); }
.story-lead { margin: 0 0 16px; color: var(--ink); font-size: clamp(19px, 1.5vw, 21px); font-weight: 500; line-height: 1.55; }
.story-body { margin: 0 0 26px; color: var(--ink-soft); font-size: 17px; line-height: 1.65; }
.story-proof { display: flex; align-items: center; gap: 14px; margin: 0 0 32px; padding: 16px 20px 16px 16px; border-left: 3px solid var(--magenta); border-radius: 0 14px 14px 0; background: linear-gradient(90deg, rgba(254, 2, 151, 0.07), rgba(254, 2, 151, 0)); color: var(--ink); font-size: 17px; line-height: 1.45; }
.story-proof svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: #fff; color: var(--magenta); box-shadow: 0 6px 16px -8px rgba(254, 2, 151, 0.6); }
.story-proof strong { font-weight: 700; }
.story-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

.story-media { position: relative; margin: 0; padding: 0 0 56px 0; }
.story-panel { position: absolute; z-index: 0; top: 56px; left: 56px; right: calc(-1 * var(--gutter) - 200px); bottom: 0; border-radius: 28px 0 0 28px; border: 1px solid rgba(11, 115, 133, 0.12); border-right: 0; background: radial-gradient(70% 90% at 0% 100%, rgba(254, 2, 151, 0.12), rgba(254, 2, 151, 0) 70%), linear-gradient(135deg, rgba(26, 180, 206, 0.24), rgba(26, 180, 206, 0.07)); }
.story-photo { position: relative; z-index: 1; overflow: hidden; border-radius: 24px; box-shadow: 0 2px 4px rgba(20, 26, 29, 0.08), 0 34px 70px -34px rgba(20, 26, 29, 0.55), 0 50px 100px -50px rgba(254, 2, 151, 0.4); }
.story-photo img { display: block; width: 100%; aspect-ratio: 11 / 8.6; object-fit: cover; object-position: 50% 45%; transition: transform 1.2s var(--out); }
.story-media:hover .story-photo img { transform: scale(1.03); }
.js-rise .story-photo.rise { opacity: 1; transform: none; }
.js-rise .story-photo.rise img { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--out), transform 1.2s var(--out); }
.js-rise .story-photo.rise.is-in img { clip-path: inset(0 0 0 0); }
.story-side { position: absolute; z-index: 1; top: 0; right: -38px; height: calc(100% - 56px); display: flex; align-items: center; writing-mode: vertical-rl; color: var(--ink-soft); font: 600 12px/1 var(--body); letter-spacing: 0.24em; text-transform: uppercase; }
.plate-badge {
  position: absolute; z-index: 2; left: -28px; bottom: 20px; display: inline-flex; align-items: stretch; height: 64px; overflow: hidden;
  border: 2px solid var(--ink); border-radius: 10px; background: #fff; color: var(--ink); text-decoration: none;
  box-shadow: 0 2px 0 rgba(20, 26, 29, 0.2), 0 18px 34px -16px rgba(20, 26, 29, 0.55), 0 26px 50px -24px rgba(254, 2, 151, 0.5);
  transform: rotate(-3deg); transition: transform 0.35s var(--out), box-shadow 0.35s ease;
}
.plate-band { display: grid; place-items: center; width: 46px; background: var(--ink); }
.plate-band .logo-mark { width: 30px; height: auto; transition: transform 0.35s var(--out); }
.plate-text { display: flex; align-items: center; padding: 0 22px 0 18px; font: 700 40px/1 var(--head); letter-spacing: 0.08em; }
.plate-badge:hover { transform: rotate(0deg) translateY(-3px); box-shadow: 0 2px 0 rgba(20, 26, 29, 0.2), 0 24px 40px -16px rgba(20, 26, 29, 0.55), 0 30px 60px -24px rgba(254, 2, 151, 0.7); }
.plate-badge:hover .logo-mark { transform: scale(1.08); }
.js-rise .plate-badge.rise { transform: rotate(-12deg) translateY(30px); transition: opacity 0.6s ease 0.7s, transform 0.9s var(--out) 0.7s; }
.js-rise .plate-badge.rise.is-in { transform: rotate(-3deg); }
.js-rise .plate-badge.rise.is-in:hover { transform: rotate(0deg) translateY(-3px); transition-delay: 0s; }

.values-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: end; gap: 16px clamp(40px, 6vw, 104px); margin-bottom: clamp(36px, 4vw, 56px); }
.values-intro { max-width: 40ch; margin: 0; padding-left: 20px; border-left: 2px solid var(--magenta); color: var(--ink-soft); font-size: 18px; line-height: 1.55; }
.values-head h2 { margin: 0; font-size: clamp(36px, 4vw, 54px); line-height: 1; }
.values-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.values-photo { position: relative; z-index: 0; grid-column: 1 / 7; grid-row: 1; margin: 0; overflow: hidden; border-radius: 24px; box-shadow: 0 30px 60px -32px rgba(20, 26, 29, 0.5); }
.values-photo img { display: block; width: 100%; aspect-ratio: 6 / 7; object-fit: cover; object-position: 50% 50%; }
.values-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 26, 29, 0) 60%, rgba(20, 26, 29, 0.35)); }
.jobcard {
  position: relative; z-index: 1; grid-column: 6 / 13; grid-row: 1; margin-top: clamp(48px, 7vw, 110px);
  border: 1px solid var(--lift-edge); border-radius: 22px; background: var(--lift-face); box-shadow: var(--lift-shadow), 0 50px 100px -50px rgba(254, 2, 151, 0.45);
}
.js-rise .jobcard.rise { opacity: 0; transform: perspective(1400px) rotateX(9deg) translateY(40px); transform-origin: 50% 100%; transition: opacity 0.7s ease, transform 1.1s var(--out); }
.js-rise .jobcard.rise.is-in { opacity: 1; transform: none; }
.jobcard-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 18px 26px; border-radius: 21px 21px 0 0; background: var(--ink); color: #fff; font: 700 15px/1.2 var(--head); letter-spacing: 0.14em; text-transform: uppercase; }
.jobcard-head span + span { color: var(--teal); }
.jobcard-list { margin: 0; padding: 8px 26px; list-style: none; }
.jobcard-list li { display: flex; gap: 18px; padding: 16px 0; border-bottom: 1px dashed rgba(20, 26, 29, 0.18); }
.jobcard-list li:last-child { border-bottom: 0; }
.tick-box { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin-top: 1px; border: 2px solid rgba(11, 115, 133, 0.45); border-radius: 8px; background: #fff; transition: border-color 0.3s ease, background-color 0.3s ease; }
.tick { width: 20px; height: 20px; fill: none; stroke: var(--magenta); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 0; }
.js-rise .jobcard.rise .tick { stroke-dashoffset: 24; transition: stroke-dashoffset 0.5s var(--out) calc(0.6s + var(--i) * 0.14s); }
.js-rise .jobcard.rise.is-in .tick { stroke-dashoffset: 0; }
.jobcard-list li:hover .tick-box { border-color: var(--magenta); background: rgba(254, 2, 151, 0.06); }
.job-text strong { display: block; margin-bottom: 4px; font: 700 21px/1.15 var(--head); letter-spacing: 0.03em; text-transform: uppercase; }
.job-text span { display: block; color: var(--ink-soft); font-size: 16px; line-height: 1.5; }
.jobcard-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 16px 26px 20px; border-top: 1px solid var(--line); }
.jobcard-foot > span { display: inline-flex; align-items: center; gap: 10px; color: var(--teal-deep); font: 700 16px/1.2 var(--head); letter-spacing: 0.1em; text-transform: uppercase; }
.jobcard-foot svg { width: 22px; height: 22px; }
.stamp { position: absolute; z-index: 2; top: -52px; right: -30px; width: 124px; height: 124px; color: var(--magenta); transform: rotate(-14deg); filter: drop-shadow(0 10px 18px rgba(254, 2, 151, 0.25)); }
.stamp circle { fill: #fff; stroke: currentColor; stroke-width: 2; }
.stamp circle + circle { fill: none; stroke-width: 1.5; stroke-dasharray: 3 4; }
.stamp text { fill: currentColor; font: 700 10.5px/1 var(--head); letter-spacing: 0.12em; }

.local-band { position: relative; isolation: isolate; overflow: hidden; padding: clamp(64px, 7vw, 96px) 0; background: #15191c; color: #fff; }
.local-band::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(45% 70% at 0% 100%, rgba(26, 180, 206, 0.16), rgba(26, 180, 206, 0) 70%), radial-gradient(35% 60% at 100% 0%, rgba(254, 2, 151, 0.14), rgba(254, 2, 151, 0) 70%); }
.local-band-bg { position: absolute; z-index: -2; inset: 0 0 0 auto; width: 62%; }
.local-band-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.45; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.local-band-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 40px clamp(48px, 6vw, 104px); }
.local-band-copy h2 { margin: 0 0 14px; color: #fff; font-size: clamp(40px, 4.8vw, 66px); line-height: 0.96; }
.local-band-copy h2 span { display: block; color: var(--teal); }
.local-band-copy p:not(.story-kicker) { margin: 0 0 28px; color: #d9e0e3; font-size: 19px; }
.local-facts { margin: 0; padding: 8px; list-style: none; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 22px; background: rgba(20, 26, 29, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 40px 90px -40px rgba(254, 2, 151, 0.45); }
.local-facts li + li { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.local-facts a { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 12px 16px; border-radius: 14px; color: #fff; font-weight: 600; font-size: 17px; line-height: 1.35; text-decoration: none; transition: background-color 0.3s ease; }
.local-facts small { display: block; margin-bottom: 3px; color: #9fb0b7; font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.lf-icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 50%; color: var(--teal); transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }
.lf-icon svg { width: 20px; height: 20px; }
.lf-icon--pink { color: var(--magenta); }
.local-facts a:hover { background: rgba(255, 255, 255, 0.05); }
.local-facts a:hover .lf-icon { border-color: var(--magenta); background: var(--magenta); color: #fff; }

@media (max-width: 1000px) {
  .story-grid { grid-template-columns: minmax(0, 1fr); }
  .story-copy { max-width: 640px; }
  .story-media { margin-right: 20px; }
  .story-side { display: none; }
  .story-panel { left: 32px; top: 40px; }
  .plate-badge { left: -8px; }
  .values-head { grid-template-columns: minmax(0, 1fr); }
  .values-grid { grid-template-columns: minmax(0, 1fr); }
  .values-photo { grid-column: 1; }
  .values-photo img { aspect-ratio: 16 / 10; }
  .jobcard { grid-column: 1; grid-row: 2; justify-self: stretch; width: auto; margin: -64px 16px 0; }
  .local-band-grid { grid-template-columns: minmax(0, 1fr); }
  .local-band-bg { width: 100%; }
  .local-band-bg img { opacity: 0.25; -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
}
@media (max-width: 640px) {
  .story-copy h2 { font-size: 40px; }
  .values-intro { font-size: 16px; }
  .story-lead { font-size: 18px; }
  .story-body { font-size: 16px; }
  .story-proof { font-size: 16px; }
  .story-cta .btn { width: 100%; }
  .story-media { margin-right: 0; padding-bottom: 44px; }
  .story-panel { left: 20px; top: 28px; right: calc(-1 * var(--gutter)); border-radius: 22px 0 0 22px; }
  .story-photo, .story-photo img { border-radius: 18px; }
  .story-photo img { aspect-ratio: 4 / 3; }
  .plate-badge { left: 4px; bottom: 8px; height: 52px; }
  .plate-band { width: 38px; }
  .plate-band .logo-mark { width: 24px; }
  .plate-text { padding: 0 16px 0 14px; font-size: 32px; }
  .jobcard { margin: -40px 0 0; }
  .jobcard-head { padding: 16px 20px; font-size: 14px; }
  .jobcard-list { padding: 4px 20px; }
  .jobcard-list li { gap: 14px; padding: 14px 0; }
  .job-text strong { font-size: 19px; }
  .jobcard-foot { padding: 14px 20px 18px; }
  .stamp { top: -36px; right: -6px; width: 92px; height: 92px; }
  .local-band-copy p:not(.story-kicker) { font-size: 17px; }
  .local-band .btn-row .btn { flex: 1 1 100%; }
  .local-facts a { min-height: 68px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .plate-badge, .story-photo img, .tick { transition: none; } }

/* ---- MOTs & Servicing ---- */
.mots-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 40px clamp(48px, 6vw, 96px); }
.mots-intro-copy h2 { margin: 0 0 16px; }
.mots-intro-copy .lede { margin: 0 0 12px; }
.tickets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.ticket {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 56px; align-items: center; gap: 0 18px; padding: 22px 0 22px 22px;
  border: 1px solid var(--lift-edge); border-radius: 18px; background: var(--lift-face); box-shadow: var(--lift-shadow);
  color: var(--ink); text-decoration: none; transition: box-shadow 0.35s ease, border-color 0.3s ease, transform 0.4s var(--out);
}
.ticket-icon { display: grid; place-items: center; align-self: start; width: 52px; height: 52px; border-radius: 14px; background: var(--ink); color: var(--teal); transition: background-color 0.3s ease, color 0.3s ease; }
.ticket-body { display: block; min-width: 0; }
.ticket-label { display: block; color: var(--teal-deep); font: 600 13px/1.2 var(--body); letter-spacing: 0.12em; text-transform: uppercase; }
.ticket strong { display: block; margin-top: 8px; font: 700 clamp(24px, 2.2vw, 30px)/1 var(--head); letter-spacing: 0.03em; text-transform: uppercase; }
.ticket-text { display: block; margin-top: 8px; color: var(--ink-soft); font-size: 16px; line-height: 1.45; }
.ticket-go { display: grid; place-items: center; align-self: stretch; border-left: 2px dashed var(--line); }
.ticket-go svg { box-sizing: content-box; width: 18px; height: 18px; padding: 11px; border: 1px solid var(--line); border-radius: 50%; transform: rotate(90deg); transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.4s var(--out); }
.ticket:hover { border-color: rgba(254, 2, 151, 0.3); box-shadow: var(--lift-shadow-hover); transform: translateY(-3px); }
.ticket:hover .ticket-icon { background: var(--magenta); color: #fff; }
.ticket:hover .ticket-go svg { border-color: var(--magenta); background: var(--magenta); color: #fff; transform: rotate(90deg) translateX(3px); }

.mot, .servicing { scroll-margin-top: 90px; }
.mot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; gap: 48px clamp(48px, 6vw, 96px); }
@media (min-width: 1001px) { .mot-copy { position: sticky; top: 120px; padding-top: clamp(24px, 4vw, 72px); } }
.mot-copy h2 { margin: 0 0 16px; }
.mot-copy > p { max-width: 50ch; margin: 0; color: var(--ink-soft); font-size: 18px; }
.plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 32px 0; }
.plate {
  display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; border: 1px solid var(--lift-edge); border-radius: 16px;
  background: var(--lift-face); box-shadow: var(--lift-shadow);
}
.plate-n { display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 12px; background: var(--ink); color: var(--teal); font: 700 40px/1 var(--head); }
.plate strong { display: block; margin-bottom: 2px; font: 700 20px/1.1 var(--head); letter-spacing: 0.04em; text-transform: uppercase; }
.plate span span, .plate > span:last-child { color: var(--ink-soft); font-size: 15px; line-height: 1.4; }
.plate > span:last-child strong { color: var(--ink); }
/* MOT class guide: interactive Class 4 / Class 7 panel over a darkened workshop photo. Tabs (and the plates on the
   left) switch class; each class has native <details> accordions so it works without JS too (both classes show). */
.class-guide { position: relative; isolation: isolate; overflow: hidden; border-radius: 22px; background: var(--ink); color: #fff; box-shadow: 0 2px 4px rgba(20, 26, 29, 0.12), 0 30px 60px -30px rgba(20, 26, 29, 0.6), 0 40px 80px -40px rgba(254, 2, 151, 0.3); }
.class-guide-bg { position: absolute; z-index: -2; inset: 0; }
.class-guide-bg img { width: 100%; height: 100%; object-fit: cover; }
.class-guide::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(70% 50% at 100% 0%, rgba(254, 2, 151, 0.18), rgba(254, 2, 151, 0) 70%), radial-gradient(60% 50% at 0% 100%, rgba(26, 180, 206, 0.14), rgba(26, 180, 206, 0) 70%), linear-gradient(180deg, rgba(20, 26, 29, 0.5) 0%, rgba(20, 26, 29, 0.8) 30%, rgba(20, 26, 29, 0.92) 60%, rgba(20, 26, 29, 0.96) 100%); }
.class-guide-inner { padding: clamp(24px, 3vw, 36px); }
.class-guide h3 { margin: 0 0 8px; color: #fff; font-size: clamp(26px, 2.4vw, 32px); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); }
.class-guide-inner { padding-top: clamp(48px, 6vw, 96px); }
.class-guide-intro { max-width: 52ch; margin: 0 0 22px; color: #c9d2d6; font-size: 16px; line-height: 1.5; }
.class-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.class-tab {
  min-height: 48px; padding: 0 20px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: #fff;
  font: 700 18px/1 var(--head); letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.class-tab:hover { border-color: rgba(26, 180, 206, 0.6); background: rgba(26, 180, 206, 0.1); }
.class-tab.is-active { border-color: var(--magenta); background: rgba(254, 2, 151, 0.14); box-shadow: 0 0 0 3px rgba(254, 2, 151, 0.14), 0 10px 24px -12px rgba(254, 2, 151, 0.7); }
.class-panel { padding: 20px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; background: rgba(255, 255, 255, 0.04); }
.class-panel[hidden] { display: none; }
.class-panel h4 { margin: 0 0 6px; color: #fff; font: 700 22px/1.15 var(--head); letter-spacing: 0.04em; text-transform: uppercase; }
.class-panel-sub { margin: 0 0 16px; color: #c9d2d6; font-size: 15px; line-height: 1.5; }
.acc { margin-top: 10px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; background: rgba(20, 26, 29, 0.55); transition: border-color 0.3s ease; }
.acc[open] { border-color: rgba(26, 180, 206, 0.35); }
.acc summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 12px 14px 12px 16px; cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary strong { display: block; color: #fff; font: 700 18px/1.2 var(--head); letter-spacing: 0.03em; text-transform: uppercase; }
.acc summary small { display: block; margin-top: 3px; color: #aab5bb; font-size: 14px; }
.acc-chev { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px; color: #fff; transition: transform 0.35s var(--out), background-color 0.3s ease, border-color 0.3s ease; }
.acc-chev svg { width: 18px; height: 18px; }
.acc summary:hover .acc-chev { border-color: var(--magenta); background: var(--magenta); }
.acc[open] .acc-chev { transform: rotate(180deg); }
.acc-body { padding: 0 16px 16px; }
.acc-body ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.acc-body li { position: relative; padding: 11px 14px 11px 34px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; background: rgba(255, 255, 255, 0.04); color: #e6ecee; font-size: 15px; line-height: 1.5; }
.acc-body li::before { content: ""; position: absolute; left: 14px; top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 10px rgba(254, 2, 151, 0.6); }
.acc-body a, .class-tip a { color: var(--teal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; transition: color 0.3s ease; }
.acc-body a:hover, .class-tip a:hover { color: var(--magenta); }
.acc-note { margin: 10px 0 0; color: #aab5bb; font-size: 14px; line-height: 1.5; }
.class-tip { margin: 16px 0 0; padding: 12px 14px; border: 1px solid rgba(254, 2, 151, 0.22); border-radius: 12px; background: linear-gradient(90deg, rgba(254, 2, 151, 0.08), rgba(26, 180, 206, 0.06)); color: #d9e0e3; font-size: 14px; line-height: 1.5; }
button.plate { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color 0.3s ease, box-shadow 0.35s ease, transform 0.35s var(--out); }
button.plate:hover { border-color: rgba(26, 180, 206, 0.55); transform: translateY(-2px); }
button.plate.is-active { border-color: var(--magenta); box-shadow: var(--lift-shadow-hover); }
button.plate.is-active .plate-n { background: var(--magenta); color: #fff; }
.plate-n { transition: background-color 0.3s ease, color 0.3s ease; }
@media (max-width: 640px) {
  .class-guide-inner { padding: 40px 16px 18px; }
  .class-panel { padding: 0; border: 0; background: none; }
  .class-tab { flex: 1 1 0; padding: 0 12px; font-size: 17px; }
  .acc summary { padding: 12px 10px 12px 14px; }
  .acc-body { padding: 0 10px 12px; }
  .acc-body li { padding: 10px 12px 10px 30px; }
  .acc-body li::before { left: 12px; top: 17px; }
}

.servicing-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); align-items: center; gap: 48px clamp(56px, 7vw, 120px); }
.servicing-media { position: relative; margin: 0 40px 0 0; }
.servicing-media img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; box-shadow: 0 2px 4px rgba(20, 26, 29, 0.08), 0 26px 50px -28px rgba(20, 26, 29, 0.5), 0 34px 70px -36px rgba(254, 2, 151, 0.28); }
.servicing-media figcaption {
  position: absolute; top: 28px; right: -34px; display: flex; align-items: center; gap: 12px; writing-mode: vertical-rl;
  color: var(--ink-soft); font: 600 13px/1 var(--body); letter-spacing: 0.2em; text-transform: uppercase;
}
.servicing-media figcaption::before { content: ""; width: 2px; height: 48px; border-radius: 2px; background: var(--teal); }
.js-rise .servicing-media.rise { opacity: 1; transform: none; }
.js-rise .servicing-media.rise img { clip-path: inset(0 100% 0 0 round 20px); transition: clip-path 1.2s var(--out); }
.js-rise .servicing-media.rise.is-in img { clip-path: inset(0 0 0 0 round 20px); }
.servicing-copy h2 { margin: 0 0 16px; }
.servicing-copy .lede { margin: 0; }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 32px 0 28px; overflow: hidden; border: 1px solid var(--lift-edge); border-radius: 18px; background: var(--lift-face); box-shadow: var(--lift-shadow); }
.tier { padding: 22px 22px 24px; box-shadow: inset 0 3px 0 transparent; transition: background-color 0.3s ease, box-shadow 0.3s ease; }
.tier + .tier { border-left: 1px solid var(--line); }
.tier:hover { background: #fff; box-shadow: inset 0 3px 0 var(--magenta); }
.tier-tag { display: inline-flex; align-items: center; gap: 8px; color: var(--teal-deep); font: 600 13px/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; }
.tier-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.tier strong { display: block; margin: 12px 0 6px; font: 700 22px/1.1 var(--head); letter-spacing: 0.04em; text-transform: uppercase; }
.tier p { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.5; }
.benefits { display: grid; gap: 10px; margin: 0 0 30px; padding: 0; list-style: none; }
.benefits li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.benefits svg { flex: none; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: rgba(26, 180, 206, 0.14); color: var(--teal-deep); }

/* ---- Recovery & Services ---- */
.recovery-line { position: relative; isolation: isolate; overflow: hidden; padding: clamp(64px, 8vw, 112px) 0; background: var(--ink); color: #fff; scroll-margin-top: 80px; }
.recovery-line::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(45% 80% at 0% 0%, rgba(26, 180, 206, 0.16), rgba(26, 180, 206, 0) 70%), radial-gradient(40% 70% at 100% 100%, rgba(254, 2, 151, 0.12), rgba(254, 2, 151, 0) 70%); }
.recovery-line-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 48px clamp(48px, 6vw, 104px); }
.recovery-status { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--teal); font: 600 14px/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; }
.live-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--magenta); }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--magenta); animation: live 2s ease-out infinite; }
@keyframes live { from { transform: scale(1); opacity: 0.7; } to { transform: scale(3); opacity: 0; } }
.recovery-line-copy h2 { margin: 0 0 14px; color: #fff; font-size: clamp(36px, 4.4vw, 58px); line-height: 1; }
.recovery-line-copy > p { max-width: 44ch; margin: 0; color: #d9e0e3; font-size: 18px; }
.recovery-big { display: inline-block; margin: 22px 0 26px; color: var(--teal); font: 700 clamp(48px, 6.2vw, 86px)/0.95 var(--head); letter-spacing: 0.02em; text-decoration: none; transition: color 0.3s ease; }
.recovery-big:hover { color: var(--magenta); }
.recovery-line-media { position: relative; margin: 0 0 0 32px; }
.recovery-line-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 24px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7), 0 40px 90px -40px rgba(254, 2, 151, 0.4); }
.recovery-flag {
  position: absolute; left: -32px; bottom: 32px; display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 20px 14px 14px;
  border: 1px solid var(--lift-edge); border-radius: 14px; background: var(--lift-face); box-shadow: var(--lift-shadow); color: var(--ink);
}
.recovery-flag svg { box-sizing: content-box; flex: none; width: 22px; height: 22px; padding: 11px; border-radius: 12px; background: var(--ink); color: var(--teal); }
.recovery-flag strong { display: block; font: 700 19px/1.1 var(--head); letter-spacing: 0.04em; text-transform: uppercase; }
.recovery-flag span { color: var(--ink-soft); font-size: 15px; }

.workshop-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 64px; margin-bottom: clamp(32px, 4vw, 48px); }
.workshop-head h2 { margin: 0 0 14px; }
.workshop-head .lede { margin: 0; }
.also { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.workshop-note { margin: 0; padding-bottom: 6px; color: var(--ink-soft); font-size: 16px; text-align: right; }
.workshop-note a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); font: 700 20px/1 var(--head); letter-spacing: 0.04em; text-decoration: none; transition: color 0.3s ease; }
.workshop-note a svg { width: 18px; height: 18px; color: var(--teal-deep); transition: transform 0.4s var(--out), color 0.3s ease; }
.workshop-note a:hover, .workshop-note a:hover svg { color: var(--magenta); }
.workshop-note a:hover svg { transform: translateX(3px); }
.also li { padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--grey); color: var(--ink); font: 600 15px/1 var(--body); }
.panels { display: flex; gap: 14px; height: clamp(460px, 40vw, 580px); margin: 0; padding: 0; list-style: none; }
.panel {
  position: relative; isolation: isolate; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 20px; background: var(--ink); color: #fff;
  scroll-margin-top: 110px; transition: flex-grow 0.7s var(--out); box-shadow: 0 2px 4px rgba(20, 26, 29, 0.1), 0 24px 46px -28px rgba(20, 26, 29, 0.5);
}
.panel.is-active { flex-grow: 3; box-shadow: 0 2px 4px rgba(20, 26, 29, 0.1), 0 24px 46px -28px rgba(20, 26, 29, 0.5), 0 34px 70px -34px rgba(254, 2, 151, 0.35); }
.panel-img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.1s var(--out); }
.panel.is-active .panel-img { transform: scale(1); }
.panel::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(20, 26, 29, 0.05) 20%, rgba(20, 26, 29, 0.55) 55%, rgba(20, 26, 29, 0.94) 100%); }
.panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--teal), var(--magenta)); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--out); }
.panel.is-active::before { transform: none; }
.panel-body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(18px, 2vw, 28px); }
.panel h3 { margin: 0; color: #fff; font-size: clamp(22px, 2vw, 28px); line-height: 1.05; }
.panel-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.6s var(--out), opacity 0.4s ease; }
.panel-more > * { min-height: 0; overflow: hidden; }
.panel.is-active .panel-more { grid-template-rows: 1fr; opacity: 1; transition-delay: 0.15s; }
.panel-more p { max-width: 40ch; margin: 10px 0 6px; color: #dbe2e5; font-size: 16px; line-height: 1.5; }
.panel-links { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.panel-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--teal); font-weight: 600; text-decoration: none; transition: color 0.3s ease; }
.panel-link svg { width: 16px; height: 16px; transition: transform 0.4s var(--out); }
.panel-link:hover { color: var(--magenta); }
.panel-link:hover svg { transform: translateX(3px); }
.panel-link--soft { color: #fff; }

/* ---- Contact ---- */
.contact-layout { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: start; gap: 48px clamp(40px, 6vw, 96px); }
.contact-side h2 { margin: 0 0 14px; }
.contact-side .lede { margin: 0; }
.ways { display: grid; gap: 12px; margin: 28px 0; padding: 0; list-style: none; }
.way {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 40px; align-items: center; gap: 16px; min-height: 80px; padding: 14px 16px 14px 14px;
  border: 1px solid var(--lift-edge); border-radius: 16px; background: var(--lift-face); box-shadow: var(--lift-shadow); color: var(--ink); text-decoration: none;
  transition: box-shadow 0.35s ease, border-color 0.3s ease, transform 0.4s var(--out);
}
.way-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--ink); color: var(--teal); transition: background-color 0.3s ease, color 0.3s ease; }
.way-text small { display: block; margin-bottom: 4px; color: var(--ink-soft); font: 600 13px/1.2 var(--body); letter-spacing: 0.12em; text-transform: uppercase; }
.way-text strong { display: block; font-size: 18px; line-height: 1.35; overflow-wrap: anywhere; }
.way-go { display: grid; place-items: center; color: var(--ink-soft); transition: color 0.3s ease, transform 0.4s var(--out); }
.way-go svg { width: 18px; height: 18px; }
.way--rec .way-text small { color: var(--magenta); }
.way:hover { border-color: rgba(254, 2, 151, 0.3); box-shadow: var(--lift-shadow-hover); transform: translateY(-2px); }
.way:hover .way-icon { background: var(--magenta); color: #fff; }
.way:hover .way-go { color: var(--magenta); transform: translateX(3px); }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.contact .form-card > h2 { margin-top: 0; }
.contact-social { display: flex; align-items: center; gap: 10px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(20, 26, 29, 0.12); color: var(--ink-soft); font: 600 13px/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; }
.contact-social span { margin-right: 6px; }
.contact-social a {
  display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--lift-edge); border-radius: 50%; background: var(--lift-face); box-shadow: var(--lift-shadow); color: var(--ink);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.35s var(--out);
}
.contact-social svg { width: 19px; height: 19px; fill: currentColor; }
.contact-social a:hover { border-color: var(--magenta); background: var(--magenta); color: #fff; transform: translateY(-2px); }
.find-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: stretch; }
.find-media { overflow: hidden; min-height: 400px; border-radius: 22px 0 0 22px; background: var(--grey); }
.find-media iframe { display: block; width: 100%; height: 100%; min-height: 400px; border: 0; }
.find-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(28px, 4vw, 56px); border-radius: 0 22px 22px 0; background: var(--ink); color: #fff; box-shadow: 0 30px 60px -34px rgba(254, 2, 151, 0.35); }
.find-copy .eyebrow { color: var(--teal); }
.find-copy h2 { margin: 0 0 14px; color: #fff; }
.find-copy address { margin: 0 0 28px; color: #d9e0e3; font-size: 18px; font-style: normal; line-height: 1.6; }

/* ---- Internal pages: responsive ---- */
@media (max-width: 1100px) {
  .tiers { grid-template-columns: 1fr; }
  .tier + .tier { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 1000px) {
  .mots-intro-grid, .mot-grid, .servicing-grid, .recovery-line-grid, .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .servicing-media { max-width: 520px; margin-right: 34px; }
  .servicing-media img { aspect-ratio: 16 / 11; }
  .recovery-line-media { margin: 8px 0 0 24px; }
  .workshop-head { grid-template-columns: minmax(0, 1fr); }
  .workshop-note { text-align: left; }
  .panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
  .panel { min-height: 340px; }
  .panel::before { transform: none; }
  .panel-img { transform: none; }
  .panel-more { grid-template-rows: 1fr; opacity: 1; }
  .find-grid { grid-template-columns: minmax(0, 1fr); }
  .find-media, .find-media iframe { min-height: 320px; }
  .find-media { border-radius: 22px 22px 0 0; }
  .find-copy { border-radius: 0 0 22px 22px; }
}
@media (max-width: 640px) {
  .ledger { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .plates { grid-template-columns: minmax(0, 1fr); }
  .ticket { grid-template-columns: 44px minmax(0, 1fr) 48px; gap: 0 14px; padding: 18px 0 18px 16px; }
  .ticket-icon { width: 44px; height: 44px; }
  .servicing-media { margin-right: 28px; }
  .servicing-media figcaption { right: -28px; }
  .recovery-line-media { margin-left: 0; margin-top: 0; }
  .recovery-flag { position: relative; left: auto; bottom: auto; margin: -28px 12px 0; }
  .panels { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .panel { min-height: 280px; }
  .way { grid-template-columns: 48px minmax(0, 1fr) 24px; gap: 12px; padding: 12px; }
  .way-icon { width: 48px; height: 48px; }
  .way-text strong { font-size: 17px; }
  .way--mail .way-text strong { font-size: 15px; }
  .contact-actions .btn { width: 100%; }
}
@media (hover: none) {
  .ticket:hover, .way:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot::after { animation: none; }
  .panel, .panel-img, .panel-more, .panel::before, .ticket, .way, .ledger li::before { transition: none; }
  .ticket:hover, .way:hover { transform: none; }
}


/* Form controls */
.enquiry { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; margin-top: 24px; }
.field { grid-column: span 2; }
.field--half { grid-column: span 1; }
.field label, .field .label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 16px; }
.field .req { color: var(--teal-deep); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #c4ccd1; border-radius: var(--radius);
  background: var(--white); color: var(--ink); font: 400 17px/1.4 var(--body);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; }
.field select {
  appearance: none; padding-right: 44px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2226' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-soft); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal-deep); box-shadow: 0 0 0 3px rgba(26, 180, 206, 0.3); }
.field [aria-invalid="true"] { border-color: #b3261e; }
.field .help { margin: 6px 0 0; color: var(--ink-soft); font-size: 15px; }
.field .err { margin: 6px 0 0; color: #b3261e; font-size: 15px; font-weight: 500; }
.field .err:empty { display: none; }
.phone-wrap { display: flex; }
.phone-wrap span { display: flex; align-items: center; padding: 0 12px; border: 1px solid #c4ccd1; border-right: 0; border-radius: var(--radius) 0 0 var(--radius); background: var(--grey); font-weight: 600; }
.phone-wrap input { border-radius: 0 var(--radius) var(--radius) 0; }
.form-error { grid-column: span 2; margin: 0; padding: 12px 14px; border-radius: var(--radius); background: #fdecea; color: #8c1d18; font-weight: 500; }
.form-error:empty { display: none; }
.enquiry .btn { grid-column: span 2; justify-self: start; }
.enquiry .btn[disabled] { opacity: 0.6; cursor: wait; transform: none; }
.form-done { margin-top: 20px; padding: 24px; border-left: 4px solid var(--teal); background: var(--grey); }
.form-done h3 { margin-bottom: 8px; }
.form-done p:last-child { margin: 0; }
.skeleton { height: 360px; margin-top: 24px; border-radius: var(--radius); background: linear-gradient(90deg, var(--grey), #e8ecee, var(--grey)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (max-width: 560px) { .field--half { grid-column: span 2; } .enquiry .btn { justify-self: stretch; } }
/* Reveal: tiles and cards arrive as a list (JS adds .js-reveal; content is visible without it) */
.js-reveal .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.8s var(--out); transition-delay: calc(var(--d, 0) * 70ms); }
.js-reveal .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .side-menu { transform: none; opacity: 0; transition: opacity 0.2s ease, visibility 0s 0.2s; }
  .menu-is-open .side-menu { opacity: 1; transition: opacity 0.2s ease; }
  .side-nav li, .side-cta, .side-contact, .side-foot .social, .side-car img, .menu-is-open .side-nav li, .menu-is-open .side-cta, .menu-is-open .side-contact, .menu-is-open .side-foot .social, .menu-is-open .side-car img { transform: none; clip-path: none; transition: opacity 0.2s ease; transition-delay: 0s; }
  .side-foot::after, .menu-is-open .side-foot::after { transform: none; transition: none; }
  .x-lines span, .burger span, .menu-close, .side-nav a span, .side-nav a::after, .side-nav a span::before { transition-duration: 0.01s; transition-delay: 0s; }
  .btn:hover, .tile, .tiles > li:hover > .tile, .menu-close:hover, .tile img, .tiles > li:hover > .tile img, .round-btn--call:hover svg, .trust-item:hover .trust-icon, .qa:hover .qa-icon, .qa:hover > svg, .pillars li:hover .pillar-icon { transform: none; }
  .tile-desc, .tile-desc > span > span, .tile::after { transition-duration: 0.01s; transition-delay: 0s; }
  .skeleton { animation: none; }
}

/* Footer */
/* ========== Footer ==========
   Dark closing section: a magenta-to-teal edge, a workshop photo sunk into the background (greyscale, low opacity,
   masked to the right), pink and teal glows, a logo row, contact rows with icon chips, links with a pink tick, and the
   map kept in its right-hand slot inside a lifted glass frame with a directions pill. */
.site-footer { position: relative; isolation: isolate; overflow: hidden; background: #15191c; color: #c9d1d6; font-size: 16px; }
.site-footer::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--magenta) 0%, var(--teal) 55%, rgba(26, 180, 206, 0) 100%); }
.site-footer::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(42% 60% at 92% 8%, rgba(254, 2, 151, 0.16), rgba(254, 2, 151, 0) 70%), radial-gradient(40% 55% at 0% 100%, rgba(26, 180, 206, 0.12), rgba(26, 180, 206, 0) 70%);
}
.footer-bg { position: absolute; z-index: -2; inset: 0; pointer-events: none; }
.footer-bg img {
  position: absolute; right: 0; top: 0; width: 72%; height: 100%; object-fit: cover; opacity: 0.2; filter: grayscale(1) contrast(1.15);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%), linear-gradient(180deg, #000 40%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%), linear-gradient(180deg, #000 40%, transparent 100%); mask-composite: intersect;
}
.site-footer a { text-decoration: none; transition: color 0.25s ease; }

.footer-head { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; padding-top: clamp(48px, 6vw, 72px); padding-bottom: clamp(28px, 3vw, 36px); }
.footer-head::after { content: ""; order: 9; flex: 1 0 100%; height: 1px; margin-top: clamp(8px, 1.5vw, 16px); background: linear-gradient(90deg, rgba(254, 2, 151, 0.55), rgba(255, 255, 255, 0.12) 30%, rgba(255, 255, 255, 0.06)); }
.footer-logo img { height: 54px; }
.footer-tag { flex: 1 1 260px; margin: 0; color: #9fb0b7; font: 600 13px/1.4 var(--body); letter-spacing: 0.18em; text-transform: uppercase; }
.footer-tag::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 12px 2px 0; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 12px rgba(254, 2, 151, 0.8); vertical-align: middle; }

.footer-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.75fr) minmax(0, 1.4fr); gap: clamp(32px, 4vw, 64px); align-items: stretch; padding-top: clamp(24px, 3vw, 36px); padding-bottom: clamp(48px, 6vw, 72px); }
.site-footer h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; color: #fff; font-size: 20px; letter-spacing: 0.12em; }
.site-footer h2::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--magenta); }
.footer-contact { margin: 0; padding: 0; list-style: none; }
.footer-contact a { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 6px 0; color: #e6ecee; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.footer-contact small { display: block; margin-bottom: 2px; color: #8d9ba2; font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.fc-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; background: rgba(255, 255, 255, 0.04); color: var(--teal); transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; }
.fc-icon svg { width: 18px; height: 18px; }
.fc-icon--pink { color: var(--magenta); }
.footer-contact a:hover { color: #fff; }
.footer-contact a:hover .fc-icon { border-color: var(--magenta); background: var(--magenta); color: #fff; box-shadow: 0 8px 22px -8px rgba(254, 2, 151, 0.8); }

.footer-links { margin: 0 0 24px; padding: 0; list-style: none; }
.footer-links a { position: relative; display: flex; align-items: center; min-height: 40px; color: #c9d1d6; transition: color 0.25s ease, transform 0.3s var(--out); }
.footer-links a::before { content: ""; position: absolute; left: -16px; width: 8px; height: 2px; border-radius: 2px; background: var(--magenta); opacity: 0; transform: scaleX(0); transform-origin: left; transition: opacity 0.25s ease, transform 0.3s var(--out); }
.footer-links a:hover, .footer-links a[aria-current] { color: #fff; transform: translateX(14px); }
.footer-links a:hover::before, .footer-links a[aria-current]::before { opacity: 1; transform: none; }
.footer-book { min-height: 48px; }

.social { display: flex; gap: 10px; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; color: #fff; transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease; }
.social a:hover { border-color: var(--magenta); background: var(--magenta); color: #fff; }
.social svg { width: 20px; height: 20px; fill: currentColor; }

.footer-map { display: flex; }
.map-frame {
  position: relative; flex: 1; display: flex; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22px; background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7), 0 40px 90px -40px rgba(254, 2, 151, 0.45);
}
.map { position: relative; flex: 1; height: 100%; min-height: 280px; overflow: hidden; border-radius: 15px; background: #fff; -webkit-mask-image: -webkit-radial-gradient(#fff, #000); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-pill {
  position: absolute; left: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 12px;
  border-radius: 999px; background: #15191c; color: #fff !important; font: 700 15px/1 var(--head); letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6); transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.map-pill svg { width: 16px; height: 16px; }
.map-pill svg:first-child { color: var(--magenta); }
.map-pill svg:last-child { transition: transform 0.3s var(--out); }
.map-pill:hover { background: var(--magenta); box-shadow: 0 12px 26px -10px rgba(254, 2, 151, 0.9); }
.map-pill:hover svg:first-child { color: #fff; }
.map-pill:hover svg:last-child { transform: translateX(3px); }

.footer-legal-row { position: relative; border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 18px 0; background: rgba(0, 0, 0, 0.18); }
.footer-legal-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 40px; }
.footer-legal { flex: 1 1 520px; max-width: 110ch; margin: 0; color: #8d9ba2; font-size: 14px; line-height: 1.5; }
.footer-legal a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color 0.25s ease; }
.footer-legal a:hover { color: #fff; }
.footer-policy { margin: 0; font-size: 14px; }
.footer-policy a { display: inline-flex; align-items: center; min-height: 44px; color: #c6d0d4; text-decoration: underline; text-decoration-color: rgba(254, 2, 151, 0.6); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.25s ease, text-decoration-color 0.25s ease; }
.footer-policy a:hover { color: #fff; text-decoration-color: var(--magenta); }

@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-map { grid-column: span 2; }
  .footer-bg img { width: 100%; opacity: 0.16; }
}
@media (max-width: 640px) {
  .footer-head { gap: 16px 20px; }
  .footer-logo img { height: 46px; }
  .footer-tag { order: 3; flex-basis: 100%; letter-spacing: 0.14em; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .footer-map { grid-column: auto; }
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .footer-links a:hover, .footer-links a[aria-current] { transform: none; }
  .footer-links a::before { display: none; }
  .footer-book { width: 100%; }
  .map { min-height: 220px; }
  .map-pill { left: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { .footer-links a, .footer-links a::before, .map-pill svg { transition: none; } }

/* ========== Privacy policy ==========
   Slim hero, then a sticky contents rail beside the policy. A dark "short version" panel opens the copy, each part
   is numbered with a hairline rhythm, rights sit in a ruled grid, and a lifted contact card closes it. */
.hero--slim { min-height: clamp(400px, 52vh, 480px); }
.hero--slim h1 { font-size: clamp(44px, 5.4vw, 72px); }

.legal-grid { display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 780px); justify-content: space-between; gap: 48px clamp(48px, 6vw, 112px); }
.legal-aside { position: sticky; top: 32px; align-self: start; }
.legal-toc summary { display: none; }
.legal-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; border-left: 1px solid var(--line); }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  position: relative; display: flex; gap: 12px; padding: 9px 0 9px 20px; color: var(--ink-soft); font-size: 16px; line-height: 1.35; text-decoration: none;
  transition: color 0.25s ease;
}
.legal-toc a::before { content: counter(toc, decimal-leading-zero); flex: none; width: 22px; color: var(--teal-deep); font: 700 14px/1.6 var(--head); letter-spacing: 0.06em; }
.legal-toc a::after { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--magenta); transform: scaleY(0); transition: transform 0.3s var(--out); }
.legal-toc a:hover { color: var(--ink); }
.legal-toc a.is-active { color: var(--ink); font-weight: 600; }
.legal-toc a.is-active::after { transform: none; }
.legal-date { margin: 24px 0 0; padding-left: 20px; color: var(--ink-soft); font-size: 14px; }

.legal-body { min-width: 0; }
.legal-summary {
  position: relative; isolation: isolate; overflow: hidden; margin-bottom: clamp(40px, 5vw, 64px); padding: clamp(28px, 3.4vw, 44px); border-radius: 22px; color: #fff;
  background: radial-gradient(60% 90% at 100% 0%, rgba(26, 180, 206, 0.24), rgba(26, 180, 206, 0) 70%), radial-gradient(40% 60% at 0% 100%, rgba(254, 2, 151, 0.12), rgba(254, 2, 151, 0) 70%), linear-gradient(180deg, #252e33 0%, #161a1d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 60px -32px rgba(20, 26, 29, 0.55), 0 44px 90px -44px rgba(254, 2, 151, 0.35);
}
.legal-summary::after { content: ""; position: absolute; left: clamp(28px, 3.4vw, 44px); bottom: 0; width: 96px; height: 3px; border-radius: 2px 2px 0 0; background: linear-gradient(90deg, var(--magenta), var(--teal)); }
.legal-summary h2 { margin: 0 0 20px; color: #fff; font-size: clamp(28px, 2.6vw, 34px); }
.legal-summary ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; margin: 0; padding: 0; list-style: none; }
.legal-summary li { display: flex; gap: 12px; color: #dfe6e9; font-size: 17px; line-height: 1.5; }
.legal-summary li svg { flex: none; width: 24px; height: 24px; margin-top: 1px; padding: 4px; border-radius: 50%; background: var(--teal); color: var(--ink); stroke-width: 3; }

.legal-part { padding: clamp(32px, 4vw, 44px) 0; border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.legal-part:first-of-type { border-top: 0; padding-top: 0; }
.legal-part h2 { display: flex; align-items: baseline; gap: 16px; margin: 0 0 18px; font-size: clamp(28px, 2.8vw, 38px); }
.legal-num { flex: none; color: var(--teal-deep); font-size: 0.55em; letter-spacing: 0.08em; }
.legal-part p { max-width: 68ch; margin: 0 0 16px; color: var(--ink-soft); font-size: 17px; line-height: 1.65; }
.legal-part p:last-child { margin-bottom: 0; }
.legal-part a:not(.btn) { color: var(--teal-deep); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(26, 180, 206, 0.5); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color 0.25s ease, text-decoration-color 0.25s ease; }
.legal-part a:not(.btn):hover { color: var(--magenta); text-decoration-color: var(--magenta); }
.legal-part strong { color: var(--ink); font-weight: 600; }
.legal-list { max-width: 68ch; margin: 0 0 16px; padding: 0; list-style: none; }
.legal-list li { position: relative; padding: 0 0 12px 26px; color: var(--ink-soft); font-size: 17px; line-height: 1.6; }
.legal-list li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 8px; height: 8px; border-radius: 2px; background: var(--teal); }
.legal-table { margin: 4px 0 20px; border-top: 1px solid var(--line); }
.legal-table div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 6px 32px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.legal-table dt { color: var(--ink); font-weight: 600; font-size: 17px; line-height: 1.45; }
.legal-table dd { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.55; }
.rights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 20px; padding: 0; list-style: none; border: 1px solid var(--lift-edge); border-radius: 18px; background: var(--lift-face); box-shadow: var(--lift-shadow); overflow: hidden; }
.rights li { padding: 20px 22px; border-bottom: 1px solid var(--line); transition: background-color 0.3s ease; }
.rights li:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line); }
.rights li:nth-last-child(-n + 3) { border-bottom: 0; }
.rights li:hover { background: rgba(26, 180, 206, 0.06); }
.rights strong { display: block; margin-bottom: 6px; font: 700 20px/1.1 var(--head); letter-spacing: 0.04em; text-transform: uppercase; }
.rights span { display: block; color: var(--ink-soft); font-size: 16px; line-height: 1.5; }

.legal-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 40px; align-items: center; margin-top: clamp(16px, 2vw, 24px); padding: clamp(26px, 3.4vw, 40px); border: 1px solid var(--lift-edge); border-radius: 22px; background: var(--lift-face); box-shadow: var(--lift-shadow); scroll-margin-top: 24px; }
.legal-contact h2 { margin: 0 0 12px; font-size: clamp(28px, 2.6vw, 34px); }
.legal-contact p { margin: 0 0 22px; color: var(--ink-soft); font-size: 17px; }
.legal-ways { margin: 0; padding: 0; list-style: none; }
.legal-ways li + li { border-top: 1px solid var(--line); }
.legal-ways a { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 0; color: var(--ink); font-weight: 600; font-size: 16px; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; transition: color 0.25s ease; }
.legal-ways small { display: block; margin-bottom: 2px; color: var(--ink-soft); font-weight: 500; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.legal-way-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid rgba(11, 115, 133, 0.28); border-radius: 50%; color: var(--teal-deep); transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; }
.legal-way-icon svg { width: 18px; height: 18px; }
.legal-ways a:hover { color: var(--teal-deep); }
.legal-ways a:hover .legal-way-icon { border-color: var(--magenta); background: var(--magenta); color: #fff; }

@media (max-width: 1000px) {
  .legal-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .legal-aside { position: static; }
  .legal-toc { border: 1px solid var(--lift-edge); border-radius: 16px; background: var(--lift-face); box-shadow: var(--lift-shadow); }
  .legal-toc summary {
    display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 20px; cursor: pointer; list-style: none;
    font: 700 18px/1 var(--head); letter-spacing: 0.08em; text-transform: uppercase;
  }
  .legal-toc summary::-webkit-details-marker { display: none; }
  .legal-toc summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--teal-deep); border-bottom: 2px solid var(--teal-deep); transform: translateY(-3px) rotate(45deg); transition: transform 0.3s var(--out); }
  .legal-toc[open] summary::after { transform: translateY(2px) rotate(-135deg); }
  .legal-toc nav { padding: 0 20px 14px; }
  .legal-toc ol { border-left: 0; }
  .legal-toc a { padding-left: 0; }
  .legal-toc a::after { display: none; }
  .legal-date { padding-left: 4px; margin-top: 14px; }
  .legal-contact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .hero--slim { min-height: clamp(340px, 50svh, 420px); }
  .legal-summary ul { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .legal-summary li { font-size: 16px; }
  .legal-table div { grid-template-columns: minmax(0, 1fr); }
  .rights { grid-template-columns: minmax(0, 1fr); }
  .rights li:not(:nth-child(3n + 1)) { border-left: 0; }
  .rights li:nth-last-child(-n + 3) { border-bottom: 1px solid var(--line); }
  .rights li:last-child { border-bottom: 0; }
  .legal-part p, .legal-list li { font-size: 16px; }
  .legal-contact .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .legal-toc a::after, .legal-toc summary::after { transition: none; } }