.wl-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  /* The reference is full-bleed: no inset around the 16:9 opening scene. */
  min-height: max(56.25vw, 100svh);
  padding-block: calc(var(--header-height) + var(--space-3xl)) var(--hero-bottom-space);
  color: var(--color-on-dark);
  background: var(--color-dark);
}

.wl-hero__media,
.wl-hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.wl-hero__media { display: block; }

.wl-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.wl-hero::after {
  content: '';
  background: linear-gradient(180deg, rgba(12, 15, 16, 0.3) 0%, rgba(12, 15, 16, 0.04) 32%, rgba(12, 15, 16, 0.15) 48%, rgba(12, 15, 16, 0.78) 100%);
}

.wl-hero__eyebrow {
  margin: 0 0 var(--hero-content-gap);
  font-size: var(--hero-description-size);
  letter-spacing: 0.1em;
}

.wl-hero__title {
  max-width: var(--hero-title-width);
  margin: 0;
  font-size: var(--hero-title-size);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: var(--hero-title-spacing);
  text-wrap: balance;
}

.wl-hero__description {
  max-width: var(--hero-description-width);
  margin-top: var(--hero-content-gap);
  font-size: var(--hero-description-size);
  line-height: 1.4;
  letter-spacing: 0.025em;
}

.wl-hero__description p { margin: 0; }

.wl-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--hero-content-gap);
}

.wl-hero .wl-btn {
  min-height: 44px;
  border-radius: var(--radius-pill);
  padding: var(--hero-button-py) var(--hero-button-px);
  font-size: var(--hero-button-font);
  line-height: 1.2;
  font-weight: 400;
  transition: background-color 160ms ease;
}

.wl-hero .wl-btn--primary {
  color: var(--color-dark);
  background: var(--color-on-dark);
  border-color: var(--color-on-dark);
}

.wl-hero .wl-btn--secondary {
  color: var(--color-on-dark);
  background: rgba(var(--color-on-dark-rgb), 0.12);
  border-color: rgba(var(--color-on-dark-rgb), 0.8);
}

.wl-hero .wl-btn:hover {
  transform: none;
  background: #ffffff;
  color: var(--color-dark);
}

@media (max-width: 767px) {
  :root { --space-page-fluid: clamp(24px, 6vw, 32px); }
  .wl-hero {
    min-height: 0;
    padding-top: max(300px, 42svh);
    padding-bottom: var(--space-2xl);
  }
  .wl-hero__title { font-size: var(--hero-title-size); }
  .wl-hero__actions { justify-content: flex-start; }
  .wl-hero__image { object-position: 50% center; }
}

@media (prefers-reduced-motion: reduce) {
  .wl-hero .wl-btn { transition: none; }
}