/* ============================================================
   Step4 - BRAND SHAPE KIT
   The organic pebble / quarter-round / ring decorations used
   across the new templates. Extracted from the approved
   Careers + Home designs so every page uses one definition.

   Usage:
     <span class="s4-shape s4-pebble"
           style="width:clamp(220px,26vw,380px);aspect-ratio:1/1.06;
                  background:#DBE7DA;opacity:.7;right:-7%;top:60px;"></span>

   The parent needs position:relative and (usually) overflow:hidden.
   Shapes are decorative only - always aria-hidden by virtue of
   being empty, and they never take pointer events.
   ============================================================ */

.s4-shape {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  display: block;
}

.s4-pebble   { border-radius: 58% 42% 55% 45% / 52% 48% 55% 45%; }
.s4-pebble-b { border-radius: 62% 38% 55% 45% / 55% 45% 60% 40%; }
.s4-quarter  { border-radius: 100% 0 0 0; }
.s4-ring     { border-radius: 50%; background: none; }

/* Section wrapper helper - put this on any band that hosts shapes. */
.s4-has-shapes { position: relative; overflow: hidden; }
.s4-has-shapes > * { position: relative; z-index: 1; }

/* Palette used by the approved comps, so inline styles can stay short. */
.s4-shape--sage  { background: #DBE7DA; }
.s4-shape--sky   { background: #CFE1EA; }
.s4-shape--sand  { background: #EFDACE; }
.s4-shape--ring  { border: 2px solid rgba(204, 151, 111, .26); }

@media (max-width: 720px) {
  .s4-shape { display: none; }
}