/* services.css — /services page styles. Matches the /blog listing pattern:
   left-aligned section-label + section-title + section-subtitle, then body
   content below at the same left origin. Piggybacks on common.css for
   .section, .section-label, .section-title, .section-subtitle, .btn,
   .contact-box. */

.svc-hero{padding-top:8rem;max-width:900px}
.svc-hero .section-title{font-size:2.8rem;margin-bottom:.8rem}
.svc-hero .section-subtitle{max-width:720px;margin-bottom:2rem}

.svc-cta-row{
    display:flex;flex-wrap:wrap;
    gap:.8rem;
    margin-top:1.8rem
}

.svc-block{scroll-margin-top:120px;max-width:900px}
.svc-header{margin-bottom:2.5rem}
.svc-header .section-title{font-size:2rem;margin-bottom:.8rem}
.svc-header .section-subtitle{max-width:720px}

.svc-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
    margin-bottom:2rem
}
.svc-sub{
    background:var(--bg-surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:1.6rem 1.8rem
}
.svc-sub h3{
    font-family:var(--font-display);
    font-size:1.05rem;
    font-weight:700;
    color:var(--text-bright);
    margin-bottom:.8rem
}
.svc-sub ul{
    list-style:none;padding:0;margin:0;
    display:flex;flex-direction:column;gap:.5rem
}
.svc-sub ul li{
    color:var(--text-secondary);
    font-size:.92rem;
    line-height:1.5;
    padding-left:1.2rem;
    position:relative
}
.svc-sub ul li::before{
    content:'→';
    position:absolute;left:0;
    color:var(--accent);
    font-family:var(--font-mono)
}

/* FAQ accordion — aligned to the same 900px left column as the service
   blocks above, so label / title / list all share the same left edge. */
.svc-faq{max-width:900px}
.svc-faq .section-title{font-size:2rem;margin-bottom:.8rem}
.faq-list{
    max-width:760px;
    margin-top:2rem;
    display:flex;flex-direction:column;gap:.6rem
}
.faq-list details{
    background:var(--bg-surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    transition:border-color .2s
}
.faq-list details[open]{border-color:var(--accent)}
.faq-list summary{
    padding:1rem 1.2rem;
    color:var(--text-bright);
    font-family:var(--font-display);
    font-size:.98rem;
    font-weight:600;
    cursor:pointer;
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
    content:'+';
    color:var(--accent);
    font-family:var(--font-mono);
    font-size:1.2rem;
    line-height:1;
    flex-shrink:0;
    transition:transform .2s
}
.faq-list details[open] summary::after{content:'\2212'}
.faq-list p{
    padding:0 1.2rem 1.1rem;
    color:var(--text-secondary);
    font-size:.94rem;
    line-height:1.65;
    margin:0
}

@media(max-width:780px){
    .svc-grid{grid-template-columns:1fr}
    .svc-h2{font-size:1.55rem}
    .svc-anchors{padding:.5rem 1rem;gap:.3rem}
    .svc-anchors a{font-size:.66rem;padding:.2rem .55rem}
}