.utility-bar{background:var(--grey-950,#1B1C1F);color:#C7C8CB;font-family:var(--font-mono,monospace);font-size:12.5px}
.utility-bar .wrap{display:flex;justify-content:space-between;align-items:center;padding:8px 24px;flex-wrap:wrap;gap:6px}
.utility-bar a{color:#C7C8CB;text-decoration:none;display:inline-flex;align-items:center}
.utility-bar a:hover{color:var(--red)}
.utility-bar .links{display:flex;gap:18px;align-items:center}
.utility-sep{width:1px;height:14px;background:rgba(255,255,255,.2);display:inline-block}
.ic{width:14px;height:14px;display:inline-block;vertical-align:middle;margin-right:6px;flex-shrink:0}

header{background:rgba(255,255,255,0.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--grey-300,#D7D9DC);position:sticky;top:0;z-index:600}
header a{text-decoration:none;color:inherit}
header .wrap{display:flex;align-items:center;justify-content:space-between;padding:10px 24px;max-width:1250px;margin:0 auto;gap:20px}
.logo-svg{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;color:inherit}
.logo-img{height:42px;width:auto;display:block}
.logo-text{display:flex;flex-direction:column}
.brand-title{font-family:'Archivo',sans-serif;font-weight:900;font-size:24px;color:var(--red);line-height:0.9;letter-spacing:-0.02em;white-space:nowrap}
.brand-tagline{font-family:'Archivo',sans-serif;font-style:italic;font-weight:400;font-size:10.5px;color:#555;letter-spacing:-0.01em;margin-top:2px;white-space:nowrap}

.mobile-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-shrink:0}
.mobile-toggle span{display:block;width:24px;height:2px;background:var(--grey-950,#1B1C1F);margin:5px 0;transition:0.3s}

.main-nav{display:flex;align-items:center;gap:22px;flex:1;justify-content:flex-end}
.nav-menu{list-style:none;display:flex;gap:2px;font-size:13.5px;font-weight:600;color:var(--grey-800,#2B2D31);align-items:center;margin:0;padding:0}
.nav-menu > li{position:relative}
.nav-menu > li > a{display:block;padding:10px 12px;white-space:nowrap;border-radius:6px;transition:.15s;color:var(--grey-800,#2B2D31);text-decoration:none}
.nav-menu > li > a:hover{color:var(--red);background:var(--grey-100,#F2F2F1)}
.nav-menu .caret{font-size:9px;margin-left:2px;opacity:.6}

/* dropdown panels */
.nav-menu .dropdown{
  list-style:none;position:absolute;top:100%;left:0;min-width:250px;margin:0;padding:8px;
  background:#fff;border:1px solid var(--grey-300,#D7D9DC);border-radius:10px;
  box-shadow:0 16px 40px rgba(0,0,0,.14);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;z-index:700;
}
.nav-menu > li.has-dropdown:hover > .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav-menu .dropdown li{position:relative}
.nav-menu .dropdown li a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border-radius:6px;font-weight:500;font-size:13px;color:var(--grey-800,#2B2D31);white-space:nowrap;text-decoration:none}
.nav-menu .dropdown li a:hover{background:var(--grey-100,#F2F2F1);color:var(--red)}
.nav-menu .dropdown.sub{top:-9px;left:100%;margin-left:4px}
.nav-menu .dropdown li.has-dropdown:hover > .dropdown.sub{opacity:1;visibility:visible;transform:translateY(0)}

/* Mega menu (Products dropdown) — category columns + product image banner */
.has-mega{position:static}
.mega-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  width:820px;max-width:92vw;background:#fff;border:1px solid var(--grey-300,#D7D9DC);
  border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.16);padding:26px;
  display:flex;gap:28px;opacity:0;visibility:hidden;transition:.18s;z-index:700;
}
.nav-menu > li.has-mega:hover > .mega-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-cols{display:flex;gap:34px;flex:1}
.mega-col h5{font-family:var(--font-mono,monospace);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--red);margin:0 0 12px}
.mega-col ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0;padding:0}
.mega-col ul li a{font-size:13.5px;color:var(--grey-800,#2B2D31);text-decoration:none;font-weight:500}
.mega-col ul li a:hover{color:var(--red)}
.mega-banner{position:relative;display:block;width:210px;flex-shrink:0;border-radius:10px;overflow:hidden;text-decoration:none;background:var(--grey-100,#F2F2F1)}
.mega-banner img{width:100%;height:100%;object-fit:cover;display:block;min-height:220px}
.mega-banner-tag{position:absolute;top:12px;left:12px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;text-transform:uppercase;padding:3px 10px;border-radius:20px}
.mega-banner-cta{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;font-weight:700;font-size:13.5px;padding:26px 14px 12px}

.nav-icons{display:flex;align-items:center;gap:14px;flex-shrink:0}
.nav-icons .icon-link{font-size:13.5px;font-weight:600;white-space:nowrap;color:var(--grey-800,#2B2D31);text-decoration:none}
.nav-icons .icon-link:hover{color:var(--red)}
.badge-cart{background:var(--red);color:#fff;border-radius:20px;padding:1px 8px;font-size:11px;margin-left:4px}

/* Buttons — shared everywhere (fixes "Get a Quote" not showing as a red button on legacy pages) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:10px;font-weight:600;font-size:14.5px;font-family:var(--font-body,inherit);cursor:pointer;border:2px solid var(--ink,#1B1C1F);white-space:nowrap;background:#fff;text-decoration:none;color:inherit;transition:.2s}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}
.btn-red:hover{background:var(--red-deep);border-color:var(--red-deep);color:#fff}

footer{background:var(--grey-950,#1B1C1F);color:#9A9CA2;font-size:14px}
footer .wrap{padding:56px 24px 30px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;max-width:1180px;margin:0 auto}
footer h5{color:#fff;font-family:var(--font-mono,monospace);font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0;padding:0}
footer a{color:#9A9CA2;text-decoration:none}
footer a:hover{color:var(--red)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);text-align:center;padding:20px 24px;font-size:12.5px}
.footer-social{display:flex;gap:10px;margin-top:18px}
.footer-social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:.2s}
.footer-social a:hover{background:var(--red)}
.footer-social .ic{width:16px;height:16px;margin:0;color:#fff}
.footer-contact li{display:flex;align-items:flex-start;gap:10px}
.footer-contact a{display:flex;align-items:flex-start;gap:10px}
.footer-contact .ic{margin-top:3px;flex-shrink:0;color:var(--red)}

@media (max-width: 1100px) {
  .brand-tagline{display:none}
  .nav-menu{gap:0}
  .nav-menu > li > a{padding:10px 8px;font-size:13px}
}

@media (max-width: 900px) {
  .mobile-toggle{display:block}
  .main-nav{
    display:none;position:absolute;top:100%;left:0;width:100%;background:#fff;
    flex-direction:column;align-items:stretch;padding:16px;border-bottom:1px solid var(--grey-300,#D7D9DC);
    box-shadow:0 10px 20px rgba(0,0,0,0.1);max-height:80vh;overflow-y:auto;
  }
  .main-nav.active{display:flex}
  .nav-menu{flex-direction:column;align-items:stretch;width:100%}
  .nav-menu > li > a{padding:12px 6px;border-bottom:1px solid var(--grey-100,#F2F2F1)}
  .nav-menu .dropdown{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:none;border-radius:0;padding:0 0 0 14px;display:none;min-width:0;
  }
  .nav-menu li.has-dropdown:hover > .dropdown{display:block}
  .nav-menu .dropdown.sub{left:0;margin-left:0}
  .mega-menu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:none;border-radius:0;padding:10px 0 10px 14px;display:none;width:auto;max-width:none;
    flex-direction:column;gap:18px;
  }
  .nav-menu li.has-mega:hover > .mega-menu{display:flex}
  .mega-cols{flex-direction:column;gap:18px}
  .mega-banner{display:none}
  .nav-icons{flex-direction:column;align-items:stretch;gap:10px;margin-top:12px}
  .nav-icons .btn{text-align:center}

  /* Footer — tablet: 2 columns */
  footer .wrap{grid-template-columns:1fr 1fr;padding:40px 20px 24px;gap:28px}
}

@media (max-width: 560px) {
  /* Footer — phone: single column, tighter spacing */
  footer .wrap{grid-template-columns:1fr;gap:26px;padding:32px 18px 20px;text-align:left}
  footer h5{margin-bottom:10px}
  .footer-bottom{padding:16px 18px;font-size:11.5px}
  header .wrap{padding:8px 14px}
  .utility-bar .wrap{padding:6px 14px;font-size:11px}
  .utility-bar .links{gap:10px}
  .brand-title{font-size:20px}
}