/* ===== FINANCING PAGE — Modern Redesign ===== */

.financing .container-fluid {
  padding: 0;
}

/* ---------- PAGE WRAPPER ---------- */
/* The breadcrumb-over-hero treatment (page pulled up under the crumb, white
   crumb text, the crumb centred in the same 1400px column as the hero title,
   mobile top clearance) comes from the shared .hero-overlay-page class in
   components/breadcumb/index.css, opted into on the wrapper in Financing.cshtml.
   This page used to carry its own copy of those rules, written before the shared
   class existed; only the page background stays here. */
.financing {
  background: linear-gradient(180deg, #ffffff 0%, #f5f6f7 100%);
}

/* Hero rendered by .page-hero (main.css). */

/* Heavier scrim than the shared 20%: this photo is bright throughout (cream
   wall, pale polo, light wood), so the default wash barely registers under the
   left-aligned white copy. Page-scoped rather than a change to .page-hero, since
   the other heroes sit on darker photos and already read correctly.

   Bounded to 768px up on purpose. .financing .page-hero::before is (0,2,1)
   against the shared rule's (0,1,1), so an unbounded version would also beat the
   mobile 40% wash and make mobile lighter than it is now. */
@media (min-width: 768px) {
  .financing .page-hero::before {
    background: rgba(0, 0, 0, 0.42);
  }
}

/* Tighter measure on the subtitle than the shared 700px cap on .page-hero__text.
   This hero's subtitle runs two sentences, and 700px at 1.15rem is roughly 76
   characters per line, past a comfortable reading width. Expressed in ch so the
   cap tracks the font rather than a pixel guess. Inert below ~560px, where the
   viewport is already narrower than the cap.

   balance rather than the shared pretty: pretty only avoids a single stranded
   word, which still left two words alone on the third line. balance evens all
   three lines instead, so the tail gets pulled up without hand-tuning the cap.
   Safe here because balance only applies up to a handful of lines, and this sits
   at three. */
.financing .page-hero__overlay p {
  max-width: 56ch;
  text-wrap: balance;
}

/* ---------- INTRO SECTION ---------- */
.financing .fin-intro {
  padding: 48px 20px;
}

.financing .fin-intro__inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* Title via .section-title in main.css. */

.financing .fin-intro p {
  font-family: Inter, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #555;
  margin-bottom: 24px;
}

/* Apply Now button via .btn-cta-green in main.css. */

/* ---------- TWO-COLUMN FEATURE SECTIONS ---------- */
.financing .fin-feature {
  display: flex;
  flex-direction: column;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px 48px;
}

.financing .fin-feature--alt {
  /* no background change needed — page gradient handles it */
}

.financing .fin-feature__img {
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 12px;
}

.financing .fin-feature__img img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
}

.financing .fin-feature__content {
  flex: 1;
  padding: 32px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Kicker via .section-kicker, title via .section-title in main.css. */

.financing .fin-feature__content p {
  font-family: Inter, sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #555;
  margin-bottom: 20px;
}

.financing .fin-feature__content strong {
  display: block;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 20px;
}

/* ---------- STORE CONTACT BAND (full-width between feature sections) ---------- */
.financing .fin-contact-band {
  width: 100%;
  background: var(--brand-primary);
  color: #fff;
  padding: 25px 24px;
  margin-bottom: 50px;
}

.financing .fin-contact-band__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.financing .fin-contact-band__text {
  font-family: var(--font-secondary);
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
}

@media (max-width: 575px) {
  .financing .fin-contact-band__inner {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* ---------- RESPONSIVE ---------- */

@media (min-width: 768px) {
  .financing .fin-intro {
    padding: 72px 40px;
  }

  .financing .fin-feature {
    flex-direction: row;
    gap: 48px;
    align-items: center;
    padding: 0 40px 56px;
  }

  .financing .fin-feature--alt {
    flex-direction: row-reverse;
  }

  .financing .fin-feature__img {
    flex: 0 0 50%;
  }

  .financing .fin-feature__img img {
    height: 100%;
    min-height: 400px;
    max-height: 520px;
  }

  .financing .fin-feature__content {
    padding: 0;
  }
}

@media (min-width: 992px) {
  .financing .fin-intro {
    padding: 80px 40px;
  }

  .financing .fin-feature__content {
    padding: 0;
  }
}