/* ============================================================
   SINGLE SERVICE PAGE — extends style.css + services.css tokens.
   ============================================================ */

.sd-tag{
  display:inline-block; margin-bottom:14px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--color-green); background:var(--color-primary-tint); border:1px solid var(--color-line);
  padding:5px 12px; border-radius:100px;
}

/* ---------------- BODY LAYOUT ---------------- */
.service-detail{ padding:64px 0 40px; }
.sd-layout{
  display:grid; grid-template-columns:1fr 320px; gap:40px; align-items:start;
}

.sd-badge-row{ display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.sd-badge-row .offering-badge{ width:52px; height:52px; font-size:16px; flex:none; }
.sd-eyebrow{
  display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--color-green); margin-bottom:4px;
}
.sd-badge-row h2{ font-size:20px; }

.sd-highlights{ display:grid; gap:14px; margin-bottom:26px; }
.sd-highlights li{
  display:flex; align-items:flex-start; gap:10px;
  padding:16px 18px; border:1px solid var(--color-line); border-radius:var(--radius-md);
  background:var(--color-paper); font-size:14px; color:var(--color-ink);
}
.sd-highlights svg{ flex:none; margin-top:2px; color:var(--color-primary); }

.sd-note-box{
  padding:16px 18px; border:1px dashed var(--color-line); border-radius:var(--radius-md);
  background:var(--color-mist);
}
.sd-note-box p{ font-size:13px; color:var(--color-ink-soft); }
.sd-note-box strong{ color:var(--color-ink); }

/* ---------------- SIDEBAR CTA CARD ---------------- */
.sd-side{ position:sticky; top:100px; }
.sd-cta-card{
  border:1px solid var(--color-line); border-radius:var(--radius-lg);
  padding:28px 24px; background:var(--color-paper);
  box-shadow:0 20px 40px -24px rgba(11,58,87,.18);
}
.sd-cta-card h3{ font-size:17px; margin-bottom:8px; }
.sd-cta-card p{ font-size:13px; color:var(--color-ink-soft); margin-bottom:18px; }
.sd-cta-card .btn{ width:100%; justify-content:center; margin-bottom:10px; }
.sd-contact-line{
  display:flex; flex-direction:column; gap:6px; margin-top:14px;
  padding-top:14px; border-top:1px solid var(--color-line);
  font-family:var(--font-mono); font-size:12.5px;
}
.sd-contact-line a{ color:var(--color-ink-soft); }
.sd-contact-line a:hover{ color:var(--color-primary); }

/* ---------------- OTHER SERVICES ---------------- */
.sd-other{ padding:20px 0 100px; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:980px){
  .sd-layout{ grid-template-columns:1fr; }
  .sd-side{ position:static; }
}
@media (max-width:900px){
  .page-header{ padding:140px 0 50px; }
}
@media (max-width:640px){
  .service-detail{ padding:44px 0 10px; }
  .sd-badge-row{ flex-direction:column; align-items:flex-start; gap:10px; }
}