/* ==========================================================================
   Single service (single-service.php) — scoped styles.
   ========================================================================== */

.sr-service-narrow {
    max-width: 760px;
}
.sr-overview-img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 12px 12px 0 rgba(99, 108, 63, .25);
}
.sr-service-description {
    font-size: 1.0625rem;
    color: #38423b;
}
.sr-service-description h2,
.sr-service-description h3 {
    margin-top: 1.5rem;
    margin-bottom: .75rem;
}
.sr-service-area-note {
    margin: 1.5rem 0 0;
    color: var(--sr-olive);
    font-size: .9375rem;
    font-weight: 500;
}

/* --- Benefits --- */

.sr-benefit {
    width: 100%;
    padding: 2rem 1.5rem;
    background: #fff;
    border: 1px solid rgba(21, 34, 24, .08);
}
.sr-benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: .875rem;
    border: 1px solid rgba(99, 108, 63, .4);
    border-radius: 50%;
    color: var(--sr-olive);
    font-size: 1.375rem;
}
.sr-benefit-title {
    font-size: 1.125rem;
    margin-bottom: .5rem;
}
.sr-benefit-text {
    color: #4b544e;
    font-size: .9375rem;
    margin-bottom: 0;
}

/* --- Features checklist (card tiles) --- */

.sr-feature-list {
    /* centered via .mx-auto utility in the markup — Bootstrap loads after this
       sheet (parent enqueues at priority 11), so a plain margin rule here loses
       to .row's negative margins */
    max-width: 1040px;
}
.sr-feature-card {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    width: 100%;
    padding: 1.125rem 1.25rem;
    background: var(--sr-cream);
    border: 1px solid rgba(21, 34, 24, .08);
    border-left: 3px solid var(--sr-olive);
    color: var(--sr-forest);
    font-weight: 500;
    font-size: .9375rem;
    line-height: 1.5;
    text-align: start;
}
.sr-feature-check {
    color: var(--sr-olive);
    font-size: 1.125rem;
    line-height: 1.4;
}

/* --- Process --- */

.sr-process-heading {
    color: #fff;
}
.sr-step {
    height: 100%;
    padding: 1.75rem 1.5rem;
    border: 1px solid rgba(246, 238, 236, .15);
    text-align: center;
}
.sr-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: .875rem;
    border-radius: 50%;
    background: var(--sr-olive);
    color: #fff;
    font-family: var(--sr-font-header);
    font-size: 1.25rem;
}
.sr-step-title {
    color: #fff;
    font-size: 1.125rem;
    margin-bottom: .5rem;
}
.sr-step-text {
    color: var(--sr-cream);
    opacity: .85;
    font-size: .9375rem;
    margin-bottom: 0;
}

/* --- Gallery --- */

.sr-gallery-img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid rgba(21, 34, 24, .08);
}

/* --- FAQs (Bootstrap accordion, brand-tuned) --- */

.sr-faq-accordion {
    max-width: 760px;
}
.sr-faq-accordion .accordion-item {
    border: 1px solid rgba(21, 34, 24, .1);
    background: #fff;
}
.sr-faq-accordion .accordion-button {
    font-family: var(--sr-font);
    font-weight: 600;
    color: var(--sr-forest);
    background: #fff;
    box-shadow: none;
}
.sr-faq-accordion .accordion-button:not(.collapsed) {
    background: rgba(99, 108, 63, .08);
    color: var(--sr-forest);
}
.sr-faq-accordion .accordion-button:focus {
    border-color: var(--sr-sage);
    box-shadow: 0 0 0 2px rgba(131, 134, 87, .4);
}
.sr-faq-accordion .accordion-body {
    color: #38423b;
}