/* Opulence 2026 — Why Opulence page (HI-061)
 * Scoped styles for the /why-opulence/ positioning page. The pillar grid and
 * quantified stats reuse the shared home.css classes (.wc-grid, .wc-pillar,
 * .conf-stats); only the page hero is defined here. */

.wo-hero {
    position: relative;
    color: var(--cream);
    overflow: hidden;
    background: linear-gradient(100deg, rgba(20, 38, 27, .93), rgba(24, 44, 32, .72) 60%, rgba(24, 44, 32, .45)), #1c3327;
}
.wo-hero__img {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center 30%;
    opacity: .32;
}
.wo-hero .wrap { position: relative; z-index: 2; padding: 44px clamp(24px, 5vw, 64px) 60px; }
.wo-hero h1 {
    font-size: clamp(2.3rem, 5vw, 3.6rem);
    color: var(--cream);
    max-width: 18ch;
    margin: 16px 0;
}
.wo-hero .intro {
    max-width: 60ch;
    font-size: 1.06rem;
    color: rgba(246, 242, 232, .82);
    font-weight: 300;
}
.wo-hero__actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

.wo-intro { max-width: 72ch; }