.cookie-actions button:first-child {
  background: #103c3e;
  border-color: #103c3e;
  color: #fff;
}

.cookie-actions button:first-child:hover,
.cookie-actions button:first-child:focus-visible {
  background: #1b5558;
  border-color: #1b5558;
  color: #fff;
}

.cookie-actions button:last-child {
  background: #f2f5f4;
  border-color: #d6e0dc;
  color: #526968;
  font-weight: 600;
}

.cookie-actions button:last-child:hover,
.cookie-actions button:last-child:focus-visible {
  background: #e7eeeb;
  border-color: #aebfba;
  color: #294b4a;
}

.hero.hero-fullscreen {
  position: relative;
  left: 50%;
  width: 100vw;
  min-height: calc(100svh - 112px);
  margin-left: -50vw;
  padding: clamp(32px, 7vw, 112px) max(6vw, calc((100vw - 1260px) / 2));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #142e32;
  color: #fff;
}

.hero.hero-fullscreen .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 0;
  background: #142e32 url('/images/system-installation-poster.jpg') center / cover no-repeat;
}

.hero.hero-fullscreen > .hero-video:first-child { max-width: none; }

.hero.hero-fullscreen .hero-video video,
.hero.hero-fullscreen .hero-video video[hidden] {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.hero.hero-fullscreen .hero-video video[hidden] { display: none; }

.hero.hero-fullscreen .hero-video::after {
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 24, 27, .82) 0%, rgba(3, 24, 27, .38) 65%, rgba(3, 24, 27, .15) 100%),
              linear-gradient(0deg, rgba(3, 24, 27, .65), transparent 55%);
}

.hero.hero-fullscreen .hero-copy {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.hero.hero-fullscreen .hero-copy p,
.hero.hero-fullscreen .hero-copy p.small,
.hero.hero-fullscreen .hero-copy em { color: #f3fbf7; }

.hero.hero-fullscreen .hero-copy a:not(.button) {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.hero.hero-fullscreen .hero-copy .button {
  background: #dff581;
  border-color: #dff581;
  color: #103c3e;
}

.hero.hero-fullscreen .hero-video-consent {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 14px;
  width: 240px;
  padding: 12px;
  border: 0;
  background: transparent;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  text-shadow: 0 2px 12px #102a2f;
}

.hero.hero-fullscreen .hero-play-icon {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  padding: 0;
  margin: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: rgba(11, 57, 61, .8);
  box-shadow: 0 12px 40px #0b252c80;
  transition: transform .2s ease, background .2s ease;
}

.hero.hero-fullscreen .hero-play-icon::before {
  content: '';
  display: block;
  width: 38px;
  height: 42px;
  background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translateX(6px);
}

.hero.hero-fullscreen .hero-video-consent:hover .hero-play-icon,
.hero.hero-fullscreen .hero-video-consent:focus-visible .hero-play-icon {
  transform: scale(1.08);
  background: #0b393d;
}

.hero.hero-fullscreen .hero-play-text { font-size: 1rem; line-height: 1.35; letter-spacing: normal; }
.hero.hero-fullscreen .hero-play-text small { display: block; margin-top: 3px; font-size: .8rem; font-weight: 500; letter-spacing: normal; }

.hero.hero-fullscreen .hero-video-consent[hidden] { display: none; }

/* One accent for customer-facing calls to action; keep Back, navigation,
   carousel controls and the necessary-only cookie choice secondary. */
.button:not(.secondary),
button.primary,
.payment-provider-actions .button.secondary,
.cookie-actions button:first-child {
  background: var(--green);
  border-color: var(--green);
  color: var(--dark);
}

.button:not(.secondary):hover,
button.primary:hover,
.payment-provider-actions .button.secondary:hover,
.cookie-actions button:first-child:hover {
  background: #ecf9ab;
  border-color: #ecf9ab;
  color: var(--dark);
}

.payment-provider-actions .payment-marks img {
  filter: brightness(0) saturate(100%);
}

@media (max-width: 780px) {
  .hero.hero-fullscreen {
    display: block;
    min-height: max(calc(100svh - 150px), 700px);
    padding: calc(100vw * 9 / 16 + 52px) 5% 48px;
  }
  .hero.hero-fullscreen .hero-video {
    inset: 0 0 auto;
    height: calc(100vw * 9 / 16);
    background-position: center;
    background-size: contain;
  }
  .hero.hero-fullscreen .hero-video video {
    object-fit: contain;
    object-position: center;
  }
  .hero.hero-fullscreen .hero-video::after {
    background: linear-gradient(0deg, rgba(3, 24, 27, .55), transparent 65%);
  }
  .hero.hero-fullscreen .hero-video-consent {
    left: 50%;
    top: calc(100vw * 9 / 32);
    width: 240px;
  }
}
