@font-face{font-family:HeliosExt;src:url("../../../assets/fonts/HeliosExt-Regular.otf") format("opentype");font-weight:400}
@font-face{font-family:InterLocal;src:url("../../../assets/fonts/Inter-Regular.ttf") format("truetype");font-weight:400}
@font-face{font-family:InterLocal;src:url("../../../assets/fonts/Inter-SemiBold.ttf") format("truetype");font-weight:600 800}

:root{--ink:#101010;--paper:#f8f7f5;--dark:#101010;--line:rgba(255,255,255,.3);--pad:54px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--dark);color:#fff;font-family:InterLocal,Arial,sans-serif;font-weight:600}h1,h2,p{margin:0}a{color:inherit}button{font:inherit}

.cases-gallery{min-height:100svh;padding:160px var(--pad) 56px;background:#101010}
.cases-topline{display:flex;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.04em}
.cases-gallery h1{margin:clamp(32px,4vw,66px) 0 clamp(30px,3.5vw,58px);font:400 clamp(62px,8.4vw,160px)/.78 HeliosExt,Arial,sans-serif;letter-spacing:-.075em}
.case-viewport{position:relative;width:min(100%,1420px);height:min(48vw,640px);min-height:420px;margin:0 auto;overflow:hidden}
.case-slide{position:absolute;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateX(6%);transition:opacity .32s ease,transform .42s cubic-bezier(.16,1,.3,1)}
.case-slide.is-active{z-index:1;opacity:1;pointer-events:auto;transform:translateX(0)}
.case-card{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:#292929;color:#fff;text-decoration:none}
.case-card::after{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,16,16,.08),rgba(16,16,16,.12) 46%,rgba(16,16,16,.76));content:""}
.case-card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.case-card:hover img{transform:scale(1.025)}
.case-overlay{position:absolute;z-index:1;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(24px,2.2vw,38px)}
.case-number{font-size:12px;letter-spacing:.04em}.case-overlay h2{font:400 clamp(52px,5.7vw,108px)/.78 HeliosExt,Arial,sans-serif;letter-spacing:-.075em}.case-overlay div p{margin-top:18px;font-size:clamp(15px,1.2vw,20px);letter-spacing:-.03em}
.gallery-controls{display:grid;grid-template-columns:72px minmax(0,1fr) 72px;align-items:center;gap:22px;width:min(100%,1420px);margin:clamp(28px,3.2vw,52px) auto 0}
.gallery-button{display:grid;place-items:center;width:54px;height:54px;border:1px solid var(--line);border-radius:50%;background:transparent;color:#fff;cursor:pointer;font-size:28px;line-height:1;transition:background-color .2s ease,color .2s ease}.gallery-button:last-child{justify-self:end}.gallery-button:hover{background:#fff;color:var(--ink)}
.gallery-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gallery-tabs button{min-height:54px;padding:0;border:0;background:transparent;color:rgba(255,255,255,.52);cursor:pointer;font-size:13px;font-weight:600;letter-spacing:.02em;text-align:center;transition:color .2s ease}.gallery-tabs button.is-active{color:#fff}.gallery-tabs button:hover{color:#fff}
.gallery-button:focus-visible,.gallery-tabs button:focus-visible,.case-card:focus-visible{outline:2px solid #fff;outline-offset:4px}
.courage-footer-meta a{color:#fff;text-decoration:none}.courage-footer-meta a:hover{text-decoration:underline;text-underline-offset:4px}

@media(max-width:900px){
  .cases-gallery{min-height:0;padding:128px 20px 56px}.cases-topline{font-size:10px}.cases-gallery h1{margin:36px 0 34px;font-size:clamp(58px,18vw,96px)}
  .case-viewport{height:auto;min-height:0;aspect-ratio:1.15/1}.case-overlay{padding:22px}.case-overlay h2{font-size:clamp(42px,13vw,70px)}.case-overlay div p{margin-top:14px;font-size:15px}
  .gallery-controls{grid-template-columns:48px minmax(0,1fr) 48px;gap:8px;margin-top:22px}.gallery-button{width:44px;height:44px;font-size:23px}.gallery-tabs button{min-height:48px;padding:0 6px;font-size:9px;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){.case-slide,.case-card img{transition:none}}

/* Archive view: a calm vertical sequence, one horizontal project at a time. */
body{background:#101010;color:#fff}
.site-header{background:#101010!important}
.cases-gallery{min-height:0;padding:clamp(164px,13vw,230px) var(--pad) clamp(144px,15vw,270px);background:#101010}
.case-viewport{display:flex;flex-direction:column;align-items:center;gap:clamp(108px,12vw,198px);width:100%;height:auto;min-height:0;margin:0;overflow:visible}
.case-slide,.case-slide.is-active{position:static;display:block;width:min(100%,988px);height:auto;opacity:1;pointer-events:auto;transform:none}
.case-card{display:flex;flex-direction:column;width:100%;height:auto;overflow:visible;background:transparent;color:#fff}
.case-card::after{display:none}
.case-card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.case-card:hover img{transform:none}
.case-overlay{position:static;display:block;padding:23px 0 0;color:#fff}
.case-overlay h2{font:600 clamp(25px,2vw,36px)/.95 InterLocal,Arial,sans-serif;letter-spacing:-.055em}
.case-overlay div p{margin-top:8px;font-size:clamp(15px,1.15vw,19px);font-weight:600;letter-spacing:-.035em}
.case-number,.cases-topline,.cases-gallery>h1,.gallery-controls{display:none}
@media(max-width:900px){.cases-gallery{padding:116px 20px 132px}.case-viewport{gap:96px}.case-slide,.case-slide.is-active{width:min(100%,560px)}.case-overlay{padding-top:18px}.case-overlay h2{font-size:24px}.case-overlay div p{font-size:15px}}

/* Portfolio is read as a left-hand index and a right-hand sequence of work. */
.cases-gallery{display:grid;grid-template-columns:minmax(250px,.58fr) minmax(0,1fr);column-gap:clamp(64px,8vw,156px);align-items:start}
.cases-gallery>h1{position:sticky;top:164px;display:block;margin:0;color:#fff;font:400 clamp(58px,5.5vw,108px)/.78 HeliosExt,Arial,sans-serif;letter-spacing:-.075em}
.case-viewport{grid-column:2;align-items:stretch}
.case-slide,.case-slide.is-active{width:100%}
@media(max-width:900px){.cases-gallery{display:block}.cases-gallery>h1{position:static;margin:0 0 52px;font-size:clamp(56px,16vw,86px)}.case-viewport{align-items:center}.case-slide,.case-slide.is-active{width:min(100%,560px)}}