/* ============================================================
   GENERATED PAGES: service detail pages and the blog
   (built by tools/build-content.mjs). Uses style.css tokens only,
   so dark mode comes for free.
   ============================================================ */

/* ---------- shared section rhythm ---------- */
.sp-sec{padding:110px 0}
.sp-sec.alt{background:var(--bg-elev);border-block:1px solid var(--line)}
.sp-h2{font-size:clamp(32px,4vw,50px);max-width:20ch;margin:16px 0 46px}
.sp-h2 .serif-it,.sp-overview h2 .serif-it{color:var(--muted)}

/* ---------- service hero ---------- */
.sp-hero h1{max-width:15ch}
.sp-hero-cta{margin-top:32px}
.sp-ill svg{width:min(100%,400px);height:auto}

/* ---------- overview: heading left, prose right ---------- */
.sp-overview{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start;margin-top:16px}
.sp-overview h2{font-size:clamp(30px,3.6vw,44px);position:sticky;top:calc(var(--nav-h) + 30px)}
.sp-prose h2{font-size:21px;margin:36px 0 10px}
.sp-prose strong{color:var(--ink);font-weight:600}

/* ---------- where it helps ---------- */
.sp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sp-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:28px 26px}
.sp-card h3{font-family:var(--font-d);font-weight:500;font-size:19px;letter-spacing:-.02em;margin-bottom:10px}
.sp-card p{font-size:14.5px;line-height:1.6;color:var(--muted)}

/* ---------- approach + deliverables ---------- */
.sp-split{display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:start}
.sp-steps{list-style:none;counter-reset:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sp-steps li{padding:22px 0;border-bottom:1px solid var(--line)}
.sp-steps h3{font-family:var(--font-d);font-weight:500;font-size:19px;letter-spacing:-.02em;margin-bottom:6px}
.sp-steps p{font-size:15px;line-height:1.6;color:var(--ink-2);max-width:60ch}
.sp-leave{
  position:sticky;top:calc(var(--nav-h) + 30px);margin-top:16px;
  background:var(--dark);color:#E8EBF2;border-radius:var(--radius-sm);padding:34px 32px;
}
.sp-leave h3{font-family:var(--font-m);font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#8AA3FF;margin-bottom:18px}
.sp-leave ul{list-style:none;margin:0 0 26px;padding:0}
.sp-leave li{position:relative;padding:11px 0 11px 22px;border-bottom:1px solid var(--dark-line);font-size:14.5px;line-height:1.5;color:#D5DAE6}
.sp-leave li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:8px;border-radius:2px;background:#8AA3FF}
.sp-leave .link-arrow{color:#8AA3FF}

/* ---------- related services ---------- */
.sp-related{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:16px}
.sp-rel{
  display:flex;flex-direction:column;gap:10px;padding:28px 26px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--bg);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
.sp-rel:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.sp-rel h3{font-family:var(--font-d);font-weight:500;font-size:20px;letter-spacing:-.02em}
.sp-rel p{font-size:14px;line-height:1.55;color:var(--muted);flex:1}

/* ---------- blog ---------- */
.bp-intro{max-width:560px;color:var(--ink-2);font-size:clamp(16px,1.8vw,19px);line-height:1.6}
.bp-hero h1{max-width:22ch;font-size:clamp(34px,4.6vw,58px)}
.bp-meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--font-m);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bp-sec{padding-top:70px}
.bp-body{max-width:720px}
.bp-body h2{font-family:var(--font-d);font-weight:500;font-size:25px;letter-spacing:-.02em;margin:44px 0 12px}
.bp-body h3{font-family:var(--font-d);font-weight:500;font-size:19px;margin:30px 0 8px}
.bp-body strong{color:var(--ink);font-weight:600}
.bp-body ol{margin:12px 0;padding-left:22px}
.bp-body ol li{margin:6px 0}
.bp-body blockquote{border-left:2px solid var(--blue);padding:4px 0 4px 18px;margin:20px 0;color:var(--ink)}
.bp-body img,.bp-cover{width:100%;height:auto;border-radius:var(--radius-sm);margin:10px 0 26px}
.bp-foot{max-width:720px;margin-top:56px;padding-top:26px;border-top:1px solid var(--line)}

.bp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.bp-card{
  display:flex;flex-direction:column;gap:12px;padding:32px 30px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--bg);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s;
}
.bp-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.bp-card h2{font-family:var(--font-d);font-weight:500;font-size:23px;line-height:1.2;letter-spacing:-.02em}
.bp-card p{font-size:14.5px;line-height:1.6;color:var(--muted);flex:1}
.bp-card-meta{font-family:var(--font-m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bp-empty{color:var(--muted)}

/* ---------- responsive ---------- */
@media(max-width:1020px){
  .sp-cards{grid-template-columns:1fr 1fr}
  .sp-overview,.sp-split{grid-template-columns:1fr;gap:34px}
  .sp-overview h2,.sp-leave{position:static}
}
@media(max-width:640px){
  .sp-sec{padding:80px 0}
  .sp-cards{grid-template-columns:1fr}
  .sp-ill svg{width:min(100%,260px)}
  .bp-grid{grid-template-columns:1fr}
}