/* ==========================================================================
   Service-detail page layout — shared by English service pages and ALL /ar pages.
   Previously this lived inline inside service-detail-renderer.php, so the Arabic
   pages (which reuse these classes) rendered unstyled. Extracted to a real
   stylesheet so both locales load it.
   ========================================================================== */
:root{--p:#00bcd4;--pd:#0097a7;--bg:#000;--tw:#fff;--tm:rgba(255,255,255,.68);--muted:rgba(255,255,255,.48);--bs:rgba(255,255,255,.12)}
body.service-detail-page{background:radial-gradient(ellipse at 20% 50%,rgba(0,188,212,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(92,107,192,.06) 0%,transparent 40%),linear-gradient(180deg,#000 0%,#0a0a0a 100%);color:var(--tw)}
.service-hero{padding:8.5rem 0 4rem}
.service-hero-inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:2rem;align-items:center}
.service-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .9rem;border-radius:999px;border:1px solid rgba(0,188,212,.22);background:rgba(0,188,212,.1);color:var(--p);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
.service-hero h1{font-size:clamp(2.2rem,4vw,4.6rem);line-height:.95;margin:.75rem 0 1rem;text-transform:uppercase}
.service-hero p{max-width:47rem;color:var(--tm);font-size:1.06rem}
.service-hero-actions,.service-chips,.page-footer-cta{display:flex;flex-wrap:wrap;gap:.85rem}
.service-pill{display:inline-flex;align-items:center;gap:.45rem;padding:.75rem 1rem;border-radius:999px;border:1px solid var(--bs);background:rgba(255,255,255,.06);color:var(--tw);text-decoration:none;font-weight:700}
.service-pill.primary{background:linear-gradient(135deg,var(--p),var(--pd));color:#001113;border-color:transparent;box-shadow:0 12px 32px rgba(0,188,212,.22)}
.service-chips{margin-top:1.4rem}
.service-chip{padding:.45rem .7rem;border-radius:999px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.78);font-size:.84rem}
.hero-card{border:1px solid var(--bs);border-radius:1.25rem;overflow:hidden;background:rgba(255,255,255,.04);box-shadow:0 26px 80px rgba(0,0,0,.45)}
.hero-card img,.detail-visual img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.hero-card-caption{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.08)}
.hero-stat{padding:1rem;background:rgba(0,0,0,.72)}
.hero-stat strong{display:block;color:var(--p);font-size:1.1rem}.hero-stat span{display:block;color:var(--muted);font-size:.78rem;margin-top:.25rem}
.detail-band{padding:4rem 0;border-top:1px solid rgba(255,255,255,.07)}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(290px,.95fr);gap:2rem;align-items:center}
.detail-grid.reverse .detail-copy{order:2}.detail-grid.reverse .detail-visual{order:1}
.section-kicker{color:var(--p);text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;font-weight:800;margin-bottom:.75rem}
.detail-copy h2{font-size:clamp(1.8rem,2.8vw,3.4rem);line-height:1.02;text-transform:uppercase;margin:0 0 1rem}
.detail-copy p{color:var(--tm);font-size:1rem;line-height:1.75}.detail-copy ul{display:grid;gap:.75rem;margin:1.25rem 0 0;padding:0;list-style:none}
.detail-copy li{position:relative;padding-left:1.45rem;color:rgba(255,255,255,.78);line-height:1.6}.detail-copy li:before{content:"";position:absolute;left:0;top:.6rem;width:.45rem;height:.45rem;border-radius:50%;background:var(--p)}
.detail-visual{border:1px solid var(--bs);border-radius:1.1rem;overflow:hidden;background:rgba(255,255,255,.04)}
.faq-band{padding:4rem 0 5rem;border-top:1px solid rgba(255,255,255,.07)}
.faq-list{display:grid;gap:.75rem;margin-top:1.5rem}.faq-item{border:1px solid var(--bs);border-radius:.9rem;background:rgba(255,255,255,.04);overflow:hidden}
.faq-item summary{cursor:pointer;padding:1rem 1.15rem;font-weight:800;color:#fff}.faq-item summary::-webkit-details-marker{display:none}
.faq-item p{padding:0 1.15rem 1.1rem;margin:0;color:var(--tm);line-height:1.7}
.map-container iframe{display:block;width:100%;border:0}
@media (max-width:900px){.service-hero-inner,.detail-grid{grid-template-columns:1fr}.detail-grid.reverse .detail-copy,.detail-grid.reverse .detail-visual{order:initial}.service-hero{padding-top:7rem}.hero-card-caption{grid-template-columns:1fr}}