.custom-hero {
    --custom-hero-bg: #d0e8e4;
    --custom-hero-ink: #111111;
    --custom-hero-muted: #4f5856;
    --custom-hero-accent: #eb7025;
    box-sizing: border-box;
    width: var(--custom-hero-target-width, 100%);
    margin-top: 0;
    margin-left: calc((100% - var(--custom-hero-target-width, 100%)) / 2);
    padding: clamp(40px, 5vw, 80px) 0 0;
    font-family: Geologica, "Helvetica Neue", Arial, sans-serif;
}

.custom-hero *,
.custom-hero *::before,
.custom-hero *::after {
    box-sizing: border-box;
}

.custom-hero__viewport {
    position: relative;
    width: 100%;
    height: clamp(640px, 45.14vw, 650px);
    margin: 0 auto;
    overflow: hidden;
    background: var(--custom-hero-bg);
    isolation: isolate;
    touch-action: pan-y;
}

.custom-hero__slide {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 49%) minmax(0, 51%);
    grid-template-rows: minmax(0, 100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 420ms ease, visibility 0s linear 420ms;
}

.custom-hero__slide.is-active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.custom-hero__copy {
    position: relative;
    z-index: 4;
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    align-self: center;
    width: min(100%, 760px);
    padding-left: clamp(72px, 7vw, 120px);
    padding-right: clamp(24px, 2.8vw, 48px);
    color: var(--custom-hero-ink);
}

.custom-hero__eyebrow {
    margin: 0;
    padding-left: 13px;
    border-left: 3px solid var(--custom-hero-accent);
    font-size: clamp(12px, 0.9vw, 14px);
    font-weight: 650;
    line-height: 22px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.custom-hero__title {
    margin: 0;
    padding: 0;
    font-size: clamp(40px, 3.1vw, 58px);
    font-weight: 650;
    line-height: 1.065;
    letter-spacing: -0.03em;
    color: var(--custom-hero-ink);
}

.custom-hero__title span {
    display: block;
    white-space: nowrap;
}

.custom-hero__description {
    max-width: 760px;
    margin: 0;
    font-size: clamp(15px, 1vw, 17px);
    font-weight: 400;
    line-height: 1.58;
    color: var(--custom-hero-muted);
}

.custom-hero__description--tablet,
.custom-hero__description--mobile {
    display: none;
}

.custom-hero__actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 20px;
    margin-top: 0;
}

.custom-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 18px 20px;
    border: 2px solid var(--custom-hero-ink);
    font-family: inherit;
    font-size: clamp(13px, 0.97vw, 14px);
    font-weight: 650;
    line-height: 18px;
    letter-spacing: 0.2px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color 180ms ease, background-color 180ms ease;
}

.custom-hero__button--primary {
    color: #ffffff !important;
    background: var(--custom-hero-ink);
}

.custom-hero__button--primary:hover {
    color: var(--custom-hero-ink) !important;
    background: transparent;
}

.custom-hero__button--secondary {
    color: var(--custom-hero-ink) !important;
    background: transparent;
}

.custom-hero__button--secondary:hover {
    color: #ffffff !important;
    background: var(--custom-hero-ink);
}

.custom-hero__button:focus-visible,
.custom-hero__arrow:focus-visible {
    outline: 3px solid var(--custom-hero-accent);
    outline-offset: 3px;
}

.custom-hero__art {
    position: relative;
    z-index: 2;
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    place-items: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.custom-hero__art img {
    position: relative;
    display: block;
    max-width: none;
    object-fit: contain;
    opacity: 0;
}

.custom-hero__circle {
    position: relative;
    grid-area: 1 / 1;
    display: block;
    width: min(76%, 640px);
    max-width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0;
}

.custom-hero__circle--peach {
    background: #f9d4bd;
}

.custom-hero__circle--white {
    background: #ffffff;
}

.custom-hero__art--entrance {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: clamp(8px, 1vw, 14px);
    padding: clamp(20px, 2.4vw, 36px) clamp(24px, 2.8vw, 42px) 0 0;
}

.custom-hero__art--entrance img {
    position: relative;
    justify-self: center;
    width: 145%;
    max-width: none;
    height: 100%;
    min-width: 0;
    object-fit: contain;
    object-position: center bottom;
}

.custom-hero__entrance-door--outside {
    --custom-enter-x: -35px;
    --custom-enter-y: 55px;
    --custom-enter-delay: 140ms;
}

.custom-hero__entrance-door--inside {
    --custom-enter-x: 35px;
    --custom-enter-y: 55px;
    --custom-enter-delay: 330ms;
}

.custom-hero__door-row {
    position: relative;
    grid-area: 1 / 1;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    justify-items: stretch;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-width: 0;
    padding-right: clamp(20px, 2vw, 32px);
    gap: clamp(5px, 0.6vw, 9px);
    transform: none;
}

.custom-hero__door-row .custom-hero__interior-door {
    position: relative;
    justify-self: center;
    width: 170%;
    max-width: none;
    height: min(90%, 585px);
}

.custom-hero__interior-door--one {
    --custom-enter-x: -38px;
    --custom-enter-y: 12px;
    --custom-enter-delay: 150ms;
}

.custom-hero__interior-door--two {
    --custom-enter-x: 0px;
    --custom-enter-y: -42px;
    --custom-enter-delay: 270ms;
}

.custom-hero__interior-door--three {
    --custom-enter-x: 38px;
    --custom-enter-y: 12px;
    --custom-enter-delay: 390ms;
    transform: scaleY(1.015);
    transform-origin: center top;
}

.custom-hero__art--hardware .custom-hero__circle {
    width: min(78%, 640px);
}

.custom-hero__handle {
    --custom-enter-x: 90px;
    --custom-enter-y: 0px;
    --custom-enter-delay: 210ms;
    grid-area: 1 / 1;
    z-index: 2;
    width: min(90%, 720px);
    max-width: 100%;
    height: 90%;
    align-self: center;
    justify-self: center;
}

.custom-hero__status {
    position: absolute;
    z-index: 8;
    right: clamp(10px, 1.2vw, 20px);
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transform: translateY(-50%);
    color: var(--custom-hero-ink);
    pointer-events: none;
}

.custom-hero__status-numbers {
    display: block;
    font-size: clamp(20px, 1.75vw, 30px);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transform: rotate(-90deg);
}

.custom-hero__status-line {
    display: block;
    width: 12px;
    height: clamp(56px, 5.2vw, 75px);
    background: var(--custom-hero-accent);
}

.custom-hero__navigation {
    position: absolute;
    z-index: 10;
    right: 0;
    bottom: 0;
    display: flex;
}

.custom-hero__arrow {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(72px, 5.3vw, 90px);
    height: clamp(64px, 4.7vw, 80px);
    padding: 0;
    border: 0;
    background: #ffffff;
    color: #bfc4c3;
    cursor: pointer;
    transition: color 180ms ease, background-color 180ms ease;
}

.custom-hero__arrow + .custom-hero__arrow {
    border-left: 1px solid var(--custom-hero-bg);
}

.custom-hero__arrow::before {
    content: "";
    width: 18px;
    height: 18px;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
}

.custom-hero__arrow--previous::before {
    transform: rotate(-135deg);
}

.custom-hero__arrow--next::before {
    transform: rotate(45deg);
}

.custom-hero__arrow:hover {
    color: var(--custom-hero-ink);
}

.custom-hero__slide.is-active .custom-hero__copy > * {
    animation: customHeroCopyIn 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.custom-hero__slide.is-active .custom-hero__copy > :nth-child(2) {
    animation-delay: 90ms;
}

.custom-hero__slide.is-active .custom-hero__copy > :nth-child(3),
.custom-hero__slide.is-active .custom-hero__copy > :nth-child(4),
.custom-hero__slide.is-active .custom-hero__copy > :nth-child(5) {
    animation-delay: 170ms;
}

.custom-hero__slide.is-active .custom-hero__copy > :last-child {
    animation-delay: 250ms;
}

.custom-hero__slide.is-active .custom-hero__art img {
    animation: customHeroArtIn 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--custom-enter-delay, 120ms) both;
}

.custom-hero__slide.is-active .custom-hero__circle {
    animation: customHeroCircleIn 820ms cubic-bezier(0.22, 1, 0.36, 1) 100ms both;
}

@keyframes customHeroCopyIn {
    from { opacity: 0; transform: translateX(-34px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes customHeroArtIn {
    from { opacity: 0; translate: var(--custom-enter-x, 0) var(--custom-enter-y, 0); }
    to { opacity: 1; translate: 0 0; }
}

@keyframes customHeroCircleIn {
    from { opacity: 0; transform: scale(0.88); }
    to { opacity: 1; transform: scale(1); }
}

@media (min-width: 1025px) and (max-width: 1239px) {
    .custom-hero__viewport {
        height: clamp(430px, 48vw, 595px);
    }

    .custom-hero__slide {
        grid-template-columns: minmax(0, 55%) minmax(0, 45%);
    }

    .custom-hero__copy {
        padding-left: clamp(50px, 5vw, 62px);
        padding-right: 18px;
    }

    .custom-hero__eyebrow {
        margin-bottom: 0;
    }

    .custom-hero__title {
        font-size: clamp(36px, 3.7vw, 46px);
    }

    .custom-hero__description {
        margin-top: 0;
        font-size: clamp(13px, 1.25vw, 15px);
    }

    .custom-hero__actions {
        gap: 12px;
        margin-top: 0;
    }

    .custom-hero__button {
        min-height: 44px;
        padding: 12px 14px;
        font-size: 12px;
    }

    .custom-hero__art--entrance {
        gap: 8px;
        padding: 16px 26px 0 0;
    }

    .custom-hero__door-row {
        gap: 7px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .custom-hero {
        margin-top: 0;
        padding: clamp(32px, 5vw, 52px) 0 0;
    }

    .custom-hero__viewport {
        height: 370px;
    }

    .custom-hero__slide {
        grid-template-columns: minmax(0, 55%) minmax(0, 45%);
    }

    .custom-hero__copy {
        padding-left: clamp(28px, 5vw, 50px);
        padding-right: 14px;
    }

    .custom-hero__eyebrow {
        margin-bottom: 0;
        padding-left: 10px;
        font-size: clamp(10px, 1.3vw, 13px);
        line-height: 18px;
    }

    .custom-hero__title {
        font-size: clamp(28px, 3.8vw, 39px);
        line-height: 1.04;
        letter-spacing: -0.035em;
    }

    .custom-hero__description--desktop,
    .custom-hero__description--mobile {
        display: none;
    }

    .custom-hero__description--tablet {
        display: block;
    }

    .custom-hero__description {
        margin-top: 0;
        font-size: clamp(11px, 1.45vw, 14px);
        line-height: 1.55;
    }

    .custom-hero__actions {
        gap: clamp(8px, 1.2vw, 12px);
        margin-top: 0;
    }

    .custom-hero__button {
        min-height: 36px;
        padding: 8px clamp(9px, 1.2vw, 12px);
        font-size: clamp(10px, 1.2vw, 12px);
        line-height: 16px;
    }

    .custom-hero__art--entrance {
        gap: clamp(6px, 0.8vw, 8px);
        padding: 8px 40px 0 0;
    }

    .custom-hero__art--entrance img {
        width: 150%;
        height: 100%;
    }

    .custom-hero__circle {
        width: min(92%, 330px);
    }

    .custom-hero__door-row {
        width: 100%;
        padding-right: 20px;
        gap: clamp(5px, 0.75vw, 7px);
        transform: none;
    }

    .custom-hero__door-row .custom-hero__interior-door {
        height: 90%;
    }

    .custom-hero__art--hardware .custom-hero__circle {
        width: min(90%, 320px);
    }

    .custom-hero__handle {
        width: 88%;
        height: 88%;
    }

    .custom-hero__status {
        right: 8px;
        gap: 8px;
    }

    .custom-hero__status-numbers {
        font-size: clamp(16px, 2vw, 20px);
    }

    .custom-hero__status-line {
        width: 10px;
        height: 52px;
    }

    .custom-hero__arrow {
        width: clamp(48px, 6vw, 58px);
        height: clamp(48px, 6vw, 58px);
    }

    .custom-hero__arrow::before {
        width: 13px;
        height: 13px;
        border-width: 2px 2px 0 0;
    }
}

@media (max-width: 767px) {
    .custom-hero {
        margin-top: 0;
        padding: 30px 0 0;
    }

    .custom-hero__viewport {
        height: clamp(520px, 138vw, 570px);
    }

    .custom-hero__slide {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        gap: 12px;
        padding: 30px 15px 18px;
    }

    .custom-hero__copy {
        position: relative;
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        width: 100%;
        padding: 0;
    }

    .custom-hero__eyebrow {
        margin-bottom: 0;
        padding-left: 10px;
        font-size: 10px;
        line-height: 16px;
        letter-spacing: 1px;
    }

    .custom-hero__title {
        font-size: clamp(24px, 7.2vw, 28px);
        line-height: 1.06;
        letter-spacing: -0.035em;
    }

    .custom-hero__description--desktop,
    .custom-hero__description--tablet {
        display: none;
    }

    .custom-hero__description--mobile {
        display: block;
    }

    .custom-hero__description {
        max-width: calc(100% - 4px);
        margin-top: 0;
        font-size: clamp(11px, 3.15vw, 13px);
        line-height: 1.5;
    }

    .custom-hero__actions {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 0;
    }

    .custom-hero__button {
        min-height: 36px;
        padding: 8px;
        font-size: clamp(9.5px, 2.65vw, 10.5px);
        line-height: 16px;
    }

    .custom-hero__art {
        position: relative;
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        height: 100%;
    }

    .custom-hero__art--entrance {
        align-self: end;
        height: min(100%, 270px);
        gap: 6px;
        padding: 0 20px 0 0;
    }

    .custom-hero__art--entrance img {
        width: 140%;
        height: 100%;
    }

    .custom-hero__circle,
    .custom-hero__art--hardware .custom-hero__circle {
        width: 200px;
    }

    .custom-hero__door-row {
        width: 100%;
        padding-right: 20px;
        gap: 5px;
        transform: none;
    }

    .custom-hero__door-row .custom-hero__interior-door {
        width: 170%;
        height: 90%;
    }

    .custom-hero__handle {
        width: min(90%, 306px);
        height: 90%;
    }

    .custom-hero__status {
        right: 8px;
        top: auto;
        bottom: 117px;
        gap: 6px;
        transform: none;
    }

    .custom-hero__status-numbers {
        font-size: 14px;
    }

    .custom-hero__status-line {
        width: 8px;
        height: 38px;
    }

    .custom-hero__navigation {
        right: 15px;
        bottom: 20px;
    }

    .custom-hero__arrow {
        width: 44px;
        height: 44px;
    }

    .custom-hero__arrow::before {
        width: 11px;
        height: 11px;
        border-width: 2px 2px 0 0;
    }
}

@media (max-width: 359px) {
    .custom-hero__viewport {
        height: 570px;
    }

    .custom-hero__actions {
        max-width: 270px;
    }

    .custom-hero__art {
        min-height: 190px;
    }
}

@media (min-width: 1025px) {
    .homepage-custom-hero .custom-hero {
        padding-top: 0;
    }

    .homepage-custom-hero .custom-hero__actions {
        margin-top: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .custom-hero__slide,
    .custom-hero__button,
    .custom-hero__arrow {
        transition: none;
    }

    .custom-hero__slide.is-active .custom-hero__copy > *,
    .custom-hero__slide.is-active .custom-hero__art img,
    .custom-hero__slide.is-active .custom-hero__circle {
        animation: none;
        opacity: 1;
        translate: none;
    }
}

.heroslider-spacer {
    height: clamp(64px, 8vw, 128px);
}