@import "tailwindcss";

:root {
  --green: #0b6b34;
  --green-dark: #064421;
  --lime: #73c92d;
  --ink: #13201a;
  --muted: #5d6c63;
  --cream: #f5f7f2;
  --line: #dbe3dc;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.topbar { min-height: 38px; padding: 8px max(5vw, 24px); display: flex; justify-content: space-between; gap: 24px; align-items: center; background: var(--green-dark); color: white; font-size: 13px; letter-spacing: .02em; }
.topbar a { color: #b8f276; font-weight: 800; }
header { height: 98px; padding: 10px max(5vw, 24px); display: flex; align-items: center; gap: 42px; border-bottom: 1px solid var(--line); background: white; position: sticky; top: 0; z-index: 20; }
.brand { width: 300px; margin-right: auto; }
.brand img { max-height: 76px; object-fit: contain; }
nav { display: flex; gap: 28px; font-size: 14px; font-weight: 750; }
nav a:hover { color: var(--green); }
.header-call { background: var(--green); color: white; min-width: 178px; padding: 12px 18px; border-radius: 8px; text-align: center; font-size: 18px; font-weight: 900; }
.header-call small { display: block; text-transform: uppercase; font-size: 10px; letter-spacing: .12em; margin-bottom: 2px; color: #cfff9d; }

.hero { min-height: 675px; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(390px, .82fr); gap: clamp(34px, 6vw, 90px); padding: 64px max(6vw, 36px); background: radial-gradient(circle at 5% 10%, #e9f7dc 0, transparent 35%), linear-gradient(120deg, #f8faf6 0 62%, #0a5b2d 62%); align-items: center; }
.hero-copy { max-width: 730px; }
.eyebrow, .kicker { color: var(--green); text-transform: uppercase; font-weight: 900; font-size: 12px; letter-spacing: .16em; }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 35px; height: 4px; border-radius: 3px; background: var(--lime); }
h1 { margin: 18px 0; font-size: clamp(52px, 6vw, 88px); line-height: .98; letter-spacing: -.055em; max-width: 780px; }
h1 em { color: var(--green); font-style: normal; }
.subhead { max-width: 700px; color: #435148; font-size: clamp(18px, 2vw, 22px); line-height: 1.55; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 30px 0 24px; }
.primary-button, .phone-button { padding: 17px 24px; border-radius: 8px; font-weight: 900; }
.primary-button { background: var(--green); color: white; }
.phone-button { border: 2px solid var(--green); color: var(--green); background: white; }
.trust-row { display: flex; flex-wrap: wrap; gap: 13px 24px; color: #34423a; font-size: 14px; font-weight: 750; }
.trust-row span::first-letter { color: var(--green); }

.quote-card { background: white; border-radius: 16px; padding: 30px; min-height: 570px; box-shadow: 0 24px 70px rgba(4, 34, 17, .22); align-self: center; }
.quote-heading span { color: var(--green); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; font-weight: 900; }
.quote-heading h2 { font-size: 31px; margin: 7px 0; }
.quote-heading p { margin: 0 0 14px; color: var(--muted); }
.boberdoo-form { width: 100% !important; min-height: 415px !important; overflow: hidden; }
.boberdoo-form iframe { width: 100% !important; max-width: 100%; border: 0; min-height: 400px; }
.form-call { text-align: center; margin: 0; font-size: 13px; color: var(--muted); }
.form-call a { color: var(--green); font-weight: 900; }

.proof-strip { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 max(6vw, 36px); border-bottom: 1px solid var(--line); background: #fff; }
.proof-strip > div { display: flex; align-items: center; gap: 18px; padding: 28px; border-right: 1px solid var(--line); }
.proof-strip > div:first-child { border-left: 1px solid var(--line); }
.proof-strip strong { font-size: 36px; color: #c8d4ca; }
.proof-strip span { color: var(--muted); font-size: 13px; }
.proof-strip b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 3px; }

.section { padding: 100px max(7vw, 44px); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 8vw, 120px); align-items: center; }
h2 { font-size: clamp(36px, 4vw, 58px); letter-spacing: -.04em; line-height: 1.08; margin: 12px 0 24px; }
.body-copy { color: var(--muted); font-size: 18px; line-height: 1.7; }
.check-list { list-style: none; padding: 0; display: grid; gap: 13px; margin: 28px 0; }
.check-list li::before { content: "✓"; color: var(--green); font-weight: 900; margin-right: 12px; }
.text-link { color: var(--green); font-weight: 900; }
.video-card { background: var(--cream); padding: 18px; border-radius: 15px; box-shadow: 0 16px 46px rgba(19, 32, 26, .11); }
.video-card p { margin: 17px 10px 6px; color: var(--muted); font-weight: 700; }
.video-frame { aspect-ratio: 16/9; overflow: hidden; border-radius: 9px; background: #111; }
.video-frame iframe { width: 100%; height: 100%; border: 0; }

.vehicles { padding: 96px max(6vw, 36px); background: var(--green-dark); color: white; }
.section-heading { max-width: 780px; margin-bottom: 48px; }
.vehicles .kicker { color: #a9ea65; }
.section-heading > p:last-child { color: #b8c8be; font-size: 18px; line-height: 1.6; }
.vehicle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.vehicle-grid article { min-height: 250px; padding: 28px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: rgba(255,255,255,.06); }
.vehicle-grid article span { color: #a9ea65; font-weight: 900; }
.vehicle-grid h3 { font-size: 22px; margin: 70px 0 10px; }
.vehicle-grid p { color: #c4d2c8; line-height: 1.6; }

.area { display: grid; grid-template-columns: 1.3fr .7fr; gap: 50px; padding: 100px max(6vw, 36px); background: #edf4ec; align-items: center; }
.area-panel p:not(.kicker) { color: var(--muted); font-size: 17px; line-height: 1.65; max-width: 780px; }
.corridor { display: flex; align-items: center; margin-top: 46px; }
.corridor div { min-width: 130px; text-align: center; position: relative; }
.corridor div::before { content: ""; display: block; margin: 0 auto 12px; width: 17px; height: 17px; border: 5px solid var(--green); background: white; border-radius: 50%; }
.corridor b, .corridor small { display: block; }
.corridor small { color: var(--muted); margin-top: 4px; }
.corridor > span { height: 5px; flex: 1; background: var(--lime); margin-top: -43px; }
.city-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.city-grid > span { background: white; padding: 13px 15px; border-radius: 7px; font-weight: 700; font-size: 14px; }
.city-grid > span::first-letter { color: var(--green); }
.city-grid a { grid-column: 1/-1; background: var(--green); color: white; padding: 18px; border-radius: 8px; text-align: center; margin-top: 8px; }
.city-grid a b { font-size: 24px; }

.faq { padding: 100px max(7vw, 44px); }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
details { border: 1px solid var(--line); border-radius: 9px; padding: 20px 22px; }
summary { cursor: pointer; font-weight: 850; font-size: 17px; }
details p { color: var(--muted); line-height: 1.6; margin: 15px 0 0; }

.final-cta { padding: 40px max(6vw, 36px); background: var(--lime); display: grid; grid-template-columns: 240px 1fr auto auto; gap: 28px; align-items: center; }
.final-cta img { max-height: 95px; object-fit: contain; }
.final-cta p { margin: 0; font-weight: 800; }
.final-cta h2 { font-size: 34px; margin: 3px 0 0; }
.final-cta a { padding: 16px 20px; border-radius: 7px; background: white; font-weight: 900; }
.final-cta .dark-call { background: var(--green-dark); color: white; }
footer { background: #071b10; color: white; padding: 48px max(6vw, 36px); display: grid; grid-template-columns: 260px 1fr auto; gap: 34px; align-items: center; }
footer img { max-height: 90px; object-fit: contain; }
footer p { color: #aebcb2; max-width: 650px; line-height: 1.6; }
footer > a { font-size: 22px; font-weight: 900; color: #a9ea65; }
footer small { grid-column: 1/-1; color: #75837a; border-top: 1px solid #25402f; padding-top: 22px; }
.mobile-call { display: none; }

@media (max-width: 1050px) {
  nav { display: none; }
  .hero { grid-template-columns: 1fr; background: radial-gradient(circle at 5% 10%, #e9f7dc 0, transparent 38%), #f8faf6; }
  .quote-card { max-width: 680px; width: 100%; }
  .vehicle-grid { grid-template-columns: repeat(2, 1fr); }
  .area { grid-template-columns: 1fr; }
  .final-cta { grid-template-columns: 200px 1fr; }
  .final-cta a { text-align: center; }
}

@media (max-width: 720px) {
  body { padding-bottom: 65px; }
  .topbar span { display: none; }
  .topbar { justify-content: center; }
  header { height: 78px; padding: 8px 18px; }
  .brand { width: 230px; }
  .header-call { display: none; }
  .hero { padding: 48px 20px; grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: 50px; }
  .quote-card { padding: 22px 14px; min-height: 590px; }
  .boberdoo-form { min-height: 440px !important; }
  .proof-strip { grid-template-columns: 1fr; padding: 0 20px; }
  .proof-strip > div, .proof-strip > div:first-child { border: 0; border-bottom: 1px solid var(--line); padding: 21px 8px; }
  .section, .vehicles, .area, .faq { padding: 72px 20px; }
  .split, .faq-grid { grid-template-columns: 1fr; }
  .vehicle-grid { grid-template-columns: 1fr; }
  .vehicle-grid h3 { margin-top: 34px; }
  .corridor div { min-width: 90px; font-size: 13px; }
  .corridor > span { margin-top: -40px; }
  .city-grid { grid-template-columns: 1fr 1fr; }
  .final-cta { grid-template-columns: 1fr; text-align: center; padding: 38px 20px; }
  .final-cta img { margin: auto; }
  footer { grid-template-columns: 1fr; text-align: center; padding: 44px 20px; }
  footer img { margin: auto; }
  footer small { grid-column: 1; }
  .mobile-call { display: flex; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; height: 65px; align-items: center; justify-content: center; gap: 9px; background: var(--green); color: white; font-size: 20px; font-weight: 900; box-shadow: 0 -4px 20px rgba(0,0,0,.18); }
  .mobile-call span { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
}