.hero {
  display: grid;
  align-content: center;
  position: relative;
  overflow: hidden;
  min-block-size: 100svh;
  padding-block: calc(var(--header-height) + clamp(16px, 2.5vh, 36px))
    clamp(16px, 2.5vh, 36px);
  background-color: var(--navy);
  background-image: url("../brand/bg-navy-800.webp");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

.panel,
.is-inverse {
  --fg: var(--cream);
  --focus: var(--cream);
  --fg-muted: var(--muted-inv);
  --muted: var(--muted-inv);
  --rule: var(--rule-inv);
  --chip-bg: rgba(246, 247, 237, 0.08);
  --mark: var(--ember);
  --focus: var(--cream);
  color: var(--fg);
}

.panel--light,
.is-inverse .panel--light {
  --fg: var(--navy);
  --fg-muted: var(--muted-on-light);
  --muted: var(--muted-on-light);
  --rule: rgba(0, 31, 63, 0.14);
  --chip-bg: transparent;
  --mark: var(--ember-on-light);
  --focus: var(--ember);
  color: var(--fg);
}

.section--sage,
.cta-band {
  --mark: var(--navy);
}

.cta-band {
  --focus: var(--navy);
}

.hero > .container {
  width: 100%;
}

.hero .rule {
  background-color: var(--rule-hero);
}

.hero__lead {
  color: var(--muted-inv);
}

.hero__grid {
  display: block;
}

.hero__content {
  position: relative;
  z-index: 1;
  padding: clamp(26px, 2.8vw, 48px);
}

.hero__title {
  max-width: 24ch;
  font-size: clamp(36px, min(5.2vw, 9vh), 92px);
  font-weight: var(--w-black);
  line-height: 1.14;
}

.hero__divider {
  margin-block-start: clamp(14px, 2.2vh, 24px);
}

.hero__lead {
  max-width: 54ch;
  margin-block: clamp(18px, 2.6vh, 30px);
  color: var(--muted);
  font-size: clamp(16px, min(1.35vw, 2.5vh), 21px);
  font-weight: var(--w-regular);
  line-height: 1.75;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-block-start: clamp(20px, 2.8vh, 32px);
}

@media (max-width: 37.5rem) {
  .hero__actions {
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
  }
}

.page-header__figure {
  display: none;
}

.page-header__mark {
  width: auto;
  max-width: none;
  height: 120px;
}

.page-header {
  padding-block: var(--space-block);
  border-block-end: var(--hairline) solid var(--rule);
}

.page-header--mark {
  position: relative;
  overflow: hidden;
}

.page-header__title {
  max-width: 26ch;
  font-size: var(--fs-h1);
  font-weight: var(--w-black);
  line-height: var(--lh-display);
}

.split__aside {
  grid-column: span 12;
}

.split__main {
  grid-column: span 12;
}

.method {
  display: block;
}

.method__head {
  margin-block-end: clamp(32px, 4vh, 56px);
}

.method__list {
  width: 100%;
}

.cta-band {
  position: relative;
  overflow: hidden;
  background-color: var(--orange);
  color: var(--navy);
  padding-block: var(--space-section);
}

.cta-band__figure {
  display: none;
}

.cta-band__mark {
  width: auto;
  height: 140px;
  max-width: none;
  transform: scaleY(-1);
}

.cta-band__inner {
  position: relative;
  z-index: 1;
}

.cta-band__title {
  max-width: 20ch;
  font-size: var(--fs-h2);
  font-weight: var(--w-bold);
}

.cta-band__lead {
  margin-block-start: 24px;
  max-width: var(--measure);
  color: var(--navy);
  font-size: var(--fs-lead);
  line-height: 32px;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 40px;
}

.profile-banner {
  padding-block: var(--space-block);
  border-block-start: var(--hairline) solid var(--rule);
}

.profile-banner__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-block: 32px;
  border-block: var(--hairline) solid var(--rule);
}

.profile-banner__title {
  font-size: var(--fs-h3);
  font-weight: var(--w-bold);
}

.coming-soon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-block: var(--space-section);
}

.coming-soon__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 24px;
  font-size: var(--fs-h1);
  font-weight: var(--w-black);
  line-height: var(--lh-display);
}

.contact-grid__details {
  grid-column: span 12;
}

.contact-grid__form {
  grid-column: span 12;
}

.form {
  display: grid;
  gap: 32px;
}

.form__row {
  display: grid;
  gap: 32px;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.hero__actions {
  margin-block-start: 32px;
}

@media (prefers-reduced-motion: no-preference) {
}

@keyframes draw-rule {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.section--image,
.page-header--image {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  min-block-size: 100svh;
  padding-block: calc(var(--header-height) + clamp(16px, 2.5vh, 36px))
    clamp(16px, 2.5vh, 36px);
  background-color: var(--navy);
}

.page-header--image {
  background-color: var(--pewter);
}

.section__bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.section__bg {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 0% 50%;
}

.page-header--image .section__bg {
  scale: -1 1;
}

.section--image > .container,
.page-header--image > .container {
  position: relative;
  z-index: 1;
}

.page-header--image .panel {
  padding: clamp(26px, 2.8vw, 48px);
}

.page-header--image .page-header__title {
  font-size: clamp(36px, min(5.2vw, 9vh), 92px);
  line-height: 1.14;
}

.page-header--image .rule {
  background-color: var(--rule-hero);
}

.page-header__divider {
  margin-block-start: clamp(14px, 2.2vh, 24px);
}

.page-header--image .page-header__body {
  max-width: 54ch;
  margin-block-start: clamp(18px, 2.6vh, 30px);
  color: var(--muted);
  font-size: clamp(16px, min(1.35vw, 2.5vh), 21px);
  line-height: 1.75;
}

.mission {
  padding-block: clamp(32px, 4vw, 56px);
  border-block: var(--hairline-strong) solid var(--ember);
}

.mission__text {
  max-width: 46ch;
  color: var(--cream);
  font-size: clamp(20px, 1.9vw, 28px);
  font-weight: var(--w-regular);
  line-height: 1.7;
}

.panel {
  padding: clamp(32px, 4vw, 56px);
  border-block: var(--hairline-strong) solid var(--ember);
  background-color: var(--panel-dark);
  color: var(--cream);
}

.panel--light {
  background-color: var(--panel-light);
  color: var(--navy);
}

.panel .rows,
.panel--light .rows {
  border-block-start: 0;
}

.section--image.is-inverse {
  color: var(--cream);
}

.panel .section-head {
  margin-block-end: 32px;
}

.section--sage .row__support,
.section--sage .row__fit {
  color: var(--navy);
}

.mark {
  color: var(--mark);
}

.stats-band {
  padding-block: 56px;
  background-color: var(--sage);
  color: var(--navy);
}

.stats-band .stats {
  background-color: var(--rule-stats);
  border-block: 0;
}

.stats-band .stat {
  background-color: var(--sage);
  padding-block: 0;
}

.stats-band .stat--text {
  grid-column: auto;
}

.stats-band .stat__label,
.stats-band .stat__value,
.stats-band .perks {
  color: var(--navy);
}

.stats-band .perks {
  font-size: 20px;
  line-height: 32px;
}