/* =========================================================
   A-Z's Mobile Detailing — styles
   Palette: deep wine/maroon + chrome silver + near-black
   ========================================================= */

:root{
  --wine:      #7a1524;   /* deep maroon */
  --wine-2:    #a81f38;   /* brighter wine accent */
  --wine-deep: #4a0c17;   /* darkest wine */
  --ink:       #160a0e;   /* near-black base */
  --ink-2:     #241318;
  --silver:    #d9dde3;
  --silver-2:  #a7adb6;
  --silver-hi: #f2f4f6;
  --muted:     #6d5c61;   /* warm gray body text on light */
  --line:      #ece3e5;
  --bg:        #ffffff;
  --bg-alt:    #faf5f6;   /* very light warm rose-gray */
  --radius:    16px;
  --shadow:    0 22px 55px rgba(20,6,10,.16);
  --chrome:    linear-gradient(180deg,#f6f8fa 0%,#c3c9d1 44%,#eaecef 54%,#9aa1aa 100%);
  --grad-wine: linear-gradient(135deg,#a81f38 0%,#6e0f1f 100%);
  --grad-dark: linear-gradient(160deg,#2a1519 0%,#130709 70%);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.container{ width:min(1160px, 92%); margin-inline:auto; }
h1,h2,h3{ line-height:1.1; letter-spacing:-.02em; }
a{ color:inherit; text-decoration:none; }
section{ scroll-margin-top:78px; }
img{ max-width:100%; }

/* ---------- Buttons ---------- */
.btn{
  --btn-bg: var(--grad-wine);
  display:inline-flex; align-items:center; justify-content:center; gap:.45em;
  background:var(--btn-bg); color:#fff; font-weight:700;
  padding:.75em 1.35em; border-radius:999px; border:0; cursor:pointer;
  font-size:.98rem; transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 12px 26px rgba(122,21,36,.32);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(122,21,36,.42); }
.btn-lg{ padding:.92em 1.75em; font-size:1.05rem; }
.btn-sm{ padding:.55em 1.05em; font-size:.9rem; }
.btn-full{ width:100%; }
.btn-chrome{
  background:var(--chrome); color:var(--wine-deep);
  box-shadow:0 12px 26px rgba(0,0,0,.28); text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.btn-chrome:hover{ box-shadow:0 16px 34px rgba(0,0,0,.36); }
.btn-ghost{
  background:transparent; color:#fff;
  box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.5);
}
.btn-ghost:hover{ box-shadow:inset 0 0 0 1.6px #fff; }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(19,7,9,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:box-shadow .2s ease, background .2s ease;
}
.nav.scrolled{ box-shadow:0 6px 24px rgba(0,0,0,.35); background:rgba(19,7,9,.94); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:70px; }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:800; }
.brand-mark{ width:40px; height:40px; border-radius:11px; display:block; box-shadow:0 6px 16px rgba(0,0,0,.4); }
.brand-text{ color:#fff; font-size:1.02rem; letter-spacing:.01em; }
.brand-text small{ display:block; font-size:.62rem; font-weight:600; letter-spacing:.22em; color:var(--silver-2); text-transform:uppercase; margin-top:1px; }
.links{ display:flex; align-items:center; gap:1.5rem; }
.links a{ color:var(--silver); font-weight:600; font-size:.94rem; }
.links a:hover{ color:#fff; }
.links a.btn{ color:#fff; }
.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.burger span{ width:24px; height:2.5px; background:var(--silver); border-radius:2px; transition:.2s; }

/* ---------- Hero ---------- */
.hero{
  position:relative; color:#fff; overflow:hidden; overflow-x:clip;
  background:
    radial-gradient(900px 460px at 82% -10%, rgba(168,31,56,.55), transparent 60%),
    radial-gradient(700px 500px at 8% 108%, rgba(74,12,23,.7), transparent 55%),
    var(--grad-dark);
}
.hero::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.06) 47%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.06) 53%, transparent 60%);
}
.hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; padding:84px 0 92px; }
.hero-copy{ max-width:600px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; flex-wrap:wrap; max-width:100%;
  text-transform:uppercase; letter-spacing:.16em; font-size:.74rem; font-weight:700;
  color:var(--silver); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  padding:.4em .85em; border-radius:999px; margin-bottom:1.2rem;
}
.eyebrow .star{ color:#ffcf3f; letter-spacing:0; }
.hero h1{ font-size:clamp(2.5rem, 6vw, 4.2rem); font-weight:900; margin-bottom:1.1rem; }
.hero h1 .chrome-text{
  background:var(--chrome); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede{ font-size:1.16rem; color:rgba(255,255,255,.86); max-width:540px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin:1.9rem 0 1.5rem; }
.hero-trust{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem 1.3rem; font-weight:600; font-size:.92rem; color:var(--silver); }
.hero-trust li{ display:flex; align-items:center; gap:.4rem; }
.hero-trust li::before{ content:"✓"; color:var(--wine-2); font-weight:900; }

/* hero photo */
.hero-photo{ position:relative; }
.hero-photo img{
  width:100%; height:clamp(360px, 46vw, 560px); object-fit:cover;
  border-radius:20px; display:block;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.12);
}
.hero-badge{
  position:absolute; left:-14px; bottom:22px;
  background:var(--chrome); color:var(--wine-deep);
  border-radius:14px; padding:.7rem 1rem; box-shadow:0 16px 34px rgba(0,0,0,.4);
  display:flex; align-items:center; gap:.6rem;
}
.hero-badge .rating{ font-weight:900; font-size:1.5rem; line-height:1; }
.hero-badge .sub{ font-size:.72rem; font-weight:700; line-height:1.2; }
.hero-badge .sub .gstars{ color:#e8a400; letter-spacing:1px; }

/* ---------- Sections ---------- */
.section{ padding:86px 0; }
.section-alt{ background:var(--bg-alt); }
.section-dark{ background:var(--ink); color:#fff; }
.section-head{ text-align:center; max-width:660px; margin:0 auto 3rem; }
.section-head .kicker{ display:block; text-transform:uppercase; letter-spacing:.18em; font-size:.76rem; font-weight:800; color:var(--wine-2); margin-bottom:.7rem; }
.section-head h2{ font-size:clamp(1.9rem, 4vw, 2.7rem); color:var(--wine-deep); margin-bottom:.6rem; }
.section-dark .section-head h2{ color:#fff; }
.section-head p{ color:var(--muted); font-size:1.1rem; }
.section-dark .section-head p{ color:var(--silver-2); }

/* ---------- Meet Zack ---------- */
.about-band{ display:grid; grid-template-columns:400px 1fr; gap:3rem; align-items:center; }
.about-photo{ position:relative; }
.about-photo img{ width:100%; height:auto; border-radius:20px; box-shadow:var(--shadow); display:block; }
.about-tag{
  position:absolute; right:-12px; top:-12px; background:var(--grad-wine); color:#fff;
  font-weight:800; font-size:.8rem; letter-spacing:.04em; padding:.55em .95em; border-radius:12px;
  box-shadow:0 10px 22px rgba(122,21,36,.4);
}
.about-copy .kicker{ text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; font-weight:800; color:var(--wine-2); margin-bottom:.5rem; }
.about-copy h2{ color:var(--wine-deep); font-size:clamp(1.9rem,4vw,2.6rem); margin-bottom:.85rem; }
.about-copy p{ color:var(--muted); font-size:1.06rem; margin-bottom:1rem; }
.about-sign{ font-weight:800; color:var(--wine-deep)!important; margin:.4rem 0 1.4rem!important; }
.about-sign small{ display:block; font-weight:600; color:var(--muted); font-size:.85rem; letter-spacing:.02em; }
@media(max-width:820px){
  .about-band{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:1.8rem; }
  .about-photo{ max-width:360px; }
}

/* ---------- Service cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1.6rem; }
.card{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:2rem 1.8rem; box-shadow:0 10px 26px rgba(20,6,10,.05);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:#e3cdd2; }
.card-icon{
  width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
  font-size:1.6rem; margin-bottom:1.1rem;
  background:linear-gradient(135deg,#f7e7ea,#f3d7dd); color:var(--wine);
}
.card h3{ color:var(--wine-deep); font-size:1.3rem; margin-bottom:.5rem; }
.card p{ color:var(--muted); margin-bottom:1rem; font-size:.98rem; }
.card ul{ list-style:none; display:grid; gap:.45rem; }
.card ul li{ position:relative; padding-left:1.5rem; color:var(--ink); font-weight:500; font-size:.95rem; }
.card ul li::before{ content:"✓"; position:absolute; left:0; color:var(--wine-2); font-weight:800; }

/* full services list */
.svc-all{ margin-top:2.4rem; text-align:center; }
.svc-all .kicker{ text-transform:uppercase; letter-spacing:.16em; font-size:.74rem; font-weight:800; color:var(--muted); margin-bottom:1rem; }
.svc-chips{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; max-width:820px; margin:0 auto; }
.svc-chips li{
  background:var(--bg-alt); border:1px solid var(--line); color:var(--wine-deep);
  font-weight:600; font-size:.88rem; padding:.45em 1em; border-radius:999px;
}

/* ---------- Pricing ---------- */
.promo-strip{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem;
  margin:0 auto 2.6rem; max-width:860px;
}
.promo{
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--grad-wine); color:#fff; font-weight:700; font-size:.95rem;
  padding:.65em 1.2em; border-radius:999px; box-shadow:0 10px 24px rgba(122,21,36,.3);
}
.promo a{ color:#ffd8de; text-decoration:underline; text-underline-offset:2px; }
.promo a:hover{ color:#fff; }
.tiers{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:1.5rem; align-items:stretch; }
.tier{
  display:flex; flex-direction:column;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.9rem 1.7rem; box-shadow:0 10px 26px rgba(20,6,10,.05);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tier:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:#e3cdd2; }
.tier-badge{
  align-self:flex-start; font-weight:800; font-size:.8rem; letter-spacing:.12em;
  text-transform:uppercase; padding:.4em 1em; border-radius:999px; margin-bottom:1rem;
  color:#3d2410; text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.tier-badge.bronze{ background:linear-gradient(135deg,#e0a866 0%,#b06c2d 55%,#8a5122 100%); }
.tier-badge.silver{ background:var(--chrome); color:#3b414a; }
.tier-badge.gold{ background:linear-gradient(135deg,#f8dd7e 0%,#d9ab2e 55%,#b8901f 100%); }
.tier-badge.diamond{ background:linear-gradient(135deg,#f2fbff 0%,#bcd9ea 50%,#8fb6cf 100%); color:#22475c; }
.tier-price{ font-size:2.3rem; font-weight:900; color:var(--wine-deep); line-height:1; }
.tier-price small{ font-size:.95rem; font-weight:600; color:var(--muted); }
.tier-tag{ color:var(--muted); font-weight:600; font-size:.95rem; margin:.4rem 0 1rem; }
.tier ul{ list-style:none; display:grid; gap:.5rem; margin-bottom:1.5rem; }
.tier ul li{ position:relative; padding-left:1.5rem; color:var(--ink); font-weight:500; font-size:.94rem; }
.tier ul li::before{ content:"✓"; position:absolute; left:0; color:var(--wine-2); font-weight:800; }
.tier .btn{ margin-top:auto; }
.tier.featured{ border:2px solid var(--wine-2); box-shadow:0 16px 40px rgba(122,21,36,.16); }
.addons{
  margin-top:2.6rem; background:var(--bg-alt); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.9rem 2rem;
}
.addons h3{ color:var(--wine-deep); font-size:1.2rem; margin-bottom:1.1rem; text-align:center; }
.addon-list{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:.7rem 2.4rem; max-width:820px; margin:0 auto; }
.addon-list li{ display:flex; align-items:baseline; gap:.6rem; font-size:.96rem; color:var(--ink); }
.addon-list .dots{ flex:1; border-bottom:2px dotted #d9c3c8; transform:translateY(-4px); }
.addon-list .price{ font-weight:800; color:var(--wine-deep); white-space:nowrap; }
.addon-list .note{ display:block; font-size:.8rem; color:var(--muted); font-weight:500; }
.fine-print{ margin-top:1.6rem; text-align:center; color:var(--muted); font-size:.85rem; max-width:720px; margin-inline:auto; }
@media(max-width:640px){ .addon-list{ grid-template-columns:1fr; } }

/* ---------- Gallery ---------- */
.gallery{ display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:200px; gap:1rem; }
.gallery figure{ position:relative; overflow:hidden; border-radius:14px; box-shadow:0 12px 30px rgba(0,0,0,.28); }
.gallery img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.gallery figure:hover img{ transform:scale(1.06); }
.gallery .g-wide{ grid-column:span 2; }
.gallery .g-tall{ grid-row:span 2; }
.gallery figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:.9rem 1rem .7rem;
  background:linear-gradient(to top, rgba(19,7,9,.82), transparent);
  color:#fff; font-weight:700; font-size:.85rem; letter-spacing:.01em;
}
@media(max-width:820px){
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; }
  .gallery .g-wide{ grid-column:span 2; }
  .gallery .g-tall{ grid-row:span 1; }
}

/* ---------- Why / How it works ---------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:1.5rem; }
.step{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius); padding:1.8rem;
}
.step .num{
  display:inline-grid; place-items:center; width:40px; height:40px; border-radius:11px;
  background:var(--chrome); color:var(--wine-deep); font-weight:900; margin-bottom:1rem;
}
.step h3{ color:#fff; font-size:1.22rem; margin-bottom:.4rem; }
.step p{ color:var(--silver-2); font-size:.97rem; }
.step .flag{ display:inline-block; margin-top:.7rem; font-size:.8rem; font-weight:700; color:var(--wine-2); background:rgba(168,31,56,.14); border:1px solid rgba(168,31,56,.3); padding:.25em .7em; border-radius:999px; }

/* ---------- Reviews ---------- */
.reviews-head{ display:flex; flex-direction:column; align-items:center; gap:.4rem; margin-bottom:2.4rem; }
.reviews-head .big{ font-size:3rem; font-weight:900; color:var(--wine-deep); line-height:1; }
.reviews-head .gstars{ color:#e8a400; font-size:1.4rem; letter-spacing:2px; }
.reviews-head .src{ color:var(--muted); font-weight:600; font-size:.95rem; }
.reviews{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1.6rem; }
.review{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.9rem; box-shadow:0 10px 26px rgba(20,6,10,.05);
}
.review .stars{ color:#e8a400; letter-spacing:.12em; font-size:1.05rem; margin-bottom:.7rem; }
.review blockquote{ color:var(--ink); font-size:1.02rem; line-height:1.55; margin-bottom:1rem; }
.review figcaption{ font-weight:700; color:var(--wine-deep); font-size:.95rem; }
.review figcaption span{ color:var(--muted); font-weight:500; }

/* ---------- Service area ---------- */
.area-inner{ max-width:780px; text-align:center; margin:0 auto; }
.area-inner h2{ font-size:clamp(1.9rem,4vw,2.6rem); color:var(--wine-deep); margin-bottom:1rem; }
.area-inner .lede{ color:var(--muted); margin:0 auto 1.6rem; }
.chips{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin:0 auto 2rem; max-width:660px; }
.chips li{
  background:#fff; color:var(--wine-deep); font-weight:600; font-size:.9rem;
  padding:.45em 1em; border-radius:999px; border:1px solid var(--line);
}
.spots{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; max-width:680px; margin:0 auto 2rem; }
.spot{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem 1.5rem; text-align:left; box-shadow:0 10px 26px rgba(20,6,10,.05);
}
.spot .pin{ font-size:1.3rem; }
.spot h3{ color:var(--wine-deep); font-size:1.1rem; margin:.3rem 0 .25rem; }
.spot p{ color:var(--muted); font-size:.92rem; }
@media(max-width:620px){ .spots{ grid-template-columns:1fr; } }

/* ---------- Estimate / Booking ---------- */
.section-cta{ background:var(--grad-dark); position:relative; overflow:hidden; }
.section-cta::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(700px 360px at 85% 0%, rgba(168,31,56,.4), transparent 60%);
}
.estimate-card{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center;
  background:#fff; border-radius:24px; padding:2.6rem; box-shadow:var(--shadow);
}
.estimate-copy h2{ color:var(--wine-deep); font-size:clamp(1.8rem,3.5vw,2.4rem); margin-bottom:.7rem; }
.estimate-copy p{ color:var(--muted); font-size:1.05rem; }
.estimate-copy a{ color:var(--wine-2); font-weight:700; }
.cta-note{ margin-top:1rem; font-weight:600; color:var(--wine-deep)!important; }
.estimate-form{ display:grid; gap:1rem; }
.field{ display:grid; gap:.35rem; }
.field label{ font-weight:600; font-size:.9rem; color:var(--wine-deep); }
.field .opt{ color:var(--muted); font-weight:400; }
.field input, .field select, .field textarea{
  font:inherit; padding:.75em .9em; border:1.5px solid var(--line); border-radius:12px;
  background:var(--bg-alt); transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--wine-2); box-shadow:0 0 0 3px rgba(168,31,56,.15); background:#fff;
}
.form-note{ font-size:.9rem; color:var(--muted); text-align:center; }

/* ---------- Footer ---------- */
.footer{ background:#0f0507; color:#c9b9bd; padding:56px 0 0; }
.footer-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem; align-items:flex-start; }
.footer-brand{ display:flex; align-items:center; gap:.7rem; }
.footer-name{ font-weight:800; color:#fff; font-size:1.15rem; }
.footer-name small{ display:block; font-weight:600; font-size:.72rem; letter-spacing:.16em; color:var(--wine-2); text-transform:uppercase; margin-top:2px; }
.footer-sub{ font-size:.92rem; color:#9a878c; margin-top:1rem; max-width:340px; }
.footer-contact{ display:flex; flex-direction:column; gap:.7rem; }
.footer-contact a.line{ color:#e7d7db; font-weight:600; display:flex; align-items:center; gap:.5rem; }
.footer-contact a.line:hover{ color:#fff; }
.footer-btns{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.3rem; }
.copyright{ text-align:center; color:#7a686d; font-size:.85rem; padding:30px 0; margin-top:42px; border-top:1px solid rgba(255,255,255,.07); }

/* ---------- Sticky mobile call bar ---------- */
.call-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--grad-wine); color:#fff; text-align:center; font-weight:700;
  padding:.9em; box-shadow:0 -6px 20px rgba(0,0,0,.3);
}

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; gap:2.2rem; padding:60px 0 72px; }
  .hero-photo img{ height:clamp(300px, 70vw, 420px); }
  .estimate-card{ grid-template-columns:1fr; padding:1.9rem; }
}
@media (max-width:720px){
  .burger{ display:flex; }
  .links{
    position:absolute; top:70px; left:0; right:0; flex-direction:column; gap:0;
    background:rgba(19,7,9,.98); box-shadow:0 12px 24px rgba(0,0,0,.4);
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .links.open{ max-height:460px; padding:.5rem 0; }
  .links a{ padding:.9rem 1.4rem; width:100%; }
  .links a.btn{ margin:.6rem 1.4rem; width:auto; }
  .call-bar{ display:block; }
  body{ padding-bottom:56px; }
}
@media (max-width:430px){
  .hero h1{ font-size:2.15rem; }
  .eyebrow{ font-size:.66rem; letter-spacing:.1em; }
  .hero-trust{ font-size:.86rem; }
}