@view-transition{navigation:auto}
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
header{view-transition-name:site-header}
.project:first-child img,.campaign-film #play-film>img{view-transition-name:alexa-image}
body.menu-open .project:first-child img,body.menu-open .campaign-film #play-film>img{view-transition-name:none}
.work-menu[open] .menu-preview img{view-transition-name:alexa-image}
::view-transition-group(alexa-image){animation-duration:850ms;animation-timing-function:var(--motion-ease)}
::view-transition-old(alexa-image),::view-transition-new(alexa-image){height:100%;object-fit:cover;mix-blend-mode:normal}
::view-transition-old(root){animation:fade-away 250ms ease both}
::view-transition-new(root){animation:page-arrive 650ms var(--motion-ease) both}
::view-transition-group(site-header){animation-duration:650ms}
@keyframes fade-away{to{opacity:0}}
@keyframes page-arrive{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.work-toggle{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}.work-toggle:hover{color:#0285ff}
body.menu-open{overflow:hidden}.work-menu{position:fixed;inset:0;max-width:none;max-height:none;width:100%;height:100dvh;margin:0;padding:32px 4.3vw 26px;border:0;background:#0073de;color:#fff;overflow:auto}.work-menu::backdrop{background:#111}.work-menu[open]{display:flex;flex-direction:column;animation:menu-arrive 550ms var(--motion-ease) both}.menu-top,.menu-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:12px;letter-spacing:1px}.menu-close{border:1px solid #00457e;border-radius:40px;padding:12px 20px;background:none;font:inherit;font-size:14px;color:inherit;cursor:pointer}.menu-close span{font-size:22px;margin-left:20px}.work-menu a:focus-visible,.work-menu button:focus-visible{outline-color:#141810}.menu-layout{display:grid;grid-template-columns:1.25fr 1fr;gap:6vw;align-items:center;flex:1;padding:45px 0}.menu-kicker{display:block;font-size:14px;margin-bottom:24px}.menu-project{display:flex;gap:18px;align-items:baseline;border-top:1px solid #0068b7;padding:18px 0;letter-spacing:-.05em}.menu-project.featured{font-size:clamp(42px,5.8vw,92px);line-height:.98}.menu-number{font-size:12px;letter-spacing:0;flex-shrink:0}.menu-arrow{margin-left:auto;font-size:30px;transition:transform .3s}.menu-project:hover .menu-arrow{transform:translate(5px,-5px)}.menu-project.secondary{font-size:clamp(22px,2.6vw,38px)}.menu-all{display:flex;justify-content:space-between;border-top:1px solid #0068b7;padding-top:24px;font-size:16px}.menu-preview{display:block;transform:rotate(-3deg);transition:transform .5s var(--motion-ease)}.menu-preview:hover{transform:rotate(0)}.menu-preview img{display:block;width:100%;aspect-ratio:1.2;object-fit:cover}.menu-preview>span{display:block;font-size:12px;letter-spacing:.5px;margin-top:16px;line-height:1.5}.menu-bottom{border-top:1px solid #0068b7;padding-top:20px}.menu-project{animation:menu-link-in 650ms var(--motion-ease) both}.menu-project:nth-of-type(2){animation-delay:60ms}.menu-project:nth-of-type(3){animation-delay:120ms}@keyframes menu-arrive{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}@keyframes menu-link-in{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:none}}
.title-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}.title-line>span{display:block;animation:title-arrive 900ms var(--motion-ease) both}.title-line:nth-child(2)>span{animation-delay:110ms}@keyframes title-arrive{from{transform:translateY(110%)}to{transform:none}}
.case-back{position:fixed;bottom:24px;left:4.3vw;z-index:10;padding:14px 20px;border:1px solid #55584b;border-radius:30px;background:#111210ed;color:#f1f1e9;font-size:14px;backdrop-filter:blur(12px)}.case-back:hover{background:#0285ff;color:#111}.case-footer{padding-bottom:95px}.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .85s var(--motion-ease)}.reveal.is-visible{opacity:1;transform:none}.page-leaving{opacity:0;transition:opacity 220ms ease}
@media(max-width:700px){.work-menu{padding:22px 6vw}.menu-top{font-size:11px}.menu-layout{grid-template-columns:1fr;gap:30px;padding:32px 0}.menu-preview{display:none}.menu-project.featured{font-size:clamp(40px,10vw,70px)}.menu-project.secondary{font-size:27px}.menu-bottom span:last-child{display:none}.case-back{left:6vw;bottom:18px}.menu-kicker{margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}.work-menu[open],.menu-project,.title-line>span{animation:none}.reveal{opacity:1;transform:none}.menu-preview{transform:none}.page-leaving{opacity:1}}

.case-back{left:auto;right:4.3vw}@media(max-width:700px){.case-back{left:auto;right:6vw}.case-deck>span{margin-top:16px}}

.kiwi-page .campaign-film #play-film>img{view-transition-name:kiwi-image}.project:nth-child(4) img{view-transition-name:kiwi-image}::view-transition-group(kiwi-image){animation-duration:850ms;animation-timing-function:var(--motion-ease)}

@media(min-width:701px){.menu-preview{position:sticky;top:90px;align-self:start;margin-top:70px}}

/* Keep the active project expressive and its preview fully inside the viewport. */
.menu-project.featured,.menu-project.secondary{font-size:clamp(22px,2.6vw,38px);line-height:1.06;transition:font-size .22s ease;overflow-wrap:anywhere}
.menu-project.featured br{display:none}.menu-project.featured br::after{content:' '}
.menu-project.is-active{font-size:clamp(36px,4.7vw,72px)}
.menu-preview{width:100%;max-width:460px;justify-self:center;transform:rotate(-2deg)}
.menu-preview-frame{width:100%;aspect-ratio:16/10;overflow:hidden;background:transparent}
.menu-preview .menu-preview-frame img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border:0}
.menu-preview[data-project="/alexa.html"] img{transform:none}
.menu-preview>span{font-size:14px;line-height:1.5;margin-top:18px}
@media(min-width:701px){.menu-preview{top:90px;margin-top:35px;max-width:min(460px,calc((100dvh - 220px)*1.6))}}
@media(max-width:700px){.menu-project.is-active{font-size:clamp(32px,8vw,46px)}}
@media(prefers-reduced-motion:reduce){.menu-project{transition:none}}

/* Balanced menu: stationary, centered preview alongside the scrolling index. */
@media(min-width:701px){
 .menu-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5vw}
 .menu-preview,.menu-preview:hover{position:fixed;left:52.5vw;top:50dvh;transform:translateY(-50%);margin:0;width:min(43.2vw,calc((100dvh - 180px)*1.6));max-width:none;transition:none}
 .menu-preview-frame{aspect-ratio:16/10}
 .menu-preview>span{margin-top:20px;max-width:100%}
}

@media(min-width:701px){.menu-preview-frame{transform:rotate(-2deg);transform-origin:center}.menu-preview>span{margin-top:30px}}

/* Preserve the supplied Alexa still; gently deepen its contrast. */
img[src*="alexa-hero-hq.png"]{filter:contrast(1.06)}

.work-menu :focus-visible{outline-color:white}.work-menu .menu-project,.work-menu .menu-all,.work-menu .menu-bottom,.work-menu .menu-close{border-color:rgba(255,255,255,.45)}