.hk-hero-story {
    --hk-story-height: 300vh;
    --hk-logo-width: 310px;
    --hk-logo-top: clamp(24px, 4vh, 52px);
    --hk-girl-width: 100vw;
    --hk-girl-bottom: -30px;
    --hk-drop-width: 44px;
    --hk-copy-top: 29vh;
    --hk-initial-copy-top: 27vh;
    --hk-final-copy-top: 27vh;
    --hk-final-stage-top: 17vh;
    --hk-initial-scene-offset: 7vh;
    --hk-scroll-spacing: 24px;
    --hk-drop-start-offset-y: -16;
    --hk-scroll-icon-width: 38px;
    --hk-dot-1-width: 14px;
    --hk-dot-2-width: 9px;
    --hk-dot-3-width: 18px;
    --hk-logo-anchor-x: 50;
    --hk-logo-anchor-y: 44;
    --hk-nose-x: 50;
    --hk-nose-y: 36;
    --hk-text-color: #b689bd;
    --hk-title-color: #6d1e71;
    position: relative;
    width: 100vw;
    height: var(--hk-story-height);
    margin-left: calc(50% - 50vw);
    overflow: clip;
    background: #f8ddea;
}

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

.hk-hero-story__frame {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 620px;
    overflow: hidden;
    isolation: isolate;
    background: #f8ddea;
}

.hk-hero-story__background {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-width: 100%;
    min-height: 100%;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center;
    pointer-events: none;
}

.hk-hero-story__logo {
    position: absolute;
    z-index: 6;
    top: calc(var(--hk-logo-top) + var(--hk-initial-scene-offset, 0px));
    left: 50%;
    width: min(80vw, var(--hk-logo-width));
    opacity: var(--hk-logo-opacity, 1);
    transform: translate3d(-50%, calc((1 - var(--hk-logo-opacity, 1)) * -18px), 0);
    transition: opacity 120ms linear;
    will-change: opacity, transform;
}

.hk-hero-story__logo img,
.hk-hero-story__girl img,
.hk-hero-story__drop img {
    display: block;
    width: 100%;
    height: auto;
}

.hk-hero-story__copy {
    position: absolute;
    z-index: 5;
    top: var(--hk-copy-top);
    right: 0;
    left: 0;
    width: min(90vw, 780px);
    margin-inline: auto;
    text-align: center !important;
    will-change: opacity, transform;
}

.hk-hero-story__copy--initial {
    top: calc(var(--hk-initial-copy-top, var(--hk-copy-top)) + var(--hk-initial-scene-offset, 0px));
    opacity: var(--hk-initial-opacity, 1);
    transform: translateY(calc((1 - var(--hk-initial-opacity, 1)) * -16px));
    pointer-events: var(--hk-initial-pointer, auto);
}

.hk-hero-story__copy--final {
    top: var(--hk-final-stage-top, var(--hk-final-copy-top, var(--hk-copy-top)));
    opacity: var(--hk-final-opacity, 0);
    transform: translateY(calc((1 - var(--hk-final-opacity, 0)) * 20px));
    pointer-events: var(--hk-final-pointer, none);
}

.hk-hero-story__eyebrow {
    margin: 0;
    color: var(--hk-text-color);
    font-size: clamp(13px, 1.35vw, 22px);
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
}

.hk-hero-story__copy-inner {
    display: flex;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    flex-direction: column;
    align-items: center;
    text-align: center !important;
}

.hk-hero-story__title {
    display: block;
    width: 100% !important;
    max-width: 100%;
    margin: 10px auto 0 !important;
    padding: 0 !important;
    text-align: center !important;
    color: var(--hk-title-color);
    font-size: clamp(28px, 3.2vw, 52px);
    line-height: 1.02;
}

.hk-hero-story__description {
    max-width: 680px;
    margin: 12px auto 0;
    color: var(--hk-text-color);
    font-size: clamp(14px, 1.25vw, 20px);
    line-height: 1.45;
}

.hk-hero-story__scroll {
    display: flex;
    width: 150px;
    margin: var(--hk-scroll-spacing) auto 0;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    color: var(--hk-title-color);
    font-size: 10px;
    line-height: 1.25;
    text-transform: uppercase;
}

.hk-hero-story__scroll img {
    display: block;
    width: var(--hk-scroll-icon-width);
    height: auto;
}

.hk-hero-story__girl {
    position: absolute;
    z-index: 3;
    bottom: var(--hk-girl-bottom);
    left: 50%;
    width: var(--hk-girl-width);
    min-width: 720px;
    max-width: none;
    opacity: var(--hk-girl-opacity, 0);
    transform: translate3d(
        -50%,
        calc((1 - var(--hk-girl-progress, 0)) * 12vh),
        0
    ) scale(calc(.965 + (var(--hk-girl-progress, 0) * .035)));
    transform-origin: center bottom;
    will-change: transform, opacity;
    pointer-events: none;
}

.hk-hero-story__drop {
    position: absolute;
    z-index: 8;
    top: 0;
    left: 0;
    width: var(--hk-drop-width);
    opacity: var(--hk-drop-opacity, 0);
    visibility: hidden;
    transform: translate3d(calc(var(--hk-drop-x, 50vw) - 50%), calc(var(--hk-drop-y, 18vh) - 50%), 0);
    transition: opacity 120ms linear, visibility 0s linear 120ms;
    will-change: transform, opacity;
    pointer-events: none;
}

.hk-hero-story.is-drop-active .hk-hero-story__drop {
    visibility: visible;
    transition-delay: 0s;
}

.hk-hero-story__decor {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
}

.hk-hero-story__dot_1,
.hk-hero-story__dot_2,
.hk-hero-story__dot_3,
.hk-hero-story__sparkles {
    position: absolute;
    height: auto;
    max-width: none !important;
    object-fit: contain;
    will-change: transform;
}

.hk-hero-story__dot_1 {
    top: var(--hk-dot-1-y, 56%);
    left: var(--hk-dot-1-x, 7%);
    width: var(--hk-dot-1-width) !important;
    animation: hkHeroFloat 5.5s ease-in-out infinite;
}
.hk-hero-story__dot_2 {
    top: var(--hk-dot-2-y, 70%);
    left: var(--hk-dot-2-x, 28%);
    width: var(--hk-dot-2-width) !important;
    animation: hkHeroFloat 7s ease-in-out -1.5s infinite;
}
.hk-hero-story__dot_3 {
    top: var(--hk-dot-3-y, 76%);
    left: var(--hk-dot-3-x, 89%);
    right: auto;
    width: var(--hk-dot-3-width) !important;
    animation: hkHeroFloat 6.4s ease-in-out -2s infinite;
}

.hk-hero-story__sparkles {
    z-index: 4;
    top: var(--hk-target-y, 72vh);
    left: var(--hk-target-x, 50vw);
    width: min(78vw, 1000px);
    opacity: var(--hk-final-opacity, 0);
    transform: translate(-50%, -43%);
    transition: opacity 180ms linear;
}

@keyframes hkHeroFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Tablet profile: independent geometry and a shorter visual gap. */
@media (min-width: 768px) and (max-width: 1023px) {
    .hk-hero-story {
        --hk-story-height: 330vh;
        --hk-logo-width: 250px;
        --hk-logo-top: 3vh;
        --hk-girl-width: 138vw;
        --hk-girl-bottom: -4px;
        --hk-drop-width: 34px;
        --hk-initial-copy-top: 26vh;
        --hk-final-copy-top: 26vh;
        --hk-final-stage-top: 19vh;
        --hk-initial-scene-offset: 5vh;
        --hk-copy-top: 26vh;
        --hk-nose-x: 50;
        --hk-nose-y: 50;
        --hk-logo-anchor-y: 30;
        --hk-drop-start-offset-y: -8;
    }

    .hk-hero-story__copy { width: min(calc(100vw - 56px), 680px); }
    .hk-hero-story__girl { min-width: 0; }
    .hk-hero-story__background { object-position: center top; }
}

/* Mobile profile: compact logo/copy spacing and full-height texture. */
@media (max-width: 767px) {
    .hk-hero-story {
        --hk-story-height: 360vh;
        --hk-logo-width: 205px;
        --hk-logo-top: 4.5vh;
        --hk-girl-width: 155vw;
        --hk-girl-bottom: -2px;
        --hk-drop-width: 28px;
        --hk-initial-copy-top: 27vh;
        --hk-final-copy-top: 27vh;
        --hk-final-stage-top: 22vh;
        --hk-initial-scene-offset: 0vh;
        --hk-copy-top: 27vh;
        --hk-scroll-spacing: 12px;
        --hk-scroll-icon-width: 26px;
        --hk-nose-x: 50;
        --hk-nose-y: 54;
        --hk-logo-anchor-y: 24;
        --hk-drop-start-offset-y: -4;
        min-width: 100vw;
    }

    .hk-hero-story__frame {
        height: 100svh;
        height: 100dvh;
        min-height: 520px;
    }

    .hk-hero-story__background {
        width: 100% !important;
        height: 100% !important;
        min-width: 100%;
        min-height: 100%;
        object-fit: cover !important;
        object-position: 55% center;
    }

    .hk-hero-story__copy { width: calc(100vw - 34px); }
    .hk-hero-story__copy-inner { width: 100%; max-width: 100%; margin-inline: auto; text-align: center; }
    .hk-hero-story__eyebrow { font-size: 11px; }
    .hk-hero-story__title { font-size: clamp(25px, 8vw, 36px); line-height: 1.04; }
    .hk-hero-story__description { max-width: 34rem; font-size: 13px; line-height: 1.35; }
    .hk-hero-story__scroll { width: 130px; font-size: 9px; }
    .hk-hero-story__girl { min-width: 0; max-width: none; }
    .hk-hero-story__sparkles { width: 110vw; }
}

@media (prefers-reduced-motion: reduce) {
    .hk-hero-story__dot_1,
    .hk-hero-story__dot_2,
    .hk-hero-story__dot_3 { animation: none; }

    .hk-hero-story__girl {
        transform: translateX(-50%);
    }
}

@media (min-width: 768px) {
    /* Centre the long, single-line H1 against the viewport rather than the
       780px copy column. This avoids asymmetric overflow on desktop/tablet. */
    .hk-hero-story__title--initial {
        position: static !important;
        left: auto !important;
        width: 100vw !important;
        max-width: none !important;
        margin-right: calc(50% - 50vw) !important;
        margin-left: calc(50% - 50vw) !important;
        white-space: nowrap;
        transform: none !important;
        text-align: center !important;
    }
}