:root {
    --solar-hero-max-width: 1728px;
    --solar-hero-radius: 0 0 1.5rem 1.5rem;
}

/*
    The generated Carry Solar banners are 2048 × 1024 (2:1).
    The native ratio must be preserved because the headline, CTA artwork,
    service icons and footer strip are part of each image.
*/
.carry-solar-page {
    overflow-x: clip;
    background: #f6f8f6;
}

.solar-image-hero {
    position: relative;
    padding-bottom: clamp(1.4rem, 2.5vw, 2.5rem);
    background: #f6f8f6;
}

.solar-image-hero__visual {
    width: min(100%, var(--solar-hero-max-width));
    aspect-ratio: 2 / 1;
    margin-inline: auto;

    background-image: var(--solar-hero-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #063b2e;

    border-radius: var(--solar-hero-radius);
    box-shadow: 0 24px 65px rgba(5, 54, 39, .18);

    opacity: 1;
    transition:
        opacity .38s ease,
        filter .38s ease;
}

.solar-image-hero.is-changing .solar-image-hero__visual {
    opacity: .2;
    filter: saturate(.75);
}

.solar-image-hero__controls {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: clamp(.3rem, 1vw, .75rem);

    display: flex;
    align-items: center;
    gap: .7rem;

    padding: .5rem .65rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;

    background: rgba(4, 48, 36, .88);
    box-shadow: 0 14px 34px rgba(4, 48, 36, .2);
    backdrop-filter: blur(12px);

    transform: translateX(-50%);
}

.solar-hero-control {
    display: grid;
    place-items: center;

    width: 2.15rem;
    height: 2.15rem;
    padding: 0;

    color: #fff;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);

    transition:
        background-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.solar-hero-control:hover,
.solar-hero-control:focus-visible {
    color: #08231d;
    background: #ffbf1f;
    transform: scale(1.05);
}

.solar-hero-dots {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.solar-hero-dot {
    width: .55rem;
    height: .55rem;
    padding: 0;

    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .45);

    transition:
        width .2s ease,
        background-color .2s ease;
}

.solar-hero-dot.is-active {
    width: 1.65rem;
    background: #ffbf1f;
}

/*
    The existing calculator begins immediately after the banner.
    Its own panel shadow creates the visual transition into the workflow.
*/
.solar-image-hero + .solar-section {
    padding-top: clamp(1.5rem, 3vw, 3rem);
}

@media (min-width: 1729px) {
    .solar-image-hero__visual {
        border-radius: var(--solar-hero-radius);
    }
}

@media (max-width: 991.98px) {
    .solar-image-hero {
        padding-bottom: 1.9rem;
    }

    .solar-image-hero__visual {
        aspect-ratio: 2 / 1;
        background-size: contain;
    }
}

@media (max-width: 767.98px) {
    .solar-image-hero {
        padding-top: .75rem;
        padding-bottom: 2.4rem;
    }

    /*
        Preserve the complete banner on phones. It contains embedded text,
        so cropping with background-size: cover would make it unreadable.
    */
    .solar-image-hero__visual {
        width: calc(100% - 1rem);
        aspect-ratio: 2 / 1;
        border-radius: 1rem;
        background-size: contain;
        background-position: center;
    }

    .solar-image-hero__controls {
        bottom: .25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .solar-image-hero__visual,
    .solar-hero-control,
    .solar-hero-dot {
        transition: none;
    }
}