/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero {
    padding: clamp(9rem, 18vw, 11rem) 1rem clamp(3rem, 6vw, 4rem);
    background-color: #fcfbf2;
  }

  /* Rounded panel the copy and shapes sit inside, framed by the section's
     own flat background rather than filling the full viewport width. */
  #hero .cs-hero-panel {
    width: 90%;
    max-width: 90rem;
    margin: auto;
    padding: clamp(4rem, 10vw, 7rem) 1rem;
    background-color: #f7f5df;
    border-radius: clamp(1rem, 2.5vw, 1.75rem);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    position: relative;
    z-index: 1;
  }
  /* Solid-colour cutout shapes anchored to the panel's corners, allowed to
     spill past its rounded edges onto the flat background behind it,
     matching the reference's collage treatment. Paint texture: a
     fractal-noise background layered over the flat colour with
     `background-blend-mode: overlay`, plus the shared #cs-paint-edge SVG
     filter (defined inline in index.html), which displaces each shape's
     silhouette along a turbulence map so edges read as roughly cut/painted
     rather than vector-perfect. */
  #hero .cs-hero-panel:before,
  #hero .cs-hero-panel:after,
  #hero .cs-shape-blue,
  #hero .cs-shape-red {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    background-repeat: repeat;
    background-size: 120px 120px;
    background-blend-mode: overlay;
    filter: url(#cs-paint-edge);
  }
  #hero .cs-hero-panel:before {
    width: clamp(9rem, 20vw, 15rem);
    height: clamp(9rem, 20vw, 15rem);
    background-color: var(--secondary);
    background-image: var(--cs-paint-grain);
    border-radius: 50%;
    top: -4rem;
    right: -3rem;
    opacity: 0.9;
  }
  #hero .cs-hero-panel:after {
    width: clamp(12rem, 26vw, 19rem);
    height: clamp(10rem, 22vw, 16rem);
    background-color: var(--primary);
    background-image: var(--cs-paint-grain);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    bottom: -2rem;
    left: -4rem;
    opacity: 0.9;
  }
  #hero .cs-shape-blue {
    width: clamp(5rem, 12vw, 8rem);
    height: clamp(5rem, 12vw, 8rem);
    background-color: var(--accentBlue);
    background-image: var(--cs-paint-grain);
    border-radius: 1.25rem;
    top: 12%;
    left: -2%;
    opacity: 0.85;
  }
  #hero .cs-shape-red {
    width: clamp(4rem, 9vw, 6rem);
    height: clamp(4rem, 9vw, 6rem);
    background-color: var(--accentRed);
    background-image: var(--cs-paint-grain);
    border-radius: 50%;
    bottom: 10%;
    right: -2%;
    opacity: 0.85;
  }
  #hero .cs-container {
    width: 100%;
    max-width: 50rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 10;
  }
  #hero .cs-topper {
    color: var(--accentText);
  }
  #hero .cs-title {
    max-width: 20ch;
    color: var(--navy);
  }
  #hero .cs-title em {
    color: var(--accentTextDark);
  }
  #hero .cs-text {
    max-width: 36.25rem;
    font-size: clamp(1rem, 2.2vw, 1.1875rem);
    margin: 0 auto clamp(2rem, 4vw, 2.5rem);
    color: var(--bodyTextColor);
  }
  #hero .cs-button-group {
    justify-content: center;
  }
}