.cases-page{background:#f1f1ed;color:#0a0a0a;cursor:auto}.case-loader{position:fixed;inset:0;background:#0a0a0a;color:#fff;z-index:999;display:grid;place-items:center;clip-path:inset(0);transition:clip-path .9s cubic-bezier(.8,0,.2,1)}.case-loader.done{clip-path:inset(0 0 100%)}.case-loader b{position:relative;left:calc((100vw - 100%)/2);display:inline-block;max-width:50vw;font-size:clamp(4rem,7.4vw,14rem);font-weight:900;letter-spacing:-.075em;white-space:nowrap;transition:transform .7s cubic-bezier(.22,.75,.2,1),filter .7s cubic-bezier(.22,.75,.2,1);will-change:transform,filter}.case-loader b:hover{transform:scale(1.05);filter:brightness(.7)}.case-loader small{position:absolute;left:5vw;bottom:9vh;font-size:11px;font-weight:700;letter-spacing:.2em;color:#fff}.case-loader small em{font-style:normal}.case-loader>span{position:absolute;left:5vw;right:calc(5vw - (100vw - 100%));bottom:7vh;height:1px;background:#333;overflow:hidden}.case-loader>span i{display:block;width:100%;height:100%;background:#fd600f;transform-origin:left;animation:loadbar .8s ease both}@keyframes loadbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}.case-nav{height:88px;padding:0 2vw;display:grid;grid-template-columns:1fr auto auto;gap:4vw;align-items:center;border-bottom:1px solid;position:relative;z-index:2}.case-nav>a{font-size:12px}.case-nav .brand{font-size:20px}.case-hero{min-height:78vh;padding:6vw 2vw 4vw;display:grid;grid-template-columns:1.5fr 1fr;align-items:end;border-bottom:1px solid}.case-hero h1{font-size:clamp(8rem,21vw,22rem);line-height:.62;letter-spacing:-.12em;margin:4vw 0 0}.case-hero p{font-size:clamp(1.4rem,2.7vw,3.2rem);line-height:1.12;max-width:620px}.filters{padding:1.5vw 2vw;display:flex;gap:9px;position:sticky;top:0;z-index:20;background:rgba(241,241,237,.9);backdrop-filter:blur(15px);border-bottom:1px solid}.filters button{border:1px solid;background:transparent;border-radius:999px;padding:9px 15px;font-size:12px}.filters button.active,.filters button:hover{background:#0a0a0a;color:white}.case-groups{padding:0 2vw}.case-group{padding:6vw 0 9vw;border-top:0}.case-group.hide{display:none}.case-group header{display:grid;grid-template-columns:1fr 1fr 2fr auto;gap:1vw;align-items:start;margin-bottom:5vw;font-size:11px}.case-group header h2{font-size:inherit;margin:0}.case-group header span{text-align:center}.case-group header em{font-style:normal}.case-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5vw .7vw}.case-grid article{min-width:0}.case-grid img{width:100%;height:28vw;max-height:510px;object-fit:cover;filter:saturate(.82);transition:transform .6s,filter .4s}.case-grid article:hover img{transform:scale(.985);filter:saturate(1)}.case-grid span{display:block;margin-top:10px;font-size:10px}.case-grid h3{font-size:13px;line-height:1.25;margin:5px 0;font-weight:500}.case-grid article:nth-child(even) img{height:16vw;max-height:290px}.case-footer{min-height:90vh}.case-footer a{font-size:clamp(1.4rem,3vw,3rem);border-bottom:2px solid}@media(max-width:800px){.case-nav{height:68px}.case-hero{grid-template-columns:1fr;min-height:72vh;padding-top:16vw}.case-hero h1{font-size:36vw}.filters{overflow:auto;padding:12px}.filters button{flex:none}.case-groups{padding:0 12px}.case-group{padding:14vw 0 20vw}.case-group header{grid-template-columns:1fr 1fr;gap:7px;margin-bottom:10vw}.case-group header span{text-align:left}.case-group header em{text-align:right}.case-grid{grid-template-columns:1fr 1fr;gap:12vw 8px}.case-grid img,.case-grid article:nth-child(even) img{height:58vw}.case-footer{min-height:80vh}}
.case-nav{position:fixed;top:0;left:0;right:0;z-index:100;height:88px;padding-top:8px;box-sizing:border-box;border-bottom:0;background:rgba(241,241,237,.94);backdrop-filter:blur(15px)}
.case-nav .filters{min-width:0;padding:0;position:static;overflow:auto;background:transparent;backdrop-filter:none;border-bottom:0}
.case-hero{padding-top:calc(6vw + 88px);border-bottom:0}
@media(max-width:800px){.case-nav{height:68px;padding-top:5px;gap:12px}.case-nav .filters{padding:0}.case-hero{padding-top:calc(16vw + 68px)}}
.case-hero{position:relative;padding-bottom:250px}
.case-nav{transition:background-color .3s ease,color .3s ease}
.case-nav.contact-mode{background:#fd600f;color:#0a0a0a;backdrop-filter:none}
.case-nav.contact-mode .filters button{border-color:#0a0a0a;color:#0a0a0a}
.case-nav.contact-mode .filters button.active,.case-nav.contact-mode .filters button:hover{background:#0a0a0a;color:#fff}

/* Homepage navigation language reused for the portfolio filters. */
.case-nav .filters {
  gap: clamp(22px, 3.2vw, 62px);
  scrollbar-width: none;
}
.case-nav .filters::-webkit-scrollbar { display: none; }
.case-nav .filters button,
.case-nav > a {
  position: relative;
  flex: none;
  border: 0;
  border-radius: 0;
  padding: 12px 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.case-nav > a {
  transform: translateY(-1px);
}
.case-nav .filters button::after,
.case-nav > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 5px;
  height: 1px;
  background: currentColor;
  transition: right .35s ease;
}
.case-nav .filters button:hover::after,
.case-nav .filters button:focus-visible::after,
.case-nav .filters button.active::after,
.case-nav > a:hover::after,
.case-nav > a:focus-visible::after {
  right: 0;
}
.case-nav .filters button.active,
.case-nav .filters button:hover,
.case-nav .filters button:focus-visible,
.case-nav.contact-mode .filters button,
.case-nav.contact-mode .filters button.active,
.case-nav.contact-mode .filters button:hover,
.case-nav.contact-mode .filters button:focus-visible {
  border: 0;
  background: transparent;
  color: inherit;
}
.case-nav .filters sup {
  margin-left: 5px;
  color: #aaa;
  font-size: 10px;
  font-weight: 600;
  line-height: 0;
  vertical-align: super;
}
.case-nav.contact-mode .filters sup {
  color: #0a0a0a;
}
.case-nav.contact-mode .filters button.active::after { right: 100%; }

@media(max-width:800px){
  .case-nav { grid-template-columns:minmax(0,1fr) auto auto; }
  .case-nav .filters { gap:24px; }
}