
:root{
  --navy:#0b2442;
  --blue:#1465c0;
  --blue2:#1e88e5;
  --cyan:#27b7d8;
  --ink:#162231;
  --muted:#5d6b79;
  --line:#dce5ee;
  --bg:#f5f8fb;
  --white:#fff;
  --green:#1d8b63;
  --shadow:0 16px 44px rgba(11,36,66,.12);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:white;line-height:1.6}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.container{width:min(1160px,92vw);margin:auto}
.topbar{background:var(--navy);color:#d8e8f8;font-size:.9rem}
.topbar .container{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;flex-wrap:wrap}
.topbar a{color:white}
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:78px}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:800;color:var(--navy)}
.brand img{width:235px;height:auto}
.brand small{display:block;font-size:.72rem;font-weight:600;color:var(--muted)}
.menu{display:flex;align-items:center;gap:1.15rem}
.menu a{font-weight:650;color:var(--ink);font-size:.95rem}
.menu .btn{color:white}
.mobile-toggle{display:none;background:none;border:0;font-size:1.6rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;background:var(--blue);color:white!important;padding:.8rem 1.05rem;border-radius:10px;font-weight:750;border:1px solid var(--blue);text-decoration:none!important}
.btn:hover{filter:brightness(.94)}
.btn.secondary{background:white;color:var(--blue)!important}
.btn.ghost{background:transparent;color:white!important;border-color:rgba(255,255,255,.6)}
.hero{background:linear-gradient(110deg,rgba(8,30,57,.98),rgba(10,66,125,.92));color:white;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;min-height:610px;gap:2rem}
.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:800;color:#70d3ed;margin-bottom:.7rem}
.hero h1{font-size:clamp(2.4rem,5vw,4.5rem);line-height:1.04;margin:.15rem 0 1rem;letter-spacing:-.035em}
.hero p{font-size:1.15rem;color:#dbe8f5;max-width:680px}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.5rem 0}
.hero-card{position:relative}
.hero-card img{border-radius:24px;box-shadow:0 30px 70px rgba(0,0,0,.35);min-height:380px;object-fit:cover}
.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1.4rem}
.stat{border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:.85rem;background:rgba(255,255,255,.06)}
.stat strong{display:block;font-size:1.1rem}
.section{padding:78px 0}
.section.alt{background:var(--bg)}
.section.dark{background:var(--navy);color:white}
.section h2{font-size:clamp(1.9rem,3.3vw,3rem);line-height:1.12;margin:.2rem 0 1rem;letter-spacing:-.02em}
.lead{font-size:1.1rem;color:var(--muted);max-width:850px}
.dark .lead{color:#cee0f1}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.card{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:1.35rem;box-shadow:0 6px 20px rgba(11,36,66,.05)}
.card h3{margin:.2rem 0 .5rem;font-size:1.18rem}
.card p{color:var(--muted)}
.icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#e9f3ff;color:var(--blue);font-weight:900;margin-bottom:.85rem}
.service-link{display:inline-block;font-weight:750;margin-top:.3rem}
.band{padding:28px 0;background:#e8f5fb;border-top:1px solid #cce8f1;border-bottom:1px solid #cce8f1}
.band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center}
.band strong{display:block;color:var(--navy)}
.process{counter-reset:step}
.step{position:relative;padding-left:66px;margin-bottom:1.2rem}
.step:before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:white;font-weight:850}
.article-hero{padding:75px 0;background:linear-gradient(110deg,#0b2442,#124c84);color:white}
.article-hero h1{font-size:clamp(2.2rem,4.5vw,4rem);line-height:1.05;margin:.2rem 0 .9rem}
.article{width:min(860px,92vw);margin:auto;padding:55px 0 80px}
.article h2{margin-top:2rem;font-size:1.7rem;color:var(--navy)}
.article h3{margin-top:1.5rem}
.callout{border-left:5px solid var(--cyan);background:#eef9fc;padding:1rem 1.15rem;margin:1.4rem 0;border-radius:0 12px 12px 0}
.warning{border-left-color:#d78a16;background:#fff8e8}
.compare{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.95rem}
.compare th,.compare td{border:1px solid var(--line);padding:.85rem;text-align:left;vertical-align:top}
.compare th{background:#edf4fb;color:var(--navy)}
.breadcrumb{font-size:.9rem;color:#d4e6f7;margin-bottom:1rem}
.breadcrumb a{color:white}
.cta{border-radius:24px;background:linear-gradient(120deg,#0b2442,#1465c0);color:white;padding:2rem;display:flex;justify-content:space-between;gap:2rem;align-items:center}
.cta p{color:#dbe8f5;margin:.35rem 0 0}
.quote-box{background:white;border:1px solid var(--line);border-radius:20px;padding:1.5rem;box-shadow:var(--shadow)}
label{display:block;font-weight:700;margin:.8rem 0 .3rem}
input,select,textarea{width:100%;padding:.85rem;border:1px solid #bfcbd6;border-radius:9px;font:inherit}
textarea{min-height:130px}
footer{background:#081b31;color:#c7d8e8;padding:48px 0 25px}
footer h3{color:white}
footer a{color:#d7ecff}
.footer-grid{display:grid;grid-template-columns:1.25fr .8fr .8fr;gap:2rem}
.footer-bottom{margin-top:2rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.14);font-size:.88rem}
.badge{display:inline-block;padding:.35rem .65rem;border:1px solid #cfe0ee;border-radius:999px;font-size:.82rem;font-weight:700;background:white;color:var(--navy);margin:.2rem}
.kicker{font-weight:800;color:var(--blue);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}
.source-note{font-size:.86rem;color:var(--muted);border-top:1px solid var(--line);padding-top:1rem;margin-top:2rem}
.inline-list{display:flex;gap:.6rem;flex-wrap:wrap}
.hero-mini{padding:62px 0;background:#0b2442;color:white}
.hero-mini h1{font-size:clamp(2rem,4vw,3.5rem);margin:.2rem 0 .8rem}
@media(max-width:900px){
  .hero-grid,.grid-3,.grid-2,.footer-grid,.band-grid{grid-template-columns:1fr}
  .hero-grid{padding:55px 0;min-height:auto}
  .hero-card{display:none}
  .menu{display:none;position:absolute;top:78px;left:0;right:0;background:white;padding:1rem 4vw;border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start}
  .menu.open{display:flex}
  .mobile-toggle{display:block}
  .brand img{width:190px}
  .stat-strip{grid-template-columns:1fr}
  .cta{flex-direction:column;align-items:flex-start}
}


/* --- Simplified hierarchical navigation --- */
.menu{display:flex;align-items:center;gap:.55rem}
.menu>a,.nav-group>.nav-label{font-weight:700;color:var(--ink);font-size:.94rem;padding:.6rem .72rem;border-radius:8px;white-space:nowrap}
.nav-group{position:relative}
.nav-label{cursor:default;display:flex;align-items:center;gap:.3rem}
.nav-label:after{content:"▾";font-size:.72rem;color:var(--muted)}
.submenu{
  display:none;position:absolute;top:100%;left:0;min-width:310px;background:white;
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:.55rem;z-index:80
}
.nav-group:hover .submenu,.nav-group:focus-within .submenu{display:block}
.submenu a{display:block;padding:.75rem .85rem;border-radius:9px;color:var(--ink);font-weight:650}
.submenu a:hover{background:var(--bg);text-decoration:none}
.submenu small{display:block;color:var(--muted);font-weight:500;line-height:1.3;margin-top:.12rem}
.menu .nav-divider{height:28px;width:1px;background:var(--line);margin:0 .2rem}

.service-pillars{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:1.4rem}
.pillar{background:white;border:1px solid var(--line);border-radius:22px;padding:1.6rem;box-shadow:0 8px 28px rgba(11,36,66,.06)}
.pillar h3{font-size:1.45rem;margin:.25rem 0 .55rem;color:var(--navy)}
.pillar ul{margin:.7rem 0 1rem;padding-left:1.1rem}
.pillar li{margin:.35rem 0}
.pillar .pillar-tag{display:inline-block;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);background:#edf5ff;padding:.3rem .55rem;border-radius:999px}

@media(max-width:900px){
  .menu{display:none;position:absolute;top:78px;left:0;right:0;background:white;padding:1rem 4vw;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch}
  .menu.open{display:flex}
  .nav-group{width:100%}
  .nav-label{padding:.65rem 0!important}
  .submenu{display:block;position:static;box-shadow:none;border:0;padding:0 0 .3rem .7rem;min-width:0}
  .submenu a{padding:.5rem .3rem}
  .menu .nav-divider{display:none}
  .service-pillars{grid-template-columns:1fr}
}


/* =========================================================
   v7 Mega Navigation — inspired by the clarity of UI.com,
   implemented specifically for Best Cabling Company.
   ========================================================= */
.menu{display:flex;align-items:center;gap:.25rem}
.menu>a,.mega-trigger{
  font-weight:700;color:var(--ink);font-size:.93rem;padding:.72rem .72rem;
  border-radius:9px;white-space:nowrap;background:none;border:0;font-family:inherit;
  cursor:pointer;text-decoration:none
}
.menu>a:hover,.mega-trigger:hover,.mega-group.open>.mega-trigger{
  background:var(--bg);text-decoration:none;color:var(--navy)
}
.mega-trigger:after{content:"⌄";font-size:.8rem;margin-left:.35rem;color:var(--muted)}
.mega-group{position:static}
.mega-panel{
  display:none;position:absolute;left:0;right:0;top:100%;background:rgba(255,255,255,.985);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:0 24px 46px rgba(11,36,66,.13);padding:24px 0 30px;z-index:100
}
.mega-group.open .mega-panel{display:block}
.mega-inner{width:min(1160px,92vw);margin:auto;display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:28px}
.mega-intro{padding-right:24px;border-right:1px solid var(--line)}
.mega-intro .mega-kicker{font-size:.73rem;font-weight:850;text-transform:uppercase;letter-spacing:.1em;color:var(--blue)}
.mega-intro h3{font-size:1.5rem;line-height:1.12;margin:.35rem 0 .65rem;color:var(--navy)}
.mega-intro p{font-size:.92rem;color:var(--muted);margin:0 0 1rem}
.mega-col h4{font-size:.76rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:.2rem 0 .55rem}
.mega-link{display:block;padding:.62rem .68rem;border-radius:10px;color:var(--ink)!important;text-decoration:none!important}
.mega-link:hover{background:#eff6fc}
.mega-link strong{display:block;font-size:.94rem;color:var(--navy)}
.mega-link small{display:block;color:var(--muted);font-size:.77rem;line-height:1.25;margin-top:.08rem}
.mega-feature{
  background:linear-gradient(135deg,#eef7ff,#f5fbfd);border:1px solid #d9eaf7;
  border-radius:15px;padding:1rem;margin-top:.45rem
}
.mega-feature strong{color:var(--navy)}
.menu-cta{margin-left:.35rem}
.header-phone{font-weight:750;color:var(--navy)!important}
.mobile-menu-heading{display:none}

/* CTA system */
.cta-inline{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.35rem 1.55rem;border-radius:18px;background:#eef6ff;border:1px solid #d5e7f7;margin:2rem 0
}
.cta-inline h3{margin:0 0 .2rem;color:var(--navy)}
.cta-inline p{margin:0;color:var(--muted)}
.sticky-cta{
  position:fixed;right:22px;bottom:22px;z-index:45;background:var(--blue);color:white!important;
  padding:.85rem 1rem;border-radius:999px;font-weight:800;box-shadow:0 12px 34px rgba(20,101,192,.33);
  text-decoration:none!important
}
.cta-micro{font-size:.82rem;color:var(--muted);margin-top:.45rem}
.trust-row{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}
.trust-chip{background:#f3f7fa;border:1px solid var(--line);border-radius:999px;padding:.35rem .65rem;font-size:.8rem;font-weight:750;color:var(--navy)}

/* SEO-oriented content helpers */
.service-area-copy{font-size:.94rem;color:var(--muted)}
.faq details{border-bottom:1px solid var(--line);padding:.9rem 0}
.faq summary{font-weight:800;color:var(--navy);cursor:pointer}
.faq p{color:var(--muted)}

@media(max-width:1050px){
  .menu>a,.mega-trigger{font-size:.88rem;padding:.65rem .5rem}
  .header-phone{display:none}
}
@media(max-width:900px){
  .menu{display:none;position:absolute;top:78px;left:0;right:0;max-height:calc(100vh - 78px);
    overflow:auto;background:white;padding:1rem 4vw;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch}
  .menu.open{display:flex}
  .mega-group{width:100%}
  .mega-trigger{width:100%;text-align:left;padding:.7rem 0;border-bottom:1px solid var(--line)}
  .mega-panel{display:none!important;position:static;box-shadow:none;border:0;padding:.4rem 0 .7rem}
  .mega-group.open .mega-panel{display:block!important}
  .mega-inner{width:100%;grid-template-columns:1fr;gap:.4rem}
  .mega-intro{border:0;padding:0 0 .4rem}
  .mega-intro p{display:none}
  .mega-col h4{margin-top:.8rem}
  .mega-link{padding:.55rem .25rem}
  .menu-cta{margin:.6rem 0 0}
  .sticky-cta{right:14px;bottom:14px}
  .cta-inline{flex-direction:column;align-items:flex-start}
}


/* =========================================================
   v8 Branded visual content system
   ========================================================= */
.visual-hero{padding:52px 0;background:linear-gradient(110deg,#081f3a,#0f4f91);color:white}
.visual-hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:2rem;align-items:center}
.visual-hero h1{font-size:clamp(2.25rem,4.5vw,4.2rem);line-height:1.04;margin:.25rem 0 1rem}
.visual-hero p{color:#d8e8f8;font-size:1.1rem}
.brand-visual{border-radius:22px;overflow:hidden;box-shadow:0 22px 55px rgba(0,0,0,.28);background:#fff}
.brand-visual img{width:100%;height:auto}
.figure-card{background:white;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 8px 28px rgba(11,36,66,.08)}
.figure-card img{width:100%;height:auto}
.figure-card figcaption{padding:.9rem 1.05rem;color:var(--muted);font-size:.9rem}
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.visual-strip{display:grid;grid-template-columns:1.25fr .75fr;gap:1.2rem;align-items:center}
.visual-note{font-size:.83rem;color:var(--muted);margin-top:.5rem}
.logo-header-img{width:220px!important;max-height:54px;object-fit:contain}
@media(max-width:900px){
 .visual-hero-grid,.gallery-grid,.visual-strip{grid-template-columns:1fr}
 .visual-hero{padding:42px 0}
 .logo-header-img{width:185px!important}
}


/* =========================================================
   v9 Header cleanup
   ========================================================= */
header{background:rgba(255,255,255,.985)}
.nav{
  min-height:72px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:28px;
}
.brand{
  display:flex;
  align-items:center;
  min-width:185px;
  max-width:220px;
  overflow:visible;
  font-size:0;
}
.brand img.logo-header-img{
  width:190px!important;
  max-width:190px!important;
  max-height:52px!important;
  height:auto!important;
  object-fit:contain;
  display:block;
}
.brand span,
.brand small{
  display:none!important;
}

.menu{
  justify-content:flex-end;
  gap:.18rem;
  min-width:0;
}
.menu>a,
.mega-trigger{
  font-size:.88rem;
  padding:.62rem .56rem;
  line-height:1.2;
}
.menu .header-phone{
  padding-left:.72rem;
  padding-right:.72rem;
  font-size:.88rem;
  color:var(--navy)!important;
}
.menu .btn.menu-cta{
  background:var(--blue)!important;
  color:white!important;
  border-color:var(--blue)!important;
  padding:.72rem .9rem!important;
  border-radius:10px;
  margin-left:.35rem;
  box-shadow:none;
  white-space:nowrap;
}
.menu .btn.menu-cta:hover{
  filter:brightness(.94);
  color:white!important;
}

.mega-trigger{
  appearance:none;
  -webkit-appearance:none;
}
.mega-panel{
  top:72px;
}

@media(max-width:1180px){
  .nav{gap:18px}
  .brand{min-width:165px;max-width:180px}
  .brand img.logo-header-img{width:170px!important;max-width:170px!important}
  .menu>a,.mega-trigger{font-size:.82rem;padding:.6rem .42rem}
  .menu .header-phone{display:none}
  .menu .btn.menu-cta{padding:.68rem .72rem!important;font-size:.82rem}
}

@media(max-width:980px){
  .nav{display:flex;justify-content:space-between;min-height:70px}
  .brand{min-width:0;max-width:185px}
  .brand img.logo-header-img{width:175px!important;max-width:175px!important}
  .mobile-toggle{display:block}
  .menu{
    display:none;
    position:absolute;
    top:70px;
    left:0;
    right:0;
    max-height:calc(100vh - 70px);
    overflow:auto;
    background:white;
    padding:1rem 4vw 1.25rem;
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:stretch;
  }
  .menu.open{display:flex}
  .menu>a,.mega-trigger{font-size:.96rem;padding:.75rem .2rem}
  .menu .header-phone{display:block;padding:.75rem .2rem}
  .menu .btn.menu-cta{margin:.65rem 0 0;padding:.85rem 1rem!important}
  .mega-panel{top:auto}
}


/* v10 provider matching pages */
.provider-match-hero{background:linear-gradient(115deg,#071f3d,#0c4f91);color:white;padding:64px 0}
.provider-match-hero h1{font-size:clamp(2.25rem,4.6vw,4.2rem);line-height:1.04;margin:.25rem 0 1rem;max-width:920px}
.provider-match-hero p{font-size:1.08rem;color:#dceafa;max-width:900px}
.matching-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1.25rem}
.match-card{background:white;border:1px solid var(--line);border-radius:16px;padding:1.25rem}
.catalog-tools{display:grid;grid-template-columns:1fr 280px;gap:1rem;margin:1rem 0}
.catalog-search,.catalog-select{width:100%;padding:.82rem .9rem;border:1px solid #bdccda;border-radius:9px;font:inherit;background:white}
.provider-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.provider-card{background:white;border:1px solid var(--line);border-radius:14px;padding:1rem;display:flex;flex-direction:column;min-height:185px}
.provider-card h3{font-size:1.02rem;line-height:1.3;margin:.7rem 0;color:var(--navy)}
.provider-card p{font-size:.88rem;color:var(--muted);flex:1}
.provider-tag{display:inline-block;width:max-content;background:#eaf4ff;color:var(--blue);font-size:.72rem;font-weight:800;padding:.27rem .5rem;border-radius:999px}
.provider-actions{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:.7rem}
.provider-actions>a:first-child{font-size:.82rem;font-weight:750;color:var(--blue)}
.small-btn{padding:.55rem .7rem!important;font-size:.78rem!important}
.provider-table{width:100%;border-collapse:collapse;background:white;border:1px solid var(--line)}
.provider-table th,.provider-table td{padding:.75rem .85rem;border-bottom:1px solid #edf1f5}
.provider-table th{background:#eaf2fa;color:var(--navy);text-align:left;font-size:.76rem;text-transform:uppercase}
.provider-table .right{text-align:right}
.simple-explain{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.simple-box{background:white;border:1px solid var(--line);border-radius:16px;padding:1.25rem}
.simple-box .kid{background:#eef6ff;border-left:4px solid var(--blue);padding:.8rem .9rem;border-radius:0 9px 9px 0;margin:.8rem 0}
.tabs-row{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}
.catalog-tab{border:1px solid var(--line);background:white;padding:.65rem .85rem;border-radius:8px;font-weight:750;color:var(--navy);cursor:pointer}
.catalog-tab.active{background:var(--navy);color:white;border-color:var(--navy)}
.catalog-panel{display:none}.catalog-panel.active{display:block}
.hidden{display:none!important}
@media(max-width:950px){.matching-grid,.provider-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.matching-grid,.provider-grid,.catalog-tools,.simple-explain{grid-template-columns:1fr}.provider-table-wrap{overflow:auto}.provider-table{min-width:650px}}


/* =========================================================
   v12 Connectivity RFQ workflow
   ========================================================= */
.rfq-summary{background:#eef6ff;border:1px solid #cfe4f7;border-radius:14px;padding:1rem 1.1rem;margin:1rem 0}
.rfq-summary strong{color:var(--navy)}
.rfq-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.rfq-full{grid-column:1/-1}
.rfq-form{background:white;border:1px solid var(--line);border-radius:18px;padding:1.35rem;box-shadow:0 10px 28px rgba(7,31,61,.06)}
.rfq-form label{display:block;font-weight:780;color:var(--navy);margin:.7rem 0 .3rem}
.rfq-form input,.rfq-form select,.rfq-form textarea{width:100%;padding:.78rem .85rem;border:1px solid #bdccda;border-radius:9px;font:inherit;background:white}
.rfq-form textarea{min-height:110px;resize:vertical}
.rfq-help{font-size:.8rem;color:var(--muted);margin-top:.3rem}
.rfq-required{color:#b42318}
.rfq-address-note{background:#fff8e8;border:1px solid #f0d28b;border-radius:12px;padding:.9rem 1rem;margin:1rem 0;color:#684b00}
.category-chips{display:flex;gap:.45rem;flex-wrap:wrap;margin:.8rem 0 1rem}
.category-chip{border:1px solid var(--line);background:white;border-radius:999px;padding:.45rem .7rem;font-weight:750;color:var(--navy);cursor:pointer}
.category-chip.active{background:var(--navy);color:white;border-color:var(--navy)}
.product-meta{font-size:.78rem;color:var(--muted);margin-top:-.25rem}
.rfq-status{margin-top:.8rem;font-weight:750;color:#0b6b47}
@media(max-width:760px){.rfq-grid{grid-template-columns:1fr}.rfq-full{grid-column:auto}}


/* =========================================================
   v14 Hardware catalog / RFQ
   ========================================================= */
.hardware-hero{background:linear-gradient(115deg,#071f3d,#0c4f91);color:white;padding:64px 0}
.hardware-hero h1{font-size:clamp(2.25rem,4.6vw,4.2rem);line-height:1.04;margin:.25rem 0 1rem;max-width:940px}
.hardware-hero p{font-size:1.08rem;color:#dceafa;max-width:900px}
.hardware-category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.2rem}
.hardware-category{background:white;border:1px solid var(--line);border-radius:14px;padding:1rem}
.hardware-tools{display:grid;grid-template-columns:1fr 285px;gap:1rem;margin:1rem 0}
.hardware-search,.hardware-select{width:100%;padding:.82rem .9rem;border:1px solid #bdccda;border-radius:9px;font:inherit;background:white}
.hardware-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.hardware-card{background:white;border:1px solid var(--line);border-radius:14px;padding:1rem;display:flex;flex-direction:column;min-height:190px}
.hardware-card h3{font-size:1.02rem;line-height:1.3;margin:.7rem 0;color:var(--navy)}
.hardware-card p{font-size:.82rem;color:var(--muted);flex:1}
.hardware-tag{display:inline-block;width:max-content;background:#eaf4ff;color:var(--blue);font-size:.72rem;font-weight:800;padding:.27rem .5rem;border-radius:999px}
.hardware-actions{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:.7rem}
.hardware-actions>a:first-child{font-size:.82rem;font-weight:750;color:var(--blue)}
.hardware-rfq-note{background:#fff8e8;border:1px solid #f0d28b;border-radius:12px;padding:.9rem 1rem;margin:1rem 0;color:#684b00}
.hardware-rfq-summary{background:#eef6ff;border:1px solid #cfe4f7;border-radius:14px;padding:1rem 1.1rem;margin:1rem 0}
.hardware-rfq-form{background:white;border:1px solid var(--line);border-radius:18px;padding:1.35rem;box-shadow:0 10px 28px rgba(7,31,61,.06)}
.hardware-rfq-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.hardware-full{grid-column:1/-1}
.hardware-rfq-form label{display:block;font-weight:780;color:var(--navy);margin:.7rem 0 .3rem}
.hardware-rfq-form input,.hardware-rfq-form select,.hardware-rfq-form textarea{width:100%;padding:.78rem .85rem;border:1px solid #bdccda;border-radius:9px;font:inherit;background:white}
.hardware-rfq-form textarea{min-height:110px;resize:vertical}
.hardware-help{font-size:.8rem;color:var(--muted);margin-top:.3rem}
.hardware-status{margin-top:.8rem;font-weight:750;color:#0b6b47}
@media(max-width:950px){.hardware-grid,.hardware-category-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.hardware-grid,.hardware-category-grid,.hardware-tools,.hardware-rfq-grid{grid-template-columns:1fr}.hardware-full{grid-column:auto}}


/* =========================================================
   v15 Hardware Quote List / cart workflow
   ========================================================= */
.hardware-review-btn{margin:0 0 1.1rem auto;display:flex;gap:.55rem;align-items:center}
.hardware-review-btn [data-hardware-cart-count]{background:white;color:var(--blue);min-width:24px;height:24px;border-radius:999px;display:inline-grid;place-items:center;padding:0 .35rem}
.hardware-cart-items{margin-top:1rem}
.hardware-cart-row{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;padding:.9rem 0;border-top:1px solid #dce7f1}
.hardware-cart-product strong{display:block;color:var(--navy)}
.hardware-cart-product span{display:block;color:var(--muted);font-size:.82rem;margin:.18rem 0}
.hardware-cart-product a{font-size:.8rem;color:var(--blue);font-weight:750}
.hardware-cart-controls{display:flex;align-items:end;gap:.7rem}
.hardware-cart-controls label{font-size:.75rem;color:var(--muted);font-weight:750}
.hardware-cart-controls input{display:block;width:72px;margin-top:.2rem;padding:.5rem;border:1px solid #bdccda;border-radius:7px}
.hardware-remove{background:none;border:0;color:#b42318;font-weight:750;cursor:pointer;padding:.55rem}
.hardware-cart-empty{padding:1rem 0;color:var(--muted)}
.hardware-cart-floating{position:fixed;right:22px;bottom:82px;z-index:60;border:0;background:#071f3d;color:white;font-weight:800;padding:.8rem 1rem;border-radius:999px;box-shadow:0 12px 30px rgba(7,31,61,.25);cursor:pointer}
.hardware-cart-badge{display:inline-grid;place-items:center;background:#1882eb;color:white;min-width:25px;height:25px;border-radius:999px;padding:0 .35rem;margin-left:.4rem}
.hardware-toast{position:fixed;left:50%;bottom:32px;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:#071f3d;color:white;padding:.8rem 1rem;border-radius:10px;box-shadow:0 10px 28px rgba(7,31,61,.3);font-weight:750;z-index:100;transition:.2s ease}
.hardware-toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:720px){
  .hardware-cart-row{grid-template-columns:1fr}
  .hardware-cart-controls{justify-content:flex-start}
  .hardware-cart-floating{right:14px;bottom:76px}
}


/* =========================================================
   v16 RFQ submitted/selected states
   ========================================================= */
.hardware-quote-btn.added,
.rfq-product-btn.added,
.infra-product-btn.added{
  background:#11865b!important;
  border-color:#11865b!important;
  color:white!important;
}
.hardware-quote-btn.added:hover,
.rfq-product-btn.added:hover,
.infra-product-btn.added:hover{filter:brightness(.94)}
.rfq-submit-working{opacity:.65;pointer-events:none}
.rfq-error{color:#b42318;font-weight:750;margin-top:.7rem}
.rfq-success{color:#087443;font-weight:750;margin-top:.7rem}
