/* ── SERVICE DETAIL PAGES (/services/<slug>/) ──
   Flat, operations-company look — deliberately distinct from the rest of
   the marketing site's material/glow treatment. Scoped under .service-page
   so none of this leaks into the homepage or legal pages. */

.service-page{
  --svc-navy:#061A2E;
  --svc-navy-mid:#103654;
  --svc-navy-light:#1D4E72;
  --svc-navy-deep:#04172A;
  --svc-gold:#C9A45C;
  --svc-gold-light:#E2C285;
  --svc-bg:#F4F5F7;
  --svc-hairline-1:#DFE4EB;
  --svc-hairline-2:#E3E7ED;
  --svc-hairline-3:#E6EAF0;
  --svc-text-lead:#3C4654;
  --svc-text-small:#67707E;
  --svc-label:#8A93A1;
  font-family:'Poppins',sans-serif;
  color:var(--svc-navy);
  background:var(--svc-bg);
}
[dir="rtl"] .service-page{font-family:'Cairo','Poppins',sans-serif;}

.service-page a{color:inherit;text-decoration:none;}
.service-page .svc-dot{color:var(--svc-gold);}

/* ── Eyebrow pills (light + dark variants share one shape) ── */
.service-page .svc-eyebrow-pill{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 18px;border-radius:999px;
  font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:#fff;border:1px solid var(--svc-hairline-1);color:var(--svc-navy);
}
.service-page .svc-eyebrow-dot{width:6px;height:6px;border-radius:999px;background:var(--svc-gold);flex:none;}
.service-page .svc-eyebrow-pill-dark{
  background:rgba(201,164,92,.16);border-color:rgba(201,164,92,.45);color:var(--svc-gold-light);
}
.service-page .svc-eyebrow-pill-dark .svc-eyebrow-dot{background:var(--svc-gold-light);}

/* ── Section 1 (light): hero + coverage share one padded shell ──
   The site's nav is position:fixed (floats over content, doesn't push it
   down — see main.css `nav{position:fixed;top:24px}`), so the top padding
   has to clear it itself — bumped past the spec's 104px for that reason,
   same as .hero/.legal-hero already do in main.css. */
.service-page .svc-light{padding:150px 64px 112px;background:var(--svc-bg);}
.service-page .svc-light-inner{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:88px;}

/* ── Hero row ── */
.service-page .svc-hero-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  gap:72px;align-items:center;
}
.service-page .svc-hero-left{display:flex;flex-direction:column;gap:26px;}
.service-page .svc-h1{
  font-size:clamp(34px,7vw,52px);line-height:1.06;font-weight:800;
  letter-spacing:-.03em;color:var(--svc-navy);margin:0;text-wrap:pretty;
}
.service-page .svc-lede{
  max-width:520px;font-size:17px;line-height:1.68;color:var(--svc-text-lead);margin:0;text-wrap:pretty;
}
.service-page .svc-chips{display:flex;flex-wrap:wrap;gap:10px;}
.service-page .svc-chip{
  padding:9px 16px;border-radius:999px;background:#fff;border:1px solid var(--svc-hairline-2);
  font-size:13.5px;font-weight:500;color:var(--svc-navy);
}

.service-page .svc-hero-media{
  width:100%;aspect-ratio:4/3;border-radius:24px;overflow:hidden;
  border:1px solid #DDE2E9;background:#E7EAEF;
}
.service-page .svc-hero-img{width:100%;height:100%;object-fit:cover;display:block;}

/* ── Coverage block ── */
.service-page .svc-coverage-block{display:flex;flex-direction:column;gap:40px;}
.service-page .svc-coverage-head{display:flex;flex-direction:column;gap:16px;}
.service-page .svc-label{
  font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--svc-label);
}
.service-page .svc-h2{
  font-size:36px;line-height:1.12;font-weight:800;letter-spacing:-.025em;color:var(--svc-navy);margin:0;text-wrap:pretty;
}
.service-page .svc-overview{max-width:560px;font-size:15.5px;line-height:1.7;color:var(--svc-text-small);margin:0;}

.service-page .svc-covers-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:20px;
}
.service-page .svc-cover-card{
  display:flex;flex-direction:column;gap:8px;
  padding:26px 24px 28px;border-radius:18px;background:#fff;border:1px solid var(--svc-hairline-3);
  transition:border-color .2s;
}
.service-page .svc-cover-card:hover{border-color:rgba(201,164,92,.6);}
.service-page .svc-cover-rule{width:26px;height:3px;border-radius:999px;background:var(--svc-gold);margin-bottom:6px;}
.service-page .svc-cover-title{font-size:17.5px;font-weight:700;letter-spacing:-.01em;color:var(--svc-navy);margin:0;}
.service-page .svc-cover-text{font-size:14.5px;line-height:1.65;color:var(--svc-text-small);margin:0;}

/* ── Section 2 (dark): "How it works" ── */
.service-page .svc-process{
  background:radial-gradient(120% 100% at 78% 12%,var(--svc-navy-light) 0%,var(--svc-navy-mid) 44%,var(--svc-navy-deep) 100%);
  padding:76px 64px 80px;
}
.service-page .svc-process-inner{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:52px;}
.service-page .svc-process-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;}
.service-page .svc-h2-light{
  font-size:clamp(30px,6vw,44px);line-height:1.08;font-weight:800;letter-spacing:-.03em;color:#fff;margin:0;
}
.service-page .svc-process-sub{font-size:16.5px;line-height:1.65;color:rgba(255,255,255,.72);margin:0;}

.service-page .svc-steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:28px;
}
.service-page .svc-step{display:flex;flex-direction:column;gap:18px;}
.service-page .svc-step-top{display:flex;align-items:center;gap:16px;}
.service-page .svc-step-num{font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--svc-gold);flex:none;}
.service-page .svc-step-rule{flex:1;height:1px;background:rgba(255,255,255,.22);}
.service-page .svc-step-rule-fade{background:linear-gradient(90deg,rgba(201,164,92,.6),rgba(201,164,92,0));}
.service-page .svc-step-title{font-size:18.5px;font-weight:700;letter-spacing:-.01em;color:#fff;}
.service-page .svc-step-body{font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.74);}

/* ── Bilingual content toggle — same pattern as the legal pages' .legal-en/.legal-ar,
   both languages render server-side and CSS shows the one matching <html lang>. ── */
html[lang="en"] .i18n-ar{display:none;}
html[lang="ar"] .i18n-en{display:none;}

/* ── RTL ── */
[dir="rtl"] .service-page .svc-eyebrow-pill,
[dir="rtl"] .service-page .svc-step-top{flex-direction:row-reverse;}

@media(max-width:700px){
  .service-page .svc-light{padding:110px 24px 72px;}
  .service-page .svc-process{padding:72px 24px;}
}