/* assets/service.css — the seven service pages (includes/service-page.php). Building blocks are in assets/ui.css. */
.sv-hero{padding:3.2rem 0 3rem}
.sv-hgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:center;position:relative;z-index:1}
.sv-back{display:block;width:max-content;font-size:.8rem;color:var(--muted2)!important;margin-bottom:1.1rem;transition:color .2s}
.sv-back:hover{color:#fff!important}
.sv-h1{font-size:clamp(2rem,4vw,3.2rem)}

/* Key facts card */
.sv-card{border-radius:18px;padding:1.5rem;background:linear-gradient(160deg,#1c2e47,#152033);border:1px solid rgba(0,194,255,.2);box-shadow:0 30px 80px rgba(0,0,0,.4)}
.sv-top{display:flex;align-items:center;gap:.8rem;padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid var(--border)}
.sv-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:linear-gradient(135deg,rgba(0,194,255,.14),rgba(123,47,190,.2));border:1px solid rgba(0,194,255,.25);box-shadow:0 0 30px rgba(0,194,255,.12);flex-shrink:0}
.sv-name{font-family:"Syne",sans-serif;font-weight:700;font-size:1.05rem}
.sv-price{display:flex;flex-direction:column;margin-bottom:1rem}
.sv-price small{color:var(--muted2);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em}
.sv-price b{font-family:"Syne",sans-serif;font-size:2.4rem;font-weight:800;line-height:1.1}
.sv-price b.sv-tail{font-size:1.4rem;padding:.2rem 0}
.sv-price span{color:var(--muted);font-size:.8rem}
.sv-facts{list-style:none;margin:0 0 1.1rem;padding:0;display:flex;flex-direction:column;gap:.5rem}
.sv-facts li{display:flex;align-items:baseline;gap:.7rem;padding:.65rem .8rem;border-radius:11px;background:#101c2d;border:1px solid var(--border)}
.sv-facts b{font-family:"Syne",sans-serif;font-size:.95rem;color:var(--cyan);white-space:nowrap}
.sv-facts span{color:var(--muted2);font-size:.8rem}

/* What's included */
.sv-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2.4rem}
.sv-feat{display:flex;flex-direction:column;background:var(--card-solid);border:1px solid var(--border);border-radius:14px;padding:1.4rem;transition:border-color .25s}
.sv-feat:hover{border-color:rgba(0,194,255,.35)}
.sv-feat h3{font-family:"Syne",sans-serif;font-size:.98rem;margin-bottom:.4rem}
.sv-feat p{color:var(--muted2);font-size:.83rem;line-height:1.65;flex:1}
.sv-feat .h-more{margin-top:.8rem}

/* Related services */
.sv-rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2.2rem}
.sv-relc{display:flex;align-items:center;gap:.9rem;padding:1.1rem 1.2rem;border-radius:14px;background:var(--card-solid);border:1px solid var(--border);transition:border-color .25s}
.sv-relc:hover{border-color:rgba(0,194,255,.35)}
.sv-relc .h-ci{margin:0;flex-shrink:0}
.sv-relc b{display:block;font-family:"Syne",sans-serif;font-size:.92rem;margin-bottom:.15rem}
.sv-relc small{display:block;color:var(--muted2);font-size:.76rem;line-height:1.5}
.sv-relc i{margin-left:auto;font-style:normal;color:var(--cyan);font-size:1.1rem;transition:transform .2s}
.sv-relc:hover i{transform:translateX(4px)}
.sv-all{margin-top:1.4rem}

/* What you can do with it (optional section) */
.sv-uses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2.4rem}
.sv-use{display:flex;flex-direction:column;background:linear-gradient(160deg,rgba(0,194,255,.07),rgba(123,47,190,.1)),var(--card-solid);border:1px solid rgba(0,194,255,.18);border-radius:16px;padding:1.6rem}
.sv-use h3{font-family:"Syne",sans-serif;font-size:1.1rem;margin-bottom:.45rem}
.sv-use p{color:var(--muted2);font-size:.85rem;line-height:1.65;margin-bottom:1rem}
.sv-use ul{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.sv-use li{position:relative;padding-left:1.3rem;font-size:.82rem;line-height:1.5;color:#dbe6f3}
.sv-use li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}

/* Promise (optional section) */
.sv-promise{display:grid;grid-template-columns:.9fr 1.1fr;gap:2.4rem;align-items:center;border-radius:20px;padding:2.4rem;background:linear-gradient(150deg,rgba(0,229,160,.1),rgba(0,194,255,.07) 45%,rgba(123,47,190,.14)),var(--card-solid);border:1px solid rgba(0,229,160,.28)}
.sv-ptext .h-h2{margin-bottom:.9rem}
.sv-ptext p{color:#dbe6f3;font-size:.98rem;line-height:1.75}
.sv-ppts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.sv-ppts li{display:flex;gap:.9rem;align-items:flex-start;padding:.9rem 1rem;border-radius:13px;background:rgba(8,16,28,.55);border:1px solid var(--border)}
.sv-ppts li>span{font-size:1.2rem;line-height:1.3;flex-shrink:0}
.sv-ppts b{display:block;font-family:"Syne",sans-serif;font-size:.92rem;margin-bottom:.15rem}
.sv-ppts div{color:var(--muted2);font-size:.83rem;line-height:1.6}

/* Case studies (optional section) */
.sv-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2.2rem}
.sv-case{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--card-solid);border:1px solid var(--border);transition:border-color .25s}
.sv-case:hover{border-color:rgba(0,194,255,.35)}
.sv-cimg{display:block;aspect-ratio:16/8;overflow:hidden;border-bottom:1px solid var(--border)}
.sv-cimg img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.sv-cbody{display:flex;flex-direction:column;flex:1;padding:1.1rem 1.2rem 1.2rem}
.sv-cbody small{color:var(--cyan);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.3rem}
.sv-cbody b{font-family:"Syne",sans-serif;font-size:.95rem;line-height:1.35;flex:1}
.sv-cbody i{font-style:normal;color:var(--cyan);font-size:.8rem;font-weight:600;margin-top:.8rem}

@media(max-width:980px){
  .sv-hgrid{grid-template-columns:1fr;gap:2rem}
  .sv-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-rel{grid-template-columns:1fr}
  .sv-uses,.sv-cases,.sv-promise{grid-template-columns:1fr}
  .sv-promise{gap:1.6rem;padding:1.6rem}
}
@media(max-width:560px){
  .sv-hero{padding:2rem 0 2.2rem}
  .sv-feats{grid-template-columns:1fr}
  .sv-facts li{flex-direction:column;gap:.1rem}
}