:root{
  --red:#d60000;
  --black:#111;
  --gray:#666;
  --light:#f6f6f6;
  --white:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--black);background:var(--white)}
a{color:inherit;text-decoration:none}
.container{width:min(1100px,92vw);margin-inline:auto}
.header{position:sticky;top:0;background:var(--black);color:var(--white);z-index:10;border-bottom:3px solid var(--red)}
.header .bar{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{font-weight:800;letter-spacing:.3px}
.brand .name{font-size:1rem;text-transform:uppercase}
.brand .sub{font-size:.8rem;color:#ddd}
.call{display:flex;align-items:center;gap:10px}
.call .cta{display:inline-block;background:var(--red);color:var(--white);padding:10px 14px;border-radius:999px;font-weight:700}
.call small{display:block;color:#bbb;font-size:.75rem;text-align:right}

.hero{position:relative;background:linear-gradient(0deg, rgba(17,17,17,.55), rgba(17,17,17,.55)), url('../img/hero.jpg') center/cover no-repeat;min-height:56vh;display:grid;place-items:center;border-bottom:4px solid var(--red)}
.hero .inner{color:var(--white);text-align:center;padding:70px 20px}
.hero h1{font-size:2.2rem;margin:0 0 10px}
.hero p{max-width:750px;margin:0 auto 20px;color:#f0f0f0}
.hero .phone{font-size:1.4rem;font-weight:900;background:var(--red);display:inline-block;padding:12px 18px;border-radius:10px}

.section{padding:40px 0}
.section.light{background:var(--light)}
h2.section-title{font-size:1.8rem;margin:0 0 12px}
.lead{color:var(--gray);max-width:900px}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:26px}
.card{background:var(--white);border:1px solid #e8e8e8;border-radius:14px;padding:18px}
.card .title{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.card img{width:40px;height:40px;object-fit:contain;filter:grayscale(100%) contrast(1.2)}
.card h3{margin:0;font-size:1.1rem;text-transform:uppercase;color:var(--black)}
.card p{margin:0;color:#444;font-size:.92rem;line-height:1.45}

.banner{display:flex;flex-direction:column;gap:10px;align-items:flex-start;background:#fff;border-left:6px solid var(--red);padding:18px;border-radius:12px;margin:24px 0}
.banner strong{font-size:1.2rem}

.office{display:grid;gap:6px;margin:6px 0 22px}
.office .num{font-size:1.25rem;font-weight:900}
.office .num a{color:var(--red)}

.service-areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.area{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#fff;border:1px solid #eee;border-radius:10px}
.pin{color:var(--red);display:block;flex:0 0 auto}

.faq{margin-top:26px}
.faq details{background:#fff;border:1px solid #eee;border-radius:12px;padding:12px 14px;margin-bottom:10px}
.faq summary{font-weight:700;cursor:pointer}
.faq p{margin:8px 0 0;color:#333}

.footer{background:#0f0f0f;color:#eee;margin-top:30px;padding:20px 0;border-top:3px solid var(--red)}
.footer .address{font-size:.95rem;color:#ddd}
.footer .end-phone{font-weight:800;color:#fff}

.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.badge{border:1px solid #eaeaea;border-radius:999px;padding:8px 12px;font-size:.85rem;background:#fff}
@media (max-width:520px){
  .hero h1{font-size:1.7rem}
  .header .bar{gap:8px}
  .brand .name{font-size:.9rem}
}

/* Hero badge readability */
.hero .badges .badge{
  color:#111 !important;
  background:#fff;
  border-color:#ddd;
  font-weight:600;
}