/* ============================================
   SECTION: Our Approach — Photo band
   Wide rounded photo capped at the container width.
   The decorative swirl is baked into the image, so
   no overlay element is needed here.
   ============================================ */

.approach-photo {
    /* No bottom pad — services section supplies the gap below (avoids 160px stack). */
    padding: 0 var(--section-side-padding);
    background: var(--color-white);
}

.approach-photo__frame {
    position: relative;
    max-width: var(--container-max);
    margin-inline: auto;
}

.approach-photo__img {
    width: 100%;
    height: auto;
    aspect-ratio: 2880 / 1400;
    object-fit: cover;
    object-position: center center;
    border-radius: 12px;
    display: block;
}

/* ----- Responsive -----
   Below the desktop breakpoint the photo runs edge to edge: the side gutter
   and the corner radius both go, matching the home page's photo band. */
@media (max-width: 1024px) {
    .approach-photo {
        /* Light top air after values; services owns the gap below */
        padding: 40px 0 0;
    }
    .approach-photo__img {
        border-radius: 0;
    }
}

@media (max-width: 768px) {
    .approach-photo {
        padding: 24px 0 0;
    }
    .approach-photo__img {
        aspect-ratio: 4 / 3;
    }
}

/* ----- Phones: sit closer to the values section above ----- */
@media (max-width: 600px) {
    .approach-photo {
        padding: 0;
    }
}