/* Route-only bands. Keep the 1440 × 220 composition proportional at every crop. */
.page-hero.page-hero-art {
  padding: 0 0 40px;
}

.page-hero-art .inner-art {
  --inner-art-height: 260px;
  --ink-sky: #9fd0ec;
  --ink-far: #8e9fc8;
  --ink-ridge: #1a3b5f;
  --ink-ground: #0b2238;
  --ink-paper: #eee9dd;
  --ink-gold: #e8ae30;
  --ink-rust: #c0442f;
  --ink-window: #9fd0ec;
  position: relative;
  width: 100%;
  height: var(--inner-art-height);
  overflow: hidden;
  background: var(--ink-sky);
}

.inner-art[data-inner-art-palette="dusk"] {
  --ink-sky: #4b4479;
  --ink-far: #4c4f80;
  --ink-ridge: #223555;
  --ink-rust: #8a4a2f;
  --ink-window: #e8ae30;
}

.inner-art[data-inner-art-palette="night"] {
  --ink-sky: #0b2238;
  --ink-far: #253c60;
  --ink-ground: #071a2d;
  --ink-rust: #8a4a2f;
  --ink-window: #e8ae30;
}

.inner-art > svg {
  position: absolute;
  left: 50%;
  display: block;
  width: 100%;
  min-width: calc(var(--inner-art-height) * 1440 / 220);
  max-width: none;
  height: 100%;
  transform: translateX(-50%);
}

.page-hero-art .page-hero-shell {
  padding-top: 24px;
}

.page-hero-art .hero-actions {
  margin-top: 16px;
}

.page-hero-art .inner-art-application-note {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Without a truthful sample, the authored calculator sun must not imply live sky. */
.inner-art :is(.clock-sun, .hummingbird, .key-glint) {
  visibility: hidden;
}

.inner-art[data-inner-art-ready] .hummingbird {
  animation: inner-art-visit 4s linear 1;
}

.inner-art[data-inner-art-ready] .key-glint {
  animation: inner-art-glint 1.5s steps(1, end) 1;
}

.inner-art[data-inner-art-rested="true"] :is(.hummingbird, .key-glint) {
  animation: none;
  visibility: hidden;
}

.inner-art[data-inner-art-reduced="true"] :is(.hummingbird, .key-glint) {
  animation: none;
  visibility: hidden;
}

@keyframes inner-art-visit {
  0% { visibility: hidden; transform: translate(32px, -12px); }
  1% { visibility: visible; transform: translate(32px, -12px); }
  30%, 65% { visibility: visible; transform: translate(0, 0); }
  95% { visibility: visible; transform: translate(-38px, -18px); }
  100% { visibility: hidden; transform: translate(-38px, -18px); }
}

@keyframes inner-art-glint {
  0%, 100% { visibility: hidden; }
  25%, 65% { visibility: visible; }
  45%, 85% { visibility: hidden; }
}

.loan-journey {
  padding-block: 36px;
}

.loan-journey-art {
  --ink-paper: #9fd0ec;
  --ink-sky: #9fd0ec;
  --ink-ground: #0b2238;
  --ink-gold: #e8ae30;
  --ink-rust: #c0442f;
  margin-block: 24px;
}

.loan-journey-art > svg {
  display: block;
  width: 100%;
  max-height: 160px;
  height: auto;
}

.loan-journey-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 24px;
  padding-left: 20px;
}

.loan-journey-steps li {
  min-width: 0;
  padding-left: 2px;
}

.loan-journey-steps li::marker {
  color: var(--ser-navy);
  font-weight: 800;
}

.loan-journey-steps h3 {
  margin: 0 0 8px;
  font-size: var(--type-lead);
  overflow-wrap: anywhere;
}

.loan-journey-steps p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
}

.page-contact #contact-form,
.page-refer #refer-buyer-form {
  scroll-margin-top: 24px;
}

/* The form is first in source order, including on phones. */
@media (min-width: 1181px) {
  .page-contact .contact-shell {
    grid-template-areas: "information form";
  }

  .page-contact .contact-shell > .contact-form {
    grid-area: form;
  }

  .page-contact .contact-shell > div {
    grid-area: information;
  }
}

@media (max-width: 980px) {
  .loan-journey-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .page-hero.page-hero-art {
    padding-bottom: 20px;
  }

  .page-hero-art .inner-art {
    --inner-art-height: 160px;
  }

  .page-hero-art .page-hero-shell {
    padding-top: 12px;
  }

  .page-hero-art h1 {
    margin-bottom: 8px;
    font-size: var(--type-display);
    line-height: 1.05;
  }

  .page-hero-art .page-hero-shell > p:not(.inner-art-application-note) {
    font-size: 16px;
    line-height: 1.4;
  }

  .page-hero-art .hero-actions {
    margin-top: 12px;
    gap: 8px;
  }

  .page-hero-art .hero-actions .button {
    padding: 10px 14px;
  }

  .loan-journey {
    padding-block: 28px;
  }

  .loan-journey-art {
    margin-block: 20px;
  }

  .loan-journey-steps {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .loan-journey-steps h3 {
    margin-bottom: 4px;
  }

  .page-contact .page-hero-art {
    padding-bottom: 12px;
  }

  .page-contact .contact-section {
    padding-top: 8px;
  }

  .page-contact .contact-form {
    padding: 12px;
  }
}

/* Short phones retain the whole safe core, not a vertically cropped panorama. */
@media (max-width: 700px) and (max-height: 600px) {
  .page-hero-art .inner-art {
    --inner-art-height: 100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inner-art :is(.hummingbird, .key-glint) {
    animation: none !important;
    visibility: hidden;
  }
}

html:not(.js) .page-hero.page-hero-art {
  padding-top: 0;
}