html:has(.beckham-case-study),html:has(.beckham-case-study) body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
html:has(.beckham-case-study){scroll-behavior:smooth;background:#d8d2c3}
.beckham-case-study{--orange:#f2502f;--cream:#d8d2c3;--paper:#e9e5db;--ink:#111;background:var(--cream);color:var(--ink);opacity:1}
.beckham-case-study::before{content:"";position:fixed;z-index:0;inset:0;background:radial-gradient(circle at 50% 20%,#fff5 0,transparent 42%),linear-gradient(135deg,#d8d2c3,#e9e5db);pointer-events:none}
.constellation-grid{position:fixed;z-index:25;inset:0;display:block;width:100vw;height:100vh;pointer-events:none;opacity:.28;mix-blend-mode:multiply}
.beckham-case-study .project-intro{position:fixed}
.case-header{height:82px;border-bottom:1px solid #3f29231f;background:#d8d2c3dc;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.beckham-case-main{position:relative;z-index:2;padding-top:82px}
.case-panel{position:relative;width:100%;margin:0;overflow:hidden;background:var(--cream);isolation:isolate}
.case-panel>img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;opacity:.24;filter:blur(12px);transform:scale(1.045);transition:opacity 1s cubic-bezier(.16,.9,.3,1),filter 1.15s cubic-bezier(.16,.9,.3,1),transform 1.4s cubic-bezier(.16,.9,.3,1)}
.case-panel.is-visible>img{opacity:1;filter:blur(0);transform:scale(1)}
.case-panel:nth-of-type(even)>img{transform-origin:right center}.case-panel:nth-of-type(odd)>img{transform-origin:left center}
.case-caption{position:absolute;z-index:2;left:2.1vw;bottom:2vw;padding:.5rem .7rem;border:1px solid #fff6;border-radius:999px;background:#171313b8;color:#fff;font-size:clamp(8px,.65vw,12px);font-weight:700;letter-spacing:.12em;opacity:0;transform:translateY(14px);transition:opacity .7s .35s,transform .8s .35s cubic-bezier(.16,.9,.3,1)}
.case-panel.is-visible .case-caption{opacity:1;transform:none}
.case-comparison{min-height:100svh;padding:clamp(110px,9vw,180px) clamp(18px,6vw,110px);background:#d8d2c3d9;color:var(--ink)}
.case-comparison::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 35%,#f2502f18,transparent 38%),linear-gradient(115deg,#d8d2c3d9,#e9e5dbd9);z-index:-1}
.case-comparison>header{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:clamp(18px,3vw,52px);max-width:1500px;margin:0 auto clamp(28px,4vw,72px)}
.case-comparison>header>span{color:#f2502f;font-family:Ppneuemontreal,Arial,sans-serif;font-size:clamp(70px,10vw,180px);font-weight:700;line-height:.7;letter-spacing:-.08em}
.case-comparison small{display:block;margin-bottom:.7rem;color:#f2502f;font-size:clamp(9px,.72vw,13px);font-weight:700;letter-spacing:.14em}
.case-comparison h2{max-width:900px;margin:0;font-family:Ppneuemontreal,Arial,sans-serif;font-size:clamp(38px,5.2vw,96px);line-height:.88;letter-spacing:-.055em}
.compare-shell{position:relative;width:min(100%,1500px);aspect-ratio:1/1;margin:0 auto;border:1px solid #ffffff8c;border-radius:clamp(8px,1vw,18px);background:var(--paper);box-shadow:0 2.6vw 8vw #5b50432e;overflow:hidden;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.compare-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.compare-before{clip-path:inset(0 calc(100% - var(--compare-position)) 0 0)}
.compare-label{position:absolute;z-index:3;top:18px;padding:.55rem .72rem;border:1px solid #fff8;border-radius:999px;background:#171313b8;color:#fff;font-size:10px;font-weight:700;letter-spacing:.12em;backdrop-filter:blur(12px)}
.compare-label-before{left:18px}.compare-label-after{right:18px}
.compare-handle{position:absolute;z-index:4;top:0;bottom:0;left:var(--compare-position);width:62px;margin:0;padding:0;border:0;background:transparent;color:#fff;transform:translateX(-50%);cursor:ew-resize;touch-action:none}
.compare-handle b{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 0 1px #17131320;transform:translateX(-50%)}
.compare-handle i{position:absolute;z-index:1;top:50%;display:grid;place-items:center;width:29px;height:54px;background:var(--orange);font:700 27px/1 Arial,sans-serif;font-style:normal;transform:translateY(-50%);box-shadow:0 8px 24px #17131335}
.compare-handle i:first-child{right:50%;border-radius:999px 0 0 999px}.compare-handle i:last-child{left:50%;border-radius:0 999px 999px 0}
.compare-handle:focus-visible i{outline:3px solid #fff;outline-offset:3px}
.compare-shell[data-compare-axis="vertical"]{cursor:ns-resize;touch-action:pan-x}
.compare-shell[data-compare-axis="vertical"] .compare-before{clip-path:inset(0 0 calc(100% - var(--compare-position)) 0)}
.compare-shell[data-compare-axis="vertical"] .compare-handle{left:0;right:0;top:var(--compare-position);bottom:auto;width:auto;height:62px;transform:translateY(-50%);cursor:ns-resize}
.compare-shell[data-compare-axis="vertical"] .compare-handle:focus{outline:none}
.compare-shell[data-compare-axis="vertical"] .compare-handle b{left:0;right:0;top:50%;bottom:auto;width:auto;height:2px;transform:translateY(-50%)}
.compare-shell[data-compare-axis="vertical"] .compare-handle i{left:50%;right:auto;width:54px;height:29px;transform:translateX(-50%)}
.compare-shell[data-compare-axis="vertical"] .compare-handle i:first-child{top:auto;bottom:50%;border-radius:999px 999px 0 0}
.compare-shell[data-compare-axis="vertical"] .compare-handle i:last-child{top:50%;bottom:auto;border-radius:0 0 999px 999px}
.case-next{position:relative;display:flex;min-height:78svh;flex-direction:column;justify-content:center;padding:clamp(70px,8vw,150px);background:#d8d2c3d9;color:var(--ink);text-transform:uppercase;overflow:hidden}
.case-next::before{content:"NEXT";position:absolute;right:-.06em;bottom:-.24em;color:#f2502f0e;font-family:Ppneuemontreal,Arial,sans-serif;font-size:min(35vw,620px);font-weight:700;letter-spacing:-.08em}
.case-next>span{position:relative;margin-bottom:1.1rem;font-size:11px;font-weight:700;letter-spacing:.12em}
.case-next>strong{position:relative;font-family:Ppneuemontreal,Arial,sans-serif;font-size:clamp(58px,9vw,170px);line-height:.76;letter-spacing:-.065em;transition:color .35s}
.case-next>small{position:relative;margin-top:2rem;color:#9b958d;font-size:12px;letter-spacing:.13em}
.case-next>b{position:absolute;right:8%;bottom:14%;display:grid;place-items:center;width:clamp(58px,6vw,104px);height:clamp(58px,6vw,104px);border-radius:50%;background:#f2502f;color:#fff;font-size:clamp(24px,2vw,38px);transition:transform .5s cubic-bezier(.16,.9,.3,1)}
.case-next:hover>strong{color:#f2502f}.case-next:hover>b{transform:rotate(45deg) scale(1.08)}
.case-progress{position:fixed;z-index:45;right:1.2vw;top:50%;display:grid;justify-items:center;gap:8px;color:#171313;transform:translateY(-50%);font-size:9px;font-weight:700;mix-blend-mode:multiply}
.case-progress i{position:relative;width:2px;height:120px;background:#17131322;overflow:hidden}
.case-progress i span{position:absolute;left:0;top:0;width:100%;height:100%;background:#f2502f;transform:scaleY(var(--case-progress,0));transform-origin:top}
.case-progress>span{color:#9b958d}

@media(max-width:820px){
  .case-header{height:72px}.beckham-case-main{padding-top:72px}
  .case-header .project-heading{display:none}.case-header nav a:nth-child(2),.case-header nav a:nth-child(3){display:none}
  .case-caption{left:12px;bottom:12px;padding:5px 7px}
  .case-comparison{min-height:0;padding:84px 16px}
  .case-comparison>header{grid-template-columns:1fr;gap:18px;margin-bottom:34px}
  .case-comparison>header>span{font-size:76px}
  .compare-shell{border-radius:8px}.compare-label{top:10px;padding:5px 7px;font-size:8px}.compare-label-before{left:10px}.compare-label-after{right:10px}
  .case-next{min-height:65svh;padding:64px 20px}.case-next>b{right:20px;bottom:22px}
  .case-progress{right:7px}.case-progress i{height:78px}
}
@media(max-width:520px){
  .case-header{height:66px}.beckham-case-main{padding-top:66px}
  .case-panel>img{aspect-ratio:16/9}
  .case-caption{display:none}
  .case-progress{display:none}
  .case-comparison h2{font-size:42px}
  .case-next>strong{font-size:15vw}
}
@media(prefers-reduced-motion:reduce){
  html:has(.beckham-case-study){scroll-behavior:auto}.case-panel>img,.case-caption{transition:none}.case-panel>img{opacity:1;filter:none;transform:none}.constellation-grid{opacity:.18}
}