:root {
  --primary:#1f2937;
  --accent:#2563eb;
  --accent-dark:#1e40af;
  --light:#f9fafb;
  --dark:#111827;
  --gray:#6b7280;
  --border:#e5e7eb;
  --card:#ffffff;
  --page-gray:#eef2f6;
  --soft-card:#f4f6f9;
}

/* ================= RESET ================= */
* {
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  background:var(--page-gray);
  color:var(--primary);
  line-height:1.65;
}

/* ================= GLOBAL LINKS ================= */
a {
  color:var(--primary);
  text-decoration:none;
}

a:visited {
  color:var(--primary);
}

/* ================= HEADER ================= */
.site-header {
  background:white;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:1000;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.header-inner {
  max-width:1100px;
  margin:auto;
  padding:18px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* ---------- LOGO ---------- */
.logo-wrap {
  display:flex;
  align-items:center;
  gap:12px;
}

.site-logo {
  height:44px;
  width:auto;
  display:block;
}

.site-title {
  font-size:20px;
  font-weight:800;
  letter-spacing:.2px;
}

/* ---------- NAV ---------- */
.main-nav a {
  margin-left:24px;
  font-weight:500;
  transition:color .2s ease;
}

.main-nav a:hover,
.main-nav a.active {
  color:var(--accent);
}

/* ================= HERO ================= */
.hero.hero-bg {
  position:relative;
  min-height:90vh;
  width:100%;
  display:flex;
  align-items:center;
  background-image:url("../assets/images/hero-home.jpg");
  background-size:cover;
  background-position:center;
}

.hero-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    rgba(17,24,39,0.85),
    rgba(17,24,39,0.55)
  );
}

.hero-content {
  position:relative;
  z-index:2;
  max-width:1100px;
  margin:auto;
  padding:0 40px;
  color:white;
}

.hero-content h1 {
  font-size:56px;
  font-weight:800;
  line-height:1.1;
  margin-bottom:20px;
}

.hero-content p {
  font-size:20px;
  max-width:650px;
  margin-bottom:40px;
  color:rgba(255,255,255,0.92);
}

/* ================= BUTTONS ================= */
.btn {
  background:var(--accent);
  color:white;
  padding:14px 26px;
  border-radius:8px;
  font-weight:600;
  display:inline-block;
  transition:.25s ease;
}

.btn:hover {
  background:var(--accent-dark);
  transform:translateY(-2px);
}

.btn.secondary {
  background:#dc2626;
}

.btn.secondary:hover {
  background:#b91c1c;
}

/* ================= SECTIONS ================= */
.section {
  max-width:1100px;
  margin:60px auto;
  padding:70px 40px;
}

.section-soft {
  background:#e5eaf0;
  border-radius:18px;
}

/* ================= GRID / CARDS ================= */
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
}

.card {
  background:var(--soft-card);
  padding:28px;
  border-radius:16px;
  border:1px solid var(--border);
  box-shadow:0 10px 25px rgba(0,0,0,0.06);
  transition:.25s ease;
}

.card:hover {
  transform:translateY(-3px);
}

/* ================= ESTIMATOR FORM ================= */
label {
  display:block;
  margin-top:18px;
  font-weight:600;
  font-size:14px;
  color:var(--primary);
}

select,
input[type="number"],
input[type="text"],
input[type="email"],
input[type="tel"] {
  width:100%;
  margin-top:8px;
  padding:14px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  font-size:15px;
  background:white;
}

select:focus,
input:focus {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}

/* ================= ESTIMATE RESULT ================= */
.estimator-box {
  background:white;
  padding:22px;
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.estimator-box .price {
  font-size:32px;
  font-weight:800;
  margin-bottom:10px;
}

.notice {
  font-size:14px;
  color:var(--gray);
  margin-top:8px;
}

/* ================= FOOTER ================= */
footer {
  background:white;
  border-top:1px solid var(--border);
  padding:50px 40px;
  margin-top:100px;
  text-align:center;
  font-size:14px;
}

footer a:hover {
  color:var(--accent);
}

/* ================= MOBILE ================= */
@media (max-width:768px) {
  .header-inner {
    flex-direction:column;
    gap:14px;
  }

  .main-nav a {
    margin:8px;
    display:inline-block;
  }

  .hero-content h1 {
    font-size:38px;
  }
}
/* ================= ESTIMATOR BACKGROUND ================= */

.estimator-hero {
  background-image: url("../assets/images/estimator-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  min-height: 60vh; /* 🔥 THIS is the key line */

  border-radius: 18px;
  position: relative;
  overflow: hidden;
  padding: 80px 40px;
}


/* dark overlay for readability */
.estimator-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.65);
  z-index: 0;
  border-radius: 18px;
}

/* keep form content above overlay */
.estimator-hero > * {
  position: relative;
  z-index: 1;
  color: white;
}

/* inputs stay readable */
.estimator-hero input,
.estimator-hero select,
.estimator-hero textarea {
  background: white;
  color: #111827;
}
@media (max-width: 768px) {
  .estimator-hero {
    min-height: 50vh;
    padding: 60px 24px;
  }
}