*{box-sizing:border-box;margin:0;padding:0}
:root{--red:#ef1824;--white:#f8f8f5;--muted:rgba(255,255,255,.72)}
html,body{width:100%;min-height:100%;background:#03070b}
body{font-family:Arial,Helvetica,sans-serif;color:var(--white);overflow-x:hidden}
a{color:inherit;text-decoration:none}
.hero{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;background:#03070b}
.hero-bg{position:absolute;inset:-4%;z-index:-4;background:url('../assets/images/bg.webp') center center/cover no-repeat;transform:scale(1.035);animation:bgDrift 24s ease-in-out infinite alternate;will-change:transform}
.hero-vignette{position:absolute;inset:0;z-index:-3;background:radial-gradient(circle at 54% 45%,transparent 0 26%,rgba(0,0,0,.18) 58%,rgba(0,0,0,.65) 100%),linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.12) 55%,rgba(0,0,0,.45))}
.topbar{position:absolute;z-index:10;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:20px clamp(22px,4vw,76px)}
.brand img{display:block;width:clamp(125px,10.5vw,195px);height:auto;filter:drop-shadow(0 3px 12px rgba(0,0,0,.55))}
.nav{display:flex;align-items:center;gap:clamp(20px,2.7vw,45px);padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.15);font-size:11px;font-weight:800;letter-spacing:.19em;text-transform:uppercase}
.nav a{position:relative;padding:8px 0;text-shadow:0 2px 7px #000}.nav a:after{content:"";position:absolute;left:0;bottom:-11px;width:0;height:2px;background:var(--red);transition:width .25s ease}.nav a:hover:after{width:100%}
.hero-copy{position:absolute;z-index:3;left:50%;top:52%;width:min(1020px,76vw);transform:translate(-50%,-50%);text-align:center}
.eyebrow{display:flex;justify-content:center;align-items:center;gap:clamp(12px,1.6vw,26px);margin-bottom:16px;font-size:clamp(10px,1vw,15px);font-weight:800;letter-spacing:.34em;text-shadow:0 2px 10px #000}.eyebrow i{display:block;width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 12px rgba(239,24,36,.9)}
.title{position:relative;display:flex;justify-content:center;font-size:clamp(76px,10.8vw,192px);line-height:.8;letter-spacing:-.065em;text-transform:uppercase;white-space:nowrap;filter:drop-shadow(0 10px 18px rgba(0,0,0,.7));animation:titlePulse 5.8s ease-in-out infinite;transform-origin:center}
.title-fill{display:block;font-weight:950;color:transparent;-webkit-text-stroke:2px rgba(245,250,255,.92);background:url('../assets/images/bg.webp') 50% 52%/155% auto no-repeat;-webkit-background-clip:text;background-clip:text;filter:saturate(1.25) contrast(1.08) brightness(1.2);animation:textMove 16s ease-in-out infinite alternate,textGlow 5.8s ease-in-out infinite}
.tagline{margin:25px auto 0;width:min(760px,80%);text-shadow:0 2px 10px #000}.tagline h2{font-size:clamp(17px,1.55vw,28px);letter-spacing:.28em;font-weight:800}.tagline h3{font-size:clamp(13px,1.2vw,20px);letter-spacing:.31em;font-weight:400;color:rgba(255,255,255,.9)}
.pulse-line{position:relative;height:14px;margin:5px 0 3px}.pulse-line:before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:linear-gradient(90deg,transparent,var(--red) 14%,var(--red) 86%,transparent);opacity:.8}.pulse-line span{position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;background:#ff2530;transform:translate(-50%,-50%);box-shadow:0 0 8px #ff2530,0 0 24px #ff2530;animation:heartBeat 2.9s ease-in-out infinite}
.enter{margin:28px auto 0;width:min(255px,80vw);min-height:58px;display:flex;align-items:center;justify-content:center;gap:28px;background:linear-gradient(135deg,#e41420,#ff2631);border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 30px rgba(0,0,0,.32);font-size:12px;font-weight:900;letter-spacing:.15em;transition:transform .22s ease,box-shadow .22s ease}.enter:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(239,24,36,.25)}.enter span:last-child{font-size:19px;font-weight:400}
.scroll{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;font-size:8px;font-weight:800;letter-spacing:.38em;color:rgba(255,255,255,.7)}.scroll b{font-size:15px;font-weight:400;animation:scrollBob 1.8s ease-in-out infinite}
@keyframes bgDrift{0%{transform:scale(1.035) translate3d(0,0,0)}100%{transform:scale(1.085) translate3d(-.45%,.25%,0)}}
@keyframes textMove{0%{background-position:38% 50%}100%{background-position:68% 56%}}
@keyframes titlePulse{0%,100%{transform:scale(1)}48%{transform:scale(1.012)}55%{transform:scale(1.018)}62%{transform:scale(1.008)}}
@keyframes textGlow{0%,100%{filter:saturate(1.2) contrast(1.08) brightness(1.15);text-shadow:0 0 0 rgba(239,24,36,0)}52%{filter:saturate(1.45) contrast(1.1) brightness(1.3);text-shadow:0 0 13px rgba(239,24,36,.42)}}
@keyframes heartBeat{0%,38%,100%{transform:translate(-50%,-50%) scale(.8);opacity:.65}45%{transform:translate(-50%,-50%) scale(1.45);opacity:1}52%{transform:translate(-50%,-50%) scale(.9)}58%{transform:translate(-50%,-50%) scale(1.2);opacity:1}}
@keyframes scrollBob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(5px);opacity:1}}
@media(max-width:1024px){.hero-copy{width:88vw;top:53%}.title{font-size:clamp(70px,13vw,135px)}.nav{gap:20px;font-size:9px}.tagline{width:82%}}
@media(max-width:760px){.hero-bg{inset:-2%;background-position:44% center;animation:bgDriftMobile 24s ease-in-out infinite alternate}.hero-vignette{background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.12) 28%,rgba(0,0,0,.35) 64%,rgba(0,0,0,.76))}.topbar{padding:14px 17px}.brand img{width:118px}.nav{gap:14px;font-size:8px;letter-spacing:.11em}.nav a:nth-child(2),.nav a:nth-child(3){display:none}.hero-copy{top:54%;width:94vw}.eyebrow{gap:8px;font-size:8px;letter-spacing:.16em;margin-bottom:15px}.eyebrow i{width:5px;height:5px}.title{font-size:clamp(52px,16.8vw,104px);letter-spacing:-.07em;white-space:nowrap}.title-fill{background-size:270% auto;-webkit-text-stroke:1px rgba(245,250,255,.94)}.tagline{margin-top:20px;width:94%}.tagline h2{font-size:clamp(13px,4vw,18px);letter-spacing:.16em}.tagline h3{font-size:clamp(10px,3.2vw,14px);letter-spacing:.18em}.enter{margin-top:22px;min-height:54px}.scroll{bottom:13px}}
@media(max-width:430px){.nav a:last-child{font-size:7px}.hero-copy{top:55%}.eyebrow{letter-spacing:.1em}.title{font-size:16.4vw}.tagline h2{letter-spacing:.12em}.tagline h3{letter-spacing:.13em}}
@media(max-height:680px) and (max-width:760px){.hero-copy{top:56%}.tagline{margin-top:14px}.enter{margin-top:14px;min-height:48px}.scroll{display:none}}
@keyframes bgDriftMobile{0%{transform:scale(1.03)}100%{transform:scale(1.07) translate3d(-.35%,.2%,0)}}
@media(prefers-reduced-motion:reduce){.hero-bg,.title,.title-fill,.pulse-line span,.scroll b{animation:none}.enter,.nav a:after{transition:none}}
/* V3 demo trailer: independent cinematic montage simulated inside the title. Replace with real footage later. */
.title-fill{background-image:linear-gradient(110deg,rgba(4,12,20,.20),rgba(255,180,75,.08),rgba(0,120,190,.16)),url('../assets/images/trailer-demo.png');background-size:cover,165% auto;background-position:center,20% 50%;animation:trailerPan 13s steps(1,end) infinite,textGlowCalm 5.8s ease-in-out infinite}
.socials{display:flex;gap:11px;align-items:center;font-size:9px;font-weight:900;letter-spacing:.08em}.socials a{width:29px;height:29px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(0,0,0,.22);transition:.2s}.socials a:hover{border-color:rgba(255,255,255,.78);background:rgba(255,255,255,.10);transform:translateY(-1px)}.socials svg{width:14px;height:14px;fill:#fff;stroke:none}.socials svg rect,.socials svg circle,.socials svg path{vector-effect:non-scaling-stroke}.socials a[aria-label="Instagram"] svg,.socials a[aria-label="Email MtlStreets"] svg{fill:none;stroke:#fff;stroke-width:1.7}.socials a[aria-label="Instagram"] .fill-dot{fill:#fff;stroke:none}.socials a[aria-label="YouTube"] .cut{fill:#03070b}
@keyframes trailerPan{0%,19%{background-position:center,10% 50%}20%,39%{background-position:center,32% 48%}40%,59%{background-position:center,52% 53%}60%,79%{background-position:center,72% 48%}80%,100%{background-position:center,92% 52%}}
@media(max-width:1100px){.socials{display:none}}
@media(prefers-reduced-motion:reduce){.title-fill{animation:none;background-position:center}}

@keyframes textGlowCalm{0%,100%{filter:saturate(.72) contrast(1.08) brightness(1.08);text-shadow:0 0 0 rgba(90,170,220,0)}52%{filter:saturate(.88) contrast(1.1) brightness(1.18);text-shadow:0 0 10px rgba(90,170,220,.20)}}
.site-signature{position:absolute;z-index:8;left:clamp(18px,4vw,76px);bottom:20px;font-size:9px;font-weight:700;letter-spacing:.18em;color:rgba(255,255,255,.68);text-shadow:0 2px 8px #000}.site-signature span{color:rgba(255,255,255,.45)}
@media(max-width:760px){.site-signature{left:17px;bottom:14px;font-size:7px;letter-spacing:.12em}.topbar{gap:10px}.socials{display:flex;position:absolute;right:17px;top:66px;gap:7px}.socials a{width:25px;height:25px}.socials svg{width:12px;height:12px}}
@media(max-width:430px){.socials{right:12px;top:62px;gap:5px}.socials a{width:23px;height:23px}.site-signature{max-width:70%;line-height:1.5}}

/* V3.2 REAL VIDEO TRAILER TEST — video is composited into MTLSTREETS with canvas. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.title{position:relative;display:block}
.title-video-wrap{display:block;width:100%;height:1.03em;filter:drop-shadow(0 0 1px rgba(255,255,255,.75)) drop-shadow(0 0 13px rgba(0,0,0,.55));animation:titlePulse 5.8s ease-in-out infinite;transform-origin:center center}
.title-video-canvas{display:block;width:100%;height:100%}
.title-video-source{position:fixed;left:-9999px;top:-9999px;width:2px;height:2px;opacity:.001;pointer-events:none}
@keyframes titlePulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 1px rgba(255,255,255,.72)) drop-shadow(0 0 12px rgba(0,0,0,.55))}50%{transform:scale(1.012);filter:drop-shadow(0 0 2px rgba(255,255,255,.9)) drop-shadow(0 0 18px rgba(20,115,170,.22))}}
@media(prefers-reduced-motion:reduce){.title-video-wrap{animation:none}.title-video-source{display:none}}


/* Production layout overrides */
.brand{transition:opacity .2s ease}.brand:hover{opacity:.82}
.brand:focus-visible,.nav a:focus-visible,.socials a:focus-visible,.enter:focus-visible,.privacy:focus-visible{outline:2px solid #fff;outline-offset:4px}
.footer{position:absolute;z-index:8;left:clamp(18px,4vw,76px);right:clamp(18px,4vw,76px);bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:9px;font-weight:700;letter-spacing:.18em;color:rgba(255,255,255,.68);text-shadow:0 2px 8px #000}
.footer .site-signature{position:static;left:auto;bottom:auto;color:inherit;font:inherit;letter-spacing:inherit;text-shadow:inherit;text-align:right}
.privacy{transition:color .2s ease}.privacy:hover{color:#fff}
@media(max-width:760px){
  .hero-bg{animation:bgDriftPhone 30s ease-in-out infinite alternate}
  .nav{gap:13px;font-size:7.5px;letter-spacing:.09em}
  .nav a:nth-child(2),.nav a:nth-child(3){display:none}
  .footer{left:17px;right:17px;bottom:14px;font-size:7px;letter-spacing:.1em;gap:12px}
  .footer .site-signature{max-width:60%;line-height:1.45}
}
@media(min-width:761px) and (max-width:1024px){.hero-bg{animation:bgDriftTablet 28s ease-in-out infinite alternate}}
@media(max-width:430px){.footer{align-items:flex-end}.privacy{max-width:34%;line-height:1.45}.footer .site-signature{max-width:62%}}
@keyframes bgDriftTablet{0%{transform:scale(1.03)}100%{transform:scale(1.055) translate3d(-.22%,.12%,0)}}
@keyframes bgDriftPhone{0%{transform:scale(1.025)}100%{transform:scale(1.045) translate3d(-.15%,.08%,0)}}
@media(prefers-reduced-motion:reduce){.hero-bg,.title-video-wrap,.pulse-line span{animation:none!important}.brand,.privacy{transition:none}}

/* Production social icon refinement: recognizable monochrome marks with restrained brand-color hover. */
.socials a{color:#fff}
.socials svg{fill:currentColor;stroke:none}
.socials .social-instagram svg,.socials .social-email svg{fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.socials .social-instagram .icon-dot{fill:currentColor;stroke:none}
.socials .social-youtube .play{fill:#080b0f}
.socials .social-tiktok:hover{color:#25f4ee}
.socials .social-instagram:hover{color:#e4405f}
.socials .social-youtube:hover{color:#ff0033}
.socials .social-facebook:hover{color:#4b8df8}
.socials .social-x:hover,.socials .social-email:hover{color:#fff}