/* Durand launch layer. Keeps Maplewood chrome; adds unique scenes, logos, first-viewport actions. */

body[data-scene] .site-background {
  background-image:
    linear-gradient(180deg, rgba(7, 6, 5, 0.22) 0%, rgba(7, 6, 5, 0.3) 38%, rgba(7, 6, 5, 0.48) 74%, rgba(7, 6, 5, 0.64) 100%),
    linear-gradient(90deg, rgba(5, 4, 3, 0.26) 0%, rgba(5, 4, 3, 0.08) 50%, rgba(5, 4, 3, 0.22) 100%),
    var(--scene-image);
  background-position: center, center, center 42%;
  background-size: cover, cover, cover;
  background-repeat: no-repeat;
}

body[data-scene="home"] { --scene-image: url("/assets/backgrounds/home.webp?v=garage9"); }
body[data-scene="services"] { --scene-image: url("/assets/backgrounds/services.webp?v=garage9"); }
body[data-scene="diagnostics"] { --scene-image: url("/assets/backgrounds/diagnostics.webp?v=garage9"); }
body[data-scene="oil"] { --scene-image: url("/assets/backgrounds/oil.webp?v=garage9"); }
body[data-scene="brakes"] { --scene-image: url("/assets/backgrounds/brakes.webp?v=garage9"); }
body[data-scene="suspension"] { --scene-image: url("/assets/backgrounds/suspension.webp?v=garage9"); }
body[data-scene="alignment"] { --scene-image: url("/assets/backgrounds/alignment.webp?v=garage9"); }
body[data-scene="installation"] { --scene-image: url("/assets/backgrounds/installation.webp?v=garage9"); }
body[data-scene="tires"] { --scene-image: url("/assets/backgrounds/tires.webp?v=garage9"); }
body[data-scene="wash"] { --scene-image: url("/assets/backgrounds/wash.webp?v=garage9"); }
body[data-scene="detailing"] { --scene-image: url("/assets/backgrounds/detailing.webp?v=garage9"); }
body[data-scene="storage"] { --scene-image: url("/assets/backgrounds/storage.webp?v=garage9"); }
body[data-scene="about"] { --scene-image: url("/assets/backgrounds/about.webp?v=garage9"); }
body[data-scene="reviews"] { --scene-image: url("/assets/backgrounds/reviews.webp?v=garage9"); }
body[data-scene="contact"] { --scene-image: url("/assets/backgrounds/contact.webp?v=garage9"); }
body[data-scene="financing"] { --scene-image: url("/assets/backgrounds/financing.webp?v=garage9"); }
body[data-scene="schedule"] { --scene-image: url("/assets/backgrounds/schedule.webp?v=garage9"); }
body[data-scene="privacy"] { --scene-image: url("/assets/backgrounds/privacy.webp?v=garage9"); }
body[data-scene="terms"] { --scene-image: url("/assets/backgrounds/terms.webp?v=garage9"); }
body[data-scene="warranty"] { --scene-image: url("/assets/backgrounds/warranty.webp?v=garage9"); }
body[data-scene="storage-terms"] { --scene-image: url("/assets/backgrounds/storage-terms.webp?v=garage9"); }
body[data-scene="tips"] { --scene-image: url("/assets/backgrounds/tips.webp?v=garage9"); }
body[data-scene="blaine"] { --scene-image: url("/assets/backgrounds/blaine.webp?v=garage9"); }
body[data-scene="legacy"] { --scene-image: url("/assets/backgrounds/legacy.webp?v=garage9"); }
body[data-scene="faq"] { --scene-image: url("/assets/backgrounds/faq.webp?v=garage9"); }
body[data-scene="careers"] { --scene-image: url("/assets/backgrounds/diagnostics.webp?v=garage9"); }
body[data-scene="error"] { --scene-image: url("/assets/backgrounds/error.webp?v=garage9"); }

.brand-mark-legacy img[alt="Maplewood Auto Service"],
.brand-mark-new img[alt="Durand Automotive"] {
  object-fit: contain;
}

.first-viewport-actions {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  padding: 7.5rem 1rem 0.4rem;
}

.first-viewport-actions a,
.first-viewport-actions button {
  min-height: 44px;
  padding: 0.7rem 1.15rem;
  border-radius: 8px;
  font-family: Oswald, sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.first-viewport-actions .first-call {
  background: transparent;
  border: 2px solid #e46b2c;
  color: #fff;
}

.first-viewport-actions .first-schedule {
  background: #e46b2c;
  border: 2px solid #e46b2c;
  color: #111;
}

.wash-app-links { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; }
.wash-store-badge { display: inline-flex; min-width: 190px; min-height: 60px; align-items: center; gap: 12px; padding: 10px 18px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; background: #050505; color: #fff; text-decoration: none; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35); }
.wash-store-badge:hover { transform: translateY(-2px); border-color: var(--orange); }
.wash-store-badge svg { width: 28px; height: 28px; flex: 0 0 auto; fill: currentColor; }
.wash-store-badge span { display: grid; text-align: left; line-height: 1; }
.wash-store-badge small { margin-bottom: 5px; color: #bbb; font-size: 0.62rem; letter-spacing: 0.04em; }
.wash-store-badge strong { font-family: Roboto, sans-serif; font-size: 1.02rem; }
.wash-app-showcase { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 3rem; align-items: center; padding: clamp(1.5rem, 4vw, 3.5rem); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px; background: linear-gradient(135deg, rgba(5, 8, 10, 0.94), rgba(19, 30, 34, 0.88)); }
.wash-app-kicker { margin: 0 0 0.75rem; color: var(--orange); font-family: Oswald, sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.wash-app-showcase h2 { max-width: 760px; margin: 0; font-family: Oswald, sans-serif; font-size: clamp(2.3rem, 5vw, 5rem); line-height: 0.92; letter-spacing: -0.025em; text-transform: uppercase; }
.wash-app-offer { max-width: 720px; margin: 1.25rem 0 1.5rem; color: #e6e6e6; font-size: clamp(1rem, 1.6vw, 1.18rem); line-height: 1.65; }
.wash-app-qr-card { display: grid; place-items: center; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px; background: #fff; color: #0b0b0b; text-align: center; }
.wash-app-qr-card img { width: 100%; height: auto; border-radius: 8px; }
.wash-level-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.wash-level-card { min-height: 250px; padding: 1.7rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; background: linear-gradient(180deg, rgba(16, 22, 24, 0.94), rgba(7, 9, 10, 0.95)); }
.wash-level-card span { color: var(--orange); font-family: Oswald, sans-serif; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; }
.wash-level-card h3 { margin: 0.7rem 0 0.25rem; font-family: Oswald, sans-serif; font-size: 1.65rem; letter-spacing: 0.06em; text-transform: uppercase; }
.wash-level-card ul { display: grid; gap: 0.45rem; margin: 0; padding: 0; color: #ddd; list-style: none; }
.wash-level-card li::before { margin-right: 0.5rem; color: var(--orange); content: "✓"; }
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 1rem; }
.faq-list details { padding: 1.1rem 1.25rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; background: rgba(8, 8, 8, 0.72); }
.faq-list summary { cursor: pointer; font-family: Oswald, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
.faq-list p { margin: 0.75rem 0 0; color: var(--ink2); }

@media (max-width: 900px) {
  .wash-level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 901px) {
  .first-viewport-actions { display: none; }
}

@media (max-width: 700px) {
  .wash-app-showcase { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.4rem; }
  .wash-app-qr-card { display: none; }
  .wash-level-grid { grid-template-columns: 1fr; }
  .wash-level-card { min-height: 0; }
  .first-viewport-actions { position: sticky; top: 0; z-index: 40; padding: 0.55rem 0.8rem; background: rgba(7, 6, 5, 0.88); backdrop-filter: blur(10px); }
}