/* Main Line Auto Works
   Palette from the work itself: Daytona-grey paint, pearl clear coat, and the
   caliper red from the logo. Michroma echoes the wide, squared lettering of
   the wordmark; Saira carries the same squared DNA at reading sizes. */

@font-face { font-family: "Michroma"; src: url("assets/fonts/michroma-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Saira"; src: url("assets/fonts/saira-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Saira"; src: url("assets/fonts/saira-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Saira"; src: url("assets/fonts/saira-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Saira"; src: url("assets/fonts/saira-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --graphite: #1D2125;
  --gunmetal: #2B3137;
  --steel: #8C959D;
  --alloy: #C9CED2;
  --pearl: #EEF0F1;
  --white: #FBFBFC;
  --red: #D7192A;
  --red-deep: #B01322;
  --text-mid: #3C444B;

  --display: "Michroma", "Saira", system-ui, sans-serif;
  --body: "Saira", system-ui, sans-serif;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 4px;
  --section: clamp(72px, 10vw, 128px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--graphite);
  background: var(--pearl);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin: 0;
}
h2 { font-size: clamp(1.5rem, 2.9vw, 2.4rem); }
h3 { font-size: clamp(1rem, 1.4vw, 1.2rem); }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--white); padding: 8px 14px; border-radius: var(--radius);
}
.skip:focus { left: 8px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  font-family: var(--body); font-weight: 600; font-size: 1rem; letter-spacing: .01em;
  text-decoration: none; border-radius: var(--radius);
  border: 2px solid transparent;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-sm { min-height: 40px; padding: 0 18px; font-size: .9375rem; }
.btn-red { background: var(--red); color: var(--white); }
.btn-red:hover { background: var(--red-deep); }
.btn-ghost { color: var(--white); border-color: rgba(238,240,241,.55); }
.btn-ghost:hover { border-color: var(--white); background: rgba(238,240,241,.08); }
.btn-dark { background: var(--graphite); color: var(--pearl); }
.btn-dark:hover { background: var(--gunmetal); }

/* Top bar + header */
.topbar {
  background: var(--red); color: var(--white);
  text-align: center; font-size: .875rem; font-weight: 500;
  padding: 8px var(--gutter);
}
.topbar p { margin: 0; }
.topbar a { font-weight: 700; text-underline-offset: 3px; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(29,33,37,.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--pearl);
  border-bottom: 1px solid rgba(140,149,157,.2);
}
.header-inner { display: flex; align-items: center; gap: 32px; height: 72px; }
.brand img { width: 150px; height: auto; }
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a { text-decoration: none; font-size: .9375rem; font-weight: 500; color: var(--alloy); }
.nav a:hover { color: var(--white); }
.menu-toggle { display: none; }
.mobile-nav { display: none; }

/* Hero */
.hero {
  position: relative; isolation: isolate;
  min-height: min(88vh, 860px);
  display: flex; align-items: flex-end;
  color: var(--pearl); background: var(--graphite);
  overflow: hidden;
}
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 55%; z-index: -2;
}
.hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(29,33,37,.92) 0%, rgba(29,33,37,.7) 38%, rgba(29,33,37,0) 70%),
    linear-gradient(0deg, rgba(29,33,37,.85) 0%, rgba(29,33,37,0) 45%);
}
.hero-copy { width: 100%; padding-top: 120px; padding-bottom: clamp(48px, 8vw, 96px); }
.hero-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: .95rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--alloy); }
.hero-kicker::before { content: ""; width: 28px; height: 2px; background: var(--red); }
.hero h1 { margin: 0; }
.hero h1 .h1-main { display: block; max-width: 13em; font-size: clamp(2.1rem, 4.4vw, 3.9rem); line-height: 1.08; letter-spacing: -0.01em; }
.hero h1 .h1-sub { display: block; margin-top: 18px; max-width: 30em; font-family: var(--body); font-size: clamp(1.05rem, 1.6vw, 1.4rem); line-height: 1.35; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--pearl); }
.hero-sub { max-width: 34em; margin: 28px 0 32px; font-size: 1.125rem; color: var(--alloy); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (prefers-reduced-motion: no-preference) {
  .hero-img { animation: settle 1.6s cubic-bezier(.2,.7,.2,1) both; }
  .hero-shade { animation: sweep 1.2s ease-out both; }
  @keyframes settle { from { transform: scale(1.08); } to { transform: scale(1); } }
  @keyframes sweep { from { opacity: .2; } to { opacity: 1; } }
}

/* Shared list style */
.ticks { list-style: none; padding: 0; margin: 24px 0 32px; border-top: 2px solid var(--graphite); }
.ticks li { padding: 12px 0 12px 26px; border-bottom: 1px solid var(--alloy); position: relative; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 1.2em; width: 12px; height: 2px; background: var(--red); }
.ticks-dark { border-top-color: var(--pearl); }
.ticks-dark li { border-bottom-color: rgba(140,149,157,.3); color: var(--alloy); }

/* Wraps */
.wraps { padding: var(--section) 0; }
.wraps-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.wraps-copy h2 { margin-bottom: 22px; }
.wraps-copy > p { color: var(--text-mid); max-width: 32em; }
.finishes-intro { font-weight: 600; margin-bottom: 16px; }
.swatches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 20px; }
.swatches li { font-weight: 500; font-size: .95rem; }
.sw {
  display: block; aspect-ratio: 1 / 1.15; margin-bottom: 10px;
  border-radius: 10px 10px 2px 2px; /* the shape of a vinyl sample chip */
}
.sw-gloss {
  background:
    linear-gradient(160deg, rgba(255,255,255,.55) 0 18%, rgba(255,255,255,0) 19%),
    linear-gradient(200deg, #E01B2C, #8E0E19);
}
.sw-satin {
  background:
    radial-gradient(120% 70% at 30% 20%, rgba(255,255,255,.28), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #2C4A6E, #13253B);
}
.sw-matte { background: linear-gradient(180deg, #5B6167, #4A4F54); }
.sw-metallic {
  background:
    radial-gradient(rgba(255,255,255,.22) 1px, transparent 1.5px) 0 0 / 5px 5px,
    radial-gradient(110% 80% at 70% 15%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, #2F6B4F, #173A2A);
}
.sw-shift { background: linear-gradient(135deg, #5B2A86 0%, #2A6F97 45%, #1FA58C 75%, #C9A227 100%); }
.sw-carbon {
  background:
    repeating-linear-gradient(45deg, #2A2D31 0 6px, #17191C 6px 12px),
    #1B1D20;
  background-blend-mode: normal;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}

/* Calipers */
.calipers { background: var(--graphite); color: var(--pearl); padding: var(--section) 0; }
.calipers-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.caliper-view {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(120% 90% at 55% 45%, #3a4148 0%, var(--gunmetal) 45%, #15181b 100%);
}
.caliper-view img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.caliper-view canvas { display: none; position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; outline: none; }
.caliper-view canvas:active { cursor: grabbing; }
.caliper-view canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--red); }
/* 3D mode (only once WebGL is running); otherwise the photo stays */
.caliper-view.gl-ready[data-mode="3d"] canvas { display: block; }
.caliper-view.gl-ready[data-mode="3d"] .cv-stage { display: none; }
/* Photo stage: keeps each photo at its own shape, centred in the frame */
.cv-stage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; }
.cv-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cv-hint, .cv-mode, .cv-angles, .cv-photo-note { display: none; }
.caliper-view.gl-ready .cv-mode { display: flex; }
.caliper-view.gl-ready[data-mode="3d"] .cv-angles { display: flex; }
.caliper-view.gl-ready[data-mode="3d"] .cv-hint { display: flex; }
.caliper-view.gl-ready[data-mode="photo"] .cv-photo-note { display: block; }
/* Live repaint layer over the calipers in the real photo (crop 327,303 193x347 of 1200x900) */
#caliper-paint { display: block; position: absolute; pointer-events: none; cursor: default; touch-action: auto; }
.caliper-view.gl-ready[data-mode="3d"] #caliper-paint, .caliper-view:not(.paint-ready) #caliper-paint { display: none; }
.caliper-view:not(.gl-ready) .cv-photo-note { display: block; }

.cv-mode, .cv-angles { position: absolute; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(21,24,27,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cv-mode { top: 14px; right: 14px; }
.cv-angles { left: 50%; bottom: 14px; transform: translateX(-50%); }
.cv-mode button, .cv-angles button {
  font: 500 .85rem/1 var(--body); color: var(--alloy); background: transparent; border: 0;
  padding: 9px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s;
}
.cv-mode button:hover, .cv-angles button:hover { color: var(--white); }
.cv-mode button[aria-pressed="true"], .cv-angles button[aria-pressed="true"] { background: var(--pearl); color: var(--graphite); }
.cv-mode button:focus-visible, .cv-angles button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.cv-hint {
  position: absolute; top: 14px; left: 14px; margin: 0; align-items: center; gap: 8px;
  font-size: .85rem; color: var(--alloy); pointer-events: none; transition: opacity .4s;
}
.cv-hint-icon { width: 22px; height: 12px; position: relative; }
.cv-hint-icon::before, .cv-hint-icon::after { content: ""; position: absolute; top: 2px; width: 7px; height: 7px; border: solid var(--red); border-width: 2px 2px 0 0; }
.cv-hint-icon::before { left: 2px; transform: rotate(-135deg); }
.cv-hint-icon::after { right: 2px; transform: rotate(45deg); }
.caliper-view.interacted .cv-hint { opacity: 0; }
.cv-photo-note { position: absolute; left: 14px; bottom: 14px; margin: 0; padding: 7px 12px; border-radius: 999px; font-size: .8rem; color: var(--pearl); background: rgba(21,24,27,.72); }

.custom-swatch {
  position: relative; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; overflow: hidden;
  border: 2px solid rgba(238,240,241,.25);
  background: conic-gradient(from 0deg, #e5243b, #f0be14, #3cc36c, #19a7d2, #5a4fd8, #d63ac5, #e5243b);
  transition: transform .15s;
}
.custom-swatch::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; font: 600 1.4rem/1 var(--body); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.custom-swatch.is-active { background: var(--c); outline: 2px solid var(--pearl); outline-offset: 3px; border-color: var(--pearl); }
.custom-swatch.is-active::after { content: ""; }
.custom-swatch:hover { transform: scale(1.06); }
.custom-swatch:focus-within { outline: 3px solid var(--red); outline-offset: 3px; }
.custom-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }

.finish-picker { display: inline-flex; gap: 4px; padding: 4px; margin: 4px 0 6px; border-radius: 999px; border: 1px solid rgba(238,240,241,.2); }
.finish-picker button { font: 500 .9rem/1 var(--body); color: var(--alloy); background: transparent; border: 0; padding: 9px 16px; border-radius: 999px; cursor: pointer; }
.finish-picker button[aria-checked="true"] { background: var(--pearl); color: var(--graphite); }
.finish-picker button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
@media (max-width: 520px) {
  .cv-mode button, .cv-angles button { padding: 8px 10px; font-size: .78rem; }
  .cv-hint { display: none !important; }
}
.calipers-copy h2 { margin-bottom: 22px; }
.calipers-copy > p { color: var(--alloy); max-width: 30em; }
.picker-label { margin: 26px 0 10px; font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.vehicle-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.vehicle-picker button {
  font: 500 .92rem/1 var(--body); color: var(--alloy); background: transparent; cursor: pointer;
  border: 1px solid rgba(238,240,241,.25); border-radius: 999px; padding: 10px 16px; transition: border-color .15s, background .15s, color .15s;
}
.vehicle-picker button:hover { border-color: var(--pearl); color: var(--white); }
.vehicle-picker button[aria-checked="true"] { background: var(--pearl); border-color: var(--pearl); color: var(--graphite); }
.vehicle-picker button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.caliper-view #caliper-img, .caliper-view #caliper-paint { transition: opacity .25s; }
.caliper-view.switching #caliper-img, .caliper-view.switching #caliper-paint { opacity: 0; }
.color-picker { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 10px; }
.color-picker button {
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  background: var(--c); border: 2px solid rgba(238,240,241,.25);
  box-shadow: inset 0 -6px 10px rgba(0,0,0,.25), inset 0 4px 8px rgba(255,255,255,.18);
  transition: transform .15s, border-color .15s;
}
.color-picker button:hover { transform: scale(1.06); }
.color-picker button[aria-checked="true"] { border-color: var(--pearl); outline: 2px solid var(--pearl); outline-offset: 3px; }
.color-picker button:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.color-name { font-family: var(--display); text-transform: uppercase; font-size: .95rem; color: var(--pearl); min-height: 1.6em; }

/* Protection */
.protection { padding: var(--section) 0; }
.section-intro { max-width: 38em; margin: 20px 0 40px; color: var(--text-mid); font-size: 1.125rem; }
.protect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); margin-bottom: 48px; }
.protect-grid figure { margin: 0 0 20px; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); }
.protect-grid img { width: 100%; height: 100%; object-fit: cover; }
.protect-grid h3 { margin-bottom: 10px; }
.protect-grid p { color: var(--text-mid); max-width: 34em; }
.compare-table { border-top: 2px solid var(--graphite); margin-bottom: 36px; }
.ct-row {
  display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--alloy); align-items: baseline;
}
.ct-head span { font-weight: 700; font-size: 1.05rem; }
.ct-head .ct-both { color: var(--red); }
.ct-row [role="rowheader"] { font-weight: 600; }
.ct-row [role="cell"] { color: #4A535B; }
.ct-row .yes { color: var(--graphite); font-weight: 700; }
.ct-row .no { color: var(--steel); }

/* Tint */
.tint { background: var(--graphite); color: var(--pearl); padding: var(--section) 0; }
.tint-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.tint-copy > p { color: var(--alloy); max-width: 30em; margin-top: 20px; }
.shade-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 18px; }
.shade-picker button {
  font: inherit; font-weight: 700;
  min-width: 68px; min-height: 48px; padding: 0 14px;
  background: transparent; color: var(--pearl);
  border: 1px solid rgba(140,149,157,.5); border-radius: var(--radius); cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.shade-picker button:hover { border-color: var(--pearl); }
.shade-picker button[aria-checked="true"] { background: var(--red); border-color: var(--red); }
.tint-copy .shade-note { min-height: 3.2em; color: var(--pearl); }
.tint-copy .small { font-size: .9rem; color: var(--steel); }
.tint-copy .btn { margin-top: 8px; }
.windshield {
  position: relative; aspect-ratio: 5 / 4; overflow: hidden;
  border-radius: 22px 22px 6px 6px;
  box-shadow: inset 0 0 0 10px var(--gunmetal);
  background: var(--gunmetal);
}
.windshield img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.film { position: absolute; inset: 0; background: #0d1012; opacity: .6; transition: opacity .45s ease; }
.windshield::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.10) 42%, rgba(255,255,255,0) 52%);
}
.vlt-readout {
  position: absolute; right: 24px; bottom: 16px;
  font-family: var(--display); font-size: clamp(3rem, 8vw, 6rem); line-height: 1; color: rgba(238,240,241,.92);
}
.vlt-readout::after { content: "%"; font-size: .4em; vertical-align: .9em; margin-left: .08em; }

/* Reviews */
.reviews { background: var(--white); padding: var(--section) 0; border-top: 1px solid var(--alloy); }
.reviews-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.link { font-weight: 600; text-underline-offset: 4px; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.review-track {
  list-style: none; margin: 0; display: flex; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))) 20px;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  scrollbar-width: thin;
}
.review-track li {
  flex: 0 0 min(400px, 82vw); scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 28px 0 0; border-top: 3px solid var(--red);
}
.review-track blockquote { margin: 0 0 20px; font-size: 1.2rem; line-height: 1.5; }
.review-track cite { font-style: normal; font-weight: 700; }

/* Pick-up */
.pickup { padding: var(--section) 0; }
.pickup-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.pickup-photo { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.pickup-photo img { width: 100%; height: 100%; object-fit: cover; }
.pickup h2 { margin-bottom: 22px; }
.pickup p { color: var(--text-mid); max-width: 32em; }

/* Also */
.also { padding: 0 0 clamp(56px, 8vw, 96px); }
.also-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); border-top: 2px solid var(--graphite); padding-top: 40px; }
.also h2 { font-size: clamp(1.1rem, 1.8vw, 1.4rem); }
.also ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.also li { padding: 12px 0; border-bottom: 1px solid var(--alloy); color: var(--text-mid); }
.also strong { color: var(--graphite); font-weight: 600; }

/* FAQ */
.faq { padding: 0 0 var(--section); }
.faq-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); border-top: 2px solid var(--graphite); padding-top: 48px; }
.faq-list details { border-bottom: 1px solid var(--alloy); }
.faq-list summary {
  list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative;
  font-weight: 600; font-size: 1.125rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background:
    linear-gradient(var(--red), var(--red)) center / 14px 2px no-repeat,
    linear-gradient(var(--red), var(--red)) center / 2px 14px no-repeat;
  transition: transform .2s;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 40px 20px 0; color: var(--text-mid); max-width: 38em; }

/* Visit */
.visit { padding: var(--section) 0; border-top: 1px solid var(--alloy); }
.visit-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
address { font-style: normal; font-weight: 700; font-size: 1.5rem; line-height: 1.3; margin: 24px 0 20px; }
.visit p { color: var(--text-mid); max-width: 30em; }
.visit-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.map { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--alloy); }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.85) contrast(1.05); }

/* Estimate */
.cta { background: var(--red); color: var(--white); padding: clamp(56px, 8vw, 100px) 0; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta h2 { font-size: clamp(1.6rem, 3.6vw, 3rem); }
.cta p { margin: 14px 0 0; max-width: 30em; }
.cta .btn-ghost { border-color: rgba(251,251,252,.7); }

/* Footer */
.site-footer { background: var(--graphite); color: var(--alloy); padding: 56px 0 28px; font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; align-items: start; }
.footer-grid img { width: 160px; }
.footer-grid a { text-decoration: none; }
.footer-grid a:hover { color: var(--white); text-decoration: underline; }
.footer-base { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(140,149,157,.25); color: var(--steel); font-size: .85rem; }
.footer-base p { margin: 0; }

/* Responsive */
@media (max-width: 960px) {
  .nav { display: none; }
  .header-inner { gap: 12px; }
  .header-inner .btn { margin-left: auto; }
  .menu-toggle {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
    font: inherit; font-weight: 600; font-size: .9rem;
    color: var(--pearl); background: transparent;
    border: 1px solid rgba(140,149,157,.5); border-radius: var(--radius); cursor: pointer;
  }
  .mobile-nav:not([hidden]) {
    display: flex; flex-direction: column;
    padding: 8px var(--gutter) 20px; border-top: 1px solid rgba(140,149,157,.2);
  }
  .mobile-nav a { padding: 12px 0; text-decoration: none; font-size: 1.1rem; border-bottom: 1px solid rgba(140,149,157,.15); }
  .wraps-grid, .calipers-grid, .tint-grid, .pickup-grid, .also-grid, .faq-grid, .visit-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid img { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .protect-grid { grid-template-columns: 1fr; }
  .swatches { grid-template-columns: repeat(3, 1fr); gap: 20px 12px; }
  .ct-row { grid-template-columns: 1fr 1fr 1fr; gap: 6px 12px; }
  .ct-row > :first-child { grid-column: 1 / -1; }
  .ct-head > :first-child { display: none; }
  .also ul { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .brand img { width: 120px; }
  .hero { min-height: 82vh; }
  .hero-shade { background: linear-gradient(0deg, rgba(29,33,37,.95) 0%, rgba(29,33,37,.75) 55%, rgba(29,33,37,.25) 100%); }
  .hero-actions .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Subpage hero */
.page-hero {
  position: relative; isolation: isolate;
  min-height: min(64vh, 620px);
  display: flex; align-items: flex-end;
  color: var(--pearl); background: var(--graphite); overflow: hidden;
}
.page-hero .hero-img { object-position: 60% 45%; }
.page-hero h1 { font-size: clamp(1.8rem, 4.6vw, 3.6rem); max-width: 16em; }

/* Price menu */
.menu-section { padding: var(--section) 0; }
.menu-section + .menu-section { padding-top: 0; }
.menu-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); }
.menu-head p { color: var(--text-mid); max-width: 26em; margin-top: 20px; }
.menu { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--graphite); }
.menu li { padding: 20px 0; border-bottom: 1px solid var(--alloy); }
.menu-compact li { padding: 14px 0; }
.menu-line { display: flex; align-items: baseline; gap: 12px; }
.menu-line h3 { font-family: var(--body); text-transform: none; font-weight: 600; font-size: 1.125rem; letter-spacing: 0; }
.menu-line::after { content: ""; order: 1; flex: 1; border-bottom: 1px dotted var(--steel); transform: translateY(-4px); }
.menu-line .price { order: 2; font-weight: 700; white-space: nowrap; }
.menu li p { margin: 6px 0 0; color: var(--text-mid); max-width: 34em; }

/* Service areas */
.faq-top { padding-top: var(--section); }
.areas { padding: 0 0 var(--section); }
.areas p { color: var(--text-mid); }
.area-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.area-list li { padding: 6px 12px; border: 1px solid var(--alloy); border-radius: var(--radius); font-size: .95rem; }

@media (max-width: 960px) {
  .menu-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .color-picker { gap: 10px; }
  .color-picker button, .custom-swatch { width: 40px; height: 40px; }
}

/* Wrap visualizer (light section) */
.wrap-tool { min-width: 0; }
.wrap-view { background: #DADFE3; }
.wrap-view .cv-photo-note { display: block; }
.wrap-view #wrap-paint { display: block; position: absolute; pointer-events: none; }
.wrap-view:not(.paint-ready) #wrap-paint { display: none; }
.wrap-view #wrap-img, .wrap-view #wrap-paint { transition: opacity .25s; }
.wrap-view.switching #wrap-img, .wrap-view.switching #wrap-paint { opacity: 0; }
.wrap-controls { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.wraps .picker-label { color: var(--text-mid); margin-top: 20px; }
.wraps .vehicle-picker button { color: var(--graphite); border-color: rgba(29,33,37,.25); }
.wraps .vehicle-picker button:hover { border-color: var(--graphite); color: var(--graphite); }
.wraps .vehicle-picker button[aria-checked="true"] { background: var(--graphite); border-color: var(--graphite); color: var(--pearl); }
.wraps .finish-picker { border-color: rgba(29,33,37,.2); margin: 0; }
.wraps .finish-picker button { color: var(--text-mid); }
.wraps .finish-picker button[aria-checked="true"] { background: var(--graphite); color: var(--pearl); }
.wraps .color-picker button, .wraps .custom-swatch { border-color: rgba(29,33,37,.18); }
.wraps .color-picker button[aria-checked="true"], .wraps .custom-swatch.is-active { outline-color: var(--graphite); border-color: var(--graphite); }
.wraps .color-picker .sw-original { background: linear-gradient(135deg, #f4f5f6 0 49%, #b9bec4 51% 100%); }
.wraps .color-name { color: var(--graphite); }
.wrap-more { margin: 6px 0 0; font-size: .95rem; color: var(--text-mid); }

/* Ceramic coating packages */
.coating { margin: 8px 0 48px; padding-top: 48px; border-top: 1px solid rgba(29,33,37,.12); }
.coating-head { max-width: 46em; margin-bottom: 28px; }
.coating-head h3 { margin-bottom: 10px; }
.coating-head p { color: var(--text-mid); }
.coating-top { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(20px, 3vw, 36px); align-items: start; }
.coat-diagram { margin: 0; position: sticky; top: 90px; background: var(--graphite); border-radius: var(--radius); padding: 22px 18px 16px; color: var(--pearl); }
.coat-svg { display: block; width: 100%; height: auto; }
.coat-svg .z-shadow { fill: rgba(0,0,0,.45); }
.coat-svg .z { transition: fill .35s, opacity .35s, stroke .35s; }
.coat-svg .z-paint { fill: #3a4148; }
.coat-svg .z-glass { fill: #24292e; }
.coat-svg .z-trim { fill: #15181b; }
.coat-svg .z-tire { fill: #0e1012; }
.coat-svg .z-rim { fill: #4a5158; }
.coat-svg .z-spoke { stroke: #2a2f34; stroke-width: 4; }
.coat-svg .z-line { fill: none; stroke: rgba(0,0,0,.35); stroke-width: 1.5; }
.coat-svg .z-light { fill: #c9ced2; } .coat-svg .z-tail { fill: #7a1a20; }
.coat-svg[data-on~="paint"] .z-paint { fill: var(--red); }
.coat-svg[data-on~="glass"] .z-glass { fill: #7fc4e8; }
.coat-svg[data-on~="trim"] .z-trim { fill: #f0be14; }
.coat-svg[data-on~="wheels"] .z-rim { fill: #36c37a; }
.coat-svg[data-on~="wheels"] .z-spoke { stroke: #1d7a4a; }
.coat-svg .z-sheen { fill: url(#coat-sheen); opacity: 0; }
.coat-svg[data-on~="paint"] .z-sheen { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .coat-svg .z-sheen { animation: coat-sweep 3.2s ease-in-out infinite; }
  @keyframes coat-sweep { 0% { transform: translateX(0); } 60%, 100% { transform: translateX(760px); } }
}
.coat-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: .85rem; color: var(--alloy); }
.lg::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; opacity: .3; transition: opacity .3s; }
.lg-paint::before { background: var(--red); } .lg-glass::before { background: #7fc4e8; } .lg-trim::before { background: #f0be14; } .lg-wheels::before { background: #36c37a; }
.coat-diagram[data-on~="paint"] .lg-paint::before, .coat-diagram[data-on~="glass"] .lg-glass::before,
.coat-diagram[data-on~="trim"] .lg-trim::before, .coat-diagram[data-on~="wheels"] .lg-wheels::before { opacity: 1; }
.coat-now { margin: 10px 0 0; font-family: var(--display); text-transform: uppercase; font-size: .82rem; letter-spacing: .04em; }
.coat-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.coat-addons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.coat-card { position: relative; background: var(--white); border: 1px solid rgba(29,33,37,.14); border-radius: 8px; padding: 22px 18px 18px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.coat-card:hover { border-color: rgba(29,33,37,.35); transform: translateY(-2px); }
.coat-card.is-active { border-color: var(--red); box-shadow: 0 0 0 2px var(--red), 0 14px 30px -18px rgba(215,25,42,.6); }
.coat-badge { position: absolute; top: -11px; left: 18px; background: var(--red); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.coat-level { margin: 0 0 4px; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.coat-card h4 { margin: 0 0 12px; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1rem; line-height: 1.3; }
.coat-dur { margin: 0; font-size: .9rem; color: var(--text-mid); }
.coat-dur-num { font-family: var(--display); font-size: 1.25rem; color: var(--graphite); margin-right: 4px; }
.coat-meter { height: 6px; border-radius: 3px; background: rgba(29,33,37,.1); margin: 10px 0 16px; overflow: hidden; }
.coat-meter span { display: block; height: 100%; width: var(--p); min-width: 6%; background: linear-gradient(90deg, var(--red-deep), var(--red)); border-radius: 3px; }
.coat-sub { margin: 12px 0 6px; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.coat-card ul { list-style: none; margin: 0; padding: 0; font-size: .92rem; line-height: 1.45; }
.coat-card li { position: relative; padding: 3px 0 3px 18px; }
.coat-card li::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 2px; background: var(--red); }
.coat-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; border-radius: 8px; background: transparent; font-size: 0; }
.coat-card:focus-within { outline: 3px solid var(--red); outline-offset: 3px; }
@media (max-width: 1000px) {
  .coating-top { grid-template-columns: 1fr; }
  .coat-diagram { position: sticky; top: 64px; z-index: 2; padding: 12px 12px 10px; }
  .coat-legend { margin-top: 6px; }
}
@media (max-width: 760px) {
  .coat-tiers, .coat-addons { grid-template-columns: 1fr; }
}

/* Caliper section layout: intro, photo, controls, details.
   Desktop: photo left spanning all rows. Mobile: controls sit right under the photo. */
.calipers-grid { grid-template-columns: 7fr 5fr; grid-template-areas: "view head" "view controls" "view details"; grid-template-rows: auto auto 1fr; column-gap: clamp(32px, 5vw, 72px); row-gap: 0; align-items: start; }
.cal-head { grid-area: head; }
.calipers-grid > .caliper-view { grid-area: view; align-self: center; }
.cal-controls { grid-area: controls; }
.cal-details { grid-area: details; }
.cal-head h2 { margin-bottom: 18px; }
.cal-head p { color: var(--alloy); max-width: 30em; margin: 0; }
.cal-controls .picker-label:first-child { margin-top: 26px; }
.cal-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 10px; }
.cal-row .color-name { margin: 0; }
.cal-row .finish-picker { margin: 0; }
.cal-details .ticks { margin-top: 24px; }
@media (max-width: 960px) {
  .calipers-grid { grid-template-columns: 1fr; grid-template-areas: "head" "view" "controls" "details"; grid-template-rows: none; }
  .cal-head { margin-bottom: 18px; }
  .cal-controls { margin-top: 14px; }
  .cal-controls .picker-label:first-child { margin-top: 0; }
}
@media (max-width: 760px) {
  .cal-head h2 { margin-bottom: 10px; }
  .cal-head p { font-size: .98rem; }
  .cal-controls { margin-top: 12px; }
  .cal-controls .picker-label { margin: 12px 0 7px; font-size: .72rem; }
  .cal-controls .picker-label:first-child { margin-top: 0; }
  /* one swipeable row of vehicles instead of wrapping */
  .cal-controls .vehicle-picker { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 2px; }
  .cal-controls .vehicle-picker::-webkit-scrollbar { display: none; }
  .cal-controls .vehicle-picker button { flex: none; padding: 9px 14px; font-size: .88rem; }
  .cal-controls .color-picker { gap: 8px; flex-wrap: nowrap; justify-content: space-between; }
  .cal-controls .color-picker button, .cal-controls .custom-swatch { width: 38px; height: 38px; flex: none; }
  .cal-row { margin-top: 10px; }
  .cal-row .finish-picker button { padding: 8px 12px; font-size: .84rem; }
  .cal-details .ticks { margin: 22px 0 24px; }
}
@media (max-width: 360px) {
  .cal-controls .color-picker button, .cal-controls .custom-swatch { width: 34px; height: 34px; }
}

/* Ceramic packages without the diagram: tiers span the full width */
.coating-top { grid-template-columns: 1fr; }
.coat-card.is-featured { border-color: var(--red); box-shadow: 0 0 0 2px var(--red), 0 14px 30px -18px rgba(215,25,42,.6); }
.coat-card:hover { transform: none; }

/* Protection section closing call-to-action */
.protect-cta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 28px 48px; margin-top: 40px; padding: clamp(24px, 4vw, 44px); border-radius: 10px; background: var(--graphite); color: var(--pearl); position: relative; overflow: hidden; }
.protect-cta::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--red); }
.protect-cta h3 { margin: 0 0 10px; font-size: clamp(1.15rem, 2vw, 1.5rem); }
.protect-cta p { margin: 0; max-width: 40em; color: var(--alloy); }
.protect-cta-points { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .92rem; color: var(--pearl); }
.protect-cta-points li { position: relative; padding-left: 18px; }
.protect-cta-points li::before { content: ""; position: absolute; left: 0; top: .72em; width: 9px; height: 2px; background: var(--red); }
.protect-cta-actions { display: flex; flex-direction: column; gap: 28px; min-width: 240px; }
.protect-cta-actions .btn { justify-content: center; text-align: center; }
@media (max-width: 760px) {
  .protect-cta { grid-template-columns: 1fr; }
  .protect-cta-points { flex-direction: column; }
  .protect-cta-actions { min-width: 0; }
  .protect-cta-actions .btn { width: 100%; }
}

/* Protection: two compact service panels (replaces stock-photo cards) */
.protect-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 32px 0 40px; }
.pp { position: relative; border-radius: 10px; padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; overflow: hidden; }
.pp-film { background: var(--graphite); color: var(--pearl); }
.pp-coat { background: var(--white); border: 1px solid rgba(29,33,37,.14); }
.pp::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; pointer-events: none; }
.pp-film::after { background: radial-gradient(circle, rgba(215,25,42,.35), transparent 70%); }
.pp-coat::after { background: radial-gradient(circle, rgba(29,33,37,.08), transparent 70%); }
.pp-tag { margin: 0 0 8px; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.pp h3 { margin: 0 0 12px; font-size: clamp(1.2rem, 2vw, 1.5rem); }
.pp > p:not(.pp-tag) { margin: 0 0 18px; max-width: 34em; }
.pp-film > p:not(.pp-tag) { color: var(--alloy); }
.pp-coat > p:not(.pp-tag) { color: var(--text-mid); }
.pp ul { list-style: none; padding: 0; margin: 0 0 24px; border-top: 1px solid currentColor; border-color: rgba(128,128,128,.3); }
.pp li { position: relative; padding: 10px 0 10px 22px; border-bottom: 1px solid rgba(128,128,128,.25); font-size: .95rem; }
.pp li::before { content: ""; position: absolute; left: 2px; top: 1.15em; width: 10px; height: 2px; background: var(--red); }
.pp-link { margin-top: auto; align-self: flex-start; font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: 2px; }
.pp-link:hover { color: var(--red); }
.pp-film .pp-link { color: var(--white); }
.pp-coat .pp-link { color: var(--graphite); }
@media (max-width: 760px) { .protect-panels { grid-template-columns: 1fr; } }

/* comparison table removed: tighten the gap above the packages */
.coating { margin-top: 0; padding-top: 0; border-top: 0; }

/* Calipers: less space above the title on tablets and phones */
@media (max-width: 960px) { .calipers { padding-top: 40px; } }
@media (max-width: 760px) { .calipers { padding-top: 32px; } }

/* Calipers: center the estimate button on tablets and phones */
@media (max-width: 960px) {
  .cal-details { text-align: center; }
  .cal-details .ticks { text-align: left; }
  .cal-details .btn { display: inline-flex; }
}

/* Calipers: keep the title on one line, scaled to its column */
.cal-head { container-type: inline-size; }
.cal-head h2 { white-space: nowrap; font-size: min(5.4cqi, 2.4rem); }

/* Tick dashes: sit on the middle of the first line of text */
.ticks li::before { top: calc(12px + 0.8em - 1px); }

/* ---------- Page opener ---------- */
.opener { display: none; }
.op-on .opener { display: block; position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.op-on body { overflow: hidden; }
.op-panel { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, #2b3137 0%, #1d2125 55%, #15181b 100%); }
.op-inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(260px, 62vw); }
.op-inner img { width: 100%; height: auto; opacity: 0; transform: translateY(6px); }
.op-line { display: block; width: 100%; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left center; }
.op-edge { position: absolute; top: -20%; bottom: -20%; left: 0; width: 6px; background: var(--red); box-shadow: 0 0 24px rgba(215,25,42,.8); opacity: 0; transform: translateX(-20px) skewX(-18deg); }

/* Paint wipe - logo in, red pinstripe draws, panel peels away diagonally behind a red edge */
[data-opener="wipe"] .op-inner img { animation: op-in .45s ease-out .05s forwards; }
[data-opener="wipe"] .op-line { animation: op-draw .4s cubic-bezier(.6,0,.2,1) .3s forwards; }
[data-opener="wipe"] .op-panel { clip-path: polygon(0 0, 140% 0, 100% 100%, -40% 100%); animation: op-peel .6s cubic-bezier(.7,0,.2,1) .75s forwards; }
[data-opener="wipe"] .op-inner { animation: op-out .3s ease-in .72s forwards; }
[data-opener="wipe"] .op-edge { animation: op-edge .6s cubic-bezier(.7,0,.2,1) .75s forwards; }
@keyframes op-in { to { opacity: 1; transform: none; } }
@keyframes op-draw { to { transform: scaleX(1); } }
@keyframes op-out { to { opacity: 0; transform: translate(-50%, -50%) translateX(40px); } }
@keyframes op-peel { to { clip-path: polygon(140% 0, 140% 0, 100% 100%, 100% 100%); } }
@keyframes op-edge { 0% { opacity: 1; transform: translateX(-10vw) skewX(-18deg); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(115vw) skewX(-18deg); } }

/* hero lands as the opener clears */
.op-on .hero-copy > * { opacity: 0; transform: translateY(14px); }
.op-done .hero-copy > * { opacity: 1; transform: none; transition: opacity .5s ease-out, transform .5s ease-out; }
.op-done .hero-copy > :nth-child(2) { transition-delay: .06s; } .op-done .hero-copy > :nth-child(3) { transition-delay: .12s; } .op-done .hero-copy > :nth-child(4) { transition-delay: .18s; }

/* skipped or reduced motion: just a quick fade */
.op-skip .opener, .op-reduce .opener { animation: op-fade .3s ease-out forwards !important; }
.op-reduce .op-inner img { opacity: 1; transform: none; animation: none; }
.op-reduce .op-line, .op-reduce .op-edge { display: none; }
.op-reduce .op-panel, .op-skip .op-panel { animation: none !important; }

/* Wrap viewer: letterbox space matches the section background */
.wrap-view { background: transparent; }

/* Softer, rounded photo corners in both viewers */
.wrap-view .cv-stage { border-radius: 16px; overflow: hidden; }
.calipers .caliper-view { border-radius: 16px; }
@media (max-width: 760px) { .wrap-view .cv-stage, .calipers .caliper-view { border-radius: 12px; } }

/* Announcement bar: keep "Call (484) 574-1628" on one line */
.topbar a { white-space: nowrap; }

/* Wraps and calipers: a little less vertical padding */
.wraps, .calipers { padding-top: clamp(56px, 7.5vw, 96px); padding-bottom: clamp(56px, 7.5vw, 96px); }
@media (max-width: 960px) { .calipers { padding-top: 32px; } }
@media (max-width: 760px) { .wraps, .calipers { padding-bottom: 48px; } .wraps { padding-top: 48px; } .calipers { padding-top: 28px; } }

/* Wraps: center the estimate button on tablets and phones (matches calipers) */
@media (max-width: 960px) { .wraps-copy .btn { display: table; margin-left: auto; margin-right: auto; } }

/* Ceramic packages carousel */
.coat-carousel { position: relative; margin-top: 8px; }
.coat-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 18px 4px 22px; scrollbar-width: none; outline: none; }
.coat-track::-webkit-scrollbar { display: none; }
.coat-track .coat-card { flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start; min-width: 0; }
.coat-track:focus-visible { box-shadow: inset 0 0 0 2px var(--red); border-radius: 10px; }
.cc-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(29,33,37,.18); background: var(--white); color: var(--graphite); font-size: 1.7rem; line-height: 1;
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 18px -8px rgba(0,0,0,.35); transition: opacity .2s, background .2s; }
.cc-arrow:hover { background: var(--graphite); color: var(--white); }
.cc-arrow:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.cc-arrow[disabled] { opacity: 0; pointer-events: none; }
.cc-prev { left: -22px; } .cc-next { right: -22px; }
.cc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 2px; }
.cc-dots button { width: 9px; height: 9px; padding: 0; border-radius: 999px; border: 0; background: rgba(29,33,37,.22); cursor: pointer; transition: width .25s, background .25s; }
.cc-dots button[aria-selected="true"] { width: 26px; background: var(--red); }
.cc-dots button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
@media (max-width: 1000px) { .coat-track .coat-card { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 760px) {
  .coat-track { margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); scroll-padding: 0 var(--gutter); }
  .coat-track .coat-card { flex-basis: 84%; scroll-snap-align: center; }
  .cc-arrow { display: none; }
}

/* Ceramic packages heading and intro: centered */
.coating-head { text-align: center; margin-left: auto; margin-right: auto; }
.coating-head p { text-wrap: balance; max-width: 40em; margin-left: auto; margin-right: auto; }

/* Ceramic packages: larger red title, smaller intro */
.coating-head h3 { color: var(--red); font-size: clamp(1.4rem, 3.2vw, 2.3rem); margin-bottom: 12px; }
.coating-head p { font-size: .95rem; }
.coating-head { max-width: none; }
.coating-head h3 { font-size: clamp(1.25rem, 2.6vw, 1.9rem); }
@media (min-width: 961px) { .coating-head p { max-width: none; text-wrap: nowrap; } }

/* PPF packages: same look as ceramic, spaced below it */
.ppf-packages { margin-top: 56px; }
.ppf-desc { margin: 0 0 4px; font-size: .92rem; line-height: 1.5; color: var(--text-mid); }

/* Package links land with the red title comfortably below the sticky header */
#ppf, #ceramic { scroll-margin-top: 28px; }

/* Package titles: bolder (display font has one weight, so thicken the strokes) */
.coating-head h3 { -webkit-text-stroke: 0.04em currentColor; paint-order: stroke fill; letter-spacing: .02em; }

/* Package cards: quote button pinned to the bottom of each card */
.coat-track .coat-card { display: flex; flex-direction: column; }
.coat-card .coat-quote { position: relative; z-index: 1; margin-top: auto; align-self: stretch; justify-content: center; text-align: center; }
.coat-card ul:last-of-type { margin-bottom: 22px; }
/* Standard quote button under each carousel */
.cc-cta { display: flex; justify-content: center; margin-top: 22px; }

/* Quote buttons: hollow red outline, pill shape; fill on hover */
.coat-card .coat-quote, .cc-cta .btn {
  background: transparent; color: var(--red); border: 2px solid var(--red); border-radius: 999px;
  transition: background .2s, color .2s;
}
.coat-card .coat-quote:hover, .cc-cta .btn:hover { background: var(--red); color: var(--white); }
.coat-card .coat-quote:focus-visible, .cc-cta .btn:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* Protection CTA: faint red hex pattern behind the buttons, fading out toward the text */
.protect-cta::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: min(46%, 560px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.641' height='60' viewBox='0 0 34.641 60'%3E%3Cpath d='M17.32 -20.00 L34.64 -10.00 L34.64 10.00 L17.32 20.00 L0.00 10.00 L0.00 -10.00 Z M17.32 40.00 L34.64 50.00 L34.64 70.00 L17.32 80.00 L0.00 70.00 L0.00 50.00 Z M0.00 10.00 L17.32 20.00 L17.32 40.00 L0.00 50.00 L-17.32 40.00 L-17.32 20.00 Z M34.64 10.00 L51.96 20.00 L51.96 40.00 L34.64 50.00 L17.32 40.00 L17.32 20.00 Z' fill='none' stroke='%23d81e2c' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size: 31.18px 54px; opacity: .28; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 120% 150% at 100% 0%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 120% 150% at 100% 0%, #000 30%, transparent 85%);
}
.protect-cta-copy, .protect-cta-actions { position: relative; z-index: 1; }
@media (max-width: 760px) { .protect-cta::after { width: 100%; opacity: .22; -webkit-mask-image: radial-gradient(ellipse 120% 45% at 100% 100%, #000 20%, transparent 85%); mask-image: radial-gradient(ellipse 120% 45% at 100% 100%, #000 20%, transparent 85%); } }


/* ===================== Vinyl wraps subpage ===================== */
.wp-hero { position: relative; overflow: hidden; background: var(--graphite); color: var(--pearl); padding: clamp(48px, 8vw, 104px) 0 clamp(40px, 6vw, 72px); }
.wp-hero::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: min(55%, 720px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.641' height='60' viewBox='0 0 34.641 60'%3E%3Cpath d='M17.32 -20.00 L34.64 -10.00 L34.64 10.00 L17.32 20.00 L0.00 10.00 L0.00 -10.00 Z M17.32 40.00 L34.64 50.00 L34.64 70.00 L17.32 80.00 L0.00 70.00 L0.00 50.00 Z M0.00 10.00 L17.32 20.00 L17.32 40.00 L0.00 50.00 L-17.32 40.00 L-17.32 20.00 Z M34.64 10.00 L51.96 20.00 L51.96 40.00 L34.64 50.00 L17.32 40.00 L17.32 20.00 Z' fill='none' stroke='%23d81e2c' stroke-width='1.2'/%3E%3C/svg%3E"); background-size: 31.18px 54px; opacity: .3; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 100% 120% at 100% 0%, #000 25%, transparent 80%);
          mask-image: radial-gradient(ellipse 100% 120% at 100% 0%, #000 25%, transparent 80%); }
.wp-hero-inner { position: relative; z-index: 1; }
.crumbs { font-size: .9rem; color: var(--steel); margin-bottom: 22px; }
.crumbs a { color: var(--alloy); text-decoration: none; }
.crumbs a:hover { color: var(--white); text-decoration: underline; }
.wp-hero h1 { font-size: clamp(1.8rem, 4.6vw, 3.4rem); max-width: 15em; margin: 6px 0 20px; }
.wp-lead { max-width: 40em; color: var(--alloy); font-size: clamp(1.02rem, 1.4vw, 1.15rem); margin-bottom: 28px; }
.wp-facts { list-style: none; margin: clamp(36px, 5vw, 56px) 0 0; padding: 24px 0 0; border-top: 1px solid rgba(140,149,157,.3);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.wp-facts li { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 2px solid var(--red); }
.wp-facts strong { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: .95rem; letter-spacing: .02em; color: var(--white); }
.wp-facts span { color: var(--steel); font-size: .92rem; }

.wp-section { padding: clamp(64px, 8vw, 104px) 0; }
.wp-alt { background: #E4E7EA; }
.wp-dark { background: var(--graphite); color: var(--pearl); }
.wp-head { text-align: center; max-width: 44em; margin: 0 auto clamp(32px, 4vw, 48px); }
.wp-head h2 { margin-bottom: 14px; }
.wp-head p { color: var(--text-mid); margin: 0 0 .8em; }
.wp-dark .wp-head p { color: var(--alloy); }
.wp-head-left { text-align: left; margin: 0; }
.wp-split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }

.wp-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.wp-card { background: var(--gunmetal); border-radius: 12px; padding: 26px 22px 24px; border-top: 3px solid var(--red); }
.wp-num { font-family: var(--display); color: var(--red); font-size: .85rem; letter-spacing: .1em; }
.wp-card h3 { margin: 10px 0 10px; color: var(--white); }
.wp-card p { color: var(--alloy); font-size: .97rem; }
.wp-card ul { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(140,149,157,.25); }
.wp-card li { position: relative; padding: 4px 0 4px 18px; font-size: .93rem; color: var(--pearl); }
.wp-card li::before { content: ""; position: absolute; left: 0; top: calc(4px + .8em - 1px); width: 9px; height: 2px; background: var(--red); }

.wp-finishes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wp-finish { background: var(--white); border: 1px solid #DDE1E4; border-radius: 12px; padding: 18px 20px 20px; display: grid; grid-template-columns: 64px 1fr; column-gap: 18px; align-items: start; }
.wp-finish h3 { align-self: end; margin-top: 4px; }
.wp-finish p { grid-column: 2; margin: 6px 0 0; color: var(--text-mid); font-size: .96rem; }
.wp-chip { grid-row: span 2; width: 64px; height: 64px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.chip-gloss { background: radial-gradient(circle at 32% 28%, #fff 0 7%, rgba(255,255,255,.35) 14%, transparent 30%), linear-gradient(150deg, #E2283A, #8E0D18); }
.chip-satin { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), transparent 55%), linear-gradient(150deg, #5C6268, #2E3338); }
.chip-matte { background: linear-gradient(150deg, #4A4F54, #3A3F44); }
.chip-metal { background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.55), transparent 40%), repeating-conic-gradient(from 10deg, rgba(255,255,255,.18) 0 2deg, transparent 2deg 9deg), linear-gradient(150deg, #2F6FB5, #123A66); }
.chip-shift { background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.45), transparent 38%), linear-gradient(135deg, #2BB3A5, #3C4FC9 45%, #8A2BB8 75%, #C23E7C); }
.chip-carbon { background: repeating-linear-gradient(45deg, #2A2D31 0 4px, #18191C 4px 8px), #1E2023; background-blend-mode: normal; }

.wp-table-wrap { overflow-x: auto; }
.wp-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: 12px; overflow: hidden; font-size: .98rem; }
.wp-table th, .wp-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid #E1E4E7; vertical-align: top; }
.wp-table thead th { background: var(--graphite); color: var(--white); font-weight: 600; }
.wp-table thead th:nth-child(2) { background: var(--red); }
.wp-table tbody th { font-weight: 600; white-space: nowrap; }
.wp-table td { color: var(--text-mid); }
.wp-table td:nth-child(2) { color: var(--graphite); }
.wp-table tr:last-child th, .wp-table tr:last-child td { border-bottom: 0; }
.wp-table .yes { font-weight: 700; color: var(--red); }

.wp-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wp-steps li { counter-increment: step; position: relative; background: var(--white); border: 1px solid #DDE1E4; border-radius: 12px; padding: 24px 22px 22px; }
.wp-steps li::before { content: counter(step, decimal-leading-zero); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--red); color: var(--white); font-family: var(--display); font-size: .85rem; margin-bottom: 14px; }
.wp-steps h3 { margin-bottom: 8px; }
.wp-steps p { margin: 0; color: var(--text-mid); font-size: .97rem; }

.wp-care { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.wp-care h3 { color: var(--white); }
.wp-care .ticks { margin: 14px 0 0; }
.wp-avoid li::before { background: var(--steel); }

.wp-pairs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wp-pair { display: block; text-decoration: none; background: var(--white); border: 1px solid #DDE1E4; border-radius: 12px; padding: 24px 22px; transition: border-color .2s, transform .2s; }
.wp-pair:hover { border-color: var(--red); transform: translateY(-2px); }
.wp-pair h3 { margin-bottom: 8px; }
.wp-pair p { color: var(--text-mid); font-size: .97rem; }
.wp-pay { text-align: center; margin: 32px auto 0; color: var(--text-mid); }
.wp-pay strong { color: var(--graphite); }
.subpage .wp-section + .faq { padding-top: 0; }
.subpage .wraps { padding-top: clamp(48px, 6vw, 80px); }

@media (max-width: 1080px) {
  .wp-cards { grid-template-columns: 1fr 1fr; }
  .wp-finishes, .wp-steps, .wp-pairs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .wp-split { grid-template-columns: 1fr; }
  .wp-head-left { text-align: center; margin: 0 auto; }
  .wp-facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .wp-cards, .wp-finishes, .wp-steps, .wp-pairs, .wp-care { grid-template-columns: 1fr; }
  .wp-hero::after { width: 100%; opacity: .18; }
  .wp-table th, .wp-table td { padding: 12px; }
  .wp-table tbody th { white-space: normal; }
}
.wraps-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; }
@media (max-width: 960px) { .wraps-actions { flex-direction: column; } .wraps-copy .wraps-actions .btn { margin: 0; } }

/* Caliper painting subpage variants */
.subpage .calipers { border-top: 1px solid rgba(140,149,157,.22); padding-top: clamp(48px, 6vw, 80px); }
.wp-cards-light .wp-card { background: var(--white); border: 1px solid #DDE1E4; border-top: 3px solid var(--red); }
.wp-cards-light .wp-card h3 { color: var(--graphite); }
.wp-cards-light .wp-card p { color: var(--text-mid); }
.wp-cards-light .wp-card ul { border-top-color: #E1E4E7; }
.wp-cards-light .wp-card li { color: var(--graphite); }
.wp-inline { color: var(--red); font-weight: 600; text-decoration: none; }
.wp-inline:hover { text-decoration: underline; }
.wp-steps-dark li { background: var(--gunmetal); border-color: transparent; }
.wp-steps-dark h3 { color: var(--white); }
.wp-steps-dark p { color: var(--alloy); }
.wp-care-light h3 { color: var(--graphite); }
.link-light { color: var(--white); }
.cal-details .wraps-actions { margin-top: 4px; }
@media (max-width: 960px) { .cal-details .wraps-actions .btn { margin: 0; } }

/* PPF & ceramic subpage */
.coating-solo { border-top: 0; padding-top: 0; margin: 0; }
.pc-carousel { padding: clamp(48px, 6vw, 80px) 0; }
.wp-head-left .pp-tag { margin-bottom: 10px; }
.wp-dark .wp-head-left .pp-tag { color: var(--red); }
.pc-which .wp-card { border-top-width: 3px; }
.pc-which .wp-num { text-transform: uppercase; font-size: .75rem; }
.pc-both { background: var(--red); border-top-color: var(--white) !important; }
.pc-both .wp-num, .pc-both p { color: var(--white) !important; }
.pc-cta-section { padding: clamp(48px, 6vw, 80px) 0; }
.pc-cta-section .protect-cta { margin: 0; }
.pc-more { text-align: center; margin: 28px 0 0; }
.pc-compare { padding-bottom: clamp(40px, 5vw, 64px); }
.pc-compare .protect-panels { margin-bottom: 0; }

/* Window tint subpage */
.subpage .tint { border-top: 1px solid rgba(140,149,157,.22); padding-top: clamp(48px, 6vw, 80px); }
.tw-films { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 980px; margin: 0 auto; }
.tw-film { position: relative; background: var(--white); border: 1px solid #DDE1E4; border-radius: 12px; padding: 30px 28px 22px; }
.tw-film h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); margin-bottom: 12px; }
.tw-film > p:not(.pp-tag) { color: var(--text-mid); }
.tw-film .ticks { margin-top: 18px; }
.tw-film-pro { border: 2px solid var(--red); box-shadow: 0 14px 34px -18px rgba(216,30,44,.45); }
.tw-film .coat-badge { position: absolute; top: -12px; left: 24px; }
.tw-shades { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.tw-shade h3 { margin: 14px 0 6px; }
.tw-shade p { color: var(--text-mid); font-size: .95rem; margin: 0; }
.tw-glass { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
  background: linear-gradient(160deg, #9FC3DE 0%, #DCE8F1 45%, #B9C7B0 46%, #7E9475 100%); }
.tw-glass::before { content: ""; position: absolute; inset: 0; background: #0B0D10; opacity: var(--o); }
.tw-glass::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 42%, transparent 55%); }
.tw-glass span { position: absolute; left: 12px; bottom: 10px; z-index: 1; font-family: var(--display); font-size: 1.15rem; color: var(--white); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.tw-law tbody th { white-space: normal; }
.tw-fine { font-size: .9rem; color: var(--steel) !important; }
.wp-dark .wp-table td { color: var(--text-mid); }
@media (max-width: 1080px) { .tw-shades { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .tw-films { grid-template-columns: 1fr; } .tw-shades { grid-template-columns: 1fr 1fr; } }
.wp-dark .wp-table tbody th { color: var(--graphite); }
.wp-dark .wp-table td:nth-child(2), .wp-dark .wp-table td:nth-child(3) { color: var(--graphite); }
.tw-shade { position: relative; }
.tw-shade .coat-badge { position: absolute; top: -11px; left: 12px; z-index: 2; }
.tw-shade.is-popular .tw-glass { box-shadow: 0 0 0 2px var(--red), 0 14px 30px -16px rgba(216,30,44,.55); }

/* Tint packages & pricing */
.tw-pkgs { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.tw-pkgs > .tw-pkg { flex: 0 1 calc((100% - 40px) / 3); }
.tw-pkg { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid #DDE1E4; border-radius: 12px; padding: 22px 22px 22px; }
.tw-pkg.is-featured { border: 2px solid var(--red); box-shadow: 0 16px 34px -20px rgba(216,30,44,.55); }
.tw-sale { position: absolute; top: -12px; right: 18px; background: var(--red); color: var(--white); font-family: var(--display); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; transform: rotate(4deg); box-shadow: 0 6px 14px -6px rgba(216,30,44,.7); }
.tw-pkg-art { background: #F3F5F7; border-radius: 10px; padding: 14px 16px; margin-bottom: 18px; }
.tw-car { display: block; width: 100%; height: auto; }
.tw-car .w { fill: #2B3036; }
.tw-car .b { fill: #E3E7EB; stroke: #AEB6BE; stroke-width: 1.5; }
.tw-car .crease, .tw-car .lamp { fill: none; stroke: #C2C9D0; stroke-width: 1.4; stroke-linecap: round; }
.tw-car .lamp { stroke: #9AA3AC; stroke-width: 2.4; }
.tw-car .m { fill: #CBD2D8; stroke: #AEB6BE; }
.tw-car .r { fill: #D3D9DE; }
.tw-car .g { fill: #6F7C88; opacity: .45; }
.tw-car .g.sun { fill: none; opacity: 1; }
.tw-car .g.on { fill: var(--red); opacity: .92; }
.tw-car .g.sun.on { fill: #9E1020; }
.tw-car.remove .g.on { fill: #fff; opacity: 1; stroke: var(--red); stroke-width: 1.6; stroke-dasharray: 4 3; }
.tw-pkg h3 { margin: 0 0 6px; }
.tw-price { font-family: var(--display); color: var(--red); font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 0 0 12px; }
.tw-price-vary { font-size: 1.15rem; }
.tw-pkg-desc { color: var(--text-mid); font-size: .96rem; }
.tw-pkg ul { list-style: none; margin: 4px 0 20px; padding: 14px 0 0; border-top: 1px solid #E1E4E7; font-size: .94rem; }
.tw-pkg li { position: relative; padding: 4px 0 4px 18px; }
.tw-pkg li::before { content: ""; position: absolute; left: 0; top: calc(4px + .75em - 1px); width: 9px; height: 2px; background: var(--red); }
.tw-pkg-cta { margin-top: auto; display: grid; gap: 10px; }
.tw-pkg-cta.two { grid-template-columns: 1fr 1fr; }
.tw-book { background: transparent; color: var(--red); border: 2px solid var(--red); border-radius: 999px; justify-content: center; transition: background .2s, color .2s; }
.tw-book:hover { background: var(--red); color: var(--white); }
.tw-legend { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 26px 0 0; font-size: .9rem; color: var(--text-mid); }
.tw-key { display: inline-block; width: 16px; height: 10px; border-radius: 2px; background: var(--red); }
.tw-key-rm { margin-left: 14px; background: #fff; border: 1.5px dashed var(--red); }
.tw-pricing .wp-pay a { color: var(--graphite); }
@media (max-width: 1080px) { .tw-pkgs > .tw-pkg { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 680px) { .tw-pkgs > .tw-pkg { flex-basis: 100%; } }
.tw-pkg-art { padding: 10px 8px 4px; }
.tw-pkg-art img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }

/* Tint visualizer (BMW, shade slider + before/after wipe) */
.tv-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.tv-shade { margin: 26px 0 8px; }
.tv-shade-top { display: flex; align-items: baseline; justify-content: space-between; }
.tv-shade-top .picker-label { margin: 0; }
.tv-readout { font-family: var(--display); font-size: 1.6rem; color: var(--white); }
.tv-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 14px 0 8px; border-radius: 99px; cursor: pointer;
  background: linear-gradient(90deg, var(--red) 0 var(--fill, 60%), rgba(255,255,255,.18) var(--fill, 60%) 100%); }
.tv-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--white); border: 4px solid var(--red); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.tv-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 4px solid var(--red); }
.tv-ticks { display: flex; justify-content: space-between; font-size: .8rem; color: var(--steel); }
.tv-ticks span { width: 0; display: flex; justify-content: center; white-space: nowrap; }
.tv-ticks span:first-child { justify-content: flex-start; } .tv-ticks span:last-child { justify-content: flex-end; }
.tv-note { min-height: 3em; margin: 14px 0 6px; color: var(--pearl); }
.tv-copy .small a { color: var(--pearl); }
.tv-view { min-width: 0; }
.tv-stage { position: relative; border-radius: 16px; overflow: hidden; background: #fff; user-select: none; touch-action: pan-y; }
.tv-stage img { display: block; width: 100%; height: auto; }
.tv-film { position: absolute; inset: 0; background: #07090B; pointer-events: none;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  clip-path: inset(0 0 0 var(--split)); transition: opacity .25s; }
.tv-handle { position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; margin-left: -1px; background: var(--red); pointer-events: none; }
.tv-handle span { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: var(--red); box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.tv-handle span::before, .tv-handle span::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -6px; border: 6px solid transparent; }
.tv-handle span::before { left: 5px; border-right-color: #fff; }
.tv-handle span::after { right: 5px; border-left-color: #fff; }
.tv-tag { position: absolute; top: 12px; padding: 5px 10px; border-radius: 999px; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.tv-tag-on { right: 12px; background: var(--graphite); color: var(--white); }
.tv-tag-off { left: 12px; background: rgba(29,33,37,.08); color: var(--graphite); }
.tv-compare { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.tv-compare::-webkit-slider-thumb { -webkit-appearance: none; width: 48px; height: 600px; }
.tv-stage:has(.tv-compare:focus-visible) .tv-handle span { outline: 3px solid var(--white); outline-offset: 2px; }
.tv-hint { margin: 12px 0 0; font-size: .88rem; color: var(--steel); text-align: center; }
@media (max-width: 960px) { .tv-grid { grid-template-columns: 1fr; } .tv-view { order: -1; } }
.tv-grid { grid-template-areas: "copy view" "more view"; grid-template-rows: auto 1fr; row-gap: 0; align-items: start; }
.tv-copy { grid-area: copy; align-self: end; }
.tv-more { grid-area: more; }
.tv-view { grid-area: view; }
.tv-more .small { font-size: .9rem; color: var(--steel); margin-top: 6px; }
.tv-more .small a { color: var(--pearl); }
.tv-shade { margin: 20px 0 0; }
.tv-hint { margin-top: 10px; }
@media (max-width: 960px) {
  .tv-grid { grid-template-columns: 1fr; grid-template-areas: "copy" "view" "more"; }
  .tv-view { order: 0; margin: 8px 0 22px; }
}
@media (max-width: 560px) {
  .tv-tag { top: 8px; padding: 3px 8px; font-size: .62rem; }
  .tv-tag-on { right: 8px; } .tv-tag-off { left: 8px; }
  .tv-handle span { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
}
.tv-stage { background: #C9CBCD; }

/* Detailing: build-your-detail selector */
.dp-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.dp-step legend { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 16px; font-family: var(--display); text-transform: uppercase; font-size: 1rem; letter-spacing: .02em; }
.dp-step legend small { font-family: var(--body); text-transform: none; color: var(--steel); font-size: .9rem; }
.dp-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: #fff; font-family: var(--display); font-size: .8rem; flex: none; }
.dp-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.dp-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px 16px 16px; background: var(--white); border: 1px solid #DDE1E4; border-radius: 12px; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.dp-card:hover { border-color: var(--steel); transform: translateY(-2px); }
.dp-card input { position: absolute; opacity: 0; pointer-events: none; }
.dp-card.is-selected { border-color: var(--red); box-shadow: 0 0 0 2px var(--red), 0 14px 30px -18px rgba(216,30,44,.6); }
.dp-card:has(input:focus-visible) { outline: 3px solid var(--red); outline-offset: 3px; }
.dp-card .coat-badge { left: 14px; }
.dp-card-tag { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.dp-card-name { font-family: var(--display); text-transform: uppercase; font-size: .98rem; line-height: 1.25; color: var(--graphite); }
.dp-card-price { font-family: var(--display); font-size: 1.45rem; color: var(--graphite); margin-top: 6px; }
.dp-card-price small { font-family: var(--body); font-size: .8rem; color: var(--steel); text-transform: none; }
.dp-card-count { font-size: .85rem; color: var(--text-mid); }
.dp-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; margin-top: 24px; align-items: start; }
.dp-panel { background: var(--white); border: 1px solid #DDE1E4; border-radius: 12px; padding: 26px 26px 10px; }
.dp-panel-head { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid #E1E4E7; }
.dp-panel-head h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); margin-bottom: 8px; }
.dp-panel-head p { color: var(--text-mid); margin: 0; }
.dp-best { background: #F3F5F7; border-left: 3px solid var(--red); border-radius: 6px; padding: 12px 14px; font-size: .94rem; color: var(--graphite) !important; }
.dp-best span { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: 4px; }
.dp-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 28px; padding-top: 16px; }
.dp-group h4 { margin: 4px 0 8px; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.dp-group ul { list-style: none; margin: 0 0 16px; padding: 0; font-size: .94rem; }
.dp-group li { position: relative; padding: 4px 0 4px 24px; }
.dp-group li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 10px; height: 5px; border-left: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: rotate(-45deg); }
.dp-step-addons { margin-top: 28px; }
.dp-addons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dp-addon { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px; background: var(--white); border: 1px solid #DDE1E4; border-radius: 10px; cursor: pointer; transition: border-color .2s, background .2s; }
.dp-addon:hover { border-color: var(--steel); }
.dp-addon input { position: absolute; opacity: 0; pointer-events: none; }
.dp-addon:has(input:focus-visible) { outline: 3px solid var(--red); outline-offset: 2px; }
.dp-check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid #B7BEC6; position: relative; transition: background .2s, border-color .2s; }
.dp-addon.is-selected { border-color: var(--red); background: #FFF6F7; }
.dp-addon.is-selected .dp-check { background: var(--red); border-color: var(--red); }
.dp-addon.is-selected .dp-check::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dp-addon-text strong { display: block; font-size: .95rem; }
.dp-addon-text small { display: block; color: var(--text-mid); font-size: .85rem; line-height: 1.35; }
.dp-addon-price { text-align: right; font-weight: 700; white-space: nowrap; font-size: .95rem; }
.dp-addon-price s { color: var(--steel); font-weight: 400; margin-right: 2px; }
.dp-addon-price em { display: block; font-style: normal; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.dp-summary { position: sticky; top: 96px; background: var(--graphite); color: var(--pearl); border-radius: 12px; padding: 24px; }
.dp-summary h3 { display: flex; align-items: center; gap: 10px; color: var(--white); font-size: 1rem; margin-bottom: 16px; }
.dp-lines { list-style: none; margin: 0; padding: 0 0 14px; border-bottom: 1px solid rgba(140,149,157,.3); font-size: .95rem; }
.dp-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.dp-lines li:first-child { font-weight: 600; color: var(--white); }
.dp-line-add { color: var(--alloy); }
.dp-total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 8px; }
.dp-total span { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
.dp-total strong { font-family: var(--display); font-weight: 400; font-size: 2rem; color: var(--white); }
.dp-fine { font-size: .82rem; color: var(--steel); margin-bottom: 16px; }
.dp-summary .btn { width: 100%; justify-content: center; }
.dp-call { margin-top: 10px; border: 1px solid rgba(255,255,255,.4); color: var(--white); background: transparent; }
.dp-call:hover { border-color: var(--white); }
.dp-pickup { margin: 14px 0 0; text-align: center; font-size: .85rem; color: var(--alloy); }
.dp-compare th small { display: block; font-weight: 400; font-size: .8rem; opacity: .75; }
.dp-compare thead th { text-align: center; }
.dp-compare thead th:first-child { text-align: left; }
.dp-compare thead th:nth-child(2) { background: var(--graphite); }
.dp-compare thead th.dp-col-feat { background: var(--red); }
.dp-compare td { text-align: center; }
.dp-yes { color: var(--red); font-weight: 700; font-size: 1.1rem; }
.dp-no { color: #B7BEC6; }
.dp-part { font-size: .85rem; color: var(--graphite); }
.dp-compare tbody th { white-space: normal; }
.dp-moto { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.dp-moto h2 { margin-bottom: 14px; }
.dp-moto > div > p:not(.pp-tag) { color: var(--text-mid); }
.dp-moto .ticks { margin-top: 18px; }
.dp-moto-card { position: relative; background: var(--white); border: 2px solid var(--red); border-radius: 12px; padding: 30px 26px 26px; }
.dp-moto-card p { color: var(--text-mid); }
.dp-moto-price { font-family: var(--display); font-size: 2.2rem; color: var(--graphite) !important; margin-bottom: 10px; }
.dp-moto-price s { font-size: 1.2rem; color: var(--steel); }
.dp-moto-card .btn { width: 100%; justify-content: center; margin-top: 8px; }
@media (max-width: 1100px) { .dp-cards { grid-template-columns: repeat(3, 1fr); } .dp-body { grid-template-columns: 1fr; } .dp-summary { position: static; } }
@media (max-width: 700px) {
  .dp-cards { grid-template-columns: 1fr 1fr; } .dp-cards .dp-card:last-child { grid-column: span 2; }
  .dp-panel-head, .dp-addons, .dp-moto { grid-template-columns: 1fr; }
  .dp-panel { padding: 20px 18px 6px; }
  .dp-compare { font-size: .85rem; } .dp-compare th, .dp-compare td { padding: 10px 8px; }
}
.dp-bar { display: none; }
@media (max-width: 1100px) {
  .dp-bar { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 10px 10px 18px; background: var(--graphite); color: var(--white); border-radius: 14px; box-shadow: 0 14px 34px -12px rgba(0,0,0,.55);
    transform: translateY(140%); transition: transform .3s; }
  .dp-bar.is-on { transform: none; }
  .dp-bar span { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
  .dp-bar strong { font-family: var(--display); font-weight: 400; font-size: 1.35rem; }
  .dp-bar .btn { padding: 12px 18px; }
}
@media (prefers-reduced-motion: reduce) { .dp-bar { transition: none; } }
.dp-booking { padding-top: 0; }
.dp-booking-note { display: flex; gap: 12px; align-items: flex-start; max-width: 860px; margin: 0 auto 20px; padding: 14px 18px; background: #FFF6F7; border: 1px solid rgba(216,30,44,.25); border-radius: 10px; }
.dp-booking-note p { margin: 2px 0 0; color: var(--graphite); }
.dp-booking-note .dp-num { font-family: var(--body); font-weight: 700; font-size: .9rem; }
.dp-widget { max-width: 860px; margin: 0 auto; min-height: 320px; background: var(--white); border: 1px solid #DDE1E4; border-radius: 12px; padding: 12px; overflow: hidden; }
.dp-widget iframe { width: 100% !important; border: 0; }
.dp-widget-alt { text-align: center; margin: 14px 0 0; font-size: .92rem; color: var(--text-mid); }
#book { scroll-margin-top: 90px; }

/* Detailing: vehicle size step */
.dp-step-size { margin-bottom: 28px; }
.dp-sizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dp-size { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 16px 10px 14px; background: var(--white); border: 1px solid #DDE1E4; border-radius: 12px; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.dp-size:hover { border-color: var(--steel); }
.dp-size input { position: absolute; opacity: 0; pointer-events: none; }
.dp-size:has(input:focus-visible) { outline: 3px solid var(--red); outline-offset: 3px; }
.dp-size svg { width: 104px; height: 45px; margin-bottom: 8px; overflow: visible; }
.dp-size svg .b { fill: #C9CED4; transition: fill .2s; }
.dp-size svg .g { fill: #EEF1F4; }
.dp-size svg .fr { fill: none; stroke: #9AA3AC; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
.dp-size svg .w circle { fill: var(--graphite); }
.dp-size svg .w .rim { fill: #D5DAE0; }
.dp-size.is-selected svg .b { fill: var(--red); }
.dp-size.is-selected svg .fr { stroke: var(--graphite); }
.dp-size:hover svg .b { fill: #B7BEC6; }
.dp-size.is-selected:hover svg .b { fill: var(--red); }
.dp-size-name { font-weight: 700; font-size: .95rem; color: var(--graphite); }
.dp-size-sub { font-size: .8rem; color: var(--text-mid); }
.dp-card-amt { font-family: var(--display); }
@media (max-width: 900px) { .dp-sizes { grid-template-columns: 1fr 1fr; } }

.dp-sizes { grid-template-columns: repeat(5, 1fr); }
.dp-card .dp-was { font-family: var(--body); font-size: .9rem; color: var(--steel); margin-right: 4px; }
.dp-moto-only.dp-card .coat-badge { left: 14px; }
.dp-cards:has(.dp-moto-only:not([hidden])) { grid-template-columns: repeat(2, minmax(0, 300px)); }
.dp-moto-note { margin: 24px 0 0; padding: 14px 18px; background: var(--white); border: 1px dashed #C9CED4; border-radius: 10px; color: var(--text-mid); }
@media (max-width: 900px) { .dp-sizes { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .dp-sizes { grid-template-columns: 1fr 1fr; } .dp-sizes .dp-size:first-child { grid-column: span 2; } .dp-cards:has(.dp-moto-only:not([hidden])) { grid-template-columns: 1fr 1fr; } }
[hidden] { display: none !important; }
.dp-size.is-selected { border-color: var(--red); box-shadow: 0 0 0 2px var(--red); }

/* Homepage wraps: list + buttons sit below the color picker (same order as calipers) */
.wraps-grid:has(> .wraps-head) { grid-template-areas: "head tool" "details tool"; grid-template-rows: auto 1fr; row-gap: 0; align-items: start; }
.wraps-head { grid-area: head; align-self: end; }
.wraps-grid:has(> .wraps-head) > .wrap-tool { grid-area: tool; align-self: center; }
.wraps-details { grid-area: details; }
.wraps-details .ticks { margin-top: 24px; }
@media (max-width: 960px) {
  .wraps-grid:has(> .wraps-head) { grid-template-areas: "head" "tool" "details"; grid-template-rows: none; row-gap: 0; }
  .wraps-head { margin-bottom: 22px; }
  .wraps-details .ticks { margin-top: 28px; }
}
/* Centered buttons on small screens: keep the label vertically centered */
@media (max-width: 960px) { .wraps-copy .btn, .cal-details .btn { display: flex; width: fit-content; } }
/* Wrap photo frame: wider shape so the car fills it with less empty space above and below */
.wraps .wrap-view { aspect-ratio: 16 / 10; }
@media (max-width: 960px) {
  .wraps-head { margin-bottom: 10px; }
  .wraps-head > p { margin-bottom: 0; }
}
/* Calipers: same spacing as the wraps section */
.calipers:not(.subpage .calipers) { padding-top: clamp(56px, 7.5vw, 96px); }
@media (max-width: 760px) {
  .calipers:not(.subpage .calipers) { padding-top: 48px; }
}
@media (max-width: 960px) {
  .cal-head { margin-bottom: 10px; }
  .cal-controls { margin-top: 0; }
  .cal-controls .picker-label:first-child { margin-top: 20px; }
  .cal-details .ticks { margin-top: 28px; }
}
/* Calipers heading block: same airy spacing as the wraps heading */
.cal-head h2 { margin-bottom: 22px; }
.cal-head p { font-size: inherit; line-height: inherit; }
@media (max-width: 960px) {
  .cal-head h2 { margin-bottom: 22px; }
  .cal-head p { font-size: inherit; }
  .cal-head { margin-bottom: clamp(28px, 6vw, 48px); }
}
.pickup .pp-tag { margin-bottom: 10px; color: var(--red); }
.pickup-points { margin: 22px 0 28px; }

/* PPF rock chip test */
.rc { background: var(--pearl); }
.rc .wp-head .pp-tag { margin-bottom: 10px; }
.rc-pkgs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 20px; }
.rc-pkgs button { font: inherit; font-size: .92rem; font-weight: 600; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(29,33,37,.25); background: var(--white); color: var(--graphite); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.rc-pkgs button:hover { border-color: var(--graphite); }
.rc-pkgs button[aria-checked="true"] { background: var(--graphite); border-color: var(--graphite); color: var(--pearl); }
.rc-stage { position: relative; max-width: 1000px; margin: 0 auto; border-radius: 16px; overflow: hidden; background: #C9CBCD; user-select: none; }
.rc-stage img { display: block; width: 100%; height: auto; }
.rc-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rc-fx { cursor: crosshair; touch-action: manipulation; }
.rc-dir { position: absolute; left: 12px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(29,33,37,.75); color: #fff; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.rc-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; max-width: 1000px; margin: 18px auto 0; }
.rc-score { display: flex; gap: 28px; }
.rc-score div { display: flex; align-items: baseline; gap: 8px; }
.rc-score strong { font-family: var(--display); font-weight: 400; font-size: 2rem; color: var(--red); line-height: 1; }
.rc-score .rc-ok strong { color: #1E7FD1; }
.rc-score span { font-size: .9rem; color: var(--text-mid); }
.rc-actions { display: flex; gap: 10px; }
.rc-actions .btn:disabled { opacity: .6; cursor: default; }
.rc-reset { background: transparent; border: 1px solid rgba(29,33,37,.3); color: var(--graphite); }
.rc-reset:hover { border-color: var(--graphite); }
.rc-msg { max-width: 1000px; margin: 14px auto 0; text-align: center; color: var(--text-mid); min-height: 1.6em; }
@media (max-width: 600px) {
  .rc-pkgs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)) 16px; padding: 0 var(--gutter) 2px; }
  .rc-pkgs::-webkit-scrollbar { display: none; }
  .rc-pkgs button { flex: none; }
  .rc-stage { border-radius: 12px; }
  .rc-dir { font-size: .62rem; padding: 3px 8px; }
  .rc-bar { flex-direction: column; align-items: stretch; }
  .rc-score { justify-content: space-between; }
  .rc-actions .btn { flex: 1; justify-content: center; }
}
@media (max-width: 600px) {
  .rc-actions { display: grid; grid-template-columns: 2fr 1fr; }
  .rc-score div { flex-direction: column; gap: 2px; }
  .rc-score span { font-size: .82rem; }
}
/* Rock chip test on the homepage protection section */
.rc-inline { margin: 8px 0 48px; padding-top: 48px; border-top: 1px solid rgba(29,33,37,.12); background: none; }
.rc-inline .coating-head { text-align: center; margin: 0 auto 22px; }
.rc-inline .coating-head .pp-tag { margin-bottom: 8px; }
.rc-inline .coating-head h3 { color: var(--red); font-size: clamp(1.25rem, 2.6vw, 1.9rem); -webkit-text-stroke: 0.04em currentColor; paint-order: stroke fill; letter-spacing: .02em; }
.rc-inline .coating-head .pp-tag { color: var(--red); }

/* Ceramic dirt test */
.dt-fx { cursor: crosshair; touch-action: none; }
.dt-actions .btn-dark { white-space: nowrap; }
.dt-note { max-width: 760px; margin: 8px auto 0; text-align: center; font-size: .86rem; color: var(--steel); }
@media (max-width: 600px) {
  .dt-actions { grid-template-columns: 1fr 1fr; }
  .dt-actions .btn { width: 100%; }
}
.dt-dirt { filter: blur(.35px); }
@media (max-width: 600px) { .dt-actions:has(#dt-wipe[hidden]) #dt-reset { grid-column: span 2; } }
/* "Also at the shop": red heading and red markers, matching the other section accents */
.also h2 { color: var(--red); font-size: clamp(1.25rem, 2.6vw, 1.9rem); -webkit-text-stroke: 0.04em currentColor; paint-order: stroke fill; letter-spacing: .02em; }
.also li { position: relative; padding-left: 22px; }
.also li::before { content: ""; position: absolute; left: 0; top: calc(12px + .8em - 1px); width: 10px; height: 2px; background: var(--red); }
.also a { text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.also a:hover strong { color: var(--red); }

/* Homepage tint: options sit right above the photo on phones; note, details and buttons below */
.tint-stack { grid-template-areas: "head view" "details view"; grid-template-rows: auto 1fr; row-gap: 0; align-items: start; }
.tint-stack .tint-head { grid-area: head; align-self: end; }
.tint-stack .windshield { grid-area: view; align-self: center; }
.tint-stack .tint-details { grid-area: details; }
.tint-stack .shade-picker { margin-bottom: 18px; }
.tint-stack .tint-details .shade-note { margin-top: 0; }
.tint-stack .tint-details .small { margin-top: 0; }
@media (max-width: 960px) {
  .tint-stack { grid-template-columns: 1fr; grid-template-areas: "head" "view" "details"; grid-template-rows: none; }
  .tint-stack .shade-picker { margin-bottom: 14px; }
  .tint-stack .tint-details { margin-top: 18px; }
  .tint-stack .tint-details .shade-note { min-height: 0; }
  .tint-stack .wraps-actions { margin-top: 22px; }
}
@media (max-width: 960px) {
  .tint-stack .shade-picker { flex-wrap: nowrap; gap: 6px; }
  .tint-stack .shade-picker button { flex: 1 1 0; min-width: 0; padding-left: 0; padding-right: 0; }
}

/* Wrap lighting switcher */
.wrap-view .cv-stage { transition: filter .45s; }
.wrap-view .light-fx { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .45s, background .45s; }
.wrap-view[data-light="sun"] .cv-stage { filter: brightness(1.06) contrast(1.1) saturate(1.08); }
.wrap-view[data-light="sun"] .light-fx { opacity: 1; mix-blend-mode: soft-light; background: radial-gradient(120% 90% at 18% 0%, rgba(255,214,150,.55), rgba(255,200,120,0) 60%), linear-gradient(180deg, rgba(255,230,190,.25), rgba(0,0,0,0)); }
.wrap-view[data-light="overcast"] .cv-stage { filter: brightness(.98) contrast(.84) saturate(.82); }
.wrap-view[data-light="overcast"] .light-fx { opacity: 1; mix-blend-mode: soft-light; background: linear-gradient(180deg, rgba(200,215,230,.55), rgba(150,160,175,.35)); }
.wrap-view[data-light="garage"] .cv-stage { filter: brightness(.9) contrast(1.05) saturate(.92); }
.wrap-view[data-light="garage"] .light-fx { opacity: 1; mix-blend-mode: soft-light; background: linear-gradient(180deg, rgba(225,240,255,.6) 0%, rgba(40,48,58,.4) 75%); }
.wrap-view[data-light="night"] .cv-stage { filter: brightness(.46) contrast(1.15) saturate(.8); }
.wrap-view[data-light="night"] .light-fx { opacity: 1; mix-blend-mode: screen; background: radial-gradient(55% 75% at 22% -10%, rgba(255,150,60,.55), rgba(255,140,50,0) 70%), radial-gradient(40% 60% at 85% -15%, rgba(255,160,70,.3), rgba(255,140,50,0) 70%), linear-gradient(180deg, rgba(20,30,60,.0), rgba(15,25,55,.25)); }
.light-row { margin-top: 4px; }
.light-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.light-picker button { font: 600 .85rem/1 var(--body); padding: 9px 14px; border-radius: 999px; cursor: pointer; background: transparent; color: var(--graphite); border: 1px solid rgba(29,33,37,.25); transition: background .2s, color .2s, border-color .2s; }
.light-picker button:hover { border-color: var(--graphite); }
.light-picker button[aria-checked="true"] { background: var(--graphite); border-color: var(--graphite); color: var(--pearl); }
.light-picker button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.light-note { margin: 8px 0 0; font-size: .88rem; color: var(--text-mid); min-height: 2.6em; }
@media (max-width: 600px) {
  .light-picker { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 2px; }
  .light-picker::-webkit-scrollbar { display: none; }
  .light-picker button { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .wrap-view .cv-stage, .wrap-view .light-fx { transition: none; } }
@media (max-width: 520px) {
  .wraps .color-picker { flex-wrap: nowrap; gap: 6px; justify-content: space-between; }
  .wraps .color-picker button, .wraps .custom-swatch { width: 38px; height: 38px; flex: none; }
}

/* Job tracker */
.tr-form { display: flex; gap: 10px; max-width: 520px; margin-top: 6px; }
.tr-form input { flex: 1; min-width: 0; font: 600 1.05rem var(--body); letter-spacing: .06em; text-transform: uppercase; padding: 0 16px; min-height: 52px; border-radius: 10px; border: 1px solid rgba(238,240,241,.3); background: rgba(255,255,255,.06); color: var(--white); }
.tr-form input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--steel); }
.tr-form input:focus { outline: 2px solid var(--red); outline-offset: 2px; }
.tr-hint { margin: 14px 0 0; color: var(--steel); font-size: .92rem; }
.tr-demo { font: 700 .92rem var(--body); color: var(--white); background: none; border: 0; padding: 0; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.tr-result, .tr-missing { scroll-margin-top: 80px; }
.tr-card { background: var(--white); border: 1px solid #DDE1E4; border-radius: 14px; padding: clamp(20px, 3vw, 32px); }
.tr-card-center { text-align: center; max-width: 620px; margin: 0 auto; }
.tr-card-center p { color: var(--text-mid); }
.tr-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.tr-top h2 { margin: 6px 0 10px; }
.tr-services { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tr-services li { font-size: .88rem; padding: 6px 12px; border-radius: 999px; background: #F1F3F5; color: var(--graphite); }
.tr-ready { text-align: right; }
.tr-ready span { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
.tr-ready strong { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin: 4px 0; }
.tr-ready em { font-style: normal; font-weight: 600; color: var(--red); }
.tr-steps { --p: 0%; list-style: none; margin: 30px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); position: relative; counter-reset: s; }
.tr-steps::before, .tr-steps::after { content: ""; position: absolute; top: 15px; left: calc(100% / 12); height: 3px; border-radius: 3px; }
.tr-steps::before { right: calc(100% / 12); background: #E1E4E7; }
.tr-steps::after { width: calc((100% - 100% / 6) * var(--f, 0)); background: var(--red); transition: width .6s; }
.tr-steps li { counter-increment: s; position: relative; z-index: 1; text-align: center; font-size: .82rem; color: var(--steel); padding: 0 4px; }
.tr-steps li::before { content: counter(s); display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 auto 8px; border-radius: 50%; background: var(--white); border: 2px solid #D5DAE0; color: var(--steel); font: 700 .85rem var(--body); }
.tr-steps li.done { color: var(--graphite); }
.tr-steps li.done::before { content: "\2713"; background: var(--red); border-color: var(--red); color: #fff; }
.tr-steps li.now { color: var(--graphite); font-weight: 700; }
.tr-steps li.now::before { border-color: var(--red); color: var(--red); box-shadow: 0 0 0 5px rgba(216,30,44,.15); animation: tr-pulse 1.8s ease-in-out infinite; }
@keyframes tr-pulse { 50% { box-shadow: 0 0 0 9px rgba(216,30,44,.06); } }
.tr-feed-wrap { margin-top: 36px; }
.tr-feed-wrap h3 { margin-bottom: 18px; }
.tr-feed { list-style: none; margin: 0; padding: 0; position: relative; }
.tr-feed::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: #DDE1E4; }
.tr-feed li { display: grid; grid-template-columns: 16px 1fr; gap: 18px; padding-bottom: 24px; position: relative; }
.tr-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--red); border: 3px solid var(--pearl); margin-top: 4px; }
.tr-feed li:not(:first-child) .tr-dot { background: #B7BEC6; }
.tr-entry { background: var(--white); border: 1px solid #DDE1E4; border-radius: 12px; padding: 16px 18px; }
.tr-entry p { margin: 0; }
.tr-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; font-size: .85rem; color: var(--steel); margin-bottom: 6px !important; }
.tr-meta span { font-weight: 700; color: var(--red); }
.tr-entry img { display: block; width: 100%; max-width: 520px; margin-top: 12px; border-radius: 10px; }
.tr-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 22px 24px; border-radius: 12px; background: var(--graphite); color: var(--pearl); }
.tr-help p { margin: 0; }
.tr-help-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tr-help .rc-reset { color: var(--white); border-color: rgba(255,255,255,.4); }
.tr-help .rc-reset:hover { border-color: #fff; }
@media (max-width: 700px) {
  .tr-form { flex-direction: column; }
  .tr-ready { text-align: left; }
  .tr-steps { grid-template-columns: 1fr; gap: 14px; margin-top: 24px; }
  .tr-steps::before, .tr-steps::after { display: none; }
  .tr-steps li { display: flex; align-items: center; gap: 12px; text-align: left; }
  .tr-steps li::before { margin: 0; flex: none; }
  .tr-help-actions { width: 100%; } .tr-help-actions .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .tr-steps li.now::before { animation: none; } }

/* Detail Dash mini game */
.dg-steps { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dg-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px; background: var(--white); border: 1px solid #DDE1E4; font-weight: 600; font-size: .9rem; color: var(--steel); transition: background .25s, color .25s, border-color .25s; }
.dg-steps li span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #E9ECEF; font-size: .76rem; color: var(--steel); }
.dg-steps li.now { border-color: var(--red); color: var(--graphite); box-shadow: 0 0 0 2px var(--red); }
.dg-steps li.now span { background: var(--red); color: #fff; }
.dg-steps li.done { color: var(--graphite); }
.dg-steps li.done span { background: var(--graphite); color: #fff; }
.dg-stage .dg-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dg-stage .dg-paint, .dg-stage .dg-shine, .dg-stage .dg-dirt { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.dg-stage .dg-fx { pointer-events: auto; touch-action: none; cursor: none; }
.dg-stage:not(.is-playing) .dg-fx { cursor: default; }
.dg-stage[data-tool="5"] .dg-fx { cursor: pointer; }
.dg-stage.dg-flash::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 50%, rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events: none; animation: dg-flash .6s ease-out forwards; }
@keyframes dg-flash { to { opacity: 0; } }
.dg-panel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 20px; background: rgba(29,33,37,.72); color: #fff; backdrop-filter: blur(2px); z-index: 2; }
.dg-panel p { margin: 0; max-width: 34em; color: var(--alloy); }
.dg-panel .dg-panel-title { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.1rem, 2.6vw, 1.8rem); color: #fff; }
.dg-panel .btn { margin-top: 10px; }
.dg-stars { font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: .15em; color: #F5C518 !important; }
.dg-end-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.dg-end-actions .rc-reset { color: #fff; border-color: rgba(255,255,255,.5); }
.dg-hud { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(120px, 1fr) auto; align-items: center; gap: 18px; max-width: 1000px; margin: 16px auto 0; }
.dg-tool strong { display: block; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.05rem; color: var(--red); }
.dg-tool span { font-size: .92rem; color: var(--text-mid); }
.dg-meter { height: 10px; border-radius: 99px; background: #E1E4E7; overflow: hidden; }
.dg-meter span { display: block; height: 100%; width: 0; background: var(--red); border-radius: 99px; transition: width .15s; }
.dg-clock { text-align: right; }
.dg-clock strong { display: block; font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1; }
.dg-clock span { font-size: .82rem; color: var(--steel); }
@media (max-width: 700px) {
  .dg-steps { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)) 14px; padding: 2px var(--gutter); }
  .dg-steps::-webkit-scrollbar { display: none; }
  .dg-steps li { flex: none; }
  .dg-hud { grid-template-columns: 1fr auto; }
  .dg-meter { grid-column: 1 / -1; grid-row: 2; }
  .dg-panel { padding: 12px; gap: 4px; }
  .dg-panel p:not(.dg-panel-title):not(.dg-stars) { font-size: .82rem; }
  .dg-panel .btn { margin-top: 4px; padding: 10px 16px; min-height: 0; }
}
/* Detailing: tighter gap between the booking calendar and the game */
.dp-booking { padding-bottom: clamp(28px, 4vw, 44px); }
.dp-booking + .dg { padding-top: clamp(28px, 4vw, 44px); }
.dg .wp-head { margin-bottom: clamp(20px, 3vw, 32px); }

/* Detail Dash: dark "arcade" panel so it stands apart from the booking and compare sections */
.dg { position: relative; overflow: hidden; background: var(--graphite); color: var(--pearl); }
.dp-booking + .dg { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.dg::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.641' height='60' viewBox='0 0 34.641 60'%3E%3Cpath d='M17.32 -20.00 L34.64 -10.00 L34.64 10.00 L17.32 20.00 L0.00 10.00 L0.00 -10.00 Z M17.32 40.00 L34.64 50.00 L34.64 70.00 L17.32 80.00 L0.00 70.00 L0.00 50.00 Z M0.00 10.00 L17.32 20.00 L17.32 40.00 L0.00 50.00 L-17.32 40.00 L-17.32 20.00 Z M34.64 10.00 L51.96 20.00 L51.96 40.00 L34.64 50.00 L17.32 40.00 L17.32 20.00 Z' fill='none' stroke='%23d81e2c' stroke-width='1.2'/%3E%3C/svg%3E"); background-size: 31.18px 54px; opacity: .16;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 10%, transparent 75%); }
.dg .wrap { position: relative; }
.dg .wp-head h2 { color: var(--white); }
.dg .wp-head p { color: var(--alloy); }
.dg .wp-head .pp-tag { color: var(--red); }
.dg .dg-steps li { background: var(--gunmetal); border-color: rgba(255,255,255,.08); color: var(--steel); }
.dg .dg-steps li span { background: rgba(255,255,255,.08); color: var(--alloy); }
.dg .dg-steps li.now { color: var(--white); border-color: var(--red); }
.dg .dg-steps li.done { color: var(--pearl); }
.dg .dg-steps li.done span { background: var(--pearl); color: var(--graphite); }
.dg .dg-stage { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 24px 60px -24px rgba(0,0,0,.8); }
.dg .dg-tool span { color: var(--alloy); }
.dg .dg-meter { background: rgba(255,255,255,.1); }
.dg .dg-clock strong { color: var(--white); }
.dg .dg-clock span { color: var(--steel); }

/* Homepage teaser for the Detail Dash game */
.dd-teaser { padding: 0 0 clamp(48px, 6vw, 80px); }
.dd-teaser-inner { position: relative; overflow: hidden; display: flex; align-items: center; gap: 22px; padding-top: 22px; padding-bottom: 22px; border-radius: 14px; background: var(--graphite); color: var(--pearl); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.dd-teaser-inner::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.641' height='60' viewBox='0 0 34.641 60'%3E%3Cpath d='M17.32 -20.00 L34.64 -10.00 L34.64 10.00 L17.32 20.00 L0.00 10.00 L0.00 -10.00 Z M17.32 40.00 L34.64 50.00 L34.64 70.00 L17.32 80.00 L0.00 70.00 L0.00 50.00 Z M0.00 10.00 L17.32 20.00 L17.32 40.00 L0.00 50.00 L-17.32 40.00 L-17.32 20.00 Z M34.64 10.00 L51.96 20.00 L51.96 40.00 L34.64 50.00 L17.32 40.00 L17.32 20.00 Z' fill='none' stroke='%23d81e2c' stroke-width='1.2'/%3E%3C/svg%3E"); background-size: 31.18px 54px; opacity: .18; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 100%); mask-image: linear-gradient(90deg, transparent 40%, #000 100%); }
.dd-teaser-inner:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -22px rgba(0,0,0,.7); }
.dd-teaser-inner > * { position: relative; }
.dd-teaser-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--red); color: #fff; }
.dd-teaser-icon svg { width: 34px; height: 34px; }
.dd-teaser-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dd-teaser-tag { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.dd-teaser-text strong { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.05rem, 2vw, 1.4rem); color: #fff; }
.dd-teaser-text span:last-child { color: var(--alloy); font-size: .95rem; }
.dd-teaser-cta { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; border: 2px solid var(--red); color: #fff; font-weight: 700; transition: background .2s; }
.dd-teaser-inner:hover .dd-teaser-cta { background: var(--red); }
.dd-teaser-inner:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
@media (max-width: 700px) {
  .dd-teaser-inner { flex-wrap: wrap; gap: 14px; padding: 20px; margin: 0 var(--gutter); }
  .dd-teaser-icon { width: 48px; height: 48px; } .dd-teaser-icon svg { width: 28px; height: 28px; }
  .dd-teaser-text { flex-basis: calc(100% - 62px); }
  .dd-teaser-cta { width: 100%; justify-content: center; }
}

/* Quick-answers chat helper */
.qa { position: fixed; right: 18px; bottom: 18px; z-index: 60; font-family: var(--body); }
.qa-launch { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 14px; border: 0; border-radius: 999px; background: var(--red); color: #fff; font: 700 .95rem var(--body); cursor: pointer; box-shadow: 0 12px 28px -10px rgba(0,0,0,.55); transition: transform .2s, background .2s; }
.qa-launch:hover { background: var(--red-deep); transform: translateY(-2px); }
.qa-launch svg { width: 22px; height: 22px; }
.qa.is-open .qa-launch { display: none; }
.qa-panel { position: absolute; right: 0; bottom: 0; width: min(380px, calc(100vw - 24px)); height: min(560px, calc(100vh - 110px)); display: flex; flex-direction: column; background: var(--white); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px -18px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.06); }
.qa-panel[hidden] { display: none !important; }
.qa-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: var(--graphite); color: #fff; }
.qa-head strong { display: block; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: .95rem; letter-spacing: .02em; }
.qa-head span { font-size: .82rem; color: var(--alloy); }
.qa-close { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.qa-close:hover { background: rgba(255,255,255,.2); }
.qa-log { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; background: #F3F5F7; }
.qa-msg { max-width: 86%; padding: 10px 14px; border-radius: 14px; font-size: .94rem; line-height: 1.45; }
.qa-bot { align-self: flex-start; background: var(--white); color: var(--graphite); border: 1px solid #E1E4E7; border-bottom-left-radius: 4px; }
.qa-me { align-self: flex-end; background: var(--graphite); color: #fff; border-bottom-right-radius: 4px; }
.qa-bot a { color: var(--red); font-weight: 600; }
.qa-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.qa-links a { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--red); color: var(--red); font-size: .85rem; font-weight: 700; text-decoration: none; }
.qa-links a:hover { background: var(--red); color: #fff; }
.qa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qa-chips button { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(29,33,37,.2); background: var(--white); color: var(--graphite); font: 600 .84rem var(--body); cursor: pointer; }
.qa-chips button:hover { border-color: var(--graphite); }
.qa-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #E1E4E7; background: var(--white); }
.qa-form input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 999px; border: 1px solid #D5DAE0; font: 400 16px var(--body); }
.qa-form input:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.qa-form button { flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--red); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.qa-form button svg { width: 18px; height: 18px; }
body:has(.dp-bar.is-on) .qa { bottom: 92px; }
@media (max-width: 600px) {
  .qa { right: 12px; bottom: 12px; }
  .qa-launch span { display: none; }
  .qa-launch { padding: 14px; }
  .qa.is-open { left: 0; right: 0; bottom: 0; }
  .qa-panel { position: fixed; inset: auto 0 0 0; width: 100%; height: 85vh; border-radius: 16px 16px 0 0; }
}
@media print { .qa { display: none; } }

/* ---------- Intake forms in the estimate section ---------- */
.cta-form .cta-form-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.cta-form-intro { position: sticky; top: 100px; }
.cta-form-intro .hero-actions { margin-top: 14px; }
.cta-form .cta-form-alt { margin-top: 28px; font-weight: 600; }
.intake { background: var(--white); color: var(--graphite); border-radius: 8px; padding: clamp(20px, 3vw, 36px); box-shadow: 0 24px 60px rgba(29,33,37,.25); display: grid; gap: 18px; }
.intake .if { display: grid; gap: 6px; min-width: 0; border: 0; margin: 0; padding: 0; }
.intake .if-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.intake label, .intake legend { font-weight: 600; font-size: .95rem; padding: 0; }
.intake .if-req { color: var(--red); }
.intake .if-opt { color: var(--steel); font-weight: 400; font-size: .85rem; margin-left: 4px; }
.intake .if-hint { margin: 0 0 4px; font-size: .88rem; color: var(--text-mid); max-width: none; }
.intake input[type=text], .intake input[type=tel], .intake input[type=email], .intake input[type=date], .intake select, .intake textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--graphite); background: var(--pearl); border: 1.5px solid var(--alloy); border-radius: var(--radius); padding: 11px 12px; }
.intake textarea { resize: vertical; min-height: 92px; }
.intake input:focus, .intake select:focus, .intake textarea:focus { outline: none; border-color: var(--graphite); background: #fff; box-shadow: 0 0 0 3px rgba(29,33,37,.12); }
.intake .if.is-bad input, .intake .if.is-bad textarea { border-color: var(--red); background: #fff5f5; }
.intake fieldset.is-bad legend, .intake .if.is-bad > label { color: var(--red); }
.intake .if-sub { margin: 6px 0 2px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); font-weight: 600; max-width: none; }
.intake .if-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.intake .if-chip { position: relative; font-weight: 500; cursor: pointer; }
.intake .if-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.intake .if-chip span { display: inline-block; padding: 8px 14px; border: 1.5px solid var(--alloy); border-radius: 999px; background: var(--pearl); font-size: .92rem; line-height: 1.2; transition: background .15s, border-color .15s, color .15s; }
.intake .if-chip:hover span { border-color: var(--steel); }
.intake .if-chip input:checked + span { background: var(--graphite); border-color: var(--graphite); color: var(--white); }
.intake .if-chip input:focus-visible + span { outline: 3px solid rgba(215,25,42,.45); outline-offset: 2px; }
.intake fieldset.is-bad .if-chip span { border-color: var(--red); }
.intake .if-drop { position: relative; display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--steel); border-radius: var(--radius); padding: 16px; background: var(--pearl); cursor: pointer; font-weight: 600; }
.intake .if-drop:hover { border-color: var(--graphite); }
.intake .if-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.intake .if-drop span::before { content: "+"; margin-right: 8px; color: var(--red); font-size: 1.2em; }
.intake .if-thumbs { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.intake .if-thumbs:empty { display: none; }
.intake .if-thumbs li { position: relative; width: 72px; height: 72px; }
.intake .if-thumbs img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.intake .if-thumbs button { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--graphite); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.intake .if-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.intake .if-submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.intake .if-submit .btn { min-width: 190px; }
.intake .if-submit .btn:disabled { opacity: .7; cursor: progress; }
.intake .if-note { margin: 0; font-size: .85rem; color: var(--text-mid); max-width: 26em; }
.intake .if-status { margin: 0; font-size: .95rem; max-width: none; }
.intake .if-status:empty { display: none; }
.intake .if-status.is-error { color: var(--red-deep); font-weight: 600; }
.intake .if-status a { color: inherit; }
.intake .if-done { text-align: center; padding: 28px 8px; }
.intake .if-done-mark { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--red); color: #fff; font-size: 28px; }
.intake .if-done h3 { margin: 16px 0 8px; font-size: 1.4rem; outline: none; }
.intake .if-done p { margin: 0 auto; max-width: 26em; color: var(--text-mid); }
@media (max-width: 860px) {
  .cta-form .cta-form-grid { grid-template-columns: 1fr; }
  .cta-form-intro { position: static; }
}
@media (max-width: 520px) { .intake .if-row { grid-template-columns: 1fr; } }
.dp-book-hint { margin: 8px 0 0; font-size: .85rem; color: var(--alloy); text-align: center; }

/* ---------- Detailing: one-step booking ---------- */
.bk { max-width: 860px; margin: 0 auto; }
.bk-panel, .bk-done { background: var(--white); border: 1px solid #DDE1E4; border-radius: 12px; padding: clamp(18px, 3vw, 32px); }
.bk-h { font-family: var(--body); font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 12px; }
.bk-h:not(:first-child) { margin-top: 24px; }
.bk-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.bk-day { flex: 0 0 auto; scroll-snap-align: start; min-width: 86px; display: grid; gap: 2px; justify-items: center; padding: 10px 12px; border: 1.5px solid var(--alloy); border-radius: 10px; background: var(--pearl); font: inherit; color: var(--graphite); cursor: pointer; }
.bk-day span { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-mid); }
.bk-day strong { font-size: 1.02rem; }
.bk-day em { font-style: normal; font-size: .75rem; color: var(--steel); }
.bk-day:hover, .bk-time:hover { border-color: var(--steel); }
.bk-day.is-on, .bk-time.is-on { background: var(--graphite); border-color: var(--graphite); color: var(--white); }
.bk-day.is-on span, .bk-day.is-on em { color: var(--alloy); }
.bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.bk-time { padding: 10px 8px; border: 1.5px solid var(--alloy); border-radius: 8px; background: var(--pearl); font: inherit; font-weight: 600; color: var(--graphite); cursor: pointer; }
.bk-day:focus-visible, .bk-time:focus-visible { outline: 3px solid rgba(215,25,42,.45); outline-offset: 2px; }
.bk-empty { margin: 0; color: var(--text-mid); }
.bk-form.intake { box-shadow: none; padding: 0; margin-top: 28px; border-top: 1px solid #E3E6E8; padding-top: 24px; border-radius: 0; background: transparent; }
.bk-form .if-note { font-weight: 600; color: var(--graphite); font-size: .95rem; }
.bk-done { text-align: center; padding: 36px 20px; }
.bk-done .if-done-mark { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--red); color: #fff; font-size: 28px; }
.bk-done h3 { margin: 14px 0 6px; font-size: 1.5rem; }
.bk-done p { margin: 6px auto 0; max-width: 34em; color: var(--text-mid); }
.bk-done .bk-done-when { font-size: 1.2rem; font-weight: 700; color: var(--graphite); }
.bk-done .bk-done-fine { font-size: .9rem; margin-top: 14px; }
.bk-done:focus { outline: none; }
.bk-form .if-status .bk-err { display: block; margin-top: 6px; font-size: .8rem; font-weight: 400; color: var(--text-mid); }
@media (max-width: 960px) { .tv-more > .btn { display: flex; width: fit-content; margin-left: auto; margin-right: auto; } }
/* tint booking: package picker */
.bk-pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.bk-pkg { position: relative; cursor: pointer; }
.bk-pkg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bk-pkg span { display: grid; gap: 2px; height: 100%; padding: 12px 14px; border: 1.5px solid var(--alloy); border-radius: 10px; background: var(--pearl); }
.bk-pkg strong { font-size: .98rem; }
.bk-pkg em { font-style: normal; font-size: .88rem; color: var(--text-mid); }
.bk-pkg:hover span { border-color: var(--steel); }
.bk-pkg input:checked + span { background: var(--graphite); border-color: var(--graphite); color: var(--white); }
.bk-pkg input:checked + span em { color: var(--alloy); }
.bk-pkg input:focus-visible + span { outline: 3px solid rgba(215,25,42,.45); outline-offset: 2px; }
/* Detail Dash on phones: steps on two rows, compact start/end screens that fit the short stage */
@media (max-width: 700px) {
  .dg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; overflow: visible; margin: 0 0 14px; padding: 0; }
  .dg-steps li { justify-content: flex-start; gap: 6px; padding: 5px 10px 5px 5px; font-size: .82rem; min-width: 0; }
  .dg-steps li span { width: 20px; height: 20px; flex: none; font-size: .7rem; }
  .dg-panel { padding: 8px 12px; gap: 2px; }
  .dg-panel .dg-panel-title { font-size: 1rem; line-height: 1.1; }
  .dg-stars { font-size: 1.05rem; line-height: 1; letter-spacing: .1em; }
  .dg-panel p:not(.dg-panel-title):not(.dg-stars) { font-size: .74rem; line-height: 1.3; max-width: 30em; }
  .dg-end-actions { gap: 8px; flex-wrap: nowrap; margin-top: 4px; }
  .dg-panel .btn { margin-top: 0; padding: 7px 14px; font-size: .82rem; min-height: 0; line-height: 1.2; }
}
@media (max-width: 380px) { .dg-panel p:not(.dg-panel-title):not(.dg-stars) { display: none; } }