:root {
    --bf-orange: #ff6600;
    --bf-white: #ffffff;
    --bf-black: #030403;
    --bf-pad: clamp(1.5rem, 6.25vw, 6rem);
    --bf-edge-peek: 32px;
    --bf-featured-w: clamp(19rem, 23vw, 22rem);
    --bf-secondary-w: clamp(14rem, 18vw, 17.5rem);
    --bf-card-h: clamp(20rem, 30vw, 28.75rem);
    --bf-radius: 1.45rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

.bf-skip-link {
    position: fixed;
    left: 1rem;
    top: 1rem;
    z-index: 1000;
    transform: translateY(-150%);
    background: var(--bf-white);
    color: var(--bf-black);
    padding: .75rem 1rem;
    border-radius: .5rem;
}

.bf-skip-link:focus { transform: translateY(0); }

.bf-hero {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    isolation: isolate;
    background: var(--bf-black);
}

.bf-hero__bg,
.bf-hero__bg-layer {
    position: absolute;
    inset: 0;
}

.bf-hero__bg-layer {
    opacity: 0;
    background-image: none;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: scale(1.05);
    will-change: opacity, transform;
    transition: opacity 620ms ease, transform 2200ms cubic-bezier(.16, .82, .24, 1);
}

.bf-hero__bg-layer.is-active {
    opacity: 1;
    transform: scale(1);
    animation: bf-hero-bg-scale-down 3200ms cubic-bezier(.16, .82, .24, 1) both;
}

@keyframes bf-hero-bg-scale-down {
    from {
        transform: scale(1.05);
    }
    to {
        transform: scale(1);
    }
}

.bf-hero__bg::after {
    content: none;
}

.bf-topnav {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(2rem, 4.7vw, 5rem) var(--bf-pad) 0;
}

.bf-logo {
    color: var(--bf-white);
    text-decoration: none;
    font-size: clamp(1.55rem, 2.5vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -.018em;
    line-height: 1;
}

.bf-menu {
    display: flex;
    align-items: center;
    gap: clamp(1.15rem, 2vw, 2rem);
    list-style: none;
    padding: 0;
    margin: 0;
}

.bf-menu a {
    color: var(--bf-white);
    text-decoration: none;
    font-weight: 700;
    font-size: clamp(.88rem, .96vw, 1rem);
    letter-spacing: -.006em;
    text-shadow: 0 2px 16px rgba(0,0,0,.38);
}

.bf-hero__content {
    position: relative;
    z-index: 15;
    width: min(47vw, 42rem);
    padding-left: var(--bf-pad);
    padding-top: clamp(6.5rem, 14vh, 9.25rem);
    pointer-events: none;
}

.bf-hero__copy {
    position: relative;
}

.bf-copy-panel {
    transition:
        opacity 300ms ease,
        transform 300ms cubic-bezier(.22, .68, .18, 1);
    will-change: opacity, transform;
}

.bf-copy-panel--current {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.bf-copy-panel--next {
    position: absolute;
    inset: 0 0 auto 0;
    opacity: 0;
    transform: translate3d(0, 0, 0);
    pointer-events: none;
}

.bf-copy-panel--current.is-leaving-left {
    opacity: 0;
    transform: translate3d(-34px, 0, 0);
}

.bf-copy-panel--current.is-leaving-right {
    opacity: 0;
    transform: translate3d(34px, 0, 0);
}

.bf-copy-panel--current.is-preparing-enter {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    transition: none;
}

.bf-hero__title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(3.15rem, 5.15vw, 5.25rem);
    line-height: .97;
    font-weight: 700;
    letter-spacing: -.035em;
    text-wrap: balance;
    text-shadow: 0 5px 36px rgba(0,0,0,.34);
}

.bf-hero__text {
    max-width: 40rem;
    color: #ffffff;
    margin: clamp(1.6rem, 3.7vh, 2.35rem) 0 0;
    font-size: clamp(1.05rem, 1.45vw, 1.32rem);
    line-height: 1.34;
    font-weight: 400;
    letter-spacing: -.007em;
    text-shadow: 0 2px 20px rgba(0,0,0,.5);
}

.bf-hero__actions {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-top: clamp(2.6rem, 7vh, 4.4rem);
    pointer-events: auto;
}

.bf-hero__controls {
    display: inline-flex;
    align-items: center;
    gap: .86rem;
    min-height: 3rem;
    padding: .65rem 1.1rem;
    border-radius: 999px;
    background: rgba(255,255,255,.17);
    backdrop-filter: blur(18px);
    box-shadow: 0 12px 44px rgba(0,0,0,.22);
}

.bf-work-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    min-height: 3rem;
    padding: .65rem 1.8rem;
    border-radius: 999px;
    color: var(--bf-white);
    background: var(--bf-hero-cta-color, var(--bf-orange));
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.008em;
    box-shadow: 0 14px 38px rgba(0,0,0,.22);
}

.bf-home-control,
.bf-dot {
    appearance: none;
    border: 0;
    color: var(--bf-white);
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.bf-home-control {
    display: grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    font-size: 1.18rem;
    line-height: 1;
}

.bf-control-divider {
    width: 1px;
    height: 1.75rem;
    background: rgba(255,255,255,.75);
    margin: 0 .2rem;
}

.bf-dot {
    width: .78rem;
    height: .78rem;
    border-radius: 999px;
    border: 1.7px solid rgba(255,255,255,.9);
}

.bf-dot.is-active,
.bf-home-control.is-active {
    background: var(--bf-white);
    color: var(--bf-black);
    border-radius: 999px;
}

.bf-work-button.is-hidden {
    display: none;
}

.bf-home-control:focus-visible,
.bf-dot:focus-visible,
.bf-card:focus-visible,
.bf-work-button:focus-visible {
    outline: 3px solid var(--bf-orange);
    outline-offset: 4px;
}

.bf-card-stage {
    position: absolute;
    z-index: 18;
    inset-inline: 0;
    top: clamp(13rem, 24vh, 16rem);
    height: var(--bf-card-h);
    pointer-events: none;
}

.bf-card-track {
    position: absolute;
    inset: 0;
    height: var(--bf-card-h);
    pointer-events: none;
}

.bf-card {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--bf-card-width, var(--bf-secondary-w));
    height: var(--bf-card-h);
    display: flex;
    align-items: flex-end;
    min-width: 0;
    padding: clamp(1.3rem, 2.3vw, 2rem);
    overflow: hidden;
    border: 0;
    border-radius: var(--bf-radius);
    color: var(--bf-white);
    text-align: left;
    background-image: none;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: 0 20px 80px rgba(0,0,0,.34);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(var(--bf-card-x, 120vw), 0, 0);
    will-change: transform, width, opacity;
    transition:
        transform 660ms cubic-bezier(.18, .82, .18, 1),
        width 660ms cubic-bezier(.18, .82, .18, 1),
        opacity 320ms ease,
        box-shadow 620ms ease;
}

.bf-card.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.bf-card.is-departing-to-left,
.bf-card.is-departing-to-right {
    opacity: .12;
}

.bf-card.is-featured {
    --bf-card-width: var(--bf-featured-w);
    z-index: 5;
    box-shadow: 0 30px 110px rgba(0,0,0,.46);
}

.bf-card.is-secondary {
    --bf-card-width: var(--bf-secondary-w);
    z-index: 4;
}

.bf-card.is-left-peek,
.bf-card.is-right-peek {
    --bf-card-width: var(--bf-secondary-w);
    z-index: 3;
    box-shadow: 0 18px 70px rgba(0,0,0,.32);
}

.bf-card__shade {
    position: absolute;
    inset: 0;
    background: var(--bf-card-overlay, linear-gradient(180deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,.16) 46%, rgba(0,0,0,.72) 100%));
    pointer-events: none;
}

.bf-card__body {
    position: relative;
    z-index: 2;
    display: block;
    max-width: 100%;
}

.bf-card__title {
    display: block;
    font-size: clamp(1.45rem, 2.05vw, 1.9rem);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.022em;
    text-shadow: 0 2px 16px rgba(0,0,0,.48);
}

.bf-card__text {
    display: block;
    margin-top: .8rem;
    max-height: 7rem;
    overflow: hidden;
    font-size: clamp(.92rem, 1.03vw, 1rem);
    line-height: 1.25;
    font-weight: 400;
    letter-spacing: -.006em;
    text-shadow: 0 2px 16px rgba(0,0,0,.5);
    opacity: 1;
    transition: none;
}

.bf-card.is-secondary .bf-card__text {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    transition: none;
}

.bf-card.is-left-peek .bf-card__body,
.bf-card.is-right-peek .bf-card__body {
    opacity: 0;
}

.bf-card.is-secondary .bf-card__title {
    font-size: clamp(1.25rem, 1.75vw, 1.55rem);
}

.bf-beta-content {
    background: #101211;
    color: var(--bf-white);
    padding: clamp(3rem, 8vw, 7rem) var(--bf-pad);
}

.bf-beta-panel {
    max-width: 68rem;
    margin: 0 auto 3rem;
    font-size: 1.15rem;
    line-height: 1.55;
}

@media (max-width: 980px) {
    .bf-menu { display: none; }

    .bf-hero {
        min-height: 100svh;
        padding-bottom: 3rem;
    }

    .bf-hero__content {
        width: auto;
        max-width: 44rem;
        padding-right: var(--bf-pad);
        padding-top: clamp(5rem, 12vh, 7rem);
    }

    .bf-hero__title {
        font-size: clamp(2.85rem, 11vw, 4.6rem);
    }

    .bf-hero__actions {
        flex-wrap: wrap;
    }

    .bf-card-stage {
        position: relative;
        z-index: 19;
        top: auto;
        height: 20rem;
        margin-top: 3rem;
    }
}

@media (max-width: 680px) {
    :root {
        --bf-featured-w: 72vw;
        --bf-secondary-w: 58vw;
        --bf-card-h: 19rem;
    }

    .bf-topnav {
        padding-top: 1.5rem;
    }

    .bf-hero__text {
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}


/* v9: single-panel copy transition. The incoming copy fades to the stable base state. */
.bf-copy-panel--next {
    display: none;
}

.bf-hero__text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* v10: freeze the existing left peek during forward/right-card clicks. */
.bf-card.is-frozen-left-peek {
    z-index: 2;
}

.bf-card.bf-no-transition {
    transition: none !important;
}

/* v11: align stable controls with the card baseline, reduce blurb size, and let cards move as a linear carousel. */
:root {
    --bf-card-top: clamp(13rem, 24vh, 16rem);
    --bf-control-h: 3rem;
}

.bf-hero__content {
    position: static;
    z-index: auto;
    width: auto;
    padding: 0;
    pointer-events: none;
}

.bf-hero__copy {
    position: absolute;
    z-index: 15;
    left: var(--bf-pad);
    top: clamp(13.25rem, 22vh, 18rem);
    width: min(47vw, 42rem);
    pointer-events: none;
}

.bf-hero__actions {
    position: absolute;
    z-index: 22;
    left: var(--bf-pad);
    top: calc(var(--bf-card-top) + var(--bf-card-h) - var(--bf-control-h));
    margin-top: 0;
    min-height: var(--bf-control-h);
}

.bf-card-stage {
    top: var(--bf-card-top);
}

.bf-hero__text {
    max-width: 34rem;
    font-size: clamp(.92rem, 1.08vw, 1.06rem);
    line-height: 1.38;
}

.bf-card {
    opacity: 1;
}

.bf-card.is-visible {
    opacity: 1;
}

.bf-card.is-departing-to-left,
.bf-card.is-departing-to-right {
    opacity: .12;
}

@media (max-width: 980px) {
    .bf-hero__content {
        position: relative;
        z-index: 15;
        width: auto;
        max-width: 44rem;
        padding-left: var(--bf-pad);
        padding-right: var(--bf-pad);
        padding-top: clamp(5rem, 12vh, 7rem);
    }

    .bf-hero__copy {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
    }

    .bf-hero__actions {
        position: relative;
        left: auto;
        top: auto;
        margin-top: clamp(2.6rem, 7vh, 4.4rem);
    }
}

/* v12: home participates as a real carousel card, infinite looping is handled in JS, and the background settle motion is slightly longer. */

/* v13: landing starts without a left peek; featured/current card is a visual anchor, not a click target. */
.bf-card.is-featured {
    pointer-events: none;
    cursor: default;
}

.bf-card-track.is-prepping .bf-card {
    transition: none !important;
}

.bf-card:disabled,
.bf-card.is-featured {
    cursor: default;
}

.bf-card:disabled {
    pointer-events: none;
}


/* v28: rebuild card text presentation so every card uses the same layers.
   Preview text is used only for small/right cards. Featured text is used only
   for the large card, and the same animation is triggered for every slide. */
.bf-card__body {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    max-width: 100%;
}

.bf-card__preview,
.bf-card__feature {
    display: block;
    width: 100%;
}

.bf-card__preview-title,
.bf-card__feature-title {
    display: block;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.022em;
    text-shadow: 0 2px 16px rgba(0,0,0,.48);
}

.bf-card__preview-title {
    font-size: clamp(1.25rem, 1.75vw, 1.55rem);
}

.bf-card__feature-title {
    font-size: clamp(1.45rem, 2.05vw, 1.9rem);
}

.bf-card__feature-text {
    display: block;
    margin-top: .8rem;
    max-height: 7rem;
    overflow: hidden;
    font-size: clamp(.92rem, 1.03vw, 1rem);
    line-height: 1.25;
    font-weight: 400;
    letter-spacing: -.006em;
    text-shadow: 0 2px 16px rgba(0,0,0,.5);
}

/* Default small-card mode: no animation, no blurb. */
.bf-card .bf-card__feature {
    display: none;
}

.bf-card .bf-card__preview {
    display: block;
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
}

/* Featured-card mode: the preview layer is gone; the feature layer appears. */
.bf-card.is-featured .bf-card__preview {
    display: none;
}

.bf-card.is-featured .bf-card__feature {
    display: block;
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Small card title stays baseline-aligned and stable. */
.bf-card.is-secondary .bf-card__body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.bf-card.is-secondary .bf-card__preview,
.bf-card.is-secondary .bf-card__preview-title {
    animation: none !important;
    transition: none !important;
}

/* Peeks are only color slivers. */
.bf-card.is-left-peek .bf-card__body,
.bf-card.is-right-peek .bf-card__body {
    opacity: 0;
}

/* The actual reveal: added by JS only to the card becoming featured. */
.bf-card.bf-feature-enter.is-featured .bf-card__feature {
    animation: bf-feature-text-rise-v28 760ms cubic-bezier(.18, .82, .18, 1) both;
}

@keyframes bf-feature-text-rise-v28 {
    0% {
        opacity: 0;
        transform: translate3d(0, 1.65rem, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}


/* v29: Featured-card text is now one shared overlay, not a per-card
   transition. This removes slide-specific failures. Cards keep the same
   simple preview layer; the active card text always animates through this
   single stable component. */
.bf-card.is-featured .bf-card__preview {
    opacity: 0;
}

.bf-card .bf-card__feature,
.bf-card.is-featured .bf-card__feature,
.bf-card.bf-feature-enter.is-featured .bf-card__feature {
    display: none !important;
    animation: none !important;
}

.bf-feature-copy {
    position: absolute;
    z-index: 12;
    top: 0;
    left: 0;
    width: var(--bf-featured-w);
    height: var(--bf-card-h);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(1.3rem, 2.3vw, 2rem);
    color: var(--bf-white);
    pointer-events: none;
    transform: translate3d(var(--bf-feature-x, 52vw), 0, 0);
    opacity: 1;
}

.bf-feature-copy__title,
.bf-feature-copy__text {
    display: block;
    text-shadow: 0 2px 16px rgba(0,0,0,.5);
}

.bf-feature-copy__title {
    font-size: clamp(1.45rem, 2.05vw, 1.9rem);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.022em;
}

.bf-feature-copy__text {
    margin-top: .8rem;
    max-height: 7rem;
    overflow: hidden;
    font-size: clamp(.92rem, 1.03vw, 1rem);
    line-height: 1.25;
    font-weight: 400;
    letter-spacing: -.006em;
}

.bf-feature-copy.is-hidden {
    opacity: 0;
}

.bf-feature-copy.is-revealing {
    animation: bf-feature-copy-rise-v29 760ms cubic-bezier(.18, .82, .18, 1) both;
}

@keyframes bf-feature-copy-rise-v29 {
    0% {
        opacity: 0;
        transform: translate3d(var(--bf-feature-x, 52vw), 1.65rem, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(var(--bf-feature-x, 52vw), 0, 0);
    }
}


/* Bentforkz Modern integration */
.bf-hero {
    margin: 0;
}

.bf-hero__bg-layer {
    background-blend-mode: normal;
}

.admin-bar .bf-hero {
    min-height: calc(100svh - 32px);
}

@media (max-width: 782px) {
    .admin-bar .bf-hero {
        min-height: calc(100svh - 46px);
    }
}

/* v2.51: Beta hero uses only slide imagery, with white slide copy and no old global hero overlay. */
.bf-hero__title,
.bf-hero__text {
    color: #ffffff;
}

.bf-hero__bg::after {
    content: none;
    display: none;
}

.bf-hero__bg-layer {
    background-blend-mode: normal;
}


/* v2.52: optional per-slide hero overlay gradient. */
.bf-hero__bg-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bf-hero-slide-overlay, none);
    pointer-events: none;
}


/* v2.53: cleaner hero background transitions.
   Outgoing backgrounds now fade without scaling; only the incoming slide
   starts slightly enlarged and scales down to full size. */
.bf-hero__bg-layer {
    transform: scale(1);
    transition: opacity 620ms ease;
}

.bf-hero__bg-layer.is-active {
    opacity: 1;
    transform: scale(1);
    animation: none;
}

.bf-hero__bg-layer.is-incoming {
    animation: bf-hero-bg-scale-down-clean 3200ms cubic-bezier(.16, .82, .24, 1) both;
}

@keyframes bf-hero-bg-scale-down-clean {
    from {
        transform: scale(1.06);
    }
    to {
        transform: scale(1);
    }
}


/* v2.54: Stronger hero card elevation. The beta hero cards now sit higher
   above the slide background with darker, deeper shadows. */
.bf-card {
    box-shadow:
        0 30px 110px rgba(0,0,0,.58),
        0 10px 26px rgba(0,0,0,.38);
}

.bf-card.is-featured {
    box-shadow:
        0 44px 150px rgba(0,0,0,.68),
        0 16px 38px rgba(0,0,0,.46);
}

.bf-card.is-secondary {
    box-shadow:
        0 34px 120px rgba(0,0,0,.6),
        0 12px 30px rgba(0,0,0,.4);
}

.bf-card.is-left-peek,
.bf-card.is-right-peek {
    box-shadow:
        0 26px 90px rgba(0,0,0,.52),
        0 8px 22px rgba(0,0,0,.36);
}

.bf-card.is-secondary:hover,
.bf-card.is-secondary:focus-visible {
    box-shadow:
        0 42px 140px rgba(0,0,0,.68),
        0 16px 38px rgba(0,0,0,.48);
}


/* v2.55: Mobile beta hero layout based on the responsive comps.
   The mobile hero becomes a tall image panel with slide copy over it and
   a horizontal card carousel bridging into the page below. */
@media (max-width: 700px) {
    :root {
        --bf-pad: clamp(1.75rem, 7vw, 2.5rem);
        --bf-edge-peek: 1.25rem;
        --bf-featured-w: clamp(12.75rem, 52vw, 14.25rem);
        --bf-secondary-w: clamp(12.75rem, 52vw, 14.25rem);
        --bf-card-h: clamp(18rem, 39vh, 21rem);
        --bf-radius: 1.55rem;
        --bf-mobile-hero-panel-h: clamp(34rem, 66svh, 41rem);
        --bf-mobile-card-top: clamp(28rem, 58svh, 36rem);
    }

    .bf-hero {
        min-height: calc(var(--bf-mobile-card-top) + var(--bf-card-h) + 4.25rem);
        overflow: hidden;
        background: #d1d2cf;
    }

    .admin-bar .bf-hero {
        min-height: calc(var(--bf-mobile-card-top) + var(--bf-card-h) + 4.25rem);
    }

    .bf-hero__bg {
        inset: 0 0 auto 0;
        height: var(--bf-mobile-hero-panel-h);
        overflow: hidden;
        border-bottom-left-radius: 2.25rem;
        border-bottom-right-radius: 2.25rem;
        box-shadow: 0 28px 80px rgba(0,0,0,.22);
    }

    .bf-hero__bg-layer {
        background-position: center center;
    }

    .bf-hero__content {
        position: absolute;
        inset: 0;
        z-index: 16;
        max-width: none;
        width: auto;
        padding: 0;
        pointer-events: none;
    }

    .bf-hero__copy {
        position: absolute;
        left: var(--bf-pad);
        right: var(--bf-pad);
        top: clamp(18.25rem, 40svh, 24rem);
        width: auto;
        max-width: none;
        pointer-events: none;
    }

    .bf-hero__title {
        max-width: 7.9ch;
        font-size: clamp(3.25rem, 14.2vw, 4.25rem);
        line-height: .98;
        letter-spacing: -.045em;
        text-wrap: balance;
    }

    .bf-hero__text {
        max-width: 20rem;
        margin-top: 1rem;
        font-size: clamp(1.2rem, 5.5vw, 1.48rem);
        line-height: 1.28;
        letter-spacing: -.025em;
        -webkit-line-clamp: 4;
    }

    .bf-hero__actions {
        position: absolute;
        left: var(--bf-pad);
        right: var(--bf-pad);
        top: clamp(15.5rem, 35svh, 20.25rem);
        display: block;
        margin: 0;
        min-height: 1rem;
        pointer-events: auto;
    }

    .bf-hero__controls {
        display: inline-flex;
        align-items: center;
        gap: .78rem;
        min-height: auto;
        padding: 0;
        border-radius: 0;
        background: transparent;
        backdrop-filter: none;
        box-shadow: none;
    }

    .bf-work-button,
    .bf-control-divider {
        display: none;
    }

    .bf-home-control,
    .bf-dot {
        width: .78rem;
        height: .78rem;
        border-radius: 999px;
        border: 1.65px solid rgba(255,255,255,.96);
        background: transparent;
        color: transparent;
        font-size: 0;
        box-shadow: 0 2px 12px rgba(0,0,0,.28);
    }

    .bf-home-control span {
        display: none;
    }

    .bf-home-control.is-active,
    .bf-dot.is-active {
        background: #ffffff;
        color: transparent;
    }

    .bf-card-stage {
        position: absolute;
        z-index: 20;
        top: var(--bf-mobile-card-top);
        height: var(--bf-card-h);
        margin-top: 0;
        pointer-events: none;
    }

    .bf-card-track {
        height: var(--bf-card-h);
    }

    .bf-card {
        padding: 1.55rem;
        border-radius: var(--bf-radius);
        background-position: top center;
        box-shadow:
            0 30px 90px rgba(0,0,0,.46),
            0 10px 24px rgba(0,0,0,.28);
        transition:
            transform 620ms cubic-bezier(.18, .82, .18, 1),
            width 620ms cubic-bezier(.18, .82, .18, 1),
            opacity 280ms ease,
            box-shadow 420ms ease;
    }

    .bf-card.is-featured,
    .bf-card.is-secondary {
        box-shadow:
            0 34px 100px rgba(0,0,0,.52),
            0 12px 28px rgba(0,0,0,.34);
    }

    .bf-card.is-left-peek,
    .bf-card.is-right-peek {
        box-shadow:
            0 24px 76px rgba(0,0,0,.42),
            0 8px 20px rgba(0,0,0,.28);
    }

    .bf-card__shade {
        background: var(--bf-card-overlay, linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.18) 48%, rgba(0,0,0,.78) 100%));
    }

    .bf-card__preview-title,
    .bf-feature-copy__title {
        font-size: clamp(1.75rem, 8.3vw, 2.35rem);
        line-height: .95;
        font-weight: 800;
        letter-spacing: -.042em;
        text-shadow: 0 3px 18px rgba(0,0,0,.55);
    }

    .bf-feature-copy {
        top: 0;
        height: var(--bf-card-h);
        width: var(--bf-featured-w);
        padding: 1.55rem;
    }

    .bf-feature-copy__text {
        display: none;
    }

    .bf-card.is-featured .bf-card__preview {
        opacity: 0;
    }

    .bf-card.is-left-peek .bf-card__body,
    .bf-card.is-right-peek .bf-card__body {
        opacity: 0;
    }
}

@media (max-width: 430px) {
    .bf-hero__copy {
        top: clamp(18rem, 39svh, 23.25rem);
    }

    .bf-hero__actions {
        top: clamp(15.4rem, 34svh, 19.75rem);
    }
}

@media (max-width: 360px) {
    :root {
        --bf-featured-w: 56vw;
        --bf-secondary-w: 56vw;
        --bf-card-h: 17.5rem;
    }

    .bf-hero__title {
        font-size: clamp(2.85rem, 13.5vw, 3.35rem);
    }

    .bf-hero__text {
        font-size: 1.08rem;
    }
}


/* v2.56: Mobile beta hero typography and carousel placement refinement. */
@media (max-width: 700px) {
    :root {
        --bf-pad: clamp(1.9rem, 7.4vw, 2.65rem);
        --bf-featured-w: clamp(12.9rem, 51vw, 14.25rem);
        --bf-secondary-w: clamp(12.9rem, 51vw, 14.25rem);
        --bf-card-h: clamp(18.25rem, 38.5vh, 21.15rem);
        --bf-mobile-hero-panel-h: clamp(34rem, 63svh, 39rem);
        --bf-mobile-card-top: clamp(27.5rem, 54svh, 31rem);
    }

    .bf-hero {
        min-height: calc(var(--bf-mobile-card-top) + var(--bf-card-h) + 5.25rem);
    }

    .admin-bar .bf-hero {
        min-height: calc(var(--bf-mobile-card-top) + var(--bf-card-h) + 5.25rem);
    }

    .bf-hero__copy {
        top: clamp(14.75rem, 32.5svh, 18.5rem);
    }

    .bf-hero__actions {
        top: clamp(12.55rem, 27.5svh, 15.75rem);
    }

    .bf-hero__title {
        max-width: 12.2ch;
        font-size: clamp(2.9rem, 12.35vw, 3.82rem);
        line-height: .98;
        letter-spacing: -0.052em;
    }

    .bf-hero__text {
        max-width: 21.5rem;
        margin-top: 1.05rem;
        font-size: clamp(1.08rem, 4.55vw, 1.28rem);
        line-height: 1.36;
        letter-spacing: -0.022em;
    }

    .bf-card-stage {
        top: var(--bf-mobile-card-top);
    }

    .bf-card,
    .bf-feature-copy {
        padding: clamp(1.25rem, 5.5vw, 1.6rem);
    }

    .bf-card__preview-title,
    .bf-feature-copy__title {
        font-size: clamp(1.65rem, 7.4vw, 2.1rem);
        line-height: .96;
        letter-spacing: -0.046em;
    }
}

@media (max-width: 430px) {
    .bf-hero__copy {
        top: clamp(14.4rem, 31.75svh, 18rem);
    }

    .bf-hero__actions {
        top: clamp(12.25rem, 27svh, 15.35rem);
    }
}

@media (max-width: 360px) {
    .bf-hero__title {
        max-width: 11.7ch;
        font-size: clamp(2.55rem, 11.8vw, 3.05rem);
    }

    .bf-hero__text {
        font-size: 1.02rem;
        line-height: 1.34;
    }
}

/* v2.57: Mobile card row becomes a true swipeable carousel.
   The card track uses native horizontal scrolling and scroll snap on phones,
   while card taps still activate the large hero slide above. */
@media (max-width: 700px) {
    .bf-hero {
        min-height: calc(var(--bf-mobile-card-top) + var(--bf-card-h) + 5.75rem);
        overflow-x: clip;
        overflow-y: visible;
    }

    .admin-bar .bf-hero {
        min-height: calc(var(--bf-mobile-card-top) + var(--bf-card-h) + 5.75rem);
    }

    .bf-card-stage {
        left: 0;
        right: 0;
        width: 100%;
        overflow: visible;
        pointer-events: auto;
        touch-action: pan-x pan-y;
    }

    .bf-card-track {
        position: relative;
        inset: auto;
        display: flex;
        align-items: stretch;
        gap: clamp(1.55rem, 7vw, 2.4rem);
        height: var(--bf-card-h);
        width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        padding-inline: clamp(3.25rem, 13.5vw, 4.2rem);
        padding-block: 0 1.4rem;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: clamp(3.25rem, 13.5vw, 4.2rem);
        -webkit-overflow-scrolling: touch;
        pointer-events: auto;
        scrollbar-width: none;
    }

    .bf-card-track::-webkit-scrollbar {
        display: none;
    }

    .bf-card {
        position: relative;
        inset: auto;
        left: auto;
        top: auto;
        flex: 0 0 clamp(13.6rem, 52vw, 15.25rem);
        width: auto;
        height: var(--bf-card-h);
        scroll-snap-align: center;
        scroll-snap-stop: normal;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        will-change: auto;
        transition:
            opacity 260ms ease,
            box-shadow 420ms ease,
            filter 420ms ease;
    }

    .bf-card.is-featured,
    .bf-card.is-secondary,
    .bf-card.is-left-peek,
    .bf-card.is-right-peek {
        transform: none;
    }

    .bf-card.is-featured {
        flex-basis: clamp(13.6rem, 52vw, 15.25rem);
        filter: none;
    }

    .bf-card:not(.is-featured) {
        filter: saturate(.92) brightness(.92);
    }

    .bf-card.is-prepping .bf-card,
    .bf-card-track.is-prepping .bf-card {
        transition: none;
    }
}

@media (max-width: 430px) {
    .bf-card-track {
        padding-inline: clamp(3.15rem, 13.2vw, 3.75rem);
        scroll-padding-inline: clamp(3.15rem, 13.2vw, 3.75rem);
        gap: clamp(1.45rem, 6.8vw, 2.15rem);
    }

    .bf-card {
        flex-basis: clamp(13.2rem, 51.5vw, 14.35rem);
    }

    .bf-card.is-featured {
        flex-basis: clamp(13.2rem, 51.5vw, 14.35rem);
    }
}

@media (max-width: 360px) {
    .bf-card-track {
        padding-inline: 2.25rem;
        scroll-padding-inline: 2.25rem;
        gap: 1.25rem;
    }

    .bf-card,
    .bf-card.is-featured {
        flex-basis: 56vw;
    }
}


/* v2.58: Strict mobile card swipe + title placement match.
   On phones, cards only pan horizontally. Card titles sit left-aligned
   on the lower baseline with the Figma padding: 24px sides, 32px bottom. */
@media (max-width: 700px) {
    .bf-card-stage {
        touch-action: pan-x;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: auto;
    }

    .bf-card-track {
        overflow-x: auto;
        overflow-y: hidden;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: auto;
        align-items: stretch;
    }

    .bf-card {
        touch-action: pan-x;
        overflow: hidden;
        padding: 0;
        align-items: stretch;
    }

    .bf-card__body {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        width: 100%;
        height: 100%;
        padding: 0 24px 32px;
        text-align: left;
    }

    .bf-card__preview {
        display: block;
        width: 100%;
        opacity: 1;
    }

    .bf-card.is-featured .bf-card__preview {
        display: block;
        opacity: 1;
    }

    .bf-feature-copy {
        display: none !important;
    }

    .bf-card__preview-title,
    .bf-feature-copy__title {
        display: block;
        width: 100%;
        font-size: clamp(1.45rem, 6.65vw, 1.9rem);
        line-height: .96;
        font-weight: 800;
        letter-spacing: -0.044em;
        text-align: left;
        text-shadow: 0 3px 18px rgba(0,0,0,.58);
    }

    .bf-card.is-left-peek .bf-card__body,
    .bf-card.is-right-peek .bf-card__body {
        opacity: 1;
    }
}

@media (max-width: 430px) {
    .bf-card__body {
        padding: 0 24px 32px;
    }

    .bf-card__preview-title,
    .bf-feature-copy__title {
        font-size: clamp(1.38rem, 6.4vw, 1.78rem);
    }
}


/* v2.59: Mobile hero typography tuning to match Figma targets.
   Large hero title aims for 40px / 40px with -2.55px tracking near 390px.
   Large hero text aims for 16px / 21px with -0.5px tracking.
   Small card titles aim for 20px with -0.25px tracking. */
@media (max-width: 700px) {
    .bf-hero__title {
        font-size: clamp(2.25rem, 10.25vw, 2.5rem);
        line-height: 1;
        letter-spacing: -0.159375rem;
        max-width: 12.4ch;
    }

    .bf-hero__text {
        font-size: clamp(0.98rem, 4.1vw, 1rem);
        line-height: 1.3125;
        letter-spacing: -0.03125rem;
        max-width: 21.5rem;
    }

    .bf-card__preview-title,
    .bf-feature-copy__title {
        font-size: clamp(1.16rem, 5.13vw, 1.25rem);
        line-height: 1;
        letter-spacing: -0.015625rem;
        font-weight: 800;
    }
}

@media (max-width: 360px) {
    .bf-hero__title {
        font-size: clamp(2.08rem, 10.1vw, 2.28rem);
        letter-spacing: -0.13rem;
    }

    .bf-hero__text {
        font-size: 0.96rem;
        line-height: 1.3125;
        letter-spacing: -0.025rem;
    }

    .bf-card__preview-title,
    .bf-feature-copy__title {
        font-size: 1.12rem;
    }
}


/* v2.60: Mobile hero layout match pass.
   Align the mobile hero elements to one left grid, fit the hero/card bridge
   better inside the mobile browser viewport, and keep the card carousel locked
   to horizontal movement. */
@media (max-width: 700px) {
    :root {
        --bf-mobile-grid: 32px;
        --bf-pad: var(--bf-mobile-grid);
        --bf-featured-w: clamp(11.9rem, 51vw, 12.5rem);
        --bf-secondary-w: clamp(11.9rem, 51vw, 12.5rem);
        --bf-card-h: clamp(13.25rem, 56vw, 14rem);
        --bf-radius: 1.42rem;
        --bf-mobile-hero-panel-h: clamp(31.5rem, 81svh, 33.1rem);
        --bf-mobile-card-top: clamp(23.75rem, 61.5svh, 25rem);
    }

    .bf-hero {
        min-height: calc(var(--bf-mobile-card-top) + var(--bf-card-h) + 1.75rem);
        background: #d1d2cf;
        overflow-x: clip;
        overflow-y: visible;
    }

    .admin-bar .bf-hero {
        min-height: calc(var(--bf-mobile-card-top) + var(--bf-card-h) + 1.75rem);
    }

    .bf-hero__bg {
        height: var(--bf-mobile-hero-panel-h);
        border-bottom-left-radius: 2rem;
        border-bottom-right-radius: 2rem;
    }

    .bf-hero__copy,
    .bf-hero__actions {
        left: var(--bf-mobile-grid);
        right: var(--bf-mobile-grid);
    }

    .bf-hero__actions {
        top: clamp(11.75rem, 30svh, 12.25rem);
    }

    .bf-hero__copy {
        top: clamp(13.35rem, 34.5svh, 13.95rem);
    }

    .bf-hero__title {
        max-width: 10.7ch;
        font-size: clamp(2.28rem, 10.25vw, 2.5rem);
        line-height: 1;
        letter-spacing: -0.159375rem;
        text-wrap: balance;
    }

    .bf-hero__text {
        max-width: 20.65rem;
        margin-top: 0.75rem;
        font-size: clamp(0.98rem, 4.1vw, 1rem);
        line-height: 1.3125;
        letter-spacing: -0.03125rem;
        -webkit-line-clamp: 4;
    }

    .bf-card-stage {
        top: var(--bf-mobile-card-top);
        height: var(--bf-card-h);
        overflow: visible;
        pointer-events: auto;
        touch-action: pan-x;
    }

    .bf-card-track {
        height: var(--bf-card-h);
        gap: 32px;
        padding-inline: var(--bf-mobile-grid);
        padding-block: 0 1.25rem;
        scroll-padding-inline: var(--bf-mobile-grid);
        overflow-x: auto;
        overflow-y: hidden;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: none;
        align-items: stretch;
    }

    .bf-card,
    .bf-card.is-featured {
        flex-basis: var(--bf-featured-w);
        height: var(--bf-card-h);
        border-radius: var(--bf-radius);
        scroll-snap-align: start;
        touch-action: pan-x;
        transform: translate3d(0, 0, 0);
    }

    .bf-card:not(.is-featured) {
        filter: saturate(.94) brightness(.94);
    }

    .bf-card__body {
        padding: 0 24px 32px;
        align-items: flex-end;
        justify-content: flex-start;
        text-align: left;
    }

    .bf-card__preview-title,
    .bf-feature-copy__title {
        font-size: clamp(1.18rem, 5.13vw, 1.25rem);
        line-height: 1;
        letter-spacing: -0.015625rem;
        font-weight: 800;
        text-align: left;
    }
}

@media (max-width: 430px) {
    :root {
        --bf-mobile-grid: 32px;
        --bf-featured-w: clamp(11.75rem, 51vw, 12.35rem);
        --bf-secondary-w: clamp(11.75rem, 51vw, 12.35rem);
        --bf-card-h: clamp(13rem, 56vw, 13.85rem);
    }

    .bf-hero__actions {
        top: clamp(11.6rem, 30svh, 12.15rem);
    }

    .bf-hero__copy {
        top: clamp(13.25rem, 34.5svh, 13.85rem);
    }
}

@media (max-width: 360px) {
    :root {
        --bf-mobile-grid: 28px;
        --bf-featured-w: 52vw;
        --bf-secondary-w: 52vw;
        --bf-card-h: 12.75rem;
        --bf-mobile-card-top: 23.25rem;
        --bf-mobile-hero-panel-h: 30.75rem;
    }

    .bf-hero__title {
        font-size: 2.18rem;
        letter-spacing: -0.13rem;
    }

    .bf-hero__text {
        max-width: 19rem;
        font-size: 0.94rem;
    }

    .bf-card-track {
        gap: 24px;
    }
}


/* v2.61: Mobile hero precision pass.
   Target about 140px from the logo baseline area to the dots, preserve
   horizontal-only card swiping, give card shadows room to render, and add
   breathing room below the mobile card row before the About section. */
@media (max-width: 700px) {
    :root {
        --bf-mobile-dots-top: clamp(10.65rem, 43.5vw, 10.95rem);
        --bf-mobile-copy-top: clamp(13.05rem, 53.2vw, 13.45rem);
        --bf-mobile-card-bottom-space: 2.5rem;
        --bf-mobile-card-shadow-space: 3.25rem;
    }

    .bf-hero {
        min-height: calc(var(--bf-mobile-card-top) + var(--bf-card-h) + var(--bf-mobile-card-bottom-space) + 1.25rem);
        overflow-x: clip;
        overflow-y: visible;
    }

    .admin-bar .bf-hero {
        min-height: calc(var(--bf-mobile-card-top) + var(--bf-card-h) + var(--bf-mobile-card-bottom-space) + 1.25rem);
    }

    .bf-hero__actions {
        top: var(--bf-mobile-dots-top);
    }

    .bf-hero__copy {
        top: var(--bf-mobile-copy-top);
    }

    .bf-card-stage {
        height: calc(var(--bf-card-h) + var(--bf-mobile-card-shadow-space));
        overflow: visible;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
    }

    .bf-card-track {
        height: calc(var(--bf-card-h) + var(--bf-mobile-card-shadow-space));
        padding-block: 0.4rem 2.85rem;
        overflow-x: auto;
        overflow-y: hidden;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: none;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        cursor: grab;
    }

    .bf-card-track:active {
        cursor: grabbing;
    }

    .bf-card {
        height: var(--bf-card-h);
        min-height: var(--bf-card-h);
        max-height: var(--bf-card-h);
        touch-action: pan-x;
        scroll-snap-align: start;
        scroll-snap-stop: normal;
        margin-block: 0;
    }

    .bf-card__preview-title,
    .bf-feature-copy__title {
        font-size: clamp(1.08rem, 5.13vw, 1.25rem);
        line-height: 1;
        letter-spacing: -0.015625rem;
    }
}

@media (max-width: 430px) {
    :root {
        --bf-mobile-dots-top: clamp(10.55rem, 43.2vw, 10.85rem);
        --bf-mobile-copy-top: clamp(12.95rem, 53vw, 13.35rem);
        --bf-mobile-card-bottom-space: 2.5rem;
    }
}

@media (max-width: 360px) {
    :root {
        --bf-mobile-dots-top: 10.2rem;
        --bf-mobile-copy-top: 12.6rem;
    }
}


/* v2.62: Mobile hero UX cleanup.
   Keep the visual grid from v2.60, but stop mobile taps from re-centering the
   carousel, restore vertical page scroll while touching the card row, make the
   scroller shadows breathe, add a small previous-card peek while swiping, and
   bring back the dark blurred header once the page scrolls. */
@media (max-width: 700px) {
    :root {
        --bf-mobile-card-gap: 18px;
        --bf-mobile-card-shadow-space: 4.25rem;
        --bf-mobile-card-bottom-space: 0px;
        --bf-mobile-left-peek: 16px;
    }

    .site-header.is-scrolled {
        background: rgba(6, 16, 18, 0.82);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-bottom-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 12px 40px rgba(6, 16, 18, 0.18);
    }

    .site-header.is-scrolled .header-inner,
    body.nav-open .header-inner {
        min-height: 96px;
    }

    .site-header.is-scrolled .site-logo {
        font-size: clamp(1.45rem, 6.65vw, 1.72rem);
        transform: none;
    }

    .bf-hero {
        min-height: calc(var(--bf-mobile-card-top) + var(--bf-card-h) + var(--bf-mobile-card-shadow-space));
        background: transparent;
        overflow-x: clip;
        overflow-y: visible;
    }

    .admin-bar .bf-hero {
        min-height: calc(var(--bf-mobile-card-top) + var(--bf-card-h) + var(--bf-mobile-card-shadow-space));
    }

    .bf-hero__bg {
        height: var(--bf-mobile-hero-panel-h);
    }

    .bf-card-stage {
        height: calc(var(--bf-card-h) + var(--bf-mobile-card-shadow-space));
        overflow: visible;
        pointer-events: auto;
        touch-action: auto;
        overscroll-behavior: auto;
    }

    .bf-card-track {
        height: calc(var(--bf-card-h) + var(--bf-mobile-card-shadow-space));
        gap: var(--bf-mobile-card-gap);
        padding-inline: var(--bf-mobile-grid);
        padding-block: 0.85rem 3.4rem;
        scroll-padding-left: calc(var(--bf-mobile-grid) - var(--bf-mobile-left-peek));
        scroll-padding-right: var(--bf-mobile-grid);
        overflow-x: auto;
        overflow-y: hidden;
        touch-action: auto;
        overscroll-behavior: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .bf-card {
        touch-action: auto;
        scroll-snap-align: start;
        scroll-margin-left: var(--bf-mobile-left-peek);
        box-shadow:
            0 28px 90px rgba(0,0,0,.48),
            0 12px 26px rgba(0,0,0,.28);
    }

    .bf-card.is-featured {
        box-shadow:
            0 30px 100px rgba(0,0,0,.52),
            0 14px 30px rgba(0,0,0,.32);
    }

    .bf-card-track:active {
        cursor: auto;
    }
}

@media (max-width: 430px) {
    :root {
        --bf-mobile-card-gap: 16px;
        --bf-mobile-left-peek: 16px;
    }
}


/* v2.63: Mobile hero carousel polish.
   Restore smoother mobile background/copy transitions, prevent card-shadow
   clipping at the top of the scroller, and keep the first landing card aligned
   cleanly without a previous-card peek. */
@media (max-width: 700px) {
    :root {
        --bf-mobile-card-shadow-top: 3.25rem;
        --bf-mobile-card-shadow-bottom: 3.4rem;
        --bf-mobile-card-shadow-space: 6.65rem;
    }

    .bf-hero__bg-layer {
        transition: opacity 720ms ease;
    }

    .bf-hero__bg-layer.is-incoming {
        animation: bf-hero-mobile-bg-scale-down 2600ms cubic-bezier(.16, .82, .24, 1) both;
    }

    @keyframes bf-hero-mobile-bg-scale-down {
        from {
            transform: scale(1.055);
        }
        to {
            transform: scale(1);
        }
    }

    .bf-copy-panel {
        transition:
            opacity 520ms ease,
            transform 520ms cubic-bezier(.18, .82, .18, 1);
    }

    .bf-copy-panel--current.is-leaving-left,
    .bf-copy-panel--current.is-leaving-right {
        opacity: 0;
        transform: translate3d(0, -0.45rem, 0);
    }

    .bf-copy-panel--next {
        transform: translate3d(0, 0.65rem, 0);
    }

    .bf-copy-panel--next.is-entering {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    .bf-card-stage {
        top: calc(var(--bf-mobile-card-top) - var(--bf-mobile-card-shadow-top));
        height: calc(var(--bf-card-h) + var(--bf-mobile-card-shadow-top) + var(--bf-mobile-card-shadow-bottom));
        overflow: visible;
    }

    .bf-card-track {
        height: calc(var(--bf-card-h) + var(--bf-mobile-card-shadow-top) + var(--bf-mobile-card-shadow-bottom));
        padding-top: var(--bf-mobile-card-shadow-top);
        padding-bottom: var(--bf-mobile-card-shadow-bottom);
        overflow-x: auto;
        overflow-y: hidden;
    }

    .bf-card {
        box-shadow:
            0 34px 94px rgba(0,0,0,.46),
            0 14px 32px rgba(0,0,0,.30);
    }

    .bf-card.is-featured {
        box-shadow:
            0 38px 110px rgba(0,0,0,.50),
            0 16px 36px rgba(0,0,0,.34);
    }
}


/* v2.64: Mobile card shadow clipping fix.
   The mobile scroll container must keep horizontal swipe behavior, so instead
   of relying on huge all-direction shadows that get clipped by the scrollport,
   mobile cards now use a mostly-downward elevation shadow. This removes the
   hard horizontal clipping line above the cards while preserving the lifted
   card feel below and around the card edges. */
@media (max-width: 700px) {
    .bf-card-stage {
        overflow: visible;
    }

    .bf-card-track {
        overflow-x: auto;
        overflow-y: hidden;
        padding-top: 0.85rem;
        padding-bottom: var(--bf-mobile-card-shadow-bottom, 3.4rem);
    }

    .bf-card,
    .bf-card.is-featured,
    .bf-card.is-secondary,
    .bf-card.is-left-peek,
    .bf-card.is-right-peek {
        box-shadow:
            0 34px 48px -24px rgba(0, 0, 0, 0.72),
            0 14px 24px -14px rgba(0, 0, 0, 0.46);
    }

    .bf-card.is-featured {
        box-shadow:
            0 38px 56px -26px rgba(0, 0, 0, 0.76),
            0 16px 28px -14px rgba(0, 0, 0, 0.48);
    }
}


/* v2.65: Mobile card spacing + iOS transition reliability.
   v2.64 fixed the clipped top shadow by changing the shadow shape, but the
   card row visually moved too high. This restores a real gap between the hero
   text and the card row while keeping the downward-only shadow. It also gives
   the copy panels a clearer stacking order for mobile fade transitions. */
@media (max-width: 700px) {
    :root {
        --bf-mobile-text-card-gap: clamp(1.85rem, 7.7vw, 2rem);
        --bf-mobile-card-shadow-bottom: 3.1rem;
        --bf-mobile-card-shadow-space: calc(var(--bf-mobile-text-card-gap) + var(--bf-card-h) + var(--bf-mobile-card-shadow-bottom));
    }

    .bf-hero {
        min-height: calc(var(--bf-mobile-card-top) + var(--bf-mobile-text-card-gap) + var(--bf-card-h) + var(--bf-mobile-card-shadow-bottom));
    }

    .admin-bar .bf-hero {
        min-height: calc(var(--bf-mobile-card-top) + var(--bf-mobile-text-card-gap) + var(--bf-card-h) + var(--bf-mobile-card-shadow-bottom));
    }

    .bf-card-stage {
        top: calc(var(--bf-mobile-card-top) + var(--bf-mobile-text-card-gap));
        height: calc(var(--bf-card-h) + var(--bf-mobile-card-shadow-bottom));
        overflow: visible;
    }

    .bf-card-track {
        height: calc(var(--bf-card-h) + var(--bf-mobile-card-shadow-bottom));
        padding-top: 0;
        padding-bottom: var(--bf-mobile-card-shadow-bottom);
        overflow-x: auto;
        overflow-y: hidden;
    }

    .bf-copy-panel--current {
        position: relative;
        z-index: 1;
    }

    .bf-copy-panel--next {
        z-index: 2;
    }

    .bf-copy-panel {
        transition:
            opacity 560ms ease,
            transform 560ms cubic-bezier(.18, .82, .18, 1);
    }

    .bf-copy-panel--current.is-leaving-left,
    .bf-copy-panel--current.is-leaving-right {
        opacity: 0;
        transform: translate3d(0, -0.35rem, 0);
    }

    .bf-copy-panel--next {
        opacity: 0;
        transform: translate3d(0, 0.55rem, 0);
    }

    .bf-copy-panel--next.is-entering {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}


/* v2.66: Mobile card row nudge + simplified mobile selection behavior.
   Move the mobile card row slightly upward, and let mobile slide changes update
   copy/background immediately while the selected card scrolls to the primary
   left-grid position. Desktop transitions remain unchanged. */
@media (max-width: 700px) {
    :root {
        --bf-mobile-text-card-gap: clamp(1rem, 4.25vw, 1.25rem);
    }

    .bf-copy-panel {
        transition: none;
    }

    .bf-copy-panel--current.is-leaving-left,
    .bf-copy-panel--current.is-leaving-right,
    .bf-copy-panel--current.is-preparing-enter,
    .bf-copy-panel--next,
    .bf-copy-panel--next.is-entering {
        opacity: 1;
        transform: none;
    }

    .bf-hero__bg-layer {
        transition: opacity 260ms ease;
    }
}


/* v2.72: Hero CTA and dot layout cleanup.
   Dots become the only slide-position control and move above the large title.
   The CTA button moves into its own action zone: desktop baseline-aligned with
   the bottom of the card row, mobile directly under the large hero text. */
.bf-home-control,
.bf-control-divider {
    display: none !important;
}

.bf-hero__controls {
    position: absolute;
    z-index: 23;
    left: var(--bf-pad);
    top: var(--bf-card-top);
    display: inline-flex;
    align-items: center;
    gap: 0.86rem;
    min-height: 1rem;
    padding: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    pointer-events: auto;
}

.bf-dot {
    width: 0.78rem;
    height: 0.78rem;
    border-radius: 999px;
    border: 1.7px solid rgba(255,255,255,.95);
    background: transparent;
    box-shadow: 0 2px 14px rgba(0,0,0,.24);
}

.bf-dot.is-active {
    background: var(--bf-white);
}

.bf-hero__copy {
    top: calc(var(--bf-card-top) + 3rem);
}

.bf-hero__actions {
    position: absolute;
    z-index: 22;
    left: var(--bf-pad);
    top: calc(var(--bf-card-top) + var(--bf-card-h) - var(--bf-control-h));
    display: block;
    margin: 0;
    min-height: var(--bf-control-h);
    pointer-events: auto;
}

.bf-work-button {
    min-height: 3rem;
    padding: 0.65rem 2.05rem;
    gap: 0;
}

.bf-work-button--mobile {
    display: none;
}

.bf-work-button--desktop {
    display: inline-flex;
}

@media (max-width: 700px) {
    .bf-hero__controls {
        left: var(--bf-mobile-grid);
        right: var(--bf-mobile-grid);
        top: var(--bf-mobile-dots-top);
        gap: 0.7rem;
        min-height: 1rem;
        display: inline-flex;
        width: auto;
    }

    .bf-hero__copy {
        top: var(--bf-mobile-copy-top);
    }

    .bf-hero__actions {
        display: none;
    }

    .bf-work-button--desktop {
        display: none;
    }

    .bf-work-button--mobile {
        display: inline-flex;
        position: relative;
        margin-top: clamp(1rem, 4.6vw, 1.25rem);
        min-height: 3rem;
        padding: 0.7rem 1.85rem;
        font-size: 1rem;
        box-shadow: 0 14px 38px rgba(0,0,0,.22);
        pointer-events: auto;
    }

    .bf-work-button--mobile.is-hidden {
        display: none;
    }

    .bf-work-button--desktop.is-hidden {
        display: none;
    }
}


/* v2.72b: Give the new mobile CTA its own vertical room before the card row. */
@media (max-width: 700px) {
    :root {
        --bf-mobile-text-card-gap: clamp(4.85rem, 18vw, 5.4rem);
    }
}


/* v2.75: Desktop hero text, card height, and CTA timing polish.
   Mobile remains unchanged. Desktop body copy gets a little more presence,
   the card height stops collapsing too aggressively as the browser narrows,
   and the CTA has its own delayed entrance after the copy transition. */
@media (min-width: 701px) {
    :root {
        --bf-card-h: clamp(25rem, 30vw, 28.75rem);
    }

    .bf-card-stage,
    .bf-card-track,
    .bf-card,
    .bf-feature-copy {
        height: var(--bf-card-h);
    }

    .bf-hero__text {
        font-size: clamp(1.04rem, 1.22vw, 1.2rem);
        line-height: 1.38;
        max-width: 36rem;
    }

    .bf-work-button--desktop {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition:
            opacity 360ms ease,
            transform 440ms cubic-bezier(.18, .82, .18, 1),
            background-color 220ms ease,
            box-shadow 220ms ease;
        will-change: opacity, transform;
    }

    .bf-work-button--desktop.is-cta-leaving {
        opacity: 0;
        transform: translate3d(0, .65rem, 0);
        pointer-events: none;
    }

    .bf-work-button--desktop.is-cta-entering {
        animation: bf-hero-cta-rise-v275 520ms cubic-bezier(.18, .82, .18, 1) both;
    }
}

@keyframes bf-hero-cta-rise-v275 {
    0% {
        opacity: 0;
        transform: translate3d(0, .75rem, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}