/* First impression: a full-page design film with a clear business invitation. */
.opening-film.motion-story { min-height:min(820px,calc(100svh - 124px)); padding:0 0 100px; display:flex; align-items:center; background:#0c0b14; }
.opening-film>.wrap { width:min(1240px,90%); }
.opening-film .motion-intro { padding:60px 0 36px; min-height:0; max-width:43%; margin:0; }
.opening-film h1 { font-size:clamp(48px,5.3vw,80px); line-height:1.03; letter-spacing:-.055em; margin:24px 0; font-weight:800; color:#fbf9ff; }
.opening-film .motion-eyebrow { font-size:10px; letter-spacing:.18em; color:#c5b8e0; }
.opening-film .motion-intro>p { max-width:400px; font-size:clamp(15px,1.25vw,18px); line-height:1.75; color:#dbd6e5; margin:0 0 26px; }
.opening-actions { display:flex; gap:20px; align-items:center; flex-wrap:wrap; pointer-events:auto; }
.opening-film .motion-project-link { margin:0; padding:16px 22px; color:white; border:0; font-size:14px; box-shadow:0 8px 35px #9638e62b; }
.opening-explore { font-size:13px; color:#e7ddf7; border-bottom:1px solid #a391bb66; padding:10px 0; }
.opening-benefits { display:flex; gap:14px; flex-wrap:wrap; margin-top:25px; font-size:11px; color:#c6bbd6; }
.opening-benefits span+span:before { content:'·'; padding-right:14px; color:#be7dff; }
.opening-film .motion-film { z-index:-1; }
.opening-film .motion-film video { object-fit:cover; object-position:center; height:100%; width:100%; }
.opening-film .motion-film-shade { background:linear-gradient(90deg,#0c0b14fa 0%,#0c0b14df 27%,#0c0b1415 49%,transparent 76%),linear-gradient(0deg,#0c0b14,transparent 22%,transparent 85%,#0c0b1444); }
.opening-film .motion-film-caption { right:9%; bottom:42px; max-width:40%; opacity:.85; }
.opening-film .motion-film-caption>div>span { font-size:9px; letter-spacing:.12em; }
.opening-film .motion-film button { right:3%; bottom:34px; }
.opening-film .motion-sound { bottom:44px; left:5%; }
.opening-film .motion-credits { bottom:15px; left:5%; }
.opening-film .motion-scene-nav { margin-top:38px; gap:9px; padding-top:18px; border-top:1px solid #ffffff1c; max-width:385px; }
.opening-film .motion-scene-nav>span { font-size:8px; letter-spacing:.12em; }
.opening-film .motion-scene-nav #motion-scene-label { font-size:10px; flex-basis:100%; color:#ab9cbd; }
.opening-live { width:6px; height:6px; border-radius:50%; background:#c590ff; box-shadow:0 0 12px #b468ed; animation:opening-pulse 2s ease-in-out infinite; }
.opening-chapter-controls { margin-left:auto; display:flex; align-items:center; gap:8px; font-size:10px; color:#c7bbd4; }
.opening-film .motion-scene-nav button { width:26px; height:26px; }
.inspiration-intro.hero { padding:85px 0; background:radial-gradient(ellipse at 18% 30%,#60278a1a,transparent 70%); }
.inspiration-intro h2 { font-size:clamp(38px,4.5vw,64px); letter-spacing:-.045em; line-height:1.08; margin:20px 0; }
.inspiration-intro h2 em { font-style:normal; }
.inspiration-intro .hero-grid { gap:70px; }
@keyframes opening-pulse { 50% { opacity:.4; box-shadow:0 0 20px #b468ed; } }
@media(max-width:900px) and (min-width:751px) { .opening-film .motion-intro { max-width:47%; }.opening-film h1 { font-size:52px; }.opening-actions { gap:10px; } }
@media(max-width:750px) {
 .opening-film.motion-story { min-height:0; padding:0 0 90px; display:block; }
 .opening-film .motion-intro { max-width:100%; padding:38px 0 0; }
 .opening-film h1 { font-size:clamp(43px,10.5vw,66px); max-width:540px; margin:20px 0; }
 .opening-film .motion-intro>p { max-width:480px; font-size:15px; margin-bottom:22px; }
 .opening-film .motion-film { position:relative; z-index:0; height:auto; width:100vw; margin:18px 0 0 calc((min(1240px,90vw) - 100vw)/2); aspect-ratio:1.55; overflow:hidden; }
 .opening-film .motion-film video { position:absolute; top:0; left:-64%; width:164%; height:100%; object-fit:cover; object-position:right center; }
 .opening-film .motion-film-shade { background:linear-gradient(0deg,#0c0b14,transparent 20%,transparent 85%,#0c0b14),linear-gradient(90deg,#0c0b14aa,transparent 25%); }
 .opening-film .motion-film button { right:6%; bottom:18px; width:38px; height:38px; }
 .opening-film .motion-film-caption { display:none; }
 .opening-film .motion-scene-nav { margin-top:24px; max-width:100%; }
 .opening-film .motion-scene-nav #motion-scene-label { flex-basis:100%; }
 .opening-film .motion-sound { bottom:40px; }
 .opening-film .motion-credits { bottom:12px; }
 .opening-benefits { font-size:10px; gap:10px; margin-top:19px; }
 .opening-benefits span+span:before { padding-right:10px; }
 .inspiration-intro.hero { padding:50px 0; }.inspiration-intro .hero-grid { gap:30px; }
}
@media(prefers-reduced-motion:reduce) { .opening-live { animation:none; } }

@media(min-width:751px) { .opening-film .motion-intro { left:-0.5cm; } }
/* Separate columns keep copy out of the film at every viewport width. */
.opening-film.motion-story { padding:32px 0 100px; min-height:0; }
.opening-film>.wrap { width:min(1560px,94%); display:grid; grid-template-columns:minmax(0,.38fr) minmax(0,.62fr); gap:clamp(24px,3vw,60px); align-items:center; }
.opening-film .motion-intro { left:auto; max-width:none; min-width:0; padding:25px 0 35px; }
.opening-film h1 { font-size:clamp(44px,4.5vw,74px); }
.opening-film .motion-film { position:relative; inset:auto; z-index:0; width:100%; height:auto; aspect-ratio:1.12; max-height:670px; min-height:420px; margin:0; overflow:hidden; }
.opening-film .motion-film video { position:absolute; top:0; left:-66.667%; width:166.667%; height:100%; object-fit:fill; }
.opening-film .motion-film-shade { background:linear-gradient(0deg,#0c0b14,transparent 18%,transparent 88%,#0c0b14),linear-gradient(90deg,#0c0b14,transparent 10%,transparent 95%,#0c0b14); }
.opening-film .motion-film-caption { left:20px; right:80px; bottom:22px; max-width:none; }
.opening-film .motion-film button { right:16px; bottom:16px; }
.opening-film .motion-sound,.opening-film .motion-credits { left:max(3%,calc((100% - 1560px)/2)); }
@media(max-width:1000px) { .opening-film>.wrap { grid-template-columns:minmax(0,.43fr) minmax(0,.57fr); gap:20px; }.opening-film h1 { font-size:44px; }.opening-film .motion-film { min-height:380px; } }
@media(max-width:750px) {
 .opening-film.motion-story { padding:12px 0 90px; }
 .opening-film>.wrap { width:90%; grid-template-columns:minmax(0,1fr); gap:0; }
 .opening-film .motion-intro { padding:25px 0 20px; }
 .opening-film h1 { font-size:clamp(43px,10.5vw,66px); }
 .opening-film .motion-film { width:100%; min-height:0; max-height:none; aspect-ratio:1.12; margin:0; }
 .opening-film .motion-sound,.opening-film .motion-credits { left:5%; }
}
.opening-film .motion-film video { left:auto; right:0; width:auto; min-width:100%; max-width:none; object-fit:contain; }
/* Give the film the leading share of the opening without covering the copy. */
@media(min-width:1001px) {
 .opening-film.motion-story { padding-top:8px; padding-bottom:90px; }
 .opening-film>.wrap { width:min(1800px,96%); grid-template-columns:minmax(0,.32fr) minmax(0,.68fr); gap:clamp(20px,2.2vw,44px); }
 .opening-film .motion-intro { padding-left:12px; }
 .opening-film .motion-film { height:clamp(620px,calc(100svh - 160px),820px); max-height:none; min-height:0; aspect-ratio:auto; }
 .opening-film h1 { font-size:clamp(44px,4.3vw,74px); }
 .opening-film .motion-sound,.opening-film .motion-credits { left:max(calc(2% + 12px),calc((100% - 1800px)/2 + 12px)); }
}
@media(min-width:751px) and (max-width:1000px) {
 .opening-film>.wrap { width:96%; grid-template-columns:minmax(0,.39fr) minmax(0,.61fr); gap:16px; }
 .opening-film .motion-film { height:570px; max-height:none; min-height:0; aspect-ratio:auto; }
}
@media(max-width:750px) {
 .opening-film .motion-film { width:100vw; margin-left:-5vw; aspect-ratio:1.05; }
}