.hero{isolation:isolate;overflow:hidden}
.hero>.wrap{position:relative;z-index:2;width:100%;pointer-events:none}
.hero a{pointer-events:auto}
#portrait-scene{position:absolute;inset:0 0 0 46%;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.2s ease;background:radial-gradient(ellipse at 55% 46%,rgba(245,197,24,.07),transparent 66%)}
#portrait-canvas{display:block;width:100%;height:100%;mask-image:linear-gradient(to bottom,transparent 4%,black 20%,black 78%,transparent 98%)}
.portrait-ready #portrait-scene{opacity:1}
.portrait-ready .portrait{visibility:hidden}
.portrait-ready .hero-grid{grid-template-columns:1.18fr 1fr;gap:35px}
.hero-stats{position:relative;padding-top:22px;border-top:1px solid rgba(245,197,24,.13);text-shadow:0 2px 12px #0b0b10}
@media(max-width:900px){
 .hero{padding-top:110px;padding-bottom:48px}
 .portrait-ready .hero-grid{grid-template-columns:1fr}
 .portrait-ready .portrait{height:340px;margin:0;width:100%;max-width:none}
 #portrait-scene{inset:auto 0 auto 0;height:390px}
 .hero-stats{gap:24px;margin-top:24px}
 .hero p.lead{font-size:1.02rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#portrait-scene{transition:none}}

/* Persistent cinematic stage: content moves over the viewport-anchored model. */
.flagship{padding:44px;margin-bottom:28px;border:1px solid rgba(245,197,24,.35);border-radius:24px;background:linear-gradient(130deg,rgba(48,36,22,.96),rgba(22,22,31,.92));max-width:960px}
.flagship .kicker,.story-link .kicker{color:var(--accent2);font-size:.76rem;letter-spacing:.13em;text-transform:uppercase}
.flagship h2{margin:14px 0 22px;font-size:clamp(2rem,4vw,3.3rem)}
.flagship h2 span{display:inline-block;color:var(--accent);font-size:.65em;margin-left:12px}
.flagship p{max-width:760px;color:#c7c5cc;margin-bottom:24px}
.flagship .flagship-lead{font-size:1.3rem;color:var(--text)}
.project-credits{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.project-credits span{font-size:.8rem;color:var(--accent);padding:7px 12px;border:1px solid rgba(245,197,24,.2);border-radius:99px}
.selected-stories{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:72px}
.story-link{display:block;background:rgba(22,22,31,.94);border:1px solid var(--line);padding:30px;border-radius:18px;transition:border-color .2s}
.story-link:hover,.story-link:focus-visible{border-color:var(--accent)}
.story-link h3{font-size:1.35rem;margin:15px 0}.story-link p{color:#b9b7c1;margin-bottom:22px}.story-cta{color:var(--accent);font-weight:600}
@media(max-width:700px){.flagship{padding:26px}.selected-stories{grid-template-columns:1fr}.flagship .btn{width:100%;justify-content:center}}
body{isolation:isolate}
.experiment-thumb{display:block;position:relative;margin:-28px -28px 24px;background:#070606;aspect-ratio:16/11;overflow:hidden;border-bottom:1px solid var(--line)}
.experiment-thumb img{width:100%;height:100%;object-fit:contain;transition:transform .3s ease}
.experiment-thumb:hover img{transform:scale(1.04)}
.experiment-thumb span{position:absolute;bottom:14px;left:14px;background:rgba(7,6,6,.85);color:var(--accent);padding:8px 12px;border-radius:99px;font-size:.8rem;font-weight:600}
.experiment-thumb:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
@media(prefers-reduced-motion:reduce){.experiment-thumb img{transition:none}.experiment-thumb:hover img{transform:none}}
.instagram-card{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding:38px;border:1px solid rgba(177,80,218,.4);border-radius:24px;background:linear-gradient(120deg,rgba(63,30,79,.95),rgba(22,22,31,.96) 65%,rgba(80,42,26,.90))}
.instagram-card>div:nth-child(2){flex:1;min-width:0}.instagram-card h2{font-size:clamp(1.4rem,4vw,2rem);overflow-wrap:anywhere}.instagram-card p{color:#d1cad8;margin:10px 0 4px}.instagram-card small{color:#b1a6ba}.instagram-card .kicker{color:#d6a1fa;font-size:.8rem;text-transform:uppercase;letter-spacing:.15em}.instagram-mark{width:76px;height:76px;display:grid;place-items:center;border-radius:22px;font-size:54px;background:linear-gradient(140deg,#6549cf,#cc3d83,#ef9b42)}
@media(max-width:600px){.instagram-card{padding:26px;gap:20px}.instagram-card>.btn{width:100%;justify-content:center}.instagram-mark{width:56px;height:56px;font-size:40px}}
#portrait-scene{position:fixed;inset:0 0 0 43%;height:auto;z-index:-1;background:radial-gradient(ellipse at 55% 42%,rgba(220,123,38,.13),transparent 58%),radial-gradient(ellipse at 85% 75%,rgba(68,80,156,.14),transparent 60%)}
.cinematic-ready #portrait-scene{opacity:1}
.cinematic-ready .hero{isolation:auto;background:linear-gradient(90deg,rgba(11,11,16,.96),rgba(11,11,16,.86) 34%,rgba(11,11,16,.08) 69%,transparent)}
.hero>.wrap{pointer-events:auto}
.cinematic-ready section{position:relative;background:linear-gradient(90deg,rgba(11,11,16,.96),rgba(11,11,16,.82) 42%,rgba(11,11,16,.38))}
.cinematic-ready .about,.cinematic-ready .work,.cinematic-ready .lab{background:linear-gradient(90deg,rgba(18,18,26,.97),rgba(18,18,26,.87) 42%,rgba(18,18,26,.48))}
.cinematic-ready .clients,.cinematic-ready .vcard,.cinematic-ready .app,.cinematic-ready .ccard{background:rgba(22,22,31,.83);backdrop-filter:blur(5px)}
.cinematic-ready footer{background:rgba(11,11,16,.83)}
@media(max-width:900px){
 #portrait-scene{inset:48px -25% 0 10%;height:auto}
 .portrait-ready .portrait{display:none}
 .cinematic-ready .hero{background:linear-gradient(90deg,rgba(11,11,16,.94),rgba(11,11,16,.76) 64%,rgba(11,11,16,.50))}
 .cinematic-ready section,.cinematic-ready .about,.cinematic-ready .work,.cinematic-ready .lab{background:rgba(11,11,16,.83)}
}