.hero-section {
    --hero-fade-duration: 2.083538s;
    --hero-slide-interval: 3s;
    --hero-header-overlap: 0px;
    /* Space taken above the hero by the header; script.js syncs it to the real value */
    --hero-header-height: 105px;
    --hero-visible-height: min(646px, 100svh - var(--hero-header-height));
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    background: #002b46;
    width: 100%;
    /* Never taller than the first fold, but grows when the content needs more room */
    min-height: calc(var(--hero-visible-height) + var(--hero-header-overlap));
    margin-top: calc(var(--hero-header-overlap) * -1);

    .hero-bg {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 43, 70, 0.9) 100%
            ),
            var(--bg-image) lightgray 50% / cover no-repeat;
        opacity: 0;
        transition: opacity var(--hero-fade-duration) linear(0, 0.0216, 0.0747, 0.1458, 0.2255, 0.3076, 0.3879, 0.4638, 0.5339, 0.5974, 0.6542, 0.7044, 0.7484, 0.7866, 0.8196, 0.8479, 0.8722, 0.8928, 0.9103, 0.9251, 0.9375, 0.948, 0.9568, 0.9642, 0.9703, 0.9754, 0.9797, 0.9832, 0.9862, 0.9886, 0.9906, 0.9923, 0.9936, 0.9948, 0.9957, 0.9965, 0.9971, 0.9976, 0.9981, 0.9984, 0.9987, 0.9989, 0.9991, 0.9993, 0.9994, 0.9995, 0.9996, 0.9997, 0.9997, 0.9998, 0.9998);
    }

    .hero-bg.is-active {
        opacity: 1;
    }

    .hero-container-wrapper {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        /* 1200px of content, keeping at least 32px from the screen edges */
        width: min(1200px, 100% - 64px);
        max-width: none;
        padding: calc(var(--hero-header-overlap) + 16px) 0 clamp(32px, 6vh, 60px);
        row-gap: clamp(24px, 5vh, 40px);

    }

    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
        max-width: 720px;
    }

    .hero-logo-mark {
        display: block;
        flex-shrink: 0;
        width: 53px;
        height: 60px;
        background-image: url("assets/logo-mark.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .hero-title {
        margin: 0;
        color: var(--White, #FFF);
        text-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
        font-family: Demo;
        font-size: clamp(40px, 5.6vw, 64px);
        font-style: normal;
        font-weight: 400;
        line-height: 110%; 
    }

    .hero-subtitle {
        color: var(--White, #FFF);
        font-family: Demo;
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: 130%;
        width: 100%;
        max-width: 606px;
        margin: 0;
    }

    .hero-segments-wrapper {
        display: flex;
        align-items: stretch;
        column-gap: 12px;
        width: 100%;
        max-width: 100%;
    }

    .hero-segment-item {
        display: flex;
        flex: 0 1 392px;
        min-width: 0;
        padding: 24px clamp(12px, 2vw, 24px);
        justify-content: center;
        align-items: center;
        gap: 12px;
        border-radius: 5px;
        background: rgba(0, 181, 211, 0.2);
        backdrop-filter: blur(10px);
        text-decoration: none;
        transition: background-color 0.2s;
    }

    .hero-segment-item:hover,
    .hero-segment-item:focus-visible {
        background: rgba(0, 181, 211, 0.5);
        text-decoration: none;
    }

    .hero-segment-text {
        min-width: 0;
        color: #e9f5f8;
        font-family: Inter;
        font-size: clamp(18px, 2.2vw, 24px);
        font-style: normal;
        font-weight: 500;
        line-height: 36px;
        overflow-wrap: break-word;
    }

    .hero-segment-icon {
        display: block;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 33.333px 33.333px;
    }

    .hero-segment-icon--agriculture {
        background-image: url("assets/segment-agriculture.svg");
    }

    .hero-segment-icon--ornamental-horticulture {
        background-image: url("assets/segment-ornamental-horticulture.svg");
        background-size: 32.5px 32.5px;
    }

    .hero-segment-icon--turf-landscape {
        background-image: url("assets/segment-turf-landscape.svg");
        background-size: 35px 35px;
    }

    .hero-playback {
        position: absolute;
        z-index: 2;
        top: calc(48px + var(--hero-header-overlap));
        inset-inline-end: 48px;
        width: 24px;
        height: 24px;
        padding: 0;
        cursor: pointer;
        border: 0;
        background: transparent;
    }

    .hero-playback-icon {
        display: block;
        width: 24px;
        height: 24px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .hero-playback-icon--pause {
        background-image: url("assets/pause.svg");
    }

    .hero-playback-icon--play {
        display: none;
        background-image: url("assets/play.svg");
    }

    &.is-paused .hero-playback-icon--pause {
        display: none;
    }

    &.is-paused .hero-playback-icon--play {
        display: block;
    }
}

/* The hero image runs behind the main header row when the header is transparent */
body.icl-transparent-header .hero-section {
    --hero-header-overlap: 70px;
}

@media (max-width: 768px) {
    body.icl-transparent-header .hero-section {
        --hero-header-overlap: 68px;
    }

    .hero-section {
        --hero-visible-height: 600px;

        .hero-container-wrapper {
            width: 100%;
            padding: 20px;
            row-gap: 24px;
        }
    
        .hero-content {
            width: 100%;
        }
    
        .hero-title {
            font-size: 36px;
        }
    
        .hero-subtitle {
            font-family: Inter;
            font-size: 20px;
            width: 100%;
        }
    
        .hero-segments-wrapper {
            flex-direction: column;
            row-gap: 8px;
        }

        .hero-segment-item {
            flex: 0 0 auto;
            width: 100%;
            padding: 12px 24px;
            justify-content: flex-start;
        }

        .hero-segment-text {
            font-size: 18px;
        }

        .hero-segment-icon {
            width: 32px;
            height: 32px;
            background-size: 26.667px 26.667px;
        }

        .hero-segment-icon--ornamental-horticulture {
            background-size: 26px 26px;
        }

        .hero-segment-icon--turf-landscape {
            background-size: 28px 28px;
        }

        .hero-playback {
            top: calc(30px + var(--hero-header-overlap));
            inset-inline-end: 20px;
        }
    }
}