/* Voleska About hero 2026 */

:root {
    --voleska-about-sky: #0cbee6;
    --voleska-about-ink: #111114;
    --voleska-about-gold: #d99b32;
    --voleska-about-paper: #fffdf9;
}

.voleska-page-about-2026 {
    overflow-x: clip;
}

.voleska-page-about-2026
    [data-elementor-type="wp-page"]
    > .elementor-element:first-child {
    display: none !important;
}

.voleska-about-hero-2026 {
    position: relative;
    z-index: 0;
    display: grid;
    min-height: min(54rem, calc(100svh - 5rem));
    padding: clamp(3rem, 5vw, 5rem) 1.5rem clamp(10.5rem, 15vw, 14rem);
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 4% 18%, rgba(67, 191, 232, 0.09), transparent 17rem),
        radial-gradient(circle at 96% 32%, rgba(67, 191, 232, 0.07), transparent 19rem),
        linear-gradient(180deg, #fff 0%, var(--voleska-about-paper) 100%);
}

.voleska-about-hero-2026::before {
    position: absolute;
    inset: 0;
    z-index: -2;
    content: "";
    pointer-events: none;
    opacity: 0.34;
    background-image:
        radial-gradient(circle at 16% 22%, rgba(17, 17, 20, 0.035) 0 0.7px, transparent 0.9px),
        radial-gradient(circle at 78% 64%, rgba(17, 17, 20, 0.025) 0 0.65px, transparent 0.85px);
    background-size: 9px 9px, 13px 13px;
}

.voleska-about-hero-2026__inner {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: min(100%, 96rem);
    margin: auto;
    text-align: center;
}

.voleska-about-hero-2026__bird-wrap {
    position: relative;
    display: block;
    width: clamp(11rem, 17vw, 16rem);
    aspect-ratio: 1.18 / 1;
    margin-bottom: clamp(1.1rem, 2vw, 1.8rem);
}

.voleska-about-hero-2026__wreath,
.voleska-about-hero-2026__bird,
.voleska-about-hero-2026__art {
    position: absolute;
    display: block;
    height: auto;
    object-fit: contain;
    pointer-events: none;
}

.voleska-about-hero-2026__wreath {
    inset: 0;
    width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 0.7rem 1.1rem rgba(49, 63, 75, 0.06));
}

.voleska-about-hero-2026__bird {
    top: 53%;
    left: 50%;
    z-index: 2;
    width: 55%;
    max-height: 72%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0.7rem 0.9rem rgba(49, 63, 75, 0.11));
}

.voleska-about-hero-2026__art {
    inset: 0;
    width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 0.75rem 1rem rgba(49, 63, 75, 0.09));
}

.voleska-about-hero-2026__title {
    max-width: 100%;
    margin: 0;
    color: var(--voleska-about-ink);
    font-family: var(--e-global-typography-primary-font-family, "Times New Roman", serif);
    font-size: clamp(3.75rem, 7.2vw, 7.25rem);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: -0.055em;
    text-transform: uppercase;
    text-wrap: balance;
}

.voleska-about-hero-2026__tagline {
    margin: clamp(1.4rem, 2.6vw, 2.3rem) 0 0;
    color: var(--voleska-about-gold);
    font-family: "Segoe Script", "Brush Script MT", cursive;
    font-size: clamp(1.55rem, 2.6vw, 2.45rem);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0.01em;
}

.voleska-about-hero-2026__ornament {
    display: grid;
    grid-template-columns: minmax(3rem, 8.5rem) auto minmax(3rem, 8.5rem);
    gap: 0.9rem;
    align-items: center;
    width: min(26rem, 75vw);
    margin-top: 1.1rem;
    color: var(--voleska-about-gold);
}

.voleska-about-hero-2026__ornament::before,
.voleska-about-hero-2026__ornament::after {
    height: 1px;
    content: "";
    background: currentColor;
    opacity: 0.8;
}

.voleska-about-hero-2026__heart {
    font-size: 1.65rem;
    line-height: 1;
    transform: translateY(-0.05em);
}

.voleska-about-hero-2026__divider-cloud {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: clamp(9.5rem, 14vw, 13.5rem);
    overflow: hidden;
    pointer-events: none;
    background: var(--voleska-about-sky);
}

.voleska-about-hero-2026__divider-cloud svg {
    display: block;
    width: 100%;
    height: 100%;
}

.voleska-about-hero-2026__divider-cloud path {
    fill: var(--voleska-about-paper);
    filter: drop-shadow(0 0.7rem 0.7rem rgba(28, 121, 157, 0.16));
}

@media (max-width: 61.99rem) {
    .voleska-about-hero-2026 {
        min-height: 43rem;
        padding-top: 3.2rem;
    }

    .voleska-about-hero-2026__title {
        font-size: clamp(3.2rem, 8vw, 5.1rem);
    }
}

@media (max-width: 47.99rem) {
    .voleska-about-hero-2026 {
        min-height: 39rem;
        padding: 2.5rem 1rem 8.75rem;
    }

    .voleska-about-hero-2026__bird-wrap {
        width: clamp(9rem, 43vw, 11.5rem);
        margin-bottom: 1rem;
    }

    .voleska-about-hero-2026__title {
        max-width: 21rem;
        font-size: clamp(2.75rem, 14vw, 4rem);
        line-height: 0.98;
        letter-spacing: -0.045em;
    }

    .voleska-about-hero-2026__tagline {
        max-width: 20rem;
        font-size: clamp(1.25rem, 6vw, 1.65rem);
    }

    .voleska-about-hero-2026__ornament {
        width: min(18rem, 82vw);
    }

    .voleska-about-hero-2026__divider-cloud {
        height: 7.5rem;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .voleska-about-hero-2026__bird-wrap,
    .voleska-about-hero-2026__title,
    .voleska-about-hero-2026__tagline,
    .voleska-about-hero-2026__ornament {
        opacity: 0;
        animation: voleska-about-hero-enter 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .voleska-about-hero-2026__title {
        animation-delay: 80ms;
    }

    .voleska-about-hero-2026__tagline {
        animation-delay: 150ms;
    }

    .voleska-about-hero-2026__ornament {
        animation-delay: 210ms;
    }
}

@keyframes voleska-about-hero-enter {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* BEGIN ABOUT HERO PREVIEW CLOUD DIVIDER */

/*
 * Irregular paper-cloud silhouette from the approved preview.
 * The divider remains at the bottom of the full-height hero and is
 * discovered only as the visitor begins to scroll.
 */
.voleska-about-hero-2026__divider-cloud {
    height: clamp(10.5rem, 15vw, 14.5rem);
}

.voleska-about-hero-2026__divider-cloud svg {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: block;
    width: 100%;
    min-width: 70rem;
    height: 100%;
    transform: translateX(-50%);
}

.voleska-about-hero-2026__cloud-shadow {
    fill: rgba(129, 207, 237, 0.55);
}

.voleska-about-hero-2026__cloud-paper {
    fill: var(--voleska-about-paper);
    filter: drop-shadow(
        0 0.6rem 0.7rem rgba(28, 121, 157, 0.14)
    );
}

@media (max-width: 47.99rem) {
    .voleska-about-hero-2026__divider-cloud {
        height: 8.5rem;
    }

    .voleska-about-hero-2026__divider-cloud svg {
        width: auto;
        min-width: 58rem;
    }
}

/* END ABOUT HERO PREVIEW CLOUD DIVIDER */

/* BEGIN ABOUT SKY COLOR AND CLOUD SHADOW */

/*
 * One canonical blue across the About-page sky surfaces.
 * The shadow remains a separate translucent paper-edge layer, so it
 * stays visible instead of blending into the sky.
 */
:root {
    --voleska-about-sky: #0cbee6;
}

.voleska-about-hero-2026__divider-cloud {
    background: var(--voleska-about-sky) !important;
}

.voleska-about-hero-2026__cloud-shadow {
    fill: rgba(129, 207, 237, 0.55) !important;
}

.voleska-about-hero-2026__cloud-paper {
    filter: drop-shadow(
        0 0.6rem 0.7rem rgba(28, 121, 157, 0.14)
    );
}

/* END ABOUT SKY COLOR AND CLOUD SHADOW */

/* BEGIN ABOUT HERO TITLE SHADOW POLISH */

/*
 * A restrained navy softness separates the serif title from the paper
 * without making the typography look embossed or dated.
 */
body.voleska-page-about-2026
    .voleska-about-hero-2026__title {
    text-shadow: 0 2px 8px rgba(21, 57, 113, 0.10);
}

/* END ABOUT HERO TITLE SHADOW POLISH */

/* BEGIN ABOUT HERO CLOUDS BELOW FOLD V24.1 */

/*
 * Keep the complete cloud divider below the first visible viewport.
 * The visitor opens on uninterrupted white/paper atmosphere; the cloud
 * boundary and blue sky are discovered only after scrolling begins.
 * The inner hero artwork is counter-lifted so its first-screen position
 * remains visually centered instead of moving down with the extra depth.
 */
.voleska-about-hero-2026 {
    --voleska-about-first-view-header-offset: 5rem;
    --voleska-about-first-view-cloud-depth: clamp(10.5rem, 15vw, 14.5rem);
    --voleska-about-first-view-reveal-buffer: 1.5rem;
    --voleska-about-first-view-content-lift: clamp(-8rem, -7.5vw, -6rem);
    min-height: max(
        43rem,
        calc(
            100svh
            - var(--voleska-about-first-view-header-offset)
            + var(--voleska-about-first-view-cloud-depth)
            + var(--voleska-about-first-view-reveal-buffer)
        )
    ) !important;
    min-height: max(
        43rem,
        calc(
            100dvh
            - var(--voleska-about-first-view-header-offset)
            + var(--voleska-about-first-view-cloud-depth)
            + var(--voleska-about-first-view-reveal-buffer)
        )
    ) !important;
}

.voleska-about-hero-2026__inner {
    translate: 0 var(--voleska-about-first-view-content-lift) !important;
}

@media (max-width: 47.99rem) {
    .voleska-about-hero-2026 {
        --voleska-about-first-view-cloud-depth: 8.5rem;
        --voleska-about-first-view-reveal-buffer: 1rem;
        --voleska-about-first-view-content-lift: -4.75rem;
        min-height: max(
            39rem,
            calc(
                100svh
                - var(--voleska-about-first-view-header-offset)
                + var(--voleska-about-first-view-cloud-depth)
                + var(--voleska-about-first-view-reveal-buffer)
            )
        ) !important;
        min-height: max(
            39rem,
            calc(
                100dvh
                - var(--voleska-about-first-view-header-offset)
                + var(--voleska-about-first-view-cloud-depth)
                + var(--voleska-about-first-view-reveal-buffer)
            )
        ) !important;
    }
}

/* END ABOUT HERO CLOUDS BELOW FOLD V24.1 */

/* BEGIN ABOUT HERO SCROLL CHEVRONS V24.3 */

/*
 * Quiet invitation to enter the blue story. V24.1 deliberately extends the
 * hero below the initial viewport by the cloud depth + reveal buffer. Using
 * those same variables places this control 2rem above the first white-screen
 * edge rather than at the literal bottom of the enlarged hero.
 */
.voleska-about-hero-2026__scroll-link {
    position: absolute;
    left: 50%;
    bottom: calc(
        var(--voleska-about-first-view-cloud-depth)
        + var(--voleska-about-first-view-reveal-buffer)
        + 2rem
    );
    z-index: 4;
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    color: var(--voleska-about-gold, #d99b32);
    text-decoration: none;
    translate: -50% 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.voleska-about-hero-2026__scroll-stack {
    display: grid;
    justify-items: center;
    gap: 0.08rem;
    animation: voleska-about-hero-scroll-drift-v24-3 3.6s ease-in-out infinite;
}

.voleska-about-hero-2026__scroll-chevron {
    display: block;
    width: 0.82rem;
    height: 0.82rem;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg);
}

.voleska-about-hero-2026__scroll-chevron +
.voleska-about-hero-2026__scroll-chevron {
    margin-top: -0.34rem;
    opacity: 0.62;
}

.voleska-about-hero-2026__scroll-link:hover {
    color: var(--voleska-about-gold, #d99b32);
    opacity: 0.82;
}

.voleska-about-hero-2026__scroll-link:focus-visible {
    outline: 1.5px solid currentColor;
    outline-offset: 0.15rem;
}

@keyframes voleska-about-hero-scroll-drift-v24-3 {
    0%,
    100% {
        transform: translateY(0);
        opacity: 0.76;
    }

    50% {
        transform: translateY(0.28rem);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .voleska-about-hero-2026__scroll-stack {
        animation: none !important;
    }
}

/* END ABOUT HERO SCROLL CHEVRONS V24.3 */