/* ==========================================================================
   "YOUR COMPANY" TOWING - the scrollytelling sample (20 Oct 2026, copied from pest control pc.css).
   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:#10264a; --ink-2:#1b2535; --body-c:#44536b;
  --accent:#d0172f; --accent-d:#a80f24; --leaf:#a80f24;
  --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:#7fd8ff;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:#a8e6ff;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:#a8e6ff;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:#a8e6ff}
.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:#a8e6ff}
.card.hot{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:#a8e6ff}
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}
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:#7fd8ff;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:#7fd8ff;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;transform:none}
.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),#a8e6ff,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);will-change:transform}
/* 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:#a8e6ff}
.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:#a8e6ff;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:#a8e6ff;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:#7fd8ff}
.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:#7fd8ff;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:#7fd8ff;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:#a8e6ff}
.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:#a8e6ff}

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:#a8e6ff}
.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:#7fd8ff;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 #a8e6ff}
.hist b{display:block;color:#a8e6ff;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 #7fd8ff;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)}

/* ---------- towing (20 Oct 2026) ---------- */
/* the phone call bar: one solid button, a tel: link, never see-through, never animated */
@media (max-width:1080px){
  .mbar{grid-template-columns:1fr;background:#0d1626;backdrop-filter:none}
  .mbar a.go{font-size:1.05rem;padding:15px 6px;background:var(--accent);border-color:var(--accent)}
}
/* two doors on the first screen: both always show, phones included */
.glass .doors .btn-ghost{display:inline-flex!important}
.btn{min-height:48px}
/* town names on the Service Areas scene */
.towns{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.towns li{padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);font:600 .84rem/1 var(--body);color:#fff}
.story .caps>.glass.wide-cap{max-width:min(620px,100%)}
.story .counts{margin-top:12px}
.story .counts b{font-size:clamp(1.6rem,2.6vw,2.3rem)}

/* ==========================================================================
   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}
}
@media (max-width:760px){body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}}
/* towing, phones (22 Oct): the town list stays small so the whole caption fits on the screen */
@media (max-aspect-ratio:7/5){
  .towns{gap:4px;margin-top:8px}
  .towns li{padding:4px 7px;font-size:.68rem}
}
/* towing (22 Oct): the solid call bar also shows on upright tablets, where the menu hides the header call button */
@media (max-width:1080px){
  .mbar{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:70;padding:10px 10px calc(10px + env(safe-area-inset-bottom))}
  .mbar a{display:grid;place-items:center;border-radius:12px;color:#fff}
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  .ash{bottom:84px!important}
}

/* towing (23 Oct): "Send my location" is a button, so it needs the ghost look spelled out */
button.loc-btn{background:transparent;font:700 1rem/1 var(--body)}
/* towing header (25 Oct): the two rotators fill the picture, so on wide screens the headline is a slim strip on the wet pavement below the wheels */
@media (min-aspect-ratio:7/5){
  .shot.pb-head .layer{justify-content:center;padding:0 16px 48px}
  .pb-head .glass.hero{max-width:min(1000px,100%);padding:10px 22px;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:28px}
  .pb-head .glass.hero .eyebrow{grid-column:1/-1;margin-bottom:2px}
  .pb-head .glass.hero h1{font-size:clamp(1.5rem,2.1vw,2.1rem);grid-column:1}
  .pb-head .glass.hero>p:not(.eyebrow){grid-column:1;margin-top:2px}
  .pb-head .glass.hero .btns{grid-column:2;grid-row:2/4;margin:0}
  .pb-head .glass.hero .trust{display:none}
}
/* phones: the two first-screen doors wrap instead of running off the edge */
.glass .btns.doors{flex-wrap:wrap!important}
/* towing header (25 Oct): show the whole picture width so both trucks stay whole, tails included */
@media (min-aspect-ratio:7/5){
  .shot.pb-head{height:auto!important;min-height:0!important}
  .shot.pb-head>img{height:auto!important;aspect-ratio:1672/941;object-fit:cover;transform:none!important}
}