.work-index{display:none}
.case-cover{transition:filter .5s var(--motion-ease)}
.case-cover .moon-product{transition:transform 1s var(--motion-ease)}
.case-cover:hover .moon-product{transform:scale(1.045) translateY(-2%)}
.case-details-link,.brief-link,.dialog-website{position:relative;border-bottom-color:transparent}
.case-details-link:after,.brief-link:after,.dialog-website:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(.35);transform-origin:left;opacity:.55;transition:transform .65s var(--motion-ease),opacity .4s}
.case-details-link:hover:after,.brief-link:hover:after,.dialog-website:hover:after{transform:scaleX(1);opacity:1}
.button span,.contact-button span,.header-contact span{display:inline-block;transition:transform .6s var(--motion-ease)}
.button:hover span,.contact-button:hover span,.header-contact:hover span{transform:translate(3px,-3px)}
.hero-project-index a strong{transition:color .35s}.hero-project-index a:hover strong{color:var(--accent)}
.filters button{position:relative;border:0!important}
.filters button:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--motion-ease)}
.filters button.active:after{transform:scaleX(1)}
dialog[open]{animation:dialog-reveal .55s var(--motion-ease)}
dialog[open]::backdrop{animation:backdrop-enter .4s ease both}
dialog.dialog-closing{animation:dialog-dismiss 180ms ease-in both}
dialog.dialog-closing::backdrop{animation:backdrop-exit 180ms ease-in both}
.dialog-brand,.dialog-subtitle,.dialog-description,dialog dl{animation:soft-enter .7s 80ms var(--motion-ease) both}
.close-dialog{transition:transform .5s var(--motion-ease)}.close-dialog:hover{transform:rotate(90deg)}
@keyframes headline-enter{from{transform:translateY(115%)}to{transform:translateY(0)}}
@keyframes soft-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes panel-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes dialog-reveal{from{opacity:0;clip-path:inset(7% 0 30% 0);transform:translateY(20px)}to{opacity:1;clip-path:inset(0);transform:none}}
@keyframes dialog-dismiss{to{opacity:0;transform:translateY(12px)}}
@keyframes backdrop-enter{from{background-color:#2e251e00;backdrop-filter:blur(0)}to{background-color:#2e251e66;backdrop-filter:blur(5px)}}
@keyframes backdrop-exit{to{background-color:#2e251e00;backdrop-filter:blur(0)}}
@keyframes project-reveal{from{opacity:0;clip-path:inset(0 0 14% 0);transform:translateY(10px)}to{opacity:1;clip-path:inset(0);transform:none}}
@keyframes index-marquee{to{transform:translateX(-100%)}}
@media(min-width:761px){
 .work-enhanced .work-explorer{display:grid;grid-template-columns:minmax(0,.93fr) minmax(0,1fr);gap:7%;align-items:start;min-height:520px}
 .work-enhanced .work-index{display:block;position:static;min-width:0}
 .index-label{font-size:8px;letter-spacing:1.2px;color:#93869d;margin:0 0 25px}
 .work-index-row{position:relative;width:100%;display:flex;align-items:center;gap:16px;text-align:left;min-height:103px;padding:20px 7px;border-top:1px solid var(--line);isolation:isolate;overflow:hidden}
 .work-index-row:last-child{border-bottom:1px solid var(--line)}
 .index-number{font-size:9px;color:#a08aac;align-self:flex-start;margin-top:9px;min-width:16px;position:relative;z-index:2}
 .index-main{display:flex;flex:1;flex-direction:column;gap:10px;min-width:0;position:relative;z-index:2}
 .index-name{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(25px,3.2vw,48px);letter-spacing:-1.3px;line-height:1}
 .index-role{font-size:9px;color:#918398;line-height:1.6}
 .index-arrow{font-size:23px;font-weight:400;align-self:center;color:var(--accent);position:relative;z-index:2;transition:transform .65s var(--motion-ease)}
 .work-index-row.is-current .index-arrow{transform:rotate(45deg)}
 .work-index-row.is-current:after{content:'';position:absolute;bottom:0;left:0;height:1px;width:100%;background:var(--accent);animation:index-line .7s var(--motion-ease) both}
 .index-hint{margin:23px 0 0;font-size:9px;color:#9989a4;line-height:1.8}
 .index-marquee{position:absolute;inset:0;display:flex;align-items:center;overflow:hidden;background:var(--purple-soft);color:var(--ink);opacity:0;transition:opacity .22s ease;pointer-events:none;z-index:3}
 .index-marquee>span{display:flex;flex-shrink:0;align-items:center;animation:index-marquee 22s linear infinite;animation-play-state:paused}
 .index-marquee>span>span{font-family:Georgia,serif;font-size:clamp(30px,3.8vw,53px);letter-spacing:-1px;display:flex;align-items:center;gap:22px;padding-right:22px;white-space:nowrap}
 .index-marquee i{font-family:Arial,sans-serif;font-style:normal;font-size:26px;color:var(--accent)}
 .work-index-row.is-current:hover .index-marquee,.work-index-row.is-current:focus-visible .index-marquee{opacity:1}
 .work-index-row.is-current:hover .index-marquee>span,.work-index-row.is-current:focus-visible .index-marquee>span{animation-play-state:running}
 .work-enhanced .project-grid{display:block;min-width:0;position:sticky;top:115px}
 .work-enhanced .project-grid>.project{opacity:1!important;transform:none!important;transition:none!important}
 .work-enhanced .project-grid>.project.preview-hidden{display:none!important}
 .work-enhanced .project-grid>.project.preview-active{animation:project-reveal .7s var(--motion-ease) both}
 .work-enhanced .case-cover{aspect-ratio:1.22;padding:26px;filter:none}
 .work-enhanced .cover-heading{left:26px;right:26px;top:24px}
 .work-enhanced .cover-caption{left:26px;right:26px;bottom:24px}
 .work-enhanced .dola-cover-title,.work-enhanced .moss-cover-title{left:26px;font-size:clamp(25px,2.6vw,40px);top:36%;line-height:1.6}
 .work-enhanced .voice-cover-title{left:26px;top:38%;font-size:clamp(30px,3.8vw,56px);letter-spacing:-1.4px}
 .work-enhanced .voice-cover-title>span{font-size:12px;margin-top:15px}
 .work-enhanced .moon-product{width:94%;right:-6%;top:-1%}
 .work-enhanced .case-heading{margin-top:24px}
 .work-enhanced .case-heading h3{font-size:26px}
 .work-enhanced .project h4{font-size:13px;line-height:1.9}
 .work-enhanced .case-summary{font-size:12px;line-height:1.95}
 .work-enhanced .case-details-link{font-size:10px;margin-top:14px}
 .work-enhanced .additional-heading{margin-top:55px}
 .work-enhanced .project:focus-within{outline:none}
 html[data-language="en"] .work-enhanced .dola-cover-title,html[data-language="en"] .work-enhanced .moss-cover-title{font-size:clamp(25px,2.5vw,38px);line-height:1.3}
 html[data-language="en"] .index-role{font-size:9px}
}
@keyframes index-line{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}
@media(min-width:761px) and (max-width:1000px){
 .work-enhanced .work-explorer{gap:5%;grid-template-columns:minmax(0,.95fr) minmax(0,1fr)}
 .work-index-row{min-height:95px;gap:9px;padding-left:0;padding-right:0}
 .index-role{font-size:8px}.index-label{font-size:7px;letter-spacing:.6px}.index-name{font-size:30px}
 .work-enhanced .cover-heading{left:22px;right:22px}.work-enhanced .cover-heading>span:first-child{font-size:6px}
 .work-enhanced .case-cover{aspect-ratio:1.1}
 .work-enhanced .dola-cover-title,.work-enhanced .moss-cover-title,.work-enhanced .voice-cover-title{left:22px;font-size:27px}
 .work-enhanced .voice-cover-title>span{font-size:9px}.work-enhanced .cover-caption{left:22px;right:22px;font-size:7px}
 .work-enhanced .case-summary{font-size:11px}.work-enhanced .case-heading h3{font-size:23px}
 .work-enhanced .project h4{font-size:11px}.work-enhanced .case-heading>span{font-size:8px}
}
@media(max-width:760px){.js-motion .project.reveal .case-cover{clip-path:inset(0 0 14% 0);transition:clip-path 1s var(--motion-ease)}.js-motion .project.reveal.visible .case-cover{clip-path:inset(0)}.headline-line b{padding-right:.06em}}
@media(prefers-reduced-motion:reduce){
 .motion-ready .section-heading h2,.motion-ready .value-panel,.js-motion .reveal,.js-motion .project.reveal .case-cover{opacity:1!important;clip-path:none!important;transform:none!important}
 .index-marquee{display:none!important}.headline-line b{transform:none!important}.case-cover:hover .moon-product{transform:none}
 dialog::backdrop{animation:none!important}
}
@media print{.work-index{display:none!important}.work-enhanced .work-explorer,.work-enhanced .project-grid{display:block!important}.work-enhanced .project-grid>.project.preview-hidden{display:block!important}.project{margin-bottom:28px}.motion-ready .section-heading h2{clip-path:none!important;transform:none!important}}
