.has-hero-layout {
    --hero-split: calc(50% + min(160px, 6vw));
    --hero-panel-color: #ffb53b;
    --hero-header-height: 84px;
}

.has-hero-layout .site-header {
    position: fixed;
    inset: 0 0 auto;
    background: transparent;
    border-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background-color .4s ease, box-shadow .4s ease;
}

.has-hero-layout .site-header--scrolled,
.has-hero-layout .is-menu-open {
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 4px 24px rgba(46, 14, 62, .06);
}

.has-hero-layout .header-inner {
    grid-template-columns: 140px minmax(0, calc(var(--hero-split) - max(0px, (100vw - var(--w)) / 2) - var(--pad) - 196px)) minmax(0, 1fr);
    gap: 28px;
}

.has-hero-layout .main-nav {
    justify-content: flex-end;
    gap: 0;
}

.has-hero-layout .header-actions {
    gap: 18px;
}

.has-hero-layout .header-phone {
    font-size: 17px;
    white-space: nowrap;
}

.has-hero-layout .header-cta {
    padding: 14px 22px;
}

.has-hero-layout .nav-link {
    position: relative;
    padding-inline: 12px;
    background: transparent;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s cubic-bezier(.22, .68, .25, 1);
    pointer-events: none;
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link--active::after {
    transform: scaleX(1);
}

.has-hero-layout .nav-link--active {
    color: var(--brand);
}

.hero {
    isolation: isolate;
}

.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 10px;
    background: var(--hero-panel-color);
    pointer-events: none;
    z-index: 0;
}

.hero-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--hero-split);
    right: 0;
    border-top-left-radius: clamp(48px, 4.6875vw, 120px);
    background: var(--hero-panel-color) url('../images/hero-grid.svg') repeat;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

.hero-panel__square {
    position: absolute;
    width: var(--square-size, 56px);
    aspect-ratio: 1;
    border-radius: 24%;
    background: rgba(255, 255, 255, .18);
    animation: hero-square-drift var(--square-speed, 18s) ease-in-out var(--square-delay, -5s) infinite alternate;
}

.hero-panel__square:nth-child(1) { top: 17%; right: 18%; --square-size: 48px; --square-speed: 19s; }
.hero-panel__square:nth-child(2) { top: 58%; right: 38%; --square-size: 72px; --square-speed: 25s; --square-delay: -13s; }
.hero-panel__square:nth-child(3) { bottom: 10%; right: 15%; --square-size: 58px; --square-speed: 22s; --square-delay: -8s; }
.hero-panel__square:nth-child(4) { top: 35%; right: 4%; --square-size: 110px; --square-speed: 30s; --square-delay: -19s; opacity: .55; }
.hero-panel__square:nth-child(5) { bottom: 25%; left: 12%; --square-size: 36px; --square-speed: 16s; --square-delay: -3s; }

.hero-inner {
    position: relative;
    z-index: 1;
    grid-template-columns: 54% 46%;
    min-height: clamp(740px, 37.5vw, 960px);
    padding-top: var(--hero-header-height);
}

.hero-content {
    padding-block: 48px 64px;
    min-width: 0;
}

.hero-h1 {
    font-size: clamp(44px, 2.3vw, 58px);
    text-transform: uppercase;
    line-height: 1.08;
    text-wrap: initial;
    margin-bottom: 28px;
}

.hero-h1__line {
    display: block;
    white-space: nowrap;
}

.hero-heart {
    display: inline-block;
    width: 1.55em;
    height: .92em;
    margin-inline: .18em .08em;
    border-radius: 999px;
    vertical-align: -.08em;
    overflow: hidden;
    animation: hero-heart-unfold 1.15s cubic-bezier(.22, .68, .25, 1) .15s backwards;
}

.hero-heart__image {
    width: 1.55em;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
}

.hero-markers {
    margin-bottom: 48px;
}

.hero-photo {
    min-width: 0;
    min-height: 0;
    padding: 0;
}

.hero-photo-img {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: calc(100% - 20px);
    max-height: none;
    object-fit: contain;
    object-position: center bottom;
}

.hero-floating {
    left: -24px;
    bottom: 80px;
}

@keyframes hero-square-drift {
    from { transform: translateY(-16px); }
    to { transform: translateY(20px); }
}

@keyframes hero-heart-unfold {
    from { width: 0; margin-inline: 0; opacity: 0; transform: translateY(5px); }
    to { width: 1.55em; margin-inline: .18em .08em; opacity: 1; transform: translateY(0); }
}

@media (max-width: 1180px) {
    .has-hero-layout .header-inner {
        padding-inline: var(--pad);
    }

    .has-hero-layout .nav-link {
        padding-inline: 8px;
        font-size: 14px;
    }

    .hero-content {
        padding-inline: 28px;
    }

    .hero-floating {
        width: 172px;
        height: 172px;
        left: -12px;
        padding: 20px;
    }

    .hero-floating-text { font-size: 13px; }
}

@media (max-width: 1080px) {
    .has-hero-layout {
        --hero-header-height: 80px;
        --hero-mobile-photo-height: clamp(340px, 62vw, 560px);
    }

    .has-hero-layout .header-inner {
        display: flex;
        padding-inline: 20px;
    }

    .has-hero-layout .main-nav { justify-content: flex-start; }

    .has-hero-layout .nav-link { padding: 12px 14px; }

    .hero-inner {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .hero-panel {
        height: calc(var(--hero-header-height) + var(--hero-mobile-photo-height));
        bottom: auto;
        border-top-left-radius: clamp(32px, 4.6875vw, 60px);
    }

    .hero-photo {
        order: -1;
        height: var(--hero-mobile-photo-height);
        aspect-ratio: auto;
        background: none;
    }

    .hero-photo-img { display: block; }

    .hero-content {
        padding: 40px 28px 48px;
    }

    .hero-h1 { font-size: clamp(28px, 4.2vw, 42px); }

    .hero-floating {
        display: grid;
        width: 144px;
        height: 144px;
        left: calc(50% - 210px);
        bottom: 24px;
        padding: 18px;
    }

    .hero-floating-text { font-size: 11px; }
}

@media (max-width: 520px) {
    .hero-content { padding-inline: 20px; }
    .hero-h1 { font-size: clamp(20px, 6.2vw, 33px); }
    .hero-floating { left: 20px; width: 124px; height: 124px; padding: 14px; }
    .hero-floating-text { font-size: 10px; }
    .hero-panel__square:nth-child(4) { --square-size: 64px; }
    .hero-markers { margin-bottom: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-heart,
    .hero-panel__square { animation: none; }
    .nav-link::after,
    .has-hero-layout .site-header { transition: none; }
}