/* Individual service pages (/services/{slug}) */
.svc-hero { background: radial-gradient(900px 460px at 85% -10%, #EBD9FF 0%, rgba(243,232,255,0) 60%), var(--bg-soft); border-bottom: 1px solid var(--border); padding-block: clamp(2.2rem, 5vw, 4rem); }
.svc-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.svc-hero .breadcrumbs { margin-bottom: 1rem; }
.svc-hero h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.12; max-width: 20ch; }
.svc-hero .lead { margin-top: 1rem; max-width: 58ch; }
.svc-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.svc-points { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: 1.4rem; }
.svc-points li { display: flex; align-items: center; gap: .45rem; font-size: .9rem; color: var(--ink-2); font-weight: 500; }
.svc-points svg { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; }
.svc-hero-media img { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid #EADCFB; background: #fff; }

.svc-answer { max-width: 860px; margin-inline: auto; background: #fff; border: 1px solid #E3D2F7; border-left: 5px solid var(--primary); border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 2rem); box-shadow: var(--shadow-sm); }
.svc-answer h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-bottom: .6rem; }
.svc-answer p + p { margin-top: .8rem; }

.svc-feature { display: flex; flex-direction: column; }
.svc-feature .icon-badge { width: 50px; height: 50px; margin-bottom: 1rem; }
.svc-feature .icon-badge svg { width: 24px; height: 24px; }
.svc-feature h3 { font-size: 1.12rem; }

.svc-signs { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem 1.5rem; margin-top: 1.4rem; }
.svc-signs li { display: flex; gap: .7rem; align-items: flex-start; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .9rem 1rem; font-size: .95rem; color: var(--ink-2); }
.svc-signs li svg { width: 20px; height: 20px; color: var(--primary); flex-shrink: 0; margin-top: .1rem; }

.svc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gap); counter-reset: s; }
.svc-step { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; position: relative; }
.svc-step .step-num { width: 44px; height: 44px; font-size: 1.1rem; margin-bottom: .9rem; background: var(--grad); color: #fff; }
.svc-step h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.svc-step p { font-size: .93rem; }

.svc-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.svc-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 1.9rem); box-shadow: var(--shadow-sm); }
.svc-panel h3 { display: flex; align-items: center; gap: .6rem; font-size: 1.15rem; margin-bottom: .3rem; }
.svc-panel h3 .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--lavender); color: var(--primary); display: grid; place-items: center; flex-shrink: 0; }
.svc-panel h3 .ic svg { width: 20px; height: 20px; }
.svc-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.svc-chips span { background: var(--lavender); color: var(--primary); border-radius: var(--radius-pill); padding: .38rem .85rem; font-size: .85rem; font-weight: 600; }
.svc-note { font-size: .85rem; color: var(--muted); margin-top: .9rem; }

.svc-who { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.svc-who .card { padding: 1.35rem; }
.svc-who .icon-badge { width: 46px; height: 46px; margin-bottom: .9rem; }
.svc-who .icon-badge svg { width: 22px; height: 22px; }
.svc-who h3 { font-size: 1.02rem; }
.svc-who p { font-size: .92rem; }

.svc-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.svc-related a.card { display: flex; gap: 1rem; align-items: flex-start; color: inherit; text-decoration: none; }
.svc-related .icon-badge { width: 46px; height: 46px; margin: 0; flex-shrink: 0; }
.svc-related .icon-badge svg { width: 22px; height: 22px; }
.svc-related h3 { font-size: 1.02rem; margin-bottom: .25rem; }
.svc-related p { font-size: .9rem; }
.svc-related .card-link { margin-top: .5rem; }

.svc-reading { max-width: 860px; margin: 2rem auto 0; display: grid; gap: .8rem; }
.svc-reading a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #fff; border: 1px dashed #D9C2F5; border-radius: var(--radius-sm); padding: 1rem 1.2rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.svc-reading a small { display: block; font-weight: 400; color: var(--muted); margin-top: .2rem; }
.svc-reading svg { width: 18px; height: 18px; flex-shrink: 0; }

.svc-cta .cta-actions { justify-content: center; }

@media (max-width: 980px) {
  .svc-hero-grid, .svc-two { grid-template-columns: 1fr; }
  .svc-who { grid-template-columns: repeat(2, 1fr); }
  .svc-related { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .svc-signs, .svc-who, .svc-related { grid-template-columns: 1fr; }
  .svc-hero-actions .btn { flex: 1 1 100%; justify-content: center; }
}