/* Ponking motion treatment. Video stays behind every interactive element. */
.hero--cinematic{isolation:isolate;min-height:min(860px,calc(100svh - 86px));display:flex;flex-direction:column;justify-content:flex-end;background:#130d14}
.hero-film{position:absolute;inset:0;z-index:-3;overflow:hidden;background:#201022}
.hero-film>video,.hero-film>.film-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(.2) saturate(.78) contrast(1.12) brightness(.82)}
.hero-film>video{opacity:0;transition:opacity 1.1s ease}
.video-loaded .hero-film>video{opacity:1}
.hero-film:after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,#84297569 0%,#82116b2b 45%,#d638983d 100%);mix-blend-mode:color;pointer-events:none}
.hero-vignette{position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,rgba(11,9,13,.92) 0%,rgba(11,9,13,.60) 35%,rgba(11,9,13,.08) 68%),linear-gradient(0deg,#100d12 0%,rgba(16,13,18,.55) 16%,transparent 56%,rgba(16,13,18,.4) 100%)}
.hero--cinematic:after{z-index:-1;opacity:.11}
.film-frame{position:absolute;inset:30px 3%;pointer-events:none;z-index:1;border-left:1px solid #ffffff18;border-right:1px solid #ffffff18}
.film-frame:before,.film-frame:after{content:"";position:absolute;width:22px;height:22px;border-top:1px solid #ffffff60;top:0}
.film-frame:before{left:-1px;border-left:1px solid #ffffff60}.film-frame:after{right:-1px;border-right:1px solid #ffffff60}
.film-index{position:absolute;left:6.25%;right:6.25%;top:32px;display:flex;justify-content:space-between;gap:20px;align-items:center;z-index:2;color:#d0c3cf;font-size:.75rem;letter-spacing:.14em}
.film-index>span:last-child{color:#ac90a8;letter-spacing:.06em}
.hero--cinematic .hero-backdrop{top:10%;left:40%;font-size:clamp(220px,33vw,510px);opacity:.5;-webkit-text-stroke:1px #ffffff19;z-index:-1;transform:rotate(-9deg)}
.hero--cinematic .hero-inner{position:relative;margin:0 auto;width:100%;padding-top:155px;padding-bottom:49px;min-height:640px;display:block;z-index:2}
.hero--cinematic .hero-copy{max-width:760px}
.hero--cinematic .hero-copy>.eyebrow{color:#e1d3df;letter-spacing:.15em}
.hero--cinematic h1{font-size:clamp(5.5rem,10.4vw,9.5rem);line-height:.87;letter-spacing:-.02em;margin:27px 0 33px;transform:rotate(-2deg);transform-origin:left center;text-shadow:0 7px 35px #0005}
.hero--cinematic h1>span{display:inline-block;margin-left:35px;color:#ff58e8}
.hero--cinematic .hero-description{max-width:390px;color:#c7bbc8;line-height:1.75}
.hero--cinematic .hero-actions{margin-top:26px;gap:28px}
.hero--cinematic .button-primary{box-shadow:6px 6px 0 #ff3ee42c;border-radius:0}
.hero--cinematic .hero-meta{margin-top:29px;color:#a08fa3}
.hero--cinematic .product-label{color:#c4aec4;border-color:#89708866;background:#140b1459}
.hero--cinematic .hero-art{position:absolute;right:7%;bottom:60px;width:150px;height:auto;min-height:0;max-height:none;margin:0;display:block;transform:rotate(8deg)}
.hero--cinematic .hero-art>img{display:block;width:100%;height:auto;max-height:none;filter:drop-shadow(0 7px 10px #0005);transform:none;animation:none;padding:0}
.hero--cinematic .hero-art figcaption{position:static;font-size:.75rem;display:block;text-align:center;margin-top:12px;letter-spacing:.12em;color:#dcb6d6}
.hero-bottom{position:relative;z-index:3;margin-inline:6.25%;padding-block:20px 25px;border-top:1px solid #ffffff24;display:flex;align-items:center;justify-content:space-between;gap:20px}
.hero-bottom .hero-scroll{border:0;margin:0;padding:6px 0;gap:36px;color:#c0aabe;font-size:.75rem;letter-spacing:.12em}
.video-toggle{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid #bc9cb04a;border-radius:2px;background:#160d195e;backdrop-filter:blur(12px);padding:11px 15px;font-size:.75rem;color:#e9dbe6;min-height:44px}
.video-toggle:hover{border-color:#ff77e6;color:#ff77e6}.video-toggle svg{width:15px;height:15px}.video-toggle[hidden]{display:none}
.hero--cinematic+.manifesto-strip{background:#fa44df;border-block:5px solid #101011;font-size:1.75rem;padding-block:17px;letter-spacing:.025em}
@media(min-width:1500px){.hero--cinematic{min-height:880px}.hero--cinematic .hero-inner{padding-top:170px;min-height:690px}.hero--cinematic .hero-art{right:8%;width:190px}}
@media(max-width:1000px){.hero--cinematic{min-height:740px}.hero--cinematic .hero-inner{padding-inline:6.25%;padding-top:145px}.hero--cinematic h1{font-size:clamp(5.5rem,11.5vw,8rem)}.hero--cinematic .hero-art{right:7%;width:130px;bottom:55px}.hero-vignette{background:linear-gradient(90deg,#0c080feb,rgba(12,8,15,.55) 64%,rgba(12,8,15,.2)),linear-gradient(0deg,#100d12,transparent 75%)}.hero--cinematic .hero-copy{max-width:660px}}
@media(max-width:600px){.hero--cinematic{min-height:780px;min-height:max(780px,calc(100svh - 70px))}.hero-film>video,.hero-film>.film-poster{object-position:62% center;filter:grayscale(.2) saturate(.75) contrast(1.08) brightness(.82)}.hero-vignette{background:linear-gradient(0deg,#100a13 1%,rgba(16,10,19,.85) 25%,rgba(16,10,19,.38) 67%,rgba(16,10,19,.14)),linear-gradient(90deg,#100a133d,transparent)}.film-frame{inset:19px 4%;border-color:#ffffff12}.film-index{top:22px;left:8%;right:8%;font-size:.625rem;letter-spacing:.1em}.film-index>span:last-child{font-size:.625rem}.hero--cinematic .hero-backdrop{top:15%;left:0;font-size:40vw}.hero--cinematic .hero-inner{padding:270px 7% 28px;min-height:0}.hero--cinematic .hero-copy{max-width:none}.hero--cinematic .hero-copy>.eyebrow{font-size:.6875rem;letter-spacing:.06em;gap:8px}.hero--cinematic h1{font-size:clamp(3.9rem,15.1vw,5.7rem);margin:25px 0 25px;line-height:.9;letter-spacing:-.025em}.hero--cinematic h1>span{margin-left:16px}.hero--cinematic .hero-description{font-size:1rem;max-width:350px}.hero--cinematic .hero-actions{gap:18px;flex-direction:row;align-items:center;margin-top:23px}.hero--cinematic .hero-actions .button{font-size:.8125rem}.hero--cinematic .hero-actions .text-link{font-size:.8125rem}.hero--cinematic .hero-meta{font-size:.75rem;gap:10px;line-height:1.6;margin-top:26px}.hero--cinematic .hero-art{top:78px;bottom:auto;right:9%;width:91px}.hero--cinematic .hero-art figcaption{font-size:.625rem;letter-spacing:.08em}.hero-bottom{margin-inline:7%;padding:17px 0 21px;gap:12px}.hero-bottom .hero-scroll{font-size:.625rem;letter-spacing:.05em;gap:12px;max-width:190px}.video-toggle{font-size:.75rem;gap:8px;padding-inline:10px;flex-shrink:0}.hero--cinematic+.manifesto-strip{font-size:1.2rem}}
@media(prefers-reduced-motion:reduce){.hero-film>video{transition:none}}

/* Scene navigation keeps the artwork in the foreground of the composition. */
.film-scenes{display:flex;align-items:center;gap:10px}
.film-scenes[hidden]{display:none}
.film-select{display:flex;align-items:center;gap:10px;padding:13px 17px;min-height:44px;color:#c1adbd;background:#130b174f;border:1px solid transparent;border-radius:2px;font-size:.75rem;letter-spacing:.035em;transition:background .2s,border-color .2s,color .2s}
.film-select>span{color:#a88ba0;font-size:.75rem}
.film-select:hover{color:#fff;background:#ffffff0b}
.film-select.active{border-color:#ff68e256;background:#ff3ee40c;color:#fff}
.film-select.active>span{color:var(--pink)}
@media(min-width:801px){.hero-film>video,.hero-film>.film-poster{left:6%;width:108%;object-position:center 35%}.hero--cinematic .hero-inner{padding-top:150px;padding-bottom:42px;min-height:650px}.hero--cinematic .hero-copy{max-width:720px}.hero--cinematic h1{font-size:clamp(5.5rem,9.5vw,8.7rem)}}
@media(max-width:800px){.film-select{padding-inline:10px;gap:7px}.hero-bottom{gap:10px}.hero-bottom .hero-scroll{gap:12px;letter-spacing:.04em}.hero--cinematic .hero-description{max-width:370px}}
@media(max-width:600px){.hero--cinematic{justify-content:flex-end}.hero-film>video,.hero-film>.film-poster{object-position:53% 25%}.hero-vignette{background:linear-gradient(0deg,#100a13 1%,rgba(16,10,19,.94) 33%,rgba(16,10,19,.53) 63%,rgba(16,10,19,.1) 90%)}.hero-bottom{display:grid;grid-template-columns:1fr auto;row-gap:18px}.film-scenes{grid-column:1/-1;grid-row:1;justify-content:space-between}.film-select{flex:1;justify-content:center;font-size:.75rem;padding:13px 10px}.hero-bottom .hero-scroll{font-size:.75rem}.film-index,.film-index>span:last-child{font-size:.75rem;letter-spacing:.04em}.hero--cinematic .hero-inner{padding-top:270px;padding-bottom:26px}.hero--cinematic .hero-copy>.eyebrow{font-size:.6875rem}.hero--cinematic h1{font-size:clamp(3.8rem,14.9vw,5.7rem)}.hero--cinematic h1>span{margin-left:12px}}