/* Wash'n Up Laundry. Direction: Aaron Draplin (thick, flat, proud). Colors: Don's existing site. */
:root{--ink:#212121;--navy:#1f3151;--lime:#9ae055;--slate:#c0cddb;--mist:#e8eef4;--paper:#fff;--ink2:#3b4350;
--head:'Oswald','Arial Narrow',sans-serif;--body:'Source Sans 3',system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font:400 19px/1.55 var(--body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{color:inherit}
html[lang=en] [data-l=es],html[lang=es] [data-l=en]{display:none!important}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--head);font-weight:700;text-transform:uppercase;line-height:.95;letter-spacing:.005em}
h1 em,h2 em{font-style:normal;color:var(--lime);padding:0 .16em;display:inline;background:linear-gradient(var(--ink),var(--ink)) 0 58%/100% .94em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
section.dark h2 em,section.navy h2 em{background:linear-gradient(var(--lime),var(--lime)) 0 58%/100% .94em no-repeat;color:var(--ink)}
.label{display:inline-block;font:700 14px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--lime);padding:8px 12px}
.lime .label,.hero2 .label{background:var(--ink);color:var(--lime)}
/* top */
.util{background:var(--ink);color:#fff;font:600 14px/1 var(--body)}
.util .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:11px;padding-bottom:11px}
.util b{color:var(--lime);font-family:var(--head);letter-spacing:.08em;text-transform:uppercase}.util a{text-decoration:none}
header.top{background:#fff;border-bottom:8px solid var(--lime);position:sticky;top:0;z-index:20}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:116px}
header.top img{height:104px;width:auto}
nav{display:flex;align-items:center;gap:28px;font:600 17px var(--head);letter-spacing:.08em;text-transform:uppercase}
nav a{text-decoration:none;padding:6px 0;border-bottom:4px solid transparent}
nav a:hover,nav a.on{border-color:var(--ink)}
.lang{display:inline-flex;border:3px solid var(--ink);font:700 14px var(--head)}
.lang button{all:unset;cursor:pointer;padding:6px 12px;color:var(--ink)}
html[lang=en] .lang [data-b=en],html[lang=es] .lang [data-b=es]{background:var(--ink);color:var(--lime)}
.btn{display:inline-block;font:700 18px/1 var(--head);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:18px 30px;background:var(--ink);color:var(--lime);border:4px solid var(--ink)}
.btn:hover{background:var(--navy);border-color:var(--navy)}
.btn.ghost{background:transparent;color:var(--ink)}.btn.ghost:hover{background:var(--ink);color:var(--lime)}
.btn.lime{background:var(--lime);color:var(--ink);border-color:var(--ink)}.btn.lime:hover{background:#fff}
.dark .btn.ghost,.navy .btn.ghost{color:#fff;border-color:#fff}.dark .btn.ghost:hover,.navy .btn.ghost:hover{background:#fff;color:var(--ink)}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
/* hero */
.hero2{background:var(--lime);padding:64px 0 0;border-bottom:8px solid var(--ink)}
.hero2 h1{font-size:clamp(64px,11.5vw,170px);line-height:1.08;margin:26px 0 34px}
.hero2.s h1{font-size:clamp(52px,8vw,118px)}
h2{line-height:1.1}
.hero2 .rule{display:none}
.hero2 p.lede{font-size:23px;line-height:1.4;max-width:30em;font-weight:600}
.hero2 .shot{margin-top:52px;height:500px;overflow:hidden;border:8px solid var(--ink);border-bottom:0;background:var(--ink)}
.hero2.s .shot{height:340px}
.hero2 .shot img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
/* proof band */
.band{background:var(--navy);color:#fff}
.band .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.band div.c{padding:30px 24px;border-left:4px solid var(--lime)}
.band div.c:first-child{border-left:0;padding-left:0}
.band .label{background:var(--lime);color:var(--ink);margin-bottom:12px}
.band b{display:block;font:700 30px/1 var(--head);text-transform:uppercase;letter-spacing:.01em}
section{padding:96px 0}
section.mist{background:var(--mist)}
section.dark{background:var(--ink);color:#fff}
section.navy{background:var(--navy);color:#fff}
section.dark .label,section.navy .label{background:var(--lime);color:var(--ink)}
h2{font-size:clamp(46px,6.6vw,92px);margin:20px 0 22px}
.lead{font-size:21px;font-weight:600;color:var(--ink2);max-width:34em}
/* photos */
.pset{display:grid;grid-template-columns:1.25fr .75fr;gap:22px;margin-top:48px}
.pset figure{position:relative;overflow:hidden;border:6px solid var(--ink);background:var(--ink)}
.pset img{width:100%;height:100%;object-fit:cover}
.pset .big{grid-row:span 2;aspect-ratio:4/5.2}
.pset .sm img{position:absolute;inset:0}
/* stores */
.stores{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:48px}
.store{background:#fff;border:6px solid var(--ink);padding:34px}
.store h3{font-size:56px;margin:14px 0 18px}
.store dl{display:grid;grid-template-columns:100px 1fr;gap:10px 16px;margin:0 0 26px}
.store dt{font:700 14px/1.8 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.store .big{font:700 30px/1.1 var(--head);text-transform:uppercase}
.store a:not(.btn){font-weight:700}
/* rows */
.rows{margin-top:44px;border-top:6px solid var(--ink)}
.row{display:grid;grid-template-columns:84px 1fr 1.3fr;gap:26px;padding:30px 0;border-bottom:6px solid var(--ink);align-items:center}
.row .n{width:64px;height:64px;background:var(--lime);border:5px solid var(--ink);display:grid;place-items:center;font:700 28px var(--head)}
.row h3{font-size:42px}.row p{font-size:19px;color:var(--ink2);font-weight:600}
/* faq */
details{border:5px solid var(--ink);background:#fff;margin-top:16px;padding:20px 26px}
details summary{cursor:pointer;font:700 28px var(--head);text-transform:uppercase;list-style:none;display:flex;justify-content:space-between;gap:20px}
details summary::after{content:"+";font:700 36px/1 var(--head)}
details[open] summary::after{content:"\2212"}
details[open]{background:var(--lime)}
details p{margin-top:12px;font-weight:600;max-width:44em}
/* cta */
.ctab{background:var(--lime);padding:90px 0;border-top:8px solid var(--ink)}
.ctab .wrap{display:flex;justify-content:space-between;gap:40px;align-items:center;flex-wrap:wrap}
.ctab h2{margin:0;max-width:11em}
footer{background:var(--navy);color:#dfe6ee;padding:70px 0 38px;font-size:17px;border-top:8px solid var(--lime)}
footer .g{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px}
footer img{height:100px;background:#fff;border:5px solid var(--ink);padding:6px;margin-bottom:18px}
footer h4{display:inline-block;font:700 15px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;background:var(--lime);color:var(--ink);padding:7px 10px;margin-bottom:14px}
footer a{text-decoration:none}footer a:hover{text-decoration:underline}
footer .copy{margin-top:44px;padding-top:20px;border-top:4px solid var(--lime);font-size:14px}
@media(max-width:860px){
 body{font-size:17px}
 .stores,.pset,footer .g{grid-template-columns:1fr}
 .band .wrap{grid-template-columns:1fr 1fr}.band div.c:nth-child(3){border-left:0;padding-left:0}
 .band div.c{border-top:4px solid var(--lime)}.band div.c:nth-child(-n+2){border-top:0}
 .row{grid-template-columns:1fr;gap:10px}.row h3{font-size:36px}
 section{padding:60px 0}.hero2{padding-top:40px}
 .hero2 .shot,.hero2.s .shot{height:260px;margin-top:34px;border-width:6px}
 .pset .big{grid-row:auto;aspect-ratio:4/3}.pset .sm{aspect-ratio:4/3}
 header.top img{height:72px}header.top .wrap{min-height:84px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
 nav{gap:14px;font-size:14px;flex-wrap:wrap}.store{padding:24px}.store h3{font-size:44px}
 .store dl{grid-template-columns:84px 1fr}
}

/* v5: hero fits the first screen; scroll animation */
:root{--chrome:154px}
html{scroll-padding-top:130px}
.hero2{padding:0;min-height:calc(100vh - var(--chrome));min-height:calc(100svh - var(--chrome));display:flex;border-bottom:8px solid var(--ink)}
.hero2 .wrap{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;width:100%;align-items:stretch}
.hero2 .copy{align-self:center;padding:28px 0}
.hero2 h1{font-size:clamp(36px,min(5.4vw,8.4vh),112px);line-height:1.1;margin:16px 0 18px}
.hero2.s h1{font-size:clamp(34px,min(5.2vw,8vh),100px)}
.hero2 p.lede{font-size:clamp(16px,2.4vh,22px);line-height:1.4}
.hero2 .cta{margin-top:22px}.hero2 .btn{padding:15px 26px}
.hero2 .shot{margin:28px 0 0;height:auto;min-height:0;border:8px solid var(--ink);border-bottom:0;align-self:stretch}
.hero2.s .shot{height:auto}
.hero2 .shot img{object-position:center 40%}
.js .hero2 .copy>*{opacity:0;transform:translateY(26px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
.js .hero2 .copy>:nth-child(1){animation-delay:.05s}.js .hero2 .copy>:nth-child(2){animation-delay:.16s}.js .hero2 .copy>:nth-child(3){animation-delay:.28s}.js .hero2 .copy>:nth-child(4){animation-delay:.4s}
.js .hero2 .shot{overflow:hidden;opacity:0;animation:rise .9s .2s cubic-bezier(.2,.7,.2,1) forwards}
.js .hero2 .shot img{transform:scale(1.08);animation:settle 1.6s .2s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes settle{to{transform:scale(1)}}
.js .rv{opacity:0;transform:translateY(34px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.btn,.store,.row .n{transition:transform .18s ease,background .15s,color .15s}
.btn:hover{transform:translateY(-3px)}
@media(max-width:860px){
 .hero2{min-height:0;display:block;padding:0}
 .hero2 .wrap{grid-template-columns:1fr;gap:0}
 .hero2 .copy{padding:40px 0 8px}
 .hero2 h1,.hero2.s h1{font-size:clamp(44px,12.5vw,72px)}
 .hero2 .shot,.hero2.s .shot{height:260px;min-height:0;margin-top:30px;border-width:6px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .js .hero2 .copy>*,.js .hero2 .shot,.js .hero2 .shot img,.js .rv{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
}

.map{margin-top:26px;border:6px solid var(--ink);background:var(--mist);height:300px}
.map iframe{display:block;width:100%;height:100%;border:0}
.store .btn{margin-bottom:0}

.hero2{min-height:calc(100vh - var(--chrome) - 8px);min-height:calc(100svh - var(--chrome) - 8px)}
.hero2 .shot{position:relative}
.hero2 .shot img{position:absolute;inset:0;width:100%;height:100%}
@media(max-width:860px){.hero2 .shot img{position:absolute}}

@media(max-width:860px){
 .util .wrap{padding-top:9px;padding-bottom:9px}.util .wrap>span:last-child{display:none}
 header.top .wrap{min-height:0;padding-top:6px;padding-bottom:6px;gap:8px;flex-wrap:nowrap}
 header.top img{height:56px}
 nav{gap:12px;font-size:12px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 nav::-webkit-scrollbar{display:none}nav a{white-space:nowrap;padding:4px 0}
 .lang button{padding:5px 9px}
 .hero2 .copy{padding:28px 0 4px}
 .hero2 h1,.hero2.s h1{font-size:clamp(34px,10.6vw,60px);margin:14px 0 14px}
 .hero2 p.lede{font-size:16px}
 .hero2 .cta{gap:10px;margin-top:18px}.hero2 .btn{padding:13px 16px;font-size:15px;flex:1 1 auto;text-align:center}
 .hero2 .shot,.hero2.s .shot{height:220px;margin-top:22px}
}

header.top .wrap>nav{margin-left:auto}header.top .wrap>.lang{flex:0 0 auto;margin-left:6px}
@media(max-width:860px){header.top .wrap>nav{flex:1 1 auto;min-width:0;margin-left:0}}