/* Explain: Layout accents including a repeating watermark background. */
.hero-band {
    position: relative;
    overflow: hidden;
}

.hero-band::before {
    position: absolute;
    top: -7rem;
    right: -8rem;
    width: 24rem;
    height: 24rem;
    content: '';
    border-radius: 999px;
    background: rgba(255, 183, 3, 0.18);
}

.hero-band::after {
    position: absolute;
    bottom: -10rem;
    left: -8rem;
    width: 22rem;
    height: 22rem;
    content: '';
    border-radius: 999px;
    background: rgba(27, 42, 74, 0.06);
}

.hero-band > div {
    position: relative;
    z-index: 1;
}

.watermark-overlay {
    position: fixed;
    inset: 0;
    background-image: url('https://files.cdn-files-a.com/uploads/12299645/normal_6a7362527adb4.jpg?format=avif');
    background-position: center;
    background-repeat: repeat;
    background-size: 300px;
    opacity: 0.05;
    pointer-events: none;
    z-index: 35;
}