/* Two approved homepage illustrations alternate on each homepage visit. */
main > .home-hero {
  padding: 24px 0 36px;
  background: #f7fbfd;
}
.home-hero-banner {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  display: grid;
  width: min(1048px, calc(94% - 28px));
  margin-inline: auto;
  overflow: hidden;
  border-radius: 26px;
  background: #dbeaf3;
}
.home-hero-art,
.home-hero-copy { grid-area: 1 / 1; }
.home-hero-art {
  display: block;
  align-self: center;
  justify-self: end;
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: contain;
  border: 0;
  border-radius: 26px;
  box-shadow: none;
  pointer-events: none;
}
.home-hero-copy {
  position: absolute;
  z-index: 2;
  width: 48%;
  max-width: 620px;
  margin: 0;
  padding: 0;
}
.home-hero h1 {
  margin: 0;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 4.39453125cqw, 2.878rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: 0;
  text-shadow: 0 2px 12px rgba(2, 18, 30, .28);
}
.home-hero h1 span { white-space: nowrap; }
.home-hero-banner[data-hero-variant="licht"] .home-hero-copy {
  left: 6.9%;
  top: 7.25%;
}
.home-hero-banner[data-hero-variant="licht"] h1 {
  font-size: clamp(1rem, 4.39453125cqw, 2.878rem);
  text-shadow:
    0 2px 5px rgba(7, 37, 58, .82),
    0 7px 22px rgba(7, 37, 58, .42);
}
.home-hero-banner[data-hero-variant="donker"] .home-hero-copy {
  left: 6.9%;
  top: 7.25%;
}
.home-hero-banner[data-hero-variant="donker"] h1 {
  position: relative;
  isolation: isolate;
  display: inline-block;
  font-size: clamp(1rem, 4.39453125cqw, 2.878rem);
  text-shadow:
    0 2px 5px rgba(3, 19, 34, .62),
    0 6px 18px rgba(3, 19, 34, .3);
}
.home-hero-banner[data-hero-variant="donker"] h1::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20% -16%;
  pointer-events: none;
  background: radial-gradient(ellipse at 40% 50%, rgba(104, 200, 230, .22), rgba(20, 83, 121, .2) 52%, rgba(3, 27, 48, 0) 78%);
  filter: blur(10px);
}
.home-hero-intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 46px;
  margin-top: 28px;
  color: #334f60;
  font-size: 1rem;
  line-height: 1.7;
}
.home-hero-intro p { margin: 0; }
@media (max-width: 760px) {
  main > .home-hero { padding: 16px 0 28px; }
  .home-hero-banner { width: calc(94% - 20px); border-radius: 20px; }
  .home-hero-copy { width: 48%; max-width: 520px; }
  .home-hero-intro { grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
  .home-hero-art { border-radius: 20px; }
}
@media print {
  main > .home-hero { padding: 0; background: none; }
  .home-hero-banner { display: block; width: 100%; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .home-hero-art { display: none; }
  .home-hero-copy { position: static; width: 100%; max-width: none; margin: 0; padding: 0; }
  .home-hero h1 { color: #17324d; text-shadow: none; }
  .home-hero-intro { grid-template-columns: 1fr; }
}