/* Canada Clothing Online — compact maintenance page */
:root{color-scheme:dark;--red:#e43a3e;--white:#f8f5f1;--muted:#c8c4c0}
*{box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth}body{margin:0;min-height:100vh;background:#131111;color:var(--white);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
.scene{position:fixed;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(13,12,12,.86) 0%,rgba(13,12,12,.73) 35%,rgba(13,12,12,.14) 82%),url('../images/background.webp') right center/cover no-repeat}
.shell{min-height:100svh;display:flex;flex-direction:column;max-width:1600px;margin:auto;padding:30px clamp(24px,6vw,100px) 23px}
.header{display:flex;justify-content:space-between;align-items:center;gap:24px}.logo{display:block;width:clamp(260px,32vw,415px);max-width:100%;height:auto;filter:drop-shadow(0 3px 9px #0008)}.header-note{color:#d5cac5;text-transform:uppercase;letter-spacing:2.5px;font-size:11px;font-weight:700;text-align:right}.header-note span,.maple{color:var(--red)}
.main{display:flex;flex:1;align-items:center;padding:38px 0 48px}.hero{width:min(100%,620px)}.eyebrow{text-transform:uppercase;letter-spacing:3px;color:#f5b4b4;font-size:12px;font-weight:700;margin:0 0 16px;display:flex;align-items:center;gap:10px}.status-dot{width:7px;height:7px;background:#ee474b;border-radius:100%;box-shadow:0 0 0 4px #e43a3e24}
h1{font-size:clamp(45px,5.2vw,78px);line-height:1.02;letter-spacing:-2.5px;margin:0 0 23px;font-weight:800}h1 em{font-style:normal;color:#f05256}p{line-height:1.65}.intro{font-size:clamp(16px,1.4vw,19px);line-height:1.65;color:#f4efeb;max-width:560px;margin:0}.rule{width:60px;height:3px;background:var(--red);margin:27px 0 24px}h2{font-size:20px;margin:0 0 9px;letter-spacing:.1px}.description{max-width:560px;font-size:15px;color:#d5d1cf;margin:0;line-height:1.7}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}.actions:empty{display:none}.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 23px;min-height:48px;border-radius:5px;border:1px solid #ee4a4d;font-size:14px;text-decoration:none;font-weight:700;cursor:pointer}.button.primary{background:var(--red);color:white}.button.primary:hover{background:#f25054}.button.secondary{background:#181818a8;color:white;border-color:#888}.button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}[hidden]{display:none!important}.contact-note{color:#b7b0ac;font-size:12px;margin:15px 0 0}
.footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:17px;border-top:1px solid #ffffff2d}.footer p{margin:0;color:#c9c1bb;font-size:12px}.separator{padding:0 7px}.social{display:flex;gap:11px;align-items:center;flex-wrap:wrap}.social:empty{display:none}.social a{color:#f2efec;display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid #ffffff4a;border-radius:50%;background:#171414a1;text-decoration:none;font-size:13px;font-weight:700}.social a:hover,.social a:focus-visible{background:var(--red);border-color:var(--red)}a:focus-visible,button:focus-visible{outline:3px solid white;outline-offset:3px}
@media(max-width:850px){.header-note{display:none}.scene{background:linear-gradient(90deg,#121011eb,#121011b0),url('../images/background.webp') 66% center/cover no-repeat}.shell{padding:25px 24px}.main{padding:40px 0 50px}.footer{flex-direction:column;text-align:center}.hero{width:100%}}
@media(max-width:480px){.logo{width:min(95%,360px)}h1{font-size:clamp(43px,11vw,57px);letter-spacing:-1.9px}.main{align-items:flex-start;padding:65px 0 45px}.footer{gap:13px}.eyebrow{letter-spacing:2px}.description{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Compact desktop fit: avoid unnecessary page overflow at common laptop heights. */
@media (min-width:851px) and (max-height:850px){
  .shell{padding-top:16px;padding-bottom:14px}
  .logo{width:clamp(245px,27vw,345px)}
  .main{padding:14px 0 16px}
  h1{font-size:clamp(43px,4.4vw,62px);margin-bottom:12px}
  .eyebrow{margin-bottom:9px}
  .intro{font-size:16px;line-height:1.45}
  .rule{margin:15px 0 13px}
  h2{margin-bottom:5px}
  .description{line-height:1.5}
  .actions{margin-top:14px}
  .contact-note{margin-top:9px;line-height:1.35}
  .footer{padding-top:10px}
  .social a{width:36px;height:36px}
}
@media (min-width:851px) and (max-height:650px){
  .shell{min-height:100svh}
  .main{align-items:flex-start}
}