:root {
  --navy:#20245C; --cyan:#3949AB; --orange:#F59E0B; --icon-bg:#FFF7E6; --bg-soft:#F8F8F8; --bg-brand-soft:#F1F3FF;
  --ink:#222222; --white:#FFFFFF; --text-secondary:#4E5368; --border:#DDE1F4; --radius:10px;
  --max-w:1280px;
  --fs-hero-h1: clamp(34px,4.6vw,52px);
  --fs-section-heading: clamp(24px,3vw,32px);
  --fs-page-title: clamp(20px,2.7vw,30px);
  --fs-h2: 22px;
  --fs-feature-h3: 19px;
  --fs-faq-h3: 17px;
  --fs-lead: 16px;
  --fs-body: 15.5px;
  --fs-card-desc: 14.5px;
  --fs-small: 13.5px;
  --fs-micro: 11px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; font-size:var(--fs-body); color:var(--ink); background:var(--white); line-height:1.5; }
h1,h2,h3 { font-family:'Sora',sans-serif; color:var(--navy); }
.wrap { max-width:var(--max-w); margin:0 auto; padding:0 24px; }
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }
.btn-orange { background:var(--orange); color:#fff; border:none; border-radius:var(--radius); padding:11px 22px; font-size:var(--fs-body); font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.btn-outline { display:inline-flex; align-items:center; background:#fff; color:var(--navy); border:1.5px solid var(--navy); border-radius:var(--radius); padding:11px 22px; font-size:var(--fs-body); font-weight:600; cursor:pointer; }
.section-heading { text-align:left; font-size:var(--fs-section-heading); font-weight:800; margin-bottom:32px; }
.eyebrow { display:inline-block; background:var(--bg-brand-soft); color:var(--navy); font-size:var(--fs-micro); font-weight:700; letter-spacing:.04em; padding:5px 12px; border-radius:var(--radius); margin-bottom:16px; }

header { position:sticky; top:0; background:var(--navy); z-index:100; }
.nav-row { display:flex; align-items:center; justify-content:space-between; padding-top:20px; padding-bottom:20px; }
.logo-img { width:218px; aspect-ratio:2048/244; height:auto; display:block; object-fit:cover; object-position:center; }
.nav-links { display:flex; gap:32px; font-size:.95rem; font-weight:600; color:var(--white); opacity:1; }
.nav-links a { transition: color .15s ease; }
.nav-links a:hover { color:var(--orange); }
.nav-right { display:flex; align-items:center; gap:20px; }
.nav-phone { font-size:14.5px; font-weight:700; color:#fff; white-space:nowrap; cursor:pointer; transition:color .15s ease; }
.nav-phone:hover { color:var(--orange); }
.nav-right .btn-orange { padding:13px 26px; }

.hero-section { padding:60px 0; }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; }
.hero-grid h1 { font-size:var(--fs-hero-h1); font-weight:800; line-height:1.15; margin-bottom:14px; }
.hero-grid p { font-size:var(--fs-lead); color:var(--text-secondary); margin-bottom:16px; }
.hero-trust { display:flex; gap:24px; margin-bottom:24px; }
.hero-trust-item { display:flex; align-items:center; gap:10px; font-size:var(--fs-small); font-weight:600; color:var(--navy); }
.hero-trust-item i { width:26px; height:26px; flex-shrink:0; background:var(--icon-bg); color:var(--orange); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:11px; }
.hero-ctas { display:flex; gap:20px; margin-bottom:0; }
.hero-visual { position:relative; min-width:0; }
.hero-visual::before, .hero-visual::after { content:''; position:absolute; width:36px; height:36px; border:3px solid var(--orange); z-index:2; pointer-events:none; }
.hero-visual::before { top:-10px; left:-10px; border-right:none; border-bottom:none; }
.hero-visual::after { bottom:-10px; right:-10px; border-left:none; border-top:none; }
.hero-img { position:relative; border-radius:var(--radius); overflow:hidden; height:360px; z-index:1; }
.hero-img > img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.hero-slider { position:relative; width:100%; height:100%; }
.hero-slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transition:opacity .6s ease; }
.hero-slide-2 { object-position:center 20%; }
.hero-slide.is-active { opacity:1; }
.hero-badge { position:absolute; left:16px; bottom:16px; z-index:2; background:#fff; border-radius:999px; overflow:hidden; padding:6px 16px 6px 6px; display:flex; align-items:center; gap:8px; box-shadow:0 8px 20px rgba(34,34,34,.18); }
.hero-badge i { width:26px; height:26px; background:var(--icon-bg); color:var(--orange); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; }
.hero-badge > div { padding:0; }
.hero-badge strong { display:block; font-size:12.5px; color:var(--navy); }
.hero-badge span { display:none; }

.stats { background:var(--navy); padding:18px 0; }
.stats-grid { display:grid; grid-template-columns:repeat(5,1fr); text-align:center; gap:10px; }
.stat-item { display:flex; align-items:center; justify-content:center; gap:10px; padding:0 12px; border-left:1px solid rgba(255,255,255,.1); }
.stat-item:first-child { border-left:none; }
.stat-icon { width:32px; height:32px; flex-shrink:0; background:var(--icon-bg); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--orange); font-size:13px; }
.stat-line { display:flex; align-items:baseline; justify-content:center; gap:7px; }
.stat-num { font-family:'Sora'; font-weight:700; font-size:16px; color:#fff; }
.stat-label { font-size:var(--fs-micro); color:var(--orange); letter-spacing:.04em; }

.intro { padding:48px 0; }
.intro-grid { display:grid; grid-template-columns:2fr 1fr; gap:40px; align-items:center; }
.intro-text p { font-size:var(--fs-lead); color:var(--text-secondary); margin:0 0 16px; text-align:justify; text-justify:inter-word; }
.intro-text p:last-child { margin-bottom:0; }
.intro-cta-box { background:var(--navy); border-radius:var(--radius); padding:24px; }
.intro-cta-box h3 { color:#fff; font-size:var(--fs-faq-h3); margin-bottom:6px; }
.intro-cta-box p, .content-section .intro-cta-box p { color:#fff; font-size:var(--fs-small); margin-bottom:16px; }
.intro-cta-box .btn-orange { width:100%; justify-content:center; }
/* Scoped to the why-grid--cta variant only (not the shared homepage box): a
   few px more breathing room top/bottom and after the paragraph. */
.why-grid--cta .intro-cta-box { padding-top:30px; padding-bottom:30px; }
.why-grid--cta .intro-cta-box p { margin-bottom:21px; }

/* Accent CTA box: red/orange variant of .intro-cta-box for a stronger visual pull. */
.accent-cta-box {
  position:relative; overflow:hidden;
  background:var(--orange); border-radius:var(--radius); padding:30px;
  box-shadow:0 20px 40px -14px rgba(245,158,11,.35);
}
.accent-cta-box::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:28px 28px;
}
.accent-cta-icon { position:relative; width:52px; height:52px; background:var(--icon-bg); border:1px solid rgba(255,247,230,.7); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--orange); font-size:21px; margin-bottom:18px; }
.accent-cta-box h3 { position:relative; color:#fff; font-size:var(--fs-faq-h3); margin-bottom:8px; }
.content-section .accent-cta-box p { position:relative; color:#fff; font-size:var(--fs-small); max-width:none; line-height:1.5; margin-bottom:20px; }
.accent-cta-box .btn-orange { position:relative; width:100%; justify-content:center; background:var(--navy); color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.15); }
.accent-cta-box .btn-orange:hover { background:#fff; color:var(--navy); }

.why-us { padding:50px 0; background:var(--bg-soft); }
.why-heading { font-size:var(--fs-section-heading); margin-bottom:12px; }
.why-sub { font-size:var(--fs-small); color:var(--text-secondary); margin-bottom:24px; }
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:start; }
/* Wider-left variant: for a why-grid pairing text with a compact CTA box (not an
   image), scoped separately from the base 1fr:1fr split so text-vs-image pairings
   elsewhere aren't affected. Ratio tuned so both columns land at roughly equal
   height (first used on /services/general-pest-control/'s "What to Expect" section). */
.why-grid--cta { grid-template-columns:2fr 1fr; }
.why-features { display:grid; grid-template-columns:1fr 1fr; gap:22px 18px; margin-bottom:24px; }
.why-feature-item { display:flex; align-items:flex-start; gap:12px; }
.why-icon { width:38px; height:38px; background:var(--icon-bg); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--orange); font-size:15px; }
.why-features h3 { font-size:var(--fs-feature-h3); margin-bottom:4px; }
.why-features p { font-size:var(--fs-card-desc); color:var(--text-secondary); }
.why-img { border-radius:var(--radius); overflow:hidden; height:400px; }
.why-img img { width:100%; height:100%; object-fit:cover; }

.how { padding:50px 0; }
.how-steps { display:flex; align-items:stretch; gap:0; margin-bottom:40px; }
.how-step { flex:1; text-align:center; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:24px 22px; transition:all .15s ease; }
.how-step:hover { border-color:var(--orange); box-shadow:0 6px 18px rgba(34,34,34,.08); transform:translateY(-3px); }
.how-icon-wrap { position:relative; width:66px; height:66px; background:var(--icon-bg); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; color:var(--orange); font-size:27px; }
.how-icon-wrap::before { content:''; position:absolute; inset:-12px; background:rgba(245,158,11,.10); border-radius:var(--radius); }
.how-num { position:absolute; top:-10px; right:-10px; width:26px; height:26px; background:var(--navy); color:#fff; border-radius:50%; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.how-step h3 { position:relative; font-size:var(--fs-h2); margin-bottom:8px; padding-bottom:10px; }
.how-step h3::after { content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:32px; height:2px; background:var(--orange); }
.how-step p { font-size:var(--fs-card-desc); color:var(--text-secondary); }
.how-step-detail { margin-top:16px; padding-top:16px; border-top:1px dashed var(--border); font-size:var(--fs-small); text-align:left; }
.tel-link { color:var(--orange); font-weight:700; }
.tel-link:hover { color:#D97706; }
.how-connector { position:relative; width:56px; align-self:center; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.how-connector::before { content:''; position:absolute; left:0; right:0; top:50%; border-top:2px dashed var(--orange); }
.how-connector i { position:relative; width:26px; height:26px; background:var(--icon-bg); border:1px solid rgba(245,158,11,.24); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--orange); font-size:11px; box-shadow:0 2px 6px rgba(34,34,34,.08); }
.how-strip { background:var(--navy); border-radius:var(--radius); padding:34px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:22px; margin-bottom:34px; }
.how-strip-item { display:flex; gap:14px; max-width:240px; }
.how-strip-icon { width:44px; height:44px; background:var(--icon-bg); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--orange); font-size:17px; }
.how-strip .how-strip-item h4 { font-size:var(--fs-body); color:#fff; margin-bottom:4px; }
.how-strip .how-strip-item p { font-size:var(--fs-small); color:#D6DDD8; max-width:none; }

.services { padding:50px 0; background:var(--bg-soft); }
.services--white { background:#fff; }
.services--white .service-card { background:var(--bg-soft); }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.service-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:16px; display:flex; gap:12px; }
.service-icon-box { width:38px; height:38px; background:var(--icon-bg); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--orange); font-size:15px; }
.service-card h3 { font-size:var(--fs-body); margin-bottom:3px; }
.service-card p { font-size:var(--fs-card-desc); color:var(--text-secondary); line-height:1.4; }

.cta-strip { background:var(--navy); border-radius:var(--radius); padding:22px 26px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin:56px auto; max-width:var(--max-w); }
.cta-strip-left { display:flex; align-items:center; gap:16px; }
.cta-strip-icon { width:44px; height:44px; background:var(--icon-bg); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--orange); font-size:18px; }
.cta-strip h3 { font-size:var(--fs-faq-h3); color:#fff; margin-bottom:3px; }
.cta-strip p { font-size:var(--fs-small); color:#fff; }
.cta-strip .btn-orange { background:#fff; color:var(--orange); }
.cta-strip .btn-orange:hover { background:var(--orange); color:#fff; box-shadow:0 4px 12px rgba(245,158,11,.35); }

.states { padding:50px 0; }
.states-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.state-chip { border:1.5px solid var(--border); border-radius:var(--radius); padding:12px 12px; display:flex; align-items:center; gap:8px; text-align:left; min-width:0; }
.state-chip .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.state-live { display:inline-block; background:#E8F8EF; color:#059669; font-size:var(--fs-micro); font-weight:700; letter-spacing:.03em; padding:4px 9px; border-radius:999px; white-space:nowrap; flex-shrink:0; }
.state-chip .name { font-size:var(--fs-small); font-weight:700; color:var(--navy); line-height:1.2; }

.state-chip.is-locked { border-color:#F3C9C4; background:#FBF4F3; cursor:default; }
.state-chip.is-locked .name { color:#8A97A3; }
.state-not-available { display:inline-block; background:#FBEAE8; color:#D5453A; font-size:var(--fs-micro); font-weight:700; letter-spacing:.03em; padding:4px 9px; border-radius:999px; white-space:nowrap; flex-shrink:0; }

.near-me-areas-empty { font-size:var(--fs-small); color:var(--text-secondary); }
.guides-grid-empty { display:none; font-size:var(--fs-small); color:var(--text-secondary); }
.guides-grid-empty.is-visible { display:block; }

/* Client-side ZIP/city lookup, first used on /pest-control/near-me/. Text
   input only, no geolocation. See assets/js/zip-lookup.js. */
.zip-lookup { margin-top:24px; }
.zip-lookup-form { display:flex; gap:12px; }
.zip-lookup-input { flex:1; min-width:0; border:1.5px solid var(--border); border-radius:var(--radius); padding:13px 16px; font-family:'Inter',sans-serif; font-size:var(--fs-body); color:var(--ink); }
.zip-lookup-input:focus { outline:none; border-color:var(--orange); }
.zip-lookup-disclaimer { font-size:var(--fs-micro); color:var(--text-secondary); margin-top:10px; }
.zip-lookup-result { margin-top:20px; background:var(--bg-soft); border-radius:var(--radius); padding:24px; }
.zip-lookup-result h3 { font-size:var(--fs-h2); margin-bottom:6px; }
.zip-lookup-result p { font-size:var(--fs-small); color:var(--text-secondary); margin-bottom:16px; max-width:none; }
.zip-lookup-matches { display:flex; flex-wrap:wrap; gap:8px; }
.zip-lookup-match-chip { border:1.5px solid var(--border); background:#fff; border-radius:999px; padding:9px 16px; font-family:'Inter',sans-serif; font-size:var(--fs-small); font-weight:600; color:var(--navy); cursor:pointer; }
.zip-lookup-match-chip:hover { border-color:var(--orange); background:#fff; }
.zip-lookup-attribution { font-size:var(--fs-micro); color:#8FA1AC; margin-top:12px; }
.zip-lookup-attribution a { color:var(--orange); text-decoration:underline; }

.near-me-clusters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; max-width:920px; margin:0 auto; }
.near-me-cluster-card h3 { font-size:var(--fs-h2); margin-bottom:6px; }
.near-me-cluster-card .glance-list { max-width:none; }
.glance-item a { font-size:var(--fs-small); color:var(--ink); line-height:1.5; }
.glance-item a:hover { color:var(--orange); }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.search-cta { display:flex; align-items:center; justify-content:space-between; gap:20px; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:24px 28px; margin-top:32px; }
.content-section .search-cta:only-child { margin-top:0; }
.search-cta-left { display:flex; align-items:center; gap:18px; }
.search-cta-icon { width:56px; height:56px; background:var(--icon-bg); color:var(--orange); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.search-cta h3 { font-size:var(--fs-h2); margin-bottom:4px; }
.search-cta p { font-size:var(--fs-small); color:var(--text-secondary); margin:0; }
.search-cta--mid { background:var(--orange); border-color:var(--orange); margin:32px 0; }
.search-cta--mid .search-cta-icon { background:var(--icon-bg); color:var(--orange); }
.search-cta--mid h3 { color:#fff; }
.search-cta--mid p { color:#fff; }
.search-cta--mid .btn-orange { background:#fff; color:var(--orange); }
.search-cta--mid .btn-orange:hover { background:var(--navy); color:#fff; }

.guides { padding:50px 0; background:var(--bg-soft); }
.guides--white { background:#fff; }
.guides--white .guide-card { background:var(--bg-soft); }
.guides-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.guide-card { background:#fff; border-radius:var(--radius); overflow:hidden; }
.guide-icon-header { height:70px; background:var(--navy); display:flex; align-items:center; justify-content:center; color:var(--orange); font-size:20px; }
.guide-body { padding:14px; }
.guide-body h3 { font-size:var(--fs-body); line-height:1.35; }

.faq { padding:50px 0; }
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.faq-grid-3col { grid-template-columns:repeat(3,1fr); }
.faq-card { border:1px solid var(--border); border-radius:var(--radius); padding:18px; display:flex; gap:12px; background:#fff; }
.faq .faq-card { background:var(--bg-soft); }
.faq-num { width:28px; height:28px; background:var(--icon-bg); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:'Sora'; font-weight:700; font-size:11px; color:var(--orange); }
.faq-card h3 { font-size:var(--fs-faq-h3); margin-bottom:6px; line-height:1.3; }
.faq-card p { font-size:var(--fs-small); color:var(--text-secondary); line-height:1.5; }

footer { background:var(--navy); padding:34px 0 0; color:#D8DBFF; font-size:var(--fs-small); }
.footer-top h3 { font-family:'Sora'; font-weight:700; font-size:var(--fs-h2); color:#fff; margin-bottom:12px; }
.footer-top p { line-height:1.7; margin-bottom:16px; }
.footer-phone { display:inline-block; font-family:'Sora'; font-weight:700; font-size:var(--fs-faq-h3); color:var(--orange); margin-bottom:20px; cursor:pointer; }
.footer-row { border-top:1px solid #373B7D; padding:14px 0; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.footer-row .label { font-weight:700; color:#fff; font-size:var(--fs-small); flex-shrink:0; }
.footer-row a.label:hover { color:var(--orange); }
.footer-row .items { display:flex; flex-wrap:wrap; gap:8px; }
.footer-row .items a { color:#E5E7FF; border:1px solid rgba(255,255,255,.15); border-radius:var(--radius); padding:4px 10px; transition:color .15s ease, border-color .15s ease; }
.footer-row .items a:hover { color:var(--orange); border-color:var(--orange); }
.footer-bottom { background:#171A4A; margin-top:20px; }
.footer-bottom-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; padding-top:14px; padding-bottom:14px; }
.footer-bottom span { font-size:var(--fs-micro); color:#BFC4F2; }
.footer-bottom-inner span:first-child { color:#fff; }
.footer-bottom span.footer-brand-inline { color:var(--orange); font-weight:700; }
.footer-bottom span.footer-legal { color:#fff; display:flex; flex-wrap:wrap; gap:16px; }

/* Page hero: shared inner-page header band. Generic, populate breadcrumb/H1/subtext/CTA per page, no page-specific hooks. */
.page-hero {
  background-color:var(--bg-brand-soft);
  background-image:
    linear-gradient(rgba(57,73,171,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,73,171,.08) 1px, transparent 1px);
  background-size:32px 32px;
  border-bottom:1px solid var(--border);
  /* Locked universal rule (2026-08-22): every inner-page hero with a right-side
     box totals 325px (this padding + the 240px box below), regardless of which
     box variant that page uses. */
  padding:42px 0 43px;
  min-height:248.59px;
}
.breadcrumb { font-size:12.5px; color:var(--text-secondary); margin-bottom:16px; }
.breadcrumb a { color:var(--text-secondary); }
.breadcrumb a:hover { color:var(--orange); }
.breadcrumb-sep { color:#B9C2C9; margin:0 6px; }
.breadcrumb-current { color:var(--navy); font-weight:600; }
.page-hero h1 { color:var(--navy); font-size:var(--fs-page-title); margin-bottom:14px; }
.page-hero p { color:var(--text-secondary); font-size:15.5px; max-width:640px; margin-bottom:24px; }

/* Glance card: reuses the why-us checklist visual language for pages with no image. */
.page-hero-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center; }
.glance-card { background:#fff; border-radius:var(--radius); padding:26px; box-shadow:0 20px 50px -12px rgba(34,34,34,.16); }
/* Full-width variant: same white card + shadow as the hero right-side boxes, but
   spanning the whole content width as a standalone section instead of sitting in a
   half-width grid column (first used on /services/general-pest-control/'s Signs
   section). Slightly more padding than the compact hero card feels right at this size. */
.glance-card--full { padding:32px; }
.content-section .glance-card--full .glance-list { max-width:none; display:grid; grid-template-columns:1fr 1fr; column-gap:40px; }
.content-section .glance-card--full > p { max-width:none; }
/* Locked universal rule (2026-08-22): every page-hero's right-side white card is
   240px tall, whatever variant of content it holds (icon-flow, checklist,
   pest-flow, map visual) -- content is vertically centered inside that fixed
   height rather than each variant setting its own natural height. */
.page-hero-grid .glance-card { height:240px; display:flex; flex-direction:column; justify-content:center; }
.glance-card h2 { font-size:var(--fs-faq-h3); margin-bottom:6px; text-align:left; }
.glance-list { display:flex; flex-direction:column; }
.content-section .glance-list { max-width:460px; }
.glance-list + p { margin-top:16px; }
.glance-item { display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-bottom:1px solid var(--border); }
.glance-item:last-child { border-bottom:none; padding-bottom:0; }
.glance-item:first-child { padding-top:14px; }
.glance-item i { color:var(--orange); font-size:15px; flex-shrink:0; margin-top:3px; }

/* Centered glance-card variant: icon flow instead of a checklist. Locked reusable
   pattern for any future inner-page hero that wants a right-side box without a
   3-item checklist (first used on /faq/). */
.glance-card--centered h2 { text-align:left; }
.icon-flow { display:flex; align-items:center; justify-content:space-between; margin:22px 0; }
.icon-flow-icon { width:96px; height:96px; background:var(--icon-bg); color:var(--orange); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:38px; flex-shrink:0; }
.icon-flow-connector { position:relative; flex:1; height:2px; margin:0 14px; }

/* Solid-navy single-icon glance-card variant: whole 240px hero box is navy
   (not the default white), one large accent icon centered, no heading or text.
   Locked reusable pattern for individual guide pages' hero (each guide's own
   icon, matching the icon already used for that guide's card on /guides/). */
.glance-card--icon-navy { background:var(--navy); align-items:center; justify-content:center; }
.glance-card--icon-navy i { color:var(--orange); font-size:64px; }

/* Guide body "4 big boxes" layout: 2x2 grid, 3 real content boxes (heading +
   paragraph, same border/radius language as .faq-card) plus the page's
   search-cta reused as the 4th grid cell instead of sitting in its own
   separate full-width strip below the body. */
.body-boxes-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.body-box { border:1px solid var(--border); border-radius:var(--radius); padding:28px; background:#fff; box-shadow:0 4px 14px rgba(34,34,34,.08); }
.body-box h2 { font-size:var(--fs-faq-h3); margin-bottom:10px; }
.body-box p { font-size:var(--fs-small); color:var(--text-secondary); max-width:none; margin:0; }
.body-boxes-grid .search-cta { flex-direction:column; align-items:flex-start; margin-top:0; box-shadow:0 4px 14px rgba(34,34,34,.08); }
.body-boxes-grid .search-cta .search-cta-left { flex-direction:column; align-items:flex-start; gap:12px; }
.body-boxes-grid .search-cta .btn-orange { margin-top:18px; }
.icon-flow-connector::before { content:''; position:absolute; left:0; right:0; top:50%; border-top:2px dashed var(--orange); }
.icon-flow-connector i { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:34px; height:34px; background:var(--icon-bg); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--orange); font-size:14px; box-shadow:0 2px 6px rgba(34,34,34,.15); }
.glance-item p { font-size:var(--fs-small); color:var(--ink); margin:0; line-height:1.5; }

/* Pest-flow variant of the centered glance-card: two pest icons on each side of a
   central red tanker/bottle icon (first used on /services/). */
.pest-flow { display:flex; align-items:center; justify-content:center; gap:22px; margin:26px 0; }
.pest-flow-icon { width:56px; height:56px; background:var(--icon-bg); color:var(--orange); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.pest-flow-tank { width:80px; height:80px; background:var(--icon-bg); color:var(--orange); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:36px; flex-shrink:0; }

.page-hero-grid .glance-card .icon-flow-icon,
.page-hero-grid .glance-card .icon-flow-connector i,
.page-hero-grid .glance-card .pest-flow-icon,
.page-hero-grid .glance-card .pest-flow-tank { background:var(--navy); }

/* Service page hero image: reuses .hero-visual's accent corner-bracket treatment (the
   same ones the about-page hero uses), not the .glance-card white box other inner
   pages use for icon-flow/checklists -- a real photo doesn't need a white mat around
   it (first used on /services/general-pest-control/). Locked universal rule
   (2026-08-22): 240px tall, same as every .glance-card box, so the bracket-image
   variant matches every other page-hero right-side box exactly. */
.page-hero-grid .hero-visual { max-width:420px; margin-left:auto; }
.service-hero-img { height:240px; }
/* Wider-text variant of .page-hero-grid for the Service×State combo pages'
   "About {Service} in {City}" section: two full paragraphs of real content
   wrap into far fewer lines at a 2:1 text:image ratio than the default
   1.3:1, bringing the text block's height closer to the image's fixed
   240px instead of running well past it. Scoped to a modifier class, not
   applied to .page-hero-grid itself, so the top page-hero (breadcrumb/H1/
   icon-flow box) and every other .page-hero-grid instance sitewide are
   unaffected -- first used on Arizona's city/combo batch. */
.page-hero-grid--wide-text { grid-template-columns:2fr 1fr; }

/* Map hero icon (e.g. /locations/): single big centered icon, no pairing concept needed. */
.map-hero-visual { margin:20px 0 0; background:#fff; border-radius:var(--radius); padding:6px; display:flex; align-items:center; justify-content:center; }
.map-hero-visual img { width:100%; max-height:150px; display:block; }

/* Content section: generic H2 + body copy block reused across inner-page sections. */
.content-section { padding:40px 0; }
.content-section:nth-child(even) { background:var(--bg-soft); }
.content-section:nth-child(even) .faq-card { background:#fff; }
.content-section:nth-child(odd) .faq-card { background:var(--bg-soft); }

/* FAQ groups (e.g. /faq/): each group is its own alternating band, scoped to this wrapper
   so the sequence can start on gray regardless of the page-level nth-child parity above. */
.faq-groups .content-section:nth-child(odd) { background:#fff; }
.faq-groups .content-section:nth-child(even) { background:var(--bg-soft); }
.faq-groups .content-section:nth-child(odd) .faq-card { background:var(--bg-soft); }
.faq-groups .content-section:nth-child(even) .faq-card { background:#fff; }

/* Column-major FAQ split: items stack top-to-bottom within each column instead of
   reading left-right per row, and columns are independent height (no row alignment). */
.faq-columns { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.faq-col { display:flex; flex-direction:column; gap:16px; }
.content-section h2 { font-size:var(--fs-page-title); margin-bottom:14px; }
.content-section h2.section-heading { font-size:var(--fs-section-heading); margin-bottom:32px; }
.content-section p { font-size:var(--fs-lead); color:var(--text-secondary); max-width:760px; }
.content-section h2.section-heading:has(+ p),
.states h2.section-heading:has(+ p) { margin-bottom:12px; }
.content-section h2.section-heading + p,
.states h2.section-heading + p { margin-bottom:28px; }
/* Opt-out of the default 760px readability cap for a section that should span
   the full content width instead (first used on /services/general-pest-control/'s
   "What ... Covers" section). Scoped per-section, not a global change to
   .content-section p. */
.content-full-width p { max-width:none; }
.tel-inline { color:var(--orange); font-weight:700; }
.content-section p + p { margin-top:16px; }
.content-section p a { color:var(--navy); font-weight:600; text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:3px; }
.content-section p a:hover { color:var(--orange); }
.content-section p a.tel-inline, .content-section p a.tel-inline:hover { color:var(--orange); text-decoration:none; }

/* Long-form paragraph alignment: scoped to body/article/legal content containers. */
.content-full-width > p,
.why-grid--cta > div:first-child > p,
.page-hero-grid--wide-text > div:first-child > p,
.glance-card--full > p,
.body-box > p {
  text-align:justify;
  text-justify:inter-word;
}

.hero-grid p,
.page-hero p,
.service-card p,
.guide-body p,
.faq-card p,
.cta-strip p,
.search-cta p,
.intro-cta-box p,
.accent-cta-box p,
.why-features p,
.how-step p,
.how-strip p,
.centered-features p,
.glance-item p,
footer p {
  text-align:left;
}

/* Section intro: centered heading + subtext, reused above centered-feature grids and similar blocks. */
.section-intro { text-align:left; max-width:640px; margin:0 0 40px; }
.section-intro h2 { font-size:var(--fs-page-title); font-weight:800; margin-bottom:10px; }
.section-intro--wide h2 { font-size:var(--fs-section-heading); }
.section-intro p { font-size:var(--fs-lead); color:var(--text-secondary); margin:0; }

/* Centered feature grid: icon-above-title-above-description, generic, reusable across pages. */
.centered-features { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; text-align:center; }
.centered-feature-icon { width:72px; height:72px; margin:0 auto 18px; border:2px solid var(--orange); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; color:var(--orange); font-size:26px; }
.centered-features h3 { font-size:var(--fs-body); text-transform:uppercase; letter-spacing:.03em; margin-bottom:8px; }
.centered-features p { font-size:var(--fs-small); color:var(--text-secondary); margin:0; }
.centered-features p a { color:var(--navy); font-weight:600; text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:2px; }
.centered-features p a:hover { color:var(--orange); }

@media (max-width:768px) {
  .nav-row { flex-wrap:wrap; gap:12px; }
  .nav-links { order:3; width:100%; display:flex; flex-wrap:wrap; gap:8px; font-size:13px; line-height:1.2; padding-top:8px; }
  .nav-links a { color:#fff; padding:7px 9px; border:1px solid rgba(255,255,255,.18); border-radius:var(--radius); background:rgba(255,255,255,.06); }
  .nav-links a:hover { color:var(--orange); border-color:var(--orange); background:rgba(255,255,255,.1); }
  .hero-grid, .why-grid, .intro-grid, .page-hero-grid, .body-boxes-grid { grid-template-columns:1fr; }
  .content-section .glance-card--full .glance-list { grid-template-columns:1fr; }
  .hero-grid h1 { font-size:28px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .why-features { grid-template-columns:1fr; }
  .how-steps { flex-direction:column; align-items:center; gap:16px; }
  .how-connector { display:none; }
  .services-grid, .guides-grid, .faq-grid, .faq-grid-3col, .centered-features { grid-template-columns:1fr 1fr !important; }
  .states-grid { grid-template-columns:repeat(2,1fr); }
  .cta-strip { flex-direction:column; text-align:center; }
  .footer-links { grid-template-columns:1fr 1fr; }
  .zip-lookup-form { flex-direction:column; }
  .near-me-clusters { grid-template-columns:1fr; }
  .intro-text p,
  .content-full-width > p,
  .why-grid--cta > div:first-child > p,
  .page-hero-grid--wide-text > div:first-child > p,
  .glance-card--full > p,
  .body-box > p {
    text-align:left !important;
  }
}

.btn-orange { transition: all .15s ease; }
.btn-orange:hover { background:#D97706; transform:translateY(-2px); box-shadow:0 4px 12px rgba(245,158,11,.3); }
.btn-outline { transition: all .15s ease; }
.btn-outline:hover { background:var(--navy); color:#fff; transform:translateY(-2px); }
.service-card, .guide-card, .faq-card, .state-chip { transition: all .15s ease; cursor:pointer; }
.service-card:hover, .guide-card:hover, .faq-card:hover { border-color:var(--orange); box-shadow:0 6px 18px rgba(34,34,34,.08); transform:translateY(-3px); }
.state-chip:not(.is-locked):hover { border-color:var(--orange); background:var(--bg-soft); }

.go-to-top {
  position:fixed; right:14px; bottom:74px; z-index:200;
  width:46px; height:46px; border:none; border-radius:var(--radius);
  background:var(--orange); color:#fff; font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(34,34,34,.2);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, background .15s ease, visibility .2s ease;
}
.go-to-top.is-visible { opacity:1; visibility:visible; transform:translateY(0); }
.go-to-top:hover { background:#20245c; }

/* Sticky mobile call bar: bottom-fixed, mobile-only, shown past a 300px
   scroll threshold (see main.js) -- deliberately requested at 300px even
   though .go-to-top elsewhere on the site uses 220px; the two thresholds
   are intentionally different, not a copy-paste mismatch. Hidden by default
   via translateY, not display, so it never causes layout shift when it
   first becomes visible; display:none outside the mobile breakpoint means
   it never renders on desktop regardless of scroll state or is-visible
   class. */
.mobile-call-bar {
  position:fixed; left:0; right:0; bottom:0; z-index:300;
  display:none; align-items:center; justify-content:center;
  background:var(--orange);
  padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 12px rgba(34,34,34,.18);
  transform:translateY(100%);
  transition:transform .25s ease;
}
.mobile-call-bar.is-visible { transform:translateY(0); }
.mobile-call-bar-link {
  display:flex; align-items:center; gap:10px;
  color:#fff; font-weight:700; font-size:var(--fs-lead);
}
.mobile-call-bar-link i { font-size:16px; }

@media (max-width:768px) {
  .mobile-call-bar { display:flex; }
  /* Reserve real space for the bar's own height so it never covers footer
     content when the visitor scrolls all the way down, and lift .go-to-top
     above it so the two fixed elements never overlap when both are visible
     at once. */
  body { padding-bottom:64px; }
  .mobile-call-bar { width:100%; max-width:100%; box-sizing:border-box; }
  .go-to-top { bottom:138px; }
}

@media (max-width:480px) {
  .wrap { padding:0 16px; }
  .nav-row { gap:12px; }
  .nav-right .btn-orange { padding:11px 14px; }
  .content-section .search-cta {
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .content-section .search-cta .btn-orange {
    justify-content:center;
    max-width:100%;
    box-sizing:border-box;
    white-space:normal;
    text-align:center;
  }
  .content-section .search-cta .btn-orange[style*="white-space:nowrap"] {
    flex-shrink:1 !important;
    min-width:0;
    white-space:normal !important;
  }
  .content-section .content-full-width > div[style*="grid-template-columns:1fr 1fr"][style*="gap:14px"][style*="margin:20px 0"] {
    grid-template-columns:1fr !important;
    max-width:100%;
  }
  .content-section .content-full-width > div[style*="grid-template-columns:1fr 1fr"][style*="gap:14px"][style*="margin:20px 0"] > * {
    min-width:0;
  }
  .page-hero-grid .glance-card--centered .pest-flow {
    gap:8px;
  }
  .page-hero-grid .glance-card--centered .pest-flow-icon {
    width:42px;
    height:42px;
    font-size:18px;
  }
  .page-hero-grid .glance-card--centered .pest-flow-tank {
    width:58px;
    height:58px;
    font-size:28px;
  }
  .stats-grid { grid-template-columns:1fr; }
  .services-grid, .guides-grid, .faq-grid, .faq-grid-3col, .centered-features { grid-template-columns:1fr !important; }
}