/* A paired gallery on desktop, with each project keeping its own clear space. */
.work-section .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:76px 38px;max-width:1280px;margin:64px auto 0}
.work-section .project{grid-column:auto}
.work-section .project-link{display:flex;flex-direction:column;border-radius:0}
.work-section .project-visual{order:-1;aspect-ratio:1.67;padding:0;background:transparent;border:0;border-radius:var(--project-image-radius);clip-path:inset(0 round var(--project-image-radius));isolation:isolate;overflow:hidden;transition:none}
.work-section .browser-frame{position:relative;inset:auto;width:100%;height:100%;border:0;border-radius:inherit;overflow:hidden;background:transparent;box-shadow:none;transform:none;transition:none}
.work-section .browser-frame>img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transform:scale(1);transition:transform .8s cubic-bezier(.2,.65,.2,1)}
.work-section .project-drone .browser-frame>img{object-position:center 57%}
.work-section .project-link:is(:hover,:focus-visible) .browser-frame{transform:none;box-shadow:none}
.work-section .project-link:is(:hover,:focus-visible) .browser-frame>img{transform:scale(1.012)}
.work-section .project-caption{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:15px 20px;align-items:center;margin:0;padding-top:28px;border:0}
.work-section .project-heading{grid-column:1;grid-row:1}
.work-section .project h3{font-size:clamp(28px,2.7vw,38px);margin-top:0;transition:color .3s ease}
.work-section .project-link:focus-visible h3{color:var(--blue)}
.work-section .project p{grid-column:1;grid-row:2;max-width:38ch;padding:0;font-size:15px;line-height:1.6}
.work-section .project-cta{grid-column:2;grid-row:1/span 2;gap:12px;padding:0}
.work-section .project-open{width:48px;height:48px;border-color:var(--brand-line)}
.work-section .project-meta{font-size:10px;letter-spacing:.075em}
.about-copy .services{margin-top:34px}
.about-copy .services>div{padding-block:26px;grid-template-columns:minmax(0,1fr);row-gap:12px}
.about-copy .services p{grid-column:1;font-size:14px;line-height:1.65;max-width:40ch}
.contact-intro{justify-content:flex-end}
.contact-arrow{transition:background .35s ease,color .35s ease,border-color .35s ease}
.contact-arrow:hover{transform:none}
.contact-arrow .icon{transition:transform .45s cubic-bezier(.22,1,.36,1)}
.contact-arrow:is(:hover,:focus-visible){background:var(--blue);border-color:var(--blue);color:var(--paper)}
.contact-arrow:is(:hover,:focus-visible) .icon{transform:translate(3px,3px)}
.project-dialog .dialog-top .close-dialog{border-radius:50%;transition:background .25s ease,color .25s ease}
.project-dialog .dialog-top .close-dialog:is(:hover,:focus-visible){background:var(--lilac);color:var(--blue)}
.project-dialog .dialog-top .close-dialog:focus-visible{outline-offset:3px}
.project p,.about-copy>p,.services p,.case-chapter__copy p,.case-slide figcaption p{text-wrap:pretty}
/* Small, consistent reactions keep navigation feeling as calm as the layout. */
.pill-button{transition:background .4s ease,color .4s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.pill-button .button-icon{transition:background .4s ease,color .4s ease}
.pill-button .button-icon .icon{transition:transform .45s cubic-bezier(.22,1,.36,1)}
.pill-button:hover .button-icon{transform:none}
.pill-button[href="#werk"]:is(:hover,:focus-visible) .icon{transform:translateY(3px)}
.contact-form .pill-button:is(:hover,:focus-visible) .icon{transform:translate(2px,-2px)}
.pill-button:active{transform:scale(.985)}
.work-section .project-open{transition:background .4s ease,color .4s ease,border-color .4s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.work-section .project-link:active .project-open{transform:scale(.94)}
.form-field:after{background:var(--blue)}
.case-back{color:var(--muted);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--brand-line)}
.case-back:hover{color:var(--blue)}
.project-dialog[open]{animation:case-arrive .42s cubic-bezier(.2,.65,.2,1) both}
@keyframes case-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

@media(hover:hover) and (pointer:fine){
 .work-section .project-link:hover h3{color:var(--blue)}
}

@media(max-width:1000px){
 .work-section .project-grid{column-gap:26px;row-gap:64px}
 .work-section .project-cta>span:first-child{display:none}
 .work-section .project-caption{grid-template-columns:minmax(0,1fr) auto;gap:12px 20px}
 .work-section .project p{grid-column:1;grid-row:2;max-width:42ch}
 .work-section .project-cta{grid-column:2;grid-row:1/span 2}
}
@media(max-width:760px){
 .work-section .project-grid{grid-template-columns:minmax(0,1fr);gap:60px;margin-top:38px}
 .work-section .project-visual{aspect-ratio:auto}
 .work-section .browser-frame,.work-section .browser-frame>img{height:auto}
 .work-section .project-caption{padding-top:24px;gap:15px 12px}
 .work-section .project h3{font-size:clamp(27px,7.7vw,38px);line-height:1.18}
 .work-section .project p{font-size:14px;max-width:30ch}
 .work-section .project-cta{align-self:start;margin-top:8px}
 .work-section .project-cta>span:first-child{display:none}
 .work-section .project-open{width:44px;height:44px}
 .work-section .project-meta{font-size:10px;letter-spacing:.05em;line-height:1.5}
 .menu-content{justify-content:center;padding-block:20px 44px}
 .menu-links{text-align:center}
 .menu-links a{width:100%;padding:12px 0;text-align:center;transform-origin:center;transition:color .25s ease}
 .menu-links a:hover{padding-left:0;color:var(--blue)}
 .menu-signature{padding-bottom:14px}
 .js-motion .mobile-nav:not([hidden]){animation:menu-surface-in .32s ease both}
 .js-motion .mobile-nav:not([hidden]) .menu-links a{animation:menu-word-in .65s cubic-bezier(.16,1,.3,1) both}
 .js-motion .mobile-nav:not([hidden]) .menu-links a:nth-child(2){animation-delay:.065s}
 .js-motion .mobile-nav:not([hidden]) .menu-links a:nth-child(3){animation-delay:.13s}
 .js-motion .mobile-nav:not([hidden]) .menu-signature{animation:menu-character-in .7s .12s cubic-bezier(.16,1,.3,1) both}
 .js-motion .mobile-nav.is-closing:not([hidden]){animation:menu-out .24s ease both}
 .js-motion .mobile-nav.is-closing .menu-links a,.js-motion .mobile-nav.is-closing .menu-signature{animation:none}
}
@keyframes menu-surface-in{from{opacity:0}to{opacity:1}}
@keyframes menu-word-in{from{opacity:0;transform:translateY(23px) scale(.97);filter:blur(3px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes menu-character-in{from{opacity:0;transform:translateY(15px) rotate(-9deg) scale(.88)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@media(hover:none){
 .contact-arrow:hover:not(:focus-visible){background:transparent;color:var(--blue);border-color:#b9bddc}
 .contact-arrow:hover:not(:focus-visible) .icon{transform:none}
 .work-section .project-link:hover:not(:focus-visible) .browser-frame>img{transform:none}
 .work-section .project-link:hover:not(:focus-visible) .project-open{background:transparent;color:var(--blue);border-color:var(--brand-line)}
 .work-section .project-link:hover:not(:focus-visible) .project-open .icon{transform:none}
 .pill-button:hover:not(:focus-visible){background:var(--blue);color:var(--paper)}
 .pill-button:hover:not(:focus-visible) .button-icon{background:var(--paper);color:var(--blue)}
 .pill-button:hover:not(:focus-visible) .button-icon .icon{transform:none}
}
@media(max-width:760px) and (max-height:700px){
 .menu-content{padding-block:8px 22px}
 .menu-links a{padding-block:9px}
 .menu-signature{padding-bottom:0}
}
@media(prefers-reduced-motion:reduce){
 .work-section .project h3,.contact-arrow,.contact-arrow .icon,.project-dialog .dialog-top .close-dialog{transition:none}
 .contact-arrow:is(:hover,:focus-visible) .icon{transform:none}
 .work-section .browser-frame>img{transition:none!important;transform:none!important}
 .pill-button,.pill-button .button-icon,.pill-button .button-icon .icon,.work-section .project-open{transition:none!important}
 .pill-button:active,.pill-button .button-icon .icon,.work-section .project-link:active .project-open{transform:none!important}
 .project-dialog[open]{animation:none}
 .mobile-nav,.menu-links a,.menu-signature{animation:none!important;filter:none!important;transform:none!important}
}