/* v310 — Hero adaptive composition.
   Goal: preserve the photo on phones/tablets and anchor the lower AV/dots group
   to the bottom of the hero on desktop/laptop without changing content. */

/* Shared geometry: title/actions stay in the upper reading zone; AV + dots use the free lower area. */
#hero .hero__inner.container-xl{
  align-items:stretch !important;
}
#hero .hero__content{
  height:100% !important;
  min-height:0 !important;
}
#hero .hero-av-slot{
  margin-top:auto !important;
}
#hero .hero__controls{
  margin-top:14px !important;
  height:38px !important;
}
#hero .hero__dot,
#hero .hero__dot.is-active{
  height:38px !important;
}
#hero .hero__dot::before,
#hero .hero__dot::after{
  top:14px !important;
}

/* Desktop: keep the existing title position, but push the lower information group down. */
@media (min-width:1200px){
  #hero .hero__content{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
  }
  #hero .hero-av-slot{
    width:430px !important;
  }
  #hero .hero__controls{
    margin-bottom:0 !important;
  }
}

/* Short desktop/laptop screens: compact controls, not the spacing strategy. */
@media (min-width:992px) and (max-height:820px){
  #hero .hero__inner.container-xl{
    padding-bottom:20px !important;
  }
  #hero .hero-av-slot{
    margin-top:auto !important;
  }
  #hero .hero__controls{
    margin-top:10px !important;
    height:30px !important;
  }
  #hero .hero__dot,
  #hero .hero__dot.is-active{
    height:30px !important;
  }
  #hero .hero__dot::before,
  #hero .hero__dot::after{
    top:11px !important;
  }
}

/* Laptop / landscape tablet. */
@media (min-width:992px) and (max-width:1199.98px){
  #hero .hero__slider{
    min-height:0 !important;
  }
  #hero .hero__inner.container-xl{
    padding-top:clamp(50px,8vh,72px) !important;
    padding-right:58px !important;
    padding-bottom:24px !important;
    padding-left:62px !important;
  }
  #hero .hero__content{
    width:min(100%,520px) !important;
    max-width:520px !important;
  }
  #hero .hero__main,
  #hero .hero__main .hero__title{
    max-width:490px !important;
  }
  #hero .hero__main .hero__title{
    font-size:clamp(39px,4.8vw,48px) !important;
  }
  #hero .hero__action{
    margin-top:20px !important;
  }
  #hero .hero-av-slot{
    width:350px !important;
  }
}

/* Portrait tablets: leave a large clean photo area between CTA and the lower tools. */
@media (min-width:768px) and (max-width:991.98px){
  #hero .hero__slider{
    height:calc(100vh - var(--header-h)) !important;
    height:calc(100svh - var(--header-h)) !important;
    min-height:0 !important;
  }
  #hero .hero__inner.container-xl{
    padding:44px 38px 24px !important;
  }
  #hero .hero__content{
    width:min(100%,490px) !important;
    max-width:490px !important;
  }
  #hero .hero__main{
    max-width:455px !important;
  }
  #hero .hero__main .hero__title{
    max-width:455px !important;
    font-size:clamp(38px,5.4vw,46px) !important;
    line-height:1.02 !important;
  }
  #hero .hero__action{
    margin-top:18px !important;
  }
  #hero .hero__action .btn,
  #hero .hero__action .hero__btn-secondary{
    min-height:46px !important;
    height:46px !important;
  }
  #hero .hero-av-slot{
    width:330px !important;
  }
  #hero #heroAvTools .hero-av-btn{
    min-height:48px !important;
    height:48px !important;
  }
  #hero .hero__controls{
    margin-top:10px !important;
    height:30px !important;
  }
  #hero .hero__dot,
  #hero .hero__dot.is-active{
    height:30px !important;
  }
  #hero .hero__dot::before,
  #hero .hero__dot::after{
    top:11px !important;
  }
  #hero .hero__bg::before{
    width:62% !important;
  }
}

/* Phones: true one-screen hero, smaller title, stacked CTAs, lower tools pinned down. */
@media (max-width:767.98px){
  #hero .hero__slider{
    height:calc(100vh - var(--header-h)) !important;
    height:calc(100svh - var(--header-h)) !important;
    min-height:0 !important;
    max-height:none !important;
  }
  #hero .hero__inner.container-xl{
    height:100% !important;
    padding-top:clamp(72px,14svh,112px) !important;
    padding-right:18px !important;
    padding-bottom:12px !important;
    padding-left:18px !important;
  }
  #hero .hero__content{
    width:100% !important;
    max-width:100% !important;
  }
  #hero .hero__main{
    width:min(92%,360px) !important;
    max-width:360px !important;
  }
  #hero .hero__main .hero__title{
    width:100% !important;
    max-width:100% !important;
    font-size:clamp(29px,8.45vw,35px) !important;
    line-height:1.015 !important;
    letter-spacing:-.03em !important;
    text-wrap:balance !important;
  }
  #hero .hero__action{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:6px !important;
    width:min(100%,350px) !important;
    margin-top:15px !important;
  }
  #hero .hero__action .btn,
  #hero .hero__action .hero__btn-secondary{
    width:100% !important;
    min-width:0 !important;
    height:40px !important;
    min-height:40px !important;
    padding:0 12px !important;
    font-size:10.5px !important;
  }
  #hero .hero-av-slot{
    width:min(100%,350px) !important;
    max-width:350px !important;
    margin-top:auto !important;
  }
  #hero #heroAvTools.hero-av-tools{
    gap:7px !important;
  }
  #hero #heroAvTools .hero-av-tools__eyebrow{
    font-size:8.5px !important;
    letter-spacing:.18em !important;
  }
  #hero #heroAvTools .hero-av-actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
    width:100% !important;
  }
  #hero #heroAvTools .hero-av-tool,
  #hero #heroAvTools .hero-av-btn{
    width:100% !important;
    min-width:0 !important;
  }
  #hero #heroAvTools .hero-av-btn{
    height:42px !important;
    min-height:42px !important;
    padding:0 10px !important;
    gap:8px !important;
  }
  #hero #heroAvTools .hero-av-btn__icon{
    width:25px !important;
    height:25px !important;
    flex:0 0 25px !important;
  }
  #hero #heroAvTools .hero-av-btn__copy strong{
    font-size:11px !important;
  }
  #hero .hero__controls{
    margin-top:5px !important;
    height:22px !important;
  }
  #hero .hero__dot,
  #hero .hero__dot.is-active{
    width:38px !important;
    flex-basis:38px !important;
    height:22px !important;
  }
  #hero .hero__dot::before,
  #hero .hero__dot::after{
    left:4px !important;
    right:4px !important;
    top:8px !important;
    height:2px !important;
  }
  #hero .hero__nav-btn{
    top:52% !important;
    width:34px !important;
    height:34px !important;
  }
  #hero .hero__nav-btn--prev{left:7px !important;}
  #hero .hero__nav-btn--next{right:7px !important;}

  /* Keep a readable left field, but leave the right side of the image visibly untouched. */
  #hero .hero__bg::before{
    width:86% !important;
    background:linear-gradient(90deg,
      rgba(5,6,6,.96) 0%,
      rgba(5,6,6,.91) 30%,
      rgba(5,6,6,.72) 52%,
      rgba(5,6,6,.43) 70%,
      rgba(5,6,6,.16) 88%,
      rgba(5,6,6,0) 100%) !important;
  }
  #hero .hero__slide:nth-child(1) .hero__bg{background-position:59% center !important;}
  #hero .hero__slide:nth-child(2) .hero__bg{background-position:58% center !important;}
  #hero .hero__slide:nth-child(3) .hero__bg{background-position:59% center !important;}
}

/* Extra-small phones: protect the first word from breaking and retain all controls in one screen. */
@media (max-width:359.98px){
  #hero .hero__inner.container-xl{
    padding-top:clamp(60px,11svh,76px) !important;
    padding-right:14px !important;
    padding-bottom:8px !important;
    padding-left:14px !important;
  }
  #hero .hero__main{
    width:94% !important;
  }
  #hero .hero__main .hero__title{
    font-size:27px !important;
    letter-spacing:-.035em !important;
  }
  #hero .hero__action{
    margin-top:11px !important;
    gap:4px !important;
  }
  #hero .hero__action .btn,
  #hero .hero__action .hero__btn-secondary{
    height:36px !important;
    min-height:36px !important;
    font-size:9.5px !important;
  }
  #hero #heroAvTools .hero-av-btn{
    height:38px !important;
    min-height:38px !important;
  }
  #hero #heroAvTools .hero-av-btn__icon{
    width:22px !important;
    height:22px !important;
    flex-basis:22px !important;
  }
  #hero #heroAvTools .hero-av-btn__copy strong{
    font-size:10px !important;
  }
}