/* A wider campaign lockup balances the product photograph on large displays. */
.hero-motion-background {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  opacity:.72;
}
.hero-motion-background video {
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 900ms ease;
}
.hero-motion-background video.is-playing { opacity:1; }

@media (min-width:701px) {
  .hero-copy {
    width:calc(100% - 40px);
    max-width:min(610px,calc(var(--hero-height) * .8));
  }
  .hero-brands {
    flex-direction:row;
    justify-content:center;
    align-items:center;
    gap:clamp(16px,calc(var(--hero-height) * .035),27px);
    margin-bottom:clamp(18px,calc(var(--hero-height) * .034),26px);
  }
  .hero-brands .brand-kobber-image {
    width:min(160px,calc(var(--hero-height) * .23),38%);
    flex-shrink:0;
  }
  .hero-brands img { width:min(215px,calc(var(--hero-height) * .30),49%); }
  .hero-copy h1 { width:100%; }
  .hero h1 .hero-kicker {
    font-size:clamp(18px,calc(var(--hero-height) * .055),42px);
    line-height:1.1;
    white-space:nowrap;
  }
  .hero h1 .hero-lettering-frame { margin-top:5px; }
  .hero-description {
    font-size:clamp(18px,calc(var(--hero-height) * .045),34px);
    margin-top:8px;
    line-height:1.16;
  }
  .hero-motion-background {
    right:calc(var(--hero-height) * 1.12962963 - 40px);
    mask-image:linear-gradient(to right,#000 55%,transparent 100%);
    -webkit-mask-image:linear-gradient(to right,#000 55%,transparent 100%);
  }
}
@media (min-width:701px) and (max-width:900px) {
  .hero-copy { width:calc(100% - 28px); }
  .hero h1 .hero-kicker { font-size:clamp(15px,2.4vw,22px); }
  .hero-description { font-size:clamp(16px,2.35vw,21px); }
}
@media (max-width:700px) {
  .hero-motion-background {
    opacity:.48;
    mask-image:linear-gradient(#000 50%,transparent 100%);
    -webkit-mask-image:linear-gradient(#000 50%,transparent 100%);
  }
}
@media (prefers-reduced-motion:reduce) {
  .hero-motion-background { display:none; }
  .hero-motion-background video { transition:none; }
}

/* Blend into the exact cream of the next section, with no narrow pale seam.
   Copy and controls remain above the blend; only the scene fades at its base. */
.hero::after { content:none; }
.hero-grid::after {
  content:'';
  position:absolute;
  inset:auto 0 -1px;
  height:clamp(48px,calc(var(--hero-height,500px) * .135),104px);
  z-index:2;
  pointer-events:none;
  background:linear-gradient(to bottom,
    #fbf2e500 0%,
    #fbf2e503 15%,
    #fbf2e512 30%,
    #fbf2e52e 45%,
    #fbf2e566 60%,
    #fbf2e5a6 75%,
    #fbf2e5de 89%,
    var(--cream) 100%);
}
.product-coco {
  background:
    linear-gradient(to bottom,var(--cream),#fbf2e500 120px),
    radial-gradient(ellipse at 35% 20%,#fffaf1,var(--cream));
}
@media (max-width:700px) {
  .hero-grid::after { height:48px; }
}