/* Hero video integration. Kept separate so the original page structure remains intact. */
.hero-video-frame {
  overflow: hidden;
}

.hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #090909;
  filter: contrast(1.06) brightness(.86) saturate(1.04);
}

@media (min-width: 761px) {
  .hero-video-frame {
    /* Preserve the exact desktop media area while cropping the vertical edit into it. */
    padding: 12px;
  }

  .hero-video {
    object-position: center 44%;
  }
}

@media (max-width: 760px) {
  .hero {
    display: flex;
    align-items: stretch;
    min-height: calc(100svh - 112px);
  }

  .hero::before {
    background:
      linear-gradient(180deg, rgba(9, 9, 9, .16) 0%, rgba(9, 9, 9, .08) 34%, rgba(9, 9, 9, .66) 68%, #090909 100%),
      linear-gradient(90deg, rgba(9, 9, 9, .34), transparent 72%);
  }

  .hero-video-frame {
    position: absolute;
    inset: 0;
    height: 100%;
    transform: none !important;
  }

  .hero-video-frame::after {
    background: linear-gradient(0deg, #090909 0%, transparent 38%);
  }

  .hero-video {
    object-position: center center;
    filter: contrast(1.04) brightness(.82) saturate(1.05);
  }

  .hero-grid {
    display: flex;
    align-items: flex-end;
    min-height: calc(100svh - 112px);
    width: 100%;
  }

  .hero-copy {
    width: 100%;
    padding: clamp(170px, 34svh, 300px) 0 112px;
  }

  .hero h1 {
    font-size: clamp(58px, 19vw, 74px);
  }

  .hero-copy > p {
    color: #d2d2d5;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .72);
  }

  .hero-meta {
    background: rgba(9, 9, 9, .72);
  }
}

@media (max-width: 380px), (max-height: 720px) and (max-width: 760px) {
  .hero-copy {
    padding-top: 112px;
    padding-bottom: 104px;
  }

  .hero h1 {
    font-size: clamp(52px, 17vw, 64px);
  }

  .hero-copy > p {
    font-size: 14px;
    line-height: 1.5;
  }

  .actions {
    margin-top: 22px;
  }

  .actions .btn {
    min-height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-video {
    animation: none;
  }
}


/* Mobile navigation, resilient hero playback and final product covers */
.menu-toggle,.mobile-menu,.video-play-fallback{display:none}
.product-art.product-image{aspect-ratio:3/4;background:#090909;overflow:hidden;border-bottom:1px solid #29292d}
.product-art.product-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-video-frame{background:#090909 url('assets/photos/andres-tarima.png') center/cover no-repeat}
.video-play-fallback{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);align-items:center;justify-content:center;min-height:48px;padding:0 18px;border:1px solid #ffffff80;background:#090909d9;color:#fff;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(10px)}
.video-needs-play .video-play-fallback{display:inline-flex}

@media (max-width:1050px){
  .menu-toggle{display:grid;width:46px;height:46px;padding:11px;border:1px solid #3a3a3f;background:#111113;place-content:center;gap:5px;color:#fff}
  .menu-toggle span{display:block;width:22px;height:2px;background:currentColor;transition:transform .25s,opacity .2s}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mobile-menu{display:block;position:absolute;top:100%;left:0;right:0;max-height:0;overflow:hidden;visibility:hidden;background:#090909f7;border-bottom:1px solid #2c2c30;box-shadow:0 24px 55px #000a;transition:max-height .32s ease,visibility .32s;backdrop-filter:blur(18px)}
  .menu-open .mobile-menu{max-height:calc(100svh - 76px);visibility:visible;overflow-y:auto}
  .mobile-menu .wrap{display:grid;padding:12px 0 18px}
  .mobile-menu a{display:flex;align-items:center;justify-content:space-between;min-height:52px;border-bottom:1px solid #252529;font:800 14px var(--display);letter-spacing:.08em;text-transform:uppercase}
  .mobile-menu a:hover,.mobile-menu a:focus-visible{color:var(--red)}
  .mobile-menu .mobile-menu-cta{margin-top:12px;padding:0 16px;border:1px solid var(--red);background:var(--red);color:#fff}
}

@media (max-width:760px){
  .nav{gap:12px}
  .hero-video-frame{z-index:0;inset:0!important;height:100%!important;min-height:100%!important;background-position:center top}
  .hero-video{position:absolute;inset:0;width:100%;height:100%;display:block!important;visibility:visible!important;opacity:1!important;object-fit:cover;object-position:center top;filter:contrast(1.03) brightness(.94) saturate(1.05)}
  .hero::before{background:linear-gradient(180deg,rgba(9,9,9,.02) 0%,rgba(9,9,9,.03) 44%,rgba(9,9,9,.52) 72%,#090909 100%),linear-gradient(90deg,rgba(9,9,9,.18),transparent 70%)}
  .hero-video-frame::after{background:linear-gradient(0deg,#090909 0%,transparent 28%)}
  .hero-copy{padding-top:clamp(290px,54svh,520px)}
  .video-play-fallback{top:38%}
  .product-art.product-image{aspect-ratio:3/4}
  .product-art.product-image img{object-fit:cover}
}

@media (max-width:380px),(max-height:720px) and (max-width:760px){
  .hero-copy{padding-top:clamp(210px,43svh,330px)}
}