/* Sleek Auto Detailing — colors sampled from the business card, flyer and sign */
:root {
  --charcoal: #3d3a3b;
  --charcoal-deep: #2f2c2d;
  --card: #4b4748;
  --card-line: #5a5657;
  --purple: #4b44a0;
  --purple-dark: #3a3486;
  --lavender: #9ca3e8;
  --lavender-tint: #f1f0f8;
  --white: #ffffff;
  --text: #2b2829;
  --text-muted: #5f5b5c;
  --on-dark: #f3f2f6;
  --on-dark-muted: #c9c6cf;

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Cambria, Georgia, serif;

  --wrap: 1160px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 14px;
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.1; text-wrap: balance; }
p { text-wrap: pretty; }
p { margin: 0; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--purple); color: var(--white); padding: 10px 16px; border-radius: 8px;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--lavender); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.icon { width: 1.15em; height: 1.15em; flex: none; }
.icon-xl { width: 40px; height: 40px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font: 600 1rem/1 var(--sans);
  padding: .8em 1.3em; border-radius: 999px;
  border: 2px solid transparent; text-decoration: none; cursor: pointer;
  touch-action: manipulation;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.btn:active { transform: scale(.97); }
.btn-lg { font-size: 1.0625rem; padding: 1em 1.6em; }
.btn-primary { background: var(--purple); color: var(--white); box-shadow: 0 8px 18px -10px rgba(75, 68, 160, .8); }
.btn-primary:hover { background: var(--purple-dark); box-shadow: 0 10px 22px -10px rgba(75, 68, 160, .95); }
.btn-outline { border-color: var(--charcoal); color: var(--charcoal); background: transparent; }
.btn-outline:hover { background: var(--charcoal); color: var(--white); }
.btn-light { background: var(--white); color: var(--charcoal); }
.btn-light:hover { background: var(--lavender-tint); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid #ebeaf0;
  transition: box-shadow .2s;
}
.site-header.scrolled { box-shadow: 0 6px 20px -12px rgba(47, 44, 45, .35); }
.header-inner { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.brand img { height: 46px; width: auto; }
.site-nav { display: flex; gap: 26px; margin-left: auto; }
.site-nav a { text-decoration: none; font-weight: 500; font-size: .98rem; color: var(--text); padding: 6px 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.site-nav a:hover { border-bottom-color: var(--purple); }
.site-nav a[aria-current] { color: var(--purple); border-bottom-color: var(--purple); font-weight: 600; }
.header-call { padding: .7em 1.1em; }
.nav-toggle { display: none; }

/* Hero */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(48px, 8vw, 104px) 0 clamp(36px, 5vw, 64px); text-align: center;
  background: radial-gradient(60% 70% at 50% 38%, var(--lavender-tint) 0%, var(--white) 70%);
}
/* Oversized, faint car swoosh from the logo behind the headline */
.hero-swoosh-bg {
  position: absolute; left: 50%; top: 9%; width: min(1180px, 120vw); height: auto;
  transform: translateX(-50%); opacity: .07; pointer-events: none; user-select: none;
}
.hero-inner { position: relative; display: grid; justify-items: center; }
.hero-copy { max-width: 880px; display: grid; justify-items: center; }
.hero-title {
  font-weight: 800;
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 8.4vw, 6.4rem);
  letter-spacing: -.01em;
  line-height: .95;
  color: var(--charcoal);
}
.hero-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 5.4vw, 3.6rem);
  color: var(--purple);
  line-height: 1.15;
  margin-top: .15em;
}
.hero-lede { max-width: 38em; margin-top: 22px; font-size: 1.15rem; color: var(--text-muted); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; }
.hero-facts {
  list-style: none; padding: 0; margin: 30px 0 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  color: var(--text); font-size: .95rem; font-weight: 500;
}
.hero-facts li {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .8); border: 1px solid #e3e1ef;
  box-shadow: 0 4px 12px -8px rgba(75, 68, 160, .35);
}
.hero-facts .icon { color: var(--purple); }
.has-hero-photo .hero-facts { justify-content: flex-start; }
.hero-media { margin: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }

/* Hero with a photo: two columns, left-aligned copy */
.has-hero-photo .hero { text-align: left; }
.has-hero-photo .hero-inner { grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; justify-items: stretch; }
.has-hero-photo .hero-copy { justify-items: start; }
.has-hero-photo .hero-title { font-size: clamp(2.4rem, 5.6vw, 4.8rem); }
.has-hero-photo .hero-actions { justify-content: flex-start; }
.has-hero-photo .hero-media { aspect-ratio: 4 / 5; max-height: 620px; }

/* Waves (the purple band from the printed materials) */
.wave { display: block; line-height: 0; }
.wave svg { display: block; width: 100%; height: clamp(70px, 10vw, 150px); overflow: visible; }
/* Overlap the next section by a pixel so no hairline seam shows at some zoom levels */
.wave-down { margin-bottom: -1px; position: relative; z-index: 1; }
.wave-up { margin-top: -1px; position: relative; z-index: 1; }
.wave-band { fill: var(--purple); }
/* Backgrounds match the neighboring section, switching only in the last few pixels so the
   moving waves never show the wrong color above or below the purple band */
.wave-down { background: linear-gradient(var(--white) calc(100% - 3px), var(--charcoal) calc(100% - 3px)); }
.wave-down .wave-fill { fill: var(--charcoal); }
.wave-up { background: linear-gradient(var(--charcoal) 3px, var(--white) 3px); }
.wave-up .wave-fill { fill: var(--charcoal); }
.wave-footer { background: linear-gradient(var(--white) calc(100% - 3px), var(--charcoal-deep) calc(100% - 3px)); }
.wave-footer .wave-fill { fill: var(--charcoal-deep); }

/* Sections */
/* Dark area: fine grain plus two soft lavender glows, kept away from the top and bottom edges
   so the waves still meet a plain charcoal color */
.dark {
  position: relative; isolation: isolate;
  color: var(--on-dark);
  background: var(--charcoal);
}
/* Grain and glows live on one layer that fades to nothing near the top and bottom, so the
   section is plain charcoal exactly where it meets the waves (no visible border line) */
.dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(700px 520px at 8% 30%, rgba(156, 163, 232, .09), transparent 70%),
    radial-gradient(760px 600px at 96% 62%, rgba(75, 68, 160, .16), transparent 70%);
  -webkit-mask-image: linear-gradient(transparent, #000 260px, #000 calc(100% - 260px), transparent);
  mask-image: linear-gradient(transparent, #000 260px, #000 calc(100% - 260px), transparent);
}
.light { background: var(--white); }
.section { padding: clamp(56px, 8vw, 96px) 0; }
.dark .section + .section { padding-top: 0; }
.section-head { margin-bottom: clamp(28px, 4vw, 44px); max-width: 640px; }
.section-head h2 {
  font-weight: 800;
  font-stretch: 115%;
  font-variation-settings: "wdth" 115;
  font-size: clamp(2rem, 4.4vw, 3rem);
  letter-spacing: -.01em;
}
.section-head p { margin-top: 12px; font-size: 1.1rem; }
.dark .section-head p { color: var(--on-dark-muted); }
.light .section-head p { color: var(--text-muted); }

/* Packages */
.packages-note {
  display: inline-flex; align-items: center; gap: 10px;
  margin: -8px 0 34px; padding: 9px 16px; border-radius: 999px;
  background: rgba(156, 163, 232, .1); border: 1px solid rgba(156, 163, 232, .2);
  color: var(--on-dark); font-size: .95rem;
}
.packages-note .icon { color: var(--lavender); }

.packages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.package {
  position: relative;
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(156, 163, 232, .10), transparent 60%),
    linear-gradient(180deg, #524d4f 0%, var(--card) 45%);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--radius);
  padding: 26px 24px 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 20px 36px -24px rgba(0, 0, 0, .7);
}
/* Accent line along the top edge, echoing the purple band on the printed materials */
.package::before {
  content: ""; position: absolute; top: -1px; left: 24px; right: 24px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--lavender); opacity: .55;
}
.package-icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 18px;
  border-radius: 12px;
  background: rgba(156, 163, 232, .14); color: var(--lavender);
  border: 1px solid rgba(156, 163, 232, .22);
}
.package-icon .icon { width: 24px; height: 24px; }
.package h3 { font-size: 1.35rem; font-weight: 700; color: var(--white); }
.price {
  margin-top: 14px;
  font-weight: 800; font-size: 2.6rem; line-height: 1;
  font-stretch: 112%; font-variation-settings: "wdth" 112;
  color: var(--lavender);
}
.price span { display: block; font-size: .85rem; font-weight: 500; letter-spacing: .02em; color: var(--on-dark-muted); margin-bottom: 6px; font-stretch: 100%; font-variation-settings: "wdth" 100; }
.package ul {
  list-style: none; padding: 20px 0 0; margin: 20px 0 26px; display: grid; gap: 9px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.package li { position: relative; padding-left: 20px; font-size: .98rem; line-height: 1.4; color: var(--on-dark); }
.package li::before {
  content: ""; position: absolute; left: 2px; top: .45em;
  width: 8px; height: 8px; background: var(--lavender); transform: rotate(45deg);
}
.package-link {
  margin-top: auto;
  display: block; text-align: center; text-decoration: none; font-weight: 600;
  padding: 12px; border-radius: 999px;
  border: 2px solid var(--card-line); color: var(--white);
}
.package-link:hover { border-color: var(--lavender); }
.package-featured {
  border: 2px solid var(--purple);
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(156, 163, 232, .22), transparent 60%),
    linear-gradient(180deg, #5a5470 0%, #4f4a5c 50%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 44px -22px rgba(75, 68, 160, .75);
}
.package-featured::before { display: none; }
.package-featured .package-icon { background: var(--purple); color: var(--white); border-color: transparent; }
.package-featured .package-link { background: var(--purple); border-color: var(--purple); }
.package-featured .package-link:hover { background: var(--purple-dark); }
.badge {
  position: absolute; top: -13px; right: 20px;
  background: var(--purple); color: var(--white);
  font-size: .8rem; font-weight: 700; letter-spacing: .06em;
  padding: 5px 12px; border-radius: 999px;
}

.addons {
  margin-top: 28px; padding: 22px 24px;
  border: 1px solid var(--card-line); border-radius: var(--radius);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px;
}
.addons h3 { font-size: 1.05rem; font-weight: 700; color: var(--white); }
.addons dl { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }
.addons dl div { display: flex; gap: 8px; }
.addons dt { color: var(--on-dark); }
.addons dd { margin: 0; font-weight: 700; color: var(--lavender); }
.fine-print { margin-top: 14px; font-size: .92rem; color: var(--on-dark-muted); }

/* Steps */
/* One raised panel; the steps are joined by a gradient line instead of being separate cards */
.steps-panel {
  position: relative;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .8);
}
.steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px;
  counter-reset: step;
  position: relative;
}
.steps::before {
  content: ""; position: absolute; top: 31px; left: 32px; right: 32px; height: 2px;
  background: linear-gradient(90deg, var(--lavender), var(--purple) 55%, rgba(75, 68, 160, .2));
}
.steps li { counter-increment: step; position: relative; }
.step-icon {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 64px; height: 64px; margin-bottom: 20px; border-radius: 50%;
  background: var(--charcoal-deep); color: var(--lavender);
  border: 2px solid var(--purple);
  box-shadow: 0 0 0 6px rgba(75, 68, 160, .14);
}
.step-icon .icon { width: 26px; height: 26px; }
.step-icon::after {
  content: counter(step);
  position: absolute; top: -4px; right: -6px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lavender); color: var(--charcoal-deep);
  font-size: .8rem; font-weight: 800;
}
.steps h3 { font-size: 1.3rem; font-weight: 700; color: var(--white); }
.steps p { margin-top: 8px; color: var(--on-dark-muted); max-width: 30em; }
.steps-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .08);
}
.steps-cta p { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--lavender); }

/* Gallery */
/* Tiles stretch to fill the row, so a few photos never leave an empty half */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.gallery:empty { display: none; }
.shot { position: relative; margin: 0; }
.shot-frame {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--card);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 40px -26px rgba(0, 0, 0, .85);
}
.shot-frame img, .shot-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-video, .shot-slides { aspect-ratio: 3 / 4; max-height: 540px; width: 100%; }

/* Crossfading slideshow */
.shot-slides img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease-in-out; }
.shot-slides img.active { opacity: 1; }
.slide-dots { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: flex; gap: 2px; }
.slide-dots button {
  width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.slide-dots button::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(47, 44, 45, .35);
  transition: background-color .2s, transform .2s;
}
.slide-dots button.active::before { background: var(--white); transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) {
  .shot-slides img { transition: none; }
}
/* Caption laid over the bottom of the photo */
.shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 48px 18px 16px; border-radius: 0 0 var(--radius) var(--radius);
  background: linear-gradient(transparent, rgba(30, 28, 29, .88));
  color: var(--white); font-weight: 700; font-size: 1.05rem; pointer-events: none;
}
.shot figcaption::before {
  content: ""; display: block; width: 28px; height: 3px; margin-bottom: 8px;
  border-radius: 2px; background: var(--lavender);
}

/* Before/after slider */
.compare .after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos, 50%)); }
.compare .divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; margin-left: -1.5px;
  background: var(--white); pointer-events: none;
}
.compare .divider::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border-radius: 50%; background: var(--purple); border: 3px solid var(--white);
}
.compare input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
}
.compare input[type="range"]:focus-visible + .divider::after { outline: 3px solid var(--lavender); outline-offset: 2px; }
.tag {
  position: absolute; bottom: 10px; padding: 3px 10px; border-radius: 999px;
  background: rgba(47, 44, 45, .8); color: var(--white); font-size: .8rem; font-weight: 600; pointer-events: none;
}
.tag-before { left: 10px; }
.tag-after { right: 10px; }

/* Dark Instagram profile banner */
.insta-banner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 20px 28px;
  margin-top: 24px; padding: 20px 24px;
  background: var(--charcoal-deep);
  border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.gallery:empty + .insta-banner { margin-top: 0; }
.insta-profile { display: flex; align-items: center; gap: 16px; min-width: 0; text-decoration: none; color: var(--on-dark); }
.insta-avatar {
  flex: none; display: grid; place-items: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--charcoal);
  /* Story-style ring in brand colors */
  box-shadow: 0 0 0 2px var(--charcoal-deep), 0 0 0 4px var(--lavender);
}
.insta-avatar img { width: 82%; height: auto; }
.insta-meta { display: grid; gap: 2px; min-width: 0; }
.insta-handle { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 1.1rem; color: var(--white); }
.insta-handle .icon { color: var(--lavender); }
.insta-name { font-size: .95rem; font-weight: 600; color: var(--on-dark); }
.insta-bio { font-size: .95rem; color: var(--on-dark-muted); }
.insta-profile:hover .insta-handle { text-decoration: underline; }
.insta-thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: 76px; gap: 6px; }
.insta-thumbs img { width: 76px; height: 76px; object-fit: cover; border-radius: 8px; transition: opacity .15s; }
.insta-thumbs:hover img { opacity: .85; }
.insta-follow { white-space: nowrap; }

@media (max-width: 960px) {
  .insta-banner { grid-template-columns: minmax(0, 1fr) auto; }
  .insta-thumbs { grid-column: 1 / -1; grid-row: 2; grid-auto-columns: 1fr; }
  .insta-thumbs img { width: 100%; height: auto; aspect-ratio: 1; }
}
@media (max-width: 640px) {
  .insta-banner { grid-template-columns: 1fr; padding: 18px; }
  .insta-thumbs { grid-row: auto; }
  .insta-follow { width: 100%; }
}

/* Reviews */
.reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.review { margin: 0; padding: 26px; background: var(--card); border-radius: var(--radius); }
.review blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.15rem; line-height: 1.55; color: var(--white); }
.review figcaption { margin-top: 14px; color: var(--on-dark-muted); font-size: .95rem; }
.review figcaption strong { color: var(--lavender); font-weight: 600; }

/* FAQ */
.faq-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq-side { position: sticky; top: calc(var(--header-h) + 24px); }
/* Dark card on the white section, for contrast */
.ask-card {
  position: relative; overflow: hidden;
  padding: 28px; border-radius: 20px;
  background: radial-gradient(120% 90% at 100% 0%, rgba(75, 68, 160, .55), transparent 60%), var(--charcoal);
  color: var(--on-dark);
  box-shadow: 0 24px 44px -26px rgba(47, 44, 45, .7);
}
.ask-icon {
  display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px;
  border-radius: 12px; background: rgba(156, 163, 232, .16); color: var(--lavender);
}
.ask-card h3 { font-size: 1.3rem; font-weight: 700; color: var(--white); }
.ask-card p { margin-top: 8px; color: var(--on-dark-muted); }
.ask-card .btn { margin-top: 20px; }

/* Each question is its own card */
.faq { display: grid; gap: 12px; }
.faq details {
  border-radius: 14px; background: var(--white);
  border: 1px solid #e6e4ef; border-left: 4px solid transparent;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.faq details:hover { border-color: #d6d3e8; border-left-color: rgba(75, 68, 160, .35); }
.faq details[open] {
  background: var(--lavender-tint); border-color: #dcd9ee; border-left-color: var(--purple);
  box-shadow: 0 14px 30px -22px rgba(75, 68, 160, .6);
}
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 20px; font-weight: 600; font-size: 1.08rem;
}
.faq summary::-webkit-details-marker { display: none; }
/* Plus icon that turns into a minus when open */
.faq summary::after {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background:
    linear-gradient(var(--purple), var(--purple)) center / 12px 2px no-repeat,
    linear-gradient(var(--purple), var(--purple)) center / 2px 12px no-repeat,
    rgba(75, 68, 160, .1);
  transition: transform .25s, background-size .25s;
}
.faq details[open] summary::after {
  transform: rotate(180deg);
  background:
    linear-gradient(var(--white), var(--white)) center / 12px 2px no-repeat,
    linear-gradient(var(--white), var(--white)) center / 2px 0 no-repeat,
    var(--purple);
}
.faq details p { padding: 0 20px 20px; color: var(--text-muted); max-width: 62ch; }
.faq details a { color: var(--purple); }

/* Quote */
.quote-section { padding-top: 0; }
.quote-layout {
  display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(28px, 5vw, 72px); align-items: start;
  background: var(--lavender-tint); border-radius: 22px;
  padding-top: clamp(28px, 5vw, 56px); padding-bottom: clamp(28px, 5vw, 56px);
}
.quote-intro h2 {
  font-weight: 800; font-stretch: 115%; font-variation-settings: "wdth" 115;
  font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -.01em;
}
.quote-intro > p { margin-top: 12px; color: var(--text-muted); font-size: 1.1rem; }
.contact-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.contact-list li { display: flex; align-items: center; gap: 12px; overflow-wrap: break-word; min-width: 0; }
.contact-list .icon { color: var(--purple); }
.contact-list a { text-decoration: none; font-weight: 500; }
.contact-list a:hover { text-decoration: underline; }

/* The form sits on a raised white card inside the lavender panel */
.quote-form, .quote-sent {
  background: var(--white); border-radius: 18px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid #e3e1ef;
  box-shadow: 0 30px 60px -38px rgba(75, 68, 160, .55);
}
.quote-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.quote-intro .contact-list li a, .quote-intro .contact-list li span { font-weight: 600; }
.quote-intro .contact-list .icon {
  box-sizing: content-box; padding: 9px; border-radius: 10px;
  background: var(--white); border: 1px solid #e3e1ef;
}
.field { display: grid; align-content: start; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field-wide { grid-column: 1 / -1; }
.field label, .field legend { font-weight: 600; font-size: .95rem; padding: 0; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text);
  background: var(--white); border: 1.5px solid #cfccdc; border-radius: 10px;
  padding: 12px 14px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(75, 68, 160, .2); }
.field [aria-invalid="true"] { border-color: #b3261e; }
.checks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 4px; }
.checks label { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }
.checks input { width: 18px; height: 18px; accent-color: var(--purple); }
.addon-price { color: var(--purple); font-weight: 600; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.form-note { font-size: .9rem; color: var(--text-muted); }
.form-error { grid-column: 1 / -1; color: #b3261e; font-weight: 600; }
.form-required-note { font-size: .9rem; color: var(--text-muted); margin-bottom: -6px; }
.req { color: #b3261e; font-weight: 700; }
.field-error { display: flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 600; color: #b3261e; }
.field-error::before {
  content: "!"; flex: none; display: grid; place-items: center;
  width: 16px; height: 16px; border-radius: 50%; background: #b3261e; color: var(--white); font-size: .7rem; font-weight: 800;
}
.optional { font-weight: 400; color: var(--text-muted); }
.btn:disabled { opacity: .65; cursor: progress; }

.quote-sent {
  display: grid; justify-items: start; gap: 14px;
  padding: clamp(28px, 4vw, 44px);
  background: var(--white); border-radius: var(--radius);
  border-top: 5px solid var(--purple);
}
.quote-sent:focus { outline: none; }
.sent-check { width: 56px; height: 56px; border-radius: 50%; background: var(--purple); display: grid; place-items: center; }
.sent-check svg { width: 30px; height: 30px; fill: none; stroke: var(--white); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.quote-sent h3 {
  font-weight: 800; font-stretch: 115%; font-variation-settings: "wdth" 115;
  font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--charcoal);
}
.quote-sent p { color: var(--text-muted); max-width: 46ch; font-size: 1.08rem; }
.quote-sent p strong { color: var(--text); }
.quote-sent .sent-sub a { color: var(--purple); font-weight: 600; }
.quote-sent .btn { margin-top: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .quote-sent:not([hidden]) .sent-check { animation: pop .4s cubic-bezier(.3, 1.4, .5, 1); }
  @keyframes pop { from { transform: scale(.4); opacity: 0; } }
}

/* Footer */
.site-footer {
  position: relative; overflow: hidden;
  background: var(--charcoal-deep); color: var(--on-dark); padding: 36px 0 32px;
}
/* Faint car swoosh in the corner, like the back of the business card */
.site-footer::before {
  content: ""; position: absolute; right: -6%; bottom: 36px;
  width: min(900px, 90vw); aspect-ratio: 997 / 165;
  background: url("../assets/swoosh-light.png") no-repeat center / contain;
  opacity: .07; pointer-events: none;
}
.footer-inner { position: relative; display: grid; grid-template-columns: 1.4fr .8fr 1.2fr; gap: 36px 56px; align-items: start; }
.footer-brand img { width: 220px; height: auto; }
.footer-tagline { margin-top: 12px; font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--lavender); }
.footer-about { margin-top: 10px; max-width: 34ch; color: var(--on-dark-muted); font-size: .98rem; }
.footer-brand .btn { margin-top: 20px; }
.footer-heading {
  font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 16px;
  padding-bottom: 10px; border-bottom: 2px solid var(--purple); display: inline-block;
}
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.footer-links a, .site-footer .contact-list a { text-decoration: none; color: var(--on-dark); transition: color .15s; }
.footer-links a:hover, .site-footer .contact-list a:hover { color: var(--lavender); text-decoration: underline; }
.site-footer .contact-list { margin: 0; }
.site-footer .contact-list .icon { color: var(--lavender); }
.footer-bottom {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-top: 22px; border-top: 1px solid #47434a; font-size: .9rem; color: var(--on-dark-muted);
}
.footer-bottom a { color: var(--on-dark-muted); }
.footer-bottom a:hover { color: var(--lavender); }

/* Pause/play button on moving media */
.media-toggle {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(47, 44, 45, .62); color: var(--white);
  backdrop-filter: blur(4px);
  opacity: .75; transition: opacity .15s, background-color .15s;
}
.media-toggle .icon { width: 16px; height: 16px; }
.media-toggle:hover, .media-toggle:focus-visible { opacity: 1; background: var(--purple); }

/* Even-width numbers for prices */
.price, .addons dd, .addon-price { font-variant-numeric: tabular-nums; }

/* Tablet */
@media (max-width: 1060px) {
  .packages { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }
}
@media (max-width: 960px) {
  .site-nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 8px var(--gutter) 18px;
    background: var(--white); border-bottom: 1px solid #ebeaf0;
    box-shadow: 0 12px 24px rgba(47, 44, 45, .08);
  }
  .site-nav:not(.open) { display: none; }
  .site-nav a { padding: 14px 0; border-bottom: 1px solid #f0eff4; }
  .nav-toggle {
    display: grid; place-items: center; width: 46px; height: 46px; margin-left: 4px;
    background: none; border: 0; cursor: pointer; border-radius: 10px;
  }
  .header-call { margin-left: auto; }
  .bars, .bars::before, .bars::after { display: block; width: 24px; height: 2.5px; background: var(--charcoal); border-radius: 2px; position: relative; transition: transform .2s, opacity .2s; }
  .bars::before, .bars::after { content: ""; position: absolute; left: 0; }
  .bars::before { top: -7px; }
  .bars::after { top: 7px; }
  .nav-toggle[aria-expanded="true"] .bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-7px) rotate(-45deg); }

  .has-hero-photo .hero { text-align: center; }
  .has-hero-photo .hero-inner { grid-template-columns: 1fr; }
  .has-hero-photo .hero-copy { justify-items: center; }
  .has-hero-photo .hero-actions { justify-content: center; }
  .has-hero-photo .hero-media { aspect-ratio: 4 / 3; order: -1; }

  .steps { grid-template-columns: 1fr; gap: 30px; }
  .steps::before { top: 32px; bottom: 32px; left: 31px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--lavender), var(--purple) 55%, rgba(75, 68, 160, .2)); }
  .steps li { display: grid; grid-template-columns: 64px 1fr; column-gap: 20px; }
  .step-icon { grid-row: span 2; margin: 0; }
  .faq-layout, .quote-layout { grid-template-columns: 1fr; }
  .faq-side { position: static; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* Phone */
@media (max-width: 640px) {
  :root { --header-h: 64px; }
  .brand img { height: 36px; }
  .header-call span { display: none; }
  .header-call { padding: 0; width: 44px; height: 44px; }
  .hero-actions { flex-direction: column; align-self: stretch; }
  .hero-actions .btn { width: 100%; }
  .packages { grid-template-columns: 1fr; }
  .quote-layout { border-radius: 0; }
  .quote-form { grid-template-columns: 1fr; }
  .form-actions .btn { width: 100%; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero-facts { flex-direction: column; align-items: center; gap: 10px; }
}