/* ---- Team cards: assets/img/home2/teams-card-bg.png is missing on disk. A
   broken <img> falls back to the size given by its width/height HTML
   attributes, which CSS aspect-ratio cannot override once those attributes
   are present — so .teams-card collapsed to ~30px tall and its overflow:
   hidden clipped away the photo + name/role sitting on top of it. Pin the
   card to a fixed height and stretch the (broken) image to fill it, with an
   on-brand gradient standing in for the missing frame artwork. ---- */
.teams-card {
    min-height: 410px;
    background: linear-gradient(160deg, #FFE1C6 0%, #FFF6EE 100%);
}

/* visibility: hidden masks Chrome's broken-image glyph; if teams-card-bg.png
   is ever added back to assets/img/home2/, remove this rule so it shows. */
.teams-card > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    visibility: hidden;
}

@media (max-width: 576px) {
    .teams-card {
        min-height: 480px;
    }
}

/* ---- "About Us" tour boat photo: style.css masks .about-img with
   assets/img/home2/home2-about-img-bg-vector.png, which is also missing on
   disk. Chrome renders an element fully invisible when its mask image fails
   to load (unlike a plain background-image 404, which just shows nothing
   behind the content) — so the whole photo disappeared. Drop the mask and
   frame the photo with a normal rounded rect instead. If that vector asset
   is ever added back, remove this override so the organic mask shape returns. ---- */
.home2-about-section .about-img-wrap .about-img {
    -webkit-mask-image: none;
    mask-image: none;
    border-radius: 20px;
    overflow: hidden;
}

.home2-about-section .about-img-wrap .about-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}