/* Logo-first hero on the supplied pre-retro build. */
.hero-home{padding:28px 0 54px}
.hero-home .hero-grid{display:flex;flex-direction:column;gap:30px;align-items:center}
.hero-logo-trigger{display:block;width:100%;max-width:1000px;border-radius:0;background:transparent;padding:0;overflow:visible}
.hero-logo-art{display:block;width:100%;height:auto;object-fit:contain}
.hero-copy{width:100%;max-width:860px;text-align:center}
.hero-copy .hero-slogan{max-width:850px;margin:0 auto 22px;font-size:clamp(2rem,4vw,3.5rem);line-height:1.08}
.hero-copy .lead{max-width:740px;margin:0 auto 25px}
.hero-copy .actions,.hero-copy .hero-badges{justify-content:center}
.hero-copy .eyebrow{margin-bottom:14px}
.hero-logo-trigger:focus-visible{outline:3px solid #65bdea;outline-offset:5px}
@media(max-width:540px){.hero-home{padding:18px 0 36px}.hero-home .hero-grid{gap:24px}.hero-logo-trigger{border-radius:0}.hero-copy .lead{font-size:1rem}.hero-copy .actions{flex-direction:column}.hero-copy .btn{width:100%}.hero-copy .hero-slogan{font-size:2rem}.hero-copy .eyebrow{font-size:.7rem}}
html[data-theme="dark"] .hero-copy .hero-slogan-tagline{color:#7dc6ed}
@media(min-width:821px){.hero-copy .hero-slogan{font-size:3rem}.hero-logo-trigger{max-width:900px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-home .reveal{opacity:1;transform:none;transition:none}.hero-logo-trigger{animation:none;transition:none}}

/* Optical balance for the rising sign and heavier mascot on the left. */
.hero-home{padding-top:40px}
.hero-home .hero-grid{gap:48px}
.hero-logo-trigger{width:94%;max-width:800px;transform:translateX(2.5%)}
@media(max-width:820px){.hero-logo-trigger{width:92%;max-width:680px;transform:translateX(2%)}.hero-home .hero-grid{gap:36px}}
@media(max-width:540px){.hero-home{padding-top:24px}.hero-logo-trigger{width:94%;transform:translateX(1.5%)}.hero-home .hero-grid{gap:32px}}
/* Fit the replacement stacked mascot artwork without the former wide-logo offset. */
.hero-logo-trigger{width:min(100%,480px);max-width:480px;transform:none}
@media(max-width:540px){.hero-logo-trigger{width:min(85%,300px);transform:none}}
/* Keep the artwork close to the service heading, with room above. */
.hero-home{padding-top:56px}
.hero-home .hero-grid{gap:20px}
@media(max-width:820px){.hero-home .hero-grid{gap:20px}}
@media(max-width:540px){.hero-home{padding-top:32px}.hero-home .hero-grid{gap:18px}}
/* Walkthrough topics: full-width copy without numbered badges. */
#walkthrough-focus .detail-band-grid{gap:32px;align-items:center}
#walkthrough-focus .detail-points{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-self:center}
#walkthrough-focus .detail-points article{display:block;padding:22px;min-width:0}
#walkthrough-focus .detail-points article>div{min-width:0}
#walkthrough-focus .detail-points strong{font-size:1rem;line-height:1.4;text-wrap:balance}
#walkthrough-focus .detail-points small{font-size:.9rem;line-height:1.55;margin-top:7px}
@media(max-width:540px){#walkthrough-focus .detail-points{grid-template-columns:1fr}#walkthrough-focus .detail-points article{padding:20px}}
/* Center the transparent character beneath the Why Happy Vac introduction. */
#why .mini-mascot{display:block;width:190px;max-width:65%;height:auto;object-fit:contain;margin:28px auto 0}
@media(max-width:540px){#why .mini-mascot{width:165px;margin-top:24px}}