:root {
  --black: #090909;
  --charcoal: #141414;
  --charcoal-soft: #1c1c1c;
  --gold: #c79a3a;
  --gold-bright: #f0c875;
  --gold-dark: #8f6a20;
  --white: #fff;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  background: var(--black);
  color: #ececec;
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: Montserrat, Arial, sans-serif; margin: 0 0 .65rem; }
p { margin: 0 0 .9rem; }

.container { width: min(1180px, 92%); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 50; background: #0d0d0d; border-bottom: 1px solid rgba(255,255,255,.12); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .8rem 0; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-family: Montserrat, Arial, sans-serif; font-weight: 800; }
.brand img { width: 38px; height: 38px; object-fit: contain; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .72rem 1.15rem;
  border-radius: 10px;
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 800;
  border: 1px solid transparent;
}
.btn-gold {
  color: #1b1409;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 58%, var(--gold-dark));
  box-shadow: 0 8px 22px rgba(199, 154, 58, .28);
}
.btn-dark { background: #171717; color: var(--white); border-color: rgba(255,255,255,.2); }

.hero { padding: 2.1rem 0 1.1rem; background: radial-gradient(circle at top left, #232323 0%, #111 45%, #090909 100%); }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: center; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; color: var(--gold-bright); font-size: .78rem; font-weight: 700; }
.hero h1 { font-size: clamp(1.9rem, 4.9vw, 3.1rem); text-transform: uppercase; max-width: 18ch; }
.price-line { font-weight: 700; color: #f2d38f; }
.hero-image {
  min-height: 320px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.2) 60%),
    var(--hero-image, url("https://images.unsplash.com/photo-1556742393-d75f468bfcb0?auto=format&fit=crop&w=1300&q=80")) center/cover no-repeat;
}

.section { padding: 1rem 0 1.2rem; }
.panel {
  background: var(--charcoal-soft);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 1rem;
}
.panel h2 { font-size: 1.25rem; color: #fff; }
.panel ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.panel li { margin-bottom: .45rem; }
.panel li::marker { color: #efc264; }

.feature-strip { display: grid; grid-template-columns: 1fr; gap: .65rem; }
.feature-card {
  background: linear-gradient(180deg, #151515 0%, #111 100%);
  border: 1px solid rgba(199,154,58,.45);
  border-radius: 12px;
  padding: .75rem;
}
.feature-card h3 { font-size: .95rem; color: #fff; margin: 0 0 .2rem; }
.feature-card p { font-size: .82rem; margin: 0; color: #cfcfcf; }
.feature-card .icon { color: #f0c875; margin-right: .35rem; }

.two-col { display: grid; grid-template-columns: 1fr; gap: .8rem; }
.included-grid { display: grid; grid-template-columns: 1fr; gap: .7rem; }
.included-item {
  background: #131313;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: .75rem;
}
.included-item .icon { color: #f0c875; display: inline-block; margin-bottom: .25rem; }

.why-grid { display: grid; grid-template-columns: 1fr; gap: .8rem; align-items: center; }
.why-grid ul { padding-left: 1.1rem; }
.why-grid li { margin-bottom: .4rem; }
.why-grid li::marker { color: #efc264; }
.why-image {
  min-height: 240px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.2)),
    var(--why-image, url("https://images.unsplash.com/photo-1519643381401-22c77e60520e?auto=format&fit=crop&w=1200&q=80")) center/cover no-repeat;
}

.process-grid { display: grid; grid-template-columns: 1fr; gap: .7rem; }
.process-step {
  background: #121212;
  border: 1px solid rgba(199,154,58,.45);
  border-radius: 12px;
  padding: .8rem;
}
.process-step .icon { color: #f0c875; display: inline-grid; place-content: center; width: 34px; height: 34px; border: 1px solid rgba(240,200,117,.7); border-radius: 999px; margin-bottom: .35rem; }

.quote-section .panel { border-color: rgba(199,154,58,.6); }
.service-form { display: grid; gap: .45rem; }
.service-form label { font-size: .82rem; font-weight: 600; color: #dedede; }
.service-form input,
.service-form select,
.service-form textarea {
  width: 100%;
  min-height: 48px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.22);
  background: #171717;
  color: #fff;
  padding: .65rem .75rem;
  font: inherit;
}
.service-form textarea { resize: vertical; min-height: 96px; }
.service-form input[type="file"] { padding: .55rem; }
.vin-input {
  border-color: rgba(240,200,117,.85) !important;
  box-shadow: 0 0 0 3px rgba(199,154,58,.16);
  text-transform: uppercase;
}
.form-note { margin: .4rem 0 0; text-align: center; font-size: .78rem; color: #bdbdbd; }

.final-cta {
  background: linear-gradient(90deg, #2b220f 0%, #171717 38%, #2b220f 100%);
  border: 1px solid rgba(199,154,58,.45);
  border-radius: 16px;
  padding: 1rem;
}
.cta-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.back-link { color: #efc264; font-weight: 700; display: inline-block; margin-top: .3rem; }
.mobile-call-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #1d1309;
  text-align: center;
  font-family: Montserrat, Arial, sans-serif;
  font-weight: 800;
  padding: .78rem .5rem;
  box-shadow: 0 -8px 20px rgba(0,0,0,.35);
}

@media (min-width: 768px) {
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .feature-strip { grid-template-columns: repeat(4, 1fr); }
  .two-col { grid-template-columns: 1fr 1fr; }
  .included-grid { grid-template-columns: repeat(4, 1fr); }
  .process-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .btn { width: 100%; }
  .header-inner { flex-wrap: wrap; }
  body { padding-bottom: 64px; }
}

@media (min-width: 769px) {
  .mobile-call-bar { display: none; }
  body { padding-bottom: 0; }
}