.home_hero_section{background:#140b06;position:relative;height:85vh}

.hero__sticky_wrapper {
  position: sticky;
  top: 64px;                 /* nav height only */
  height: calc(85vh);
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  background:#140b06;
}

.hero__content{flex-shrink:0;position:relative;z-index:5;padding:0;animation:.8s .3s both fadeUp}

.home_hero_section h1{font-style:normal;line-height:1.1;font-weight:700;font-size:130px;color:#ffefe1;margin:30px 0;font-family:FSIndustrieCd,Impact,sans-serif;position:relative;text-align:center}

.home_hero_section h1 sup{font-size:30px}.hero-ctas{display:flex;animation:.8s .6s both fadeUp;flex-wrap:wrap;position:relative;gap:20px;justify-content:center;margin-bottom:30px}

.hero-ctas .btn_secondary{background:#180d069e}@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

.hero__video_area {
  position: absolute;
  top: -250px;
  bottom: 0px;
  width: 100%;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background: #140b06;
  animation: 1s .5s both videoReveal;
}

@keyframes videoReveal{from{transform:translateY(40px);opacity:.6}to{transform:translateY(0);opacity:1}}

#scroll-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video__hint{margin: 0px 0px 50px 0px; 
 position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255,239,225,.6);
  font-size: 16px;
  letter-spacing: 0px;
   font-weight: 400;
  font-family: FSIndustrieWd, sans-serif;
  transition: opacity .5s;
  pointer-events: none;
  animation: 1s 1.2s both fadeUp;
  opacity: 0.6;}

.video__hint.hidden{opacity:0}

.scroll-arrow{width:18px;height:18px;border-right:2px solid rgba(255,239,225,.8);border-bottom:2px solid rgba(255,239,225,.8);transform:rotate(45deg);animation:1.5s infinite arrowBounce}

.scroll-line-path {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: drawLine 3.6s ease-in-out infinite;
}

.scroll-chevron-path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: drawChevron 3.6s ease-in-out infinite;
}

@keyframes drawLine {
  0%        { stroke-dashoffset: 36; opacity: 1; }
  30%       { stroke-dashoffset: 0;  opacity: 1; }
  70%       { stroke-dashoffset: 0;  opacity: 1; }
  85%       { stroke-dashoffset: 0;  opacity: 0; }
  86%, 100% { stroke-dashoffset: 36; opacity: 0; }
}

@keyframes drawChevron {
  0%,  29%  { stroke-dashoffset: 24; opacity: 0; }
  30%       { stroke-dashoffset: 24; opacity: 1; }
  50%       { stroke-dashoffset: 0;  opacity: 1; }
  70%       { stroke-dashoffset: 0;  opacity: 1; }
  85%       { stroke-dashoffset: 0;  opacity: 0; }
  86%, 100% { stroke-dashoffset: 24; opacity: 0; }
}


@media(max-width:576px){
  .hero__sticky_wrapper,.home_hero_section{height:auto;min-height:450px}
  .home_hero_section h1{font-size:50px;margin: 0px 0px 20px 0px;}
  .hero__video_area{top: 0px; bottom:0}
  .video__hint {margin: 50px 0px 0px 0px}
  .scroll-line-path {
    display: none;
  }

  .scroll-chevron-path {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: drawChevron 3.6s ease-in-out infinite;
  }
}
}



/* Mobile portrait — small */
@media(max-width:576px){
  .hero__sticky_wrapper, .home_hero_section { height: auto; min-height: 450px; }
  .home_hero_section h1 { font-size: 50px; margin: 0 0 20px 0; }
  .hero__video_area     { top: 0; bottom: 0; }
  .video__hint          { margin: 50px 0 0 0; }
  .scroll-line-path     { display: none; }
}

/* Mobile portrait — medium */
@media(min-width:576px) and (max-width:768px){
  .hero__sticky_wrapper, .home_hero_section { height: auto; min-height: 450px; }
  .home_hero_section h1 { font-size: 50px; margin: 0 0 20px 0; }
  .hero__video_area     { top: 0; bottom: 0; }
  .video__hint          { margin: 50px 0 0 0; }
  .scroll-line-path     { display: none; }
}

/* Tablet portrait */
@media(min-width:768px) and (max-width:991.98px) and (orientation: portrait){
  .home_hero_section    { height: auto; }
  .hero__sticky_wrapper { position: sticky; height: 65dvh; }
  .home_hero_section h1 { font-size: 55px; margin: 50px 0; }
  .hero-ctas            { margin-bottom: 20px; }
  .hero__video_area     { position: absolute; top: -100px; bottom: 0; border-radius: 20px 20px 0 0; }
  #scroll-video         { height: 100%; }
  .video__hint          { margin: 50px 0 0 0; }
}

/* Tablet landscape */
@media(min-width:768px) and (max-width:991.98px) and (orientation: landscape){
  .home_hero_section    { height: 250vh; }
  .hero__sticky_wrapper { height: 100vh; }
  .home_hero_section h1 { font-size: 50px; margin: 15px 0; }
  .hero__video_area     { top: 0; bottom: 0; }
}

/* Phone landscape — MUST come after tablet landscape to override */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px){
  .home_hero_section    { height: 100vh; }
  .hero__sticky_wrapper { top: 0; height: 100dvh; }
  .home_hero_section h1 { font-size: 36px; margin: 50px 0; }
  .hero-ctas            { margin-bottom: 8px; gap: 10px; }
  .hero__video_area     { top: 0px; bottom: 0; }
  .scroll-chevron       { width: 20px; height: 20px; }
}

/* Small desktop / large tablet */
@media(min-width:992px) and (max-width:1199.98px){
  .home_hero_section    { height: auto; }
  .hero__sticky_wrapper { position: sticky; height: 75dvh; }
  .home_hero_section h1 { font-size: 75px; margin: 50px 0; }
  .hero-ctas            { margin-bottom: 20px; }
  .hero__video_area     { position: absolute; top: -100px; bottom: 0; border-radius: 20px 20px 0 0; }
  #scroll-video         { height: 100%; }
  .video__hint          { margin: 50px 0 0 0; }
}