.hd-eco {
  --eco-line: rgba(255, 255, 255, .22);
  --eco-gold: #c5a46d;
  --eco-ease: cubic-bezier(.22, .72, .22, 1);
  --eco-scene-mix: 0;
  --eco-scene-a-opacity: 1;
  --eco-scene-a-y: 0px;
  --eco-scene-b-y: 22px;
  position: relative;
  height: 200svh;
  min-height: 1320px;
  scroll-margin-top: var(--mh-header-height, 103px);
  background: #0b1f2f;
}

.hd-eco__stage {
  position: relative;
  top: 0;
  height: calc(100svh - var(--mh-header-height, 103px));
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: #0b1f2f;
}

.hd-eco.is-pinned .hd-eco__stage {
  position: fixed;
  z-index: 30;
  top: var(--mh-header-height, 103px);
  right: 0;
  left: 0;
}

.hd-eco.is-ended .hd-eco__stage {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
}

.hd-eco__media,
.hd-eco__still,
.hd-eco__video,
.hd-eco__overlay,
.hd-eco__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hd-eco__still,
.hd-eco__video {
  object-fit: cover;
  transform: scale(1.012);
  transition: opacity 620ms var(--eco-ease), transform 920ms var(--eco-ease);
}

.hd-eco__still { object-position: center 47%; opacity: 1; }
.hd-eco__video { object-position: center; opacity: 0; }
.hd-eco__video[data-eco-video="environment"] { object-position: center 48%; }
.hd-eco__video[data-eco-video="community"] { object-position: center 52%; }
.hd-eco__video[data-eco-video="ownership"] { object-position: center 48%; }
.hd-eco[data-active] .hd-eco__still { opacity: 0; transform: scale(1); }
.hd-eco__video.is-active { opacity: 1; transform: scale(1); }

.hd-eco__overlay {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 22, 35, .26) 0%, rgba(5, 22, 35, .08) 42%, rgba(5, 22, 35, .46) 100%),
    linear-gradient(90deg, rgba(6, 27, 42, .18), rgba(6, 27, 42, .04) 50%, rgba(6, 27, 42, .18));
  transition: background 560ms var(--eco-ease);
}

.hd-eco[data-active] .hd-eco__overlay {
  background:
    linear-gradient(180deg, rgba(5, 22, 35, .34) 0%, rgba(5, 22, 35, .12) 42%, rgba(5, 22, 35, .6) 100%),
    linear-gradient(90deg, rgba(6, 27, 42, .26), rgba(6, 27, 42, .03) 50%, rgba(6, 27, 42, .26));
}

.hd-eco__scene { z-index: 2; }

.hd-eco__scene--declaration {
  display: grid;
  place-items: center;
  opacity: var(--eco-scene-a-opacity);
  visibility: visible;
  transform: translateY(var(--eco-scene-a-y));
  pointer-events: none;
}

.hd-eco.is-scene-b .hd-eco__scene--declaration {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hd-eco__declaration {
  width: min(980px, calc(100% - 48px));
  text-align: center;
}
.hd-eco__eyebrow {
  margin: 0 0 24px;
  color: var(--eco-gold);
  font-size: clamp(18px, 1.25vw, 22px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .16em;
  text-shadow: 0 2px 18px rgba(4, 18, 29, .18);
}

.hd-eco__headline,
.hd-eco__support { margin: 0; }

.hd-eco__headline {
  color: #fff;
  font-size: clamp(42px, 3vw, 56px);
  font-weight: 660;
  line-height: 1.2;
  letter-spacing: -.045em;
  text-shadow: 0 4px 28px rgba(4, 18, 29, .2);
}

.hd-eco__headline span,
.hd-eco__support span { display: block; }

.hd-eco__headline span:last-child {
  font-size: 1em;
  letter-spacing: -.05em;
}

.hd-eco__support {
  width: min(560px, 100%);
  margin: 30px auto 0;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(15px, .96vw, 18px);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: -.018em;
}

.hd-eco__scene--values {
  opacity: var(--eco-scene-mix);
  transform: translateY(var(--eco-scene-b-y));
  visibility: hidden;
  pointer-events: none;
}

.hd-eco.is-scene-b .hd-eco__scene--values {
  visibility: visible;
  pointer-events: auto;
}

.hd-eco__grid-lines { position: absolute; inset: 0; pointer-events: none; }
.hd-eco__grid-lines i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--eco-line); }
.hd-eco__grid-lines i:nth-child(1) { left: 9.5%; }
.hd-eco__grid-lines i:nth-child(2) { left: 36.2%; }
.hd-eco__grid-lines i:nth-child(3) { left: 62.9%; }
.hd-eco__grid-lines i:nth-child(4) { left: 89.6%; }

.hd-eco__choices {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 9.5% 26.7% 26.7% 26.7% 10.4%;
}

.hd-eco__choice {
  position: relative;
  min-width: 0;
  padding: 0 clamp(24px, 2.5vw, 48px);
  color: rgba(255, 255, 255, .86);
  background: transparent;
  border: 0;
  display: grid;
  place-items: center;
  text-align: center;
  cursor: pointer;
  transition: color 520ms var(--eco-ease), opacity 520ms var(--eco-ease), background-color 520ms var(--eco-ease);
}

.hd-eco__choice:nth-child(1) { grid-column: 2; }
.hd-eco__choice:nth-child(2) { grid-column: 3; }
.hd-eco__choice:nth-child(3) { grid-column: 4; }
.hd-eco__choice::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 25, 39, .13), rgba(5, 25, 39, .02) 52%, rgba(5, 25, 39, .19));
  opacity: 0;
  transition: opacity 520ms var(--eco-ease);
}

.hd-eco__name,
.hd-eco__description { position: absolute; z-index: 1; left: 50%; transform: translateX(-50%); }
.hd-eco__name {
  top: 50%;
  width: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  transform: translate(-50%, -50%);
  transition: top 620ms var(--eco-ease), transform 620ms var(--eco-ease), opacity 520ms var(--eco-ease);
}
.hd-eco__name strong { color: #fff; font-size: clamp(34px, 2.1vw, 42px); font-weight: 650; line-height: 1.12; letter-spacing: -.045em; }
.hd-eco__name small { color: rgba(255, 255, 255, .78); font-size: clamp(15px, 1vw, 18px); font-weight: 400; line-height: 1; letter-spacing: .005em; }

.hd-eco__description {
  top: 47%;
  width: min(360px, calc(100% - 48px));
  color: rgba(255, 255, 255, .88);
  font-size: clamp(13px, .86vw, 16px);
  font-weight: 400;
  line-height: 1.8;
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 440ms var(--eco-ease) 70ms, transform 520ms var(--eco-ease) 70ms;
}
.hd-eco__description span { display: block; white-space: nowrap; }

.hd-eco__choices:has(.hd-eco__choice.is-active) .hd-eco__choice:not(.is-active) { opacity: .46; }
.hd-eco__choice:is(:hover, :focus-visible, .is-active) { color: #fff; outline: none; }
.hd-eco__choice:is(:hover, :focus-visible, .is-active)::before { opacity: 1; }
.hd-eco__choice:is(:hover, :focus-visible, .is-active) .hd-eco__name { top: 32%; transform: translate(-50%, -50%); }
.hd-eco__choice:is(:hover, :focus-visible, .is-active) .hd-eco__description { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1100px) and (min-width: 801px) {
  .hd-eco { min-height: 1240px; }
  .hd-eco__stage { min-height: 590px; }
  .hd-eco__choices { grid-template-columns: 6% 29.33% 29.34% 29.33% 6%; }
  .hd-eco__grid-lines i:nth-child(1) { left: 6%; }
  .hd-eco__grid-lines i:nth-child(2) { left: 35.33%; }
  .hd-eco__grid-lines i:nth-child(3) { left: 64.67%; }
  .hd-eco__grid-lines i:nth-child(4) { left: 94%; }
  .hd-eco__choice { padding-inline: 18px; }
  .hd-eco__description { width: calc(100% - 28px); font-size: 12px; }
}

@media (max-width: 800px) {
  .hd-eco {
    height: 185svh;
    min-height: 1160px;
    scroll-margin-top: 72px;
  }
  .hd-eco__stage {
    height: calc(100svh - var(--mh-header-height, 72px));
    min-height: 620px;
  }
  .hd-eco.is-pinned .hd-eco__stage { top: var(--mh-header-height, 72px); }
  .hd-eco__still,
  .hd-eco__video { object-position: center 45%; }
  .hd-eco__declaration { width: min(100% - 36px, 680px); }
  .hd-eco__eyebrow { margin-bottom: 22px; font-size: 12px; }
  .hd-eco__headline { font-size: clamp(34px, 8.6vw, 54px); line-height: 1.22; }
  .hd-eco__headline span:last-child { font-size: .84em; }
  .hd-eco__support { margin-top: 26px; font-size: 13px; line-height: 1.7; }
  .hd-eco__grid-lines { display: none; }
  .hd-eco__choices {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
  }
  .hd-eco__choice,
  .hd-eco__choice:nth-child(1),
  .hd-eco__choice:nth-child(2),
  .hd-eco__choice:nth-child(3) { grid-column: 1; }
  .hd-eco__choice { padding: 0 20px; border-bottom: 1px solid var(--eco-line); }
  .hd-eco__choice:last-child { border-bottom: 0; }
  .hd-eco__name { top: 50%; width: calc(100% - 40px); gap: 6px; }
  .hd-eco__name strong { font-size: 27px; }
  .hd-eco__name small { font-size: 12px; }
  .hd-eco__description { top: 46%; width: calc(100% - 44px); font-size: 12px; line-height: 1.6; }
  .hd-eco__description span { white-space: normal; }
  .hd-eco__choice:is(:hover, :focus-visible, .is-active) .hd-eco__name { top: 25%; }
}

@media (prefers-reduced-motion: reduce) {
  .hd-eco__still,
  .hd-eco__video,
  .hd-eco__overlay,
  .hd-eco__choice,
  .hd-eco__choice::before,
  .hd-eco__name,
  .hd-eco__description { transition: none; }
}