.cta-magnet{--magnet-x:0px;--magnet-y:0px;--label-x:0px;--label-y:0px;translate:var(--magnet-x) var(--magnet-y);transition:translate .55s cubic-bezier(.22,1,.36,1),background-color .25s,color .25s}.cta-magnet-label{display:inherit;align-items:inherit;justify-content:inherit;flex-direction:inherit;gap:inherit;translate:var(--label-x) var(--label-y);transition:translate .55s cubic-bezier(.22,1,.36,1);pointer-events:none}.cta-magnet.is-magnet-active,.cta-magnet.is-magnet-active>.cta-magnet-label{transition-duration:.18s}.cta.cta-magnet:hover,.case-live.cta-magnet:hover,.send.cta-magnet:hover,.hero-contact:hover>.cta-magnet{transform:none}.case-live.cta-magnet{gap:0}.case-live.cta-magnet>.cta-magnet-label{gap:16px}.concept-case .case-live.cta-magnet>.cta-magnet-label{gap:8px}.cta-magnet:disabled{translate:0 0}.hero-contact>.cta-magnet>.cta-magnet-label{display:flex;align-items:center;justify-content:center}.cta-magnet:focus-visible{translate:0 0}.cta-magnet:focus-visible>.cta-magnet-label{translate:0 0}
@media(max-width:760px){.concept-case .case-live.cta-magnet>.cta-magnet-label{flex-direction:column}}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){.cta-magnet,.cta-magnet-label{translate:0 0!important;transition:none!important}}

.case-live.cta-magnet>.cta-magnet-label{font-size:inherit}

/* Keep the circle centered on the intro/showcase seam at every size. */
.case-page .case-intro .case-live{--case-live-size:150px;width:var(--case-live-size);height:var(--case-live-size);bottom:calc(var(--case-live-size) / -2);gap:8px}
.mero-case .case-intro .case-live{--case-live-size:160px}
.case-page .case-live.cta-magnet>.cta-magnet-label{display:flex;align-items:center;justify-content:center;flex-direction:row;gap:8px;line-height:1.2;white-space:nowrap}
.case-page .case-live .site-arrow{display:block;width:1em;height:1em;font-size:16px}
.case-page .case-live .cta-magnet-label>span{display:flex;align-items:center;line-height:1}
@media(max-width:760px){.case-page .case-intro .case-live{--case-live-size:115px}.case-page .case-live.cta-magnet>.cta-magnet-label{gap:6px}.case-page .case-live .site-arrow{font-size:14px}}

/* The fill enters from below and exits above, independently of the label. */
.cta-circle.cta-magnet{overflow:hidden;isolation:isolate;background:#3455f5;transition:translate .85s cubic-bezier(.34,1.56,.64,1)}
.cta-circle.cta-magnet:hover{background:#3455f5;transform:none}
.cta-circle.cta-magnet>.cta-magnet-label{position:relative;z-index:1;transition:translate .85s cubic-bezier(.34,1.56,.64,1)}
.concept-case .case-live.cta-magnet>.cta-magnet-label{left:0}
.cta-circle.is-magnet-active,.cta-circle.is-magnet-active>.cta-magnet-label{transition-duration:.3s;transition-timing-function:cubic-bezier(.22,1,.36,1)}
.cta-circle>.cta-circle-fill{position:absolute;left:-25%;top:100%;width:150%;height:150%;border-radius:50%;background:#263fce;pointer-events:none;transform:translateY(0);z-index:0}
.cta-circle.is-magnet-active>.cta-circle-fill{animation:cta-fill-in .5s cubic-bezier(.65,0,.25,1) forwards}
.cta-circle.is-fill-leaving>.cta-circle-fill{animation:cta-fill-out .5s cubic-bezier(.65,0,.25,1) forwards}
@keyframes cta-fill-in{from{transform:translateY(0)}to{transform:translateY(-83.333%)}}
@keyframes cta-fill-out{from{transform:translateY(-83.333%)}to{transform:translateY(-175%)}}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){.cta-circle>.cta-circle-fill{display:none;animation:none!important}.cta-circle.cta-magnet,.cta-circle.cta-magnet>.cta-magnet-label{transition:none!important}}

.work-intro-with-about{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(160px,1fr);align-items:center;gap:9vw}.work-intro-with-about .intro{margin-bottom:0}.about-me-circle{width:160px;height:160px;border-radius:50%;display:flex;align-items:center;justify-content:center;justify-self:center;background:#3455f5;color:white;font-size:18px;font-weight:400;flex-shrink:0}.about-me-circle>.cta-magnet-label{display:flex;align-items:center;justify-content:center;white-space:nowrap}.case-live .site-arrow,.case-live .arrow-icon{display:none!important}
@media(max-width:760px){.work-intro-with-about{grid-template-columns:1fr;gap:28px}.about-me-circle{width:125px;height:125px;font-size:16px;justify-self:end}}


.work-intro-with-about{grid-template-columns:minmax(0,2fr) minmax(250px,1fr);align-items:start;gap:7vw;max-width:1080px;margin:0 auto;padding:34px 0 8px}.work-intro-with-about h2{margin:0;font-size:clamp(60px,5.5vw,76px);font-weight:700;letter-spacing:-.045em;line-height:1.08}.work-intro-aside{display:flex;flex-direction:column;align-items:flex-start;gap:24px;padding-top:5px}.work-intro-aside .intro{margin:0;font-size:18px;line-height:1.6}.work-intro-aside .about-me-circle{position:relative;left:0}
@media(max-width:760px){.work-intro-with-about{grid-template-columns:1fr;gap:28px;padding:12px 0 20px}.work-intro-with-about h2{font-size:clamp(40px,9vw,52px)}.work-intro-aside{padding:0;gap:28px}.work-intro-aside .intro{font-size:16px}.work-intro-aside .about-me-circle{align-self:flex-end}}

.work-intro-with-about+.project-grid{margin-top:32px}


.work-intro-with-about+.section-top{margin-top:32px}.work-intro-with-about+.section-top+.project-grid{margin-top:24px}

.work .project-grid>.project-row:first-child{border-top:0}

.work-intro-with-about+.section-top{border-top-color:#ceccc6}

/* Header navigation: magnetic labels and a small, centered hover dot. */
.header nav>a{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:12px 0;border-bottom:0!important}
.header nav>a::after{content:"";position:absolute;left:50%;bottom:0;width:5px;height:5px;border-radius:50%;background:currentColor;transform:translateX(-50%) scale(0);transition:transform .25s cubic-bezier(.22,1,.36,1);pointer-events:none}
.header nav>a[aria-current="page"]::after,.header nav>a:focus-visible::after{transform:translateX(-50%) scale(1)}
@media(hover:hover) and (pointer:fine){.header nav>a:hover::after{transform:translateX(-50%) scale(1)}}
@media(max-width:760px){.header nav>a{display:none}}
@media(prefers-reduced-motion:reduce){.header nav>a::after{transition:none}}