/* ===== Service landing pages =====
   Loaded after refined.css on /services/<slug>/ only. Everything shared —
   header, utility strip, cards, process steps, FAQ, contact, footer, the
   WhatsApp pill — comes from the homepage's own <style> block and
   refined.css. This file only covers what those pages do not have. */

/* Hero: single column, no artwork panel. */
.hero.hero--service{
  grid-template-columns:1fr !important;
  min-height:auto !important;
  max-width:820px;
  padding-block:44px 52px !important;
}
.hero--service h1{font-size:clamp(36px,4.2vw,54px);max-width:720px}
.hero--service .lede{max-width:640px}
.hero--service .actions{gap:14px;flex-wrap:wrap}
.hero--service .actions .btn{background:transparent;color:#fff;border:1px solid #76918A}
.hero--service .actions .btn.primary{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}

/* Breadcrumb sits above the eyebrow, inside the dark hero. */
.crumb{display:flex;gap:10px;align-items:center;font-size:12.5px;color:#CBD9D3;margin-bottom:22px;flex-wrap:wrap}
.crumb a{color:#CBD9D3;text-decoration:none;border-bottom:1px solid rgba(203,217,211,.35)}
.crumb a:hover{color:#fff;border-color:#fff}
.crumb span[aria-current]{color:#fff;font-weight:600}

/* Uniform section rhythm on these pages. */
.svc-section{padding-block:56px}
.svc-section h2{font-size:34px;line-height:1.15;margin:8px 0 22px;max-width:640px}
.process-shell.svc-section{padding-block:56px}
.process-shell.svc-section h2{margin-bottom:26px}

/* "Is this you?" reuses the homepage .questions list; give it a width cap. */
#signs ul.questions{max-width:760px}

/* What is included: card grid. */
.inc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.inc{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px}
.inc h3{font-size:17px;margin:0 0 6px;letter-spacing:-.01em}
.inc p{font-size:14.5px;line-height:1.5;color:var(--muted);margin:0}

/* Related services: reuse the homepage card grid; titles are links. */
.services--related .service h3 a{color:inherit;text-decoration:none}
.services--related .service h3 a:hover{text-decoration:underline}
.services--related .service p{font-size:14px}

/* FAQ on these pages is a plain 2-col block; the homepage version is
   styled by refined.css already, this only ensures the grid holds. */
.faq.svc-section{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:start}
.faq.svc-section details{border-top:1px solid var(--line);padding:14px 0}
.faq.svc-section details:last-child{border-bottom:1px solid var(--line)}
.faq.svc-section summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq.svc-section summary::after{content:"+";color:var(--muted);flex-shrink:0}
.faq.svc-section details[open] summary::after{content:"–"}
.faq.svc-section details p{margin:10px 0 0;color:var(--muted);font-size:15px;line-height:1.6}

@media(max-width:900px){
  .inc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq.svc-section{grid-template-columns:1fr;gap:20px}
  .svc-section{padding-block:44px}
  .svc-section h2{font-size:28px}
}
@media(max-width:620px){
  .inc-grid{grid-template-columns:1fr}
  .hero--service .actions .btn{width:100%;justify-content:center}
  /* Same rule as the homepage: one primary action above the fold on a phone.
     The consultation CTA is still one scroll away in the contact block. */
  .hero--service .actions .btn:not(.primary){display:none}
  .crumb{font-size:12px}
}

/* Arabic: no tracking on the included-card titles either. */
[dir=rtl] .inc h3{letter-spacing:normal}