.residents-showcase{--intro-progress:0;position:relative;height:calc(235svh + 100px);margin-top:0;background:#d2d1ce;color:#fff}
.residents-showcase::before{content:"";position:absolute;z-index:9;left:0;right:0;top:-150px;height:150px;pointer-events:none;background:linear-gradient(180deg,rgba(217,216,213,0) 0%,rgba(217,216,213,.18) 24%,rgba(217,216,213,.62) 62%,#d9d8d5 100%);opacity:calc(1 - var(--intro-progress))}
.residents-showcase>.accordion[hidden]{display:none!important}
.residents-pin{position:sticky;top:0;height:100svh;min-height:680px;overflow:hidden;background:#bd0507;color:#fff;isolation:isolate}
.residents-pin::before{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;background:linear-gradient(180deg,#d9d8d5 0,#d3d2cf 120px,#cecdca 48%,#cac9c6 100%);opacity:calc(1 - var(--intro-progress));will-change:opacity}
.residents-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-3}
.residents-overlay{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(91,0,2,.38) 0%,rgba(134,0,2,.1) 42%,rgba(84,0,1,.03) 73%),linear-gradient(0deg,rgba(74,0,1,.16),transparent 46%)}
.residents-heading{position:absolute;z-index:3;left:4.2vw;right:3.4vw;top:12.5vh;display:flex;align-items:flex-start;justify-content:space-between}
.residents-heading h2{margin:0;font-size:clamp(38px,calc(5vw - 14px),78px);line-height:.9;letter-spacing:-.055em;color:#fff}
.residents-heading p{margin:0;text-align:right;font-size:clamp(15px,1.25vw,22px);font-weight:700;line-height:.9;letter-spacing:-.025em;color:#fff}
.residents-list{position:absolute;z-index:5;left:4.2vw;top:calc(29vh - 15px);display:grid;gap:17px;font-size:clamp(15px,calc(1.25vw - 1px),19px);line-height:1.05}
.residents-list button{width:max-content;margin:0;padding:0;border:0;background:transparent;color:rgba(255,255,255,.38);font:inherit;text-align:left}
.residents-list button:hover{color:rgba(255,255,255,.72);transform:translateX(7px)}
.residents-list button[aria-selected=true]{color:#fff;font-weight:500}
.residents-character{position:absolute;z-index:1;right:8vw;bottom:-8vh;height:107.8%;width:auto;max-width:83.6vw;object-fit:contain;object-position:right bottom;pointer-events:none;user-select:none;transition:opacity .32s ease,transform .55s cubic-bezier(.22,.8,.22,1)}
.residents-showcase.is-switching .residents-character{opacity:.18;transform:translateX(18px)}
.residents-gallery{position:absolute;z-index:4;left:0;right:0;bottom:30px;height:38.5vh;min-height:275px;display:flex;align-items:flex-start;gap:3px;overflow:hidden}
.residents-shot{position:relative;flex:1 1 0;height:43%;min-width:0;margin:0;padding:0;border:0;background:#4b0b0b;overflow:hidden;will-change:flex-grow,height;transition:flex-grow 1.35s cubic-bezier(.65,0,.2,1),height 1.35s cubic-bezier(.65,0,.2,1);cursor:pointer}
.residents-shot.is-active{flex-grow:1.85;height:100%}
.residents-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.84;transform:scale(1.045);will-change:transform,opacity;transition:transform 1.55s cubic-bezier(.65,0,.2,1),opacity 1.1s ease;filter:saturate(.92) contrast(1.03)}
.residents-shot.is-active img{opacity:1;transform:scale(1)}
.residents-shot:focus-visible{outline:3px solid #fff;outline-offset:-6px}
@media (prefers-reduced-motion:reduce){.residents-shot,.residents-shot img{transition:none}}
@media (prefers-reduced-motion:reduce){.residents-showcase{--intro-progress:1!important;height:calc(200svh + 100px)}.residents-showcase::before,.residents-pin::before{display:none}}