/* =========================================================
   ICODE MEDIA · HOME SPEED + SERVICES V6.2
   Goal: reduce first-load work and replace the tall list-style
   services section with a compact premium 4x2 capability board.
   ========================================================= */

/* HOME PERFORMANCE -------------------------------------------------- */

/* The old transparent blurred header is attractive, but forcing a
   live backdrop blur on every scroll frame is needlessly expensive. */
body:has(.v62-services) .cinema-header,
body:has(.v62-services) .cinema-header.scrolled{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:rgba(5,7,10,.975)!important;
}

/* Hero stays visually layered but no longer performs pointer-depth JS.
   Keep the static cards on the compositor and hide the 4th on phones. */
body:has(.v62-services) .v5-hero-shot{
  will-change:auto!important;
  transform:translate3d(0,0,0)!important;
  transition:none!important;
}
body:has(.v62-services) .v5-hero-shot img{
  transform:none!important;
  transition:none!important;
}

/* Stop the continuously-running ticker. Continuous CSS animation uses
   resources forever, even while nobody is emotionally invested in it. */
.v62-signal-strip{
  overflow:hidden;
}
.v62-signal-strip>div{
  animation:none!important;
  transform:none!important;
  width:100%!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:13px!important;
  padding:12px 20px!important;
}
.v62-signal-strip span{white-space:nowrap}
.v62-signal-strip b{opacity:.4}

/* Defer painting of below-the-fold sections until the browser gets
   close to them. Their layout reservation avoids jumping. */
body:has(.v62-services) .v5-work,
body:has(.v62-services) .v5-partners,
body:has(.v62-services) .v51-erp,
body:has(.v62-services) .v5-insights,
body:has(.v62-services) .v5-contact{
  content-visibility:auto;
  contain-intrinsic-size:auto 820px;
}
body:has(.v62-services) .v5-partners{
  contain-intrinsic-size:auto 1050px;
}
body:has(.v62-services) .v51-erp{
  contain-intrinsic-size:auto 900px;
}

/* Partner cards do not need 15 independent reveal animations. */
body:has(.v62-services) .v5-logo-mosaic figure{
  content-visibility:auto;
  contain:layout paint style;
}

/* Keep hover effects compositor-friendly. */
body:has(.v62-services) .work-fast-card,
body:has(.v62-services) .v62-service-card{
  backface-visibility:hidden;
  transform:translateZ(0);
}

/* NEW SERVICES SECTION ---------------------------------------------- */
.v62-services{
  padding-top:100px!important;
  padding-bottom:94px!important;
}
.v62-services-head{
  display:grid;
  grid-template-columns:1.15fr .55fr;
  gap:64px;
  align-items:end;
  padding-bottom:30px;
  border-bottom:1px solid var(--icode-line,rgba(255,255,255,.095));
}
.v62-services-head>div>span{
  display:block;
  color:var(--icode-copper,#dda06e);
  font-size:8px;
  font-weight:900;
  letter-spacing:.18em;
}
.v62-services-head h2{
  margin:12px 0 0;
  max-width:940px;
  font-size:clamp(50px,5.45vw,84px);
  line-height:.88;
  letter-spacing:-.065em;
}
.v62-services-head h2 em{
  color:var(--icode-copper,#dda06e);
  font-style:normal;
}
.v62-services-intro{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:start;
}
.v62-services-intro strong{
  color:var(--icode-copper,#dda06e);
  font-size:46px;
  line-height:.8;
  letter-spacing:-.06em;
}
.v62-services-intro p{
  margin:0;
  color:var(--icode-muted,#8f98a6);
  font-size:10px;
  line-height:1.7;
}

.v62-service-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:8px;
}
.v62-service-card{
  position:relative;
  min-height:270px;
  overflow:hidden;
  padding:17px;
  border:1px solid var(--icode-line,rgba(255,255,255,.095));
  border-radius:17px;
  background:
    radial-gradient(circle at 110% -10%,rgba(29,69,126,.13),transparent 42%),
    var(--icode-surface,#0b1016);
  color:var(--icode-ink,#f7f5f2);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  transition:transform .2s ease,border-color .2s ease,background-color .2s ease;
  contain:layout paint style;
}
.v62-service-card:before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-95px;
  bottom:-105px;
  border-radius:50%;
  background:rgba(221,160,110,.08);
  filter:blur(28px);
  opacity:0;
  transition:opacity .2s ease;
}
.v62-service-card:hover,
.v62-service-card:focus-visible{
  transform:translate3d(0,-4px,0);
  border-color:rgba(221,160,110,.42);
  background-color:var(--icode-surface-2,#101722);
}
.v62-service-card:hover:before,
.v62-service-card:focus-visible:before{
  opacity:1;
}
.v62-service-top{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
}
.v62-service-top small{
  color:#47515d;
  font-size:6px;
}
.v62-service-top span{
  color:#66717e;
  font-size:6px;
  letter-spacing:.13em;
}
.v62-service-top b{
  color:var(--icode-copper,#dda06e);
  font-size:13px;
  transition:transform .2s ease;
}
.v62-service-card:hover .v62-service-top b{
  transform:translate(3px,-3px);
}
.v62-service-code{
  position:relative;
  z-index:1;
  margin-top:34px;
  color:rgba(221,160,110,.15);
  font-size:52px;
  font-weight:1000;
  line-height:.78;
  letter-spacing:-.08em;
}
.v62-service-copy{
  position:relative;
  z-index:1;
  margin-top:auto;
}
.v62-service-copy h3{
  margin:0 0 9px;
  max-width:95%;
  font-size:20px;
  line-height:1;
  letter-spacing:-.04em;
}
.v62-service-copy p{
  display:-webkit-box;
  margin:0;
  overflow:hidden;
  color:#77818e;
  font-size:8px;
  line-height:1.55;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.v62-service-line{
  position:absolute;
  left:17px;
  right:17px;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,var(--icode-copper,#dda06e),transparent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
}
.v62-service-card:hover .v62-service-line,
.v62-service-card:focus-visible .v62-service-line{
  transform:scaleX(1);
}
.v62-services-bottom{
  min-height:58px;
  margin-top:8px;
  padding:0 16px;
  border:1px solid var(--icode-line,rgba(255,255,255,.095));
  border-radius:13px;
  background:#080c11;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
}
.v62-services-bottom>span{
  color:#56616e;
  font-size:7px;
  letter-spacing:.12em;
}
.v62-services-bottom>a{
  color:var(--icode-copper,#dda06e);
  font-size:8px;
  font-weight:900;
}

/* RESPONSIVE -------------------------------------------------------- */
@media(max-width:1120px){
  .v62-services-head{
    grid-template-columns:1fr .7fr;
    gap:35px;
  }
  .v62-service-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .v62-service-card{min-height:235px}
}
@media(max-width:700px){
  body:has(.v62-services) .v5-hero-shot.s4{
    display:none!important;
  }
  .v62-services{
    padding-top:72px!important;
    padding-bottom:70px!important;
  }
  .v62-services-head{
    grid-template-columns:1fr;
    gap:22px;
  }
  .v62-services-head h2{
    font-size:46px;
  }
  .v62-services-intro{
    grid-template-columns:54px 1fr;
  }
  .v62-services-intro strong{
    font-size:40px;
  }
  .v62-service-grid{
    grid-template-columns:1fr;
  }
  .v62-service-card{
    min-height:215px;
  }
  .v62-service-code{
    margin-top:23px;
    font-size:44px;
  }
  .v62-services-bottom{
    padding:13px;
    align-items:flex-start;
    flex-direction:column;
  }
  .v62-signal-strip>div{
    justify-content:flex-start!important;
    overflow-x:auto;
    flex-wrap:nowrap!important;
    scrollbar-width:none;
  }
  .v62-signal-strip>div::-webkit-scrollbar{display:none}
}
@media(prefers-reduced-motion:reduce){
  .v62-service-card,
  .v62-service-card:before,
  .v62-service-line,
  .v62-service-top b{
    transition:none!important;
  }
}