/* Canadian Paint — site styles */
body{margin:0;background:#EFEEEA}
*{box-sizing:border-box}
a{color:#16181B}
a:hover{color:#C2001F}
html{scroll-behavior:smooth}
.cond{font-family:'Inter Tight',Inter,system-ui,sans-serif;letter-spacing:-0.025em}
.mono{font-family:Inter,system-ui,sans-serif}
.tag{font-family:Inter,system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#3F444A}
.grid-bg{background-image:linear-gradient(rgba(22,24,27,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(22,24,27,.055) 1px,transparent 1px);background-size:64px 64px}
.nl{font-family:Inter,system-ui,sans-serif;font-size:15px;font-weight:500;color:#2A2E33;text-decoration:none;padding:14px 0}
.nl:hover{color:#C2001F}
.btn{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 24px;font-family:Inter,system-ui,sans-serif;font-size:15px;font-weight:600;letter-spacing:0;text-decoration:none;transition:background .3s ease,color .3s ease,gap .3s ease}
.btn:hover{gap:22px}
.btn-red{background:#E4002B;color:#FFFFFF}
.btn-red:hover{background:#16181B;color:#FFFFFF}
.btn-ghost{border:1px solid rgba(22,24,27,.4);color:#16181B}
.btn-ghost:hover{background:#16181B;color:#FFFFFF}
.cell{transition:background .35s ease}
.cell:hover{background:rgba(22,24,27,.035)}
.chip{transition:transform .3s ease}
.chip:hover{transform:translateY(-3px)}
.tick{display:flex;width:max-content;animation:tick 45s linear infinite}
@keyframes tick{to{transform:translateX(-50%)}
}
.pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{from{transform:scale(1);opacity:.9}
to{transform:scale(5);opacity:0}
}
.blink{animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:0}
}
.up{animation:up .9s cubic-bezier(.2,.7,.2,1) both}
.fade{animation:fade 1.1s ease both .25s}
.wipe{animation:wipe 1.1s cubic-bezier(.2,.7,.2,1) both .15s}
.rise-can{animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px)}
}
.arc{stroke-dasharray:1;stroke-dashoffset:1;animation:arc 1.8s cubic-bezier(.4,0,.2,1) forwards .6s}
.navrow{display:flex;gap:28px}
.nl.on{color:#C2001F;box-shadow:inset 0 -2px 0 #E4002B}
.card{text-decoration:none;color:#16181B;display:flex;flex-direction:column;background:#FFFFFF;border:1px solid rgba(22,24,27,0.16);transition:transform .35s ease,box-shadow .35s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(22,24,27,.45);color:#16181B}
.card img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.card:hover img{transform:scale(1.04)}
.fl{color:#3A3F45;text-decoration:none;font-size:14px;padding:6px 0}
.fl:hover{color:#C2001F}
@keyframes prog{from{transform:scaleX(0)}
to{transform:scaleX(1)}
}
@keyframes up{from{opacity:0;transform:translateY(40px)}
}
@keyframes fade{from{opacity:0}
}
@keyframes wipe{from{clip-path:inset(0 0 100% 0)}
to{clip-path:inset(0 0 0 0)}
}
@keyframes rule{from{transform:scaleX(0)}
to{transform:scaleX(1)}
}
@keyframes risecan{to{transform:translateY(-140px)}
}
@keyframes arc{from{stroke-dashoffset:1}
to{stroke-dashoffset:0}
}
@keyframes slide{from{transform:translateX(4%)}
to{transform:translateX(-4%)}
}
@media (prefers-reduced-motion: reduce){.tick,.pulse,.blink,.up,.fade,.wipe,.rise-can,.arc,.noop{animation:none!important}
.arc{stroke-dashoffset:0!important}
}
@media (max-width: 1180px){.hdr{flex-wrap:wrap;height:auto!important;padding-top:12px!important}
.navrow{order:3;width:100%;overflow-x:auto;gap:22px;padding-bottom:4px}
}
@media (max-width: 900px){.maplabel{display:none!important}
}
button:focus-visible,a:focus-visible{outline:2px solid #C2001F;outline-offset:3px}