/* ============================================================
   Service detail pages — layered on top of styles-new.css
   ============================================================ */

/* ---- hero ---- */
.svc-hero{
  padding:120px 0 56px;
  background:var(--light);
  border-bottom:1px solid var(--border);
}
.svc-crumb{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:.82rem;color:var(--gray);margin-bottom:26px;
}
.svc-crumb a{color:var(--gray);transition:var(--trans)}
.svc-crumb a:hover{color:var(--accent-text)}
.svc-crumb strong{color:var(--navy);font-weight:600}

.svc-hero-grid{
  display:grid;grid-template-columns:1fr 420px;gap:48px;align-items:center;
}
.svc-hero h1{
  font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;
  color:var(--navy);line-height:1.2;margin-bottom:14px;letter-spacing:-.01em;
}
.svc-tagline{
  font-size:1.02rem;line-height:1.75;color:var(--gray);margin-bottom:28px;max-width:52ch;
}
.svc-hero-btns{display:flex;gap:12px;flex-wrap:wrap}
/* the shared .btn-ghost is built for dark sections — restyle it for this light hero
   (the dark .svc-cta band below keeps the original treatment) */
.svc-hero .btn-ghost{
  background:var(--white);color:var(--navy);
  border:1.5px solid var(--border);
}
.svc-hero .btn-ghost:hover{
  background:var(--white);color:var(--accent-text);
  border-color:var(--accent-text);
}
.svc-hero-img img{
  width:100%;height:auto;display:block;
  border-radius:var(--radius2);box-shadow:var(--shadow2);
}

/* ---- body ---- */
.svc-body{padding:64px 0 72px;background:var(--white)}
.svc-cols{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:start}

.svc-intro{
  font-size:1.05rem;line-height:1.85;color:var(--text);
  margin-bottom:40px;padding-bottom:32px;border-bottom:1px solid var(--border);
}
.svc-main h2{
  font-size:1.35rem;font-weight:700;color:var(--navy);
  margin:40px 0 18px;letter-spacing:-.01em;
}
.svc-main h2:first-of-type{margin-top:0}

.svc-list{display:flex;flex-direction:column;gap:12px}
.svc-list li{
  display:flex;gap:12px;align-items:flex-start;
  font-size:.96rem;line-height:1.7;color:var(--text);
}
.svc-list li i{color:var(--accent-text);font-size:1.05rem;margin-top:.28em;flex-shrink:0}

.svc-steps{counter-reset:s;display:flex;flex-direction:column;gap:14px;padding-left:0}
.svc-steps li{
  counter-increment:s;position:relative;padding-left:46px;
  font-size:.96rem;line-height:1.7;color:var(--text);min-height:32px;
  display:flex;align-items:center;
}
.svc-steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:0;
  width:32px;height:32px;border-radius:9px;
  background:var(--version-soft,rgba(0,180,216,.10));
  color:var(--accent-text);
  font-size:.8rem;font-weight:700;font-family:'Inter',sans-serif;
  display:flex;align-items:center;justify-content:center;
}

.svc-stack{display:flex;flex-wrap:wrap;gap:8px}

/* ---- FAQ ---- */
.svc-faq{display:flex;flex-direction:column;gap:10px}
.svc-faq details{
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--white);overflow:hidden;transition:var(--trans);
}
.svc-faq details[open]{border-color:var(--accent-text);box-shadow:var(--shadow)}
.svc-faq summary{
  padding:16px 46px 16px 18px;cursor:pointer;position:relative;
  font-size:.95rem;font-weight:600;color:var(--navy);list-style:none;
}
.svc-faq summary::-webkit-details-marker{display:none}
.svc-faq summary::after{
  content:'';position:absolute;right:20px;top:50%;
  width:8px;height:8px;margin-top:-6px;
  border-right:2px solid var(--gray);border-bottom:2px solid var(--gray);
  transform:rotate(45deg);transition:transform .3s var(--ease-out,ease);
}
.svc-faq details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.svc-faq details > div{
  padding:0 18px 18px;font-size:.93rem;line-height:1.8;color:var(--gray);
}

/* ---- sidebar ---- */
.svc-side{position:sticky;top:110px;display:flex;flex-direction:column;gap:18px}
.svc-card{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius2);padding:26px 24px;box-shadow:var(--shadow);
}
.svc-card h3{font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:10px}
.svc-card p{font-size:.9rem;line-height:1.75;color:var(--gray);margin-bottom:18px}
.svc-card-contact{
  display:flex;flex-direction:column;gap:9px;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--border);
}
.svc-card-contact a{
  display:flex;align-items:center;gap:9px;
  font-size:.88rem;color:var(--text);transition:var(--trans);
}
.svc-card-contact a:hover{color:var(--accent-text)}
.svc-card-contact i{color:var(--accent-text);width:16px}

.svc-other a{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;border-radius:10px;
  font-size:.9rem;font-weight:500;color:var(--text);
  transition:var(--trans);
}
.svc-other a:hover{background:var(--version-hover,rgba(21,101,192,.06));color:var(--accent-text)}
.svc-other a i{color:var(--accent-text);width:18px;text-align:center}

/* ---- bottom CTA ---- */
.svc-cta{
  padding:72px 0;text-align:center;
  background:var(--version-hero-bg,linear-gradient(135deg,#060E1F,#0f4c8a));
  color:var(--white);
}
.svc-cta h2{
  font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700;
  color:var(--white);margin-bottom:12px;
}
.svc-cta p{
  font-size:1rem;line-height:1.75;color:rgba(255,255,255,.72);
  max-width:56ch;margin:0 auto 28px;
}

/* ---- responsive ---- */
@media(max-width:1024px){
  .svc-hero-grid{grid-template-columns:1fr;gap:34px}
  .svc-cols{grid-template-columns:1fr;gap:44px}
  .svc-side{position:static}
}
@media(max-width:768px){
  .svc-hero{padding:100px 0 44px}
  .svc-body{padding:48px 0 56px}
  .svc-main h2{font-size:1.2rem;margin:32px 0 14px}
  .svc-cta{padding:56px 0}
}