/*
Theme Name: JaachPadtal
Theme URI: https://www.jaachpadtal.in
Author: JaachPadtal
Description: The JaachPadtal website theme: an independent car pre-delivery inspection (PDI) service. Design, layout and front-end interactions only. Booking data, customer tracking, emails, reports and the booking admin live in the companion plugin "JaachPadtal Core", so your business data stays safe if the theme is ever changed.
Version: 4.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jaachpadtal
*/

/* ---------- Tokens ---------- */
:root {
  --ink: #2b2b2b;
  --ink-2: #1d1e1f;
  --text: #34383c;
  --muted: #666c73;
  --line: #e1e4e8;
  --paper: #ffffff;
  --mist: #f3f4f6;
  --red: #a80404;
  --red-hot: #d01414;
  --red-dark: #7d0303;
  --ok: #1d7a4c;
  --f-head: "Poppins", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radius: 12px;
  --wrap: 1200px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* The page edges (top and bottom) match the top bar and footer, so no white strip can ever show. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--ink); }
body { margin: 0; font-family: var(--f-body); font-size: 1rem; line-height: 1.6; color: var(--text); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-head); color: var(--ink); margin: 0; text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.08; letter-spacing: -0.025em; }
h2 { font-weight: 700; font-size: clamp(1.65rem, 3vw, 2.4rem); line-height: 1.15; letter-spacing: -0.02em; }
h3 { font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: 8px; }
.sprite { display: none; }

/* page progress bar */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; pointer-events: none; }
.progress span { display: block; height: 100%; width: 0; background: var(--red-hot); transition: width .1s linear; }
.admin-bar .progress { top: 32px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border: 2px solid transparent; border-radius: var(--radius);
  font: 700 1rem/1 var(--f-body); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.btn--sm { height: 40px; padding: 0 18px; font-size: .9375rem; }
.btn--lg { height: 56px; padding: 0 30px; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn--red { background: var(--red); color: #fff; box-shadow: 0 10px 24px -12px rgba(173,1,11,.9); }
.btn--red:hover { background: var(--red-dark); transform: translateY(-1px); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--white { background: #fff; color: var(--red); }
.btn--white:hover { background: #ffe9ea; }
.btn--outline { border-color: rgba(255,255,255,.75); color: #fff; }
.btn--outline:hover { background: rgba(255,255,255,.12); }
.btn--line { border-color: var(--line); color: var(--ink); background: #fff; }
.btn--line:hover { border-color: var(--ink); }
.btn[disabled] { opacity: .7; cursor: progress; }

/* ---------- Top bar + header ---------- */
.topbar { background: var(--ink); color: #d4d8dd; font-size: .8125rem; }
.topbar__in { display: flex; justify-content: space-between; gap: 16px; padding-top: 8px; padding-bottom: 8px; }
.topbar__contact { display: flex; gap: 18px; white-space: nowrap; }
.topbar__cities { min-width: 0; }
.topbar a { color: #fff; font-weight: 600; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }

.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); transition: box-shadow .2s; }
.site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(0,0,0,.45); }
.admin-bar .site-header { top: 32px; }
.site-header__in { display: flex; align-items: center; gap: 28px; height: 76px; }
.brand { display: flex; flex-shrink: 0; }
.brand img { height: 44px; width: auto; display: block; }
.nav { display: flex; gap: 24px; margin-left: auto; }
.nav a { font-weight: 600; font-size: .9375rem; color: var(--ink); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover { border-bottom-color: var(--red); }
.site-header__cta { display: flex; align-items: center; gap: 18px; }
.header-call { display: none; font-weight: 700; color: var(--ink); text-decoration: none; font-size: .9375rem; white-space: nowrap; }
.header-call:hover { color: var(--red); }

.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; padding: 0; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.nav-toggle span { display: block; width: 22px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Hero (the garage bay) ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ink-2); color: #fff; padding: 64px 0 72px; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(60% 75% at 30% 48%, #46484b 0%, #2a2b2d 46%, #1b1c1d 100%); }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(65% 80% at 30% 55%, #000 0%, transparent 100%);
  mask-image: radial-gradient(65% 80% at 30% 55%, #000 0%, transparent 100%);
}
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .95fr);
  grid-template-areas: "copy book" "scene book"; grid-template-rows: auto 1fr;
  column-gap: 56px; row-gap: 28px; align-items: start;
}
.hero__copy { grid-area: copy; }
.hero h1 { color: #fff; }
.hero .lead { margin-top: 20px; max-width: 34rem; font-size: 1.1875rem; line-height: 1.55; color: #d9dce0; }
.ticks { list-style: none; display: grid; gap: 10px; margin-top: 24px; }
.ticks li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: #fff; }
.ticks--dark li { color: var(--ink); }
.ticks svg { flex-shrink: 0; }

/* inspection scene: the car is scanned again and again, each pass checks different points */
.scene { grid-area: scene; align-self: end; position: relative; width: 100%; aspect-ratio: 640 / 330; }
.scene svg { display: block; width: 100%; height: 100%; overflow: visible; }
.scene__pills { position: absolute; inset: 0; pointer-events: none; }
.pill {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, 8px);
  display: inline-flex; align-items: center; gap: 7px; max-width: 34%;
  background: rgba(22,23,24,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-weight: 700; font-size: .8125rem; line-height: 1; white-space: nowrap;
  padding: 8px 12px 8px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  opacity: 0; transition: opacity .4s ease, transform .4s ease;
}
.pill > span { overflow: hidden; text-overflow: ellipsis; }
.pill.on { opacity: 1; transform: translate(-50%, 0); }
.pill__st { flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; animation: spin .7s linear infinite; }
.pill.ok .pill__st { animation: none; border: 0; background: #22c55e; position: relative; }
.pill.ok .pill__st::after { content: ""; position: absolute; left: 4.5px; top: 2px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes spin { to { transform: rotate(360deg); } }

.mk { opacity: 0; transition: opacity .4s ease; }
.mk.on { opacity: 1; }
.dot { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2); transition: opacity .3s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.dot.on { opacity: 1; transform: scale(1); }
.ring { opacity: 0; transform-box: fill-box; transform-origin: center; }
.ring.on { animation: ping 1.1s ease-out 1; }
@keyframes ping { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
.scene.is-out .pill, .scene.is-out .mk, .scene.is-out .dot { opacity: 0; transition: opacity .5s ease; transition-delay: 0s !important; }
.scene.is-static .pill, .scene.is-static .mk, .scene.is-static .dot { transition: none; }

/* ---------- Booking card ---------- */
.booking { grid-area: book; background: #fff; color: var(--text); border-radius: 22px; padding: 30px; border-top: 5px solid var(--red); box-shadow: 0 40px 80px -30px rgba(0,0,0,.75); }
.booking h2 { font-size: 1.625rem; }
.booking__sub { margin-top: 6px; color: var(--muted); }
.booking__form { margin-top: 20px; display: grid; gap: 15px; }
.row--2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field label { font-size: .875rem; font-weight: 600; color: var(--ink); }
.field input, .field select {
  width: 100%; min-width: 0; height: 50px; padding: 0 14px; border-radius: 10px; border: 1.5px solid #dadee3;
  background: #f6f7f9; color: var(--ink); font: 500 1rem var(--f-body); color-scheme: light; -webkit-appearance: none; appearance: none;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.field select {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23ad010b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.field input::placeholder { color: #8b9299; }
.field input:focus, .field select:focus { outline: none; border-color: var(--red); background: #fff; box-shadow: 0 0 0 4px rgba(173,1,11,.14); }
.field.has-err input, .field.has-err select { border-color: #d92d3a; background: #fff6f6; }
.err { font-size: .8125rem; color: #c0121f; font-weight: 600; }
.err:empty { display: none; }
.err--agree { margin-top: -6px; }
.prefixed { display: flex; align-items: stretch; }
.prefixed span { display: grid; place-items: center; padding: 0 11px; background: #eceef1; border: 1.5px solid #dadee3; border-right: 0; border-radius: 10px 0 0 10px; font-weight: 700; color: var(--ink); font-size: .9375rem; }
.prefixed input { border-radius: 0 10px 10px 0; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips:empty { display: none; }
.chip { border: 1.5px solid #dadee3; background: #fff; color: var(--ink); border-radius: 999px; padding: 7px 13px; font: 700 .8125rem var(--f-body); cursor: pointer; transition: all .15s; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { border-color: var(--red); background: #fdeaeb; color: var(--red); }

.citybadge { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding: 10px 12px; border-radius: 14px; background: #f3f4f6; animation: badgein .35s ease-out both; }
.citybadge[data-ok="1"] { background: #e8f5ee; }
.citybadge[data-ok="0"] { background: #fff4e0; }
.citybadge__icon { display: grid; place-items: center; width: 68px; height: 52px; flex-shrink: 0; border-radius: 10px; background: #fff; color: var(--ink); }
.citybadge__icon svg { width: 56px; height: 42px; }
.citybadge__text { display: grid; line-height: 1.35; font-size: .875rem; color: var(--muted); }
.citybadge__text strong { color: var(--ink); font-size: 1rem; }
@keyframes badgein { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

.agree { display: flex; gap: 10px; align-items: flex-start; font-size: .8125rem; line-height: 1.45; color: var(--muted); cursor: pointer; }
.agree input { flex-shrink: 0; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--red); cursor: pointer; }
.agree a { color: var(--red); font-weight: 600; }
.fine { font-size: .8125rem; line-height: 1.5; color: var(--muted); text-align: center; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { display: none; background: #fdecee; border: 1px solid #f3a9af; color: #9d111c; padding: 10px 14px; border-radius: 10px; font-size: .9rem; font-weight: 600; }
.booking[data-state="error"] .form-msg { display: block; }

.booking__done { display: none; }
.booking__done h2 { margin-top: 18px; }
.booking__done p { margin-top: 10px; color: var(--muted); }
.booking__done .done-alt a { color: var(--red); font-weight: 700; }
.booking[data-state="ok"] .booking__form-wrap { display: none; }
.booking[data-state="ok"] .booking__done { display: block; }

/* city dialog */
.citydialog { border: 0; border-radius: 22px; padding: 30px 28px 26px; width: calc(100% - 32px); max-width: 440px; text-align: center; color: var(--text); box-shadow: 0 40px 90px -20px rgba(0,0,0,.6); }
.citydialog::backdrop { background: rgba(20,21,22,.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.citydialog[open] { animation: dlg .3s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes dlg { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.citydialog__icon { display: grid; place-items: center; width: 108px; height: 80px; margin: 0 auto 14px; border-radius: 18px; background: var(--mist); color: var(--ink); }
.citydialog__icon svg { width: 80px; height: 60px; }
.citydialog h2 { font-size: 1.4rem; }
.citydialog p { margin-top: 10px; }
.citydialog__call a { color: var(--red); font-weight: 700; }
.citydialog__btns { display: grid; gap: 10px; margin-top: 22px; }

/* road divider (from the logo) */
.road { height: 16px; background: var(--ink); position: relative; }
.road::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); background: repeating-linear-gradient(90deg, #fff 0 44px, transparent 44px 80px); }

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section--mist { background: var(--mist); }
.section--dark { background: var(--ink); color: #d6d9dd; }
.section--dark h2 { color: #fff; }
.sec-head { max-width: 40rem; }
.sec-head p { margin-top: 12px; font-size: 1.0625rem; color: var(--muted); }
.sec-head--light p { color: #b9bfc6; }

/* steps with a car that drives along the road */
.steps-wrap { position: relative; margin-top: 52px; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.steps--4 { grid-template-columns: repeat(4, 1fr); gap: 28px; }
.steps--4 .step:not(:last-child)::before { right: -20px; }
.step { position: relative; }
.step:not(:last-child)::before { content: ""; position: absolute; top: 29px; left: 72px; right: -32px; border-top: 3px dashed #c3c7cd; }
.steps__car { position: absolute; z-index: 2; top: 1px; left: 72px; opacity: 0; pointer-events: none; }
.steps__car svg { display: block; }
.steps-wrap.in-view .steps__car { animation: drive 2.8s cubic-bezier(.45, 0, .25, 1) .2s both; }
@keyframes drive { 0% { left: 72px; opacity: 0; } 8% { opacity: 1; } 100% { left: calc(75% - 40px); opacity: 1; } }
.wheel { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--red); position: relative; }
.wheel span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; font: 800 1.125rem var(--f-head); color: var(--ink); }
.step h3 { margin-top: 22px; font-size: 1.1875rem; }
.step p { margin-top: 8px; color: var(--muted); max-width: 22rem; }

/* before and after slider */
.ba { position: relative; margin-top: 44px; aspect-ratio: 800 / 420; border-radius: 24px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); --pos: 50%; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.ba__layer { position: absolute; inset: 0; }
.ba__layer svg { width: 100%; height: 100%; display: block; }
.ba__layer--after { clip-path: inset(0 0 0 var(--pos)); }
.ba__tag { position: absolute; top: 16px; padding: 8px 14px; border-radius: 999px; font: 700 .8125rem var(--f-head); color: #fff; z-index: 3; }
.ba__tag--before { left: 16px; background: rgba(38,39,39,.82); }
.ba__tag--after { right: 16px; background: rgba(22,163,74,.92); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; z-index: 4; pointer-events: none; }
.ba__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -2px; width: 4px; background: #fff; box-shadow: 0 0 14px rgba(0,0,0,.4); }
.ba__handle span { position: absolute; top: 50%; left: 0; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.ba__handle span::before, .ba__handle span::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; border: solid var(--red); border-width: 0 0 3px 3px; margin-top: -4.5px; }
.ba__handle span::before { left: 15px; transform: rotate(45deg); }
.ba__handle span::after { right: 15px; transform: rotate(-135deg); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.ba:focus-within .ba__handle span { outline: 3px solid var(--red-hot); outline-offset: 3px; }
.ba__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.ba__col { border-radius: 18px; padding: 22px 24px; }
.ba__col--before { background: rgba(255,255,255,.06); }
.ba__col--after { background: rgba(34,197,94,.12); box-shadow: inset 0 0 0 1px rgba(34,197,94,.35); }
.ba__col h3 { color: #fff; margin-bottom: 12px; }
.ba__col ul { list-style: none; display: grid; gap: 8px; }
.ba__col li { position: relative; padding-left: 28px; color: #d6d9dd; }
.ba__col li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; }
.ba__col--before li::before { background: #e11d2e; box-shadow: inset 0 0 0 4px #e11d2e, inset 0 0 0 20px #e11d2e; }
.ba__col--before li::after { content: "!"; position: absolute; left: 5.5px; top: 2px; font: 800 .7rem/1 var(--f-head); color: #fff; }
.ba__col--after li::before { background: #16a34a; }
.ba__col--after li::after { content: ""; position: absolute; left: 5px; top: 7px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(.9); transform-origin: center; margin-top: -2px; }
.ba__cta { margin-top: 32px; text-align: center; }

/* interactive checklist */
.checklist { list-style: none; display: grid; gap: 4px; margin-top: 20px; }
.checklist li { position: relative; padding: 11px 0 11px 38px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 500; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 11px; width: 22px; height: 22px; border-radius: 50%; background: var(--red); }
.checklist li::after { content: ""; position: absolute; left: 7.5px; top: 15.5px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(.8); transform-origin: 50% 50%; margin-top: -3px; }
@keyframes tickin { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* sample report */
.ticks--dark { margin: 24px 0 30px; }


/* cities */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 44px; }
.tile { display: grid; gap: 6px; align-content: start; text-align: left; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: #fff; font: inherit; color: var(--text); cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s; }
button.tile:hover { transform: translateY(-4px); border-color: var(--red); box-shadow: 0 28px 44px -30px rgba(173,1,11,.7); }
.tile__icon { display: grid; place-items: center; width: 112px; height: 84px; margin-bottom: 8px; border-radius: 18px; background: var(--mist); color: var(--ink); }
.tile__icon svg { width: 90px; height: 68px; }
.tile strong { font: 700 1.25rem var(--f-head); color: var(--ink); }
.tile__note { color: var(--muted); font-size: .9375rem; }
.tile em { margin-top: 10px; font-style: normal; font-weight: 700; color: var(--red); }
.tile--soon { cursor: default; border-style: dashed; background: transparent; }

.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 40px; }
.quote { margin: 0; background: var(--mist); border-left: 4px solid var(--red); border-radius: 0 var(--radius) var(--radius) 0; padding: 26px 28px; }
.quote p { font-size: 1.0625rem; color: var(--ink); }
.quote footer { margin-top: 16px; font-size: .9rem; color: var(--muted); }
.quote footer strong { color: var(--ink); margin-right: 8px; }

.faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__item summary { list-style: none; cursor: pointer; position: relative; padding: 20px 44px 20px 0; font: 600 1.0625rem/1.4 var(--f-head); color: var(--ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 2.5px solid var(--red); border-bottom: 2.5px solid var(--red); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__item p { padding: 0 44px 22px 0; color: var(--muted); max-width: 38rem; }

/* contact + map */
.contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: stretch; }
.contact__info p { margin-top: 12px; font-size: 1.0625rem; color: var(--muted); }
.contact__list { list-style: none; display: grid; gap: 18px; margin-top: 28px; }
.contact__list li { display: flex; gap: 16px; align-items: flex-start; }
.ci { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; background: #fff; color: var(--red); box-shadow: 0 0 0 1px var(--line); }
.contact__list strong { display: block; color: var(--ink); font-size: .9375rem; }
.contact__list a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid rgba(173,1,11,.35); }
.contact__list a:hover { border-bottom-color: var(--red); }
.contact__list .sep { color: var(--muted); font-size: .875rem; }
.contact__map { position: relative; min-height: 360px; border-radius: 22px; overflow: hidden; background: #e4e7eb; box-shadow: 0 24px 48px -30px rgba(38,39,39,.5); }
.contact__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.cta { background: var(--red); color: #fff; padding: 64px 0; }
.cta__in { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.cta h2 { color: #fff; }
.cta p { margin-top: 8px; color: #ffd6d9; font-size: 1.0625rem; }
.cta__btns { display: flex; gap: 14px; flex-wrap: wrap; }
.cta :focus-visible { outline-color: #fff; }

/* ---------- Footer (dark, with the light logo: no white box) ---------- */
.site-footer { background: var(--ink); color: #b9bfc5; font-size: .9375rem; border-top: 4px solid var(--red); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1fr; gap: 48px; padding-top: 64px; padding-bottom: 56px; }
.footer__logo { display: inline-flex; }
.footer__logo img { height: 48px; width: auto; display: block; }
.footer__brand p { margin-top: 18px; max-width: 22rem; }
.footer__social { display: flex; gap: 16px; flex-wrap: wrap; }
.site-footer h3 { color: #fff; font-size: .9375rem; margin-bottom: 14px; }
.site-footer ul { list-style: none; display: grid; gap: 8px; }
.site-footer a { color: #d9dde1; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer :focus-visible { outline-color: #fff; }
.footer__legal { border-top: 1px solid rgba(255,255,255,.12); padding: 20px 0; font-size: .8125rem; }
.footer-menu { margin-top: 8px; }

/* ---------- Floating contact ---------- */
.wa-float { position: fixed; right: 20px; bottom: 20px; width: 58px; height: 58px; border-radius: 50%; background: #25d366; display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(0,0,0,.45); z-index: 60; }
.mobile-bar { display: none; }

/* ---------- Inner pages (Terms, Privacy and so on) ---------- */
.page { padding: 64px 0 96px; }
.page__in { max-width: 760px; }
.page h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); margin-bottom: 24px; }
.prose { font-size: 1.0625rem; }
.prose h2 { margin: 40px 0 12px; font-size: 1.4rem; }
.prose h3 { margin: 28px 0 8px; }
.prose p, .prose ul, .prose ol { margin: 0 0 18px; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--red); }
.post-list article { padding: 24px 0; border-bottom: 1px solid var(--line); }
.post-list h2 { font-size: 1.5rem; }
.post-list h2 a { text-decoration: none; }

/* anchors land below the sticky header */
section[id], .booking { scroll-margin-top: 96px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .header-call { display: none; }
  .nav { gap: 18px; }
}
@media (max-width: 1100px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1240px) {
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 8px 24px 16px; box-shadow: 0 24px 30px -24px rgba(0,0,0,.4); }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav-open .nav { display: flex; }
  .nav-toggle { display: flex; }
  .site-header__in { gap: 16px; }
  .site-header__cta { margin-left: auto; }
}
@media (max-width: 960px) {
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "book" "scene"; grid-template-rows: auto; }
  .scene { align-self: start; margin-top: 8px; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .steps__car { display: none; }
  .step { padding-left: 80px; min-height: 60px; }
  .wheel { position: absolute; left: 0; top: 0; }
  .step:not(:last-child)::before { top: 66px; bottom: -22px; left: 29px; right: auto; border-top: 0; border-left: 3px dashed #c3c7cd; }
  .step h3 { margin-top: 0; padding-top: 4px; }
  .cta__in { flex-direction: column; align-items: flex-start; }
  .ba__cols { grid-template-columns: 1fr; }
}
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
  .admin-bar .progress { top: 46px; }
}
@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .hero { padding: 36px 0 44px; }
  .brand img { height: 36px; }
  .site-header__in { height: 64px; }
  .site-header__cta .btn { display: none; }
  .topbar__hours, .topbar__second { display: none; }
  .booking { padding: 24px 20px; border-radius: 18px; }
  .row--2 { grid-template-columns: 1fr; }
  .ba { border-radius: 18px; }
  .ba__tag { top: 10px; padding: 6px 10px; font-size: .6875rem; }
  .ba__handle span { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
  .ba__handle span::before { left: 11px; } .ba__handle span::after { right: 11px; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; padding-top: 48px; padding-bottom: 36px; }
  /* leave room for the sticky Call / Book bar INSIDE the dark footer, so no white strip appears below it */
  .site-footer { padding-bottom: 76px; }
  .wa-float { display: none; }
  .mobile-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); }
  .mobile-bar .btn { height: 48px; padding: 0 10px; }
  .pill { font-size: .6875rem; padding: 6px 9px 6px 7px; gap: 5px; }
  .pill__st { width: 12px; height: 12px; }
  .pill.ok .pill__st::after { left: 3.5px; top: 1.5px; width: 3.5px; height: 6px; }
  .contact__map { min-height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pill, .mk, .dot { transition: none; }
  .ring.on, .citybadge, .citydialog[open], .js .panel.is-open .checklist li, .steps-wrap.in-view .steps__car { animation: none; }
  .steps-wrap .steps__car { opacity: 0; }
}

/* =====================================================================
   JaachPadtal 3.0 additions
   ===================================================================== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav__home, .nav__track { display: none; }
.opt { font-weight: 400; color: #8b9299; }

/* ---------- booking card: states + extra fields ---------- */
.field select { font-weight: 500; }
.field--slot select, .field--city select { width: 100%; }
.booking[data-state="booked"] .booking__form-wrap, .booking[data-state="interest"] .booking__form-wrap { display: none; }
.booking[data-state="booked"] [data-done-booking], .booking[data-state="interest"] [data-done-interest] { display: block; }
.booking[data-mode="interest"] .field--dealer, .booking[data-mode="interest"] .field--when, .booking[data-mode="interest"] .chips { display: none; }
.done-kicker { font: 700 .75rem var(--f-head); letter-spacing: .14em; color: var(--red); }
.done-art { margin: 12px 0 4px; border-radius: 16px; overflow: hidden; }
.done-art svg { display: block; width: 100%; height: auto; }
.booking__done h2 { margin-top: 8px; font-size: 1.45rem; }
.done-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 18px 0 4px; }
.done-grid > div { background: var(--mist); border-radius: 12px; padding: 10px 14px; min-width: 0; }
.done-grid__id { grid-column: 1 / -1; background: var(--ink) !important; color: #fff; }
.done-grid dt { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.done-grid__id dt { color: #c3c8ce; }
.done-grid dd { margin: 2px 0 0; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.done-grid__id dd { font: 800 1.9rem/1.1 var(--f-head); letter-spacing: .04em; color: #fff; }
.done-next, .done-track { margin-top: 12px; font-size: .9375rem; }
.done-btns { display: grid; gap: 10px; margin-top: 16px; }
.interest .btn { flex-shrink: 0; }

/* ---------- header: nine navigation items ---------- */
.nav a { font-size: .875rem; }
.nav { gap: 16px; }
.site-header__in { gap: 20px; }
.site-header .wrap { max-width: 1320px; }
.site-header__cta { gap: 12px; }
.site-header__cta .btn--sm { padding: 0 14px; }
.nav__track { color: var(--red); }
.hide-sm { }

/* ---------- steps (4) ---------- */
.steps--4 .step p { max-width: 17rem; }

/* ---------- interactive "What do we check?" ---------- */
.xs__chips { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 14px; margin-top: 32px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.xs__chips::-webkit-scrollbar { display: none; }
.xchip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border: 1.5px solid #d9dde2; border-radius: 999px; background: #fff; color: var(--ink); font: 700 .9rem var(--f-body); cursor: pointer; scroll-snap-align: center; transition: background-color .2s, color .2s, border-color .2s, transform .2s; }
.xchip:hover { border-color: var(--ink); }
.xchip__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--mist); color: var(--ink); transition: all .2s; }
.xchip__icon svg { width: 20px; height: 20px; }
.xchip[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.xchip[aria-selected="true"] .xchip__icon { background: var(--red); color: #fff; }
.xs__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.xs__stage { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 800 / 460; background: #e8eaed; box-shadow: 0 30px 60px -34px rgba(43,43,43,.55), 0 0 0 1px rgba(0,0,0,.05); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.xs-svg { display: block; width: 100%; height: 100%; }
.xs__tag { position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 130px); padding: 9px 14px; border-radius: 12px; background: rgba(43,43,43,.92); color: #fff; font: 600 .8125rem/1.35 var(--f-body); z-index: 2; }
.xs__nav { position: absolute; top: 50%; margin-top: -22px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.94); color: var(--ink); box-shadow: 0 8px 20px -6px rgba(0,0,0,.4); display: grid; place-items: center; cursor: pointer; z-index: 2; }
.xs__nav--prev { left: 12px; } .xs__nav--next { right: 12px; }
.xs__nav:hover { background: #fff; color: var(--red); }
.xpanel { background: #fff; border-radius: 20px; padding: 28px 30px; box-shadow: 0 24px 48px -32px rgba(43,43,43,.35); }
.js .xpanel[hidden] { display: none; }
.xs__panels { display: grid; gap: 16px; }
.xpanel h3 { font-size: 1.4rem; font-weight: 700; }
.xpanel > p { margin-top: 8px; color: var(--muted); }
.checklist { list-style: none; display: grid; gap: 2px; margin-top: 16px; }
.checklist li { position: relative; padding: 10px 0 10px 36px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 500; font-size: .96rem; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--red); }
.checklist li::after { content: ""; position: absolute; left: 7.5px; top: 14px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(.8); margin-top: -2px; }
.js .xpanel.is-open .checklist li { animation: tickin .4s ease-out both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes tickin { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* stage internals */
.xs-svg .cam { transform-origin: 0 0; transition: transform .75s cubic-bezier(.4, 0, .2, 1); }
.xs-svg .insp { opacity: 0; transform: translateX(22px); transition: opacity .4s ease .2s, transform .5s ease .2s; }
.xs-svg .ov { opacity: 0; transition: opacity .4s ease .25s; }
.xs-svg .hot { cursor: pointer; transition: opacity .3s; }
.xs:not([data-area="exterior"]) .xs-svg .hot { opacity: 0; pointer-events: none; }
.hot-dot { fill: #d01414; stroke: #fff; stroke-width: 2.5; }
.hot-ring { fill: none; stroke: #d01414; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: hotpulse 2.2s ease-out infinite; }
@keyframes hotpulse { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(2.2); } }
.x-door, .x-hood { transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.x-door { transform-box: fill-box; transform-origin: 100% 50%; }
.x-hood { transform-box: fill-box; transform-origin: 0 0; }
.x-lift { transition: transform .7s cubic-bezier(.4, 0, .2, 1); }
.x-shadow { transition: transform .7s; transform-box: fill-box; transform-origin: center; }
.hbeam, .tailglow { opacity: 0; transition: opacity .35s; }
.xs[data-area="electrical"] .hbeam, .xs[data-area="electrical"] .tailglow { opacity: 1; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.treadring { opacity: 0; transition: opacity .4s; }
.xs[data-area="tyres"] .treadring { opacity: 1; }
.xs[data-area="tyres"] .wheel .spokes { transform-box: fill-box; transform-origin: center; animation: spinw 6s linear infinite; }
@keyframes spinw { to { transform: rotate(360deg); } }
.xs[data-area="exterior"] .perim { animation: dash 2.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -42; } }
.xs[data-area="paint"] .sweep { animation: sweepx 2.4s ease-in-out infinite alternate; }
@keyframes sweepx { from { transform: translateX(0); } to { transform: translateX(212px); } }
.xs[data-area="paint"] .gap { animation: blink 1.4s ease-in-out infinite; }
.xs[data-area="under"] .scanline { animation: dash 1.2s linear infinite; }
.xs[data-area="obd"] .pulse, .xs[data-area="engine"] .pulse { animation: blink 1s ease-in-out infinite; }
.xs[data-area="obd"] .cable { stroke-dasharray: 5 5; animation: dash 1.2s linear infinite; }
.xs[data-area="docs"] .tick { animation: tickpop .5s ease-out .5s both; }
@keyframes tickpop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
.xs[data-area="docs"] .docs { }
.xs[data-area="interior"] .screen { animation: blink 1.4s ease-in-out infinite; }

/* ---------- Why JaachPadtal ---------- */
.why { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; margin-top: 44px; }
.why__item { background: var(--mist); border-radius: 20px; padding: 24px 22px 26px; transition: transform .2s, box-shadow .2s; }
.why__item:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgba(43,43,43,.5); }
.why__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--red); color: #fff; }
.why__icon svg { width: 28px; height: 28px; }
.why__item h3 { margin-top: 16px; font-size: 1.05rem; }
.why__item p { margin-top: 6px; font-size: .94rem; color: var(--muted); }

/* ---------- inspector visuals ---------- */
.vcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 44px; }
.vcard { margin: 0; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 40px -30px rgba(43,43,43,.5); }
.vcard__media { position: relative; aspect-ratio: 4 / 3; background: #eef0f2; }
.vcard__media svg, .vcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vcard__badge { position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(43,43,43,.82); color: #fff; font: 700 .6875rem var(--f-body); letter-spacing: .04em; }
.vcard__admin { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 6px 10px; border-radius: 8px; background: #fff3cd; color: #6b4e00; font: 600 .6875rem/1.3 var(--f-body); border: 1px dashed #d9a400; }
.vcard figcaption { display: grid; padding: 14px 18px 18px; }
.vcard figcaption strong { color: var(--ink); font: 700 1rem var(--f-head); }
.vcard figcaption span { margin-top: 2px; color: var(--muted); font-size: .9rem; }

/* ---------- inspector kit ---------- */
.kit { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 40px; }
.kit__item { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.kit__icon { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; background: var(--mist); color: var(--red); }
.kit__item h3 { font-size: 1rem; }
.kit__item p { margin-top: 2px; font-size: .9rem; color: var(--muted); }

/* ---------- pricing ---------- */
.pricing { display: grid; grid-template-columns: minmax(0, 460px); justify-content: center; gap: 32px; margin-top: 40px; align-items: start; }
.pricing--tiers { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); justify-content: stretch; }
.price-card { background: var(--ink); color: #d6d9dd; border-radius: 24px; padding: 34px; box-shadow: 0 40px 70px -40px rgba(43,43,43,.8); border-top: 5px solid var(--red); }
.price-card__kicker { font: 700 .8125rem var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: #c3c8ce; }
.price-card__price { margin-top: 6px; font: 800 4.2rem/1 var(--f-head); color: #fff; letter-spacing: -.02em; }
.price-card__price .cur { font-size: 2.2rem; margin-right: 4px; vertical-align: .6em; }
.price-card__price sup { font-size: 1.6rem; color: var(--red-hot); vertical-align: top; position: relative; top: .1em; margin-left: 2px; }
.price-card__list { list-style: none; display: grid; gap: 10px; margin: 22px 0 26px; }
.price-card__list li { position: relative; padding-left: 28px; }
.price-card__list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--red); }
.price-card__list li::after { content: ""; position: absolute; left: 6px; top: 7px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.price-card__note { margin-top: 16px; font-size: .8125rem; line-height: 1.5; color: #aeb4ba; }
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.tier { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 24px; }
.tier__price { margin: 6px 0; font: 800 1.7rem var(--f-head); color: var(--red); }

/* ---------- sample report ---------- */
.rdoc { position: relative; max-width: 860px; margin: 44px auto 0; background: #fff; border-radius: 10px; box-shadow: 0 50px 80px -40px rgba(43,43,43,.6), 0 0 0 1px rgba(0,0,0,.06); overflow: hidden; }
.rdoc__ribbon { position: absolute; top: 24px; right: -44px; width: 190px; padding: 6px 0; text-align: center; background: var(--red); color: #fff; font: 800 .75rem var(--f-head); letter-spacing: .12em; transform: rotate(35deg); z-index: 2; box-shadow: 0 6px 14px -4px rgba(0,0,0,.4); }
.rdoc__head { background: var(--ink); color: #fff; padding: 26px 32px 22px; }
.rdoc__brand { font: 800 1.25rem var(--f-head); letter-spacing: .04em; }
.rdoc__meta { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 36px; margin-top: 14px; }
.rdoc__meta span { display: block; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: #aeb4ba; }
.rdoc__meta strong { font-size: 1rem; }
.rdoc__rows { list-style: none; }
.rrow { display: grid; grid-template-columns: 150px 1fr auto; gap: 22px; align-items: center; padding: 16px 32px; border-top: 1px solid var(--line); }
.rrow:first-child { border-top: 0; }
.rrow__photo { border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 11; background: #dde0e4; }
.rrow__photo svg { display: block; width: 100%; height: 100%; }
.rrow__body strong { display: block; font: 700 1.05rem var(--f-head); color: var(--ink); }
.rrow__body span { display: block; margin-top: 2px; color: var(--muted); }
.rrow__tag { font: 800 .75rem var(--f-head); letter-spacing: .06em; padding: 7px 14px; border-radius: 999px; white-space: nowrap; }
.is-clear .rrow__tag { background: #e6f3ec; color: var(--ok); }
.is-fix .rrow__tag { background: #fbe3e3; color: var(--red); }
.rdoc__rec { display: grid; gap: 4px; padding: 22px 32px 26px; background: var(--mist); border-top: 3px solid var(--red); }
.rdoc__rec span { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rdoc__rec strong { font: 800 1.45rem var(--f-head); color: var(--red); }
.rdoc__rec small { color: var(--muted); }
.rdoc__types { max-width: 860px; margin: 22px auto 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .875rem; color: var(--muted); }
.rdoc__types b { padding: 5px 12px; border-radius: 999px; background: var(--mist); color: var(--ink); font: 700 .75rem var(--f-head); letter-spacing: .03em; }

/* ---------- vehicle score ---------- */
.score { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.score__copy p { margin-top: 14px; font-size: 1.0625rem; color: var(--muted); max-width: 32rem; }
.score__copy .score__note { font-size: .875rem; }
.score__card { position: relative; background: #fff; border-radius: 24px; padding: 30px; box-shadow: 0 40px 70px -44px rgba(43,43,43,.6); display: grid; grid-template-columns: 150px 1fr; gap: 26px; align-items: center; }
.score__tag { position: absolute; top: 14px; right: 16px; font: 700 .6875rem var(--f-head); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--mist); padding: 4px 10px; border-radius: 999px; }
.score__ring { position: relative; width: 150px; height: 150px; }
.score__ring svg { width: 100%; height: 100%; }
.ring-bg { fill: none; stroke: #e6e8eb; stroke-width: 10; }
.ring-fg { fill: none; stroke: var(--red); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.2s ease; }
.score__num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.score__num strong { font: 800 2.6rem/1 var(--f-head); color: var(--ink); }
.score__num span { font-size: .8125rem; color: var(--muted); }
.score__rows { list-style: none; display: grid; gap: 12px; margin-top: 18px; }
.score__rows li { display: grid; grid-template-columns: 82px 1fr 44px; gap: 10px; align-items: center; font-size: .875rem; color: var(--ink); font-weight: 600; }
.score__rows .bar { display: block; height: 8px; border-radius: 999px; background: #e6e8eb; overflow: hidden; }
.score__rows .bar b { display: block; height: 100%; border-radius: 999px; background: var(--red); }
.score__rows em { font-style: normal; color: var(--muted); font-weight: 600; }

/* ---------- service area + interest form ---------- */
.interest { margin-top: 36px; background: var(--ink); color: #d6d9dd; border-radius: 22px; padding: 28px 30px; }
.interest h3 { color: #fff; font-size: 1.2rem; }
.interest__head p { margin-top: 4px; font-size: .94rem; color: #b9bfc5; }
.interest__row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; margin-top: 18px; }
.interest input { height: 50px; padding: 0 14px; border-radius: 10px; border: 1.5px solid transparent; background: #fff; color: var(--ink); font: 500 1rem var(--f-body); min-width: 0; }
.interest input:focus { outline: 3px solid rgba(255,255,255,.9); outline-offset: 2px; }
.interest .btn--dark { background: var(--red); height: 50px; }
.interest .btn--dark:hover { background: var(--red-dark); }
.interest__msg { margin-top: 10px; min-height: 1.2em; font-weight: 600; color: #fff; }
.interest__msg.is-err { color: #ffb4ba; }

/* ---------- about (independent by design) ---------- */
.about__in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
.about__kicker { font: 700 .8125rem var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: #ff8a8a; margin-bottom: 8px; }
.about h2 { font-size: clamp(2rem, 4vw, 3rem); }
.about__text { margin-top: 16px; font-size: 1.25rem; line-height: 1.5; color: #e6e8eb; max-width: 34rem; }
.about__limits { background: rgba(255,255,255,.06); border-radius: 20px; padding: 26px 28px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.about__limits h3 { color: #fff; margin-bottom: 8px; }
.about__limits p { color: #c9ced3; }
.about__more { margin-top: 12px; font-size: .9rem; }
.about__more a { color: #fff; }

/* ---------- inner pages / tracker page ---------- */
.page--wide .page__in { max-width: 920px; }
.jpc-admin-note { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: #fff3cd; color: #6b4e00; font-size: .9rem; }

/* ---------- responsive additions ---------- */
@media (max-width: 1240px) {
  .nav__home, .nav__track { display: block; }
}
@media (max-width: 960px) {
  .hide-sm { display: none; }
  .xs__grid, .pricing, .score, .about__in, .faq-wrap, .contact { grid-template-columns: minmax(0, 1fr); }
  .faq-wrap, .contact { gap: 36px; }
  .steps--4 { grid-template-columns: 1fr; }
  .score__card { grid-template-columns: 130px 1fr; }
  .rrow { grid-template-columns: 110px 1fr; }
  .rrow__tag { grid-column: 2; justify-self: start; }
  .interest__row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .vcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
  .vcard { border-radius: 16px; }
  .vcard figcaption { padding: 10px 12px 14px; }
  .vcard figcaption strong { font-size: .875rem; }
  .vcard figcaption span { font-size: .78rem; }
  .vcard__badge { left: 6px; top: 6px; font-size: .6rem; padding: 3px 7px; }
  .xpanel { padding: 22px 20px; }
  .xs__stage { border-radius: 18px; }
  .xs__tag { font-size: .75rem; padding: 7px 11px; max-width: calc(100% - 118px); bottom: 10px; left: 10px; }
  .xs__nav { width: 38px; height: 38px; margin-top: -19px; }
  .done-grid { grid-template-columns: 1fr; }
  .rdoc__meta { grid-template-columns: 1fr 1fr; }
  .rdoc__head, .rrow, .rdoc__rec { padding-left: 18px; padding-right: 18px; }
  .rdoc__ribbon { right: -58px; top: 18px; }
  .price-card { padding: 26px 22px; }
  .price-card__price { font-size: 3.4rem; }
  .score__card { grid-template-columns: 1fr; justify-items: center; }
  .score__rows { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .xs-svg .cam, .xs-svg .insp, .xs-svg .ov, .x-door, .x-hood, .x-lift { transition: none; }
  .hot-ring, .xs .perim, .xs .sweep, .xs .scanline, .xs .cable, .xs .pulse, .xs .wheel .spokes, .xs .screen { animation: none !important; }
}


/* =====================================================================
   JaachPadtal 4.0
   ===================================================================== */
.hero { padding: 40px 0 54px; }
.hero h1 { font-size: clamp(2.1rem, 3.7vw, 3.2rem); line-height: 1.08; }
.hero .lead { margin-top: 14px; font-size: 1.0625rem; }
.hero__grid { grid-template-areas: "copy book" "scene book" "pillars book"; grid-template-rows: auto auto 1fr; }
.pillars { grid-area: pillars; }
.hero::before { background: radial-gradient(55% 70% at 28% 42%, #4b4d51 0%, #2b2c2e 48%, #17181a 100%); }
.hero__grid { row-gap: 10px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 7px 15px 7px 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #f1f3f5; font: 600 .8125rem var(--f-head); letter-spacing: .04em; }
.eyebrow__dot { width: 9px; height: 9px; border-radius: 50%; background: #ff3b47; animation: livepulse 2s infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(255,59,71,.55); } 70% { box-shadow: 0 0 0 10px rgba(255,59,71,0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,71,0); } }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.btn--ghost:hover { background: #fff; color: var(--ink); }
.pillars { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.pillars li { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 16px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); line-height: 1.4; color: #cfd3d8; }
.pillars strong { display: block; margin-bottom: 2px; color: #fff; font: 700 .9375rem var(--f-head); }
.pillars small { display: block; font-size: .8125rem; color: #cfd3d8; }
.pillar__i { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--red); color: #fff; }
.scene { aspect-ratio: 640 / 340; margin-top: 6px; }
.scene::before { content: ""; position: absolute; left: 3%; right: 3%; top: -6%; bottom: 10%; border-radius: 50%; border: 2px solid rgba(168,4,4,.38); box-shadow: inset 0 0 90px rgba(168,4,4,.28); }
.scene > span { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.scene__pills { z-index: 2; }
.scene__photo { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.scene:has(.scene__photo)::before { display: none; }

.booking__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.booking__chip { flex-shrink: 0; margin: 2px 0 0; padding: 6px 12px; border-radius: 12px; background: #fdecec; text-align: center; line-height: 1.15; }
.booking__chip span { display: block; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: #8a1b1b; }
.booking__chip strong { color: var(--red); font: 800 1.15rem var(--f-head); }
.booking[data-mode="interest"] .field--email { display: none; }
.done-mail { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #eaf7ef; color: #14532d !important; font-size: .9rem; }
.done-mail[hidden] { display: none; }
.done-mail svg { flex-shrink: 0; margin-top: 1px; }
.done-mail strong { overflow-wrap: anywhere; }
.done-mailmsg { margin: 10px 0 0 !important; font-weight: 700; font-size: .9rem; }
.done-mailmsg:empty { display: none; }
.done-mailmsg.is-ok { color: #15803d !important; }
.done-mailmsg.is-err { color: #c0121f !important; }

/* ticker under the hero */
.ticker { background: var(--red); color: #fff; overflow: hidden; border-top: 1px solid rgba(255,255,255,.22); }
.ticker__row { display: flex; width: max-content; animation: tick 52s linear infinite; }
.ticker:hover .ticker__row { animation-play-state: paused; }
.ticker ul { display: flex; align-items: center; flex-shrink: 0; list-style: none; margin: 0; padding: 0; }
.ticker li { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; font: 700 .8125rem var(--f-head); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.ticker__i svg { display: block; width: 20px; height: 20px; }
.ticker__brand { background: #860303; }
.ticker__sep { opacity: .55; }
@keyframes tick { to { transform: translateX(-50%); } }

/* the interactive car: three views that turn */
.xs__stage { perspective: 1500px; background: linear-gradient(#f6f7f9, #dde0e4); }
.xv { position: absolute; inset: 0; opacity: 0; pointer-events: none; transform: rotateY(62deg) scale(.86); transform-origin: 50% 60%; transition: transform .85s cubic-bezier(.4, 0, .2, 1), opacity .55s ease; }
.xv.is-prev { transform: rotateY(-62deg) scale(.86); }
.xv.on { opacity: 1; pointer-events: auto; transform: none; }
.xs-svg { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.xs__views { position: absolute; left: 14px; top: 14px; z-index: 3; display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: 0 8px 20px -10px rgba(0,0,0,.45); }
.xview { border: 0; background: transparent; padding: 7px 15px; border-radius: 999px; color: var(--ink); font: 700 .8125rem var(--f-head); cursor: pointer; }
.xview[aria-pressed="true"] { background: var(--ink); color: #fff; }
.xs__hint { position: absolute; right: 14px; top: 20px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(43,43,43,.78); color: #fff; font-size: .75rem; font-weight: 600; pointer-events: none; }
.xs__nav, .xs__tag { z-index: 3; }
.xs[data-area="tyres"] .treadring { opacity: 1; }

@media (max-width: 960px) {
  .hero__grid { grid-template-areas: "copy" "book" "scene" "pillars"; grid-template-rows: auto; }
  .pillars { grid-template-columns: 1fr; gap: 8px; margin-top: 20px; }
  .pillars li { flex-direction: row; align-items: center; padding: 10px 12px; }
  .hero__cta .btn { flex: 1 1 190px; }
}
@media (max-width: 720px) {
  .pillars small, .xs__hint { display: none; }
  .xview { padding: 6px 12px; }
  .booking__chip { padding: 5px 9px; }
  .eyebrow { font-size: .75rem; }
  .ticker li { padding: 12px 18px; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .ticker__row, .eyebrow__dot { animation: none; } .xv { transition: opacity .2s; } }

/* ---- interactive stage states (generated) ---- */
.xs[data-area="exterior"] .xv--side .cam{transform:translate(26.0px,-7.0px) scale(1.00)}
.xs[data-area="paint"] .xv--side .cam{transform:translate(-215.0px,-150.0px) scale(1.50)}
.xs[data-area="tyres"] .xv--side .cam{transform:translate(-744.5px,-392.4px) scale(2.10)}
.xs[data-area="interior"] .xv--side .cam{transform:translate(-297.0px,-155.8px) scale(1.70)}
.xs[data-area="engine"] .xv--side .cam{transform:translate(-552.0px,-203.4px) scale(1.70)}
.xs[data-area="electrical"] .xv--side .cam{transform:translate(-84.0px,-50.0px) scale(1.10)}
.xs[data-area="obd"] .xv--side .cam{transform:translate(-493.0px,-215.8px) scale(1.90)}
.xs[data-area="docs"] .xv--side .cam{transform:translate(-581.0px,-181.8px) scale(1.80)}
.xs[data-area="under"] .xv--side .cam{transform:translate(-160.0px,-195.0px) scale(1.40)}
.xs[data-area="exterior"] .xv--front .cam{transform:translate(0.0px,29.0px) scale(1.00)}
.xs[data-area="paint"] .xv--front .cam{transform:translate(-230.0px,-168.0px) scale(1.50)}
.xs[data-area="tyres"] .xv--front .cam{transform:translate(-720.0px,-411.0px) scale(2.00)}
.xs[data-area="engine"] .xv--front .cam{transform:translate(-282.0px,-41.6px) scale(1.55)}
.xs[data-area="electrical"] .xv--front .cam{transform:translate(-146.0px,-29.8px) scale(1.30)}
.xs[data-area="docs"] .xv--front .cam{transform:translate(-248.0px,-63.0px) scale(1.80)}
.xs[data-area="exterior"] .xv--rear .cam{transform:translate(0.0px,29.0px) scale(1.00)}
.xs[data-area="paint"] .xv--rear .cam{transform:translate(-230.0px,-168.0px) scale(1.50)}
.xs[data-area="tyres"] .xv--rear .cam{transform:translate(-720.0px,-411.0px) scale(2.00)}
.xs[data-area="electrical"] .xv--rear .cam{transform:translate(-140.0px,-31.5px) scale(1.35)}
.xs[data-area="under"] .xv--rear .cam{transform:translate(-304.0px,-274.2px) scale(1.60)}
.xs[data-area="exterior"] .xv--side .insp-exterior{opacity:1;transform:none}
.xs[data-area="paint"] .xv--side .insp-paint{opacity:1;transform:none}
.xs[data-area="tyres"] .xv--side .insp-tyres{opacity:1;transform:none}
.xs[data-area="interior"] .xv--side .insp-interior{opacity:1;transform:none}
.xs[data-area="engine"] .xv--side .insp-engine{opacity:1;transform:none}
.xs[data-area="electrical"] .xv--side .insp-electrical{opacity:1;transform:none}
.xs[data-area="obd"] .xv--side .insp-obd{opacity:1;transform:none}
.xs[data-area="docs"] .xv--side .insp-docs{opacity:1;transform:none}
.xs[data-area="under"] .xv--side .insp-under{opacity:1;transform:none}
.xs[data-area="exterior"] .xv--front .insp-exterior{opacity:1;transform:none}
.xs[data-area="paint"] .xv--front .insp-paint{opacity:1;transform:none}
.xs[data-area="tyres"] .xv--front .insp-tyres{opacity:1;transform:none}
.xs[data-area="engine"] .xv--front .insp-engine{opacity:1;transform:none}
.xs[data-area="electrical"] .xv--front .insp-electrical{opacity:1;transform:none}
.xs[data-area="docs"] .xv--front .insp-docs{opacity:1;transform:none}
.xs[data-area="exterior"] .xv--rear .insp-exterior{opacity:1;transform:none}
.xs[data-area="paint"] .xv--rear .insp-paint{opacity:1;transform:none}
.xs[data-area="tyres"] .xv--rear .insp-tyres{opacity:1;transform:none}
.xs[data-area="electrical"] .xv--rear .insp-electrical{opacity:1;transform:none}
.xs[data-area="under"] .xv--rear .insp-under{opacity:1;transform:none}
.xs[data-area="paint"] .xv .ov-paint,.xs[data-area="exterior"] .xv .ov-ext,.xs[data-area="interior"] .xv .ov-interior,.xs[data-area="engine"] .xv .ov-engine,.xs[data-area="docs"] .xv .ov-vin,.xs[data-area="obd"] .xv .ov-obd,.xs[data-area="under"] .xv .ov-under,.xs[data-area="electrical"] .xv .ov-elec{opacity:1}
.xs[data-area="interior"] .xv--side .x-door{transform:scaleX(.13)}
.xs[data-area="engine"] .xv--side .x-hood{transform:rotate(-24deg)}
.xs[data-area="engine"] .xv--front .x-hood{transform:translateY(-22px) scaleY(.3)}
.xs[data-area="under"] .xv .x-lift{transform:translateY(-16px)}
.xs[data-area="under"] .xv .x-shadow{transform:scale(1.06,1.4)}
.xs[data-area="electrical"] .xv .hbeam,.xs[data-area="electrical"] .xv .tailglow{opacity:1}