.cup-page { --cup-blue: #0799dc; }
.cup-page .case-hero h1 span { color: var(--cup-blue); }
.cup-cover { position: relative; min-height: min(67vw, 900px); overflow: hidden; background: #111; }
.cup-cover > img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; }
.cover-facts { position: absolute; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); width: min(720px, 80%); background: rgba(11,13,12,.94); }
.cover-facts span { padding: 24px; border-left: 1px solid var(--line); font: 11px "IBM Plex Mono", monospace; text-transform: uppercase; }
.cover-facts b { display: block; margin-bottom: 5px; color: var(--lime); font: 700 36px Manrope, sans-serif; }
.activation { background: var(--black); }
.activation-head { display: grid; grid-template-columns: .55fr 1.45fr; gap: 5vw; align-items: start; margin-bottom: 65px; }
.activation-head h2, .delivery h2, .result h2 { max-width: 1000px; margin: 0; font-size: clamp(46px, 6.6vw, 100px); line-height: .92; letter-spacing: -.06em; }
.activation-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 0; background: #171a18; }
.activation-media { min-height: 680px; }
.activation-media img { width: 100%; height: 100%; object-fit: cover; }
.activation-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(35px, 5vw, 75px); }
.activation-copy > p, .vr-copy > p, .activation-summary > p, .delivery-copy p { color: #c5cac6; font-size: 18px; line-height: 1.65; }
.tech-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 30px 0; padding: 0; }
.tech-tags li { border: 1px solid #464b47; padding: 9px 11px; font: 10px "IBM Plex Mono", monospace; text-transform: uppercase; }
.inline-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; margin-top: 45px; padding-top: 24px; border-top: 1px solid var(--line); font: 11px "IBM Plex Mono", monospace; text-transform: uppercase; }
.inline-flow i { color: var(--orange); font-style: normal; }
.motion-ready .inline-flow span { opacity:.35; transition:.45s ease; }
.motion-ready .inline-flow.sequence-active span { opacity:1; }
.motion-ready .inline-flow.sequence-active span:nth-of-type(2){transition-delay:.18s}.motion-ready .inline-flow.sequence-active span:nth-of-type(3){transition-delay:.36s}
.activation-photo { background: var(--warm); color: var(--black); }
.portrait-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.portrait-gallery figure { margin: 0; background: #dedcd5; }
.portrait-gallery figure { transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease; }
.portrait-gallery figure:hover { transform:translateY(-12px) rotate(var(--ry,0deg)); box-shadow:0 30px 55px rgba(0,0,0,.16); }
.portrait-gallery img { width: 100%; aspect-ratio: .63; object-fit: cover; }
.portrait-gallery figcaption { padding: 12px; font: 10px "IBM Plex Mono", monospace; text-transform: uppercase; }
.activation-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: end; margin-top: 50px; }
.activation-summary > p { color: #4f544f; }
.activation-summary .inline-flow { border-color: #b9bbb6; }
.vr-grid { display: grid; grid-template-columns: 1.2fr .8fr; background: #171a18; }
.vr-image { min-height: 680px; }
.vr-image img { width: 100%; height: 100%; object-fit: cover; }
.vr-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(35px, 5vw, 75px); }
.vr-flow { width: min(850px, 100%); margin-left: auto; margin-right: auto; }
.delivery { background: var(--cup-blue); color: #071117; }
.delivery-grid { display: grid; grid-template-columns: 1.15fr .65fr; gap: 10vw; margin-top: 28px; }
.delivery-copy p { color: #092938; }
.result { background: var(--warm); color: var(--black); }
.result h2 { margin: 28px 0 38px; }
.result-lead { max-width: 850px; margin: 0 0 60px auto; color: #4f544f; font-size: clamp(20px, 2.3vw, 29px); line-height: 1.5; }
.result-image { height: min(60vw, 780px); }
.result-image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 800px) {
  .cover-facts { position: static; width: 100%; grid-template-columns: 1fr; }
  .cover-facts span { border-left: 0; border-top: 1px solid var(--line); }
  .activation-head, .activation-layout, .activation-summary, .vr-grid, .delivery-grid { grid-template-columns: 1fr; }
  .activation-media, .vr-image { min-height: 360px; }
  .portrait-gallery { grid-template-columns: 1fr; }
  .portrait-gallery img { aspect-ratio: .75; object-position: top; }
  .inline-flow { grid-template-columns: 1fr; }
  .inline-flow i { transform: rotate(90deg); justify-self: center; }
  .result-image { height: 70vw; min-height: 330px; }
}