/* Buff Details: mobile-first. Base styles are the phone layout; wider screens add to them. */

:root {
  --bg: #0a0a0c;
  --bg-2: #101014;
  --surface: #16161b;
  --surface-2: #1d1d24;
  --line: #2a2a33;
  --line-2: #3b3b47;
  --text: #f5f5f7;
  --muted: #b0b0bc;
  --dim: #8a8a98;
  --pink: #fa22a5;
  --pink-2: #ff4fb9;
  --pink-ink: #1c0716;
  --pink-soft: rgba(250, 34, 165, 0.12);
  --pink-line: rgba(250, 34, 165, 0.45);
  --green: #25d366;
  --green-ink: #03230f;
  --header-h: 64px;
  --bar-h: 68px;
  --radius: 18px;
  --font-display: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
html:has(body.has-hub-bar) { scroll-padding-top: calc(var(--header-h) + 128px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 12vw, 5.25rem); }
h2 { font-size: clamp(2.1rem, 8vw, 3.25rem); }
h3 { font-size: 1.55rem; line-height: 1.05; }
h4 { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
small { font-size: 0.8em; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 8px; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--pink); color: var(--pink-ink); padding: 10px 16px; border-radius: 999px; font-weight: 700; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; margin: 0 auto; padding: 0 16px; }
/* heading beside content on desktop; stacked on phones */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.split > .section-head { margin-bottom: 12px; }
.section { padding: 56px 0; }
.section-tight { padding-top: 8px; }
.section-alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { display: grid; gap: 12px; margin-bottom: 28px; }
.eyebrow { font: 700 0.75rem/1.2 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--pink); display: flex; align-items: center; gap: 10px; }
.lede { color: var(--muted); font-size: 1.06rem; max-width: 60ch; }
.pink { color: var(--pink); }
.ico { width: 22px; height: 22px; flex: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 24px; border-radius: 999px;
  font: 700 1rem/1 var(--font-body); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn .ico { width: 20px; height: 20px; }
.btn-primary { background: var(--pink); color: var(--pink-ink); }
.btn-primary:hover { background: var(--pink-2); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--text); }
.btn-wa { background: var(--green); color: var(--green-ink); }
.btn-wa:hover { background: #3ee07a; }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 0.92rem; }
.btn-block { width: 100%; }
.btn-block-mobile { width: 100%; margin-top: 20px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--pink); font-weight: 700; text-decoration: none; }
.text-link .ico { width: 18px; height: 18px; transition: transform 0.15s; }
.text-link:hover .ico { transform: translateX(3px); }

/* ---------- header + menu ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 10, 12, 0.84);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.header-inner { display: flex; align-items: center; gap: 16px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { display: block; height: 30px; width: auto; }
@media (min-width: 560px) { .brand img { height: 40px; } }
.nav-desktop { display: none; margin-left: auto; gap: 2px; }
@media (max-width: 1199px) { .nav-desktop .nav-wide { display: none; } }
.nav-desktop a { padding: 9px 10px; border-radius: 999px; text-decoration: none; white-space: nowrap; color: var(--muted); font-weight: 500; font-size: 0.95rem; }
.nav-desktop a:hover, .nav-desktop a[aria-current="page"] { color: var(--text); background: var(--surface); }
.header-cta { display: none; }
.menu-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line-2); background: transparent; color: var(--text);
  font: 600 0.92rem var(--font-body); cursor: pointer;
}
.menu-btn .ico { width: 20px; height: 20px; }
@media (max-width: 359px) {
  .menu-btn { padding: 0 12px; }
  .menu-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

.menu-sheet {
  position: fixed; inset: 0; z-index: 70; background: var(--bg);
  display: flex; flex-direction: column;
  padding: 0 16px calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  animation: sheet-in 0.22s ease-out;
}
.menu-sheet[hidden] { display: none; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.menu-top { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); flex: none; }
.menu-close { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text); display: grid; place-items: center; cursor: pointer; }
.menu-links { list-style: none; margin: 12px 0 0; padding: 0; }
.menu-links a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 2px; border-bottom: 1px solid var(--line);
  font: 800 2.1rem/1 var(--font-display); text-transform: uppercase; text-decoration: none;
}
.menu-links a .ico { color: var(--dim); }
.menu-links a[aria-current="page"] { color: var(--pink); }
.menu-contact { margin-top: auto; display: grid; gap: 10px; padding-top: 28px; }

/* ---------- sticky phone action bar ---------- */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: 1.15fr 0.85fr 1.3fr; gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: rgba(10, 10, 12, 0.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.action-bar a {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 50px; padding: 0 6px; border-radius: 14px; text-decoration: none;
  font-weight: 700; font-size: 0.9rem; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line);
}
.action-bar .ico { width: 20px; height: 20px; }
.action-bar .ab-wa .ico { color: var(--green); }
.action-bar .ab-primary { background: var(--pink); border-color: var(--pink); color: var(--pink-ink); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; padding: 44px 0 0; }
.hero::before {
  content: ""; position: absolute; z-index: -1;
  width: 140vw; height: 140vw; max-width: 1000px; max-height: 1000px;
  right: -55vw; top: -50vw;
  background: radial-gradient(closest-side, rgba(250, 34, 165, 0.34), rgba(250, 34, 165, 0.08) 55%, transparent);
}
/* one screen tall at most: on phones the hero runs on past the fold, and stretching the
   footage down all of it would zoom in until the work in it was cropped away */
.hero-media { position: absolute; inset: 0 0 auto; height: min(100%, 100svh); z-index: -2; opacity: 0; transition: opacity 1.8s ease; pointer-events: none; }
.hero-media.is-on { opacity: 1; }
.hero-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the footage stays a backdrop, but light enough to see the work: dimmed under the copy
   and faded into the page at the top and bottom */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10, 10, 12, 0.55), rgba(10, 10, 12, 0) 22%, rgba(10, 10, 12, 0) 72%, var(--bg)), rgba(10, 10, 12, 0.56);
}
.hero::after {
  /* a light sweep, like a reflection along a panel */
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.05) 46%, transparent 52%, transparent 60%, rgba(255, 255, 255, 0.03) 64%, transparent 68%);
}
.hero-inner { display: grid; gap: 22px; }
.hero h1 { font-size: clamp(3rem, 14vw, 6.5rem); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 0 rgba(250, 34, 165, 0.6); animation: pulse 2.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(250, 34, 165, 0); } 100% { box-shadow: 0 0 0 0 rgba(250, 34, 165, 0); } }
.hero-ctas { display: grid; gap: 10px; }
/* the pink streak glides in under the second line once the logo intro has played */
.streak-line { position: relative; display: inline-block; padding-bottom: 0.08em; }
.streak-line::after {
  content: ""; position: absolute; left: 0; right: -0.15em; bottom: -0.06em; height: max(5px, 0.085em); border-radius: 999px;
  background: linear-gradient(90deg, rgba(250, 34, 165, 0), var(--pink) 16%, #ff8bd3 72%, #fff);
  box-shadow: 0 0 18px rgba(250, 34, 165, 0.55);
  transform-origin: left; animation: streak-in 1.1s 2s cubic-bezier(0.6, 0, 0.2, 1) both;
}
@keyframes streak-in { from { transform: scaleX(0); opacity: 0; } 25% { opacity: 1; } }
/* As the page opens a glint sweeps the header logo and its slogan, then SHOWROOM FINISH. and
   ON YOUR DRIVEWAY. in turn, once. The logo's sparkles twinkle along both lines as it passes
   (build.js HERO_LINES) and keep coming round every 3.5 s after it. */
.glint-word { position: relative; display: inline-block;
  background: linear-gradient(105deg, var(--text) 42%, #fff 47%, #ffc2e6 50%, #fff 53%, var(--text) 58%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: glint-sweep 1.1s 0.9s ease-in-out both; }
.glint-word.glint-pink { background-image: linear-gradient(105deg, var(--pink) 42%, #ff8fd2 47%, #fff 50%, #ff8fd2 53%, var(--pink) 58%); animation-delay: 1.25s; }
@keyframes glint-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
.glint-w { white-space: nowrap; }
.glint-at { position: relative; display: inline-block; width: 0; height: 1em; vertical-align: top; }
.glint-at .glint-star { max-width: none; }
.glint-star { position: absolute; width: 0.3em; height: 0.3em; fill: #fff; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 12px rgba(250, 34, 165, 0.7));
  animation: twinkle 3.5s ease-out infinite both; }
@keyframes twinkle { 0% { opacity: 0; transform: scale(0) rotate(-45deg); } 10% { opacity: 1; transform: scale(1) rotate(0); } 26%, 100% { opacity: 0; transform: scale(0.4) rotate(30deg); } }
.page-home .brand { position: relative; }
.page-home .brand::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.95) 48%, #ffc2e6 50%, rgba(255, 255, 255, 0.95) 52%, transparent 58%) 100% 0 / 300% 100% no-repeat;
  -webkit-mask: url(/assets/logo-wordmark.svg) left center / contain no-repeat; mask: url(/assets/logo-wordmark.svg) left center / contain no-repeat;
  animation: glint-sweep 1.1s 0.5s ease-in-out both;
}
@media (min-width: 560px) {
  .page-home .brand::after { -webkit-mask-image: url(/assets/logo-lockup.svg); mask-image: url(/assets/logo-lockup.svg); }
}
@media (prefers-reduced-motion: reduce) { .glint-star, .page-home .brand::after { display: none; } .glint-word { background: none; -webkit-text-fill-color: currentColor; animation: none; } }
.hero .trust li { padding: 7px 13px 7px 10px; border-radius: 999px; background: rgba(22, 22, 27, 0.72); border: 1px solid var(--line); color: var(--text); font-size: 0.86rem; }

/* a strip of real work along the bottom of the hero, drifting slowly; it all links to Our work */
.hero-reel { display: grid; gap: 12px; margin-top: 40px; padding-bottom: 28px; text-decoration: none; }
.hero-reel-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero-reel .text-link { margin-top: 0; }
.hero-reel-strip { display: block; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.hero-reel-track { display: flex; gap: 10px; padding-right: 10px; width: max-content; animation: reel 70s linear infinite; }
.hero-reel-track img { flex: none; height: 120px; width: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); filter: saturate(0.85) brightness(0.85); transition: filter 0.3s; }
.hero-reel:hover .hero-reel-track { animation-play-state: paused; }
.hero-reel:hover .hero-reel-track img { filter: none; }
@keyframes reel { to { transform: translateX(-50%); } }
.trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: 0.9rem; }
.trust li { display: inline-flex; align-items: center; gap: 7px; }
.trust .ico { width: 18px; height: 18px; color: var(--pink); }

/* phones: the logo leads, then the copy, the facts, the trust line */
.hero-copy, .hero-side { display: contents; }
.hero-art { order: -1; max-width: 560px; }
.hero .trust { order: 1; }
.hero-logo { display: block; width: 100%; height: auto; overflow: visible; }

/* logo intro: the car slides in, the polisher drops onto the roof, the sparkle pops
   as the streak passes it and twinkles once the glide ends (the glide itself is SMIL,
   started from build.js) */
.hl-car { animation: hl-car 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hl-polisher { animation: hl-polisher 0.6s 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hl-sparkle { transform-box: fill-box; transform-origin: center; animation: hl-sparkle 1.5s 1.1s ease-out both; }
@keyframes hl-car { from { opacity: 0; transform: translateX(-80px); } }
@keyframes hl-polisher { from { opacity: 0; transform: translateY(-40px); } }
@keyframes hl-sparkle {
  0% { opacity: 0; transform: scale(0) rotate(-90deg); }
  25% { opacity: 1; transform: scale(1.3) rotate(0deg); }
  40%, 80% { transform: scale(1); }
  88% { transform: scale(1.35); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---------- tabs: the area switch and the work filter ----------
   A pink pill glides to the chosen option and a glint sweeps across it as it lands. */
.hub-toggle, .seg {
  --n: 2; --i: 0;
  position: relative; isolation: isolate;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  width: 100%; max-width: 460px; padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
}
.hub-toggle::before, .seg::before {
  content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px) / var(--n)); border-radius: 999px;
  background: linear-gradient(105deg, var(--pink), #ff5cbd 55%, var(--pink));
  box-shadow: 0 8px 24px rgba(250, 34, 165, 0.35);
  transform: translateX(calc(var(--i) * 100%));
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1);
}
html[data-hub="london"] .hub-toggle { --i: 1; }
.hub-toggle button, .seg button {
  position: relative; overflow: hidden; appearance: none; border: 0; background: transparent; color: var(--muted);
  min-height: 50px; padding: 6px 8px; border-radius: 999px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font: 800 1.08rem/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.05em;
  transition: color 0.25s;
  -webkit-tap-highlight-color: transparent;
}
.hub-toggle button:hover, .seg button:hover { color: var(--text); }
.hub-toggle button small, .seg button small { font: 500 0.68rem/1 var(--font-body); text-transform: none; letter-spacing: 0.02em; opacity: 0.8; }
.hub-toggle button[aria-pressed="true"], .seg button[aria-pressed="true"] { color: var(--pink-ink); }
.hub-toggle button[aria-pressed="true"]::after, .seg button[aria-pressed="true"]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.6) 50%, transparent 65%) 120% 0 / 250% 100% no-repeat;
  animation: tab-glint 0.9s 0.25s ease-out both;
}
@keyframes tab-glint { to { background-position: -30% 0; } }
html[data-hub="herts"] [data-only="london"],
html[data-hub="london"] [data-only="herts"] { display: none; }
.price { font-variant-numeric: tabular-nums; }
.price.bump { animation: bump 0.35s ease-out; }
@keyframes bump { 0% { opacity: 0.2; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }

/* ---------- home service list ---------- */
.svc-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.svc {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 16px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color 0.15s, transform 0.15s;
}
.svc:hover { border-color: var(--pink-line); }
.svc:active { transform: scale(0.99); }
.svc-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.svc-body strong { font-size: 1.02rem; }
.svc-body span { color: var(--muted); font-size: 0.86rem; line-height: 1.35; }
.svc-price { text-align: right; display: grid; line-height: 1; }
.svc-price small { font-size: 0.7rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 3px; }
.svc-price .price { font: 800 1.75rem/1 var(--font-display); color: var(--text); }
.pkg-ico {
  flex: none; width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--pink-soft); color: var(--pink); border: 1px solid rgba(250, 34, 165, 0.2);
}

/* ---------- home: Build your clean, one tile per stage of /build ---------- */
.bx { display: grid; gap: 12px; margin-top: 20px; }
.bx-tile {
  position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 10px; align-content: start;
  padding: 0 18px 18px; border-radius: 22px; text-decoration: none; min-width: 0;
  background: radial-gradient(ellipse 90% 60% at 50% 0, rgba(250, 34, 165, 0.14), transparent 70%), var(--surface);
  border: 1px solid var(--line);
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.35s, flex-grow 0.5s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.bx-tile:hover { border-color: var(--pink-line); box-shadow: 0 24px 60px -30px rgba(250, 34, 165, 0.6); }
.bx-tile:active { transform: scale(0.99); }
.bx-art { position: relative; display: block; height: 104px; margin: 0 -18px; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(160deg, #1b1a21, #09090b 60%, #131117); }
.bx-head { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.bx-n { font: 800 0.95rem/1 var(--font-display); color: var(--pink); letter-spacing: 0.06em; }
.bx-head strong { flex: 1; font: 800 2rem/1 var(--font-display); text-transform: uppercase; }
.bx-go { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.35s; }
.bx-tile:hover .bx-go { background: var(--pink); border-color: var(--pink); color: var(--pink-ink); transform: rotate(-45deg); }
.bx-line { color: var(--muted); font-size: 0.92rem; }
.bx-list { display: grid; gap: 6px; padding-top: 10px; border-top: 1px dashed var(--line-2); }
.bx-list > span { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.9rem; }
.bx-list b { font: 800 1.2rem/1 var(--font-display); white-space: nowrap; }
.bx-list b .price { font: inherit; }
.bx-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* wash: foam rising, and a squeegee pass of shine */
.bx-wash .bx-art i { position: absolute; bottom: -30px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.7); background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.08) 60%); animation: bx-rise 4.5s var(--d) linear infinite; }
.bx-squeegee { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%) -120% 0 / 250% 100% no-repeat; animation: bx-sweep 4s 1s ease-in-out infinite; }
@keyframes bx-rise { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-180px) scale(1); opacity: 0; } }
@keyframes bx-sweep { 0%, 40% { background-position: 140% 0; } 80%, 100% { background-position: -40% 0; } }
.bx-wash:hover .bx-art i { animation-duration: 2.2s; }

/* polish: swirl rings round a light, which clear when you point at the tile */
.bx-light { position: absolute; left: 62%; top: 46%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 18px 6px rgba(255, 255, 255, 0.6), 0 0 50px 16px rgba(250, 34, 165, 0.5); transition: box-shadow 0.6s; }
.bx-polish .bx-art i { position: absolute; left: 62%; top: 46%; width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1); border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.4); animation: bx-spin 14s linear infinite; transition: opacity 0.5s var(--d), transform 0.5s var(--d); }
.bx-polish:hover .bx-art i { opacity: 0; }
.bx-polish:hover .bx-light { box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.9), 0 0 36px 10px rgba(250, 34, 165, 0.6); }
@keyframes bx-spin { to { rotate: 360deg; } }

/* protect: beads sitting on the paint roll off when you point at the tile */
.bx-protect .bx-art i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle at 32% 30%, #fff 0 14%, rgba(255, 255, 255, 0.15) 22%, rgba(30, 30, 40, 0.3) 65%, rgba(255, 255, 255, 0.45)); box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.5), inset 0 -2px 3px rgba(250, 34, 165, 0.6); transition: transform 0.9s cubic-bezier(0.5, 0, 0.9, 0.5) var(--d), opacity 0.9s var(--d); }
.bx-protect:hover .bx-art i { transform: translateY(150px); opacity: 0; }

@media (min-width: 900px) {
  .bx { display: flex; gap: 14px; }
  .bx-tile { flex: 1 1 0; }
  .bx:hover .bx-tile { flex-grow: 0.85; }
  .bx .bx-tile:hover { flex-grow: 1.3; }
  .bx-art { height: 160px; }
}

/* ---------- features ---------- */
.features { display: grid; gap: 12px; }
.feature { padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.feature > .ico { width: 30px; height: 30px; color: var(--pink); margin-bottom: 6px; }
.feature p { color: var(--muted); }

.about-strip h2 { margin-top: 12px; }

/* ---------- steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: step; }
.steps li { display: flex; gap: 16px; padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.step-n { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--pink); color: var(--pink-ink); font: 800 1.35rem/1 var(--font-display); }
.steps h3 { font-size: 1.35rem; margin: 6px 0 6px; }
.steps p { color: var(--muted); }

/* ---------- FAQ / accordions ---------- */
.faq { display: grid; gap: 10px; }
.faq details, details.included { border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.faq summary, details.included summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px; font-weight: 600; min-height: 56px;
}
.faq summary::-webkit-details-marker, details.included summary::-webkit-details-marker { display: none; }
.faq summary .ico, details.included summary .ico { color: var(--pink); transition: transform 0.2s; }
details[open] > summary .ico { transform: rotate(180deg); }
.faq-a { padding: 0 18px 18px; color: var(--muted); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; text-align: left; }
.cta-band::before { content: ""; position: absolute; z-index: -1; inset: auto -30% -60% auto; width: 700px; height: 700px; background: radial-gradient(closest-side, rgba(250, 34, 165, 0.22), transparent); }
.cta-inner { display: grid; gap: 16px; }
.cta-buttons { display: grid; gap: 10px; margin-top: 8px; }

/* ---------- page heads ---------- */
.page-head { padding: 36px 0 28px; position: relative; overflow: hidden; isolation: isolate; }
.page-head::before { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; right: -220px; top: -260px; background: radial-gradient(closest-side, rgba(250, 34, 165, 0.24), transparent); }
.page-head .wrap { display: grid; gap: 14px; }
.page-head h1 { font-size: clamp(2.6rem, 11vw, 4.5rem); }
/* a studio car (build.js headCar), faded in from the dark: a band under the text on phones,
   standing on the right from 900px. The coupé's studio already thins out at its edges and its
   right edge cuts the car, so it sits against the edge of the screen. */
.head-car {
  position: relative; /* the lights layer sits over the car, not the whole head */
  height: clamp(200px, 60vw, 340px); margin: 22px 0 -28px;
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08) 12%, rgba(0, 0, 0, 0.4) 24%, rgba(0, 0, 0, 0.8) 33%, #000 40%), linear-gradient(0deg, transparent, #000 22%, #000 82%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08) 12%, rgba(0, 0, 0, 0.4) 24%, rgba(0, 0, 0, 0.8) 33%, #000 40%), linear-gradient(0deg, transparent, #000 22%, #000 82%, transparent); mask-composite: intersect;
}
.head-car img { display: block; width: 100%; height: 100%; object-fit: cover; }
.head-car-neon-coupe img { object-position: 100% 76%; }
.head-car-neon-estate img { object-position: 100% 60%; }
.head-car-grey-saloon img { object-position: 100% 45%; }
.head-car-grey-saloon {
  -webkit-mask-image: linear-gradient(0deg, transparent, #000 22%, #000 82%, transparent);
  mask-image: linear-gradient(0deg, transparent, #000 22%, #000 82%, transparent);
}
/* the cars' lights (the saloon's and coupé's headlights, the estate's tail lights): every 7 s
   they flicker on, stay lit, then fade off */
.head-car-lights { position: absolute; inset: 0; mix-blend-mode: screen; opacity: 0; animation: lights-loop 7s 0.5s ease-out infinite; }
@keyframes lights-loop {
  0% { opacity: 0; } 4% { opacity: 0.9; } 7% { opacity: 0.1; } 11% { opacity: 1; } 14% { opacity: 0.35; } 20% { opacity: 1; }
  45% { opacity: 0.85; } 70% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .head-car-lights { animation: none; opacity: 1; } }
@media (min-width: 900px) {
  .page-head.has-car { display: flex; align-items: center; min-height: clamp(440px, 38vw, 600px); }
  .page-head.has-car .wrap { padding-right: 42%; }
  .head-car {
    position: absolute; z-index: -1; right: clamp(0px, 3vw, 64px); bottom: 0;
    height: calc(100% - 28px); max-height: 640px; margin: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08) 10%, rgba(0, 0, 0, 0.4) 20%, rgba(0, 0, 0, 0.8) 28%, #000 34%), linear-gradient(0deg, transparent, #000 10%);
    mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08) 10%, rgba(0, 0, 0, 0.4) 20%, rgba(0, 0, 0, 0.8) 28%, #000 34%), linear-gradient(0deg, transparent, #000 10%);
  }
  .head-car img { width: auto; object-fit: contain; }
  /* cut off at its right edge: it stands against the edge of the screen, fading only top and bottom */
  .head-car-grey-saloon {
    right: 0;
    -webkit-mask-image: linear-gradient(0deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(0deg, transparent, #000 8%, #000 92%, transparent);
  }
  .head-car-lights { left: auto; width: auto; height: 100%; }
  .head-car-neon-coupe, .head-car-neon-estate {
    /* the car is the lower half of the picture: taller than the head, the dark top is cut off */
    right: 0; height: 125%; max-height: 820px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%), linear-gradient(0deg, transparent, #000 6%, #000 86%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 22%), linear-gradient(0deg, transparent, #000 6%, #000 86%, transparent);
  }
  /* the estate fills more of its picture, so it stands the height of the head, against the
     screen's edge like the coupé, stretched a touch wider to the left to fill the space */
  .head-car-neon-estate { height: 104%; transform: scaleX(1.14); transform-origin: right bottom; }
}

/* ---------- services page ---------- */
.hub-bar {
  position: sticky; top: var(--header-h); z-index: 30;
  background: rgba(10, 10, 12, 0.9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line); padding: 10px 0;
  overflow-x: clip;
}
.hub-bar-inner { display: grid; gap: 10px; }
.jump { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.jump::-webkit-scrollbar { display: none; }
.jump a { position: relative; flex: none; padding: 10px 12px 13px; text-decoration: none; font: 700 1.02rem/1 var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); transition: color 0.2s; }
.jump a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--pink), #ff8bd3); box-shadow: 0 0 10px rgba(250, 34, 165, 0.5); transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1); }
.jump a:hover, .jump a[aria-current="true"] { color: var(--text); }
.jump a:hover::after { transform: scaleX(0.4); }
.jump a[aria-current="true"]::after { transform: scaleX(1); }

.pkg-grid { display: grid; gap: 16px; }
.pkg { display: grid; gap: 18px; align-content: start; padding: 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 128px); }
.pkg-head { display: flex; gap: 14px; align-items: flex-start; }
.pkg-head p { color: var(--muted); margin-top: 8px; }
.price-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.price-row li { padding: 12px 6px 10px; text-align: center; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); display: grid; gap: 4px; }
.price-row .size { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.price-row .price { font: 800 1.85rem/1 var(--font-display); }
.upgrade { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--pink-soft); border: 1px solid rgba(250, 34, 165, 0.25); font-size: 0.92rem; }
.upgrade .ico { color: var(--pink); width: 20px; height: 20px; margin-top: 1px; }
.upgrade strong { color: var(--pink); white-space: nowrap; }
.best { display: grid; gap: 10px; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; }
.ticks .ico { width: 18px; height: 18px; margin-top: 3px; color: var(--pink); }
details.included { background: var(--bg-2); }
.stages { display: grid; gap: 18px; padding: 0 18px 18px; }
.stage { display: grid; gap: 10px; }
.stage .ticks li { color: var(--muted); }
.note { font-size: 0.88rem; color: var(--muted); padding-left: 12px; border-left: 2px solid var(--pink-line); }
.note.wide { margin-top: 20px; max-width: 70ch; }

.coatings { display: grid; gap: 12px; }
.coating { padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.coating-life { font: 800 2.6rem/0.9 var(--font-display); color: var(--pink); text-transform: uppercase; }
.coating h3 { font-size: 1.3rem; }
.coating p { color: var(--muted); }
.coating .coating-with { margin-top: auto; color: var(--text); font-size: 0.86rem; font-weight: 600; padding-top: 10px; border-top: 1px solid var(--line); }
/* the bottle, lit like a studio product shot in the colour of its own packaging */
.coating-art { position: relative; display: grid; place-items: end center; height: 236px; margin: -22px -22px 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
  background: radial-gradient(55% 75% at 50% 36%, rgba(var(--accent), 0.36), rgba(var(--accent), 0.06) 55%, transparent 80%), linear-gradient(180deg, #1a1a20, #0e0e12); }
.coating-art::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 15px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent); }
.coating-art svg { display: block; height: 222px; width: auto; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.5)); transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.coating:hover .coating-art svg { transform: translateY(-5px) rotate(-1.5deg); }
.coating-specs { display: grid; gap: 8px; margin-top: 4px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.coating .coating-specs-head { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--accent)); }
.coating-specs dl { display: grid; gap: 6px; margin: 0; }
.coating-specs dl div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; font-size: 0.88rem; line-height: 1.45; }
.coating-specs dt { color: var(--dim); }
.coating-specs dd { margin: 0; color: var(--text); }
.coating-source { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 2px; font-size: 0.84rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.coating-source .ico { width: 14px; height: 14px; }
.coating-source:hover { color: var(--text); }
.coatings-note { margin-top: 14px; font-size: 0.82rem; color: var(--dim); }
@media (prefers-reduced-motion: reduce) {
  .coating-art svg { transition: none; }
  .coating:hover .coating-art svg { transform: none; }
}

.addon-grid { display: grid; gap: 12px; }
.addon { padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 12px; align-content: start; }
.addon-head { display: flex; align-items: center; gap: 12px; }
.addon-head h3 { font-size: 1.3rem; }
.addon > p { color: var(--muted); font-size: 0.95rem; }
.addon-prices { list-style: none; margin: 0; padding: 0; display: grid; }
.addon-prices li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 0.94rem; }
.addon-prices span { color: var(--muted); }
.addon-prices strong { margin-left: auto; text-align: right; }

.table-wrap { border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); overflow-x: auto; }
.price-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.price-table th, .price-table td { padding: 13px 10px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: middle; }
.price-table tr:last-child th, .price-table tr:last-child td { border-bottom: 0; }
.price-table th[scope="row"] { text-align: left; font-weight: 600; }
.price-table th[scope="row"] a { text-decoration: none; }
.price-table th[scope="row"] small { display: block; color: var(--dim); font-weight: 400; }
.price-table thead th { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: var(--bg-2); }
.price-table thead th:first-child { text-align: left; }
.price-table td { font-weight: 700; white-space: nowrap; }
.price-table td[colspan] { white-space: normal; font-weight: 500; color: var(--muted); font-size: 0.86rem; }

/* ---------- areas ---------- */
.hub-cards { display: grid; gap: 14px; }
.hub-card { display: grid; gap: 20px; padding: 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.hub-card h2 { margin: 8px 0 10px; }
.hub-centre { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.hub-centre .ico { width: 18px; height: 18px; color: var(--pink); }
.chips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 12px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); font-size: 0.86rem; }
.hub-from { margin-top: 16px; color: var(--muted); }
.hub-from strong { color: var(--text); font: 800 1.5rem/1 var(--font-display); }
.rings { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
.rings span { position: absolute; border-radius: 50%; border: 1px dashed var(--pink-line); }
.rings span:nth-child(1) { inset: 0; }
.rings span:nth-child(2) { inset: 22px; border-style: solid; border-color: rgba(250, 34, 165, 0.3); }
.rings span:nth-child(3) { inset: 44px; background: var(--pink-soft); border: 0; }
.rings b { position: relative; font: 800 1.4rem/1 var(--font-display); color: var(--pink); }

.prose { display: grid; gap: 16px; }
.prose h2 { font-size: clamp(1.9rem, 7vw, 2.6rem); margin-top: 12px; }
.prose p { color: var(--muted); max-width: 70ch; }
.prose p strong { color: var(--text); }
.prose .btn { justify-self: start; margin-top: 8px; }
.brand-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.brand-list li { padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.brand-list strong { color: var(--text); }

/* ---------- the van page and the photo band that links to it ---------- */
.van-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: end; min-height: min(86vh, 820px); padding: 140px 0 40px; }
.van-hero-photo, .van-teaser-photo { position: absolute; inset: 0; z-index: -1; }
.van-hero-photo img, .van-teaser-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.van-hero-photo::after, .van-teaser-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10, 10, 12, 0.45), rgba(10, 10, 12, 0.08) 24%, rgba(10, 10, 12, 0.8) 50%, var(--bg) 92%); }
.van-hero-copy { display: grid; gap: 18px; }
.van-hero h1 { font-size: clamp(3rem, 13vw, 7.5rem); }

.van-stats { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.van-stats ul { list-style: none; margin: 0; padding: 0; display: grid; }
.van-stats li { display: flex; align-items: baseline; gap: 16px; padding: 22px 0; }
.van-stats li + li { border-top: 1px solid var(--line); }
.van-stats strong { flex: none; font: 800 clamp(3.4rem, 15vw, 6rem)/0.85 var(--font-display); color: var(--pink); }
.van-stats small { font-size: 0.42em; margin-left: 4px; color: var(--text); }
.van-stats span { color: var(--muted); font-weight: 600; max-width: 18ch; }

.van-rows { display: grid; gap: 56px; }
.van-row { display: grid; gap: 22px; align-items: center; }
.van-photo { margin: 0; overflow: hidden; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); }
.van-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.van-text, .van-card { display: grid; gap: 10px; align-content: start; }
.van-num { font: 800 1rem/1 var(--font-display); letter-spacing: 0.14em; color: var(--pink); }
.van-text h3 { font-size: clamp(2.4rem, 9vw, 4rem); }
.van-what { font-size: 1.08rem; font-weight: 600; }
.van-text > p:last-child, .van-card > p:last-child { color: var(--muted); max-width: 54ch; }
.van-more { display: grid; gap: 14px; margin-top: 56px; }
.van-card { padding: 26px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.van-card h3 { font-size: clamp(1.9rem, 7vw, 2.6rem); }

/* the photo you can tap: a spotlight follows the chosen dot */
.explore { display: grid; gap: 18px; }
.explore-photo { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); }
.explore-photo img { display: block; width: 100%; height: auto; }
.explore.is-live .explore-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(10, 10, 12, 0) 0 9%, rgba(10, 10, 12, 0.55) 26%); }
.hotspot {
  position: absolute; z-index: 1; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; border: 2px solid #fff; cursor: pointer;
  background: var(--pink); color: var(--pink-ink); font: 800 0.9rem/1 var(--font-display);
  animation: pulse 2.4s infinite; transition: transform 0.2s, background-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.hotspot::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
.hotspot:hover { transform: scale(1.12); }
.hotspot[aria-pressed="true"] { background: #fff; transform: scale(1.2); animation: none; box-shadow: 0 0 0 6px rgba(250, 34, 165, 0.45); }
.explore:not(.is-live) .hotspot, .explore:not(.is-live) .kit-nav { display: none; }
.explore-info { display: grid; gap: 12px; align-content: start; }
.kit { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.kit[hidden] { display: none; }
.kit h3 { font-size: clamp(2rem, 7vw, 2.8rem); }
.kit > p:last-child { color: var(--muted); }
.kit-nav { display: flex; gap: 10px; }
.ico.flip { transform: scaleX(-1); }

.van-teaser-link { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: end; min-height: clamp(440px, 72vh, 760px); text-decoration: none; }
.van-teaser-photo img { transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.van-teaser-link:hover .van-teaser-photo img { transform: scale(1.04); }
.van-teaser-copy { display: grid; gap: 12px; padding-top: 48px; padding-bottom: 48px; }
.van-teaser-title { font: 800 clamp(3rem, 12vw, 6.5rem)/0.92 var(--font-display); text-transform: uppercase; }
.van-teaser .text-link { margin-top: 6px; }

/* ---------- service pages ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--dim); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.svc-panel { display: grid; gap: 16px; align-content: start; }
.panel-title { font-size: 1.55rem; }
.stage-grid { display: grid; gap: 12px; }
.stage-card { display: grid; gap: 12px; align-content: start; padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.stage-card h3 { font-size: 1.4rem; }
.where { display: grid; gap: 24px; }
.where h3 { font-size: 1.6rem; margin-bottom: 6px; }
.more-link { margin-top: 0; justify-self: start; }
/* a service list beside a heading stays one column */
.split .svc-list { grid-template-columns: minmax(0, 1fr); }

/* ---------- quote builder ---------- */
.quote-layout { display: grid; gap: 20px; align-items: start; }
.quote { display: grid; gap: 14px; }
.quote fieldset { margin: 0; padding: 20px 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg-2); display: grid; gap: 14px; min-width: 0; scroll-margin-top: calc(var(--header-h) + 16px); }
.quote fieldset.has-error { border-color: #ff6b8a; }
.quote legend { float: left; width: 100%; padding: 0; display: flex; align-items: center; gap: 10px; font: 800 1.45rem/1 var(--font-display); text-transform: uppercase; }
.quote legend small { font: 500 0.8rem var(--font-body); text-transform: none; color: var(--dim); margin-left: auto; }
.quote legend + * { clear: both; }
.q-n { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--pink); color: var(--pink-ink); font-size: 1.1rem; }
.q-hint { font-size: 0.86rem; color: var(--dim); }
.q-msg { font-size: 0.9rem; color: var(--text); padding: 12px 14px; border-radius: 12px; background: var(--pink-soft); border: 1px solid rgba(250, 34, 165, 0.25); }
.q-error { font-size: 0.9rem; color: #ff8aa3; font-weight: 600; }
.opts { display: grid; gap: 8px; }
.opt {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 14px; min-height: 60px; border-radius: 14px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color 0.15s, background-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.opt[hidden] { display: none; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.opt-tick { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; transition: border-color 0.15s, background-color 0.15s; }
.opt-check .opt-tick { border-radius: 7px; }
.opt-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.opt-body strong { font-size: 1rem; }
.opt-body small { color: var(--muted); font-size: 0.84rem; line-height: 1.35; }
.opt-price { font: 800 1.35rem/1 var(--font-display); white-space: nowrap; color: var(--text); }
.opt-price small { font: 500 0.7rem var(--font-body); color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 4px; }
.opt:has(input:checked) { border-color: var(--pink); background: linear-gradient(var(--pink-soft), var(--pink-soft)), var(--surface); }
.opt:has(input:checked) .opt-tick { border-color: var(--pink); background: var(--pink); box-shadow: inset 0 0 0 4px var(--surface); }
.opt-check:has(input:checked) .opt-tick { box-shadow: none; background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c0716' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat; }
.opt:has(input:focus-visible) { outline: 2px solid var(--pink); outline-offset: 2px; }
.opts-seg { grid-template-columns: repeat(3, 1fr); }
.opt-seg { justify-content: center; text-align: center; padding: 12px 6px; }
.opt-seg .opt-body strong { font-size: 0.95rem; }
.opt-group { cursor: default; flex-wrap: wrap; }
.mini-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; width: 100%; padding: 4px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.mini-seg label { position: relative; cursor: pointer; }
.mini-seg input { position: absolute; opacity: 0; pointer-events: none; }
.mini-seg span { display: grid; place-items: center; min-height: 42px; padding: 4px; border-radius: 9px; font-size: 0.82rem; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.2; }
.mini-seg em { font-style: normal; }
.mini-seg input:checked + span { background: var(--pink); color: var(--pink-ink); }
.mini-seg input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: 2px; }
.stepper { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.stepper button { width: 42px; height: 42px; border-radius: 9px; border: 0; background: var(--surface-2); color: var(--text); font-size: 1.3rem; cursor: pointer; }
.stepper output { min-width: 32px; text-align: center; font: 800 1.35rem/1 var(--font-display); }
.fields { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 0.92rem; }
.field label small { color: var(--dim); font-weight: 400; }
.field input, .field textarea {
  width: 100%; min-height: 52px; padding: 13px 14px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text);
  font: 400 16px/1.4 var(--font-body);
}
.field textarea { resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-soft); }
.send { display: grid; gap: 10px; padding-top: 6px; scroll-margin-top: calc(var(--header-h) + 16px); }

/* "What size is my car?": the finder (here and in the price builder) and the guide */
.size-finder { display: grid; gap: 10px; padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.size-finder.is-compact { margin-top: 4px; padding: 14px; background: transparent; }
.sf-label { font-weight: 600; font-size: 0.92rem; }
.size-finder input {
  width: 100%; min-height: 52px; padding: 13px 14px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--bg); color: var(--text); font: 400 16px/1.4 var(--font-body);
}
.size-finder input::placeholder { color: var(--dim); }
.size-finder input:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-soft); }
.sf-result { display: grid; gap: 8px; padding: 16px; border-radius: 14px; background: var(--pink-soft); border: 1px solid var(--pink-line); animation: sf-in 0.25s ease both; }
.sf-result p { color: var(--muted); }
.sf-result strong { color: var(--text); }
.sf-result .sf-car { font-weight: 600; color: var(--text); }
.sf-result .sf-size { font: 800 2.6rem/0.9 var(--font-display); text-transform: uppercase; color: var(--pink); }
.sf-result .sf-note { font-size: 0.82rem; color: var(--dim); }
.sf-result .btn { justify-self: start; margin-top: 4px; }
.sf-prices { list-style: none; margin: 4px 0 0; padding: 10px 0 0; display: grid; gap: 6px; border-top: 1px solid var(--pink-line); }
.sf-prices li { display: flex; justify-content: space-between; gap: 12px; font-size: 0.95rem; }
.sf-fallback { display: grid; gap: 10px; }
.sf-result[hidden], .sf-fallback[hidden] { display: none; }
.sf-fallback p { color: var(--muted); font-size: 0.92rem; }
.sf-types { display: grid; gap: 8px; }
.sf-types button { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.sf-types button strong { font: 800 1.15rem/1 var(--font-display); text-transform: uppercase; }
.sf-types button small { color: var(--muted); font-size: 0.82rem; }
.sf-types button:hover { border-color: var(--pink-line); background: var(--pink-soft); }
@keyframes sf-in { from { opacity: 0; transform: translateY(4px); } }
.size-page { display: grid; gap: 28px; align-items: start; }
.size-page-tool { display: grid; gap: 14px; }
.size-page-tool .hub-toggle { justify-self: start; }
.size-guide { display: grid; gap: 12px; }
.size-card { display: grid; gap: 6px; padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.size-card-label { font: 800 1.9rem/0.95 var(--font-display); text-transform: uppercase; color: var(--pink); }
.size-card h2 { font-size: 1.3rem; }
.size-card p { color: var(--muted); }
.size-card .size-card-eg { font-size: 0.9rem; color: var(--text); }
.size-card-eg span { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
@media (min-width: 560px) { .sf-types { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .size-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .size-page-tool { position: sticky; top: calc(var(--header-h) + 24px); }
}
@media (prefers-reduced-motion: reduce) { .sf-result { animation: none; } }
.quote-summary { display: none; }
.qs-total { font: 800 3.4rem/1 var(--font-display); margin: 10px 0 14px; font-variant-numeric: tabular-nums; }
.qs-lines { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; font-size: 0.92rem; color: var(--muted); }
.qs-lines li { display: flex; justify-content: space-between; gap: 12px; }
.qs-lines li b { color: var(--text); font-weight: 600; white-space: nowrap; }
.qs-small { font-size: 0.82rem; color: var(--dim); }
.page-book .action-bar { display: none; }
.quote-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(10, 10, 12, 0.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.quote-bar small { display: block; font-size: 0.7rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.quote-bar strong { font: 800 1.9rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.contact-buttons { display: grid; gap: 10px; margin-bottom: 14px; }

/* ---------- terms ---------- */
.key-terms { display: grid; gap: 10px; margin-bottom: 28px; }
.key-terms > div { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.key-terms .ico { grid-row: span 2; width: 26px; height: 26px; color: var(--pink); }
.key-terms span { color: var(--muted); font-size: 0.88rem; }
.terms { margin: 0; padding: 0; list-style: none; counter-reset: term; display: grid; gap: 10px; }
.terms > li { counter-increment: term; padding: 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.terms h2 { font-size: 1.45rem; display: flex; gap: 10px; align-items: baseline; }
.terms h2::before { content: counter(term); color: var(--pink); }
.terms p, .terms ul { color: var(--muted); font-size: 0.95rem; margin: 0; }
.terms ul { padding-left: 1.1em; display: grid; gap: 6px; }
.terms ul li::marker { color: var(--pink); }
.legal-row { display: grid; gap: 36px; margin-top: 36px; }
.legal a { color: var(--pink); }

/* ---------- our work ---------- */
.work-filter { max-width: 640px; margin-bottom: 24px; }
.work-filter:not(.is-live) { display: none; }
@media (max-width: 479px) { .work-filter button { padding: 6px 2px; font-size: 0.9rem; letter-spacing: 0.02em; } }
.work-grid { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 10px; }
.work-grid li { break-inside: avoid; margin-bottom: 10px; animation: work-in 0.45s ease-out both; }
.work-grid li[hidden] { display: none; }
@keyframes work-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
.work-item { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); cursor: zoom-in; }
.work-item img { display: block; width: 100%; height: auto; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.work-item:hover img { transform: scale(1.04); }

.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(10, 10, 12, 0.97); color: var(--text); }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.7); }
html:has(.lightbox[open]) { overflow: hidden; }
.lightbox figure { margin: 0; height: 100%; display: grid; place-items: center; align-content: center; gap: 14px; padding: 64px 16px 80px; }
.lightbox img { max-width: 100%; max-height: calc(100dvh - 140px); width: auto; height: auto; border-radius: 14px; }
.lb-count { position: absolute; top: 24px; left: 18px; margin: 0; font-size: 0.85rem; color: var(--muted); }
.lb-btn { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(22, 22, 27, 0.85); color: var(--text); cursor: pointer; }
.lb-btn:hover { border-color: var(--pink); color: var(--pink); }
.lb-close { top: 12px; right: 12px; }
.lb-prev { left: 12px; bottom: 16px; }
.lb-next { right: 12px; bottom: 16px; }
.lightbox figcaption { color: var(--muted); font-size: 0.9rem; text-align: center; }

/* ---------- our work: jump links, captions, show all ---------- */
.work-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: -8px; }
.work-jump a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; font-size: 0.9rem; font-weight: 600; }
.work-jump a:hover { border-color: var(--pink-line); }
.work-jump .ico { width: 18px; height: 18px; color: var(--pink); }
.work-jump small { color: var(--dim); font-weight: 500; margin-left: 2px; }
.work-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 10px; text-align: left; font-size: 0.82rem; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(10, 10, 12, 0.85)); opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.3s; }
.work-item:hover .work-cap, .work-item:focus-visible .work-cap { opacity: 1; transform: none; }
/* folded: the first couple of screens of photos, fading out above "Show all". It's the
   wrapper that folds: a column layout with a height cap spills sideways instead. */
.work-fold.is-collapsed { max-height: 980px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.work-more { display: flex; justify-content: center; margin: -36px 0 4px; position: relative; }
.work-more .ico { width: 18px; height: 18px; }

/* ---------- our work: paint correction, up close ---------- */
.pc-layout { display: grid; gap: 22px; }
.pc-compare { margin: 0; display: grid; gap: 12px; }
.pc-tabs { max-width: 340px; }
.pc-tabs:not(.is-live) { display: none; }
.pc-frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: #000; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.pc-frame:has(.pc-range:focus-visible) { outline: 2px solid var(--pink); outline-offset: 3px; }
.pc-after, .pc-before { position: absolute; inset: 0; }
.pc-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 28% 62%; }
.pc-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.pc-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 12px rgba(0, 0, 0, 0.6); pointer-events: none; }
.pc-handle > span { position: absolute; top: 50%; left: 50%; display: flex; gap: 2px; padding: 9px 10px; transform: translate(-50%, -50%); border-radius: 999px; background: var(--pink); color: var(--pink-ink); box-shadow: 0 6px 20px rgba(250, 34, 165, 0.45); }
.pc-handle .ico { width: 16px; height: 16px; stroke-width: 2.5; }
.pc-tag { position: absolute; top: 12px; padding: 5px 10px; border-radius: 999px; font: 800 0.8rem/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: rgba(10, 10, 12, 0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; }
.pc-tag-before { left: 12px; }
.pc-tag-after { right: 12px; color: var(--pink-2); }
.pc-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.pc-compare figcaption, .pc-marks-section .note { color: var(--dim); font-size: 0.82rem; }
.pc-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: start; }
.pc-stage { display: grid; gap: 10px; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: border-color 0.25s, transform 0.25s; }
.pc-stage:hover { border-color: var(--pink-line); transform: translateY(-2px); }
.pc-stage-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pc-stage-top strong { font: 800 1.35rem/1.1 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; }
/* how much each stage takes out: solid to the low figure, lighter up to the high one */
.pc-meter { position: relative; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.pc-meter > span { position: absolute; inset: 0 auto 0 0; width: calc(var(--hi) * 1%); border-radius: inherit; background: linear-gradient(90deg, var(--pink) calc(var(--lo) / var(--hi) * 100%), rgba(250, 34, 165, 0.45) 0); }
.pc-figure { font-weight: 700; font-size: 0.92rem; }
.pc-what { color: var(--muted); font-size: 0.92rem; }
.pc-marks { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 14px; }
.pc-mark { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.pc-mark img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; }
.pc-mark h3 { font-size: 1.3rem; margin: 2px 0 6px; }
.pc-mark p { color: var(--muted); font-size: 0.92rem; }
.pc-fix { display: flex; gap: 8px; margin-top: 8px; color: var(--text) !important; font-weight: 600; }
.pc-fix .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--pink); }
.pc-steps { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 14px; }
.pc-step { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: start; }
.pc-step-photo { aspect-ratio: 4 / 5; }
.pc-step-photo img { width: 100%; height: 100%; object-fit: cover; }
.pc-step-art { display: grid; place-items: end center; padding-bottom: 8%; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(60% 70% at 50% 40%, rgba(var(--accent), 0.36), rgba(var(--accent), 0.06) 55%, transparent 80%), linear-gradient(180deg, #1a1a20, #0e0e12); }
.pc-step-art svg { height: 82%; width: auto; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.5)); }
.pc-step .step-n { width: 32px; height: 32px; font-size: 1.1rem; margin-bottom: 8px; }
.pc-step h3 { font-size: 1.35rem; margin-bottom: 4px; }
.pc-step p { color: var(--muted); font-size: 0.95rem; }
@media (min-width: 700px) {
  .pc-frame { aspect-ratio: 1500 / 840; }
  .pc-frame img { object-position: center; }
  .pc-marks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-mark { grid-template-columns: 1fr; padding: 0; overflow: hidden; }
  .pc-mark img { border-radius: 0; }
  .pc-mark-body { padding: 4px 18px 18px; }
  .pc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-step { grid-template-columns: 1fr; }
}
@media (min-width: 1100px) {
  .pc-layout { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; }
  .pc-stages { padding-top: 64px; }
  .pc-marks, .pc-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- cookie notice ---------- */
.cookie {
  position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 10px);
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 16px 16px 18px; border-radius: 22px;
  background: rgba(22, 22, 27, 0.97); border: 1px solid var(--pink-line);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(250, 34, 165, 0.12);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transform: translateY(calc(100% + 40px)); opacity: 0;
  transition: transform 0.6s cubic-bezier(0.2, 1.25, 0.35, 1), opacity 0.3s ease;
}
.cookie[hidden], .cookie-more[hidden] { display: none; }
.cookie.is-in { transform: none; opacity: 1; }
.cookie.is-leaving { transform: translateY(calc(100% + 40px)); opacity: 0; transition: transform 0.45s 0.25s ease-in, opacity 0.3s 0.4s ease; }
.cookie-body { display: grid; gap: 8px; }
.cookie .eyebrow { font-size: 0.68rem; }
.cookie h2 { font-size: 1.7rem; }
.cookie-body > p:not(.eyebrow) { color: var(--muted); font-size: 0.92rem; line-height: 1.45; }
.cookie-more { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); font-size: 0.86rem; color: var(--muted); }
.cookie-more ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
.cookie-more li::marker { color: var(--pink); }
.cookie-more a { color: var(--pink); font-weight: 600; }
.cookie-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.cookie-actions .btn { flex: 1 1 auto; padding: 0 14px; font-size: 0.88rem; }
.page-book .cookie { bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (min-width: 560px) { .cookie { left: auto; width: min(440px, calc(100vw - 24px)); } }

/* the cookie gets buffed: a glint sweeps across, sparkles pop, and it spins away on close */
.ck-art { width: 56px; height: 56px; overflow: visible; }
.ck-dough { fill: rgba(250, 34, 165, 0.14); stroke: var(--pink); stroke-width: 2.5; }
.ck-chip { fill: var(--pink); }
.ck-shine { transform: translateX(-20px); }
.ck-spark { fill: #fff; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.cookie.is-in .ck-shine { animation: ck-shine 1.1s 0.5s ease-in-out both; }
.cookie.is-in .ck-spark { animation: ck-spark 1.4s ease-out 3 both; }
.cookie.is-in g:nth-of-type(2) .ck-spark { animation-delay: 1.1s; }
.cookie.is-in g:nth-of-type(3) .ck-spark { animation-delay: 1.35s; }
.cookie.is-in g:nth-of-type(4) .ck-spark { animation-delay: 1.6s; }
.cookie.is-leaving .ck-art { animation: ck-buff 0.5s ease-in both; }
@keyframes ck-shine { to { transform: translateX(90px); } }
@keyframes ck-spark { 0% { transform: scale(0) rotate(-45deg); } 35% { transform: scale(1.2) rotate(0deg); } 70%, 100% { transform: scale(0); } }
@keyframes ck-buff { 40% { transform: rotate(-25deg) scale(1.1); } 100% { transform: rotate(200deg) scale(0); opacity: 0; } }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 44px 0 28px; background: var(--bg-2); }
.footer-logo { justify-self: start; }
.footer-logo img { display: block; width: 200px; height: auto; }
.footer-grid { display: grid; gap: 32px; }
.footer-about { display: grid; gap: 16px; }
.footer-about > p { color: var(--muted); max-width: 44ch; }
.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer-contact a { display: inline-flex; align-items: center; gap: 10px; padding: 8px 0; text-decoration: none; color: var(--muted); }
.footer-contact a:hover { color: var(--text); }
.footer-contact .ico { width: 18px; height: 18px; color: var(--pink); }
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
.footer-nav { display: grid; gap: 2px; align-content: start; }
.footer-nav h4 { margin-bottom: 6px; }
.footer-nav a { padding: 8px 0; text-decoration: none; color: var(--muted); }
.footer-nav a:hover { color: var(--text); }
.footer-legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 18px; font-size: 0.8rem; color: var(--dim); }
.footer-credit { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; opacity: 0.6; transition: opacity 0.15s; justify-self: start; }
.footer-credit:hover { opacity: 1; }
.footer-credit span { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.footer-credit img { height: 20px; width: auto; }

/* ---------- wider screens ---------- */
@media (min-width: 560px) {
  .hero-ctas, .cta-buttons { display: flex; flex-wrap: wrap; }
  .contact-buttons { display: flex; flex-wrap: wrap; }
  .btn-block-mobile { width: auto; }
  .features, .addon-grid, .coatings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .key-terms { grid-template-columns: repeat(3, 1fr); }
  .key-terms > div { grid-template-columns: 1fr; row-gap: 6px; }
  .key-terms .ico { grid-row: auto; }
  .hub-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
}

@media (min-width: 900px) {
  :root { --header-h: 72px; }
  body { padding-bottom: 0; }
  .wrap { padding: 0 clamp(32px, 4vw, 80px); }
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(40px, 6vw, 120px); align-items: start; }
  .split > .section-head { margin-bottom: 0; }
  .split > h2 { margin-top: 0; }
  .cta-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 120px); }
  .cta-inner > h2 { grid-column: 1; grid-row: 1 / span 2; }
  .cta-inner > :not(h2) { grid-column: 2; }
  .terms { grid-template-columns: 1fr 1fr; }
  .legal-row { grid-template-columns: 1fr 1fr; }
  .stage-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .where { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .where .text-link { grid-column: 1 / -1; }
  .van-hero { padding-bottom: 72px; }
  .van-hero-photo::after { background: linear-gradient(to bottom, rgba(10, 10, 12, 0.4), rgba(10, 10, 12, 0) 30%, rgba(10, 10, 12, 0) 55%, var(--bg)), linear-gradient(90deg, rgba(10, 10, 12, 0.85), rgba(10, 10, 12, 0.25) 55%, rgba(10, 10, 12, 0)); }
  .van-hero-copy { grid-template-columns: minmax(0, 1000px); }
  .van-hero h1 { font-size: clamp(4rem, 6.6vw, 7.5rem); }
  .van-stats ul { grid-template-columns: repeat(3, 1fr); }
  .van-stats li { flex-direction: column; gap: 8px; padding: 40px 0; }
  .van-stats li + li { border-top: 0; border-left: 1px solid var(--line); padding-left: clamp(24px, 4vw, 72px); }
  .explore { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); align-items: center; gap: 28px; }
  .kit { padding: 32px; }
  .cookie { left: auto; right: 24px; bottom: 24px; width: min(420px, calc(100vw - 48px)); padding: 20px 22px 22px; }
  .page-book .cookie { bottom: 24px; }
  .van-rows { gap: 112px; }
  .van-row { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: clamp(40px, 7vw, 140px); }
  .van-row:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); }
  .van-row:nth-child(even) .van-photo { order: 2; }
  .van-more { grid-template-columns: 1fr 1fr; margin-top: 112px; }
  .van-card { padding: 36px; }
  .van-teaser-photo::after { background: linear-gradient(to bottom, rgba(10, 10, 12, 0.3), rgba(10, 10, 12, 0) 40%, rgba(10, 10, 12, 0.85)), linear-gradient(90deg, rgba(10, 10, 12, 0.7), rgba(10, 10, 12, 0) 60%); }
  .action-bar, .quote-bar, .menu-btn { display: none; }
  .nav-desktop, .header-cta { display: flex; }
  .brand img { height: 35px; }
  .section { padding: 88px 0; }
  .section-tight { padding-top: 12px; }
  .hero { min-height: calc(100svh - var(--header-h)); display: grid; grid-template-rows: 1fr auto; padding-top: 56px; }
  .hero-inner { align-self: center; }
  .hero-reel { margin-top: 48px; padding-bottom: 36px; }
  .hero-reel-track img { height: 150px; }
  .work-grid { columns: 3; column-gap: 14px; }
  .work-grid li { margin-bottom: 14px; }
  .lightbox figure { padding: 72px 100px; }
  .lb-prev, .lb-next { top: 50%; bottom: auto; transform: translateY(-50%); }
  .lb-prev { left: 24px; }
  .lb-next { right: 24px; }
  .hero::before { right: -260px; top: -380px; width: 1000px; height: 1000px; }
  .hero-inner { grid-template-columns: minmax(0, 820px); }
  .section-head { margin-bottom: 36px; }
  .svc-list { grid-template-columns: 1fr 1fr; }
  .features { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .steps li { flex-direction: column; }
  .pkg-grid { grid-template-columns: repeat(2, 1fr); }
  .pkg { padding: 26px; }
  .coatings { grid-template-columns: repeat(3, 1fr); }
  .hub-bar-inner { grid-template-columns: auto 1fr; align-items: center; gap: 20px; }
  .jump { margin: 0; padding: 0; justify-content: flex-end; }
  .hub-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-card h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); }
  .page-head { padding: 64px 0 40px; }
  .quote-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; }
  .quote fieldset { padding: 24px; }
  .opts-3 { grid-template-columns: repeat(3, 1fr); }
  .opts-3 .opt { align-items: flex-start; }
  .fields { grid-template-columns: 1fr 1fr; }
  .field-wide { grid-column: 1 / -1; }
  .send { grid-template-columns: 1fr 1fr; }
  .send .q-hint { grid-column: 1 / -1; }
  .quote-summary { display: block; position: sticky; top: calc(var(--header-h) + 20px); padding: 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
  .footer-grid { grid-template-columns: 1.4fr 1fr; }
  .footer-legal { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 1024px) {
  /* copy on the left, the logo and the van's numbers on the right */
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 104px); align-items: center; }
  .hero-copy, .hero-side { display: grid; gap: 22px; }
  .hero-side { gap: 28px; }
  .hero h1 { font-size: clamp(3.5rem, 5.4vw, 6.25rem); }
  .hero-art { max-width: none; }
  .hero-media::after { background: linear-gradient(to bottom, rgba(10, 10, 12, 0.5), rgba(10, 10, 12, 0) 22%, rgba(10, 10, 12, 0) 72%, var(--bg)), linear-gradient(90deg, rgba(10, 10, 12, 0.86), rgba(10, 10, 12, 0.62) 45%, rgba(10, 10, 12, 0.5)); }
}

@media (min-width: 1200px) {
  .addon-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .brand img { height: 44px; }
  .nav-desktop a { padding: 9px 14px; }
  .svc-list { grid-template-columns: repeat(3, 1fr); }
  .pkg-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .quote-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 36px; }
  #f-service .opts, #f-extras .opts { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1440px) {
  .work-grid { columns: 4; }
  .fields { grid-template-columns: repeat(4, 1fr); }
  .terms { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-reel-strip { overflow-x: auto; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* the About page's products, in the coating cards: the maker on top instead of a lifespan */
.coating .coating-maker { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--accent)); filter: brightness(1.25); }