/* 01 · Hero */
.dn-hero {
  min-height: 900px;
  height: 900px;
  overflow: hidden;
  background: #1d1d1b;
}
.dn-hero__media,
.dn-hero__media picture,
.dn-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.dn-hero__media img { object-fit: cover; object-position: center; display: block; }
.dn-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.18) 44%, rgba(0,0,0,0) 70%);
}
.dn-hero__content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding: 64px 48px 48px;
  color: #fff;
}
.dn-hero__eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 20px;
  color: #fff;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.dn-hero__title {
  margin: 0 0 8px;
  color: #fff;
  font-size: 54px;
  line-height: 68px;
  font-weight: 900;
  letter-spacing: -.3px;
}
.dn-hero__text {
  margin: 0 0 24px;
  color: #fff;
  font-size: 32px;
  line-height: 40px;
  font-weight: 400;
}
.dn-hero .dn-btn { color: var(--dn-green); }

@media (max-width: 849px) {
  .dn-hero { height: 600px; min-height: 600px; }
  .dn-hero__content { padding: 28px 24px 24px; max-width: 100%; }
  .dn-hero__eyebrow { font-size: 11px; line-height: 16px; padding: 5px 10px; margin-bottom: 14px; letter-spacing: .8px; }
  .dn-hero__title { font-size: 40px; line-height: 48px; margin-bottom: 6px; }
  .dn-hero__text { font-size: 20px; line-height: 28px; margin-bottom: 20px; max-width: 340px; }
  .dn-hero .dn-btn { min-height: 44px; padding: 13px 24px; font-size: 13px; }
  .dn-hero__scrim { background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.10) 48%, rgba(0,0,0,0) 62%); }
}