/* The PBPR way: full-width soft black, no photo. The sentence is the image. */
.way {
    position: relative;
    background: var(--color-ink);
    color: var(--color-snow);
    padding: clamp(6rem, 14vw, 11rem) 0;
    overflow: hidden;
}
.way::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -20%;
    width: 60vmax;
    height: 60vmax;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(200, 16, 46, 0.16) 0%, transparent 58%);
    filter: blur(60px);
    pointer-events: none;
}
.way__inner { position: relative; }
.way__label {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-snow);
    margin-bottom: var(--space-6);
}
.way__quote {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.5rem, 1rem + 6vw, 7rem);
    line-height: 1;
    letter-spacing: -0.045em;
    color: var(--color-snow);
    max-width: 14ch;
    text-wrap: balance;
}
.way__word { display: inline-block; }
.way__word--accent { color: var(--color-accent); }
.way__rule {
    display: block;
    margin-top: var(--space-7);
    width: 96px;
    height: 3px;
    background: var(--color-accent);
}
/* Words rise in one after another when the band scrolls into view (JS adds .is-visible) */
@media (prefers-reduced-motion: no-preference) {
    .js .way__word {
        opacity: 0;
        transform: translateY(0.35em);
        transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out);
        transition-delay: calc(var(--i) * 0.07s);
    }
    .js .way__quote.is-visible .way__word { opacity: 1; transform: none; }
    .js .way__rule { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out) 0.8s; }
    .js .way__quote.is-visible + .way__rule { transform: scaleX(1); }
}