.gel-home-hero {
    background: var(--gel-blue-600);
    color: var(--gel-text-on-dark);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: var(--gel-home-hero-render-height, 680px);
    overflow: hidden;
    position: relative;
    width: 100vw;
}

.gel-home-hero-shapes {
    inset: 0;
    overflow: hidden;
    position: absolute;
    z-index: 1;
}

.gel-home-hero-shapes::before,
.gel-home-hero-shapes::after {
    border-radius: 999px;
    content: "";
    opacity: 0.14;
    position: absolute;
}

.gel-home-hero-shapes::before {
    background: color-mix(in srgb, var(--gel-text-on-dark) 55%, transparent);
    height: 360px;
    left: -78px;
    top: -170px;
    width: 360px;
}

.gel-home-hero-shapes::after {
    border: 74px solid color-mix(in srgb, var(--gel-text-on-dark) 18%, transparent);
    height: 520px;
    right: -120px;
    top: 210px;
    width: 520px;
}

.gel-home-hero-silhouette {
    background-image: var(--gel-home-hero-silhouette-image, none);
    background-position: center right;
    background-repeat: no-repeat;
    background-size: min(76vw, 980px) auto;
    inset: 0;
    opacity: var(--gel-home-hero-silhouette-opacity, 0);
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

.gel-home-hero-track {
    min-height: var(--gel-home-hero-render-height, 680px);
    position: relative;
    z-index: 3;
}

.gel-home-hero-slide {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--gel-text-on-dark) 8%, transparent), transparent 40%),
        var(--gel-home-hero-bg, var(--gel-blue-600));
    inset: 0;
    min-height: var(--gel-home-hero-render-height, 680px);
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    transform: translateY(28px);
    transition:
        opacity var(--gel-home-hero-transition-speed, 720ms) ease,
        transform var(--gel-home-hero-transition-speed, 720ms)
            cubic-bezier(0.2, 0.78, 0.2, 1);
}

.gel-home-hero-particles {
    height: 100%;
    inset: 0;
    opacity: var(--gel-home-hero-particle-opacity, 0.32);
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: 2;
}

.gel-home-hero[data-particles-enabled="0"] .gel-home-hero-particles {
    display: none;
}

.gel-home-hero-slide h1 {
    line-height: normal;
}

.gel-home-hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    position: relative;
    transform: translateY(0);
}

.gel-home-hero-inner {
    align-items: center;
    display: grid;
    gap: 52px;
    grid-template-columns: minmax(
            320px,
            var(--gel-home-hero-text-fr, 42fr)
        ) minmax(360px, var(--gel-home-hero-image-fr, 58fr));
    margin: 0 auto;
    min-height: var(--gel-home-hero-render-height, 680px);
    padding: 96px 0 142px;
    position: relative;
    width: min(1180px, calc(100% - 40px));
    z-index: 3;
}

.gel-home-hero-copy {
    margin-left: 0;
    max-width: min(100%, 640px);
    transform: translateX(-24px);
    transition:
        transform var(--gel-home-hero-transition-speed, 720ms)
            cubic-bezier(0.2, 0.78, 0.2, 1),
        opacity var(--gel-home-hero-transition-speed, 720ms) ease;
}

.gel-home-hero-slide.is-active .gel-home-hero-copy {
    transform: translateX(0);
}

.gel-home-hero-secondary {
    align-items: center;
    background: color-mix(in srgb, var(--gel-text-on-dark) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--gel-text-on-dark) 24%, transparent);
    border-radius: 999px;
    color: var(--gel-text-on-dark);
    display: inline-flex;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.2;
    margin: 0 0 14px;
    padding: 7px 13px;
    text-transform: uppercase;
}

.gel-home-hero h1 {
	color: var(--gel-text-on-dark);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	margin: 0;
}

.gel-home-hero--typography-custom .gel-home-hero-secondary {
    font-size: clamp(
        var(--gel-home-hero-eyebrow-size-mobile, 12px),
        1.35vw,
        var(--gel-home-hero-eyebrow-size-desktop, 16px)
    );
}

.gel-home-hero--typography-custom h1 {
    font-size: clamp(
        var(--gel-home-hero-title-size-mobile, 32px),
        3.15vw,
        var(--gel-home-hero-title-size-desktop, 57px)
    );
}

.gel-home-hero--typography-theme .gel-home-hero-secondary {
    font-family: inherit;
    font-size: inherit;
}

.gel-home-hero--typography-theme h1 {
	font-family: var(--headingsfontfamily, inherit);
	font-size: var(--h1fontsize, clamp(2.15rem, 3.15vw, 3.55rem));
	font-weight: 700;
	line-height: 1;
}

.gel-home-hero h1 strong,
.gel-home-hero h1 b {
    font-weight: 900;
}

.gel-home-hero-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 30px;
}

.gel-home-hero-primary,
.gel-home-hero-secondary-button {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 900;
    justify-content: center;
    letter-spacing: 0.2em;
    min-height: 48px;
    min-width: 118px;
    padding: 0 24px;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        background-color 200ms ease,
        color 200ms ease,
        transform 200ms ease;
}

.gel-home-hero-primary {
    background: var(--gel-white);
    border: 2px solid var(--gel-white);
    color: var(--gel-home-hero-bg, var(--gel-blue-600));
}

.gel-home-hero-secondary-button {
    background: transparent;
    border: 2px solid color-mix(in srgb, var(--gel-text-on-dark) 78%, transparent);
    color: var(--gel-text-on-dark);
    cursor: pointer;
}

.gel-home-hero-primary:hover,
.gel-home-hero-primary:focus,
.gel-home-hero-secondary-button:hover,
.gel-home-hero-secondary-button:focus {
    transform: translateY(-2px);
}

.gel-home-hero-secondary-button:hover,
.gel-home-hero-secondary-button:focus {
    background: var(--gel-white);
    color: var(--gel-home-hero-bg, var(--gel-blue-600));
}

.gel-home-hero-media {
    align-self: end;
    margin: 0;
    pointer-events: none;
    position: relative;
    transform: translate(34px, 46px) rotate(-4deg) scale(0.94);
    transition:
        transform var(--gel-home-hero-transition-speed, 720ms)
            cubic-bezier(0.2, 0.78, 0.2, 1),
        opacity var(--gel-home-hero-transition-speed, 720ms) ease;
    z-index: 7;
}

.gel-home-hero-slide.is-active .gel-home-hero-media {
    transform: translate(0, 62px) rotate(-2deg) scale(1);
}

.gel-home-hero-media img {
    display: block;
    filter: drop-shadow(0 28px 28px color-mix(in srgb, var(--gel-blue-950) 22%, transparent));
    margin: 0 auto;
    max-height: 480px;
    max-width: min(520px, 100%);
    object-fit: contain;
    width: auto;
}

.gel-home-hero-slide--float-center .gel-home-hero-media {
    transform: translate(0, 32px) rotate(2deg) scale(0.94);
}

.gel-home-hero-slide--float-center.is-active .gel-home-hero-media {
    transform: translate(-8px, 48px) rotate(1deg) scale(1);
}

.gel-home-hero-slide--float-left .gel-home-hero-media {
    transform: translate(-36px, 46px) rotate(4deg) scale(0.94);
}

.gel-home-hero-slide--float-left.is-active .gel-home-hero-media {
    transform: translate(-18px, 62px) rotate(2deg) scale(1);
}

.gel-home-hero-bullets {
    display: grid;
    gap: 12px;
    position: absolute;
    right: 26px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 8;
}

.gel-home-hero-bullets button {
    background: color-mix(in srgb, var(--gel-text-on-dark) 68%, transparent);
    border: 2px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    height: 14px;
    padding: 0;
    transition:
        background-color 200ms ease,
        border-color 200ms ease,
        transform 200ms ease;
    width: 14px;
}

.gel-home-hero-bullets button.is-active {
    background: transparent;
    border-color: color-mix(in srgb, var(--gel-text-on-dark) 86%, transparent);
    transform: scale(1.1);
}

.gel-home-hero-timer {
    align-items: center;
    color: var(--gel-text-on-dark);
    display: inline-grid;
    bottom: clamp(138px, 10vw, 184px);
    height: 38px;
    justify-items: center;
    left: clamp(18px, 2.4vw, 34px);
    position: absolute;
    width: 38px;
    z-index: 8;
}

.gel-home-hero[data-autoplay-enabled="0"] .gel-home-hero-timer {
    display: none;
}

.gel-home-hero-timer svg,
.gel-home-hero-timer span {
    grid-area: 1 / 1;
}

.gel-home-hero-timer svg {
    height: 38px;
    transform: rotate(-90deg);
    width: 38px;
}

.gel-home-hero-timer circle {
    fill: none;
    stroke-width: 3.1;
}

.gel-home-hero-timer-track {
    stroke: color-mix(in srgb, var(--gel-text-on-dark) 28%, transparent);
}

.gel-home-hero-timer-progress {
    stroke: var(--gel-text-on-dark);
    stroke-dasharray: 113.1;
    stroke-dashoffset: var(--gel-home-hero-progress-offset, 113.1);
    stroke-linecap: round;
    transition: stroke-dashoffset 120ms linear;
}

.gel-home-hero-timer span {
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1;
}

.gel-home-hero-curve {
    bottom: -2px;
    display: block;
    height: clamp(142px, 13vw, 214px);
    left: 0;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: 6;
}

.gel-home-hero-curve path {
    fill: var(--gel-white);
}

@media (prefers-reduced-motion: reduce) {
    .gel-home-hero,
    .gel-home-hero * {
        animation: none;
        transition: none;
    }

    .gel-home-hero-particles {
        display: none;
    }
}

@media (max-width: 960px) {
    .gel-home-hero,
    .gel-home-hero-track,
    .gel-home-hero-slide,
    .gel-home-hero-inner {
        min-height: var(--gel-home-hero-render-height, 720px);
    }

    .gel-home-hero-inner {
        gap: 26px;
        grid-template-columns: 1fr;
        padding: 86px 0 134px;
    }

    .gel-home-hero-copy {
        margin-left: 0;
        max-width: 640px;
    }

    .gel-home-hero-media {
        align-self: end;
        justify-self: center;
        transform: translate(0, 40px) rotate(-2deg) scale(0.96);
    }

    .gel-home-hero-slide.is-active .gel-home-hero-media,
    .gel-home-hero-slide--float-center.is-active .gel-home-hero-media,
    .gel-home-hero-slide--float-left.is-active .gel-home-hero-media {
        transform: translate(0, 44px) rotate(-1deg) scale(1);
    }

    .gel-home-hero-media img {
        max-height: 330px;
    }
}

@media (max-width: 560px) {
    .gel-home-hero,
    .gel-home-hero-track,
    .gel-home-hero-slide,
    .gel-home-hero-inner {
        min-height: var(--gel-home-hero-render-height, 720px);
    }

    .gel-home-hero-inner {
        padding: 64px 0 124px;
        width: min(100% - 28px, 1180px);
    }

    .gel-home-hero--typography-custom h1 {
        font-size: var(--gel-home-hero-title-size-mobile, 32px);
    }

    .gel-home-hero-actions {
        gap: 12px;
    }

    .gel-home-hero-primary,
    .gel-home-hero-secondary-button {
        min-height: 44px;
        min-width: 108px;
        padding: 0 18px;
    }

    .gel-home-hero-media img {
        max-height: 260px;
    }

    .gel-home-hero-bullets {
        bottom: 64px;
        display: flex;
        right: 50%;
        top: auto;
        transform: translateX(50%);
    }

    .gel-home-hero-timer {
        bottom: 130px;
        left: 18px;
        right: auto;
        top: auto;
    }

    .gel-home-hero-curve {
        height: 124px;
    }

    .gel-home-hero-silhouette {
        background-position: center bottom;
        background-size: 120vw auto;
    }
}