/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, "Helvetica Neue", system-ui, sans-serif;
  color:#222; background:#fafafa; line-height:1.6;
}
img { max-width:100%; display:block; }
a { color:#c93b2f; text-decoration:none; }
a:hover { text-decoration:underline; }

:root{
  --accent:#c93b2f;
  --accent-dark:#a12d24;
  --muted:#6b7280;
  --panel:#ffffff;
  --soft:#f6f6f7;
  --shadow: 0 6px 20px rgba(0,0,0,.08);
}

/* ---------- Layout ---------- */
.container{ width:min(1100px,92vw); margin:0 auto; padding:2rem 0; }
.t-center{ text-align:center; }
.mt{ margin-top:1rem; }
.mt-sm{ margin-top:.5rem; }

/* ---------- Top Navigation ---------- */
.topnav{
  background:#fff;
  border-bottom:1px solid #ececec;
  box-shadow:0 2px 6px rgba(0,0,0,.04);
  position:sticky; top:0; z-index:100;
}
.topnav .container{
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 1rem;
}
.topnav a.logo{
  font-weight:800; font-size:1.2rem; color:#c93b2f;
}
.topnav .nav-links a{
  margin-left:1.2rem; font-weight:600; color:#333;
}
.topnav .nav-links a:hover{ color:var(--accent-dark); }

/* ---------- Hero ---------- */
.hero{
  min-height:70vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff;
  background:
    linear-gradient(180deg, rgba(0,0,0,.48), rgba(0,0,0,.55)),
    url('heroImage.png') center / cover no-repeat;
}
.hero--sm{ min-height:42vh; }
.hero-inner{ max-width:820px; padding:2rem; }
.hero h1{ font-size: clamp(2rem, 1.4rem + 2vw, 3rem); margin:0 0 .6rem; }
.hero .sub{ color:#f3f4f6; margin:0 0 1.1rem; }

/* ---------- Buttons ---------- */
.btn, .cta{
  display:inline-block; background:var(--accent); color:#fff;
  padding:.85rem 1.25rem; border-radius:12px; font-weight:700;
  box-shadow: var(--shadow);
  transition: transform .06s ease, background .2s ease, box-shadow .2s ease;
  border:1px solid transparent;
  text-align:center;
}
.btn:hover, .cta:hover{ background:var(--accent-dark); text-decoration:none; transform:translateY(-1px); }

/* ---------- Sections ---------- */
.intro p{ font-size:1.05rem; color:#2b2b2b; }

.services{ background:var(--soft); }
.cards{
  display:grid; gap:1.2rem;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
.card{
  background:var(--panel); border:1px solid #ececec; border-radius:14px; padding:1.2rem;
  box-shadow:0 3px 12px rgba(0,0,0,.04);
  text-align:center;
}
.card h3{ margin:.1rem 0 .4rem; }

.offer{ background:var(--panel); }
.offer .container{ text-align:center; }

.why .checks{
  list-style:none; padding:0; margin:.5rem 0 0;
  display:grid; gap:.5rem 1.2rem; grid-template-columns:repeat(2, minmax(0,1fr));
}
.why .checks li{
  position:relative; padding-left:1.6rem;
}
.why .checks li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-weight:800;
}

.rates{ background:var(--soft); }
.rates .cards{ grid-template-columns: repeat(3, minmax(0,1fr)); }

/* ---------- Lists and grids ---------- */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.bullets{ margin:.25rem 0 0; padding-left:1.2rem; }
.bullets li{ margin:.3rem 0; }

/* ---------- Form ---------- */
.form{
  background:var(--panel); border:1px solid #ececec; border-radius:14px;
  padding:1.2rem; box-shadow:0 3px 12px rgba(0,0,0,.05);
}
label{ font-weight:700; font-size:.95rem; display:block; margin:.2rem 0 .35rem; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea{
  width:100%; padding:.7rem .8rem; border:1px solid #ddd; border-radius:10px; font-size:1rem;
  outline:none; transition:border-color .15s ease, box-shadow .15s ease; background:#fff;
}
textarea{ min-height:120px; resize:vertical; }
input:focus, select:focus, textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 4px rgba(201,59,47,.18);
}
.actions{ margin-top:.6rem; }

/* ---------- Footer ---------- */
.footer{
  border-top:1px solid #ececec; background:#111; color:#e9e9e9; padding:1.8rem 0;
}
.footer a{ color:#fff; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .rates .cards{ grid-template-columns:1fr; }
  .why .checks{ grid-template-columns:1fr; }
  .grid2{ grid-template-columns:1fr; }
}
@media (max-width: 520px){
  .hero{ min-height:58vh; padding:2rem 1rem; }
  .hero-inner{ padding:1.2rem; }
  .topnav .container{ flex-direction:column; gap:.5rem; }
  .topnav .nav-links a{ margin-left:0; margin-right:1rem; }
}