/* Southern Waterscapes — site styles */

:root {
  --navy:        #0B1628;
  --navy-2:      #152240;
  --navy-3:      #1d2d52;
  --gold:        #C9A84C;
  --red:         #C8102E;
  --red-dark:    #A00D24;
  --cream:       #F8F8F6;
  --white:       #ffffff;
  --ink:         #16213a;
  --ink-soft:    #4a5568;
  --line:        rgba(11,22,40,.12);

  --display: "Oswald", "Arial Narrow", sans-serif;
  --body:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --accent:  "Playfair Display", Georgia, serif;

  --nav-h: 84px;
  --wrap: 1200px;
  --radius: 4px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: .01em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

main { padding-top: var(--nav-h); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ---------- shared type ---------- */
.eyebrow {
  font-family: var(--display);
  font-size: .8rem; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 .75rem;
}
.section-title { font-size: clamp(2rem, 4.4vw, 3.1rem); text-transform: uppercase; }
.rule { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.1rem; }
.rule::before, .rule::after { content: ""; height: 1px; width: 64px; background: var(--gold); }
.rule i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.rule.left { justify-content: flex-start; }
.rule.left::after { display: none; }

.section { padding: clamp(64px, 8vw, 104px) 0; }
.section.tight { padding: clamp(48px, 6vw, 76px) 0; }
.section.navy { background: var(--navy); color: #e8edf6; }
.section.navy .section-title, .section.navy h3 { color: var(--white); }
.section.cream { background: var(--cream); }
.head { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); }
.head p { color: var(--ink-soft); font-size: 1.08rem; margin-top: 1rem; }
.section.navy .head p { color: #b9c4d8; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--display); font-size: .95rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  padding: 1rem 2rem; border: 2px solid transparent; border-radius: var(--radius);
  cursor: pointer; transition: background-color .18s, color .18s, border-color .18s, transform .18s;
}
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: #b8963c; transform: translateY(-2px); }
.btn-ghost { border-color: rgba(255,255,255,.55); color: #fff; }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-outline { border-color: var(--navy); color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }
.link-gold {
  font-family: var(--display); font-weight: 600; font-size: .9rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .18s;
}
.link-gold:hover { border-bottom-color: var(--gold); }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 90; height: var(--nav-h);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 18px rgba(11,22,40,.08);
}
.site-header .wrap {
  height: 100%; display: flex; align-items: center;
  justify-content: flex-start; gap: clamp(1rem, 2vw, 1.75rem);
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 62px; width: auto; }
.nav { display: flex; align-items: center; flex: 1; gap: clamp(1rem, 2.2vw, 2rem); }
.nav a {
  font-family: var(--display); font-size: .88rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: var(--navy); padding: .35rem 0; border-bottom: 2px solid transparent;
  transition: color .18s, border-color .18s; white-space: nowrap;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--red); border-bottom-color: var(--red); }
.nav .btn {
  padding: .7rem 1.35rem; font-size: .85rem;
  color: #fff; border-bottom-color: transparent;
}
.nav .btn:hover,
.nav .btn:focus-visible { color: #fff; border-bottom-color: transparent; }
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer; padding: .5rem;
  color: var(--navy); width: 44px; height: 44px;
}
.nav-toggle span { display: block; height: 2px; background: currentColor; margin: 5px 0; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav-toggle { display: block; margin-left: auto; }
  .nav {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(11,22,40,.1);
    padding: .5rem 24px 1.5rem; display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: .95rem 0; border-bottom: 1px solid var(--line); }
  .nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--line); }
  .nav .btn { margin-top: 1rem; }
}

/* ---------- hero carousel ---------- */
.hero {
  position: relative;
  color: #fff; overflow: hidden; background: var(--navy);
}
.hero-viewport { position: relative; }
.hero-viewport:not(.is-banner) { min-height: clamp(520px, 86vh, 800px); }
@media (max-width: 640px) {
  .hero-viewport:not(.is-banner) { min-height: clamp(440px, 72vh, 580px); }
}
/* Banner slides: the hero takes the artwork's own proportions, so wording painted
   into the image is never cropped and there are no letterbox bars at any width. */
.hero-viewport.is-banner { aspect-ratio: var(--hero-aspect); }

.hero-slide {
  position: absolute; inset: 0;
  display: grid; place-items: center; text-align: center;
  padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 8vw, 104px);
  opacity: 0; visibility: hidden;
  transition: opacity .8s ease, visibility 0s linear .8s;
}
.hero-slide.is-active { opacity: 1; visibility: visible; transition: opacity .8s ease, visibility 0s; }
.hero-slide .wrap { position: relative; }

.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,22,40,.74) 0%, rgba(11,22,40,.52) 42%, rgba(11,22,40,.88) 100%);
}

/* brand-plate slide: artwork carries its own typography, so it is scaled whole, never cropped */
.hero-plate-slide {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(32,52,88,.7) 0%, rgba(11,22,40,0) 68%),
    var(--navy);
}
.hero-plate {
  width: 100%; height: auto; max-height: min(52vh, 440px);
  object-fit: contain; margin: 0 auto clamp(1.5rem, 3vw, 2.4rem);
}

/* full-bleed banner artwork */
.hero-banner-slide { display: block; padding: 0; }
.hero-banner-slide > img { width: 100%; height: 100%; object-fit: cover; }

/* A button painted into the artwork is not clickable on its own, so a
   transparent link is laid over it. Percentages keep it aligned as the
   image scales. */
.hero-hotspot {
  position: absolute; display: block; border-radius: 10px;
  background: transparent;
  transition: background-color .18s, box-shadow .18s;
}
.hero-hotspot:hover {
  background: rgba(255,255,255,.15);
  box-shadow: 0 0 0 2px rgba(255,255,255,.5);
}
.hero-hotspot:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

/* carousel controls */
.hero-controls {
  position: absolute; left: 0; right: 0; bottom: clamp(16px, 2.6vw, 26px); z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: .7rem;
}
.hero-dot {
  width: 11px; height: 11px; padding: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.32); border: 1px solid rgba(255,255,255,.62);
  transition: background-color .2s, transform .2s, border-color .2s;
}
.hero-dot:hover { background: rgba(255,255,255,.68); }
.hero-dot[aria-current="true"] { background: var(--gold); border-color: var(--gold); transform: scale(1.25); }
.hero-pause {
  width: 27px; height: 27px; padding: 0; margin-left: .3rem; cursor: pointer;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.42);
  color: #fff; font-size: .6rem; line-height: 1; transition: background-color .2s;
}
.hero-pause:hover { background: rgba(255,255,255,.3); }

.hero-welcome {
  font-family: var(--accent); font-style: italic; font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  color: var(--gold); margin: 0 0 .35rem;
}
.hero-title {
  font-family: var(--display); font-weight: 600; line-height: 1.1; margin: 0;
  font-size: clamp(2.6rem, 7.2vw, 5.2rem); text-transform: uppercase;
  letter-spacing: .02em; text-shadow: 0 4px 26px rgba(0,0,0,.45);
}
.hero-sub {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.05rem, 2.6vw, 1.7rem); letter-spacing: .2em;
  text-transform: uppercase; color: #e9eef7; margin: 1rem 0 0;
}
.hero-tag { font-size: clamp(1rem, 2vw, 1.18rem); color: #cbd5e6; margin: 1.4rem 0 2.2rem; }

/* ---------- split (about / feature) ---------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.split.reverse .split-media { order: 2; }
.split-media img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 18px 50px rgba(11,22,40,.22); }
/* Artwork that carries its own shape on a transparent background: the card
   treatment would draw a square edge around it. */
.split-media img.media-transparent { border-radius: 0; box-shadow: none; }
.split-body .section-title { text-align: left; }
.split-body > p { color: var(--ink-soft); margin-top: 1.4rem; }
.section.navy .split-body > p { color: #b9c4d8; }
.quote {
  font-family: var(--accent); font-style: italic;
  font-size: clamp(1.15rem, 2.3vw, 1.4rem); line-height: 1.55;
  color: var(--ink); border-left: 3px solid var(--gold);
  padding-left: 1.4rem; margin: 1.6rem 0;
}
.section.navy .quote { color: #eaf0fa; }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
}

/* ---------- service badges ---------- */
.badges { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: clamp(.5rem, 2vw, 1.5rem); }
.badge { display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.badge img {
  width: clamp(190px, 25vw, 280px); height: auto;
  transition: transform .3s ease;
}
.badge:hover img, .badge:focus-visible img { transform: scale(1.05); }
.badge span {
  font-family: var(--display); font-size: .78rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
  opacity: 0; transition: opacity .2s; margin-top: .25rem;
}
.badge:hover span, .badge:focus-visible span { opacity: 1; }
@media (hover: none) { .badge span { opacity: 1; } }

/* ---------- process steps ---------- */
.steps { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.step {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: 1.9rem 1.6rem; position: relative;
}
.section.cream .step, .section:not(.navy) .step { background: #fff; border-color: var(--line); box-shadow: 0 6px 22px rgba(11,22,40,.06); }
.step-num {
  font-family: var(--display); font-size: 2.4rem; font-weight: 700;
  color: var(--gold); line-height: 1; display: block; margin-bottom: .6rem;
}
.step h3 { font-size: 1.16rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .55rem; }
.step p { font-size: .97rem; color: #b9c4d8; margin: 0; }
.section:not(.navy) .step p { color: var(--ink-soft); }

/* numbered detail list (service pages) */
.timeline { display: grid; gap: 1.1rem; }
.tl-item {
  display: grid; grid-template-columns: auto 1fr; gap: 1.5rem;
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: var(--radius); padding: 1.7rem 1.8rem;
}
.tl-num { font-family: var(--display); font-size: 1.6rem; font-weight: 700; color: var(--gold); line-height: 1.2; }
.tl-item h3 { font-size: 1.2rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .5rem; }
.tl-item p { color: var(--ink-soft); font-size: 1rem; margin: 0; }
@media (max-width: 620px) { .tl-item { grid-template-columns: 1fr; gap: .4rem; padding: 1.4rem; } }

/* ---------- feature cards ---------- */
.features { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.feature {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: 1.9rem 1.7rem;
}
.feature h3 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gold); margin-bottom: .6rem; }
.feature p { font-size: .97rem; color: #b9c4d8; margin: 0; }

/* ---------- page banner (service pages) ---------- */
.page-banner { background: var(--navy); }
.page-banner img { width: 100%; height: auto; }
.back-link {
  display: inline-block; margin-top: 1.5rem; font-family: var(--display);
  font-size: .85rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none;
}
.back-link:hover { color: var(--red); }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%); color: #fff; text-align: center; }
.cta-band h2 { font-size: clamp(1.8rem, 4vw, 2.9rem); text-transform: uppercase; }
.cta-band p { color: #c3cee2; margin: 1rem auto 2rem; max-width: 620px; font-size: 1.1rem; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: 0 14px 44px rgba(11,22,40,.1); }
.form-card h3 { font-size: 1.3rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1.4rem; }
.field { margin-bottom: 1.15rem; }
.field label {
  display: block; font-family: var(--display); font-size: .82rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: .45rem;
}
.field input, .field textarea {
  width: 100%; font-family: var(--body); font-size: 1rem; color: var(--ink);
  padding: .85rem 1rem; border: 1px solid #cfd6e4; border-radius: var(--radius);
  background: #fbfcfe; transition: border-color .18s, box-shadow .18s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,.22);
}
.form-card .btn { width: 100%; }
.form-note { font-size: .88rem; color: var(--ink-soft); margin-top: 1rem; text-align: center; }
.form-status { margin-top: 1rem; font-size: .95rem; }
.form-status.error { color: var(--red-dark); }
.form-success { text-align: center; padding: 2rem 1rem; }
.form-success h3 { color: var(--navy); margin-bottom: .75rem; }
.form-success p { color: var(--ink-soft); margin: 0; }
.form-success .tick {
  width: 60px; height: 60px; border-radius: 50%; background: var(--gold);
  display: grid; place-items: center; margin: 0 auto 1.25rem;
  font-size: 1.9rem; color: var(--navy); line-height: 1;
}
[hidden] { display: none !important; }

.info-block + .info-block { margin-top: 2.2rem; }
.info-block h3 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); margin-bottom: .9rem; }
.contact-lines { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.contact-lines li { margin-bottom: .6rem; font-size: 1.12rem; }
.contact-lines a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(201,168,76,.5); }
.contact-lines a:hover { color: var(--gold); }
.area-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .5rem 1.5rem; list-style: none; padding: 0; margin: 0; }
.area-grid li { color: #c3cee2; font-size: .98rem; padding-left: 1.1rem; position: relative; }
.area-grid li::before { content: "★"; position: absolute; left: 0; color: var(--gold); font-size: .72rem; top: .28rem; }
.finance { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; margin: 1.2rem 0 1.5rem; }
.finance div { text-align: center; padding: 1rem .6rem; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); }
.finance strong { display: block; font-family: var(--display); color: var(--gold); font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; }
.finance span { font-size: .85rem; color: #b9c4d8; }

/* ---------- footer ---------- */
.site-footer { background: #070e1a; color: #9fb0c9; padding: clamp(48px, 6vw, 72px) 0 0; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 2.5rem; }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
.footer-wordmark {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  color: #fff; font-size: 1.85rem; line-height: 1; letter-spacing: .05em; margin: 0 0 .5rem;
}
.footer-wordmark span {
  display: block; font-size: .92rem; letter-spacing: .34em;
  color: var(--gold); margin-top: .45rem;
}
.footer-tag {
  font-family: var(--accent); font-style: italic;
  color: var(--gold); font-size: .98rem; margin: 0 0 1rem;
}
.footer-brand p { font-size: .95rem; line-height: 1.6; }
.site-footer h4 {
  font-size: .85rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .55rem; font-size: .95rem; }
.site-footer a { color: #9fb0c9; text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.footer-contact li { display: flex; gap: .55rem; }
.footer-bottom {
  margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid rgba(255,255,255,.1);
  padding: 1.5rem 0; display: flex; flex-wrap: wrap; gap: .75rem 2rem;
  justify-content: space-between; align-items: center; font-size: .88rem;
}

/* ---------- media caption badge ---------- */
.media-caption {
  display: inline-block; margin-top: 1rem;
  font-family: var(--display); font-size: .78rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--navy); background: var(--gold);
  padding: .5rem 1.1rem; border-radius: var(--radius);
}

/* ---------- nav active state per page ---------- */
body[data-page="pools"]   .nav a[href="/custom-pools/"],
body[data-page="spas"]    .nav a[href="/spas-hot-tubs/"],
body[data-page="outdoor"] .nav a[href="/outdoor-living/"] {
  color: var(--red); border-bottom-color: var(--red);
}
@media (max-width: 940px) {
  body[data-page="pools"]   .nav a[href="/custom-pools/"],
  body[data-page="spas"]    .nav a[href="/spas-hot-tubs/"],
  body[data-page="outdoor"] .nav a[href="/outdoor-living/"] {
    border-bottom-color: var(--line);
  }
}

/* ---------- page head (pages with no banner artwork) ---------- */
.page-head {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%);
  color: #fff; text-align: center;
  padding: clamp(56px, 8vw, 100px) 0;
}
.page-head h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); text-transform: uppercase; color: #fff; }
.page-head .lead {
  color: #c9d4e6; font-size: clamp(1.05rem, 2vw, 1.22rem);
  max-width: 740px; margin: 1.6rem auto 0;
}

/* ---------- button rows ---------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem; }
.btn-row.left { justify-content: flex-start; }

/* ---------- financing intro ---------- */
.finance-intro {
  max-width: 800px; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  text-align: center; color: var(--ink-soft);
}

/* ---------- lender banners ---------- */
.lender-banners {
  display: grid; gap: clamp(2.25rem, 5vw, 3.25rem);
  max-width: 920px; margin-inline: auto;
}
.lender-banner { text-align: center; }
.lender-art {
  position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 6px 24px rgba(11,22,40,.10);
}
.lender-art img { width: 100%; height: auto; }
/* transparent link over the Apply button painted into the banner */
.lender-hotspot {
  position: absolute; display: block; border-radius: 10px;
  background: transparent;
  transition: background-color .18s, box-shadow .18s;
}
.lender-hotspot:hover {
  background: rgba(11,22,40,.18);
  box-shadow: 0 0 0 3px rgba(11,22,40,.25);
}
.lender-hotspot:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.lender-link { margin: 1.35rem 0 0; }
/* Each lender's button carries that lender's own brand colour, set inline as
   --lender-accent by tools/gen-financing.py. White on those colours clears AA
   only at large-text sizes, hence 700 weight at 19px and up. */
.lender-link a {
  display: inline-block; max-width: 100%;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.35rem); letter-spacing: .02em; line-height: 1.3;
  color: #fff; background: var(--lender-accent, var(--red));
  text-decoration: none; border-radius: 999px;
  padding: .9rem 2rem;
  animation: lender-glow 2.6s ease-in-out infinite;
  transition: background-color .18s, transform .18s;
}
.lender-link a:hover,
.lender-link a:focus-visible {
  background: var(--lender-accent-dark, var(--red-dark)); transform: translateY(-2px);
}
@keyframes lender-glow {
  0%, 100% {
    box-shadow: 0 0 12px rgba(var(--lender-accent-rgb, 200, 16, 46), .45),
                0 6px 18px rgba(var(--lender-accent-rgb, 200, 16, 46), .28);
  }
  50% {
    box-shadow: 0 0 30px rgba(var(--lender-accent-rgb, 200, 16, 46), .85),
                0 8px 24px rgba(var(--lender-accent-rgb, 200, 16, 46), .45);
  }
}
@media (prefers-reduced-motion: reduce) {
  /* keep the glow, drop the pulse */
  .lender-link a {
    animation: none;
    box-shadow: 0 0 20px rgba(var(--lender-accent-rgb, 200, 16, 46), .6),
                0 6px 18px rgba(var(--lender-accent-rgb, 200, 16, 46), .32);
  }
}
.lender-form { margin-top: 1.5rem; display: flex; justify-content: center; }
.lender-form iframe { max-width: 100%; border: 0; }
.lenders-empty {
  background: #fff; border: 1px dashed rgba(11,22,40,.28); border-radius: var(--radius);
  padding: clamp(2rem, 4vw, 3rem); text-align: center;
}
.lenders-empty h3 { font-size: 1.25rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .75rem; }
.lenders-empty p { color: var(--ink-soft); margin: 0; }
.lenders-disclosure {
  margin-top: clamp(1.75rem, 3vw, 2.5rem); font-size: .86rem; line-height: 1.6;
  color: var(--ink-soft); text-align: center; max-width: 780px; margin-inline: auto;
}

/* ---------- financing nav active state ---------- */
body[data-page="home"] .nav a[href="/"],
body[data-page="financing"] .nav a[href="/financing/"] {
  color: var(--red); border-bottom-color: var(--red);
}
@media (max-width: 940px) {
  body[data-page="financing"] .nav a[href="/financing/"] { border-bottom-color: var(--line); }
}

/* Seven nav items plus the phone button get tight between the mobile
   breakpoint and the full container width — ease off the spacing there. */
@media (min-width: 941px) and (max-width: 1150px) {
  .nav { gap: .8rem; }
  .nav a { font-size: .79rem; letter-spacing: .09em; }
  .nav .btn { padding: .6rem 1rem; font-size: .78rem; }
  .brand img { height: 54px; }
}

/* ---------- embedded lead form (ProDBX) ----------
   The form lives on ProDBX's domain, so this page cannot read its height and
   size the frame to fit; the height has to be set here. Too short is the
   dangerous direction: the Send button ends up out of reach.

   Measured 2026-09-24 with headless Chrome: the form is 1056px tall up to
   400px wide, 969px up to 455px, 949px beyond. Each value below adds ~40px
   because phones render a different system font than the machine that
   measured it, which shifts line heights. Container queries key the height
   to the frame's own width, whatever the page layout does around it.
   Re-measure if ProDBX changes the form (see tools/contact.json). */
.lead-frame-wrap {
  /* Deliberately unstyled: ProDBX's page is transparent below its own content,
     so the height headroom shows the navy section through it. A radius or
     shadow here would outline that empty space as a visible band. */
  container-type: inline-size;
}
.lead-frame { display: block; width: 100%; height: 1100px; border: 0; }
@container (min-width: 410px) { .lead-frame { height: 1010px; } }
@container (min-width: 460px) { .lead-frame { height: 990px; } }
.lead-frame-note {
  margin: 1.1rem 0 0; text-align: center;
  font-size: .98rem; color: #b9c4d8;
}
.lead-frame-note a { color: #fff; font-weight: 600; }