/* ==========================================================================
   HORIZON FINANCE — Premium Financial Services Design System
   Inspiration: deep royal-blue foundations + gold accent + teal depth
   Modern • Premium • Corporate • Layered • Glassmorphic
   ========================================================================== */

:root {
  /* ---- Core brand palette ---- */
  --navy-900: #071224;
  --navy-800: #0a1b35;
  --navy-700: #0f2547;
  --navy-600: #16336b;
  --blue-600: #1a4fd6;
  --blue-500: #2563eb;
  --blue-400: #4f83f5;
  --blue-100: #e8f0ff;
  --blue-050: #f4f8ff;

  --gold-500: #f6b52d;
  --gold-400: #ffca4d;
  --gold-100: #fff4dc;

  --teal-500: #17c3b2;
  --teal-400: #3dd6c6;
  --teal-100: #e0faf6;

  /* ---- Logo-matched tones (sampled directly from client logo l1.png) ----
     Used specifically for icon tiles / accents so imagery reads as one
     family with the real logo, without touching the core site palette. */
  --logo-blue: #065497;
  --logo-blue-light: #e4eef7;
  --logo-gold: #b18a25;
  --logo-gold-light: #f7ecd3;

  --ink-900: #0b1729;
  --ink-600: #4a5a72;
  --ink-400: #8695a9;
  --line: #e4eaf2;
  --line-soft: #eef2f8;
  --surface: #ffffff;
  --surface-2: #f7faff;
  --surface-3: #eef4fc;

  /* ---- Backward-compatible aliases (used by existing HTML) ---- */
  --hf-navy: var(--navy-800);
  --hf-navy-2: var(--navy-600);
  --hf-blue: var(--blue-500);
  --hf-blue-soft: var(--blue-100);
  --hf-yellow: var(--gold-500);
  --hf-yellow-deep: #e09e14;
  --hf-ink: var(--ink-900);
  --hf-muted: var(--ink-600);
  --hf-line: var(--line);
  --hf-bg: var(--surface-2);
  --hf-white: #ffffff;

  /* ---- Typography ---- */
  --font-display: "Instrument Sans", "Inter", system-ui, sans-serif;
  --font-body: "Satoshi", "Inter", system-ui, sans-serif;

  /* ---- Spacing scale (8px base) ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 2.5rem;  --sp-8: 3rem;
  --sp-10: 4rem;    --sp-12: 5rem;   --sp-16: 7rem;

  /* ---- Radius ---- */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-full: 999px;

  /* ---- Shadows (premium, layered) ---- */
  --sh-xs: 0 1px 2px rgba(11, 23, 41, 0.06);
  --sh-sm: 0 2px 6px rgba(11, 23, 41, 0.07);
  --sh-md: 0 6px 18px rgba(11, 23, 41, 0.08);
  --sh-lg: 0 14px 34px rgba(11, 23, 41, 0.10);
  --sh-xl: 0 26px 60px rgba(11, 23, 41, 0.14);
  --sh-blue: 0 16px 40px rgba(37, 99, 235, 0.28);
  --sh-gold: 0 14px 34px rgba(246, 181, 45, 0.32);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.18s var(--ease);
  --t: 0.28s var(--ease);
  --t-slow: 0.5s var(--ease);

  --shadow-card: var(--sh-md);
  --shadow-soft: var(--sh-lg);
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-padding-top: 90px;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-900);
  background: var(--surface);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--navy-800);
}

p { margin-bottom: var(--sp-4); color: var(--ink-600); }
ul li {color: var(--ink-600); }
ul li {
    color: var(--ink-600);
}

ul li::marker {
    color: var(--ink-600);
}

.topbar-info span {
    color: rgba(255, 255, 255, 0.72);
    transition: color var(--t-fast);
}

.topbar-info span:hover {
    color: var(--gold-400);
}


img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-500); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--navy-700); }
ul { list-style: none; }

:focus-visible {
  outline: 3px solid var(--blue-400);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--gold-100); color: var(--navy-800); }

/* ---------- Layout helpers ---------- */
.section { padding: 4rem 0; position: relative; }

.section-head {
  max-width: 660px;
  margin: 0 auto var(--sp-10);
  text-align: center;
}
.section-head.light .section-title,
.section-head.light .section-sub { color: #fff; }

.section-title {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 700;
  margin-bottom: var(--sp-4);
}
.section-sub { font-size: 1.1rem; color: var(--ink-600); line-height: 1.7; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: var(--sp-4);
  padding: 0.4rem 0.9rem;
  background: var(--blue-100);
  border-radius: var(--r-full);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue-500);
}
.eyebrow.yellow, .eyebrow.accent {
  color: var(--hf-yellow-deep);
  background: rgba(246, 181, 45, 0.14);
}
.eyebrow.yellow::before, .eyebrow.accent::before { background: var(--gold-500); }
.section-head.light .eyebrow,
.eyebrow.on-dark {
  color: var(--gold-400);
  background: rgba(255, 255, 255, 0.1);
}
.section-head.light .eyebrow::before,
.eyebrow.on-dark::before { background: var(--gold-400); }

/* Decorative blobs */
.has-blob { position: relative; overflow: hidden; }
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.8rem 1.6rem;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}
.btn-lg { padding: 0.95rem 2rem; font-size: 1rem; }
.btn-sm { padding: 0.6rem 1.2rem; font-size: 0.85rem; }
.btn i { font-size: 1.05em; }

/* Primary / brand blue */
.btn-brand, .btn-primary {
  background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 100%);
  color: #fff;
  box-shadow: var(--sh-sm);
}
.btn-brand:hover, .btn-primary:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: var(--sh-blue);
}
.btn-brand:active, .btn-primary:active { transform: translateY(-1px); }

/* Gold accent */
.btn-yellow, .btn-accent {
  background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
  color: var(--navy-800);
  box-shadow: var(--sh-sm);
}
.btn-yellow:hover, .btn-accent:hover {
  color: var(--navy-900);
  transform: translateY(-3px);
  box-shadow: var(--sh-gold);
}
.btn-yellow:active, .btn-accent:active { transform: translateY(-1px); }

/* Outline (on light) */
.btn-outline-brand, .btn-secondary {
  background: #fff;
  color: var(--blue-600);
  border: 1.5px solid var(--line);
  box-shadow: var(--sh-xs);
}
.btn-outline-brand:hover, .btn-secondary:hover {
  color: var(--blue-600);
  border-color: var(--blue-400);
  background: var(--blue-050);
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}

/* Ghost (on dark) */
.btn-ghost-light, .btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
}
.btn-ghost-light:hover, .btn-ghost:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-3px);
}

/* ==========================================================================
   Utility Top Bar
   ========================================================================== */
.topbar {
  position: relative;
  z-index: 1031;
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.83rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 46px;
}
.topbar-info {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-5);
  list-style: none; padding: 0; margin: 0;
}
.topbar-info li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.topbar-info i { color: var(--gold-400); font-size: 0.95rem; }
.topbar-info a { color: rgba(255, 255, 255, 0.72); transition: color var(--t-fast); }
.topbar-info a:hover { color: var(--gold-400); }
.topbar-info strong { color: #fff; font-weight: 600; }

.topbar-social { display: flex; align-items: center; gap: var(--sp-1); }
.topbar-social a {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.92rem;
  transition: background var(--t-fast), color var(--t-fast);
}
.topbar-social a:hover { background: var(--blue-500); color: #fff; }

@media (max-width: 991.98px) {
  .topbar-info li.tb-hide-md { display: none; }
}
@media (max-width: 767.98px) {
  .topbar-inner { justify-content: center; }
  .topbar-info { justify-content: center; gap: var(--sp-4); }
  .topbar-social { display: none; }
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--t), box-shadow var(--t), border-color var(--t);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--line);
  box-shadow: var(--sh-sm);
}
.navbar { padding: var(--sp-3) 0; }

.navbar-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--navy-700) 0%, var(--blue-500) 100%);
  color: var(--gold-400);
  font-size: 1.25rem;
  flex-shrink: 0;
  box-shadow: var(--sh-sm), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.brand-text { color: var(--navy-800); }
.brand-accent { color: var(--blue-500); }

.nav-link {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-600);
  padding: var(--sp-2) var(--sp-4) !important;
  position: relative;
  transition: color var(--t-fast);
}
.nav-link:hover, .nav-link.active { color: var(--blue-600); }
.nav-link.active::after {
  content: "";
  position: absolute;
  left: var(--sp-4); right: var(--sp-4);
  bottom: 2px; height: 3px;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-500));
  border-radius: 3px;
}

.dropdown-menu {
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--sh-lg);
  border-radius: var(--r-lg);
  padding: var(--sp-2);
  margin-top: var(--sp-3);
  min-width: 240px;
}

/* ---- Services mega menu (3x3 grid, desktop only) ---- */
@media (min-width: 992px) {
  .mega-menu {
    display: block;
    left: -100%;
    transform: translateX(-50%);
    min-width: 660px;
    padding: var(--sp-5);
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--t-fast), visibility var(--t-fast);
  }
  /* bridge the visual gap between the nav link and the panel so hover doesn't
     drop out while the cursor crosses it */
  .nav-item.dropdown { padding-bottom: var(--sp-4); margin-bottom: calc(-1 * var(--sp-4)); }
  .nav-item.dropdown:hover .mega-menu,
  .mega-menu:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
  }
  .mega-menu-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--navy-800);
    transition: background var(--t-fast);
  }
  .mega-menu-item:hover { background: var(--blue-050); color: var(--navy-800); }
  .mega-menu-icon {
    display: grid; place-items: center; flex-shrink: 0;
    width: 52px; height: 52px; border-radius: var(--r-md);
    background: linear-gradient(140deg, var(--blue-100), var(--teal-100));
    color: var(--blue-600); font-size: 1.2rem;
  }
  .mega-menu-icon img { width: 60%; height: 60%; object-fit: contain; }
  .mega-menu-label { font-weight: 600; font-size: 0.92rem; line-height: 1.25; }
}

.dropdown-item {
  border-radius: var(--r-sm);
  padding: 0.6rem 0.9rem;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--ink-600);
  transition: background var(--t-fast), color var(--t-fast), padding-left var(--t-fast);
}
.dropdown-item:hover {
  background: var(--blue-050);
  color: var(--blue-600);
  padding-left: 1.15rem;
}
.dropdown-divider { border-color: var(--line-soft); }

.navbar-toggler {
  border: none; padding: 0;
  font-size: 1.6rem; color: var(--navy-800);
}
.navbar-toggler:focus { box-shadow: none; }

.mobile-nav { background: #fff; max-width: 100%; }
.mobile-nav .nav-link { font-size: 1.05rem; padding: 0.65rem 0 !important; }
.mobile-sub {
  padding: var(--sp-2) 0 var(--sp-2) 1.1rem;
  border-left: 2px solid var(--blue-100);
  margin-left: var(--sp-2);
}
.mobile-sub a {
  display: block;
  padding: 0.45rem 0;
  color: var(--ink-600);
  font-weight: 600;
  font-size: 0.92rem;
  transition: color var(--t-fast);
}
.mobile-sub a:hover { color: var(--blue-600); }

/* ==========================================================================
   SECTION 1 — Hero Banner (high-end redesign)
   ========================================================================== */
.hero-banner {
  position: relative;
  padding: 128px 0 90px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(1200px 700px at 78% -10%, #123063 0%, transparent 55%),
    linear-gradient(150deg, var(--navy-900) 0%, var(--navy-800) 45%, var(--navy-700) 100%);
  color: #fff;
}
.hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(900px 500px at 75% 20%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(900px 500px at 75% 20%, #000 0%, transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}
.hero-banner .blob-a {
  width: 460px; height: 460px;
  top: -120px; right: -60px;
  background: radial-gradient(circle, var(--blue-500), transparent 65%);
  opacity: 0.45;
}
.hero-banner .blob-b {
  width: 380px; height: 380px;
  bottom: -120px; left: -80px;
  background: radial-gradient(circle, var(--teal-500), transparent 65%);
  opacity: 0.28;
}

.hero-rings {
  position: absolute;
  top: -140px; right: -120px;
  width: 560px; height: 560px;
  z-index: 0; pointer-events: none;
}
.hero-rings span {
  position: absolute; inset: 0; margin: auto;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-rings span:nth-child(1) { width: 100%; height: 100%; }
.hero-rings span:nth-child(2) { width: 66%; height: 66%; border-color: rgba(246,181,45,0.22); }
.hero-rings span:nth-child(3) {
  width: 34%; height: 34%; border: none;
  background: radial-gradient(circle, rgba(246,181,45,0.35), transparent 70%);
}

.hero-grid {
  position: relative;
  z-index: 2;
  padding-bottom: var(--sp-12);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--sp-10);
}
.hero-copy { max-width: 560px; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--sp-5);
  padding: 0.45rem 1rem;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
}
.hero-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-400);
  box-shadow: 0 0 0 5px rgba(246,181,45,0.18);
  animation: pulse-dot 2.4s var(--ease) infinite;
}
@keyframes pulse-dot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: 0.8; } }

.hero-title {
  font-size: clamp(2.5rem, 5vw, 3.9rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: var(--sp-5);
}
.rotator-wrap { display: block; width: 100%; }
.rotator {
  position: relative;
  display: block;
  width: 100%;
  min-height: 1.5em;
  font-style: italic;
  color: var(--gold-400);
  /* FIX: was a hard-coded 50px, which ignored the viewport and forced the
     rotator text to wrap onto 2-3 lines on tablet/mobile. Since each
     .rotator-item is position:absolute, the wrapped lines didn't grow the
     container height and instead overlapped .hero-lead below it. Scaling
     this with the same clamp() approach as .hero-title fixes the overlap. */
  font-size: clamp(1.75rem, 4.5vw, 3.1rem);
}
.rotator-item {
  position: absolute; left: 0; top: 0; right: 0;
  white-space: normal;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.rotator-item.is-active { position: relative; opacity: 1; transform: translateY(0); }

.hero-lead {
  font-size: 1.14rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
  margin-bottom: var(--sp-6);
}

.loan-chips {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
}
.loan-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  backdrop-filter: blur(6px);
  transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.loan-chip i { color: var(--blue-600); transition: color var(--t-fast); }
.loan-chip img {
  width: 24px; height: 24px; object-fit: contain; flex-shrink: 0;
  transition: filter var(--t-fast);
}
.loan-chip:hover img { filter: brightness(0); }
.loan-chip:hover {
  border-color: var(--gold-400);
  background: var(--gold-400);
  color: var(--navy-800);
  transform: translateY(-2px);
}
.loan-chip:hover i { color: var(--navy-800); }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }

/* Right visual — diagonal-cut banner image (FinBest-style) */
.hero-media {
  position: absolute;
  top: 0; right: 0;
  width: 50%;
  height: 100%;
  z-index: 1;
}
.hero-media-inner {
  position: absolute;
  inset: 0 -14% 0 0;               /* bleed off the right edge */
  overflow: hidden;
  transform: skewX(-10deg);
  transform-origin: top left;
  box-shadow: -30px 0 70px rgba(7, 18, 36, 0.55);
}
.hero-media-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: skewX(10deg) scale(1.4);   /* counter-skew keeps photo upright */
  transform-origin: top left;
}
.hero-media-inner::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,27,53,0.9) 0%, rgba(10,27,53,0.25) 26%, transparent 52%);
}
/* teal + blue diagonal accent slashes at the seam */
.hero-slash {
  position: absolute;
  top: -6%; height: 112%;
  transform: skewX(-10deg);
  transform-origin: top left;
  z-index: 2;
  border-radius: 4px;
}
.hero-slash-1 { left: -10px; width: 26px; background: var(--teal-500); box-shadow: 0 0 30px rgba(23,195,178,0.5); }
.hero-slash-2 { left: 34px;  width: 12px; background: var(--blue-400); opacity: 0.9; }

.hero-glass {
  position: absolute;
  z-index: 4;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-lg);
  color: #fff;
  box-shadow: var(--sh-lg);
  animation: floaty 6s var(--ease) infinite;
}
.hero-media .hero-glass-top { top: 44px; left: 10%; padding: 0.9rem 1.15rem; }
.hero-glass-top .stars { color: var(--gold-400); font-size: 0.82rem; letter-spacing: 3px; margin-bottom: 0.25rem; }
.hero-glass-top p { margin: 0; font-size: 0.82rem; font-weight: 600; color: #fff; }
.hero-media .hero-glass-bottom {
  bottom: 108px; right: 8%;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0.95rem 1.2rem;
  animation-delay: 3s;
}
.hero-glass-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.1rem; color: var(--gold-400); line-height: 1;
}
.hero-glass-num sup { font-size: 1rem; }
.hero-glass-bottom strong { display: block; font-size: 0.9rem; color: #fff; }
.hero-glass-bottom small { color: rgba(255, 255, 255, 0.72); font-size: 0.78rem; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* Circular stat badge — bold navy medallion over the photo seam */
.hero-stat-badge {
  position: absolute;
  z-index: 5;
  bottom: 96px;
  left: 6%;
  width: 148px; height: 148px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(circle at 32% 28%, var(--blue-600) 0%, var(--navy-800) 72%);
  border: 4px solid var(--navy-900);
  box-shadow: var(--sh-xl), 0 0 0 6px rgba(246, 181, 45, 0.14);
  color: #fff;
  animation: floaty 6s var(--ease) infinite;
  animation-delay: 1.2s;
}
.hero-stat-badge-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.3rem;
  line-height: 1;
  color: var(--gold-400);
}
.hero-stat-badge-num sup { font-size: 1.1rem; top: -0.6em; }
.hero-stat-badge-label {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

/* Sparkle accents near the diagonal seam */
.hero-sparkle {
  position: absolute;
  z-index: 3;
  color: var(--teal-400);
  font-size: 1.6rem;
  filter: drop-shadow(0 4px 10px rgba(23, 195, 178, 0.4));
  animation: sparkle-twinkle 3.2s ease-in-out infinite;
}
.hero-sparkle-1 { top: 12%; left: 16%; font-size: 2rem; }
.hero-sparkle-2 { top: 24%; left: 24%; font-size: 1.15rem; animation-delay: 1.1s; }
@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0.55; transform: scale(0.9) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.12) rotate(8deg); }
}

/* ==========================================================================
   HERO — LIGHT VARIANT (reference-style collage)
   ========================================================================== */
.hero-banner.hero-light {
  background:
    radial-gradient(760px 560px at 26% 42%, rgba(23, 195, 178, 0.16) 0%, rgba(37, 99, 235, 0.07) 45%, transparent 72%),
    linear-gradient(180deg, #fbfdff 0%, var(--surface-2) 100%);
  color: var(--ink-900);
  padding: 50px 0 90px;
}
.hero-banner.hero-light::before { display: none; }   /* no dark grid overlay */

.hero-glow,
.deco-glow {
  position: absolute;
  top: 6%; left: -6%;
  width: 640px; height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61, 214, 198, 0.2) 0%, rgba(79, 131, 245, 0.1) 45%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  z-index: -1;
}

/* ---- Reusable decorative glow modifiers (position / size / color) ---- */
.deco-glow--tr { top: -10%; left: auto; right: -8%; }
.deco-glow--br { top: auto; bottom: -12%; left: auto; right: -6%; }
.deco-glow--bl { top: auto; bottom: -14%; left: -8%; }
.deco-glow--center { top: 50%; left: 50%; transform: translate(-50%, -50%); }

.deco-glow--sm { width: 340px; height: 340px; }
.deco-glow--md { width: 460px; height: 460px; }

.deco-glow--gold {
  background: radial-gradient(circle, rgba(246, 181, 45, 0.24) 0%, rgba(255, 202, 77, 0.1) 45%, transparent 70%);
}
.deco-glow--blue {
  background: radial-gradient(circle, rgba(37, 99, 235, 0.2) 0%, rgba(79, 131, 245, 0.09) 45%, transparent 70%);
}
.deco-glow--teal {
  background: radial-gradient(circle, rgba(23, 195, 178, 0.22) 0%, rgba(61, 214, 198, 0.1) 45%, transparent 70%);
}

/* Reusable dotted-pattern texture (mirrors the hero collage dots) */
.deco-dots {
  position: absolute;
  width: 200px; height: 140px;
  background-image: radial-gradient(var(--blue-400) 1.6px, transparent 1.6px);
  background-size: 16px 16px;
  opacity: 0.35;
  z-index: -1;
  pointer-events: none;
}
.deco-dots--tr { top: 8%; right: 4%; left: auto; }
.deco-dots--br { bottom: 6%; right: 6%; }
.deco-dots--bl { bottom: 6%; left: 4%; }
.deco-dots--tl { top: 8%; left: 4%; }

/* Sections that host decorative glows/dots need a positioning context.
   No overflow:hidden here — some sections (e.g. .why) have children that
   intentionally overflow the section box (like .stat-card), and the glow's
   soft blur is subtle enough that a little bleed past the edge is fine. */
.section.has-deco { position: relative; }

/* grid becomes a real 2-col layout again */
.hero-light .hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--sp-10);
  padding-bottom: 48px;
}

/* copy recolored for light bg */
.hero-light .hero-eyebrow {
  color: var(--blue-600);
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.16);
  backdrop-filter: none;
}
.hero-light .hero-title { color: var(--navy-800); }
.hero-light .rotator {
  background: linear-gradient(100deg, var(--blue-600), var(--teal-500));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--blue-600);
}
.hero-light .hero-lead { color: var(--ink-600); }

.hero-light .loan-chip {
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink-600);
  backdrop-filter: none;
  box-shadow: var(--sh-xs);
}
.hero-light .loan-chip i { color: var(--blue-500); }
.hero-light .loan-chip:hover {
  border-color: var(--blue-400);
  background: var(--blue-050);
  color: var(--blue-600);
}
.hero-light .loan-chip:hover i { color: var(--blue-600); }

/* Need help? phone link beside CTA */
.hero-help {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--navy-800);
}
.hero-help-icon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--teal-400);
  color: var(--teal-500);
  font-size: 1.3rem;
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.hero-help:hover .hero-help-icon { background: var(--teal-500); color: #fff; transform: scale(1.06); }
.hero-help small { display: block; color: var(--ink-600); font-size: 0.8rem; line-height: 1.2; }
.hero-help strong { display: block; font-family: var(--font-display); font-size: 1.02rem; color: var(--navy-800); }

/* Dark-bg version of "Need help?" — scoped so the light hero (about/services/
   contact pages, or the hidden fallback homepage hero) is untouched. */
.hero-banner:not(.hero-light) .hero-help-icon { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); color: #fff; }
.hero-banner:not(.hero-light) .hero-help:hover .hero-help-icon { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }
.hero-banner:not(.hero-light) .hero-help small { color: rgba(255,255,255,0.65); }
.hero-banner:not(.hero-light) .hero-help strong { color: #fff; }

/* Vertical accent bar beside the hero title (blue → teal), echoing the
   reference site's headline treatment. Dark hero only. */
.hero-banner:not(.hero-light) .hero-title { position: relative; padding-left: 1.1rem; }
.hero-banner:not(.hero-light) .hero-title::before {
  content: "";
  position: absolute; left: 0; top: 0.1em; bottom: 0.1em;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--blue-500) 0%, var(--teal-500) 100%);
  /* FIX: removed the old fixed `height: 114px;` that was here — an
     explicit height wins over top/bottom offsets, so the bar was pinned
     to a desktop-sized 114px and stopped partway down the headline
     whenever the (now-responsive) rotator text wrapped onto more lines
     on tablet/mobile. Letting top/bottom alone control it means the bar
     always stretches to match the title's real, current height. */
}

/* ---- Photo collage ---- */
.hero-collage {
  position: relative;
  min-height: 560px;
  z-index: 1;
}

/* back image — arch top, sits upper-left */
.hero-collage-back {
  position: absolute;
  top: 0; left: 0;
  width: 58%;
  aspect-ratio: 7 / 8;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 50% var(--r-lg) / var(--r-lg) var(--r-lg) 42% var(--r-lg);
  box-shadow: var(--sh-lg);
}
.hero-collage-back img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.88) brightness(1.02) contrast(1.02); }

/* front image — tall portrait, lower-right, overlaps back */
.hero-collage-front {
  position: absolute;
  right: 0; bottom: 0;
  width: 52%;
  aspect-ratio: 31 / 43;
  margin: 0;
  overflow: hidden;
  border-radius: 50% 50% var(--r-lg) var(--r-lg) / 34% 34% var(--r-lg) var(--r-lg);
  box-shadow: var(--sh-xl);
  border: 6px solid #fff;
}
.hero-collage-front img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.88) brightness(1.02) contrast(1.02); }

/* ==========================================================================
   HERO FLOW LINES — full-width background layer for the ENTIRE hero-banner
   (not just the chips column). Sits as a direct sibling of .blob-a/.blob-b/
   .hero-rings inside .hero-banner (which is already `position: relative`),
   so `inset: 0` makes it cover the full section edge-to-edge, left to
   right, at every screen size — no breakout hacks needed. It paints above
   the ::before grid pattern and blobs (same z-index, later in source) but
   behind the actual hero content (.hero-grid is z-index: 2).
   ========================================================================== */
.hero-flow-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}
.hero-flow-lines svg { width: 100%; height: 100%; display: block; }

/* ==========================================================================
   HERO COLLAGE → LOAN CHIPS SHOWCASE (replaces the old photo collage on the
   live/dark hero). The .hero-collage-back / .hero-collage-front / dots /
   sparkle rules above are kept as-is since they still style the hidden
   #hero-old fallback section — this block only targets the new variant.

   NOTE: selectors below are the compound `.hero-collage.hero-collage--chips`
   (two classes) rather than just `.hero-collage--chips`. That gives them
   higher specificity than the generic `.hero-collage { height: 440px }` /
   `{ height: 340px }` rules in the "Responsive" section further down the
   file, so this block's own responsive rules always win regardless of
   source order — that mismatch was why mobile looked unstyled before.
   ========================================================================== */
.hero-collage.hero-collage--chips {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  padding: 8px 8px;
}

.hero-collage.hero-collage--chips .loan-chips {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: center;
  align-content: center;
  max-width: 480px;   /* was 420px — a bit roomier per client request */
  margin: 0;
}
.hero-collage.hero-collage--chips .loan-chip {
  padding: 0.95rem 1.4rem;  
}

/* ---- Tablet ---- */
@media (max-width: 991.98px) {
  .hero-collage.hero-collage--chips {
    height: auto;
    min-height: 320px;
    max-width: 100%;
  }
  .hero-collage.hero-collage--chips .loan-chips { max-width: 620px; }
}

/* ---- Mobile ---- */
@media (max-width: 767.98px) {
  .hero-collage.hero-collage--chips {
    height: auto;
    min-height: 260px;
    padding: var(--sp-8) var(--sp-4);
  }
  .hero-collage.hero-collage--chips .loan-chips {
    max-width: 100%;
    gap: var(--sp-3);
  }
  .hero-collage.hero-collage--chips .loan-chip {
    padding: 0.7rem 1.1rem;
    font-size: 0.88rem;
  }
}

/* ---- Small mobile ---- */
@media (max-width: 575.98px) {
  .hero-collage.hero-collage--chips { min-height: 220px; }
  .hero-collage.hero-collage--chips .loan-chips { gap: var(--sp-2); }
  .hero-collage.hero-collage--chips .loan-chip { 
    font-size: 0.82rem; 
    padding: 0.6rem 1rem;
    width: 100%;
    justify-content: center;
      
  }
}

/* dotted pattern behind the seam */
.hero-dots {
  position: absolute;
  left: 6%; bottom: 4%;
  width: 220px; height: 150px;
  background-image: radial-gradient(var(--blue-400) 1.6px, transparent 1.6px);
  background-size: 16px 16px;
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
}

/* badge sits at the overlap of the two photos */
.hero-collage .hero-stat-badge {
  bottom: 22%;
  left: 42%;
  transform: translateX(-50%);
}

/* sparkles — teal outline stars around the front image */
.hero-light .hero-sparkle { color: var(--teal-500); filter: drop-shadow(0 3px 8px rgba(23,195,178,0.35)); }
.hero-light .hero-sparkle-1 { top: -4%; right: 18%; left: auto; font-size: 2.2rem; }
.hero-light .hero-sparkle-2 { top: 8%; right: 6%; left: auto; font-size: 1.3rem; animation-delay: 1.1s; }
.hero-light .hero-sparkle-3 { top: 20%; right: 26%; left: auto; font-size: 1rem; animation-delay: 2s; }

/* feature bar works on light — soften shadow slightly */
.hero-light .hero-feature-bar {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-lg);
}

/* Feature bar overlapping hero base */
.hero-feature-bar-wrap { position: relative; z-index: 4; }
.hero-feature-bar {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-6);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  transform: translateY(50%);
}
.hero-feature-bar li {
  display: flex; align-items: center; gap: var(--sp-3);
  font-weight: 600; font-size: 0.95rem; color: var(--navy-800);
}
.hero-feature-bar li i {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--blue-100), var(--teal-100));
  color: var(--blue-600);
  font-size: 1.15rem; flex-shrink: 0;
}

/* ==========================================================================
   SECTION 2 — Why Choose
   ========================================================================== */
.why { background: linear-gradient(180deg, #fff 0%, var(--surface-2) 100%); }
.why p { font-size: 1.05rem; line-height: 1.8; }

.check-list { list-style: none; padding: 0; margin: var(--sp-5) 0; }
.check-list li {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0.35rem 0; font-weight: 500;
}
.check-list li i { color: var(--teal-500); font-size: 1.15rem; }
.check-list.light li { color: rgba(255,255,255,0.92); }
.check-list.light li i { color: var(--gold-400); }

.why-media { position: relative; }
.shadow-img {
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  width: 100%; object-fit: cover;
  position: relative; z-index: 1;
  filter: saturate(0.88) brightness(1.02) contrast(1.02);
  height:380px;
}
.why-media::before {
  content: "";
  position: absolute;
  inset: auto -18px -18px auto;
  width: 62%; height: 62%;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--blue-100), var(--teal-100));
  z-index: 0;
}

.stat-card {
  position: absolute;
  left: 50%; bottom: -44px;
  transform: translateX(-50%);
  display: grid;
  gap: var(--sp-7);
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  padding: var(--sp-6) var(--sp-7);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold-500);
  z-index: 2;
  /* FIX: `width` added and `white-space: nowrap` removed (see below). Since
     .stat-card is position:absolute, it was sizing itself to its content's
     natural width with no ceiling — fine for a short number like "500+",
     but once the field held a full sentence, nowrap kept it on one line
     and the card grew wider than the viewport instead of wrapping,
     running the text off-screen on tablet/mobile. Capping width here lets
     the text wrap inside a fixed box at any screen size. */
  width: min(90%, 420px);
}
.stat { text-align: center; }
.stat-num {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  color: var(--blue-600);
  margin-bottom: var(--sp-1);
  /* FIX: was a fixed `font-size: 2rem; line-height: 1;` — sized for a
     short number/word, not a full sentence. clamp() scales it down on
     narrow screens, and line-height 1.2 gives wrapped lines breathing
     room (1 caused wrapped lines to nearly touch). */
  font-size: clamp(1.15rem, 1rem + 1.6vw, 2rem);
  line-height: 1.2;
}
.stat-label { font-size: 0.78rem; color: var(--ink-600); font-weight: 600; line-height: 1.45; }

/* ==========================================================================
   SECTION 3 — Process (dark, layered)
   ========================================================================== */
.process {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(900px 500px at 100% 0%, #133264 0%, transparent 55%),
    linear-gradient(150deg, var(--navy-900) 0%, var(--navy-700) 100%);
}
.process::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(700px 400px at 80% 10%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(700px 400px at 80% 10%, #000, transparent 75%);
  opacity: 0.6; pointer-events: none;
}
.process-track { position: relative; z-index: 1; }
@media (min-width: 1200px) {
  .process-track::before {
    content: "";
    position: absolute; top: 92px; left: 8%; right: 8%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(246,181,45,0.4) 15%, rgba(246,181,45,0.4) 85%, transparent);
    z-index: 0;
  }
}

.step-card {
  position: relative; z-index: 1; height: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-lg);
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  backdrop-filter: blur(8px);
  transition: transform var(--t), background var(--t), border-color var(--t), box-shadow var(--t);
}
.step-card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(246, 181, 45, 0.4);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.3);
}
.step-num {
  position: absolute; top: -18px; left: var(--sp-6);
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  color: var(--navy-900);
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  border-radius: var(--r-full);
  padding: 0.35rem 0.9rem;
  box-shadow: var(--sh-gold);
}
.step-icon {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.1);
  color: var(--gold-400);
  font-size: 1.4rem;
  margin-bottom: var(--sp-4);
  transition: background var(--t), color var(--t);
}
.step-card:hover .step-icon { background: var(--gold-400); color: var(--navy-900); }
.step-card h3 { color: #fff; font-size: 1.15rem; margin-bottom: var(--sp-3); }
.step-card p { color: rgba(255, 255, 255, 0.75); margin: 0; font-size: 0.95rem; }

/* ==========================================================================
   SECTION 4 — Awards
   ========================================================================== */
.awards { background: var(--surface-2); }
.award-panel {
  position: relative;
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(23,195,178,0.1), transparent 60%),
    linear-gradient(135deg, #fff 0%, var(--blue-050) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-7);
  box-shadow: var(--sh-md);
  overflow: hidden;
}
.award-image-frame { position: relative; max-width: 340px; }
.award-image { width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh-lg); filter: saturate(0.88) brightness(1.02) contrast(1.02); }
.award-image-ribbon {
  position: absolute; top: -14px; right: -14px;
  display: grid; place-items: center;
  width: 58px; height: 58px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color: #fff; font-size: 1.4rem;
  box-shadow: var(--sh-gold);
}
.award-title { font-size: 1.55rem; margin-bottom: var(--sp-3); }
.award-membership {
  display: flex; align-items: center; gap: var(--sp-4);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal-500);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-5) 0;
  box-shadow: var(--sh-xs);
}
.award-membership-badge {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--r-full);
  background: linear-gradient(140deg, var(--teal-100), var(--blue-100));
  color: var(--teal-500);
  font-size: 1.2rem; flex-shrink: 0;
}
.award-membership strong { display: block; color: var(--navy-800); margin-bottom: 2px; }
.award-membership span { display: block; color: var(--ink-600); font-size: 0.9rem; }

/* ==========================================================================
   SECTION 5 — Get Started / CTA
   ========================================================================== */
.get-started { background: linear-gradient(180deg, var(--surface-2) 0%, #fff 100%); }
.cta-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(600px 400px at 100% 0%, rgba(23,195,178,0.22), transparent 55%),
    radial-gradient(500px 300px at 0% 100%, rgba(246,181,45,0.18), transparent 55%),
    linear-gradient(140deg, var(--navy-800) 0%, var(--blue-600) 130%);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  box-shadow: var(--sh-xl);
}
.cta-panel::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(500px 300px at 20% 30%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(500px 300px at 20% 30%, #000, transparent 70%);
  opacity: 0.5; pointer-events: none;
}
.cta-title { color: #fff; font-size: clamp(1.9rem, 3vw, 2.5rem); margin-bottom: var(--sp-4); position: relative; z-index: 1; }
.cta-text { color: rgba(255, 255, 255, 0.88); max-width: 480px; position: relative; z-index: 1; }

.cta-form, .card-glass {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--sh-lg);
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.form-title { font-size: 1.2rem; font-weight: 700; margin-bottom: var(--sp-4); }
.form-label { font-weight: 600; font-size: 0.88rem; color: var(--navy-800); display: block; margin-bottom: var(--sp-2); }
.form-control, .form-select {
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-family: var(--font-body);
  background: var(--surface-2);
  color: var(--ink-900);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.form-control:focus, .form-select:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
  background: #fff;
  outline: none;
}
.form-control::placeholder { color: var(--ink-400); }
.form-status { font-size: 0.9rem; font-weight: 600; text-align: center; color: var(--teal-500); margin-top: var(--sp-3); }
.form-status.error { color: #dc2626; }

/* ==========================================================================
   Footer (premium, multi-column)
   ========================================================================== */
.site-footer {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(700px 400px at 90% 0%, #10264d 0%, transparent 55%),
    linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: rgba(255, 255, 255, 0.82);
  padding-top: var(--sp-12);
}
.site-footer::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue-500), var(--teal-500), var(--gold-500));
}

/* Newsletter band */
.footer-newsletter {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-7);
  margin-bottom: var(--sp-8);
  backdrop-filter: blur(8px);
}
.footer-newsletter h3 { color: #fff; font-size: 1.35rem; margin-bottom: var(--sp-2); }
.footer-newsletter p { color: rgba(255, 255, 255, 0.72); margin: 0; font-size: 0.95rem; }
.newsletter-form {
  display: flex; gap: var(--sp-3);
  width: 100%;
}
.newsletter-form input {
  flex: 1 1 auto;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--r-full);
  padding: 0.8rem 1.3rem;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.newsletter-form input::placeholder { color: rgba(255, 255, 255, 0.5); }
.newsletter-form input:focus {
  outline: none;
  border-color: var(--gold-400);
  background: rgba(255, 255, 255, 0.1);
}

.footer-top { padding-bottom: var(--sp-7); }
.footer-brand { text-decoration: none; }
.footer-brand .brand-text { color: #fff; }
.footer-brand .brand-accent { color: var(--gold-400); }
.footer-tag { margin-top: var(--sp-4); font-size: 0.95rem; max-width: 320px; line-height: 1.7; color: rgba(255, 255, 255, 0.7); }

.footer-social { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.footer-social a {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff; font-size: 1.1rem;
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.footer-social a:hover { background: var(--gold-400); color: var(--navy-900); transform: translateY(-3px); }

.footer-head {
  color: #fff; font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.footer-links { padding: 0; margin: 0; }
.footer-links li { padding: 0.32rem 0; }
.footer-links a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  transition: color var(--t-fast), padding-left var(--t-fast);
  display: inline-flex; align-items: center;
}
.footer-links a:hover { color: var(--gold-400); padding-left: 4px; }
.footer-links.contact li { display: flex; align-items: flex-start; gap: var(--sp-3); padding: 0.45rem 0; }
.footer-links.contact i { color: var(--gold-400); font-size: 1.05rem; margin-top: 3px; }

.footer-bottom {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6) 0;
  margin-top: var(--sp-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85rem; color: rgba(255, 255, 255, 0.58);
}
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--sp-5); padding: 0; margin: 0; }
.footer-legal a { color: rgba(255, 255, 255, 0.58); transition: color var(--t-fast); }
.footer-legal a:hover { color: var(--gold-400); }

/* ==========================================================================
   Back to top
   ========================================================================== */
.back-to-top {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5);
  z-index: 1040;
  width: 48px; height: 48px;
  border-radius: 50%; border: none;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color: var(--navy-900); font-size: 1.2rem;
  box-shadow: var(--sh-lg); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--t), visibility var(--t), transform var(--t), box-shadow var(--t);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { transform: translateY(-4px); box-shadow: var(--sh-gold); }
.back-to-top:active { transform: scale(0.94); }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
[data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Interior page banner
   ========================================================================== */
.page-hero {
  position: relative;
  padding: 140px 0 84px;
  color: #fff;
  overflow: hidden; isolation: isolate;
  background:
    radial-gradient(900px 500px at 82% -10%, #133264 0%, transparent 55%),
    linear-gradient(150deg, var(--navy-900) 0%, var(--navy-700) 100%);
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(700px 400px at 78% 30%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(700px 400px at 78% 30%, #000, transparent 72%);
  opacity: 0.5; pointer-events: none;
}
.page-hero .hero-rings { top: -200px; right: -150px; width: 560px; height: 560px; }
.page-hero .blob-a {
  width: 380px; height: 380px; bottom: -140px; left: -80px;
  background: radial-gradient(circle, var(--teal-500), transparent 65%);
  opacity: 0.25;
}

.breadcrumb-trail {
  position: relative; z-index: 2;
  list-style: none; display: flex; align-items: center;
  gap: var(--sp-2); padding: 0; margin: 0 0 var(--sp-4);
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
}
.breadcrumb-trail a { color: rgba(255, 255, 255, 0.85); text-decoration: none; transition: color var(--t-fast); }
.breadcrumb-trail a:hover { color: var(--gold-400); }
.breadcrumb-trail .sep { opacity: 0.4; }
.breadcrumb-trail .current { color: var(--gold-400); font-weight: 700; }

.page-hero-title {
  position: relative; z-index: 2;
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  font-weight: 700; line-height: 1.14; letter-spacing: -0.025em;
  color: #fff; max-width: 740px; margin-bottom: var(--sp-4);
}
.page-hero-lead {
  position: relative; z-index: 2;
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.8);
  max-width: 620px; font-size: 1.08rem; line-height: 1.75; margin: 0;
}

/* Interior hero — full-bleed background photo (keeps gradients/glows on top) */
.page-hero.has-media .container { position: relative; z-index: 2; }
.page-hero.has-media .page-hero-title,
.page-hero.has-media .page-hero-lead { max-width: 600px; }

.page-hero-bgimg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.page-hero-bgimg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  /*filter: saturate(0.82) brightness(0.98) contrast(1.03);*/
}
/* legibility scrim: fades from the page's light background on the left,
   where the copy sits, into the photo on the right — the existing glow
   (.page-hero::before) and rings/blobs render above this, untouched */
.page-hero-bgimg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, #fdfdfddb 0%, rgba(251, 253, 255, 0.95) 20%, rgb(247 250 255 / 59%) 40%, rgba(232, 240, 255, 0.32) 60%, rgb(37 99 235 / 5%) 100%);
}

/* ==========================================================================
   About page
   ========================================================================== */
.about-pillars .pillar-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  position: relative;
  overflow: hidden;
}
.about-pillars .pillar-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--blue-500), var(--teal-500));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t);
}
.about-pillars .pillar-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: transparent; }
.about-pillars .pillar-card:hover::before { transform: scaleX(1); }
.pillar-icon {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--blue-100), var(--teal-100));
  color: var(--blue-600);
  font-size: 1.4rem; margin-bottom: var(--sp-4);
  transition: transform var(--t);
}
.about-pillars .pillar-card:hover .pillar-icon { transform: scale(1.08) rotate(-4deg); }
.pillar-card h3 { font-size: 1.1rem; margin-bottom: var(--sp-2); }
.pillar-card p { color: var(--ink-600); font-size: 0.95rem; line-height: 1.7; margin: 0; }

.kane-card {
  background: linear-gradient(135deg, #fff 0%, var(--blue-050) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-7);
  box-shadow: var(--sh-sm);
}
.kane-photo {
  width: 100%; max-width: 280px;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  aspect-ratio: 4/5; object-fit: cover;
  margin-bottom: var(--sp-4);
  filter: saturate(0.88) brightness(1.02) contrast(1.02);
}
.kane-name { font-size: 1.5rem; margin-bottom: var(--sp-1); }
.kane-role {
  display: inline-block; color: var(--blue-600); font-weight: 700;
  font-size: 0.9rem; margin-bottom: var(--sp-4);
}
.kane-bio p { color: var(--ink-600); line-height: 1.8; }

.about-contact-panel {
  position: relative; overflow: hidden;
  background:
    radial-gradient(500px 300px at 100% 0%, rgba(23,195,178,0.2), transparent 55%),
    linear-gradient(135deg, var(--navy-800) 0%, var(--blue-600) 130%);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  color: #fff;
  box-shadow: var(--sh-lg);
}
.about-contact-panel h2 { color: #fff; }
.about-contact-list { list-style: none; padding: 0; margin: var(--sp-5) 0; }
.about-contact-list li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; font-weight: 600; }
.about-contact-list i {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.12);
  color: var(--gold-400); flex-shrink: 0;
}
.about-contact-list a { color: #fff; text-decoration: none; transition: color var(--t-fast); }
.about-contact-list a:hover { color: var(--gold-400); }

/* ==========================================================================
   Services page
   ========================================================================== */
.services-intro { max-width: 680px; }
.service-list-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: flex; flex-direction: column;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  position: relative;
}
.service-list-card:hover { transform: translateY(-8px); box-shadow: var(--sh-lg); border-color: var(--blue-100); }
.service-icon {
  display: grid; place-items: center;
  width: 84px; height: 84px;
  border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--blue-100), var(--teal-100));
  color: var(--blue-600); font-size: 1.5rem;
  margin-bottom: var(--sp-4);
  transition: transform var(--t);
  position: relative;
  overflow: visible;
}
.service-icon img {
  width: 70%; height: 70%;
  object-fit: contain;
  border-radius: 0;
}
.service-list-card:hover .service-icon { transform: scale(1.08) rotate(-4deg); }
/* small gold "$" badge — used on Commercial Asset Finance per client request */
.icon-dollar-badge {
  position: absolute;
  bottom: -6px; right: -6px;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--logo-gold), #8f6c15);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: var(--sh-sm), 0 0 0 3px #fff;
  z-index: 2;
}
.service-list-card h3 { font-size: 1.15rem; margin-bottom: var(--sp-3); }
.service-list-card p { color: var(--ink-600); font-size: 0.95rem; flex: 1 1 auto; margin-bottom: var(--sp-4); line-height: 1.75; }
.service-benefits { list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
.service-benefits li {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: 0.9rem; color: var(--ink-600); padding: 0.28rem 0; line-height: 1.55;
}
.service-benefits i { color: var(--teal-500); margin-top: 3px; flex-shrink: 0; }
.service-link {
  font-weight: 700; color: var(--blue-600);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  text-decoration: none;
}
.service-link i { transition: transform var(--t-fast); }
.service-link:hover { color: var(--navy-700); }
.service-link:hover i { transform: translateX(4px); }

.emphasis-strip {
  position: relative; overflow: hidden;
  background:
    radial-gradient(400px 200px at 100% 0%, rgba(23,195,178,0.2), transparent 60%),
    linear-gradient(135deg, var(--navy-800), var(--navy-700));
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  color: #fff;
  box-shadow: var(--sh-md);
}
.emphasis-strip h3 { color: #fff; font-size: 1.2rem; margin-bottom: var(--sp-4); }
.emphasis-strip ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.emphasis-strip li { display: flex; align-items: center; gap: var(--sp-3); font-weight: 600; }
.emphasis-strip i {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: rgba(246,181,45,0.16); color: var(--gold-400);
  font-size: 1rem; flex-shrink: 0;
}

/* ==========================================================================
   Service inner template
   ========================================================================== */
.service-inner-nav {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-3) 0;
  position: sticky; top: 72px; z-index: 900;
  overflow-x: auto; white-space: nowrap;
}
.service-inner-nav .container { display: flex; gap: var(--sp-2); }
.service-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.5rem 1rem; border-radius: var(--r-full);
  font-size: 0.85rem; font-weight: 600;
  color: var(--ink-600); text-decoration: none;
  border: 1px solid transparent; flex: 0 0 auto;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.service-pill img { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.service-pill:hover, .service-pill.is-active {
  color: var(--blue-600); background: var(--blue-050); border-color: var(--blue-100);
}
.service-overview-icon {
  display: grid; place-items: center;
  width: 92px; height: 92px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.12);
  color: var(--gold-400); font-size: 1.8rem;
  margin-bottom: var(--sp-4);
  position: relative; z-index: 2;
}
.service-overview-icon img { width: 68%; height: 68%; object-fit: contain; }
.service-benefit-grid .benefit-item {
  height: 100%; background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.benefit-item:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--blue-100); }
.benefit-item .benefit-icon {
  display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--blue-100), var(--teal-100));
  color: var(--blue-600); font-size: 1.4rem; margin-bottom: var(--sp-3);
}
.benefit-item .benefit-icon img { width: 66%; height: 66%; object-fit: contain; }
.benefit-item h4 { font-size: 1.05rem; margin-bottom: var(--sp-2); }
.benefit-item p { color: var(--ink-600); font-size: 0.9rem; margin: 0; }

.other-services-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
  flex-wrap: wrap;
}
.other-services-head .section-title { margin-bottom: 0; }
.other-services-arrows { display: flex; gap: var(--sp-3); flex-shrink: 0; }
.rail-arrow {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--navy-800);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.rail-arrow:hover:not(:disabled) {
  background: var(--blue-500); border-color: var(--blue-500); color: #fff;
  transform: translateY(-2px);
}
.rail-arrow:disabled { opacity: 0.35; cursor: not-allowed; }

.other-services-track { position: relative; }
.other-services-rail {
  display: flex; gap: var(--sp-5);
  overflow-x: auto;
  padding: var(--sp-2) var(--sp-1) var(--sp-4);
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.other-services-rail::-webkit-scrollbar { display: none; height: 0; }

.other-service-card {
  flex: 0 0 auto;
  width: 280px;
  scroll-snap-align: start;
  display: flex; align-items: center; gap: var(--sp-4);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-5);
  text-decoration: none; color: var(--navy-800);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t);
}
.other-service-icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 64px; height: 64px; border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--blue-100), var(--teal-100));
  color: var(--blue-600); font-size: 1.5rem;
}
.other-service-icon img { width: 60%; height: 60%; object-fit: contain; }
.other-service-name {
  flex: 1 1 auto; font-weight: 700; font-size: 1rem; line-height: 1.3;
}
.other-service-go {
  flex-shrink: 0; color: var(--blue-400); font-size: 1.1rem;
  transition: transform var(--t-fast), color var(--t-fast);
}
.other-service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-md);
  border-color: var(--blue-100);
  background: var(--blue-050);
}
.other-service-card:hover .other-service-go { transform: translateX(4px); color: var(--blue-600); }

/* ==========================================================================
   Contact page — premium
   ========================================================================== */
.contact-info-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  text-align: center;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  position: relative; overflow: hidden;
}
.contact-info-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--blue-500), var(--teal-500));
  transform: scaleX(0); transform-origin: left; transition: transform var(--t);
}
.contact-info-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: transparent; }
.contact-info-card:hover::before { transform: scaleX(1); }
.contact-info-card .pillar-icon { margin: 0 auto var(--sp-4); transition: transform var(--t); }
.contact-info-card:hover .pillar-icon { transform: scale(1.08) rotate(-4deg); }
.contact-info-card h3 { font-size: 1.08rem; margin-bottom: var(--sp-2); }
.contact-info-card p { color: var(--ink-600); margin: 0; }
.contact-info-card a { color: var(--blue-600); font-weight: 700; }

.contact-form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-7);
  box-shadow: var(--sh-md);
}

/* Info / details panel */
.contact-detail-panel {
  position: relative; overflow: hidden;
  background:
    radial-gradient(500px 320px at 100% 0%, rgba(23,195,178,0.18), transparent 55%),
    linear-gradient(150deg, var(--navy-800) 0%, var(--navy-700) 100%);
  border-radius: var(--r-xl);
  padding: var(--sp-7);
  color: #fff;
  box-shadow: var(--sh-lg);
  height: 100%;
}
.contact-detail-panel::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(400px 240px at 85% 15%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(400px 240px at 85% 15%, #000, transparent 72%);
  opacity: 0.5; pointer-events: none;
}
.contact-detail-panel h3 { color: #fff; position: relative; z-index: 1; }
.contact-detail-list { list-style: none; padding: 0; margin: var(--sp-5) 0 0; position: relative; z-index: 1; }
.contact-detail-list li {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.contact-detail-list li:last-child { border-bottom: none; }
.contact-detail-list .cd-icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--gold-400); font-size: 1.15rem; flex-shrink: 0;
}
.contact-detail-list .cd-label { display: block; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.55); margin-bottom: 2px; }
.contact-detail-list .cd-value { display: block; font-weight: 600; color: #fff; }
.contact-detail-list .cd-value a { color: #fff; }
.contact-detail-list .cd-value a:hover { color: var(--gold-400); }

/* Business hours block */
.hours-list { list-style: none; padding: 0; margin: 0; position: relative; z-index: 1; }
.hours-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.92rem;
}
.hours-list li:last-child { border-bottom: none; }
.hours-list .day { color: rgba(255, 255, 255, 0.75); }
.hours-list .time { color: #fff; font-weight: 600; }
.hours-list .time.closed { color: var(--gold-400); }
.hours-badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.35rem 0.85rem; border-radius: var(--r-full);
  background: rgba(23,195,178,0.18); border: 1px solid rgba(23,195,178,0.35);
  color: var(--teal-400); font-size: 0.78rem; font-weight: 700;
  position: relative; z-index: 1;
}
.hours-badge .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--teal-400);
  box-shadow: 0 0 0 3px rgba(23,195,178,0.3);
  animation: pulse-dot 2.4s var(--ease) infinite;
}

/* Map placeholder — premium */
.map-placeholder {
  position: relative; overflow: hidden;
  min-height: 380px; height: 100%;
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 50% 40%, rgba(37,99,235,0.12), transparent 55%),
    linear-gradient(135deg, var(--blue-050), var(--teal-100));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--navy-800);
  border: 1px solid var(--line);
  gap: var(--sp-3); padding: var(--sp-7);
}
.map-placeholder::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(37,99,235,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.08) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(300px 200px at 50% 50%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(300px 200px at 50% 50%, #000, transparent 75%);
}
.map-pin {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--blue-500), var(--blue-600));
  color: #fff; font-size: 1.6rem;
  box-shadow: var(--sh-blue);
  animation: floaty 5s var(--ease) infinite;
}
.map-placeholder strong { position: relative; z-index: 1; font-family: var(--font-display); font-size: 1.1rem; color: var(--navy-800); }
.map-placeholder small { position: relative; z-index: 1; color: var(--ink-600); max-width: 280px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991.98px) {
  :root { --sp-16: 5rem; --sp-12: 4rem; }
  .hero-banner { padding-top: 96px; }
  .hero-grid { padding-bottom: var(--sp-10); }
  .hero-copy { max-width: 100%; }

  /* Collage stacks below the copy on tablet/mobile — applies to both the
     light and dark hero variants (not just .hero-light) */
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .hero-collage {
    min-height: 0;
    height: 440px;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
  }

  /* Diagonal media becomes a flat banner below the copy (homepage legacy) */
  .hero-media {
    position: relative;
    width: 100%;
    height: 280px;
    margin-top: var(--sp-7);
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .hero-media .hero-media-inner {
    inset: 0;
    transform: none;
    border-radius: var(--r-lg);
    box-shadow: none;
  }
  .hero-media .hero-media-img { transform: none; }
  .hero-media .hero-media-inner::after {
    background: linear-gradient(180deg, transparent 45%, rgba(10,27,53,0.5) 100%);
  }
  .hero-slash { display: none; }

  .hero-media .hero-glass-top { top: 16px; left: 16px; }
  .hero-media .hero-glass-bottom { bottom: 16px; right: 16px; }
  .hero-stat-badge { width: 108px; height: 108px; bottom: 16px; left: 16px; }
  .hero-stat-badge-num { font-size: 1.6rem; }
  .hero-stat-badge-label { font-size: 0.65rem; }
  .hero-sparkle { display: none; }
  .page-hero .hero-sparkle { display: block; }

  .hero-feature-bar { transform: translateY(32%); }
  .stat-card { gap: var(--sp-5); padding: var(--sp-5); }
  .newsletter-form { flex-direction: column; }
  .newsletter-form .btn { width: 100%; }
}

@media (max-width: 767.98px) {
  :root { --sp-16: 4rem; --sp-12: 3.5rem; --sp-10: 3rem; }
  .hero-banner { padding-top: 80px; padding-bottom: 60px; }
  .hero-title { font-size: clamp(2rem, 7vw, 2.6rem); }
  .loan-chip { font-size: 0.82rem; padding: 0.5rem 0.9rem; }
  .hero-feature-bar { grid-template-columns: 1fr; gap: var(--sp-3); padding: var(--sp-5); transform: translateY(20%); }
  .hero-media { height: 240px; }
  .hero-glass { display: none; }

  /* light hero collage: smaller, badge shrinks, sparkles stay subtle */
  .hero-collage { height: 340px; }
  .hero-collage .hero-stat-badge {
    width: 104px; height: 104px;
    bottom: 18%; left: 44%;
  }
  .hero-collage .hero-stat-badge-num { font-size: 1.55rem; }
  .hero-collage .hero-stat-badge-label { font-size: 0.62rem; }
  .hero-dots { width: 140px; height: 100px; }
  .hero-light .hero-sparkle-1 { font-size: 1.6rem; }
  .hero-light .hero-sparkle-3 { display: none; }

  .stat-card { grid-template-columns: 1fr; gap: var(--sp-3); text-align: left; }
  /* FIX: was `display: flex; align-items: baseline;` — fine for a short
     number sitting beside a short label, but with long sentence content
     it fought against natural wrapping and squeezed both onto cramped
     side-by-side lines. Stacking them (the default block flow) lets each
     wrap independently at full card width. */
  .stat { display: block; }
  .stat-num { margin: 0 0 4px; }
  .page-hero { padding: 96px 0 56px; }
  .service-inner-nav { top: 0; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-legal { justify-content: center; }
}

@media (max-width: 575.98px) {
  .container { padding-left: var(--sp-5); padding-right: var(--sp-5); }
  .btn { width: 100%; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-help { justify-content: flex-start; }
  .section-title { font-size: 1.7rem; }
  .cta-panel, .contact-form-card, .contact-detail-panel { padding: var(--sp-5); }
  .footer-social { justify-content: center; }
  .footer-head, .footer-links { text-align: center; }
  .footer-links a { justify-content: center; }

  /* text-align:center on the parent doesn't reach these — both are flex
     rows (icon + text), so they need their own justify-content/margin
     to actually center instead of staying pinned to the left. */
  .site-footer .navbar-brand { justify-content: center; }
  .footer-tag { margin-left: auto; margin-right: auto; text-align: center; }
  .footer-links.contact li { justify-content: center; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero-glass, .map-pin, .hero-eyebrow .dot, .hours-badge .pulse { animation: none; }
}

/* ==========================================================================
   LIGHT DESIGN LANGUAGE — site-wide (matches homepage hero direction)
   Overrides the earlier dark treatments for interior heroes & sections.
   ========================================================================== */

/* ---------- Interior page hero → light ---------- */
.page-hero {
  background:
    radial-gradient(700px 480px at 22% 40%, rgba(23, 195, 178, 0.14) 0%, rgba(37, 99, 235, 0.06) 45%, transparent 72%),
    linear-gradient(180deg, #fbfdff 0%, var(--surface-2) 100%);
  color: var(--ink-900);
}
.page-hero .hero-rings span { border-color: rgba(37, 99, 235, 0.1); }
.page-hero .hero-rings span:nth-child(2) { border-color: rgba(246, 181, 45, 0.22); }
.page-hero .hero-rings span:nth-child(3) {
  background: radial-gradient(circle, rgba(23, 195, 178, 0.18), transparent 70%);
}
.page-hero .blob-a { opacity: 0.18; }

.breadcrumb-trail { color: var(--ink-400); }
.breadcrumb-trail a { color: var(--ink-600); }
.breadcrumb-trail a:hover { color: var(--blue-600); }
.breadcrumb-trail .current { color: var(--blue-600); }

.page-hero-title { color: var(--navy-800); }
.page-hero-lead { color: var(--ink-600); }

/* sparkles on interior banners (now positioned relative to the full hero) */
.page-hero .hero-sparkle { color: var(--teal-500); filter: drop-shadow(0 3px 8px rgba(23,195,178,0.35)); }
.page-hero .hero-sparkle-1 { top: 10%; right: 16%; left: auto; font-size: 2rem; }
.page-hero .hero-sparkle-2 { top: 22%; right: 6%; left: auto; font-size: 1.2rem; animation-delay: 1.1s; }

/* service-inner icon over light hero */
.service-overview-icon {
  background: linear-gradient(140deg, var(--blue-100), var(--teal-100));
  color: var(--blue-600);
  box-shadow: var(--sh-md);
}
.service-overview-icon .icon-dollar-badge { bottom: -4px; right: -4px; }

/* ---------- Process section → light ---------- */
.process {
  color: var(--ink-900);
  background:
    radial-gradient(700px 460px at 80% 0%, rgba(23, 195, 178, 0.12) 0%, transparent 55%),
    linear-gradient(180deg, var(--surface-2) 0%, #fff 100%);
}
.process::before { display: none; }
.process .section-head.light .section-title { color: var(--navy-800); }
.process .section-head.light .section-sub { color: var(--ink-600); }
.process .section-head.light .eyebrow,
.process .eyebrow.on-dark {
  color: var(--blue-600);
  background: var(--blue-100);
}
.process .section-head.light .eyebrow::before,
.process .eyebrow.on-dark::before { background: var(--blue-500); }

@media (min-width: 1200px) {
  .process-track::before {
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.25) 15%, rgba(37, 99, 235, 0.25) 85%, transparent);
  }
}
.step-card {
  background: #fff;
  border: 1px solid var(--line);
  backdrop-filter: none;
  box-shadow: var(--sh-sm);
}
.step-card:hover {
  background: #fff;
  border-color: var(--blue-100);
  box-shadow: var(--sh-lg);
}
.step-card h3 { color: var(--navy-800); }
.step-card p { color: var(--ink-600); }
.step-icon {
  background: linear-gradient(140deg, var(--blue-100), var(--teal-100));
  color: var(--blue-600);
}
.step-card:hover .step-icon { background: var(--blue-500); color: #fff; }
.process .check-list.light li { color: var(--ink-600); }
.process .check-list.light li i { color: var(--teal-500); }

/* ---------- Home CTA panel → light ---------- */
.cta-panel {
  background:
    radial-gradient(600px 400px at 100% 0%, rgba(23, 195, 178, 0.16), transparent 55%),
    radial-gradient(500px 300px at 0% 100%, rgba(246, 181, 45, 0.12), transparent 55%),
    linear-gradient(140deg, #ffffff 0%, var(--blue-050) 100%);
  border: 1px solid var(--line);
  box-shadow: var(--sh-lg);
}
.cta-panel::before { display: none; }
.cta-title { color: var(--navy-800); }
.cta-text { color: var(--ink-600); }
.cta-panel .check-list.light li { color: var(--ink-600); }
.cta-panel .check-list.light li i { color: var(--teal-500); }
.cta-panel .eyebrow.on-dark,
.cta-panel .section-head.light .eyebrow {
  color: var(--blue-600);
  background: var(--blue-100);
}
.cta-panel .eyebrow.on-dark::before { background: var(--blue-500); }
.cta-form, .card-glass {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-md);
}

/* ---------- Services emphasis strip → light ---------- */
.emphasis-strip {
  background:
    radial-gradient(400px 200px at 100% 0%, rgba(23, 195, 178, 0.14), transparent 60%),
    linear-gradient(135deg, #fff 0%, var(--blue-050) 100%);
  border: 1px solid var(--line);
  color: var(--ink-900);
  box-shadow: var(--sh-sm);
}
.emphasis-strip h3 { color: var(--navy-800); }
.emphasis-strip li { color: var(--ink-600); }
.emphasis-strip i {
  background: rgba(246, 181, 45, 0.16);
  color: var(--hf-yellow-deep);
}

/* ---------- About contact panel → light ---------- */
.about-contact-panel {
  background:
    radial-gradient(500px 300px at 100% 0%, rgba(23, 195, 178, 0.14), transparent 55%),
    linear-gradient(135deg, #fff 0%, var(--blue-050) 100%);
  border: 1px solid var(--line);
  color: var(--ink-900);
  box-shadow: var(--sh-md);
}
.about-contact-panel h2 { color: var(--navy-800); }
.about-contact-panel p { color: var(--ink-600); }
.about-contact-list li { color: var(--navy-800); }
.about-contact-list i {
  background: linear-gradient(140deg, var(--blue-100), var(--teal-100));
  color: var(--blue-600);
}
.about-contact-list a { color: var(--navy-800); }
.about-contact-list a:hover { color: var(--blue-600); }

/* ---------- Contact detail panel → light ---------- */
.contact-detail-panel {
  background:
    radial-gradient(500px 320px at 100% 0%, rgba(23, 195, 178, 0.12), transparent 55%),
    linear-gradient(150deg, #ffffff 0%, var(--blue-050) 100%);
  border: 1px solid var(--line);
  color: var(--ink-900);
  box-shadow: var(--sh-md);
}
.contact-detail-panel::before { display: none; }
.contact-detail-panel h3 { color: var(--navy-800); }
.contact-detail-list li { border-bottom-color: var(--line-soft); }
.contact-detail-list .cd-icon {
  background: linear-gradient(140deg, var(--blue-100), var(--teal-100));
  border: 1px solid var(--line);
  color: var(--blue-600);
}
.contact-detail-list .cd-label { color: var(--ink-400); }
.contact-detail-list .cd-value { color: var(--navy-800); }
.contact-detail-list .cd-value a { color: var(--navy-800); }
.contact-detail-list .cd-value a:hover { color: var(--blue-600); }
.hours-list li { border-bottom-color: var(--line-soft); }
.hours-list .day { color: var(--ink-600); }
.hours-list .time { color: var(--navy-800); }
.hours-list .time.closed { color: var(--hf-yellow-deep); }
.hours-badge {
  background: var(--teal-100);
  border-color: rgba(23, 195, 178, 0.4);
  color: #0d9488;
}

/* ---------- Light-theme responsive fixes ---------- */
@media (max-width: 767.98px) {
  /* keep sparkles glowing on the full-bleed photo, just smaller */
  .page-hero .hero-sparkle-1 { font-size: 1.4rem; top: 8%; right: 10%; }
  .page-hero .hero-sparkle-2 { font-size: 0.95rem; top: 20%; right: 4%; }
}

/* ---------- Decorative glow/dot scaling on small screens ---------- */
@media (max-width: 767.98px) {
  .deco-glow { width: 280px !important; height: 280px !important; filter: blur(8px); }
  .deco-glow--sm, .deco-glow--md { width: 220px !important; height: 220px !important; }
  .deco-dots { width: 130px; height: 90px; opacity: 0.25; }
}

/* ---------- Other services rail — mobile ---------- */
@media (max-width: 575.98px) {
  .other-services-head { align-items: center; }
  .other-services-arrows { display: none; }
  .other-service-card { width: 240px; padding: var(--sp-4); gap: var(--sp-3); }
  .other-service-icon { width: 44px; height: 44px; font-size: 1.1rem; }
  .other-service-name { font-size: 0.92rem; }
}