/* ============================================================
   MAIN.CSS — CarRecoveryNear.me
   ============================================================ */
:root {
  --orange:     #ff6b00;
  --orange-dk:  #a04100;
  --orange-lt:  #fff3eb;
  --white:      #ffffff;
  --offwhite:   #f9f9f9;
  --surface-lo: #f3f3f3;
  --border:     #e2bfb0;
  --border-lt:  #e2e2e2;
  --dark:       #1a1c1c;
  --mid:        #5f5e5e;
  --radius:     2px;
  --shadow:     0 4px 24px rgba(0,0,0,.09);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.15);
  --font:       'Inter', sans-serif;
}
*,*::before,*::after { box-sizing:border-box;margin:0;padding:0 }
html { scroll-behavior:smooth }
body { font-family:var(--font);color:var(--dark);background:var(--offwhite);
  line-height:1.6;padding-bottom:80px;-webkit-font-smoothing:antialiased }
img  { max-width:100%;display:block }
a    { text-decoration:none;color:inherit }

/* --- Typography --- */
h1 { font-size:clamp(2rem,4.5vw,3rem);font-weight:800;line-height:1.1;letter-spacing:-.02em }
h2 { font-size:clamp(1.5rem,3vw,2rem);font-weight:700;line-height:1.2;letter-spacing:-.01em }
h3 { font-size:1.25rem;font-weight:700;line-height:1.3 }
p  { color:var(--mid);line-height:1.65 }

/* --- Topbar --- */
.topbar { background:var(--orange);color:#fff;padding:10px 24px;text-align:center }
.topbar-inner { max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;
  align-items:center;gap:12px;flex-wrap:wrap;font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em }
.topbar-left { display:flex;align-items:center;gap:6px }
.topbar-right { display:flex;align-items:center;gap:8px }
.topbar a { color:#fff }

/* --- Header --- */
.site-header { background:var(--white);border-bottom:1px solid var(--border-lt);
  position:sticky;top:0;z-index:900;box-shadow:0 2px 8px rgba(0,0,0,.06) }
.header-inner { max-width:1280px;margin:0 auto;padding:0 24px;height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:16px }
.logo { font-size:1.15rem;font-weight:900;text-transform:uppercase;
  letter-spacing:-.02em;color:var(--dark) }
.logo span { color:var(--orange) }
.js-sitelinks { display:flex;gap:8px;flex-wrap:wrap }
.js-sitelinks a { font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;padding:6px 12px;border:1px solid var(--border-lt);
  border-radius:var(--radius);color:var(--mid);transition:all .2s }
.js-sitelinks a:hover { background:var(--orange);color:#fff;border-color:var(--orange) }
.header-cta { display:flex;align-items:center;gap:7px;background:var(--orange);
  color:#fff;padding:10px 18px;font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;
  transition:opacity .2s,transform .15s }
.header-cta:hover { opacity:.9;transform:scale(1.02) }
.header-cta .ms { font-size:1rem }

/* --- Call Button --- */
.btn-call { display:inline-flex;align-items:center;gap:10px;background:var(--orange);
  color:#fff;padding:16px 28px;font-weight:700;font-size:1rem;
  text-transform:uppercase;letter-spacing:.06em;cursor:pointer;border:none;
  transition:opacity .2s,transform .15s,box-shadow .15s }
.btn-call:hover { opacity:.92;transform:scale(1.02);
  box-shadow:0 6px 20px rgba(255,107,0,.4) }
.btn-call .ms { font-size:1.2rem }
.btn-call--outline { background:transparent;color:var(--dark);border:2px solid var(--dark) }
.btn-call--outline:hover { background:var(--dark);color:#fff;box-shadow:none }
.btn-call--white { background:var(--white);color:var(--orange) }
.btn-call--white:hover { background:#f5f5f5;box-shadow:0 6px 20px rgba(0,0,0,.15) }

/* --- Hero --- */
.hero { background:var(--white);padding:80px 24px }
.hero-inner { max-width:1280px;margin:0 auto;display:grid;
  grid-template-columns:1fr 1fr;gap:64px;align-items:center }
.hero-badge { display:inline-flex;align-items:center;gap:6px;
  background:var(--orange-dk);color:#fff;padding:4px 12px;
  font-size:.65rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;margin-bottom:20px }
.hero-badge .ms { font-size:.9rem }
.hero h1 { color:var(--dark);margin-bottom:16px }
.hero h1 em { color:var(--orange);font-style:normal }
.hero-loc { color:var(--orange);font-weight:700;font-size:1.1rem;
  margin-bottom:16px;letter-spacing:-.01em }
.hero-sub { font-size:1.05rem;margin-bottom:28px;max-width:440px }
.hero-checks { list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:32px }
.hero-checks li { display:flex;align-items:center;gap:10px;font-size:.93rem;
  font-weight:600;color:var(--dark) }
.hero-checks .ms { color:var(--orange);font-size:1.1rem }
.hero-img-wrap { position:relative;display:flex;justify-content:flex-end }
.hero-img-circle { width:100%;max-width:440px;aspect-ratio:1;border-radius:50%;
  overflow:hidden;border:8px solid var(--surface-lo);box-shadow:var(--shadow-lg) }
.hero-img-circle img { width:100%;height:100%;object-fit:cover }
.hero-arrival { position:absolute;bottom:-16px;left:0;background:var(--white);
  padding:20px 24px;box-shadow:var(--shadow-lg);border:1px solid var(--border) }
.hero-arrival .num { font-size:2.4rem;font-weight:900;color:var(--orange);line-height:1 }
.hero-arrival .lbl { font-size:.62rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;color:var(--mid) }

/* --- How it works (3 cards) --- */
.steps { padding:72px 24px;background:var(--offwhite);border-bottom:1px solid var(--border-lt) }
.steps-inner { max-width:1280px;margin:0 auto }
.steps-inner h2 { margin-bottom:8px }
.steps-divider { height:4px;width:96px;background:var(--orange);margin:0 0 48px }
.steps-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px }
.step-card { background:var(--white);padding:40px;border:1px solid var(--border-lt);
  transition:border-color .2s }
.step-card:hover { border-color:var(--orange) }
.step-card .ms { font-size:3rem;color:var(--orange);margin-bottom:20px;display:block }
.step-card h3 { margin-bottom:12px;text-transform:uppercase;letter-spacing:-.01em }
.step-card .arrow { color:var(--orange);font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;margin-top:20px;display:block;
  transition:letter-spacing .2s }
.step-card:hover .arrow { letter-spacing:.2em }

/* --- Quote form --- */
.quote-section { padding:72px 24px;background:var(--surface-lo);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border) }
.quote-inner { max-width:560px;margin:0 auto }
.quote-eyebrow { font-size:.65rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.28em;color:var(--orange);margin-bottom:12px }
.quote-inner h2 { text-transform:uppercase;margin-bottom:8px }
.quote-inner .sub { color:var(--mid);margin-bottom:32px;font-size:.93rem }
.form-box { background:var(--white);padding:36px;border:1px solid var(--border) }
.form-group { display:flex;flex-direction:column;gap:5px;margin-bottom:20px }
.form-group label { font-size:.62rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;color:var(--mid) }
.form-group input,.form-group textarea {
  width:100%;background:var(--offwhite);border:1px solid var(--border-lt);
  padding:12px 14px;font-family:var(--font);font-size:.9rem;color:var(--dark);
  outline:none;transition:border-color .2s }
.form-group input:focus,.form-group textarea:focus { border-color:var(--orange) }
.req { color:var(--orange) }
.btn-submit { width:100%;padding:18px;background:var(--orange);color:#fff;
  font-family:var(--font);font-size:.82rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;border:none;cursor:pointer;transition:opacity .2s,transform .15s }
.btn-submit:hover { opacity:.92;transform:scale(1.01) }

/* --- Services --- */
.services { padding:72px 24px;background:var(--offwhite);
  border-bottom:1px solid var(--border-lt) }
.services-inner { max-width:1280px;margin:0 auto }
.services-header { display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:48px;gap:24px;flex-wrap:wrap }
.services-header h2 { text-transform:uppercase }
.services-header p { max-width:320px;font-size:.9rem }
.services-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px }
.service-card { background:var(--white);padding:40px;border:1px solid var(--border-lt);
  transition:border-color .2s;group }
.service-card:hover { border-color:var(--orange) }
.service-card .ms { font-size:3rem;color:var(--orange);margin-bottom:24px;display:block }
.service-card h3 { text-transform:uppercase;letter-spacing:-.01em;margin-bottom:12px }
.service-card .link { color:var(--orange);font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;margin-top:20px;display:block }

/* --- Testimonials --- */
.testimonials { padding:72px 24px;background:var(--surface-lo) }
.testi-inner { max-width:1280px;margin:0 auto }
.testi-eyebrow { font-size:.65rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.28em;color:var(--orange);margin-bottom:12px }
.testi-inner h2 { margin-bottom:48px }
.testi-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:24px }
.testi-card { background:var(--white);padding:48px;border:1px solid var(--border);
  position:relative }
.testi-quote-icon { position:absolute;top:24px;right:32px;font-size:4rem;
  color:var(--border-lt);font-family:var(--font) }
.testi-card p { font-size:1.05rem;font-style:italic;color:var(--dark);
  margin-bottom:24px;line-height:1.7;position:relative;z-index:1 }
.testi-name { font-size:.82rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--dark) }
.testi-role { font-size:.65rem;text-transform:uppercase;letter-spacing:.14em;color:var(--mid) }
.testi-stars { color:var(--orange);font-size:1rem;letter-spacing:.06em;margin-bottom:16px }

/* --- Stats --- */
.stats { padding:64px 24px;background:var(--white);border-bottom:1px solid var(--border-lt) }
.stats-inner { max-width:1280px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center }
.stat-num { font-size:2.4rem;font-weight:900;color:var(--orange);line-height:1;margin-bottom:6px }
.stat-lbl { font-size:.65rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;color:var(--mid) }

/* --- FAQ --- */
.faq { padding:72px 24px;background:var(--white) }
.faq-inner { max-width:760px;margin:0 auto }
.faq-inner h2 { text-transform:uppercase;text-align:center;margin-bottom:8px }
.faq-inner .sub { text-align:center;color:var(--mid);margin-bottom:48px }
details { border-bottom:1px solid var(--border-lt) }
summary { display:flex;justify-content:space-between;align-items:center;
  padding:20px 0;cursor:pointer;list-style:none;font-weight:700;font-size:1rem }
summary::-webkit-details-marker { display:none }
summary .ms { transition:transform .25s;font-size:1.2rem;color:var(--mid) }
details[open] summary .ms { transform:rotate(180deg) }
.faq-body { padding:0 0 20px;color:var(--mid);font-size:.95rem;line-height:1.7 }

/* --- CTA Banner --- */
.cta-banner { background:var(--orange-dk);padding:40px 24px }
.cta-inner { max-width:1280px;margin:0 auto;display:flex;
  align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap }
.cta-left { display:flex;align-items:center;gap:20px;color:#fff }
.cta-icon { width:64px;height:64px;background:rgba(255,255,255,.15);border-radius:50%;
  display:flex;align-items:center;justify-content:center }
.cta-icon .ms { font-size:2rem;color:#fff }
.cta-left h3 { color:#fff;text-transform:uppercase;font-size:1.15rem;margin-bottom:4px }
.cta-left p { color:rgba(255,255,255,.75);font-size:.88rem }

/* --- Emergency section --- */
.emergency { background:var(--dark);padding:56px 24px;text-align:center }
.emergency-inner { max-width:760px;margin:0 auto }
.emergency h2 { color:#fff;font-size:clamp(2rem,6vw,4rem);font-weight:900;
  text-transform:uppercase;letter-spacing:-.02em;margin-bottom:8px }
.emergency .sub { color:rgba(255,255,255,.6);margin-bottom:32px }
.emergency .ms-big { font-size:3.5rem;color:var(--orange);margin-bottom:16px;display:block }

/* --- Sticky Call Bar --- */
.sticky-bar { position:fixed;bottom:0;left:0;right:0;z-index:950;
  background:var(--white);border-top:2px solid var(--border-lt);
  box-shadow:0 -4px 16px rgba(0,0,0,.1);padding:12px 20px }
.sticky-bar-inner { max-width:1280px;margin:0 auto;display:flex;justify-content:center }
.sticky-bar .btn-call { font-size:1.05rem;padding:16px 48px;
  box-shadow:0 6px 24px rgba(255,107,0,.45);animation:pulse 2.5s infinite }
.sticky-bar .btn-call:hover { animation:none }
@keyframes pulse {
  0%,100% { box-shadow:0 6px 24px rgba(255,107,0,.45) }
  50% { box-shadow:0 6px 36px rgba(255,107,0,.7),0 0 0 8px rgba(255,107,0,.1) }
}

/* --- Material Icons --- */
.ms { font-family:'Material Symbols Outlined';
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  font-style:normal;display:inline-block;vertical-align:middle;line-height:1 }

/* --- Thank You --- */
.ty-wrap { min-height:90vh;display:flex;align-items:center;justify-content:center;
  flex-direction:column;text-align:center;padding:48px 24px;gap:20px }
.ty-check { width:88px;height:88px;background:var(--orange);
  display:flex;align-items:center;justify-content:center }
.ty-check .ms { font-size:2.8rem;color:#fff }
.ty-wrap h1 { color:var(--orange);font-size:2.8rem }
.ty-wrap p { color:var(--mid);max-width:460px;font-size:1.05rem }
.btn-home { display:inline-flex;align-items:center;gap:8px;background:var(--dark);
  color:#fff;padding:14px 28px;font-weight:700;font-size:.88rem;
  text-transform:uppercase;letter-spacing:.08em;transition:opacity .2s }
.btn-home:hover { opacity:.85 }

/* --- Responsive --- */
@media(max-width:1024px) {
  .hero-inner { grid-template-columns:1fr }
  .hero-img-wrap { justify-content:center }
  .steps-grid,.services-grid { grid-template-columns:repeat(2,1fr) }
  .stats-inner { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:768px) {
  .js-sitelinks { display:none }
  .testi-grid { grid-template-columns:1fr }
  .steps-grid,.services-grid { grid-template-columns:1fr }
  .cta-inner { flex-direction:column;text-align:center }
  .stats-inner { grid-template-columns:repeat(2,1fr) }
  .sticky-bar .btn-call { width:100%;justify-content:center }
}
@media(max-width:480px) {
  .header-cta .js-num { display:none }
  .stats-inner { grid-template-columns:1fr 1fr }
}