/* ============================================================
   Mosquito Joe CT — mojoctsle.com shared design system
   Fonts: Bricolage Grotesque (display) / Source Serif 4 (body) / Barlow (utility)
   ============================================================ */
:root{
  --green:#5CB531;
  --green-dark:#3E8A1F;
  --pine:#12291A;
  --storm:#1D6FB8;
  --storm-deep:#134E85;
  --gold:#F5B700;
  --paper:#FAFBF7;
  --ink:#17251A;
  --muted:#5B6B5E;
  --line:#E3EAE0;
  --display:'Bricolage Grotesque',sans-serif;
  --body:'Source Serif 4',Georgia,serif;
  --utility:'Barlow',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{font-family:var(--body);background:var(--paper);color:var(--ink);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--storm-deep)}
a:focus-visible,button:focus-visible{outline:3px solid var(--storm);outline-offset:2px;border-radius:4px}
img{max-width:100%}

/* ---------- header ---------- */
header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.nav{max-width:1080px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav .logo img{height:58px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links a{font-family:var(--utility);font-weight:600;font-size:15.5px;color:var(--ink);text-decoration:none}
.nav-links a:hover{color:var(--green-dark)}
.cta-btn{font-family:var(--utility);font-weight:700;font-size:15px;letter-spacing:.02em;text-decoration:none;color:#fff!important;background:var(--green);padding:12px 20px;border-radius:999px;white-space:nowrap;transition:background .15s}
.cta-btn:hover{background:var(--green-dark)}

/* ---------- hero band (shared) ---------- */
.hero{background:var(--pine);color:#fff;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;opacity:.14;background:repeating-linear-gradient(115deg,transparent 0 26px,var(--storm) 26px 28px)}
.hero.hero-green::before{background:repeating-linear-gradient(115deg,transparent 0 26px,var(--green) 26px 28px);opacity:.12}
.hero-inner{position:relative;max-width:760px;margin:0 auto;padding:56px 20px 48px}
.hero-inner.wide{max-width:1080px;padding:72px 20px 64px}
.eyebrow{font-family:var(--utility);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:10px;margin-bottom:18px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);display:inline-block}
h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,6vw,46px);line-height:1.08;letter-spacing:-.01em;margin-bottom:18px}
.hero-inner.wide h1{font-size:clamp(34px,6.5vw,56px);max-width:16ch}
.dek{font-size:clamp(17px,2.4vw,20px);color:#D7E4D6;max-width:56ch;margin-bottom:24px}
.meta{font-family:var(--utility);font-weight:600;font-size:14px;color:#9FBCA3;display:flex;flex-wrap:wrap;gap:8px 18px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
.btn{font-family:var(--utility);font-weight:700;font-size:16px;text-align:center;text-decoration:none;padding:15px 26px;border-radius:999px;transition:transform .12s;display:inline-block}
.btn:active{transform:scale(.98)}
.btn-gold{background:var(--gold);color:var(--pine)}
.btn-line{border:2px solid #fff;color:#fff}

/* ---------- article ---------- */
.article{max-width:760px;margin:0 auto;padding:40px 20px 8px}
.article p{margin-bottom:22px;max-width:68ch}
.article h2{font-family:var(--display);font-weight:700;font-size:clamp(23px,4vw,29px);line-height:1.15;margin:44px 0 16px;letter-spacing:-.005em}
.article h2 .tick{color:var(--green);margin-right:6px}
.article figure{margin:30px 0}
.article figure img{width:100%;height:auto;border-radius:14px;display:block}
.article figcaption{font-family:var(--utility);font-size:13.5px;color:var(--muted);margin-top:10px;text-align:center}
.article figure.lede{margin:0 0 30px}
.stat-callout{font-family:var(--display);font-weight:800;font-size:clamp(22px,4.4vw,30px);line-height:1.2;color:var(--storm-deep);border-left:5px solid var(--gold);padding:6px 0 6px 20px;margin:30px 0}
.src{font-family:var(--utility);font-size:13.5px;font-weight:500;color:var(--muted)}
.src a{color:var(--muted)}

/* ---------- rainfall gauge module ---------- */
.rain-card{background:linear-gradient(165deg,var(--storm-deep),var(--storm));color:#fff;border-radius:18px;padding:30px 24px;margin:38px 0;position:relative;overflow:hidden}
.rain-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;background:repeating-linear-gradient(115deg,transparent 0 18px,#fff 18px 19.5px)}
.rain-card>*{position:relative}
.rain-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-bottom:6px}
.rain-head h3{font-family:var(--display);font-weight:800;font-size:clamp(21px,4vw,26px)}
.rain-head .stamp{font-family:var(--utility);font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#BFE0FF}
.rain-sub{font-family:var(--utility);font-size:14.5px;color:#CFE6FF;margin-bottom:22px}
.gauge{display:grid;grid-template-columns:120px 1fr 62px;align-items:center;gap:10px 14px;font-family:var(--utility)}
.gauge .row{display:contents}
.gauge .town{font-weight:600;font-size:15.5px}
.gauge .bar{height:12px;background:rgba(255,255,255,.18);border-radius:999px;overflow:hidden}
.gauge .bar i{display:block;height:100%;background:linear-gradient(90deg,#8FD0FF,#fff);border-radius:999px}
.gauge .amt{font-weight:700;font-size:15.5px;text-align:right;font-variant-numeric:tabular-nums}
.rain-foot{margin-top:22px;font-family:var(--utility);font-size:14px;color:#CFE6FF}
.rain-foot a{color:#fff;font-weight:600}

/* ---------- checklist ---------- */
.walk{list-style:none;margin:6px 0 26px;display:grid;gap:10px}
.walk li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 16px 15px 50px;position:relative;font-family:var(--utility);font-weight:500;font-size:16px;line-height:1.45}
.walk li::before{content:"✓";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}

/* ---------- highlight panel ---------- */
.panel{background:#EDF6E6;border:1px solid #CFE6BC;border-left:6px solid var(--green);border-radius:14px;padding:26px 24px;margin:38px 0}
.panel h2{margin-top:0!important}
.panel p:last-child{margin-bottom:0}

/* ---------- homepage sections ---------- */
.section{max-width:1080px;margin:0 auto;padding:56px 20px}
.section-head{margin-bottom:30px}
.section-head .eyebrow{color:var(--green-dark)}
.section-head .eyebrow::before{background:var(--green-dark)}
.section-head h2{font-family:var(--display);font-weight:800;font-size:clamp(26px,5vw,36px);line-height:1.1;letter-spacing:-.01em}

/* featured post card */
.feature-card{display:grid;gap:0;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;text-decoration:none;color:var(--ink);transition:box-shadow .15s}
.feature-card:hover{box-shadow:0 8px 30px rgba(18,41,26,.12)}
.feature-card img{width:100%;height:100%;object-fit:cover;display:block}
.feature-body{padding:28px 26px;display:flex;flex-direction:column;gap:12px}
.feature-body .kicker{font-family:var(--utility);font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--storm-deep)}
.feature-body h3{font-family:var(--display);font-weight:800;font-size:clamp(21px,3.6vw,27px);line-height:1.12}
.feature-body p{font-family:var(--utility);font-size:16px;color:var(--muted);line-height:1.55}
.feature-body .read{font-family:var(--utility);font-weight:700;font-size:15.5px;color:var(--green-dark)}
@media(min-width:760px){.feature-card{grid-template-columns:1.1fr 1fr}.feature-card img{min-height:100%}}

/* program cards */
.programs{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:700px){.programs{grid-template-columns:1fr 1fr}}
.program{background:#fff;border:1px solid var(--line);border-top:6px solid var(--green);border-radius:16px;padding:28px 26px;display:flex;flex-direction:column;gap:12px}
.program.defense{border-top-color:var(--storm)}
.program h3{font-family:var(--display);font-weight:800;font-size:23px}
.program .cycle{font-family:var(--utility);font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.program p{font-family:var(--utility);font-size:16px;color:var(--muted);line-height:1.55}
.program .targets{font-family:var(--utility);font-size:15px;font-weight:600;color:var(--ink)}

/* standards strip */
.strip{background:var(--pine);color:#fff}
.strip-inner{max-width:1080px;margin:0 auto;padding:34px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 26px;text-align:center}
.strip-inner p{font-family:var(--display);font-weight:700;font-size:clamp(18px,3.4vw,23px)}
.strip-inner em{color:var(--gold);font-style:normal}

/* ---------- CTA band (shared) ---------- */
.cta-wrap{background:var(--pine);color:#fff;margin-top:56px;position:relative;overflow:hidden}
.cta-wrap::before{content:"";position:absolute;inset:0;opacity:.1;background:repeating-linear-gradient(115deg,transparent 0 26px,var(--green) 26px 28px)}
.cta-inner{position:relative;max-width:760px;margin:0 auto;padding:52px 20px;display:grid;gap:22px}
.cta-inner h2{font-family:var(--display);font-weight:800;font-size:clamp(25px,5vw,34px);line-height:1.1}
.cta-cards{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:640px){.cta-cards{grid-template-columns:1fr 1fr}}
.cta-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:24px 22px;display:flex;flex-direction:column;gap:12px}
.cta-card h3{font-family:var(--display);font-weight:700;font-size:20px}
.cta-card p{font-family:var(--utility);font-size:15.5px;color:#CBDCCB;line-height:1.55}
.cta-card .btn{margin-top:auto}

/* ---------- footer ---------- */
footer{background:#0C1D12;color:#8FA893;font-family:var(--utility);font-size:14px}
.foot-inner{max-width:1080px;margin:0 auto;padding:34px 20px;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.foot-tag{color:#fff;font-weight:700;font-size:15px}
.foot-tag em{color:var(--gold);font-style:normal}
.foot-inner a{color:#B8CDBB}

/* ---------- small screens ---------- */
@media(max-width:520px){
  .nav .logo img{height:48px}
  .nav-links a:not(.cta-btn){display:none}
  .gauge{grid-template-columns:96px 1fr 56px;gap:9px 10px}
  .gauge .town,.gauge .amt{font-size:14px}
}

/* ============================================================
   HUB ADDITIONS — dropdown nav, pressure index, category grids
   ============================================================ */

/* ---------- dropdown nav (no-JS, touch-friendly via <details>) ---------- */
.nav-dd{position:relative}
.nav-dd summary{font-family:var(--utility);font-weight:600;font-size:15.5px;color:var(--ink);cursor:pointer;list-style:none;display:flex;align-items:center;gap:5px;padding:8px 2px}
.nav-dd summary::-webkit-details-marker{display:none}
.nav-dd summary::after{content:"▾";font-size:11px;color:var(--muted);transition:transform .15s}
.nav-dd[open] summary::after{transform:rotate(180deg)}
.nav-dd .dd-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 34px rgba(18,41,26,.14);padding:10px;min-width:220px;display:grid;gap:2px;z-index:60}
.nav-dd .dd-menu a{display:flex;align-items:center;gap:10px;font-family:var(--utility);font-weight:600;font-size:15px;color:var(--ink);text-decoration:none;padding:10px 12px;border-radius:9px}
.nav-dd .dd-menu a:hover{background:#F1F6EE;color:var(--green-dark)}
.nav-dd .dd-menu .soon{opacity:.45;pointer-events:none}
.nav-dd .dd-menu .soon::after{content:"soon";font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-left:auto}

/* ---------- pest pressure index ---------- */
.pressure{background:var(--pine);color:#fff;border-radius:20px;padding:32px 26px;position:relative;overflow:hidden}
.pressure::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.09;background:repeating-linear-gradient(115deg,transparent 0 22px,var(--green) 22px 24px)}
.pressure>*{position:relative}
.pressure-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-bottom:4px}
.pressure-head h2{font-family:var(--display);font-weight:800;font-size:clamp(22px,4.4vw,30px)}
.pressure-head .stamp{font-family:var(--utility);font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.pressure-sub{font-family:var(--utility);font-size:15px;color:#B9CFBB;margin-bottom:24px;max-width:60ch}
.pressure-grid{display:grid;gap:10px}
.pressure-row{display:grid;grid-template-columns:130px 1fr 92px;align-items:center;gap:12px;font-family:var(--utility);text-decoration:none;color:#fff;padding:8px 10px;margin:-2px -10px;border-radius:10px}
a.pressure-row:hover{background:rgba(255,255,255,.07)}
.pressure-row .pest{font-weight:600;font-size:16px;display:flex;align-items:center;gap:9px}
.pressure-row .track{height:12px;background:rgba(255,255,255,.14);border-radius:999px;overflow:hidden}
.pressure-row .track i{display:block;height:100%;border-radius:999px}
.p-vhigh i{width:94%;background:linear-gradient(90deg,#E45B4F,#F5B700)}
.p-high i{width:76%;background:linear-gradient(90deg,#F5B700,#FFE08A)}
.p-mod i{width:52%;background:linear-gradient(90deg,#5CB531,#A8DE8C)}
.p-low i{width:26%;background:linear-gradient(90deg,#4E7D5B,#7FA98B)}
.pressure-row .level{font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-align:right}
.l-vhigh{color:#FF9C93}.l-high{color:var(--gold)}.l-mod{color:#A8DE8C}.l-low{color:#8FA893}
.pressure-foot{margin-top:20px;font-family:var(--utility);font-size:13.5px;color:#8FA893}

/* ---------- post grid ---------- */
.post-grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:700px){.post-grid{grid-template-columns:repeat(3,1fr)}}
.post-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:box-shadow .15s}
.post-card:hover{box-shadow:0 8px 28px rgba(18,41,26,.12)}
.post-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.post-card .pc-body{padding:20px;display:flex;flex-direction:column;gap:9px;flex:1}
.post-card .kicker{font-family:var(--utility);font-weight:700;font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--storm-deep)}
.post-card h3{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.2}
.post-card p{font-family:var(--utility);font-size:14.5px;color:var(--muted);line-height:1.5}
.post-card .read{font-family:var(--utility);font-weight:700;font-size:14px;color:var(--green-dark);margin-top:auto}
.post-card.ghost{border-style:dashed;background:#F5F9F2;align-items:center;justify-content:center;text-align:center;padding:30px 20px;gap:8px;color:var(--muted)}
.post-card.ghost .kicker{color:var(--muted)}
.post-card.ghost:hover{box-shadow:none}

/* ---------- browse cards (pests & conditions) ---------- */
.browse-grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.browse-grid{grid-template-columns:repeat(3,1fr)}}
.browse-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 20px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:6px;transition:box-shadow .15s;position:relative}
.browse-card:hover{box-shadow:0 8px 24px rgba(18,41,26,.1)}
.browse-card .bc-icon{font-size:26px;line-height:1}
.browse-card h3{font-family:var(--display);font-weight:700;font-size:18.5px}
.browse-card p{font-family:var(--utility);font-size:13.5px;color:var(--muted);line-height:1.45}
.browse-card .bc-tag{font-family:var(--utility);font-weight:700;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--green-dark);background:#E4F2DA;padding:3px 9px;border-radius:999px;position:absolute;top:16px;right:16px}
.browse-card .bc-tag.defense{color:var(--storm-deep);background:#E1EEFA}
.browse-card.soon{opacity:.55;pointer-events:none}
.browse-card.soon::after{content:"Coming soon";font-family:var(--utility);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* ============================================================
   CAMPAIGN ADDITIONS — promo panel, forms, FAQ, hub cards
   ============================================================ */
.promo{background:linear-gradient(135deg,var(--green-dark),var(--green));color:#fff;border-radius:16px;padding:26px 24px;margin:38px 0;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.promo::after{content:"";position:absolute;inset:0;opacity:.12;background:repeating-linear-gradient(115deg,transparent 0 22px,#fff 22px 24px);pointer-events:none}
.promo>*{position:relative}
.promo h3{font-family:var(--display);font-weight:800;font-size:clamp(20px,3.8vw,25px);line-height:1.15}
.promo p{font-family:var(--utility);font-size:15.5px;color:#EAF6E2;margin:0;max-width:60ch}
.promo .btn{align-self:flex-start;background:var(--gold);color:var(--pine)}
.lead-form{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 24px;display:grid;gap:14px}
.lead-form label{font-family:var(--utility);font-weight:700;font-size:13.5px;letter-spacing:.04em;color:var(--ink);display:grid;gap:6px}
.lead-form input,.lead-form select,.lead-form textarea{font-family:var(--utility);font-size:16px;padding:13px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);width:100%}
.lead-form input:focus,.lead-form textarea:focus{outline:3px solid rgba(92,181,49,.35);border-color:var(--green)}
.lead-form .btn{width:100%;border:0;cursor:pointer;font-size:17px}
.form-note{font-family:var(--utility);font-size:13px;color:var(--muted);text-align:center}
.faq{display:grid;gap:10px;margin:8px 0 26px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:0}
.faq summary{font-family:var(--utility);font-weight:700;font-size:16px;padding:16px 18px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--green-dark);font-weight:800;font-size:19px}
.faq details[open] summary::after{content:"–"}
.faq .faq-a{padding:0 18px 16px;font-family:var(--utility);font-size:15px;color:var(--muted);line-height:1.6}
.hub-grid{display:grid;gap:14px;grid-template-columns:1fr;margin:26px 0}
@media(min-width:700px){.hub-grid{grid-template-columns:1fr 1fr}}
.hub-card{background:#fff;border:1px solid var(--line);border-left:6px solid var(--green);border-radius:14px;padding:22px 20px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:8px;transition:box-shadow .15s}
.hub-card:hover{box-shadow:0 8px 24px rgba(18,41,26,.1)}
.hub-card.blue{border-left-color:var(--storm)}
.hub-card h3{font-family:var(--display);font-weight:700;font-size:19px}
.hub-card p{font-family:var(--utility);font-size:14.5px;color:var(--muted);line-height:1.5}
.hub-card .read{font-family:var(--utility);font-weight:700;font-size:14px;color:var(--green-dark);margin-top:auto}
.two-col{display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:860px){.two-col{grid-template-columns:1.1fr .9fr;align-items:start}}
.check-inline{list-style:none;display:grid;gap:8px;margin:14px 0 22px}
.check-inline li{font-family:var(--utility);font-size:15.5px;padding-left:28px;position:relative}
.check-inline li::before{content:"✓";position:absolute;left:0;color:var(--green-dark);font-weight:800}