/* V20: generated photographic plates and true alpha cutout, composed independently. */
.hero { --scene-x:0px; --scene-y:0px; --scene-scale:1; --scene-bg-scale:1; --name-y:0px; --solid:0; --copy-opacity:1; --panel-y:130px; --panel-opacity:0; --fx:0px; --fy:0px; }
.portrait-bg { inset:-24px; height:auto; mask:none; opacity:1; filter:none; transform:translate3d(var(--bx,0px),var(--by,0px),0) scale(var(--scene-bg-scale)); }
.portrait-bg picture,.portrait-cutout picture,.hero-foreground picture { display:block; width:100%; height:100%; }
.portrait-bg img { width:100%; height:100%; object-fit:cover; object-position:center; opacity:1; filter:none; }
.portrait-cutout,.layered-ready .portrait-cutout { display:block; transform:translate3d(calc(var(--px,0px) + var(--scene-x)),calc(var(--py,0px) + var(--scene-y)),0) scale(var(--scene-scale)); transform-origin:50% 55%; mask-image:linear-gradient(180deg,#000 78%,transparent 100%); }
.portrait-cutout img { width:100%; height:100%; object-fit:contain; object-position:center top; mask:none; transform-origin:50% 45%; }
.portrait-cutout::after { content:none; }
.hero-foreground { position:absolute; inset:-24px; z-index:3; opacity:.24; pointer-events:none; transform:translate3d(var(--fx),var(--fy),0); }
.hero-foreground img { width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-name-front { z-index:4; }
.hero-name-front .mark-fill { display:none; }
.hero h1,.hero-name-front { transform:translate3d(0,var(--name-y),0); }
.mark-fill { opacity:var(--solid); fill:currentColor; stroke:none; }
.mark-fill,.mark-base,.mark-trace { fill-rule:evenodd; }
.motion-enabled .mark-trace path { animation:none!important; stroke-dasharray:inherit; stroke-dashoffset:inherit; }
.hero.is-opening .mark-trace { stroke-dasharray:100; animation:segment-draw 2.35s ease-out both; }
@keyframes segment-draw { from { stroke-dashoffset:100; } to { stroke-dashoffset:0; } }
.hero-statement,.hero-content>.intro,.hero-content>.eyebrow,.hero-note { opacity:var(--copy-opacity); }
.hero-runway { position:relative; }
.motion-enabled .hero-runway { height:170svh; }
.motion-enabled .hero-runway .hero { position:sticky; top:0; height:100svh; min-height:640px; max-height:none; }
.hero-scene-intro { display:none; position:absolute; z-index:6; top:33%; right:6%; width:min(430px,38%); padding:30px; border:1px solid #ffffff54; border-radius:24px; background:linear-gradient(120deg,#272e3399,#171a1dc9); backdrop-filter:blur(16px) saturate(.95); -webkit-backdrop-filter:blur(16px) saturate(.95); box-shadow:inset 1px 1px 1px #ffffff30,0 24px 60px #0005; isolation:isolate; overflow:hidden; }
.motion-enabled .hero-scene-intro { display:block; opacity:var(--panel-opacity); transform:translate3d(0,var(--panel-y),0); }
.hero-scene-intro::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(115deg,#fff2,transparent 28%,transparent 66%,#a4b5be13); pointer-events:none; }
.scene-person { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.scene-person img { width:42px; height:42px; border-radius:50%; }
.scene-person p { font-size:12px; line-height:1.7; }
.scene-person span { color:#d6d6cf; font-size:10px; }
.hero-scene-intro h2 { font:400 30px/1.5 var(--editorial); margin-bottom:14px; }
.hero-scene-intro>p { color:#e0dfd8; font-size:13px; line-height:1.9; }
.hero-scene-intro>a { display:inline-flex; margin-top:22px; border-bottom:1px solid #ffffff66; padding-bottom:5px; font-size:12px; }
.personal-story { position:relative; isolation:isolate; overflow:hidden; background:#202124; }
.story-backdrop { position:absolute; z-index:-1; inset:-24px; transform:translate3d(var(--glass-x,0px),var(--glass-y,0px),0); }
.story-backdrop img { width:100%; height:100%; object-fit:cover; object-position:35% 60%; }
.story-text { background:linear-gradient(120deg,#c6d7e519,#10111255); }
.opening-replay { display:none; background:none; border:0; border-bottom:1px solid #ffffff3d; font-size:10px; padding:6px 0; line-height:1.5; }
.motion-enabled .opening-replay { display:inline-block; }
.hero-bottom { gap:16px; left:auto; right:auto; bottom:auto; width:100%; }
.strip-photo { transform:scale(.93); opacity:.7; }
.strip-photo.is-current { transform:scale(1.035) translateY(-9px); opacity:1; }
.photo-strip { padding-block:14px 22px; }
.motion-enabled .hero.is-opening .portrait-cutout img,.motion-enabled .hero.is-opening .hero-foreground img { will-change:transform; }
@media(max-width:699px) {
 .hero { padding:430px 24px 16px; }
 .motion-enabled .hero-runway { height:155svh; }
 .motion-enabled .hero-runway .hero { min-height:780px; }
 .portrait-bg { inset:-18px; height:auto; mask:none; }
 .portrait-bg img { object-position:center; }
 .portrait-cutout { inset:48px -8% auto; height:500px; transform-origin:50% 50%; }
 .portrait-cutout img { mask:none; }
 .hero-fog { background:linear-gradient(0deg,#191919 0%,#191919d9 22%,transparent 59%); }
 .hero-name-front { clip-path:polygon(0 0,20% 0,20% 70%,88% 70%,88% 0,100% 0,100% 100%,0 100%); opacity:1; }
 .hero-scene-intro { top:auto; bottom:132px; left:24px; right:24px; width:auto; padding:24px; border-radius:22px; }
 .scene-person { margin-bottom:14px; }
 .hero-scene-intro h2 { font-size:25px; }
 .hero-scene-intro>p { font-size:12px; }
 .hero-scene-intro>a { margin-top:15px; }
 .hero-scene-intro { backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
 .hero-foreground { inset:-18px; opacity:.23; }
 .story-backdrop img { object-position:26% center; }
 .hero-bottom { gap:4px 12px; }
 .hero-bottom>span { font-size:8px; }
 .hero-bottom>a { font-size:9px; }
 .opening-replay { font-size:9px; }
}
@media(max-width:699px) and (max-height:779px) { .motion-enabled .hero-runway .hero { height:780px; } }
.motion-disabled .hero-runway { height:auto; }
.motion-disabled .hero-scene-intro { display:none; }
.motion-disabled .hero-content>p,.motion-disabled .hero-note { opacity:1; }
.motion-disabled .mark-fill { opacity:0; }
.motion-disabled .portrait-cutout,.motion-disabled .portrait-bg,.motion-disabled .hero-foreground,.motion-disabled .hero h1,.motion-disabled .hero-name-front,.motion-disabled .story-backdrop { transform:none; }
@media(prefers-reduced-motion:reduce) {
 .hero-runway,.motion-enabled .hero-runway { height:auto; }
 .hero-runway .hero,.motion-enabled .hero-runway .hero { position:relative; }
 .hero-scene-intro { display:none!important; }
 .hero h1,.hero-name-front,.hero-foreground,.story-backdrop { transform:none!important; }
}
