/* Home page: pests and services tiles. Without JS this is a swipeable row; home-tiles.js turns it into a slideshow that flips a page every 7 seconds. */
.flip{position:relative;margin-top:8px}
.flip-track{--n:1;--g:16px;display:flex;gap:var(--g);list-style:none;margin:0;padding:6px 2px 10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;perspective:1600px;outline:none}
.flip-track::-webkit-scrollbar{display:none}
.flip-track:focus-visible{outline:3px solid var(--lime);outline-offset:4px;border-radius:var(--r-lg)}
.ft{flex:0 0 calc((100% - (var(--n) - 1) * var(--g)) / var(--n));scroll-snap-align:start;display:flex;transform-origin:left center;backface-visibility:hidden}
.ft article{position:relative;display:flex;flex-direction:column;width:100%;background:var(--card);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 1px 0 var(--line),0 18px 40px -28px rgba(3,64,43,.35);transition:box-shadow .2s,transform .2s}
.ft article:hover{box-shadow:inset 0 0 0 2px var(--lime),0 22px 44px -26px rgba(3,64,43,.4);transform:translateY(-2px)}
.ft-img{display:block;aspect-ratio:3/2;background:var(--g1);overflow:hidden}
.ft-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ft article:hover .ft-img img{transform:scale(1.04)}
.ft-img.cut{background:#fff}
.ft-img.cut img{object-fit:contain;padding:10px}
.ft-b{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.ft-b h3{font-size:1.16rem;margin:0 0 .5em}
.ft-b h3 a{color:var(--ink);text-decoration:none}
.ft-b h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.ft-b h3 a:focus-visible{outline:none}
.ft article:focus-within{box-shadow:inset 0 0 0 3px var(--g7)}
.ft-b p{font-size:.93rem;line-height:1.65;margin:0 0 16px}
.ft-b .more{margin-top:auto;align-self:flex-start}
.flip-ctl{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px}
.flip-ctl[hidden]{display:none}
.fc-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;padding:0}
.fc-btn:hover{background:var(--lime);border-color:var(--lime)}
.fc-btn:focus-visible{outline:3px solid var(--g7);outline-offset:2px}
.fc-btn .ico{width:18px;height:18px}
.fc-btn[data-dir="-1"] .ico{transform:scaleX(-1)}
.fc-play .i-play{display:none}
.flip.paused .fc-play .i-play{display:inline}
.flip.paused .fc-play .i-pause{display:none}
.fc-n{min-width:64px;text-align:center;font-size:.86rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
/* page turn: the tiles on show swing away from their left edge, the next lot swing in */
.ft.f-out{animation:ftOut .42s cubic-bezier(.55,.06,.68,.19) both}
.ft.f-in{animation:ftIn .5s cubic-bezier(.22,.61,.36,1) both}
@keyframes ftOut{to{transform:rotateY(-95deg);opacity:.2}}
@keyframes ftIn{from{transform:rotateY(80deg);opacity:.2}}
@media (min-width:640px){.flip-track{--n:2;--g:20px}}
@media (min-width:1000px){.flip-track{--n:3;--g:24px}.ft-b{padding:20px 22px 22px}}
@media (prefers-reduced-motion:reduce){.ft.f-out,.ft.f-in{animation:none}.ft article,.ft-img img{transition:none}}