*/ /* Environment scene grid (real licensed photos, label on image) */ .envscenes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px} .envscenes.four{grid-template-columns:repeat(4,1fr)} @media(max-width:820px){.envscenes,.envscenes.four{grid-template-columns:1fr 1fr}} @media(max-width:520px){.envscenes,.envscenes.four{grid-template-columns:1fr}} .scene{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;box-shadow:0 18px 50px rgba(0,0,0,.18);display:block} .scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease} .scene:hover img{transform:scale(1.04)} .scene .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,15,0) 38%,rgba(10,10,15,.82))} .scene .cap{position:absolute;left:18px;right:18px;bottom:16px;z-index:1} .scene .cap strong{font-family:var(--font-display);font-size:1.35rem;font-weight:600;color:#fff;display:block;line-height:1.1} .scene .cap span{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#9be9d4;margin-top:5px;display:block} /* Full-bleed scene band: a quiet nature strip between sections, with one line over it */ .sceneband{position:relative;min-height:360px;display:flex;align-items:center;color:#fff;overflow:hidden} .sceneband::before{content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(180deg,rgba(10,10,15,.45),rgba(10,10,15,.72)),var(--band-scene,url("assets/img/env/crystal_waterfall.jpg")) center/cover no-repeat} .sceneband .wrap{position:relative;z-index:1} .sceneband h2,.sceneband p{color:#fff} .sceneband .kicker{color:var(--teal)} /* Closing CTA over a scene */ .closing.immersive{position:relative;background:var(--obsidian)} .closing.immersive::before{content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(180deg,rgba(10,10,15,.74),rgba(10,10,15,.90)),var(--closing-scene,url("assets/img/env/crystal_waterfall.jpg")) center/cover no-repeat} .closing.immersive .wrap{position:relative;z-index:1} .closing.immersive .kicker{color:var(--teal)} .closing.immersive h2,.closing.immersive p{color:#fff} .closing.immersive .fine{color:#aeb0bb} /* Reduced-motion respect */ @media(prefers-reduced-motion:reduce){.scene img{transition:none}.scene:hover img{transform:none}}