/* ===== WAVE BORDER SYSTEM =====
   
   Wavy transitions between sections with NO transparent gaps.
   Each SVG contains a full background rect + wavy path on top,
   so the page background never bleeds through.

   STRUCTURE CLASSES (add to the section):
     .wave-top              — adds wavy top edge
     .wave-bottom           — adds wavy bottom edge

   TRANSITION CLASSES (pair with structure class):
     .wave-top-{A}-{B}     — top edge: color A (above) waves into color B (this section)
     .wave-bottom-{A}-{B}  — bottom edge: color A (this section) waves into color B (below)

   Available colors: white, light, eee, dark, darker, hero

   EXAMPLE — light section sitting between white and dark:
     <section class="bg-light wave-top wave-top-white-light wave-bottom wave-bottom-light-dark">

   SAME-COLOR shorthand (section on white background):
     .wave-top-light    = .wave-top-white-light
     .wave-bottom-light = .wave-bottom-light-white
===== */

/* ===== STRUCTURE ===== */
.wave-top,
.wave-bottom {
  position: relative;
}
.wave-top  { margin-top: 44px; }
.wave-bottom { margin-bottom: 44px; }

.wave-top::before {
  content: "";
  position: absolute;
  top: -43px;
  left: 0;
  width: 100%;
  height: 44px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.wave-bottom::after {
  content: "";
  position: absolute;
  bottom: -43px;
  left: 0;
  width: 100%;
  height: 44px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* =================================================================
   TOP WAVE: rect = color ABOVE, wavy path = color of THIS section
   The wavy path sits at the bottom of the SVG, curving upward.
   
   Bottom wave SVG structure (viewBox 0 0 1440 48):
     <rect width="1440" height="48" fill="ABOVE_COLOR"/>
     <path d="M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z" fill="THIS_COLOR"/>

   BOTTOM WAVE: rect = color BELOW, wavy path = color of THIS section
   The wavy path sits at the top of the SVG, curving downward.
   
   Bottom wave SVG structure (viewBox 0 0 1440 48):
     <rect width="1440" height="48" fill="BELOW_COLOR"/>
     <path d="M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z" fill="THIS_COLOR"/>
   ================================================================= */

/* ===== SHORTHAND: same-color on white (backwards compat) ===== */

/* wave-top-{color} = white above, {color} section */
/* wave-bottom-{color} = {color} section, white below */

/* --- light on white --- */
.wave-top-light.wave-top::before,
.wave-light.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23f2ede4'/%3E%3C/svg%3E");
}
.wave-bottom-light.wave-bottom::after,
.wave-light.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23f2ede4'/%3E%3C/svg%3E");
}

/* --- eee on white --- */
.wave-top-eee.wave-top::before,
.wave-eee.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23eeeeee'/%3E%3C/svg%3E");
}
.wave-bottom-eee.wave-bottom::after,
.wave-eee.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23eeeeee'/%3E%3C/svg%3E");
}

/* --- dark on white --- */
.wave-top-dark.wave-top::before,
.wave-dark.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23444444'/%3E%3C/svg%3E");
}
.wave-bottom-dark.wave-bottom::after,
.wave-dark.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23444444'/%3E%3C/svg%3E");
}

/* --- darker on white --- */
.wave-top-darker.wave-top::before,
.wave-darker.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23242221'/%3E%3C/svg%3E");
}
.wave-bottom-darker.wave-bottom::after,
.wave-darker.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23242221'/%3E%3C/svg%3E");
}

/* --- white on white (for completeness) --- */
.wave-top-white.wave-top::before,
.wave-white.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23fcfaf7'/%3E%3C/svg%3E");
}
.wave-bottom-white.wave-bottom::after,
.wave-white.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23fcfaf7'/%3E%3C/svg%3E");
}

/* --- hero on white --- */
.wave-top-hero.wave-top::before,
.wave-hero.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23999999'/%3E%3C/svg%3E");
}
.wave-bottom-hero.wave-bottom::after,
.wave-hero.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23999999'/%3E%3C/svg%3E");
}

/* ===== TRANSITION PAIRS: wave-{edge}-{from}-{to} ===== */
/* Use these when adjacent sections have different background colors. */

/* --- TOP: light above → dark section --- */
.wave-top-light-dark.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23f2ede4'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23444444'/%3E%3C/svg%3E");
}
/* --- BOTTOM: light section → dark below --- */
.wave-bottom-light-dark.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23444444'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23f2ede4'/%3E%3C/svg%3E");
}

/* --- TOP: dark above → light section --- */
.wave-top-dark-light.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23444444'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23f2ede4'/%3E%3C/svg%3E");
}
/* --- BOTTOM: dark section → light below --- */
.wave-bottom-dark-light.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23f2ede4'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23444444'/%3E%3C/svg%3E");
}

/* --- TOP: light above → darker section --- */
.wave-top-light-darker.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23f2ede4'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23242221'/%3E%3C/svg%3E");
}
/* --- BOTTOM: light section → darker below --- */
.wave-bottom-light-darker.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23242221'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23f2ede4'/%3E%3C/svg%3E");
}

/* --- TOP: darker above → light section --- */
.wave-top-darker-light.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23242221'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23f2ede4'/%3E%3C/svg%3E");
}
/* --- BOTTOM: darker section → light below --- */
.wave-bottom-darker-light.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23f2ede4'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23242221'/%3E%3C/svg%3E");
}

/* --- TOP: white above → dark section --- */
.wave-top-white-dark.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23444444'/%3E%3C/svg%3E");
}
/* --- BOTTOM: dark section → white below --- */
.wave-bottom-dark-white.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23444444'/%3E%3C/svg%3E");
}

/* --- TOP: dark above → white section --- */
.wave-top-dark-white.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23444444'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23fcfaf7'/%3E%3C/svg%3E");
}
/* --- BOTTOM: white section → dark below --- */
.wave-bottom-white-dark.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23444444'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23fcfaf7'/%3E%3C/svg%3E");
}

/* --- TOP: eee above → dark section --- */
.wave-top-eee-dark.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23eeeeee'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23444444'/%3E%3C/svg%3E");
}
/* --- BOTTOM: dark section → eee below --- */
.wave-bottom-dark-eee.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23eeeeee'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23444444'/%3E%3C/svg%3E");
}

/* --- TOP: dark above → eee section --- */
.wave-top-dark-eee.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23444444'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23eeeeee'/%3E%3C/svg%3E");
}
/* --- BOTTOM: eee section → dark below --- */
.wave-bottom-eee-dark.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23444444'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23eeeeee'/%3E%3C/svg%3E");
}

/* --- TOP: dark above → darker section --- */
.wave-top-dark-darker.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23444444'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23242221'/%3E%3C/svg%3E");
}
/* --- BOTTOM: darker section → dark below --- */
.wave-bottom-darker-dark.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23444444'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23242221'/%3E%3C/svg%3E");
}

/* --- TOP: darker above → dark section --- */
.wave-top-darker-dark.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23242221'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23444444'/%3E%3C/svg%3E");
}
/* --- BOTTOM: dark section → darker below --- */
.wave-bottom-dark-darker.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23242221'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23444444'/%3E%3C/svg%3E");
}

/* --- TOP: white above → darker section --- */
.wave-top-white-darker.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23242221'/%3E%3C/svg%3E");
}
/* --- BOTTOM: darker section → white below --- */
.wave-bottom-darker-white.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23242221'/%3E%3C/svg%3E");
}

/* --- TOP: darker above → white section --- */
.wave-top-darker-white.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23242221'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23fcfaf7'/%3E%3C/svg%3E");
}
/* --- BOTTOM: white section → darker below --- */
.wave-bottom-white-darker.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23242221'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23fcfaf7'/%3E%3C/svg%3E");
}

/* --- TOP: white above → eee section --- */
.wave-top-white-eee.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23eeeeee'/%3E%3C/svg%3E");
}
/* --- BOTTOM: eee section → white below --- */
.wave-bottom-eee-white.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23eeeeee'/%3E%3C/svg%3E");
}

/* --- TOP: eee above → white section --- */
.wave-top-eee-white.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23eeeeee'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23fcfaf7'/%3E%3C/svg%3E");
}
/* --- BOTTOM: white section → eee below --- */
.wave-bottom-white-eee.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23eeeeee'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23fcfaf7'/%3E%3C/svg%3E");
}

/* --- light ↔ eee --- */
.wave-top-light-eee.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23f2ede4'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23eeeeee'/%3E%3C/svg%3E");
}
.wave-bottom-eee-light.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23f2ede4'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23eeeeee'/%3E%3C/svg%3E");
}
.wave-top-eee-light.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23eeeeee'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23f2ede4'/%3E%3C/svg%3E");
}
.wave-bottom-light-eee.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23eeeeee'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23f2ede4'/%3E%3C/svg%3E");
}

/* --- eee ↔ darker --- */
.wave-top-eee-darker.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23eeeeee'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23242221'/%3E%3C/svg%3E");
}
.wave-bottom-darker-eee.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23eeeeee'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23242221'/%3E%3C/svg%3E");
}
.wave-top-darker-eee.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23242221'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23eeeeee'/%3E%3C/svg%3E");
}
.wave-bottom-eee-darker.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23242221'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23eeeeee'/%3E%3C/svg%3E");
}

/* --- white ↔ light --- */
.wave-top-white-light.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23f2ede4'/%3E%3C/svg%3E");
}
.wave-bottom-light-white.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23f2ede4'/%3E%3C/svg%3E");
}
.wave-top-light-white.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23f2ede4'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23fcfaf7'/%3E%3C/svg%3E");
}
.wave-bottom-white-light.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23f2ede4'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23fcfaf7'/%3E%3C/svg%3E");
}

/* ===== WARM MINIMAL PALETTE ===== */

/* --- warm charcoal (#2C2C2C) on white --- */
.wave-charcoal.wave-top::before,
.wave-top-charcoal.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23242221'/%3E%3C/svg%3E");
}
.wave-charcoal.wave-bottom::after,
.wave-bottom-charcoal.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23242221'/%3E%3C/svg%3E");
}

/* --- warm off-white (#FAF8F5) on white --- */
.wave-warm.wave-top::before,
.wave-top-warm.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23fcfaf7'/%3E%3C/svg%3E");
}
.wave-warm.wave-bottom::after,
.wave-bottom-warm.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23fcfaf7'/%3E%3C/svg%3E");
}

/* --- Transition: white ↔ warm (#FAF8F5) --- */
.wave-top-white-warm.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23fcfaf7'/%3E%3C/svg%3E");
}
.wave-bottom-warm-white.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23fcfaf7'/%3E%3C/svg%3E");
}

/* --- Transition: warm (#FAF8F5) ↔ charcoal (#2C2C2C) --- */
.wave-top-warm-charcoal.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23242221'/%3E%3C/svg%3E");
}
.wave-bottom-warm-charcoal.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23242221'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23fcfaf7'/%3E%3C/svg%3E");
}
.wave-top-charcoal-warm.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23242221'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23fcfaf7'/%3E%3C/svg%3E");
}
.wave-bottom-charcoal-warm.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23242221'/%3E%3C/svg%3E");
}

/* --- Transition: charcoal (#2C2C2C) ↔ white --- */
.wave-top-charcoal-white.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23242221'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23fcfaf7'/%3E%3C/svg%3E");
}
.wave-bottom-charcoal-white.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23242221'/%3E%3C/svg%3E");
}
.wave-top-white-charcoal.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23242221'/%3E%3C/svg%3E");
}
.wave-bottom-white-charcoal.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23242221'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23fcfaf7'/%3E%3C/svg%3E");
}

/* --- Transition: light sage (#F2F5F0) ↔ charcoal (#2C2C2C) --- */
.wave-top-lsage-charcoal.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23f2ede4'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23242221'/%3E%3C/svg%3E");
}
.wave-bottom-lsage-charcoal.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23242221'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23f2ede4'/%3E%3C/svg%3E");
}
.wave-top-charcoal-lsage.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23242221'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23f2ede4'/%3E%3C/svg%3E");
}
.wave-bottom-charcoal-lsage.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23f2ede4'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23242221'/%3E%3C/svg%3E");
}

/* ===== WARM BEIGE (#f2ede4) & DARK (#242221) ===== */

/* --- Transition: white ↔ beige (#f2ede4) --- */
.wave-top-white-beige.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23f2ede4'/%3E%3C/svg%3E");
}
.wave-bottom-beige-white.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23f2ede4'/%3E%3C/svg%3E");
}

/* --- Transition: beige (#f2ede4) ↔ dark (#242221) --- */
.wave-top-beige-dkbrown.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23f2ede4'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23242221'/%3E%3C/svg%3E");
}
.wave-bottom-beige-dkbrown.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23242221'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23f2ede4'/%3E%3C/svg%3E");
}

/* --- Transition: dark (#242221) ↔ white --- */
.wave-top-dkbrown-white.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23242221'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23fcfaf7'/%3E%3C/svg%3E");
}
.wave-bottom-dkbrown-white.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23fcfaf7'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23242221'/%3E%3C/svg%3E");
}

/* --- Transition: beige (#f2ede4) ↔ dark gray (#444444) --- */
.wave-top-beige-dark.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23f2ede4'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23444444'/%3E%3C/svg%3E");
}
.wave-bottom-beige-dark.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23444444'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23f2ede4'/%3E%3C/svg%3E");
}
.wave-top-dark-beige.wave-top::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23444444'/%3E%3Cpath d='M0 48h1440V36c-160-12-280-36-480-36S560 36 400 36 200 12 0 12z' fill='%23f2ede4'/%3E%3C/svg%3E");
}
.wave-bottom-dark-beige.wave-bottom::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Crect width='1440' height='48' fill='%23f2ede4'/%3E%3Cpath d='M0 0h1440v12c-160 12-280 36-480 36S560 12 400 12 200 36 0 36z' fill='%23444444'/%3E%3C/svg%3E");
}