/* Goodnight: a calm, friendly night sky. The bugs are the only thing that looks busy. */
:root {
  --bg: #fbfaff; --ink: #211f52; --muted: #4e4c7d; --surface: #efedfb; --line: #d6d3ee;
  --brand: #2c2a6e; --on-brand: #fff; --accent: #ffe27a; --on-accent: #211f52;
  --radius: 8px; --head: "Lora", serif; --body: "Nunito Sans", sans-serif;
  --head-weight: 600; --head-spacing: -0.01em; --header-bg: #2c2a6e; --header-ink: #fff; --header-line: #2c2a6e;
  --footer-bg: #211f52; --star: #6a4fd0; --focus: #6a4fd0;
  --sky: radial-gradient(1.5px 1.5px at 12% 22%, #fff 99%, transparent), radial-gradient(1.5px 1.5px at 28% 68%, #fff 99%, transparent), radial-gradient(2px 2px at 41% 14%, #ffe27a 99%, transparent), radial-gradient(1.5px 1.5px at 56% 82%, #fff 99%, transparent), radial-gradient(2px 2px at 67% 30%, #fff 99%, transparent), radial-gradient(1.5px 1.5px at 84% 58%, #ffe27a 99%, transparent), radial-gradient(1.5px 1.5px at 93% 16%, #fff 99%, transparent);
}
.site-header, .page-head, .band-cta, .pe-hero { --focus: #ffe27a; }
.header-phone { background: var(--accent); color: var(--on-accent); }
.page-head, .band-cta { background: var(--sky), var(--brand); }

.pe-hero { position: relative; overflow: hidden; background: var(--sky), var(--brand); background-size: 420px 300px, 420px 300px, 420px 300px, 420px 300px, 420px 300px, 420px 300px, 420px 300px, auto; color: #fff; }
.pe-moon { position: absolute; top: 34px; left: min(46%, 560px); width: 92px; height: 92px; border-radius: 50%; box-shadow: inset -26px 8px 0 0 #ffe27a; }
.pe-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-block: clamp(56px, 8vw, 96px); }
.pe-grid h1 { font-size: clamp(2.75rem, 5.6vw, 4.5rem); }
.pe-sub { max-width: 42ch; margin-top: 18px; font-size: 1.25rem; }
.pe-hero .btn-alt { color: #fff; }

.pe-finder { --focus: #6a4fd0; padding: 26px; background: #fff; color: var(--ink); border-radius: 10px; }
.pe-finder h2 { font-size: 1.625rem; }
.pe-bugs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.pe-bugs button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; background: var(--surface); color: var(--ink); border: 0; border-radius: 8px; font: 700 0.975rem var(--body); cursor: pointer; }
.pe-bugs button:hover { background: #e0dcf8; }
.pe-bugs button[aria-pressed="true"] { background: var(--brand); color: #fff; }
.pe-bugs svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pe-bugs button[aria-pressed="true"] svg { stroke: var(--accent); }
.pe-answer { min-height: 150px; margin-top: 14px; }
.pe-answer p + p { margin-top: 6px; }
.pe-answer .text-link { margin-top: 8px; }

.band-why { background: var(--surface); }
.band-reviews .review { border: 2px solid var(--line); background: #fff; }
.trade-pest .svc-list a { border-radius: 10px; }
.area-chips li { border-radius: 999px; }

@media (max-width: 880px) {
  .pe-grid { grid-template-columns: 1fr; gap: 32px; }
  .pe-moon { left: auto; right: 12px; top: 10px; }
}