/* ============================= UTILITY BAR ============================= */
.utility-bar{
  background:linear-gradient(90deg,var(--grey-950,#1B1C1F),#26282C 55%,var(--grey-950,#1B1C1F));
  color:#C7C8CB;font-family:var(--font-mono,monospace);font-size:12.5px;
  border-bottom:1px solid rgba(255,255,255,.07)
}
.utility-bar .wrap{display:flex;justify-content:space-between;align-items:center;padding:7px 24px;flex-wrap:wrap;gap:8px;max-width:1250px;margin:0 auto}
.utility-bar a{color:#C7C8CB;text-decoration:none;display:inline-flex;align-items:center;transition:color .18s}
.utility-bar a:hover{color:#fff}
.utility-bar .links{display:flex;gap:18px;align-items:center}
.utility-bar .links > a:hover .ic{color:var(--red)}
.utility-sep{width:1px;height:16px;background:rgba(255,255,255,.18);display:inline-block}
.ic{width:14px;height:14px;display:inline-block;vertical-align:middle;margin-right:7px;flex-shrink:0;transition:color .18s}

.util-right{gap:14px}

/* social — icon only, circular */
.social-dock{display:flex;align-items:center;gap:7px}
.social-dock .soc{
  width:27px;height:27px;border-radius:50%;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;color:#C7C8CB;transition:.2s
}
.social-dock .soc svg{width:14px;height:14px;display:block}
.social-dock .soc:hover{background:var(--red);color:#fff;transform:translateY(-2px)}
.social-dock .soc-wa:hover{background:#25D366}

/* cart / account — icon first */
.util-ico{position:relative;display:inline-flex;align-items:center;gap:7px;padding:3px 2px}
.util-ico svg{width:19px;height:19px;display:block}
.util-ico:hover svg{color:var(--red)}
.util-acct span{font-size:12.5px}
.util-badge{
  position:absolute;top:-5px;left:11px;min-width:16px;height:16px;padding:0 4px;border-radius:20px;
  background:var(--red);color:#fff;font-size:10px;font-weight:700;font-style:normal;
  display:flex;align-items:center;justify-content:center;line-height:1;border:2px solid var(--grey-950,#1B1C1F)
}

/* ================================ HEADER ============================== */
/* ---- sticky header ---- */
.utility-bar{
  position:fixed;
  top:0;left:0;right:0;width:100%;
  z-index:1100;
}
header{
  background:rgba(255,255,255,.97);backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--grey-300,#D7D9DC);
  position:fixed;
  top:var(--utility-h,38px);
  left:0;right:0;width:100%;
  z-index:1050;
  transition:box-shadow .25s;
  overflow:visible;
}
header .wrap{overflow:visible}
/* body top padding = utility-bar + header — JS exact value set karta hai */
body{padding-top:calc(var(--utility-h,38px) + var(--header-h,70px));}
/* utility-bar aur header ke beech ka gap 0 rakho */
.utility-bar{margin-bottom:0}
header{margin-top:0}
/* Scroll karte waqt dono fixed bars ke beech sub-pixel jhiri se content na jhalke:
   dono ke PEECHE ek solid backdrop (z-index dono se kam, page content se zyada) */
html::before{
  content:"";position:fixed;top:0;left:0;right:0;
  height:calc(var(--utility-h,38px) + var(--header-h,70px) + 1px);
  background:#fff;z-index:700;pointer-events:none;
}

header.scrolled{box-shadow:0 6px 26px rgba(0,0,0,.10);border-bottom-color:transparent}
header a{text-decoration:none;color:inherit}
header .wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 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;transition:transform .25s}
.logo-svg:hover .logo-img{transform:scale(1.03)}
/* logo size stays fixed on scroll */
header.scrolled .logo-img{height:42px}
.logo-text{display:flex;flex-direction:column}
.brand-title{font-family:'Poppins',sans-serif;font-weight:900;font-size:24px;color:var(--red);line-height:.9;letter-spacing:-.02em;white-space:nowrap}
.brand-tagline{font-family:'Poppins',sans-serif;font-style:italic;font-weight:400;font-size:10.5px;color:#555;letter-spacing:-.01em;margin-top:2px;white-space:nowrap}

/* hamburger — animates into an X */
.mobile-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-shrink:0}
.mobile-toggle span{display:block;width:24px;height:2px;background:var(--grey-950,#1B1C1F);margin:5px 0;border-radius:2px;transition:.28s}
.main-nav.active ~ .mobile-toggle span:nth-child(1),
.mobile-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-toggle.open span:nth-child(2){opacity:0;transform:scaleX(.2)}
.mobile-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ------------------------------ nav links ---------------------------- */
.main-nav{display:flex;align-items:center;gap:20px;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:flex;align-items:center;gap:5px;padding:10px 13px;white-space:nowrap;
  color:var(--grey-800,#2B2D31);text-decoration:none;position:relative;transition:color .18s
}
.nav-menu > li.open > a{color:var(--red) !important}
.nav-menu > li > a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;background:var(--red);
  border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .26s cubic-bezier(.4,0,.2,1)
}
.nav-menu > li > a:hover,.nav-menu > li > a.on{color:var(--red)}
.nav-menu > li > a:hover::after,.nav-menu > li > a.on::after{transform:scaleX(1)}
.nav-menu > li:hover > a{color:var(--red)}

/* caret drawn in CSS so it rotates cleanly */
.nav-menu .caret{
  width:6px;height:6px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .22s;opacity:.65;display:inline-block
}
.nav-menu > li:hover .caret,.nav-menu > li.open .caret{transform:rotate(-135deg) translateY(-2px);opacity:1}

/* ---------------------------- 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:12px;
  box-shadow:0 18px 44px rgba(0,0,0,.15);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;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:7px;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 ---------------------------- */
.has-mega{position:static}
.mega-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  width:930px;max-width:94vw;background:#fff;border:1px solid var(--grey-300,#D7D9DC);
  border-radius:16px;box-shadow:0 24px 56px rgba(0,0,0,.17);padding:26px;
  display:none;gap:28px;opacity:0;visibility:hidden;transition:.2s cubic-bezier(.4,0,.2,1);z-index:1400
}
.nav-menu > li.has-mega:hover > .mega-menu{display:flex;opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-cols{display:flex;gap:22px;flex:1}
.mega-col{flex:1;min-width:0}
.mega-col h5{
  font-family:var(--font-mono,monospace);font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--red);margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--grey-300,#D7D9DC);
  white-space:nowrap;display:flex;align-items:center;gap:8px
}
.mega-col-ico{
  width:18px;height:18px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center
}
.mega-col-ico svg{
  width:100%;height:100%;stroke:var(--red);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round
}
.mega-col ul{list-style:none;display:flex;flex-direction:column;gap:2px;margin:0;padding:0}
.mega-col ul li a{
  display:block;font-size:13.5px;color:var(--grey-800,#2B2D31);text-decoration:none;font-weight:500;
  padding:6px 8px 6px 12px;border-radius:6px;position:relative;transition:.18s;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis
}
.mega-col ul li a::before{
  content:"";position:absolute;left:3px;top:50%;width:3px;height:0;background:var(--red);
  border-radius:2px;transform:translateY(-50%);transition:height .2s
}
.mega-col ul li a:hover{color:var(--red);background:var(--grey-100,#F2F2F1);padding-left:16px}
.mega-col ul li a:hover::before{height:15px}
.mega-banner{position:relative;display:block;width:186px;flex-shrink:0;border-radius:12px;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;transition:transform .5s}
.mega-banner:hover img{transform:scale(1.06)}
.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;z-index:2}
.mega-banner-cta{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff;font-weight:700;font-size:13.5px;padding:26px 14px 12px;z-index:2}

/* --------------------------- header search --------------------------- */
.nav-search-btn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--grey-300,#D7D9DC);background:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--grey-800,#2B2D31);
  padding:0;transition:.2s;flex-shrink:0
}
.nav-search-btn svg{width:17px;height:17px}
.nav-search-btn:hover{border-color:var(--red);color:var(--red);transform:translateY(-1px)}

.nav-search{
  position:sticky;top:0;z-index:590;background:#fff;border-bottom:1px solid var(--grey-300,#D7D9DC);
  box-shadow:0 10px 24px rgba(0,0,0,.09);max-height:0;overflow:hidden;transition:max-height .3s ease
}
.nav-search.open{max-height:110px}
.nav-search form{display:flex;align-items:center;gap:12px;padding:16px 24px;max-width:1250px;margin:0 auto}
.nav-search form > svg{width:19px;height:19px;color:var(--red);flex-shrink:0}
.nav-search input{
  flex:1;min-width:0;border:0;border-bottom:1px solid var(--grey-300,#D7D9DC);background:none;
  padding:10px 2px;font-size:15px;font-family:var(--font-body,inherit);color:var(--ink,#1B1C1F);outline:0
}
.nav-search input:focus{border-bottom-color:var(--red)}
.nav-search button[type=submit]{
  background:var(--red);color:#fff;border:0;border-radius:6px;padding:10px 20px;font-size:13px;
  font-weight:600;cursor:pointer;font-family:var(--font-body,inherit)
}
.nav-search button[type=submit]:hover{background:var(--red-deep,#D01E2A)}
.nav-search .close{background:none;border:0;color:var(--grey-600,#5B5F66);font-size:26px;line-height:1;cursor:pointer;padding:0 4px}

.nav-icons{display:flex;align-items:center;gap:12px;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:8px;font-weight:600;font-size:14px;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:.22s}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}
.btn-red{box-shadow:0 4px 14px rgba(255,40,54,.28)}
.btn-red:hover{background:var(--red-deep);border-color:var(--red-deep);color:#fff;transform:translateY(-2px);box-shadow:0 8px 22px rgba(255,40,54,.36)}

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;position:relative;z-index:1200}
  header{overflow:visible!important}

  .main-nav{
    display:none!important;
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:#fff;
    z-index:1160;
    overflow-y:auto;
    overflow-x:hidden;
    flex-direction:column;
    align-items:stretch;
    padding:64px 0 40px;
    -webkit-overflow-scrolling:touch;
  }
  .main-nav.active{display:flex!important}

  .nav-menu{flex-direction:column;align-items:stretch;width:100%;padding:0;margin:0}
  .nav-menu > li{border-bottom:1px solid #f0f0f0}
  .nav-menu > li > a{
    display:flex;align-items:center;justify-content:space-between;
    padding:15px 20px;color:#1B1C1F;font-weight:600;font-size:15px;text-decoration:none;
  }
  .nav-menu > li > a::after{display:none!important}
  .nav-menu > li > a.on{color:var(--red)}
  .nav-menu > li.has-mega > a::after,
  .nav-menu > li.has-dropdown > a::after{
    content:"▾"!important;display:inline-block!important;font-size:16px;color:#bbb;transition:transform .2s;
  }
  .nav-menu > li.has-mega.open > a::after,
  .nav-menu > li.has-dropdown.open > a::after{transform:rotate(180deg)}

  .nav-menu .dropdown{
    position:static!important;opacity:1!important;visibility:visible!important;
    transform:none!important;box-shadow:none!important;border:none!important;
    border-radius:0!important;padding:0!important;display:none;min-width:0;background:#f8f8f8;
  }
  .nav-menu li.has-dropdown > .dropdown{display:none}
  .nav-menu li.has-dropdown.open > .dropdown{display:block!important}
  .nav-menu .dropdown li a{display:block;padding:13px 32px;font-size:14px;color:#333;border-bottom:1px solid #eee}

  .mega-menu{
    position:static!important;opacity:1!important;visibility:visible!important;
    transform:none!important;box-shadow:none!important;border:none!important;
    border-radius:0!important;padding:0!important;display:none;
    width:100%!important;max-width:100%!important;
    flex-direction:column!important;gap:0!important;background:#f8f8f8;
  }
  .nav-menu li.has-mega.open > .mega-menu,
  .nav-menu li.has-dropdown.open > .mega-menu{display:flex!important}
  .mega-cols{flex-direction:column!important;gap:0!important;width:100%}
  .mega-col h5{font-size:11px;padding:9px 20px;margin:0;color:#888;text-transform:uppercase;background:#efefef;display:block}
  .mega-col ul{list-style:none;padding:0;margin:0;display:block}
  .mega-col ul li a{display:block;padding:13px 30px;font-size:14px;color:#333;border-bottom:1px solid #eee;text-decoration:none}
  .mega-banner{display:none!important}

  .nav-icons{flex-direction:column;align-items:stretch;gap:10px;padding:16px 20px 20px}
  .nav-icons .btn{text-align:center;justify-content:center;width:100%}
  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}
}

/* ---- Mobile header declutter (bottom icon bar already covers cart/account) ---- */
@media (max-width: 900px){
  /* utility-bar: fixed on mobile too, JS hides it on scroll */
  .utility-bar{
    position:fixed !important;
    top:0 !important;
    left:0;right:0;width:100%;
    z-index:701 !important;
  }
  /* header: fixed below utility-bar, JS adjusts top */
  header{
    position:fixed !important;
    left:0;right:0;width:100%;
  }
  body{padding-top:calc(var(--utility-h,34px) + var(--header-h,62px)) !important}
  .utility-bar .wrap{
    justify-content:space-between;align-items:center;
    flex-wrap:nowrap !important;           /* wrap hone par doosri line navbar ke peeche chhup jaati thi */
    padding:5px 12px;gap:10px;overflow:hidden;white-space:nowrap
  }
  .utility-bar .links{flex-wrap:nowrap;min-width:0}
  /* Facebook/Instagram/WhatsApp mobile pe hide — ye footer aur action bar mein already hain */
  .utility-bar .links a[href*="facebook"],
  .utility-bar .links a[href*="instagram"],
  .utility-bar .links a[href*="whatsapp"]{display:none}
  .utility-bar .links a[href^="mailto"]{display:none}
  .utility-bar .util-ico{display:none}
  .utility-sep{display:none}
  .utility-bar .links{gap:14px}
  .social-dock{gap:6px}
  .social-dock .soc{width:26px;height:26px}

  /* search opens from the header button on tablet too */
  .nav-search form{padding:14px 16px;gap:10px}
  .nav-search button[type=submit]{padding:10px 15px}
}
@media (max-width: 420px){
  .utility-bar .wrap{gap:12px;font-size:11px}
  .social-dock .soc{width:24px;height:24px}
  .social-dock .soc svg{width:12px;height:12px}
}

.mega-banner-cta small{display:block;font-weight:500;font-size:12px;opacity:.9;margin-top:2px}


/* ═══════════ FLOATING CART BUTTON ═══════════
   calc-tab jaisa hi look: dark background, red icon */
.float-cart{
  position:fixed;right:22px;bottom:22px;z-index:940;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--grey-950,#1B1C1F);
  border:1px solid rgba(255,255,255,.09);
  color:var(--red,#FF2836);text-decoration:none;
  box-shadow:0 6px 22px rgba(0,0,0,.22);
  transition:background .2s,transform .2s,box-shadow .2s;
}
.float-cart svg{width:24px;height:24px}
.float-cart:hover{
  background:#26282C;transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}
.float-cart .fc-count{
  position:absolute;top:-4px;right:-4px;
  min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--red,#FF2836);color:#fff;
  font-size:11px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(255,40,54,.4);
}

/* ═══════════ FLOATING kVA CALCULATOR TAB ═══════════ */
.calc-tab{
  /* aligned to the same height as the floating cart button (bottom:22px, 56px tall) */
  position:fixed;left:0;bottom:22px;
  z-index:940;display:flex;align-items:center;gap:0;
  height:56px;box-sizing:border-box;
  background:var(--grey-950,#1B1C1F);
  border:1px solid rgba(255,255,255,.09);border-left:none;
  border-radius:0 14px 14px 0;
  padding:0 0 0 13px;
  text-decoration:none;color:#fff;
  box-shadow:4px 6px 22px rgba(0,0,0,.22);
  overflow:hidden;max-width:54px;
  transition:max-width .38s cubic-bezier(.22,1,.36,1),
             background .25s, box-shadow .25s;
  will-change:max-width
}
.calc-tab::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--red,#FF2836)
}
.calc-tab-ico{
  width:28px;height:28px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--red,#FF2836);transition:color .25s
}
.calc-tab-ico svg{width:22px;height:22px;display:block}
.calc-tab-txt{
  display:flex;flex-direction:column;justify-content:center;
  padding:0 18px 0 12px;white-space:nowrap;
  opacity:0;transform:translateX(-6px);
  transition:opacity .28s ease .08s, transform .3s ease .08s
}
.calc-tab-txt b{
  font-family:var(--font-display,'Poppins'),sans-serif;
  font-size:14px;font-weight:800;letter-spacing:.01em;line-height:1.2
}
.calc-tab-txt small{
  font-size:11px;color:rgba(255,255,255,.5);
  font-family:var(--font-body,'Poppins'),sans-serif;margin-top:2px
}
.calc-tab:hover,.calc-tab:focus-visible{
  max-width:260px;background:#111214;
  box-shadow:6px 8px 30px rgba(0,0,0,.32);color:#fff
}
.calc-tab:hover .calc-tab-txt,
.calc-tab:focus-visible .calc-tab-txt{opacity:1;transform:translateX(0)}
.calc-tab:hover .calc-tab-ico{color:#fff}
.calc-tab:focus-visible{outline:2px solid var(--red,#FF2836);outline-offset:2px}

/* subtle attention pulse — runs 3 times then stops */
@keyframes calcTabNudge{
  0%,100%{box-shadow:4px 6px 22px rgba(0,0,0,.22)}
  50%{box-shadow:4px 6px 22px rgba(0,0,0,.22),0 0 0 6px rgba(255,40,54,.13)}
}
.calc-tab{animation:calcTabNudge 2.6s ease-in-out 1.5s 3}
@media(prefers-reduced-motion:reduce){
  .calc-tab{animation:none;transition:max-width .01s}
}

/* Mobile — hidden: the calculator lives in the bottom nav bar instead */
@media(max-width:900px){
  .calc-tab{display:none}
}
@media print{.calc-tab{display:none!important}}

/* ── Footer: service-area links ──
   Note: the generic `footer ul{flex-direction:column}` rule above applies to
   every list inside the footer, so these selectors are scoped tightly enough
   to win without needing !important. */
footer .footer-areas{
  border-top:1px solid rgba(255,255,255,.12);
  padding:22px 24px 20px;text-align:center
}
footer .footer-areas .fa-label{
  display:block;font-family:var(--font-mono,monospace);
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.40);margin-bottom:13px
}
footer .footer-areas ul.fa-list{
  list-style:none;margin:0 auto;padding:0;max-width:960px;
  display:flex;flex-direction:row;flex-wrap:wrap;
  justify-content:center;align-items:center;
  row-gap:9px;column-gap:0
}
footer .footer-areas ul.fa-list li{
  display:flex;align-items:center;width:auto;margin:0;padding:0
}
footer .footer-areas ul.fa-list li:not(:last-child)::after{
  content:"";width:1px;height:12px;margin:0 13px;
  background:rgba(255,255,255,.20);flex-shrink:0
}
footer .footer-areas ul.fa-list a{
  font-size:13px;color:rgba(255,255,255,.62);
  text-decoration:none;transition:color .16s;white-space:nowrap;line-height:1.3
}
footer .footer-areas ul.fa-list a:hover{color:#fff}
footer .footer-areas ul.fa-list a.on{color:var(--red,#FF2836);font-weight:600}

@media(max-width:768px){
  footer .footer-areas{padding:18px 14px 16px}
  footer .footer-areas .fa-label{font-size:9.5px;margin-bottom:11px}
  footer .footer-areas ul.fa-list{row-gap:8px}
  footer .footer-areas ul.fa-list a{font-size:12.5px}
  footer .footer-areas ul.fa-list li:not(:last-child)::after{margin:0 9px;height:11px}
}
@media(max-width:420px){
  footer .footer-areas ul.fa-list a{font-size:12px}
  footer .footer-areas ul.fa-list li:not(:last-child)::after{margin:0 7px}
}

/* ═══════════════ SECTION HEADING RULE ═══════════════
   The red diamond + bar under a heading (originally .tset in style.css).
   Add .sl-head to any heading; .sl-head.center centres the rule.        */
.sl-head{position:relative;padding-bottom:28px}
.sl-head::before{
  content:"";position:absolute;left:2px;bottom:5px;
  width:9px;height:9px;background:var(--red,#FF2836);
  transform:rotate(-45deg)
}
.sl-head::after{
  content:"";position:absolute;left:14px;bottom:8.5px;
  width:85px;height:2px;background:var(--red,#FF2836)
}
.sl-head.center::before{left:50%;transform:translateX(-48px) rotate(-45deg)}
.sl-head.center::after{left:50%;transform:translateX(-36px)}
@media(max-width:768px){
  .sl-head{padding-bottom:24px}
  .sl-head::after{width:66px}
  .sl-head.center::before{transform:translateX(-38px) rotate(-45deg)}
  .sl-head.center::after{transform:translateX(-26px)}
}

/* Global overflow fix */
html, body { overflow-x: hidden; max-width: 100%; }

/* ============================ UTILITY BAR HIDE ON SCROLL ================= */
.utility-bar{
  max-height:60px;
  overflow:hidden;
  transition:max-height .5s ease, opacity .5s ease, padding .5s ease;
  opacity:1;
}
.utility-bar.ub-hidden{
  max-height:0;
  opacity:0;
  padding-top:0;
  padding-bottom:0;
  pointer-events:none;
}