.page-section {
  display: grid;
  align-content: start;
  width: 100%;
  padding: calc(var(--header-height) + var(--section-top-offset)) var(--page-inline) var(--section-block);
  background: var(--color-white);
}

.page-section:nth-of-type(2n + 1) {
  background: var(--color-light-bg);
}

.section-layout {
  display: grid;
  width: min(100%, var(--content-max));
  height: 100%;
  max-height: 100%;
  margin-inline: auto;
  gap: var(--section-gap);
  align-items: start;
}

.page-section--media-right .section-layout {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.page-section--media-below .section-layout {
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: clamp(1.85rem, 5vh, 3.75rem);
  align-content: start;
}

.page-section--media-right .section-media {
  align-self: center;
}

.section-copy {
  display: grid;
  gap: 0;
  max-width: 860px;
}

.page-section--media-below .section-copy {
  width: 100%;
  max-width: none;
  text-align: left;
}

.section-copy h2 {
  margin-top: clamp(0.2rem, 0.8vh, 0.45rem);
}

.section-copy p {
  font-size: var(--section-copy-size);
}

.section-copy > h2 + p,
.section-copy > h2 + .copy-stack {
  margin-top: clamp(1.25rem, 3vh, 2.1rem);
}

.section-copy > p + p {
  margin-top: clamp(0.4rem, 1.2vh, 0.75rem);
}

.section-media {
  min-width: 0;
  min-height: 0;
}

.section-card-grid {
  display: grid;
  width: 100%;
  height: 100%;
  gap: var(--card-gap);
}

.section-card-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.section-card-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.section-card-grid--six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
}

.section-card-grid--steps {
  --step-card-gap: clamp(2.75rem, 6vw, 5.25rem);
  gap: var(--step-card-gap);
  overflow: visible;
}

.info-card,
.contact-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-card);
}

.info-card {
  display: grid;
  min-width: 0;
  min-height: 0;
  align-content: start;
  justify-items: center;
  overflow: hidden;
  padding: var(--card-padding);
  text-align: center;
}

.info-card h3 {
  margin-top: 0.65rem;
  font-size: var(--card-title-size);
}

.info-card p {
  margin-top: 0.45rem;
  font-size: var(--card-copy-size);
  line-height: 1.35;
}

.info-card .sprite {
  --sprite-cell: var(--card-sprite-size);
}

.info-card--icon-row {
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: center;
  justify-items: start;
  text-align: left;
}

.info-card--icon-row h3 {
  margin-top: 0;
}

.info-card--step {
  position: relative;
  overflow: visible;
  padding-top: calc(var(--card-padding) + 0.75rem);
}

.info-card__number {
  position: absolute;
  top: 0;
  left: 0;
  color: rgba(8, 42, 77, 0.22);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 0.75;
  transform: translate(-45%, -45%);
}

.info-card--statement {
  height: 100%;
  place-content: center;
  gap: 1.25rem;
  padding: clamp(1.25rem, 4vw, 3.5rem);
}

.info-card--statement .sprite {
  --sprite-cell: clamp(76px, 12vw, 150px);
}

.info-card--statement p {
  max-width: 420px;
  margin-top: 0;
  color: var(--color-navy);
  font-size: clamp(1.1rem, 2.6vw, 2.25rem);
  font-weight: 850;
  line-height: 1.12;
}

.contact-section {
  align-content: space-between;
  gap: var(--section-gap);
  background:
    linear-gradient(135deg, rgba(191, 221, 242, 0.58), rgba(248, 251, 254, 0.94)),
    var(--color-light-bg);
}

.contact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, auto);
  gap: var(--section-gap);
  align-items: center;
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding: clamp(1.25rem, 4vw, 3rem);
}

.contact-card__copy {
  display: grid;
  gap: var(--copy-gap);
  max-width: 760px;
}

.contact-card__copy p {
  font-size: var(--section-copy-size);
}

.contact-list {
  display: grid;
  gap: 0.75rem;
  color: var(--color-body);
  font-style: normal;
  font-weight: 700;
}

.contact-list a {
  color: var(--color-blue);
}

.contact-card__cta {
  grid-column: 1 / -1;
  justify-self: start;
}

@media (max-width: 980px) {
  .page-section--media-right .section-layout,
  .contact-card {
    grid-template-columns: 1fr;
  }

  .page-section--media-right .section-layout {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .page-section--media-right .section-copy {
    max-width: 860px;
  }

  .section-copy h2 {
    font-size: clamp(1.35rem, 6.2vw, 2.45rem);
  }

  .section-card-grid--allow-2x2,
  .section-card-grid--allow-2x3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
  }

  .section-card-grid--allow-1x3 {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(0, 1fr);
  }

  .section-card-grid--steps {
    width: min(100%, 720px);
    margin-inline: auto;
    gap: clamp(1.25rem, 3.4vh, 1.85rem);
  }
}

@media (max-width: 760px) {
  .section-layout {
    gap: clamp(0.65rem, 2vh, 1rem);
  }

  .page-section--media-below .section-layout {
    row-gap: clamp(1.25rem, 3.4vh, 2rem);
  }

  .section-copy h2 {
    font-size: clamp(1.35rem, 6.2vw, 2.05rem);
  }

  .section-copy p,
  .contact-card__copy p {
    line-height: 1.34;
  }

  .copy-stack {
    gap: 0.55rem;
  }

  .section-copy > h2 + p,
  .section-copy > h2 + .copy-stack {
    margin-top: 1.15rem;
  }

  .section-copy > p + p {
    margin-top: 0.5rem;
  }

  .section-card-grid {
    gap: 0.5rem;
  }

  .section-card-grid--steps {
    gap: clamp(1rem, 2.8vh, 1.4rem);
  }

  .info-card {
    padding: 0.6rem;
  }

  .info-card--icon-row {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.35rem;
    text-align: center;
  }

  .info-card h3 {
    margin-top: 0.35rem;
    line-height: 1.12;
  }

  .info-card p {
    margin-top: 0.25rem;
    line-height: 1.24;
  }

  .info-card--icon-row h3 {
    margin-top: 0;
  }

  .info-card__number {
    font-size: 3.2rem;
  }

  .info-card--statement {
    gap: 0.6rem;
    padding: 0.85rem;
  }

  .info-card--statement p {
    font-size: clamp(1rem, 5vw, 1.35rem);
  }

  .contact-section {
    gap: 0.75rem;
  }

  .contact-card {
    gap: 0.85rem;
    padding: 1rem;
  }

  .contact-card__cta {
    width: 100%;
  }
}
