/* ═══════════════════════════════════════════════════════════════
   service.css — additive ONLY. Every selector below is prefixed
   .svcp- so it can never collide with a class already defined in
   style.css. Everything else on service pages (inner-hero,
   section-head, services-grid/svc, steps, testi-grid, faq,
   cta-band, pf-stats, chip, foot-grid…) reuses style.css as-is.
   ═══════════════════════════════════════════════════════════════ */

.svcp-exp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.svcp-exp-list li{padding-left:22px;border-left:2px solid var(--terra);font-size:15.5px;color:var(--ink2)}
.svcp-exp-list li strong{display:block;color:var(--ink);font-family:var(--ff-d);font-weight:600;font-size:17px;margin-bottom:4px}

.svcp-quote{background:var(--dark);color:var(--cream);border-radius:var(--radius);padding:34px 32px;margin-top:8px}
.svcp-quote p{font-family:var(--ff-d);font-style:italic;font-size:19px;line-height:1.5;color:#fff;margin:0 0 16px}
.svcp-quote footer{font-size:13.5px;color:rgba(247,239,226,.65)}

.svcp-split{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center}
.svcp-split img{border-radius:var(--radius);width:100%;height:100%;object-fit:cover;box-shadow:var(--shadow)}
.svcp-split-photo{aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}

.svcp-materials{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:52px}
.svcp-materials div{border-top:1px solid var(--line);padding-top:16px}
.svcp-materials h4{font-size:15.5px;font-weight:800;color:var(--terra-deep);margin-bottom:8px}
.svcp-materials p{font-size:13.5px;color:var(--ink2);margin:0}

@media (max-width:1020px){
  .svcp-split{grid-template-columns:1fr}
  .svcp-materials{grid-template-columns:1fr 1fr}
}

/* ═══════════════ BLOG ARTICLE (svcp-art-) ═══════════════
   Used by /blogs/*.php. Additive only — no existing class
   from style.css is redefined here. */

.svcp-art-hero{padding:120px 0 48px;background:var(--bg2);border-bottom:1px solid var(--line)}
.svcp-art-crumb{font-size:13px;color:var(--ink2);margin-bottom:18px}
.svcp-art-crumb a{color:var(--ink2)}
.svcp-art-crumb a:hover{color:var(--terra-deep)}
.svcp-art-crumb span{margin:0 7px;opacity:.5}
.svcp-art-hero h1{font-family:var(--ff-d);font-size:clamp(30px,4.4vw,50px);line-height:1.1;font-weight:600;max-width:17ch;margin:0 0 16px}
.svcp-art-hero h1 em{font-style:italic;color:var(--terra-deep)}
.svcp-art-dek{font-size:18px;color:var(--ink2);max-width:62ch;margin:0}
.svcp-art-meta{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:26px;font-size:13.5px;color:var(--ink2)}
.svcp-art-meta .dot{opacity:.45}

.svcp-art-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;align-items:start;padding:56px 0 20px}

.svcp-art-figure{margin:0 0 38px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.svcp-art-figure img{width:100%;display:block}
.svcp-art-figure figcaption{font-size:12.5px;color:var(--ink2);padding:12px 4px 0}

/* article prose */
.svcp-art-body{font-size:17px;line-height:1.75;color:var(--ink)}
.svcp-art-body > p{margin:0 0 22px;max-width:70ch}
.svcp-art-body h2{font-family:var(--ff-d);font-size:27px;font-weight:600;line-height:1.25;margin:44px 0 16px;max-width:24ch}
.svcp-art-body h2 em{font-style:italic;color:var(--terra-deep)}
.svcp-art-body h3{font-family:var(--ff-d);font-size:21px;font-weight:600;margin:32px 0 12px}
.svcp-art-body a{color:var(--terra-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.svcp-art-body a:hover{opacity:.75}
.svcp-art-body ul{margin:0 0 24px;padding-left:0;list-style:none;max-width:70ch}
.svcp-art-body ul li{position:relative;padding-left:26px;margin-bottom:12px}
.svcp-art-body ul li::before{content:"";position:absolute;left:6px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--terra)}
.svcp-art-body strong{font-weight:800}
.svcp-art-lead{font-size:19px;line-height:1.65;color:var(--ink)}

.svcp-art-rule{border:0;border-top:1px solid var(--line);margin:44px 0}

/* pull-out note inside an article */
.svcp-art-note{background:var(--bg2);border-left:3px solid var(--terra);border-radius:0 var(--radius) var(--radius) 0;padding:24px 28px;margin:34px 0;max-width:70ch}
.svcp-art-note p{margin:0;font-size:16px;color:var(--ink2)}

/* end-of-article CTA */
.svcp-art-cta{background:var(--dark);color:var(--cream);border-radius:var(--radius);padding:40px 38px;margin:44px 0 0}
.svcp-art-cta h3{font-family:var(--ff-d);font-size:25px;font-weight:600;color:#fff;margin:0 0 12px}
.svcp-art-cta p{color:rgba(247,239,226,.78);font-size:15.5px;margin:0 0 24px;max-width:56ch}
.svcp-art-cta .hero-ctas{margin:0}

.svcp-art-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:38px;padding-top:28px;border-top:1px solid var(--line)}
.svcp-art-tags span{font-size:12px;color:var(--ink2);background:var(--bg2);border:1px solid var(--line);border-radius:100px;padding:5px 13px}

/* sticky sidebar */
.svcp-art-side{position:sticky;top:104px;display:flex;flex-direction:column;gap:22px}
.svcp-art-toc{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.svcp-art-toc h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--terra-deep);font-weight:800;margin:0 0 14px}
.svcp-art-toc ol{margin:0;padding-left:0;list-style:none;counter-reset:toc}
.svcp-art-toc li{counter-increment:toc;margin-bottom:11px;font-size:14px;line-height:1.45}
.svcp-art-toc li a{color:var(--ink2);display:block;padding-left:24px;position:relative}
.svcp-art-toc li a::before{content:counter(toc,decimal-leading-zero);position:absolute;left:0;top:0;font-size:11px;color:var(--terra);font-weight:800}
.svcp-art-toc li a:hover{color:var(--terra-deep)}

.svcp-art-card{background:var(--dark);color:var(--cream);border-radius:var(--radius);padding:26px 24px}
.svcp-art-card strong{display:block;font-family:var(--ff-d);font-size:19px;font-weight:600;color:#fff;margin-bottom:8px}
.svcp-art-card p{font-size:13.5px;color:rgba(247,239,226,.72);margin:0 0 18px;line-height:1.55}

/* related posts */
.svcp-art-related{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
.svcp-art-related a{display:block;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card);transition:transform .25s ease,box-shadow .25s ease}
.svcp-art-related a:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.svcp-art-related img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.svcp-art-related div{padding:18px 20px 22px}
.svcp-art-related h4{font-family:var(--ff-d);font-size:16.5px;font-weight:600;line-height:1.35;margin:0 0 7px}
.svcp-art-related span{font-size:13px;color:var(--ink2);line-height:1.5}

@media (max-width:1020px){
  .svcp-art-wrap{grid-template-columns:1fr;gap:44px}
  .svcp-art-side{position:static;flex-direction:row;flex-wrap:wrap}
  .svcp-art-toc,.svcp-art-card{flex:1 1 280px}
  .svcp-art-related{grid-template-columns:1fr}
}
@media (max-width:760px){
  .svcp-art-hero{padding:96px 0 38px}
  .svcp-art-body{font-size:16.5px}
  .svcp-art-cta{padding:32px 26px}
}