/* =============================================================================
   BM Styles — Additional CSS for Webflow project
   Covers: layout, navigation, forms, case studies, Swiper, featured toggle,
   infinity → meta logo replacement
   ============================================================================= */

   

/* --- Typography: enable stylistic set 02 (ss02) for headings and body --- */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
.menu-link {
    font-feature-settings: "ss02" 1;
}

/* --- Infinity symbol replacement: Meta logo (26px height, auto width) --- */
.bm-meta-logo {
    height: 16px;
    opacity: .5;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    @media (max-width: 768px) {
        opacity: 1;
    }
}
.case-study-details .bm-meta-logo {
    opacity: 1;
}
/* --- About content: replace emoji with custom SVG icons (mask + bg color, per-icon size) --- */
.about-content .w-richtext strong {
    opacity: 0;
}
.about-content .w-richtext strong.bm-icon-arrow,
.about-content .w-richtext strong.bm-icon-flower,
.about-content .w-richtext strong.bm-icon-heart {
    opacity: 1;
    transition: opacity 0.2s ease-out;
    display: inline-block;
    font-size: 1.1em;
    vertical-align: -0.15em;
    margin-left: .2em;
    margin-right: .2em;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.about-content .w-richtext strong.bm-icon-arrow {
    width: .9em;
    height: 0.9em;
    background-color: #0096DE;
    background-image: none;
    -webkit-mask-image: url("https://cdn.prod.website-files.com/6942bafef9dcb2edd3d67889/695aa37ba011b846bd609c62_5c1b71738d9d03500e99d7e44e81092f_arrow-right.svg");
    mask-image: url("https://cdn.prod.website-files.com/6942bafef9dcb2edd3d67889/695aa37ba011b846bd609c62_5c1b71738d9d03500e99d7e44e81092f_arrow-right.svg");
}
.about-content .w-richtext strong.bm-icon-flower {
    width: 1em;
    height: 1.06em;
    background-color: #008535;
    margin-left: 0;
    margin-bottom: -.1em;
    background-image: none;
    -webkit-mask-image: url("https://cdn.prod.website-files.com/6942bafef9dcb2edd3d67889/6996245df2aca8ddb405f46c_Flower.svg");
    mask-image: url("https://cdn.prod.website-files.com/6942bafef9dcb2edd3d67889/6996245df2aca8ddb405f46c_Flower.svg");
}
.about-content .w-richtext strong.bm-icon-heart {
    width: .9em;
    height: 1em;
    background-color: #FD322B;
    background-image: none;
    -webkit-mask-image: url("https://cdn.prod.website-files.com/6942bafef9dcb2edd3d67889/6996245ddbcac25a9dff56ce_Heart%20Empty.svg");
    mask-image: url("https://cdn.prod.website-files.com/6942bafef9dcb2edd3d67889/6996245ddbcac25a9dff56ce_Heart%20Empty.svg");
}

.placeholder-arrow {
    display: none;
}
.work-link:hover .bm-meta-logo {
    opacity: 1;
    filter: invert(1);
}

/* --- Base: prevent horizontal scroll --- */
body,
html {
    max-width: 100vw;
}
body.w-open {
    overflow: hidden;
}
@media (max-width: 479px) {
    .navbar.w-variant-9588c136-78ce-7bcb-d05b-ecc12c59c2ec {
        position: fixed !important;
    }
}
/* --- Starts-with-art: intro text color when player is open (desktop only) --- */
@media (min-width: 769px) {
    #starts-with-art .intro-text {
        transition: color 0.8s ease;
    }
    #starts-with-art {
        padding: .25vw .8vw;
        margin: -.25vw -.8vw;
        &.player-open {
            background-color: #2d2d2d;
            .intro-text {
                color: #0F733E;
                transition: none;
            }
        }
    }
    .intro-statement-container:has(#starts-with-art.player-open) > .intro-text,
    .intro-statement-container:has(#starts-with-art.player-open) .intro-service .intro-text {
        color: #fff !important;
        opacity: 0.3 !important;
    }
    .intro-statement-container:has(#starts-with-art.player-open) .intro-service .icon,
    .intro-statement-container:has(#starts-with-art.player-open) .intro-service img {
        filter: brightness(0) invert(1) !important;
        opacity: 0.3 !important;
    }
    .intro-statement-container:has(#starts-with-art.player-open) .intro-service {
        background-color: transparent !important;
        background: transparent !important;
    }
}

/* --- Player iframe: fade-in-up on enter, fade-out on leave --- */
#player-iframe-wrapper {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    @media (max-width: 991px) {
        display: none !important;
    }
}
#player-iframe-wrapper.is-visible {
    opacity: 1;
    transform: translateY(0);
}
#player-iframe-wrapper.is-leaving {
    transition-duration: 0.8s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); /* ease-out bounce (overshoot) */
}

/* --- Player iframe (mobile only): in flow, full width, 27:7 aspect ratio, margin-top --- */
@media (max-width: 768px) {
    #player-iframe-wrapper {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        aspect-ratio: 27 / 7;
        margin-top: 20px;
    }
    #player-iframe-wrapper iframe {
        width: 100% !important;
        height: 100% !important;
        display: block;
        vertical-align: top;
    }
}

/* --- Navigation menu: dim non-hovered links when any link is hovered --- */
.menu:hover .menu-link:not(:hover) {
    color: rgba(255, 255, 255, .3);
}

/* --- Webflow form: left-align success message --- */
.w-form-done {
    text-align: left !important;
}

/* --- Navigation gradient: position/opacity per nav link hover --- */
/* Each menu link moves the gradient to a different vertical position when hovered */
.navigation:has(.menu-link[href="/work"]:hover) .gradient {
    top: 0vh;
    opacity: 0.5;
}

.navigation:has(.menu-link[href="/about"]:hover) .gradient {
    top: -50vh;
    opacity: 0.5;
}

.navigation:has(.menu-link[href="/contact"]:hover) .gradient {
    top: -100vh;
    opacity: 0.5;
}

/* --- Special heading: design system variables --- */
.special-heading {
    margin-bottom: var(--_sizes---4-875rem);
    font-family: var(--_fonts---ppvalve);
    font-weight: 300;
    color: var(--white);
    max-width: 26ch;
}

/* --- Heading icon: fixed size --- */
.heading-icon {
    width: var(--_sizes---5-625rem);
    height: var(--_sizes---5-625rem);
}

/* --- Case study grid: alternating column spans (odd = 8 cols, even = 4 cols) --- */
.case-study-card:nth-child(odd) {
    grid-area: span 1 / span 8;
}

.case-study-card:nth-child(even) {
    grid-area: span 1 / span 4;
}

.services p > a:first-child:last-child,
.arrow-link {
    transition: color 0.25s ease, border-bottom-color 0.25s ease;
}

/* So text inside links transitions when we set color via JS */
.services p > a:first-child:last-child *,
.arrow-link * {
    transition: color 0.25s ease;
}

/* Arrow icon recolorable via mask (JS sets background-color and mask-image) */
.arrow-link .link-arrow-mask-wrap {
    display: inline-block;
    flex-shrink: 0;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    transition: background-color 0.25s ease;
}
.arrow-link .link-arrow-mask-wrap img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.services p > a:first-child:last-child {
    text-decoration: none;
    display: flex;
    align-items: center;
    margin: 36px 0;
    gap: 12px;
    float: right;
    border-bottom: 1px solid #fff;
    --arrow-color: #fff;
    &:after {
        content: ' ';
        display: block;
        width: 18px;
        height: 24px;
        background-color: var(--arrow-color);
        transition: background-color 0.25s ease;
        mask-image: url('https://cdn.prod.website-files.com/6942bafef9dcb2edd3d67889/69789b3e07a79cc30eae93e7_1b313ba4796089c85494dd769d245f67_Arrow-Right-01.svg');
        -webkit-mask-image: url('https://cdn.prod.website-files.com/6942bafef9dcb2edd3d67889/69789b3e07a79cc30eae93e7_1b313ba4796089c85494dd769d245f67_Arrow-Right-01.svg');
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        -webkit-mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
    }
}
.services p > a:first-child { margin-top: 0; }
.services p > a:last-child { margin-bottom: 0; }


/* --- Webflow UI overrides --- */
/* Hide nav overlay and Webflow badge in published site */
.w-nav-overlay {
    display: none !important;
}

.menu-button.w--open {
    background-color: transparent !important
}

body .w-webflow-badge {
    display: none !important
}

/* --- Swiper: testimonials — dim inactive slides, full opacity for active --- */
.swiper-testimonials .swiper-slide {
    opacity: .4;
    transition: all .3s;

    &.swiper-slide-active {
        opacity: 1;
    }
}

/* --- Swiper: case study — layout and centering (variable width, same height) --- */
.swiper-case-study {
    overflow: hidden;
}

.swiper-case-study .swiper-wrapper {
    display: flex;
    align-items: stretch;   /* Same height for all slides */
}

/* Short transition only when correcting center after slide change (avoids snap) */
.swiper-case-study.swiper-case-study--centering .swiper-wrapper {
    transition: transform 0.22s ease-out;
}

.swiper-case-study .swiper-slide {
    box-sizing: border-box;
    width: auto;
    display: flex;          /* So slide content can stretch to full height */
}

/* --- Swiper: case study — dark overlay on inactive slides, none on active --- */
.swiper-case-study .swiper-slide.swiper-slide-active:after {
    opacity: 0;
}

.swiper-case-study .swiper-slide:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
    opacity: 1;
    transition: opacity .3s ease-in-out;
}

.taster-video {
    video {
        opacity: .7;
    }
}

/* =============================================================================
   Featured toggle component (e.g. All / Featured)
   Two-option switch with animated bar “cover” and gradient hover
   ============================================================================= */

#featured-toggle {
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    width: 340px;
    background-color: #22211D;
    border-radius: 10px;
    overflow: hidden;
    height: 48px;
    position: relative;

    /* Each option takes half width; inactive is dimmed */
    .switch {
        box-sizing: border-box;
        flex: 0 0 50%;
        text-align: center;
        opacity: .3;
        color: #fff;
        cursor: pointer;
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
        &.active {
            opacity: 1;
        }
        &:hover:not(.active) {
            opacity: 1;
        }
    }
}

/* Dark bar “cover” that animates left/right to reveal gradient — 4 stacked bars for stagger effect */
#cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    display: block;

    .bar {
        width: 100%;
        height: 12px;
        box-sizing: border-box;
        position: relative;

        /* Left/right pseudo-elements form the sliding cover */
        &:before,
        &:after {
            content: '';
            display: block;
            width: 100%;
            height: 12px;
            background-color: #22211D;
            box-sizing: border-box;
            position: absolute;
            top: 0;
            right: 100%;
            transition: right 0.1s, left 0.1s;
        }

        &:after {
            left: auto;
            left: 100%;
        }

        /* Stagger each bar’s initial position (10px, 20px, 30px, 40px) */
        &:nth-child(1) {
            &:before {
                right: calc(100% - 12px)
            }

            &:after {
                left: calc(100% - 12px)
            }
        }

        &:nth-child(2) {
            &:before {
                right: calc(100% - 24px)
            }

            &:after {
                left: calc(100% - 24px)
            }
        }

        &:nth-child(3) {
            &:before {
                right: calc(100% - 36px)
            }

            &:after {
                left: calc(100% - 36px)
            }
        }

        &:nth-child(4) {
            &:before {
                right: calc(100% - 48px)
            }

            &:after {
                left: calc(100% - 48px)
            }
        }
    }
}

/* Pixel gradient (repeatable PNG) shown on hover; positioned behind toggle */
#gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 13px;
    overflow: hidden;
    background-image: url('https://cdn.prod.website-files.com/6942bafef9dcb2edd3d67889/698b150e5a97dea667b95b5c_Pixel_Gradient.png');
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: 0 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: block;
}

/* --- Featured toggle: hover and state classes (set by JS) --- */
#featured-toggle {

    /* Show gradient and darken active label on hover */
    &:hover {
        #gradient {
            opacity: 1;
        }

        .switch.active {
            color: #000;
        }
    }

    /* Left option selected: cover slides right to 50%, staggered timing */
    &.active-left {
        #cover .bar {
            &:nth-child(1n) {
                &:before {
                    right: calc(100%)
                }

                &:after {
                    left: calc(50%)
                }
            }

            &:nth-child(1) {
                &:after {
                    transition-duration: 0.3s;
                }
            }

            &:nth-child(2) {
                &:after {
                    transition-duration: 0.2s;
                }
            }
        }
    }

    /* Right option selected: cover slides left to 50%, staggered timing */
    &.active-right {
        #cover .bar {
            &:nth-child(1n) {
                &:before {
                    right: calc(47%)
                }

                &:after {
                    left: calc(100%)
                }
            }

            &:nth-child(4) {
                &:before {
                    transition-duration: 0.3s;
                }
            }

            &:nth-child(3) {
                &:before {
                    transition-duration: 0.2s;
                }
            }
        }
    }

    /* Hover “reach” right: bars extend slightly past center (for hover feedback) */
    &.reach-right {
        #cover .bar {
            &:nth-child(1) {
                &:after {
                    left: calc(50% + 24px);
                    transition-duration: 0.3s;
                }
            }

            &:nth-child(2) {
                &:after {
                    left: calc(50% + 12px);
                    transition-duration: 0.2s;
                }
            }

            &:nth-child(3) {
                &:after {
                    left: calc(50% + 0);
                    transition-duration: 0.1s;
                }
            }

            &:nth-child(4) {
                &:after {
                    left: calc(50% - 12px);
                    transition-duration: .1s;
                }
            }
        }
    }

    /* Hover “reach” left: bars extend slightly past center (for hover feedback) */
    &.reach-left {
        #cover .bar {
            &:nth-child(1) {
                &:before {
                    right: calc(47% - 12px);
                    transition-duration: .1s;
                }
            }

            &:nth-child(2) {
                &:before {
                    right: calc(47% + 0);
                    transition-duration: 0.1s;
                }
            }

            &:nth-child(3) {
                &:before {
                    right: calc(47% + 12px);
                    transition-duration: 0.2s;
                }
            }

            &:nth-child(4) {
                &:before {
                    right: calc(47% + 24px);
                    transition-duration: 0.3s;
                }
            }
        }
    }
}



/* =========================================
   Portfolio Filter Styles
   ========================================= */

.category-item {
    cursor: pointer;
    user-select: none;
    border-radius: 8px;
    background-color: #0F0F0F;

    .category-item-icon {
        filter: brightness(0) invert(1);
        opacity: .3;
    }

    .p2 {
        opacity: .3;
    }

    &.active {
        .category-item-icon {
            filter: none;
            opacity: 1;
        }

        .p2 {
            opacity: 1;
        }
    }
}

.works-everything .w-dyn-item,
.w-dyn-item[pillars] {
    transition: opacity 0.3s ease;
}

.works-everything .w-dyn-item.hidden,
.w-dyn-item.hidden {
    display: none !important;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Work tab switch: quick fade-in-up */
.works-tab-enter {
    animation: works-tab-fade-in-up 0.35s ease-out forwards;
}

@keyframes works-tab-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Wistia video player */
.fullwidth-video.w-embed {
    border-radius: 10px;
    overflow: hidden;
}

.click-for-sound-btn {
    opacity: 0 !important;
}

/* Homepage loader: default state is hidden so no flash before loader-active/loader-skipped is applied */
.a-design-tech-studio,
.background-video.apng video,
.w-variant-9588c136-78ce-7bcb-d05b-ecc12c59c2ec #menu-button,
.play-reel-container {
    opacity: 0;
}
.play-reel-container {
    visibility: hidden;
}

.loader-active .a-design-tech-studio,
.loader-active .background-video.apng video,
.loader-active #menu-button,
.loader-active .play-reel-container {
    opacity: 0 !important;
}

/* Non-loader version: show these elements (play-reel fades in on window load via home.js) */
.loader-skipped .a-design-tech-studio,
.loader-skipped .background-video.apng video,
.loader-skipped #menu-button {
    opacity: 1 !important;
}
.loader-skipped .play-reel-container {
    opacity: 0;
    visibility: hidden;
}

#static-png {
    display: none;
}
/* When loader is not playing (skipped or already seen this session), show static fallback and hide loader */
.loader-skipped #static-png {
    display: block;
}
.loader-skipped #loader-animation {
    display: none;
}
.placeholder {display: none !important;}

/* =============================================================================
   Reel popup video (Mux + Media Chrome)
   ============================================================================= */

/* Overlay: full-screen backdrop, at least 40px top/bottom so video stays in viewport */
.popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #1E1E1E  url("https://bm-scripts.vercel.app/img/Player-Background_xm.png") center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px min(1.5rem, 4vw);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    &.is-page {
        position: relative;
        z-index: 1;
        background-color: #000;
        height: calc(100vh - 80px);
        .popup-video-wrap {
            max-height: calc(100vh - 160px);
        }
        @media (max-width: 768px) {
            height: auto;
            .popup-video-wrap {
                max-height: auto;
            }
        }
    }
}
.popup-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    height: 100dvh;
}

/* Video container: always 16:9, never taller than viewport minus 80px */
.popup-video-wrap {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    width: 100%;
    max-width: calc((100vh - 80px) * 16 / 9);
    max-height: calc(100vh - 80px);
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.popup-video-wrap media-controller {
    width: 100%;
    height: 100%;
    display: block;
}
.popup-video-wrap mux-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Popup close button — outside video container, positioned over overlay */
.popup-overlay .popup-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 50%;
    background: none;
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.popup-close img {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}

/* Custom icons in Media Chrome controls */
.popup-video-wrap media-play-button img,
.popup-video-wrap media-mute-button img,
.popup-video-wrap media-fullscreen-button img {
    height: var(--media-control-height, 24px);
    width: auto;
    fill: var(--media-icon-color);
    @media (max-width: 479px) {
        height: 16px;
    }
}

/* Control bar background and hover */
.popup-video-wrap media-control-bar {
    --media-control-background: rgba(21, 21, 21, 0.7);
    --media-control-hover-background: rgba(0, 0, 0, 0.2);
    --media-secondary-color: rgba(21, 21, 21, 0.7);
}

/* Time range: grey track (unplayed), gradient progress (played). Gradient is full width and revealed as video plays (--progress-percent set by JS). */
/* Thumb: 4px x 15px white bar (replaces default circle). */
.popup-video-wrap media-time-range {
    --media-range-track-background: #666;
    --progress-percent: 0;
    --media-range-thumb-width: 4px;
    --media-range-thumb-height: 15px;
    --media-range-thumb-background: #fff;
    --media-range-thumb-border-radius: 0;
}
.popup-video-wrap media-time-range::part(progress) {
    background-image: linear-gradient(90deg, #FFF 0%, #FCED09 19.23%, #F16622 38.94%, #FAD4DE 61.54%, #2493D1 79.33%, #078442 100%);
    background-size: calc(10000% / max(1, var(--progress-percent, 1))) 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
}

/* Inline Mux player: black background, bordered video, same containment and custom controls, no overlay */
.inline-mux-player {
    position: relative;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px min(1.5rem, 4vw);
    background: #000;
}
@media (max-width: 768px) {
    .inline-mux-player {
        min-height: auto;
        padding: 1.5rem min(1.5rem, 4vw);
    }
}
/* Viewport containment: max-height 100vh - 160px; 10px border around video */
.inline-mux-player .popup-video-wrap {
    max-width: calc((100vh - 160px) * 16 / 9);
    max-height: calc(100vh - 160px);
    border: 10px solid #1E1E1E;
}
/* Video fills frame so no side bars (override --media-object-fit used by inner video) */
.inline-mux-player .popup-video-wrap media-controller {
    --media-object-fit: cover;
}
.inline-mux-player .popup-video-wrap mux-video {
    object-fit: cover;
}
@media (max-width: 768px) {
    .inline-mux-player .popup-video-wrap {
        max-height: none;
    }
}

/* Inline player: centered play button overlay (hidden when playing) */
.inline-mux-player .inline-mux-play-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.inline-mux-player .inline-mux-play-overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.inline-mux-player .inline-mux-play-overlay .inline-mux-play-icon {
    width: 80px;
    height: 80px;
    display: block;
    transition: transform 0.15s ease;
}
.inline-mux-player .inline-mux-play-overlay:hover .inline-mux-play-icon {
    transform: scale(1.1);
}

/* =============================================================================
   Team page — grid shuffle
   ============================================================================= */

@keyframes teamShuffleFadeInUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.team-grid .human-container {
    transition: opacity 0.25s ease;
}

.team-grid .human-container.shuffle-in {
    opacity: 0;
    animation: teamShuffleFadeInUp 0.4s ease forwards;
}

#rotate-team-grid {
    cursor: pointer;
}

.bg-video mux-player {    
    --controls: none;
}

/* =============================================================================
   Blog-style content — remove top/bottom margin on first/last headings
   ============================================================================= */

.blog-style h1:first-child,
.blog-style h2:first-child,
.blog-style h3:first-child,
.blog-style h4:first-child,
.blog-style h5:first-child,
.blog-style h6:first-child {
    margin-top: 0;
}

.blog-style h1:last-child,
.blog-style h2:last-child,
.blog-style h3:last-child,
.blog-style h4:last-child,
.blog-style h5:last-child,
.blog-style h6:last-child {
    margin-bottom: 0;
}

/* =============================================================================
   Newsletter form — placeholder, success heart, rotating gradient border
   ============================================================================= */

/* Remove focus outline/ring on newsletter inputs */
.newsletter-form input:focus {
    outline: none;
    box-shadow: none;
}

/* Remove focus ring on success message (Webflow may focus it for a11y, which draws the 1px border) */
.newsletter-form .success-message:focus,
.newsletter-form .w-form-done:focus,
.newsletter-form .success-message:focus *,
.newsletter-form .w-form-done:focus * {
    outline: none;
    box-shadow: none;
}

/* Override browser autofill styling on email input — match dark form look */
.newsletter-form input:-webkit-autofill,
.newsletter-form input:-webkit-autofill:hover,
.newsletter-form input:-webkit-autofill:focus,
.newsletter-form input:-webkit-autofill:active {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #000000 inset;
    box-shadow: 0 0 0 1000px #000000 inset;
    transition: background-color 9999s ease-out;
}

/* Placeholder disappears when input is focused (cursor in field) */
.newsletter-form input.text-field:focus::placeholder,
.newsletter-form #email:focus::placeholder {
    opacity: 0;
    transition: opacity 0.2s ease;
}
.newsletter-form input.text-field::placeholder,
.newsletter-form #email::placeholder {
    transition: opacity 0.2s ease;
}

/* Heart icon inside success message: opacity 0 by default, fade-in-up when form is success */
.newsletter-form .newsletter-heart,
.newsletter-form .success-message .newsletter-heart,
.newsletter-form .w-form-done .newsletter-heart {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.newsletter-form.is-success .newsletter-heart,
.newsletter-form.is-success .success-message .newsletter-heart,
.newsletter-form.is-success .w-form-done .newsletter-heart {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
/* If heart is the element right after .welcome-friend inside success message (no class needed) */
.newsletter-form .w-form-done .welcome-friend + * {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.newsletter-form.is-success .w-form-done .welcome-friend + * {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Bottom border: gradient (reversed) flows once on success, then stays 1px solid #fff. Set --newsletter-form-bg if form has a solid fill. */
.newsletter-form {
    --newsletter-form-bg: transparent;
}
.newsletter-form.is-success {
    /* Reserve 1px for bottom border so switching to .is-gradient-done doesn’t shift content */
    border-bottom: 1px solid transparent;
    /* Draw gradient in border box so it sits in the same 1px as the border — no jump when we switch to solid white */
    background-origin: border-box;
    background-clip: border-box;
    background-image:
        linear-gradient(90deg, #078442 0%, #2493D1 19.23%, #FAD4DE 38.94%, #F16622 61.54%, #FCED09 79.33%, #FFF 85%, #FFF 100%),
        linear-gradient(to bottom, var(--newsletter-form-bg) 0%, var(--newsletter-form-bg) calc(100% - 1px), transparent 0%);
    background-size: 1000% 1px, 100% 100%;
    background-position: 0% 100%, 0 0;
    background-repeat: no-repeat, no-repeat;
    animation: newsletter-bottom-gradient-once 3s linear 1 forwards;
}
.newsletter-form.is-success.is-gradient-done {
    background-origin: border-box;
    background-clip: border-box;
    background-image: linear-gradient(to bottom, var(--newsletter-form-bg) 0%, var(--newsletter-form-bg) calc(100% - 1px), transparent 0%);
    border-bottom-color: #fff; /* same 1px border, only color changes — no layout shift */
    animation: none;
}
@keyframes newsletter-bottom-gradient-once {
    /* Scroll gradient fully off so only the white tail (85–100%) is visible at the end */
    0% { background-position: 0% 100%, 0 0; }
    100% { background-position: 100% 100%, 0 0; }
}