/* ══════════════════════════════════════════════════════════════
   Best Pick Finance — shared stylesheet
   Loaded by every page. Page-specific tweaks stay inline.
   ══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 83px; }
body { font-family: 'Poppins', sans-serif; background: #F8F5F0; color: #1A2E40; -webkit-font-smoothing: antialiased; }

/* Grain texture */
.grain::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: #0E2A47; color: #fff;
  padding: 14px 28px; border-radius: 6px;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px;
  transition: background 0.22s cubic-bezier(.4,0,.2,1), transform 0.18s cubic-bezier(.4,0,.2,1), box-shadow 0.22s;
  box-shadow: 0 4px 16px rgba(14,42,71,0.18), 0 1px 3px rgba(14,42,71,0.12);
  cursor: pointer; border: none; text-decoration: none;
}
.btn-primary:hover { background: #0a1f35; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(14,42,71,0.25); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:focus-visible { outline: 3px solid #C9A24C; outline-offset: 3px; }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: #0E2A47;
  padding: 13px 28px; border-radius: 6px;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px;
  border: 1.5px solid #0E2A47;
  transition: background 0.22s cubic-bezier(.4,0,.2,1), transform 0.18s, color 0.22s;
  cursor: pointer; text-decoration: none;
}
.btn-secondary:hover { background: #0E2A47; color: #fff; transform: translateY(-2px); }
.btn-secondary:active { transform: translateY(0); }
.btn-secondary:focus-visible { outline: 3px solid #C9A24C; outline-offset: 3px; }

/* Secondary button sitting on a navy panel */
.btn-secondary.btn-on-navy { border-color: rgba(255,255,255,0.35); color: #fff; }
.btn-secondary.btn-on-navy:hover { background: #fff; color: #0E2A47; border-color: #fff; }

/* Eyebrow */
.eyebrow {
  font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: #C9A24C;
}

/* Nav links */
.nav-link {
  font-size: 14px; font-weight: 500; color: #1A2E40;
  text-decoration: none; padding: 4px 0;
  border-bottom: 1.5px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.nav-link:hover { color: #0E2A47; border-bottom-color: #C9A24C; }
.nav-link:focus-visible { outline: 2px solid #C9A24C; border-radius: 2px; }
/* Current page in the nav */
.nav-link.is-active { color: #0E2A47; font-weight: 600; border-bottom-color: #C9A24C; }

/* Mobile menu — hidden until the hamburger toggles .open */
#mobile-menu { display: none; }
#mobile-menu.open { display: flex; }

/* Card hover */
.card-hover {
  transition: transform 0.22s cubic-bezier(.4,0,.2,1), box-shadow 0.22s;
}
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(14,42,71,0.12), 0 4px 12px rgba(14,42,71,0.07); }

/* Section gold rule */
.section-rule {
  display: block; width: 44px; height: 3px;
  background: #C9A24C; border-radius: 2px; margin-bottom: 16px;
}

/* Testimonial card */
.testimonial-card {
  background: #fff;
  border: 1px solid #D8D0C6;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 2px 12px rgba(14,42,71,0.06), 0 1px 3px rgba(14,42,71,0.04);
}

/* Step ghost number */
.step-number {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 64px; font-weight: 400;
  color: rgba(14,42,71,0.07); line-height: 1;
}

/* Hero bg (homepage) */
.hero-bg {
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(201,162,76,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 60% 80% at 20% 80%, rgba(14,42,71,0.05) 0%, transparent 60%),
    #F8F5F0;
}

/* ── Section-page banner ──
   Each interior page opens with this compact banner instead of the
   full homepage hero: breadcrumb, eyebrow, H1, lead paragraph. */
.page-hero {
  position: relative; overflow: hidden;
  padding: 209px 0 72px; /* 145px nav + 64px */
  background:
    radial-gradient(ellipse 70% 70% at 78% 30%, rgba(201,162,76,0.09) 0%, transparent 68%),
    radial-gradient(ellipse 60% 80% at 12% 90%, rgba(14,42,71,0.06) 0%, transparent 62%),
    #F8F5F0;
}
.page-hero h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.1; letter-spacing: -0.02em;
  color: #0E2A47; margin: 4px 0 18px;
}
.page-hero .lead {
  font-size: 17px; line-height: 1.75; color: #7A7068; max-width: 620px;
}

/* Breadcrumb */
.crumb { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 12px; color: #7A7068; }
.crumb a { color: #7A7068; text-decoration: none; transition: color 0.2s; }
.crumb a:hover { color: #0E2A47; }
.crumb a:focus-visible { outline: 2px solid #C9A24C; border-radius: 2px; }
.crumb span[aria-current] { color: #0E2A47; font-weight: 600; }

/* ── Homepage section teasers ── */
.teaser-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #D8D0C6; border-radius: 16px;
  padding: 30px 28px 26px; text-decoration: none;
  box-shadow: 0 2px 12px rgba(14,42,71,0.05);
  transition: transform 0.22s cubic-bezier(.4,0,.2,1), box-shadow 0.22s, border-color 0.22s;
}
.teaser-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(14,42,71,0.1); border-color: #C9A24C; }
.teaser-card:focus-visible { outline: 3px solid #C9A24C; outline-offset: 3px; }
.teaser-card .teaser-more { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #0E2A47; }
.teaser-card .teaser-more svg { transition: transform 0.22s cubic-bezier(.4,0,.2,1); }
.teaser-card:hover .teaser-more svg { transform: translateX(4px); }

/* ── Prev / next page navigation ── */
.pagenav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pagenav a {
  display: flex; flex-direction: column; gap: 4px;
  background: #fff; border: 1px solid #D8D0C6; border-radius: 12px;
  padding: 18px 22px; text-decoration: none;
  transition: transform 0.2s cubic-bezier(.4,0,.2,1), box-shadow 0.2s, border-color 0.2s;
}
.pagenav a:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(14,42,71,0.09); border-color: #C9A24C; }
.pagenav a:focus-visible { outline: 3px solid #C9A24C; outline-offset: 3px; }
.pagenav .pagenav-label { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #7A7068; }
.pagenav .pagenav-title { font-size: 16px; font-weight: 600; color: #0E2A47; }
.pagenav .next { text-align: right; }
.pagenav .placeholder { visibility: hidden; }

/* Card hover */
.service-card {
  background: #fff; border: 1px solid #D8D0C6; border-radius: 16px; padding: 32px 28px;
  box-shadow: 0 2px 12px rgba(14,42,71,0.05);
  transition: transform 0.22s cubic-bezier(.4,0,.2,1), box-shadow 0.22s, border-color 0.22s;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(14,42,71,0.1); border-color: #C9A24C; }

/* FAQ accordion */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(.4,0,.2,1); }
.faq-item.open .faq-answer { max-height: 1400px; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform 0.25s cubic-bezier(.4,0,.2,1); }
.faq-trigger { cursor: pointer; }
.faq-trigger:focus-visible { outline: 2px solid #C9A24C; border-radius: 4px; }
/* FAQ answer body: readable paragraphs + emphasised key terms */
.faq-body { padding: 0 24px 24px; }
.faq-body p { font-size: 15px; line-height: 1.75; color: #7A7068; margin: 0 0 14px; }
.faq-body p:last-child { margin-bottom: 0; }
.faq-body strong { color: #0E2A47; font-weight: 600; }

/* Fade up animation */
.fade-up {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.55s cubic-bezier(.4,0,.2,1), transform 0.55s cubic-bezier(.4,0,.2,1);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* Hero image slideshow (stacked, cross-fading) */
.hero-slideshow { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.1s ease-in-out;
}
.hero-slide.is-active { opacity: 1; }
.hero-dots {
  position: absolute; bottom: 16px; left: 0; right: 0; z-index: 2;
  display: flex; gap: 7px; justify-content: center;
}
.hero-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: background 0.35s, width 0.35s;
}
.hero-dot.is-active { background: #C9A24C; width: 20px; border-radius: 4px; }

/* Trust badge */
.trust-badge {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px; border-radius: 8px;
  border: 1px solid #D8D0C6; background: #fff;
  box-shadow: 0 1px 4px rgba(14,42,71,0.05);
}

/* ════════ RESPONSIVE ════════ */
/* Global safety: never allow horizontal scroll; images never overflow */
html, body { overflow-x: hidden; max-width: 100%; }
img { max-width: 100%; }

/* Tablet: the hero visual cards are wider than the narrower tablet column,
   so scale the stack down to keep it inside its column (no text overlap). */
@media (min-width: 768px) and (max-width: 1023px) {
  #hero-visual { transform: scale(0.8); transform-origin: center right; }
}

/* Tablet + mobile: scale the oversized nav/logo down so it fits, and
   realign the fixed-nav hero offset to match the shorter bar. */
@media (max-width: 1023px) {
  html { scroll-padding-top: 22px; }
  #nav-bar  { height: 84px !important; }
  #nav-logo { height: 60px !important; }
  .hero-bg  { padding-top: 84px !important; }
  .page-hero { padding-top: 132px; padding-bottom: 56px; } /* 84px nav + 48px */
  #contact.contact-page { padding-top: 132px !important; }
  #menu-btn { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  #mobile-menu a.nav-link { min-height: 44px; display: flex; align-items: center; font-size: 16px; }
}

/* ── Mobile (≤767px) ── */
@media (max-width: 767px) {
  html { scroll-padding-top: 10px; }
  #nav-bar  { height: 72px !important; }
  #nav-logo { height: 50px !important; }
  .hero-bg  { padding-top: 72px !important; }
  .page-hero { padding-top: 112px; padding-bottom: 44px; } /* 72px nav + 40px */
  #contact.contact-page { padding-top: 112px !important; }
  #nav-mobile-cta { padding: 10px 14px !important; font-size: 13px !important; min-height: 44px; }

  /* Hero CTAs: full-width, stacked */
  #hero-cta { flex-direction: column; }
  #hero-cta > a { width: 100%; justify-content: center; }

  /* Body copy stays readable (≥16px) */
  #how-it-works h3 + p,
  #services .service-card p,
  #why-us .order-2 p,
  #about p,
  #lenders p,
  .faq-answer p { font-size: 16px !important; line-height: 1.7 !important; }

  /* Prevent iOS zoom-on-focus and keep form text readable */
  #contact input, #contact select, #contact textarea { font-size: 16px !important; }

  /* Keep the decorative Why-Us badge inside the viewport */
  #why-us-badge { left: 8px !important; bottom: -16px !important; max-width: 180px !important; }

  /* Prev/next stacks so each target keeps a comfortable tap area */
  .pagenav { grid-template-columns: 1fr; }
  .pagenav .next { text-align: left; }
  .pagenav .placeholder { display: none; }

  /* Footer: stack and centre everything */
  #footer-cols { text-align: center; }
  #footer-cols nav { align-items: center; }
  #footer-cols img { margin-left: auto; margin-right: auto; }
  #footer-cols a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  #footer-bottom { justify-content: center !important; text-align: center; }
  #footer-bottom > div { width: 100%; }
  #footer-bottom .flex { justify-content: center; flex-wrap: wrap; }
}