.dr-hero { position: relative; overflow: hidden; background: rgb(var(--color-background)); color: rgb(var(--color-text)); }
.dr-hero__media { aspect-ratio: 2 / 1; }
.dr-hero__media img, .dr-hero__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.dr-hero__link { position: absolute; inset: 0; z-index: 2; }

/* Logo badge: brand kit says the wordmark never sits directly on a busy image, so it gets an Oat plate */
.dr-hero__badge-wrap { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.dr-hero__badge {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 22px 40px 26px; border-radius: 8px;
  background: rgba(243, 238, 230, 0.94); box-shadow: 0 2px 18px rgba(43, 42, 42, 0.10);
  transform: translateY(6%);
}
.dr-hero__tagline { margin: 0; font: 700 14px/1 'Nunito Sans', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #2B2A2A; }
.dr-hero__logo { display: block; width: clamp(140px, 17vw, 260px); height: auto; }

.dr-hero__copy { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; pointer-events: none; }
.dr-hero__copy a { pointer-events: auto; }
.dr-hero__container { width: 100%; }
.dr-hero__inner { max-width: 520px; }
.dr-hero .dr-display { margin: 0 0 20px; }
.dr-hero__sub { font-size: 18px; line-height: 1.5; margin: 0 0 28px; max-width: 440px; }
.dr-hero__btn { display: inline-flex; }

@media (max-width: 959px) {
  .dr-hero__media { aspect-ratio: 16 / 11; }
  .dr-hero__badge { gap: 10px; padding: 16px 24px 18px; transform: none; }
  .dr-hero__tagline { font-size: 11px; letter-spacing: 0.12em; }
  .dr-hero__logo { width: 120px; }
  .dr-hero__copy { position: static; padding: 32px 0 24px; pointer-events: auto; }
  .dr-hero__sub { font-size: 16px; }
}