/* A contained brand illustration. The surrounding design brief stays readable. */
.hero{padding-top:62px;padding-bottom:44px}
.hero-intro{display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:24px}
.hero-copy{position:relative;min-width:0}
.hero-copy .word{font-size:clamp(44px,5.4vw,70px)}
.hero-copy .lockup{gap:16px;margin-top:22px}
.hero-copy .lockup svg{width:52px;height:52px}
.hero-copy .lede{font-size:20px;max-width:30ch}
.cell-journey{min-width:0;position:relative}
.cell-stage{position:relative;height:430px;overflow:hidden;background:#0b0a09;isolation:isolate}
.cell-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0b0a09,transparent 11%,transparent 89%,#0b0a09),linear-gradient(0deg,#0b0a09,transparent 16%,transparent 87%,#0b0a09)}
.cell-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.cell-stage canvas[hidden]{display:none}
.cell-veil{position:absolute;inset:0;background:#0b0a09;opacity:0;pointer-events:none;z-index:1}
.cell-stage::after{z-index:2}
.cell-controls{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-height:44px;border-top:1px solid var(--line)}
.cell-controls p{margin:0 auto 0 0;font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.cell-controls button{font:11px var(--mono);color:var(--text);background:transparent;border:0;padding:12px 4px;min-height:44px;cursor:pointer;white-space:nowrap}
.cell-controls button:hover{color:var(--accent)}
.cell-controls button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cell-controls button:active{transform:translateY(1px)}
.cell-controls button[hidden]{display:none}
.cell-note{font:10px/1.6 var(--mono);color:var(--text-3);margin:9px 0 0}
/* Static structural silhouette remains when WebGL or JavaScript is unavailable. */
.cell-still{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 53% 48%,#1f1d1b 0,transparent 62%);perspective:320px}
.cell-still i{position:absolute;width:48px;height:620px;top:-85px;border:1px solid #7c7161;border-radius:45%;background:repeating-linear-gradient(0deg,transparent 0 30px,#b5a58e35 31px 34px,transparent 35px 48px),linear-gradient(90deg,#141312,#655e52 36%,#a29886 48%,#39352e 65%,#141312);transform:rotate(28deg);opacity:.48}
.cell-still i:nth-child(1){left:0;transform:rotate(38deg)}
.cell-still i:nth-child(2){left:13%;transform:rotate(31deg)}
.cell-still i:nth-child(3){left:27%;transform:rotate(20deg);opacity:.25}
.cell-still i:nth-child(4){right:27%;transform:rotate(-20deg);opacity:.25}
.cell-still i:nth-child(5){right:13%;transform:rotate(-31deg)}
.cell-still i:nth-child(6){right:0;transform:rotate(-38deg)}
.cell-stage[data-rendered] .cell-still{visibility:hidden}
@media(max-width:760px){
  .hero{padding-top:36px}
  .hero-intro{grid-template-columns:1fr;gap:12px}
  .hero-copy .word{font-size:clamp(44px,10vw,64px)}
  .hero-copy .lede{font-size:18px;max-width:38ch;margin-bottom:0}
  .cell-stage{height:clamp(280px,85vw,410px)}
  .casefile{margin-top:30px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}