
.page-header-split{
  position:relative;
  overflow:hidden;
  padding:28px 0;
}

.page-header-split::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(22,34,79,0.78);
  z-index:1;
}

.page-header-split .split-img{
  position:absolute;
  inset:0;
}

.page-header-split .split-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.page-header-split .split-1{
  clip-path:polygon(0 0, 36% 0, 30% 100%, 0 100%);
}

.page-header-split .split-1 img{
  transform:scale(1.15) translateX(-8%);
}

.page-header-split .split-2{
  clip-path:polygon(36% 0, 70% 0, 64% 100%, 30% 100%);
}

.page-header-split .split-2 img{
  transform:scale(1);
}

.page-header-split .split-3{
  clip-path:polygon(70% 0, 100% 0, 100% 100%, 64% 100%);
}

.page-header-split .split-3 img{
  transform:scale(1.08) translateX(14%);
}

.page-header-split .wrap{
  position:relative;
  z-index:2;
}

.service{
  text-align:center;
}

.service h3{
  font-size:22px;
}

.service-img{
  aspect-ratio:1/1;
  max-width:240px;
  background:var(--grey-bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin:16px auto 20px;
  overflow:hidden;
  transition:box-shadow 0.25s ease;
}

.service:hover .service-img{
  box-shadow:var(--shadow-lg);
}


.service-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.service ul{
  list-style:disc;
  text-align:left;
  max-width:320px;
  margin:0 auto;
  padding-left:20px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.service ul li{
  color:var(--steel-light);
  font-size:14.5px;
}

#mech-gal-trigger{cursor:pointer;}

.view-more-hint{
  display:block;
  margin-top:16px;
  font-size:13px;
  font-weight:600;
  color:var(--blue-dark);
}

.media-modal{
  position:fixed;
  inset:0;
  z-index:2000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.media-modal.is-open{display:flex;}

.media-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(10,10,10,0.72);
}

.media-modal-panel{
  position:relative;
  background:var(--paper);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  max-width:920px;
  width:100%;
  max-height:88vh;
  overflow-y:auto;
  padding:32px;
}

.media-modal-close{
  position:absolute;
  top:14px;
  right:14px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--grey-bg);
  font-size:18px;
  line-height:1;
  cursor:pointer;
}

.media-modal-panel h3{
  font-size:20px;
  margin-bottom:20px;
  padding-right:40px;
}

.media-modal-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
}

.media-modal-grid video,
.media-modal-grid img{
  width:100%;
  border-radius:var(--radius-sm);
  display:block;
  background:#000;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}

.media-modal-grid img{
  height:220px;
  object-fit:cover;
}

.media-modal-grid video{
  max-width:260px;
  margin:0 auto;
  aspect-ratio:3/4;
  height:auto;
  object-fit:cover;
  object-position:center 70%;
}

.media-modal-grid video:hover,
.media-modal-grid img:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
}

@media (max-width:640px){
  .media-modal-grid{grid-template-columns:1fr;}
  .media-modal-panel{padding:22px;}
}

.process-list{
  counter-reset:step;
  margin-top:32px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:28px 38px;
}

.process-list li{
  list-style:none;
  position:relative;
  flex:0 0 calc((100% - 4*38px)/5);
  max-width:calc((100% - 4*38px)/5);
  background:var(--paper);
  border:1px solid rgba(28,32,35,0.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px 14px 18px;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}

.process-list li > div{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  width:100%;
}

.process-list li:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
}

.process-list li:not(:nth-child(5n)):not(:last-child)::after{
  content:'';
  position:absolute;
  top:50%;
  right:-24px;
  width:11px;
  height:11px;
  border-top:2.5px solid var(--blue-light);
  border-right:2.5px solid var(--blue-light);
  transform:translateY(-50%) rotate(45deg);
  pointer-events:none;
  z-index:1;
}

.process-list li::before{
  counter-increment:step;
  content:counter(step, decimal-leading-zero);
  font-family:'Oswald';
  color:var(--blue-dark);
  font-size:16px;
  font-weight:500;
  margin-bottom:8px;
}
.process-list li:nth-child(2n)::before{color:var(--blue);}

.process-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:78px;
  height:102px;
  margin-bottom:10px;
}
.process-icon img{width:100%; height:100%; object-fit:contain; object-position:0% center;}

.process-list h3{font-size:14.5px; margin-bottom:4px; font-weight:500;}
.process-list p{color:var(--steel-light); font-size:12.5px; line-height:1.45;}

@media (max-width:860px){
  .process-list{gap:24px 14px;}
  .process-list li{flex-basis:calc((100% - 2*14px)/3); max-width:calc((100% - 2*14px)/3);}
  .process-list li::after{display:none;}
}

@media (max-width:560px){
  .process-list li{flex-basis:calc((100% - 14px)/2); max-width:calc((100% - 14px)/2);}
}
