.case-page { background: #ede9e1; }
.case-header { mix-blend-mode: normal; text-shadow: 0 1px 18px rgba(0,0,0,.35); }
.case-hero { position: relative; min-height: 100svh; overflow: hidden; color: var(--white); background: #2a0b08; }
.case-hero__media, .case-hero__shade { position: absolute; inset: 0; }
.case-hero__media { height: 112%; top: -6%; }
.case-hero__media img { height: 100%; object-fit: cover; transform: scale(1.04); }
.case-hero__shade { background: linear-gradient(180deg, rgba(15,3,2,.35), transparent 36%, rgba(15,3,2,.48)), linear-gradient(90deg, rgba(15,3,2,.22), transparent 60%); }
.case-hero__top { position: absolute; z-index: 2; top: 115px; left: var(--page); right: var(--page); display: flex; justify-content: space-between; font: 10px/1 "Nimbus Mono PS", monospace; text-transform: uppercase; }
.case-hero__title { position: absolute; z-index: 2; left: var(--page); right: var(--page); top: 50%; transform: translateY(-44%); }
.case-hero__title > span { display: block; margin-left: .12em; font: 10px/1 "Nimbus Mono PS", monospace; text-transform: uppercase; letter-spacing: .1em; }
.case-hero h1 { margin: 12px 0 0; font-size: clamp(7rem, 20vw, 20rem); font-weight: 500; line-height: .68; letter-spacing: -.085em; }
.case-hero__foot { position: absolute; z-index: 2; left: var(--page); right: var(--page); bottom: 35px; display: flex; justify-content: space-between; align-items: end; }
.case-hero__foot p { width: min(420px, 45vw); margin: 0; font-size: 15px; }
.case-hero__foot span { font: 9px/1 "Nimbus Mono PS", monospace; text-transform: uppercase; }

.case-intro { min-height: 100svh; padding: 90px var(--page) 55px; display: grid; grid-template-columns: 2fr 6fr 4fr; gap: 42px 0; }
.case-intro > .section-index { grid-column: 1 / -1; }
.case-intro__statement { grid-column: 2 / 4; align-self: end; padding-top: 12vh; }
.case-kicker { margin: 0 0 22px; font: 10px/1 "Nimbus Mono PS", monospace; color: var(--oxide); text-transform: uppercase; }
.case-intro h2 { max-width: 1030px; margin: 0; font-size: clamp(3.5rem, 7.3vw, 8rem); font-weight: 500; line-height: .88; letter-spacing: -.065em; }
.case-intro__copy { grid-column: 2 / 3; max-width: 650px; padding-top: 36px; }
.case-intro__copy p { margin: 0; font-size: clamp(1.15rem, 2vw, 1.7rem); line-height: 1.16; letter-spacing: -.02em; }
.case-data { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); margin: 60px 0 0; border-top: 1px solid var(--line); }
.case-data div { padding: 18px 22px 0 0; border-right: 1px solid var(--line); }
.case-data div + div { padding-left: 22px; }
.case-data div:last-child { border: 0; }
.case-data dt { margin-bottom: 14px; font: 9px/1 "Nimbus Mono PS", monospace; color: var(--muted); text-transform: uppercase; }
.case-data dd { margin: 0; font-size: 14px; }

.material-study { padding: 10vw var(--page) 14vw; display: grid; grid-template-columns: repeat(12, 1fr); gap: 3vw; color: #f2e9df; background: #1e0907; }
.material-study img { width: 100%; height: 100%; object-fit: cover; }
.material-study__wide { grid-column: 1 / -1; height: 78svh; overflow: hidden; }
.material-study__wide img { transform: scale(1.08); }
.material-study__caption { grid-column: 1 / 5; display: flex; justify-content: space-between; gap: 20px; font: 10px/1.25 "Nimbus Mono PS", monospace; text-transform: uppercase; }
.material-study__caption p { max-width: 190px; margin: 0; }
.material-study__crop { overflow: hidden; }
.material-study__crop--a { grid-column: 2 / 7; height: 72svh; margin-top: 10vw; }
.material-study__crop--a img { transform: scale(1.85); transform-origin: 18% 55%; }
.material-study blockquote { grid-column: 8 / 13; align-self: center; margin: 0; font-size: clamp(2.8rem, 5vw, 5.8rem); line-height: .94; letter-spacing: -.055em; }
.material-study__crop--b { grid-column: 7 / 12; height: 60svh; margin-top: 3vw; }
.material-study__crop--b img { transform: scale(2.15); transform-origin: 82% 40%; }

.identity-system { padding: 110px var(--page) 140px; background: #d8d0c2; }
.identity-system__head { display: grid; grid-template-columns: 8fr 3fr; gap: 7vw; align-items: end; margin: 85px 0 80px; }
.identity-system__head h2 { margin: 0; font-size: clamp(3.4rem, 6.5vw, 7rem); font-weight: 500; line-height: .9; letter-spacing: -.06em; }
.identity-system__head p { margin: 0; font-size: 15px; }
.identity-board { min-height: 78svh; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 2fr 1fr; color: #efe9df; background: #28100d; }
.identity-board__mark { grid-row: 1 / 3; padding: 5vw; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.22); }
.identity-board__mark > span { font: 11px/1 "Nimbus Mono PS", monospace; letter-spacing: .18em; }
.identity-board__mark b { margin: auto 0; font-size: clamp(7rem, 16vw, 16rem); font-weight: 500; line-height: .7; letter-spacing: -.09em; }
.identity-board__mark small { font: 10px/1.4 "Nimbus Mono PS", monospace; text-transform: uppercase; }
.identity-board__palette { padding: 3vw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; border-bottom: 1px solid rgba(255,255,255,.22); }
.identity-board__palette i { min-height: 170px; background: #c73724; }
.identity-board__palette i:nth-child(2) { background: #e8dfd2; }
.identity-board__palette i:nth-child(3) { background: #1a1715; }
.identity-board__palette span { grid-column: 1 / -1; font: 9px/1 "Nimbus Mono PS", monospace; text-transform: uppercase; }
.identity-board__type { padding: 3vw; display: flex; justify-content: space-between; align-items: end; }
.identity-board__type span { font-size: clamp(4rem, 8vw, 8rem); line-height: .7; letter-spacing: -.08em; }
.identity-board__type p { margin: 0; font: 10px/1.3 "Nimbus Mono PS", monospace; text-transform: uppercase; }
.identity-board__seal { position: absolute; visibility: hidden; }

.digital-scene { min-height: 160svh; color: #f4eee7; background: #120e0c; }
.digital-scene__sticky { position: sticky; top: 0; min-height: 100svh; padding: 105px var(--page) 45px; overflow: hidden; display: grid; grid-template-columns: 4fr 8fr; gap: 6vw; align-items: center; }
.digital-scene__copy span { font: 10px/1 "Nimbus Mono PS", monospace; color: #cf4937; text-transform: uppercase; }
.digital-scene__copy h2 { margin: 32px 0 0; font-size: clamp(3rem, 5vw, 5.6rem); font-weight: 400; line-height: .92; letter-spacing: -.055em; }
.device { padding: 10px; border: 1px solid rgba(255,255,255,.4); border-radius: 18px; background: #080706; box-shadow: 0 50px 120px rgba(0,0,0,.45); transform: perspective(1200px) rotateY(-4deg) rotateX(2deg); }
.device__bar { height: 54px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; font: 8px/1 "Nimbus Mono PS", monospace; text-transform: uppercase; }
.device__bar span:first-child { font-size: 15px; letter-spacing: .16em; }
.device__media { position: relative; height: 68svh; overflow: hidden; }
.device__media img { height: 100%; object-fit: cover; }
.device__media > span { position: absolute; left: 20px; bottom: 20px; font: 9px/1.4 "Nimbus Mono PS", monospace; text-transform: uppercase; text-shadow: 0 1px 12px #000; }

.case-result { min-height: 100svh; padding: 100px var(--page) 65px; display: flex; flex-direction: column; }
.case-result h2 { max-width: 1100px; margin: auto 0; font-size: clamp(3.8rem, 7.2vw, 8rem); font-weight: 500; line-height: .88; letter-spacing: -.065em; }
.case-result__metrics { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.case-result__metrics div { min-height: 145px; padding: 18px 25px 0 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.case-result__metrics div + div { padding-left: 25px; }
.case-result__metrics div:last-child { border: 0; }
.case-result__metrics b { font-size: clamp(2.8rem, 5vw, 5rem); font-weight: 500; line-height: 1; letter-spacing: -.06em; }
.case-result__metrics span { max-width: 230px; margin-top: auto; font-size: 12px; }

.next-case { position: relative; min-height: 85svh; overflow: hidden; padding: var(--page); display: flex; flex-direction: column; justify-content: flex-end; color: white; }
.next-case__media { position: absolute; inset: 0; }
.next-case__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,12,18,.65), transparent 65%); }
.next-case__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.next-case:hover img { transform: scale(1.035); }
.next-case > span, .next-case h2, .next-case > i { position: relative; z-index: 1; }
.next-case > span { font: 10px/1 "Nimbus Mono PS", monospace; text-transform: uppercase; }
.next-case h2 { margin: 20px 0 0; font-size: clamp(6rem, 15vw, 15rem); font-weight: 500; line-height: .72; letter-spacing: -.08em; }
.next-case > i { position: absolute; right: var(--page); bottom: var(--page); display: grid; place-items: center; width: 74px; height: 74px; border: 1px solid; border-radius: 50%; font-size: 28px; font-style: normal; }
.case-footer { border-top-color: rgba(255,255,255,.22); }

@media (max-width: 900px) {
  .case-intro { grid-template-columns: 1fr; }
  .case-intro__statement, .case-intro__copy { grid-column: 1; }
  .identity-system__head, .digital-scene__sticky { grid-template-columns: 1fr; }
  .identity-board { grid-template-columns: 1fr; grid-template-rows: auto; }
  .identity-board__mark { min-height: 65svh; grid-row: auto; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.22); }
  .digital-scene__sticky { position: relative; }
  .digital-scene { min-height: auto; }
}

@media (max-width: 720px) {
  .case-hero__top { top: 94px; }
  .case-hero__title { top: 44%; }
  .case-hero h1 { font-size: clamp(6rem, 30vw, 10rem); }
  .case-hero__foot p { width: 70vw; font-size: 13px; }
  .case-intro { min-height: auto; padding-top: 70px; }
  .case-intro__statement { padding-top: 80px; }
  .case-intro h2 { font-size: clamp(3.2rem, 14vw, 5rem); }
  .case-data { grid-template-columns: 1fr 1fr; }
  .case-data div { min-height: 120px; border-bottom: 1px solid var(--line); }
  .case-data div:nth-child(2) { border-right: 0; }
  .material-study { display: block; padding-top: 70px; padding-bottom: 90px; }
  .material-study__wide, .material-study__crop { height: 65svh; margin: 35px 0; }
  .material-study__caption { margin: 18px 0 80px; }
  .material-study blockquote { margin: 90px 0; font-size: 3rem; }
  .identity-system { padding-top: 75px; padding-bottom: 85px; }
  .identity-system__head { margin: 65px 0 45px; }
  .identity-board__palette { padding: 22px; }
  .identity-board__palette i { min-height: 110px; }
  .identity-board__type { padding: 28px 22px; }
  .digital-scene__sticky { padding-top: 80px; }
  .device { transform: none; margin-top: 35px; }
  .device__bar span:nth-child(2) { display: none; }
  .device__media { height: 62svh; }
  .case-result { min-height: auto; padding-top: 75px; }
  .case-result h2 { margin: 120px 0; }
  .case-result__metrics { grid-template-columns: 1fr; }
  .case-result__metrics div, .case-result__metrics div + div { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .next-case { min-height: 72svh; }
  .next-case > i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .device { transform: none; }
}
