/* ================================================================
 * Takdane reference Hero
 * Full-bleed Elementor-safe stage.  The visual hierarchy intentionally
 * follows the reference: sunset surface -> sun -> curved bands -> fruit
 * field -> right aligned content -> bottom rail.
 * ================================================================ */
.elementor-widget-tkm_hero_sunset,
.elementor-widget-tkm_hero_sunset > .elementor-widget-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tkm-hv,
.tkm-hv * {
    box-sizing: border-box;
}

.tkm-hv {
    --hv-bg: #f4a438;
    --hv-ink: #4a150c;
    --hv-sun: #ffd45a;
    --hv-band-1: #ef622a;
    --hv-band-2: #d84327;
    --hv-pad-x: 5.7vw;
    --hv-min-h: 100vh;
    --hv-content-gap: 15px;
    --hv-sun-size: 58vw;
    --hv-sun-x: 27.5%;
    --hv-sun-y: 55%;
    --hv-scene-scale: 100%;
    --hv-main-w: 78%;
    --hv-main-x: 48%;
    --hv-main-y: 51%;
    --hv-main-rotate: 0deg;
    --hv-main-z: 30;
    --hv-can-x: 50%;
    --hv-can-y: 50%;

    --hv-mx-1: 0px;
    --hv-my-1: 0px;
    --hv-mx-2: 0px;
    --hv-my-2: 0px;
    --hv-mx-3: 0px;
    --hv-my-3: 0px;
    --hv-mx-4: 0px;
    --hv-my-4: 0px;
    --hv-mx-5: 0px;
    --hv-my-5: 0px;

    position: relative;
    isolation: isolate;
    width: 100vw;
    max-width: none !important;
    min-height: max(680px, var(--hv-min-h));
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    direction: rtl;
    color: var(--hv-ink);
    background: var(--hv-bg);
    contain: paint;
    overscroll-behavior: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

.tkm-hv a {
    text-decoration: none !important;
}

.tkm-hv .hv-sun,
.tkm-hv .hv-band,
.tkm-hv .hv-field,
.tkm-hv .hv-main-stage {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

/* Main circular field on the left. */
.tkm-hv .hv-sun {
    z-index: 0;
    left: var(--hv-sun-x);
    top: var(--hv-sun-y);
    width: var(--hv-sun-size);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--hv-sun);
    transform: translate3d(-50%, -50%, 0);
    transform-origin: center;
    will-change: transform, opacity;
}

/* Oversized elliptical bands create the same uninterrupted curved horizon
 * instead of using a small border-radius card shape. */
.tkm-hv .hv-band {
    z-index: 1;
    left: 50%;
    width: 154vw;
    min-width: 1760px;
    height: 56vh;
    min-height: 390px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    transform-origin: 50% 100%;
    will-change: transform;
}

.tkm-hv .hv-band.b1 {
    bottom: -37vh;
    background: var(--hv-band-1);
    transform: translate3d(-50%,0,0) rotate(-2.5deg) scaleX(1.035);
}

.tkm-hv .hv-band.b2 {
    z-index: 2;
    bottom: -47vh;
    height: 62vh;
    background: var(--hv-band-2);
    transform: translate3d(-50%,0,0) rotate(2.35deg) scaleX(1.075);
}

/* The decorative field owns the LEFT side.  Its parent is moved by the
 * scroll timeline while each fruit gets its own pointer depth. */
.tkm-hv .hv-field {
    z-index: 3;
    top: 0;
    bottom: 0;
    left: 0;
    width: 56%;
    transform-origin: 50% 50%;
    scale: var(--hv-scene-scale);
    will-change: transform, opacity;
}

/* Primary media is isolated from the decorative field so its z-index can
 * genuinely sit above the text and bottom rail. */
.tkm-hv .hv-main-stage {
    z-index: 14;
    top: 0;
    bottom: 0;
    left: 0;
    width: 56%;
    transform-origin: 50% 50%;
    scale: var(--hv-scene-scale);
    will-change: transform, opacity;
}

.tkm-hv .hv-fruit {
    --hv-fruit-scale: 1;
    --hv-float-y: 0px;
    --hv-float-x: 0px;
    position: absolute;
    display: block;
    max-width: none !important;
    height: auto;
    overflow: visible;
    transform-origin: 50% 50%;
    will-change: transform, opacity, translate;
    backface-visibility: hidden;
    filter: none;
}

.tkm-hv .hv-fruit-image {
    object-fit: contain;
}

/* Main artwork slot: empty by default, populated only from Elementor Media. */
.tkm-hv .hv-main-image {
    z-index: 2;
    left: var(--hv-main-x);
    top: var(--hv-main-y);
    width: var(--hv-main-w);
    max-height: 88%;
    object-fit: contain;
    transform: translate3d(calc(-50% + var(--hv-mx-4)), calc(-50% + var(--hv-my-4)), 0) rotate(var(--hv-main-rotate)) scale(var(--hv-fruit-scale));
    animation: hvMainFloat 7.2s ease-in-out -1.7s infinite alternate;
}

@keyframes hvMainFloat {
    from { translate: -2px -5px; }
    to   { translate: 4px 6px; }
}

.tkm-hv.has-visual-shadow .hv-fruit {
    filter: drop-shadow(0 16px 14px rgba(74,21,12,.13));
}

/* Individual art direction. The percentages are relative to the left field,
 * so the right-hand copy remains visually clear at every desktop width. */
.tkm-hv .f1 {
    left: 8%; top: 16%; width: clamp(66px, 6.55vw, 118px);
    transform: translate3d(calc(-50% + var(--hv-mx-4)), calc(-50% + var(--hv-my-4)),0) rotate(-13deg) scale(var(--hv-fruit-scale));
    animation: hvFloatA 6.8s ease-in-out -.8s infinite alternate;
}
.tkm-hv .f2 {
    left: 39%; top: 12%; width: clamp(72px, 7.15vw, 130px);
    transform: translate3d(calc(-50% + var(--hv-mx-2)), calc(-50% + var(--hv-my-2)),0) rotate(10deg) scale(var(--hv-fruit-scale));
    animation: hvFloatB 7.4s ease-in-out -2.1s infinite alternate;
}
.tkm-hv .f3 {
    left: 76%; top: 25%; width: clamp(78px, 7.55vw, 138px);
    transform: translate3d(calc(-50% + var(--hv-mx-3)), calc(-50% + var(--hv-my-3)),0) rotate(-8deg) scale(var(--hv-fruit-scale));
    animation: hvFloatC 8.2s ease-in-out -3.2s infinite alternate;
}
.tkm-hv .f4 {
    left: 12%; top: 47%; width: clamp(74px, 7vw, 126px);
    transform: translate3d(calc(-50% + var(--hv-mx-2)), calc(-50% + var(--hv-my-2)),0) rotate(14deg) scale(var(--hv-fruit-scale));
    animation: hvFloatB 7.8s ease-in-out -1.4s infinite alternate-reverse;
}
.tkm-hv .f5 {
    left: 50%; top: 47%; width: clamp(90px, 8.7vw, 158px);
    transform: translate3d(calc(-50% + var(--hv-mx-5)), calc(-50% + var(--hv-my-5)),0) rotate(-7deg) scale(var(--hv-fruit-scale));
    animation: hvFloatA 7.1s ease-in-out -4.1s infinite alternate-reverse;
}
.tkm-hv .f6 {
    left: 85%; top: 59%; width: clamp(72px, 7.2vw, 132px);
    transform: translate3d(calc(-50% + var(--hv-mx-3)), calc(-50% + var(--hv-my-3)),0) rotate(12deg) scale(var(--hv-fruit-scale));
    animation: hvFloatC 8.5s ease-in-out -1.9s infinite alternate;
}
.tkm-hv .f7 {
    left: 25%; top: 76%; width: clamp(82px, 7.7vw, 140px);
    transform: translate3d(calc(-50% + var(--hv-mx-4)), calc(-50% + var(--hv-my-4)),0) rotate(-12deg) scale(var(--hv-fruit-scale));
    animation: hvFloatC 7.6s ease-in-out -4.8s infinite alternate-reverse;
}
.tkm-hv .f8 {
    left: 65%; top: 82%; width: clamp(82px, 8vw, 146px);
    transform: translate3d(calc(-50% + var(--hv-mx-2)), calc(-50% + var(--hv-my-2)),0) rotate(8deg) scale(var(--hv-fruit-scale));
    animation: hvFloatA 8.8s ease-in-out -2.7s infinite alternate;
}

@keyframes hvFloatA {
    from { translate: -3px -5px; }
    to   { translate: 5px 7px; }
}
@keyframes hvFloatB {
    from { translate: 3px -6px; }
    to   { translate: -4px 5px; }
}
@keyframes hvFloatC {
    from { translate: -4px 4px; }
    to   { translate: 4px -7px; }
}

/* Right-hand copy block.  No centering, no symmetric split. */
.tkm-hv .hv-content {
    position: absolute;
    z-index: 6;
    top: 48%;
    right: var(--hv-pad-x);
    width: min(45vw, 720px);
    max-width: calc(100vw - (var(--hv-pad-x) * 2));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hv-content-gap);
    margin: 0;
    padding: 0;
    text-align: right;
    transform: translate3d(0,-50%,0);
}

.tkm-hv .hv-kicker,
.tkm-hv .hv-title,
.tkm-hv .hv-sub {
    margin: 0 !important;
    padding: 0 !important;
}

.tkm-hv .hv-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--hv-ink);
    font-family: inherit;
    font-size: clamp(12px, .92vw, 15px);
    font-weight: 650;
    line-height: 1.7;
    letter-spacing: -.015em;
}

.tkm-hv .hv-kicker > span {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #d5112e;
}

.tkm-hv .hv-title {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--hv-ink);
    font-family: inherit;
    font-size: clamp(60px, 7.05vw, 126px);
    font-weight: 900;
    line-height: .88;
    letter-spacing: -.055em;
    text-align: right;
    will-change: transform, opacity;
}

.tkm-hv .hv-title > span,
.tkm-hv .hv-title > strong {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    white-space: nowrap;
}

.tkm-hv .hv-title > strong {
    color: #fff4d8;
    font-weight: 900;
}

.tkm-hv .hv-sub {
    width: min(86%, 570px);
    color: #5a2116;
    font-family: inherit;
    font-size: clamp(13px, 1.08vw, 18px);
    font-weight: 500;
    line-height: 1.9;
    letter-spacing: -.01em;
    text-align: right;
}

.tkm-hv .hv-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 51px;
    margin-top: 4px;
    padding: 8px 17px 8px 8px !important;
    border: 0;
    border-radius: 999px;
    outline: 0;
    overflow: hidden;
    color: #fff8e2;
    background: #4a150c;
    font-family: inherit;
    font-size: 13px;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
    will-change: transform, opacity;
    transition: background-color .28s ease, color .28s ease;
}

.tkm-hv .hv-cta::after {
    content: "";
    position: absolute;
    inset: -70% -35%;
    background: linear-gradient(105deg, transparent 37%, rgba(255,255,255,.18) 50%, transparent 63%);
    transform: translate3d(-115%,0,0) rotate(8deg);
    transition: transform .72s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
}

.tkm-hv .hv-cta:hover::after,
.tkm-hv .hv-cta:focus-visible::after {
    transform: translate3d(115%,0,0) rotate(8deg);
}

.tkm-hv .hv-cta > span,
.tkm-hv .hv-cta > b {
    position: relative;
    z-index: 1;
}

.tkm-hv .hv-cta b {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    color: var(--hv-ink);
    background: #ffb323;
    transition: transform .45s cubic-bezier(.22,1,.36,1);
}

.tkm-hv .hv-cta b svg {
    display: block;
    width: 15px;
    height: 15px;
}

.tkm-hv .hv-cta:hover b,
.tkm-hv .hv-cta:focus-visible b {
    transform: translate3d(-2px,2px,0) rotate(-4deg);
}

/* Bottom rail is intentionally not part of the scroll parallax. */
.tkm-hv .hv-bottom {
    position: absolute;
    z-index: 7;
    right: var(--hv-pad-x);
    left: var(--hv-pad-x);
    bottom: 30px;
    display: grid;
    grid-template-columns: auto minmax(70px,1fr) auto;
    align-items: center;
    gap: 15px;
    direction: rtl;
    color: var(--hv-ink);
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
}

.tkm-hv .hv-bottom i {
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(74,21,12,.38);
    transform-origin: right center;
}

.tkm-hv .hv-bottom span:last-child {
    direction: rtl;
    unicode-bidi: plaintext;
}

/* Keep Elementor editing handles outside the clipped visual paint where possible. */
.elementor-editor-active .tkm-hv {
    contain: layout paint;
}

@media (max-width: 1180px) {
    .tkm-hv {
        --hv-pad-x: 34px;
        --hv-sun-size: 72vw;
        --hv-sun-x: 24%;
        --hv-sun-y: 58%;
        min-height: max(680px, var(--hv-min-h));
    }

    .tkm-hv .hv-field,
    .tkm-hv .hv-main-stage { width: 55%; }
    .tkm-hv .hv-content { width: min(52vw, 620px); }
    .tkm-hv .hv-title { font-size: clamp(55px, 7.8vw, 96px); }
    .tkm-hv .hv-sub { width: min(92%, 520px); }
}

@media (max-width: 767px) {
    .tkm-hv {
        --hv-pad-x: 20px;
        --hv-sun-size: 142vw;
        --hv-sun-x: 48%;
        --hv-sun-y: 76%;
        min-height: max(660px, var(--hv-min-h));
    }

    .tkm-hv .hv-band {
        width: 245vw;
        min-width: 980px;
        height: 40vh;
        min-height: 260px;
    }

    .tkm-hv .hv-band.b1 { bottom: -26vh; }
    .tkm-hv .hv-band.b2 { bottom: -34vh; height: 44vh; }

    .tkm-hv .hv-field,
    .tkm-hv .hv-main-stage {
        top: 36%;
        bottom: 5%;
        width: 100%;
        opacity: .92;
        scale: var(--hv-scene-scale);
        transform-origin: 50% 70%;
    }

    .tkm-hv .hv-main-image {
        max-height: 72%;
    }

    .tkm-hv.hide-visual-mobile .hv-field,
    .tkm-hv.hide-visual-mobile .hv-main-stage {
        display: none !important;
    }

    .tkm-hv .hv-content {
        top: 39%;
        right: var(--hv-pad-x);
        width: calc(100% - (var(--hv-pad-x) * 2));
        max-width: none;
        gap: 12px;
    }

    .tkm-hv .hv-kicker {
        font-size: 11px;
        gap: 7px;
    }

    .tkm-hv .hv-kicker > span {
        width: 6px;
        height: 6px;
        flex-basis: 6px;
    }

    .tkm-hv .hv-title {
        font-size: clamp(46px, 15.2vw, 72px);
        line-height: .9;
        letter-spacing: -.045em;
    }

    .tkm-hv .hv-title > span,
    .tkm-hv .hv-title > strong {
        white-space: normal;
    }

    .tkm-hv .hv-sub {
        width: 88%;
        max-width: 430px;
        font-size: 12.5px;
        line-height: 1.85;
    }

    .tkm-hv .hv-cta {
        min-height: 47px;
        gap: 11px;
        padding: 7px 15px 7px 7px !important;
        font-size: 12px;
    }

    .tkm-hv .hv-cta b {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
    }

    .tkm-hv .hv-bottom {
        bottom: 18px;
        gap: 9px;
        grid-template-columns: auto minmax(30px,1fr) auto;
        font-size: 9px;
    }

    .tkm-hv.hide-bottom-mobile .hv-bottom {
        display: none !important;
    }

    /* Recompose the fruit field for portrait screens rather than simply
       shrinking the desktop positions. */
    .tkm-hv .f1 { left: 7%;  top: 19%; width: 68px; }
    .tkm-hv .f2 { left: 31%; top: 8%;  width: 74px; }
    .tkm-hv .f3 { left: 57%; top: 20%; width: 80px; }
    .tkm-hv .f4 { left: 85%; top: 12%; width: 69px; }
    .tkm-hv .f5 { left: 15%; top: 57%; width: 82px; }
    .tkm-hv .f6 { left: 42%; top: 68%; width: 76px; }
    .tkm-hv .f7 { left: 70%; top: 54%; width: 80px; }
    .tkm-hv .f8 { left: 91%; top: 75%; width: 76px; }
}


/* Fixed flight layer used by transition #5. It is intentionally outside the
 * Elementor widget stacking tree so the primary image can travel seamlessly
 * into the next widget without being clipped by the Hero overflow. */
.tkm-hero-flight {
    position: fixed !important;
    z-index: 2147482000 !important;
    left: 0;
    top: 0;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
    pointer-events: none !important;
    user-select: none !important;
    transform-origin: 50% 50%;
    will-change: left, top, width, height, transform, opacity;
    backface-visibility: hidden;
}

.tkm-hv.is-bridge-flying .hv-main-image {
    visibility: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
    .tkm-hv .hv-fruit,
    .tkm-hv .hv-cta::after,
    .tkm-hv .hv-cta b {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}

.tkm-hv.is-offscreen .hv-fruit { animation-play-state: paused !important; }

/* ================================================================
 * v1.6.0 — real scroll handoff (#5)
 * The main media owns a dedicated transform wrapper. This prevents
 * Elementor/GSAP transforms from fighting the base centering transform.
 * ================================================================ */
.tkm-hv .hv-main-stage {
    z-index: max(30, var(--hv-main-z, 30)) !important;
    overflow: visible;
}

.tkm-hv .hv-main-motion {
    position: absolute;
    z-index: 2;
    left: var(--hv-main-x);
    top: var(--hv-main-y);
    width: var(--hv-main-w);
    max-height: 90%;
    transform: translate3d(-50%,-50%,0) rotate(var(--hv-main-rotate));
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    pointer-events: none;
    backface-visibility: hidden;
}

.tkm-hv .hv-main-motion .hv-main-image {
    position: relative !important;
    z-index: 1;
    left: auto !important;
    top: auto !important;
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto;
    max-height: min(88vh, 860px);
    margin: 0 !important;
    object-fit: contain;
    transform: translate3d(var(--hv-mx-4),var(--hv-my-4),0) !important;
    transform-origin: 50% 50%;
}

.tkm-hv.is-handoff-active {
    z-index: 999;
}

/* The former fixed clone is no longer used in v1.6.0. */
.tkm-hero-flight { display: none !important; }
.tkm-hv.is-bridge-flying .hv-main-image { visibility: visible !important; }

@media (max-width: 1180px) {
    .tkm-hv .hv-main-motion .hv-main-image {
        max-height: 78vh;
    }
}

@media (max-width: 767px) {
    .tkm-hv {
        min-height: max(640px, 100svh);
        overflow: hidden;
    }

    .tkm-hv .hv-main-stage {
        top: 34%;
        bottom: 0;
        width: 100%;
    }

    .tkm-hv .hv-main-motion {
        max-height: 66%;
    }

    .tkm-hv .hv-main-motion .hv-main-image {
        max-height: 44svh;
    }

    .tkm-hv .hv-content {
        top: 35%;
        gap: 10px;
    }

    .tkm-hv .hv-title {
        font-size: clamp(44px, 14.8vw, 70px);
        line-height: .88;
    }

    .tkm-hv .hv-sub {
        width: min(88%, 390px);
        font-size: 12px;
        line-height: 1.8;
    }

    .tkm-hv .hv-bottom {
        bottom: max(16px, env(safe-area-inset-bottom));
    }
}

/* Native no-GSAP fallback for the same handoff. */
.tkm-native-flight {
    position: fixed !important;
    z-index: 2147482000 !important;
    left: 0;
    top: 0;
    display: none;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
    pointer-events: none !important;
    user-select: none !important;
    transform-origin: 50% 50%;
    will-change: left, top, width, height, transform, opacity;
}

/* ================================================================
 * v1.7.0 — native sticky mirror handoff
 * Wheel/touch scrolling stays 100% native. No JS pinning, no scroll lock.
 * ================================================================ */
.tkm-hv {
    --hv-scroll-extra: 100vh;
    contain: none;
}

.tkm-hv.has-scroll-scene {
    height: calc(max(680px, var(--hv-min-h)) + var(--hv-scroll-extra));
    min-height: calc(max(680px, var(--hv-min-h)) + var(--hv-scroll-extra));
    overflow: visible !important;
    background: transparent !important;
    isolation: isolate;
    z-index: 2;
}

.tkm-hv .hv-sticky-stage {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: max(680px, var(--hv-min-h));
    height: max(680px, var(--hv-min-h));
    overflow: hidden;
    background: transparent;
    direction: rtl;
}

.tkm-hv.has-scroll-scene .hv-sticky-stage {
    position: sticky;
    top: 0;
    z-index: 20;
    height: max(680px, var(--hv-min-h));
    min-height: max(680px, var(--hv-min-h));
    overflow: hidden;
    will-change: transform;
}

.tkm-hv .hv-base {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: var(--hv-bg);
    pointer-events: none;
    transform: translateZ(0);
    transform-origin: top center;
    will-change: clip-path;
}

/* Keep the reference scene above the peel-away surface. */
.tkm-hv .hv-sun { z-index: 1; }
.tkm-hv .hv-band { z-index: 2; }
.tkm-hv .hv-band.b2 { z-index: 3; }
.tkm-hv .hv-field { z-index: 4; }
.tkm-hv .hv-content { z-index: 8; }
.tkm-hv .hv-bottom { z-index: 9; }
.tkm-hv .hv-main-stage { z-index: max(40, var(--hv-main-z, 40)) !important; }

/* Base centering is never rewritten by scroll JS. Only this child flies. */
.tkm-hv .hv-main-motion {
    transform: translate3d(-50%,-50%,0) !important;
    opacity: 1;
}

.tkm-hv .hv-flight-motion {
    --hv-flight-x: 0px;
    --hv-flight-y: 0px;
    --hv-flight-scale: 1;
    --hv-flight-rot: 0deg;
    position: relative;
    display: block;
    width: 100%;
    transform: translate3d(var(--hv-flight-x),var(--hv-flight-y),0)
               rotate(calc(var(--hv-main-rotate) + var(--hv-flight-rot)))
               scale(var(--hv-flight-scale));
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.tkm-hv .hv-main-motion .hv-main-image {
    transform: translate3d(var(--hv-mx-4),var(--hv-my-4),0) !important;
    animation: hvMainFloat 7.2s ease-in-out -1.7s infinite alternate;
}

.tkm-hv.is-handoff-active .hv-main-stage,
.tkm-hv.is-handoff-active .hv-flight-motion {
    overflow: visible !important;
}

/* Elementor wrappers must not clip the sticky scene. */
.elementor-widget-tkm_hero_sunset,
.elementor-widget-tkm_hero_sunset > .elementor-widget-container {
    overflow: visible !important;
}

@media (max-width: 767px) {
    .tkm-hv {
        --hv-scroll-extra: 88vh;
    }

    .tkm-hv.has-scroll-scene {
        height: calc(max(640px, 100svh) + var(--hv-scroll-extra));
        min-height: calc(max(640px, 100svh) + var(--hv-scroll-extra));
    }

    .tkm-hv .hv-sticky-stage,
    .tkm-hv.has-scroll-scene .hv-sticky-stage {
        height: max(640px, 100svh);
        min-height: max(640px, 100svh);
    }

    .tkm-hv .hv-content {
        top: 32%;
        right: 18px;
        width: calc(100% - 36px);
        max-width: none;
    }

    .tkm-hv .hv-title {
        font-size: clamp(42px, 14.2vw, 68px);
        line-height: .90;
    }

    .tkm-hv .hv-sub {
        width: min(92%, 390px);
        font-size: 12px;
        line-height: 1.8;
    }

    .tkm-hv .hv-main-stage {
        top: 38%;
        bottom: 0;
        width: 100%;
    }

    .tkm-hv .hv-main-motion {
        top: 56%;
        width: min(84vw, 500px);
    }

    .tkm-hv .hv-main-motion .hv-main-image {
        max-height: 43svh;
    }

    .tkm-hv .hv-field {
        top: 40%;
        bottom: 0;
        width: 100%;
    }
}

@media (max-width: 390px) {
    .tkm-hv .hv-content {
        top: 31%;
        right: 15px;
        width: calc(100% - 30px);
    }
    .tkm-hv .hv-title { font-size: clamp(40px, 13.8vw, 60px); }
    .tkm-hv .hv-main-motion { width: min(88vw, 440px); }
}

@media (prefers-reduced-motion: reduce) {
    .tkm-hv.has-scroll-scene {
        height: max(680px, var(--hv-min-h));
        min-height: max(680px, var(--hv-min-h));
    }
    .tkm-hv.has-scroll-scene .hv-sticky-stage { position: relative; }
}
.tkm-hv.has-scroll-scene { overscroll-behavior: auto; }