/* ===========================================================
   THE DUMPING DUDES — Shared Stylesheet
   =========================================================== */

:root {
  /* Palette pulled from The Dumping Dudes logo: brick red truck, black cab, tan wordmark, cream backdrop */
  --dark: #2b1f18;
  --primary: #9c3b2c;
  --primary-light: #b9503c;
  --accent: #c99a4f;
  --accent-dark: #b3843c;
  --light: #f5efe1;
  --gray-100: #f0e9da;
  --gray-300: #ddd3bf;
  --gray-500: #8a7f6d;
  --gray-700: #4a4238;
  --white: #fffdf9;
  --radius: 12px;
  --shadow: 0 14px 36px rgba(28, 23, 18, 0.16);
  --shadow-sm: 0 6px 16px rgba(28, 23, 18, 0.12);
  --font-head: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 18px; }

body {
  font-family: var(--font-body);
  color: var(--dark);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.12;
  color: var(--dark);
}

h1 { font-size: clamp(3rem, 6.2vw, 5rem); font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: clamp(2.3rem, 4.6vw, 3.4rem); }
h3 { font-size: 1.55rem; }

p { color: var(--gray-700); }

.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}

.section { padding: 120px 0; }
.section-sm { padding: 64px 0; }
.bg-light { background: var(--light); }
.bg-dark { background: var(--dark); color: var(--white); }
.bg-primary { background: var(--primary); color: var(--white); }

.eyebrow {
  display: inline-block;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .95rem;
  color: var(--accent);
  margin-bottom: 16px;
}

.section-head { max-width: 780px; margin: 0 auto 60px; text-align: center; }
.section-head p { margin-top: 18px; font-size: 1.25rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 42px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.15rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-accent { background: var(--accent); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-accent:hover { background: var(--accent-dark); }
.btn-light { background: var(--white); color: var(--primary); }
.btn-light:hover { background: var(--light); }
.btn-outline { background: transparent; border-color: currentColor; }
.btn-outline:hover { background: rgba(255,255,255,0.1); }
.btn-primary { background: var(--primary); color: var(--white); }
.btn-primary:hover { background: var(--primary-light); }
.btn-block { width: 100%; }

/* ---------- Top utility bar ---------- */
.topbar {
  background: var(--dark);
  color: var(--gray-300);
  font-size: 1rem;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
  gap: 16px;
  flex-wrap: wrap;
}
.topbar a { color: var(--white); font-weight: 600; }
.topbar-left span { margin-right: 22px; }
.topbar-left .dot { color: var(--accent); margin-right: 6px; }

/* ---------- Header / Nav ---------- */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
}
.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--dark);
  margin-right: 50px;
}
header.site-header .logo {
  margin-left: -60px;
}
.logo-img {
  height: 208px;
  width: auto;
  display: block;
}
.footer-logo-img {
  height: 120px;
}
.logo .logo-icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  flex-shrink: 0;
}
.logo .logo-icon svg { width: 34px; height: 34px; }
.logo span.accent-word { color: var(--accent); }
.logo small {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-500);
}

nav.main-nav ul {
  display: flex;
  align-items: center;
  gap: 30px;
}
nav.main-nav a {
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--dark);
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
nav.main-nav a:hover,
nav.main-nav a.active { color: var(--primary); border-color: var(--accent); }

.header-actions { display: flex; align-items: center; gap: 18px; }
.header-phone {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--dark);
}
.header-phone svg { width: 26px; height: 26px; color: var(--accent); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span { width: 30px; height: 3px; background: var(--dark); border-radius: 3px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    linear-gradient(100deg, rgba(43,31,24,0.75) 0%, rgba(43,31,24,0.4) 55%, rgba(201,154,79,0.4) 100%),
    url('https://images.unsplash.com/photo-1670175035057-eec020c03eb9?q=85&w=2400&auto=format&fit=crop') center/cover no-repeat;
  color: var(--white);
  overflow: hidden;
}
.hero .container {
  position: relative;
  z-index: 2;
  padding-top: 130px;
  padding-bottom: 140px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}
.hero h1 { color: var(--white); }
.hero .badge-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.hero .badge {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.hero p.lead { font-size: 1.4rem; color: rgba(255,255,255,0.85); margin: 24px 0 38px; max-width: 620px; line-height: 1.55; }
.hero .hero-ctas { display: flex; gap: 20px; flex-wrap: wrap; }
.hero-art {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius);
  padding: 42px;
  backdrop-filter: blur(4px);
}
.hero-art ul { display: grid; gap: 22px; }
.hero-art li { display: flex; align-items: center; gap: 16px; font-weight: 600; font-size: 1.12rem; }
.hero-art li .ico {
  width: 48px; height: 48px; border-radius: 10px;
  background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hero-art li .ico svg { width: 24px; height: 24px; color: var(--white); }

/* ---------- Trust bar ---------- */
.trust-bar { background: var(--light); border-bottom: 1px solid var(--gray-300); }
.trust-bar .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  padding-top: 40px;
  padding-bottom: 40px;
  text-align: center;
}
.trust-bar .trust-item { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.trust-bar .trust-item svg { width: 40px; height: 40px; color: var(--primary); }
.trust-bar .trust-item span { font-weight: 700; font-size: 1.05rem; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 36px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 40px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.card .card-icon {
  width: 68px; height: 68px; border-radius: 16px;
  background: var(--primary); color: var(--white);
  display: flex; align-items: center; justify-content: center; margin-bottom: 24px;
}
.card .card-icon svg { width: 32px; height: 32px; }
.card h3 { margin-bottom: 14px; }
.card p { font-size: 1.08rem; }
.card a.card-link { display: inline-block; margin-top: 18px; font-weight: 700; font-size: 1.05rem; color: var(--primary); }

.service-card ul.take-list { margin-top: 18px; display: grid; gap: 10px; }
.service-card ul.take-list li { font-size: 1rem; color: var(--gray-700); display: flex; gap: 10px; }
.service-card ul.take-list li::before { content: "✓"; color: var(--accent); font-weight: 800; }

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; counter-reset: step; }
.step { position: relative; padding-top: 12px; }
.step .step-num {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--accent); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; margin-bottom: 24px;
}
.step h3 { margin-bottom: 10px; }
.step p { font-size: 1.05rem; }

/* ---------- Testimonials ---------- */
.testimonial {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--gray-300);
  padding: 38px;
}
.testimonial .stars { color: var(--accent); margin-bottom: 16px; letter-spacing: 3px; font-size: 1.2rem; }
.testimonial p.quote { font-style: italic; color: var(--gray-700); margin-bottom: 20px; font-size: 1.08rem; line-height: 1.55; }
.testimonial .author { font-weight: 700; font-size: 1.02rem; }
.testimonial .author span { display: block; font-weight: 400; color: var(--gray-500); font-size: .92rem; }

/* ---------- CTA banner ---------- */
.cta-banner {
  background: var(--accent);
  color: var(--white);
  border-radius: var(--radius);
  padding: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.cta-banner h2 { color: var(--white); }

/* ---------- Locations ---------- */
.city-chip {
  background: var(--light);
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  padding: 14px 24px;
  font-weight: 600;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.city-chip::before { content: "📍"; }
.city-grid { display: flex; flex-wrap: wrap; gap: 16px; }

.map-placeholder {
  background: var(--light);
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius);
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  font-weight: 600;
  font-size: 1.1rem;
  text-align: center;
  padding: 24px;
}

/* ---------- Forms ---------- */
.form-card {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 46px;
  box-shadow: var(--shadow-sm);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px; }
.form-group { margin-bottom: 22px; display: flex; flex-direction: column; gap: 8px; }
.form-group label { font-weight: 700; font-size: 1rem; }
.form-group input,
.form-group select,
.form-group textarea {
  padding: 15px 18px;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  background: var(--light);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: 2px solid var(--primary); background: var(--white); }
.form-note {
  font-size: .92rem;
  color: var(--gray-500);
  margin-top: 12px;
}
.form-success {
  display: none;
  background: #eaf6ef;
  border: 1px solid var(--primary);
  color: var(--primary);
  padding: 20px;
  border-radius: 10px;
  font-weight: 600;
  margin-bottom: 22px;
}

/* ---------- Contact info blocks ---------- */
.info-block { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 32px; }
.info-block .ico {
  width: 56px; height: 56px; border-radius: 12px;
  background: var(--primary); color: var(--white);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.info-block .ico svg { width: 26px; height: 26px; }
.info-block h4 { margin-bottom: 6px; font-size: 1.15rem; }
.info-block p { font-size: 1.08rem; }

/* ---------- Values / about ---------- */
.value-card { text-align: center; }
.value-card .card-icon { margin: 0 auto 24px; }

/* ---------- Footer ---------- */
footer.site-footer { background: var(--dark); color: var(--gray-300); padding-top: 90px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-grid h4 { color: var(--white); margin-bottom: 22px; font-size: 1.15rem; }
.footer-grid ul li { margin-bottom: 14px; font-size: 1.05rem; }
.footer-grid ul li a:hover { color: var(--accent); }
.footer-brand p { color: var(--gray-300); font-size: 1.05rem; margin: 18px 0 22px; max-width: 320px; }
.social-row { display: flex; gap: 12px; }
.social-row a {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
}
.social-row a:hover { background: var(--accent); }
.social-row svg { width: 22px; height: 22px; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 0;
  font-size: .92rem;
  color: var(--gray-500);
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom a:hover { color: var(--accent); }

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  background: linear-gradient(120deg, var(--primary) 0%, var(--accent-dark) 100%);
  color: var(--white);
  padding: 110px 0;
  text-align: center;
}
.page-hero h1 { color: var(--white); }
.page-hero p { color: rgba(255,255,255,0.9); max-width: 700px; font-size: 1.25rem; margin: 18px auto 0; }
.breadcrumb { font-size: .95rem; color: rgba(255,255,255,0.7); margin-bottom: 18px; }
.breadcrumb a { color: var(--white); font-weight: 700; }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-30 { margin-top: 30px; }
.mb-30 { margin-bottom: 30px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  html { font-size: 17px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero .container { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
  .section { padding: 90px 0; }
}

/* The nav switches to the mobile dropdown well before the site's own
   max content width (1400px) so the horizontal nav never has to squeeze
   or wrap the "Service Areas" link — that squeeze was causing uneven
   gaps in the header.

   The closed state is hidden with opacity/visibility rather than a
   transform translate: translateY(-140%) is calculated relative to the
   nav's OWN height, and the nav sits below a header whose height varies
   (a tall header, e.g. from a large logo, made the old -140% offset too
   small to actually push the dropdown off-screen, leaving it permanently
   overlapping the top of every page). Opacity/visibility hides it in
   place regardless of header height, so it can't reappear like that. */
@media (max-width: 1400px) {
  nav.main-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--white); flex-direction: column; padding: 24px 28px; box-shadow: 0 12px 20px rgba(0,0,0,0.08); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
  nav.main-nav.open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .2s ease, transform .2s ease; }
  nav.main-nav ul { flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; }
  .nav-toggle { display: flex; }

  /* The logo's fixed 208px desktop height doesn't fit next to the phone
     icon, quote button and hamburger below 1400px — flexbox was
     squishing its rendered width down (without shrinking its height),
     badly distorting it, and the -60px desktop alignment margin then
     pushed the squished image off the left edge entirely. Shrinking the
     logo at this breakpoint keeps it legible and proportional. */
  .logo-img { height: 64px; }
  header.site-header .logo { margin-left: 0; }
  .logo { margin-right: 0; }
}

/* The header's own "Get a Free Quote" button is redundant with the hero's
   CTAs right below it, and on narrow phones it was one of the things
   crowding the header row. Drop it and lean on the phone icon + hamburger. */
@media (max-width: 560px) {
  .header-actions .btn-accent { display: none; }
}

@media (max-width: 720px) {
  html { font-size: 16px; }
  .header-phone span { display: none; }
  .trust-bar .container { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-banner { flex-direction: column; text-align: center; }
  .topbar-left span:not(:first-child) { display: none; }
  .section { padding: 70px 0; }
}