/* Hero banner (edge-to-edge, no ribbon overlay) — sized to
   hero-image-about-xeric.jpg's native ratio (1376x607 = ~2.267:1)
   so the fleet/team/equipment aren't side-cropped by object-fit: cover. */
.hero-banner--plain {
    position: relative;
    width: 100%;
    aspect-ratio: 1376 / 607;
    min-height: 200px;
    max-height: 900px;
    overflow: hidden;
}

.hero-banner--plain .hero-banner__img {
    position: absolute;
    inset: 0;
    object-position: center;
}

@media (max-width: 420px) {
    .hero-banner--plain {
        min-height: 160px;
    }
}

/* Intro heading directly under the hero */
.about-intro {
    padding-block: 3rem;
}

@media (min-width: 768px) {
    .about-intro {
        padding-block: 4rem;
    }
}

.about-intro__lead {
    max-width: 50rem;
    margin-inline: auto;
}

/* Dewpoint membership logo (duplicated from services-mould-remediation.css,
   matching the site's existing per-page CSS convention) */
.dewpoint-logo {
    max-width: 260px;
    height: auto;
}

/* Meet the Team cards (pattern duplicated from clients.css's client-logo-card,
   adapted for portrait bio photos) */
.team-card {
    transition: box-shadow .15s ease-in-out;
}

.team-card:hover {
    box-shadow: 0 .5rem 1rem rgba(var(--bs-primary-rgb), .15) !important;
}

.team-card__img {
    aspect-ratio: 481 / 641;
    object-fit: cover;
    object-position: center top;
}

.team-modal__img {
    aspect-ratio: 481 / 641;
    object-fit: cover;
}