/* Approved Porsche arrival hero, isolated from the full-site design system. */
.pinnacle-hero{--cream:#faf8f5;color:var(--cream);font:16px/1.6 var(--sans)}
.hero-skip:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.hero-skip:not(:focus){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero-skip:focus{position:fixed;left:20px;top:20px;z-index:210;background:var(--base);color:var(--ink);padding:12px 20px}
#nav:not(.scrolled) .nav-cta{background:var(--base);color:var(--ink);border-radius:999px}
#nav:not(.scrolled) .nav-cta:hover{background:var(--gold)}
.pinnacle-hero{height:230vh;height:230svh;position:relative;background:#141210}
.pinnacle-hero .stage{position:sticky;top:0;height:100vh;height:100svh;isolation:isolate;overflow:hidden}
.pinnacle-hero .scene,.pinnacle-hero .scene-shade,.pinnacle-hero .poster,.pinnacle-hero #revealCanvas{position:absolute;inset:0;width:100%;height:100%}
.pinnacle-hero .scene{z-index:-2;background:#141210}
.pinnacle-hero .poster{object-fit:cover;object-position:50% 50%}
.pinnacle-hero #revealCanvas{opacity:0}
.pinnacle-hero .scene.ready #revealCanvas{opacity:1}
.pinnacle-hero .scene.arriving #revealCanvas{opacity:0}
.pinnacle-hero .arrival-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:1;opacity:1;transition:opacity .2s linear}
.pinnacle-hero .arrival-video.is-settled{opacity:0}
.pinnacle-hero .scene-shade{z-index:2}
.pinnacle-hero [hidden]{display:none!important}
.pinnacle-hero .hero-copy{transition:opacity .55s ease,transform .55s ease}
.pinnacle-hero .arrival-active .hero-copy{opacity:0;transform:translateY(10px)}
.pinnacle-hero .scene-shade{background:linear-gradient(180deg,rgba(12,11,10,.48),transparent 22%,transparent 72%,rgba(12,11,10,.93)),linear-gradient(90deg,rgba(12,11,10,.3),transparent 44%);pointer-events:none}
.pinnacle-hero .hero-copy{position:absolute;left:clamp(22px,4.5vw,80px);top:15%;max-width:540px;pointer-events:none}
.pinnacle-hero h1{font:400 clamp(40px,4.7vw,76px)/1.03 var(--head);letter-spacing:-.015em;text-shadow:0 2px 20px rgba(0,0,0,.15)}
.pinnacle-hero h1 em{font-style:normal;color:#e6d8b6}
.pinnacle-hero .intro{font-size:13px;line-height:1.6;max-width:42ch;margin-top:17px;color:rgba(250,248,245,.67)}
@media(min-aspect-ratio:2/1){
.pinnacle-hero .hero-copy{top:20%}
.pinnacle-hero h1{font-size:clamp(42px,7.5vh,70px)}
.pinnacle-hero .intro{max-width:38ch}
.pinnacle-hero .scene-shade{background:linear-gradient(180deg,rgba(12,11,10,.5),transparent 30%,transparent 65%,rgba(12,11,10,.9)),linear-gradient(90deg,rgba(12,11,10,.4),transparent 44%)}
}
@media(max-width:760px){
.pinnacle-hero .hero-copy{top:16%;left:24px;right:24px}
.pinnacle-hero h1{font-size:clamp(39px,11vw,58px)}
.pinnacle-hero .intro{font-size:12px;max-width:42ch;margin-top:14px}
.pinnacle-hero .poster{object-fit:cover;object-position:50% 50%}
.pinnacle-hero .scene-shade{background:linear-gradient(180deg,rgba(12,11,10,.72),rgba(12,11,10,.18) 34%,transparent 58%,rgba(12,11,10,.9) 100%)}
}
@media(max-height:650px) and (min-width:761px){
.pinnacle-hero .hero-copy{top:18%}
.pinnacle-hero h1{font-size:44px}
.pinnacle-hero .intro{display:none}
}
@media(prefers-reduced-motion:reduce){
.pinnacle-hero *,.pinnacle-hero *::before,.pinnacle-hero *::after{transition:none!important;animation:none!important}
.pinnacle-hero{height:100svh}
}