/* TYPE & IMPACT 3.0.0 — a single visible tablet, a reserved scroll runway. */
.cinematic-hero{--intro-h:clamp(600px,100svh,1100px);--intro-progress:0;position:relative;height:auto;background:var(--ink);isolation:isolate}
.cinematic-stage{position:relative;height:var(--intro-h);overflow:hidden;isolation:isolate;background:var(--ink)}
html[data-js=on][data-motion=on] .cinematic-hero:not([data-intro-fallback]),.cinematic-hero[data-intro-mode=scroll]{height:auto;padding-bottom:0;margin-bottom:calc(-1 * var(--intro-h))}
html[data-js=on][data-motion=on] .cinematic-hero:not([data-intro-fallback]) .cinematic-stage,.cinematic-hero[data-intro-mode=scroll] .cinematic-stage{position:sticky;top:0}
.intro-runway,.intro-hold{display:none}html[data-js=on][data-motion=on] .cinematic-hero:not([data-intro-fallback]) .intro-runway,.cinematic-hero[data-intro-mode=scroll] .intro-runway{display:block;height:calc(var(--intro-h)*1.16)}
.cinematic-surface{position:absolute;inset:0;z-index:0;pointer-events:none;margin:0}
.cinematic-canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .24s ease}
.cinematic-hero[data-intro-state=ready] .cinematic-canvas{opacity:1}
.cinematic-ambient{position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--ink)}
.cinematic-hero[data-intro-state=ready] .cinematic-ambient{opacity:0;transition:opacity .4s}
.cinematic-copy{position:absolute;z-index:3;left:var(--gutter);top:clamp(72px,15svh,175px);max-width:65%;perspective:1200px;pointer-events:none}
.cinematic-eyebrow{margin-bottom:23px;transform:translate3d(var(--intro-small-x,0px),0,0);opacity:var(--intro-copy-alpha,1)}
.cinematic-title{font:800 clamp(72px,7.4vw,126px)/.94 var(--display);letter-spacing:-.018em;margin:0}
.cinematic-line{display:block;width:fit-content;white-space:nowrap;transform-origin:0 50%;opacity:var(--intro-copy-alpha,1)}
.cinematic-line:first-child{transform:translate3d(var(--intro-line1-x,0px),0,0) rotateY(var(--intro-text-angle,0deg))}
.cinematic-line:last-child{transform:translate3d(var(--intro-line2-x,0px),0,0) rotateY(var(--intro-text-angle,0deg))}
.cinematic-line>span{display:inline-block}
.cinematic-copy-bottom{transform:translate3d(var(--intro-small-x,0px),0,0);opacity:var(--intro-copy-alpha,1)}
.cinematic-description{font-size:15px;line-height:1.65;max-width:345px;margin-top:25px;color:#d9d9d1}
.cinematic-actions{display:flex;align-items:center;margin-top:27px;pointer-events:auto;width:fit-content}
.cinematic-actions .button{font-size:12px;min-height:49px;gap:33px}
.cinematic-sr{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;padding:0!important;border:0!important}
/* Static fallback is visible with JS off, reduced motion, or a real failure only. */
.cinematic-fallback{position:absolute;left:var(--intro-fallback-x,51%);top:var(--intro-fallback-y,15%);width:var(--intro-fallback-w,46%);height:auto;margin:0;aspect-ratio:7.6/4.91;perspective:1400px;z-index:1;pointer-events:none}
.cinematic-hero[data-intro-state=ready] .cinematic-fallback{visibility:hidden}
.cinematic-fallback-device{position:absolute;inset:0;width:100%;height:100%;transform:rotateY(-24deg) rotateX(4deg) rotateZ(-5.5deg)}



.cinematic-fallback-shadow{position:absolute;left:0;right:0;bottom:-12%;height:12%;border-radius:50%;background:#e6e8e110;filter:blur(18px);transform:rotate(-5deg);box-shadow:0 8px 13px #000}
.cinematic-hero[data-intro-focused=true] .cinematic-copy{z-index:6}
@media(prefers-reduced-motion:no-preference){html:not([data-motion=off]) .cinematic-line>span{animation:cinematic-type-in 1.15s .15s cubic-bezier(.25,.1,.25,1) both}html:not([data-motion=off]) .cinematic-line:last-child>span{animation-delay:.25s}@keyframes cinematic-type-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}}
@media(min-width:1700px){.cinematic-description{font-size:17px;max-width:390px}.cinematic-copy{top:clamp(130px,18svh,220px)}}
@media(max-width:1100px) and (min-width:900px){.cinematic-title{font-size:72px}.cinematic-copy{left:40px;top:15svh}.cinematic-description{font-size:13px;max-width:290px}}
@media(max-width:899px){.cinematic-hero{--intro-h:clamp(660px,100svh,1050px)}.cinematic-copy{left:var(--gutter);right:var(--gutter);top:35px;max-width:none}.cinematic-title{font-size:clamp(56px,9.3vw,84px);line-height:.95}.cinematic-eyebrow{margin-bottom:18px}.cinematic-description{font-size:13px;margin-top:20px;max-width:420px}.cinematic-actions{margin-top:22px}.cinematic-fallback{left:8%;top:46%;width:84%}}
@media(max-width:540px){.cinematic-hero{--intro-h:clamp(620px,100svh,980px)}.cinematic-copy{top:27px}.cinematic-title{font-size:clamp(43px,13.1vw,70px);line-height:.95}.cinematic-description{font-size:13px;line-height:1.6;margin-top:18px;max-width:315px}.cinematic-actions .button{font-size:11px;min-height:46px;gap:23px;padding:13px 15px}.cinematic-fallback{left:6%;top:49%;width:88%}.cinematic-fallback-device{border-radius:14px;box-shadow:0 25px 27px -20px #000b}}
@media(max-width:360px){.cinematic-title{font-size:43px}.cinematic-description{font-size:12px;max-width:275px}}
@media(max-height:560px) and (orientation:landscape){.cinematic-hero{--intro-h:max(540px,100svh)}.cinematic-copy{top:35px;max-width:50%;right:auto}.cinematic-title{font-size:48px}.cinematic-description{font-size:12px;max-width:260px}.cinematic-fallback{top:23%;left:52%;width:44%}}
@media(prefers-reduced-motion:reduce){.cinematic-hero{height:auto!important;padding-bottom:0!important;margin-bottom:0!important}.cinematic-stage{position:relative!important}.cinematic-line,.cinematic-eyebrow,.cinematic-copy-bottom{transform:none!important;opacity:1!important}.cinematic-fallback{visibility:visible!important}}
html[data-motion=off] .cinematic-hero{height:auto!important;padding-bottom:0!important;margin-bottom:0!important}html[data-motion=off] .cinematic-stage{position:relative!important}html[data-motion=off] .cinematic-line,html[data-motion=off] .cinematic-eyebrow,html[data-motion=off] .cinematic-copy-bottom{transform:none!important;opacity:1!important}html[data-motion=off] .cinematic-fallback{visibility:visible!important}
@media print{.cinematic-hero{height:auto!important}.cinematic-stage{height:auto;overflow:visible}.cinematic-copy{position:static;max-width:100%;color:#111;padding:25px}.cinematic-title{font-size:48px}.cinematic-line,.cinematic-eyebrow,.cinematic-copy-bottom{opacity:1!important;transform:none!important}.cinematic-surface,.cinematic-ambient,.intro-runway,.intro-hold{display:none}}

html[data-js=on][data-motion=on] .cinematic-hero:not([data-intro-fallback]) .intro-hold,.cinematic-hero[data-intro-mode=scroll] .intro-hold{display:block;height:var(--intro-h)}
@media(prefers-reduced-motion:reduce){.intro-runway,.intro-hold{display:none!important}}
html[data-motion=off] .intro-runway,html[data-motion=off] .intro-hold{display:none!important}
@media print{.intro-runway,.intro-hold{display:none!important}.cinematic-hero{margin-bottom:0!important;padding-bottom:0!important}}

/* During preparation only the real renderer may enter. No visible CSS/GPU handoff. */
html[data-js=on][data-motion=on] .cinematic-hero:not([data-intro-fallback]) .cinematic-fallback{visibility:hidden}
.cinematic-canvas{transition:none}
.cinematic-hero[data-intro-state=ready] .cinematic-canvas{transition:opacity .8s cubic-bezier(.22,.61,.36,1)}
html[data-motion=off] .cinematic-canvas{visibility:hidden;transition:none}
@media(prefers-reduced-motion:reduce){.cinematic-canvas{transition:none}}
/* Match the modest 3D reflection increase when WebGL is unavailable. */
.cinematic-fallback-device{-webkit-box-reflect:below 8px linear-gradient(transparent 45%,#0006)}
