:root{--red:#c8102e;--yel:#ffcd00;--grn:#006b54;--asph:#1d1e22;--wht:#fff;--ylg:#c6e600}
*{box-sizing:border-box}body{margin:0;font-family:Overpass,"Highway Gothic","Arial Narrow",Arial,sans-serif;background:var(--asph);color:#fff;line-height:1.4}
a{color:inherit}img,svg{display:block}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;background:var(--grn);border-bottom:4px solid #fff}
.logo{font-weight:900;font-size:1.25rem;text-decoration:none;letter-spacing:.02em;border:3px solid #fff;border-radius:8px;padding:4px 10px}
.top nav{display:flex;gap:10px}.top nav a{font-weight:800;text-decoration:none;padding:8px 12px;border-radius:6px}
.cartbtn{background:var(--yel);color:#111;border:3px solid #111}
.legal{background:var(--yel);color:#111;text-align:center;font-weight:800;padding:8px 14px;font-size:.9rem;border-bottom:3px solid #111}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center;max-width:1150px;margin:auto;padding:50px 20px 60px}
.hero h1{font-size:clamp(2.4rem,6vw,4.6rem);line-height:.95;margin:0 0 16px;text-transform:uppercase}
.hero h1 em{font-style:normal;color:var(--yel)}.hero p{font-size:1.2rem;opacity:.9;max-width:34em}
.btn{display:inline-block;background:var(--yel);color:#111;border:3px solid #111;box-shadow:4px 4px 0 #fff;font-weight:900;padding:13px 22px;border-radius:8px;font-size:1.05rem;text-decoration:none;cursor:pointer;font-family:inherit}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #fff}.btn.red{background:var(--red);color:#fff}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:14px;text-align:center}
.ba .sign{width:100%;filter:drop-shadow(0 12px 18px #000a)}.ba b{display:inline-block;margin-top:10px;background:#fff;color:#111;padding:3px 10px;border-radius:4px}

.road{height:16px;background:repeating-linear-gradient(90deg,var(--yel) 0 70px,transparent 70px 120px) center/100% 5px no-repeat,#2b2c31}
section{max-width:1150px;margin:auto;padding:50px 20px}h2{font-size:2.2rem;margin:0 0 6px;text-transform:uppercase}.sub{opacity:.8;margin:0 0 26px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px}
.card{background:#2b2c31;border:3px solid #3b3c42;border-radius:14px;padding:16px;text-decoration:none;transition:.2s}
.card:hover{border-color:var(--yel);transform:translateY(-4px) rotate(-1deg)}
.card .sign{width:auto;height:220px;max-width:100%;margin:6px auto 14px;filter:drop-shadow(0 8px 10px #0009)}
.card h3{margin:0 0 4px;font-size:1.1rem}.tag{font-size:.75rem;background:#444;padding:2px 7px;border-radius:4px;display:inline-block;margin-top:6px}
.hint{font-size:.85rem;opacity:.7}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.step{background:var(--grn);border:3px solid #fff;border-radius:12px;padding:18px}
.step b{font-size:2rem;color:var(--yel)}
footer{padding:30px 20px;text-align:center;opacity:.75;font-size:.9rem;border-top:3px solid #333}
/* product */
.prod{display:grid;grid-template-columns:1.2fr 1fr;gap:34px;align-items:start}
.stage{background:#e9e4da;border-radius:14px;padding:18px;color:#111;position:relative}
.stagebox{height:440px;display:flex;align-items:flex-end;justify-content:center;gap:4px;position:relative}
.ruler{position:absolute;left:0;top:0;bottom:0;width:30px;border-right:2px solid #111;font-size:.7rem}
.ruler span{position:absolute;left:2px;transform:translateY(50%)}
.stage .sign{filter:drop-shadow(0 6px 8px #0006);transition:width .3s,height .3s}
.dim{font-weight:800;margin-top:10px}
.sizes{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 18px}
.sizes button{font:inherit;font-weight:900;font-size:1.1rem;padding:12px 16px;border-radius:8px;border:3px solid #fff;background:transparent;color:#fff;cursor:pointer}
.sizes button[aria-pressed=true]{background:var(--yel);color:#111;border-color:#111}
.qty{display:flex;gap:8px;align-items:center;margin:12px 0}.qty input{width:70px;font:inherit;font-size:1.1rem;padding:8px;border-radius:6px;border:0}
.price{font-size:2rem;font-weight:900;color:var(--yel)}
table{width:100%;border-collapse:collapse;margin-top:14px;font-size:.9rem}td,th{border-bottom:1px solid #444;padding:6px;text-align:left}
.toggle{margin-top:10px}.ph{background:var(--red);color:#fff;font-weight:800;font-size:.8rem;padding:4px 8px;border-radius:4px;display:inline-block}
.cartrow{display:grid;grid-template-columns:80px 1fr auto auto;gap:14px;align-items:center;border-bottom:1px solid #444;padding:12px 0}
.cartrow .sign{width:80px}.note{background:#2b2c31;border-left:6px solid var(--yel);padding:12px 16px;border-radius:6px}
@media(max-width:800px){.hero,.prod{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.stagebox{height:300px}.top nav a.hide{display:none}.hero{padding-top:28px}}

/* Sticker "slap on": hidden above and tilted, drops, overshoots, settles. */
.sign .ov{transform-box:fill-box;transform-origin:50% 50%;opacity:0;transform:translateY(-35%) rotate(-7deg) scale(1.18);transition:opacity .15s,transform .15s}
.sign .ovw{filter:drop-shadow(0 0 0 #0000)}
.sign.on .ov,.card:hover .sign .ov,.card:focus-visible .sign .ov,.hero-sign:hover .sign .ov{opacity:1;transform:none;animation:slap .5s cubic-bezier(.2,.9,.3,1.2) var(--d,0ms) both}
.sign.on .ovw,.card:hover .ovw,.hero-sign:hover .ovw{filter:drop-shadow(0 .3px .4px #0005)}
@keyframes slap{0%{opacity:0;transform:translateY(-35%) rotate(-7deg) scale(1.18)}55%{opacity:1;transform:translateY(2%) rotate(1.5deg) scale(.98)}75%{transform:rotate(-.6deg) scale(1.005)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.sign .ov{transform:none!important;animation:none!important;transition:opacity .25s var(--d,0ms)}}
.hero-sign{text-align:center;cursor:pointer}.hero-sign .sign{height:min(460px,70vh);width:auto;max-width:100%;margin:auto;filter:drop-shadow(0 14px 20px #000a)}
.hero-sign b{display:inline-block;margin-top:12px;background:#fff;color:#111;padding:4px 12px;border-radius:4px}