/* UTECH Single Service V2 — simplified content-first layout
   Shared header, footer, mobile navigation and global design remain frozen from Home V4.
*/

.service-single-page{background:var(--bg);color:var(--text)}
.service-single-page svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.service-single-page .eyebrow-fa{display:block;color:var(--blue);font-size:11.5px;font-weight:700;margin-bottom:10px}

/* Hero */
.service-simple-hero{
  position:relative;
  min-height:560px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#0b0f13;
  color:#fff
}
.service-simple-hero__media{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 60%
}
.service-simple-hero__overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(6,9,12,.78) 0%,rgba(6,9,12,.58) 45%,rgba(6,9,12,.20) 80%),
    linear-gradient(0deg,rgba(6,9,12,.42),transparent 48%)
}
.service-simple-hero__content{
  position:relative;
  z-index:2;
  width:100%;
  padding-top:calc(var(--header-h) + 32px);
  padding-bottom:32px;
}
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:10.8px;
  color:rgba(255,255,255,.66);
  margin-bottom:20px
}
.breadcrumb a{color:rgba(255,255,255,.78);transition:.2s}
.breadcrumb a:hover{color:#fff}
.service-simple-hero__copy{max-width:760px}
.service-simple-hero h1{
  font-size:clamp(34px,4.2vw,54px);
  line-height:1.55;
  margin:0 0 12px;
  font-weight:700;
  letter-spacing:-.45px
}
.service-simple-hero__copy p{
  max-width:680px;
  font-size:14px;
  line-height:2.05;
  color:rgba(255,255,255,.76);
  margin:0
}

/* Main editorial content */
.service-content-section{
  padding-top:52px;
  padding-bottom:86px
}
.service-content-wrap{
  display:block
}
.service-prose{
  width:100%;
  max-width:1280px;
  margin:0 auto
}
.service-prose h2{
  margin:0 0 22px;
  font-size:clamp(28px,3vw,39px);
  line-height:1.75;
  font-weight:700;
  color:var(--text)
}
.service-prose h3{
  margin:40px 0 10px;
  font-size:20px;
  line-height:1.9;
  font-weight:700;
  color:var(--text)
}
.service-prose p{
  margin:0 0 16px;
  font-size:13.6px;
  line-height:2.28;
  color:var(--muted)
}
.service-prose__cta{
  margin-top:38px;
  padding:21px 23px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface)
}
.service-prose__cta strong{
  display:block;
  margin-bottom:4px;
  color:var(--text);
  font-size:13px
}
.service-prose__cta span{
  display:block;
  color:var(--muted);
  font-size:11.5px;
  line-height:1.8
}

/* FAQ */
.faq-section{
  padding-top:84px;
  padding-bottom:86px;
  background:var(--surface)
}
.faq-grid{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:75px;
  align-items:start
}
.faq-intro h2{
  font-size:clamp(26px,2.5vw,36px);
  line-height:1.75;
  font-weight:700;
  margin:0;
  color:var(--text)
}
.faq-intro p{
  font-size:12.6px;
  line-height:2.05;
  color:var(--muted);
  margin:11px 0 0
}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:19px 2px;
  color:var(--text);
  font-size:12.8px;
  font-weight:700
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-chevron{
  position:relative;
  flex:0 0 20px;
  width:20px;height:20px;
  border:1px solid var(--line);
  border-radius:50%
}
.faq-chevron::before{
  content:"";
  position:absolute;
  width:5px;height:5px;
  left:6px;top:5px;
  border-left:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);
  transition:.2s;
  color:var(--blue)
}
.faq-item[open] .faq-chevron::before{
  top:7px;
  transform:rotate(135deg)
}
.faq-item>div{
  padding:0 2px 18px;
  max-width:850px
}
.faq-item p{
  margin:0;
  font-size:11.9px;
  line-height:2.05;
  color:var(--muted)
}

/* Related projects */
.related-projects{
  padding-top:88px;
  padding-bottom:90px
}
.related-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:28px;
  margin-bottom:28px
}
.related-heading h2{
  font-size:clamp(26px,2.5vw,36px);
  line-height:1.75;
  font-weight:700;
  margin:0;
  color:var(--text)
}
.text-link{
  display:inline-flex;
  gap:6px;
  align-items:center;
  color:var(--text);
  font-size:11.6px;
  font-weight:700
}
.text-link span{color:var(--blue)}
.text-link:hover{color:var(--blue)}
.related-project-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}
.related-project-card{
  position:relative;
  min-height:380px;
  border-radius:17px;
  overflow:hidden;
  color:#fff
}
.related-project-card img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .5s
}
.related-project-card:first-child img{object-position:center 64%}
.related-project-card:nth-child(2) img{object-position:center 52%}
.related-project-card__overlay{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(7,10,13,.80),rgba(7,10,13,.05) 68%)
}
.related-project-card>div{
  position:absolute;
  right:27px;left:27px;bottom:24px;
  z-index:2
}
.related-project-card>div>span{
  font-size:10.5px;
  color:#72c3df;
  font-weight:700
}
.related-project-card h3{
  font-size:22px;
  margin:4px 0 5px;
  color:#fff
}
.related-project-card small{
  font-size:10.5px;
  color:rgba(255,255,255,.70)
}
.related-project-card:hover img{transform:scale(1.035)}

/* Dark mode */
html[data-theme="dark"] .service-prose__cta{box-shadow:none}

/* Responsive */
@media(max-width:900px){
  .faq-grid{
    grid-template-columns:1fr;
    gap:30px
  }
}
@media(max-width:720px){
  .service-simple-hero{
    min-height:500px;
    padding-top:var(--header-h);
    align-items:center
  }
  .service-simple-hero__media{
    object-position:58% center
  }
  .service-simple-hero__overlay{
    background:linear-gradient(90deg,rgba(6,9,12,.84),rgba(6,9,12,.60))
  }
  .service-simple-hero__content{
    padding-top:22px;
    padding-bottom:22px
  }
  .breadcrumb{
    margin-bottom:16px;
    font-size:10px
  }
  .service-simple-hero h1{
    font-size:30px;
    line-height:1.65
  }
  .service-simple-hero__copy p{
    font-size:12.6px;
    line-height:2
  }

  .service-content-section{
    padding-top:38px;
    padding-bottom:64px
  }
  .service-prose h2{
    font-size:26px
  }
  .service-prose h3{
    font-size:18px;
    margin-top:32px
  }
  .service-prose p{
    font-size:12.5px;
    line-height:2.18
  }
  .service-prose__cta{
    margin-top:30px;
    padding:18px;
    flex-direction:column;
    align-items:stretch
  }
  .service-prose__cta .button{
    width:100%;
    justify-content:center
  }

  .faq-section{
    padding-top:62px;
    padding-bottom:64px
  }
  .faq-grid{
    gap:24px
  }
  .faq-intro h2,
  .related-heading h2{
    font-size:25px
  }
  .faq-item summary{
    font-size:12.2px;
    padding:17px 0
  }

  .related-projects{
    padding-top:62px;
    padding-bottom:64px
  }
  .related-heading{
    align-items:start;
    flex-direction:column;
    gap:12px
  }
  .related-project-grid{
    grid-template-columns:1fr
  }
  .related-project-card{
    min-height:315px;
    border-radius:14px
  }
}


/* V4: keep hero text away from the right viewport edge */
.service-simple-hero__content{
  padding-inline-start:clamp(34px,5vw,92px);
  padding-inline-end:clamp(34px,5vw,92px);
}
.service-simple-hero__copy{
  max-width:760px;
}
@media(max-width:720px){
  .service-simple-hero__content{
    padding-inline-start:20px;
    padding-inline-end:20px;
  }
}