/* ============================================================
   Use Cases: six industries, thirty rehearsed decisions.
   One fixed stage behind the page: the industry's own world, out of focus,
   with Talp's population drifting through it. Each industry brings one accent.
   ============================================================ */
.uc-page{ --acc:#f3f3f1; --acc-ink:#0C0C0C; background:#000; }
.uc-page header.site-nav{ position:fixed; left:0; right:0; }

/* ---------- the stage ---------- */
.uc-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:#000; }
.uc-bg-layers{ position:absolute; inset:-6vh 0; }
.uc-bg-layer{ position:absolute; inset:0; opacity:0; transition:opacity 1.8s var(--ease); will-change:opacity, transform; }
.uc-bg-layer.on{ opacity:1; }
.uc-bg-layer img,.uc-bg-layer video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.uc-bg-layer video{ opacity:0; transition:opacity 1.2s var(--ease); }
.uc-bg-layer video.ready{ opacity:1; }
.uc-veil{ position:absolute; inset:0; background:rgba(0,0,0,.52); transition:background 1.2s var(--ease); }
.uc-page[data-zone="scene"] .uc-veil{ background:rgba(0,0,0,.66); }
.uc-pop{ position:absolute; inset:0; width:100%; height:100%; }
.uc-grain{ position:absolute; inset:-50%; opacity:.09; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite; }
@keyframes grain{ 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

.uc{ position:relative; z-index:1; }

/* ---------- reveal: content resolves, the room stays still ---------- */
.rv{ opacity:0; transform:translateY(22px); transition:opacity 1.1s var(--ease), transform 1.4s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.12s } .rv.d2{ transition-delay:.24s } .rv.d3{ transition-delay:.36s } .rv.d4{ transition-delay:.5s }

/* ---------- type ---------- */
.uc-eyebrow{ display:block; font-family:var(--mono); font-size:var(--t-label); letter-spacing:var(--ls-label); line-height:var(--lh-label); text-transform:uppercase; color:var(--fg-mid); }
.uc-display{ font-size:clamp(40px, 3.4vw + 22px, 92px); line-height:1; letter-spacing:-.04em; font-weight:500; max-width:17ch; text-wrap:balance; }
.uc-lede{ font-size:clamp(17px,.3vw + 15.5px,20px); line-height:1.5; color:var(--fg-mid); max-width:56ch; }

/* ---------- intro ---------- */
.uc-intro{ min-height:100vh; display:flex; align-items:flex-end; padding:120px var(--edge) clamp(48px,9vh,110px); }
.uc-intro-in{ display:grid; gap:28px; width:100%; }
.uc-tally{ display:flex; flex-wrap:wrap; gap:18px clamp(28px,5vw,80px); margin-top:8px; }
.uc-tally div{ display:grid; gap:4px; }
.uc-tally b{ font-weight:300; font-size:var(--t-num); line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.uc-tally span{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--fg-dim); }
.uc-index{ display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:10px; }
.uc-index a{ display:inline-flex; align-items:center; gap:10px; font-size:var(--t-ui); color:var(--fg-mid); transition:color .25s; }
.uc-index a i{ width:8px; height:8px; border-radius:50%; background:var(--c); box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.uc-index a:hover{ color:var(--fg); }
.uc-index a span{ font-family:var(--mono); font-size:var(--t-micro); color:var(--fg-dim); }

/* ---------- chapter opener ---------- */
.uc-chapter{ position:relative; }
.uc-open{ min-height:100vh; display:grid; align-content:end; gap:26px; padding:120px var(--edge) clamp(56px,10vh,120px); }
.uc-open .num{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:var(--ls-label); color:var(--fg-mid); text-transform:uppercase; display:flex; gap:14px; align-items:center; }
.uc-open .num i{ width:36px; height:1px; background:var(--acc); }
.uc-open h2{ font-size:clamp(64px, 9vw + 10px, 200px); line-height:.86; letter-spacing:-.055em; font-weight:500; }
.uc-open h2 em{ font-style:normal; color:var(--acc); }
.uc-open p.thesis{ font-size:var(--t-statement); line-height:var(--lh-statement); letter-spacing:var(--ls-statement); max-width:28ch; text-wrap:balance; }
.uc-logos{ display:flex; flex-wrap:wrap; gap:18px 40px; align-items:center; margin-top:12px; }
.uc-logos img{ height:26px; width:auto; max-width:140px; object-fit:contain; opacity:.86; }
.uc-logos span{ font-size:var(--t-ui); color:var(--fg-mid); }

/* ---------- a case scene ---------- */
.uc-scene{ min-height:100vh; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(32px,5vw,96px); align-items:center; padding:clamp(80px,12vh,140px) var(--edge); }
.uc-scene.flip{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); }
.uc-scene.flip .uc-copy{ order:2; } .uc-scene.flip .uc-visual{ order:1; }
.uc-copy{ display:grid; gap:22px; align-content:center; min-width:0; }
.uc-meta{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; font-family:var(--mono); font-size:var(--t-label); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--fg-mid); }
.uc-meta b{ font-weight:400; color:var(--acc); }
.uc-brand{ display:flex; align-items:center; gap:14px; min-height:30px; }
.uc-brand img{ height:28px; width:auto; max-width:170px; object-fit:contain; }
.uc-brand img.mono,.uc-logos img.mono{ filter:brightness(0) invert(1); }
.uc-brand img.raster,.uc-logos img.raster{ border-radius:6px; height:30px; }
.uc-brand span{ font-size:var(--t-ui); color:var(--fg-mid); }
.uc-scene h3{ font-size:clamp(30px, 1.6vw + 22px, 54px); line-height:1.02; letter-spacing:-.035em; font-weight:500; max-width:18ch; text-wrap:balance; }
.uc-q{ font-size:var(--t-lede); line-height:1.5; color:var(--fg-mid); max-width:48ch; }
.uc-fig{ display:grid; grid-template-columns:auto minmax(0,30ch); gap:6px 22px; align-items:end; }
.uc-fig b{ font-weight:300; font-size:clamp(72px, 4vw + 48px, 132px); line-height:.86; letter-spacing:-.055em; color:var(--acc); font-variant-numeric:tabular-nums; white-space:nowrap; }
.uc-fig b small{ font-size:.34em; letter-spacing:-.02em; color:var(--fg); margin-left:.1em; }
.uc-fig p{ font-size:var(--t-body); line-height:1.45; max-width:30ch; padding-bottom:.4em; }
.uc-fig.wide{ grid-template-columns:1fr; gap:14px; }
.uc-fig.wide p{ max-width:46ch; padding-bottom:0; }

/* the mini proof: the case's own split, drawn as one instrument line */
.uc-mini{ display:grid; gap:8px; max-width:520px; }
.uc-mini .row{ display:grid; grid-template-columns:136px minmax(0,1fr) 72px; gap:12px; align-items:center; font-family:var(--mono); font-size:var(--t-small); color:var(--fg-mid); }
.uc-mini .row b{ font-weight:400; color:var(--fg); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.uc-mini .row > span:first-child{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.uc-mini .track{ display:flex; height:10px; border-radius:2px; overflow:hidden; background:rgba(255,255,250,.08); }
.uc-mini .track i{ display:block; height:100%; width:0; transition:width 1.6s var(--ease); }
.uc-mini .track i.t0{ background:var(--acc); } .uc-mini .track i.t1{ background:rgba(255,255,250,.6); } .uc-mini .track i.t2{ background:rgba(255,255,250,.3); } .uc-mini .track i.t3{ background:rgba(255,255,250,.14); }
.uc-mini .key{ display:flex; flex-wrap:wrap; gap:4px 14px; font-family:var(--mono); font-size:var(--t-micro); color:var(--fg-dim); }
.uc-mini .key i{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px; vertical-align:0; }

.uc-voice{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; align-items:start; max-width:52ch; }
.uc-voice img{ width:44px; height:44px; border-radius:50%; object-fit:cover; background:rgba(255,255,250,.08); }
.uc-voice blockquote{ font-size:var(--t-body); line-height:1.5; color:var(--fg); }
.uc-voice blockquote::before{ content:"\201C"; } .uc-voice blockquote::after{ content:"\201D"; }
.uc-voice cite{ display:block; margin-top:6px; font-style:normal; font-size:var(--t-small); color:var(--fg-dim); }
.uc-open-file{ justify-self:start; display:inline-flex; align-items:center; gap:12px; font-size:var(--t-ui); padding:11px 20px; border-radius:999px; border:1px solid rgba(255,255,250,.28); color:var(--fg); transition:background .25s var(--ease), color .25s, border-color .25s; }
.uc-open-file svg{ width:13px; height:13px; }
.uc-open-file:hover{ background:var(--acc); border-color:var(--acc); color:#000; }

/* the visual: the industry's own photograph, with the run's real evidence clipped on */
.uc-visual{ position:relative; min-width:0; }
.uc-print{ position:relative; aspect-ratio:4/5; border-radius:6px; overflow:hidden; background:#0c0c0e;
  box-shadow:0 60px 120px -40px rgba(0,0,0,1), 0 4px 18px rgba(0,0,0,.6); }
.uc-print img{ position:absolute; inset:-8% 0; width:100%; height:116%; object-fit:cover; will-change:transform; }
.uc-print .cap{ position:absolute; left:16px; right:16px; bottom:14px; display:flex; justify-content:space-between; gap:12px; font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,250,.82); text-shadow:0 1px 8px rgba(0,0,0,.6); }
.uc-evidence{ position:absolute; width:min(44%,260px); right:-6%; bottom:9%; border-radius:6px; overflow:hidden; background:#fff;
  box-shadow:0 40px 80px -30px rgba(0,0,0,1), 0 2px 12px rgba(0,0,0,.6); will-change:transform; }
.uc-scene.flip .uc-evidence{ right:auto; left:-6%; }
.uc-evidence img{ width:100%; height:auto; display:block; }
.uc-evidence.phone{ width:min(32%,190px); border-radius:18px; }
.uc-evidence.frames{ display:grid; grid-template-columns:1fr 1fr; gap:3px; background:#000; padding:3px; width:min(46%,280px); }
.uc-evidence.frames img{ aspect-ratio:9/16; object-fit:cover; border-radius:3px; }

/* ---------- outro ---------- */
.uc-outro{ min-height:90vh; display:grid; align-content:center; gap:26px; padding:120px var(--edge); }
.uc-cta{ justify-self:start; display:inline-flex; align-items:center; gap:12px; font-size:var(--t-ui); padding:13px 24px; border-radius:999px; background:var(--fg); color:#000; }
.uc-cta svg{ width:13px; height:13px; }

@media (max-width:1180px){ .uc-fig{ grid-template-columns:1fr; } .uc-fig p{ max-width:42ch; padding-bottom:0; } }
@media (max-width:900px){
  .uc-scene,.uc-scene.flip{ grid-template-columns:1fr; }
  .uc-scene.flip .uc-copy{ order:1; } .uc-scene.flip .uc-visual{ order:2; }
  .uc-evidence,.uc-scene.flip .uc-evidence{ right:4%; left:auto; }
}
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  .uc-grain{ animation:none; }
}