/* ── EXACT PaymentChecker.com color tokens ── */
:root {
  --navy:         #1a2332;
  --navy-light:   #243044;
  --navy-mid:     #2d3d55;
  --accent:       #3b7dd8;
  --accent-light: #5a98f0;
  --accent-pale:  #e8f0fb;
  --text-primary: #1a2332;
  --text-secondary:#5a6a80;
  --text-muted:   #8fa0b5;
  --bg:           #f7f8fa;
  --surface:      #ffffff;
  --border:       #e2e8f0;
  --radius:       12px;
  --radius-lg:    18px;
  --radius-sm:    8px;
  --shadow:       0 2px 16px rgba(26,35,50,0.08);
  --shadow-lg:    0 6px 28px rgba(26,35,50,0.13);
  --nav-h:        64px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Chrome on Android paints a translucent blue rectangle over whatever you tap.
   It is a browser default rather than anything in our CSS, which is why Firefox
   never showed it, and it is most obvious on the logo because that link is a
   flex box wider than the image inside it.

   Only the tap flash is suppressed. Keyboard focus rings are deliberately left
   alone below — removing those would make the site unusable without a mouse. */
a, button, [role="button"], input, select, textarea, label, summary,
.nav-logo-img, .footer-logo-link {
  -webkit-tap-highlight-color: transparent;
}
/* Keyboard users still get a visible focus ring. */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── NAV ── */
nav {
  background: var(--navy);
  padding: 0 1.5rem;
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 1px 0 rgba(0,0,0,0.15);
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
nav.nav-scrolled {
  background: rgba(26, 35, 50, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(255,255,255,0.10);
  box-shadow: 0 2px 20px rgba(0,0,0,0.25);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto; padding: 0;
  width: 100%; display: flex; align-items: center; gap: 0;
}
/* Logo image */
.nav-logo-img  { display: flex; align-items: center; flex-shrink: 0; min-width: 130px; }
.site-logo-img { height: 48px; width: auto; object-fit: contain; }
.footer-logo-link { display: inline-block; margin-bottom: 14px; }
.footer-logo-img  { height: 36px; width: auto; object-fit: contain; }

/* Topbar */
.nav-topbar {
  display: flex; gap: 16px; align-items: center;
  margin-right: 20px; font-size: 12px;
}
.nav-topbar a { color: rgba(255,255,255,0.45); font-size: 12px; }
.nav-topbar a:hover { color: #fff; text-decoration: none; }

/* Nav links */
.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; flex: 1; justify-content: center; transform: translateX(-50px); }
.nav-links li { position: relative; }
.nav-links > li > a,
.nav-links > li > button {
  padding: 8px 12px;
  color: rgba(255,255,255,0.65);
  font-size: 14px; font-weight: 500;
  border-radius: var(--radius-sm);
  border: none; background: none; cursor: pointer;
  transition: color 0.15s, background 0.15s;
  font-family: inherit;
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.nav-links > li > a:hover,
.nav-links > li > button:hover { color: #fff; background: rgba(255,255,255,0.07); text-decoration: none; }
.nav-links .active-link { color: #fff; }
.nav-caret { font-size: 0.6rem; opacity: 0.5; }
.nav-phone {
  margin-left: 10px;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: var(--accent) !important;
  color: #fff !important;
  width: 124px; height: 34px; padding: 0 12px !important;
  border-radius: 999px !important;
  font-weight: 600 !important; font-size: 12px !important;
  line-height: 1; white-space: nowrap; box-sizing: border-box; flex-shrink: 0;
}
.nav-phone:hover { background: #3070c4 !important; text-decoration: none !important; color: #fff !important; }

/* Dropdown — JS .visible class controlled */
.dropdown-menu {
  /* Use visibility (not display:none) so CSS transitions work reliably on desktop */
  visibility: hidden;
  position: absolute; top: 100%; left: 0;
  /* padding-top creates an invisible hover bridge between the nav button
     and the visual menu box — prevents the 180ms close timer from firing
     as the cursor crosses the gap */
  padding-top: 8px;
  min-width: 200px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  z-index: 9999;
}
/* Visual card drawn via ::before so the transparent padding-top stays hoverable */
.dropdown-menu::before {
  content: '';
  position: absolute; top: 8px; left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: -1;
  pointer-events: none;
}
.dropdown-menu.visible {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}

/* Desktop CSS hover — reliable fallback independent of JS timing */
@media (hover: hover) and (pointer: fine) {
  .nav-links li:hover > .dropdown-menu {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
  }
}
.dropdown-menu-inner a,
.dropdown-menu a {
  position: relative; /* stacks above ::before */
  display: block; padding: 9px 13px;
  color: var(--text-primary); font-size: 13px; font-weight: 500;
  border-radius: var(--radius-sm);
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.dropdown-menu-inner a:hover,
.dropdown-menu a:hover { background: var(--accent-pale); color: var(--accent); text-decoration: none; }

/* Hamburger */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; background: none; border: none;
  padding: 8px; margin-left: auto;
}
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: rgba(255,255,255,0.7); border-radius: 2px; transition: 0.22s;
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* Mobile menu */
.mobile-menu {
  display: none;
  position: fixed; top: var(--nav-h); left: 0; right: 0;
  background: var(--navy-light);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 8px 0 16px;
  z-index: 998;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  height: calc(100vh - var(--nav-h));
  height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  display: block; padding: 12px 24px;
  color: rgba(255,255,255,0.7); font-size: 15px; font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: color 0.15s;
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover { color: #fff; background: rgba(255,255,255,0.05); text-decoration: none; }
.mobile-menu .mobile-section {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.28); padding: 10px 24px 4px; margin-top: 4px;
}

/* ── LAYOUT ── */
.page-body { padding-top: var(--nav-h); }
.container  { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section    { padding: 72px 0; }
.section-sm { padding: 48px 0; }
.section-alt { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* ── HERO ── */
.hero {
  background: var(--navy);
  /* Bottom padding trimmed 25% (72 -> 54) to close the gap under the hero
     buttons before the next section starts. */
  padding: 80px 0 54px;
  position: relative; overflow: hidden;
  text-align: center;
}
.hero::before {
  content: '';
  position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
  width: 700px; height: 500px;
  background: radial-gradient(ellipse, rgba(59,125,216,0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}
/* Desktop only: overlay fades to solid navy at button level (~62%) so the
   video-to-blue transition is visible there, while a partial navy tint above
   keeps the h1 and badge readable against the video */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 0%, transparent 77%, rgba(26,35,50,0.45) 89%, var(--navy) 100%);
  pointer-events: none;
  z-index: 1;
}
.hero .container { position: relative; z-index: 2; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(59,125,216,0.22); border: 1px solid rgba(59,125,216,0.45);
  color: var(--accent-light); font-size: 11px; font-weight: 500;
  padding: 5px 14px; border-radius: 20px; margin-bottom: 22px;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.hero h1 {
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 700; color: #fff;
  letter-spacing: -1.5px; line-height: 1.1;
  margin: 0 auto 18px; max-width: 680px;
}
.hero h1 em { color: var(--accent-light); font-style: normal; }
.hero p {
  font-size: 17px; color: rgba(255,255,255,0.55);
  max-width: 520px; margin: 0 auto 36px; line-height: 1.65;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: center; }
.hero-img {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  width: 100%; height: 100%; object-fit: cover; opacity: 0.5;
  /* The video fades out over this band. It used to finish around the headline
     (43.5% -> 72%), so the picture was already gone by the time you reached the
     buttons. Pushed down so the fade is centred on the buttons themselves. */
  mask-image: linear-gradient(to bottom, black 0%, black 54%, transparent 79%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 54%, transparent 79%);
}
.hero-stats {
  margin-top: 52px; display: flex; gap: 3rem; flex-wrap: wrap;
  padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.09);
  justify-content: center;
}
.hero-stat .num   { font-size: 26px; font-weight: 700; color: #fff; letter-spacing: -0.5px; }
.hero-stat .label { font-size: 11px; color: rgba(255,255,255,0.38); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 3px; }

/* ── PAGE HERO ── */
.page-hero {
  background: var(--navy);
  padding: 64px 0 52px;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; top: -80px; left: 60%;
  width: 500px; height: 400px;
  background: radial-gradient(ellipse, rgba(59,125,216,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.page-label {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--accent-light); margin-bottom: 10px;
}
.page-hero h1 {
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 700; color: #fff;
  letter-spacing: -1px; line-height: 1.12;
  margin-bottom: 12px;
}
.page-hero p { font-size: 16px; color: rgba(255,255,255,0.52); max-width: 580px; line-height: 1.65; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 14px;
  border: none; cursor: pointer; transition: all 0.15s;
  font-family: inherit; text-decoration: none;
  letter-spacing: 0.01em;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 4px rgba(59,125,216,0.3); }
.btn-primary:hover { background: #3070c4; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(59,125,216,0.4); text-decoration: none; color: #fff; }
.btn-outline { background: transparent; color: var(--text-primary); border: 1.5px solid var(--border); }
.btn-outline:hover { background: var(--bg); border-color: #b0c0d8; text-decoration: none; color: var(--text-primary); }
.btn-outline-white { background: transparent; color: rgba(255,255,255,0.8); border: 1.5px solid rgba(255,255,255,0.22); }
.btn-outline-white:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); text-decoration: none; color: #fff; }

/* ── SECTION HEADERS ── */
.section-label {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
.section-title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700; letter-spacing: -0.5px;
  color: var(--text-primary); margin-bottom: 10px;
}
.section-sub { font-size: 15px; color: var(--text-secondary); max-width: 540px; line-height: 1.65; }
.section-header { margin-bottom: 44px; }
.section-header.centered { text-align: center; }
.section-header.centered .section-sub { margin: 0 auto; }

/* ── CARDS ── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
  box-shadow: var(--shadow);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.card:hover { border-color: #c5d5ec; box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.card-icon { font-size: 22px; margin-bottom: 12px; width: 40px; height: 40px; background: var(--accent-pale); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }
.card h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; color: var(--text-primary); }
.card p  { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

/* ── GRIDS ── */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }

/* ── SEARCH BOX ── */
.search-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px;
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  box-shadow: var(--shadow);
}
.search-box-label { font-size: 11px; color: var(--text-secondary); font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.6px; }
.search-input { flex: 1; min-width: 220px; }
.search-input input {
  width: 100%; height: 42px;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 0 14px;
  color: var(--text-primary); font-size: 14px; font-family: inherit; outline: none;
  transition: border-color 0.15s;
}
.search-input input::placeholder { color: var(--text-muted); }
.search-input input:focus { border-color: var(--accent); background: #fff; }

/* ── COMMUNITY GRID ── */
.community-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.community-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4/3; border: 1px solid var(--border); cursor: pointer;
  box-shadow: var(--shadow);
}
.community-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; filter: brightness(0.78); }
.community-card:hover img { transform: scale(1.05); filter: brightness(0.9); }
.community-card-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16px;
  background: linear-gradient(to top, rgba(26,35,50,0.82), transparent 55%);
}
.community-card-overlay h3 { color: #fff; font-size: 14px; font-weight: 600; }

/* ── TESTIMONIALS ── */
.testimonial-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow);
}
.testimonial-stars { color: var(--accent); font-size: 13px; margin-bottom: 12px; letter-spacing: 2px; }
.testimonial-text { font-size: 14px; color: var(--text-secondary); line-height: 1.65; font-style: italic; margin-bottom: 16px; }
.testimonial-author { font-size: 12px; color: var(--text-muted); font-weight: 600; }

/* ── PROFILE ── */
.profile-wrap { display: grid; grid-template-columns: 340px 1fr; gap: 52px; align-items: center; }
.profile-img-wrap { position: relative; }
.profile-img { width: 100%; border-radius: var(--radius-lg); object-fit: cover; border: 1px solid var(--border); aspect-ratio: 3/2; box-shadow: var(--shadow-lg); object-position: center top; }
.profile-name-badge {
  position: absolute; bottom: -12px; left: 20px;
  background: var(--accent); color: #fff; padding: 8px 16px;
  border-radius: 999px; font-weight: 600; font-size: 12px;
  box-shadow: 0 4px 12px rgba(59,125,216,0.4);
}
.profile-text h2 { font-size: clamp(22px, 2.5vw, 30px); font-weight: 700; letter-spacing: -0.5px; margin-bottom: 16px; color: var(--text-primary); }
.profile-text p { color: var(--text-secondary); line-height: 1.7; margin-bottom: 12px; font-size: 15px; }

/* ── STEP GUIDE ── */
.step-item {
  display: grid; grid-template-columns: 56px 1fr; gap: 18px;
  padding: 26px 0; border-bottom: 1px solid var(--border);
}
.step-item:last-child { border-bottom: none; }
.step-num { font-size: 28px; font-weight: 700; color: var(--accent); line-height: 1; padding-top: 3px; letter-spacing: -1px; }
.step-content h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); }
.step-content p  { font-size: 14px; color: var(--text-secondary); line-height: 1.65; }

/* ── FORMS ── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-two-col { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; align-items: start; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.full { grid-column: 1/-1; }
.form-group label { font-size: 11px; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; }
.form-group input,
.form-group textarea,
.form-group select {
  height: 42px; background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 0 14px;
  color: var(--text-primary); font-size: 14px; font-family: inherit; outline: none; width: 100%;
  transition: border-color 0.15s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--accent); background: #fff; }
.form-group textarea { min-height: 110px; resize: vertical; padding: 10px 14px; height: auto; }

/* ── VIDEO ── */
.video-wrap {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  aspect-ratio: 16/9; background: var(--navy-mid);
  cursor: pointer; display: block;
}
.video-wrap img { width: 100%; height: 100%; object-fit: cover; opacity: 0.88; transition: opacity 0.2s; }
.video-wrap:hover img { opacity: 1; }
.video-play-btn {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.video-play-btn::before {
  content: '▶';
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,0.94); color: var(--accent);
  font-size: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  transition: transform 0.18s, background 0.18s;
  padding-left: 4px;
}
.video-wrap:hover .video-play-btn::before { transform: scale(1.1); background: #fff; }

/* ── STAT STRIP ── */
.stat-strip {
  display: flex; border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow);
}
.stat-strip-item { flex: 1; padding: 22px 24px; border-right: 1px solid var(--border); text-align: center; }
.stat-strip-item:last-child { border-right: none; }
.stat-strip-item .num   { font-size: 26px; font-weight: 700; color: var(--accent); letter-spacing: -0.5px; }
.stat-strip-item .label { font-size: 11px; color: var(--text-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.5px; }

/* ── CTA SECTION ── */
.cta-section {
  background: var(--navy);
  text-align: center; padding: 72px 0;
  position: relative; overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
  width: 600px; height: 400px;
  background: radial-gradient(ellipse, rgba(59,125,216,0.2) 0%, transparent 70%);
  pointer-events: none;
}
.cta-section .section-label { color: var(--accent-light); }
.cta-section h2 { font-size: clamp(24px, 3.5vw, 36px); font-weight: 700; letter-spacing: -1px; margin-bottom: 12px; color: #fff; }
.cta-section p  { color: rgba(255,255,255,0.5); font-size: 16px; margin-bottom: 28px; }

/* ── NEWSLETTER ── */
.newsletter-form { display: flex; gap: 10px; max-width: 440px; margin: 0 auto; }
.newsletter-form input {
  flex: 1; height: 42px; background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm); padding: 0 16px;
  color: #fff; font-size: 14px; font-family: inherit; outline: none;
}
.newsletter-form input:focus { border-color: rgba(255,255,255,0.35); }
.newsletter-form input::placeholder { color: rgba(255,255,255,0.35); }

/* ── TWO-COL ── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.two-col-text h2 { font-size: clamp(20px, 2.5vw, 28px); font-weight: 700; letter-spacing: -0.5px; margin-bottom: 14px; color: var(--text-primary); }
.two-col-text p  { color: var(--text-secondary); line-height: 1.7; font-size: 14px; margin-bottom: 12px; }
.two-col-img { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.two-col-img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }

/* ── FOOTER ── */
footer {
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 52px 0 28px;
}
.footer-inner { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand p { font-size: 13px; color: rgba(255,255,255,0.38); line-height: 1.65; max-width: 260px; }
.footer-dre { font-size: 11px; color: rgba(255,255,255,0.22); margin-top: 8px; }
.footer-col h4 { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.3); margin-bottom: 14px; }
.footer-col a  { display: block; font-size: 13px; color: rgba(255,255,255,0.55); margin-bottom: 9px; }
.footer-col a:hover { color: #fff; text-decoration: none; }
.footer-bottom {
  margin-top: 40px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
}
.footer-bottom p { font-size: 12px; color: rgba(255,255,255,0.22); }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.45); font-size: 12px; text-decoration: none;
  transition: 0.18s;
}
.footer-social a:hover { color: #fff; border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.12); }

/* ── MISC ── */
.tag {
  display: inline-block; background: var(--accent-pale); color: var(--accent);
  font-size: 11px; font-weight: 600; padding: 3px 10px;
  border-radius: 20px; letter-spacing: 0.3px;
}
.tip-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; background: var(--surface);
}
.tip-icon {
  width: 36px; height: 36px; background: var(--accent-pale);
  border-radius: var(--radius-sm); display: flex; align-items: center;
  justify-content: center; font-size: 16px; margin-bottom: 12px;
}
.tip-card h3 { font-size: 14px; font-weight: 600; margin-bottom: 5px; color: var(--text-primary); }
.tip-card p  { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }

/* ── MLS SEARCH HIGHLIGHT SECTION ── */
.mls-search-section {
  background: linear-gradient(155deg, var(--navy) 0%, #1e2f48 55%, var(--navy-mid) 100%);
  padding: 80px 0 72px;
  position: relative;
  overflow: hidden;
}
.mls-search-section::before {
  content: '';
  position: absolute; top: -160px; left: 50%; transform: translateX(-50%);
  width: 1000px; height: 700px;
  background: radial-gradient(ellipse, rgba(59,125,216,0.20) 0%, transparent 65%);
  pointer-events: none;
}
.mls-search-section::after {
  content: '';
  position: absolute; bottom: -80px; right: -80px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(90,152,240,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.mls-search-section .section-label {
  color: var(--accent-light);
}
.mls-search-section .section-title {
  color: #fff;
  font-size: clamp(26px, 3.5vw, 40px);
  letter-spacing: -1px;
}
.mls-search-section .mls-sub {
  font-size: 16px;
  color: rgba(255,255,255,0.52);
  margin-bottom: 32px;
  line-height: 1.6;
}
.mls-trust-badges {
  display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
  margin-top: 20px;
}
.mls-trust-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.4px;
  color: rgba(255,255,255,0.42);
}
.mls-trust-badge::before {
  content: '✓';
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  background: rgba(59,125,216,0.25);
  border-radius: 50%;
  font-size: 9px;
  color: var(--accent-light);
  font-weight: 700;
  flex-shrink: 0;
}
.mls-search-section .search-box {
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 12px 48px rgba(0,0,0,0.35), 0 0 0 1px rgba(59,125,216,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  padding: 28px;
}
.mls-search-section .search-box-label {
  color: rgba(255,255,255,0.45);
}
.mls-search-section .search-input input {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
  color: #fff;
  height: 48px;
  font-size: 15px;
}
.mls-search-section .search-input input::placeholder {
  color: rgba(255,255,255,0.3);
}
.mls-search-section .search-input input:focus {
  border-color: var(--accent-light);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 0 0 3px rgba(59,125,216,0.22);
  outline: none;
}
.mls-search-section select {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
  color: #fff;
  height: 48px;
}
.mls-search-section select option { background: var(--navy-mid); color: #fff; }
.mls-search-section select:focus { border-color: var(--accent-light); background: rgba(255,255,255,0.10); }
/* Min/Max price inputs on homepage search — match the Type dropdown */
.mls-search-section input#homeMinPrice,
.mls-search-section input#homeMaxPrice {
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-sm);
  color: #fff;
  height: 48px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 15px;
  outline: none;
}
.mls-search-section input#homeMinPrice::placeholder,
.mls-search-section input#homeMaxPrice::placeholder { color: rgba(255,255,255,0.3); }
.mls-search-section input#homeMinPrice:focus,
.mls-search-section input#homeMaxPrice:focus {
  border-color: var(--accent-light);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 0 0 3px rgba(59,125,216,0.22);
}
/* Min/Max price sit side by side; on mobile each fills half the row */
.home-price-row { width: 100%; }
.home-price-row input#homeMinPrice,
.home-price-row input#homeMaxPrice { width: 100% !important; box-sizing: border-box; }
.mls-search-section .btn-primary {
  height: 48px;
  padding: 0 32px;
  font-size: 15px;
  box-shadow: 0 4px 20px rgba(59,125,216,0.5);
}
.mls-search-section .btn-primary:hover {
  box-shadow: 0 6px 28px rgba(59,125,216,0.65);
}
.mls-search-section .mls-hint {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.3);
  margin-top: 16px;
}

/* ── SELECT INPUTS in search/forms ── */
select {
  height: 42px; background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 0 12px;
  color: var(--text-primary); font-family: inherit; font-size: 14px; outline: none;
  cursor: pointer; transition: border-color 0.15s;
}
select:focus { border-color: var(--accent); background: #fff; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 30px; }
  .profile-wrap { grid-template-columns: 1fr; gap: 32px; }
  .profile-img { aspect-ratio: 3/2; }
}
@media (max-width: 768px) {
  :root { --nav-h: 60px; }
  .nav-links, .nav-topbar { display: none; }
  .hamburger { display: flex; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; gap: 28px; }
  .community-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 24px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-two-col { grid-template-columns: 1fr; gap: 32px; }
  .stat-strip { flex-wrap: wrap; }
  .stat-strip-item { border-right: none; border-bottom: 1px solid var(--border); }
  .stat-strip-item:last-child { border-bottom: none; }
  .search-box { flex-direction: column; align-items: stretch; text-align: left; }
  .search-box > * { width: 100%; }
  .search-input { min-width: 0; }
  .search-box .btn { width: 100%; justify-content: center; }
  .mls-trust-badges { gap: 12px; }
  .hero-intro-text { display: none; }
  .hero { padding: 44px 0 36px; }   /* bottom trimmed 25% (48 -> 36) */
  .hero::after { display: none; }
  /* Blur fade at bottom of video so it blends into navy with no hard line */
  .hero::before {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent 0%, var(--navy) 100%);
    z-index: 2;
    pointer-events: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
  }
  .hero h1 { font-size: 34px; }
  /* The video used to be height:auto, so it only covered the top part of the
     hero and the rest was bare navy — moving the fade could never fix that,
     because the navy started where the video ENDED. It now fills the hero and
     is cropped to fit, so the video reaches much further down and the navy is
     only what shows through the fade. Original fade proportions restored. */
  .hero-img {
    display: block; position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
    transform: none; opacity: 0.5;
    /* Buttons stack on mobile. Measured down the hero: 44 top pad + badge +
       headline + 22 + button + half the 12px gap puts the point between the two
       buttons at roughly 73% of the hero. Band 58%->88% centres the fade there
       and leaves the bottom 12% solid navy. */
    mask-image: linear-gradient(to bottom, black 0%, black 54%, transparent 84%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 54%, transparent 84%);
  }
  /* Badge: 10% less transparent (was 0.22 bg, 0.45 border) */
  /* Badge sized to match the desktop badge:headline ratio (11px : 52px ≈ 0.21).
     Against the 34px mobile headline that computes to ~7px, which is too small to
     read, so 9px is the closest proportional size that stays legible. */
  .hero-badge { background: rgba(59,125,216,0.32); border-color: rgba(59,125,216,0.55); font-size: 9px; padding: 4px 11px; margin-bottom: 16px; letter-spacing: 0.4px; }
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; justify-content: center; text-align: center; align-items: center; }
  .hero-stat { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .hero-actions { flex-direction: column; align-items: center; }
  .newsletter-form { flex-direction: column !important; max-width: 100% !important; width: 100% !important; gap: 12px !important; }
  .newsletter-form input[type="email"] { height: 56px !important; font-size: 16px !important; padding: 0 20px !important; width: 100% !important; box-sizing: border-box !important; flex: none !important; }
  .newsletter-form button.btn { height: 56px !important; font-size: 16px !important; width: 100% !important; box-sizing: border-box !important; display: flex !important; justify-content: center !important; }
  .page-hero { padding: 48px 0 36px; position: relative; overflow: hidden; }
}
/* Hide 5th & 6th testimonials on mobile — show only 4 */
@media (max-width: 768px) {
  .mobile-hidden-testimonial { display: none; }
}

@media (max-width: 480px) {
  .community-grid { grid-template-columns: 1fr; }
  .container { padding: 0 16px; }
  .section { padding: 52px 0; }
}

/* ── MISSION STATEMENT ── */
.mission-statement {
  background: var(--navy-light, #1e2d42);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 44px 0;
  text-align: center;
}
.mission-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-light, #5a98f0);
  margin-bottom: 14px;
}
.mission-text {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255,255,255,0.52);
  font-style: italic;
  max-width: 780px;
  margin: 0 auto;
  padding: 0;
  border: none;
}


/* ── "We're Hiring Agents" standout nav CTA ── */
.nav-cta-hiring{
  margin-left:10px;
  display:inline-flex !important; align-items:center; justify-content:center;
  width:124px; height:34px; padding:0 6px !important;
  background:linear-gradient(135deg,var(--accent),var(--accent-light)) !important;
  color:#fff !important; border-radius:999px !important;
  font-weight:700; font-size:9.5px !important; letter-spacing:0; line-height:1;
  white-space:nowrap; box-sizing:border-box; flex-shrink:0;
  box-shadow:0 2px 12px rgba(59,125,216,0.45);
  animation:hiringPulse 2.4s ease-in-out infinite;
  transition:transform .2s, box-shadow .2s;
}
.nav-cta-hiring:hover{ transform:translateY(-1px); box-shadow:0 6px 20px rgba(59,125,216,0.6); text-decoration:none !important; color:#fff !important; }
@keyframes hiringPulse{ 0%,100%{ box-shadow:0 2px 12px rgba(59,125,216,0.45); } 50%{ box-shadow:0 2px 18px rgba(90,152,240,0.78); } }
.mobile-hiring{
  display:inline-block !important; width:auto !important; align-self:flex-start;
  background:linear-gradient(135deg,var(--accent),var(--accent-light)) !important;
  color:#fff !important; font-weight:700 !important; font-size:13px !important;
  border-radius:999px !important; padding:8px 16px !important;
  margin:6px 16px 10px !important; text-align:center; border:none !important; align-self:flex-start;
}
@media (prefers-reduced-motion: reduce){ .nav-cta-hiring{ animation:none; } }

@media (max-width: 768px) {
  .nav-logo-img { min-width: 0; }
  .site-logo-img { margin-left: -46px; }
}