/* Image slots: homepage hero and About founder portrait.
   Loads after style-v3-araamis.css and does not override its rules. */

/* Containing block for the hero background (no visual change on its own) */
.hero-v3 {
    position: relative;
    isolation: isolate;
}

.gn-visual {
    box-sizing: border-box;
}

.gn-visual__media {
    position: absolute;
    inset: 0;
    display: block;
}

.gn-visual__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Background slot: sits behind the section content, no layout impact */
.gn-visual--bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

/* Founder portrait inside the About profile card */
.gn-visual--flow {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #F7F4EE;
}

.gn-r-4x5 { aspect-ratio: 4 / 5; }

.founder-card .gn-visual--flow {
    margin: 0 0 24px;
    max-width: 280px;
}

/* Hero: ivory veil so the copy stays legible over the photo (tablet and mobile) */
.gn-visual--bg-light .gn-visual__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(247, 244, 238, 0.84);
}

/* Desktop: image sits in the right half and dissolves into the ivory,
   so it never runs under the copy. */
@media (min-width: 769px) {
    .gn-visual--bg-light .gn-visual__media {
        left: 50%;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
        mask-image: linear-gradient(90deg, transparent 0, #000 30%);
    }

    .gn-visual--bg-light .gn-visual__media::after {
        display: none;
    }
}