/* A white editorial foreground blending into the aquarium on the right. */
.hero-split {
  --header-height: 102px;
  height: calc(100svh - var(--header-height));
  min-height: 0;
  max-height: none;
  background: #fff;
  color: #1d1d1f;
  isolation: isolate;
}
.hero-split .hero-visual {
  inset: 0 0 0 auto;
  width: 65%;
  height: 100%;
  overflow: hidden;
  background: #fff;
}
.hero-split .hero-image {
  object-position: 70% center;
  animation: none;
  transform: none;
  filter: brightness(1.1);
  will-change: auto;
}
.hero-split .hero-visual::after {
  background: linear-gradient(90deg, #fff 0%, #fffffff5 9%, #ffffffc2 23%, #ffffff38 42%, transparent 62%);
  pointer-events: none;
}
.hero-split .hero-content {
  width: min(1320px, calc(100% - 112px));
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 0 65px;
  text-align: left;
  pointer-events: none;
}
.hero-split .hero-content a { pointer-events: auto; }
.hero-split .eyebrow {
  color: #007f75;
  font-size: 10px;
  letter-spacing: .14em;
  margin-bottom: 23px;
}
.hero-split .live-dot { background: #16988a; box-shadow: 0 0 0 4px #1598880c; }
.hero-split h1 {
  max-width: 58%;
  font-size: min(5.1vw, 9.5cqh, 76px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.055em;
  margin: 0 0 26px;
  animation: none;
}
.hero-split h1 em { color: #008b82; }
.hero-split .hero-description {
  width: 46%;
  max-width: 530px;
  margin: 0;
  padding: 0;
  color: #697378;
  font-size: 17px;
  line-height: 1.75;
  animation: none;
}
.hero-split .hero-buttons {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
  margin-top: 30px;
}
.hero-split .hero-buttons .button { font-size: 13px; padding: 15px 23px; gap: 15px; }
.hero-split .hero-secondary { color: #007f75; font-size: 13px; gap: 9px; }
.hero-split .hero-secondary svg { width: 15px; }
.hero-split .hero-local {
  display: flex;
  color: #7b8785;
  font-size: 11px;
  max-width: 48%;
  margin: 26px 0 0;
}
.hero-split .hero-bottom {
  width: min(1320px, calc(100% - 112px));
  left: 50%;
  right: auto;
  translate: -50% 0;
  bottom: 32px;
  display: flex;
  align-items: center;
}
.hero-split .scroll-cue { color: #647b73; font-size: 8px; letter-spacing: .12em; }
.hero-split .scroll-circle { border-color: #90b4a65c; width: 32px; height: 42px; }
.hero-split .scroll-circle svg { animation: none; }
.hero-split .video-teaser {
  color: #fff;
  background: #16392d75;
  border: 1px solid #ffffff5e;
  border-radius: 999px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 9px 17px 9px 9px;
  font-size: 11px;
  gap: 11px;
}
.hero-split .video-teaser small { display: none; }
.hero-split .video-teaser > svg { width: 14px; margin-left: 7px; }
.hero-split .play-circle { width: 30px; height: 30px; background: #fff; color: #23644e; border: 0; }
.hero-split .play-circle svg { width: 12px; fill: #23644e; }
.hero-split .hero-caption { display: none; }
@media (max-width: 1100px) {
  .hero-split .hero-content, .hero-split .hero-bottom { width: calc(100% - 64px); }
  .hero-split h1 { font-size: min(5.4vw, 9cqh); max-width: 62%; }
  .hero-split .hero-description { font-size: 15px; width: 47%; }
  .hero-split .hero-buttons { gap: 17px; }
  .hero-split .hero-buttons .button { padding: 13px 18px; font-size: 12px; }
  .hero-split .hero-secondary { font-size: 12px; }
  .hero-split .hero-local { font-size: 10px; }
}
/* On a narrow portrait screen the same white fade runs down into the image. */
@media (max-width: 700px) and (min-height: 461px) {
  .hero-split { --header-height: 90px; }
  .hero-split .hero-content {
    width: calc(100% - 44px);
    height: auto;
    padding: 5cqh 0 0;
    justify-content: flex-start;
  }
  .hero-split .eyebrow { font-size: 8px; margin-bottom: 2.5cqh; letter-spacing: .09em; }
  .hero-split h1 { max-width: 100%; font-size: min(10.1vw, 8.5cqh); margin-bottom: 2.4cqh; }
  .hero-split .hero-description { width: 100%; max-width: 360px; font-size: min(14px, 2.3cqh); line-height: 1.65; }
  .hero-split .hero-buttons { gap: 14px; margin-top: 2.8cqh; }
  .hero-split .hero-buttons .button { font-size: 11px; padding: 12px 16px; gap: 9px; }
  .hero-split .hero-secondary { font-size: 11px; gap: 5px; }
  .hero-split .hero-secondary svg { width: 12px; }
  .hero-split .hero-local { display: none; }
  .hero-split .hero-visual { inset: auto 0 0; width: 100%; height: 55%; }
  .hero-split .hero-image { object-position: 72% 40%; }
  .hero-split .hero-visual::after {
    background: linear-gradient(180deg, #fff 0%, #ffffffdb 9%, #ffffff61 20%, transparent 37%);
  }
  .hero-split .hero-bottom { width: calc(100% - 44px); bottom: 22px; }
  .hero-split .scroll-cue { color: #fff; }
  .hero-split .scroll-circle { border-color: #ffffff70; width: 28px; height: 36px; background: #173c3030; }
  .hero-split .video-teaser { font-size: 9px; padding: 7px 12px 7px 7px; gap: 8px; }
  .hero-split .video-teaser > svg { width: 12px; margin-left: 2px; }
  .hero-split .play-circle { width: 27px; height: 27px; }
}
@media (max-width: 360px) {
  .hero-split .hero-content, .hero-split .hero-bottom { width: calc(100% - 36px); }
  .hero-split .hero-buttons { gap: 12px; }
  .hero-split .hero-buttons .button { font-size: 10px; padding: 11px 13px; }
  .hero-split .hero-secondary { font-size: 10px; }
}
@media (max-height: 680px) {
  .hero-split .hero-content { padding-bottom: 45px; }
  .hero-split .eyebrow { margin-bottom: 2.5cqh; }
  .hero-split h1 { margin-bottom: 3cqh; }
  .hero-split .hero-description { font-size: 14px; line-height: 1.6; }
  .hero-split .hero-buttons { margin-top: 3.5cqh; }
  .hero-split .hero-local { display: none; }
}
@media (max-width: 700px) and (max-height: 680px) and (min-height: 461px) {
  .hero-split .hero-content { padding-top: 4cqh; padding-bottom: 0; }
  .hero-split .hero-description { display: block; font-size: 12px; line-height: 1.5; }
  .hero-split .hero-buttons { margin-top: 3cqh; }
  .hero-split .hero-visual { height: 48%; }
}
@media (max-height: 460px) {
  .hero-split .hero-content { width: calc(100% - 56px); padding: 0 0 10px; }
  .hero-split h1 { font-size: min(5vw, 13cqh); }
  .hero-split .eyebrow { font-size: 7px; }
  .hero-split .hero-description, .hero-split .hero-local, .hero-split .hero-bottom { display: none; }
  .hero-split .hero-buttons { gap: 13px; }
  .hero-split .hero-buttons .button { font-size: 10px; padding: 11px 14px; }
  .hero-split .hero-secondary { font-size: 10px; }
}