/* Quiet navigation and interaction details in the established navy palette. */
.header .menu{display:none;align-items:center;justify-content:center;gap:7px}
.menu-icon{display:inline-block;width:12px;height:8px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;flex:none;transition:transform .18s}
.header .menu[aria-expanded="true"] .menu-icon{transform:rotate(90deg)}
.header nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:2px}
html body .kicker{font-size:12px;letter-spacing:.15em;line-height:1.6}
html body .detail-stats small,html body .case-client>span,html body .related-case-copy>span{font-size:12px;letter-spacing:.09em;line-height:1.6}
.next-project{padding:0 6% 64px}
.next-project>a{display:grid;grid-template-columns:minmax(180px,35%) 1fr;overflow:hidden;background:linear-gradient(115deg,#071019,#10202c 65%,#0b1822);border:1px solid #ffffff28;text-decoration:none;transition:border-color .2s,background-color .2s}
.next-project img{width:100%;height:100%;max-height:250px;object-fit:cover;aspect-ratio:16/9}
.next-project a>div{padding:28px 32px;position:relative;align-self:center}
.next-project span{font-size:12px;letter-spacing:.12em;font-weight:600}
.next-project h2{font-size:clamp(22px,3vw,36px);line-height:1.15;margin:14px 30px 0 0}
.next-project b{position:absolute;right:24px;bottom:28px;font-size:26px;transition:transform .2s}
a:focus-visible,button:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(hover:hover) and (pointer:fine){
 .next-project>a:hover,.related-case:hover{border-color:#aebfcc}
 .next-project a:hover b{transform:translateX(5px)}
 .work-project,.card,.skill-card,.btn{transition:filter .18s,border-color .18s,transform .18s}
 .work-project:hover,.card:hover,.skill-card:hover{filter:brightness(1.08)}
 .btn:hover{transform:translateY(-2px)}
 .header nav a:hover{text-decoration:underline;text-underline-offset:7px}
}
.btn:active,.work-project:active,.related-case:active,.next-project>a:active,.work-filter button:active{filter:brightness(.8);transform:translateY(1px)}
@media(max-width:650px){
 .header .menu{display:flex;padding:8px 3px;min-width:60px;gap:5px}
 .header nav.open a[aria-current="page"]{background:#ffffff0d;border-left:2px solid #fff;padding-left:18px}
 html body .work-filter{display:block;padding-left:6%;padding-right:6%}
 html body .work-filter-buttons{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:4px 0 10px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#597080 #0a141d;max-width:100%;overscroll-behavior-x:contain}
 html body .work-filter-buttons button{flex:0 0 auto;white-space:nowrap;min-height:44px;padding:11px 15px;font-size:11px;letter-spacing:.06em;scroll-snap-align:start}
 .work-filter-status{display:block;margin-top:8px;font-size:12px}
 html body .work-project .kicker{font-size:11px;letter-spacing:.08em}
 .next-project{padding:0 6% 44px}
 .next-project>a{grid-template-columns:1fr}
 .next-project img{max-height:none;aspect-ratio:16/9}
 .next-project a>div{padding:24px}
}
@media(prefers-reduced-motion:reduce){.next-project b,.btn,.card,.work-project,.skill-card,.menu-icon{transition:none!important;transform:none!important}}
/* Reserve room for the menu icon and label instead of crowding the logo. */
@media(max-width:650px){
 html body .header{grid-template-columns:minmax(0,1fr) 62px 64px;gap:12px;padding-left:14px;padding-right:14px}
 html body .header a.brand.ab-logo-lockup{max-width:100%;width:100%!important;min-width:0}
 html body .header .menu{width:62px;min-width:62px;gap:6px;font-size:10px;letter-spacing:.08em;padding:0}
 html body .header .language-switch{padding-left:6px;gap:0}
 html body .header .language-switch a{min-width:27px}
}

/* Preserve the approved width; let the image define an uncropped 16:9 height. */
html body .next-project img{display:block;height:auto;max-height:none;width:100%;aspect-ratio:16/9;object-fit:cover}
/* Buttons stay fixed in place on hover, focus and press. */
html body .btn,html body .btn:hover,html body .btn:focus-visible,html body .btn:active,html body button,html body button:hover,html body button:active{transform:none!important;translate:none!important}
@media(hover:hover) and (pointer:fine){
 html body .btn:hover,html body button:hover{box-shadow:0 0 8px #d8ecff66,0 0 22px #91bde54d!important;border-color:#fff!important}
}
html body .btn:focus-visible,html body button:focus-visible{box-shadow:0 0 8px #d8ecff66,0 0 22px #91bde54d!important}