/*
 * Net-One Blue Vision 1.1.0
 * Original design built only from Net-One assets and copy.
 */

:root{
  --vision-navy:#061d4f;
  --vision-blue:#0a47b7;
  --vision-bright:#1768e5;
  --vision-ice:#eef4ff;
  --vision-white:#fff;
}

/* Stronger but restrained interaction throughout the site. */
.btn{position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(3,33,92,.16);transition:transform .22s ease,box-shadow .22s ease,background .22s ease}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);box-shadow:0 14px 34px rgba(3,33,92,.24)}

/* Home header floats over Mount Iwaki. Other pages keep the established header. */
.home .site-header{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:100;
  color:#fff;
  background:linear-gradient(180deg,rgba(2,13,39,.78),rgba(2,13,39,.24) 72%,transparent);
  border:0;
}
.home.admin-bar .site-header{top:32px}
.home .header-inner{max-width:1320px;height:108px;padding:18px 38px}
.home .brand{min-width:270px}
.home .brand img{width:56px;height:56px;border-radius:0;background:transparent;box-shadow:none}
.home .brand-name{color:#fff;font-size:29px;text-shadow:0 2px 10px rgba(0,0,0,.42)}
.home .brand-tag{color:rgba(255,255,255,.8);font-size:8px;letter-spacing:.04em}
.home .nav{gap:30px}
.home .nav a{color:#fff;text-shadow:0 1px 7px rgba(0,0,0,.45);letter-spacing:.02em}
.home .nav a:not(.contact-link)::after{content:"";position:absolute;left:0;right:100%;bottom:20px;height:2px;background:#fff;transition:right .22s ease}
.home .nav a:not(.contact-link):hover::after,.home .nav a:not(.contact-link):focus-visible::after{right:0}
.home .nav .hiring-nav{background:transparent;color:#fff;border:0;backdrop-filter:none}
.home .nav .contact-link{background:#fff;color:var(--vision-navy)!important;text-shadow:none;padding:13px 20px}

/* Cinematic home hero. */
.home .hero{
  min-height:min(830px,92vh);
  background-image:url('assets/hero.jpg');
  background-position:center center;
  isolation:isolate;
}
.home .hero::before{
  z-index:-2;
  background-image:url('assets/hero.jpg');
  background-position:center center;
  background-size:cover;
  filter:saturate(1.05) contrast(1.03);
}
.home .hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(2,18,54,.78) 0%,rgba(3,27,76,.5) 42%,rgba(2,25,65,.08) 74%),linear-gradient(0deg,rgba(1,14,40,.2),transparent 50%);
}
.home .hero-inner{max-width:1320px;padding:170px 52px 92px;display:flex;align-items:center}
.home .hero-copy{max-width:850px}
.home .hero-copy::before{content:"NETWORK & COMMUNICATION SOLUTIONS";display:block;color:#fff;font-size:12px;font-weight:800;letter-spacing:.22em;margin-bottom:25px;padding-left:55px;position:relative}
.home .hero-copy::after{content:"";position:absolute;width:38px;height:2px;background:#4f91ff;left:0;top:8px}
.home .hero h1{color:#fff;font-size:clamp(42px,4.45vw,64px);line-height:1.32;letter-spacing:.015em;margin-bottom:24px;text-shadow:0 5px 22px rgba(0,0,0,.35);white-space:normal}
.home .hero p{font-size:17px;letter-spacing:.035em;line-height:1.9;max-width:590px;margin:0 0 34px;color:#fff!important}
.home .hero .btn{background:linear-gradient(135deg,#0a47b7,#1768e5);font-size:16px;padding:17px 30px;border-radius:2px;box-shadow:0 14px 35px rgba(2,26,72,.34)}

/* Recruitment becomes an editorial split panel. */
.home .top-recruit{background:#fff;border:0;position:relative}
.home .top-recruit-inner{max-width:none;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:stretch}
.home .top-recruit-photo{border-radius:0;background:#edf3ff;min-height:610px;overflow:hidden}
.home .top-recruit-photo img{width:100%;height:100%;min-height:610px;aspect-ratio:auto;border-radius:0;object-fit:cover;object-position:right center;transform:none;transition:filter .45s ease}
.home .top-recruit:hover .top-recruit-photo img{transform:none;filter:saturate(1.04)}
.home .top-recruit-copy{background:linear-gradient(145deg,var(--vision-navy),#0a3281);color:#fff;padding:90px clamp(44px,7vw,110px);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.home .top-recruit-copy::after{content:"RECRUIT";position:absolute;right:-18px;bottom:-48px;color:rgba(255,255,255,.045);font-weight:900;font-size:150px;letter-spacing:.03em;line-height:1}
.home .top-recruit-kicker{color:#80b1ff;font-size:12px;letter-spacing:.18em;margin-bottom:18px;position:relative;z-index:1}
.home .top-recruit-copy h2{color:#fff;font-size:clamp(30px,3vw,48px);line-height:1.45;margin-bottom:20px;position:relative;z-index:1}
.home .top-recruit-copy>p:not(.top-recruit-kicker){color:rgba(255,255,255,.82);line-height:2;max-width:610px;position:relative;z-index:1}
.home .top-recruit-points{gap:1px;background:rgba(255,255,255,.17);margin:30px 0;position:relative;z-index:1}
.home .top-recruit-points span{background:rgba(255,255,255,.07);border:0;padding:17px 16px;backdrop-filter:blur(3px)}
.home .top-recruit-points small{color:rgba(255,255,255,.62)}
.home .top-recruit-points strong{color:#fff;font-size:15px}
.home .top-recruit-actions{position:relative;z-index:1}
.home .top-recruit-actions .btn{background:#fff;color:var(--vision-navy);border-radius:2px;padding:16px 25px}
.home .top-recruit-link{color:#fff;text-decoration-color:rgba(255,255,255,.5)}

/* Image-led services. */
.home .container:has(.service-grid){max-width:none;padding:100px max(24px,calc((100vw - 1280px)/2)) 110px;background:#f5f7fb}
.home .container:has(.service-grid) .section-title{font-size:clamp(30px,3.5vw,46px);color:var(--vision-navy);margin-bottom:48px;letter-spacing:.035em}
.home .container:has(.service-grid) .section-title::before{content:"OUR SERVICES";display:block;color:var(--vision-blue);font-size:12px;letter-spacing:.2em;margin-bottom:10px}
.home .service-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:290px;gap:15px}
.home .mini-card{position:relative;isolation:isolate;overflow:hidden;border:0;border-radius:0;min-height:0;padding:28px;color:#fff;text-align:left;display:flex;flex-direction:column;justify-content:flex-end;background-position:center;background-size:cover;box-shadow:0 12px 30px rgba(3,22,59,.1)}
.home .mini-card:nth-child(1){grid-column:span 3;background-image:url('assets/fiber-work.jpg')}
.home .mini-card:nth-child(2){grid-column:span 3;background-image:url('assets/lan.jpg')}
.home .mini-card:nth-child(3){grid-column:span 2;background-image:url('assets/wifi.jpg')}
.home .mini-card:nth-child(4){grid-column:span 2;background-image:url('assets/phone.jpg')}
.home .mini-card:nth-child(5){grid-column:span 2;background-image:url('assets/camera.jpg')}
.home .mini-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(1,15,45,.88),rgba(4,31,77,.12) 72%);transition:background .3s ease}
.home .mini-card::after{content:"";position:absolute;inset:0;z-index:-2;background:inherit;background-position:center;background-size:cover;transition:transform .55s ease}
.home .mini-card:hover,.home .mini-card:focus-visible{transform:translateY(-4px);border:0;box-shadow:0 18px 38px rgba(2,24,66,.22)}
.home .mini-card:hover::before,.home .mini-card:focus-visible::before{background:linear-gradient(0deg,rgba(3,29,78,.96),rgba(4,47,119,.2) 78%)}
.home .mini-icon{display:none}
.home .mini-card h3{color:#fff;font-size:21px;margin:0 0 8px;line-height:1.5}
.home .mini-card p{color:rgba(255,255,255,.78);font-size:13px;max-width:420px}
.home .card-more{color:#fff;font-size:12px;letter-spacing:.04em;margin-top:14px}

/* Reveal rhythm. */
.home .service-grid .mini-card.motion-ready{opacity:0;transform:translateY(30px);transition:opacity .7s var(--reveal-delay,0ms) ease,transform .7s var(--reveal-delay,0ms) ease,box-shadow .25s ease}
.home .service-grid .mini-card.motion-ready.is-visible{opacity:1;transform:none}
.home .top-recruit.motion-ready{transform:translateY(0);clip-path:inset(0 0 12% 0);transition:opacity .8s ease,clip-path .8s ease}
.home .top-recruit.motion-ready.is-visible{clip-path:inset(0)}

@media(max-width:1000px){
  .home .header-inner{padding-left:24px;padding-right:24px}
  .home .nav{gap:16px}
  .home .top-recruit-copy{padding:64px 42px}
  .home .top-recruit-photo,.home .top-recruit-photo img{min-height:540px}
}

@media(max-width:820px){
  .home .site-header{position:absolute;background:linear-gradient(180deg,rgba(2,13,39,.72),transparent)}
  .home.admin-bar .site-header{top:46px}
  .home .header-inner{min-height:88px;padding:13px 20px}
  .home .brand img{width:48px;height:48px}
  .home .brand-name{font-size:24px}
  .home .menu-toggle{display:block;background:#fff;color:var(--vision-navy);padding:12px 18px}
  .home .nav{background:#fff;padding:12px 20px 20px;box-shadow:0 15px 35px rgba(2,20,54,.18)}
  .home .nav a,.home .nav .hiring-nav{color:var(--vision-navy);text-shadow:none;background:#fff;border-radius:0}
  .home .nav .contact-link{background:var(--vision-blue);color:#fff!important}
  .home .hero{min-height:760px;background-position:59% center}
  .home .hero::before{background-position:59% center}
  .home .hero::after{background:linear-gradient(90deg,rgba(2,18,54,.76),rgba(3,27,76,.27) 74%),linear-gradient(0deg,rgba(1,14,40,.24),transparent 58%)}
  .home .hero-inner{padding:160px 28px 75px;align-items:flex-end}
  .home .hero h1{font-size:clamp(37px,7vw,53px)}
  .home .hero-copy{max-width:680px}
  .home .top-recruit-inner{grid-template-columns:1fr}
  .home .top-recruit-photo,.home .top-recruit-photo img{min-height:430px;height:430px}
  .home .top-recruit-photo img{object-position:right center}
  .home .top-recruit-copy{padding:58px 32px 66px}
  .home .service-grid{grid-template-columns:1fr 1fr;grid-auto-rows:270px}
  .home .mini-card:nth-child(n){grid-column:span 1}
  .home .mini-card:nth-child(1){grid-column:1/-1}
}

@media(max-width:600px){
  .home.admin-bar .site-header{top:0}
  .home .header-inner{min-height:80px;padding:11px 16px}
  .home .brand{min-width:0}
  .home .brand img{width:45px;height:45px;margin-right:8px}
  .home .brand-name{font-size:22px}
  .home .brand-tag{font-size:6px}
  .home .menu-toggle{font-size:12px;padding:11px 15px}
  .home .hero{min-height:680px;background-position:62% center}
  .home .hero::before{background-position:62% center}
  .home .hero-inner{padding:132px 22px 62px}
  .home .hero-copy::before{font-size:9px;letter-spacing:.14em;padding-left:38px;margin-bottom:18px}
  .home .hero-copy::after{width:27px;top:6px}
  .home .hero h1{font-size:clamp(30px,9vw,40px);line-height:1.45;letter-spacing:0;white-space:normal}
  .home .hero p{font-size:14px;line-height:1.85;margin-bottom:27px}
  .home .hero .btn{font-size:15px;padding:15px 22px}
  .home .top-recruit-photo,.home .top-recruit-photo img{height:350px;min-height:350px}
  .home .top-recruit-photo img{object-position:right center}
  .home .top-recruit-copy{padding:48px 20px 58px}
  .home .top-recruit-copy h2{font-size:29px}
  .home .top-recruit-copy::after{font-size:84px;bottom:-20px}
  .home .top-recruit-points{grid-template-columns:1fr;background:rgba(255,255,255,.12)}
  .home .top-recruit-points span{display:grid;grid-template-columns:65px 1fr}
  .home .container:has(.service-grid){padding:64px 16px 84px}
  .home .container:has(.service-grid) .section-title{font-size:29px;margin-bottom:30px}
  .home .service-grid{grid-template-columns:1fr;grid-auto-rows:245px;gap:12px}
  .home .mini-card:nth-child(n){grid-column:1/-1}
  .home .mini-card{padding:23px}
  .home .mini-card h3{font-size:19px}
  .home .hero::before{animation:mobile-iwaki-drift 14s ease-in-out infinite alternate;will-change:transform}
  .home .hero-copy::before{animation:mobile-copy-in .7s .12s ease-out both}
  .home .container:has(.service-grid) .section-title.motion-ready{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
  .home .container:has(.service-grid) .section-title.motion-ready.is-visible{opacity:1;transform:none}
  .home .top-recruit-photo.motion-ready{opacity:0;transform:translateX(-24px);transition:opacity .75s ease,transform .75s ease}
  .home .top-recruit-copy.motion-ready{opacity:0;transform:translateX(24px);transition:opacity .75s .08s ease,transform .75s .08s ease}
  .home .top-recruit-photo.motion-ready.is-visible,.home .top-recruit-copy.motion-ready.is-visible{opacity:1;transform:none}
  .home .top-recruit-photo.motion-ready.is-visible img{animation:mobile-recruit-photo 11s ease-in-out infinite alternate;transform-origin:right center;will-change:transform}
  .home .top-recruit-copy.motion-ready.is-visible .top-recruit-kicker{animation:mobile-recruit-copy .55s .18s ease-out both}
  .home .top-recruit-copy.motion-ready.is-visible h2{animation:mobile-recruit-copy .65s .28s ease-out both}
  .home .top-recruit-copy.motion-ready.is-visible>p:not(.top-recruit-kicker){animation:mobile-recruit-copy .65s .38s ease-out both}
  .home .top-recruit-copy.motion-ready.is-visible .top-recruit-points{animation:mobile-recruit-copy .65s .48s ease-out both}
  .home .top-recruit-copy.motion-ready.is-visible .top-recruit-actions{animation:mobile-recruit-copy .65s .58s ease-out both}
}

@keyframes mobile-iwaki-drift{from{transform:scale(1.03) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(-1.8%,0,0)}}
@keyframes mobile-copy-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes mobile-recruit-photo{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.045) translate3d(-1.2%,0,0)}}
@keyframes mobile-recruit-copy{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .home .top-recruit-photo img,.home .service-grid .mini-card{transition:none}
  .home .service-grid .mini-card.motion-ready{opacity:1;transform:none}
  .home .top-recruit.motion-ready{opacity:1;clip-path:none}
  .home .hero-copy::before,.home .container:has(.service-grid) .section-title.motion-ready,.home .top-recruit-photo.motion-ready,.home .top-recruit-copy.motion-ready,.home .top-recruit-photo.motion-ready.is-visible img,.home .top-recruit-copy.motion-ready.is-visible .top-recruit-kicker,.home .top-recruit-copy.motion-ready.is-visible h2,.home .top-recruit-copy.motion-ready.is-visible>p:not(.top-recruit-kicker),.home .top-recruit-copy.motion-ready.is-visible .top-recruit-points,.home .top-recruit-copy.motion-ready.is-visible .top-recruit-actions{animation:none;opacity:1;transform:none;transition:none}
}