.pf-hero{
    background:var(--h2-orange);
    padding:65px 0 60px
}
.pf-hero-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px
}
.h2-page .pf-hero h1{
    font-size:clamp(44px,5.6vw,80px);
    line-height:1.05;
    letter-spacing:-3.8px;
    margin:22px 0
}
.h2-page .pf-intro{
    font-size:16px;
    line-height:1.8;
    max-width:550px;
    color:#3d2d20
}
.pf-hero-index{
    flex-shrink:0;
    border-left:1px solid #a65d2759;
    padding-left:40px;
    align-self:stretch;
    display:flex;
    flex-direction:column;
    justify-content:center
}
.pf-hero-index>span{
    font-size:100px;
    line-height:1;
    letter-spacing:-6px;
    font-weight:400
}
.pf-hero-index>small{
    font-size:9px;
    font-weight:600;
    letter-spacing:1.5px;
    margin-top:14px
}
.pf-collection{
    padding-block:40px 85px
}
.pf-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    margin-bottom:34px
}
.pf-filters{
    display:flex;
    flex-wrap:wrap;
    gap:8px
}
.pf-filters[hidden],.pf-project[hidden],.pf-lightbox-error[hidden]{
    display:none
}
.pf-filters button{
    display:inline-flex;
    align-items:center;
    gap:12px;
    min-height:43px;
    padding:10px 16px;
    background:transparent;
    border:1px solid #cfd0c5;
    border-radius:24px;
    font-size:12px;
    transition:background .2s,color .2s,border-color .2s
}
.pf-filters button>span{
    font-size:10px;
    opacity:.7
}
.pf-filters button:hover{
    background:#ecebe2
}
.pf-filters button[aria-pressed=true]{
    background:var(--h2-ink);
    border-color:var(--h2-ink);
    color:var(--h2-paper)
}
.h2-page .pf-count{
    font-size:11px;
    color:var(--h2-muted);
    white-space:nowrap
}
.pf-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:26px
}
.pf-project{
    min-width:0;
    transition:box-shadow .2s
}
.pf-project:target{
    box-shadow:0 0 0 3px var(--h2-orange)
}
/* Cards remain visible when JavaScript or animation support is unavailable. */
@media(prefers-reduced-motion:no-preference){
    .pf-project.pf-entering:not(:target):not(:focus-within){
        animation:pf-enter .55s cubic-bezier(.22,1,.36,1) var(--pf-enter-delay,0ms) backwards
    }
}
@keyframes pf-enter{
    from{opacity:0;transform:translateY(22px)}
    to{opacity:1;transform:translateY(0)}
}
@media print{
    .pf-project.pf-entering{
        animation:none!important
    }
}
.pf-project .pf-media{
    display:block;
    aspect-ratio:1.55
}
.pf-project .pf-media:focus-visible{
    outline-offset:-4px;
    z-index:1
}
.pf-tone-web{
    background:#dce8e2
}
.pf-tone-crypto{
    background:#ece7ee
}
.pf-tone-campaigns{
    background:#f1e5d5
}
.pf-tone-mobile{
    background:#e5ead9
}
.pf-tone-embedded{
    background:#fff
}
.pf-copy .pf-project-status{
    font-size:13px;
    line-height:1.75;
    color:var(--h2-muted);
    margin-top:17px
}
.pf-project:nth-child(3n+2) .pf-tone-web{
    background:#e6eadb
}
.pf-media-contain img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    padding:18px 22px
}
.pf-zoom{
    position:absolute;
    top:14px;
    right:14px;
    display:grid;
    place-items:center;
    width:33px;
    height:33px;
    border-radius:50%;
    background:#f8f7f2e8;
    border:1px solid #26272020;
    transition:background .2s;
    z-index:2
}
.pf-zoom svg{
    width:18px;
    height:18px
}
.pf-media:hover .pf-zoom,.pf-media:focus-visible .pf-zoom{
    background:var(--h2-orange)
}
.pf-project .pf-copy{
    padding:24px 25px 22px
}
.pf-copy .h2-case-category{
    font-size:9px;
    line-height:1.5;
    letter-spacing:1px;
    margin-bottom:12px
}
.pf-page .pf-copy h2{
    font-size:26px;
    line-height:1.15;
    letter-spacing:-.8px;
    font-weight:500;
    overflow-wrap:anywhere
}
.h2-page .pf-description{
    font-size:13px;
    line-height:1.8;
    margin-top:15px;
    color:#565b50
}
.pf-copy .pf-visit{
    font-size:11px;
    justify-content:space-between;
    width:100%;
    padding-top:14px;
    margin-top:auto;
    min-height:50px
}
.pf-capabilities{
    padding-block:65px;
    background:var(--h2-ink);
    color:var(--h2-paper)
}
.pf-capabilities .h2-section-heading{
    margin-bottom:38px
}
.pf-capabilities .h2-eyebrow{
    color:#ffac6b
}
.pf-page .pf-capabilities h2{
    font-size:40px
}
.pf-capability-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:34px 45px
}
.pf-capability-grid>div{
    border-top:1px solid #52544a;
    padding-top:18px
}
.pf-capability-grid h3{
    font-size:18px;
    font-weight:500;
    letter-spacing:-.3px
}
.h2-page .pf-capability-grid p{
    font-size:13px;
    line-height:1.8;
    color:#bbbdb2;
    margin-top:12px
}
.pf-lightbox{
    width:min(1050px,calc(100vw - 48px));
    max-height:calc(100dvh - 48px);
    padding:0;
    border:0;
    border-radius:18px;
    background:var(--h2-paper);
    color:var(--h2-ink);
    overflow:auto
}
.pf-lightbox::backdrop{
    background:#141714dc
}
.pf-lightbox-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:18px 24px;
    border-bottom:1px solid #d9d9ce
}
.pf-page .pf-lightbox-bar h2{
    font-size:22px;
    letter-spacing:-.5px;
    line-height:1.25
}
.pf-lightbox-close{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
    min-height:40px;
    padding:8px 12px;
    border:1px solid #cfd0c5;
    border-radius:8px;
    background:transparent;
    font-size:12px
}
.pf-lightbox-close>span{
    font-size:23px;
    line-height:1
}
.pf-lightbox-close:hover{
    background:#ecebe2
}
.h2-page .pf-lightbox-description{
    padding:20px 24px;
    font-size:15px;
    line-height:1.75;
    color:#565b50
}
.pf-lightbox-stage{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:15px;
    background:#e8eae4;
    min-height:180px
}
.pf-lightbox-stage img{
    display:block;
    max-width:100%;
    max-height:60dvh;
    width:auto;
    height:auto;
    object-fit:contain
}
.h2-page .pf-lightbox-error{
    padding:25px;
    font-size:14px
}
.pf-lightbox-error a{
    text-decoration:underline;
    text-underline-offset:3px
}
body.pf-modal-open{
    overflow:hidden
}
@media(max-width:1100px){
    .pf-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:24px
    }
    .pf-hero-index{
        padding-left:30px
    }
    .pf-hero-index>span{
        font-size:82px
    }
    .pf-toolbar{
        align-items:flex-start
    }
    .pf-count{
        padding-top:13px
    }
}
@media(max-width:800px){
    .pf-hero{
        padding-block:45px
    }
    .h2-page .pf-hero h1{
        font-size:57px;
        letter-spacing:-2.5px
    }
    .pf-hero-inner{
        gap:30px
    }
    .pf-hero-index{
        padding-left:25px
    }
    .pf-hero-index>span{
        font-size:65px
    }
    .pf-hero-index>small{
        font-size:8px;
        letter-spacing:1px;
        max-width:100px
    }
    .pf-toolbar{
        flex-direction:column;
        gap:15px
    }
    .pf-count{
        padding-top:0
    }
    .pf-capability-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .pf-project .pf-copy{
        padding:23px
    }
    .pf-page .pf-copy h2{
        font-size:25px
    }
    .pf-page .pf-capabilities h2{
        font-size:35px
    }
}
@media(max-width:560px){
    .pf-hero{
        padding-block:37px
    }
    .pf-hero-inner{
        display:block
    }
    .h2-page .pf-hero h1{
        font-size:43px;
        letter-spacing:-2px;
        margin-block:19px
    }
    .h2-page .pf-intro{
        font-size:14px
    }
    .pf-hero-index{
        display:none
    }
    .pf-collection{
        padding-block:28px 55px
    }
    .pf-grid{
        grid-template-columns:1fr;
        gap:27px
    }
    .pf-toolbar{
        margin-bottom:26px
    }
    .pf-filters{
        gap:7px
    }
    .pf-filters button{
        font-size:11px;
        gap:9px;
        padding:9px 13px;
        min-height:40px
    }
    .pf-project .pf-media{
        aspect-ratio:1.5
    }
    .pf-project .pf-copy{
        padding:25px
    }
    .pf-page .pf-copy h2{
        font-size:28px
    }
    .h2-page .pf-description{
        font-size:14px
    }
    .pf-copy .pf-visit{
        font-size:12px
    }
    .pf-capabilities{
        padding-block:48px
    }
    .pf-capability-grid{
        grid-template-columns:1fr;
        gap:28px
    }
    .pf-lightbox{
        width:calc(100vw - 24px);
        max-height:calc(100dvh - 24px);
        border-radius:12px
    }
    .pf-lightbox-bar{
        padding:12px 15px;
        gap:12px
    }
    .pf-page .pf-lightbox-bar h2{
        font-size:20px
    }
    .pf-lightbox-close{
        font-size:11px;
        padding:7px 10px
    }
    .pf-lightbox-stage{
        padding:8px
    }
    .h2-page .pf-lightbox-description{
        padding:16px 15px;
        font-size:14px
    }
    .pf-lightbox-stage img{
        max-height:50dvh
    }
}