/* Detailing page sections after the racetrack. Upright Archivo headings to match "Our Process"; fluid sizes throughout. */
.detailing-page-body, .panel-page { --dt-ink: #121111; --dt-dim: #71717a; --dt-hair: #e7e7e9; --dt-space: clamp(84px, 12vw, 170px); }
.dt-section { padding-top: var(--dt-space); background: #fff; }
.dt-section--last { padding-bottom: var(--dt-space); }
.dt-h2 { margin: 0 0 clamp(26px, 4.4vw, 60px); color: var(--dt-ink); font-family: Archivo, Manrope, Arial, sans-serif; font-size: clamp(34px, 4.6vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; }

/* ---------- Before / after ---------- */
.ba { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: clamp(6px, 1vw, 14px); background: #f4f4f5; user-select: none; touch-action: pan-y; }
.ba-layer { position: absolute; inset: 0; margin: 0; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-slot { position: absolute; inset: 0; display: grid; place-items: center; }
.ba-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-after .ba-slot { background: #f4f4f5; }
.ba-before .ba-slot { background: #e4e4e7; }
.ba-slot span { color: #a1a1aa; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; }
.ba-after .ba-slot span { transform: translateX(25%); }
.ba-before .ba-slot span { transform: translateX(-25%); }
.ba-tag { position: absolute; top: clamp(10px, 1.6vw, 20px); z-index: 2; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--dt-ink); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ba-tag--before { left: clamp(10px, 1.6vw, 20px); }
.ba-tag--after { right: clamp(10px, 1.6vw, 20px); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); pointer-events: none; }
.ba-handle span { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .16); transform: translate(-50%, -50%); }
.ba-handle span::before, .ba-handle span::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border-top: 1.5px solid var(--dt-ink); border-left: 1.5px solid var(--dt-ink); }
.ba-handle span::before { left: 12px; transform: translateY(-50%) rotate(-45deg); }
.ba-handle span::after { right: 12px; transform: translateY(-50%) rotate(135deg); }
.ba-range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ba:has(.ba-range:focus-visible) .ba-handle span { outline: 2px solid var(--dt-ink); outline-offset: 3px; }
@media (max-width: 600px) { .ba { aspect-ratio: 4 / 5; } }

/* ---------- Packages ---------- */
.pkg-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--dt-hair); }
.pkg-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; align-items: baseline; gap: 8px clamp(16px, 3vw, 48px); padding: clamp(18px, 2vw, 28px) 0; border-bottom: 1px solid var(--dt-hair); }
.pkg-name { color: var(--dt-ink); font-family: Archivo, Manrope, Arial, sans-serif; font-size: clamp(22px, 2.8vw, 40px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) { .pkg-list li:hover .pkg-name { transform: translateX(6px); } }
.pkg-desc { color: var(--dt-dim); font-size: clamp(13px, 1.1vw, 15px); line-height: 1.5; }
.pkg-price { color: var(--dt-ink); font-family: Archivo, Arial, sans-serif; font-size: clamp(13px, 1.1vw, 15px); font-weight: 800; white-space: nowrap; }
@media (max-width: 700px) {
  .pkg-list li { grid-template-columns: 1fr auto; }
  .pkg-desc { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Numbers ---------- */
.dt-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(16px, 3vw, 48px); margin: 0; }
.dt-stats div { padding-top: clamp(14px, 1.6vw, 22px); border-top: 1px solid var(--dt-hair); }
.dt-stats dt { color: var(--dt-ink); font-family: Archivo, Manrope, Arial, sans-serif; font-size: clamp(44px, 6.4vw, 104px); font-weight: 800; letter-spacing: -.055em; line-height: .95; }
.dt-stats dd { margin: clamp(8px, 1vw, 14px) 0 0; color: var(--dt-dim); font-size: clamp(10px, .9vw, 12px); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
@media (max-width: 700px) { .dt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- FAQ ---------- */
.dt-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(8px, 6vw, 110px); align-items: start; }
.dt-faq-list { border-top: 1px solid var(--dt-hair); }
.dt-faq-list details { border-bottom: 1px solid var(--dt-hair); }
.dt-faq-list summary { position: relative; display: block; padding: clamp(18px, 2vw, 26px) 40px clamp(18px, 2vw, 26px) 0; color: var(--dt-ink); font-size: clamp(15px, 1.3vw, 18px); font-weight: 600; cursor: pointer; list-style: none; }
.dt-faq-list summary::-webkit-details-marker { display: none; }
.dt-faq-list summary::before, .dt-faq-list summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 13px; height: 1.5px; background: currentColor; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.dt-faq-list summary::after { transform: rotate(90deg); }
.dt-faq-list details[open] summary::after { transform: rotate(0deg); }
.dt-faq-list details p { max-width: 58ch; margin: -4px 0 24px; color: var(--dt-dim); font-size: clamp(14px, 1.1vw, 15px); line-height: 1.65; }
@media (max-width: 860px) { .dt-faq { grid-template-columns: 1fr; } }