img {
  -webkit-user-drag: none;
  user-select: none;
}

.brand {
  position: relative;
  width: 178px;
  height: 70px;
  justify-content: center;
}

.brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.footer-brand .brand {
  width: 190px;
  height: 88px;
}

.site-header .brand {
  width: 132px;
  height: 52px;
}

@media (max-width: 991px) {
  .site-header .brand { width: 122px; height: 48px; }
}

@media (max-width: 430px) {
  .site-header .brand { width: 112px; height: 44px; }
}

.corporate-about-image {
  width: 100%;
  max-height: 470px;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover;
  object-position: center 58%;
}

.scroll-cue {
  border: 0;
  background: transparent;
  color: #fff;
  padding: 0;
  cursor: pointer;
}

.hero-slider,
.hero-slide {
  position: absolute;
  inset: 0;
}

.hero-slide {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.055);
  transition: opacity 1s ease, visibility 1s ease, transform 7s ease;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.hero-slide:nth-child(2) .hero-media { object-position: center 58%; }
.hero-slide:nth-child(3) .hero-media { object-position: center 50%; }
.hero-slide:nth-child(4) .hero-media { object-position: center 58%; }
.hero-title-primary { font-weight: 600 !important; }

.hero .hero-kicker,
.hero .hero-copy,
.hero [data-hero-title] {
  transition: opacity .35s ease, transform .45s var(--ease);
}

.hero.is-changing .hero-kicker,
.hero.is-changing .hero-copy,
.hero.is-changing [data-hero-title] {
  opacity: 0;
  transform: translateY(14px);
}

.hero-index button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(12, 29, 58, .2);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .25s, border-color .25s, transform .25s;
}

.hero-index button:hover { background: var(--green); border-color: var(--green); transform: translateY(-2px); }
.hero-progress { position: relative; overflow: hidden; }
.hero-progress i { position: absolute; inset: 0 auto 0 0; width: 0; background: #fff; animation: heroProgress 6s linear forwards; }

@keyframes heroProgress { to { width: 100%; } }

.home-page .hero-shade {
  background:
    linear-gradient(180deg, rgba(4, 14, 30, .76) 0%, rgba(6, 19, 38, .48) 14%, rgba(7, 22, 44, .14) 34%, transparent 50%),
    linear-gradient(90deg, rgba(5, 18, 35, .84) 0%, rgba(7, 22, 44, .46) 46%, rgba(7, 22, 44, .08) 82%),
    linear-gradient(0deg, rgba(5, 16, 33, .38), transparent 45%);
}

.project-detail-hero::after {
  background:
    linear-gradient(180deg, rgba(4, 14, 30, .8) 0%, rgba(6, 19, 38, .48) 16%, rgba(7, 22, 44, .12) 38%, transparent 52%),
    linear-gradient(0deg, rgba(5, 17, 35, .88) 0%, rgba(5, 17, 35, .38) 37%, transparent 72%);
}

.sustainability-goals {
  position: relative;
  min-height: 680px;
  background: var(--paper);
  color: var(--navy);
  border-bottom: 0;
  overflow: hidden;
}

.sustainability-goals .featured-image {
  position: relative;
  margin-bottom: -1px;
}

.sustainability-goals .featured-image img { height: calc(100% + 1px); }

.sustainability-goals .featured-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 70%, rgba(12, 29, 58, .12));
  pointer-events: none;
}

.sustainability-goals .featured-content {
  background: var(--paper);
  padding-top: 90px;
  padding-bottom: 110px;
}

.sustainability-goals .featured-content::after {
  width: 110px;
  height: 3px;
  right: auto;
  left: max(6vw, 70px);
  bottom: 74px;
  background: var(--green);
  clip-path: none;
  opacity: 1;
}

.sustainability-goals .eyebrow {
  color: var(--navy);
}

.sustainability-goals h2 {
  max-width: 600px;
  color: var(--navy);
  font-size: clamp(48px, 5.4vw, 84px);
  line-height: .98;
  margin-top: 30px;
}

.sustainability-goals p {
  max-width: 540px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
}

.sustainability-goals + .footer-cta {
  border-top: 4px solid var(--green);
}

@media (max-width: 991px) {
  .sustainability-goals { min-height: 0; }
  .sustainability-goals .featured-image { height: 520px; }
  .sustainability-goals .featured-content { padding: 80px 10vw 105px; }
  .sustainability-goals .featured-content::after { left: 10vw; bottom: 65px; }
}

@media (max-width: 767px) {
  .corporate-about-image { max-height: 330px; aspect-ratio: 1.35 / 1 !important; }
  .hero-index { right: 16px; gap: 7px; }
  .hero-index button { width: 32px; height: 32px; }
  .hero-index .hero-progress { width: 42px; }

  .home-page .hero-shade {
    background:
      linear-gradient(180deg, rgba(4, 14, 30, .82) 0%, rgba(6, 19, 38, .5) 18%, transparent 42%),
      linear-gradient(90deg, rgba(5, 18, 35, .82), rgba(7, 22, 44, .28)),
      linear-gradient(0deg, rgba(5, 16, 33, .52), transparent 55%);
  }

  .project-detail-hero::after {
    background:
      linear-gradient(180deg, rgba(4, 14, 30, .84) 0%, rgba(6, 19, 38, .52) 18%, transparent 44%),
      linear-gradient(0deg, rgba(5, 17, 35, .9) 0%, rgba(5, 17, 35, .42) 42%, transparent 76%);
  }

  .sustainability-goals .featured-image { height: 380px; }
  .sustainability-goals .featured-content { padding: 64px 20px 92px; }
  .sustainability-goals .featured-content::after { left: 20px; bottom: 54px; width: 80px; }
  .sustainability-goals h2 { font-size: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero .hero-kicker,
  .hero .hero-copy,
  .hero [data-hero-title] { transition: none; }
  .hero-progress i { animation: none; width: 100%; }
}