/* =========================================================
   IBMS SHARED MARKETING HERO SYSTEM
   Homepage supplies the architectural reference; interior
   pages reuse this full-width photographic treatment.
========================================================= */

:is(
    .about-hero,
    .product-hero,
    .solutions-hero,
    .industries-hero,
    .features-hero,
    .pricing-hero,
    .journey-hero
) {
    position: relative;
    min-height: 470px;
    height: auto;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
    background: #042643;
    background-size: cover;
    background-repeat: no-repeat;
}

:is(
    .about-hero-photo,
    .product-hero-photo,
    .solutions-hero-photo,
    .industries-hero-photo,
    .features-hero-photo,
    .pricing-hero-photo,
    .journey-hero-photo
) {
    display: none;
}

:is(
    .about-hero-photo,
    .product-hero-photo,
    .solutions-hero-photo,
    .industries-hero-photo,
    .features-hero-photo,
    .pricing-hero-photo,
    .journey-hero-photo
) img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

:is(
    .about-hero-blend,
    .product-hero-blend,
    .solutions-hero-blend,
    .industries-hero-blend,
    .features-hero-blend,
    .pricing-hero-blend,
    .journey-hero-blend
) {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    background: linear-gradient(
        90deg,
        rgba(4, 38, 67, .93) 0%,
        rgba(4, 38, 67, .88) 28%,
        rgba(4, 38, 67, .72) 44%,
        rgba(4, 38, 67, .42) 58%,
        rgba(4, 38, 67, .16) 76%,
        rgba(4, 38, 67, .04) 100%
    );
}

:is(
    .about-hero-content,
    .product-hero-content,
    .solutions-hero-content,
    .industries-hero-content,
    .features-hero-content,
    .pricing-hero-content,
    .journey-hero-grid
) {
    position: relative;
    z-index: 2;
    min-height: 470px;
    height: auto;
    display: flex;
    align-items: center;
}

:is(
    .about-hero-copy,
    .product-hero-copy,
    .solutions-hero-copy,
    .industries-hero-copy,
    .features-hero-copy,
    .pricing-hero-copy,
    .journey-hero-copy
) {
    width: 44%;
    max-width: 660px;
    padding: 38px 0;
}

:is(
    .about-hero,
    .product-hero,
    .solutions-hero,
    .industries-hero,
    .features-hero,
    .pricing-hero,
    .journey-hero
) h1 {
    max-width: 670px;
    margin: 13px 0 14px;
    font-size: clamp(42px, 4vw, 56px);
    line-height: 1.01;
    letter-spacing: -.045em;
}

:is(
    .about-hero,
    .product-hero,
    .solutions-hero,
    .industries-hero,
    .features-hero,
    .pricing-hero,
    .journey-hero
) h1 span { color: #25a0ff; }

:is(
    .about-hero-copy,
    .product-hero-copy,
    .solutions-hero-copy,
    .industries-hero-copy,
    .features-hero-copy,
    .pricing-hero-copy,
    .journey-hero-copy
) > p {
    max-width: 610px;
    margin: 0;
    color: #d3e1ec;
    font-size: 13px;
    line-height: 1.62;
}

:is(.about-hero,.product-hero,.solutions-hero,.industries-hero,.features-hero,.pricing-hero,.journey-hero)
:is(.about-actions,.product-actions,.solutions-actions,.industries-actions,.features-actions,.pricing-actions,.journey-actions) {
    gap: 10px;
    margin-top: 22px;
}

:is(.about-hero,.product-hero,.solutions-hero,.industries-hero,.features-hero,.pricing-hero,.journey-hero)
:is(.about-button,.product-button,.solutions-button,.industries-button,.features-button,.pricing-button,.journey-button) {
    min-height: 46px;
    padding: 0 20px;
    border-radius: 7px;
    font-size: 11px;
}

/* The photograph belongs to the outer hero, never to a right-side column. */
.about-hero { background-image: url("/static/images/about-ibms-hero.8eab4a846cda.png"); background-position: 64% center; }
.product-hero { background-image: url("/static/images/product-hero.a5cc958c2c0f.png"); background-position: 61% center; }
.solutions-hero { background-image: url("/static/images/solutions-hero.e2921df86e14.png"); background-position: 58% center; }
.industries-hero { background-image: url("/static/images/industries-hero.1f3379610691.png"); background-position: 54% center; }
.features-hero { background-image: url("/static/images/centres-hero.ecf7e47b7683.png"); background-position: 60% center; }
.pricing-hero { background-image: url("/static/images/pricing-ibms-hero.53c0501a4ddb.png"); background-position: 63% center; }
.journey-hero { background-image: url("/static/images/how-it-works-hero.685e5f32ca78.png"); background-position: 59% center; }

/* One shared compact floating contact control on marketing pages. */
.whatsapp-contact-button,
.about-page + .whatsapp-contact-button,
.product-page + .whatsapp-contact-button,
.solutions-page + .whatsapp-contact-button,
.industries-page + .whatsapp-contact-button,
.features-page + .whatsapp-contact-button,
.pricing-page + .whatsapp-contact-button,
.journey-page + .whatsapp-contact-button {
    right: 22px;
    bottom: 22px;
    width: 44px;
    height: 44px;
    justify-content: center;
    gap: 0;
    padding: 0;
    border-radius: 50%;
    color: #092b16;
    background: #25d366;
    box-shadow: 0 12px 30px rgba(13, 87, 40, .28);
}

.whatsapp-contact-button i { font-size: 19px; }
.whatsapp-contact-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 850px) {
    :is(
        .about-hero-copy,
        .product-hero-copy,
        .solutions-hero-copy,
        .industries-hero-copy,
        .features-hero-copy,
        .pricing-hero-copy,
        .journey-hero-copy
    ) { width: 58%; }

    :is(
        .about-hero-blend,
        .product-hero-blend,
        .solutions-hero-blend,
        .industries-hero-blend,
        .features-hero-blend,
        .pricing-hero-blend,
        .journey-hero-blend
    ) {
        background: linear-gradient(90deg,rgba(4,38,67,.95),rgba(4,38,67,.84) 48%,rgba(4,38,67,.34) 76%,rgba(4,38,67,.12));
    }
}

@media (max-width: 600px) {
    :is(
        .about-hero,
        .product-hero,
        .solutions-hero,
        .industries-hero,
        .features-hero,
        .pricing-hero,
        .journey-hero
    ) {
        min-height: 500px;
        display: flex;
        align-items: center;
    }

    :is(
        .about-hero-blend,
        .product-hero-blend,
        .solutions-hero-blend,
        .industries-hero-blend,
        .features-hero-blend,
        .pricing-hero-blend,
        .journey-hero-blend
    ) {
        display: block;
        background: linear-gradient(90deg,rgba(3,28,51,.96),rgba(3,28,51,.86) 60%,rgba(3,28,51,.54));
    }

    :is(
        .about-hero-content,
        .product-hero-content,
        .solutions-hero-content,
        .industries-hero-content,
        .features-hero-content,
        .pricing-hero-content,
        .journey-hero-grid
    ) {
        order: initial;
        min-height: 500px;
        padding: 0;
    }

    :is(
        .about-hero-copy,
        .product-hero-copy,
        .solutions-hero-copy,
        .industries-hero-copy,
        .features-hero-copy,
        .pricing-hero-copy,
        .journey-hero-copy
    ) { width: 100%; max-width: 540px; padding: 42px 0; }

    :is(
        .about-hero,
        .product-hero,
        .solutions-hero,
        .industries-hero,
        .features-hero,
        .pricing-hero,
        .journey-hero
    ) h1 { font-size: clamp(36px, 10.5vw, 46px); }

    .about-hero { background-position: 68% center; }
    .product-hero { background-position: 65% center; }
    .solutions-hero { background-position: 63% center; }
    .industries-hero { background-position: 58% center; }
    .features-hero { background-position: 64% center; }
    .pricing-hero { background-position: 67% center; }
    .journey-hero { background-position: 64% center; }

    .whatsapp-contact-button,
    .about-page + .whatsapp-contact-button,
    .product-page + .whatsapp-contact-button,
    .solutions-page + .whatsapp-contact-button,
    .industries-page + .whatsapp-contact-button,
    .features-page + .whatsapp-contact-button,
    .pricing-page + .whatsapp-contact-button,
    .journey-page + .whatsapp-contact-button {
        right: 14px;
        bottom: 14px;
        width: 40px;
        height: 40px;
    }
}