/* ===========================
   Global (mobile first)
   Default styles apply to <576px
   =========================== */

   .brand-logo-nav img {
    max-height: 150px;
    display: block !important;
  }

  .hero {
    min-height: clamp(260px, 60vw, 500px);
    position: relative; overflow: hidden;
  }

  .site-nav .nav-item {
    margin-top: 0;
  }
  .brand-logo-nav img
  {
    margin-top:0px;
  }

   .meet__wave {
    display: block;
    width: 100%;
    height: auto;
    position: relative;                /* so z-index applies */
    z-index: 5;                        /* above photo + process */
    pointer-events: none;
    top: -10px; /* pull next section up under the wave */
  }

  .process {
    background: #9e5c99;
    position: relative;
    z-index: 2;                        /* below the wave, above the meet bg */
    /*padding-top: var(--process-wave-h);/* content starts just under the wave */
    padding-top:40px !important;
    margin-top:-10px;
    /* no negative margin needed here because the wave handles the overlap */
  }

  .hero-title-services, 
  {
    font-size:40px;
  }

  .hero-title-contact
  {
    font-size:36px;
    margin-top:50px;
  }

  .hero-title {
    font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #ffffff;
    font-weight: 800;              /* ExtraBold */
    font-size: clamp(28px, 4.2vw, 48px);
    line-height: 1.2;
    margin-bottom: 1rem;
    margin-top:70px;
  }


/* Small devices (≥576px) */
@media (min-width: 576px) {

  .hero {
    min-height: clamp(460px, 60vw, 700px);
    position: relative; overflow: hidden;
  }

  /* Your sm+ styles here */
  .brand-logo-nav img {
    max-height: 200px;
    display: block;
  }
  .site-nav .nav-item {
    margin-top: 0;
  }
  .brand-logo-nav img
  {
    margin-top:0px;
  }
  .areas__kids-img {
    position: absolute;
    right: 5%;                          /* tweak to taste */
    top: calc(-1 * min(8vw, 70px));      /* stick out above */
    width: clamp(160px, 24vw, 320px);
    height: auto;
    pointer-events: none;
    z-index: 200;                        /* above section + wave */
  }

  .hero-title-services
  {
    font-size:48px;
  }

  .hero-title-contact
  {
    font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #ffffff;
    font-weight: 800;              /* ExtraBold */
    font-size: clamp(48px, 4.2vw, 72px);
    line-height: 1.2;
    margin-bottom: 1rem;
    margin-top:100px;
  }

  .hero-title {
    font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #ffffff;
    font-weight: 800;              /* ExtraBold */
    font-size: clamp(28px, 4.2vw, 48px);
    line-height: 1.2;
    margin-bottom: 1rem;
    margin-top:110px;
  }

  .meet__wave {
    display: block;
    width: 100%;
    height: auto;
    position: relative;                /* so z-index applies */
    z-index: 5;                        /* above photo + process */
    pointer-events: none;
    top: -10px; /* pull next section up under the wave */
  }

  .process {
    background: #9e5c99;
    position: relative;
    z-index: 2;                        /* below the wave, above the meet bg */
    /*padding-top: var(--process-wave-h);/* content starts just under the wave */
    padding-top:40px !important;
    margin-top:-10px;
    /* no negative margin needed here because the wave handles the overlap */
  }
}


/* Medium devices (≥768px) */
@media (min-width: 768px) {

  .hero {
    min-height: clamp(460px, 60vw, 700px);
    position: relative; overflow: hidden;
  }

  .brand-logo-nav img {
    max-height: 200px;
    display: block;
  }
  .site-nav .nav-item {
    margin-top: 185px;
  }
  .brand-logo-nav img
  {
    margin-top:0px;
  }

  .site-header {
    height: 250px;
    position: relative;
  }
  .areas__kids-img {
    position: absolute;
    right: 10%;                          /* tweak to taste */
    top: calc(-1 * min(8vw, 90px));      /* stick out above */
    width: clamp(160px, 24vw, 320px);
    height: auto;
    pointer-events: none;
    z-index: 200;                        /* above section + wave */
  }

  .hero-title-contact
  {
    font-size:48px;
  }

  .meet__wave {
    display: block;
    width: 100%;
    height: auto;
    position: relative;                /* so z-index applies */
    z-index: 5;                        /* above photo + process */
    pointer-events: none;
    top: -10px; /* pull next section up under the wave */
  }

  .process {
    background: #9e5c99;
    position: relative;
    z-index: 2;                        /* below the wave, above the meet bg */
    /*padding-top: var(--process-wave-h);/* content starts just under the wave */
    padding-top:40px !important;
    margin-top:-10px;
    /* no negative margin needed here because the wave handles the overlap */
  }
}


/* Large devices (≥992px) */
@media (min-width: 992px) {

  .hero {
    min-height: clamp(460px, 60vw, 700px);
    position: relative; overflow: hidden;
  }

  .brand-logo-nav img {
    max-height: 250px;
    display: block;
  }

  .site-header {
    height: 250px;
    position: relative;
  }

  .site-nav .nav-item {
    margin-top: 150px;
  }
  .brand-logo-nav img
  {
    margin-top:-150px;
  }

  .shape--star { left: 14.3%; top: 10%; }
  .shape--semi { left: 9.8%; top: 17.1%; }
  .shape--square   { right: 8%; top: 22%; }
  .shape--circle   { right: 5%;  top: 42%; }
  .shape--triangle { right: 10%; bottom: 20%; }

  .hero-title {
    
    
    font-weight: 800;              /* ExtraBold */
    font-size: clamp(24px, 4.2vw, 48px);
    line-height: 1.2;
    margin-bottom: 1rem;
    margin-top:110px;
  }
  .hero-subtitle {
 
    font-weight: 400;              /* Regular */
    font-size: clamp(14px, 2.2vw, 20px);
    line-height: 1.5;
    max-width: 60ch;
  }

  .flipcard__face--back {
    font-size: 16px;
    line-height: 20px;
    font-weight: 400; /* probably lighter than the front */
    color: #5e5e5e;   /* keep the same colour */
  }

  .flipcard {
    background: transparent;
    border: 0;
    width: 100%;
    height: 165px; /* adjust to taste; rows will stretch */
    perspective: 1000px;
    outline: none;
  }

  .meet__wave {
    display: block;
    width: 100%;
    height: auto;
    position: relative;                /* so z-index applies */
    z-index: 5;                        /* above photo + process */
    pointer-events: none;
    top: -90px; /* pull next section up under the wave */
  }

  /* Small screens: tighten a bit */
  @media (max-width: 575.98px) {
    .meet__title { font-size: 32px; line-height: 40px; }
  }

  /* --- Process section (solid purple) --- */
  .process {
    background: #9e5c99;
    position: relative;
    z-index: 2;                        /* below the wave, above the meet bg */
    /*padding-top: var(--process-wave-h);/* content starts just under the wave */
    padding-top:80px !important;
    margin-top:-90px;
    /* no negative margin needed here because the wave handles the overlap */
  }
}


/* Extra large devices (≥1200px) */
@media (min-width: 1200px) {
  
}


/* Extra extra large devices (≥1400px) */
@media (min-width: 1400px) {
  /* Your xxl+ styles here */
}