/* HERO only — a black creative canvas with an intact vertical showreel. */
.hero { display:grid; grid-template-columns:40fr 60fr; align-items:center; height:max(680px,100svh); min-height:650px; padding:106px clamp(28px,6vw,96px) 54px; background:#070707; isolation:isolate; }
.hero-content { position:relative; z-index:3; width:min(100%,430px); max-width:none; align-self:center; }
.hero .eyebrow { margin-bottom:20px; }.hero .display { font-size:clamp(2.6rem,4.2vw,4.375rem); line-height:.92; }.hero-jp { margin:26px 0 29px; }
.hero-film { position:relative; z-index:2; justify-self:end; width:min(100%,900px); aspect-ratio:16 / 9; max-width:100%; background:#111; box-shadow:18px 18px 0 #ff3d9a; }
.hero-video { position:static; display:block; width:100%; height:100%; object-fit:contain; object-position:center center; background:#111; }
.hero-shade,.hero-backdrop { display:none; }
.hero-film::after { pointer-events:none; }
.film-corner { position:absolute; z-index:2; width:42px; height:42px; pointer-events:none; }.film-corner-top { top:-12px; right:-12px; border-top:3px solid #ffd52e; border-right:3px solid #ffd52e; }.film-corner-bottom { bottom:-12px; left:-12px; border-bottom:3px solid #18c8ff; border-left:3px solid #18c8ff; }
.scribble { z-index:4; right:clamp(34px,6vw,105px); top:20%; }.hero-doodle { position:absolute; z-index:1; pointer-events:none; }.hero-star { top:24%; left:35%; color:#ffd52e; font-size:clamp(2.2rem,4vw,4rem); transform:rotate(15deg); }.hero-circle { bottom:17%; left:37%; width:clamp(28px,4vw,56px); height:clamp(28px,4vw,56px); border:3px solid #ff6534; border-radius:50%; }.hero-arrow { right:5%; bottom:15%; color:#18c8ff; font:clamp(2rem,4vw,4rem)/1 "Permanent Marker",cursive; transform:rotate(12deg); }.scroll-cue { z-index:4; }
@media (max-width:720px){.hero{display:flex;align-items:flex-end;min-height:720px;padding:120px 20px 86px}.hero-content{width:100%}.hero-film{position:absolute;z-index:0;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;box-shadow:none;background:#050505}.hero-video{object-fit:cover}.hero-film::after{position:absolute;inset:0;content:"";background:linear-gradient(90deg,rgba(0,0,0,.43),transparent 72%),linear-gradient(0deg,rgba(0,0,0,.58),transparent 63%)}.hero .display{font-size:clamp(2.8rem,12vw,3.7rem)}.hero-film + .scribble{right:8%;top:23%}.film-corner,.hero-doodle{display:none}}