/* Shared service pages retain the public site's typography, cards and palette. */
.service-page .hero {
    min-height: 48vh;
    padding-top: calc(var(--space-16) + 80px + var(--safe-area-top, 0px));
    padding-bottom: var(--space-16);
}
.service-page .hero .subtitle { max-width: 780px; }
.service-breadcrumb { padding-block: 1rem; font-size: .875rem; }
.service-breadcrumb ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.service-breadcrumb li + li::before { content: '/'; margin-right: .5rem; color: var(--color-text-muted); }
.service-copy { max-width: 920px; }
.service-copy h2 { margin-bottom: 1rem; }
.service-copy p { max-width: 78ch; margin-bottom: 1.25rem; }
.service-copy ul { padding-left: 1.25rem; margin-block: 1.25rem; }
.service-copy li { margin-bottom: .65rem; }
.service-page .card { min-width: 0; }
.service-page .card h3 { font-size: 1.35rem; margin-bottom: .75rem; }
.service-page .card p { max-width: none; }
.service-page .section-header { max-width: 800px; }
.service-page .section-header p { max-width: 75ch; }
.service-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 3rem;
    margin-bottom: 3rem;
}
.service-intro__copy h2 { margin-bottom: 1rem; }
.service-intro__copy p { color: var(--color-text-muted); }
.service-intro__photo { min-width: 0; margin: 0; }
.service-intro__photo img {
    display: block;
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: var(--radius-lg);
}
.service-card-photo { display: block; width: 100%; margin: 0 0 .5rem; }
.service-card-photo img { width: 100%; height: 220px; object-fit: cover; border-radius: var(--radius-md); }
.service-page [id] { scroll-margin-top: 125px; }
.service-note { padding: 1.25rem; background: var(--color-surface); border-left: 3px solid var(--color-primary); border-radius: var(--radius-sm); }
.service-faq { margin-top: 1rem; }
.service-faq summary { font-weight: 600; cursor: pointer; }
.service-faq p { margin-top: 1rem; }
.service-link-card { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.service-link-card .button { margin-top: auto; }
.service-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 3rem; }
.service-gallery img { width: 100%; height: 300px; object-fit: cover; border-radius: var(--radius-md); }
.service-gallery--photos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.service-gallery--photos figure { min-width: 0; margin: 0; }
.service-gallery--photos figcaption { margin-top: .6rem; font-size: .85rem; line-height: 1.5; color: var(--color-text-muted); }
.service-project-card img { width: 100%; height: 210px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 1rem; }
.service-project-card small { display: block; margin-bottom: .5rem; color: var(--color-text-muted); }
.service-project-card p { margin-block: .75rem 1rem; }
.service-page .cta-section {
    background: #1a2a44;
    color: #fff;
    text-align: center;
}
.service-page .cta-section h2 {
    max-width: 780px;
    margin: 0 auto 1rem;
    color: #fff;
}
.service-page .cta-section p {
    max-width: 65ch;
    margin: 0 auto 1.5rem;
    color: #e2e7f0;
}
.service-page .cta-section .hero__actions {
    justify-content: center;
    margin: 1.5rem 0 0;
}
.service-page .cta-section .button--primary {
    background: #fff;
    border-color: #fff;
    color: #1a2a44;
}
.service-page .cta-section .button--primary:hover {
    background: #e2e7f0;
    border-color: #e2e7f0;
    color: #1a2a44;
}
.service-page .cta-section .button--secondary {
    background: transparent;
    border-color: #fff;
    color: #fff;
}
.service-page .cta-section .button--secondary:hover {
    background: #fff;
    color: #1a2a44;
}
.service-overview-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding-left: 1.25rem; }
.service-overview-links li { margin-block: .25rem; }
.service-secondary { border-top: 1px solid var(--color-border); padding-top: 1.5rem; margin-top: 2rem; }
@media (max-width: 767px) {
    .service-intro { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
    .service-intro__photo img { height: 290px; }
    .service-page .hero { padding-top: calc(var(--space-12) + 72px + var(--safe-area-top, 0px)); padding-bottom: var(--space-12); }
    .service-page .hero h1 { font-size: clamp(2rem, 7.5vw, 3rem); overflow-wrap: anywhere; }
    .service-gallery { grid-template-columns: minmax(0, 1fr); }
    .service-gallery img { height: auto; max-height: 360px; }
    .service-page .card { padding: 1.25rem; }
}