/* Netcomtech homepage v15
   High-fidelity implementation of the approved clean homepage mockup.
   This file is intentionally homepage-scoped so the rest of the site is unchanged. */

body.home-v15{
  background:#fff;
  color:#102f4b;
}

.home-v15 .utility-bar{display:none!important}
.home-v15 .site-header--v14{
  position:sticky;
  top:0;
  z-index:1000;
  background:#fff;
  border-bottom:1px solid #d9e4eb;
  box-shadow:0 2px 12px rgba(5,38,70,.08);
}
.home-v15 .header-main--v14{
  width:min(100%,1280px);
  margin:0 auto;
  display:grid;
  grid-template-columns:285px minmax(0,1fr) 225px;
  min-height:78px;
  gap:0;
  padding:0;
}
.home-v15 .brand--v14{
  min-width:0;
  height:78px;
  display:flex;
  justify-content:center;
  padding:0 22px;
  background:#052a54;
  color:#fff;
}
.home-v15 .brand--v14 .brand-name{
  color:#fff;
  font-size:24px;
  letter-spacing:.025em;
  line-height:1.05;
}
.home-v15 .brand--v14 .brand-tagline{
  color:#5cb8ff;
  font-size:9px;
  line-height:1.15;
  margin-top:5px;
}
.home-v15 .primary-navigation--v14{
  height:78px;
  display:flex!important;
  justify-content:center;
  align-items:stretch;
  gap:0;
  padding:0 8px;
}
.home-v15 .primary-navigation--v14>a{
  position:relative;
  min-width:74px;
  padding:10px 9px 8px!important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  border-bottom:3px solid transparent;
  color:#173650!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1.1;
  text-align:center;
}
.home-v15 .primary-navigation--v14>a::before{
  display:block;
  font-size:19px;
  line-height:1;
  color:#173650;
}
.home-v15 .primary-navigation--v14>a:nth-child(1)::before{content:"⌂"}
.home-v15 .primary-navigation--v14>a:nth-child(2)::before{content:"♟";transform:rotate(180deg)}
.home-v15 .primary-navigation--v14>a:nth-child(3)::before{content:"▦"}
.home-v15 .primary-navigation--v14>a:nth-child(4)::before{content:"⚙"}
.home-v15 .primary-navigation--v14>a:nth-child(5)::before{content:"⇩"}
.home-v15 .primary-navigation--v14>a:nth-child(6)::before{content:"●";font-size:14px;border:2px solid currentColor;border-radius:50%;width:19px;height:19px;line-height:14px;color:transparent;box-shadow:inset 0 0 0 5px #173650}
.home-v15 .primary-navigation--v14>a:first-child{
  background:#edf5ff;
  border-bottom-color:#1676e8;
  color:#075fc7!important;
}
.home-v15 .primary-navigation--v14>a:first-child::before{color:#075fc7}
.home-v15 .primary-navigation--v14>a:hover,
.home-v15 .primary-navigation--v14>a:focus-visible{
  background:#f4f8fc;
  border-bottom-color:#1676e8;
}
.home-v15 .header-search{
  align-self:center;
  width:210px;
  height:42px;
  margin-right:12px;
  grid-template-columns:1fr 42px;
  border:1px solid #b9cbd8;
  border-radius:7px;
  background:#fff;
}
.home-v15 .header-search input{
  width:100%;
  padding:0 12px;
  font-size:12px;
  outline:0;
}
.home-v15 .header-search button{
  position:relative;
  padding:0;
  background:#147cdf;
  font-size:0;
}
.home-v15 .header-search button::before{
  content:"";
  position:absolute;
  width:12px;
  height:12px;
  border:2px solid #fff;
  border-radius:50%;
  left:13px;
  top:11px;
}
.home-v15 .header-search button::after{
  content:"";
  position:absolute;
  width:8px;
  height:2px;
  background:#fff;
  transform:rotate(45deg);
  left:24px;
  top:25px;
  border-radius:2px;
}

/* Hero */
.home-v15 .v15-hero{
  position:relative;
  min-height:390px;
  background:#061f3e url("../assets/hero-home-v15.svg") center/cover no-repeat;
  color:#fff;
  overflow:hidden;
}
.home-v15 .v15-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(3,24,49,.98) 0%,rgba(3,31,60,.92) 31%,rgba(3,31,60,.52) 55%,rgba(3,31,60,.08) 78%);
}
.home-v15 .v15-hero .container{
  position:relative;
  z-index:1;
  min-height:390px;
  display:flex;
  align-items:center;
}
.home-v15 .v15-hero-copy{
  width:min(590px,53%);
  padding:48px 0 98px;
}
.home-v15 .v15-hero h1{
  margin:0 0 20px;
  max-width:560px;
  color:#fff;
  font-size:clamp(38px,4.1vw,58px);
  line-height:1.08;
  letter-spacing:-.025em;
  font-weight:800;
}
.home-v15 .v15-hero p{
  margin:0;
  max-width:545px;
  color:#fff;
  font-size:18px;
  line-height:1.48;
}

/* Subject cards overlap the hero like the approved mockup */
.home-v15 .home-entry{
  position:relative;
  z-index:4;
  padding:0 0 28px;
  background:#fff;
}
.home-v15 .home-entry>.container{
  margin-top:-78px;
}
.home-v15 .home-subject-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
  padding:10px;
  background:#fff;
  border:1px solid #cddce6;
  border-radius:10px;
  box-shadow:0 10px 28px rgba(6,40,77,.12);
}
.home-v15 .home-subject-card{
  min-width:0;
  min-height:194px;
  padding:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  color:#102f4b;
  background:#fff;
  border:1px solid #d9e4eb;
  border-radius:7px;
  text-decoration:none;
  box-shadow:none;
  transition:transform .16s ease,box-shadow .16s ease;
}
.home-v15 .home-subject-card:hover,
.home-v15 .home-subject-card:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(6,40,77,.12);
  color:#102f4b;
}
.home-v15 .subject-card-top{
  min-height:105px;
  padding:15px 12px 13px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#fff;
  text-align:center;
}
.home-v15 .subject-card-top svg{
  width:34px;
  height:34px;
  fill:none;
  stroke:#fff;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.home-v15 .subject-card-top strong{
  margin:0;
  color:#fff;
  font-size:15px;
  line-height:1.1;
}
.home-v15 .subject-card-bottom{
  position:relative;
  min-height:78px;
  padding:10px 28px 11px 12px;
  display:flex;
  align-items:flex-start;
  color:#37536a;
  background:#fff;
  font-size:11.5px;
  line-height:1.35;
}
.home-v15 .subject-card-bottom::after{
  content:"›";
  position:absolute;
  right:10px;
  bottom:8px;
  color:#0a5ca9;
  font-size:24px;
  line-height:1;
}
.home-v15 .home-subject-card--networking .subject-card-top{background:linear-gradient(150deg,#0874eb,#0a61cb)}
.home-v15 .home-subject-card--cabling .subject-card-top{background:linear-gradient(150deg,#18a44b,#108b3b)}
.home-v15 .home-subject-card--windows .subject-card-top{background:linear-gradient(150deg,#fb7b14,#e86400)}
.home-v15 .home-subject-card--exchange .subject-card-top{background:linear-gradient(150deg,#7452d0,#5d3ab8)}
.home-v15 .home-subject-card--security .subject-card-top{background:linear-gradient(150deg,#f13a36,#d9272d)}
.home-v15 .home-subject-card--cloud .subject-card-top{background:linear-gradient(150deg,#1ba9be,#118da8)}

/* Browse by role */
.home-v15 .browse-role{
  margin-top:18px;
}
.home-v15 .browse-role h2{
  margin:0 0 9px;
  color:#102f4b;
  font-size:19px;
  line-height:1.2;
}
.home-v15 .role-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.home-v15 .role-card{
  min-height:58px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px 14px;
  color:#14344e;
  background:#fff;
  border:1px solid #ccdbe5;
  border-radius:6px;
  text-decoration:none;
}
.home-v15 .role-card:hover,.home-v15 .role-card:focus-visible{background:#f5f9fc;color:#14344e}
.home-v15 .role-icon{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#0b72d9;
}
.home-v15 .role-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.home-v15 .role-card strong{display:block;font-size:13px;line-height:1.1}
.home-v15 .role-card small{display:block;margin-top:4px;color:#5e7486;font-size:10.5px;line-height:1.2}

/* Keep the homepage compact. Popular links remain available through subjects/search. */
.home-v15 .home-secondary-strip{padding:18px 0 30px;border-top:1px solid #edf2f5;background:#f8fafc}
.home-v15 .home-secondary-strip .container{display:flex;align-items:center;justify-content:space-between;gap:20px}
.home-v15 .home-secondary-strip p{margin:0;color:#5a7285;font-size:13px}
.home-v15 .home-secondary-strip a{font-weight:700;text-decoration:none}

@media(max-width:1180px){
  .home-v15 .header-main--v14{grid-template-columns:250px minmax(0,1fr) 205px}
  .home-v15 .primary-navigation--v14>a{min-width:67px;padding-inline:6px!important;font-size:10.5px!important}
  .home-v15 .header-search{width:192px}
  .home-v15 .home-subject-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .home-v15 .home-entry>.container{margin-top:-56px}
}
@media(max-width:1100px){
  .home-v15 .header-main--v14{width:min(calc(100% - 28px),1180px);grid-template-columns:1fr auto;min-height:70px}
  .home-v15 .brand--v14{width:max-content;height:70px;background:transparent;padding:0;color:#052a54}
  .home-v15 .brand--v14 .brand-name{color:#052a54;font-size:21px}
  .home-v15 .brand--v14 .brand-tagline{color:#1676b8}
  .home-v15 .header-search{display:none}
  .home-v15 .v15-hero,.home-v15 .v15-hero .container{min-height:360px}
  .home-v15 .v15-hero-copy{width:min(620px,72%);padding-bottom:82px}
}
@media(max-width:760px){
  .home-v15 .v15-hero{background-position:64% center}
  .home-v15 .v15-hero::before{background:linear-gradient(90deg,rgba(3,24,49,.98) 0%,rgba(3,31,60,.9) 60%,rgba(3,31,60,.5) 100%)}
  .home-v15 .v15-hero-copy{width:100%;padding:42px 0 68px}
  .home-v15 .v15-hero h1{font-size:40px;max-width:510px}
  .home-v15 .v15-hero p{font-size:16px;max-width:500px}
  .home-v15 .home-entry>.container{margin-top:-34px}
  .home-v15 .home-subject-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px}
  .home-v15 .role-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-v15 .home-secondary-strip .container{display:block}
  .home-v15 .home-secondary-strip a{display:inline-block;margin-top:8px}
}
@media(max-width:480px){
  .home-v15 .v15-hero,.home-v15 .v15-hero .container{min-height:390px}
  .home-v15 .v15-hero-copy{padding:40px 0 82px}
  .home-v15 .v15-hero h1{font-size:35px}
  .home-v15 .home-entry>.container{margin-top:-48px}
  .home-v15 .home-subject-grid{grid-template-columns:1fr}
  .home-v15 .home-subject-card{min-height:0}
  .home-v15 .subject-card-top{min-height:92px;flex-direction:row;justify-content:flex-start;text-align:left;padding:14px 16px}
  .home-v15 .subject-card-bottom{min-height:58px}
  .home-v15 .role-grid{grid-template-columns:1fr}
}

/* V15.1 global brand alignment: use the supplied logo on the homepage too. */
.home-v15 .brand--v14{
  width:250px!important;
  height:78px!important;
  padding:0!important;
  display:block!important;
  background:#fff url("../assets/netcomtech-logo.jpg") center/contain no-repeat!important;
}
.home-v15 .brand--v14 .brand-name,
.home-v15 .brand--v14 .brand-tagline{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
@media(max-width:1100px){
  .home-v15 .brand--v14{width:220px!important;height:60px!important;background-position:left center!important}
}
@media(max-width:520px){
  .home-v15 .brand--v14{width:190px!important;height:58px!important}
}