
:root{--paper:#f4efe6;--ink:#111;--muted:#6b655e;--line:rgba(17,17,17,.14);--accent:#ff5b24;--accent2:#baff55;--dark:#0e0e0f;--pad:clamp(18px,3.2vw,54px);--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:#111}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,Helvetica,sans-serif;overflow-x:hidden}a{color:inherit}.serif{font-family:Georgia,"Times New Roman",serif;letter-spacing:-.05em}.noise{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.024;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}.nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:16px var(--pad);display:flex;justify-content:space-between;align-items:center;mix-blend-mode:difference;color:#fff;text-transform:uppercase;font-size:10px;letter-spacing:.16em}.nav a{text-decoration:none}.nav-right{display:flex;gap:18px}.case-hero{min-height:78svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:12vh var(--pad) 7vh;gap:32px;position:relative;overflow:hidden}.case-hero h1{font-size:clamp(62px,11vw,162px);line-height:.76;margin:8px 0 0;max-width:8ch}.kicker{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}.lede{font-size:clamp(22px,2.8vw,34px);line-height:1.22;max-width:31ch;margin:0}.short{color:var(--muted);line-height:1.6;max-width:44ch}.hero-visual{position:absolute;inset:0;z-index:-2}.hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.18))}.hero-tint{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--paper) 0 48%,rgba(244,239,230,.86) 58%,rgba(244,239,230,.14) 100%)}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.pill{display:inline-flex;text-decoration:none;border:1px solid currentColor;border-radius:999px;padding:11px 14px;font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase}.scroll-note{position:absolute;right:var(--pad);bottom:20px;color:var(--muted);font-size:10px;letter-spacing:.15em;text-transform:uppercase}.ticker{background:#111;color:#fff;overflow:hidden;white-space:nowrap;padding:13px 0;text-transform:uppercase;font-weight:900;letter-spacing:.12em}.ticker span{display:inline-block;animation:marquee 28s linear infinite}@keyframes marquee{to{transform:translateX(-50%)}}
.section{padding:clamp(58px,7vw,100px) var(--pad)}.section.dark{background:#111;color:#f5f0e7}.section.soft{background:#ebe4d8}.head{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px;align-items:end;margin-bottom:32px}.head h2{font-size:clamp(46px,7vw,96px);line-height:.84;margin:6px 0 0}.head p{margin:0;color:var(--muted);line-height:1.6;max-width:42ch}.dark .head p{color:#bbb2a5}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.metric{border:1px solid var(--line);border-radius:22px;padding:24px;min-height:180px;display:flex;flex-direction:column;justify-content:space-between;background:rgba(255,255,255,.5)}.dark .metric{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04)}.metric strong{font-size:clamp(48px,7vw,92px);line-height:.8;letter-spacing:-.06em}.metric span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.dark .metric span{color:#b8afa4}.gallery{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:290px 290px;gap:12px}.gallery .shot{border-radius:24px;overflow:hidden;position:relative;background:#222}.gallery .shot:first-child{grid-row:span 2}.shot img{width:100%;height:100%;object-fit:cover}.shot .cap{position:absolute;left:14px;bottom:12px;background:rgba(255,255,255,.9);padding:7px 10px;border-radius:999px;font-size:10px;letter-spacing:.12em;text-transform:uppercase}.visual-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}.panel{grid-column:span 6;border:1px solid var(--line);border-radius:24px;padding:24px;min-height:280px;position:relative;overflow:hidden}.panel.wide{grid-column:span 8}.panel.narrow{grid-column:span 4}.panel.full{grid-column:span 12}.panel h3{font-size:clamp(30px,4vw,54px);line-height:.92;margin:8px 0 10px}.panel p{margin:0;color:var(--muted);line-height:1.55;max-width:40ch}.dark .panel{border-color:rgba(255,255,255,.14)}.dark .panel p{color:#bfb6aa}.bars{display:flex;align-items:flex-end;gap:30px;height:220px;padding:24px 10px 0}.bar{flex:1;max-width:140px;border-radius:16px 16px 4px 4px;background:var(--accent);height:var(--h);min-height:20px;position:relative;transform:scaleY(0);transform-origin:bottom;transition:transform 1s var(--ease)}.on .bar{transform:scaleY(1)}.bar label{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);font-weight:900;font-size:20px}.bar small{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;color:var(--muted)}.loop{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:30px}.node{padding:12px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:800;font-size:12px}.dark .node{background:#171717;border-color:rgba(255,255,255,.14)}.arrowthin{opacity:.4}.orbit{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px}.orbit div{border:1px solid currentColor;border-radius:999px;padding:14px;text-align:center;font-weight:800;font-size:12px}.spectrum{display:grid;grid-template-columns:repeat(3,1fr);border-radius:24px;overflow:hidden;min-height:360px;margin-top:20px}.voice{padding:24px;display:flex;flex-direction:column;justify-content:space-between;transition:flex .35s var(--ease)}.voice:hover{filter:brightness(1.04)}.voice h3{font-size:clamp(34px,5vw,70px);line-height:.9;margin:0}.voice p{max-width:24ch;line-height:1.45}.voice.sony{background:#090909;color:#fff}.voice.instax{background:linear-gradient(160deg,#ff6658,#ffd84a 45%,#69c38e 74%);color:#111}.voice.xerox{background:#e62e35;color:#fff}.ops{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:26px}.ops div{min-height:120px;border-radius:18px;border:1px solid var(--line);display:grid;place-items:center;text-align:center;font-weight:900;padding:12px;position:relative}.ops div:not(:last-child):after{content:"→";position:absolute;right:-10px;z-index:4;background:var(--paper);padding:2px}.next{padding:70px var(--pad);background:var(--accent);color:#111;display:flex;justify-content:space-between;align-items:end;gap:30px;text-decoration:none}.next small{text-transform:uppercase;letter-spacing:.16em}.next strong{font-size:clamp(42px,7vw,100px);line-height:.82;display:block;margin-top:6px}.next span{font-size:54px}.reveal{opacity:0;transform:translateY(24px);transition:.72s var(--ease)}.reveal.on{opacity:1;transform:none}.page-in{position:fixed;inset:0;background:#0d0d0e;z-index:20000;transform-origin:top;animation:pageIn .8s cubic-bezier(.72,0,.18,1) forwards}@keyframes pageIn{0%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@media(max-width:900px){.case-hero,.head{grid-template-columns:1fr}.case-hero{min-height:auto;padding:110px var(--pad) 66px;align-items:start;gap:24px}.case-hero h1{font-size:clamp(54px,18vw,92px);max-width:none}.lede{font-size:22px}.short{margin-bottom:0}.scroll-note{display:none}.hero-tint{background:linear-gradient(180deg,var(--paper) 0 56%,rgba(244,239,230,.8) 76%,rgba(244,239,230,.24) 100%)}.metrics{grid-template-columns:1fr}.visual-grid{display:block}.panel,.panel.wide,.panel.narrow,.panel.full{margin-bottom:12px}.gallery{grid-template-columns:1fr;grid-template-rows:340px 240px 240px}.gallery .shot:first-child{grid-row:auto}.spectrum{grid-template-columns:1fr}.voice{min-height:280px}.ops{grid-template-columns:1fr}.ops div:not(:last-child):after{content:"↓";right:auto;bottom:-12px;background:var(--paper)}.nav-right a:nth-child(2){display:none}}

@media(max-width:600px){.section{padding:52px var(--pad)}.head{gap:18px;margin-bottom:24px}.head h2{font-size:clamp(42px,14vw,62px)}.nav{padding:14px var(--pad)}.nav-right{gap:10px}.hero-actions{margin-top:14px}.gallery{grid-template-rows:280px 210px 210px}.panel{padding:20px}.next{padding:52px var(--pad)}}

.case-copyright{padding:24px var(--pad) 30px;background:#0e0e0f;color:rgba(255,255,255,.48);font-size:10px;letter-spacing:.14em;text-transform:uppercase;text-align:center}
