@import url('https://fonts.googleapis.com/css2?family=League+Gothic&display=swap');
/* WILTL Studios: render-first showcase. Big pictures that grow as you scroll. */
html,body{overflow-x:clip}
.bleed{width:100vw;margin-left:calc(50% - 50vw);background:#05060d;color:#fff;--gut:clamp(18px,5vw,72px)}
.pjump{display:flex;flex-wrap:wrap;gap:8px;padding:calc(22px) var(--gut) 22px;background:#05060d;position:relative;z-index:2}
.pjump a{display:inline-flex;gap:8px;align-items:center;padding:10px 16px;border-radius:999px;color:#fff;background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font:600 13px/1 Inter,system-ui,Arial,sans-serif;transition:transform .25s,background .25s}
.pjump a b{font-size:11px;padding:3px 8px;border-radius:99px;background:#fff;color:#0b0d18}
.pjump a:hover{transform:translateY(-2px);background:rgba(255,255,255,.28)}
/* pinned hero that grows */
.pscene{position:relative;height:calc(100vh*2.7);height:calc(100svh*2.7);background:#05060d;scroll-margin-top:0}
.pst{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#05060d}
.pst .zm{position:absolute;inset:0;margin:0;display:block;border:0;padding:0;background:none;box-shadow:none}
.pst .zm-img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;background:#05060d;will-change:clip-path;cursor:zoom-in}
.pst .zm-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform;transform:scale(1.3)}
.pst .zm-img:hover img{transform:none}
.pst figcaption{display:none}
.pst .zm-btn{right:var(--gut);bottom:calc(9vh + 2px);z-index:4}
.pscrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,6,13,.6),rgba(5,6,13,0) 28%,rgba(5,6,13,0) 50%,rgba(5,6,13,.88));opacity:0}
.pstxt{position:absolute;left:var(--gut);right:var(--gut);bottom:9vh;pointer-events:none;z-index:3;opacity:0;max-width:1200px}
.pstxt small{display:block;font:700 11px/1 Inter,system-ui,Arial,sans-serif;letter-spacing:.26em;text-transform:uppercase;color:#f5cf8e;margin-bottom:14px}
.pstxt h2{margin:0;font:400 clamp(46px,10vw,150px)/.9 'League Gothic','Bebas Neue',Oswald,Impact,'Arial Narrow Bold',sans-serif;letter-spacing:.015em;text-transform:uppercase;text-shadow:0 6px 40px rgba(0,0,0,.5)}
.pstxt p{margin:16px 0 0;max-width:52ch;font:400 clamp(14px,1.3vw,17px)/1.55 Inter,system-ui,Arial,sans-serif;color:#ffffffd0}
.pdn{display:inline-block;margin-top:16px;font:700 11px/1 Inter,system-ui,Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;opacity:.75}
.pbar{position:absolute;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.15);z-index:5}
.pbar i{display:block;height:100%;background:linear-gradient(90deg,#ff8a3d,#ff3d8b 52%,#7c3aed);transform-origin:0 50%;transform:scaleX(0)}
/* big grid */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.6vw,24px);padding:clamp(10px,1.6vw,24px) clamp(10px,1.6vw,24px) clamp(44px,7vw,110px);background:#05060d}
.pgrid .zm{margin:0;padding:0;border:0;background:none;box-shadow:none;border-radius:0;perspective:1200px}
.pgrid .zm.wide{grid-column:1/-1}
.pgrid .zm-img{aspect-ratio:16/9;border-radius:20px;background:#0b0d18;will-change:clip-path,transform;box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
.pgrid .zm.wide .zm-img{aspect-ratio:2/1}
.pgrid .zm-img img{object-fit:cover;will-change:transform}
.pgrid .zm.dark .zm-img{background:#02030a}.pgrid .zm.dark .zm-img img{object-fit:contain}
.pgrid .zm-btn{opacity:0;transition:opacity .3s}.pgrid .zm-img:hover .zm-btn,.pgrid .zm-img:focus-visible .zm-btn{opacity:1}
.pgrid figcaption{color:#c4c7de;padding:10px 4px 4px;font-size:13px}
.pgrid figcaption small{color:#8a8fb0}
.pplots{background:#05060d;padding:clamp(30px,5vw,70px) 0 0}
.pplots .section-head{padding:0 var(--gut);color:#fff}.pplots .section-head p{color:#c4c7de}
@media(max-width:700px){.pgrid{grid-template-columns:1fr}.pgrid .zm.wide .zm-img{aspect-ratio:16/9}.pscene{height:calc(100svh*2.3)}}
@media (prefers-reduced-motion:reduce){.pscene{height:100svh}.pst .zm-img img{transform:none}}
.bleed .pstxt h2{color:#fff}.bleed .pstxt small{color:#f5cf8e}.bleed .pstxt p{color:#ffffffd6}
.bleed .section-head h2{color:#fff}