/* ============================================================
   V147 — FINAL MOBILE HOMEPAGE INTRO + ENROLLING POLISH
   Mobile only. Desktop remains untouched.
============================================================ */

@media (max-width:767px){
  /* Opening labels: larger, spaced around the sunflower, never overlapping each other. */
  body.v4-home .v4-opening .intro-age-leaf-v84{
    left:-4%!important;
    top:1.5%!important;
    width:148px!important;
  }
  body.v4-home .v4-opening .intro-age-leaf-v84 span{
    font-size:8.5px!important;
    line-height:1!important;
    margin-bottom:4px!important;
  }
  body.v4-home .v4-opening .intro-age-leaf-v84 strong{
    font-size:29px!important;
    line-height:.92!important;
  }

  body.v4-home .v4-opening .intro-voucher-leaf-v111{
    right:-4%!important;
    top:1.5%!important;
    width:148px!important;
  }
  body.v4-home .v4-opening .intro-voucher-leaf-v111 span{
    font-size:8px!important;
    line-height:1!important;
    margin-bottom:4px!important;
  }
  body.v4-home .v4-opening .intro-voucher-leaf-v111 strong{
    font-size:18px!important;
    line-height:1!important;
  }

  body.v4-home .v4-opening .intro-daycare-banner{
    top:17%!important;
    max-width:86vw!important;
    padding:10px 16px!important;
    font-size:11px!important;
    line-height:1.15!important;
    letter-spacing:.15em!important;
    white-space:nowrap!important;
  }

  /* Opening copy sits closer to the sunflower, but below it. */
  body.v4-home .v4-opening .v4-open-copy{
    top:61.5%!important;
    width:88vw!important;
  }
  body.v4-home .v4-opening .v4-open-copy p{
    font-size:11.5px!important;
    line-height:1.25!important;
    letter-spacing:.17em!important;
    margin:0 0 10px!important;
  }
  body.v4-home .v4-opening .v4-open-copy small{
    display:block!important;
    font-size:9.5px!important;
    line-height:1.3!important;
    letter-spacing:.15em!important;
    margin-top:12px!important;
  }

  /* Post-animation hero microcopy is more readable. */
  body.v4-home .v4-opening .v4-bloom-copy>p{
    font-size:11.5px!important;
    line-height:1.25!important;
    letter-spacing:.18em!important;
    margin-bottom:9px!important;
  }
  body.v4-home .v4-opening .v4-bloom-copy>span{
    font-size:14.5px!important;
    line-height:1.5!important;
    max-width:88vw!important;
  }

  /* NOW ENROLLING is its own section after the hero — no negative overlap. */
  body.v4-home .now-enrolling-bar{
    margin-top:0!important;
    position:relative!important;
    z-index:2!important;
    transform:none!important;
    padding:24px 0!important;
  }
  body.v4-home .now-enrolling-inner{
    gap:17px!important;
  }
  body.v4-home .now-enrolling-inner span{
    font-size:14px!important;
    line-height:1.2!important;
    letter-spacing:.18em!important;
  }
  body.v4-home .now-enrolling-inner strong{
    font-size:28px!important;
    line-height:1.12!important;
  }
  body.v4-home .now-enrolling-inner small{
    display:block!important;
    font-size:16px!important;
    line-height:1.5!important;
    opacity:.96!important;
  }
}

@media (max-width:479px){
  body.v4-home .v4-opening .intro-age-leaf-v84{
    left:-5.5%!important;
    top:1.5%!important;
    width:136px!important;
  }
  body.v4-home .v4-opening .intro-age-leaf-v84 span{font-size:8px!important}
  body.v4-home .v4-opening .intro-age-leaf-v84 strong{font-size:27px!important}

  body.v4-home .v4-opening .intro-voucher-leaf-v111{
    right:-5.5%!important;
    top:1.5%!important;
    width:136px!important;
  }
  body.v4-home .v4-opening .intro-voucher-leaf-v111 span{font-size:7.5px!important}
  body.v4-home .v4-opening .intro-voucher-leaf-v111 strong{font-size:17px!important}

  body.v4-home .v4-opening .intro-daycare-banner{
    top:17.5%!important;
    max-width:88vw!important;
    padding:9px 13px!important;
    font-size:10px!important;
    letter-spacing:.13em!important;
  }

  body.v4-home .v4-opening .v4-open-copy{top:60.5%!important}
  body.v4-home .v4-opening .v4-open-copy p{font-size:10.5px!important}
  body.v4-home .v4-opening .v4-open-copy small{font-size:9px!important}

  body.v4-home .v4-opening .v4-bloom-copy>p{font-size:10.5px!important}
  body.v4-home .v4-opening .v4-bloom-copy>span{font-size:14px!important;line-height:1.48!important}

  body.v4-home .now-enrolling-inner span{font-size:13px!important}
  body.v4-home .now-enrolling-inner strong{font-size:26px!important}
  body.v4-home .now-enrolling-inner small{font-size:15.5px!important;line-height:1.48!important}
}


/* ============================================================
   V148 — FINAL MOBILE HERO COLLISION FIX
   Keep opening text clear of clouds/artwork.
   Hide daycare banner as the hero animation completes.
============================================================ */

@media (max-width:767px){
  /* Move opening copy into a clear lane beneath the sunflower
     and above the meadow so it does not sit on top of clouds. */
  body.v4-home .v4-opening .v4-open-copy{
    top:65.5%!important;
    width:84vw!important;
    max-width:520px!important;
    z-index:14!important;
  }

  body.v4-home .v4-opening .v4-open-copy p,
  body.v4-home .v4-opening .v4-open-copy h1,
  body.v4-home .v4-opening .v4-open-copy small{
    position:relative!important;
    z-index:2!important;
    text-shadow:0 1px 0 rgba(255,248,225,.75)!important;
  }

  /* Keep cloud artwork away from the copy lane. */
  body.v4-home .v4-opening .cloud-a{
    top:34vh!important;
    left:-2vw!important;
  }
  body.v4-home .v4-opening .cloud-b{
    top:22vh!important;
    right:-4vw!important;
  }

  /* "A daycare made for little ones" belongs only to the
     opening phase. Fade it out before the post-animation hero. */
  body.v4-home .v4-opening .intro-daycare-banner{
    opacity:clamp(0,calc(1 - (var(--v4p) - .38)*5),1)!important;
    transform:translateX(-50%) translateY(calc(var(--v4p)*-12px))!important;
    transition:none!important;
    pointer-events:none!important;
  }
}

@media (max-width:479px){
  body.v4-home .v4-opening .v4-open-copy{
    top:64.5%!important;
    width:86vw!important;
  }

  body.v4-home .v4-opening .cloud-a{
    top:32vh!important;
    left:-7vw!important;
  }
  body.v4-home .v4-opening .cloud-b{
    top:20vh!important;
    right:-7vw!important;
  }
}


/* ============================================================
   V150 — HERO TEXT APPEARANCE ONLY
   Keep V149 placement, restore the original clean text treatment.
============================================================ */
@media(max-width:767px){
  body.v4-home .v4-opening .v4-open-copy,
  body.v4-home .v4-opening .v4-open-copy p,
  body.v4-home .v4-opening .v4-open-copy h1,
  body.v4-home .v4-opening .v4-open-copy small{
    background:transparent!important;
    box-shadow:none!important;
    text-shadow:none!important;
  }
}


/* ============================================================
   V152 — MOBILE HERO VIEWPORT + CLEAN SECTION HANDOFF
   1) Raise opening text ~10px.
   2) Use dynamic viewport height so no white strip appears.
   3) Keep NOW ENROLLING behind the pinned hero until release.
============================================================ */

@media(max-width:767px){
  /* About 10px higher than V151, same placement otherwise. */
  body.v4-home .v4-opening .v4-open-copy{
    top:calc(65.5% - 10px)!important;
  }

  /* Match the actual visible mobile viewport as browser chrome changes. */
  body.v4-home .v4-opening .v4-pin{
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    position:sticky!important;
    top:0!important;
    z-index:5!important;
    background-color:var(--v4-cream)!important;
  }

  /* Keep the entire hero above the next section while it is pinned. */
  body.v4-home .v4-opening{
    position:relative!important;
    z-index:5!important;
    margin-bottom:0!important;
  }

  /* The banner stays a true next section instead of riding up over hero content. */
  body.v4-home .now-enrolling-bar{
    position:relative!important;
    z-index:1!important;
    margin-top:0!important;
    transform:none!important;
  }
}

@media(max-width:479px){
  body.v4-home .v4-opening .v4-open-copy{
    top:calc(64.5% - 10px)!important;
  }
}


/* ============================================================
   V153 — STABLE MOBILE HERO + NON-OVERLAPPING HANDOFF
   Avoid 100dvh resizing during scroll (which caused shaking).
   Use a captured stable pixel height and isolate the next section.
============================================================ */
@media(max-width:767px){
  body.v4-home .v4-opening{
    z-index:2!important;
    margin:0!important;
    background:var(--v4-cream)!important;
  }

  body.v4-home .v4-opening .v4-pin{
    height:var(--stable-mobile-hero-h,100svh)!important;
    min-height:var(--stable-mobile-hero-h,100svh)!important;
    max-height:var(--stable-mobile-hero-h,100svh)!important;
    top:0!important;
    position:sticky!important;
    z-index:3!important;
  }

  /* Keep the following banner below the hero's stacking context.
     It does not climb over the pinned frame. */
  body.v4-home .now-enrolling-bar{
    position:relative!important;
    z-index:4!important;
    margin:0!important;
    transform:none!important;
    clear:both!important;
    isolation:isolate!important;
  }

  /* A tiny solid seam prevents any browser rounding gap without overlap. */
  body.v4-home .now-enrolling-bar::before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:-2px!important;
    height:2px!important;
    background:inherit!important;
    pointer-events:none!important;
  }
}