/* Case study styles are isolated from the portfolio homepage. */
.case-page{background:#070808;--muted:#b3b6b6}.case-page html{scroll-padding-top:100px}.case-page .site-header{max-width:1360px}.reading-progress{position:fixed;left:0;top:0;width:100%;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;z-index:20}.case-hero{max-width:1320px;margin:auto;padding:70px 40px 90px;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:24px;min-height:650px}.back-link{display:inline-block;color:#999;font-size:13px;margin-bottom:54px}.back-link:hover{color:var(--accent)}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:600;line-height:1.6;color:var(--accent)}.case-name{margin:22px 0 10px;font-size:18px;color:#ddd}.case-hero h1{font-size:clamp(45px,5.4vw,78px);letter-spacing:-.055em;line-height:1.04}.hero-description{font-size:18px;max-width:490px;margin:24px 0 28px}.case-page .button{font-size:14px;border-radius:40px}.case-art{position:relative;isolation:isolate;min-width:0}.case-art:before{content:'';position:absolute;inset:15%;background:radial-gradient(ellipse,rgba(var(--accent-rgb),.28),transparent 70%);filter:blur(40px);z-index:-1}.case-art img{width:100%;height:470px;object-fit:contain;transform:rotate(-3deg);animation:case-arrive 1s ease both}.case-facts{max-width:1240px;margin:0 auto 65px;padding:26px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:25px;border-top:1px solid #303232;border-bottom:1px solid #303232}.case-facts span{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#838888}.case-facts p{color:#eee;font-size:14px;margin-top:10px}.case-nav{display:flex;justify-content:center;gap:8px;position:sticky;top:12px;z-index:8;width:max-content;max-width:calc(100% - 24px);margin:0 auto;background:#161818ed;border:1px solid #383b3b;backdrop-filter:blur(20px);padding:7px;border-radius:40px;box-shadow:0 12px 40px #0006}.case-nav a{font-size:12px;color:#afb2b2;padding:11px 20px;border-radius:30px;white-space:nowrap;transition:background .25s,color .25s}.case-nav a:hover{color:white;background:#292c2c}.case-nav a[aria-current=true]{background:var(--accent);color:#101313}.case-content{max-width:1120px;margin:auto;padding:0 40px}.case-section{padding:100px 0 30px;scroll-margin-top:80px}.section-heading{max-width:780px;margin-bottom:48px}.section-heading h2{font-size:clamp(36px,4.5vw,63px);margin-top:18px;line-height:1.08}.section-intro{font-size:18px;margin-top:26px;line-height:1.75}.overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px}.overview-grid h3,.future h3{font-size:23px;margin-bottom:18px}.overview-grid p,.step-copy p,.future p{font-size:16px;line-height:1.8}.goal{margin:45px 0 24px;border-left:2px solid var(--accent);padding:8px 0 8px 28px}.goal>p{font-family:Satoshi,Arial,sans-serif;font-size:clamp(24px,2.8vw,34px);color:#eee;line-height:1.45;max-width:900px;margin-top:15px}.scope-note{max-width:700px;font-size:14px}.confidentiality{display:flex;gap:20px;border:1px solid #303535;border-radius:16px;padding:23px 28px;margin-top:34px}.confidentiality>span{font-size:28px;color:var(--accent)}.confidentiality p{font-size:14px}.confidentiality strong{display:block;color:#eee;margin-bottom:8px}.process-step{display:grid;grid-template-columns:.8fr 1.2fr;gap:55px;align-items:center;padding:50px 0;border-top:1px solid #252929}.step-number{font-family:Satoshi,Arial,sans-serif;font-size:14px;color:var(--accent);display:block;margin-bottom:20px}.step-copy h3{font-size:27px;line-height:1.2;letter-spacing:-.035em;margin-bottom:18px}.case-figure{margin:0;min-width:0}.image-zoom{padding:0;border:1px solid #303535;border-radius:14px;overflow:hidden;background:#151717;position:relative;display:block;width:100%;cursor:zoom-in;transition:transform .35s,border-color .35s}.image-zoom img{width:100%;height:auto}.image-zoom span{position:absolute;right:12px;bottom:12px;background:#101111e8;color:#fff;padding:8px 12px;border:1px solid #ffffff38;border-radius:20px;font-size:11px;opacity:0;transform:translateY(5px);transition:.25s}.image-zoom:hover,.image-zoom:focus-visible{transform:translateY(-4px);border-color:var(--accent)}.image-zoom:hover span,.image-zoom:focus-visible span{opacity:1;transform:none}figcaption{font-size:11px;color:#8b9393;margin:13px 2px;line-height:1.6}.prototype-panel{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;background:radial-gradient(at right bottom,rgba(var(--accent-rgb),.18),transparent 70%),#141616;border:1px solid #323636;border-radius:24px;padding:45px;margin:40px 0}.prototype-panel h3{font-size:32px;line-height:1.2;margin:20px 0}.prototype-panel p{margin-bottom:25px}.prototype-panel img{width:100%;height:340px;object-fit:contain}.future{max-width:800px;margin-top:45px}.future .button{margin-top:25px}.status-panel{max-width:800px;padding:50px;background:radial-gradient(at right top,rgba(var(--accent-rgb),.12),transparent 70%),#121516;border:1px solid #303737;border-radius:22px}.status-panel h2{margin:25px 0;font-size:clamp(38px,5vw,64px)}.status-panel>p:not(.eyebrow){font-size:18px;max-width:600px}.status-panel .button{margin-top:28px}.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 20px var(--accent);margin-bottom:15px}.next-project{max-width:1240px;margin:110px auto 65px;border-top:1px solid #343737;padding:50px 30px;display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:40px}.next-project h2{font-size:clamp(32px,4vw,58px);margin:15px 0}.next-project h2 span{display:inline-block;transition:transform .3s}.next-project:hover h2 span{transform:translate(8px,-8px);color:var(--accent)}.next-project p{max-width:520px}.next-project img{width:100%;height:230px;object-fit:contain;transition:transform .4s}.next-project:hover img{transform:rotate(3deg) translateY(-5px)}.image-dialog{width:min(1400px,96vw);max-height:95vh;border:1px solid #505656;border-radius:15px;background:#111515;color:white;padding:55px 20px 20px}.image-dialog::backdrop{background:#000d;backdrop-filter:blur(8px)}.image-dialog>img{max-height:75vh;max-width:100%;width:auto;margin:auto;object-fit:contain}.image-dialog>p{text-align:center;margin-top:16px;font-size:13px}.dialog-close{position:absolute;right:15px;top:12px;border:1px solid #777;border-radius:20px;background:#222;color:white;padding:8px 16px;cursor:pointer}.case-page button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}body.dialog-open{overflow:hidden}@keyframes case-arrive{from{opacity:0;transform:translateY(25px) rotate(0)}to{opacity:1;transform:rotate(-3deg)}}
@media(max-width:1300px){.case-facts{margin-left:40px;margin-right:40px}}
@media(max-width:760px){.case-hero{grid-template-columns:1fr;padding:35px 24px 25px;min-height:0;gap:10px}.back-link{margin-bottom:35px}.case-hero h1{font-size:clamp(44px,9vw,68px)}.case-art img{height:330px}.case-facts{grid-template-columns:1fr 1fr;margin:0 24px 35px;gap:24px}.case-content{padding:0 24px}.case-section{padding-top:65px}.case-nav{gap:0;overflow-x:auto;justify-content:flex-start}.case-nav a{padding:11px 12px;font-size:11px}.overview-grid,.process-step,.prototype-panel{grid-template-columns:1fr;gap:28px}.process-step{padding:35px 0}.section-heading{margin-bottom:30px}.section-intro{font-size:16px}.image-zoom span{opacity:1;transform:none}.prototype-panel,.status-panel{padding:28px}.prototype-panel img{height:280px}.next-project{margin:60px 24px 30px;padding:35px 0;grid-template-columns:1fr}.next-project img{height:200px}.case-page footer{gap:20px}.goal{padding-left:20px}.confidentiality{padding:20px}.case-nav{scrollbar-width:none}}
@media(prefers-reduced-motion:reduce){.case-art img{animation:none;transform:none}.image-zoom:hover,.next-project:hover img,.next-project:hover h2 span{transform:none}}
/* Account for the transparent padding within the original device artwork. */
.case-art img[src$="boilerbuzz.png"]{animation:none;transform:rotate(-3deg) scale(2.6)}
.case-art img[src$="gravity.png"]{animation:none;transform:rotate(-3deg) scale(1.65)}
.case-art{clip-path:inset(-15% -5%)}
.prototype-panel{overflow:hidden}.prototype-panel img{transform:scale(2.5)}
.next-project{overflow:hidden}.next-project img[src$="boilerbuzz.png"]{transform:scale(2.3)}
@media(prefers-reduced-motion:reduce){.case-art img[src$="boilerbuzz.png"]{transform:scale(2.6)}.case-art img[src$="gravity.png"]{transform:scale(1.65)}}
.case-art{overflow:hidden;clip-path:none}

.case-gravity .eyebrow,.case-gravity .step-number{color:#b4c4b7}.case-gravity .case-nav a[aria-current=true]{color:#fff}

/* Scannable case study summaries and proportional research photography. */
.case-bullets{margin:18px 0 0;padding-left:20px;color:#b3b6b6;font-size:16px;line-height:1.65}.case-bullets li{margin:0 0 14px;padding-left:5px}.case-bullets li::marker{color:var(--accent)}.case-bullets strong{color:#f4f4f4;font-weight:600}.research-photo{max-width:340px;justify-self:center;width:100%}.research-photo .image-zoom img{height:330px;width:100%;object-fit:contain;background:#121515}.blurred-study{overflow:hidden}.blurred-study img{filter:blur(3px);transform:scale(1.04)}.blurred-study span{opacity:1;transform:none}.blurred-dialog>img{filter:blur(5px)}
@media(max-width:760px){.research-photo{max-width:300px}.research-photo .image-zoom img{height:300px}}

.nda-notice{align-items:flex-start;background:rgba(var(--accent-rgb),.14);border:1px solid rgba(var(--accent-rgb),.6);border-left:4px solid #b4c4b7;padding:28px 30px;box-shadow:0 12px 36px rgba(0,0,0,.12)}.nda-notice .nda-badge{flex-shrink:0;border:1px solid #839b87;border-radius:8px;padding:8px 10px;color:#dce7de;font-size:12px;font-weight:700;letter-spacing:.08em;line-height:1.4}.nda-notice h3{font-size:22px;color:#f4f7f4;line-height:1.25;margin:0 0 12px}.nda-notice p{font-size:15px;line-height:1.7;color:#c5cec7;margin:0}.nda-notice p strong{display:inline;color:#f4f7f4}.nda-notice a{display:inline-block;margin-top:14px;color:#d4e2d6;text-underline-offset:4px;text-decoration:underline;font-size:14px}.nda-notice a:hover{color:#fff}@media(max-width:600px){.nda-notice{flex-direction:column;gap:16px;padding:22px}.nda-notice h3{font-size:20px}}

/* Original, already-blurred montage used as a CSS sprite. No extra image blur. */
.gravity-fan{height:490px;overflow:visible;perspective:1000px;--spread:1}
.fan-card{position:absolute;left:50%;top:50%;width:59%;aspect-ratio:380/284;border-radius:6%;background:#070808;box-shadow:0 18px 36px #0009;transform:translate(-50%,-50%) translate(calc(var(--x)*var(--spread)),calc(var(--y)*var(--spread))) rotate(var(--r));animation:fan-unfold 1.5s cubic-bezier(.16,1,.3,1) backwards;animation-delay:var(--delay);transition:transform .8s cubic-bezier(.16,1,.3,1),box-shadow .6s}
.fan-screen{position:absolute;inset:0;border-radius:inherit;background-image:url('assets/cases/gravitydrive-18.png');background-size:404.21% 360.56%;background-position:var(--crop);background-repeat:no-repeat}
.fan-card-1{--x:-28%;--y:-43%;--r:-15deg;--crop:13.15% 9.59%;--delay:.08s;z-index:1}
.fan-card-2{--x:28%;--y:-38%;--r:13deg;--crop:50.43% 9.59%;--delay:.16s;z-index:2}
.fan-card-3{--x:-25%;--y:47%;--r:-11deg;--crop:13.15% 92.16%;--delay:.24s;z-index:3}
.fan-card-4{--x:28%;--y:43%;--r:15deg;--crop:87.02% 92.16%;--delay:.32s;z-index:4}
.fan-card-5{--x:0%;--y:0%;--r:-3deg;--crop:50.43% 50.81%;--delay:.4s;z-index:5;box-shadow:0 25px 55px #000b}
.fan-glow{position:absolute;inset:10%;background:radial-gradient(ellipse,rgba(137,165,143,.3),transparent 70%);filter:blur(25px);animation:fan-glow-in 1.8s ease both}
@media(hover:hover){.gravity-fan:hover{--spread:1.16}.fan-card:hover{box-shadow:0 24px 50px #000c}}
@keyframes fan-unfold{from{opacity:0;transform:translate(-50%,-50%) translateY(35px) rotate(0) scale(.83)}to{opacity:1;transform:translate(-50%,-50%) translate(calc(var(--x)*var(--spread)),calc(var(--y)*var(--spread))) rotate(var(--r))}}
@keyframes fan-glow-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@media(max-width:760px){.gravity-fan{height:390px;max-width:540px;width:100%;margin:10px auto 0}.fan-card{width:56%}}
@media(max-width:420px){.gravity-fan{height:310px}}
@media(prefers-reduced-motion:reduce){.fan-card,.fan-glow{animation:none;transition:none}.gravity-fan:hover{--spread:1}}

/* Preserve original device edges; no added iPad borders or frames. */
.gravity-fan .fan-card,.gravity-fan .fan-screen{border:0;outline:0;background-color:transparent}
.boiler-fan{height:500px;overflow:visible;--spread:1;perspective:1000px}
.boiler-fan .fan-glow{background:radial-gradient(ellipse,rgba(207,185,145,.28),transparent 70%)}
.phone-card{position:absolute;left:50%;top:50%;width:32%;aspect-ratio:340/688;border-radius:17% / 8.4%;box-shadow:0 18px 32px #0009;transform:translate(-50%,-50%) translate(calc(var(--x)*var(--spread)),calc(var(--y)*var(--spread))) rotate(var(--r));animation:fan-unfold 1.5s cubic-bezier(.16,1,.3,1) backwards;animation-delay:var(--delay);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.phone-screen{position:absolute;inset:0;border-radius:inherit;background-image:url('assets/cases/boilerbuzz-gallery.jpeg');background-size:451.765% 148.837%;background-position:var(--crop) 46.43%;background-repeat:no-repeat}
.phone-card-1{--x:-85%;--y:8%;--r:-15deg;--crop:5.02%;--delay:.1s;z-index:1}
.phone-card-2{--x:-28%;--y:-6%;--r:-5deg;--crop:35.28%;--delay:.2s;z-index:3}
.phone-card-3{--x:28%;--y:-2%;--r:6deg;--crop:64.8%;--delay:.3s;z-index:4}
.phone-card-4{--x:85%;--y:10%;--r:16deg;--crop:95.07%;--delay:.4s;z-index:2}
@media(hover:hover){.boiler-fan:hover{--spread:1.08}}
@media(max-width:760px){.boiler-fan{height:460px;width:100%;max-width:520px;margin:10px auto 0}.phone-card{width:30%}}
@media(max-width:420px){.boiler-fan{height:330px}}
@media(prefers-reduced-motion:reduce){.phone-card{animation:none;transition:none}.boiler-fan:hover{--spread:1}}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.case-page .prototype-button{border:1px solid var(--accent);background:rgba(var(--accent-rgb),.15);color:#fff}.case-page .prototype-button:hover{background:rgba(var(--accent-rgb),.3)}#prototype-preview{scroll-margin-top:110px}

/* Images determine their frame height, avoiding empty bands or distortion. */
.case-figure .image-zoom img{display:block;width:100%;height:auto;object-fit:cover}.research-photo .image-zoom img{height:330px;object-fit:cover;object-position:center 35%}.gravity-fan .fan-card,.gravity-fan .fan-card:hover{box-shadow:0 8px 14px #0005}.gravity-fan .fan-screen{border-radius:5%}
@media(max-width:760px){.research-photo .image-zoom img{height:300px}}

.preview-nda{margin:28px 0 24px}.preview-nda .button{margin-top:18px;text-decoration:none;font-size:14px}#prototype-access{scroll-margin-top:100px}
/* Original cover opens into a fully visible, straight horizontal screen row. */
.next-stack{position:relative;height:260px;width:100%;min-width:0}
.next-layer{position:absolute;left:0;top:50%;width:30%;transform:translateY(-50%);opacity:0;transition:transform .65s cubic-bezier(.2,.8,.2,1),opacity .4s,width .65s cubic-bezier(.2,.8,.2,1);box-shadow:0 8px 16px #0005}
.next-layer-1{--slot:2;z-index:1;--crop:13.15% 9.59%}.next-layer-2{--slot:1;z-index:2;--crop:87.02% 92.16%}
.next-stack-gravity .next-layer:not(.next-original){aspect-ratio:380/284;border-radius:6%}
.next-stack-boiler .next-layer:not(.next-original){aspect-ratio:340/688;border-radius:17% / 8.4%}
.next-stack-boiler .next-layer-1{--crop:5.02%}.next-stack-boiler .next-layer-2{--crop:95.07%}
.next-stack .next-original{width:75%;height:240px;opacity:1;z-index:3;box-shadow:none}
.next-project .next-stack img,.next-project:hover .next-stack img{display:block;width:100%;height:100%;object-fit:contain;transform:none;transition:none}
.next-project:is(:hover,:focus-visible) .next-original{width:30%}
.next-project:is(:hover,:focus-visible) .next-layer:not(.next-original){opacity:1;transform:translateY(-50%) translateX(calc(var(--slot)*116.667%))}
.next-stack-allied .next-layer:not(.next-original){display:none}
.next-project:is(:hover,:focus-visible) .next-stack-allied .next-original{width:75%}
@media(max-width:760px){.next-stack{height:250px;max-width:440px;margin:auto}}
@media(prefers-reduced-motion:reduce){.next-layer{transition:none}}

/* Normalize original artwork to device bounds, not its padded canvas. */
.next-stack-boiler .next-original,.next-project:is(:hover,:focus-visible) .next-stack-boiler .next-original{width:30%;height:auto;aspect-ratio:340/688;border-radius:17% / 8.4%;background:url('assets/boilerbuzz.png') 49.87% 50% / 685.5% 369.71% no-repeat;box-shadow:0 8px 16px #0005}
.next-stack-gravity .next-original,.next-project:is(:hover,:focus-visible) .next-stack-gravity .next-original{width:30%;height:auto;aspect-ratio:380/284;border-radius:6%;background:url('assets/gravity.png') 49.96% 49.44% / 222.62% 237.81% no-repeat;box-shadow:0 8px 16px #0005}
.next-project .next-stack-boiler .next-original img,.next-project .next-stack-gravity .next-original img{display:none}

.reflection-block{margin:64px 0 36px;padding-top:34px;border-top:1px solid #343737}.reflection-block>h3{font-size:clamp(28px,3.6vw,42px);line-height:1.15;letter-spacing:-.035em;margin:16px 0 28px}.reflection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.reflection-card{padding:25px;border:1px solid #343a38;border-radius:18px;background:linear-gradient(145deg,rgba(var(--accent-rgb),.08),#111414)}.reflection-card h4{font-size:20px;line-height:1.3;color:var(--accent);margin:0 0 20px}.reflection-card ul{padding-left:18px;margin:0}.reflection-card li{font-size:15px;line-height:1.65;color:#b3b6b6;margin:0 0 16px}.reflection-card li:last-child{margin-bottom:0}.reflection-card strong{color:#f3f5f4}
@media(max-width:900px){.reflection-grid{grid-template-columns:1fr}.reflection-card{padding:24px}.reflection-block{margin-top:44px}}

/* Touch devices show the complete row without requiring a hover. */
@media(hover:none),(pointer:coarse),(max-width:760px){.next-project .next-stack-allied .next-original{left:12.5%}.image-zoom span{opacity:1;transform:none}}
@media(max-width:760px){.next-project{gap:24px}.next-stack-boiler{height:auto;aspect-ratio:1.5}.next-stack-gravity{height:auto;aspect-ratio:3.8}.next-stack-allied{height:200px}.next-stack-allied .next-original{height:200px;left:12.5%}.hero-actions{gap:10px}.case-facts>*{min-width:0}.nda-notice{flex-wrap:wrap}}

.next-project.mobile-next:not(.is-expanded) .next-layer:not(.next-original){opacity:0;transform:translateY(-50%)}
.next-project.mobile-next.is-expanded .next-layer:not(.next-original){opacity:1;transform:translateY(-50%) translateX(calc(var(--slot)*116.667%))}