/* ============================================
   Bowl6610 — Watermark Positioning
   Used by hero, CTA, split content, and standalone
   ============================================ */

.bowl-watermark {
    width: 400px;
    height: 400px;
}

/* Centre */
.bowl-watermark--center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Left overhang — bleeds off left edge */
.bowl-watermark--left-bleed {
    top: 50%;
    left: -100px;
    transform: translateY(-50%);
}

/* Right overhang — bleeds off right edge */
.bowl-watermark--right-bleed {
    top: 50%;
    right: -100px;
    left: auto;
    transform: translateY(-50%);
}

/* Top overhang — bleeds off top */
.bowl-watermark--top-bleed {
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
}

/* Bottom overhang — bleeds off bottom */
.bowl-watermark--bottom-bleed {
    bottom: -100px;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
}

/* Responsive: scale down on smaller screens */
@media (max-width: 1024px) {
    .bowl-watermark {
        width: 300px;
        height: 300px;
    }
}

@media (max-width: 767px) {
    .bowl-watermark {
        width: 200px;
        height: 200px;
    }
    .bowl-watermark--left-bleed { left: -60px; }
    .bowl-watermark--right-bleed { right: -60px; }
    .bowl-watermark--top-bleed { top: -60px; }
    .bowl-watermark--bottom-bleed { bottom: -60px; }
}