/* Five front-facing projects with clear gaps and a larger center project. */
.portfolio{overflow:clip;padding-block:clamp(65px,5vw,100px)}
.portfolio-layout{display:grid;grid-template-columns:.64fr 1.36fr;gap:3vw;align-items:center}
.portfolio .portfolio-intro h2{width:100%;max-width:570px;text-wrap:balance}
.portfolio .text-link{margin-top:26px;display:inline-block}
.portfolio-scene{display:block;position:relative;width:100%;height:clamp(280px,25vw,500px);min-height:0;margin:0;padding:0;perspective:none;overflow:hidden;touch-action:pan-y pinch-zoom;cursor:grab;user-select:none}
.portfolio-scene.is-dragging{cursor:grabbing}
.portfolio-scene:focus-visible{outline:2px solid #9cae72;outline-offset:-8px}
.portfolio-track{position:absolute;inset:0;pointer-events:none}
.portfolio-scene .project{display:block;position:absolute;left:50%;top:50%;right:auto;bottom:auto;width:auto;opacity:1;transform-style:flat;transition:none;z-index:auto;will-change:transform;pointer-events:none}
.portfolio-scene .project-card,.portfolio-scene .project-card:hover{display:block;position:relative;width:100%;height:100%;padding:0;background:#f2f3e9;overflow:hidden;border:0;border-radius:12px;box-shadow:none;transform:none;transition:none;pointer-events:auto;cursor:grab;backface-visibility:hidden;text-align:left}
.portfolio-scene.gallery-intro-pending .project-card{opacity:0;transform:scale(.54)}
.portfolio-scene .is-arriving .project-card{animation:project-arrive .52s cubic-bezier(.22,1,.36,1) var(--entrance-delay,0ms) both;transform-origin:center}
.portfolio-scene.gallery-asleep .project-card{animation-play-state:paused}
@keyframes project-arrive{from{opacity:0;transform:scale(.54)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.portfolio-scene .project-card{animation:none!important;opacity:1!important;transform:none!important}}
.ad-mockup{display:block;container-type:inline-size;color:#171918;font-family:Arial,sans-serif;background:#f2f3e9}
.ad-header{display:flex;height:16.2cqw;align-items:center;padding:0 5.1cqw;gap:2cqw}
.ad-avatar{display:grid;place-items:center;flex:none;width:8.4cqw;height:8.4cqw;border-radius:1.8cqw;overflow:hidden}
.ad-avatar.brand-miro{background:#ffdd33}
.ad-avatar.brand-kindred,.ad-avatar.brand-goodee{border-radius:50%}
.portfolio-scene .ad-avatar img{width:76%;height:76%;object-fit:contain;display:block;pointer-events:none}
.portfolio-scene .ad-avatar.brand-kindred img,.portfolio-scene .ad-avatar.brand-goodee img{width:100%;height:100%}
.ad-account{display:flex;flex-direction:column;gap:.5cqw;font-size:4.3cqw;line-height:1.15}
.ad-account strong{font-weight:500;display:flex;align-items:center;gap:1.6cqw}
.ad-account small{font-size:2.7cqw;color:#85877f}
.ad-meta .ad-account{font-size:3.5cqw}
.portfolio-scene .ad-verified{width:2.6cqw;height:2.6cqw;object-fit:contain;pointer-events:none}
.portfolio-scene .ad-more{width:3.7cqw;height:auto;margin-left:auto;object-fit:contain;pointer-events:none}
.portfolio-scene .ad-creative{display:block;width:100%;height:auto;aspect-ratio:var(--creative-ratio,1);object-fit:contain;pointer-events:none}
.ad-footer{height:16.2cqw;display:flex;align-items:center;gap:3.7cqw;padding:0 6.7cqw;background:#f2f3e9}
.ad-copy-lines{display:flex;flex-direction:column;gap:2cqw;flex:1}
.ad-copy-lines i{height:1.95cqw;width:72%;border-radius:2cqw;background:#dcdfd3}
.ad-copy-lines i:last-child{width:100%}
.ad-callout{border:1px solid #0a66c2;border-radius:4cqw;white-space:nowrap;font-size:3.1cqw;line-height:1;color:#0a66c2;padding:1.85cqw 5.6cqw;margin-left:1.5cqw}
.ad-meta .ad-footer{padding:0 3cqw;gap:3.5cqw}
.portfolio-scene .ad-footer-icon{width:4.9cqw;height:5.3cqw;object-fit:contain;pointer-events:none}
.portfolio-scene .ad-footer-icon:last-child{margin-left:auto;margin-right:3cqw}
@media(max-width:800px){.portfolio-layout{grid-template-columns:1fr;gap:22px}.portfolio .portfolio-intro h2{max-width:490px}.portfolio-scene{width:calc(100% + 32px);height:360px;margin:0 -16px}}
@media(max-width:560px){.portfolio{padding-block:65px 45px}.portfolio-scene{height:280px;margin-top:0}.portfolio-scene .project-card{border-radius:9px}}

/* The two equal groups include their own last gap, making -50% a clean seam. */
.testimonial-heading h2{width:100%}
.testimonial-track{--testimonial-card-width:max(340px,calc((100vw - var(--gutter)*2)*.34));--testimonial-gap:2.3vw;display:block;overflow:hidden;scroll-snap-type:none;touch-action:pan-y}
.testimonial-belt{display:flex;width:max-content;animation:testimonial-drift var(--testimonial-duration,90s) linear infinite;will-change:transform}
.testimonial-set{display:flex;flex:none;align-items:stretch;gap:var(--testimonial-gap);padding-right:var(--testimonial-gap)}
.testimonial-set .testimonial{flex:0 0 var(--testimonial-card-width);width:var(--testimonial-card-width);min-width:0;scroll-snap-align:none}
@keyframes testimonial-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.motion-paused .testimonial-belt{animation-play-state:paused}
@media(max-width:1100px){.testimonial-track{--testimonial-card-width:calc((100vw - var(--gutter)*2)*.43)}}
@media(max-width:800px){.testimonial-track{--testimonial-card-width:calc((100vw - var(--gutter)*2)*.75)}}
@media(max-width:560px){.testimonial-track{--testimonial-card-width:calc((100vw - var(--gutter)*2)*.89);--testimonial-gap:16px}}
@media(prefers-reduced-motion:reduce){.testimonial-belt{animation:none;will-change:auto}.testimonial-track{overflow-x:auto}.testimonial-set[aria-hidden=true]{display:none}}