/* A muted blue-gray Services band separates work from the contact footer. */
.homepage #services{background:#dce2ec;color:#171715}
.homepage #services .section-top,.homepage #services details{border-color:#b9c2d1}
.homepage #services details p{color:#434c5c}
.homepage #services summary:focus-visible{outline-color:#3455f5}
body .portfolio-footer{display:block;background:#1c1d20;color:#f6f5f1;padding:100px 5vw 32px;scroll-margin-top:80px}
.portfolio-footer .footer-inner{max-width:1100px;margin:0 auto}
.portfolio-footer .footer-heading{display:flex;align-items:center;justify-content:space-between;gap:40px}
.portfolio-footer h2{max-width:950px;margin:0;font-size:clamp(54px,6.5vw,96px);font-weight:400;line-height:1.08;letter-spacing:-.055em}
.portfolio-footer h2 img{display:inline-block;width:.85em;height:.85em;object-fit:cover;border-radius:50%;vertical-align:baseline;margin-right:.25em}
.portfolio-footer .footer-direction{flex-shrink:0;width:28px;height:28px;align-self:flex-end;margin-bottom:16px}
.portfolio-footer .footer-intro{max-width:540px;font-size:16px;line-height:1.6;color:#b5b5b7;margin:28px 0 0}
.portfolio-footer .footer-contact-line{position:relative;height:1px;background:#ffffff26;margin:88px 0 70px}
.portfolio-footer .footer-contact-circle{position:absolute;right:9%;top:50%;width:170px;height:170px;transform:translateY(-50%);margin:0;font-size:17px;display:flex;align-items:center;justify-content:center;background:#3455f5;color:#fff;border:0;border-radius:50%}
.portfolio-footer .footer-contact-details{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.portfolio-footer .footer-email{display:inline-flex;align-items:center;justify-content:center;min-height:68px;padding:20px 32px;border:1px solid #ffffff40;border-radius:100px;font-size:16px;line-height:1.3;overflow-wrap:anywhere;max-width:100%;transition:border-color .2s,background .2s}
.portfolio-footer .footer-email:hover{background:#ffffff0a;border-color:#ffffff80}
.portfolio-footer a:focus-visible{outline:2px solid white;outline-offset:6px}
.portfolio-footer .footer-meta{display:flex;justify-content:space-between;gap:36px;max-width:1500px;margin:110px auto 0;font-size:12px;line-height:1.5}
.portfolio-footer .footer-meta>div{display:flex;flex-direction:column;gap:14px}
.portfolio-footer .footer-meta-label{color:#929295;font-size:10px;text-transform:uppercase;letter-spacing:.06em}
@media(max-width:760px){body .portfolio-footer{padding:68px 6vw 28px}.portfolio-footer .footer-heading{gap:16px}.portfolio-footer h2{font-size:clamp(40px,9vw,68px)}.portfolio-footer .footer-direction{width:22px;height:22px;margin-bottom:8px}.portfolio-footer .footer-intro{font-size:15px;margin-top:24px}.portfolio-footer .footer-contact-line{margin:90px 0 82px}.portfolio-footer .footer-contact-circle{width:130px;height:130px;font-size:15px;right:4%}.portfolio-footer .footer-email{font-size:14px;min-height:60px;padding:18px 22px}.portfolio-footer .footer-meta{margin-top:70px;flex-wrap:wrap;gap:28px;font-size:11px}.portfolio-footer .footer-meta>div{gap:10px}}
@media(prefers-reduced-motion:reduce){.portfolio-footer .footer-email{transition:none}}
.portfolio-footer .footer-contact-circle.cta-magnet:hover{transform:translateY(-50%)}
/* The last content section curves over the footer as it reveals. */
.footer-leading-section{position:relative;z-index:2}
.footer-leading-section::after{content:"";position:absolute;top:calc(100% - 1px);left:0;width:100%;height:var(--footer-curve,0px);background:var(--footer-leading-color,#dce2ec);border-radius:0 0 50% 50% / 0 0 100% 100%;pointer-events:none}
body .portfolio-footer{position:relative;overflow:clip}
.portfolio-footer .footer-inner,.portfolio-footer .footer-meta{transform:translate3d(0,var(--footer-shift,0px),0)}
.portfolio-footer .footer-email{position:relative;isolation:isolate;overflow:hidden;background:transparent;transition:border-color .35s,color .35s,translate .55s cubic-bezier(.22,1,.36,1)}
.portfolio-footer .footer-email::before{content:"";position:absolute;inset:-1px;background:#3455f5;border-radius:inherit;transform:translateY(105%);transition:transform .45s cubic-bezier(.65,0,.25,1);z-index:-1;pointer-events:none}
.portfolio-footer .footer-email>.cta-magnet-label{position:relative;z-index:1}
@media(hover:hover) and (pointer:fine){.portfolio-footer .footer-email:hover{background:transparent;border-color:#3455f5;color:#fff}.portfolio-footer .footer-email:hover::before{transform:translateY(0)}}
.portfolio-footer .footer-email:focus-visible{border-color:#3455f5;color:#fff}
.portfolio-footer .footer-email:focus-visible::before{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.footer-leading-section::after{height:0!important}.portfolio-footer .footer-inner,.portfolio-footer .footer-meta{transform:none!important}.portfolio-footer .footer-email,.portfolio-footer .footer-email::before{transition:none!important}}
/* Keep the complete desktop footer below the sticky header at page end. */
@media(min-width:761px){
 body .portfolio-footer{display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:calc(100svh - 108px);padding:clamp(28px,4svh,48px) 5vw 24px}
 .portfolio-footer .footer-inner{width:100%}
 .portfolio-footer h2{font-size:clamp(48px,min(6vw,9svh),80px)}
 .portfolio-footer .footer-intro{font-size:14px;margin-top:16px;line-height:1.5}
 .portfolio-footer .footer-contact-line{margin:52px 0 48px}
 .portfolio-footer .footer-contact-circle{width:clamp(120px,19svh,170px);height:clamp(120px,19svh,170px);font-size:16px}
 .portfolio-footer .footer-email{min-height:56px;padding:16px 28px;font-size:15px}
 .portfolio-footer .footer-meta{width:100%;margin:0 auto;font-size:12px}
 .portfolio-footer .footer-meta>div{gap:10px}
}
@media(min-width:761px) and (max-height:700px){
 body .portfolio-footer{gap:20px;padding-top:24px;padding-bottom:20px}
 .portfolio-footer h2{font-size:clamp(44px,8svh,60px)}
 .portfolio-footer .footer-intro{margin-top:12px}
 .portfolio-footer .footer-contact-line{margin:36px 0 38px}
 .portfolio-footer .footer-contact-circle{width:110px;height:110px;font-size:14px}
 .portfolio-footer .footer-email{min-height:52px;padding:14px 24px}
}

body .portfolio-footer{border-top:0}
.portfolio-footer .footer-email::before{content:none}
.portfolio-footer .footer-email.cta-pill{background:transparent;transition:translate .85s cubic-bezier(.34,1.56,.64,1),border-color .3s}
.portfolio-footer .footer-email.cta-pill>.cta-circle-fill{position:absolute;left:-25%;top:100%;width:150%;height:200%;border-radius:50%;background:#3455f5;pointer-events:none;z-index:0;transform:translateY(0)}
.portfolio-footer .footer-email.is-magnet-active>.cta-circle-fill{animation:cta-pill-fill-in .45s cubic-bezier(.65,0,.25,1) forwards}
.portfolio-footer .footer-email.is-fill-leaving>.cta-circle-fill{animation:cta-pill-fill-out .45s cubic-bezier(.65,0,.25,1) forwards}
@keyframes cta-pill-fill-in{from{transform:translateY(0)}to{transform:translateY(-75%)}}
@keyframes cta-pill-fill-out{from{transform:translateY(-75%)}to{transform:translateY(-175%)}}
.portfolio-footer .footer-email:focus-visible>.cta-circle-fill{transform:translateY(-75%)}
@media(prefers-reduced-motion:reduce){.portfolio-footer .footer-email:hover>.cta-circle-fill{transform:translateY(-75%)}}