/* ============================================================
   Sacramento Organic Mosquito Control  —  style.css
   Anti-footprint theme: "botanical clean". Herbal green +
   citrus accent, humanist sans headings, soft rounded cards.
   Deliberately unlike the serif/slate chimney site and the
   forest-green/Georgia Placerville site. System fonts only.
   ============================================================ */

:root{
  --forest:#1d6b43;        /* primary herbal green */
  --forest-deep:#0f4a2c;   /* header, footer, deepest */
  --leaf:#3f9d5a;          /* mid green */
  --sprout:#7cb518;        /* citrus/lemongrass accent + CTA */
  --sprout-bright:#8fce1e; /* CTA hover */
  --citron:#eef6dd;        /* pale accent wash */
  --cream:#f7faf3;         /* page background */
  --card:#ffffff;          /* card surface */
  --cream-dim:#e0e8d6;     /* hairlines, borders */
  --ink:#1a2a20;           /* body text */
  --ink-soft:#586b5d;      /* captions, secondary */
  --shadow:0 1px 2px rgba(20,40,25,.06),0 6px 20px rgba(20,40,25,.06);
  --shadow-lift:0 2px 6px rgba(20,40,25,.10),0 14px 34px rgba(20,40,25,.12);
  --wrap:1140px;
  --measure:720px;
  --head:"Trebuchet MS","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --body:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--body);color:var(--ink);background:var(--cream);
  font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.2;color:var(--forest-deep);letter-spacing:-.01em}
h1{font-size:2.15rem;margin:.2em 0 .5em}
h2{font-size:1.6rem;margin:1.8em 0 .5em}
h3{font-size:1.2rem;margin:1.4em 0 .4em;color:var(--forest)}
p,li{font-size:1.0625rem}
a{color:var(--forest);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--sprout)}
strong{color:var(--forest-deep)}
img{max-width:100%;height:auto;display:block}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- Header ---------- */
header{background:var(--forest-deep);position:sticky;top:0;z-index:50;box-shadow:0 1px 0 rgba(255,255,255,.06)}
header .wrap{display:flex;align-items:center;gap:18px;min-height:66px;flex-wrap:wrap}
a.brand{color:#fff;text-decoration:none;font-family:var(--head);font-weight:700;font-size:1.16rem;display:flex;align-items:center;gap:9px;letter-spacing:-.01em}
a.brand:before{content:"";width:20px;height:20px;border-radius:50% 50% 50% 0;background:var(--sprout);display:inline-block;transform:rotate(-45deg);flex:none}
a.brand b{color:var(--sprout);font-weight:700}
header nav{display:flex;gap:15px;margin-left:auto;flex-wrap:wrap}
header nav a{color:#d9e7d2;text-decoration:none;font-size:.94rem;padding:4px 2px}
header nav a:hover{color:#fff}
.head-cta{display:flex;align-items:center}
.head-cta a{background:var(--sprout);color:#13320a;font-weight:700;text-decoration:none;padding:9px 15px;border-radius:8px;font-size:.94rem;white-space:nowrap}
.head-cta a:hover{background:var(--sprout-bright);color:#0f2708}

/* ---------- Hero ---------- */
.hero{
  background:
    linear-gradient(180deg,rgba(11,52,30,.86),rgba(13,58,34,.78)),
    var(--forest-deep);
  background-size:cover;background-position:center;color:#fff;
}
.hero.photo{
  background:
    linear-gradient(90deg,rgba(9,44,26,.92),rgba(11,52,30,.62)),
    url(/assets/img/hero-yard-sacramento.webp) center/cover no-repeat,
    var(--forest-deep);
}
.hero .inner{max-width:760px;padding:58px 0 62px}
.hero h1{color:#fff;font-size:2.5rem;margin-top:0}
.hero .lead{font-size:1.2rem;color:#e4f0dd;margin:0 0 1.3em}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;background:var(--sprout);color:#13320a;font-weight:700;text-decoration:none;padding:13px 22px;border-radius:9px;font-size:1.02rem;box-shadow:var(--shadow)}
.btn:hover{background:var(--sprout-bright);color:#0f2708}
.btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.btn.ghost:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}

/* ---------- Trust strip ---------- */
.strip{background:var(--citron);border-bottom:1px solid var(--cream-dim)}
.strip .wrap{display:flex;flex-wrap:wrap;gap:10px 26px;padding:13px 20px;justify-content:center}
.strip span{font-size:.92rem;color:var(--forest-deep);font-weight:600;display:flex;align-items:center;gap:7px}
.strip span:before{content:"";width:8px;height:8px;background:var(--sprout);border-radius:2px;display:inline-block;flex:none}

/* ---------- Main ---------- */
main{padding:14px 0 10px}
main .wrap{padding-top:8px;padding-bottom:8px}
.measure{max-width:var(--measure)}
.eyebrow{text-transform:uppercase;letter-spacing:.09em;font-size:.76rem;font-weight:700;color:var(--sprout);margin:1.8em 0 .1em}
.eyebrow:first-child{margin-top:.6em}
hr.rule{border:0;border-top:1px solid var(--cream-dim);margin:2.4em 0}
ul,ol{padding-left:1.2em}
li{margin:.35em 0}
figure{margin:1.8em 0}
figure img{border-radius:12px;box-shadow:var(--shadow);width:100%}
figcaption{font-size:.9rem;color:var(--ink-soft);margin-top:.6em;max-width:var(--measure)}

/* ---------- Service card grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:1.2em 0}
.tile{background:var(--card);border:1px solid var(--cream-dim);border-radius:14px;padding:22px 20px;box-shadow:var(--shadow);transition:box-shadow .15s,transform .15s}
.tile:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.tile h3{margin-top:0;color:var(--forest-deep)}
.tile p{color:var(--ink-soft);font-size:1rem}
.tile .more{font-weight:700;text-decoration:none;color:var(--forest);font-size:.96rem}
.tile .more:after{content:" \203A";color:var(--sprout)}
.tile .more:hover{color:var(--sprout)}

/* ---------- Callout ---------- */
.callout{background:var(--forest);color:#fff;border-radius:14px;padding:22px 24px;margin:2em 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;box-shadow:var(--shadow)}
.callout p{margin:0;font-size:1.1rem;color:#eaf5e2}
.callout .num a{background:var(--sprout);color:#13320a;font-weight:700;text-decoration:none;padding:11px 20px;border-radius:9px;white-space:nowrap;display:inline-block}
.callout .num a:hover{background:var(--sprout-bright)}

/* ---------- Feature row (why us) ---------- */
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin:1.4em 0}
.feat{background:var(--card);border:1px solid var(--cream-dim);border-radius:12px;padding:18px}
.feat h4{margin:.1em 0 .3em;color:var(--forest-deep);font-size:1.02rem}
.feat p{margin:0;font-size:.98rem;color:var(--ink-soft)}
.feat .ic{width:34px;height:34px;border-radius:9px;background:var(--citron);display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:6px}

/* ---------- Table ---------- */
table{border-collapse:collapse;width:100%;margin:1.4em 0;font-size:1rem;background:var(--card);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
caption{caption-side:top;text-align:left;color:var(--ink-soft);font-size:.92rem;margin-bottom:.6em}
thead{background:var(--forest);color:#fff}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--cream-dim)}
th{font-family:var(--head);font-size:.95rem}
tbody tr:nth-child(even){background:var(--cream)}
tbody tr:last-child td{border-bottom:0}

/* ---------- FAQ ---------- */
details{border-bottom:1px solid var(--cream-dim);padding:14px 0}
summary{cursor:pointer;font-family:var(--head);font-weight:700;color:var(--forest-deep);font-size:1.06rem;list-style:none;position:relative;padding-right:28px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";position:absolute;right:2px;top:-2px;color:var(--sprout);font-size:1.4rem;font-weight:700}
details[open] summary:after{content:"\2013"}
details[open] summary{margin-bottom:.5em}
details p{margin:.3em 0}

/* ---------- Quote form ---------- */
.formband{background:var(--citron);border-top:1px solid var(--cream-dim);border-bottom:1px solid var(--cream-dim);margin-top:2.6em}
.formband .wrap{padding:40px 20px}
.quote-wrap{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.quote-intro h2{margin-top:0}
.quote-intro ul{list-style:none;padding:0;margin:1em 0}
.quote-intro li{padding-left:26px;position:relative;margin:.5em 0;color:var(--ink)}
.quote-intro li:before{content:"\2713";position:absolute;left:0;color:var(--sprout);font-weight:700}
.quote-form{background:var(--card);border:1px solid var(--cream-dim);border-radius:16px;padding:26px;box-shadow:var(--shadow-lift)}
.quote-form h3{margin-top:0}
.field{margin:0 0 14px}
.field label{display:block;font-weight:600;font-size:.92rem;color:var(--forest-deep);margin-bottom:5px}
.field input,.field select,.field textarea{
  width:100%;padding:11px 12px;border:1.5px solid var(--cream-dim);border-radius:9px;
  font-family:var(--body);font-size:1rem;background:#fff;color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sprout);box-shadow:0 0 0 3px rgba(124,181,24,.16)}
.field textarea{min-height:92px;resize:vertical}
.field.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field.two>div{margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.quote-form button{width:100%;background:var(--sprout);color:#13320a;font-weight:700;border:0;border-radius:10px;padding:14px;font-size:1.06rem;cursor:pointer;font-family:var(--head)}
.quote-form button:hover{background:var(--sprout-bright)}
.formnote{font-size:.82rem;color:var(--ink-soft);margin:.9em 0 0;text-align:center}

/* ---------- Footer ---------- */
footer{background:var(--forest-deep);color:#cfe0c6;margin-top:2.4em;padding:36px 0 26px}
footer .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:22px}
footer h4{color:#fff;font-size:1rem;margin:0 0 .6em}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin:.3em 0}
footer a{color:#bcd3b1;text-decoration:none;font-size:.95rem}
footer a:hover{color:var(--sprout-bright);text-decoration:underline}
.disclosure{font-size:.85rem;color:#8fae83;line-height:1.55;border-top:1px solid rgba(255,255,255,.12);padding-top:16px;margin:0}

/* ---------- Sticky mobile CTA ---------- */
.sticky-call{display:none}
.sticky-call a{background:var(--sprout);color:#13320a}

/* ---------- Responsive ---------- */
@media(max-width:820px){
  .quote-wrap{grid-template-columns:1fr;gap:22px}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  body{font-size:16px}
  h1{font-size:1.8rem}.hero h1{font-size:2rem}h2{font-size:1.4rem}
  header nav{display:none}
  header .head-cta{margin-left:auto}
  .hero .inner{padding:40px 0 44px}
  .callout{flex-direction:column;align-items:flex-start}
  .sticky-call{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:9px 12px;background:var(--forest-deep);box-shadow:0 -2px 12px rgba(0,0,0,.18)}
  .sticky-call a{display:block;text-align:center;font-weight:700;text-decoration:none;padding:13px;border-radius:9px;font-size:1.05rem}
  body{padding-bottom:66px}
  .field.two{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr}
}