/* Hero (Figma 1:771) */
#sec-hero {
  position: relative;
  z-index: 1;                      /* let the TV overflow paint on top of the bars above */
  width: 1728px;
  height: 733px;
  background: #e8ecd4;
  /* Allow the TV art to poke above the hero into the button-bar/nav area,
     while still clipping the left/right/bottom (decorations overflow there). */
  overflow: visible;
  clip-path: inset(-200px 0 0 0);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 200px;
  box-sizing: border-box;
}

#sec-hero .hero-l { position: absolute; }
#sec-hero .im { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Left column */
#sec-hero .hero-col {
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: clip;
}
#sec-hero .hero-stack {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  justify-content: center;
}

/* Headline frame 605x306 */
#sec-hero .hero-headline { position: relative; width: 605px; height: 306px; flex: none; }
#hero-underline { top: 83.53%; right: 9.65%; bottom: -0.45%; left: 6.95%; }
#hero-gerrit1 { top: 3.68%; right: 4.67%; bottom: 24.55%; left: 0.22%; }
#hero-gerrit1i { top: -0.61%; right: -0.23%; bottom: -0.91%; left: -0.23%; }
#hero-gerrit2 { top: 0.8%; right: 2.92%; bottom: 27.43%; left: 1.97%; }
#hero-gerrit2i { top: -0.61%; right: -0.23%; bottom: -0.91%; left: -0.23%; }
#hero-cursor { top: 95.75%; right: 5.74%; bottom: -21.87%; left: 86.61%; }
#sec-hero .hero-txt {
  position: absolute;
  top: 84.57%; right: 15.74%; bottom: 1.38%; left: 10.87%;
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 35.511px;
  line-height: normal;
  color: #fff;
  white-space: nowrap;
}

/* GREEN_BUTTON */
#sec-hero .hero-btn {
  /* an <a> anchoring down to the media player */
  text-decoration: none;
  cursor: pointer;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #56f77e;
  padding: 4px;
  border-radius: 6px;
  box-shadow: -3px 3px 0 0 #01353e;
  overflow: clip;
}
#sec-hero .hero-btn-edge { position: relative; height: 4px; width: 100%; flex: none; }
#sec-hero .hero-btn-edge--btm { display: flex; align-items: center; justify-content: center; mix-blend-mode: multiply; }
#sec-hero .hero-edge-rot { transform: rotate(180deg); width: 100%; }
#sec-hero .hero-edge-in { position: absolute; top: -25%; bottom: -25%; left: -0.43%; right: -0.43%; }
#sec-hero .hero-edge-rot .hero-edge-in { position: relative; top: 0; left: 0; right: 0; bottom: 0; height: 4px; }
/* edge image fills */
#sec-hero .hero-btn-edge .im,
#sec-hero .hero-edge-in .im { position: absolute; inset: 0; width: 100%; height: 100%; }
#sec-hero .hero-btn-label { display: flex; align-items: center; justify-content: center; padding: 2px 16px; flex: none; }
#sec-hero .hero-btn-label p {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  color: #01353e;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Right art block 736.173 x 807, bottom-aligned (overflows top, clipped) */
#sec-hero .hero-art { position: relative; width: 736.173px; height: 807px; flex: none; }
#hero-d1 { top: 51.4%; right: -0.31%; bottom: 26.72%; left: 61.76%; }
#hero-d2 { top: 81.65%; right: 65.41%; bottom: -3.53%; left: -3.97%; }
#hero-d3 { top: 22.98%; right: -9.97%; bottom: 53.56%; left: 70.03%; }
#hero-d4 { top: 79.9%; right: -10%; bottom: -3.43%; left: 72.68%; }
#hero-d5 { top: 45.29%; right: 57.16%; bottom: 31.17%; left: 5.52%; }
#hero-d6 { top: 22.43%; right: 59.93%; bottom: 58.4%; left: 1.3%; }

/* Gerrit-in-TV composite image */
#sec-hero .hero-tv {
  position: absolute;
  left: 8.99%;
  right: 3.12%;
  top: calc(50% - 9.5px);
  transform: translateY(-50%);
  aspect-ratio: 647 / 830;
}
#sec-hero .hero-tv-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#sec-hero .hero-tv-clip > img { position: absolute; top: 0; left: 0.05%; width: 100%; height: 102.45%; max-width: none; display: block; }

/* ---- Mobile (<=768px): stack headline over the TV art, scale both to width ---- */
@media (max-width: 768px) {
  #sec-hero {
    height: auto;
    overflow: visible;
    clip-path: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 40px 24px;
    gap: 32px;
  }
  #sec-hero .hero-col {
    flex: none;
    width: 100%;
    height: auto;
    overflow: visible;
  }
  #sec-hero .hero-stack { gap: 28px; width: 100%; }

  /* Headline: scale the fixed 605x306 box to the viewport. Its children use
     percentage insets, so they scale with the box; the one absolute text line
     uses container units so it scales too. */
  #sec-hero .hero-headline {
    width: min(605px, 86vw);
    height: auto;
    height: calc(min(605px, 86vw) * 0.50579);
    container-type: inline-size;
  }
  #sec-hero .hero-txt { font-size: 5.87cqw; }   /* 35.511 / 605 */

  /* Retro-TV art block below, scaled to the viewport (keeps aspect ratio) */
  #sec-hero .hero-art {
    width: min(736.173px, 86vw);
    height: auto;
    height: calc(min(736.173px, 86vw) * 1.09621);
  }
}