/* Homepage styles. Shared site chrome lives in global.css. */

.hero{
    position: relative;
    z-index: 1;
    display: flex;
    height: calc(100vh - var(--header-flow-height));
    height: calc(100dvh - var(--header-flow-height));
    padding: var(--hero-padding-y) var(--hero-page-gutter);
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-content{
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

.hero-proof-stack{
    display: contents;
}

.hero-proof-popup{
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(17, 17, 17, .055);
    background: radial-gradient(circle at 13% 72%, rgb(153 153 153 / 12%), transparent 27%), rgba(255, 255, 255, .965);
    box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .58), 0 18px 42px rgba(17, 17, 17, .09);
    opacity: 0;
    pointer-events: none;
    scale: .15;
    translate: 0 15px;
    filter: blur(6px);
    transform-origin: center;
    isolation: isolate;
}

.hero-proof-popup::after{
    content: "";
    position: absolute;
    z-index: 0;
    right: -23px;
    bottom: -25px;
    width: 126px;
    height: 126px;
    opacity: .38;
    background-image: radial-gradient(circle, rgb(0 0 0 / 21%) 0 2px, transparent 2.4px);
    background-size: 14px 14px;
    mask-image: radial-gradient(circle at 100% 100%, #000 0 52%, transparent 77%);
    -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 0 52%, transparent 77%);
}

.hero-proof-popup > *{
    position: relative;
    z-index: 1;
}

.hero-proof-popup.is-visible{
    animation: hero-proof-popup-spring .68s cubic-bezier(.2, .9, .25, 1.15) forwards;
}

.rating-popup.is-visible{
    animation-delay: .12s;
}

@keyframes hero-proof-popup-spring {
    0% {
        opacity: 0;
        scale: .15;
        translate: 0 15px;
        filter: blur(6px);
    }
    68% {
        opacity: 1;
        scale: 1.08;
        translate: 0 -2px;
        filter: blur(0);
    }
    84% {
        scale: .985;
        translate: 0 1px;
    }
    100% {
        opacity: 1;
        scale: 1;
        translate: 0 0;
        filter: blur(0);
    }
}

.specialist-popup{
    top: 118px;
    left: max(var(--page-gutter), calc(50% - 520px));
    gap: 16px;
    width: 350px;
    min-height: 96px;
    padding: 12px 20px 12px 14px;
    border-radius: 30px;
}

.specialist-popup-icon,
.rating-popup-icon{
    position: relative;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .94), 0 8px 20px rgb(0 0 0 / 18%);
}

.specialist-popup-icon{
    width: 70px;
    height: 70px;
}

.specialist-popup-icon::before,
.rating-popup-icon::before{
    content: "";
    position: absolute;
    inset: 9px;
    border: 2px solid #000000;
    border-radius: inherit;
}

.specialist-popup-icon-core{
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 50%;
    background: #111;
    color: #fff;
}

.specialist-popup-icon-core svg{
    width: 29px;
    height: 29px;
}

.proof-popup-divider{
    width: 1px;
    height: 52px;
    flex: 0 0 1px;
    background: rgba(17, 17, 17, .16);
}

.specialist-popup-text{
    position: relative;
    z-index: 1;
    color: #111;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -.035em;
}

.rating-popup{
    top: 260px;
    right: max(var(--page-gutter), calc(50% - 520px));
    gap: 16px;
    width: 330px;
    min-height: 96px;
    padding: 12px 20px 12px 14px;
    border-radius: 30px;
}

.rating-popup-icon{
    width: 76px;
    height: 76px;
}

.rating-popup-icon-core{
    position: relative;
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 50%;
    background: #fff;
}

.rating-popup-icon-core::after{
    right: 3px;
    rotate: -18deg;
}

.rating-popup-icon svg{
    width: 44px;
    height: 37px;
    fill: #111;
}

.rating-popup-text{
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    flex-direction: column;
    color: #111;
    line-height: 1;
    white-space: nowrap;
}

.rating-popup-text strong{
    display: flex;
    align-items: flex-start;
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -.06em;
}

.rating-popup-plus{
    position: relative;
    display: inline-block;
    margin-left: 4px;
    font-size: .84em;
    line-height: 1;
}

.rating-popup-plus::before{
    content: "";
    position: absolute;
    top: -9px;
    left: 9px;
    width: 34px;
    height: 31px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 31'%3E%3Cpath d='M7 12L9 3M14 16L21 9M20 23L29 21' fill='none' stroke='%23f5ba29' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rating-popup-plus::after{
    display: none;
}

.rating-popup-label{
    margin-top: 2px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -.035em;
}

.hero-grid{
    width: min(100%, 390px);
    margin: 0 auto;
}

.hero-aside{
    display: grid;
    width: 100%;
    gap: 14px;
}

.marketplace-profile-image{
    display: block;
    width: min(90%, 340px);
    height: auto;
    margin: 0 auto 8px;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 22px 20px rgba(0, 0, 0, .24));
    animation: profile-fade-in .9s .16s cubic-bezier(.2,.75,.2,1) both;
}

.hex-fiverr-proof{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 54px;
    padding: 8px 10px 8px 14px;
    border: 1px solid #ddd;
    border-radius: var(--radius-pill);
    background: #fff;
    box-shadow: 0 6px 18px rgba(17,17,17,.055);
    font-size: 14px;
    line-height: 1;
    transition: transform .25s ease, box-shadow .25s ease;
    animation: hero-item-rise .72s 1.34s cubic-bezier(.18,.82,.2,1) both;
}

.hex-fiverr-proof:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(17,17,17,.07);
}

.hex-fiverr-logo{
    display: inline-flex;
    align-items: center;
    width: 84px;
    flex: 0 0 84px;
}

.hex-fiverr-logo svg{
    width: 100%;
    height: auto;
}

.hex-fiverr-divider{
    width: 1px;
    height: 28px;
    flex: 0 0 1px;
    background: #ddd;
}

.hex-fiverr-rating{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.hex-fiverr-rating strong{
    font-size: 15px;
    font-weight: 700;
}

.hex-fiverr-star{
    color: #111;
    font-size: 20px;
}

.hex-fiverr-reviews{
    color: #787878;
}

.hex-fiverr-level{
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}

.hex-fiverr-level strong{
    font-size: 14px;
    font-weight: 700;
}

.hex-fiverr-level span{
    color: #62646a;
}

.hex-fiverr-open{
    display: grid;
    margin-left: auto;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: #1dbf73;
    color: #fff;
    font-size: 16px;
    transition: transform .25s ease;
}

.hex-fiverr-proof:hover .hex-fiverr-open{
    transform: rotate(12deg) scale(1.04);
}

.hero-top{
    width: min(100%, 1040px);
    margin: 34px auto 0;
    text-align: center;
}

.hero-copy{
    width: 100%;
}

.hero-title{
    margin: 0;
    color: #111;
    font-family: var(--font-display);
    font-size: var(--hero-title-font-size);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.045em;
}

.hero-intro{
    width: min(700px, 100%);
    margin: 10px auto 0;
}

.hero-intro p{
    margin: 0;
    color: #111;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -.02em;
}

@keyframes profile-fade-in {
    from {
        opacity: 0;
        transform: scale(.975);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes hero-item-rise {
    from {
        opacity: 0;
        translate: 0 24px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

html.layout-short-760:not(.layout-narrow-720) .hero{
    padding-top: var(--hero-short-padding);
    padding-bottom: var(--hero-short-padding);
}

html.layout-short-760:not(.layout-narrow-720) .hero-aside{
    gap: 10px;
}

html.layout-short-760:not(.layout-narrow-720) .marketplace-profile-image{
    width: min(72%, 250px);
    margin-bottom: 4px;
}

html.layout-short-760:not(.layout-narrow-720) .hex-fiverr-proof{
    min-height: 48px;
}

html.layout-short-760:not(.layout-narrow-720) .hero-top{
    margin-top: 22px;
}

html.layout-short-760:not(.layout-narrow-720) .hero-title{
    font-size: var(--short-title-font-size);
}

html.layout-short-760:not(.layout-narrow-720) .hero-intro{
    margin-top: 8px;
}

html.layout-short-760:not(.layout-narrow-720) .hero-intro p{
    font-size: 17px;
}

html.layout-narrow-1080 .hero{
    height: auto;
    min-height: calc(100dvh - var(--header-flow-height));
    padding-top: clamp(38px, 6vh, 66px);
    padding-bottom: clamp(56px, 8vh, 90px);
    overflow: hidden;
    justify-content: flex-start;
}

html.layout-narrow-1080 .hero-content{
    width: min(100%, 920px);
}

html.layout-narrow-1080 .hero-proof-stack{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 12px;
    width: min(100%, 720px);
    margin: 0 auto 24px;
}

html.layout-narrow-1080 .specialist-popup,
html.layout-narrow-1080 .rating-popup{
    position: relative;
    inset: auto;
    width: 100%;
    transform: none;
}

html.layout-narrow-1080 .specialist-popup{
    min-height: 78px;
    gap: 12px;
    padding: 9px 16px 9px 11px;
    border-radius: 26px;
}

html.layout-narrow-1080 .rating-popup{
    min-height: 78px;
    gap: 12px;
    padding: 9px 16px 9px 11px;
    border-radius: 26px;
}

html.layout-narrow-1080 .specialist-popup-icon{
    width: 58px;
    height: 58px;
}

html.layout-narrow-1080 .specialist-popup-icon-core{
    width: 43px;
    height: 43px;
}

html.layout-narrow-1080 .specialist-popup-icon-core svg{
    width: 24px;
    height: 24px;
}

html.layout-narrow-1080 .rating-popup-icon{
    width: 62px;
    height: 62px;
}

html.layout-narrow-1080 .rating-popup-icon-core{
    width: 48px;
    height: 48px;
}

html.layout-narrow-1080 .rating-popup-icon svg{
    width: 36px;
    height: 30px;
}

html.layout-narrow-1080 .proof-popup-divider{
    height: 44px;
}

html.layout-narrow-1080 .specialist-popup-text{
    font-size: 15px;
}

html.layout-narrow-1080 .rating-popup-text strong{
    font-size: 34px;
}

html.layout-narrow-1080 .rating-popup-label{
    font-size: 14px;
}

html.layout-narrow-1080 .hero-grid{
    width: min(100%, 390px);
}

html.layout-narrow-1080 .marketplace-profile-image{
    width: min(80%, 300px);
}

html.layout-narrow-1080 .hero-top{
    margin-top: 18px;
}

html.layout-narrow-720 .hero-proof-popup::after{
    width: 88px;
    height: 88px;
    background-size: 11px 11px;
}

html.layout-narrow-720 .hero{
    padding: 28px var(--hero-page-gutter) 58px;
}

html.layout-narrow-720 .hero-proof-stack{
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: min(100%, 320px);
    margin-bottom: 18px;
}

html.layout-narrow-720 .specialist-popup,
html.layout-narrow-720 .rating-popup{
    min-height: 66px;
    gap: 10px;
    padding: 7px 13px 7px 9px;
    border-radius: 22px;
}

html.layout-narrow-720 .specialist-popup-icon{
    width: 50px;
    height: 50px;
}

html.layout-narrow-720 .specialist-popup-icon::before,
html.layout-narrow-720 .rating-popup-icon::before{
    inset: 5px;
    border-width: 1.5px;
}

html.layout-narrow-720 .specialist-popup-icon-core{
    width: 37px;
    height: 37px;
}

html.layout-narrow-720 .specialist-popup-icon-core svg{
    width: 21px;
    height: 21px;
}

html.layout-narrow-720 .rating-popup-icon{
    width: 52px;
    height: 52px;
}

html.layout-narrow-720 .rating-popup-icon-core{
    width: 40px;
    height: 40px;
}

html.layout-narrow-720 .rating-popup-icon-core::before,
html.layout-narrow-720 .rating-popup-icon-core::after{
    top: 18px;
    width: 5px;
    height: 2px;
}

html.layout-narrow-720 .rating-popup-icon svg{
    width: 31px;
    height: 27px;
}

html.layout-narrow-720 .proof-popup-divider{
    height: 38px;
}

html.layout-narrow-720 .specialist-popup-text{
    font-size: 13px;
}

html.layout-narrow-720 .rating-popup-text strong{
    font-size: 29px;
}

html.layout-narrow-720 .rating-popup-label{
    margin-top: 1px;
    font-size: 12px;
}

html.layout-narrow-720 .rating-popup-plus::before,
html.layout-narrow-720 .rating-popup-plus::after{
    display: none;
}

html.layout-narrow-720 .hero-grid{
    width: min(100%, 350px);
}

html.layout-narrow-720 .hero-aside{
    gap: 10px;
}

html.layout-narrow-720 .marketplace-profile-image{
    width: var(--mobile-profile-width);
    margin-bottom: 2px;
}

html.layout-narrow-720 .hex-fiverr-proof{
    gap: 8px;
    padding-left: 11px;
    font-size: 11px;
}

html.layout-narrow-720 .hex-fiverr-logo{
    width: 70px;
    flex-basis: 70px;
}

html.layout-narrow-720 .hex-fiverr-rating strong{
    font-size: 13px;
}

html.layout-narrow-720 .hex-fiverr-level strong{
    font-size: 11px;
}

html.layout-narrow-720 .hero-top{
    margin-top: 24px;
}

html.layout-narrow-720 .hero-title{
    font-size: var(--mobile-title-font-size);
}

html.layout-narrow-720 .hero-intro{
    margin-top: 8px;
}

html.layout-narrow-720 .hero-intro p{
    font-size: 14px;
}

html.layout-narrow-430 .hero{
    padding-top: 22px;
    padding-right: 16px;
    padding-left: 16px;
}

html.layout-narrow-430 .hero-proof-stack{
    width: min(100%, 320px);
    margin-bottom: 16px;
}

html.layout-narrow-430 .marketplace-profile-image{
    width: var(--small-profile-width);
}

html.layout-narrow-430 .hero-top{
    width: min(100%, 360px);
    margin-top: 20px;
}

html.layout-narrow-430 .hero-title{
    font-size: var(--small-title-font-size);
}

html.layout-narrow-430 .hero-intro p{
    font-size: 14px;
}

html.layout-narrow-350 .hex-fiverr-proof{
    gap: 6px;
    padding-left: 10px;
}

html.layout-narrow-350 .hex-fiverr-logo{
    width: 62px;
    flex-basis: 62px;
}

html.layout-narrow-350 .hex-fiverr-level span{
    display: none;
}

html.layout-narrow-350 .hex-fiverr-star svg{
    width: 17px;
    height: 17px;
}

html.layout-short-660:not(.layout-narrow-720) .specialist-popup{
    top: 78px;
}

html.layout-short-660:not(.layout-narrow-720) .rating-popup{
    top: 160px;
}

html.layout-short-660 .hero{
    padding-top: var(--hero-short-padding);
    padding-bottom: var(--hero-short-padding);
}

html.layout-short-660 .hero-aside{
    gap: 7px;
}

html.layout-short-660 .marketplace-profile-image{
    width: var(--short-profile-width);
    margin-bottom: 0;
}

html.layout-short-660 .hex-fiverr-proof{
    min-height: 48px;
}

html.layout-short-660 .hero-top{
    margin-top: 12px;
}

html.layout-short-660 .hero-title{
    font-size: var(--very-short-title-font-size);
}

html.layout-short-660 .hero-intro{
    margin-top: 6px;
}

html.layout-short-660 .hero-intro p{
    font-size: 13px;
}

:root{
    --aboutbp-journey-overlap: calc(100dvh - var(--header-flow-height));
}

.aboutbp-section{
    --about-opacity: 1;
    --about-exit: 0;
    --about-title-one: 0%;
    --about-title-two: 0%;
    --about-copy-opacity: 1;
    --stat-in: 0;
    --stat-depth: 0px;
    --build-opacity: 0;
    --build-clip: 9%;
    --build-title-y: 28px;
    --workflow-opacity: 0;
    --branch-in: 0;
    --state-test: 0;
    --state-refine: 0;
    --state-launch: 0;
    --final-opacity: 0;
    --final-y: 48px;
    --final-scale: .96;
    --final-clip: 50%;
    --takeover-blur: 0px;
    position: relative;
    z-index: 2;
    height: calc(390vh + var(--aboutbp-journey-overlap));
    background: #f7f7f5;
}

.aboutbp-sticky{
    position: sticky;
    top: var(--header-flow-height);
    height: calc(100vh - var(--header-flow-height));
    height: calc(100dvh - var(--header-flow-height));
    overflow: hidden;
}

.aboutbp-shell{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 74% 38%, rgba(244,191,24,.045), transparent 23%),
        #f7f7f5;
    filter: blur(var(--takeover-blur));
    will-change: filter;
}

.aboutbp-shell::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 0 64%, rgba(17,17,17,.018) 64.1%, transparent 64.25%);
    opacity: .6;
}

.aboutbp-sr-only{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.aboutbp-about-grid,
.aboutbp-build-grid{
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.aboutbp-grid-line,
.aboutbp-build-grid-line{
    position: absolute;
    display: block;
    background: rgba(17,17,17,.06);
    transform-origin: left center;
    opacity: calc(var(--about-opacity) * .65);
}

.aboutbp-grid-line-a{ top: 22%; left: 4.5%; width: 31%; height: 1px; transform: scaleX(var(--stat-in)); }

.aboutbp-grid-line-b{ top: 22%; left: 35.5%; width: 1px; height: 51%; transform: scaleY(var(--stat-in)); transform-origin: center top; }

.aboutbp-grid-line-c{ top: 73%; left: 35.5%; width: 51%; height: 1px; transform: scaleX(var(--stat-in)); }

.aboutbp-grid-line-d{ top: 35%; right: 7.5%; width: 1px; height: 38%; transform: scaleY(var(--stat-in)); transform-origin: center bottom; }

.aboutbp-grid-cross{
    position: absolute;
    width: 15px;
    height: 15px;
    opacity: calc(var(--stat-in) * .5);
}

.aboutbp-grid-cross::before,
.aboutbp-grid-cross::after{
    content: "";
    position: absolute;
    background: rgba(17,17,17,.28);
}

.aboutbp-grid-cross::before{ top: 7px; left: 0; width: 15px; height: 1px; }

.aboutbp-grid-cross::after{ top: 0; left: 7px; width: 1px; height: 15px; }

.aboutbp-grid-cross-a{ top: calc(22% - 7px); left: calc(35.5% - 7px); }

.aboutbp-grid-cross-b{ top: calc(73% - 7px); right: calc(13.5% - 7px); }

.aboutbp-scene-index{
    position: absolute;
    z-index: 11;
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(17,17,17,.40);
    font-family: "Inter", monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    pointer-events: none;
}

.aboutbp-scene-index span{ color: #111; }

.aboutbp-scene-index i{ display: block; width: 44px; height: 1px; background: rgba(17,17,17,.22); }

.aboutbp-scene-index em{ font-style: normal; }

.aboutbp-scene-index-about{
    top: clamp(78px, 9.5vh, 118px);
    right: max(var(--page-gutter), 6vw);
    opacity: calc(var(--stat-in) * var(--about-opacity));
    transform: translate3d(calc((1 - var(--stat-in)) * 18px), 0, 0);
}

.aboutbp-eyebrow{
    display: inline-block;
    color: rgba(17,17,17,.52);
    font-family: var(--font-sans);
    font-size: clamp(10px, .72vw, 13px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.aboutbp-eyebrow{
    margin: 0 0 clamp(22px, 2.4vh, 34px) 4px;
    opacity: calc(1 - var(--about-exit));
}

.aboutbp-title{
    display: grid;
    justify-items: start;
    margin: 0;
    color: #0b0b0b;
    font-family: var(--font-display);
    font-size: clamp(82px, 9.7vw, 178px);
    font-weight: 600;
    line-height: .73;
    letter-spacing: -.08em;
}

.aboutbp-title-mask{
    display: block;
    overflow: hidden;
    padding: .08em .09em .08em 0;
}

.aboutbp-title-mask > span{
    display: block;
    transform: translate3d(0, var(--about-title-one), 0);
    will-change: transform;
}

.aboutbp-title-mask-second{
    margin-left: clamp(72px, 10.5vw, 190px);
}

.aboutbp-title-mask-second > span{
    transform: translate3d(0, var(--about-title-two), 0);
}

.aboutbp-title-rule{
    position: relative;
    display: block;
    width: min(420px, 31vw);
    height: 15px;
    margin-top: clamp(20px, 2.4vh, 32px);
    overflow: hidden;
}

.aboutbp-title-rule::before{
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(17,17,17,.18);
    transform: scaleX(var(--stat-in));
    transform-origin: left center;
}

.aboutbp-title-rule i{
    position: absolute;
    top: 3px;
    left: calc(var(--stat-in) * (100% - 9px));
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #f5ba29;
    box-shadow: 0 0 0 4px rgba(244,191,24,.10);
}

.aboutbp-copy-line{
    display: block;
    overflow: hidden;
    min-height: 1.36em;
}

.aboutbp-copy-gap{ margin-top: .38em; }

.aboutbp-copy-line > span{
    display: block;
    transform: translate3d(0, calc((1 - var(--line-in, 0)) * 112%), 0);
    opacity: var(--line-in, 0);
    will-change: transform, opacity;
}

.aboutbp-copy-line-emphasis{
    margin-top: .42em;
    font-weight: 650;
}

.aboutbp-mark{
    position: relative;
    z-index: 0;
    display: inline;
    padding: 0 .035em;
    color: inherit;
    background: none;
}

.aboutbp-mark::before{
    content: "";
    position: absolute;
    right: -.05em;
    bottom: .03em;
    left: -.05em;
    z-index: -1;
    height: .66em;
    background: #f5ba29;
    transform: scaleX(var(--mark-in, 0));
    transform-origin: left center;
    transition: transform .46s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
}

.aboutbp-handoff-source{
    display: inline-block;
    opacity: var(--handoff-source-opacity, 1);
}

.aboutbp-handoff{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 18;
    display: block;
    color: #111;
    font-family: var(--font-sans);
    font-size: inherit;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.025em;
    white-space: nowrap;
    opacity: 0;
    transform-origin: left top;
    will-change: transform, opacity;
    pointer-events: none;
}

.aboutbp-build{
    position: absolute;
    inset: 0;
    z-index: 9;
    overflow: hidden;
    opacity: var(--build-opacity);
    clip-path: inset(var(--build-clip) 0 0 0);
    will-change: opacity, clip-path;
    pointer-events: none;
    background:
        radial-gradient(circle at 68% 55%, rgba(244,191,24,.052), transparent 25%),
        #f7f7f5;
}

.aboutbp-build-grid-line{
    background: rgba(17,17,17,.052);
    opacity: calc(var(--workflow-opacity) * .74);
}

.aboutbp-build-grid-line-a{ top: 25%; left: 5.5%; width: 89%; height: 1px; transform: scaleX(var(--workflow-opacity)); }

.aboutbp-build-grid-line-b{ top: 25%; left: 58%; width: 1px; height: 63%; transform: scaleY(var(--workflow-opacity)); transform-origin: center top; }

.aboutbp-build-grid-line-c{ top: 88%; left: 58%; width: 36%; height: 1px; transform: scaleX(var(--workflow-opacity)); }

.aboutbp-scene-index-build{
    top: clamp(72px, 8.8vh, 108px);
    right: max(var(--page-gutter), 5.5vw);
    opacity: var(--workflow-opacity);
    transform: translate3d(calc((1 - var(--workflow-opacity)) * 18px), 0, 0);
}

.aboutbp-build-heading{
    position: absolute;
    top: clamp(50px, 5.8vh, 78px);
    left: max(var(--page-gutter), 5.6vw);
    z-index: 7;
    width: min(55vw, 910px);
    transform: translate3d(0, var(--build-title-y), 0);
    will-change: transform;
}

.aboutbp-build-meta-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(45vw, 700px);
}

.aboutbp-handoff-target{
    color: rgba(17,17,17,.48);
    font-family: var(--font-sans);
    font-size: clamp(12px, .86vw, 16px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.02em;
    visibility: hidden;
}

.aboutbp-build-title{
    display: grid;
    width: max-content;
    margin-top: clamp(14px, 1.8vh, 24px);
    color: #0c0c0c;
    font-family: var(--font-display);
    font-size: clamp(56px, 6.4vw, 100px);
    font-weight: 700;
    line-height: .84;
    letter-spacing: -.075em;
    white-space: nowrap;    
}

.aboutbp-build-title-small{
    font-size: clamp(38px, 4.2vw, 76px);
    font-weight: 500;
    line-height: .92;
}

.aboutbp-build-title strong{
    font-size: clamp(64px, 7.1vw, 132px);
    font-weight: 600;
    line-height: .82;
}

.aboutbp-build-copy{
    width: min(600px, 38vw);
    margin: clamp(18px, 2.3vh, 30px) 0 0;
    color: #111;
    font-family: var(--font-sans);
    font-size: clamp(14px, 1vw, 18px);
    font-weight: 400;
    line-height: 1.46;
    letter-spacing: -.022em;
}

.aboutbp-build-copy p{
    margin: 0;
}

.aboutbp-build-copy p + p{
    margin-top: .52em;
}

.aboutbp-build-support{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: clamp(18px, 2.2vh, 28px);
    color: rgba(17,17,17,.48);
    font-family: "Inter", monospace;
    font-size: clamp(9px, .66vw, 11px);
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.aboutbp-build-support::before{
    content: "";
    width: 22px;
    height: 1px;
    background: #f5ba29;
}

.aboutbp-workflow{
    position: absolute;
    right: max(var(--page-gutter), 4.2vw);
    bottom: clamp(24px, 3.2vh, 42px);
    z-index: 4;
    width: min(58vw, 1000px);
    height: min(61vh, 650px);
    opacity: var(--workflow-opacity);
    transform: translate3d(0, calc((1 - var(--workflow-opacity)) * 24px), 0);
    will-change: transform, opacity;
}

.aboutbp-workflow::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(24vw, 390px);
    aspect-ratio: 1;
    border: 1px solid rgba(17,17,17,.055);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(17,17,17,.018), 0 0 0 70px rgba(17,17,17,.009);
    transform: translate(-50%, -50%) scale(calc(.88 + (var(--core-in, 0) * .12)));
    opacity: calc(var(--core-in, 0) * .9);
}

.aboutbp-workflow::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f5ba29;
    box-shadow: 0 0 0 5px rgba(244,191,24,.10);
    opacity: var(--core-in, 0);
    transform: translate(-50%, -50%);
}

.aboutbp-workflow-kicker{
    position: absolute;
    top: 5%;
    color: rgba(17,17,17,.30);
    font-family: "Inter", monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
    opacity: var(--workflow-opacity);
}

.aboutbp-workflow-kicker-input{ left: 8%; }

.aboutbp-workflow-kicker-output{ right: 7%; }

.aboutbp-workflow-svg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.aboutbp-role-path,
.aboutbp-branch-path,
.aboutbp-workflow-axis{
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
}

.aboutbp-workflow-axis{
    stroke: rgba(17,17,17,.06);
    stroke-width: 1;
    stroke-dasharray: 3 9;
}

.aboutbp-role-path{
    stroke: rgba(17,17,17,.24);
    stroke-width: 1.1;
}

.aboutbp-branch-path{
    stroke: rgba(17,17,17,.30);
    stroke-width: 1.2;
}

.aboutbp-workflow-center{
    fill: transparent;
    stroke: #f5ba29;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    opacity: var(--center-in, 0);
}

.aboutbp-path-runner{
    fill: #f5ba29;
    opacity: var(--runner-opacity, 0);
    filter: drop-shadow(0 0 7px rgba(244,191,24,.35));
}

.aboutbp-role{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px 7px 9px;
    border: 1px solid rgba(17,17,17,.12);
    border-radius: 999px;
    background: rgba(247,247,245,.82);
    color: #111;
    font-family: var(--font-sans);
    font-size: clamp(10px, .72vw, 13px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    opacity: var(--role-opacity, 0);
    transform: translate3d(var(--role-x, 0px), var(--role-y, 0px), 0) translate(-50%, -50%);
    will-change: transform, opacity;
    white-space: nowrap;
}

.aboutbp-role::before{
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(17,17,17,.28);
    transition: background-color .2s ease, box-shadow .2s ease;
}

.aboutbp-role.is-active::before{
    background: #f5ba29;
    box-shadow: 0 0 0 4px rgba(244,191,24,.11);
}

.aboutbp-workflow-core{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 6;
    display: grid;
    justify-items: center;
    gap: 2px;
    color: rgba(17,17,17,.34);
    font-family: var(--font-display);
    font-size: clamp(13px, .92vw, 17px);
    line-height: 1;
    letter-spacing: -.03em;
    opacity: var(--core-in, 0);
    transform: translate(-50%, -50%) scale(calc(.88 + (var(--core-in, 0) * .12)));
    white-space: nowrap;
}

.aboutbp-workflow-core span{
    color: rgba(17,17,17,.40);
    font-family: "Inter", monospace;
    font-size: .62em;
    font-weight: 700;
    letter-spacing: .14em;
}

.aboutbp-workflow-core strong{
    color: #111;
    font-size: clamp(22px, 2vw, 36px);
    font-weight: 600;
    letter-spacing: -.05em;
}

.aboutbp-output{
    position: absolute;
    z-index: 5;
    display: grid;
    gap: 3px;
    color: #111;
    opacity: var(--output-in, 0);
    transform: translate3d(calc((1 - var(--output-in, 0)) * 18px), 0, 0);
    will-change: transform, opacity;
}

.aboutbp-output::before{
    content: "";
    position: absolute;
    top: 50%;
    left: -25px;
    width: 14px;
    height: 1px;
    background: #f5ba29;
}

.aboutbp-output span{
    color: rgba(17,17,17,.42);
    font-family: "Inter", monospace;
    font-size: clamp(8px, .56vw, 10px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .13em;
}

.aboutbp-output strong{
    font-family: var(--font-display);
    font-size: clamp(17px, 1.5vw, 27px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.045em;
}

.aboutbp-output-api{
    top: 23%;
    right: 1.2%;
}

.aboutbp-output-php{
    top: 70%;
    right: 6%;
}

.aboutbp-transition-node{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #f5ba29;
    box-shadow: 0 0 0 5px rgba(244,191,24,.11);
    opacity: 0;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
    pointer-events: none;
}

.aboutbp-final-statement{
    position: absolute;
    inset: 0;
    z-index: 12;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: .015em;
    color: #0b0b0b;
    font-family: var(--font-display);
    font-size: clamp(82px, 9.2vw, 174px);
    font-weight: 500;
    line-height: .84;
    letter-spacing: -.062em;
    text-align: center;
    opacity: var(--final-opacity);
    clip-path: inset(0 var(--final-clip) 0 var(--final-clip));
    transform: translate3d(0, var(--final-y), 0) scale(var(--final-scale));
    transform-origin: center;
    will-change: transform, clip-path, opacity;
    pointer-events: none;
}

.aboutbp-final-statement > span{
    display: block;
    white-space: nowrap;
}

.aboutbp-final-statement span.highlight-numbers{
    color: #f5ba29;
    font-weight: bold;
}

.aboutbp-final-note{
    width: min(620px, 62vw);
    margin: clamp(22px, 2.4vw, 38px) 0 0;
    color: #111;
    font-family: var(--font-sans);
    font-size: clamp(13px, 1.02vw, 19px);
    font-weight: 400;
    line-height: 1.42;
    letter-spacing: -.018em;
    text-align: center;
}

.aboutbp-final-statement i{
    display: block;
    width: 12px;
    height: 12px;
    margin-top: 26px;
    border-radius: 50%;
    background: #f5ba29;
    box-shadow: 0 0 0 4px rgba(244,191,24,.10);
}

@media (max-width: 1180px) {
.aboutbp-section{ height: calc(375vh + var(--aboutbp-journey-overlap)); }

.aboutbp-about-heading{ left: max(var(--page-gutter), 5vw); }

.aboutbp-copy{ right: max(var(--page-gutter), 5vw); width: min(49vw, 650px); }

.aboutbp-build-heading{ left: max(var(--page-gutter), 5vw); width: min(60vw, 780px); }

.aboutbp-build-copy{ width: min(520px, 44vw); }

.aboutbp-workflow{ right: 2.5vw; width: 62vw; }
}

@media (max-width: 900px) and (min-width: 621px) {
.aboutbp-mark{
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        background-image: linear-gradient(#f5ba29, #f5ba29);
        background-repeat: no-repeat;
        background-position: left calc(100% - .03em);
        background-size: calc(var(--mark-in, 0) * 100%) .66em;
        transition: background-size .46s cubic-bezier(.2,.8,.2,1);
    }

.aboutbp-mark::before{ display: none; }

.aboutbp-section{ height: calc(360vh + var(--aboutbp-journey-overlap)); }

.aboutbp-title{ font-size: clamp(68px, 10.5vw, 104px); }

.aboutbp-title-mask-second{ margin-left: 9vw; }

.aboutbp-copy{ top: 35%; width: 53vw; font-size: clamp(16px, 2vw, 21px); }

.aboutbp-build-heading{ top: 5vh; width: 67vw; }

.aboutbp-build-meta-row{ width: 58vw; }

.aboutbp-build-title-small{ font-size: clamp(34px, 5.2vw, 58px); }

.aboutbp-build-title strong{ font-size: clamp(52px, 8.2vw, 92px); }

.aboutbp-build-copy{ width: min(500px, 58vw); font-size: 14px; }

.aboutbp-build-support{ display: none; }

.aboutbp-workflow{ right: 0; bottom: 1.5vh; width: 76vw; height: 57vh; }

.aboutbp-output-api{ right: 2%; }

.aboutbp-output-php{ right: 7%; }

.aboutbp-final-statement{ font-size: clamp(64px, 10.5vw, 112px); }

.aboutbp-final-note{ width: min(520px, 74vw); }
}

@media (max-width: 620px) {
.aboutbp-mark{
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        background-image: linear-gradient(#f5ba29, #f5ba29);
        background-repeat: no-repeat;
        background-position: left calc(100% - .03em);
        background-size: 100% .66em;
    }

.aboutbp-mark::before{ display: none; }

.aboutbp-section{
        height: auto;
        padding-bottom: var(--aboutbp-journey-overlap);
        background: #f7f7f5;
    }

.aboutbp-sticky{
        position: relative;
        top: auto;
        height: auto;
        overflow: visible;
    }

.aboutbp-shell{
        height: auto;
        overflow: hidden;
        filter: none;
        background: #f7f7f5;
    }

.aboutbp-shell::before{ display: none; }

.aboutbp-about,
.aboutbp-build,
.aboutbp-final-statement{
        position: relative;
        inset: auto;
        opacity: 1 !important;
        clip-path: none !important;
        transform: none !important;
        pointer-events: none;
    }

.aboutbp-about{
        min-height: 900px;
        padding: 74px 20px 76px;
    }

.aboutbp-about::before{
        top: 29%;
        right: -30%;
        width: 95vw;
        opacity: .75;
        transform: none;
    }

.aboutbp-about-grid{ opacity: .45; }

.aboutbp-grid-line-a{ top: 24%; left: 20px; width: calc(100% - 40px); transform: none; }

.aboutbp-grid-line-b{ display: none; }

.aboutbp-grid-line-c{ top: auto; bottom: 34%; left: 20px; width: calc(100% - 40px); transform: none; }

.aboutbp-grid-line-d{ display: none; }

.aboutbp-grid-cross{ display: none; }

.aboutbp-scene-index-about{
        top: 36px;
        right: 20px;
        opacity: 1;
        transform: none;
    }

.aboutbp-about-heading{
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        transform: none;
        opacity: 1;
    }

.aboutbp-eyebrow{ margin-bottom: 22px; font-size: 9px; }

.aboutbp-title{
        font-size: clamp(68px, 24vw, 104px);
        line-height: .75;
    }

.aboutbp-title-mask-second{ margin-left: 16vw; }

.aboutbp-title-mask > span{
        transform: translate3d(0, 0, 0) !important;
        transition: transform .72s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
    }

.aboutbp-about:not(.is-mobile-visible) .aboutbp-title-mask > span{
        opacity: 0;
        transform: translate3d(0, 105%, 0) !important;
    }

.aboutbp-title-rule{ width: 62vw; }

.aboutbp-title-rule::before{ transform: scaleX(1); }

.aboutbp-title-rule i{ left: calc(100% - 9px); }

.aboutbp-copy{
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        margin-top: 50px;
        font-size: clamp(16px, 4.7vw, 19px);
        line-height: 1.48;
        opacity: 1;
        transform: none;
    }

.aboutbp-copy::before{ left: -12px; }

.aboutbp-copy-line{ min-height: 0; overflow: visible; }

.aboutbp-copy-line + .aboutbp-copy-line{ margin-top: .10em; }

.aboutbp-copy-gap{ margin-top: .55em !important; }

.aboutbp-copy-line > span{
        transform: none !important;
        opacity: 1 !important;
        transition: opacity .55s ease, transform .65s cubic-bezier(.2,.8,.2,1);
    }

.aboutbp-about:not(.is-mobile-visible) .aboutbp-copy-line > span{
        opacity: 0 !important;
        transform: translate3d(0, 16px, 0) !important;
    }

.aboutbp-handoff-source{ opacity: 1 !important; }

.aboutbp-handoff{ display: none; }

.aboutbp-build{
        min-height: 1110px;
        padding: 86px 20px 72px;
        background:
            radial-gradient(circle at 78% 64%, rgba(244,191,24,.055), transparent 22%),
            #f3f2ed;
    }

.aboutbp-build-grid-line-a{ top: 33%; left: 20px; width: calc(100% - 40px); transform: none; }

.aboutbp-build-grid-line-b{ display: none; }

.aboutbp-build-grid-line-c{ top: auto; bottom: 9%; left: 20px; width: calc(100% - 40px); transform: none; }

.aboutbp-scene-index-build{
        top: 34px;
        right: 20px;
        opacity: 1;
        transform: none;
    }

.aboutbp-build-heading{
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        transform: none;
    }

.aboutbp-build-meta-row{ width: 100%; }

.aboutbp-handoff-target{ visibility: visible; font-size: 11px; }

.aboutbp-build-title{ width: 100%; margin-top: 24px; }

.aboutbp-build-title-small{ font-size: 40px; }

.aboutbp-build-title strong{
        width: 100%;
        font-size: clamp(47px, 13.5vw, 58px);
        line-height: .86;
        white-space: normal;
    }

.aboutbp-build-copy{
        width: 100%;
        margin-top: 26px;
        font-size: 15.5px;
        line-height: 1.5;
    }

.aboutbp-build-copy p + p{ margin-top: .7em; }

.aboutbp-build-support{ margin-top: 22px; font-size: 9px; }

.aboutbp-build-heading,
.aboutbp-workflow{
        transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1);
    }

.aboutbp-build:not(.is-mobile-visible) .aboutbp-build-heading,
.aboutbp-build:not(.is-mobile-visible) .aboutbp-workflow{
        opacity: 0;
        transform: translate3d(0, 22px, 0);
    }

.aboutbp-workflow{
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        height: 520px;
        margin-top: 50px;
        opacity: 1;
        transform: none;
    }

.aboutbp-workflow::before{ width: 56vw; box-shadow: 0 0 0 22px rgba(17,17,17,.018), 0 0 0 42px rgba(17,17,17,.009); opacity: 1; transform: translate(-50%, -50%); }

.aboutbp-workflow::after{ opacity: 1; }

.aboutbp-workflow-kicker{ font-size: 8px; opacity: 1; }

.aboutbp-workflow-kicker-input{ left: 1%; }

.aboutbp-workflow-kicker-output{ right: 0; }

.aboutbp-role{
        font-size: 9px;
        padding: 6px 8px;
        opacity: 1 !important;
        transform: translate3d(var(--mobile-role-x, 0px), var(--mobile-role-y, 0px), 0) translate(-50%, -50%) !important;
    }

.aboutbp-role-vendor{ --mobile-role-x: 55px; --mobile-role-y: 104px; }

.aboutbp-role-buyer{ --mobile-role-x: 64px; --mobile-role-y: 194px; }

.aboutbp-role-admin{ --mobile-role-x: 82px; --mobile-role-y: 286px; }

.aboutbp-workflow-svg{ opacity: .84; }

.aboutbp-workflow-axis{ stroke-dasharray: 3 9 !important; stroke-dashoffset: 0 !important; }

.aboutbp-role-path,
.aboutbp-branch-path{ stroke-dashoffset: 0 !important; }

.aboutbp-workflow-center{ opacity: 1 !important; }

.aboutbp-path-runner{ display: none; }

.aboutbp-workflow-core{
        top: 50%;
        left: 50%;
        opacity: 1 !important;
        transform: translate(-50%, -50%) !important;
    }

.aboutbp-workflow-core strong{ font-size: 22px; }

.aboutbp-output{ opacity: 1 !important; transform: none !important; }

.aboutbp-output-api{ top: 23%; right: 0; }

.aboutbp-output-php{ top: 72%; right: 7%; }

.aboutbp-output strong{ font-size: 17px; }

.aboutbp-transition-node{ display: none; }

.aboutbp-final-statement{
        min-height: 0;
        padding: 48px 20px 200px;
        align-content: start;
        font-size: clamp(44px, 13vw, 62px);
        line-height: .88;
    }

.aboutbp-final-note{
        width: min(88vw, 480px);
        margin-top: 24px;
        font-size: 14px;
    }

.aboutbp-final-statement i{ margin-top: 22px; }

.aboutbp-final-statement:not(.is-mobile-visible) > span,
.aboutbp-final-statement:not(.is-mobile-visible) .aboutbp-final-note,
.aboutbp-final-statement:not(.is-mobile-visible) i{
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }

.aboutbp-final-statement > span,
.aboutbp-final-statement .aboutbp-final-note,
.aboutbp-final-statement i{
        transition: opacity .55s ease, transform .7s cubic-bezier(.2,.8,.2,1);
    }
}

@media (max-width: 390px) {
.aboutbp-about{ min-height: 930px; }

.aboutbp-title{ font-size: clamp(62px, 23vw, 86px); }

.aboutbp-copy{ font-size: 15.5px; }

.aboutbp-build{ min-height: 1130px; }

.aboutbp-build-title-small{ font-size: 35px; }

.aboutbp-build-title strong{ font-size: 47px; }

.aboutbp-workflow{ height: 500px; }

.aboutbp-output-api{ right: 0; }

.aboutbp-output-php{ right: 3%; }
}

@media (prefers-reduced-motion: reduce) {
.aboutbp-section{
        height: auto;
        padding-bottom: 0;
        background: #f7f7f5;
    }

.aboutbp-sticky{
        position: relative;
        top: auto;
        height: auto;
        overflow: visible;
    }

.aboutbp-shell{
        height: auto;
        overflow: hidden;
        filter: none;
    }

.aboutbp-about,
.aboutbp-build,
.aboutbp-final-statement{
        position: relative;
        inset: auto;
        opacity: 1 !important;
        clip-path: none !important;
        transform: none !important;
    }

.aboutbp-about{ min-height: 760px; }

.aboutbp-build{ min-height: 820px; background: #f3f2ed; }

.aboutbp-about-heading,
.aboutbp-copy,
.aboutbp-build-heading,
.aboutbp-workflow,
.aboutbp-output,
.aboutbp-final-statement > span,
.aboutbp-final-note,
.aboutbp-final-statement i{
        opacity: 1 !important;
        transform: none !important;
    }

.aboutbp-title-mask > span{ transform: none !important; }

.aboutbp-copy-line > span{ opacity: 1 !important; transform: none !important; }

.aboutbp-mark::before{ transform: scaleX(1) !important; }

.aboutbp-handoff{ display: none; }

.aboutbp-role-path,
.aboutbp-branch-path{ stroke-dashoffset: 0 !important; }

.aboutbp-workflow-center{ opacity: 1 !important; }

.aboutbp-path-runner,
.aboutbp-transition-node{ display: none; }
}

.aboutbp-section{
    --about-eyebrow-in: 0;
    --about-title-one: 108%;
    --about-title-two: 108%;
    --about-rule-in: 0;
    --about-copy-in: 0;
    --about-radar-in: 0;
    --about-radar-exit: 0;
    --radar-ring-1: 0;
    --radar-ring-2: 0;
    --radar-ring-3: 0;
    --radar-ring-4: 0;
    --radar-axis-in: 0;
    --radar-node-a: 0;
    --radar-node-b: 0;
    --radar-node-c: 0;
    --radar-node-d: 0;
    --radar-active-node: 0;
    --radar-angle: -12deg;
    --stat-1: 0;
    --stat-2: 0;
    --stat-3: 0;
    --stat-4: 0;
    --about-exit: 0;
    --about-opacity: 1;
    --build-opacity: 0;
    --build-exit: 0;
    --build-eyebrow-in: 0;
    --build-title-one: 0;
    --build-title-two: 0;
    --build-copy-in: 0;
    --build-support-in: 0;
    --workflow-opacity: 0;
    --input-1: 0;
    --input-2: 0;
    --input-3: 0;
    --core-in: 0;
    --core-pulse: 0;
    --state-test: 0;
    --state-refine: 0;
    --state-launch: 0;
    height: calc(360vh + var(--aboutbp-journey-overlap));
}

.aboutbp-shell{
    background: #f7f7f5;
}

.aboutbp-shell::before,
.aboutbp-about-grid,
.aboutbp-build-grid,
.aboutbp-scene-index,
.aboutbp-handoff,
.aboutbp-handoff-source,
.aboutbp-handoff-target{
    display: none !important;
}

.aboutbp-about{
    position: relative;
    inset: auto;
    z-index: 5;
    display: grid;
    grid-template-columns: 32.8% 67.2%;
    --about-title-top-gap: clamp(42px, 4.4vh, 52px);
    --about-title-half-gap: clamp(21px, 2.2vh, 26px);
    
    --about-visual-balance: clamp(4px, .55vw, 11px);
    grid-template-rows:
        calc(7.65% - var(--about-title-half-gap) - var(--about-visual-balance))
        8.1%
        27.3%
        49.3%
        calc(7.65% + var(--about-title-half-gap) + var(--about-visual-balance));
    overflow: hidden;
    opacity: var(--about-opacity);
    transform: translate3d(0, calc(var(--about-exit) * -22px), 0);
    will-change: transform, opacity;
    pointer-events: none;
    background: #f7f7f5;
}

.aboutbp-about::before{
    display: none;
}

.aboutbp-about-tech{
    display: contents;
    pointer-events: none;
}

.aboutbp-dot-grid{
    position: absolute;
    width: 92px;
    height: 150px;
    opacity: calc(var(--about-radar-in) * .48 * (1 - var(--about-exit)));
    background-image: radial-gradient(circle, rgba(17,17,17,.25) 1.6px, transparent 1.8px);
    background-size: 20px 20px;
    transition: none;
}

.aboutbp-dot-grid-left{
    left: 5.5%;
    bottom: 12%;
}

.aboutbp-dot-grid-right{
    right: 6.3%;
    top: 25%;
    height: 290px;
}

.aboutbp-content-column{
    position: relative;
    z-index: 7;
    grid-column: 1 / -1;
    grid-row: 3 / 5;
    align-self: start;
    justify-self: end;
    width: min(44vw, 720px);
    margin-right: 8.3%;
}

.aboutbp-stack{
    position: relative;
    width: 100%;
    margin: 0 0 clamp(42px, 5vh, 58px);
    color: #171714;
    font-family: var(--font-sans);
    text-align: left;
    opacity: calc(1 - var(--about-exit));
    transform: translate3d(0, calc((1 - var(--about-eyebrow-in)) * 8px), 0);
}

.aboutbp-stack-heading{
    display: grid;
    grid-template-columns: minmax(36px, 1fr) auto minmax(36px, 1fr);
    align-items: center;
    gap: 14px;
    width: min(310px, 58%);
    margin: 0 0 16px;
}

.aboutbp-stack-heading span{
    display: block;
    height: 2px;
    background: #f5ba29;
}

.aboutbp-stack-heading strong{
    color: #f5ba29;
    font-size: clamp(20px, .82vw, 15px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.aboutbp-stack-items{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(11px, 1vw, 18px);
    font-size: clamp(12px, .93vw, 17px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.025em;
    white-space: nowrap;
}

.aboutbp-stack-items i{
    display: block;
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f5ba29;
}

.aboutbp-tech-diagram{
    position: relative;
    z-index: 1;
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    justify-self: end;
    width: min(430px, 28vw);
    aspect-ratio: 1;
    margin-right: calc(-1 * min(120px, 7.2vw));
    margin-bottom: calc(-1 * min(128px, 7.8vw));
    opacity: calc(var(--about-radar-in) * (1 - (var(--about-exit) * .62)));
    transform: scale(calc(.97 + (var(--about-radar-in) * .03)));
    will-change: transform, opacity;
}

.aboutbp-tech-diagram-svg{
    width: 100%;
    height: 100%;
    overflow: visible;
}

.aboutbp-tech-ring,
.aboutbp-tech-axis,
.aboutbp-tech-structure,
.aboutbp-tech-link,
.aboutbp-tech-node{
    fill: none;
    vector-effect: non-scaling-stroke;
}

.aboutbp-tech-ring{
    stroke: rgba(17,17,17,.15);
    stroke-width: 1.2;
}

.aboutbp-tech-ring-outer{
    stroke-dasharray: 3 4;
    stroke: rgba(17,17,17,.14);
}

.aboutbp-tech-axis{
    stroke: rgba(17,17,17,.12);
    stroke-width: 1.1;
}

.aboutbp-tech-structure{
    stroke: rgba(17,17,17,.08);
    stroke-width: 1.15;
}

.aboutbp-tech-structure-inner{
    stroke: rgba(17,17,17,.06);
}

.aboutbp-tech-link{
    stroke: rgba(17,17,17,.14);
    stroke-width: 1.15;
}

.aboutbp-tech-node{
    stroke: none;
}

.aboutbp-tech-node-gray{
    fill: rgba(17,17,17,.18);
}

.aboutbp-tech-node-accent{
    fill: #f5ba29;
}

.aboutbp-tech-core{
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 1.4px solid rgba(17,17,17,.28);
    background: rgba(255,255,255,.9);
    box-shadow: 0 16px 28px rgba(17,17,17,.04), 0 0 0 18px rgba(255,255,255,.42);
    transform: translate(-50%, -50%);
}

.aboutbp-tech-core span{
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid #171714;
    color: #171714;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 58px;
    font-weight: 700;
    line-height: 66px;
    text-align: center;
}

.aboutbp-tech-badge{
    position: absolute;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid rgba(17,17,17,.14);
    background: rgba(255,255,255,.92);
    box-shadow: 0 10px 20px rgba(17,17,17,.03);
}

.aboutbp-tech-badge-top{ top: 5.8%; left: 50%; transform: translate(-50%, 0); }

.aboutbp-tech-badge-right{ top: 50%; right: 4.8%; transform: translate(0, -50%); }

.aboutbp-tech-badge-bottom{ bottom: 5.8%; left: 50%; transform: translate(-50%, 0); }

.aboutbp-tech-badge-left{ top: 50%; left: 4.8%; transform: translate(0, -50%); }

.aboutbp-tech-badge svg{
    width: 26px;
    height: 26px;
    fill: none;
    stroke: #171714;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.aboutbp-tech-badge svg .accent-fill{
    fill: #f5ba29;
    stroke: none;
}

.aboutbp-about-heading{
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 4;
    grid-column: 1 / -1;
    grid-row: 2 / 5;
    align-self: start;
    justify-self: start;
    width: min(45vw, 820px);
    margin-left: 5.7%;
    opacity: calc(1 - var(--about-exit));
    transform: none;
}

.aboutbp-eyebrow{
    display: block;
    margin: 0 0 clamp(30px, 4vh, 46px) 2px;
    color: rgba(17,17,17,.70);
    font-family: var(--font-sans);
    font-size: clamp(10px, .74vw, 16px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .16em;
    opacity: var(--about-eyebrow-in);
    transform: translate3d(0, calc((1 - var(--about-eyebrow-in)) * 8px), 0);
}

.aboutbp-title{
    display: grid;
    justify-items: start;
    margin: var(--about-title-top-gap) 0 0;
    color: #0b0b0b;
    font-family: var(--font-display);
    font-size: clamp(108px, 10.2vw, 196px);
    font-weight: 600;
    line-height: .79;
    letter-spacing: -.075em;
}

.aboutbp-title-mask{
    display: block;
    overflow: hidden;
    padding: .045em .08em .06em 0;
}

.aboutbp-title-mask > span{
    display: block;
    transform: translate3d(0, var(--about-title-one), 0);
    will-change: transform;
}

.aboutbp-title-mask-second{
    margin-left: 0;
}

.aboutbp-title-mask-second > span{
    transform: translate3d(0, var(--about-title-two), 0);
}

.aboutbp-copy{
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    z-index: auto;
    width: 100%;
    color: #151513;
    font-family: var(--font-sans);
    font-size: clamp(18px, 1.42vw, 26px);
    font-weight: 400;
    line-height: 1.34;
    letter-spacing: -.035em;
    opacity: calc(var(--about-copy-in) * (1 - var(--about-exit)));
    transform: translate3d(0, calc((1 - var(--about-copy-in)) * 14px), 0);
    will-change: opacity, transform;
}

.aboutbp-copy::before{
    display: none;
}

.aboutbp-copy-line{
    display: block;
    min-height: 0;
    margin: 0;
    overflow: hidden;
}

.aboutbp-copy-line + .aboutbp-copy-line{
    margin-top: .95em;
}

.aboutbp-copy-gap{
    margin-top: .95em !important;
}

.aboutbp-copy-line > span{
    display: block;
    opacity: var(--line-in, 0);
    transform: translate3d(0, calc((1 - var(--line-in, 0)) * 14px), 0);
}

.aboutbp-copy-line-emphasis{
    margin-top: 1.05em !important;
    font-weight: 750;
}

.aboutbp-mark{
    position: relative;
    z-index: 0;
    display: inline;
    padding: 0 .035em;
    color: inherit;
    background-image: linear-gradient(#f5ba29, #f5ba29);
    background-repeat: no-repeat;
    background-position: left 84%;
    background-size: calc(var(--mark-in, 0) * 100%) .72em;
    transition: background-size 1.35s linear;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.aboutbp-mark::before{
    display: none;
}

.aboutbp-flow-icon svg,
.aboutbp-core-icon svg{
    width: 28px;
    height: 28px;
    fill: none;
    stroke: #111;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.aboutbp-flow-icon svg .accent,
.aboutbp-core-icon svg .accent,
.aboutbp-build-network .accent{
    fill: #f5ba29;
    stroke: #f5ba29;
}

@keyframes aboutbp-radar-orbit {
    from { transform: rotate(-12deg); }
    to { transform: rotate(348deg); }
}

.aboutbp-build{
    position: absolute;
    inset: 0;
    z-index: 9;
    overflow: hidden;
    opacity: var(--build-opacity);
    clip-path: none;
    transform: translate3d(0, calc((1 - var(--build-opacity)) * 12px - (var(--build-exit) * 18px)), 0);
    will-change: opacity, transform;
    pointer-events: none;
    background: #f7f7f5;
}

.aboutbp-build-tech{
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: calc(var(--workflow-opacity) * (1 - var(--build-exit)));
}

.aboutbp-build-dot-grid{
    position: absolute;
    left: -2%;
    top: 37%;
    width: 75px;
    height: 280px;
    background-image: radial-gradient(circle, rgba(17,17,17,.24) 1.5px, transparent 1.7px);
    background-size: 20px 20px;
    opacity: .48;
}

.aboutbp-build-network{
    position: absolute;
    top: -2%;
    right: 0;
    width: 19vw;
    height: 100%;
    fill: none;
    stroke: rgba(17,17,17,.085);
    stroke-width: 1;
}

.aboutbp-build-network circle{
    fill: rgba(17,17,17,.16);
    stroke: none;
}

.aboutbp-build-heading{
    position: absolute;
    top: 11.2%;
    left: 6.1%;
    z-index: 7;
    width: min(39vw, 650px);
    transform: none;
}

.aboutbp-build-note{
    display: none;
}

.aboutbp-build-label{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    padding: clamp(14px, 1vh, 10px) clamp(15px, 1.15vw, 22px);
    border-radius: 999px;
    background: #f5ba29;
    color: #111;
    font-family: var(--font-sans);
    font-size: clamp(16px, .72vw, 20px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: var(--build-eyebrow-in);
    transform: translate3d(0, calc((1 - var(--build-eyebrow-in)) * 8px), 0);
}

.aboutbp-build-title{
    display: grid;
    width: auto;
    margin: clamp(20px, 2.2vh, 26px) 0 0;
    color: #0b0b0b;
    font-family: var(--font-display);
    font-size: clamp(58px, 4.55vw, 88px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.055em;
}

.aboutbp-build-title-mask{
    display: block;
    overflow: hidden;
    padding: .04em .08em .05em 0;
}

.aboutbp-build-title-mask > span,
.aboutbp-build-title-mask > strong{
    display: block;
    font: inherit;
    font-weight: inherit;
    transform: translate3d(0, calc((1 - var(--build-title-one)) * 108%), 0);
}

.aboutbp-build-title-mask + .aboutbp-build-title-mask > strong{
    transform: translate3d(0, calc((1 - var(--build-title-two)) * 108%), 0);
}

.aboutbp-build-copy{
    width: min(490px, 30vw);
    margin: clamp(28px, 3.4vh, 38px) 0 0;
    color: rgba(17,17,17,.68);
    font-family: var(--font-sans);
    font-size: clamp(14px, .94vw, 17px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -.018em;
    opacity: var(--build-copy-in);
    transform: translate3d(0, calc((1 - var(--build-copy-in)) * 14px), 0);
}

.aboutbp-build-copy p{
    margin: 0;
}

.aboutbp-build-copy p + p{
    margin-top: 1.05em;
}

.aboutbp-build-support{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: clamp(28px, 3.4vh, 38px);
    color: #171714;
    font-family: var(--font-sans);
    font-size: clamp(12px, .88vw, 16px);
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -.015em;
    text-transform: none;
    opacity: var(--build-support-in);
    transform: translate3d(0, calc((1 - var(--build-support-in)) * 10px), 0);
}

.aboutbp-build-support::before{
    display: none;
}

.aboutbp-build-support i{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f5ba29;
}

.aboutbp-workflow{
    position: absolute;
    top: 4.5%;
    right: 8%;
    bottom: auto;
    z-index: 4;
    width: min(55vw, 1060px);
    height: 82%;
    opacity: calc(var(--workflow-opacity) * (1 - var(--build-exit)));
    transform: translate3d(0, calc((1 - var(--workflow-opacity)) * 18px), 0);
    will-change: transform, opacity;
}

.aboutbp-workflow::before,
.aboutbp-workflow::after{
    display: none;
}

.aboutbp-workflow-rings{
    position: absolute;
    top: 54.6%;
    left: 50%;
    z-index: 0;
    width: min(340px, 21vw);
    aspect-ratio: 1;
    border: 1px dotted rgba(17,17,17,.10);
    border-radius: 50%;
    box-shadow:
        0 0 0 28px rgba(17,17,17,.012),
        0 0 0 52px rgba(17,17,17,.010),
        0 0 0 78px rgba(17,17,17,.008);
    opacity: calc(var(--core-in) * .9);
    transform: translate(-50%, -50%) scale(calc(.85 + (var(--core-in) * .15)));
}

.aboutbp-workflow-svg{
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.aboutbp-role-path,
.aboutbp-branch-path,
.aboutbp-process-route,
.aboutbp-process-mask-path{
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.aboutbp-role-path,
.aboutbp-branch-path{
    stroke: rgba(17,17,17,.25);
    stroke-width: 1.35;
}

.aboutbp-process-mask-path{
    fill: none;
    stroke: #fff;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.aboutbp-process-route{
    stroke: #f5ba29;
    stroke-width: 1.45;
    stroke-dasharray: 6 8;
    opacity: var(--process-route-in, 0);
}

.aboutbp-workflow-center{
    fill: #f5ba29;
    stroke: none;
    opacity: var(--core-in);
}

.aboutbp-path-runner{
    fill: #f5ba29;
    opacity: var(--runner-opacity, 0);
    filter: none;
}

.aboutbp-flow-card{
    position: absolute;
    z-index: 5;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 15px;
    box-sizing: border-box;
    border: 1px solid rgba(17,17,17,.035);
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 12px 30px rgba(17,17,17,.055);
    color: #111;
    font-family: var(--font-sans);
    text-align: center;
}

.aboutbp-flow-icon{
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
}

.aboutbp-flow-icon svg{
    width: 100%;
    height: 100%;
    stroke-width: 1.75;
}

.aboutbp-flow-card > strong{
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.aboutbp-role{
    top: 4.4%;
    left: auto;
    width: 22%;
    padding: 14px;
    border-radius: 16px;
    opacity: var(--role-opacity, 0);
    transform: translate3d(0, calc((1 - var(--role-opacity, 0)) * -15px), 0) scale(calc(.96 + (var(--role-opacity, 0) * .04)));
    white-space: normal;
    will-change: transform, opacity;
}

.aboutbp-role::before{
    display: none;
}

.aboutbp-role-vendor{ left: 9.5%; }

.aboutbp-role-buyer{ left: 39%; }

.aboutbp-role-admin{ left: 68.5%; }

.aboutbp-workflow-core{
    top: 40.6%;
    left: 50%;
    width: clamp(230px, 30%, 300px);
    height: 22.5%;
    gap: 14px;
    padding: 10px;
    border: 1px solid rgba(244,191,24,.75);
    border-radius: 18px;
    background: #111210;
    box-shadow: 0 16px 34px rgba(17,17,17,.13), 0 0 0 1px rgba(244,191,24,.04);
    color: #fff;
    text-align: center;
    white-space: normal;
    opacity: var(--core-in);
    transform: translateX(-50%) scale(calc(.90 + (var(--core-in) * .10)));
    transform-origin: center;
}

.aboutbp-workflow-core::after{
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    box-shadow: 0 0 0 8px rgba(244,191,24,.055), 0 0 34px rgba(244,191,24,.16);
    opacity: var(--core-pulse);
    pointer-events: none;
}

.aboutbp-core-icon{
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
}

.aboutbp-core-icon svg{
    width: 100%;
    height: 100%;
    stroke: #fff;
    stroke-width: 1.6;
}

.aboutbp-workflow-core > strong{
    color: #fff;
    font-family: var(--font-sans);
    font-size: clamp(13px, 1vw, 18px);
    font-weight: 750;
    letter-spacing: -.025em;
}

.aboutbp-output{
    top: 47.2%;
    width: clamp(150px, 22%, 190px);
    gap: 12px;
    opacity: var(--output-in, 0);
    transform: translate3d(calc((1 - var(--output-in, 0)) * var(--output-shift, 18px)), 0, 0);
    will-change: opacity, transform;
}

.aboutbp-output::before{
    display: none;
}

.aboutbp-output-php{
    left: 0;
    right: auto;
    --output-shift: 18px;
    padding: 14px;
}

.aboutbp-output-api{
    right: 0;
    left: auto;
    --output-shift: -18px;
    padding: 14px;
}

.aboutbp-output strong{
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.aboutbp-output span:not(.aboutbp-flow-icon){
    display: none;
}

.aboutbp-transition-node{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #f5ba29;
    box-shadow: 0 0 0 6px rgba(244,191,24,.11), 0 0 18px rgba(244,191,24,.20);
    opacity: 0;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
    pointer-events: none;
}

@media (max-width: 1180px) and (min-width: 901px) {
.aboutbp-section{ height: calc(350vh + var(--aboutbp-journey-overlap)); }

.aboutbp-about{
        grid-template-columns: 31% 69%;
        --about-title-top-gap: 33px;
        --about-title-half-gap: 16.5px;
        grid-template-rows:
            calc(5.75% - var(--about-title-half-gap) - var(--about-visual-balance))
            6.5%
            40.5%
            41.5%
            calc(5.75% + var(--about-title-half-gap) + var(--about-visual-balance));
    }

.aboutbp-about-heading{ width: 47%; margin-left: 4.5%; }

.aboutbp-eyebrow{ font-size: 9px; margin-bottom: 24px; }

.aboutbp-title{ margin-top: 33px; font-size: clamp(82px, 14vw, 128px); }

.aboutbp-content-column{ width: 48%; margin-right: 4.5%; }

.aboutbp-copy{ font-size: clamp(16px, 1.7vw, 20px); }

.aboutbp-tech-diagram{
        grid-column: 1;
        grid-row: 3;
        width: 300px;
        margin-right: -90px;
        margin-bottom: -92px;
    }

.aboutbp-stack{ margin-bottom: 38px; }

.aboutbp-stack-heading{ width: min(270px, 66%); margin-bottom: 13px; }

.aboutbp-stack-items{ gap: 10px; font-size: 11px; }

.aboutbp-build-heading{ left: 4.5%; width: 38%; }

.aboutbp-build-title{ font-size: clamp(44px, 4.7vw, 58px); }

.aboutbp-build-copy{ width: 100%; font-size: 13.5px; }

.aboutbp-build-support{ font-size: 12px; }

.aboutbp-workflow{ right: 1.5%; width: 61%; height: 76%; top: 9%; }

.aboutbp-flow-card{ border-radius: 13px; }

.aboutbp-flow-icon{ width: 36px; height: 36px; }
}

@media (max-width: 900px) and (min-width: 621px) {
.aboutbp-section{ height: calc(340vh + var(--aboutbp-journey-overlap)); }

.aboutbp-about{
        grid-template-columns: 78% 22%;
        --about-title-top-gap: 27px;
        --about-title-half-gap: 13.5px;
        grid-template-rows:
            calc(4.5% - var(--about-title-half-gap) - var(--about-visual-balance))
            15%
            28%
            48%
            calc(4.5% + var(--about-title-half-gap) + var(--about-visual-balance));
    }

.aboutbp-about-heading{ width: 90%; margin-left: 5%; }

.aboutbp-eyebrow{ margin-bottom: 18px; font-size: 9px; }

.aboutbp-title{ margin-top: 27px; font-size: clamp(72px, 12vw, 104px); line-height: .78; }

.aboutbp-title-rule{ margin-top: 14px; }

.aboutbp-content-column{
        justify-self: stretch;
        width: auto;
        margin-right: 5%;
        margin-left: 5%;
        display: grid;
        grid-template-columns: 52fr 3fr 45fr;
        align-items: start;
    }

.aboutbp-copy{ grid-column: 1; margin-top: 13vh; font-size: clamp(15px, 2vw, 18px); }

.aboutbp-tech-diagram{
        grid-column: 1;
        grid-row: 3;
        width: min(300px, 36vw);
        margin-right: calc(-1 * min(88px, 10vw));
        margin-bottom: calc(-1 * min(88px, 10vw));
    }

.aboutbp-stack{ grid-column: 3; margin-bottom: 0; }

.aboutbp-stack-heading{ width: min(235px, 78%); margin-bottom: 11px; gap: 10px; }

.aboutbp-stack-heading strong{ font-size: 10px; }

.aboutbp-stack-items{ flex-wrap: wrap; gap: 8px 10px; font-size: 10px; white-space: normal; }

.aboutbp-dot-grid-right{ display: none; }

.aboutbp-build-heading{ top: 4%; left: 5%; width: 90%; }

.aboutbp-build-title{ width: 48%; margin-top: 18px; font-size: clamp(38px, 6vw, 50px); }

.aboutbp-build-copy{ width: 51%; margin-top: 16px; font-size: 12.5px; line-height: 1.42; }

.aboutbp-build-copy p + p{ margin-top: .62em; }

.aboutbp-build-support{ margin-top: 15px; font-size: 12px; }

.aboutbp-workflow{ top: 43%; right: 4%; width: 92%; height: 53%; }

.aboutbp-flow-icon{ width: 34px; height: 34px; }

.aboutbp-role{ height: 19%; }

.aboutbp-workflow-core{ height: 23%; }

.aboutbp-output{ height: 18%; }
}

@media (max-width: 620px) {
.aboutbp-section{
        height: auto;
        padding-bottom: var(--aboutbp-journey-overlap);
        background: #f7f7f5;
    }

.aboutbp-sticky{
        position: relative;
        top: auto;
        height: auto;
        overflow: visible;
    }

.aboutbp-shell{
        height: auto;
        overflow: hidden;
        filter: none;
        background: #f7f7f5;
    }

.aboutbp-about,
.aboutbp-build,
.aboutbp-final-statement{
        position: relative;
        inset: auto;
        opacity: 1 !important;
        clip-path: none !important;
        transform: none !important;
    }

.aboutbp-about{
        display: block;
        min-height: 1080px;
        padding: 62px 20px 70px;
    }

.aboutbp-about-tech{
        position: absolute;
        inset: 0;
        display: block;
        pointer-events: none;
    }

.aboutbp-about-heading{
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        margin-left: 0;
        opacity: 1;
    }

.aboutbp-eyebrow{
        max-width: 340px;
        margin-bottom: 24px;
        font-size: 8px;
        line-height: 1.45;
        opacity: 1;
        transform: none;
    }

.aboutbp-title{
        margin-top: 36px;
        font-size: clamp(72px, 23vw, 96px);
        line-height: .79;
    }

.aboutbp-title-mask > span,
.aboutbp-title-mask-second > span{
        transform: none !important;
        opacity: 1;
        transition: opacity .55s ease, transform .7s cubic-bezier(.2,.8,.2,1);
    }

.aboutbp-about:not(.is-mobile-visible) .aboutbp-title-mask > span{
        opacity: 0;
        transform: translate3d(0, 105%, 0) !important;
    }

.aboutbp-title-rule{ width: 100px; margin-top: 18px; }

.aboutbp-title-rule::before{ transform: scaleX(1); }

.aboutbp-title-rule i{ left: calc(100% - 10px); }

.aboutbp-content-column{
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        display: block;
        margin-top: 34px;
        margin-right: 0;
        margin-left: 0;
    }

.aboutbp-copy{
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        margin-top: 38px;
        font-size: clamp(16px, 4.45vw, 18px);
        line-height: 1.48;
        opacity: 1;
        transform: none;
    }

.aboutbp-copy-line > span{
        opacity: 1;
        transform: none;
        transition: opacity .55s ease, transform .65s cubic-bezier(.2,.8,.2,1);
    }

.aboutbp-about:not(.is-mobile-visible) .aboutbp-copy-line > span{
        opacity: 0;
        transform: translate3d(0, 15px, 0);
    }

.aboutbp-mark{ background-size: 100% .72em; }

.aboutbp-tech-diagram{
        position: absolute;
        top: 565px;
        left: 50%;
        width: min(290px, 74vw);
        margin: 0;
        opacity: .9;
        transform: translate(-50%, 0);
    }

.aboutbp-tech-core{
        width: 82px;
        height: 82px;
    }

.aboutbp-tech-core span{
        width: 62px;
        height: 62px;
        font-size: 50px;
        line-height: 58px;
    }

.aboutbp-tech-badge{
        width: 48px;
        height: 48px;
    }

.aboutbp-tech-badge svg{
        width: 23px;
        height: 23px;
    }

.aboutbp-stack{
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        margin: 0;
        opacity: 1;
        transform: none;
    }

.aboutbp-stack-heading{ width: min(250px, 78%); margin-bottom: 14px; gap: 10px; }

.aboutbp-stack-heading strong{ font-size: 10px; }

.aboutbp-stack-items{ flex-wrap: wrap; gap: 9px 11px; font-size: 11px; white-space: normal; }

.aboutbp-stack-items i{ width: 5px; height: 5px; flex-basis: 5px; }

.aboutbp-dot-grid-left{ left: 4px; bottom: 17%; opacity: .35; }

.aboutbp-dot-grid-right{ right: -15px; top: 42%; height: 160px; opacity: .28; }

.aboutbp-build{
        min-height: 1600px;
        padding: 82px 20px 82px;
        background: #f7f7f5;
    }

.aboutbp-build-heading{
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
    }

.aboutbp-build-label{
        padding: 9px 14px;
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: .16em;
    }

.aboutbp-build-title{ margin-top: 24px; font-size: 35px; line-height: 1; }

.aboutbp-build-title-mask > span,
.aboutbp-build-title-mask > strong{ transform: none !important; opacity: 1; transition: opacity .5s ease, transform .65s cubic-bezier(.2,.8,.2,1); }

.aboutbp-build:not(.is-mobile-visible) .aboutbp-build-title-mask > span,
.aboutbp-build:not(.is-mobile-visible) .aboutbp-build-title-mask > strong{ opacity: 0; transform: translate3d(0, 105%, 0) !important; }

.aboutbp-build-copy{
        width: 100%;
        margin-top: 26px;
        font-size: 14px;
        line-height: 1.5;
        opacity: 1;
        transform: none;
        transition: opacity .55s ease, transform .65s cubic-bezier(.2,.8,.2,1);
    }

.aboutbp-build-support{
        margin-top: 14px;
        font-size: clamp(18px, 4.8vw, 22px);
        font-weight: 750;
        line-height: 1.15;
        gap: 14px;
        opacity: 1;
        transform: none;
        transition: opacity .55s ease, transform .65s cubic-bezier(.2,.8,.2,1);
    }

.aboutbp-build-support i{
        width: 12px;
        height: 12px;
        flex: 0 0 12px;
    }

.aboutbp-build:not(.is-mobile-visible) .aboutbp-build-copy,
.aboutbp-build:not(.is-mobile-visible) .aboutbp-build-support{
        opacity: 0;
        transform: translate3d(0, 14px, 0);
    }

.aboutbp-build-tech{ opacity: .45; }

.aboutbp-build-dot-grid{ left: -25px; top: 24%; }

.aboutbp-build-network{ display: none; }

.aboutbp-workflow{
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        height: auto;
        margin-top: 54px;
        display: flex;
        flex-direction: column;
        gap: 18px;
        opacity: 1;
        transform: none;
    }

.aboutbp-workflow::before{
        content: "";
        display: block;
        position: absolute;
        top: 36px;
        bottom: 36px;
        left: 50%;
        z-index: 0;
        width: 1px;
        background: rgba(17,17,17,.10);
    }

.aboutbp-workflow-svg,
.aboutbp-workflow-rings{ display: none; }

.aboutbp-flow-card,
.aboutbp-role,
.aboutbp-workflow-core,
.aboutbp-output{
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        height: auto;
        min-height: 92px;
        padding: 18px 20px;
        border-radius: 14px;
        opacity: 1 !important;
        transform: none !important;
        transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1);
    }

.aboutbp-role,
.aboutbp-output{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        text-align: left;
    }

.aboutbp-flow-icon{ flex: 0 0 42px; width: 42px; height: 42px; }

.aboutbp-role > strong,
.aboutbp-output > strong{ font-size: 13px; }

.aboutbp-workflow-core{
        min-height: 122px;
        border-color: rgba(244,191,24,.72);
        display: grid;
        place-items: center;
        gap: 10px;
    }

.aboutbp-core-icon{ width: 48px; height: 48px; }

.aboutbp-workflow-core > strong{ font-size: 15px; }

.aboutbp-build:not(.is-mobile-visible) .aboutbp-role,
.aboutbp-build:not(.is-mobile-visible) .aboutbp-workflow-core,
.aboutbp-build:not(.is-mobile-visible) .aboutbp-output{
        opacity: 0 !important;
        transform: translate3d(0, 16px, 0) !important;
    }

.aboutbp-transition-node{ display: none; }
}

@media (max-width: 390px) {
.aboutbp-about{ min-height: 1110px; }

.aboutbp-title{ font-size: 78px; }

.aboutbp-tech-diagram{ top: 590px; width: min(260px, 76vw); }

.aboutbp-build{ min-height: 1640px; }
}

@media (prefers-reduced-motion: reduce) {
.aboutbp-section{
        --about-radar-in: 1;
        --radar-ring-1: 1;
        --radar-ring-2: 1;
        --radar-ring-3: 1;
        --radar-ring-4: 1;
        --radar-axis-in: 1;
        --radar-node-a: 1;
        --radar-node-b: 1;
        --radar-node-c: 1;
        --radar-node-d: 1;
        --radar-active-node: 1;
        --core-in: 1;
        --core-pulse: 0;
        --process-route-in: 1;
        height: auto;
        padding-bottom: 0;
    }

.aboutbp-sticky{
        position: relative;
        top: auto;
        height: auto;
        overflow: visible;
    }

.aboutbp-shell{
        height: auto;
        overflow: hidden;
        filter: none;
    }

.aboutbp-about,
.aboutbp-build,
.aboutbp-final-statement{
        position: relative;
        inset: auto;
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }

.aboutbp-about{ min-height: 800px; }

.aboutbp-build{ min-height: 840px; }

.aboutbp-eyebrow,
.aboutbp-copy,
.aboutbp-copy-line > span,
.aboutbp-build-label,
.aboutbp-build-copy,
.aboutbp-build-support,
.aboutbp-workflow,
.aboutbp-role,
.aboutbp-workflow-core,
.aboutbp-output{
        opacity: 1 !important;
        transform: none !important;
    }

.aboutbp-title-mask > span,
.aboutbp-build-title-mask > span,
.aboutbp-build-title-mask > strong{
        transform: none !important;
    }

.aboutbp-mark{ background-size: 100% .72em; }

.aboutbp-title-rule::before,
.aboutbp-role-path,
.aboutbp-branch-path,
.aboutbp-process-route,
.aboutbp-process-mask-path{ stroke-dashoffset: 0 !important; }

.aboutbp-transition-node,
.aboutbp-path-runner{ display: none !important; }
}

.journey-section{
    position: relative;
    z-index: 4;
    margin-top: calc(0px - var(--aboutbp-journey-overlap));
    padding: clamp(96px, 13vh, 176px) var(--page-gutter) clamp(170px, 26vh, 320px);
    background: #f7f7f5;
}

.journey-inner{
    position: relative;
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
}

.journey-heading{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    width: min(560px, 42%);
    opacity: var(--journey-head-in, 1);
    transform: translate3d(0, calc((1 - var(--journey-head-in, 1)) * 46px), 0);
    will-change: transform, opacity;
    pointer-events: none;
}

.journey-range{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: max-content;
    padding: clamp(14px, 1vh, 10px) clamp(15px, 1.15vw, 22px);
    border-radius: 999px;
    background: #f5ba29;
    color: #111;
    font-family: var(--font-sans);
    font-size: clamp(16px, .72vw, 20px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .16em;
    white-space: nowrap;
}

.journey-range i{
    color: #111;
    font-family: inherit;
    font-size: 1em;
    font-weight: 800;
    font-style: normal;
    letter-spacing: 0;
}

.journey-heading h2{
    margin: 22px 0 20px;
    color: #0c0c0c;
    font-family: var(--font-display);
    font-size: clamp(56px, 6.4vw, 118px);
    font-weight: 600;
    line-height: .84;
    letter-spacing: -.075em;
    white-space: nowrap;
    margin-left: -8px;
}

.journey-heading p{
    width: min(430px, 100%);
    margin: 0;
    color: #111;
    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.5;
    letter-spacing: -.02em;
}

.journey-track{
    position: relative;
    
    padding: clamp(28px, 4vh, 64px) 38px 0;
}

.journey-route{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    pointer-events: none;
}

.journey-route-base,
.journey-route-progress,
.journey-route-tail{
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.journey-route-base{
    stroke: rgba(17,17,17,.11);
    stroke-width: 1.3;
}

.journey-route-progress{
    stroke: #111;
    stroke-width: 1.7;
}

.journey-route-tail{
    stroke: #111;
    stroke-width: 1.7;
    stroke-dasharray: 7 10;
    opacity: var(--journey-tail-in, 0);
}

.journey-list{
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: clamp(50px, 5vh, 50px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.journey-stop{
    display: flex;
}

.journey-stop-right{ justify-content: flex-end; }

.journey-stop-left{ justify-content: flex-start; }

.journey-card{
    --reveal: 0;
    --enter: 0;
    --sheen: 0;
    --wipe: 135deg;
    position: relative;
    z-index: 3;
    width: min(632px, 38%);
    min-height: 452px;
    padding: clamp(27px, 1.9vw, 36px);
    border: 1px solid rgba(17,17,17,.05);
    border-radius: 22px;
    background: rgba(252,252,248,.94);
    box-shadow: 0 18px 46px rgba(17,17,17,.055);
    opacity: calc(.06 + (.94 * var(--enter)));
    transform: translate3d(0, calc((1 - var(--enter)) * 38px), 0);
    will-change: transform, opacity;
}

.journey-stop-left .journey-card{ --wipe: 225deg; }

.journey-card::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: linear-gradient(
        var(--wipe),
        transparent calc((var(--reveal) * 152%) - 16%),
        rgba(255,255,255,.9) calc((var(--reveal) * 152%) - 3%),
        transparent calc((var(--reveal) * 152%) + 10%)
    );
    opacity: var(--sheen);
    pointer-events: none;
}

.journey-rail{
    position: absolute;
    top: 26px;
    bottom: -42px;
    z-index: 1;
    width: 1px;
    background: linear-gradient(180deg, rgba(17,17,17,0), rgba(17,17,17,.26) 18%, rgba(17,17,17,.26));
    opacity: calc(.15 + (.85 * var(--enter)));
}

.journey-stop-right .journey-rail{ right: -20px; }

.journey-stop-left .journey-rail{ left: -20px; }

.journey-node{
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 9px;
    height: 9px;
    border: 1.5px solid #111;
    border-radius: 50%;
    background: #ece9df;
    transform: translate(-50%, 50%) scale(calc(.7 + (.3 * var(--enter))));
    transition: background .28s ease, box-shadow .28s ease;
}

.journey-stop.is-reached .journey-node{
    background: #f5ba29;
    box-shadow: 0 0 0 5px rgba(244,211,31,.16);
}

.journey-card-body{
    position: relative;
    z-index: 1;
    -webkit-mask-image: linear-gradient(
        var(--wipe),
        #000 calc((var(--reveal) * 150%) - 46%),
        rgba(0,0,0,.13) calc(var(--reveal) * 150%)
    );
    mask-image: linear-gradient(
        var(--wipe),
        #000 calc((var(--reveal) * 150%) - 46%),
        rgba(0,0,0,.13) calc(var(--reveal) * 150%)
    );
}

.journey-year{
    display: block;
    width: max-content;
    margin-bottom: 15px;
    color: #f5ba29;
    text-shadow: 0 1px 0 rgba(17,17,17,.2);
    font-size: clamp(62px, 4.8vw, 88px);
    font-weight: 700;
    line-height: .78;
    letter-spacing: -.075em;
}

.journey-card h3{
    margin: 0 0 12px;
    color: #111;
    font-size: clamp(28px, 2vw, 34px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.04em;
}

.journey-card p{
    margin: 0;
    color: rgba(17,17,17,.70);
    font-size: clamp(20px, 1.6vw, 22px);
    line-height: 1.52;
    letter-spacing: -.015em;
}

.journey-meta{
    display: inline-block;
    margin-top: 18px;
    color: rgba(17,17,17,.70);
    font-family: "Inter", monospace;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.journey-stop:first-child{ margin-top: clamp(8px, 2vh, 34px); }

@media (max-width: 1180px) and (min-width: 861px) {
.journey-inner{ max-width: 92%; }

.journey-heading{ width: min(430px, 42%); }

.journey-heading h2{ font-size: clamp(50px, 6.6vw, 86px); white-space: normal; }

.journey-card{ width: min(400px, 44%); min-height: 232px; padding: 26px; border-radius: 19px; }

.journey-year{ font-size: clamp(56px, 6vw, 74px); }

.journey-list{ gap: clamp(84px, 10vh, 132px); }
}

@media (max-width: 860px) {
.journey-section{ padding: 82px var(--page-gutter) 108px; }

.journey-inner{ max-width: 100%; }

.journey-heading{
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin-bottom: clamp(30px, 5vh, 30px);
    }

.journey-heading h2{ font-size: clamp(52px, 13vw, 86px); }

.journey-heading p{ width: min(440px, 100%); }

.journey-track{ padding: 0 0 0 26px; }

.journey-list{ gap: 40px; }

.journey-stop:first-child{ margin-top: 0; }

.journey-stop-right,
.journey-stop-left{ justify-content: flex-start; }

.journey-card{
        width: 100%;
        min-height: 0;
        padding: 24px 22px 26px;
        border-radius: 18px;
        --wipe: 200deg;
    }

.journey-stop-left .journey-card{ --wipe: 200deg; }

.journey-stop-right .journey-rail,
.journey-stop-left .journey-rail{
        right: auto;
        left: -30px;
        top: 20px;
        bottom: -22px;
    }

.journey-year{ font-size: clamp(52px, 12vw, 66px); }

.journey-card h3{ font-size: clamp(20px, 5.4vw, 24px); }

.journey-card p{ font-size: 14px; }

.journey-meta{ margin-top: 15px; font-size: 12px; }
}

@media (max-width: 350px) {
.journey-heading h2{
        font-size: clamp(46px, 15vw, 52px);
    }
}

@media (prefers-reduced-motion: reduce) {
.journey-section{ margin-top: 0; }

.journey-route{ display: none; }

.journey-heading{
        opacity: 1 !important;
        transform: none !important;
    }

.journey-card{
        --reveal: 1;
        --enter: 1;
        --sheen: 0;
        opacity: 1 !important;
        transform: none !important;
    }

.journey-card::after{ display: none; }

.journey-card-body{
        -webkit-mask-image: none;
        mask-image: none;
    }

.journey-node{ background: #f5ba29; }
}

@media (min-width: 621px) and (prefers-reduced-motion: no-preference) {
.aboutbp-section{
        height: auto;
        padding-bottom: 0;
        background: #f7f7f5;
    }

.aboutbp-sticky{
        position: relative;
        top: auto;
        height: auto;
        overflow: visible;
    }

.aboutbp-shell{
        position: relative;
        height: calc(460vh + var(--aboutbp-journey-overlap));
        overflow: visible;
        filter: none;
        background: #f7f7f5;
    }

.aboutbp-about{
        position: relative;
        inset: auto;
        width: 100%;
        height: calc(100vh - var(--header-flow-height));
        height: calc(102dvh - var(--header-flow-height));
        overflow: hidden;
        opacity: 1 !important;
        transform: none !important;
        background: #f7f7f5;
    }

.aboutbp-build{
        position: sticky;
        inset: auto;
        top: var(--header-flow-height);
        width: 100%;
        height: calc(100vh - var(--header-flow-height));
        height: calc(100dvh - var(--header-flow-height));
        overflow: hidden;
        opacity: 1 !important;
        clip-path: none !important;
        transform: none !important;
        filter: blur(var(--takeover-blur));
        will-change: filter;
        background: #f7f7f5;
    }

.aboutbp-build-heading{
        opacity: calc(1 - var(--build-exit));
        transform: none !important;
        transition: none !important;
    }

.aboutbp-build-label{
        opacity: 1 !important;
        transform: none !important;
    }

.aboutbp-build-title-mask > span,
.aboutbp-build-title-mask > strong,
.aboutbp-build-title-mask + .aboutbp-build-title-mask > strong{
        opacity: 1 !important;
        transform: none !important;
    }

.aboutbp-build-copy,
.aboutbp-build-support{
        opacity: 1 !important;
        transform: none !important;
    }

.aboutbp-build > .aboutbp-final-statement{
        position: absolute;
        inset: 0;
    }

.aboutbp-build > .aboutbp-transition-node{
        position: absolute;
    }
}

.portfolio-new-section{
    position: relative;
    z-index: 5;
    scroll-margin-top: calc(var(--header-flow-height) + 24px);
}

.portfolio-new-inner{
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-inline: var(--page-gutter);
}

.home-page .portfolio-new-inner{
    max-width: 90%;
}

.pn-dots{
    position: absolute;
    background-image: radial-gradient(currentColor 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: .16;
    pointer-events: none;
}

.pn-halo{
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(245,186,41,.16) 0, rgba(245,186,41,.05) 38%, transparent 70%);
}

.pn-split .pn-w{
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.pn-split .pn-w > i{
    display: inline-block;
    font-style: inherit;
    transform: translateY(105%);
    transition: transform .82s cubic-bezier(.16,.84,.28,1);
}

.pn-split.is-visible .pn-w > i{
    transform: translateY(0);
}

.portfolio-new-heading{
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
    align-items: end;
    row-gap: clamp(12px, 1.3vw, 18px);
    column-gap: clamp(30px, 4vw, 86px);
    margin-bottom: clamp(34px, 3.8vw, 58px);
}

.portfolio-new-kicker{
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    width: max-content;
    margin-bottom: clamp(20px, 2vw, 32px);
    color: rgba(17,17,17,.55);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.portfolio-new-kicker span{
    position: relative;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(17,17,17,.16);
    border-radius: 50%;
    color: #111;
    letter-spacing: 0;
}

.portfolio-new-kicker span::after{
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(245,186,41,.5);
    border-radius: 50%;
    opacity: 0;
    transform: scale(.8);
}

.portfolio-new-kicker.is-visible span::after{
    animation: pn-ping 2.6s cubic-bezier(.2,.8,.2,1) .5s infinite;
}

@keyframes pn-ping {
    0% { opacity: .9; transform: scale(.82); }
    70%, 100% { opacity: 0; transform: scale(1.5); }
}

.portfolio-new-kicker.is-visible::after{
    transform: scaleX(1);
}

.portfolio-new-heading h2,
.testimonials-summary h2,
.contact-copy h2{
    margin: 0;
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.055em;
}

.portfolio-new-heading h2{
    max-width: 17ch;
    font-size: clamp(46px, 4.6vw, 84px);
}

.portfolio-new-aside{
    display: grid;
    gap: 24px;
    justify-items: start;
    padding-bottom: 8px;
}

.portfolio-new-aside p{
    margin: 0;
    max-width: 52ch;
    color: rgba(17,17,17,.66);
    font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.62;
    letter-spacing: -.015em;
}

.portfolio-new-more{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-height: 48px;
    padding: 0 24px;
    border: 1px solid rgba(17,17,17,.18);
    border-radius: 999px;
    overflow: hidden;
    color: #111;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
    isolation: isolate;
    transition: color .3s ease, border-color .3s ease;
}

.portfolio-new-more::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: #111;
    transform: translateY(101%);
    transition: transform .46s cubic-bezier(.16,.84,.28,1);
}

.portfolio-new-more i{
    font-style: normal;
    transition: transform .34s cubic-bezier(.16,.84,.28,1);
}

.portfolio-new-more:hover,
.portfolio-new-more:focus-visible{
    border-color: #111;
    color: #fff;
    outline: none;
}

.portfolio-new-more:hover::before,
.portfolio-new-more:focus-visible::before{
    transform: translateY(0);
}

.portfolio-new-more:hover i,
.portfolio-new-more:focus-visible i{
    transform: translate(4px, -4px);
}

.pn-marquee{
    position: relative;
    display: flex;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.pn-marquee-track{
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: clamp(30px, 3.4vw, 62px);
    padding-right: clamp(30px, 3.4vw, 62px);
    animation: pn-marquee 42s linear infinite;
}

.pn-marquee:hover .pn-marquee-track{
    animation-play-state: paused;
}

.pn-marquee-track b{
    display: inline-flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: clamp(17px, 1.5vw, 26px);
    font-weight: 600;
    letter-spacing: -.035em;
    opacity: .38;
    transition: opacity .3s ease, color .3s ease;
}

.pn-marquee-track b::after{
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f5ba29;
    opacity: .55;
}

.pn-marquee-track b:hover{
    opacity: 1;
}

@keyframes pn-marquee {
    to { transform: translateX(-100%); }
}

.pn-mock{
    --accent: #f5ba29;
    position: relative;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    background: #171717;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0,0,0,.45);
}

.pn-mock-bar{
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
}

.pn-mock-bar > span{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 9px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

.pn-mock-bar > span:nth-child(1){
    background: #ff5f57;
}

.pn-mock-bar > span:nth-child(2){
    background: #febc2e;
}

.pn-mock-bar > span:nth-child(3){
    background: #28c840;
}

.pn-mock-bar > em{
    flex: 1;
    margin-left: 8px;
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.62);
    font-size: 11px;
    font-style: normal;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pn-mock-body{
    display: grid;
    gap: 10px;
    padding: 14px;
}

.pn-mock-nav{
    display: flex;
    gap: 7px;
}

.pn-mock-nav i{
    height: 7px;
    flex: 1;
    max-width: 46px;
    border-radius: 3px;
    background: rgba(255,255,255,.1);
}

.pn-mock-nav i:first-child{
    max-width: 26px;
    background: var(--accent);
    opacity: .85;
}

.pn-mock-hero{
    position: relative;
    height: clamp(74px, 9vw, 122px);
    border-radius: 11px;
    overflow: hidden;
    background: linear-gradient(125deg, color-mix(in srgb, var(--accent) 42%, #171717), rgba(255,255,255,.05));
}

.pn-mock-hero::after{
    content: "";
    position: absolute;
    left: 14px;
    bottom: 14px;
    width: 44%;
    height: 8px;
    border-radius: 4px;
    background: rgba(255,255,255,.42);
}

.pn-mock-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.pn-mock-grid i{
    height: clamp(38px, 4.4vw, 58px);
    border-radius: 9px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.05);
    position: relative;
    overflow: hidden;
}

.pn-mock-grid i::after{
    content: "";
    position: absolute;
    left: 8px;
    right: 30%;
    bottom: 8px;
    height: 5px;
    border-radius: 3px;
    background: var(--accent);
    opacity: .5;
}

.pn-mock-grid i:nth-child(2)::after{ right: 44%; }

.pn-mock-grid i:nth-child(4)::after{ right: 22%; }

.pn-mock-grid i:nth-child(5)::after{ right: 50%; }

.work-section{
    position: relative;
    padding: clamp(92px, 9.5vw, 158px) 0 clamp(84px, 8.5vw, 136px);
    overflow: clip;
    background: #fff;
    color: #111;
}

.work-section .pn-dots{
    inset: 0 auto auto 0;
    width: 210px;
    height: 210px;
    color: #111;
    opacity: .06;
}

.work-section .pn-halo{
    top: -16%;
    right: -12%;
    width: clamp(420px, 44vw, 760px);
}

.work-section .portfolio-new-kicker{ color: rgba(17,17,17,.55); }

.work-section .portfolio-new-kicker span{ border-color: rgba(17,17,17,.16); color: #111; }

.work-section .portfolio-new-aside p{ color: rgba(17,17,17,.66); }

.work-section .portfolio-new-more{ border-color: rgba(17,17,17,.18); color: #111; }

.work-section .portfolio-new-more::before{ background: #111; }

.work-section .portfolio-new-more:hover,
.work-section .portfolio-new-more:focus-visible{ border-color: #111; color: #fff; }

.work-marquee{
    margin-bottom: clamp(40px, 4.4vw, 72px);
    padding: clamp(18px, 1.8vw, 26px) 0;
    border-top: 1px solid rgba(17,17,17,.11);
    border-bottom: 1px solid rgba(17,17,17,.11);
}

.work-marquee .pn-marquee-track b{ color: #111; }

.work-showcase{
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(34px, 4vw, 82px);
    align-items: start;
}

.work-preview{
    position: sticky;
    top: calc(var(--header-flow-height) + 40px);
    display: grid;
    gap: 22px;
}

.work-preview-frame{
    position: relative;
}

.work-preview-frame .pn-mock{
    width: 100%;
}

.pn-mock-screen{
    padding: 10px 12px 12px;
    background: #171717;
}

.work-preview-image{
    display: block;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: opacity .34s ease, transform .46s cubic-bezier(.16,.84,.28,1);
}

.work-preview.is-swapping .work-preview-image{
    opacity: .42;
    transform: scale(.992);
}

.work-preview-meta{
    display: grid;
    gap: 16px;
    padding-top: 22px;
    border-top: 1px solid rgba(17,17,17,.12);
    transition: opacity .38s ease, transform .5s cubic-bezier(.16,.84,.28,1);
}

.work-preview.is-swapping .work-preview-meta{
    opacity: 0;
    transform: translateY(10px);
}

.work-preview-meta p{
    margin: 0;
    color: rgba(17,17,17,.62);
    font-size: 16px;
    line-height: 1.64;
}

.work-preview-tags{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.work-preview-tags span{
    padding: 7px 13px;
    border: 1px solid rgba(17,17,17,.16);
    border-radius: 999px;
    color: rgba(17,17,17,.7);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.work-preview-open{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-self: start;
    min-height: 46px;
    padding: 0 22px;
    overflow: hidden;
    border: 1px solid #f5ba29;
    border-radius: 999px;
    background: #f5ba29;
    color: #111;
    font-size: 14px;
    font-weight: 700;
    isolation: isolate;
    transition: color .3s ease, border-color .3s ease;
}

.work-preview-open::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: #111;
    transform: translateY(101%);
    transition: transform .46s cubic-bezier(.16,.84,.28,1);
}

.work-preview-open > span{
    transition: transform .34s cubic-bezier(.16,.84,.28,1);
}

.work-preview-open:hover,
.work-preview-open:focus-visible{
    border-color: #111;
    color: #fff;
    outline: none;
}

.work-preview-open:hover::before,
.work-preview-open:focus-visible::before{
    transform: translateY(0);
}

.work-preview-open:hover > span,
.work-preview-open:focus-visible > span{
    transform: translate(4px, -4px);
}

.work-rail{
    position: relative;
    padding-left: clamp(22px, 2.4vw, 40px);
}

.work-rail::before{
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;
    width: 1px;
    background: rgba(17,17,17,.13);
}

.work-rail-progress{
    position: absolute;
    left: -1px;
    top: 6px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #f5ba29, rgba(245,186,41,.25));
    height: 0;
    transition: height .5s cubic-bezier(.16,.84,.28,1), transform .5s cubic-bezier(.16,.84,.28,1);
}

.work-item{
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 40px;
    align-items: center;
    gap: clamp(16px, 1.8vw, 30px);
    width: 100%;
    padding: clamp(22px, 2.1vw, 32px) clamp(16px, 1.6vw, 28px);
    border: 1px solid transparent;
    border-radius: 18px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .38s ease, border-color .38s ease, transform .46s cubic-bezier(.16,.84,.28,1);
}

.work-item::before{
    content: "";
    position: absolute;
    left: calc(clamp(22px, 2.4vw, 40px) * -1 - 5px);
    top: 50%;
    width: 11px;
    height: 11px;
    margin-top: -5.5px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: rgba(17,17,17,.2);
    transition: background-color .34s ease, transform .34s cubic-bezier(.16,.84,.28,1);
}

.work-item.is-active{
    border-color: rgba(17,17,17,.12);
    background: rgba(17,17,17,.045);
    transform: none;
}

.work-item.is-active::before{
    background: #f5ba29;
    transform: scale(1.25);
}

.work-item-index{
    color: rgba(17,17,17,.32);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    transition: color .3s ease;
}

.work-item.is-active .work-item-index{ color: #f5ba29; }

.work-item h3{
    margin: 0 0 7px;
    font-size: clamp(23px, 1.85vw, 33px);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -.045em;
    color: rgba(17,17,17,.62);
    transition: color .32s ease;
}

.work-item.is-active h3{ color: #111; }

.work-item-name{
    min-width: 0;
}

.work-item-type{
    display: block;
    margin-top: 2px;
    color: rgba(17,17,17,.48);
    font-family: var(--font-display);
    font-size: clamp(11.5px, .72vw, 13px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.work-item-go{
    display: grid;
    grid-column: 3;
    justify-self: end;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(17,17,17,.16);
    border-radius: 50%;
    color: rgba(17,17,17,.6);
    font-size: 14px;
    transition: background-color .32s ease, color .32s ease, border-color .32s ease, transform .34s cubic-bezier(.16,.84,.28,1);
}

.work-item:hover .work-item-go,
.work-item:focus-visible .work-item-go,
.work-item.is-active .work-item-go{
    border-color: #f5ba29;
    background: #f5ba29;
    color: #111;
    transform: none;
}

.work-item-mobile{
    display: none;
    grid-column: 1 / -1;
    margin-top: 4px;
}

.work-item-mobile p{
    margin: 0 0 12px;
    color: rgba(17,17,17,.58);
    font-size: 14px;
    line-height: 1.6;
}

.services-section{
    position: relative;
    padding: clamp(58px, 6vw, 92px) 0 clamp(84px, 8.5vw, 136px);
    overflow: clip;
    background: #f5f5f3;
}

.services-section .pn-dots{
    top: clamp(120px, 14vw, 240px);
    right: 0;
    width: 200px;
    height: 260px;
    color: #111;
    opacity: .13;
}

.services-section .pn-halo{
    left: -8%;
    bottom: -12%;
    width: clamp(360px, 34vw, 620px);
}

.svc-bento{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(13px, 1.3vw, 20px);
}

.svc-card{
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(26px, 2.4vw, 42px);
    border: 1px solid rgba(17,17,17,.1);
    border-radius: 26px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(17,17,17,.045);
    transition: transform .5s cubic-bezier(.16,.84,.28,1), box-shadow .4s ease, border-color .4s ease;
}

.svc-card::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(245,186,41,.14), transparent 62%);
    opacity: 0;
    transition: opacity .42s ease;
    pointer-events: none;
}

.svc-card:hover{
    border-color: rgba(17,17,17,.16);
    box-shadow: 0 30px 64px rgba(17,17,17,.1);
    transform: translateY(-8px);
}

.svc-card:hover::after{ opacity: 1; }

.svc-card-lead{
    grid-column: span 2;
    grid-row: auto;
}

.svc-card-watermark{
    position: absolute;
    top: clamp(-12px, -1vw, -4px);
    right: clamp(10px, 1.4vw, 24px);
    color: rgba(17,17,17,.045);
    font-family: var(--font-display);
    font-size: clamp(90px, 9vw, 168px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.06em;
    pointer-events: none;
    transition: color .45s ease, transform .6s cubic-bezier(.16,.84,.28,1);
}

.svc-card:hover .svc-card-watermark{
    color: rgba(245,186,41,.16);
    transform: translateY(-6px);
}

.svc-card-top{
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: clamp(24px, 2.4vw, 40px);
}

.svc-card-dot{
    position: relative;
    display: grid;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    place-items: center;
    border-radius: 50%;
    background: #111;
    color: #f5ba29;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    transition: transform .5s cubic-bezier(.16,.84,.28,1);
}

.svc-card:hover .svc-card-dot{ transform: rotate(-10deg) scale(1.06); }

.svc-tag{
    padding: 7px 12px;
    border: 1px solid rgba(17,17,17,.14);
    border-radius: 999px;
    color: rgba(17,17,17,.55);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.svc-card h3{
    position: relative;
    margin: 0 0 14px;
    font-size: clamp(21px, 1.6vw, 31px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.04em;
}

.svc-card-lead h3{ font-size: clamp(26px, 2.1vw, 40px); }

.svc-card > p{
    position: relative;
    margin: 0 0 24px;
    color: rgba(17,17,17,.62);
    font-size: 15px;
    line-height: 1.62;
}

.svc-points{
    position: relative;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 11px;
}

.svc-card-lead .svc-points{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px clamp(18px, 2vw, 34px);
}

.svc-points li{
    position: relative;
    padding-left: 22px;
    color: rgba(17,17,17,.74);
    font-size: 14px;
    line-height: 1.5;
}

.svc-points li::before{
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f5ba29;
    box-shadow: 0 0 0 0 rgba(245,186,41,.4);
    transition: box-shadow .4s ease;
}

.svc-card:hover .svc-points li::before{ box-shadow: 0 0 0 4px rgba(245,186,41,.18); }

.svc-flow{
    position: relative;
    margin: 0 0 26px;
    width: 100%;
    height: auto;
    color: rgba(17,17,17,.28);
}

.svc-flow .svc-flow-path{
    stroke-dasharray: 260;
    stroke-dashoffset: 260;
    transition: stroke-dashoffset 1.5s cubic-bezier(.16,.84,.28,1) .25s;
}

.svc-card.is-visible .svc-flow .svc-flow-path{ stroke-dashoffset: 0; }

.svc-flow-node rect{ fill: #fff; stroke: rgba(17,17,17,.16); }

.svc-flow-node text{ fill: rgba(17,17,17,.62); font-size: 11px; font-weight: 700; letter-spacing: .09em; }

.svc-flow-hub rect{ fill: #111; stroke: #111; }

.svc-flow-hub text{ fill: #fff; }

.svc-flow-dot{ fill: #f5ba29; }

.svc-meta{
    position: relative;
    display: block;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(17,17,17,.1);
    color: rgba(17,17,17,.42);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.svc-support{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(13px, 1.3vw, 20px);
    margin-top: clamp(13px, 1.3vw, 20px);
}

.svc-mini{
    position: relative;
    display: grid;
    align-content: start;
    gap: 12px;
    padding: clamp(22px, 2vw, 30px);
    border: 1px solid rgba(17,17,17,.1);
    border-radius: 22px;
    background: rgba(255,255,255,.55);
    overflow: hidden;
    transition: transform .48s cubic-bezier(.16,.84,.28,1), background-color .38s ease, border-color .38s ease;
}

.svc-mini::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #f5ba29;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .55s cubic-bezier(.16,.84,.28,1);
}

.svc-mini:hover{
    background: #fff;
    border-color: rgba(17,17,17,.16);
    transform: translateY(-6px);
}

.svc-mini:hover::before{ transform: scaleX(1); }

.svc-mini-index{
    color: rgba(17,17,17,.34);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
}

.svc-mini h3{
    margin: 0;
    font-size: clamp(16px, 1.1vw, 20px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.035em;
}

.svc-mini p{
    margin: 0;
    color: rgba(17,17,17,.6);
    font-size: 14px;
    line-height: 1.56;
}

.services-stack{
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 26px;
    align-items: center;
    margin-top: clamp(34px, 3.4vw, 54px);
    padding-top: 30px;
    border-top: 1px solid rgba(17,17,17,.12);
}

.services-stack > span{
    color: rgba(17,17,17,.42);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.services-stack .pn-marquee-track b{
    color: #111;
    font-size: clamp(15px, 1.15vw, 19px);
    opacity: .55;
}

.testimonials-section{
    position: relative;
    padding: clamp(94px, 8vw, 158px) 0;
    overflow: clip;
    background: #ebeae5;
}

.testimonials-section .pn-halo{
    top: 8%;
    right: -10%;
    width: clamp(340px, 32vw, 560px);
}

.testimonials-layout{
    display: grid;
    grid-template-columns: minmax(300px, .74fr) minmax(0, 1.26fr);
    gap: clamp(46px, 6vw, 100px);
    align-items: start;
}

.testimonials-summary{
    position: sticky;
    top: calc(var(--header-flow-height) + 44px);
}

.testimonials-summary h2{
    margin-top: 26px;
    font-size: clamp(46px, 5vw, 82px);
}

.review-score{
    display: flex;
    align-items: flex-end;
    gap: 24px;
    margin-top: 44px;
    padding-top: 26px;
    border-top: 1px solid rgba(17,17,17,.16);
}

.review-score > strong{
    font-family: var(--font-display);
    font-size: clamp(74px, 7.6vw, 122px);
    font-weight: 600;
    line-height: .76;
    letter-spacing: -.08em;
}

.review-score > div{
    display: grid;
    gap: 7px;
    padding-bottom: 4px;
    color: rgba(17,17,17,.54);
    font-size: 12px;
}

.review-stars{
    position: relative;
    display: inline-block;
    color: rgba(17,17,17,.16);
    letter-spacing: .1em;
}

.review-stars::before{
    content: "★★★★★";
    position: absolute;
    inset: 0;
    width: 0;
    overflow: hidden;
    color: #f5ba29;
    white-space: nowrap;
    transition: width 1.5s cubic-bezier(.16,.84,.28,1) .3s;
}

.testimonials-summary.is-visible .review-stars::before{ width: 100%; }

.testimonial-stars{ color: #f5ba29; letter-spacing: .08em; }

.testimonials-profile-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
    padding-bottom: 5px;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid rgba(17,17,17,.35);
    transition: gap .3s ease;
}

.testimonials-profile-link:hover{ gap: 14px; }

.testimonials-list{
    position: relative;
    display: grid;
    gap: clamp(16px, 1.8vw, 26px);
    padding-left: clamp(24px, 2.6vw, 44px);
}

.testimonials-list::before{
    content: "";
    position: absolute;
    top: 40px;
    bottom: 40px;
    left: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(17,17,17,.22) 12%, rgba(17,17,17,.22) 88%, transparent);
}

.testimonial-card{
    position: relative;
    padding: clamp(28px, 2.8vw, 44px);
    border: 1px solid rgba(17,17,17,.09);
    border-radius: 24px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 16px 40px rgba(17,17,17,.05);
    backdrop-filter: blur(6px);
    transition: transform .55s cubic-bezier(.16,.84,.28,1), box-shadow .42s ease, background-color .42s ease;
}

.testimonial-card::before{
    content: "";
    position: absolute;
    left: calc(clamp(24px, 2.6vw, 44px) * -1 - 5px);
    top: 44px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #ebeae5;
    border: 2px solid rgba(17,17,17,.28);
    transition: background-color .4s ease, border-color .4s ease, transform .4s ease;
}

.testimonial-card::after{
    content: "”";
    position: absolute;
    top: clamp(6px, 1vw, 16px);
    right: clamp(20px, 2.2vw, 38px);
    color: rgba(245,186,41,.34);
    font-family: var(--font-display);
    font-size: clamp(88px, 8vw, 140px);
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    transition: transform .6s cubic-bezier(.16,.84,.28,1), color .45s ease;
}

.testimonial-card:nth-child(even){ margin-left: clamp(0px, 3vw, 52px); }

.testimonial-card:hover{
    background: #fff;
    box-shadow: 0 34px 68px rgba(17,17,17,.1);
    transform: translateY(-6px);
}

.testimonial-card:hover::before{
    background: #f5ba29;
    border-color: #f5ba29;
    transform: scale(1.2);
}

.testimonial-card:hover::after{
    color: rgba(245,186,41,.6);
    transform: translateY(-5px) rotate(-6deg);
}

.testimonial-top{
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
}

.testimonial-top > span:last-child{
    color: rgba(17,17,17,.42);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.testimonial-card blockquote{
    position: relative;
    max-width: 62ch;
    margin: clamp(24px, 2.6vw, 38px) 0 30px;
    color: #111;
    font-size: clamp(17px, 1.35vw, 23px);
    font-weight: 500;
    line-height: 1.44;
    letter-spacing: -.028em;
}

.testimonial-card footer{
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid rgba(17,17,17,.1);
}

.testimonial-avatar{
    display: grid;
    width: 55px;
    height: 55px;
    flex-shrink: 0;
    place-items: center;
    border-radius: 50%;
    background: #111;
    color: #f5ba29;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
}

.testimonial-who strong{
    display: block;
    font-size: 16px;
    font-weight: 700;
}

.testimonial-who > span{
    display: block;
    margin-top: 3px;
    color: rgba(17,17,17,.5);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .04em;
    margin-left: 2px;
}

@media (prefers-reduced-motion: no-preference) {
.portfolio-reveal{
        opacity: 0;
        transform: translate3d(0, 30px, 0);
        transition: opacity .78s cubic-bezier(.16,.84,.28,1), transform .78s cubic-bezier(.16,.84,.28,1);
    }

.portfolio-reveal.is-visible{
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

.work-item.portfolio-reveal,
.svc-mini.portfolio-reveal{
        transform: translate3d(-30px, 18px, 0);
    }

.work-item.portfolio-reveal.is-visible,
.svc-mini.portfolio-reveal.is-visible{ transform: translate3d(0, 0, 0); }

.work-item.portfolio-reveal.is-visible.is-active{ transform: translate3d(0, 0, 0); }

.svc-card.portfolio-reveal,
.contact-channel.portfolio-reveal{
        transform: translate3d(0, 46px, 0) scale(.97);
        transition-duration: .86s;
    }

.svc-card.portfolio-reveal.is-visible,
.contact-channel.portfolio-reveal.is-visible{
        transform: translate3d(0, 0, 0) scale(1);
    }

.svc-card.portfolio-reveal.is-visible:hover{ transform: translateY(-8px); }

.contact-channel.portfolio-reveal.is-visible:hover{ transform: translateY(-8px); }

.testimonial-card.portfolio-reveal{
        transform: translate3d(28px, 34px, 0) rotate(.8deg);
        transition-duration: .86s;
    }

.testimonial-card.portfolio-reveal.is-visible{ transform: translate3d(0, 0, 0) rotate(0); }

.testimonial-card.portfolio-reveal.is-visible:hover{ transform: translateY(-6px); }

.work-preview.portfolio-reveal{
        transform: translate3d(-40px, 22px, 0);
        transition-duration: .9s;
    }

.work-preview.portfolio-reveal.is-visible{ transform: translate3d(0, 0, 0); }

.contact-copy.portfolio-reveal{
        transform: translate3d(-40px, 18px, 0);
        transition-duration: .9s;
    }

.contact-copy.portfolio-reveal.is-visible{ transform: translate3d(0, 0, 0); }

.portfolio-reveal[data-delay="1"]{ transition-delay: .07s; }

.portfolio-reveal[data-delay="2"]{ transition-delay: .14s; }

.portfolio-reveal[data-delay="3"]{ transition-delay: .21s; }

.portfolio-reveal[data-delay="4"]{ transition-delay: .28s; }

.portfolio-reveal[data-delay="5"]{ transition-delay: .35s; }

.portfolio-reveal[data-delay="6"]{ transition-delay: .42s; }
}

@media (max-width: 1300px) {
.work-showcase{
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        gap: 34px;
    }

.svc-bento{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

.svc-card-lead{ grid-column: span 2; grid-row: auto; }

.svc-support{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1180px) and (min-width: 861px) {
.home-page .portfolio-new-inner{ max-width: 92%; }
}

@media (max-width: 1080px) {
.portfolio-new-heading,
.contact-copy{
        grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
        gap: 34px;
    }

.work-showcase{ grid-template-columns: 1fr; }

.work-preview{ display: none; }

.work-item-mobile{ display: block; }

.contact-channels{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

.testimonials-layout{
        grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr);
        gap: 44px;
    }
}

@media (max-width: 860px) {
.home-page .portfolio-new-inner{ max-width: 100%; }

.svc-card-lead .svc-points{ grid-template-columns: 1fr; }

.svc-support{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
.portfolio-new-heading,
.contact-copy,
.svc-bento,
.svc-support,
.contact-channels,
.testimonials-layout{
        grid-template-columns: 1fr;
    }

.svc-card-lead{ grid-column: auto; }

.portfolio-new-heading{ gap: 22px; margin-bottom: 42px; }

.portfolio-new-heading h2{
        max-width: none;
        font-size: clamp(40px, 12vw, 35px);
    }

.work-rail{ padding-left: 20px; }

.work-item{
        grid-template-columns: auto minmax(0, 1fr);
        padding: 22px 14px;
        row-gap: 12px;
    }

.work-item::before{ left: -25px; }

.work-item-go{ grid-row: 1; grid-column: 2; justify-self: end; }

.work-item h3{ font-size: 25px; color: #111; }

.testimonial-card:nth-child(even){ margin-left: 0; }

.testimonials-list{ padding-left: 20px; }

.testimonial-card::before{ left: -25px; top: 34px; }

.testimonials-summary{ position: relative; top: auto; }

.testimonials-summary h2{ font-size: clamp(40px, 13vw, 40px); }

.testimonial-card{
        padding: 26px 22px;
        border-radius: 20px;
    }

.testimonial-card blockquote{
        margin: 18px 0 20px;
        font-size: 16px;
    }

.testimonial-who > span{
        margin-left: 0px;
    }

.services-stack{ grid-template-columns: 1fr; gap: 16px; }

.contact-copy h2{ max-width: none; font-size: clamp(40px, 13vw, 40px); }

.contact-channel{ padding: 24px 22px; }

.site-footer-inner{
        min-height: 0;
        flex-direction: column;
        justify-content: center;
        gap: 18px;
        padding: 28px var(--page-gutter) 82px;
        text-align: center;
    }

.site-footer-nav{ justify-content: center; }

.site-footer-social{ margin-right: 0; }
}

@media (max-width: 390px) {
.portfolio-new-heading h2,
.testimonials-summary h2{ font-size: 40px; }

.contact-copy h2{ font-size: 42px; }

.review-score{ align-items: center; gap: 18px; }

.review-score > strong{ font-size: 72px; }

.contact-actions{ display: grid; }

.contact-primary,
.contact-secondary{ width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
.portfolio-reveal{ opacity: 1 !important; transform: none !important; }

.pn-marquee-track{ animation: none; }

.pn-split .pn-w > i{ transform: none; }

.svc-flow .svc-flow-path{ stroke-dashoffset: 0; }

.review-stars::before{ width: 100%; transition: none; }

.contact-channel-live .contact-channel-label::before{ animation: none; }

.portfolio-new-kicker.is-visible span::after{ animation: none; }
}

.work-section .portfolio-new-kicker{
    position: relative;
    gap: 18px;
    margin-bottom: clamp(22px, 2vw, 34px);
    padding: 10px 24px 10px 12px;
    border-radius: 999px;
    background: rgba(17,17,17,.03);
    box-shadow: inset 0 0 0 1px rgba(17,17,17,.02);
    color: rgba(17,17,17,.6);
    font-size: clamp(16px, .72vw, 20px);
    letter-spacing: .2em;
    overflow: visible;
}

.work-section .portfolio-new-kicker::before{
    content: "";
    position: absolute;
    left: 54px;
    bottom: -8px;
    width: 16px;
    height: 16px;
    background: rgba(17,17,17,.03);
    box-shadow: inset 0 0 0 1px rgba(17,17,17,.02);
    transform: rotate(45deg);
    border-bottom-right-radius: 4px;
}

.work-section .portfolio-new-kicker::after,
.work-section .portfolio-new-kicker span::after,
.services-section .portfolio-new-kicker::after,
.services-section .portfolio-new-kicker span::after{
    content: none !important;
    animation: none !important;
}

.work-section .portfolio-new-kicker span{
    z-index: 1;
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #111;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 4px 16px rgba(17,17,17,.08), inset 0 0 0 1px rgba(17,17,17,.05);
}

.work-section .work-item{
    overflow: visible;
}

.work-section .work-item.is-active{
    padding-left: clamp(104px, 7.2vw, 126px);
    border-color: rgba(17,17,17,.08);
    background: rgba(17,17,17,.03);
    box-shadow: 0 10px 28px rgba(17,17,17,.05);
}

.work-section .work-item.is-active::after{
    content: "";
    position: absolute;
    left: -14px;
    top: 50%;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    transform: translateY(-50%);
    box-shadow: inset -1px 0 0 rgba(17,17,17,.06);
}

.work-section .work-item.is-active .work-item-index{
    position: absolute;
    left: 24px;
    top: 50%;
    z-index: 1;
    display: grid;
    width: clamp(56px, 4vw, 70px);
    height: clamp(56px, 4vw, 70px);
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: #111;
    font-size: clamp(18px, 1.6vw, 26px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    transform: translateY(-50%);
    box-shadow: 0 4px 16px rgba(17,17,17,.08), inset 0 0 0 1px rgba(17,17,17,.05);
}

@media (max-width: 900px) {
.work-section .portfolio-new-kicker{
        gap: 14px;
        padding: 8px 18px 8px 10px;
        font-size: 11px;
    }

.work-section .portfolio-new-kicker::before{
        left: 42px;
        width: 14px;
        height: 14px;
    }

.work-section .portfolio-new-kicker span{
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

.work-section .work-item.is-active{
        padding-left: 82px;
    }

.work-section .work-item.is-active::after{
        left: -11px;
        width: 22px;
        height: 22px;
    }

.work-section .work-item.is-active .work-item-index{
        left: 14px;
        width: 48px;
        height: 48px;
        font-size: 17px;
    }
}

.work-section .portfolio-new-kicker{
    gap: 20px;
    min-height: 74px;
    padding: 12px 26px 12px 16px;
    border-radius: 999px;
    background: #f7f7f6;
    box-shadow: inset 0 0 0 1px rgba(17,17,17,.03);
    color: rgba(17,17,17,.58);
    font-size: clamp(16px, .72vw, 20px);
    letter-spacing: .18em;
}

.work-section .portfolio-new-kicker::before{
    left: 48px;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: #f7f7f6;
    box-shadow: inset -1px -1px 0 rgba(17,17,17,.03);
    border-bottom-right-radius: 3px;
    transform: rotate(45deg);
}

.work-section .portfolio-new-kicker span{
    width: 56px;
    height: 56px;
    font-size: 18px;
    box-shadow: 0 3px 12px rgba(17,17,17,.06), inset 0 0 0 1px rgba(17,17,17,.05);
}

.work-section .work-item{
    border-radius: 22px;
}

.work-section .work-item.is-active{
    transform: none;
    padding: clamp(24px, 2vw, 30px) clamp(18px, 1.8vw, 30px) clamp(24px, 2vw, 30px) clamp(102px, 7vw, 118px);
    background: #fafafa;
    border-color: rgba(17,17,17,.08);
    box-shadow: 0 8px 22px rgba(17,17,17,.035);
}

.work-section .work-item.is-active::after{
    left: -10px;
    width: 20px;
    height: 20px;
    background: #fafafa;
    box-shadow: inset 0 0 0 1px rgba(17,17,17,.04);
}

.work-section .work-item.is-active .work-item-index{
    left: 22px;
    width: clamp(54px, 3.9vw, 62px);
    height: clamp(54px, 3.9vw, 62px);
    font-size: clamp(18px, 1.5vw, 22px);
    letter-spacing: -.02em;
    box-shadow: 0 3px 12px rgba(17,17,17,.06), inset 0 0 0 1px rgba(17,17,17,.05);
}

@media (max-width: 900px) {
.work-section .portfolio-new-kicker{
        min-height: 62px;
        gap: 16px;
        padding: 9px 18px 9px 12px;
        font-size: 11px;
    }

.work-section .portfolio-new-kicker::before{
        left: 39px;
        bottom: -6px;
        width: 12px;
        height: 12px;
    }

.work-section .portfolio-new-kicker span{
        width: 46px;
        height: 46px;
        font-size: 16px;
    }

.work-section .work-item.is-active{
        padding-left: 78px;
    }

.work-section .work-item.is-active::after{
        left: -9px;
        width: 18px;
        height: 18px;
    }

.work-section .work-item.is-active .work-item-index{
        left: 14px;
        width: 46px;
        height: 46px;
        font-size: 16px;
    }
}

.work-section{
    padding-top: clamp(58px, 6vw, 92px);
}

.work-section .pn-halo{
    display: none;
}

.work-section .portfolio-new-heading{
    row-gap: clamp(12px, 1.3vw, 18px);
    column-gap: clamp(30px, 4vw, 86px);
    margin-bottom: clamp(34px, 3.8vw, 58px);
}

.work-section .portfolio-new-kicker,
.services-section .portfolio-new-kicker{
    position: relative;
    margin-bottom: 0;
    min-height: 68px;
    gap: 18px;
    padding: 10px 22px 10px 14px;
    background: #f7f7f6;
    color: rgba(17,17,17,.58);
    font-size: clamp(16px, .72vw, 20px);
    letter-spacing: .18em;
    box-shadow: inset 0 0 0 1px rgba(17,17,17,.03);
}

.services-section .portfolio-new-kicker{
    background: #fff;
    border-radius: 50px;
}

.work-section .portfolio-new-kicker::before,
.services-section .portfolio-new-kicker::before{
    content: "";
    position: absolute;
    left: 40px;
    bottom: -7px;
    width: 18px;
    height: 11px;
    background: #f7f7f6;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: none;
    border-radius: 0 0 3px 3px;
    box-shadow: none;
}

.services-section .portfolio-new-kicker::before{
    background: #fff;
}

.work-section .portfolio-new-kicker span,
.services-section .portfolio-new-kicker span{
    z-index: 1;
    width: 50px;
    height: 50px;
    border: 0;
    background: #fff;
    color: #111;
    font-size: 17px;
    box-shadow: 0 3px 10px rgba(17,17,17,.05), inset 0 0 0 1px rgba(17,17,17,.05);
}

.work-section .portfolio-new-heading h2{
    line-height: 1.15;
    padding-bottom: .08em;
}

.work-section .work-item.is-active{
    padding: clamp(23px, 1.9vw, 28px) clamp(18px, 1.8vw, 30px) clamp(23px, 1.9vw, 28px) clamp(96px, 6.7vw, 114px);
}

.work-section .work-item.is-active::after{
    left: -9px;
    width: 18px;
    height: 18px;
    background: #fafafa;
    transform: translateY(-50%) rotate(45deg);
    border-radius: 0 0 0 4px;
    box-shadow: none;
    border-left: 1px solid rgba(17,17,17,.05);
    border-bottom: 1px solid rgba(17,17,17,.05);
}

.work-section .work-item.is-active .work-item-index{
    left: 18px;
    width: clamp(52px, 3.7vw, 60px);
    height: clamp(52px, 3.7vw, 60px);
    font-size: clamp(18px, 1.45vw, 21px);
}

@media (max-width: 900px) {
.work-section{
        padding-top: clamp(46px, 8vw, 68px);
    }

.work-section .portfolio-new-heading{
        row-gap: 12px;
        margin-bottom: 34px;
    }

.work-section .portfolio-new-kicker,
.services-section .portfolio-new-kicker{
        min-height: 58px;
        gap: 14px;
        padding: 8px 16px 8px 12px;
    }

.work-section .portfolio-new-kicker::before,
.services-section .portfolio-new-kicker::before{
        left: 34px;
        bottom: -6px;
        width: 15px;
        height: 10px;
    }

.work-section .portfolio-new-kicker span,
.services-section .portfolio-new-kicker span{
        width: 42px;
        height: 42px;
        font-size: 15px;
    }

.work-section .work-item.is-active{
        padding-left: 74px;
    }

.work-section .work-item.is-active::after{
        left: -8px;
        width: 16px;
        height: 16px;
    }

.work-section .work-item.is-active .work-item-index{
        left: 12px;
        width: 42px;
        height: 42px;
        font-size: 15px;
    }
}

.work-section .portfolio-new-kicker::before,
.services-section .portfolio-new-kicker::before{
    left: 42px;
    bottom: -9px;
    width: 18px;
    height: 18px;
    clip-path: none;
    transform: rotate(45deg);
    border-radius: 0 0 0 4px;
    border-left: 1px solid rgba(17,17,17,.05);
    border-bottom: 1px solid rgba(17,17,17,.05);
}

@media (max-width: 900px) {
.work-section .portfolio-new-kicker::before,
.services-section .portfolio-new-kicker::before{
        left: 35px;
        bottom: -8px;
        width: 16px;
        height: 16px;
        transform: rotate(45deg);
        clip-path: none;
        border-radius: 0 0 0 4px;
        border-left: 1px solid rgba(17,17,17,.05);
        border-bottom: 1px solid rgba(17,17,17,.05);
    }
}

.aboutbp-proof-panel{
    position: relative;
    z-index: 8;
    grid-column: 1 / -1;
    grid-row: 3 / 5;
    align-self: end;
    justify-self: stretch;
    display: grid;
    grid-template-columns: minmax(250px, 1.18fr) repeat(4, minmax(0, 1fr));
    min-height: clamp(172px, 19.5vh, 216px);
    margin: 0 5.9% clamp(24px, 3.1vh, 38px);
    padding: clamp(17px, 1.45vw, 24px) clamp(16px, 1.25vw, 22px);
    border: 1px solid rgba(17,17,17,.075);
    border-radius: 18px;
    background: rgba(255,255,255,.84);
    box-shadow: 0 12px 35px rgba(17,17,17,.035);
    opacity: calc(1 - var(--about-exit));
}

.aboutbp-proof-intro{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: clamp(14px, 1vw, 19px);
    min-width: 0;
    padding: clamp(18px, 1.5vw, 25px) clamp(17px, 1.45vw, 26px);
    border: 1px solid rgba(245,186,41,.13);
    border-radius: 16px;
    background:
        radial-gradient(circle at 18% 40%, rgba(245,186,41,.10), transparent 34%),
        linear-gradient(135deg, rgba(255,249,235,.92), rgba(255,252,244,.56));
}

.aboutbp-proof-intro-icon,
.aboutbp-proof-icon{
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: clamp(54px, 3.8vw, 70px);
    height: clamp(54px, 3.8vw, 70px);
    border: 1px solid rgba(245,186,41,.12);
    border-radius: 50%;
    background: rgba(245,186,41,.10);
    color: #f5b400;
}

.aboutbp-proof-intro-icon svg,
.aboutbp-proof-icon svg{
    width: clamp(25px, 1.7vw, 31px);
    height: clamp(25px, 1.7vw, 31px);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.aboutbp-proof-icon-star svg{
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.2;
}

.aboutbp-proof-intro-copy{
    min-width: 0;
    font-family: var(--font-sans);
}

.aboutbp-proof-intro-copy strong{
    display: block;
    color: #121212;
    font-size: clamp(14px, 1.02vw, 18px);
    font-weight: 750;
    line-height: 1.38;
    letter-spacing: -.025em;
}

.aboutbp-proof-intro-copy p{
    margin: clamp(10px, 1vh, 14px) 0 0;
    color: rgba(17,17,17,.57);
    font-size: clamp(11px, .77vw, 14px);
    font-weight: 450;
    line-height: 1.45;
    letter-spacing: -.015em;
}

.aboutbp-proof-item{
    --proof-local: 1;
    position: relative;
    display: grid;
    align-content: center;
    min-width: 0;
    padding: clamp(9px, .8vw, 14px) clamp(18px, 1.55vw, 28px);
    border-left: 1px solid rgba(17,17,17,.09);
    color: #10100f;
    opacity: var(--proof-local);
    transform: translate3d(0, calc((1 - var(--proof-local)) * 20px), 0);
    will-change: transform, opacity;
}

.aboutbp-proof-projects{ --proof-local: var(--stat-1); }

.aboutbp-proof-marketplaces{ --proof-local: var(--stat-2); }

.aboutbp-proof-rating{ --proof-local: var(--stat-3); }

.aboutbp-proof-reviews{ --proof-local: var(--stat-4); }

.aboutbp-proof-head{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(13px, 1vw, 18px);
}

.aboutbp-proof-value{
    min-width: 0;
    font-family: var(--font-sans);
}

.aboutbp-proof-value strong{
    display: block;
    color: #050505;
    font-family: var(--font-display);
    font-size: clamp(42px, 3vw, 58px);
    font-weight: 600;
    line-height: .88;
    letter-spacing: -.06em;
    white-space: nowrap;
}

.aboutbp-proof-value span{
    display: block;
    margin-top: clamp(7px, .72vh, 10px);
    color: #111;
    font-size: clamp(10px, .68vw, 14px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.aboutbp-proof-bar{
    position: relative;
    display: block;
    width: 100%;
    height: 6px;
    margin-top: clamp(17px, 1.75vh, 23px);
    overflow: hidden;
    border-radius: 999px;
    background: rgba(245,186,41,.16);
}

.aboutbp-proof-bar i{
    display: block;
    width: var(--proof-bar, 90%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffb800, #ffc83d);
    transform: scaleX(var(--proof-local));
    transform-origin: left center;
}

.aboutbp-proof-item > p{
    margin: clamp(10px, 1vh, 14px) 0 0;
    color: rgba(17,17,17,.52);
    font-family: var(--font-sans);
    font-size: clamp(10px, .72vw, 14px);
    font-weight: 450;
    line-height: 1.3;
    letter-spacing: -.015em;
    white-space: nowrap;
}

.aboutbp-proof-item.aboutbp-proof-projects{
    border: 0;
}

@keyframes aboutbp-proof-item-in {
    0% { opacity: 0; transform: translate3d(0, 24px, 0) scale(.97); }
    72% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.006); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (max-width: 1180px) and (min-width: 901px) {
.aboutbp-proof-panel{
        grid-template-columns: minmax(245px, 1.15fr) repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(92px, 1fr));
        min-height: 222px;
        margin-right: 4.5%;
        margin-left: 4.5%;
        padding: 14px;
    }

.aboutbp-proof-intro{ grid-row: 1 / 3; }

.aboutbp-proof-item{ padding: 10px 18px; }

.aboutbp-proof-rating{ border-left: 1px solid rgba(17,17,17,.09); }

.aboutbp-proof-projects,
.aboutbp-proof-marketplaces{ border-bottom: 1px solid rgba(17,17,17,.075); }

.aboutbp-proof-icon{ width: 44px; height: 44px; }

.aboutbp-proof-icon svg{ width: 23px; height: 23px; }

.aboutbp-proof-value strong{ font-size: 42px; }

.aboutbp-proof-value span{ margin-top: 5px; font-size: 9px; }

.aboutbp-proof-bar{ height: 5px; margin-top: 10px; }

.aboutbp-proof-item > p{ margin-top: 7px; font-size: 9px; }
}

@media (max-width: 900px) and (min-width: 621px) {
.aboutbp-proof-panel{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto auto;
        min-height: 0;
        margin: 0 5% 28px;
        padding: 12px;
    }

.aboutbp-proof-intro{
        grid-column: 1 / -1;
        min-height: 90px;
        padding: 14px 18px;
    }

.aboutbp-proof-intro-icon{ width: 46px; height: 46px; }

.aboutbp-proof-intro-icon svg{ width: 23px; height: 23px; }

.aboutbp-proof-intro-copy strong{ font-size: 13px; }

.aboutbp-proof-intro-copy p{ margin-top: 6px; font-size: 10px; }

.aboutbp-proof-item{ min-height: 96px; padding: 10px 14px; }

.aboutbp-proof-projects,
.aboutbp-proof-rating{ border-left: 0; }

.aboutbp-proof-projects,
.aboutbp-proof-marketplaces{ border-bottom: 1px solid rgba(17,17,17,.075); }

.aboutbp-proof-icon{ width: 38px; height: 38px; }

.aboutbp-proof-icon svg{ width: 20px; height: 20px; }

.aboutbp-proof-head{ gap: 10px; }

.aboutbp-proof-value strong{ font-size: 36px; }

.aboutbp-proof-value span{ margin-top: 4px; font-size: 8px; }

.aboutbp-proof-bar{ height: 4px; margin-top: 9px; }

.aboutbp-proof-item > p{ margin-top: 6px; font-size: 8px; }
}

@media (max-width: 620px) {
.portfolio-new-aside p{
        font-size: 14px;
    }

.aboutbp-proof-panel{
        position: relative;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto auto;
        width: 100%;
        min-height: 0;
        margin: 310px 0 0;
        padding: 12px;
        border-radius: 16px;
        opacity: 1;
    }

.aboutbp-proof-intro{
        grid-column: 1 / -1;
        min-height: 112px;
        padding: 16px;
    }

.aboutbp-proof-intro-icon{ width: 50px; height: 50px; }

.aboutbp-proof-intro-icon svg{ width: 25px; height: 25px; }

.aboutbp-proof-intro-copy strong{ font-size: 14px; }

.aboutbp-proof-intro-copy p{ margin-top: 7px; font-size: 10px; }

.aboutbp-proof-item{
        min-height: 122px;
        padding: 14px 12px;
        opacity: 1 !important;
        transform: none !important;
        transition: opacity .55s ease, transform .65s cubic-bezier(.2,.8,.2,1);
    }

.aboutbp-proof-projects,
.aboutbp-proof-rating{ border-left: 0; }

.aboutbp-proof-projects,
.aboutbp-proof-marketplaces{ border-bottom: 1px solid rgba(17,17,17,.075); }

.aboutbp-proof-icon{ width: 40px; height: 40px; }

.aboutbp-proof-icon svg{ width: 21px; height: 21px; }

.aboutbp-proof-head{ gap: 10px; }

.aboutbp-proof-value strong{ font-size: 38px; }

.aboutbp-proof-value span{ margin-top: 5px; font-size: 8px; white-space: normal; }

.aboutbp-proof-bar{ height: 4px; margin-top: 12px; }

.aboutbp-proof-item > p{ margin-top: 7px; font-size: 8px; white-space: normal; }

.aboutbp-about:not(.is-mobile-visible) .aboutbp-proof-item{
        opacity: 0 !important;
        transform: translate3d(0, 16px, 0) !important;
    }

.journey-range{
        padding: 9px 14px;
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: .16em;
    }

.journey-heading h2{
        font-size: 35px;
        margin-left: -2px;
    }

.journey-heading p{
        font-size: 14px;
    }
}

@media (max-width: 390px) {
.aboutbp-proof-panel{ margin-top: 300px; }

.aboutbp-proof-item{ min-height: 118px; padding-right: 9px; padding-left: 9px; }

.aboutbp-proof-icon{ width: 36px; height: 36px; }

.aboutbp-proof-icon svg{ width: 19px; height: 19px; }

.aboutbp-proof-head{ gap: 8px; }

.aboutbp-proof-value strong{ font-size: 34px; }

.aboutbp-proof-value span{ font-size: 7.5px; }

.aboutbp-proof-item > p{ font-size: 7.5px; }
}

@media (prefers-reduced-motion: reduce) {
.aboutbp-proof-item,
.aboutbp-proof-bar i{
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (min-width: 621px) and (prefers-reduced-motion: no-preference) {
.aboutbp-section .aboutbp-proof-item{
        opacity: 0;
        transform: translate3d(0, 24px, 0) scale(.97);
    }

.aboutbp-section.is-stats-playing .aboutbp-proof-projects{
        animation: aboutbp-proof-item-in .56s cubic-bezier(.16,.8,.3,1) .02s both;
    }

.aboutbp-section.is-stats-playing .aboutbp-proof-marketplaces{
        animation: aboutbp-proof-item-in .56s cubic-bezier(.16,.8,.3,1) .15s both;
    }

.aboutbp-section.is-stats-playing .aboutbp-proof-rating{
        animation: aboutbp-proof-item-in .56s cubic-bezier(.16,.8,.3,1) .28s both;
    }

.aboutbp-section.is-stats-playing .aboutbp-proof-reviews{
        animation: aboutbp-proof-item-in .56s cubic-bezier(.16,.8,.3,1) .41s both;
    }
}

.aboutbp-tagline{
    position: relative;
    width: min(390px, 29vw);
    margin-top: clamp(28px, 3.2vh, 36px);
    margin-left: 3px;
    color: #171714;
    font-family: var(--font-sans);
    opacity: calc(var(--about-copy-in) * (1 - var(--about-exit)));
    transform: translate3d(0, calc((1 - var(--about-copy-in)) * 12px), 0);
    will-change: opacity, transform;
}

.aboutbp-tagline-rule{
    display: block;
    width: clamp(58px, 5.2vw, 86px);
    height: 3px;
    margin-bottom: clamp(22px, 2.5vh, 28px);
    border-radius: 999px;
    background: #f5ba29;
}

.aboutbp-tagline p{
    margin: 0;
    font-size: clamp(18px, 1.22vw, 23px);
    font-weight: 400;
    line-height: 1.48;
    letter-spacing: -.035em;
}

@media (min-width: 1181px) {
.aboutbp-tech-diagram{
        position: absolute;
        top: 13%;
        left: 32%;
        grid-column: auto;
        grid-row: auto;
        align-self: auto;
        justify-self: auto;
        margin: 0;
    }
}

@media (max-width: 1180px) and (min-width: 901px) {
.aboutbp-tagline{
        width: min(330px, 34vw);
        margin-top: 28px;
    }

.aboutbp-tagline-rule{
        width: 62px;
        margin-bottom: 24px;
    }

.aboutbp-tagline p{
        font-size: clamp(16px, 1.7vw, 20px);
        line-height: 1.5;
    }
}

@media (max-width: 900px) and (min-width: 621px) {
.aboutbp-tagline{
        width: min(320px, 45vw);
        margin-top: 25px;
    }

.aboutbp-tagline-rule{
        width: 58px;
        margin-bottom: 20px;
    }

.aboutbp-tagline p{
        font-size: clamp(15px, 2vw, 18px);
        line-height: 1.48;
    }
}

@media (max-width: 620px) {
.aboutbp-tagline{
        width: min(330px, 100%);
        margin-top: 30px;
        margin-left: 0;
        opacity: 1;
        transform: none;
    }

.aboutbp-tagline-rule{
        display: none;
    }

.aboutbp-tagline p{
        font-size: clamp(16px, 4.45vw, 18px);
        line-height: 1.48;
    }

.aboutbp-about:not(.is-mobile-visible) .aboutbp-tagline{
        opacity: 0;
        transform: translate3d(0, 15px, 0);
    }
}

.aboutbp-state-path{
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: rgba(17,17,17,.25);
    stroke-width: 1.35;
}

.aboutbp-states{
    position: absolute;
    right: 4.7%;
    bottom: 0;
    left: 5.5%;
    z-index: 6;
    display: grid;
    grid-template-columns: 1fr 48px 1fr 48px 1fr;
    align-items: center;
    gap: 0;
    color: #111;
    font-size: initial;
}

.aboutbp-state{
    position: relative;
    width: 100%;
    padding: 18px 16px 12px;
    border-top: 0;
    opacity: var(--state-in, 0);
    transform: translate3d(0, calc((1 - var(--state-in, 0)) * 16px), 0) scale(calc(.97 + (var(--state-in, 0) * .03)));
    will-change: transform, opacity;
}

.aboutbp-state::before{
    display: none;
}

.aboutbp-state-index{
    position: absolute;
    top: 16px;
    left: 18px;
    color: #f5ba29;
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 750;
}

.aboutbp-state .aboutbp-flow-icon{
    width: 42px;
    height: 42px;
}

.aboutbp-state > strong{
    font-family: var(--font-display);
    font-size: clamp(18px, 1.5vw, 27px);
    font-weight: 600;
    letter-spacing: -.04em;
}

.aboutbp-state-test{ --state-in: var(--state-test); }

.aboutbp-state-refine{ --state-in: var(--state-refine); }

.aboutbp-state-launch{ --state-in: var(--state-launch); }

.aboutbp-state-arrow{
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    justify-self: center;
    border: 1px solid rgba(17,17,17,.07);
    border-radius: 50%;
    background: rgba(255,255,255,.86);
    color: #171714;
    font-family: var(--font-sans);
    font-size: 24px;
    line-height: 1;
    opacity: 0;
    box-shadow: 0 5px 18px rgba(17,17,17,.04);
}

.aboutbp-states > .aboutbp-state-arrow:nth-child(2){ opacity: var(--state-refine); }

.aboutbp-states > .aboutbp-state-arrow:nth-child(4){ opacity: var(--state-launch); }

@media (max-width: 1180px) and (min-width: 901px) {
.aboutbp-state{
        height: auto;
        min-height: 118px;
        padding: 20px 14px 16px;
    }
}

@media (max-width: 900px) and (min-width: 621px) {
.aboutbp-state{ height: auto; min-height: 106px; padding: 16px 10px 12px; }

.aboutbp-state-index{ top: 12px; left: 11px; font-size: 9px; }

.aboutbp-state .aboutbp-flow-icon{ width: 30px; height: 30px; }

.aboutbp-state > strong{ font-size: 17px; }

.aboutbp-states{ grid-template-columns: 1fr 32px 1fr 32px 1fr; }

.aboutbp-state-arrow{ width: 25px; height: 25px; font-size: 18px; }
}

@media (max-width: 620px) {
.aboutbp-state{
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        height: auto;
        opacity: 1;
        transform: none;
    }

.aboutbp-states{
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        width: 100%;
        margin-top: 8px;
    }

.aboutbp-state{
        min-height: 112px;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 9px;
    }

.aboutbp-state-index{ top: 14px; left: 16px; }

.aboutbp-state > strong{ font-size: 23px; }

.aboutbp-state-arrow{ transform: rotate(90deg); }

.aboutbp-build:not(.is-mobile-visible) .aboutbp-state,
.aboutbp-build:not(.is-mobile-visible) .aboutbp-state-arrow{
        opacity: 0 !important;
        transform: translate3d(0, 16px, 0) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
.aboutbp-state{
        opacity: 1 !important;
        transform: none !important;
    }

.aboutbp-state-path{
        stroke-dashoffset: 0 !important;
    }
}

.aboutbp-stack-heading strong{
    font-size: 15px;
}

@media (min-width: 1181px) {
.aboutbp-stack-items{
        font-size: clamp(14px, .88vw, 17px);
    }

.aboutbp-proof-value span,
.aboutbp-proof-item > p{
        font-size: clamp(12px, .78vw, 14px);
    }
}

@media (max-width: 1180px) and (min-width: 901px) {
.aboutbp-about-heading{
        width: 42%;
        margin-left: 4.5%;
    }

.aboutbp-title{
        margin-top: 30px;
        font-size: clamp(82px, 14vw, 128px);
    }

.aboutbp-tagline{
        width: 100%;
        max-width: 330px;
        margin-top: 24px;
    }

.aboutbp-content-column{
        width: 44%;
        margin-right: 4.5%;
    }

.aboutbp-stack{
        margin-bottom: 34px;
    }

.aboutbp-stack-heading{
        width: min(310px, 76%);
        margin-bottom: 14px;
    }

.aboutbp-stack-heading strong,
.aboutbp-stack-items{
        font-size: 15px;
    }

.aboutbp-stack-items{
        gap: 9px;
        white-space: nowrap;
    }

.aboutbp-stack-items i{
        width: 5px;
        height: 5px;
        flex-basis: 5px;
    }

.aboutbp-copy{
        font-size: clamp(16px, 1.7vw, 18px);
        line-height: 1.38;
    }

.aboutbp-tech-diagram{
        width: min(260px, 27vw);
        margin-right: -54px;
        margin-bottom: -56px;
    }

.aboutbp-proof-panel{
        grid-row: 4 / 6;
        align-self: end;
        min-height: 250px;
        margin-bottom: 18px;
    }

.aboutbp-proof-intro-copy strong{
        font-size: 15px;
    }

.aboutbp-proof-intro-copy p{
        font-size: 13px;
    }

.aboutbp-proof-value span,
.aboutbp-proof-item > p{
        font-size: 15px;
        line-height: 1.25;
        white-space: normal;
    }

.aboutbp-proof-item{
        padding: 11px 16px;
    }

.aboutbp-proof-bar{
        margin-top: 10px;
    }
}

@media screen and (max-width:1024px) {
.aboutbp-title{
        font-size: clamp(82px, 14vw, 128px);
    }
}

@media (max-width: 900px) and (min-width: 621px) {
.aboutbp-about{
        grid-template-columns: 50% 50%;
        grid-template-rows: 6% 22% 31% 37% 4%;
    }

.aboutbp-about-heading{
        grid-column: 1;
        grid-row: 2 / 4;
        width: 92%;
        margin-left: 10%;
    }

.aboutbp-tagline{
        width: 92%;
        margin-top: 20px;
    }

.aboutbp-tagline p{
        font-size: 16px;
    }

.aboutbp-content-column{
        grid-column: 1 / -1;
        grid-row: 2 / 5;
        display: grid;
        grid-template-columns: 47% 6% 47%;
        width: auto;
        margin: 0 5%;
    }

.aboutbp-stack{
        grid-column: 3;
        width: 100%;
        margin: 30px 0 0;
    }

.aboutbp-stack-heading{
        width: min(260px, 92%);
        margin-bottom: 13px;
    }

.aboutbp-stack-heading strong,
.aboutbp-stack-items{
        font-size: 13px;
    }

.aboutbp-stack-items{
        gap: 8px 9px;
        white-space: normal;
    }

.aboutbp-copy{
        grid-column: 3;
        margin-top: 30px;
        font-size: 16px;
        line-height: 1.42;
    }

.aboutbp-tech-diagram{
        position: absolute;
        top: 31%;
        left: 8%;
        width: min(265px, 34vw);
        margin: 0;
    }

.aboutbp-proof-panel{
        grid-row: 4 / 6;
        align-self: end;
        margin: 0 5% 12px;
        padding: 12px;
    }

.aboutbp-proof-intro{
        min-height: 92px;
        padding: 14px 16px;
    }

.aboutbp-proof-intro-copy strong{
        font-size: 14px;
    }

.aboutbp-proof-intro-copy p{
        font-size: 12px;
    }

.aboutbp-proof-item{
        min-height: 108px;
        padding: 11px 14px;
    }

.aboutbp-proof-value strong{
        font-size: 38px;
    }

.aboutbp-proof-value span{
        margin-top: 5px;
        font-size: 12px;
        line-height: 1.2;
        white-space: normal;
    }

.aboutbp-proof-item > p{
        margin-top: 7px;
        font-size: 12px;
        line-height: 1.25;
        white-space: normal;
    }

.aboutbp-proof-bar{
        height: 5px;
        margin-top: 9px;
    }
}

@media (max-width: 620px) {
html.layout-narrow-720 .hero{
        height: auto;
        min-height: 0;
        padding-bottom: 32px;
    }

html.layout-narrow-430 .hero{
        padding-bottom: 28px;
    }

.aboutbp-about{
        display: flex;
        min-height: 0;
        padding: 46px 20px 54px;
        flex-direction: column;
        height: 100%;
    }

.aboutbp-about-heading{
        order: 1;
    }

.aboutbp-title{
        margin-top: 24px;
        font-size: 35px;
        line-height: .82;
        display: flex;
        gap: 8px;
    }

.aboutbp-tagline{
        margin-top: 10px;
    }

.aboutbp-tagline p{
        font-size: 14px;
        line-height: 1.46;
    }

.aboutbp-content-column{
        order: 2;
        margin-top: 20px;
    }

.aboutbp-stack{
        margin: 10px 0;
    }

.aboutbp-stack-heading{
        width: min(275px, 88%);
        margin-bottom: 10px;
    }

.aboutbp-stack-heading strong{
        font-size: 15px;
    }

.aboutbp-stack-items{
        gap: 9px 10px;
        font-size: 14px;
        line-height: 1.35;
        white-space: normal;
    }

.aboutbp-copy{
        margin-top: 30px;
        font-size: 14px;
        line-height: 1.48;
    }

.aboutbp-copy-line + .aboutbp-copy-line,
.aboutbp-copy-gap{
        margin-top: .8em !important;
    }

.aboutbp-about-tech{
        position: relative;
        inset: auto;
        order: 3;
        display: block;
        width: 100%;
        height: 255px;
        margin-top: 24px;
    }

.aboutbp-tech-diagram{
        top: 0;
        left: 50%;
        width: min(250px, 68vw);
        margin: 0;
        opacity: .9;
        transform: translateX(-50%);
    }

.aboutbp-dot-grid-left{
        left: -8px;
        bottom: 3%;
    }

.aboutbp-dot-grid-right{
        top: 12%;
        right: -20px;
        height: 130px;
    }

.aboutbp-proof-panel{
        order: 4;
        width: 100%;
        margin: 20px 0 0;
        padding: 12px;
    }

.aboutbp-proof-intro{
        min-height: 104px;
        padding: 15px;
    }

.aboutbp-proof-intro-copy strong{
        font-size: 15px;
    }

.aboutbp-proof-intro-copy p{
        font-size: 13px;
    }

.aboutbp-proof-item{
        min-height: 124px;
        padding: 13px 11px;
    }

.aboutbp-proof-value strong{
        font-size: 36px;
    }

.aboutbp-proof-value span{
        margin-top: 5px;
        font-size: 12px;
        line-height: 1.2;
        white-space: normal;
    }

.aboutbp-proof-item > p{
        margin-top: 7px;
        font-size: 13px;
        line-height: 1.25;
        white-space: normal;
    }

.aboutbp-proof-bar{
        height: 5px;
        margin-top: 11px;
    }
}

@media (max-width: 575px) {
div#rating-popup{
        display: none;
    }

section.hero{
        padding: 20px 20px !important;
    }

html.layout-narrow-720 .hero-proof-stack{
        margin-bottom: 8px;
    }

.hex-fiverr-reviews{
        font-size: 12px;
    }

.hex-fiverr-level,
html.layout-narrow-720 .hex-fiverr-level strong{
        font-size: 13px;
    }

html.layout-narrow-720 .hero-top{
        margin-top: 15px;
    }

.aboutbp-stack-items span{
        background: #fff;
        padding: 5px 10px;
        border-radius: 8px;
    }

.aboutbp-stack-items i{
        display: none;
    }

.aboutbp-about-tech{
        margin-top: 15px;
    }

.page-line-art-bottom{
        display: none;
    }
}

@media (max-width: 430px) {
.aboutbp-title{
        font-size: clamp(32px, 20vw, 32px);
        gap: 6px;
    }
}

@media (max-width: 390px) {
.aboutbp-about{
        padding-right: 16px;
        padding-left: 16px;
    }

.aboutbp-tech-diagram{
        width: min(230px, 70vw);
    }

.aboutbp-about-tech{
        height: 238px;
    }

.aboutbp-proof-panel{
        margin-top: 16px;
    }

.aboutbp-proof-item{
        min-height: 122px;
        padding-right: 9px;
        padding-left: 9px;
    }

.aboutbp-proof-value strong{
        font-size: 34px;
    }

.aboutbp-proof-value span{
        font-size: 10.5px;
    }

.aboutbp-proof-item > p{
        font-size: 10px;
    }
}

@media (max-width: 900px) and (min-width: 700px) {
.aboutbp-tech-diagram{
        top: 41%;
        left: 8.5%;
        width: min(225px, 30vw);
    }

.aboutbp-proof-panel{
        position: absolute;
        right: 5%;
        bottom: 12px;
        left: 5%;
        width: auto;
        height: 238px;
        min-height: 0;
        margin: 0;
        padding: 10px;
        grid-template-columns: minmax(230px, 1.16fr) repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

.aboutbp-proof-intro{
        grid-column: 1;
        grid-row: 1 / 3;
        min-height: 0;
        padding: 12px 14px;
    }

.aboutbp-proof-intro-icon{
        width: 44px;
        height: 44px;
    }

.aboutbp-proof-intro-icon svg{
        width: 22px;
        height: 22px;
    }

.aboutbp-proof-intro-copy strong{
        font-size: 13px;
    }

.aboutbp-proof-intro-copy p{
        margin-top: 6px;
        font-size: 10.5px;
    }

.aboutbp-proof-item{
        min-height: 0;
        padding: 8px 10px;
    }

.aboutbp-proof-icon{
        width: 34px;
        height: 34px;
    }

.aboutbp-proof-icon svg{
        width: 18px;
        height: 18px;
    }

.aboutbp-proof-head{
        gap: 8px;
    }

.aboutbp-proof-value strong{
        font-size: 34px;
    }

.aboutbp-proof-value span{
        margin-top: 3px;
        font-size: 10.5px;
    }

.aboutbp-proof-bar{
        height: 4px;
        margin-top: 7px;
    }

.aboutbp-proof-item > p{
        margin-top: 5px;
        font-size: 10.5px;
    }
}

@media (max-width: 900px) and (min-width: 700px) {
.aboutbp-tech-diagram{
        top: 340px;
        width: min(220px, 29vw);
    }

.aboutbp-proof-panel{
        height: 246px;
    }

.aboutbp-proof-intro-copy strong{
        font-size: 14px;
    }

.aboutbp-proof-intro-copy p,
.aboutbp-proof-value span,
.aboutbp-proof-item > p{
        font-size: 12px;
    }
}

@media (max-width: 900px) and (min-width: 700px) {
.aboutbp-tech-diagram{
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 900px) and (min-width: 700px) {
.aboutbp-proof-value span{
        font-size: 13px;
    }

.aboutbp-proof-item > p{
        font-size: 12.5px;
    }
}

.hero-title.elastic-text,
.hero-intro p.elastic-text{
    position: relative;
}

.hero-title .elastic-word,
.hero-intro p .elastic-word{
    display: inline-block;
    white-space: nowrap;
}

.hero-title .elastic-unit,
.hero-intro p .elastic-unit{
    display: inline-block;
    transform-origin: 50% 65%;
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
}

.hero-title.elastic-enter .elastic-unit,
.hero-intro p.elastic-enter .elastic-unit{
    animation: hero-elastic-enter 760ms cubic-bezier(.18, 1.35, .36, 1) both;
    animation-delay: var(--elastic-in-delay, 0ms);
}

.hero-title.elastic-exit .elastic-unit,
.hero-intro p.elastic-exit .elastic-unit{
    animation: hero-elastic-exit 430ms cubic-bezier(.55, .02, .75, .35) both;
    animation-delay: var(--elastic-out-delay, 0ms);
}

@keyframes hero-elastic-enter {
    0% {
        opacity: 0;
        filter: blur(5px);
        transform:
            translate3d(var(--elastic-x, 0px), var(--elastic-y, 0px), 0)
            rotate(var(--elastic-r, 0deg))
            scaleX(.48)
            scaleY(1.55);
    }
    52% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, -2px, 0) rotate(0) scaleX(1.09) scaleY(.92);
    }
    72% {
        transform: translate3d(0, 1px, 0) rotate(0) scaleX(.96) scaleY(1.05);
    }
    86% {
        transform: translate3d(0, 0, 0) rotate(0) scaleX(1.025) scaleY(.985);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) rotate(0) scale(1);
    }
}

@keyframes hero-elastic-exit {
    0% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) rotate(0) scale(1);
    }
    38% {
        transform: translate3d(0, -1px, 0) rotate(0) scaleX(1.08) scaleY(.94);
    }
    100% {
        opacity: 0;
        filter: blur(4px);
        transform:
            translate3d(var(--elastic-x, 0px), var(--elastic-y, 0px), 0)
            rotate(var(--elastic-r, 0deg))
            scaleX(.52)
            scaleY(1.48);
    }
}

@media (prefers-reduced-motion: reduce) {
.hero-title.elastic-text .elastic-unit,
.hero-intro p.elastic-text .elastic-unit{
        animation: none !important;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
    }
}

.profile-intro-stage{
    position: relative;
    width: min(90%, 340px);
    margin: 0 auto 8px;
    isolation: isolate;
    pointer-events: none;
}

.profile-intro-stage .marketplace-profile-image{
    position: relative;
    z-index: 4;
    width: 100% !important;
    height: auto;
    margin: 0 !important;
    opacity: 0;
    animation: none;
    transform-origin: 52% 47%;
    will-change: opacity, transform, clip-path, filter;
}

.profile-intro-stage.is-complete .marketplace-profile-image{
    opacity: 1;
    clip-path: none;
    transform: none;
    filter: drop-shadow(0 22px 20px rgba(0, 0, 0, .24));
    animation: none;
    will-change: auto;
}

.profile-intro-stage.is-complete .profile-build-shard,
.profile-intro-stage.is-complete .profile-build-dot{
    display: none;
}

.profile-intro-stage.is-complete::before,
.profile-intro-stage.is-complete::after{
    content: none;
}

.profile-intro-stage:not(.is-playing) .profile-build-shard,
.profile-intro-stage:not(.is-playing) .profile-build-dot,
.profile-intro-stage:not(.is-playing)::before,
.profile-intro-stage:not(.is-playing)::after{
    opacity: 0;
}

.profile-intro-stage.is-playing .marketplace-profile-image{
    clip-path: none;
    animation: profile-portrait-compose 1.22s .72s cubic-bezier(.16,.82,.18,1) both;
}

.profile-build-shard{
    --shard-x: 0px;
    --shard-y: 0px;
    --shard-r: 0deg;
    --shard-s: .72;
    --shard-delay: 0s;
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    background: url("../images/portfolio-profile-image.webp") center / 100% 100% no-repeat;
    opacity: 0;
    transform-origin: 52% 47%;
    will-change: opacity, transform, filter;
}

.profile-intro-stage.is-playing .profile-build-shard{
    animation:
        profile-shard-assemble .92s var(--shard-delay) cubic-bezier(.16,.86,.18,1) both,
        profile-shard-dissolve .30s 1.53s ease forwards;
}

.profile-build-shard-1{
    --shard-x: -108px;
    --shard-y: -82px;
    --shard-r: -15deg;
    --shard-s: .68;
    --shard-delay: .06s;
    clip-path: polygon(0 0, 46% 0, 28% 42%, 0 55%);
}

.profile-build-shard-2{
    --shard-x: 82px;
    --shard-y: -110px;
    --shard-r: 17deg;
    --shard-s: .66;
    --shard-delay: .13s;
    clip-path: polygon(46% 0, 100% 0, 100% 26%, 68% 39%, 28% 42%);
}

.profile-build-shard-3{
    --shard-x: -125px;
    --shard-y: 8px;
    --shard-r: -10deg;
    --shard-s: .74;
    --shard-delay: .19s;
    clip-path: polygon(0 55%, 28% 42%, 48% 50%, 26% 71%, 0 79%);
}

.profile-build-shard-4{
    --shard-x: -22px;
    --shard-y: -45px;
    --shard-r: 12deg;
    --shard-s: .58;
    --shard-delay: .24s;
    clip-path: polygon(28% 42%, 68% 39%, 59% 66%, 26% 71%, 48% 50%);
}

.profile-build-shard-5{
    --shard-x: 126px;
    --shard-y: 3px;
    --shard-r: 14deg;
    --shard-s: .71;
    --shard-delay: .10s;
    clip-path: polygon(68% 39%, 100% 26%, 100% 56%, 59% 66%);
}

.profile-build-shard-6{
    --shard-x: -94px;
    --shard-y: 112px;
    --shard-r: 11deg;
    --shard-s: .70;
    --shard-delay: .17s;
    clip-path: polygon(0 79%, 26% 71%, 48% 76%, 31% 100%, 0 100%);
}

.profile-build-shard-7{
    --shard-x: 4px;
    --shard-y: 126px;
    --shard-r: -8deg;
    --shard-s: .64;
    --shard-delay: .22s;
    clip-path: polygon(26% 71%, 59% 66%, 74% 100%, 31% 100%, 48% 76%);
}

.profile-build-shard-8{
    --shard-x: 105px;
    --shard-y: 95px;
    --shard-r: -15deg;
    --shard-s: .69;
    --shard-delay: .28s;
    clip-path: polygon(59% 66%, 100% 56%, 100% 100%, 74% 100%);
}

.profile-build-dot{
    --dot-x: 0px;
    --dot-y: 0px;
    --dot-delay: 0s;
    position: absolute;
    z-index: 5;
    left: 52%;
    top: 47%;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: #111;
    opacity: 0;
    box-shadow: 0 0 0 2px rgba(255,255,255,.8);
}

.profile-intro-stage.is-playing .profile-build-dot{
    animation: profile-dot-collapse .62s var(--dot-delay) cubic-bezier(.22,.8,.2,1) both;
}

.profile-build-dot-1{ --dot-x: -77px; --dot-y: -52px; --dot-mid-x: -14px; --dot-mid-y: -9px; --dot-delay: .02s; }

.profile-build-dot-2{ --dot-x: 68px; --dot-y: -64px; --dot-mid-x: 12px; --dot-mid-y: -12px; --dot-delay: .07s; }

.profile-build-dot-3{ --dot-x: 92px; --dot-y: 24px; --dot-mid-x: 17px; --dot-mid-y: 4px; --dot-delay: .12s; background: #f5ba29; }

.profile-build-dot-4{ --dot-x: -82px; --dot-y: 50px; --dot-mid-x: -15px; --dot-mid-y: 9px; --dot-delay: .17s; }

.profile-build-dot-5{ --dot-x: 10px; --dot-y: 83px; --dot-mid-x: 2px; --dot-mid-y: 15px; --dot-delay: .21s; background: #f5ba29; }

.profile-intro-stage::before{
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 47%;
    width: 112px;
    height: 112px;
    margin: -56px 0 0 -56px;
    border: 1.5px solid rgba(17,17,17,.16);
    border-right-color: transparent;
    border-bottom-color: rgba(245,186,41,.7);
    border-radius: 50%;
    opacity: 0;
    transform: scale(.26) rotate(-90deg);
}

.profile-intro-stage.is-playing::before{
    animation: profile-build-orbit .84s .05s cubic-bezier(.2,.78,.2,1) both;
}

.profile-intro-stage::after{
    content: "";
    position: absolute;
    z-index: 6;
    left: 22%;
    top: 43%;
    width: 62%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(245,186,41,.18) 12%, #f5ba29 52%, rgba(17,17,17,.42) 83%, transparent);
    opacity: 0;
    transform: rotate(-17deg) scaleX(.05);
    transform-origin: left center;
    filter: blur(.15px);
}

.profile-intro-stage.is-playing::after{
    animation: profile-sketch-swipe .58s 1.02s cubic-bezier(.16,.8,.2,1) both;
}

@keyframes profile-shard-assemble {
    0% {
        opacity: 0;
        transform: translate(var(--shard-x), var(--shard-y)) rotate(var(--shard-r)) scale(var(--shard-s));
        filter: blur(3px) contrast(.88);
    }
    18% { opacity: .92; }
    72% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(1.018);
        filter: blur(0) contrast(1.02);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(1);
        filter: blur(0) contrast(1);
    }
}

@keyframes profile-shard-dissolve {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes profile-dot-collapse {
    0% {
        opacity: 0;
        transform: translate(var(--dot-x), var(--dot-y)) scale(.35);
    }
    20% { opacity: .9; }
    72% {
        opacity: .72;
        transform: translate(var(--dot-mid-x), var(--dot-mid-y)) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(0, 0) scale(.25);
    }
}

@keyframes profile-build-orbit {
    0% {
        opacity: 0;
        transform: scale(.26) rotate(-90deg);
    }
    30% { opacity: .86; }
    78% {
        opacity: .62;
        transform: scale(1) rotate(140deg);
    }
    100% {
        opacity: 0;
        transform: scale(1.1) rotate(190deg);
    }
}

@keyframes profile-sketch-swipe {
    0% {
        opacity: 0;
        transform: rotate(-17deg) scaleX(.05);
    }
    18% { opacity: .95; }
    68% {
        opacity: .86;
        transform: rotate(-17deg) scaleX(1);
    }
    100% {
        opacity: 0;
        transform: rotate(-17deg) translateX(24px) scaleX(1.05);
    }
}

@keyframes profile-portrait-compose {
    
    0% {
        opacity: 0;
        transform: translateY(12px) scale(.88);
        filter: blur(5px);
    }
    24% {
        opacity: .28;
    }
    58% {
        opacity: .82;
        transform: translateY(0) scale(1.018);
        filter: blur(.4px);
    }
    78% {
        opacity: 1;
        transform: scale(.993);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: none;
    }
}

html.layout-short-760:not(.layout-narrow-720) .profile-intro-stage{
    width: min(72%, 250px);
    margin-bottom: 4px;
}

html.layout-narrow-1080 .profile-intro-stage{
    width: min(80%, 300px);
}

html.layout-narrow-720 .profile-intro-stage{
    width: var(--mobile-profile-width);
    margin-bottom: 2px;
}

html.layout-narrow-430 .profile-intro-stage{
    width: var(--small-profile-width);
}

html.layout-short-660 .profile-intro-stage{
    width: var(--short-profile-width);
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
.profile-intro-stage .marketplace-profile-image{
        opacity: 1 !important;
        clip-path: none !important;
        transform: none !important;
        animation: none !important;
    }

.profile-intro-stage .profile-build-shard,
.profile-intro-stage .profile-build-dot,
.profile-intro-stage::before,
.profile-intro-stage::after{
        display: none !important;
        animation: none !important;
    }
}

@media (min-width: 1181px) {
.aboutbp-tagline{
        margin-top: clamp(20px, 2.35vh, 28px);
    }

.aboutbp-tagline-rule{
        margin-bottom: clamp(18px, 2vh, 22px);
    }
}

@media (min-width: 1441px) {
.aboutbp-tech-diagram{
        position: absolute;
        top: 20%;
        left: 30%;
        width: min(340px, 18.5vw);
        margin: 0;
        grid-column: auto;
        grid-row: auto;
        align-self: auto;
        justify-self: auto;
    }
}

@media (min-width: 1181px) and (max-width: 1440px) {
.aboutbp-proof-panel{
        grid-row: 4 / 6;
        align-self: end;
    }
}

@media (min-width: 901px) and (max-width: 1180px) {
.aboutbp-tagline{
        margin-top: 18px;
    }

.aboutbp-tagline-rule{
        margin-bottom: 18px;
    }

.aboutbp-proof-panel{
        height: 204px;
        min-height: 0;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        padding: 10px;
    }

.aboutbp-proof-intro{
        min-height: 0;
        padding: 10px 12px;
    }

.aboutbp-proof-intro-icon{
        width: 40px;
        height: 40px;
    }

.aboutbp-proof-intro-copy strong{
        font-size: 13px;
    }

.aboutbp-proof-intro-copy p{
        margin-top: 5px;
        font-size: 10.5px;
    }

.aboutbp-proof-item{
        min-height: 0;
        padding: 6px 12px;
    }

.aboutbp-proof-icon{
        width: 36px;
        height: 36px;
    }

.aboutbp-proof-icon svg{
        width: 19px;
        height: 19px;
    }

.aboutbp-proof-head{
        gap: 9px;
    }

.aboutbp-proof-value strong{
        font-size: 34px;
    }

.aboutbp-proof-value span{
        margin-top: 3px;
        font-size: 10.5px;
        line-height: 1.15;
    }

.aboutbp-proof-bar{
        height: 4px;
        margin-top: 7px;
    }

.aboutbp-proof-item > p{
        margin-top: 5px;
        font-size: 10.5px;
        line-height: 1.15;
    }
}

@media (min-width: 621px) and (max-height: 720px) {
.aboutbp-title{
        margin-top: 18px;
        font-size: clamp(78px, 8vw, 112px);
        line-height: .8;
    }

.aboutbp-tagline{
        margin-top: 12px;
    }

.aboutbp-tagline-rule{
        width: 56px;
        margin-bottom: 12px;
    }

.aboutbp-tagline p{
        font-size: 15px;
        line-height: 1.34;
    }

.aboutbp-stack{
        margin-bottom: 20px;
    }

.aboutbp-stack-heading{
        margin-bottom: 10px;
    }

.aboutbp-copy{
        font-size: 15px;
        line-height: 1.32;
    }

.aboutbp-copy-line + .aboutbp-copy-line,
.aboutbp-copy-gap{
        margin-top: .72em !important;
    }

.aboutbp-copy-line-emphasis{
        margin-top: .78em !important;
    }
}

@media (min-width: 1181px) and (max-height: 720px) {
.aboutbp-proof-panel{
        min-height: 145px;
        margin-bottom: 8px;
        padding: 10px 12px;
    }

.aboutbp-proof-intro{
        padding: 10px 12px;
    }

.aboutbp-proof-intro-icon,
.aboutbp-proof-icon{
        width: 42px;
        height: 42px;
    }

.aboutbp-proof-intro-icon svg,
.aboutbp-proof-icon svg{
        width: 21px;
        height: 21px;
    }

.aboutbp-proof-intro-copy strong{
        font-size: 13px;
    }

.aboutbp-proof-intro-copy p{
        margin-top: 5px;
        font-size: 10px;
    }

.aboutbp-proof-item{
        padding: 6px 12px;
    }

.aboutbp-proof-head{
        gap: 9px;
    }

.aboutbp-proof-value strong{
        font-size: 34px;
    }

.aboutbp-proof-value span{
        margin-top: 4px;
        font-size: 10px;
    }

.aboutbp-proof-bar{
        height: 4px;
        margin-top: 8px;
    }

.aboutbp-proof-item > p{
        margin-top: 5px;
        font-size: 10px;
    }
}

@media (min-width: 1441px) and (max-height: 720px) {
.aboutbp-tech-diagram{
        display: none;
    }
}

@media (min-width: 621px) and (max-width: 900px) and (max-height: 720px) {
.aboutbp-proof-panel{
        position: absolute;
        right: 5%;
        bottom: 10px;
        left: 5%;
        width: auto;
        height: 106px;
        min-height: 0;
        margin: 0;
        padding: 7px;
        grid-template-columns: minmax(128px, 1.28fr) repeat(4, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr);
    }

.aboutbp-proof-intro{
        grid-column: 1;
        grid-row: 1;
        min-height: 0;
        padding: 7px 8px;
        gap: 7px;
    }

.aboutbp-proof-intro-icon,
.aboutbp-proof-icon{
        width: 28px;
        height: 28px;
    }

.aboutbp-proof-intro-icon svg,
.aboutbp-proof-icon svg{
        width: 15px;
        height: 15px;
    }

.aboutbp-proof-intro-copy strong{
        font-size: 10px;
        line-height: 1.2;
    }

.aboutbp-proof-intro-copy p{
        margin-top: 4px;
        font-size: 8px;
        line-height: 1.2;
    }

.aboutbp-proof-item{
        min-height: 0;
        padding: 5px 7px;
        border-bottom: 0;
        border-left: 1px solid rgba(17,17,17,.09);
    }

.aboutbp-proof-head{
        gap: 5px;
    }

.aboutbp-proof-value strong{
        font-size: 25px;
    }

.aboutbp-proof-value span{
        margin-top: 2px;
        font-size: 8px;
        line-height: 1.1;
    }

.aboutbp-proof-bar{
        height: 3px;
        margin-top: 5px;
    }

.aboutbp-proof-item > p{
        margin-top: 4px;
        font-size: 8px;
        line-height: 1.1;
    }
}

@media (min-width: 901px) and (max-width: 1180px) and (max-height: 720px) {
.aboutbp-proof-panel{
        height: 176px;
        min-height: 0;
        margin-bottom: 8px;
        padding: 8px;
    }

.aboutbp-proof-intro{
        padding: 8px 10px;
    }

.aboutbp-proof-intro-icon,
.aboutbp-proof-icon{
        width: 34px;
        height: 34px;
    }

.aboutbp-proof-intro-icon svg,
.aboutbp-proof-icon svg{
        width: 18px;
        height: 18px;
    }

.aboutbp-proof-value strong{
        font-size: 30px;
    }

.aboutbp-proof-value span,
.aboutbp-proof-item > p{
        font-size: 9.5px;
    }

.aboutbp-proof-item{
        padding: 5px 9px;
    }

.aboutbp-proof-bar{
        margin-top: 5px;
    }

.aboutbp-proof-item > p{
        margin-top: 4px;
    }
}

@media (min-width: 621px) and (max-width: 900px) and (max-height: 620px) {
.aboutbp-stack{
        margin-top: 16px;
    }

.aboutbp-copy{
        margin-top: 12px;
        font-size: 14px;
        line-height: 1.28;
    }

.aboutbp-proof-panel{
        height: 98px;
    }
}

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
.aboutbp-about{
        box-sizing: border-box;
        height: auto !important;
        min-height: calc(100vh - var(--header-flow-height));
        min-height: calc(100svh - var(--header-flow-height));
        grid-template-columns:
            minmax(0, .92fr)
            clamp(175px, 17vw, 300px)
            minmax(0, 1.22fr);
        grid-template-rows: auto auto;
        align-content: center;
        align-items: center;
        column-gap: clamp(18px, 2vw, 40px);
        row-gap: clamp(30px, 4vh, 48px);
        padding: clamp(44px, 5.2vh, 68px) 5.7% clamp(26px, 3.2vh, 40px);
    }

.aboutbp-about-heading{
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        justify-self: stretch;
        width: 100%;
        max-width: none;
        margin: 0;
    }

.aboutbp-title{
        margin: 0;
        font-size: clamp(92px, 8.7vw, 176px);
        line-height: .79;
    }

.aboutbp-tagline{
        width: min(330px, 100%);
        margin-top: clamp(20px, 2.4vh, 28px);
        margin-left: 2px;
    }

.aboutbp-tagline-rule{
        width: clamp(58px, 4vw, 76px);
        margin-bottom: clamp(16px, 1.9vh, 22px);
    }

.aboutbp-tagline p{
        font-size: clamp(15px, 1.15vw, 22px);
        line-height: 1.46;
    }

.aboutbp-about-tech{
        display: contents !important;
    }

.aboutbp-tech-diagram{
        display: block !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        justify-self: center;
        width: min(100%, 300px);
        margin: 0 !important;
    }

.aboutbp-content-column{
        position: relative;
        grid-column: 3;
        grid-row: 1;
        align-self: center;
        justify-self: stretch;
        width: 100%;
        max-width: 720px;
        margin: 0;
    }

.aboutbp-stack{
        margin: 0 0 clamp(28px, 3.6vh, 44px);
    }

.aboutbp-stack-heading{
        width: min(310px, 78%);
        margin-bottom: 14px;
    }

.aboutbp-stack-items{
        flex-wrap: wrap;
        gap: 10px clamp(10px, .9vw, 17px);
        font-size: clamp(13px, .9vw, 17px);
        line-height: 1.3;
        white-space: normal;
    }

.aboutbp-copy{
        font-size: clamp(16px, 1.3vw, 25px);
        line-height: 1.36;
    }

.aboutbp-proof-panel{
        position: relative !important;
        inset: auto !important;
        grid-column: 1 / -1;
        grid-row: 2;
        align-self: auto;
        justify-self: stretch;
        width: 100%;
        height: auto !important;
        margin: 0 !important;
    }
}

@media (min-width: 621px) and (max-width: 900px) and (prefers-reduced-motion: no-preference) {
.aboutbp-about{
        box-sizing: border-box;
        height: auto !important;
        min-height: calc(100vh - var(--header-flow-height));
        min-height: calc(100svh - var(--header-flow-height));
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        grid-template-rows: auto auto auto;
        align-content: center;
        align-items: start;
        column-gap: clamp(24px, 5vw, 44px);
        row-gap: 30px;
        padding: 42px 5% 34px;
    }

.aboutbp-about-heading{
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        width: 100%;
        margin: 0;
    }

.aboutbp-title{
        margin: 0;
        font-size: clamp(78px, 12.5vw, 108px);
        line-height: .8;
    }

.aboutbp-tagline{
        width: 100%;
        margin-top: 18px;
    }

.aboutbp-tagline-rule{
        margin-bottom: 16px;
    }

.aboutbp-tagline p{
        font-size: clamp(14px, 1.9vw, 17px);
        line-height: 1.44;
    }

.aboutbp-content-column{
        display: block;
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        width: 100%;
        max-width: none;
        margin: 0;
    }

.aboutbp-stack{
        width: 100%;
        margin: 0 0 24px;
    }

.aboutbp-stack-heading{
        width: min(260px, 92%);
        margin-bottom: 12px;
    }

.aboutbp-stack-items{
        flex-wrap: wrap;
        gap: 8px 10px;
        font-size: 13px;
        line-height: 1.3;
        white-space: normal;
    }

.aboutbp-copy{
        width: 100%;
        margin: 0;
        font-size: clamp(14px, 2vw, 17px);
        line-height: 1.42;
    }

.aboutbp-about-tech{
        display: contents !important;
    }

.aboutbp-tech-diagram{
        display: block !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        grid-column: 1 / -1;
        grid-row: 2;
        align-self: center;
        justify-self: center;
        width: clamp(205px, 30vw, 245px);
        margin: 0 !important;
    }

.aboutbp-proof-panel{
        position: relative !important;
        inset: auto !important;
        grid-column: 1 / -1;
        grid-row: 3;
        align-self: auto;
        justify-self: stretch;
        width: 100%;
        height: auto !important;
        min-height: 0;
        margin: 0 !important;
    }
}

@media (max-width: 620px) {
.aboutbp-about{
        height: auto !important;
        min-height: 0 !important;
    }
}

@media (min-width: 901px) {
.aboutbp-tech-diagram{
        
        transform: translateX(clamp(-70px, calc(117px - 13vw), 0px))
                   scale(calc(.97 + (var(--about-radar-in) * .03))) !important;
        transform-origin: center center;
    }

.aboutbp-tech-core{
        width: 32%;
        height: 32%;
        box-shadow:
            0 clamp(8px, .85vw, 16px) clamp(16px, 1.5vw, 28px) rgba(17,17,17,.04),
            0 0 0 clamp(10px, .96vw, 18px) rgba(255,255,255,.42);
    }

.aboutbp-tech-core > svg{
        width: 62.5%;
        height: 62.5%;
    }

.aboutbp-tech-badge{
        width: 18%;
        height: 18%;
        box-shadow: 0 clamp(5px, .55vw, 10px) clamp(10px, 1.1vw, 20px) rgba(17,17,17,.03);
    }

.aboutbp-tech-badge svg{
        width: 48%;
        height: 48%;
    }
}

.aboutbp-flow-card > p{
    margin: 0;
    color: rgba(17,17,17,.58);
    font-family: var(--font-sans);
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -.01em;
}

.aboutbp-workflow-core > p{
    width: 100%;
    max-width: 100%;
    margin: 0;
    color: rgba(255,255,255,.72);
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
}

.aboutbp-state > p{
    max-width: 92%;
    color: rgba(17,17,17,.56);
    font-size: clamp(9px, 1vw, 14px);
    line-height: 1.25;
}

@media (min-width: 621px) {
.aboutbp-role,
.aboutbp-output{
        gap: 5px;
    }

.aboutbp-workflow-core{
        gap: 7px;
    }

.aboutbp-state{
        gap: 3px;
    }
}

@media (max-width: 620px) {
.aboutbp-role,
.aboutbp-output{
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 16px;
        row-gap: 3px;
        text-align: left;
    }

.aboutbp-role > .aboutbp-flow-icon,
.aboutbp-output > .aboutbp-flow-icon{
        grid-row: 1 / 3;
    }

.aboutbp-role > strong,
.aboutbp-output > strong,
.aboutbp-role > p,
.aboutbp-output > p{
        grid-column: 2;
        justify-self: start;
    }

.aboutbp-role > p,
.aboutbp-output > p{
        max-width: none;
        text-align: left;
    }
}

@media (min-width: 901px) and (max-width: 1180px) {
.aboutbp-build-heading{
        width: 35%;
    }

.aboutbp-workflow{
        right: .75%;
        width: 60%;
    }

.aboutbp-workflow-core{
        left: 50%;
        width: clamp(205px, 32%, 250px);
        padding: 14px 12px;
        transform: translateX(-50%) scale(calc(.90 + (var(--core-in, 0) * .10)));
    }

.aboutbp-output{
        width: clamp(140px, 24%, 172px);
    }

.aboutbp-output-php{
        left: 0;
    }

.aboutbp-output-api{
        right: 0;
    }

.aboutbp-output > strong{
        max-width: 100%;
        font-size: clamp(13px, 1.2vw, 16px);
        line-height: 1.12;
        overflow-wrap: normal;
    }

.aboutbp-output > p{
        max-width: 96%;
        font-size: clamp(10px, .9vw, 13px);
        line-height: 1.25;
        overflow-wrap: normal;
    }
}

@media (min-width: 621px) and (max-width: 900px) {
.aboutbp-workflow{
        top: 47%;
        right: 3%;
        width: 94%;
        height: 50%;
    }

.aboutbp-role{
        width: 23%;
        height: auto;
        padding: 11px 9px;
    }

.aboutbp-role-vendor{ left: 6%; }

.aboutbp-role-buyer{ left: 38.5%; }

.aboutbp-role-admin{ left: 71%; }

.aboutbp-workflow-core{
        left: 37%;
        width: 26%;
        height: auto;
        transform: scale(calc(.90 + (var(--core-in, 0) * .10)));
    }

.aboutbp-output{
        width: 25%;
        height: auto;
        padding: 10px 8px;
    }

.aboutbp-output-php{ left: 0; }

.aboutbp-output-api{ right: 0; }

.aboutbp-flow-icon{
        width: 36px;
        height: 36px;
    }

.aboutbp-role > strong,
.aboutbp-output > strong{
        max-width: 100%;
        font-size: 11.5px;
        line-height: 1.15;
        text-align: center;
        overflow-wrap: anywhere;
    }

.aboutbp-flow-card > p{
        max-width: 96%;
        font-size: 12px;
        line-height: 1.28;
        overflow-wrap: anywhere;
    }

.aboutbp-workflow-core > strong{
        font-size: 13px;
    }

.aboutbp-workflow-core > p{
        max-width: 90%;
        font-size: 10px;
        line-height: 1.25;
    }

.aboutbp-states{
        right: 2%;
        left: 2%;
        grid-template-columns: 1fr 30px 1fr 30px 1fr;
    }

.aboutbp-output{
        top: 40%;
    }

.aboutbp-state{
        height: auto;
        padding: 12px 10px 9px;
    }

.aboutbp-state-index{
        top: 10px;
        left: 11px;
        font-size: 10px;
    }

.aboutbp-state .aboutbp-flow-icon{
        width: 32px;
        height: 32px;
    }

.aboutbp-state > strong{
        font-size: 18px;
        line-height: 1;
    }

.aboutbp-state > p{
        max-width: 96%;
        font-size: 12px;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }
}

@media (min-width: 481px) and (max-width: 620px) {
.aboutbp-build{
        min-height: 0;
        padding-bottom: 72px;
    }

.aboutbp-workflow{
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: auto auto auto auto;
        gap: 14px 12px;
        width: 100%;
        height: auto;
        margin-top: 46px;
        background:
            linear-gradient(rgba(17,17,17,.11), rgba(17,17,17,.11)) center 132px / 68% 1px no-repeat,
            linear-gradient(rgba(17,17,17,.11), rgba(17,17,17,.11)) center 132px / 1px 310px no-repeat;
    }

.aboutbp-workflow::before,
.aboutbp-workflow::after{
        display: none;
    }

.aboutbp-flow-card,
.aboutbp-role,
.aboutbp-workflow-core,
.aboutbp-output{
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 14px 10px;
        border-radius: 14px;
    }

.aboutbp-role,
.aboutbp-output{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        justify-items: center;
        align-content: center;
        gap: 6px;
        min-height: 132px;
        text-align: center;
    }

.aboutbp-role-vendor{
        grid-column: 1;
        grid-row: 1;
    }

.aboutbp-role-buyer{
        grid-column: 2;
        grid-row: 1;
    }

.aboutbp-role-admin{
        grid-column: 3;
        grid-row: 1;
    }

.aboutbp-role > .aboutbp-flow-icon,
.aboutbp-output > .aboutbp-flow-icon{
        grid-column: 1;
        grid-row: 1;
        width: 38px;
        height: 38px;
    }

.aboutbp-role > strong,
.aboutbp-output > strong{
        grid-column: 1;
        grid-row: 2;
        justify-self: center;
        max-width: 100%;
        font-size: 11px;
        line-height: 1.15;
        text-align: center;
        overflow-wrap: anywhere;
    }

.aboutbp-role > p,
.aboutbp-output > p{
        grid-column: 1;
        grid-row: 3;
        justify-self: center;
        max-width: 96%;
        font-size: 12px;
        line-height: 1.24;
        text-align: center;
        overflow-wrap: anywhere;
    }

.aboutbp-workflow-core{
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
        width: 58%;
        min-height: 138px;
        gap: 8px;
        padding: 18px 14px;
    }

.aboutbp-core-icon{
        width: 46px;
        height: 46px;
    }

.aboutbp-workflow-core > strong{
        font-size: 15px;
    }

.aboutbp-workflow-core > p{
        max-width: 88%;
        font-size: 12px;
        line-height: 1.25;
    }

.aboutbp-output-php{
        grid-column: 1;
        grid-row: 3;
    }

.aboutbp-output-api{
        grid-column: 3;
        grid-row: 3;
    }

.aboutbp-output{
        min-height: 126px;
    }

.aboutbp-states{
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        grid-column: 1 / -1;
        grid-row: 4;
        display: grid;
        grid-template-columns: 1fr 24px 1fr 24px 1fr;
        gap: 0;
        width: 100%;
        margin-top: 14px;
    }

.aboutbp-state{
        min-height: 116px;
        padding: 15px 8px 10px;
        gap: 5px;
    }

.aboutbp-state-index{
        top: 10px;
        left: 10px;
        font-size: 11px;
    }

.aboutbp-state .aboutbp-flow-icon{
        width: 34px;
        height: 34px;
    }

.aboutbp-state > strong{
        font-size: 18px;
        line-height: 1;
    }

.aboutbp-state > p{
        max-width: 94%;
        font-size: 12px;
        line-height: 1.2;
    }

.aboutbp-state-arrow{
        display: grid;
        width: 22px;
        height: 22px;
        font-size: 16px;
        transform: none;
    }
}

.aboutbp-mobile-build-intro{
    display: none;
}

@media (max-width: 620px) {
.aboutbp-build{
        min-height: 0 !important;
        padding: 54px 20px 74px !important;
        overflow: hidden;
    }

.aboutbp-build-heading{
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 7;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        opacity: 1 !important;
        transform: none !important;
    }

.aboutbp-mobile-build-intro{
        display: none !important;
    }

.aboutbp-build-label,
.aboutbp-build-title-mask > span,
.aboutbp-build-title-mask > strong,
.aboutbp-build-copy,
.aboutbp-build-support{
        opacity: 1 !important;
        transform: none !important;
    }

.aboutbp-build-note{
        position: absolute;
        top: 38px;
        right: 6px;
        z-index: 8;
        display: block;
        width: 92px;
        color: rgba(17,17,17,.42);
        font-family: "Caveat", "Segoe Print", cursive;
        font-size: clamp(18px, 4.5vw, 22px);
        font-weight: 500;
        line-height: .92;
        letter-spacing: -.025em;
        text-align: center;
        transform: rotate(-7deg) !important;
        opacity: .92 !important;
        pointer-events: none;
    }

.aboutbp-build-note::after{
        content: "";
        position: absolute;
        right: 7px;
        bottom: -8px;
        width: 38px;
        height: 2px;
        border-radius: 999px;
        background: #f5ba29;
        transform: rotate(-10deg);
        transform-origin: right center;
    }

.aboutbp-mobile-build-intro h3{
        display: grid;
        gap: 0;
        margin: 0;
        color: #0b0b0b;
        font-family: var(--font-display);
        font-size: clamp(40px, 10.5vw, 52px);
        font-weight: 700;
        line-height: .98;
        letter-spacing: -.055em;
    }

.aboutbp-mobile-build-intro h3 span,
.aboutbp-mobile-build-intro h3 strong{
        display: block;
        font: inherit;
        font-weight: inherit;
    }

.aboutbp-mobile-build-intro h3 strong{
        color: #f5ba29;
    }

.aboutbp-mobile-build-intro p{
        max-width: 440px;
        margin: 13px 0 0;
        color: rgba(17,17,17,.58);
        font-family: var(--font-sans);
        font-size: clamp(15px, 3.8vw, 18px);
        font-weight: 400;
        line-height: 1.45;
        letter-spacing: -.018em;
    }

.aboutbp-build-tech{
        opacity: .28 !important;
    }

.aboutbp-build-dot-grid{
        top: 170px;
        left: -42px;
    }

.aboutbp-workflow{
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 4;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: 146px 150px 170px auto;
        column-gap: 12px;
        row-gap: 32px;
        width: 100% !important;
        height: auto !important;
        margin: 46px 0 0 !important;
        overflow: visible;
        background: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

.aboutbp-workflow::before{
        content: "";
        display: block !important;
        position: absolute;
        top: 160px;
        bottom: 144px;
        left: 50%;
        z-index: 1;
        width: 1px;
        background: rgba(17,17,17,.16);
        transform: translateX(-50%);
        pointer-events: none;
    }

.aboutbp-workflow::after{
        content: "";
        display: block !important;
        position: absolute;
        top: 160px;
        left: calc((100% - 24px) / 6);
        right: calc((100% - 24px) / 6);
        z-index: 1;
        height: 1px;
        background: rgba(17,17,17,.16);
        pointer-events: none;
    }

.aboutbp-workflow-svg,
.aboutbp-workflow-rings{
        display: none !important;
    }

.aboutbp-flow-card,
.aboutbp-role,
.aboutbp-workflow-core,
.aboutbp-output{
        box-sizing: border-box;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        border-radius: 16px !important;
        opacity: 1 !important;
        transform: none !important;
    }

.aboutbp-role,
.aboutbp-output{
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
        justify-items: center;
        align-content: center;
        gap: 7px !important;
        padding: 13px 9px !important;
        border: 1px solid rgba(17,17,17,.035);
        background: rgba(255,255,255,.94);
        box-shadow: 0 12px 30px rgba(17,17,17,.055);
        text-align: center !important;
    }

.aboutbp-role{
        height: 146px !important;
    }

.aboutbp-role-vendor{
        grid-column: 1;
        grid-row: 1;
    }

.aboutbp-role-buyer{
        grid-column: 2;
        grid-row: 1;
    }

.aboutbp-role-admin{
        grid-column: 3;
        grid-row: 1;
    }

.aboutbp-role > .aboutbp-flow-icon,
.aboutbp-output > .aboutbp-flow-icon{
        position: relative;
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 40px !important;
        height: 40px !important;
        isolation: isolate;
    }

.aboutbp-role > .aboutbp-flow-icon::after,
.aboutbp-output > .aboutbp-flow-icon::after{
        content: "";
        position: absolute;
        top: 8px;
        right: -8px;
        z-index: -1;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(245,186,41,.20);
    }

.aboutbp-role > .aboutbp-flow-icon svg,
.aboutbp-output > .aboutbp-flow-icon svg{
        position: relative;
        z-index: 1;
    }

.aboutbp-output > .aboutbp-flow-icon{
        width: 46px !important;
        height: 46px !important;
    }

.aboutbp-role > strong,
.aboutbp-output > strong{
        grid-column: 1 !important;
        grid-row: 2 !important;
        justify-self: center !important;
        max-width: 100%;
        font-size: clamp(10.5px, 2.8vw, 13px) !important;
        line-height: 1.12 !important;
        text-align: center !important;
        overflow-wrap: normal !important;
    }

.aboutbp-role > p,
.aboutbp-output > p{
        grid-column: 1 !important;
        grid-row: 3 !important;
        justify-self: center !important;
        max-width: 100% !important;
        margin: 0;
        font-size: clamp(10.5px, 2.65vw, 13px) !important;
        line-height: 1.28 !important;
        text-align: center !important;
        overflow-wrap: normal !important;
    }

.aboutbp-role::before{
        content: "";
        display: block !important;
        position: absolute;
        top: 100%;
        left: 50%;
        z-index: 1;
        width: 1px;
        height: 14px;
        background: rgba(17,17,17,.16);
        transform: translateX(-50%);
        pointer-events: none;
    }

.aboutbp-role::after{
        content: "";
        position: absolute;
        top: calc(100% + 10px);
        left: 50%;
        z-index: 3;
        width: 9px;
        height: 9px;
        border: 2px solid #f7f7f5;
        border-radius: 50%;
        background: #f5ba29;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

.aboutbp-workflow-core{
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        grid-column: 1 / -1;
        grid-row: 2;
        align-self: stretch;
        justify-self: center;
        width: 58% !important;
        height: 150px !important;
        padding: 18px 12px !important;
        gap: 8px !important;
        border: 1px solid rgba(245,186,41,.92) !important;
        border-radius: 18px !important;
        background: #111210 !important;
        box-shadow: 0 16px 34px rgba(17,17,17,.13), 0 0 28px rgba(245,186,41,.11) !important;
        color: #fff;
    }

.aboutbp-workflow-core::after{
        opacity: .55 !important;
    }

.aboutbp-core-icon{
        width: 46px !important;
        height: 46px !important;
    }

.aboutbp-workflow-core > strong{
        font-size: clamp(15px, 3.7vw, 18px) !important;
        line-height: 1.1;
    }

.aboutbp-workflow-core > p{
        max-width: 94% !important;
        font-size: clamp(10px, 2.65vw, 12px) !important;
        line-height: 1.3 !important;
        text-align: center;
    }

.aboutbp-output{
        grid-row: 3;
        width: calc(100% + 50px) !important;
        height: 170px !important;
        padding: 16px 10px !important;
    }

.aboutbp-output-php{
        grid-column: 1;
        justify-self: start;
    }

.aboutbp-output-api{
        grid-column: 3;
        justify-self: end;
    }

.aboutbp-output::before{
        content: "";
        display: block !important;
        position: absolute;
        top: -18px;
        z-index: 1;
        width: calc(100% + 12px);
        height: 18px;
        border-top: 1px solid rgba(17,17,17,.16);
        pointer-events: none;
    }

.aboutbp-output-php::before{
        left: 50%;
        border-left: 1px solid rgba(17,17,17,.16);
        border-top-left-radius: 14px;
    }

.aboutbp-output-api::before{
        right: 50%;
        border-right: 1px solid rgba(17,17,17,.16);
        border-top-right-radius: 14px;
    }

.aboutbp-output::after{
        content: "";
        position: absolute;
        top: -19px;
        left: 50%;
        z-index: 3;
        width: 9px;
        height: 9px;
        border: 2px solid #f7f7f5;
        border-radius: 50%;
        background: #f5ba29;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

.aboutbp-states{
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        grid-column: 1 / -1;
        grid-row: 4;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: stretch;
        gap: 12px !important;
        width: 100% !important;
        margin: 0 !important;
    }

.aboutbp-state{
        position: relative;
        width: 100% !important;
        min-height: 146px !important;
        height: auto !important;
        padding: 18px 8px 12px !important;
        gap: 5px !important;
        border-radius: 16px !important;
        background: rgba(255,255,255,.94);
        box-shadow: 0 12px 30px rgba(17,17,17,.055);
        opacity: 1 !important;
        transform: none !important;
    }

.aboutbp-state-index{
        top: 10px !important;
        left: 10px !important;
        display: grid;
        place-items: center;
        width: 31px;
        height: 31px;
        border-radius: 50%;
        background: rgba(245,186,41,.17);
        color: #efa900;
        font-size: 11px !important;
        line-height: 1;
    }

.aboutbp-state .aboutbp-flow-icon{
        width: 37px !important;
        height: 37px !important;
        margin-top: 4px;
    }

.aboutbp-state > strong{
        font-size: clamp(18px, 4.2vw, 22px) !important;
        line-height: 1 !important;
    }

.aboutbp-state > p{
        max-width: 96% !important;
        font-size: clamp(10px, 2.55vw, 12px) !important;
        line-height: 1.22 !important;
        text-align: center;
    }

.aboutbp-state-arrow{
        display: none !important;
    }

.aboutbp-state-refine::before{
        content: "";
        display: block !important;
        position: absolute;
        top: -22px;
        left: 50%;
        z-index: 3;
        width: 9px;
        height: 9px;
        border: 2px solid #f7f7f5;
        border-radius: 50%;
        background: #f5ba29;
        transform: translateX(-50%);
        pointer-events: none;
    }
}

@media (max-width: 400px) {
.aboutbp-build{
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

.aboutbp-mobile-build-intro h3{
        font-size: clamp(37px, 11.4vw, 44px);
    }

.aboutbp-mobile-build-intro p{
        font-size: 14px;
    }

.aboutbp-workflow{
        grid-template-rows: 138px 142px 136px auto;
        column-gap: 8px;
        row-gap: 28px;
    }

.aboutbp-workflow::before,
.aboutbp-workflow::after{
        top: 151px;
    }

.aboutbp-role{
        height: 138px !important;
        padding-right: 6px !important;
        padding-left: 6px !important;
    }

.aboutbp-workflow-core{
        width: 64% !important;
        height: 142px !important;
    }

.aboutbp-output{
        height: 136px !important;
        padding-right: 6px !important;
        padding-left: 6px !important;
    }

.aboutbp-output::before{
        width: calc(100% + 8px);
    }

.aboutbp-state{
        min-height: 140px !important;
        padding-right: 5px !important;
        padding-left: 5px !important;
    }

.aboutbp-role > strong,
.aboutbp-output > strong{
        font-size: 9.5px !important;
    }

.aboutbp-role > p,
.aboutbp-output > p,
.aboutbp-state > p{
        font-size: 9.5px !important;
    }

.aboutbp-state > strong{
        font-size: 17px !important;
    }
}

@media (max-width: 620px) {
.aboutbp-output::before{
        display: none !important;
    }

.aboutbp-final-statement::after{
        content: "";
        position: absolute;
        left: 50%;
        bottom: 20px;
        width: min(96vw, 1120px);
        height: min(37vw, 425px);
        background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3NjAgMjkwIj4KPGRlZnM+CiAgPHBhdHRlcm4gaWQ9ImRvdHMiIHdpZHRoPSI1LjgiIGhlaWdodD0iNS44IiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgIDxjaXJjbGUgY3g9IjEuOSIgY3k9IjEuOSIgcj0iMS4xMiIgZmlsbD0iIzliOWI5NiIvPgogIDwvcGF0dGVybj4KPC9kZWZzPgo8cGF0aCBkPSJNMTQsMTk3TDE0LDE5OEwxNCwxOThMMTQsMTk3Wk0yMjEsMTUzTDIxNiwxNTVMMjAyLDE0NEwxNzAsMTM0TDE0NywxMTBMMTU3LDEyNUwxNTIsMTIzTDEyNyw5NEwxMjYsODBMMTMxLDgyTDEzMCw3OEwxMjUsNzVMMTIxLDc1TDEwNyw2MUw4MSw1Nkw3Miw1OUw3NCw1Nkw1OCw2NUw0NSw2OEw2MSw2MEw0NCw1N0w0Myw1NEw1Myw0OUwzOCw0N0w1MSw0N0w0MSw0M0w2MiwzN0wxODUsNDRMMTg4LDQxTDE4NCwzN0wxODksMzZMMjAyLDQ1TDIwNiw0MEwyMTUsNDJMMTg4LDU2TDE5Miw2M0wyMTMsNjdMMjE4LDc0TDIxOCw2OEwyMjQsNjRMMjIxLDU0TDIzMCw1M0wyNDIsNjFMMjQ5LDU3TDI2Nyw3MEwyNTgsNzZMMjQ1LDc2TDIzNSw4MkwyNDgsNzhMMjQ5LDgzTDI1Miw4NEwyNTUsODRMMjU3LDgyTDI1OCw4NEwyNDcsODhMMjQ5LDg1TDI0Myw4NUwyMjYsOTVMMjI3LDk3TDIyNiwxMDBMMjI1LDk2TDIyNiwxMDNMMjE1LDExMEwyMTcsMTIyTDIxMCwxMTNMMjA0LDExMkwxODIsMTE4TDE4NSwxMzNMMjAzLDEyOEwxOTksMTM5TDIxMCwxNDBMMjEzLDE1MUwyMjQsMTUyTDIzNCwxNDVMMjM0LDE1MUwyMzgsMTQ2TDI1NCwxNDhMMjUzLDE1MEwyNjQsMTU3TDI3NiwxNjBMMjgxLDE3MEwzMDgsMTc4TDI5NywyMDhMMjgzLDIxNEwyNzEsMjMxTDI2MSwyMzBMMjY1LDIzNkwyNDgsMjQzTDI1MSwyNDZMMjQzLDI1MUwyNDYsMjU2TDIzOSwyNjFMMjQxLDI2NEwyMzksMjY0TDIzNiwyNjVMMjM2LDI2N0wyMjgsMjY0TDIyOSwyNTRMMjI2LDI1NEwyMzIsMjQ2TDIyOSwyNDdMMjM3LDIwNEwyMTUsMTc5TDIxNSwxNzBMMjIzLDE2MUwyMjEsMTUzWk02MywxMzNMNjMsMTMxTDY1LDEzMkw2MywxMzNaTTYyLDEyOUw2MiwxMzBMNjEsMTMwTDYyLDEyOVpNNjAsMTI5TDYxLDEyOUw2MCwxMjlMNjAsMTI5Wk01OCwxMjlMNTksMTI5TDU5LDEyOUw1OCwxMjlaTTIxNiwxMjZMMjI5LDEzMUwyMDcsMTI4TDIxNiwxMjZaTTU2LDEyOEw1NSwxMjdMNTYsMTI3TDU2LDEyOFpNMjIyLDExOUwyMTksMTE5TDIyMiwxMTlMMjIyLDExOVpNMTE5LDc1TDEyNCw3NkwxMjksNzlMMTI1LDc4TDExOSw3NVpNMTExLDcxTDExMiw2OUwxMTMsNzJMMTExLDcxWk02Niw2M0w3MSw2Mkw2Niw2M0w2Niw2M1pNNDMsNTdMNDIsNThMNDAsNTdMNDMsNTdaTTIxNyw1NEwyMTksNTRMMjE4LDU1TDIxNyw1NFpNMjExLDUzTDIxMSw1NEwyMDksNTNMMjExLDUzWk0zNSw1MkwzMSw1MUwzNyw1MkwzNSw1MlpNMjE3LDUxTDIwNiw1MkwyMDMsNTFMMjA1LDQ3TDIxNyw1MVpNMzUsNDdMMTQsNDlMMTQsNDFMMzUsNDdaTTE4MCwzOUwxODYsNDFMMTc3LDQxTDE4MCwzOVpNMTc1LDM5TDE1MCw0MkwxNDEsNDBMMTUxLDM5TDEzNywzN0wxNDYsMzNMMTYwLDM2TDE2MSwzNEwxNzUsMzlaTTE3LDM4TDE0LDM3TDE5LDM3TDE3LDM4Wk0xODMsMzZMMTc4LDM3TDE3MiwzNEwxODIsMzNMMTgzLDM2Wk0xNDUsMzNMMTMwLDM4TDEyNCwzNkwxMjYsMzJMMTQ1LDMzWk0xODgsMzZMMTg4LDMyTDE5NiwzMkwxODgsMzZaTTE2MywzM0wxNjYsMzNMMTY4LDMzTDE2NiwzNEwxNjMsMzNaTTIyNSwzNEwyMTgsMzRMMjE2LDMzTDIyNSwzNFpNMTg3LDI5TDE4NiwzMUwxODMsMzBMMTg3LDI5Wk0xNDgsMzFMMTUzLDMwTDE0MSwzMEwxNjUsMjlMMTQ4LDMxWk0xODMsMjZMMTk5LDI5TDIxNSwyOUwyMTgsMzBMMTkyLDMxTDE4MywyNlpNMTcxLDI4TDE4MCwyN0wxODEsMjlMMTc3LDMxTDE3MSwyOFpNMTQ0LDI1TDEzMywyOUwxMzAsMjhMMTQ0LDI1Wk0xODgsMjZMMTg0LDI1TDE4OSwyNkwxODgsMjZaTTE1NywyNUwxNTIsMjZMMTQ5LDI1TDE1NywyNVpNMTgyLDIzTDE4NiwyNEwxNzksMjNMMTgyLDIzWk0xNjYsMjRMMTY1LDIyTDE3NywyNUwxNjYsMjRaTTE1NSwyNEwxNTEsMjRMMTU3LDI0TDE1NSwyNFpNMjAzLDIyTDE5NSwyNEwxODMsMjFMMTkyLDE5TDIwMywyMlpNMjMxLDI2N0wyMjgsMjY1TDIzNSwyNjdMMjM5LDI2NEwyNDgsMjY4TDIzMSwyNjdaTTI2MiwyNjNMMjU4LDI2MkwyNjMsMjYyTDI2MiwyNjNaTTM2NCwxNjBMMzQ0LDE0MUwzNDUsMTI4TDM2OCwxMDJMMzk5LDk5TDQwMywxMDBMNDAxLDEwNkw0MTksMTEyTDQyNCwxMDhMNDQ5LDExMUw0NTQsMTAxTDQzNiwxMDFMNDMzLDk2TDQ0OCw5MUw0NjQsOTJMNDU1LDg1TDQ2MCw4MUw0NDksODdMNDQzLDgyTDQzNiw5MEw0MzksOTNMNDI2LDk0TDQyOSw5OUw0MjYsMTAxTDQyMCw5MUw0MDcsODRMNDA2LDg3TDQxOCw5NEw0MTMsOThMMzk4LDg3TDM4Niw4OUwzNzYsMTAxTDM2MiwxMDBMMzYxLDg5TDM3Nyw4N0wzNzEsNzlMMzk3LDcwTDM5Nyw2M0w0MDIsNjJMNDAyLDY5TDQyMCw2OEw0MjQsNjNMNDI5LDYzTDQyNyw1OUw0MzksNThMNDIzLDU3TDQyNCw1Mkw0MzIsNDhMNDI5LDQ3TDQxNiw1M0w0MTgsNThMNDEyLDY1TDQwNiw2Nkw0MDEsNTlMMzkyLDYwTDM5MCw1NEw0MTksNDBMNDM3LDM3TDQ2Myw0NEw0NDcsNDZMNDU1LDUxTDQ2OSw0N0w0NjgsNDJMNDc0LDQ2TDUwMiw0M0w1MDMsNDBMNTE5LDQzTDUxNiwzOEw1MjIsMzRMNTI4LDM1TDUyNyw0N0w1MzMsNDRMNTI5LDM3TDUzMiwzNEw1NDYsMzZMNTQ0LDMzTDU5MiwyNUw2MTIsMjlMNjAyLDMyTDYzOCwzM0w2NDcsMzhMNjY2LDM0TDc0Niw0MUw3NDYsNDlMNzQxLDQ5TDc0NCw1NEw3MTMsNThMNzEwLDY3TDY5OSw3NEw2OTcsNjRMNzE0LDUzTDY5OSw1NUw2OTUsNTlMNjY5LDYwTDY1NSw2OEw2NjcsNzJMNjYxLDgzTDYzOSw5NUw2NDIsMTA0TDYzNywxMDVMNjM1LDk1TDYyNiw5N0w2MjcsOTNMNjIwLDk2TDYyOSw5OUw2MjIsMTA0TDYyOCwxMTBMNjI3LDExNkw2MTYsMTI2TDU5NSwxMzJMNjAyLDE0M0w1OTQsMTUyTDU4NCwxNDNMNTgyLDE1MUw1OTIsMTY2TDU4MCwxNTRMNTc4LDEzN0w1NzIsMTM5TDU2NiwxMjZMNTQzLDEzOUw1MzgsMTUzTDUyOCwxMjlMNTIzLDEzMEw1MTUsMTIxTDQ5NywxMjFMNDk1LDExOEw0ODUsMTE3TDQ4MiwxMTNMNDc4LDExM0w0ODUsMTI0TDQ5NSwxMjBMNTAyLDEyN0w0OTIsMTM2TDQ2OCwxNDVMNDUxLDExM0w0NDksMTE3TDQ0NiwxMTNMNDY3LDE0Nkw0ODQsMTQ4TDQ2MCwxNzdMNDYyLDE5N0w0NTEsMjA0TDQ1MiwyMTJMNDMyLDIzMEw0MTcsMjMxTDQxMSwyMThMNDA0LDE5OUw0MDcsMTg0TDM5OCwxNzBMMzk3LDE1OUwzODUsMTU2TDM2NCwxNjBaTTI1NSwxNDhMMjU2LDE0OUwyNTQsMTQ5TDI1NSwxNDhaTTIyMywxMzVMMjI0LDEzNEwyMjUsMTM1TDIyMywxMzVaTTI0NCwxMzRMMjQ3LDEzNEwyNDMsMTM1TDI0NCwxMzRaTTI0MCwxMzNMMjM1LDEzNkwyMjksMTM0TDIzMywxMzRMMjMxLDEzMUwyNDAsMTMzWk0yMjEsMTIzTDIyMiwxMjNMMjIyLDEyNEwyMjEsMTIzWk0yMjMsMTE5TDIyMywxMTlMMjIyLDExOEwyMjMsMTE5Wk0yNTAsODNMMjUxLDgzTDI1NCw4M0wyNTIsODRMMjUwLDgzWk0yNzEsNzhMMjcyLDgyTDI1OSw4MEwyNjYsNzNMMjY1LDc3TDI3MSw3OFpNMjUwLDc2TDI1NCw3OEwyNDksNzZMMjUwLDc2Wk0zNjYsNjdMMzY2LDcyTDM2MCw3M0wzNjAsNjlMMzY2LDY3Wk0zNzQsNjlMMzY4LDYyTDM3NCw2MEwzNzQsNjVMMzgzLDc0TDM2OCw3NkwzNzQsNjlaTTM0Miw1MUwzMzEsNDhMMzUyLDQ4TDM0Miw1MVpNMjI2LDQzTDIyMyw0NUwyMjMsNDRMMjI2LDQzWk0yNDIsMzlMMjQwLDQyTDI1NCw0NUwyNTAsNDlMMjQyLDQ2TDI0OSw1MkwyNDAsNTFMMjQ1LDU0TDIyMCw0OUwyMzAsNDhMMjMxLDQzTDIwMCwzOUwxOTcsMzVMMjEzLDMzTDIxNiwzNkwyNDIsMzlaTTMzOCwxNkwzMTUsMTdMMzU1LDE5TDMzOSwyMUwzNDQsMjFMMzQwLDIzTDM0MiwyN0wzMzYsMjdMMzQxLDMyTDMzMCwzNUwzMzYsMzhMMzI2LDM5TDMzNSwzOUwyOTksNDhMMjkyLDU4TDI3NSw1MUwyNzAsNDVMMjc3LDQwTDI2OSw0MEwyNzYsMzhMMjY2LDM2TDI2OSwzNUwyNjEsMjlMMjMxLDI1TDI1NywxN0wzMzgsMTZaTTE5NCwxOEwyMzIsMTVMMjU0LDE2TDIyNCwyMkwyMjcsMjRMMjE2LDI4TDE5OCwyOEwyMDcsMjZMMjAxLDI0TDIwNywyMkwyMDMsMjFMMjE0LDIwTDE5NCwxOFpNNDExLDEwMUw0MDgsOThMNDEyLDk4TDQxMSwxMDFaTTM5Nyw5NkwzOTksOTJMNDAwLDk2TDM5Nyw5NlpNMzk5LDg5TDM5OSw5MkwzOTcsOTBMMzk5LDg5Wk00MDUsNjdMNDA1LDY1TDQwNiw2Nkw0MDUsNjdaTTQyNCwyM0w0MDgsMjZMNDAxLDIyTDQyNCwyM1pNNDQ2LDEwNEw0NDgsMTAzTDQ1MCwxMDJMNDQ2LDEwNFpNNDI4LDEwMkw0MzMsMTA0TDQyOCwxMDNMNDI4LDEwMlpNNDI2LDI2TDQyMiwyNEw0MzAsMjVMNDI2LDI2Wk00MTUsMjFMNDI3LDIwTDQzNiwyMUw0MTUsMjFaTTUyMCwyNTlMNTIzLDI1OEw1MjMsMjU4TDUyMCwyNTlaTTQ4MCwxOTBMNDc2LDIxNEw0NzAsMjE0TDQ3MCwxOThMNDgwLDE5MFpNNjI0LDE4NUw2MjUsMTg3TDYyMiwxODVMNjI0LDE4NVpNNjIwLDE4M0w2MjIsMTg0TDYxNywxODVMNjIwLDE4M1pNNjEzLDE4NEw2MDAsMTgyTDU5NCwxODBMNjA1LDE4MEw2MTMsMTg0Wk01OTUsMTc5TDU4NiwxNzNMNTc0LDE1OEw1OTEsMTY4TDU5NiwxNzRMNTk1LDE3OVpNNjIyLDE2Nkw2MTYsMTc1TDYwOCwxNzRMNjAyLDE2N0w2MTgsMTU1TDYyMiwxNThMNjE5LDE2Mkw2MjIsMTY2Wk01NDQsMTUxTDU0MywxNTdMNTQzLDE1MEw1NDQsMTUxWk02MjMsMTQ5TDYxOCwxNTNMNjIzLDE0N0w2MjMsMTQ5Wk02MDQsMTM0TDYwMSwxMzJMNjA1LDEzMUw2MDQsMTM0Wk01MjAsMjhMNDk5LDMyTDQ5MywzNUw0OTcsMzhMNDg1LDM3TDQ5MywzMEw1MjAsMjhaTTU5NCwyNEw1ODIsMjVMNTg4LDIyTDU5NCwyNFpNNTc5LDIzTDU2NSwyMUw1ODQsMjJMNTc5LDIzWk00ODUsMjBMNDc3LDIxTDQ3MSwyMEw0ODUsMjBaTTczNCwyNDNMNzI3LDI1Mkw3MTksMjUzTDczMCwyNDNMNzM0LDI0M1pNNjc3LDI0OEw2NzQsMjQzTDY4MiwyNDNMNjgxLDI0N0w2NzcsMjQ4Wk03MzYsMjQ0TDczNSwyMzdMNzMyLDIzMUw3NDMsMjM3TDczNiwyNDRaTTY0NywyMjZMNjE0LDIzMUw2MTEsMjA5TDYyNiwyMDRMNjM2LDE5NEw2NDQsMTk1TDY0OSwxODhMNjU4LDE5MEw2NTYsMTk1TDY2NSwyMDBMNjcwLDE4OEw2OTIsMjE5TDY4NSwyMzdMNjc4LDI0MEw2NjYsMjM4TDY2MSwyMzFMNjU4LDIzM0w2NjAsMjI4TDY1NywyMzJMNjQ3LDIyNlpNNzE2LDIwOEw3MTYsMjA1TDcyMCwyMDlMNzE2LDIwOFpNNzQxLDIwMEw3NDMsMjAxTDc0MSwyMDFMNzQxLDIwMFpNNzQ2LDE5N0w3NDMsMTk5TDc0MywxOThMNzQ2LDE5N1pNNzIwLDE5N0w3MjEsMTk4TDcyMSwxOThMNzIwLDE5N1pNNzIwLDE5NUw3MjAsMTk3TDcxOSwxOTVMNzIwLDE5NVpNNzA5LDE4N0w3MTAsMTg4TDcwOCwxODdMNzA5LDE4N1pNNjMyLDE4NUw2MzksMTgzTDYzMSwxODdMNjMyLDE4NVpNNzA3LDE4Nkw3MDUsMTg2TDcwNSwxODVMNzA3LDE4NlpNNzA3LDE4NEw3MDcsMTgzTDcwOCwxODZMNzA3LDE4NFpNNjI0LDE4NEw2MjgsMTgzTDYzMCwxODNMNjMwLDE4NEw2MjQsMTg0Wk03MDIsMTgxTDcwNSwxODRMNzAyLDE4Mkw3MDIsMTgxWk03MDAsMTgxTDY5OCwxODBMNjk4LDE4MEw3MDAsMTgxWk02NjcsMTczTDY4NiwxODdMNjc0LDE4Mkw2NzAsMTg1TDY2MCwxODNMNjYwLDE3OEw2NTAsMTc1TDY1MiwxNzJMNjQ1LDE3MEw2NTIsMTY5TDY1NSwxNzRMNjY3LDE3M1pNNjUzLDE3OUw2NTQsMTc5TDY1MywxODFMNjUzLDE3OVpNNjk0LDE3N0w2OTcsMTgwTDY5NywxODBMNjk2LDE4MEw2OTQsMTc3Wk02ODIsMTc4TDY4OCwxNzZMNjkwLDE3Nkw2ODUsMTgwTDY4MiwxNzhaTTY4NiwxNzNMNjkwLDE3NEw2OTEsMTc2TDY5MSwxNzdMNjg2LDE3M1pNNjM4LDE3NEw2MzgsMTc1TDYzNiwxNzRMNjM4LDE3NFpNNjQwLDE3NEw2NDUsMTc0TDY0NiwxNzVMNjQwLDE3NFpNNjI0LDE2OUw2MzEsMTY5TDYyNywxNzFMNjMwLDE3OEw2MjYsMTczTDYyNCwxNzhMNjIxLDE3M0w2MjQsMTY3TDYyNiwxNjZMNjM1LDE2NUw2MjQsMTY5Wk02NDIsMTY3TDYzOSwxNjZMNjQwLDE2NEw2NDIsMTY3Wk02MzcsMTU1TDYyOCwxNTVMNjM1LDE1MEw2MzcsMTU1Wk02MzIsMTQ5TDYyOSwxNTBMNjMyLDE0N0w2MzIsMTQ5Wk02MjgsMTQ5TDYyOCwxNDZMNjMwLDE0N0w2MjgsMTQ5Wk02MzQsMTQ5TDYzNSwxNDVMNjM2LDE0OEw2MzQsMTQ5Wk02MjYsMTQzTDYyNywxNDZMNjI1LDE0M0w2MjYsMTQzWk02MjUsMTM0TDYzMiwxNDVMNjI1LDE0M0w2MjUsMTM0Wk02MjgsMTIzTDYyNiwxMjZMNjI2LDEyOEw2MjQsMTI1TDYyOCwxMjNaTTY1MywxMDdMNjUwLDEwNUw2NTQsMTA1TDY1MywxMDdaTTY2NSwxMDNMNjU1LDEwNEw2NDYsMTA2TDY0NiwxMTFMNjQzLDEwN0w2NTAsMTAzTDY1NiwxMDNMNjY3LDkyTDY2NSwxMDNaTTY2NCw5MEw2NjksODRMNjc1LDg3TDY3MSw5MUw2NjQsOTBaTTY3Miw4M0w2NjksODJMNjcwLDY4TDY3NCw3OEw2NzAsODBMNjcyLDgzWk03NDMsMzhMNzQ2LDM3TDc0NiwzOEw3NDMsMzhaTTY2NCwzM0w2NjksMzJMNjcyLDM0TDY2NCwzM1pNNjg0LDMxTDY3NywzMEw2ODYsMzBMNjg0LDMxWk02NjAsMjlMNjc1LDI5TDY1OSwzMEw2NjAsMjlaIiBmaWxsPSJ1cmwoI2RvdHMpIiBvcGFjaXR5PSIuNzYiLz4KPGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZjViYTI5IiBzdHJva2Utd2lkdGg9IjEuNzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgb3BhY2l0eT0iLjk1Ij4KICA8cGF0aCBkPSJNMTUwIDk3IFEyNjggNTYgMzkyIDkwIi8+CiAgPHBhdGggZD0iTTE3NiAxMjEgUTI4NiA4MCAzOTIgOTAiLz4KICA8cGF0aCBkPSJNMjA2IDIwNiBRMjc2IDExMSAzOTIgOTAiLz4KICA8cGF0aCBkPSJNMzkyIDkwIFE0NTUgNjYgNTE2IDE1MSIvPgogIDxwYXRoIGQ9Ik0zOTIgOTAgUTUwMyA0NSA2MjUgMTIwIi8+CiAgPHBhdGggZD0iTTM5MiA5MCBRNTM2IDQyIDY5NyAxMTEiLz4KICA8cGF0aCBkPSJNNTE2IDE1MSBRNTcyIDEzMiA2MjUgMTIwIi8+CiAgPHBhdGggZD0iTTYyNSAxMjAgUTY2NSAxMDggNjk3IDExMSIvPgogIDxwYXRoIGQ9Ik01MTYgMTUxIFE2MDMgMTU5IDY1NSAyMTYiLz4KICA8cGF0aCBkPSJNNTE2IDE1MSBRNTA3IDE5NyA0NzAgMjMyIi8+CiAgPHBhdGggZD0iTTM5MiA5MCBRNDQ3IDk2IDUxNiAxNTEiLz4KPC9nPgo8ZyBmaWxsPSIjZjViYTI5IiBzdHJva2U9IiNmN2Y3ZjUiIHN0cm9rZS13aWR0aD0iMi42Ij4KICA8Y2lyY2xlIGN4PSIxNTAiIGN5PSI5NyIgcj0iOCIvPgogIDxjaXJjbGUgY3g9IjE3NiIgY3k9IjEyMSIgcj0iOCIvPgogIDxjaXJjbGUgY3g9IjIwNiIgY3k9IjIwNiIgcj0iOCIvPgogIDxjaXJjbGUgY3g9IjM5MiIgY3k9IjkwIiByPSI5Ii8+CiAgPGNpcmNsZSBjeD0iNTE2IiBjeT0iMTUxIiByPSIxMSIvPgogIDxjaXJjbGUgY3g9IjYyNSIgY3k9IjEyMCIgcj0iOCIvPgogIDxjaXJjbGUgY3g9IjY5NyIgY3k9IjExMSIgcj0iOCIvPgogIDxjaXJjbGUgY3g9IjY1NSIgY3k9IjIxNiIgcj0iOCIvPgogIDxjaXJjbGUgY3g9IjQ3MCIgY3k9IjIzMiIgcj0iOCIvPgo8L2c+CjxnIGZpbGw9IiNmNWJhMjkiIHN0cm9rZT0iI2Y3ZjdmNSIgc3Ryb2tlLXdpZHRoPSIyIj4KICA8Y2lyY2xlIGN4PSIyMjEiIGN5PSIyMzIiIHI9IjQuOCIvPgogIDxjaXJjbGUgY3g9IjQ3MCIgY3k9IjEyOCIgcj0iNC44Ii8+CiAgPGNpcmNsZSBjeD0iNTUzIiBjeT0iMTA1IiByPSI0LjgiLz4KPC9nPgo8L3N2Zz4=") center / 100% 100% no-repeat;
        transform: translateX(-50%);
        pointer-events: none;
    }
}

@media (max-width: 620px) {
.aboutbp-workflow{
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        width: 100% !important;
        height: auto !important;
        margin: 22px 0 0 !important;
        padding: 0 !important;
        background: none !important;
        overflow: visible !important;
    }

.aboutbp-workflow::before{
        display: none !important;
    }

.aboutbp-workflow::after,
.aboutbp-workflow-rings,
.aboutbp-workflow-svg,
.aboutbp-state-arrow,
.aboutbp-state-path{
        display: none !important;
    }

.aboutbp-role,
.aboutbp-workflow-core,
.aboutbp-output,
.aboutbp-state{
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        min-height: 86px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 16px 18px !important;
        border-radius: 20px !important;
        box-sizing: border-box;
        display: grid !important;
        align-items: center !important;
        column-gap: 14px !important;
        row-gap: 4px !important;
        text-align: left !important;
        background: rgba(255,255,255,.96) !important;
        border: 1px solid rgba(17,17,17,.04) !important;
        box-shadow: 0 14px 34px rgba(17,17,17,.06) !important;
        z-index: 1;
    }

.aboutbp-role,
.aboutbp-output,
.aboutbp-state{
        grid-template-columns: 60px minmax(0, 1fr) 42px !important;
        grid-template-rows: auto auto !important;
    }

.aboutbp-workflow-core{
        grid-template-columns: 60px minmax(0, 1fr) 42px !important;
        grid-template-rows: auto auto !important;
        background: #111210 !important;
        border: 1px solid rgba(245,186,41,.9) !important;
        box-shadow: 0 16px 34px rgba(17,17,17,.14), 0 0 26px rgba(245,186,41,.11) !important;
        color: #fff !important;
    }

.aboutbp-role::before,
.aboutbp-workflow-core::before,
.aboutbp-output::before,
.aboutbp-state::before{
        display: none !important;
        content: none !important;
    }

.aboutbp-role::after,
.aboutbp-output::after,
.aboutbp-workflow-core::after{
        position: static !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        display: grid !important;
        place-items: center !important;
        background: rgba(17,17,17,.05) !important;
        color: rgba(17,17,17,.35) !important;
        font-family: var(--font-sans) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        grid-column: 3 !important;
        grid-row: 1 / span 2 !important;
        justify-self: end !important;
        align-self: center !important;
        transform: none !important;
        border: 0 !important;
        pointer-events: none !important;
    }

.aboutbp-role-vendor::after{ content: "01" !important; }

.aboutbp-role-buyer::after{ content: "02" !important; }

.aboutbp-role-admin::after{ content: "03" !important; }

.aboutbp-workflow-core::after{ content: "04" !important; background: rgba(255,255,255,.10) !important; color: rgba(255,255,255,.78) !important; }

.aboutbp-output-php::after{ content: "05" !important; }

.aboutbp-output-api::after{ content: "06" !important; }

.aboutbp-role > .aboutbp-flow-icon,
.aboutbp-output > .aboutbp-flow-icon,
.aboutbp-state > .aboutbp-flow-icon,
.aboutbp-workflow-core > .aboutbp-core-icon{
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        width: 52px !important;
        height: 52px !important;
        margin: 0 !important;
        border-radius: 50% !important;
        display: grid !important;
        place-items: center !important;
        background: rgba(245,186,41,.15) !important;
        color: #0d0d0d !important;
        position: relative !important;
        justify-self: start !important;
        align-self: center !important;
    }

.aboutbp-workflow-core > .aboutbp-core-icon{
        background: transparent !important;
        color: #fff !important;
    }

.aboutbp-role > .aboutbp-flow-icon::after,
.aboutbp-output > .aboutbp-flow-icon::after,
.aboutbp-state > .aboutbp-flow-icon::after{
        display: none !important;
    }

.aboutbp-role > .aboutbp-flow-icon svg,
.aboutbp-output > .aboutbp-flow-icon svg,
.aboutbp-state > .aboutbp-flow-icon svg,
.aboutbp-workflow-core > .aboutbp-core-icon svg{
        width: 28px !important;
        height: 28px !important;
        position: relative !important;
        z-index: 1 !important;
    }

.aboutbp-workflow-core > .aboutbp-core-icon svg{
        width: 34px !important;
        height: 34px !important;
    }

.aboutbp-workflow-core > .aboutbp-core-icon::after{
        content: "";
        position: absolute;
        top: 50%;
        right: -12px;
        width: 1px;
        height: 42px;
        background: rgba(255,255,255,.18);
        transform: translateY(-50%);
    }

.aboutbp-role > strong,
.aboutbp-output > strong,
.aboutbp-state > strong,
.aboutbp-workflow-core > strong{
        grid-column: 2 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        text-align: left !important;
        justify-self: start !important;
        align-self: end !important;
        font-size: 16px !important;
        line-height: 1.08 !important;
        font-weight: 800 !important;
        letter-spacing: -.03em !important;
        max-width: calc(100% - 6px) !important;
    }

.aboutbp-role > p,
.aboutbp-output > p,
.aboutbp-state > p,
.aboutbp-workflow-core > p{
        grid-column: 2 !important;
        grid-row: 2 !important;
        margin: 0 !important;
        text-align: left !important;
        justify-self: start !important;
        align-self: start !important;
        max-width: 100% !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
        color: rgba(17,17,17,.66) !important;
    }

.aboutbp-workflow-core > p,
.aboutbp-workflow-core > strong{
        color: #fff !important;
    }

.aboutbp-states{
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 0 !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

.aboutbp-state{
        padding-right: 18px !important;
        padding-left: 18px !important;
    }

.aboutbp-state-index{
        position: static !important;
        grid-column: 3 !important;
        grid-row: 1 / span 2 !important;
        justify-self: end !important;
        align-self: center !important;
        display: grid !important;
        place-items: center !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        border-radius: 50% !important;
        background: rgba(17,17,17,.05) !important;
        color: rgba(17,17,17,.35) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }
}

@media (max-width: 620px) {
.aboutbp-states{
        margin-top: 24px !important;
    }

.aboutbp-states::before{
        content: "FINAL STEPS";
        order: -2;
        align-self: flex-start;
        padding: 9px 14px;
        border-radius: 999px;
        background: #f5ba29;
        color: #111;
        font-family: var(--font-sans);
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: .16em;
    }

.aboutbp-states::after{
        content: "Test. Refine. Launch.";
        order: -1;
        display: block;
        width: 100%;
        margin: 2px 0 6px;
        color: #111;
        font-family: var(--font-display);
        font-size: clamp(30px, 8vw, 38px);
        font-weight: 800;
        line-height: .98;
        letter-spacing: -.045em;
    }
}

.work-section .pn-mock-screen{
    overflow: hidden;
    padding: 10px 12px 12px;
    background: #171717;
    line-height: 0;
}

.work-section .work-preview-image{
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: top center;
    border-radius: 8px;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.work-section .work-preview.is-swapping .work-preview-image,
.work-section .work-preview.is-swapping .work-preview-meta{
    opacity: 1 !important;
    transform: none !important;
}

.work-section .work-preview-meta{
    transition: none;
}

.work-section .work-preview-tags{
    gap: 9px;
}

.work-section .work-preview-tags span{
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 14px;
    border: 1px solid rgba(17,17,17,.12);
    border-radius: 999px;
    background: #f7f7f6;
    color: rgba(17,17,17,.78);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .045em;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}

.work-section .work-preview-open{
    border-color: rgba(17,17,17,.16);
    background: #fff;
    color: #111;
    box-shadow: 0 4px 14px rgba(17,17,17,.045);
}

.work-section .work-preview-open:hover,
.work-section .work-preview-open:focus-visible{
    border-color: #111;
    color: #fff;
}

@media (min-width: 1081px) {
.work-section .work-item{
        grid-template-columns: minmax(0, 1fr) 40px;
        min-height: 102px;
        padding: 22px 26px 22px 94px;
    }

.work-section .work-item.is-active{
        padding: 22px 26px 22px 94px;
    }

.work-section .work-item-index,
.work-section .work-item.is-active .work-item-index{
        position: absolute;
        left: 22px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
    }

.work-section .work-item-index{
        display: grid;
        width: 48px;
        height: 48px;
        place-items: center;
        border-radius: 50%;
        background: transparent;
        box-shadow: none;
        color: rgba(17,17,17,.34);
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .10em;
    }

.work-section .work-item.is-active .work-item-index{
        width: 58px;
        height: 58px;
        left: 17px;
        background: #fff;
        color: #111;
        font-size: 20px;
        letter-spacing: -.02em;
        box-shadow: 0 3px 12px rgba(17,17,17,.06), inset 0 0 0 1px rgba(17,17,17,.05);
    }

.work-section .work-item-name{
        grid-column: 1;
        min-width: 0;
    }

.work-section .work-item-go{
        grid-column: 2;
    }
}

.work-preview-count,
.work-preview-heading,
.work-preview-live-arrow,
.work-rail-header{
    display: none;
}

@media (max-width: 1080px) {
.work-section .work-showcase{
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr);
        column-gap: clamp(26px, 4vw, 42px);
        row-gap: 34px;
        align-items: center;
    }

.work-section .work-preview{
        display: contents;
        position: static;
    }

.work-section .work-preview-frame{
        grid-column: 1;
        min-width: 0;
    }

.work-section .work-preview-frame .pn-mock{
        width: 100%;
        box-shadow: 0 24px 46px rgba(17,17,17,.15);
    }

.work-section .pn-mock-screen{
        padding: 10px 12px 12px;
    }

.work-section .work-preview-meta{
        grid-column: 2;
        align-self: center;
        display: flex;
        flex-direction: column;
        gap: 17px;
        min-width: 0;
        padding: 0;
        border-top: 0;
    }

.work-section .work-preview-count{
        display: none;
        margin: 0;
        color: rgba(17,17,17,.42);
        font-family: var(--font-display);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .12em;
    }

.work-section .work-preview-heading{
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 18px;
    }

.work-section .work-preview-title-wrap{
        min-width: 0;
    }

.work-section .work-preview-title-wrap h3{
        margin: 0;
        color: #111;
        font-family: var(--font-display);
        font-size: clamp(34px, 4.25vw, 46px);
        font-weight: 700;
        line-height: .98;
        letter-spacing: -.045em;
    }

.work-section .work-preview-title-wrap > span{
        display: block;
        margin-top: 10px;
        color: rgba(17,17,17,.48);
        font-family: var(--font-display);
        font-size: clamp(10.5px, 1.12vw, 12px);
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: .12em;
        text-transform: uppercase;
    }

.work-section .work-preview-live-arrow{
        display: grid;
        width: 52px;
        height: 52px;
        flex: 0 0 auto;
        place-items: center;
        border: 1px solid #f5ba29;
        border-radius: 50%;
        background: #f5ba29;
        color: #111;
        box-shadow: 0 10px 24px rgba(245,186,41,.18);
        transition: transform .28s ease, background-color .28s ease, color .28s ease;
    }

.work-section .work-preview-live-arrow:hover,
.work-section .work-preview-live-arrow:focus-visible{
        transform: translateY(-2px);
        background: #111;
        border-color: #111;
        color: #fff;
        outline: none;
    }

.work-section .work-preview-meta p{
        color: rgba(17,17,17,.62);
        font-size: clamp(14px, 1.55vw, 16px);
        line-height: 1.62;
    }

.work-section .work-preview-tags{
        gap: 8px;
    }

.work-section .work-preview-tags span{
        min-height: 30px;
        padding: 0 12px;
        font-size: 10.5px;
    }

.work-section .work-preview-open{
        display: none !important;
    }

.work-section .work-rail{
        grid-column: 1 / -1;
        display: flex;
        gap: 10px;
        width: 100%;
        padding: 0 2px 6px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-padding-inline: 2px;
    }

.work-section .work-rail::-webkit-scrollbar{
        display: none;
    }

.work-section .work-rail::before,
.work-section .work-rail-progress,
.work-section .work-item::before,
.work-section .work-item::after{
        display: none !important;
    }

.work-section .work-item,
.work-section .work-item.is-active{
        flex: 0 0 clamp(170px, 20vw, 208px);
        min-height: 104px;
        grid-template-columns: minmax(0, 1fr) 36px;
        grid-template-rows: auto auto;
        gap: 8px 12px;
        align-content: center;
        padding: 16px 16px 15px;
        border: 1px solid rgba(17,17,17,.10);
        border-radius: 16px;
        background: #fff;
        transform: none !important;
        scroll-snap-align: start;
        box-shadow: 0 5px 16px rgba(17,17,17,.025);
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        touch-action: manipulation;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

.work-section .work-item.is-active{
        border-color: #f5ba29;
        background: linear-gradient(135deg, rgba(245,186,41,.08), rgba(255,255,255,.98));
        box-shadow: 0 8px 22px rgba(245,186,41,.08);
    }

.work-section .work-item > *{
        pointer-events: none;
    }

.work-section .work-item:focus-visible{
        outline: 2px solid rgba(245,186,41,.72);
        outline-offset: 2px;
    }

.work-section .work-item-index,
.work-section .work-item.is-active .work-item-index{
        position: static;
        display: block;
        grid-column: 1;
        grid-row: 1;
        width: auto;
        height: auto;
        place-items: initial;
        transform: none;
        background: transparent;
        box-shadow: none;
        color: rgba(17,17,17,.38);
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .08em;
    }

.work-section .work-item.is-active .work-item-index{
        color: #111;
    }

.work-section .work-item-name{
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
    }

.work-section .work-item h3,
.work-section .work-item.is-active h3{
        margin: 0 0 6px;
        color: #111;
        font-size: 19px;
        font-weight: 650;
        line-height: 1.05;
        letter-spacing: -.035em;
    }

.work-section .work-item-type{
        display: block;
        color: rgba(17,17,17,.46);
        font-size: 9.5px;
        line-height: 1.35;
        letter-spacing: .055em;
    }

.work-section .work-item-go,
.work-section .work-item:hover .work-item-go,
.work-section .work-item:focus-visible .work-item-go,
.work-section .work-item.is-active .work-item-go{
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
        justify-self: end;
        width: 36px;
        height: 36px;
        transform: none;
    }

.work-section .work-item.is-active .work-item-go{
        border-color: #f5ba29;
        background: #f5ba29;
        color: #111;
    }

.work-section .work-item-mobile{
        display: none !important;
    }
}

@media (max-width: 760px) {
.work-section .work-showcase{
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
    }

.work-section .work-preview-frame,
.work-section .work-preview-meta,
.work-section .work-rail{
        grid-column: 1;
    }

.work-section .work-preview-frame{
        margin-bottom: 30px;
        scroll-margin-top: 82px;
    }

.work-section .work-preview-frame .pn-mock{
        box-shadow: 0 18px 36px rgba(17,17,17,.14);
    }

.work-section .pn-mock-screen{
        padding: 7px 8px 9px;
    }

.work-section .work-preview-image{
        border-radius: 6px;
    }

.work-section .work-preview-meta{
        position: relative;
        gap: 16px;
        margin-bottom: 18px;
        padding: 0;
    }

.work-section .work-preview-count{
        display: none;
    }

.work-section .work-preview-heading{
        grid-template-columns: minmax(0, 1fr) 54px;
        gap: 16px;
    }

.work-section .work-preview-title-wrap h3{
        font-size: clamp(34px, 10vw, 42px);
    }

.work-section .work-preview-title-wrap > span{
        margin-top: 9px;
        font-size: 11px;
        letter-spacing: .105em;
    }

.work-section .work-preview-live-arrow{
        width: 52px;
        height: 52px;
    }

.work-section .work-preview-meta p{
        font-size: 16px;
        line-height: 1.55;
    }

.work-section .work-preview-tags{
        gap: 7px;
    }

.work-section .work-preview-tags span{
        min-height: 32px;
        padding: 0 13px;
        font-size: 10.5px;
    }

.work-section .work-preview-open{
        display: none !important;
    }

.work-section .work-rail{
        position: relative;
        display: block;
        width: 100%;
        max-height: clamp(318px, 48vh, 410px);
        padding: 0 10px 0 0;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-snap-type: y proximity;
        scrollbar-width: auto;
        scrollbar-color: #f5ba29 rgba(17,17,17,.07);
        overscroll-behavior-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
        touch-action: pan-y;
    }

.work-section .work-rail::-webkit-scrollbar{
        display: block;
        width: 8px;
    }

.work-section .work-rail::-webkit-scrollbar-track{
        background: rgba(17,17,17,.06);
        border-radius: 99px;
    }

.work-section .work-rail::-webkit-scrollbar-thumb{
        min-height: 44px;
        border: 2px solid transparent;
        border-radius: 99px;
        background: #f5ba29;
        background-clip: padding-box;
    }

.work-section .work-rail-header{
        position: sticky;
        top: 0;
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 54px;
        margin-bottom: 8px;
        padding: 11px 4px 10px;
        border-top: 1px solid rgba(17,17,17,.12);
        border-bottom: 1px solid rgba(17,17,17,.08);
        background: rgba(255,255,255,.96);
        color: rgba(17,17,17,.52);
        font-family: var(--font-display);
        font-size: 10.5px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .12em;
        text-transform: uppercase;
        backdrop-filter: blur(8px);
    }

.work-section .work-rail-header span:first-child::before{
        content: "";
        display: inline-block;
        width: 9px;
        height: 9px;
        margin-right: 10px;
        border-radius: 50%;
        background: #f5ba29;
        vertical-align: -1px;
    }

.work-section .work-item,
.work-section .work-item.is-active{
        width: 100%;
        min-height: 80px;
        margin: 0 0 8px;
        padding: 12px 12px 12px 14px;
        grid-template-columns: 38px minmax(0, 1fr) 38px;
        grid-template-rows: 1fr;
        gap: 10px;
        align-items: center;
        border: 1px solid rgba(17,17,17,.11);
        border-radius: 14px;
        background: #fff;
        scroll-snap-align: start;
    }

.work-section .work-item.is-active{
        border-color: #f5ba29;
        background: linear-gradient(90deg, rgba(245,186,41,.09), rgba(255,255,255,.98));
    }

.work-section .work-item-index,
.work-section .work-item.is-active .work-item-index{
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        color: rgba(17,17,17,.38);
        font-size: 11px;
    }

.work-section .work-item-name{
        grid-column: 2;
        grid-row: 1;
        align-self: center;
    }

.work-section .work-item h3,
.work-section .work-item.is-active h3{
        margin: 0 0 4px;
        font-size: 18px;
        line-height: 1.05;
    }

.work-section .work-item-type{
        font-size: 9px;
        line-height: 1.3;
        letter-spacing: .04em;
    }

.work-section .work-item-go,
.work-section .work-item:hover .work-item-go,
.work-section .work-item:focus-visible .work-item-go,
.work-section .work-item.is-active .work-item-go{
        grid-column: 3;
        grid-row: 1;
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 480px) {
.work-section .work-preview-frame{
        margin-bottom: 24px;
    }

.work-section .work-preview-heading{
        grid-template-columns: minmax(0, 1fr) 48px;
    }

.work-section .work-preview-live-arrow{
        width: 48px;
        height: 48px;
    }

.work-section .work-preview-live-arrow svg{
        width: 23px;
        height: 23px;
    }

.work-section .work-preview-meta p{
        font-size: 15px;
    }

.work-section .work-preview-tags span{
        min-height: 30px;
        padding: 0 11px;
        font-size: 9.5px;
    }
}

.work-mobile-featured-head,
.work-mobile-results,
.work-mobile-project-cta{
    display: none;
}

@media (max-width: 768px) {
.work-section .work-showcase{
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
        align-items: start;
    }

.work-section .work-preview{
        display: block;
        position: static;
        grid-column: 1;
        width: 100%;
        padding: 14px;
        border: 1px solid rgba(245,186,41,.55);
        border-radius: 20px;
        background: linear-gradient(145deg, rgba(245,186,41,.035), #fff 34%);
        box-shadow: 0 12px 34px rgba(17,17,17,.045);
        overflow: hidden;
    }

.work-section .work-mobile-featured-head{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }

.work-section .work-mobile-featured-label{
        display: inline-flex;
        align-items: center;
        min-width: 0;
        color: rgba(17,17,17,.58);
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .10em;
        text-transform: uppercase;
        white-space: nowrap;
    }

.work-section .work-mobile-featured-label i{
        width: 9px;
        height: 9px;
        flex: 0 0 9px;
        margin-right: 9px;
        border-radius: 50%;
        background: #f5ba29;
    }

.work-section .work-mobile-featured-nav{
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
    }

.work-section .work-mobile-featured-count{
        margin-right: 2px;
        color: rgba(17,17,17,.48);
        font-family: var(--font-display);
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .10em;
        text-transform: uppercase;
        white-space: nowrap;
    }

.work-section .work-mobile-nav-button{
        display: grid;
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        place-items: center;
        padding: 0;
        border: 1px solid rgba(17,17,17,.14);
        border-radius: 50%;
        background: #fff;
        color: #111;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        box-shadow: 0 5px 13px rgba(17,17,17,.04);
        transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
        -webkit-tap-highlight-color: transparent;
    }

.work-section .work-mobile-nav-button:active{
        transform: scale(.94);
    }

.work-section .work-mobile-nav-button.is-next{
        border-color: #f5ba29;
        background: #f5ba29;
    }

.work-section .work-mobile-nav-button:focus-visible{
        outline: 2px solid rgba(245,186,41,.7);
        outline-offset: 2px;
    }

.work-section .work-preview-frame{
        grid-column: auto;
        width: 100%;
        margin: 0 0 18px;
        scroll-margin-top: 78px;
        transform-origin: center center;
        will-change: transform, opacity;
    }

.work-section .work-preview-frame .pn-mock{
        width: 100%;
        border-radius: 17px;
        box-shadow: 0 15px 30px rgba(17,17,17,.14);
    }

.work-section .work-preview-frame .pn-mock-bar{
        min-height: 42px;
        padding-inline: 12px;
    }

.work-section .work-preview-frame .pn-mock-bar em{
        min-width: 0;
        max-width: calc(100% - 74px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.work-section .pn-mock-screen{
        padding: 7px 8px 9px;
    }

.work-section .work-preview-image{
        border-radius: 6px;
    }

.work-section .work-preview-meta{
        display: flex;
        position: static;
        grid-column: auto;
        flex-direction: column;
        gap: 14px;
        margin: 0;
        padding: 0;
        border-top: 0;
        transform-origin: center center;
        will-change: transform, opacity;
    }

.work-section .work-preview-count,
.work-section .work-preview-live-arrow{
        display: none !important;
    }

.work-section .work-preview-heading{
        display: block;
    }

.work-section .work-preview-title-wrap h3{
        margin: 0;
        font-size: clamp(34px, 10.2vw, 44px);
        line-height: .96;
        letter-spacing: -.055em;
    }

.work-section .work-preview-title-wrap > span{
        margin-top: 8px;
        font-size: 14px;
        line-height: 1.35;
        letter-spacing: .10em;
    }

.work-section .work-preview-meta p{
        margin: 0;
        font-size: 15px;
        line-height: 1.55;
    }

.work-section .work-preview-tags{
        gap: 7px;
    }

.work-section .work-preview-tags span{
        min-height: 29px;
        padding: 0 11px;
        font-size: 9.5px;
        letter-spacing: .035em;
    }

.work-section .work-mobile-results{
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        margin-top: 2px;
        padding-top: 13px;
        border-top: 1px solid rgba(17,17,17,.10);
    }

.work-section .work-mobile-results > span{
        display: flex;
        min-width: 0;
        min-height: 48px;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 0 8px;
        border-right: 1px solid rgba(17,17,17,.10);
        text-align: center;
    }

.work-section .work-mobile-results > span:last-child{
        border-right: 0;
    }

.work-section .work-mobile-results strong{
        min-width: 0;
        color: rgba(17,17,17,.72);
        font-family: var(--font-sans);
        font-size: 14px;
        font-weight: 600;
        line-height: 1.25;
    }

.work-section .work-preview-open{
        display: none !important;
    }

.work-section .work-mobile-project-cta{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        width: 100%;
        min-height: 52px;
        margin-top: 1px;
        border: 1px solid #f5ba29;
        border-radius: 999px;
        background: #f5ba29;
        color: #111;
        font-family: var(--font-sans);
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        box-shadow: 0 10px 22px rgba(245,186,41,.16);
    }

.work-section .work-mobile-project-cta svg{
        width: 22px;
        height: 22px;
    }

.work-section .work-rail{
        display: none !important;
    }

.work-section .work-preview.is-mobile-leaving-next .work-preview-frame,
.work-section .work-preview.is-mobile-leaving-next .work-preview-meta{
        animation: pnMobileProjectLeaveNext .14s ease-in both;
    }

.work-section .work-preview.is-mobile-leaving-prev .work-preview-frame,
.work-section .work-preview.is-mobile-leaving-prev .work-preview-meta{
        animation: pnMobileProjectLeavePrev .14s ease-in both;
    }

.work-section .work-preview.is-mobile-entering-next .work-preview-frame,
.work-section .work-preview.is-mobile-entering-next .work-preview-meta{
        animation: pnMobileProjectEnterNext .30s cubic-bezier(.16,.84,.28,1) both;
    }

.work-section .work-preview.is-mobile-entering-prev .work-preview-frame,
.work-section .work-preview.is-mobile-entering-prev .work-preview-meta{
        animation: pnMobileProjectEnterPrev .30s cubic-bezier(.16,.84,.28,1) both;
    }

@keyframes pnMobileProjectLeaveNext {
        to { opacity: 0; transform: translateX(-22px) scale(.992); }
    }

@keyframes pnMobileProjectLeavePrev {
        to { opacity: 0; transform: translateX(22px) scale(.992); }
    }

@keyframes pnMobileProjectEnterNext {
        from { opacity: 0; transform: translateX(26px) scale(.992); }
        to { opacity: 1; transform: translateX(0) scale(1); }
    }

@keyframes pnMobileProjectEnterPrev {
        from { opacity: 0; transform: translateX(-26px) scale(.992); }
        to { opacity: 1; transform: translateX(0) scale(1); }
    }
}

@media (max-width: 390px) {
.work-section .work-preview{
        padding: 12px;
    }

.work-section .work-mobile-featured-label,
.work-section .work-preview-title-wrap > span,
.work-section .work-mobile-results strong{
        font-size: 14px;
    }

.work-section .work-mobile-nav-button{
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
}

@media (min-width: 1181px) and (max-height: 700px) {
.aboutbp-build-heading{
        top: 7.5%;
    }

.aboutbp-build-title{
        margin-top: 16px;
        font-size: clamp(48px, 4vw, 64px);
        line-height: 1;
    }

.aboutbp-build-copy{
        width: min(500px, 33vw);
        margin-top: 20px;
        font-size: 13.5px;
        line-height: 1.42;
    }

.aboutbp-build-copy p + p{
        margin-top: .8em;
    }

.aboutbp-build-support{
        margin-top: 18px;
        font-size: 12px;
    }

.aboutbp-workflow{
        top: 2%;
        height: 94%;
    }

.aboutbp-role{
        gap: 4px;
        padding: 10px 12px;
    }

.aboutbp-role .aboutbp-flow-icon{
        width: 34px;
        height: 34px;
    }

.aboutbp-role > strong{
        font-size: 14px;
    }

.aboutbp-role > p{
        font-size: 11.5px;
        line-height: 1.2;
    }

.aboutbp-workflow-core{
        gap: 5px;
        padding: 8px 10px;
    }

.aboutbp-core-icon{
        width: 40px;
        height: 40px;
    }

.aboutbp-workflow-core > strong{
        font-size: 14px;
    }

.aboutbp-workflow-core > p{
        font-size: 11.5px;
        line-height: 1.18;
    }

.aboutbp-output{
        gap: 4px;
        padding: 10px 12px;
    }

.aboutbp-output-php,
.aboutbp-output-api{
        padding: 10px 12px;
    }

.aboutbp-output .aboutbp-flow-icon{
        width: 32px;
        height: 32px;
    }

.aboutbp-output strong{
        font-size: 14px;
    }

.aboutbp-output > p{
        font-size: 11.5px;
        line-height: 1.18;
    }

.aboutbp-states{
        grid-template-columns: 1fr 34px 1fr 34px 1fr;
        bottom: 1.5%;
    }

.aboutbp-state{
        gap: 2px;
        padding: 11px 12px 8px;
    }

.aboutbp-state-index{
        top: 9px;
        left: 12px;
        font-size: 12px;
    }

.aboutbp-state .aboutbp-flow-icon{
        width: 32px;
        height: 32px;
    }

.aboutbp-state > strong{
        font-size: 21px;
        line-height: 1;
    }

.aboutbp-state > p{
        max-width: 96%;
        font-size: 11px;
        line-height: 1.15;
    }

.aboutbp-state-arrow{
        width: 30px;
        height: 30px;
        font-size: 20px;
    }
}

@media (min-width: 1181px) and (max-height: 560px) {
.aboutbp-build-heading{
        top: 4.5%;
        left: 6.1%;
        width: min(31vw, 440px);
    }

.aboutbp-build-label{
        padding: 9px 14px;
        font-size: 13px;
    }

.aboutbp-build-title{
        margin-top: 12px;
        font-size: clamp(42px, 3.7vw, 54px);
        line-height: .98;
    }

.aboutbp-build-copy{
        width: 100%;
        margin-top: 13px;
        font-size: 12px;
        line-height: 1.34;
    }

.aboutbp-build-copy p + p{
        margin-top: .62em;
    }

.aboutbp-build-support{
        gap: 9px;
        margin-top: 12px;
        font-size: 11.5px;
    }

.aboutbp-build-support i{
        width: 8px;
        height: 8px;
    }

.aboutbp-workflow{
        top: 1%;
        right: 2.5%;
        width: 57%;
        height: 98%;
    }

.aboutbp-workflow-rings{
        width: min(250px, 18vw);
        box-shadow:
            0 0 0 20px rgba(17,17,17,.012),
            0 0 0 38px rgba(17,17,17,.010),
            0 0 0 56px rgba(17,17,17,.008);
    }

.aboutbp-role{
        top: 1%;
        height: clamp(72px, 18vh, 88px);
        min-height: 0;
        gap: 2px;
        padding: 7px 10px;
    }

.aboutbp-role .aboutbp-flow-icon{
        width: 28px;
        height: 28px;
    }

.aboutbp-role > strong{
        font-size: 12px;
        line-height: 1.05;
    }

.aboutbp-role > p{
        max-width: 96%;
        font-size: 10px;
        line-height: 1.12;
    }

.aboutbp-workflow-core{
        top: 34%;
        width: 30%;
        height: clamp(70px, 17vh, 84px);
        gap: 2px;
        padding: 6px 9px;
    }

.aboutbp-core-icon{
        width: 29px;
        height: 29px;
    }

.aboutbp-workflow-core > strong{
        font-size: 12px;
        line-height: 1.05;
    }

.aboutbp-workflow-core > p{
        font-size: 9.5px;
        line-height: 1.1;
    }

.aboutbp-output{
        top: 41%;
        width: 21.5%;
        height: clamp(70px, 17vh, 84px);
        min-height: 0;
        gap: 2px;
        padding: 6px 8px;
    }

.aboutbp-output-php,
.aboutbp-output-api{
        padding: 6px 8px;
    }

.aboutbp-output .aboutbp-flow-icon{
        width: 27px;
        height: 27px;
    }

.aboutbp-output strong{
        font-size: 11.5px;
        line-height: 1.05;
    }

.aboutbp-output > p{
        max-width: 96%;
        font-size: 9.5px;
        line-height: 1.1;
    }

.aboutbp-states{
        right: 3.5%;
        bottom: 1%;
        left: 3.5%;
        grid-template-columns: 1fr 30px 1fr 30px 1fr;
    }

.aboutbp-state{
        height: clamp(72px, 18vh, 88px);
        min-height: 0;
        gap: 1px;
        padding: 8px 8px 6px;
    }

.aboutbp-state-index{
        top: 7px;
        left: 9px;
        font-size: 10px;
    }

.aboutbp-state .aboutbp-flow-icon{
        width: 27px;
        height: 27px;
    }

.aboutbp-state > strong{
        font-size: 17px;
        line-height: .96;
    }

.aboutbp-state > p{
        max-width: 96%;
        font-size: 9px;
        line-height: 1.08;
    }

.aboutbp-state-arrow{
        width: 26px;
        height: 26px;
        font-size: 18px;
    }
}

@media (min-width: 621px) and (max-width: 1366px),
       (min-width: 1367px) and (max-height: 780px) {
.aboutbp-build-heading{
        width: 35.5%;
    }

.aboutbp-workflow{
        --aboutbp-wf-input-h: clamp(98px, 17dvh, 124px);
        --aboutbp-wf-middle-h: clamp(96px, 16dvh, 116px);
        --aboutbp-wf-state-h: clamp(102px, 18dvh, 126px);
        top: 7%;
        right: 1.5%;
        bottom: auto;
        width: 57%;
        height: 86%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows:
            var(--aboutbp-wf-input-h)
            var(--aboutbp-wf-middle-h)
            var(--aboutbp-wf-state-h);
        column-gap: clamp(9px, .9vw, 14px);
        row-gap: 0;
        align-content: space-between;
        align-items: stretch;
        overflow: visible;
    }

.aboutbp-workflow-svg,
.aboutbp-workflow-rings{
        display: none;
    }

.aboutbp-role,
.aboutbp-workflow-core,
.aboutbp-output{
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        margin: 0;
        box-sizing: border-box;
    }

.aboutbp-role-vendor{
        grid-column: 1;
        grid-row: 1;
    }

.aboutbp-role-buyer{
        grid-column: 2;
        grid-row: 1;
    }

.aboutbp-role-admin{
        grid-column: 3;
        grid-row: 1;
    }

.aboutbp-output-php{
        grid-column: 1;
        grid-row: 2;
    }

.aboutbp-workflow-core{
        grid-column: 2;
        grid-row: 2;
    }

.aboutbp-output-api{
        grid-column: 3;
        grid-row: 2;
    }

.aboutbp-role{
        gap: 4px;
        padding: 10px 8px;
        transform: translate3d(0, calc((1 - var(--role-opacity, 0)) * -10px), 0)
            scale(calc(.96 + (var(--role-opacity, 0) * .04)));
    }

.aboutbp-role .aboutbp-flow-icon,
.aboutbp-output .aboutbp-flow-icon{
        width: clamp(28px, 3.1vw, 36px);
        height: clamp(28px, 3.1vw, 36px);
    }

.aboutbp-role > strong,
.aboutbp-output > strong{
        max-width: 100%;
        font-size: clamp(11px, 1.08vw, 14px);
        line-height: 1.08;
        overflow-wrap: anywhere;
    }

.aboutbp-role > p,
.aboutbp-output > p{
        max-width: 98%;
        font-size: clamp(9.5px, .9vw, 12px);
        line-height: 1.18;
        overflow-wrap: anywhere;
    }

.aboutbp-workflow-core{
        gap: 4px;
        padding: 9px 8px;
        transform: scale(calc(.90 + (var(--core-in, 0) * .10)));
    }

.aboutbp-core-icon{
        width: clamp(30px, 3.5vw, 40px);
        height: clamp(30px, 3.5vw, 40px);
    }

.aboutbp-workflow-core > strong{
        font-size: clamp(11px, 1.08vw, 14px);
        line-height: 1.08;
    }

.aboutbp-workflow-core > p{
        max-width: 96%;
        font-size: clamp(9.5px, .9vw, 12px);
        line-height: 1.16;
    }

.aboutbp-output,
.aboutbp-output-php,
.aboutbp-output-api{
        gap: 4px;
        padding: 9px 8px;
    }

.aboutbp-states{
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        grid-column: 1 / -1;
        grid-row: 3;
        align-self: stretch;
        width: 100%;
        height: 100%;
        min-height: 0;
        grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) 30px minmax(0, 1fr);
    }

.aboutbp-state{
        width: 100%;
        height: 100%;
        min-height: 0;
        gap: 2px;
        padding: 10px 8px 7px;
        box-sizing: border-box;
    }

.aboutbp-state-index{
        top: 8px;
        left: 9px;
        font-size: 10px;
    }

.aboutbp-state .aboutbp-flow-icon{
        width: clamp(28px, 3vw, 34px);
        height: clamp(28px, 3vw, 34px);
    }

.aboutbp-state > strong{
        font-size: clamp(16px, 1.7vw, 21px);
        line-height: 1;
    }

.aboutbp-state > p{
        max-width: 98%;
        font-size: clamp(9px, .88vw, 11.5px);
        line-height: 1.12;
        overflow-wrap: anywhere;
    }

.aboutbp-state-arrow{
        width: 27px;
        height: 27px;
        font-size: 19px;
    }
}

@media (min-width: 621px) and (max-height: 520px) {
.aboutbp-build-heading{
        top: 3.5%;
        width: 36%;
    }

.aboutbp-build-label{
        padding: 8px 13px;
        font-size: 12px;
    }

.aboutbp-build-title{
        margin-top: 10px;
        font-size: clamp(36px, 4vw, 46px);
        line-height: .98;
    }

.aboutbp-build-copy{
        margin-top: 10px;
        font-size: 11px;
        line-height: 1.28;
    }

.aboutbp-build-copy p + p{
        margin-top: .55em;
    }

.aboutbp-build-support{
        margin-top: 9px;
        font-size: 10.5px;
    }

.aboutbp-workflow{
        --aboutbp-wf-input-h: 82px;
        --aboutbp-wf-middle-h: 82px;
        --aboutbp-wf-state-h: 88px;
        top: 2%;
        height: 96%;
    }

.aboutbp-role,
.aboutbp-output,
.aboutbp-output-php,
.aboutbp-output-api,
.aboutbp-workflow-core{
        padding: 6px;
        gap: 2px;
    }

.aboutbp-role .aboutbp-flow-icon,
.aboutbp-output .aboutbp-flow-icon,
.aboutbp-state .aboutbp-flow-icon{
        width: 25px;
        height: 25px;
    }

.aboutbp-core-icon{
        width: 27px;
        height: 27px;
    }

.aboutbp-role > strong,
.aboutbp-output > strong,
.aboutbp-workflow-core > strong{
        font-size: 10.5px;
    }

.aboutbp-role > p,
.aboutbp-output > p,
.aboutbp-workflow-core > p{
        font-size: 8.7px;
        line-height: 1.08;
    }

.aboutbp-state{
        padding: 7px 6px 5px;
    }

.aboutbp-state-index{
        top: 6px;
        left: 7px;
        font-size: 9px;
    }

.aboutbp-state > strong{
        font-size: 15px;
    }

.aboutbp-state > p{
        font-size: 8.5px;
        line-height: 1.06;
    }
}

@media (min-width: 621px) and (max-width: 900px) {
.aboutbp-build-heading{
        top: 4%;
        left: 5%;
        width: 90%;
    }

.aboutbp-workflow{
        --aboutbp-wf-input-h: clamp(74px, 13dvh, 92px);
        --aboutbp-wf-middle-h: clamp(74px, 13dvh, 92px);
        --aboutbp-wf-state-h: clamp(80px, 14dvh, 98px);
        top: 44%;
        right: 3%;
        width: 94%;
        height: 53%;
        column-gap: 8px;
    }

.aboutbp-role,
.aboutbp-output,
.aboutbp-output-php,
.aboutbp-output-api,
.aboutbp-workflow-core{
        gap: 2px;
        padding: 6px;
    }

.aboutbp-role .aboutbp-flow-icon,
.aboutbp-output .aboutbp-flow-icon{
        width: 26px;
        height: 26px;
    }

.aboutbp-core-icon{
        width: 29px;
        height: 29px;
    }

.aboutbp-role > strong,
.aboutbp-output > strong,
.aboutbp-workflow-core > strong{
        font-size: 10.5px;
        line-height: 1.05;
    }

.aboutbp-role > p,
.aboutbp-output > p,
.aboutbp-workflow-core > p{
        font-size: 9px;
        line-height: 1.08;
    }

.aboutbp-states{
        grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr) 26px minmax(0, 1fr);
    }

.aboutbp-state{
        padding: 7px 6px 5px;
    }

.aboutbp-state-index{
        top: 6px;
        left: 7px;
        font-size: 9px;
    }

.aboutbp-state .aboutbp-flow-icon{
        width: 25px;
        height: 25px;
    }

.aboutbp-state > strong{
        font-size: 15px;
    }

.aboutbp-state > p{
        font-size: 8.8px;
        line-height: 1.06;
    }

.aboutbp-state-arrow{
        width: 24px;
        height: 24px;
        font-size: 17px;
    }
}

@media (min-width: 621px) and (max-width: 900px) and (max-height: 560px) {
.aboutbp-build-label{
        padding: 7px 11px;
        font-size: 11px;
    }

.aboutbp-build-title{
        width: 48%;
        margin-top: 8px;
        font-size: clamp(30px, 5vw, 38px);
        line-height: .98;
    }

.aboutbp-build-copy{
        width: 52%;
        margin-top: 8px;
        font-size: 9.5px;
        line-height: 1.22;
    }

.aboutbp-build-copy p + p{
        margin-top: .42em;
    }

.aboutbp-build-support{
        margin-top: 7px;
        font-size: 9px;
    }

.aboutbp-workflow{
        --aboutbp-wf-input-h: 64px;
        --aboutbp-wf-middle-h: 64px;
        --aboutbp-wf-state-h: 70px;
        top: 44%;
        height: 54%;
    }

.aboutbp-role .aboutbp-flow-icon,
.aboutbp-output .aboutbp-flow-icon,
.aboutbp-state .aboutbp-flow-icon{
        width: 21px;
        height: 21px;
    }

.aboutbp-core-icon{
        width: 23px;
        height: 23px;
    }

.aboutbp-role > strong,
.aboutbp-output > strong,
.aboutbp-workflow-core > strong{
        font-size: 9px;
    }

.aboutbp-role > p,
.aboutbp-output > p,
.aboutbp-workflow-core > p,
.aboutbp-state > p{
        font-size: 7.5px;
        line-height: 1.02;
    }

.aboutbp-state > strong{
        font-size: 13px;
    }
}

@media (min-width: 621px) and (max-width: 1366px),
       (min-width: 1367px) and (max-height: 780px) {
.aboutbp-workflow-svg,
.aboutbp-workflow-rings{
        display: block !important;
    }
}

@media (min-width: 621px) and (max-width: 900px) {
.aboutbp-build-heading{
        top: 5%;
        left: 4%;
        width: 34%;
    }

.aboutbp-build-label{
        padding: 8px 11px;
        font-size: 10px;
    }

.aboutbp-build-title{
        width: 100%;
        margin-top: 12px;
        font-size: clamp(30px, 4.6vw, 38px);
        line-height: .98;
    }

.aboutbp-build-copy{
        width: 100%;
        margin-top: 13px;
        font-size: clamp(9.2px, 1.15vw, 10.5px);
        line-height: 1.3;
    }

.aboutbp-build-copy p + p{
        margin-top: .62em;
    }

.aboutbp-build-support{
        gap: 7px;
        margin-top: 10px;
        font-size: clamp(8.5px, 1.05vw, 9.5px);
    }

.aboutbp-build-support i{
        width: 7px;
        height: 7px;
    }

.aboutbp-workflow{
        --aboutbp-wf-input-h: clamp(82px, 16dvh, 102px);
        --aboutbp-wf-middle-h: clamp(80px, 15dvh, 98px);
        --aboutbp-wf-state-h: clamp(86px, 17dvh, 104px);
        top: 4%;
        right: 2%;
        width: 60%;
        height: 92%;
        column-gap: 7px;
    }

.aboutbp-role,
.aboutbp-output,
.aboutbp-output-php,
.aboutbp-output-api,
.aboutbp-workflow-core{
        gap: 2px;
        padding: 6px 5px;
    }

.aboutbp-role .aboutbp-flow-icon,
.aboutbp-output .aboutbp-flow-icon,
.aboutbp-state .aboutbp-flow-icon{
        width: 23px;
        height: 23px;
    }

.aboutbp-core-icon{
        width: 25px;
        height: 25px;
    }

.aboutbp-role > strong,
.aboutbp-output > strong,
.aboutbp-workflow-core > strong{
        font-size: clamp(8.4px, 1.05vw, 10px);
        line-height: 1.04;
    }

.aboutbp-role > p,
.aboutbp-output > p,
.aboutbp-workflow-core > p{
        max-width: 98%;
        font-size: clamp(7.2px, .88vw, 8.5px);
        line-height: 1.05;
    }

.aboutbp-states{
        grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr);
    }

.aboutbp-state{
        gap: 1px;
        padding: 7px 5px 5px;
    }

.aboutbp-state-index{
        top: 6px;
        left: 7px;
        font-size: 8px;
    }

.aboutbp-state > strong{
        font-size: clamp(12px, 1.75vw, 15px);
        line-height: .98;
    }

.aboutbp-state > p{
        max-width: 98%;
        font-size: clamp(7px, .82vw, 8px);
        line-height: 1.04;
    }

.aboutbp-state-arrow{
        width: 21px;
        height: 21px;
        font-size: 15px;
    }
}

@media (min-width: 621px) and (max-width: 900px) and (max-height: 560px) {
.aboutbp-build-heading{
        top: 2.5%;
        width: 34%;
    }

.aboutbp-build-label{
        padding: 6px 9px;
        font-size: 8.5px;
    }

.aboutbp-build-title{
        margin-top: 8px;
        font-size: clamp(25px, 4.1vw, 32px);
    }

.aboutbp-build-copy{
        margin-top: 8px;
        font-size: 8px;
        line-height: 1.18;
    }

.aboutbp-build-copy p + p{
        margin-top: .42em;
    }

.aboutbp-build-support{
        margin-top: 7px;
        font-size: 7.8px;
    }

.aboutbp-workflow{
        --aboutbp-wf-input-h: 64px;
        --aboutbp-wf-middle-h: 64px;
        --aboutbp-wf-state-h: 70px;
        top: 2%;
        height: 96%;
    }

.aboutbp-role .aboutbp-flow-icon,
.aboutbp-output .aboutbp-flow-icon,
.aboutbp-state .aboutbp-flow-icon{
        width: 19px;
        height: 19px;
    }

.aboutbp-core-icon{
        width: 21px;
        height: 21px;
    }

.aboutbp-role > strong,
.aboutbp-output > strong,
.aboutbp-workflow-core > strong{
        font-size: 8px;
    }

.aboutbp-role > p,
.aboutbp-output > p,
.aboutbp-workflow-core > p,
.aboutbp-state > p{
        font-size: 6.6px;
        line-height: 1.02;
    }

.aboutbp-state > strong{
        font-size: 11px;
    }
}

.testimonials-section .portfolio-new-kicker,
.testimonials-section .portfolio-new-kicker{
    position: relative;
}

.services-section .portfolio-new-kicker,
.testimonials-section .portfolio-new-kicker{
    background: #fff;
    border-radius: 50px;
}

.work-section .portfolio-new-kicker,
.services-section .portfolio-new-kicker,
.testimonials-section .portfolio-new-kicker{
    position: relative;
    margin-bottom: 0;
    min-height: 68px;
    gap: 18px;
    padding: 10px 22px 10px 14px;
    background: #f7f7f6;
    color: rgba(17,17,17,.58);
    font-size: clamp(16px, .72vw, 20px);
    letter-spacing: .18em;
    box-shadow: inset 0 0 0 1px rgba(17,17,17,.03);
}

.work-section .portfolio-new-kicker::before,
.services-section .portfolio-new-kicker::before,
.testimonials-section .portfolio-new-kicker::before{
    content: "";
    position: absolute;
    left: 42px;
    bottom: -9px;
    width: 18px;
    height: 18px;
    background: #f7f7f6;
    clip-path: none;
    transform: rotate(45deg);
    border-radius: 0 0 0 4px;
    border-left: 1px solid rgba(17,17,17,.05);
    border-bottom: 1px solid rgba(17,17,17,.05);
    box-shadow: none;
}

.services-section .portfolio-new-kicker::before,
.testimonials-section .portfolio-new-kicker::before{
    background: #fff;
}

.work-section .portfolio-new-kicker span,
.services-section .portfolio-new-kicker span,
.testimonials-section .portfolio-new-kicker span{
    z-index: 1;
    width: 50px;
    height: 50px;
    border: 0;
    background: #fff;
    color: #111;
    font-size: 17px;
    box-shadow: 0 3px 10px rgba(17,17,17,.05), inset 0 0 0 1px rgba(17,17,17,.05);
}

.review-score > div{
    font-size: 14px;
}

.review-score > div > span:last-child,
.review-score > div > span:last-child b{
    font-size: 14px;
    font-weight: 600;
}

.review-stars,
.testimonial-stars{
    font-size: 14px;
    line-height: 1;
}

.testimonial-top > span:last-child{
    font-size: 14px;
    letter-spacing: .11em;
}

.testimonials-profile-link{
    gap: 10px;
    margin-top: 30px;
    padding: 0 22px;
    padding-right: 18px;
    border-bottom: 0;
}

.testimonials-profile-link .testimonials-profile-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.testimonials-profile-link .testimonials-profile-arrow{
    flex-shrink: 0;
}

@media (max-width: 900px) {
.work-section .portfolio-new-kicker,
.services-section .portfolio-new-kicker,
.testimonials-section .portfolio-new-kicker{
        min-height: 48px;
        gap: 14px;
        padding: 8px 16px 8px 12px;
        height: 48px;
        font-size: 14px;
    }

.work-section .portfolio-new-kicker::before,
.services-section .portfolio-new-kicker::before,
.testimonials-section .portfolio-new-kicker::before{
        left: 35px;
        bottom: -8px;
        width: 16px;
        height: 16px;
    }

.work-section .portfolio-new-kicker span,
.services-section .portfolio-new-kicker span,
.testimonials-section .portfolio-new-kicker span{
        width: 35px;
        height: 35px;
        font-size: 13px;
    }

.testimonials-profile-link{
        min-height: 46px;
        padding: 0 18px;
    }

.testimonial-top{
        flex-direction: column;
        align-items: start;
    }

.review-stars,
.testimonial-stars{
        font-size: 16px;
        line-height: 1;
    }
}

.services-stack > span{
    color: #111;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .13em;
}

.testimonials-profile-link{
    border: 1px solid rgba(17,17,17,.28);
    border-bottom: 1px solid rgba(17,17,17,.28);
}

.testimonials-profile-link:hover,
.testimonials-profile-link:focus-visible{
    border-color: #111;
}

.testimonials-section .portfolio-new-kicker,
.services-section .portfolio-new-kicker{
    background: #ffffff;
}

@media (max-width: 900px) {
.services-stack > span{
        font-size: 13px;
    }
}