/* Front page — below-the-fold and progressive-enhancement styles.
   Loaded non-render-blocking (inc/enqueue.php). Brand tokens from main.css. */

/* 3D layer (created by home-scene.min.js) */
.io-stage__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s ease}
.io-stage.is-3d .io-stage__canvas{opacity:1}
.io-stage__poster{transition:opacity .6s ease,visibility 0s .6s}
.io-stage.is-3d .io-stage__poster{opacity:0;visibility:hidden}
.io-stage__callout{position:absolute;left:0;top:0;pointer-events:none;font:500 .82rem/1.3 var(--io-font-body);color:var(--io-on-night);background:rgba(6,36,32,.85);border:1px solid rgba(230,244,241,.18);border-radius:8px;padding:.4rem .65rem;white-space:nowrap;opacity:0;will-change:transform}
.io-stage__callout:before{content:"";position:absolute;left:-14px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#f3b562;box-shadow:0 0 0 4px rgba(243,181,98,.22)}
.io-stage__ruler{position:absolute;right:1.25rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;opacity:0;transition:opacity .3s}
.io-stage__ruler.is-on{opacity:1}
.io-stage__ruler i{display:block;width:3px;height:34px;border-radius:2px;background:rgba(230,244,241,.16);position:relative;overflow:hidden}
.io-stage__ruler b{position:absolute;inset:0;background:var(--io-glow);transform-origin:top;transform:scaleY(0)}
@media(max-width:879px){.io-stage__ruler{display:none}}

/* Poster: a few mosquitoes hovering while (or instead of) the 3D loads */
.io-stage__bugs circle{animation:io-hover 3.2s ease-in-out infinite alternate;transform-box:fill-box}
.io-stage__bugs circle:nth-child(2){animation-duration:2.6s;animation-delay:-.8s}
.io-stage__bugs circle:nth-child(3){animation-duration:3.8s;animation-delay:-1.6s}
.io-stage__bugs circle:nth-child(4){animation-duration:2.9s;animation-delay:-2.1s}
.io-stage__bugs circle:nth-child(5){animation-duration:3.4s;animation-delay:-.4s}
@keyframes io-hover{0%{transform:translate(0,0)}35%{transform:translate(14px,-9px)}70%{transform:translate(-8px,7px)}100%{transform:translate(10px,12px)}}
.io-stage.is-3d .io-stage__bugs circle{animation:none}

/* Four-step story */
.io-stage__intro{max-width:30rem;padding-top:16vh}
.io-stage__intro h2{color:#fff;font-size:clamp(1.9rem,3.8vw,3rem);letter-spacing:-.02em}
.io-stage__intro p{margin-top:.9rem;color:var(--io-on-night-muted)}
.io-step{max-width:25rem;padding:1.6rem 1.6rem 1.7rem;border-radius:var(--io-radius);background:rgba(6,36,32,.66);border:1px solid rgba(230,244,241,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.io-step__n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--io-glow);color:var(--io-glow);font-family:var(--io-font-head);font-weight:700;font-size:.95rem;margin-bottom:1rem}
.io-step h3{color:#fff;font-size:1.55rem}
.io-step p{margin-top:.65rem;color:var(--io-on-night-muted)}
.io-step a{color:#86e6d7}
.io-stage__end{height:28vh}
.io-picker__opts button:hover{border-color:rgba(230,244,241,.5)}
.io-stage .io-btn--ghost-night:hover{border-color:var(--io-glow);color:#fff;background:rgba(63,209,188,.1)}
.io-stage :focus-visible{outline-color:var(--io-glow)}
@media(max-width:879px){.io-step{background:rgba(6,36,32,.9)}.io-stage__intro{margin-top:10vh;padding:1.4rem;border-radius:var(--io-radius);background:rgba(6,36,32,.9)}}

/* Pest finder */
.io-finder{margin-top:2.4rem;display:grid;gap:2rem;text-align:left}
.io-finder__tabs{display:none}
.io-finder.is-tabs .io-finder__tabs{display:flex;flex-direction:column;gap:.2rem}
.io-finder__tabs button{font:700 1.02rem var(--io-font-head);color:var(--io-muted);text-align:left;background:none;border:0;border-left:3px solid var(--io-border);padding:.65rem 1rem;cursor:pointer;transition:color var(--io-transition),border-color var(--io-transition)}
.io-finder__tabs button:hover{color:var(--io-pine)}
.io-finder__tabs button[aria-selected=true]{color:var(--io-pine);border-left-color:var(--io-teal)}
.io-finder__panel{padding-bottom:1.75rem;margin-bottom:1.75rem;border-bottom:1px solid var(--io-border)}
.io-finder.is-tabs .io-finder__panel{padding:0;margin:0;border:0}
.io-finder__panel[hidden]{display:none}
.io-finder__panel>p:first-of-type{margin-top:.6rem;max-width:38rem;color:var(--io-muted);font-size:1.08rem}
.io-verdict{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.5rem 1rem;max-width:38rem;margin-top:1.4rem;padding:1.1rem 1.25rem;background:var(--io-mist);border-radius:var(--io-radius)}
.io-verdict__k{color:var(--io-muted);font-size:.95rem}
.io-verdict__meter{display:flex;gap:5px}
.io-verdict__meter i{width:42px;height:8px;border-radius:4px;background:#c9ddd8}
.io-verdict[data-level="1"] .io-verdict__meter i:nth-child(-n+1),.io-verdict[data-level="2"] .io-verdict__meter i:nth-child(-n+2),.io-verdict[data-level="3"] .io-verdict__meter i{background:var(--io-teal)}
.io-verdict__v{color:var(--io-pine);font-family:var(--io-font-head)}
.io-verdict__note{grid-column:1/-1;color:var(--io-charcoal);font-size:.98rem}
.io-finder__links{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.4rem}
@media(min-width:880px){.io-finder{grid-template-columns:230px 1fr;gap:3rem}}
@media(max-width:879px){.io-finder.is-tabs .io-finder__tabs{flex-direction:row;overflow-x:auto;scrollbar-width:none;margin-inline:-1rem;padding-inline:1rem}.io-finder__tabs button{border-left:0;border-bottom:3px solid var(--io-border);white-space:nowrap}.io-finder__tabs button[aria-selected=true]{border-bottom-color:var(--io-teal)}.io-verdict{grid-template-columns:1fr auto}.io-verdict__k{grid-column:1/-1}}

/* ---------- Pest finder vignettes (inc/pest-vignettes.php) ---------- */
.io-vg-defs{position:absolute;width:0;height:0;overflow:hidden}
.io-finder__art{margin:0 0 1.25rem}
.io-vg{display:block;width:100%;max-width:420px;height:auto;aspect-ratio:320/200}
.io-vg .vg-bg{fill:var(--io-mist)}
.io-vg .vg-floor{stroke:#a9c9c2;stroke-width:2;stroke-linecap:round}
.io-vg .vg-screen{fill:none;stroke:var(--io-teal);stroke-width:2.5}
.io-vg .vg-decor{fill:none;stroke:#bcd6d0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.io-vg .vg-decor-fill{fill:#fff;stroke:#bcd6d0;stroke-width:2}
.io-vg .vg-seam{stroke:#bcd6d0;stroke-width:1.2;stroke-dasharray:3 3}
.io-vg .vg-lab{font:600 11px var(--io-font-body);fill:var(--io-muted)}
.io-vg .vg-drain{fill:#cfe3de;stroke:#8fb3ab;stroke-width:1.2}
.io-vg .vg-drain-grate{stroke:#8fb3ab;stroke-width:1}
.io-vg .vg-pulse{fill:none;stroke:#f07b5c;stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.io-vg .vg-gap{stroke:#f07b5c;stroke-width:2;stroke-linecap:round;stroke-dasharray:2 3}
.io-vg .vg-ripple{fill:none;stroke:var(--io-teal);stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:center}
.io-vg .vg-hole{fill:var(--io-mist);stroke:#f07b5c;stroke-width:1.5;stroke-dasharray:3 2;transform-box:fill-box;transform-origin:center;transform:scale(0)}
.io-vg .vg-tunnel{fill:none;stroke:#b9805a;stroke-width:4.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:35}
.io-vg .vg-actor,.io-vg .vg-wing{transform-box:fill-box;transform-origin:center}
.io-vg .vg-wing{transform-origin:50% 100%}
.io-vg .vg-drainroach{opacity:0}

.io-finder.is-playing .io-vg .vg-wing{animation:vg-flap .08s linear infinite alternate}
.io-finder.is-playing .io-vg .vg-hit{animation:vg-hit 3.3s ease-in-out infinite}
.io-finder.is-playing .io-vg .vg-zig{animation:vg-zig 3.3s ease-in-out infinite}
.io-finder.is-playing .io-vg .vg-ripple{animation:vg-ripple 3.3s ease-out infinite}
.io-finder.is-playing .io-vg .vg-roach{animation:vg-roach 5s linear infinite}
.io-finder.is-playing .io-vg .vg-ripple--roach{animation:vg-ripple-roach 5s ease-out infinite}
.io-finder.is-playing .io-vg .vg-drainroach{animation:vg-drain 5s ease-in-out infinite -2.5s}
.io-finder.is-playing .io-vg .vg-pulse{animation:vg-pulse 5s ease-out infinite -2.5s}
.io-finder.is-playing .io-vg .vg-march{animation:vg-march 7.6s linear infinite}
.io-finder.is-playing .io-vg .vg-gap{animation:vg-blinkgap 1.6s ease-in-out infinite alternate}
.io-finder.is-playing .io-vg .vg-crawl{animation:vg-crawl 6s linear infinite}
.io-finder.is-playing .io-vg .vg-tunnel{animation:vg-tunnel 7s ease-in-out infinite}
.io-finder.is-playing .io-vg .vg-blink{animation:vg-blink 1.8s ease-in-out infinite}
.io-finder.is-playing .io-vg .vg-rat{animation:vg-rat 7s ease-in-out infinite}
.io-finder.is-playing .io-vg .vg-hole{animation:vg-hole 7s ease-in-out infinite}

@keyframes vg-flap{to{transform:scaleY(.35)}}
@keyframes vg-hit{0%{transform:translate(0,0)}45%{transform:translate(var(--dx),var(--dy))}53%{transform:translate(calc(var(--dx) - 24px),calc(var(--dy) - 8px))}100%{transform:translate(0,0)}}
@keyframes vg-zig{0%{transform:translate(0,0)}15%{transform:translate(calc(var(--dx) * .3),-14px)}30%{transform:translate(calc(var(--dx) * .62),12px)}45%{transform:translate(var(--dx),var(--dy))}55%{transform:translate(calc(var(--dx) - 28px),calc(var(--dy) - 12px))}78%{transform:translate(calc(var(--dx) * .4),8px)}100%{transform:translate(0,0)}}
@keyframes vg-ripple{0%,42%{opacity:0;transform:scale(.4)}46%{opacity:.95;transform:scale(1)}62%,100%{opacity:0;transform:scale(2.6)}}
@keyframes vg-roach{0%{transform:translate(0,0) scaleX(1)}38%{transform:translate(112px,0) scaleX(1)}46%{transform:translate(112px,0) scaleX(1)}50%{transform:translate(110px,0) scaleX(-1)}92%{transform:translate(0,0) scaleX(-1)}96%,100%{transform:translate(0,0) scaleX(1)}}
@keyframes vg-ripple-roach{0%,37%{opacity:0;transform:scale(.4)}40%{opacity:.95;transform:scale(1)}56%,100%{opacity:0;transform:scale(2.6)}}
@keyframes vg-drain{0%{opacity:0;transform:translate(0,4px) scale(.3)}14%{opacity:1;transform:translate(4px,-1px) scale(1)}62%{opacity:1;transform:translate(70px,-1px) scale(1)}74%,100%{opacity:0;transform:translate(84px,-1px) scale(1)}}
@keyframes vg-pulse{0%{opacity:.9;transform:scale(1)}30%,100%{opacity:0;transform:scale(2.2)}}
@keyframes vg-march{from{transform:translate(0,0)}to{transform:translate(346px,0)}}
@keyframes vg-blinkgap{from{opacity:.35}to{opacity:1}}
@keyframes vg-crawl{0%{opacity:0;transform:translate(0,0) rotate(0)}6%{opacity:1}42%{transform:translate(78px,0) rotate(0)}48%{transform:translate(82px,-4px) rotate(-90deg)}68%{transform:translate(82px,-26px) rotate(-90deg)}74%{transform:translate(90px,-28px) rotate(0)}88%{opacity:1;transform:translate(130px,-28px) rotate(0)}96%,100%{opacity:0;transform:translate(140px,-28px) rotate(0)}}
@keyframes vg-tunnel{0%{stroke-dashoffset:100;opacity:1}62%{stroke-dashoffset:0;opacity:1}86%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes vg-blink{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes vg-rat{0%{opacity:0;transform:translate(0,0)}6%{opacity:1}24%{transform:translate(98px,0)}28%{transform:translate(95px,0)}32%{transform:translate(98px,0)}36%{transform:translate(95px,0)}40%{transform:translate(98px,0)}44%{transform:translate(95px,0)}50%{transform:translate(98px,0)}78%{opacity:1;transform:translate(214px,0)}86%,100%{opacity:0;transform:translate(236px,0)}}
@keyframes vg-hole{0%,26%{transform:scale(0);opacity:1}48%{transform:scale(1);opacity:1}88%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}

/* Tab change: panel fades in, verdict bars fill */
.io-finder.is-playing .io-finder__panel:not([hidden]){animation:vg-panel .35s ease both}
.io-finder.is-playing .io-finder__panel:not([hidden]) .io-verdict__meter i{animation:vg-fill .45s ease both;transform-origin:left}
.io-finder.is-playing .io-finder__panel:not([hidden]) .io-verdict__meter i:nth-child(2){animation-delay:.12s}
.io-finder.is-playing .io-finder__panel:not([hidden]) .io-verdict__meter i:nth-child(3){animation-delay:.24s}
@keyframes vg-panel{from{opacity:0}to{opacity:1}}
@keyframes vg-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media(min-width:1100px){.io-finder__panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:2.5rem;align-items:start}.io-finder__art{order:2;margin:0}.io-finder__copy{order:1}}
@media(prefers-reduced-motion:reduce){.io-finder .io-vg *,.io-finder .io-finder__panel,.io-finder .io-verdict__meter i{animation:none!important}}

@media(prefers-reduced-motion:reduce){.io-stage__bugs circle{animation:none}.io-stage__canvas,.io-stage__poster{transition:none}}