:root{
  --surface-canvas:#06111d;
  --surface-raised:#0b1d2b;
  --surface-quiet:#102a3a;
  --text-primary:#effcff;
  --text-secondary:#b8d0da;
  --accent:#55cbed;
  --accent-soft:#a8efff;
  --focus-ring:#fff29b;
  --border-subtle:rgba(168,239,255,.22);
  --shadow-raised:0 20px 56px rgba(0,8,16,.26);
  --z-content:1;
  --z-header:30;
  --z-skip:50;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px;background:var(--surface-canvas)}
body{margin:0;background:var(--surface-canvas);color:var(--text-primary);font-family:Manrope,Arial,sans-serif;overflow-x:hidden}
main,.case-footer{position:relative;z-index:var(--z-content)}

.case-nav{
  position:sticky;top:0;z-index:var(--z-header);min-height:76px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:0 4vw;border-bottom:1px solid var(--border-subtle);
  background:rgba(6,17,29,.88);backdrop-filter:blur(16px);
  font:600 11px/1 'DM Mono',monospace;letter-spacing:.06em;
}
.case-nav a{min-height:44px;display:inline-flex;align-items:center;color:var(--text-primary);text-decoration:none}
.case-nav .brand{font-size:16px;letter-spacing:-1px}.case-nav .brand span{color:var(--accent)}
.case-nav a:last-child{padding:0 13px;border:1px solid var(--border-subtle);border-radius:999px;color:var(--accent-soft);transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.case-nav a:last-child:hover{background:var(--accent-soft);border-color:var(--accent-soft);color:#06111d}

.case-hero{padding:clamp(72px,10vw,152px) clamp(24px,8vw,128px) clamp(52px,6vw,88px);max-width:1440px}
.label{margin:0 0 30px;color:var(--accent-soft);font:600 11px/1.3 'DM Mono',monospace;letter-spacing:.11em}
.case-hero h1{max-width:9ch;margin:0;font-size:clamp(62px,10vw,158px);line-height:.84;letter-spacing:-.095em;text-wrap:balance}
.case-hero h1 em{font-family:'Playfair Display',serif;font-weight:600;color:var(--accent-soft)}
.lead{max-width:58ch;margin:44px 0 0;color:var(--text-secondary);font-size:clamp(16px,1.4vw,19px);line-height:1.7}

.case-cover{position:relative;isolation:isolate;margin:0 4vw;overflow:hidden;border:1px solid var(--border-subtle);background:var(--surface-raised);box-shadow:var(--shadow-raised)}
.case-cover::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 58%,rgba(3,15,23,.34))}
.case-cover img{display:block;width:100%;min-height:420px;max-height:80dvh;object-fit:cover}

.case-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,3vw,42px);padding:clamp(64px,8vw,120px) 8vw}
.case-meta div{padding-top:14px;border-top:1px solid var(--border-subtle)}
.case-meta b{display:block;margin-bottom:11px;color:var(--accent-soft);font:600 10px/1 'DM Mono',monospace;letter-spacing:.1em}
.case-meta span{display:block;color:var(--text-primary);font-size:14px;line-height:1.5}

.case-story{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(48px,10vw,152px);padding:clamp(72px,10vw,150px) 8vw;background:var(--surface-raised);border-block:1px solid var(--border-subtle)}
.case-story h2{max-width:10ch;margin:0;font-size:clamp(42px,5.8vw,90px);line-height:.9;letter-spacing:-.075em}
.case-story p{max-width:56ch;margin:0;color:var(--text-secondary);font-size:clamp(16px,1.4vw,19px);line-height:1.75}

.case-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px);padding:clamp(72px,9vw,132px) 4vw}
.case-gallery img{display:block;width:100%;aspect-ratio:1.35/1;object-fit:cover;border:1px solid var(--border-subtle);background:var(--surface-raised);transition:transform .35s ease,filter .35s ease,box-shadow .35s ease}
.case-gallery img:first-child{grid-column:span 2;aspect-ratio:2/1}
.case-gallery img:hover{transform:translateY(-4px);filter:brightness(1.06);box-shadow:var(--shadow-raised)}

.case-footer{padding:clamp(72px,9vw,136px) 8vw;background:linear-gradient(135deg,#66d3ef 0%,#319fc7 100%);color:#04131e}
.case-footer h2{max-width:12ch;margin:0 0 38px;font-size:clamp(52px,7.5vw,118px);line-height:.85;letter-spacing:-.085em}
.case-footer a{min-height:44px;display:inline-flex;align-items:center;color:inherit;font:600 clamp(16px,2vw,24px)/1 'DM Mono',monospace;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:9px}

:where(a):focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px;border-radius:4px}
:where(a){-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:where(a):active{transform:scale(.985)}

@media(max-width:760px){
  html{scroll-padding-top:82px}
  .case-nav{min-height:66px;padding:0 20px}.case-nav .brand{font-size:14px}.case-nav a:last-child{padding:0 10px;font-size:9px}
  .case-hero{padding:22vw 20px 16vw}.case-hero h1{font-size:clamp(58px,17vw,88px)}.lead{margin-top:32px;font-size:16px}
  .case-cover{margin:0 20px}.case-cover img{min-height:320px;height:56vh}
  .case-meta{grid-template-columns:1fr 1fr;gap:28px 16px;padding:18vw 20px}.case-meta span{font-size:13px}
  .case-story{display:block;padding:20vw 20px}.case-story p{margin-top:34px;font-size:16px}
  .case-gallery{display:block;padding:18vw 20px}.case-gallery img,.case-gallery img:first-child{margin-bottom:16px;aspect-ratio:1.15/1}
  .case-footer{padding:20vw 20px}.case-footer h2{font-size:18vw}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}