/* Scene layers stay separate from the readable, keyboard-accessible content. */
.homepage .hero {
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 610px;
    padding: 70px 0;
}
.homepage .hero:after { display: none; }
.homepage .hero h2 { color: var(--text-primary); }
.homepage .hero .eyebrow { color: var(--accent-warm); }
.homepage .hero-summary { color: var(--text-secondary); }
.homepage .hero .btn-secondary { color: var(--text-primary); border-color: var(--border-color); }
.homepage .hero-caption { display: none; }
.homepage .hero-content { max-width: min(540px, calc(50vw - 48px)); position: relative; z-index: 2; }
.sculpture { position: relative; overflow: hidden; pointer-events: none; }
.hero .sculpture { position: absolute; inset: 0 0 0 50%; }
.sculpture-canvas, .scene-fallback { display: block; width: 100%; height: 100%; }
.sculpture-canvas { position: absolute; inset: 0; opacity: 0; }
.scene-fallback { object-fit: contain; transition: opacity .25s; }
.scene-ready .sculpture-canvas { opacity: 1; }
.scene-ready .scene-fallback { opacity: 0; }
.strategy-visual { position: relative; margin: 0 -32px 24px; }
.strategy-visual .sculpture { height: 330px; }
.strategy-visual:after { content: ''; display: block; width: 100%; height: 1px; background: var(--border-color); }
.scene-motion { position: absolute; bottom: 20px; right: 32px; z-index: 3; width: 42px; height: 42px; display: grid; place-items: center; background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: 50%; }
.scene-motion:hover { color: var(--accent-warm); border-color: var(--accent-warm); }
.scene-motion:disabled { opacity: .45; cursor: default; }
.scene-motion svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1600px) { .hero .sculpture { right: max(0px, calc((100vw - 1600px) / 2)); left: 49%; } }
@media (max-width: 980px) and (min-width: 601px) {
    .homepage .hero-content { max-width: min(390px, calc(55vw - 48px)); }
    .homepage .hero h1 { font-size: 54px; }
    .homepage .hero h2 { font-size: 24px; }
    .homepage .hero-summary { max-width: 340px; }
    .hero .sculpture { left: 55%; }
}
@media (max-width: 600px) {
    .homepage .hero { min-height: 0; padding: 195px 0 34px; }
    .homepage .hero-content { max-width: none; }
    .hero .sculpture { inset: 0 0 auto; height: 195px; }
    .homepage .hero h1 { font-size: 42px; margin: 12px 0; }
    .homepage .hero h2 { font-size: 22px; }
    .homepage .hero .eyebrow { max-width: none; font-size: 10px; }
    .homepage .hero-summary { margin-top: 14px; }
    .homepage .hero-actions { margin-top: 20px; }
    .hero > .scene-motion { top: 12px; bottom: auto; right: 18px; }
    .strategy-visual { margin: 0 -22px 20px; }
    .strategy-visual .sculpture { height: 240px; }
    .strategy-visual .scene-motion { right: 22px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) { .scene-fallback { transition: none; } }