/* =========================================================
   V14 — breakpoint continuity + final alignment polish.
   Goal: no "dead zone" between phone/tablet/desktop.
   ========================================================= */

/* The white hero wave is a foreground mask: it must hide the hard crop
   of every transparent child cutout at every viewport width. */
.ref-hero::after{z-index:6!important;pointer-events:none!important}
.ref-hero__inner{z-index:4!important}
.hero-people{z-index:5!important}

/* Contacts: consistent text axis for social channels. */
.contact-social-link{box-sizing:border-box!important}
.contact-social-link span{margin:0!important;padding:0!important}
.contact-social-link strong,.contact-social-link small{margin-left:0!important;padding-left:0!important}

/* Callback is an important CTA, styled like the main hero action. */
.contact-details .callback-cta{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-height:52px!important;padding:14px 26px!important;border:0!important;border-radius:17px!important;
  color:#fff!important;background:#4d5dfa!important;font-weight:900!important;text-decoration:none!important;
  box-shadow:0 0 0 7px rgba(77,93,250,.10),0 15px 34px rgba(77,93,250,.38)!important;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease!important
}
.contact-details .callback-cta:hover{transform:translateY(-3px)!important;background:#4151ef!important;box-shadow:0 0 0 9px rgba(77,93,250,.13),0 20px 42px rgba(77,93,250,.46)!important}

/* Program arrows: true optical centering, no baseline hack. */
.program-mobile-arrow{display:grid!important;place-items:center!important;line-height:1!important}
.program-mobile-arrow::before{display:grid!important;place-items:center!important;width:100%!important;height:100%!important;margin:0!important;transform:none!important;line-height:1!important}
.program-mobile-arrow--prev::before{content:"←"!important}
.program-mobile-arrow--next::before{content:"→"!important}

/* ---------------------------------------------------------
   Small / medium desktop: 1021–1280px.
   Keep the desktop visual language, but constrain the absolute art.
   --------------------------------------------------------- */
@media (min-width:1021px) and (max-width:1280px){
  :root{--mid-gutter:32px}
  html,body{overflow-x:hidden!important}
  .container{width:calc(100% - (var(--mid-gutter) * 2))!important;max-width:1160px!important;margin-inline:auto!important}

  /* Header: keep navigation, drop secondary social chips before they squeeze it. */
  .header-inner{gap:18px!important;padding-inline:18px!important}
  .brand img{width:116px!important;height:auto!important}
  .desktop-nav{gap:16px!important}
  .desktop-nav a{font-size:13px!important}
  .header-socials{display:none!important}

  /* Hero becomes a contained 2-column composition instead of a desktop absolute overflow. */
  .ref-hero{height:620px!important;min-height:620px!important}
  .ref-hero__inner{
    display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(330px,.82fr)!important;gap:16px!important;
    height:620px!important;min-height:620px!important;padding:94px 0 58px!important
  }
  .ref-hero__copy{max-width:590px!important;align-self:center!important}
  .ref-hero h1{font-size:clamp(42px,4.5vw,55px)!important;line-height:1.02!important}
  .ref-hero p{max-width:570px!important;margin-top:20px!important;font-size:16px!important;line-height:1.48!important}
  .ref-actions{justify-content:flex-start!important;gap:18px!important;margin-top:24px!important}
  .ref-actions .ref-button{min-width:190px!important;padding:14px 22px!important;font-size:14px!important}
  .hero-people{position:relative!important;inset:auto!important;height:auto!important;min-height:470px!important;align-self:stretch!important;overflow:hidden!important}
  .hero-people__stage{position:absolute!important;inset:0!important;overflow:hidden!important}
  .hero-people__halo{left:50%!important;right:auto!important;bottom:-82px!important;width:520px!important;transform:translateX(-50%)!important}
  .hero-person--one{--person-width:390px!important;--person-right:calc(50% - 195px)!important;--person-bottom:-73px!important}
  .hero-person--two{--person-width:400px!important;--person-right:calc(50% - 200px)!important;--person-bottom:-78px!important}
  .hero-person--three{--person-width:290px!important;--person-right:calc(50% - 145px)!important;--person-bottom:-78px!important}
  .hero-person--four{--person-width:355px!important;--person-right:calc(50% - 178px)!important;--person-bottom:-78px!important}
  .ref-hero::after{left:-8%!important;right:-8%!important;bottom:-52px!important;height:105px!important}

  /* Radial advantages remain radial, but fit safely inside 1024–1280px. */
  .ref-feature-wheel{width:min(860px,100%)!important;height:440px!important;margin:22px auto 54px!important}
  .ref-feature-wheel__photo{width:245px!important;height:245px!important}
  .ref-mini-card{width:210px!important;min-height:106px!important;padding:15px 14px 12px!important}
  .ref-mini-card h3{font-size:15px!important}.ref-mini-card p{font-size:11.5px!important}
  .ref-mini-card--one{left:0!important;top:76px!important}
  .ref-mini-card--two{left:36px!important;bottom:64px!important}
  .ref-mini-card--three{bottom:10px!important}
  .ref-mini-card--four{right:36px!important;bottom:64px!important}
  .ref-mini-card--five{right:0!important;top:76px!important}

  /* Internal cards should never overrun the rail. */
  .ref-large-card,.ref-program-card,.shared-shifts,.contact-office-card,.contact-camp-card,.contact-social-card,.parents-card{max-width:100%!important}
  .contact-office-card,.contact-camp-card{min-width:0!important}
}

/* ---------------------------------------------------------
   Tablet: extend the compact layout through 1020px and center content.
   --------------------------------------------------------- */
@media (min-width:781px) and (max-width:1020px){
  .ref-about-card__copy{text-align:center!important}
  .ref-about-card__copy h2,.ref-about-card__copy p{margin-inline:auto!important;text-align:center!important}
  .ref-mosaic figcaption{left:50%!important;right:auto!important;transform:translateX(-50%)!important;text-align:center!important;justify-content:center!important}
  .ref-mosaic figure:nth-child(odd) figcaption{background:rgba(77,93,250,.94)!important}
  .ref-mosaic figure:nth-child(even) figcaption{background:rgba(41,167,26,.94)!important}
  .contact-social-link{display:grid!important;grid-template-columns:52px minmax(0,1fr)!important;align-items:center!important;justify-items:start!important;column-gap:14px!important;text-align:left!important}
  .contact-social-link img{grid-column:1!important;justify-self:center!important}
  .contact-social-link span{grid-column:2!important;justify-self:stretch!important;width:100%!important;text-align:left!important}
}

/* ---------------------------------------------------------
   Phones: refine vertical rhythm and keep hero group visually centered.
   --------------------------------------------------------- */
@media (max-width:780px){
  .ref-hero{height:610px!important;min-height:610px!important}
  .ref-hero__inner{height:610px!important;min-height:610px!important;padding-top:104px!important;padding-bottom:0!important}
  .ref-hero__copy{max-width:460px!important;margin-inline:auto!important;text-align:center!important}
  .ref-hero h1{font-size:clamp(28px,8vw,35px)!important;line-height:1.03!important;text-align:center!important}
  .ref-hero p{max-width:420px!important;margin:14px auto 0!important;font-size:13px!important;line-height:1.44!important;text-align:center!important}
  .ref-actions{justify-content:center!important;margin-top:17px!important}
  .ref-actions .ref-button--primary-cta{width:min(248px,78vw)!important;min-height:50px!important}
  .hero-people{height:272px!important;bottom:-1px!important;overflow:hidden!important}
  .hero-people__stage{overflow:hidden!important}
  .hero-people__halo{left:50%!important;bottom:-80px!important;width:360px!important;transform:translateX(-50%)!important}
  .hero-person--one{--person-width:296px!important;--person-right:calc(50% - 148px)!important;--person-bottom:-54px!important}
  .hero-person--two{--person-width:305px!important;--person-right:calc(50% - 153px)!important;--person-bottom:-57px!important}
  .hero-person--three{--person-width:218px!important;--person-right:calc(50% - 109px)!important;--person-bottom:-58px!important}
  .hero-person--four{--person-width:268px!important;--person-right:calc(50% - 134px)!important;--person-bottom:-57px!important}
  .ref-hero::after{left:-14%!important;right:-14%!important;bottom:-43px!important;height:84px!important}

  .ref-about-card__copy{text-align:center!important}
  .ref-about-card__copy h2,.ref-about-card__copy p{margin-inline:auto!important;text-align:center!important}

  .program-mobile-controls{grid-template-columns:56px 1fr 56px!important;width:min(340px,100%)!important;gap:12px!important}
  .program-mobile-arrow{width:56px!important;height:56px!important;border-radius:18px!important;font-size:0!important}
  .program-mobile-arrow::before{font-size:27px!important;font-weight:900!important;font-family:'Nunito',sans-serif!important}

  .contact-social-link{display:grid!important;grid-template-columns:56px minmax(0,1fr)!important;align-items:center!important;justify-items:start!important;column-gap:16px!important;width:100%!important;min-height:104px!important;padding:16px 18px!important;text-align:left!important}
  .contact-social-link img{grid-column:1!important;justify-self:center!important;width:48px!important;height:48px!important;margin:0!important}
  .contact-social-link span{grid-column:2!important;justify-self:stretch!important;width:100%!important;margin:0!important;text-align:left!important}
  .contact-social-link strong,.contact-social-link small{display:block!important;width:100%!important;margin:0!important;text-align:left!important}
  .contact-social-link small{margin-top:4px!important}

  .contact-details .callback-cta{display:flex!important;width:min(300px,100%)!important;margin:22px auto 0!important}
}

@media (max-width:390px){
  .ref-hero{height:595px!important;min-height:595px!important}
  .ref-hero__inner{height:595px!important;min-height:595px!important;padding-top:96px!important}
  .ref-hero h1{font-size:27px!important}
  .ref-hero p{font-size:12.4px!important}
  .hero-people{height:258px!important}
  .hero-person--one{--person-width:280px!important;--person-right:calc(50% - 140px)!important}
  .hero-person--two{--person-width:290px!important;--person-right:calc(50% - 145px)!important}
  .hero-person--three{--person-width:204px!important;--person-right:calc(50% - 102px)!important}
  .hero-person--four{--person-width:250px!important;--person-right:calc(50% - 125px)!important}
}