/* =============================================================================
   SERVICE PAGES (all 8): hero, meta chips, lists, steps, call-to-action, sticky Book/Call bar.
   Tokens, buttons, header links and Arabic fonts come from css/base.css. Page text: js/data/<service>.js
   ============================================================================= */
header{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;padding:1.2rem 0 .8rem}
.hero{padding:1.5rem 0 2rem}
.hero .tag{display:inline-block;background:var(--surface);border:1px solid var(--line);color:var(--pine);font-weight:600;font-size:.85rem;padding:.25rem .75rem;border-radius:999px;margin-bottom:.8rem}
.hero h1{font-size:clamp(1.9rem,5vw,2.6rem);font-weight:700;letter-spacing:-.02em}
.hero .lead{color:var(--muted);font-size:1.15rem;margin:.8rem 0 1.4rem;max-width:36rem}
.meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.meta span{font-size:.88rem;font-weight:600;color:var(--pine);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.2rem .75rem}
.btn.ghost{margin-inline-start:.4rem}
.actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
section{padding:2rem 0;border-top:1px solid var(--line)}
section h2{font-size:clamp(1.35rem,3.5vw,1.7rem);margin-bottom:1rem}
section p{color:var(--muted);margin:0 0 1rem}
.list{display:grid;gap:.7rem}
.list li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.9rem 1.1rem;font-weight:600}
.list li span{display:block;font-weight:400;color:var(--muted);font-size:.95rem;margin-top:.25rem}
.steps{display:grid;gap:1rem}
.step{display:flex;gap:1rem;align-items:flex-start}
.step .n{flex:none;width:2rem;height:2rem;border-radius:50%;background:var(--pine);color:var(--on-pine);display:grid;place-items:center;font-weight:700;font-size:.95rem}
.step h3{font-size:1.05rem;margin:0 0 .2rem}
.step p{margin:0;font-size:.98rem}
.cta{background:var(--pine);color:var(--on-pine);border-radius:18px;padding:1.6rem 1.4rem;text-align:center;margin:2rem 0 1rem}
.cta h2{color:var(--on-pine);margin-bottom:.5rem}
.cta p{color:rgba(242,245,243,.85);margin:0 0 1.1rem}
.cta .btn{background:var(--accent);color:#10241F}
footer{padding:1.5rem 0 5rem;color:var(--muted);font-size:.9rem;border-top:1px solid var(--line)}
.stick{display:flex;gap:.6rem;position:fixed;inset-inline:0;bottom:0;z-index:20;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom,0px));background:var(--card);border-top:1px solid var(--line);box-shadow:0 -10px 28px -14px rgba(0,0,0,.45);justify-content:center}
.stick a{flex:1;max-width:280px;text-align:center;font-weight:700;text-decoration:none;padding:.8rem 1.2rem;border-radius:999px;font-size:1rem}
.stick .sb{background:var(--accent);color:#10241F}
.stick .sc{background:var(--pine);color:var(--on-pine)}
@media (max-width:760px){.stick a{max-width:none;padding:.75rem .5rem}
.btn.ghost{margin-inline-start:0;margin-top:.3rem}}
.hero-top{display:flex;gap:1.4rem;align-items:center;margin-bottom:1.2rem}
.hero-img-wrap{flex:none;position:relative;width:132px;height:132px}
.hero-img-wrap::after{content:"";position:absolute;inset:-4px;border-radius:22px;border:2px solid var(--pine);opacity:.22;pointer-events:none}
.hero-img{display:block;width:100%;height:100%;border-radius:18px;object-fit:cover;object-position:center;background:var(--surface);box-shadow:0 14px 28px -12px rgba(16,36,31,.4),0 2px 6px rgba(16,36,31,.08)}
.hero-text{flex:1;min-width:0}
.hero-text .tag{margin-bottom:.5rem}
@media (max-width:480px){.hero-top{gap:1rem;align-items:flex-start}
.hero-img-wrap{width:96px;height:96px}
.hero-img-wrap::after{inset:-3px;border-radius:18px}
.hero-img{border-radius:14px}}