/* Charcoal, muted gold atmosphere, and a three-folder filing story. */
.hero-experience { position: relative; isolation: isolate; }
.hero-stage { position: relative; height: 100svh; min-height: 640px; overflow: clip; background: var(--paper); }
/* Fine, stationary grain dithers the gold falloff so the dark gradient has no visible rings. */
.hero-stage::after { content:""; position:absolute; inset:0; z-index:4; pointer-events:none; opacity:.045; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23808080' filter='url(%23grain)' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); }
.hero-content.wrap { position: relative; z-index: 2; width: min(100% - 64px, 1760px); height: 100%; display: flex; align-items: center; pointer-events: none; }
.hero-content .hero-copy { width: 58%; pointer-events: auto; will-change: transform, opacity; }
.landing .hero-experience h1 { font-size: clamp(86px, 9.6vw, 188px); line-height: .88; letter-spacing: -.06em; margin: 0; width:fit-content; max-width:100%; }
.hero-title-space { display:none; }
.hero-experience h1 em { display: inline-block; font-size:.82em; margin-top: 14px; color: var(--teal); }
.hero-experience .hero-intro { max-width: 39ch; font-size: 16px; margin-top: 32px; line-height: 1.75; }
.hero-experience .hero-actions { margin-top: 32px; }
.hero-experience .button { padding: 20px 32px; border-radius: 999px; font-size:15px; }
.hero-sculpture { position: absolute; left: 46%; width: 58%; height: min(90%, 66vw); top: 50%; transform: translateY(-50%); z-index: 1; pointer-events: none; will-change: transform; }
.hero-sculpture::before { content:""; position:absolute; inset:-30% -24%; background:radial-gradient(ellipse at 50% 52%,rgba(157,119,59,.26) 0%,rgba(151,114,56,.21) 12%,rgba(141,106,54,.14) 25%,rgba(125,96,52,.075) 38%,rgba(112,88,50,.03) 51%,rgba(112,88,50,0) 68%); filter:blur(34px); opacity:var(--glow-strength,.7); pointer-events:none; }
.hero-sculpture canvas, .hero-poster, .hero-poster img { display: block; width: 100%; height: 100%; }
.hero-sculpture canvas { position: absolute; inset: 0; opacity: 0; }
.hero-poster { position:relative; }
.hero-poster img { object-fit: contain; }
.scene-ready .hero-sculpture canvas { opacity: 1; }
.scene-ready .hero-poster { opacity: 0; }
.hero-resolution { position: relative; z-index: 3; text-align: center; padding: 75px 24px 100px; background: var(--paper); }
.landing .hero-resolution h2 { font-size: clamp(96px, 11.2vw, 180px); font-weight: 400; line-height: .93; letter-spacing: -.045em; margin: 0 auto 36px; width:fit-content; max-width:100%; }
.hero-resolution h2 em { color: var(--teal); font-weight: 400; }
.hero-resolution .button { min-width: 214px; }
/* The resting poster composition and both CTAs remain readable without motion. */
html:not(.hero-motion) .hero-stage { height: auto; min-height: 960px; }
html:not(.hero-motion) .hero-content { min-height: 640px; height: 100svh; }
html:not(.hero-motion) .hero-sculpture { top: 350px; max-height: 630px; }
html.hero-motion .hero-experience { height: 225svh; }
html.hero-motion .hero-stage { position: sticky; top: 0; }
html.hero-motion .hero-resolution { position: absolute; left:5%; right:5%; top:15%; display: flex; flex-direction: column; align-items: center; padding:0; background: transparent; opacity: var(--resolve-opacity, 0); transform: translateY(var(--resolve-y,-70px)); pointer-events: none; }
html.hero-motion .hero-resolution.is-active { pointer-events: auto; }
html.hero-motion .hero-copy { opacity: var(--opening-opacity, 1); transform: translate3d(var(--opening-x, 0px),var(--opening-y, 0px),0) scale(var(--opening-scale, 1)); transform-origin: left center; }
html.hero-motion .hero-sculpture { opacity: var(--object-opacity, 1); }
html.hero-motion .hero-sculpture canvas { transform: translateY(var(--object-y,0px)); }
@media (max-width: 1100px) {
 .hero-content.wrap { width: calc(100% - 64px); }
 .landing .hero-experience h1 { font-size: clamp(82px, 9.6vw, 106px); }
 .hero-experience .hero-intro { max-width: 34ch; font-size: 15px; }
}
@media (min-width: 681px) and (max-width: 900px) {
 .hero-content { align-items: flex-start !important; padding-top: 110px; }
 .hero-content .hero-copy { width: 90%; }
 .hero-sculpture { left: 27%; top: 69%; width: 85%; height: 56%; }
 html.hero-motion .hero-resolution { left:5%; right:5%; top:20%; }
 html:not(.hero-motion) .hero-sculpture { top: 600px; }
}
@media (max-width: 680px) {
 .hero-content.wrap { width: calc(100% - 40px); height: 100%; display: block; padding-top: clamp(100px, 14svh, 140px); }
 .hero-content .hero-copy { width: 100%; }
 .landing .hero-experience h1 { font-size: clamp(40px, 13.1vw, 80px); line-height:.99; letter-spacing: -.05em; }
 .hero-title-break { display:none; }
 .hero-title-space { display:inline; }
 .hero-experience h1 em { font-size:1em; margin-top:8px; }
 .hero-experience .hero-intro { font-size: 14px; max-width: 38ch; margin-top: 24px; line-height: 1.65; }
 .hero-experience .hero-intro br { display: none; }
 .hero-experience .hero-actions { margin-top: 24px; }
 .hero-experience .button { padding: 16px 25px; font-size: 13px; }
 .hero-sculpture { left: -5%; top: auto; bottom: 0; width: 110%; height: clamp(250px, 43svh, 390px); transform: none; }
 html.hero-motion .hero-sculpture { transform: none; }
 html.hero-motion .hero-experience { height: 215svh; }
 html.hero-motion .hero-resolution { left:20px; right:20px; top:17%; }
 .landing .hero-resolution h2 { font-size: clamp(62px, 18.5vw, 114px); margin-bottom: 32px; }
 html:not(.hero-motion) .hero-stage { min-height: 0; }
 html:not(.hero-motion) .hero-content { min-height: 0; height: auto; padding-bottom: 20px; }
 html:not(.hero-motion) .hero-sculpture { position: relative; top: auto; bottom: auto; height: 330px; }
 html:not(.hero-motion) .hero-resolution { padding: 55px 20px 75px; }
}
@media (min-width:901px) and (max-height:760px) {
 html.hero-motion .hero-resolution { top:10%; }
 .landing .hero-resolution h2 { font-size:clamp(100px,10.3vw,140px); margin-bottom:28px; }
}
@media (prefers-reduced-motion: reduce) {
 .hero-experience { height: auto !important; }
 .hero-stage { position: relative !important; }
 .hero-copy, .hero-sculpture, .hero-resolution { will-change: auto; }
}
@media print { .hero-sculpture, .hero-resolution { display: none; } .hero-stage, .hero-content { height: auto !important; min-height: 0 !important; } }