/* A quiet, persistent navigation bar that settles into a floating capsule. */
html { scroll-padding-top: 120px; }
.site-header {
  position: fixed;
  z-index: 50;
  transition: padding .35s ease;
  isolation: isolate;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 10px max(18px, calc((100vw - 1360px) / 2));
  z-index: -1;
  border: 1px solid #024f5b14;
  border-radius: 100px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 10px 35px #024f5b12;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .35s ease, transform .35s ease;
}
.site-header .brand img { transition: height .35s ease, filter .35s ease; }
.site-header nav { transition: background .35s ease, box-shadow .35s ease; }
.site-header.is-scrolled { padding-block: 16px; }
.site-header.is-scrolled::before { opacity: 1; transform: translateY(0); }
.site-header.is-scrolled .brand img {
  height: 66px;
  filter: brightness(0) saturate(100%) invert(22%) sepia(21%) saturate(2025%) hue-rotate(145deg) brightness(90%) contrast(103%);
}
.site-header.is-scrolled nav { background: transparent; box-shadow: none; }
.skip-link { z-index: 60; }

/* Sticky cards are reserved for screens with room to read the entire card. */
@media (min-width: 1000px) and (min-height: 720px) and (prefers-reduced-motion: no-preference) {
  .journey {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 7vw, 100px);
    align-items: start;
  }
  .journey-top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    align-self: start;
  }
  .journey-top h2 { font-size: clamp(42px, 3.6vw, 55px); }
  .journey-top > div > p:not(.eyebrow) { font-size: 16px; margin-top: 24px; }
  .journey-top .button { margin-top: 24px; }
  .journey-top > img { height: 175px; width: 100%; object-fit: cover; border-radius: 24px; }
  .journey-grid { display: block; margin-top: 0; }
  .journey-step {
    --step-index: 0;
    position: relative;
    min-height: 340px;
    margin-bottom: 30px;
    padding: 34px 36px 38px;
    border: 1px solid #024f5b12 !important;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 12px 35px #024f5b0d;
    transform-origin: center top;
  }
  .journey-step:nth-child(2) { --step-index: 1; background: var(--teal); color: #fff; }
  .journey-step:nth-child(3) { --step-index: 2; }
  .journey-step:nth-child(4) { --step-index: 3; background: var(--plum); color: #fff; margin-bottom: 0; }
  .journey-step .step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--pale);
    color: var(--teal);
    font-size: 17px;
    letter-spacing: -.02em;
    margin-bottom: 24px;
  }
  .journey-grid .journey-step h3 { font-size: 38px; margin-bottom: 17px; }
  .journey-grid .journey-step p { font-size: 17px; max-width: 35ch; }
  .journey-grid .journey-step .text-link { margin-top: 25px; }
  .journey-step:nth-child(even) .text-link { color: var(--pale); }
  .journey-step:nth-child(even) .text-link::after { border-color: var(--pale); }
  .journey.is-sticky .journey-top { position: sticky; top: 116px; }
  .journey.is-sticky .journey-step {
    position: sticky;
    top: calc(116px + var(--step-index) * 22px);
    transform: scale(var(--card-scale, 1));
  }
  .journey.is-sticky .journey-step:focus-within {
    z-index: 5;
    transform: none;
  }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 105px; }
  .site-header.is-scrolled { padding-block: 10px; }
  .site-header::before { inset: 8px 13px; }
  .site-header.is-scrolled .brand img { height: 65px; }
  .site-header nav,
  .site-header.is-scrolled nav {
    top: calc(100% + 4px);
    background: #fff;
    box-shadow: 0 15px 40px #002c3940;
    max-height: calc(100svh - 180px);
    overflow-y: auto;
  }
}
@media (max-width: 580px) {
  .site-header::before { inset-inline: 10px; }
  .site-header.is-scrolled .brand img { height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header::before, .site-header .brand img, .site-header nav { transition: none; }
}