/* /styles/hero-height-480.css
   Phone-only: HERO HEIGHT override (nothing else)
*/

@media (max-width: 480px){

  /* Change this number to make it taller/shorter */
  html.is-home{
    --hero-phone-extra: -270px;
  }

  /* Force hero to be taller on phones */
  html.is-home .hero{
    height: auto !important; /* kills any fixed height from other css */
    min-height: calc(100svh + var(--hero-phone-extra)) !important;
    min-height: calc(100vh  + var(--hero-phone-extra)) !important; /* fallback */
  }
}
/* =========================================================
   MOBILE (≤480px) — nudge ONLY the hero background video down
   (does NOT move your CTA / search / hero content)
   ========================================================= */
@media (max-width: 480px){

  html.is-home{
    /* how much to move the video down */
    --hero-video-nudge: var(--topbar-h, 18px); /* or try 18px / 22px */
  }

  /* clip the moved video so it doesn't spill */
  html.is-home .hero{
    overflow: hidden !important;
  }

  /* move the VIDEO down, and extend its height so it still covers */
  html.is-home .hero .hero__bg{
    transform: translateY(var(--hero-video-nudge)) !important;
    height: calc(100% + var(--hero-video-nudge)) !important;
  }

  /* if you want the grid overlay to follow too */
  html.is-home .hero .hero__grid{
    transform: translateY(var(--hero-video-nudge)) !important;
    height: calc(100% + var(--hero-video-nudge)) !important;
  }
}