/* LaundryPad hero – page layout + animation styles (scene art lives in assets/*.svg) */
:root{
    --blue:#187adb;
    --navy:#14203A;
    
    --l1-line:#4A4A4A;  --l1-fill:#FFFFFF; --l1-shade:#E4E4E4; --l1-mid:#D4D4D4;
    --l2-line:#BDBDBD;  --l2-fill:#FFFFFF; --l2-shade:#F1F1F1;
    --l3-line:#E4E4E4;  --l3-fill:#F3F3F3;
    --cloud:#F1F1F1;
}
*{box-sizing:border-box;margin:0;padding:0}
::selection {
    background: var(--blue);
    color: white;
    text-shadow: none;
}
html,body{min-height:100%}
body{font-family:Lato,'Helvetica Neue',Arial,sans-serif;background:#fff;color:#4A4A4A;-webkit-font-smoothing:antialiased;overflow-x:hidden}
nav{position:relative;z-index:10;height:64px;display:flex;align-items:center}
.wrap{width:min(960px,calc(100% - 32px));margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.logo{display:block;line-height:0;text-decoration:none}
.logo img{display:block;height:34px;width:auto}
nav .wrap{width:calc(100% - 80px);max-width:none}
@media (max-width:640px){.logo img{height:26px}nav .wrap{width:calc(100% - 32px)}}
.links{display:flex;gap:26px}
.links a{font-size:16px;font-weight:600;color:#2B3446;text-decoration:none}
.links a:active{text-decoration: underline;}
.hero{position:relative;height:calc(100vh - 64px) !important;height:calc(100dvh - 64px) !important;min-height:0;overflow:hidden;}
.copy{position:absolute;z-index:5;left:0;right:0;top:clamp(20px,3.6vw,52px);text-align:center;}
.copy-padding {
    box-sizing: border-box;
    padding: 15px 20px 0px;
}
@media screen and (min-width: 768px) {
    .copy-padding {
        padding-top: 27px;
    }
}
@media screen and (min-width: 1025px) {
    .copy-padding {
        padding-top: 80px;
    }
}
.hero-title{
    font-family:'Merriweather',Georgia,serif;
    font-weight:400;
    font-size:clamp(34px,4.2vw,60px);
    line-height:36px;
    letter-spacing:.01em;
    text-wrap: balance;
    color:#4A4A4A;
}
@media (min-width: 1025px) {
    .hero-title-spacing{
        white-space: pre;
    }
}
.hero-title-spacing{
    white-space: initial;
}
@media (min-width: 768px) {
    .hero-title {
        font-size: 55px;
        line-height: 1.3;
    }
}
.sub{margin-top:clamp(12px,1.4vw,22px);font-size:18px;line-height: 28px; white-space: normal; color:#4A4A4A;font-weight:400;}
@media (min-width:768px){
    .sub{
        white-space: pre-line;
    }
}
.cta{display:inline-block;box-sizing: border-box; margin-top:30px;background:var(--blue);color:#fff;font-family:'Lato','Helvetica Neue',Arial,sans-serif;line-height: 1.3; font-weight:700;font-size:18px;letter-spacing:.02em;text-transform:uppercase;padding:17px 44px;border-radius:4px;text-decoration:none;box-shadow:0 12px 26px -8px rgba(26,140,255,.55);transition:transform .2s,box-shadow .2s}
@media screen and (min-width: 768px) {
    .cta {
        margin-top: 45px;
    }
}
@media screen and (min-width: 1025px) {
    .cta {
        margin-top: 75px;
    }
}
.cta:hover{background:#1771ca;}
.cta:active{transform: translateY(1px);box-shadow:0 14px 26px -10px rgba(26,140,255,.9)}
.stores{display:flex;gap:10px;justify-content:center;margin-top:clamp(12px,2.2vh,18px)}
.store{display:flex;align-items:center;gap:6px;color:#fff;border-radius:5px;padding:4px 10px 4px 8px;text-decoration:none;line-height:1}
.store small{display:block;font-size:6.5px;opacity:.85}
.store b{font-size:11px;font-weight:700}
.fine{margin-top:clamp(8px,.8vw,12px);font-size:11px;color:#6B7280}
.copy > *{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.copy > :nth-child(2){animation-delay:.08s}
.copy > :nth-child(3){animation-delay:.16s}
.copy > :nth-child(4){animation-delay:.22s}
.copy > :nth-child(5){animation-delay:.28s}
.scene{position:absolute;left:0;right:0;bottom:0;width:100%;height:100%}
@media (max-width:820px){.links{display:none}.copy{top:18px}}
svg.scene{stroke-linecap:round;stroke-linejoin:round}
.puff{transform-box:fill-box;transform-origin:center;opacity:0;animation:puff 2s ease-out infinite}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important;animation-delay:0s!important}.puff{display:none}}
.burger{display:none;width:40px;height:40px;border:0;background:none;padding:9px;cursor:pointer;border-radius:6px}
.burger span{display:block;height:2px;background:#2B3446;border-radius:2px;margin:5px 0;transition:transform .25s,opacity .25s}
@media (max-width:820px){.burger{display:block}nav .links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:#fff;
      box-shadow:0 12px 24px -12px rgba(0,0,0,.18);max-height:0;overflow:hidden;transition:max-height .3s ease;z-index:20}nav .links a{padding:14px 24px;border-top:1px solid #F0F0F0;font-size:15px}}
.logo{font-family:Lato,sans-serif;font-weight:900;letter-spacing:.2px}
.links a{font-family:Lato,sans-serif;font-weight:400;font-size:15px;color:#4A4A4A}
.fine{font-family:Lato,sans-serif;color:#7A7A7A}
.store b,.store small{font-family:Lato,sans-serif}
#wkBack,#wkSide{animation:wkBob .31s cubic-bezier(.45,0,.55,1) infinite alternate}
.skyband{display:none}
.hero > .copy{z-index:5}
#scene{z-index:1}
.fog{position:absolute;z-index:3;pointer-events:none;border-radius:50%;
       background:radial-gradient(ellipse at center, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 34%, rgba(255,255,255,.55) 56%, rgba(255,255,255,0) 74%);}
#van *{vector-effect:non-scaling-stroke}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes puff{0%{transform:translate(0,0) scale(.3);opacity:0}20%{opacity:1}100%{transform:translate(26px,-18px) scale(1.3);opacity:0}}
@keyframes wkBob{from{transform:translateY(0)}to{transform:translateY(-1.6px)}}