/* ==========================================================================
   "YOUR COMPANY" PEST CONTROL - the scrollytelling sample (rebuilt 19 Oct 2026).
   Every picture is full screen. Every word sits on a frosted glass panel on
   top of it. No split layouts. Motion is driven by ordinary scrolling only:
   nothing locks or changes the scroll speed. Reduced-motion visitors get the
   finished frames, still.
   Pictures and layouts: grid stacking, never an absolute cover image.
   ========================================================================== */
:root{
  --ink:#132a53; --ink-2:#1b2535; --body-c:#44536b;
  --accent:#e5177f; --accent-d:#bd0f67; --leaf:#2f7d4f;
  --line:#dfe6f1; --wash:#f4f7fc;
  --glass:rgba(12,22,40,.50); --glass-b:rgba(255,255,255,.22);
  --display:'Playfair Display',Georgia,serif;
  --body:'Archivo','Segoe UI',Helvetica,Arial,sans-serif;
  --top:0px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:#0d1626;color:var(--body-c);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.02;color:#fff}
p{margin:0}

/* ---------- top: honesty banner, menu ---------- */
.concept{background:var(--wash);color:var(--ink-2);border-bottom:1px solid var(--line);font:600 .84rem/1.5 var(--body);text-align:center;padding:10px 16px;margin:0}
.concept b{color:var(--ink)}
header.bar{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.bar .in{display:flex;align-items:center;gap:18px;min-height:74px;max-width:1560px;margin:auto;padding:0 clamp(16px,4vw,70px)}
.logo{font-family:var(--display);font-weight:800;font-size:1.45rem;color:var(--ink);line-height:1;white-space:nowrap}
.logo small{display:block;font:700 .64rem/1.3 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-top:6px}
nav.main{margin-left:auto;display:flex;gap:2px;align-items:center;flex-wrap:wrap}
nav.main a{font:600 .9rem/1 var(--body);color:var(--ink-2);padding:10px 10px;border-radius:4px}
nav.main a:hover,nav.main a[aria-current]{color:var(--accent)}
.callbtn{background:var(--accent);color:#fff!important;border-radius:999px;padding:13px 20px!important;font:700 .92rem/1 var(--body);white-space:nowrap}
.navtoggle{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.navtoggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0}
@media (max-width:1080px){
  .navtoggle{display:block}
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:stretch;padding:8px 16px 16px;border-bottom:1px solid var(--line)}
  nav.main.open{display:flex}
  nav.main a{padding:14px 6px;font-size:1rem}
  header.bar .in{position:relative}
}

/* ---------- buttons and the trust strip that sits beside every CTA ---------- */
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 1rem/1 var(--body);padding:17px 26px;border-radius:999px;border:2px solid transparent;cursor:pointer;white-space:nowrap}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-d)}
.btn-white{background:#fff;color:var(--ink)}
.btn-ghost{border-color:rgba(255,255,255,.75);color:#fff}
.trust{display:flex;gap:8px 18px;flex-wrap:wrap;margin-top:16px;font:600 .9rem/1.3 var(--body);color:#fff}
.trust span::before{content:"\2713";color:#7fe0a8;margin-right:6px}
.trust .stars::before{content:"\2605\2605\2605\2605\2605";color:#ffc94d;letter-spacing:1px}

/* ---------- the frosted glass panel: every word on a picture lives in one ---------- */
.glass{background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.25);backdrop-filter:blur(16px) saturate(1.25);border:1px solid var(--glass-b);border-radius:20px;color:#fff;padding:clamp(20px,3vw,40px);box-shadow:0 20px 60px rgba(0,0,0,.25);max-width:min(640px,100%)}
.glass .eyebrow{font:700 .78rem/1.3 var(--body);letter-spacing:.22em;text-transform:uppercase;color:#a6f0c6;margin-bottom:12px}
.glass h1{font-size:clamp(2.2rem,5.4vw,4.4rem)}
.glass h2{font-size:clamp(1.9rem,4.2vw,3.3rem)}
.glass h3{font-size:clamp(1.5rem,2.8vw,2.2rem)}
.glass p{color:#fff;font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.55;margin-top:14px}
.glass.small{max-width:440px;padding:22px 24px}
.glass.wide{max-width:min(1100px,100%)}

/* ---------- a still full-screen picture with its panel on top ---------- */
.shot{display:grid;height:calc(100svh - var(--top));min-height:520px;overflow:hidden;position:relative}
.shot>*{grid-area:1/1}
.shot>img,.shot>picture img{width:100%;height:100%;object-fit:cover}
.shot .layer{display:flex;align-items:flex-end;justify-content:flex-start;padding:clamp(16px,5vw,80px);z-index:2}
.shot .layer.mid{align-items:center}
.shot .layer.right{justify-content:flex-end}
.shot .layer.top{align-items:flex-start}
.shot.full{height:100svh}

/* ---------- a pinned story: frames cross-fade as you scroll ---------- */
.story{position:relative;height:calc(var(--len,3) * 100svh)}
.story .pin{position:sticky;top:var(--top);height:calc(100svh - var(--top));min-height:520px;display:grid;overflow:hidden}
.story .pin>*{grid-area:1/1}
.story .frames{display:grid;overflow:hidden}
.story .frames>img{grid-area:1/1;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(calc(1 + var(--zoom,0) * .06));transform-origin:50% 60%;will-change:opacity,transform}
.story .frames>img:first-child{opacity:1}
.story .caps{display:grid;padding:clamp(16px,5vw,80px);align-items:end;justify-items:start;z-index:3}
.story .caps>.glass{grid-area:1/1;opacity:0;transform:translateY(40px);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.story .caps>.glass.on{opacity:1;transform:none;pointer-events:auto}
.story .caps.right{justify-items:end}
.story .bar-prog{position:absolute;left:0;bottom:0;height:4px;width:calc(var(--p,0) * 100%);background:var(--accent);z-index:4}
.story .stepdots{display:flex;gap:8px;margin-top:16px}
.story .stepdots i{width:28px;height:4px;border-radius:2px;background:rgba(255,255,255,.35)}
.story .stepdots i.on{background:#fff}
@media (max-width:760px){.story{height:calc(var(--len,3) * 80svh)}}

/* the hero flyers: service cards that fly in from the sides over the story */
.flyers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-self:start;justify-self:end;width:min(520px,92vw);margin:clamp(14px,3vw,40px);z-index:3}
.flyers a{display:block;padding:16px 18px;border-radius:16px;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--glass-b);color:#fff;font:700 1rem/1.25 var(--body)}
.flyers a small{display:block;font:500 .82rem/1.35 var(--body);opacity:.9;margin-top:4px}
.flyers a:nth-child(odd){transform:translateX(calc((1 - var(--fly,0)) * -120vw))}
.flyers a:nth-child(even){transform:translateX(calc((1 - var(--fly,0)) * 120vw))}
@media (max-width:760px){.flyers{display:none}}

/* ---------- things that arrive when they come on screen ---------- */
.in-l,.in-r,.in-u{transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s ease;opacity:0}
.in-l{transform:translateX(-120px)}
.in-r{transform:translateX(120px)}
.in-u{transform:translateY(60px)}
.seen.in-l,.seen.in-r,.seen.in-u{transform:none;opacity:1}
.words .w{display:inline-block;opacity:0;transform:translateY(.6em) rotate(2deg);transition:opacity .5s ease,transform .5s ease}
.words.seen .w{opacity:1;transform:none}

/* ---------- count-up numbers ---------- */
.counts{display:flex;gap:clamp(18px,4vw,60px);flex-wrap:wrap;margin-top:18px}
.counts div{min-width:120px}
.counts b{display:block;font:800 clamp(2rem,4vw,3.2rem)/1 var(--display);color:#fff}
.counts span{font:600 .86rem/1.3 var(--body);color:#dfe9f6;text-transform:uppercase;letter-spacing:.08em}

/* ---------- the truck drives in ---------- */
.drive .pin{background:#0d1626}
.drive .street{width:100%;height:100%;object-fit:cover}
.drive .truck{align-self:end;justify-self:center;width:min(1000px,88vw);margin-bottom:6svh;transform:translateX(calc((1 - var(--p2,0)) * 110vw));filter:drop-shadow(0 18px 18px rgba(0,0,0,.35));z-index:2}
.drive .caps{align-items:start}

/* ---------- before & after ---------- */
.ba{display:grid;height:calc(100svh - var(--top));min-height:520px;overflow:hidden;position:relative;touch-action:pan-y;user-select:none}
.ba>*{grid-area:1/1}
.ba img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .after{clip-path:inset(0 0 0 var(--x,50%))}
.ba .handle{justify-self:start;width:4px;height:100%;background:#fff;transform:translateX(calc(var(--xpx,50vw) - 2px));box-shadow:0 0 18px rgba(0,0,0,.35);z-index:3;cursor:ew-resize}
.ba .handle::after{content:"\2194";position:relative;top:calc(50% - 28px);left:-26px;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fff;color:var(--ink);font:700 1.5rem/1 var(--body);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.ba .tag{align-self:start;margin:18px;padding:8px 14px;border-radius:999px;font:700 .82rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--glass);backdrop-filter:blur(10px);z-index:2}
.ba .tag.b{justify-self:start}
.ba .tag.a{justify-self:end}
.ba .layer{display:flex;align-items:flex-end;padding:clamp(16px,5vw,80px);z-index:2;pointer-events:none}
.ba .layer .glass{pointer-events:auto}

/* ---------- how we work: the line that draws down the side ---------- */
.steps{position:relative}
.steps .line{position:fixed;left:clamp(10px,2vw,28px);top:calc(var(--top) + 20px);bottom:20px;width:4px;border-radius:2px;background:rgba(255,255,255,.18);z-index:30;opacity:0;transition:opacity .4s}
.steps .line i{display:block;width:100%;height:calc(var(--sp,0) * 100%);background:var(--accent);border-radius:2px}
.steps.live .line{opacity:1}
.stepno{font:800 clamp(3rem,7vw,5.5rem)/1 var(--display);color:#a6f0c6;display:block;margin-bottom:6px}

/* the quarterly calendar dots */
.cal{display:flex;gap:12px;margin-top:16px}
.cal i{width:46px;height:46px;border-radius:12px;border:2px solid rgba(255,255,255,.5);display:grid;place-items:center;font:700 .74rem/1 var(--body);font-style:normal;color:#fff;opacity:.35;transform:scale(.8);transition:all .5s}
.seen .cal i{opacity:1;transform:none;background:rgba(47,125,79,.55);border-color:#a6f0c6}
.seen .cal i:nth-child(2){transition-delay:.25s}.seen .cal i:nth-child(3){transition-delay:.5s}.seen .cal i:nth-child(4){transition-delay:.75s}

/* ---------- plans, reviews, faq (cards over a full picture) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;width:min(1180px,100%)}
.card{background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass-b);border-radius:18px;padding:22px;color:#fff}
.card h3{font-size:1.4rem}
.card p,.card li{color:#eef3fa;font-size:.98rem}
.card ul{margin:10px 0 0;padding-left:18px}
.card .price{font:800 2.1rem/1 var(--display);color:#fff;margin-top:8px}
.card .price small{font:600 .9rem var(--body)}
.card .who{display:block;margin-top:12px;font:700 .88rem var(--body);color:#a6f0c6}
.card.hot{outline:none} /* James, 21 Oct: no plan is pushed; a card lights up only under the mouse/finger */
.cards .card:hover,.cards .card:focus-within{outline:2px solid var(--accent)}
.card .btn{margin-top:16px;width:100%}
.stack{display:flex;flex-direction:column;gap:18px;align-items:flex-start;width:100%}
details.card summary{cursor:pointer;font:700 1.05rem/1.35 var(--body);list-style:none}
details.card summary::after{content:" +";color:#a6f0c6}
details.card[open] summary::after{content:" \2212"}
details.card p{margin-top:10px}

/* ---------- the quote form ---------- */
form.quote{display:grid;gap:12px}
form.quote label{font:600 .86rem/1.3 var(--body);color:#dfe9f6;display:grid;gap:6px}
form.quote input,form.quote select{font:500 1rem var(--body);padding:14px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.92);color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{display:inline-flex;cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.5);font:600 .88rem/1 var(--body);color:#fff}
.chips input:checked+span{background:var(--accent);border-color:var(--accent)}
form.quote .btn{width:100%;margin-top:6px}
form.quote .fine{font-size:.8rem;color:#c9d6e8}
.form-in{transform:translateX(calc((1 - var(--fin,1)) * 110%))}

/* ---------- swarm-season strip ---------- */
.season{background:var(--leaf);color:#fff;text-align:center;font:600 .95rem/1.4 var(--body);padding:12px 16px}
.season a{text-decoration:underline;font-weight:800}

/* ---------- footer ---------- */
footer.site{background:#0d1626;color:#c9d6e8;padding:60px clamp(16px,4vw,70px) 120px}
footer.site .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;max-width:1560px;margin:auto}
footer.site .logo{color:#fff}
/* Cody's header logo (James, 21 Oct): black, with his no-bug badge as the O */
header .logo{color:#111}
.logo-o{display:inline-block;height:.8em;width:auto;vertical-align:-.08em;margin:0 .03em}
footer.site strong{color:#fff;display:block;margin-bottom:8px}
footer.site a:hover{color:#fff}
footer.site .legal{max-width:1560px;margin:30px auto 0;font-size:.82rem;opacity:.8}
footer.site .others{max-width:1560px;margin:18px auto 0;display:flex;gap:10px 16px;flex-wrap:wrap;font-size:.86rem}
footer.site .others a{text-decoration:underline}

/* ---------- phones: the call / text bar stays on screen ---------- */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:70;padding:10px 10px calc(10px + env(safe-area-inset-bottom));background:rgba(13,22,38,.94);backdrop-filter:blur(10px)}
  .mbar a{display:grid;place-items:center;padding:13px 6px;border-radius:12px;font:700 .92rem/1 var(--body);color:#fff;border:1px solid rgba(255,255,255,.35)}
  .mbar a.go{background:var(--accent);border-color:var(--accent)}
  .ash{bottom:84px!important}
  .glass{padding:20px}
  .shot .layer,.story .caps,.ba .layer{padding:14px 14px 22px}
}

/* ---------- reduced motion: finished frames, still ---------- */
@media (prefers-reduced-motion:reduce){
  .in-l,.in-r,.in-u,.words .w{opacity:1!important;transform:none!important;transition:none!important}
  .flyers a{transform:none!important}
  .story .frames>img{transform:none!important}
  .drive .truck{transform:none!important}
}

/* ---------- Ashley, the chat window (same look as the other samples) ---------- */
.ash{position:fixed;right:clamp(14px,2.5vw,30px);bottom:clamp(14px,2.5vw,30px);z-index:80;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px}
/* Ashley's own colour. Deliberately not the trade's accent, so she reads as
   her own product on whichever site she is sitting on. */
.ash{--ash:#7b5cff;--ash-2:#00d4b8}
.ash-tab{appearance:none;border:0;cursor:pointer;
  background:linear-gradient(120deg,var(--ash),var(--ash-2));color:#fff;
  border-radius:999px;padding:16px 24px;font:700 .95rem/1 var(--body);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.55);display:flex;align-items:center;gap:10px}
.ash-tab:hover{background:linear-gradient(120deg,var(--ash-2),var(--ash))}
/* She has to be noticed. The tab breathes once on arrival and the nudge leans
   out beside it - it sits over the page corner, never over a picture's subject. */
.ash-tab{animation:ashbreathe 3.4s ease-in-out 2s 3}
@keyframes ashbreathe{0%,100%{transform:none}
  30%{transform:scale(1.06)}60%{transform:scale(1)}}
.ash-nudge{margin:0;background:#fff;color:var(--ink);border-radius:14px;
  padding:12px 16px;font:700 .92rem/1.35 var(--body);max-width:230px;
  box-shadow:0 18px 44px -20px rgba(0,0,0,.5);border:1px solid var(--line);
  opacity:0;transform:translate3d(0,10px,0);transition:opacity .5s,transform .5s}
.ash-nudge.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .ash-tab{animation:none}
  .ash-nudge{transition:none}
}
.ash-dot{width:11px;height:11px;border-radius:50%;background:#5ce0a0;display:inline-block;
  box-shadow:0 0 0 0 rgba(92,224,160,.75);animation:ashblink 2.4s ease-out infinite}
@keyframes ashblink{0%{box-shadow:0 0 0 0 rgba(92,224,160,.75)}
  70%{box-shadow:0 0 0 12px rgba(92,224,160,0)}100%{box-shadow:0 0 0 0 rgba(92,224,160,0)}}
.ash-box{width:min(340px,86vw);background:#0e1726;border:1px solid #1e2a3f;border-radius:16px;
  overflow:hidden;box-shadow:0 30px 70px -26px rgba(0,0,0,.75)}
.ash-head{display:flex;gap:11px;align-items:center;padding:13px 15px;background:#111c2e;
  border-bottom:1px solid #1e2a3f}
.ash-face{width:42px;height:42px;border-radius:50%;flex:0 0 auto;position:relative;
  background:conic-gradient(from 210deg,var(--ash),var(--ash-2),var(--ash));
  box-shadow:0 0 0 2px rgba(255,255,255,.14), 0 6px 18px -6px rgba(0,0,0,.6)}
/* two eyes that blink. It is a mark, not a stock photograph - James did not
   want the same woman every AI picture generator produces standing in for her. */
.ash-face::before,.ash-face::after{content:"";position:absolute;top:16px;width:5px;height:6px;
  border-radius:3px;background:#0e1726;animation:asheyes 5.2s infinite}
.ash-face::before{left:11px}
.ash-face::after{right:11px}
@keyframes asheyes{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@media (prefers-reduced-motion:reduce){
  .ash-dot{animation:none}
  .ash-face::before,.ash-face::after{animation:none}
}
.ash-head b{display:block;color:#fff;font:700 .95rem/1.2 var(--body)}
.ash-head span{display:block;color:#5ce0a0;font:600 .76rem/1.4 var(--body)}
.ash-x{margin-left:auto;appearance:none;background:none;border:0;color:#8fa0b8;font-size:1.5rem;
  line-height:1;cursor:pointer;padding:0 4px}
.ash-body{padding:15px;display:grid;gap:10px;min-height:150px}
.ash-msg{font:400 .9rem/1.5 var(--body);padding:10px 13px;border-radius:12px;max-width:88%;
  opacity:0;transform:translate3d(0,8px,0)}
.ash-msg.them{background:#1a2740;color:#dbe4f2;justify-self:start;border-bottom-left-radius:4px}
.ash-msg.me{background:var(--accent);color:#fff;justify-self:end;border-bottom-right-radius:4px}
.ash.open .ash-msg{animation:ashpop 400ms cubic-bezier(.2,.9,.3,1) both}
.ash.open .ash-msg:nth-child(2){animation-delay:1000ms}
.ash.open .ash-msg:nth-child(3){animation-delay:2000ms}
@keyframes ashpop{to{opacity:1;transform:none}}
.ash-foot{padding:0 15px 14px;color:#7c8aa3;font:600 .72rem/1.4 var(--body)}
@media (prefers-reduced-motion:reduce){.ash-msg{opacity:1;transform:none}}
@media (max-width:600px){.ash-tab{padding:13px 18px;font-size:.88rem}}

/* the first screen: a compact panel up in the sky so the truck and the house stay in view */
.glass.hero{max-width:min(600px,100%);padding:clamp(18px,2.2vw,30px)}
.glass.hero h1{font-size:clamp(2rem,3.6vw,3.3rem)}
.glass.hero p{margin-top:10px}
.glass.hero .btns{margin-top:16px}
@media (max-width:760px){
  .glass.hero .trust,.glass.hero .btn-ghost{display:none}
  .glass.hero h1{font-size:1.9rem}
}

/* ---------- James, 19 Oct: the panels were hiding the scenes ----------
   Lighter, clearer glass with a soft text shadow for reading, and the
   scroll-story captions shrunk into the bottom corner. */
:root{--glass:rgba(8,16,30,.26);--glass-b:rgba(255,255,255,.28)}
.glass,.card,.flyers a{-webkit-backdrop-filter:blur(5px) saturate(1.15);backdrop-filter:blur(5px) saturate(1.15);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.glass h1,.glass h2,.glass h3,.glass p,.glass .eyebrow,.trust,.counts,.card{text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 18px rgba(0,0,0,.45)}
.story .caps{align-items:end;padding:clamp(12px,2.5vw,36px)}
.story .caps>.glass{max-width:min(440px,100%);padding:16px 20px}
.story .caps>.glass h2{font-size:clamp(1.35rem,2.1vw,1.9rem)}
.story .caps>.glass p{font-size:.98rem;margin-top:8px}
.story .caps>.glass .btns{margin-top:12px}
.story .caps>.glass .btn{padding:13px 20px;font-size:.92rem}
.shot .layer>.glass{max-width:min(520px,100%)}
.ba .layer .glass.small{max-width:320px;padding:14px 18px}
@media (max-width:760px){.story .caps>.glass{max-width:100%}}

/* James, 19 Oct (2): keep the words off the subject of each scene */
.story .caps.top{align-items:start}
.flyers.low{align-self:end}
.glass.hero{max-width:min(880px,100%)}
.glass.hero h1{font-size:clamp(1.8rem,2.6vw,2.5rem)}
.glass.hero .btns{display:inline-flex;margin-right:14px}
.glass.hero .trust{display:inline-flex;vertical-align:middle}
.shot .layer.top{padding-top:clamp(12px,2vw,28px)}
.glass.strip{max-width:min(980px,100%);padding:14px 22px}
.glass.strip h2{font-size:clamp(1.4rem,2.2vw,2rem)}
.glass.strip .counts{margin-top:8px}
.glass.strip .counts b{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.glass.hero .trust{display:none}
.glass.hero .btns{display:flex;flex-wrap:nowrap;gap:10px;margin-top:12px}
.glass.hero .btn{padding:13px 20px;font-size:.95rem}
.glass.hero .eyebrow{margin-bottom:6px}
.shot .layer>.glass.strip{max-width:min(1180px,100%);display:flex;flex-wrap:wrap;align-items:center;gap:6px 34px;padding:12px 24px}
.glass.strip .eyebrow{flex-basis:100%;margin:0}
.glass.strip h2{margin:0}
.glass.strip .counts{margin:0;gap:28px}
.glass.strip .counts div{min-width:0}
.shot .layer.top:has(.strip){justify-content:center}

/* James, 19 Oct (3): clearer still - the picture is the merchandise */
:root{--glass:rgba(8,16,30,.14);--glass-b:rgba(255,255,255,.30)}
.glass,.card,.flyers a{-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px);box-shadow:none}
.glass h1,.glass h2,.glass h3,.glass p,.glass .eyebrow,.glass label,.trust,.counts,.card,.flyers a{text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.6)}
form.quote input,form.quote select{background:rgba(255,255,255,.88)}
/* before & after: the small label sits top right, clear of the subject */
.ba .layer{align-items:flex-start;justify-content:flex-end;padding-top:64px}
.cards.faq{grid-template-columns:repeat(3,minmax(0,1fr));width:min(980px,100%);gap:8px}
.cards.faq .card{padding:10px 14px}
.cards.faq summary{font-size:.92rem}
@media (max-width:760px){.cards.faq{grid-template-columns:1fr}}

/* ---------- James, 19 Oct (4): the slider has to explain itself ----------
   After on the left of the line, before on the right. One word on each side
   of the line, riding with it; when one side fills the picture only its word
   shows. A big knob with arrows and "Drag me" until it has been used. */
.ba .tag{display:none}
.ba .after{clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.ba .handle{width:6px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 0 24px rgba(0,0,0,.45);transform:translateX(calc(var(--xpx,50vw) - 3px));display:block;position:relative}
.ba .handle::after{content:none}
.ba .knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font:700 1.15rem/1 var(--body);letter-spacing:6px;padding-left:6px;box-shadow:0 8px 28px rgba(0,0,0,.45);border:4px solid #fff}
.ba .lab{position:absolute;top:50%;transform:translateY(-50%);font:800 clamp(1.1rem,2vw,1.6rem)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#fff;padding:12px 18px;border-radius:999px;background:rgba(10,18,32,.55);white-space:nowrap;transition:opacity .25s}
.ba .lab.a{right:52px}
.ba .lab.b{left:52px}
.ba.no-a .lab.a,.ba.no-b .lab.b{opacity:0}
.ba .hint{position:absolute;top:calc(50% + 52px);left:50%;transform:translateX(-50%);font:700 .9rem/1 var(--body);color:#fff;background:var(--accent);padding:8px 14px;border-radius:999px;white-space:nowrap;animation:hintbob 1.6s ease-in-out infinite}
.ba.used .hint{display:none}
@keyframes hintbob{0%,100%{transform:translateX(-62%)}50%{transform:translateX(-38%)}}
@media (prefers-reduced-motion:reduce){.ba .hint{animation:none}}

/* ---------- James, 19 Oct (5): more motion on every page ----------
   1. a card slides in (in-l / in-r / in-u, or simply rises if it has none)
   2. then the lines on it pop up one after another
   3. the headline builds letter by letter
   Story captions do the same each time a new one comes on.
   Transform and opacity only; the first screen is exempt. */
.glass:not(.hero):not(.in-l):not(.in-r):not(.in-u):not(.story .caps>.glass){opacity:0;transform:translateY(46px) scale(.97);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.glass.seen:not(.hero){opacity:1!important;transform:none!important}
.glass:not(.hero)>*{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.glass.seen:not(.hero)>*,.story .caps>.glass.on>*{opacity:1;transform:none}
.glass:not(.hero)>*:nth-child(2){transition-delay:.12s}
.glass:not(.hero)>*:nth-child(3){transition-delay:.3s}
.glass:not(.hero)>*:nth-child(4){transition-delay:.45s}
.glass:not(.hero)>*:nth-child(5){transition-delay:.6s}
.glass:not(.hero)>*:nth-child(n+6){transition-delay:.72s}
.card:not(.in-l):not(.in-r):not(.in-u){opacity:0;transform:translateY(40px) rotateX(10deg);transform-origin:50% 100%;transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.card.seen{opacity:1!important;transform:none!important}
.cards>.card:nth-child(2){transition-delay:.12s}.cards>.card:nth-child(3){transition-delay:.24s}
.cards>.card:nth-child(4){transition-delay:.36s}.cards>.card:nth-child(5){transition-delay:.48s}.cards>.card:nth-child(6){transition-delay:.6s}
.wd{display:inline-block;white-space:nowrap}
.ltr{display:inline-block;opacity:0;transform:translateY(.55em) scale(.4) rotate(-12deg);transition:opacity .35s ease,transform .5s cubic-bezier(.3,1.6,.5,1)}
.seen .ltr,.story .caps>.glass.on .ltr,.card.seen .ltr{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .glass,.glass>*,.card,.ltr{opacity:1!important;transform:none!important;transition:none!important}
}

/* Ashley has a face now (James, 19 Oct): a friendly Florida blonde in her 30s */
img.ash-face{object-fit:cover;background:none}
img.ash-face::before,img.ash-face::after{content:none}
.ash-mini{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.9);margin:-6px 0 -6px -10px}
.ash-tab .ash-dot{margin-left:-14px;margin-top:20px;width:10px;height:10px;border:2px solid #fff}

/* ==========================================================================
   James, 20 Oct: "pimp it out" - more 3D, more scroll, more to sell.
   ========================================================================== */
/* how far down the page you are */
.readbar{position:fixed;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--leaf),#a6f0c6,var(--accent));transform-origin:0 50%;transform:scaleX(0);z-index:90;pointer-events:none}
/* pictures drift for depth */
.shot>img{transform:scale(1.08)}
/* a screen that grows with its tool on small phones */
.shot.tall{height:auto;min-height:calc(100svh - var(--top))}
.shot.tall>img{position:absolute;inset:0}
.shot.tall .layer{position:relative}

/* cards tilt in 3D under the mouse, with a glint */
.cards{perspective:1100px}
.card{position:relative}
.card.seen.tilting{transform:rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateZ(14px)!important;transition:transform .12s ease-out!important}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 55%)}
.card.tilting::after{opacity:1}

/* find the pests: pulsing dots on the cutaway */
.pins{position:relative;z-index:3;pointer-events:none;opacity:0;transition:opacity .5s}
.pins.show{opacity:1}
.pins.show .pin-dot{pointer-events:auto}
.pin-dot{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid #fff;background:var(--accent);cursor:pointer;padding:0;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.pin-dot::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:3px solid var(--accent);animation:pinring 1.8s ease-out infinite}
.pin-dot.found{background:var(--leaf)}
.pin-dot.found::before{border-color:#a6f0c6}
.pin-dot span{position:absolute;left:50%;bottom:calc(100% + 14px);transform:translate(-50%,8px) scale(.9);width:max-content;max-width:240px;padding:10px 14px;border-radius:12px;background:rgba(8,16,30,.82);color:#fff;font:600 .9rem/1.35 var(--body);text-align:left;opacity:0;pointer-events:none;transition:opacity .25s,transform .3s cubic-bezier(.3,1.5,.5,1)}
.pin-dot.open span,.pin-dot:hover span{opacity:1;transform:translate(-50%,0) scale(1)}
.pin-hint{position:absolute;left:clamp(14px,3vw,40px);top:clamp(14px,3vw,40px);margin:0;padding:10px 16px;border-radius:999px;background:var(--accent);color:#fff;font:700 .9rem/1 var(--body);animation:hintbob2 1.6s ease-in-out infinite}
@keyframes pinring{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.6);opacity:0}}
@keyframes hintbob2{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* plans: monthly / yearly */
.billing{display:inline-flex;margin-top:14px;padding:4px;border-radius:999px;background:rgba(8,16,30,.45);border:1px solid var(--glass-b)}
.billing button{font:700 .9rem/1 var(--body);color:#fff;background:none;border:0;padding:10px 16px;border-radius:999px;cursor:pointer}
.billing button.on{background:var(--accent)}
.billing em{font-style:normal;font-size:.72rem;color:#a6f0c6;margin-left:4px}
.billing button.on em{color:#fff}

/* reviews running past */
.ticker{width:min(1180px,100%);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker .track{display:flex;gap:14px;width:max-content;animation:tick 40s linear infinite}
.ticker span{padding:10px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-b);color:#fff;font:500 .9rem/1.3 var(--body);white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.9)}
.ticker span b{color:#a6f0c6;margin-left:6px}
.ticker:hover .track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}

/* the tools on Pest Help */
.glass.tool{max-width:min(620px,100%)}
.glass.wide.tool{max-width:min(980px,100%)}
.bugs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.bugs button,.yn button{font:600 .92rem/1.2 var(--body);color:#fff;background:rgba(8,16,30,.35);border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:10px 15px;cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,.8);transition:transform .2s,background .2s}
.bugs button:hover,.yn button:hover{transform:translateY(-2px)}
.bugs button.on,.yn button.on{background:var(--accent);border-color:var(--accent)}
.bug-out{margin-top:18px;padding:18px 20px;border-radius:16px;background:rgba(8,16,30,.5);border:1px solid var(--glass-b)}
.bug-out.pop{animation:popin .5s cubic-bezier(.3,1.5,.5,1)}
.bug-name{display:block;font:800 clamp(1.4rem,2.4vw,1.9rem)/1.1 var(--display);color:#fff}
.meter{display:inline-flex;gap:5px;margin:12px 10px 0 0;vertical-align:middle}
.meter i{width:26px;height:10px;border-radius:3px;background:rgba(255,255,255,.25);transition:background .3s}
.meter i.on{background:#7fe0a8}
.bug-out[data-level="4"] .meter i.on{background:#ffc94d}
.bug-out[data-level="5"] .meter i.on{background:#ff5a6e}
.bug-level{font:700 .86rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.bug-out p{margin-top:10px;font-size:1rem}
@keyframes popin{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}

.quiz{display:grid;gap:10px;margin-top:16px}
.quiz .q{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff;font:600 .98rem/1.35 var(--body);text-shadow:0 1px 2px rgba(0,0,0,.9)}
.yn{display:flex;gap:6px;flex:none}
.yn button{padding:8px 14px}
.gauge{position:relative;width:150px;height:150px;margin:18px 0 0}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:12}
.gauge .track{stroke:rgba(255,255,255,.22)}
.gauge .fill{stroke:#7fe0a8;stroke-linecap:round;transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1),stroke .4s}
.gauge[data-band="mid"] .fill{stroke:#ffc94d}
.gauge[data-band="high"] .fill{stroke:#ff5a6e}
.g-num{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#fff}
.g-num b{font:800 2.6rem/1 var(--display)}
.g-num span{font:600 .76rem/1 var(--body);text-transform:uppercase;letter-spacing:.1em}
.risk-say{font-weight:700}

.month{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:14px}
.m-name{font:800 clamp(1.6rem,3vw,2.4rem)/1 var(--display);color:#fff;min-width:7.5em}
.m-range,.c-range{flex:1;min-width:200px;accent-color:var(--accent);height:28px}
.m-bars{display:grid;gap:8px;margin-top:14px}
.m-bar{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:12px;color:#fff;font:600 .92rem/1 var(--body);text-shadow:0 1px 2px rgba(0,0,0,.9)}
.m-bar i{display:block;height:14px;border-radius:7px;background:rgba(255,255,255,.2);overflow:hidden}
.m-bar b{display:block;height:100%;width:0;border-radius:7px;background:#7fe0a8;transition:width .6s cubic-bezier(.2,.8,.2,1),background .3s}
.m-bar b.hi{background:linear-gradient(90deg,#ffc94d,#ff5a6e)}
.m-tip{font-weight:600}

.calc .size{display:grid;gap:8px;margin-top:16px;color:#fff;font:600 .95rem/1.2 var(--body);text-shadow:0 1px 2px rgba(0,0,0,.9)}
.calc .size output{font-weight:800;color:#a6f0c6}
.calc .chips{margin-top:14px}
.chips input:disabled+span{opacity:.85}
.c-total{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-top:18px;color:#fff}
.c-price{font:800 clamp(2.8rem,5vw,4rem)/1 var(--display);text-shadow:0 2px 10px rgba(0,0,0,.6)}
.c-total small{font:600 1rem var(--body)}
.c-note{flex-basis:100%;font:600 .92rem/1.3 var(--body);color:#a6f0c6}

form.zip{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
form.zip input{flex:1;min-width:150px;font:600 1.2rem var(--body);letter-spacing:.12em;padding:14px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.9);color:var(--ink-2)}
.zip-say{font-weight:700;min-height:1.5em}
.zip-say.yes{color:#a6f0c6}
.zip-say.no{color:#ffd88a}

/* booking: pick a day */
.days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.days label{cursor:pointer}
.days input{position:absolute;opacity:0;pointer-events:none}
.days span{display:grid;justify-items:center;padding:8px 4px;border-radius:12px;border:1px solid rgba(255,255,255,.5);color:#fff;transition:transform .2s,background .2s}
.days span b{font:800 1.3rem/1.1 var(--display)}
.days span small{font:600 .72rem/1.2 var(--body);text-transform:uppercase;letter-spacing:.06em}
.days input:checked+span{background:var(--accent);border-color:var(--accent);transform:translateY(-3px)}
.days label:hover span{transform:translateY(-3px)}

/* my account */
.cards.acct{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.cards.acct{grid-template-columns:1fr}}
.trip{display:flex;gap:6px;margin-top:12px}
.trip i{flex:1;font:700 .72rem/1 var(--body);font-style:normal;text-transform:uppercase;letter-spacing:.06em;padding:8px 4px;text-align:center;border-radius:8px;background:rgba(255,255,255,.18)}
.trip i:first-child{background:var(--leaf)}
.stations{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:12px 0 4px}
.stations i{aspect-ratio:1;border-radius:50%;background:#7fe0a8;box-shadow:0 0 0 0 rgba(127,224,168,.7);transform:scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.card.seen .stations i{transform:scale(1);animation:stn 2.4s ease-out infinite}
.stations i:nth-child(n){transition-delay:calc(var(--i,0) * 1s)}
.card.seen .stations i:nth-child(2){transition-delay:.06s}.card.seen .stations i:nth-child(3){transition-delay:.12s}.card.seen .stations i:nth-child(4){transition-delay:.18s}
.card.seen .stations i:nth-child(5){transition-delay:.24s}.card.seen .stations i:nth-child(6){transition-delay:.3s}.card.seen .stations i:nth-child(7){transition-delay:.36s}
.card.seen .stations i:nth-child(8){transition-delay:.42s}.card.seen .stations i:nth-child(9){transition-delay:.48s}.card.seen .stations i:nth-child(10){transition-delay:.54s}
.card.seen .stations i:nth-child(11){transition-delay:.6s}.card.seen .stations i:nth-child(12){transition-delay:.66s}
@keyframes stn{0%{box-shadow:0 0 0 0 rgba(127,224,168,.7)}70%,100%{box-shadow:0 0 0 8px rgba(127,224,168,0)}}
.hist{list-style:none;padding:0!important;margin-top:10px!important;display:grid;gap:8px}
.hist li{padding-left:14px;border-left:3px solid #a6f0c6}
.hist b{display:block;color:#a6f0c6;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
.demo-btn:disabled{opacity:.8;cursor:default}

/* Ashley: tap a question */
.ash-quick{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px}
.ash-quick button{font:600 .82rem/1 var(--body);padding:8px 12px;border-radius:999px;border:1px solid var(--accent);background:#fff;color:var(--accent);cursor:pointer}
.ash-quick button:hover{background:var(--accent);color:#fff}
.ash-body{max-height:340px;overflow-y:auto}
.ash-msg.typing{display:flex;gap:4px;width:max-content}
.ash-msg.typing i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.5;animation:typing 1s infinite}
.ash-msg.typing i:nth-child(2){animation-delay:.15s}.ash-msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{50%{opacity:1;transform:translateY(-3px)}}

@media (max-width:760px){
  .pin-hint{font-size:.8rem}
  .pin-dot span{max-width:190px}
  .days{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
  .quiz .q{flex-direction:column;align-items:flex-start}
  .m-bar{grid-template-columns:90px 1fr}
}
@media (prefers-reduced-motion:reduce){
  .shot>img{transform:none}
  .ticker .track,.pin-dot::before,.pin-hint,.card.seen .stations i{animation:none}
}

/* ==========================================================================
   James, 20 Oct: phone speed rules. While scrolling only transform and
   opacity move; endless animations run only when on screen; weak phones
   get the light version (html.lite).
   ========================================================================== */
.story .bar-prog{width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0))}
.steps .line i{height:100%;transform-origin:50% 0;transform:scaleY(var(--sp,0))}
.m-bar b{width:100%!important;transform-origin:0 50%;transform:scaleX(var(--w,0));transition:transform .6s cubic-bezier(.2,.8,.2,1),background .3s}
.ticker .track{animation-play-state:paused}
.ticker.run .track{animation-play-state:running}
.ticker.run:hover .track{animation-play-state:paused}
.pin-dot::before{animation:none;opacity:0}
.pins.show .pin-dot::before{animation:pinring 1.8s ease-out infinite}
.card.seen .stations i{animation:none;position:relative}
.stations i::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #7fe0a8;opacity:0}
.card.seen .stations i::after{animation:stn2 2.4s ease-out infinite}
@keyframes stn2{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(1.9);opacity:0}}
html.lite .glass,html.lite .card,html.lite .flyers a,html.lite .ticker span{-webkit-backdrop-filter:none;backdrop-filter:none}
html.lite .shot>img,html.lite .story .frames>img{transform:none!important;will-change:auto}
html.lite .glass,html.lite .glass>*,html.lite .card,html.lite .ltr,html.lite .in-l,html.lite .in-r,html.lite .in-u{opacity:1!important;transform:none!important;transition:opacity .4s ease!important}
html.lite .ticker .track,html.lite .pin-dot::before,html.lite .pin-hint,html.lite .stations i::after,html.lite .ba .hint{animation:none!important}
html.lite .flyers a{transform:none}

/* Ashley opens above her button without moving anything (no layout shift) */
.ash-box{position:absolute;right:0;bottom:calc(100% + 12px)}

/* Cody's copy: his whole photo edge to edge, not zoomed; a slim strip of words in the trees above the truck roof (James, 21 Oct) */
.shot.cody-hero{height:auto;min-height:0;aspect-ratio:1920/936}
.cody-hero>img{transform:none!important;object-position:50% 50%}
.cody-hero .layer{align-items:flex-start;justify-content:flex-end;padding:clamp(8px,1vw,14px) clamp(12px,2vw,28px) 0 0}
.cody-hero .glass.cody-glass{width:min(820px,62%);max-width:none;padding:8px 16px 10px;background:rgba(8,16,30,.40);display:block}
.cody-glass .eyebrow{margin:0 0 2px!important;font-size:.68rem!important}
.cody-glass h1{font-size:clamp(1.1rem,1.75vw,1.65rem)!important;margin:0!important;line-height:1.1}
.cody-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:6px!important}
.cody-row .btns{margin:0;flex-wrap:nowrap;gap:8px}
.cody-row .btn{padding:9px 14px;font-size:.82rem}
.cody-glass .counts.cody-facts{display:grid;grid-template-columns:repeat(4,auto);gap:0;margin:0;text-align:center}
@media (max-width:900px){.shot.cody-hero{aspect-ratio:auto;height:calc(100svh - var(--top))}.cody-hero>img{object-position:30% 50%}.cody-hero .glass.cody-glass{width:100%}.cody-row{flex-wrap:wrap}}
/* the four facts: even columns, number over label, all the same size */
.cody-glass .counts.cody-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;flex-basis:100%;text-align:center}
.cody-facts div{padding:4px 8px;border-left:1px solid rgba(255,255,255,.3)}
.cody-facts div:first-child{border-left:0}
.cody-facts b{display:block;font:800 clamp(1.8rem,2.8vw,2.4rem)/1 var(--display)!important}
.cody-facts span{display:block;margin-top:6px;font:600 .74rem/1.25 var(--body);letter-spacing:.08em;text-transform:uppercase}
@media (max-width:600px){.cody-glass .counts.cody-facts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}.cody-facts div:nth-child(3){border-left:0}}
.cody-facts b{font-variant-numeric:tabular-nums}

/* James, 21 Oct: numbers must be even - no old-style figures (the 3 dropped, the 8 rose) */
.counts b,.card .price,.c-price,.g-num b,.days span b,.m-name,.stepno,.cody-facts b{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
.counts b,.card .price,.c-price,.g-num b,.days span b,.stepno,.cody-facts b{font-family:var(--body)!important;font-weight:800!important;letter-spacing:-.01em}
.num{font-family:var(--body);font-weight:800;letter-spacing:-.02em}
.cody-glass .cody-facts div{padding:0 12px}
.cody-glass .cody-facts b{font-size:clamp(1.1rem,1.6vw,1.5rem)!important}
.cody-glass .cody-facts span{margin-top:2px;font-size:.6rem}

/* ==========================================================================
   PHONES AND UPRIGHT TABLETS (James, 21 Oct) - any screen narrower than 7:5.
   Wide screens (computers) are unchanged. Each picture runs edge to edge at
   its own shape - whole, nothing cut off - and its words sit right under it,
   so they never block what the picture shows. Scroll scenes still pin and
   play like the computer: the scene holds on screen while its pictures change
   and its captions come in one by one.
   ========================================================================== */
@media (max-aspect-ratio:7/5){
  .shot,.shot.full,.shot.tall,.shot.cody-hero,.ba{height:auto!important;min-height:0!important;aspect-ratio:auto!important;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;background:#0d1626}
  .shot>img,.shot>picture,.ba img{grid-area:1/1!important;display:block;width:100%;height:auto!important;aspect-ratio:1672/941;object-fit:cover;transform:none!important}
  .shot>picture img{height:auto!important;aspect-ratio:1672/941}
  .shot.tall>img{position:relative!important;inset:auto!important}
  .glass.seen:not(.hero){opacity:1!important;transform:none!important}
  .cody-hero>img{aspect-ratio:1920/936;object-position:50% 50%!important}
  .shot .layer,.shot .layer.top,.shot .layer.right,.shot .layer.mid,.cody-hero .layer,.ba .layer{grid-area:2/1!important;display:block!important;padding:14px 16px 22px!important}
  .shot .layer>.glass,.shot .layer .glass,.cody-hero .glass.cody-glass,.ba .layer .glass{width:100%!important;max-width:100%!important}
  .ba .handle{grid-area:1/1}
  /* scroll scenes: pinned full screen, picture whole across the middle, captions under it */
  .story{height:calc(var(--len,3) * 45svh + 45svh)!important}
  .story .pin{position:sticky!important;top:var(--top)!important;height:calc(100svh - var(--top))!important;min-height:0!important;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:center;background:#0d1626}
  .story .frames,.story .pins{grid-area:1/1;aspect-ratio:1672/941}
  .story .frames>img{transform:none!important}
  .story .pins{display:none!important} /* James: the tap dots block the picture on a phone */
  .story .caps,.story .caps.top,.story .caps.right{grid-area:2/1;align-items:start!important;justify-items:stretch!important;padding:14px 16px 0!important;min-height:13.5rem}
  .story .caps>.glass{max-width:100%!important}
  .glass h1,.glass h2,.story .caps>.glass h2{font-size:clamp(1.15rem,5vw,1.9rem)!important;line-height:1.18!important}
  .glass p{font-size:clamp(.92rem,3.8vw,1.1rem)!important}
}
/* tall phone pictures: full width, the cards sit on the added sky like the computer */
@media (max-aspect-ratio:7/5){
  .shot.has-tall>img{aspect-ratio:2/3!important;object-position:50% 50%!important}
  .shot.has-tall .layer,.shot.has-tall .layer.top,.shot.has-tall .layer.right,.shot.has-tall .layer.mid{grid-area:1/1!important;align-self:start;z-index:2;padding:10px 12px!important}
  .story:not(.has-tall){height:auto!important}
  .story:not(.has-tall) .pin{position:relative!important;height:auto!important;align-content:start}
  .story.has-tall{height:calc(var(--len,3) * 70svh + 30svh)!important}
  .story.has-tall .pin{grid-template-rows:1fr;align-content:stretch}
  .story.has-tall .frames{grid-area:1/1;aspect-ratio:auto;height:100%}
  .story.has-tall .frames>img{height:100%;object-fit:cover;object-position:50% 50%}
  .story.has-tall .caps,.story.has-tall .caps.top,.story.has-tall .caps.right{grid-area:1/1;min-height:0;padding:10px 12px!important;z-index:3}
}
/* James, 21 Oct (phone review): no pink progress lines, lighter see-through
   cards, smaller words so they stay on the sky, long card lists slide over a
   picture that holds still behind them (no blue), Cody's facts in one row */
@media (max-aspect-ratio:7/5){
  .story .bar-prog{display:none!important}
  .has-tall .glass,.has-tall .card{background:rgba(10,20,36,.30)!important;-webkit-backdrop-filter:blur(3px)!important;backdrop-filter:blur(3px)!important}
  .has-tall .glass{padding:10px 12px!important}
  .has-tall .glass .eyebrow{font-size:.6rem!important;margin-bottom:2px!important}
  .has-tall .glass h1,.has-tall .glass h2{font-size:clamp(1rem,4.4vw,1.5rem)!important;line-height:1.15!important}
  .has-tall .glass p{font-size:clamp(.78rem,3.3vw,1rem)!important;line-height:1.35!important;margin-top:3px!important}
  .has-tall .glass .btns{margin-top:6px!important;gap:6px!important}
  .has-tall .glass .btn{padding:.5em .9em!important;font-size:clamp(.74rem,3.1vw,.95rem)!important}
  .has-tall .counts{display:flex!important;flex-wrap:nowrap;gap:10px;margin-top:6px}
  .has-tall .counts b{font-size:clamp(1rem,4.4vw,1.5rem)!important}
  .has-tall .counts span{font-size:.55rem!important;letter-spacing:.06em}
  .cody-glass .counts.cody-facts{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0}
  .shot.has-tall.long{position:relative}
  .shot.has-tall.long>img{position:absolute!important;inset:0;width:100%;height:100%!important;aspect-ratio:auto!important;object-fit:cover}
  .shot.has-tall.long .layer{position:relative;align-self:stretch}
}
/* James, 21 Oct: nothing moves inside the cards on phones - no frosted blur
   re-drawing behind them, no mouse glint, no tilt */
@media (max-aspect-ratio:7/5){
  .glass,.card,.has-tall .glass,.has-tall .card{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .has-tall .glass,.has-tall .card{background:rgba(8,16,30,.42)!important}
  .card::after{display:none!important}
  .card.tilting,.card.seen.tilting{transform:none!important}
}
/* James, 22 Oct: the termite-house scene zooms in on the house, less lawn and dirt */
@media (max-aspect-ratio:7/5){
  .story.has-tall:has(img[alt][srcset*="pc3-house-1"]) .frames>img{transform:scale(1.35)!important;transform-origin:36% 0%}
}
@media (max-width:760px){body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}}
/* James, 30 Oct: the phone fixes on the computer too - no pink progress lines,
   and the reviews picture stays screen-width (the review cards were stretching
   it to five screens wide, showing only a blurred palm tree) */
.story .bar-prog{display:none!important}
.shot,.ba{grid-template-columns:minmax(0,1fr)}
/* James, 30 Oct: each before & after fills the screen - scrolling settles on
   one whole slider under the header, never half of one and half the next */
html{scroll-snap-type:y proximity}
.ba{scroll-snap-align:start;scroll-margin-top:var(--top)}
/* James, 30 Oct: "The box was fucking over his fucking pickup truck, over the bed." On a computer
   Cody's card is the phone card (clear, facts in one row, buttons under them), sitting over the
   truck bed where the blue box is, clear of his head */
@media (min-aspect-ratio:7/5){
  .shot.cody-hero .layer{justify-content:flex-end;align-items:flex-start;padding:9% 1.2% 0 0!important}
  .cody-hero .glass.cody-glass{width:46%;background:rgba(8,16,30,.42)}
  .cody-row{flex-wrap:wrap;justify-content:flex-start}
}
/* James, 31 Oct: "all the cards need a bright white outline on them. Each and every one of the cards
   on the website needs a bright white line around it. So it's easier to see." */
.glass,.card,.flyers a{border:2px solid #fff!important}
/* James, 31 Oct: "Cody's picture needs to be stretched a little more. So the bottom picture doesn't
   show up." On a computer his photo is stretched to the screen, top to bottom, nothing cut off */
@media (min-aspect-ratio:7/5){
  .shot.cody-hero{aspect-ratio:auto;height:calc(100svh - var(--top));min-height:0}
  .cody-hero>img{object-fit:fill}
}
/* James, 31 Oct: "On the before and after scroll. I'm scrolling. It's fucking stuck." The page no
   longer grabs and holds each before & after; it scrolls freely like every other picture */
html{scroll-snap-type:none!important}
/* James, 31 Oct: "sometimes some of them were just squeezing by way too fast. Through the scrolly
   telling part." On a computer each story picture/caption gets two full screens of scrolling
   (was about one), so a quick scroll can't breeze past it. --steps is set by pc.js. */
@media (min-aspect-ratio:7/5){
  .story{height:calc((1 + 2 * var(--steps,2)) * 100svh)}
}
/* James, 31 Oct: "a little fatter, bright white outline ... to make them a little more standout-ish,
   eye-catching ... make sure it's bright white, maybe make it a little thicker." */
.glass,.card,.flyers a{border:3px solid #fff!important}
/* James, 31 Oct: "the scrolling still jumping all over the place, especially when I go back up. The first
   two pictures are out of sync." Browser snapping froze the mouse wheel, so it stays off; pc.js moves
   one whole picture per wheel click on a computer instead. */

/* James, 31 Oct: computer - the termite risk card fits on one screen (gauge sits beside the heading) */
@media (min-aspect-ratio:7/5){
  #risk .glass.tool{position:relative;max-width:min(700px,100%)}
  #risk .glass.tool h2{padding-right:120px}
  #risk .gauge{position:absolute;right:26px;top:22px;width:104px;height:104px;margin:0}
  #risk .quiz{margin-top:10px;gap:8px}
}
@media (min-aspect-ratio:7/5){#risk .g-num b{font-size:1.9rem}#risk .g-num span{font-size:.62rem}}
/* James, 3 Nov: "all the borders on the whole website global. The outline border ... needs to go fatter. So the card is more visible." */
.glass,.card,.flyers a{border:5px solid #fff!important}
/* James, 3 Nov: "make the letters bigger in ... all the cards. A little bigger and bolder ... Make the letters all bright white,
   especially the smaller print ... most of them could be bigger ... make sure the letters are all bright white, the borders are all bright white." */
.glass,.card,.flyers a,.glass *,.card *,.flyers a *{color:#fff!important}
.glass .eyebrow{font-size:clamp(.95rem,1.15vw,1.08rem)!important;font-weight:800!important}
.glass h2{font-size:clamp(2.1rem,4.5vw,3.6rem)!important;font-weight:800!important}
.glass h3,.card h3{font-size:clamp(1.8rem,3.2vw,2.6rem)!important;font-weight:800!important}
.card h3{font-size:clamp(1.5rem,2vw,1.9rem)!important}
.glass p,.card p,.card li,.glass li{font-size:clamp(1.12rem,1.5vw,1.32rem)!important;font-weight:600!important}
.card .who,.trust span,.counts span,.ticker span{font-size:clamp(1rem,1.2vw,1.15rem)!important;font-weight:700!important}
.ticker,.ticker *{color:#fff!important}

/* 3 Nov 2026 chat 5: James - "Your neighbors already know us" strip centered */
.shot .layer>.glass.strip{justify-content:center;text-align:center}
.glass.strip .counts{justify-content:center}