/* ═══════════════════════════════════════════════════════
   BASIC HOME LOAN v3.0 — style.css
   Aesthetic: Warm Editorial Real Estate
   Fonts: Cormorant Garant (display) + Outfit (body)
   Palette: Cream #F5F0E8 · Forest Green #1B2E1B · Gold #C9A228
   ═══════════════════════════════════════════════════════ */

/* ─── TOKENS ─────────────────────────────────────────── */
:root {
  --cream:        #F5F0E8;
  --cream-2:      #EDE8DF;
  --cream-3:      #E3DCCE;
  --green:        #1B2E1B;
  --green-2:      #223A22;
  --green-3:      #2A4A2A;
  --green-light:  #3D6B3D;
  --gold:         #C9A228;
  --gold-light:   #E2BC4A;
  --gold-dark:    #A07E18;
  --gold-glow:    rgba(201,162,40,.18);
  --white:        #FFFFFF;
  --ink:          #1A1A1A;
  --ink-2:        #2E2E2E;
  --ink-3:        #4A4A4A;
  --ink-4:        #767676;
  --ink-5:        #9A9A9A;
  --border:       rgba(26,26,26,.1);
  --border-2:     rgba(26,26,26,.06);
  --success:      #1A7A4A;
  --error:        #C0392B;
  --wa:           #25D366;

  --f-display: 'Cormorant Garant', Georgia, serif;
  --f-body:    'Outfit', system-ui, sans-serif;
  --f-mono:    'DM Mono', monospace;

  --max-w:    1180px;
  --px:       24px;
  --sec-py:   96px;
  --sec-py-m: 64px;

  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 9999px;

  --sh-card:   0 2px 24px rgba(26,46,27,.08);
  --sh-card-h: 0 12px 48px rgba(26,46,27,.16);
  --sh-form:   0 24px 80px rgba(26,26,26,.12);
  --sh-gold:   0 0 32px rgba(201,162,40,.25);

  --tr:        280ms cubic-bezier(.4,0,.2,1);
  --tr-spring: 420ms cubic-bezier(.34,1.56,.64,1);
  --tr-slow:   600ms cubic-bezier(.4,0,.2,1);
}

/* ─── RESET ──────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--f-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  padding-bottom: 64px;
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
ul { list-style:none; }

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

/* ─── SR-ONLY ─────────────────────────────────────────── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; }

/* ─── CONTAINER ──────────────────────────────────────── */
.wrap { width:100%; max-width:var(--max-w); margin-inline:auto; padding-inline:var(--px); }

/* ─── REVEAL ANIMATIONS ──────────────────────────────── */
.ru {
  opacity:0;
  transform: translateY(28px);
  transition: opacity .65s ease var(--d,0ms), transform .65s cubic-bezier(.16,1,.3,1) var(--d,0ms);
}
.ru.in { opacity:1; transform:none; }

/* ─── GLOBAL BUTTONS ─────────────────────────────────── */
.btn-cta {
  display: inline-flex; align-items:center; gap:8px;
  background: var(--green);
  color: var(--cream);
  font-family: var(--f-body); font-weight:600; font-size:15px;
  padding: 15px 28px; border-radius:var(--r-full);
  transition: background var(--tr), transform var(--tr), box-shadow var(--tr);
  min-height:48px; white-space:nowrap; letter-spacing:.01em;
}
.btn-cta:hover { background:var(--green-3); transform:translateY(-2px); box-shadow:0 8px 24px rgba(26,46,27,.3); }
.btn-cta:active { transform:scale(.97); }
.btn-cta.btn-lg { padding:18px 36px; font-size:16px; }
.btn-cta-sm {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--green); color:var(--cream);
  font-family:var(--f-body); font-weight:600; font-size:13px;
  padding:10px 20px; border-radius:var(--r-full);
  transition:var(--tr); min-height:40px;
}
.btn-cta-sm:hover { background:var(--green-3); transform:translateY(-1px); }
.btn-cta-outline {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--green);
  font-family:var(--f-body); font-weight:600; font-size:15px;
  padding:14px 28px; border-radius:var(--r-full);
  border:2px solid var(--green);
  transition:var(--tr); min-height:48px; white-space:nowrap;
}
.btn-cta-outline:hover { background:var(--green); color:var(--cream); transform:translateY(-2px); }
.btn-wa {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--wa); color:var(--white);
  font-family:var(--f-body); font-weight:600; font-size:15px;
  padding:15px 28px; border-radius:var(--r-full);
  transition:var(--tr); min-height:48px; white-space:nowrap;
}
.btn-wa:hover { background:#1da851; transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,211,102,.3); }
.btn-wa.btn-lg { padding:18px 36px; font-size:16px; }
.btn-wa.btn-full { width:100%; justify-content:center; }
.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.12); color:var(--white);
  font-family:var(--f-body); font-weight:600; font-size:15px;
  padding:15px 28px; border-radius:var(--r-full);
  border:1.5px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px);
  transition:var(--tr); min-height:48px; white-space:nowrap;
}
.btn-ghost:hover { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.5); transform:translateY(-2px); }
.btn-ghost.btn-lg { padding:18px 36px; font-size:16px; }

/* ─── SECTION LABELS ─────────────────────────────────── */
.sec-tag {
  font-family:var(--f-mono); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-dark);
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:16px;
}
.sec-tag::before { content:''; display:block; width:24px; height:1.5px; background:var(--gold); }
.sec-title {
  font-family:var(--f-display);
  font-size: clamp(30px, 4.5vw, 52px);
  font-weight:700; line-height:1.12;
  color:var(--ink); margin-bottom:16px;
  letter-spacing:-.01em;
}
.sec-title em { font-style:italic; color:var(--green); }
.sec-sub {
  font-size:16px; color:var(--ink-4); max-width:560px;
  line-height:1.75; margin-bottom:52px;
}

/* ─── GOLD ACCENT ────────────────────────────────────── */
.gold { color:var(--gold-dark); }

/* ═══════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════ */
.hdr {
  position:sticky; top:0; z-index:1000;
  background:rgba(245,240,232,.92);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid var(--border);
  transition:box-shadow var(--tr), background var(--tr);
}
.hdr.scrolled { box-shadow:0 4px 32px rgba(26,26,26,.1); background:rgba(245,240,232,.98); }
.hdr-inner {
  max-width:var(--max-w); margin-inline:auto; padding-inline:var(--px);
  height:68px; display:flex; align-items:center; gap:28px;
}
.logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-mark {
  width:40px; height:40px;
  background:var(--green); color:var(--cream);
  border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  transition:var(--tr);
  flex-shrink:0;
}
.logo:hover .logo-mark { background:var(--green-3); }
.logo-name { font-family:var(--f-display); font-size:17px; font-weight:700; color:var(--ink); line-height:1.2; }
.logo-tag  { font-size:10px; color:var(--gold-dark); font-weight:500; letter-spacing:.04em; }
.nav-links { display:none; align-items:center; gap:2px; margin-left:auto; }
.nav-a {
  font-size:14px; font-weight:500; color:var(--ink-3);
  padding:8px 14px; border-radius:var(--r-sm);
  transition:var(--tr);
}
.nav-a:hover,.nav-a.active { color:var(--green); background:rgba(26,46,27,.06); }
.hdr-ctas { display:none; align-items:center; gap:10px; }
.hdr-call {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:500; color:var(--ink-3);
  padding:8px 14px; border:1px solid var(--border);
  border-radius:var(--r-full); transition:var(--tr);
}
.hdr-call:hover { color:var(--green); border-color:var(--green); }

/* Burger */
.burger {
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:40px; height:40px; margin-left:auto; border-radius:var(--r-sm);
  transition:var(--tr);
}
.burger span { display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:var(--tr); }
.burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile nav */
.mob-nav {
  max-height:0; overflow:hidden;
  background:var(--cream);
  border-top:1px solid var(--border-2);
  display:flex; flex-direction:column; gap:2px;
  padding:0 var(--px);
  transition:max-height .4s ease, padding .3s ease;
}
.mob-nav.open { max-height:360px; padding:14px var(--px) 20px; }
.mob-a {
  font-size:16px; font-weight:500; color:var(--ink-3);
  padding:12px 0; border-bottom:1px solid var(--border-2);
  transition:var(--tr);
}
.mob-a:hover { color:var(--green); padding-left:8px; }
.mob-btns { display:flex; gap:10px; margin-top:14px; }
.mob-btns .btn-cta-outline,
.mob-btns .btn-wa { flex:1; justify-content:center; font-size:14px; padding:12px 8px; }

/* ═══════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════ */
.hero {
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* Photo layer */
.hero-img-wrap {
  position:absolute; inset:0;
}
.hero-img {
  width:100%; height:100%;
  object-fit:cover; object-position:center 30%;
}
.hero-overlay {
  position:absolute; inset:0;
  background: linear-gradient(
    160deg,
    rgba(26,46,27,.85) 0%,
    rgba(26,46,27,.75) 40%,
    rgba(26,46,27,.55) 65%,
    rgba(26,46,27,.45) 100%
  );
}

/* Live ticker */
.ticker-wrap {
  position:relative; z-index:2;
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.1);
  padding:10px var(--px);
  font-size:13px; color:rgba(255,255,255,.9); font-weight:500;
}
.ticker-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--gold);
  flex-shrink:0;
  animation:pulse-dot 2s ease infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); box-shadow:0 0 0 0 rgba(201,162,40,.4); }
  50%      { opacity:.7; transform:scale(.85); box-shadow:0 0 0 6px rgba(201,162,40,0); }
}

.hero-grid {
  position:relative; z-index:1;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:40px;
  max-width:var(--max-w); margin-inline:auto;
  padding:52px var(--px) 80px;
  width:100%;
}

/* Hero copy */
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-light); margin-bottom:18px;
}
.eyebrow-pip {
  width:6px; height:6px; border-radius:50%; background:var(--gold);
  animation:pulse-dot 2s ease infinite;
}
.hero-h1 {
  font-family:var(--f-display);
  font-size: clamp(40px,7vw,80px);
  font-weight:700; line-height:1.08;
  color:var(--white); margin-bottom:22px;
  letter-spacing:-.02em;
}
.hero-h1 em { font-style:italic; color:var(--gold-light); }
.hero-sub {
  font-size:16px; color:rgba(255,255,255,.75);
  line-height:1.8; max-width:480px; margin-bottom:28px;
}
.hero-sub strong { color:var(--white); font-weight:600; }

/* Proof chips */
.proof-chips {
  display:flex; flex-wrap:wrap; gap:12px; margin-bottom:28px;
}
.proof-chip {
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r-md);
  padding:12px 16px;
  min-width:80px;
  transition:var(--tr);
}
.proof-chip:hover { background:rgba(255,255,255,.16); border-color:rgba(201,162,40,.4); }
.pc-num {
  font-family:var(--f-display); font-size:22px; font-weight:700;
  color:var(--gold-light); line-height:1;
}
.pc-num span { font-size:14px; }
.pc-lbl { font-size:11px; color:rgba(255,255,255,.55); font-weight:500; margin-top:3px; }

/* Rate teaser */
.rate-teaser {
  display:inline-flex; flex-direction:column;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(201,162,40,.3);
  border-radius:var(--r-md);
  padding:14px 20px;
  backdrop-filter:blur(8px);
}
.rt-label { font-size:11px; color:rgba(255,255,255,.5); font-weight:500; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.rt-rate {
  font-family:var(--f-display);
  font-size:40px; font-weight:700; color:var(--gold-light); line-height:1;
  display:flex; align-items:baseline; gap:4px;
}
.rt-pct { font-size:22px; }
.rt-suffix { font-size:15px; color:rgba(255,255,255,.5); }
.rt-note { font-size:12px; color:rgba(255,255,255,.45); margin-top:6px; }

/* ─── FORM CARD ──────────────────────────────────────── */
.form-card {
  background:var(--white);
  border-radius:var(--r-xl);
  padding:32px 28px;
  box-shadow:var(--sh-form);
  border:1px solid var(--border-2);
  position:relative;
  overflow:hidden;
}
.form-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
}
.fc-head { margin-bottom:22px; }
.fc-title { font-family:var(--f-display); font-size:22px; font-weight:700; color:var(--ink); line-height:1.3; margin-bottom:4px; }
.fc-sub { font-size:13px; color:var(--ink-5); }

/* Phone input step 1 */
.step1-form { display:flex; flex-direction:column; gap:14px; }
.phone-input-wrap {
  display:flex; align-items:center;
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:border-color var(--tr), box-shadow var(--tr);
}
.phone-input-wrap:focus-within { border-color:var(--green); box-shadow:0 0 0 3px rgba(26,46,27,.08); }
.phone-prefix {
  padding:0 14px; height:52px; display:flex; align-items:center;
  background:var(--cream-2); color:var(--ink-3);
  font-size:14px; font-weight:600;
  border-right:1.5px solid var(--border);
  flex-shrink:0;
}
.phone-input {
  flex:1; height:52px;
  background:transparent; border:none; outline:none;
  font-size:16px; color:var(--ink);
  padding:0 14px;
  font-family:var(--f-body);
}
.phone-input::placeholder { color:var(--ink-5); }
.btn-step1 {
  width:100%; height:56px; font-size:15px;
  justify-content:center; border-radius:var(--r-md);
  font-weight:700;
}
.fc-trust { font-size:11px; color:var(--ink-5); text-align:center; line-height:1.6; }

/* Alternate contact */
.fc-alt {
  display:flex; align-items:center; justify-content:center; gap:12px;
  font-size:12px; color:var(--ink-5); margin-top:4px;
}
.fc-alt-link {
  font-size:13px; font-weight:600; color:var(--green);
  padding:6px 12px; border:1px solid var(--border);
  border-radius:var(--r-full); transition:var(--tr);
}
.fc-alt-link:hover { background:var(--green); color:var(--cream); border-color:var(--green); }

/* Mini social proof */


/* Step 2 */
.step2-back { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.back-btn { font-size:13px; color:var(--green); font-weight:600; transition:var(--tr); padding:4px 0; }
.back-btn:hover { opacity:.7; }
.step2-progress { font-family:var(--f-mono); font-size:11px; color:var(--ink-5); letter-spacing:.08em; }

/* Form fields */
.fg { margin-bottom:14px; }
.fl {
  display:block; font-size:11px; font-weight:600;
  color:var(--ink-4); letter-spacing:.05em; text-transform:uppercase;
  margin-bottom:6px;
}
.req { color:var(--error); }
.fi {
  width:100%; height:50px;
  background:var(--cream); border:1.5px solid var(--border);
  border-radius:var(--r-sm); color:var(--ink);
  font-size:15px; font-family:var(--f-body);
  padding:0 14px; transition:var(--tr);
  -webkit-appearance:none; appearance:none;
}
.fi::placeholder { color:var(--ink-5); }
.fi:focus { outline:none; border-color:var(--green); background:var(--white); box-shadow:0 0 0 3px rgba(26,46,27,.07); }
.fi.err { border-color:var(--error); }
.fi-sel {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%234A4A4A' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:40px; cursor:pointer;
}
.fi-sel option { background:var(--white); color:var(--ink); }
.field-err { display:block; font-size:11px; color:var(--error); margin-top:4px; min-height:16px; }

/* Employment toggle */
.emp-tog { display:flex; border-radius:var(--r-sm); overflow:hidden; border:1.5px solid var(--border); }
.emp-r { position:absolute; opacity:0; pointer-events:none; }
.emp-l {
  flex:1; text-align:center; padding:13px 8px;
  font-size:14px; font-weight:500; color:var(--ink-4);
  background:var(--cream); cursor:pointer; transition:var(--tr);
  display:flex; align-items:center; justify-content:center; gap:6px;
  min-height:50px;
}
.emp-l:first-of-type { border-right:1.5px solid var(--border); }
.emp-r:checked + .emp-l { background:var(--green); color:var(--cream); font-weight:600; }

/* Submit btn */
.btn-submit { width:100%; height:56px; font-size:15px; justify-content:center; border-radius:var(--r-md); font-weight:700; }
.btn-def { display:inline; }
.btn-load { display:none; align-items:center; gap:8px; }
.btn-submit.loading .btn-def { display:none; }
.btn-submit.loading .btn-load { display:inline-flex; }
.btn-submit.loading { opacity:.85; pointer-events:none; }
.spin { width:16px; height:16px; border:2px solid rgba(245,240,232,.3); border-top-color:var(--cream); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Thank you */
.ty-wrap { text-align:center; padding:8px 0; }
.ty-icon { font-size:52px; display:block; margin-bottom:14px; animation:bounce-in .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes bounce-in { 0%{transform:scale(0);} 80%{transform:scale(1.1);} 100%{transform:scale(1);} }
.ty-title { font-family:var(--f-display); font-size:28px; font-weight:700; color:var(--ink); margin-bottom:10px; }
.ty-body { font-size:15px; color:var(--ink-4); line-height:1.7; margin-bottom:22px; }

/* Scroll cue */
.scroll-cue {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  opacity:.5; z-index:2; transition:opacity .3s;
}
.scroll-line { width:1px; height:36px; background:linear-gradient(to bottom, rgba(255,255,255,.6), transparent); animation:sc-pulse 2s ease infinite; }
@keyframes sc-pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }
.scroll-cue span { font-family:var(--f-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); }

/* ═══════════════════════════════════════════════════════
   TRUST BAR
   ═══════════════════════════════════════════════════════ */
.trust-bar {
  background:var(--green);
  padding:36px 0;
}
.tb-inner {
  max-width:var(--max-w); margin-inline:auto; padding-inline:var(--px);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:20px;
}
.tb-stat { text-align:center; flex:1; min-width:100px; }
.tb-num {
  font-family:var(--f-display); font-size:36px; font-weight:700;
  color:var(--gold-light); line-height:1; margin-bottom:6px;
}
.tb-lbl { font-size:12px; color:rgba(245,240,232,.55); font-weight:500; }
.tb-div { width:1px; height:40px; background:rgba(255,255,255,.1); flex-shrink:0; }

/* ═══════════════════════════════════════════════════════
   RATE COMPARISON
   ═══════════════════════════════════════════════════════ */
.compare-section {
  padding-block:var(--sec-py);
  background:var(--white);
}
.compare-table {
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--sh-card);
  margin-bottom:36px;
}
.ct-head {
  display:grid; grid-template-columns:2fr 1fr 1.2fr 1.4fr;
  padding:14px 24px;
  background:var(--cream-2);
  border-bottom:1.5px solid var(--border);
  font-size:11px; font-weight:600;
  color:var(--ink-4); letter-spacing:.06em; text-transform:uppercase;
}
.ct-row {
  display:grid; grid-template-columns:2fr 1fr 1.2fr 1.4fr;
  padding:18px 24px;
  border-bottom:1px solid var(--border-2);
  align-items:center;
  transition:background var(--tr);
}
.ct-row:last-of-type { border-bottom:none; }
.ct-row:hover { background:var(--cream); }
.ct-highlight {
  background:linear-gradient(90deg, rgba(26,46,27,.04), rgba(26,46,27,.02));
  border-left:3px solid var(--green);
  border-bottom:1px solid rgba(26,46,27,.1);
}
.ct-highlight:hover { background:linear-gradient(90deg, rgba(26,46,27,.06), rgba(26,46,27,.03)); }
.ct-name { font-weight:700; font-size:14px; color:var(--ink); display:flex; align-items:center; gap:8px; }
.ct-note { font-size:11px; color:var(--ink-5); margin-top:2px; }
.ct-badge {
  font-family:var(--f-mono); font-size:9px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  background:var(--green); color:var(--cream);
  padding:2px 8px; border-radius:var(--r-full);
}
.ct-rate-best {
  font-family:var(--f-display); font-size:20px; font-weight:700;
  color:var(--green);
}
.ct-col { font-size:14px; color:var(--ink-3); }
.ct-total { font-weight:600; }
.ct-save { display:flex; flex-direction:column; gap:4px; }
.save-badge {
  display:inline-block; font-size:11px; font-weight:700;
  background:rgba(26,46,27,.1); color:var(--green);
  padding:3px 8px; border-radius:var(--r-full);
}
.ct-foot {
  padding:12px 24px;
  background:var(--cream-2);
  border-top:1.5px solid var(--border);
  font-size:11px; color:var(--ink-5);
}
.compare-cta { text-align:center; }

/* ═══════════════════════════════════════════════════════
   PRODUCTS
   ═══════════════════════════════════════════════════════ */
.products-section { padding-block:var(--sec-py); background:var(--cream); }
.prod-grid { display:grid; grid-template-columns:1fr; gap:24px; }
.prod-card {
  background:var(--white);
  border-radius:var(--r-xl);
  overflow:hidden;
  border:1.5px solid var(--border-2);
  box-shadow:var(--sh-card);
  transition:transform var(--tr), box-shadow var(--tr);
}
.prod-card:hover { transform:translateY(-6px); box-shadow:var(--sh-card-h); }
.prod-card-dark { background:var(--green); }
.prod-card-dark .prod-title,
.prod-card-dark .prod-desc,
.prod-card-dark .ps-k { color:rgba(245,240,232,.8) !important; }
.prod-card-dark .prod-body { background:var(--green); }
.prod-card-dark .ps-v { color:var(--cream) !important; }
.prod-card-dark .prod-specs { border-color:rgba(255,255,255,.1) !important; }
.prod-card-dark .ps-item { border-color:rgba(255,255,255,.08) !important; }

.prod-photo-wrap { position:relative; height:220px; overflow:hidden; }
.prod-photo { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.prod-card:hover .prod-photo { transform:scale(1.04); }
.prod-photo-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 60%);
  display:flex; align-items:flex-end; padding:16px;
}
.prod-rate-badge {
  font-family:var(--f-display); font-size:18px; font-weight:700;
  color:var(--white);
  background:rgba(201,162,40,.9);
  padding:6px 14px; border-radius:var(--r-full);
  backdrop-filter:blur(4px);
}
.prod-body { padding:28px; }
.prod-tag {
  font-family:var(--f-mono); font-size:10px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--green); background:rgba(26,46,27,.08);
  display:inline-block; padding:4px 10px; border-radius:var(--r-full);
  margin-bottom:14px;
}
.prod-tag-gold { color:var(--gold-dark); background:rgba(201,162,40,.12); }
.prod-title {
  font-family:var(--f-display); font-size:26px; font-weight:700;
  color:var(--ink); line-height:1.2; margin-bottom:10px;
}
.prod-desc { font-size:14px; color:var(--ink-4); line-height:1.75; margin-bottom:20px; }
.prod-specs {
  border-top:1.5px solid var(--border-2); border-bottom:1.5px solid var(--border-2);
  padding:12px 0; margin-bottom:20px;
}
.ps-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 0; border-bottom:1px solid var(--border-2);
}
.ps-item:last-child { border-bottom:none; }
.ps-k { font-size:12px; color:var(--ink-5); font-weight:500; }
.ps-v { font-size:14px; font-weight:600; color:var(--ink); }
.prod-cta { width:100%; justify-content:center; }

/* ═══════════════════════════════════════════════════════
   CALCULATOR
   ═══════════════════════════════════════════════════════ */
.calc-section { padding-block:var(--sec-py); background:var(--white); }
.calc-wrap {
  background:var(--cream);
  border:1.5px solid var(--border);
  border-radius:var(--r-xl);
  overflow:hidden;
}
.calc-tabs {
  display:flex; border-bottom:1.5px solid var(--border);
  position:relative; padding:0 24px; gap:0; background:var(--white);
}
.c-tab {
  padding:17px 24px; font-size:14px; font-weight:600;
  color:var(--ink-4); transition:color var(--tr);
  position:relative; z-index:1;
}
.c-tab.active { color:var(--green); }
.c-tab-bar {
  position:absolute; bottom:-1.5px; left:24px;
  height:2px; background:var(--green);
  transition:transform var(--tr), width var(--tr);
  border-radius:var(--r-full);
}

.c-panel { display:none; }
.c-panel.active { display:block; }
.calc-body { display:grid; grid-template-columns:1fr; gap:28px; padding:28px 24px; }
.c-field { margin-bottom:20px; }
.c-fhead { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.c-label { font-size:13px; font-weight:600; color:var(--ink-3); }
.c-val {
  font-family:var(--f-mono); font-size:13px; font-weight:500;
  color:var(--green); background:rgba(26,46,27,.07);
  padding:4px 12px; border-radius:var(--r-full);
}
.slider-row { position:relative; height:20px; display:flex; align-items:center; }
.c-slider {
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px;
  background:rgba(26,26,26,.12); border-radius:var(--r-full);
  outline:none; cursor:pointer; position:relative; z-index:2;
}
.c-slider::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:var(--green); cursor:pointer;
  border:3px solid var(--cream); 
  box-shadow:0 0 0 2px var(--green), 0 4px 12px rgba(26,46,27,.3);
  transition:transform var(--tr-spring);
}
.c-slider::-webkit-slider-thumb:hover { transform:scale(1.2); }
.c-slider::-moz-range-thumb {
  width:22px; height:22px; border-radius:50%;
  background:var(--green); border:3px solid var(--cream); cursor:pointer;
}
.slider-fill {
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  height:4px; background:linear-gradient(90deg, var(--green), var(--green-light));
  border-radius:var(--r-full); pointer-events:none; z-index:1;
}
.c-range { display:flex; justify-content:space-between; font-size:11px; color:var(--ink-5); margin-top:6px; }
.c-text-input {
  width:100%; height:50px;
  background:var(--white); border:1.5px solid var(--border);
  border-radius:var(--r-sm); color:var(--ink);
  font-size:15px; font-family:var(--f-body); padding:0 14px;
  transition:var(--tr);
}
.c-text-input::placeholder { color:var(--ink-5); }
.c-text-input:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(26,46,27,.07); }

/* EMI result */
.emi-hero {
  background:var(--green); color:var(--cream);
  border-radius:var(--r-lg); padding:28px 24px;
  text-align:center; margin-bottom:16px;
}
.emi-label { font-size:12px; color:rgba(245,240,232,.6); font-weight:500; text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.emi-amount { font-family:var(--f-display); font-size:48px; font-weight:700; color:var(--gold-light); line-height:1; margin-bottom:8px; }
.emi-sub { font-size:12px; color:rgba(245,240,232,.5); }
.emi-breakdown { background:var(--white); border-radius:var(--r-md); padding:16px; margin-bottom:16px; border:1.5px solid var(--border-2); }
.eb-item { margin-bottom:14px; }
.eb-item:last-child { margin-bottom:0; }
.eb-bar-wrap { height:6px; background:var(--cream-3); border-radius:var(--r-full); overflow:hidden; margin-bottom:8px; }
.eb-bar { height:100%; border-radius:var(--r-full); transition:width 1s cubic-bezier(.4,0,.2,1); }
.eb-bar-p { background:var(--green); }
.eb-bar-i { background:var(--gold); }
.eb-detail { display:flex; align-items:center; gap:8px; }
.eb-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.eb-dot-p { background:var(--green); }
.eb-dot-i { background:var(--gold); }
.eb-lbl { font-size:13px; color:var(--ink-4); flex:1; }
.eb-val { font-family:var(--f-mono); font-size:14px; font-weight:500; color:var(--ink); }
.eb-total { font-size:13px; color:var(--ink-4); padding-top:12px; border-top:1px solid var(--border-2); margin-top:12px; }
.eb-total strong { color:var(--ink); font-weight:700; }
.calc-nudge {
  background:rgba(201,162,40,.08); border:1px solid rgba(201,162,40,.2);
  border-radius:var(--r-md); padding:14px 16px; text-align:center;
}
.calc-nudge p { font-size:13px; color:var(--ink-3); margin-bottom:10px; }

/* Eligibility */
.calc-body-elig { grid-template-columns:1fr; }
.elig-inputs { display:flex; flex-direction:column; gap:18px; }
.elig-result {
  background:var(--white); border:1.5px solid rgba(26,46,27,.15);
  border-radius:var(--r-lg); padding:28px 20px; text-align:center;
  margin-top:20px; animation:slide-up .4s ease;
}
@keyframes slide-up { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:none;} }
.er-label { font-size:14px; color:var(--ink-4); margin-bottom:8px; }
.er-amount { font-family:var(--f-display); font-size:44px; font-weight:700; color:var(--green); display:block; margin-bottom:8px; }
.er-note { font-size:13px; color:var(--ink-5); margin-bottom:20px; }

/* ═══════════════════════════════════════════════════════
   HOW IT WORKS
   ═══════════════════════════════════════════════════════ */
.how-section { padding-block:var(--sec-py); background:var(--cream); }
.how-steps { display:flex; flex-direction:column; gap:0; }
.how-step {
  background:var(--white); border:1.5px solid var(--border-2);
  border-radius:var(--r-xl); padding:32px 28px;
  position:relative; overflow:hidden;
  transition:transform var(--tr), box-shadow var(--tr), border-color var(--tr);
  margin-bottom:16px;
}
.how-step:hover { transform:translateY(-4px); box-shadow:var(--sh-card-h); border-color:rgba(26,46,27,.2); }
.hs-num {
  position:absolute; top:16px; right:20px;
  font-family:var(--f-display); font-size:72px; font-weight:700;
  color:rgba(26,46,27,.04); line-height:1; pointer-events:none;
}
.hs-icon { font-size:36px; margin-bottom:14px; display:block; }
.hs-title { font-family:var(--f-display); font-size:22px; font-weight:700; color:var(--ink); margin-bottom:10px; }
.hs-body { font-size:14px; color:var(--ink-4); line-height:1.75; margin-bottom:14px; }
.hs-time {
  display:inline-block; font-size:12px; font-weight:600;
  color:var(--green); background:rgba(26,46,27,.08);
  padding:5px 12px; border-radius:var(--r-full);
}
.how-arrow { display:none; }

/* ═══════════════════════════════════════════════════════
   BANKS
   ═══════════════════════════════════════════════════════ */
.banks-section { padding-block:var(--sec-py); background:var(--white); overflow:hidden; }
.marquee-outer { position:relative; overflow:hidden; margin-block:36px; padding-block:10px; }
.mq-fade-l,.mq-fade-r { position:absolute; top:0; bottom:0; width:100px; z-index:2; pointer-events:none; }
.mq-fade-l { left:0;  background:linear-gradient(to right, var(--white), transparent); }
.mq-fade-r { right:0; background:linear-gradient(to left,  var(--white), transparent); }
.mq-track { display:flex; gap:12px; width:max-content; animation:mq 28s linear infinite; }
.mq-track:hover { animation-play-state:paused; }
@keyframes mq { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
.bank-chip {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--cream); border:1.5px solid var(--border);
  border-radius:var(--r-md); padding:12px 18px;
  min-width:88px; height:62px;
  transition:var(--tr); cursor:default;
}
.bank-chip:hover { background:var(--green); border-color:var(--green); }
.bank-chip:hover .bc-abbr { color:var(--cream); }
.bank-chip:hover .bc-name { color:rgba(245,240,232,.6); }
.bc-abbr { font-family:var(--f-display); font-size:14px; font-weight:700; color:var(--ink); line-height:1; }
.bc-name { font-size:9px; color:var(--ink-5); margin-top:4px; white-space:nowrap; }
.bc-more .bc-abbr { color:var(--gold-dark); }
.banks-note { font-size:14px; color:var(--ink-4); text-align:center; max-width:520px; margin-inline:auto; line-height:1.75; }

/* ═══════════════════════════════════════════════════════
   WHY CHOOSE US
   ═══════════════════════════════════════════════════════ */
.why-section { padding-block:var(--sec-py); background:var(--cream); }
.why-grid { display:grid; grid-template-columns:1fr; gap:20px; }
.why-card {
  background:var(--white); border:1.5px solid var(--border-2);
  border-radius:var(--r-xl); padding:32px 28px;
  position:relative; overflow:hidden;
  transition:transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.why-card:hover { transform:translateY(-5px); box-shadow:var(--sh-card-h); border-color:rgba(26,46,27,.15); }
.wc-num {
  position:absolute; top:16px; right:20px;
  font-family:var(--f-display); font-size:64px; font-weight:700;
  color:rgba(26,26,26,.04); line-height:1; pointer-events:none;
}
.wc-icon { font-size:36px; display:block; margin-bottom:14px; }
.wc-title { font-family:var(--f-display); font-size:22px; font-weight:700; color:var(--ink); margin-bottom:10px; line-height:1.3; }
.wc-body { font-size:14px; color:var(--ink-4); line-height:1.75; margin-bottom:16px; }
.wc-proof {
  display:inline-block; font-size:12px; font-weight:700;
  color:var(--green); background:rgba(26,46,27,.08);
  border:1px solid rgba(26,46,27,.12);
  padding:5px 14px; border-radius:var(--r-full);
}

/* ═══════════════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════════════ */
.testi-section { padding-block:var(--sec-py); background:var(--white); }
.testi-grid { display:grid; grid-template-columns:1fr; gap:20px; margin-bottom:40px; }
.tc {
  background:var(--cream); border:1.5px solid var(--border-2);
  border-radius:var(--r-xl); padding:28px;
  transition:transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.tc:hover { transform:translateY(-4px); box-shadow:var(--sh-card-h); border-color:rgba(26,46,27,.15); }
.tc-featured {
  background:var(--green);
  border-color:transparent;
}
.tc-featured .tc-stars { color:var(--gold-light); }
.tc-featured .tc-quote { color:rgba(245,240,232,.9); }
.tc-featured .tc-name { color:var(--cream); }
.tc-featured .tc-loc { color:rgba(245,240,232,.5); }
.tc-featured .tc-badge-loan { background:rgba(201,162,40,.2); color:var(--gold-light); }
.tc-stars { color:var(--gold); font-size:15px; letter-spacing:2px; margin-bottom:12px; }
.tc-quote {
  font-family:var(--f-display); font-size:16px; font-weight:400;
  color:var(--ink-2); line-height:1.8; margin-bottom:20px; font-style:italic;
}
.tc-person { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.tc-photo { width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid rgba(255,255,255,.8); }
.tc-name { font-weight:700; font-size:14px; color:var(--ink); }
.tc-loc { font-size:12px; color:var(--ink-5); margin-top:2px; }
.tc-badge-loan {
  margin-left:auto; font-size:10px; font-weight:700; font-family:var(--f-mono);
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--green); background:rgba(26,46,27,.1);
  padding:3px 10px; border-radius:var(--r-full);
}
.tc-badge-lap { color:var(--gold-dark); background:rgba(201,162,40,.12); }
.testi-cta { text-align:center; }

/* ═══════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════ */
.faq-section { padding-block:var(--sec-py); background:var(--cream); }
.faq-list { max-width:760px; margin-inline:auto; }
.faq-item { border-bottom:1.5px solid var(--border); }
.faq-item:first-child { border-top:1.5px solid var(--border); }
.faq-q {
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 0;
  font-size:15px; font-weight:600; color:var(--ink-2);
  cursor:pointer; list-style:none; gap:16px; min-height:56px;
  transition:color var(--tr);
}
.faq-q::-webkit-details-marker { display:none; }
.faq-q::after {
  content:'+'; font-size:22px; font-weight:300;
  color:var(--green); flex-shrink:0; line-height:1; transition:transform .3s;
}
details[open] > .faq-q { color:var(--green); }
details[open] > .faq-q::after { content:'−'; }
.faq-a { padding:0 0 20px; animation:slide-up .3s ease; }
.faq-a p { font-size:14px; color:var(--ink-4); line-height:1.85; }

/* ═══════════════════════════════════════════════════════
   FINAL CTA
   ═══════════════════════════════════════════════════════ */
.fcta-section { position:relative; overflow:hidden; padding-block:120px; text-align:center; }
.fcta-photo-wrap { position:absolute; inset:0; }
.fcta-photo { width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.fcta-overlay {
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(26,46,27,.88) 0%, rgba(26,46,27,.78) 100%);
}
.fcta-inner { position:relative; z-index:1; }
.fcta-badge {
  display:inline-block; font-family:var(--f-mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-light); background:rgba(201,162,40,.15);
  border:1px solid rgba(201,162,40,.3);
  padding:6px 18px; border-radius:var(--r-full); margin-bottom:24px;
}
.fcta-title {
  font-family:var(--f-display); font-size:clamp(32px,5vw,60px);
  font-weight:700; color:var(--white); line-height:1.15; margin-bottom:18px;
}
.fcta-title em { font-style:italic; color:var(--gold-light); }
.fcta-body { font-size:16px; color:rgba(255,255,255,.65); line-height:1.75; max-width:560px; margin-inline:auto; margin-bottom:36px; }
.fcta-btns { display:flex; flex-direction:column; gap:12px; max-width:420px; margin-inline:auto; margin-bottom:24px; }
.fcta-chips {
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:8px 20px; font-size:13px; color:rgba(255,255,255,.45);
}

/* ═══════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════ */
.footer { background:var(--green); }
.footer-top { padding-block:56px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-grid {
  display:grid; grid-template-columns:1fr; gap:40px;
}
.footer-logo { margin-bottom:16px; }
.footer-logo .logo-name { color:var(--cream); }
.footer-logo .logo-tag { color:var(--gold-light); }
.footer-logo .logo-mark { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); }
.footer-about { font-size:13px; color:rgba(245,240,232,.5); line-height:1.75; max-width:260px; margin-bottom:20px; }
.footer-contacts { display:flex; flex-direction:column; gap:8px; }
.footer-c { font-size:14px; color:rgba(245,240,232,.7); font-weight:500; transition:color var(--tr); }
.footer-c:hover { color:var(--gold-light); }
.flc-title {
  font-family:var(--f-mono); font-size:10px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:rgba(245,240,232,.35); margin-bottom:14px;
}
.footer-links-col { display:flex; flex-direction:column; gap:10px; }
.fl-link { font-size:14px; color:rgba(245,240,232,.55); transition:color var(--tr), padding-left var(--tr); }
.fl-link:hover { color:var(--gold-light); padding-left:6px; }
.footer-city { font-size:12px; color:rgba(245,240,232,.25); margin-top:8px; }
.footer-disc { padding-block:24px; }
.disc-text { font-size:11px; color:rgba(245,240,232,.3); line-height:1.9; margin-bottom:16px; }
.disc-bottom { display:flex; flex-direction:column; gap:10px; }
.disc-bottom span { font-size:12px; color:rgba(245,240,232,.25); }
.disc-links { display:flex; gap:16px; }
.disc-a { font-size:12px; color:rgba(245,240,232,.35); text-decoration:underline; text-underline-offset:3px; transition:color var(--tr); }
.disc-a:hover { color:var(--gold-light); }

/* ─── FLOATING WA (desktop only) ────────────────────── */
.float-wa {
  position:fixed; bottom:28px; right:24px;
  display:none;
  align-items:center; gap:8px;
  background:var(--wa); color:var(--white);
  padding:12px 18px 12px 14px;
  border-radius:var(--r-full);
  box-shadow:0 8px 32px rgba(37,211,102,.35);
  z-index:9999; font-weight:700; font-size:14px;
  transition:transform var(--tr-spring), box-shadow var(--tr);
}
.float-wa:hover { transform:translateY(-4px) scale(1.04); box-shadow:0 16px 40px rgba(37,211,102,.4); }

/* ─── MOBILE STICKY BAR ──────────────────────────────── */
.mob-bar {
  position:fixed; bottom:0; left:0; right:0;
  height:64px; display:flex;
  background:var(--white);
  border-top:1.5px solid var(--border);
  box-shadow:0 -4px 24px rgba(26,26,26,.1);
  z-index:9999;
  padding-bottom:env(safe-area-inset-bottom);
}
.mb-btn {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; font-size:10px; font-weight:600; color:var(--ink-4);
  font-family:var(--f-body); letter-spacing:.03em;
  transition:var(--tr); min-height:44px;
}
.mb-btn:active { transform:scale(.95); background:var(--cream); }
.mb-call { color:var(--ink-3); }
.mb-wa { background:var(--green); color:var(--cream); font-weight:700; }
.mb-wa svg { fill:var(--cream); }
.mb-apply { color:var(--green); }

/* ─── FOCUS ──────────────────────────────────────────── */
:focus-visible { outline:2px solid var(--green); outline-offset:3px; border-radius:4px; }


/* ── SOCIAL PROOF AVATARS — definitive single ruleset ──────────
   Prevents avatar images overlapping the text on all screen sizes
   ──────────────────────────────────────────────────────────── */
.form-social-proof {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--cream);
  border-radius: var(--r-md);
  margin-top: 14px;
  overflow: hidden; /* safety clip */
}
.fsp-avatars {
  display: flex;
  align-items: center;
  flex-shrink: 0;        /* never compress avatar group */
  min-width: 74px;       /* 4×24px - 3×6px overlap = ~78px — reserve space */
}
.fsp-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--white);
  margin-left: -6px;
  object-fit: cover;
  flex-shrink: 0;
  position: relative;
}
.fsp-av:first-child { margin-left: 0; }
.fsp-text {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
  flex: 1;
  min-width: 0;          /* allows text to wrap, never pushes avatars */
  word-break: break-word;
}
.fsp-text strong { color: var(--ink); font-weight: 600; }

@media (max-width: 768px) {
  .form-social-proof {
    gap: 8px;
    padding: 10px 12px;
    align-items: center;
  }
  .fsp-avatars {
    min-width: 68px; /* 4×22px - 3×5px = ~73px */
  }
  .fsp-av {
    width: 22px;
    height: 22px;
    margin-left: -5px;
    border-width: 1.5px;
  }
  .fsp-av:first-child { margin-left: 0; }
  .fsp-text {
    font-size: 11px;
    line-height: 1.45;
  }
}

/* ═══════════════════════════════════════════════════════
   TABLET 769px+
   ═══════════════════════════════════════════════════════ */
@media (min-width:769px) {
  body { padding-bottom:0; }
  .mob-bar { display:none; }
  .float-wa { display:flex; }
  .burger { display:none; }
  .nav-links { display:flex; }
  .hdr-ctas { display:flex; }
  .mob-nav { display:none !important; }

  .hero-grid { flex-direction:row; align-items:center; padding-block:80px; }
  .hero-copy { flex:1.1; }
  .hero-form-col { flex:.9; }
  .scroll-cue { display:flex; }

  .prod-grid { grid-template-columns:1fr 1fr; }
  .why-grid { grid-template-columns:1fr 1fr; }
  .testi-grid { grid-template-columns:1fr 1fr 1fr; }

  .how-steps { flex-direction:row; gap:0; align-items:stretch; }
  .how-step { flex:1; margin-bottom:0; }
  .how-arrow { display:flex; align-items:center; padding:0 10px; font-size:24px; color:var(--green); opacity:.3; flex-shrink:0; }

  .calc-body { grid-template-columns:1fr 1fr; }

  .footer-grid { grid-template-columns:2fr 1fr 1fr 1fr; }
  .disc-bottom { flex-direction:row; justify-content:space-between; align-items:center; }

  .fcta-btns { flex-direction:row; flex-wrap:wrap; justify-content:center; max-width:600px; }
  .tb-div { display:block; }
}

/* ═══════════════════════════════════════════════════════
   DESKTOP 1025px+
   ═══════════════════════════════════════════════════════ */
@media (min-width:1025px) {
  :root { --px:40px; }

  .ct-head,
  .ct-row { grid-template-columns:2.2fr 1fr 1.2fr 1.6fr; }
}

/* ═══════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .ru { opacity:1; transform:none; }
}


/* ═══════════════════════════════════════════════════════
   MOBILE — COMPREHENSIVE FIX (≤768px)
   Covers: hero overlap · spacing · table · trust bar ·
   testimonials · FAQ · calculator · FCTA · section padding
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── GLOBAL SPACING ─────────────────────────────────── */
  /* Reduce massive 96px section padding to 56px on mobile */
  :root {
    --sec-py: 56px;
    --px: 18px;
  }

  /* sec-sub has 52px bottom margin — reduce */
  .sec-sub { margin-bottom: 32px; font-size: 15px; }

  /* ── BODY ────────────────────────────────────────────── */
  body { padding-bottom: 64px; }

  /* ── HERO ────────────────────────────────────────────── */
  .hero {
    min-height: auto;
    display: block;
    overflow: visible;
  }

  /* Photo covers the form area on mobile */
  .hero-img-wrap {
    position: absolute;
    top: 0; left: 0; right: 0;
    bottom: auto;
    height: 480px;
  }

  /* Gradient fades to cream at bottom */
  .hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(26,46,27,.92) 0%,
      rgba(26,46,27,.88) 50%,
      rgba(26,46,27,.98) 82%,
      rgba(245,240,232,1.0) 100%
    );
  }

  /* Ticker */
  .ticker-wrap {
    position: relative;
    z-index: 2;
    font-size: 12px;
    padding: 10px 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ticker-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Hero grid: FORM first, copy below */
  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    position: relative;
    z-index: 1;
  }

  /* FORM first on mobile — sits on top of photo */
  .hero-form-col {
    order: 1;
    position: relative;
    z-index: 2;
    background: transparent;
    padding: 16px 18px 24px;
  }

  /* Form card: gold top accent, strong shadow on dark bg */
  .form-card {
    border-top: 3px solid var(--gold);
    border-radius: 12px;
    box-shadow: 0 4px 32px rgba(0,0,0,.35);
  }

  /* Hero copy: below form, on cream bg */
  .hero-copy {
    order: 2;
    position: relative;
    z-index: 2;
    background: var(--cream);
    padding: 28px 18px 20px;
    min-height: auto;
  }

  /* H1 — compact since it's secondary on mobile */
  .hero-h1 {
    font-size: clamp(28px, 7.5vw, 38px);
    margin-bottom: 12px;
  }

  /* Sub text */
  .hero-sub {
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 16px;
    max-width: 100%;
  }

  /* Proof chips: horizontal scroll row */
  .proof-chips {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .proof-chips::-webkit-scrollbar { display: none; }
  .proof-chip {
    min-width: 88px;
    flex-shrink: 0;
    padding: 8px 10px;
  }
  .pc-num { font-size: 17px; }
  .pc-lbl { font-size: 9.5px; }

  /* Rate teaser: compact */
  .rate-teaser {
    display: inline-flex;
    padding: 10px 14px;
    margin-top: 4px;
  }
  .rt-rate { font-size: 28px; }
  .rt-pct  { font-size: 16px; }

  /* ── HERO COPY TEXT: dark colours on cream background ──
     hero-copy is now on cream bg (order:2) so all white/transparent
     text colours must switch to dark ink                    */
  .hero-eyebrow        { color: var(--gold-dark); }
  .hero-h1             { color: var(--green); }
  .hero-h1 em          { color: var(--gold); }
  .hero-sub            { color: var(--ink-2); }
  .hero-sub strong     { color: var(--ink); }

  .proof-chip {
    background: rgba(26,46,27,.06);
    border: 1px solid rgba(26,46,27,.12);
    backdrop-filter: none;
  }
  .proof-chip:hover    { background: rgba(26,46,27,.10); }
  .pc-num              { color: var(--green); }
  .pc-lbl              { color: var(--ink-3); }

  .rate-teaser {
    background: rgba(201,162,40,.08);
    border: 1px solid rgba(201,162,40,.3);
    backdrop-filter: none;
  }
  .rt-label  { color: var(--ink-4); }
  .rt-suffix { color: var(--ink-4); }
  .rt-note   { color: var(--ink-3); }

  /* Form card internals */
  .fc-title { font-size: 18px; line-height: 1.35; }
  .fc-sub   { font-size: 12px; }

  .phone-input-wrap { border-radius: 10px; }
  .phone-input { font-size: 16px; }

  .btn-step1 { font-size: 14px; height: 52px; }

  .fc-alt {
    font-size: 11px;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .fc-alt-link { font-size: 12px; padding: 7px 14px; }

  /* Step 2 */
  .fl { font-size: 10px; }
  .fi { font-size: 16px; height: 52px; }
  .fi-sel { font-size: 16px; }
  .emp-l { font-size: 13px; padding: 12px 6px; }
  .btn-submit { height: 52px; font-size: 14px; }

  /* Scroll cue: hide on mobile */
  .scroll-cue { display: none; }

  /* ── TRUST BAR ───────────────────────────────────────── */
  /* Stack trust stats in 2×3 grid on mobile */
  .tb-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
    justify-items: center;
  }
  /* Hide all dividers on mobile */
  .tb-div { display: none !important; }
  .tb-num { font-size: 28px; }
  .tb-lbl { font-size: 11px; }

  /* ── RATE COMPARISON TABLE ───────────────────────────── */
  /* Collapse 4-col table to a card-per-row layout */
  .compare-table {
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  /* Hide desktop table header */
  .ct-head { display: none; }

  /* Each row becomes a stacked card */
  .ct-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border-bottom: 1px solid var(--border-2);
  }
  .ct-row:last-of-type { border-bottom: none; }

  /* Bank name stays full width */
  .ct-col.ct-bank { font-size: 15px; }
  .ct-name { font-size: 14px; font-weight: 700; }
  .ct-note { font-size: 11px; }

  /* Rate, EMI, Total — inline row of 3 */
  .ct-col:not(.ct-bank) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
  }
  /* Add labels before values */
  .ct-row .ct-col:nth-child(2)::before { content: 'Rate: ';  font-size: 11px; color: var(--ink-5); font-weight: 500; }
  .ct-row .ct-col:nth-child(3)::before { content: 'EMI: ';   font-size: 11px; color: var(--ink-5); font-weight: 500; }
  .ct-row .ct-col:nth-child(4)::before { content: 'Total: '; font-size: 11px; color: var(--ink-5); font-weight: 500; }

  /* Highlighted row on mobile */
  .ct-highlight {
    border-left-width: 4px;
    background: rgba(26,46,27,.04);
  }
  .ct-rate-best { font-size: 16px; }

  .save-badge {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    padding: 4px 10px;
  }

  .ct-save { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }

  .ct-foot { font-size: 10px; padding: 10px 16px; }

  /* ── PRODUCTS SECTION ────────────────────────────────── */
  .prod-body { padding: 20px; }
  .prod-title { font-size: 22px; }
  .prod-photo-wrap { height: 180px; }

  /* ── CALCULATOR ──────────────────────────────────────── */
  /* Tabs: full width, equal split */
  .calc-tabs { padding: 0 16px; }
  .c-tab { padding: 14px 12px; font-size: 13px; flex: 1; text-align: center; }

  .calc-body { padding: 20px 16px; gap: 0; }

  /* Slider thumb bigger on mobile */
  .c-slider::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
  }
  .c-slider { height: 6px; } /* Thicker track = easier to tap */

  .emi-amount { font-size: 38px; }
  .emi-hero   { padding: 20px 16px; }

  /* Eligibility result */
  .er-amount { font-size: 36px; }

  /* ── HOW IT WORKS ────────────────────────────────────── */
  .how-step { padding: 24px 20px; }
  .hs-num   { font-size: 52px; }
  .hs-title { font-size: 19px; }
  .hs-body  { font-size: 13px; }

  /* ── BANK CHIPS ──────────────────────────────────────── */
  .bank-chip { min-width: 76px; height: 54px; padding: 10px 14px; }
  .bc-abbr   { font-size: 13px; }

  /* ── WHY CHOOSE US ───────────────────────────────────── */
  .why-card { padding: 24px 20px; }
  .wc-title { font-size: 19px; }
  .wc-num   { font-size: 48px; }

  /* ── TESTIMONIALS ────────────────────────────────────── */
  .tc { padding: 20px; }
  .tc-quote { font-size: 15px; line-height: 1.75; }

  /* Person row: wrap badge to new line cleanly */
  .tc-person {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 4px 10px;
    align-items: start;
  }
  .tc-photo {
    grid-row: 1 / 3;
    align-self: center;
  }
  .tc-name { grid-column: 2; align-self: end; }
  .tc-loc  { grid-column: 2; font-size: 11px; }
  .tc-badge-loan {
    grid-column: 1 / 3;
    margin-left: 0;
    margin-top: 8px;
    display: inline-block;
    width: fit-content;
  }

  /* ── FAQ ─────────────────────────────────────────────── */
  .faq-q {
    font-size: 14px;
    padding: 16px 0;
    gap: 12px;
    line-height: 1.5;
    min-height: 52px;
  }
  .faq-q::after { font-size: 20px; }
  .faq-a p { font-size: 13px; line-height: 1.8; }

  /* ── FINAL CTA ───────────────────────────────────────── */
  .fcta-section { padding-block: 72px; }
  .fcta-title   { font-size: clamp(26px, 7vw, 38px); }
  .fcta-body    { font-size: 14px; margin-bottom: 28px; }
  .fcta-btns    {
    flex-direction: column;
    max-width: 100%;
    gap: 10px;
  }
  .fcta-btns .btn-cta,
  .fcta-btns .btn-wa,
  .fcta-btns .btn-ghost {
    width: 100%;
    justify-content: center;
    font-size: 14px;
    padding: 15px 20px;
  }
  .fcta-chips   { font-size: 12px; gap: 6px 14px; }

  /* ── FOOTER ──────────────────────────────────────────── */
  .footer-top { padding-block: 40px; }
  .footer-about { max-width: 100%; }
  .footer-brand .footer-contacts {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* ── SECTION TITLES ──────────────────────────────────── */
  .sec-title { font-size: clamp(26px, 6.5vw, 36px); }

}

/* ═══════════════════════════════════════════════════════
   CROSS-DEVICE FIXES — All breakpoints
   ═══════════════════════════════════════════════════════ */

/* ── FIX 1: Hero image min-height instead of fixed height ──
   Prevents text showing on cream bg when content > 560px
   (iPhone 17 Pro Max, large text, etc.) */
@media (max-width: 768px) {
  .hero-img-wrap {
    height: auto !important;
    min-height: 480px; /* updated: form is now on top, shorter photo needed */
  }
}

/* ── FIX 2: Button text wrap on very small screens (<380px) ── */
@media (max-width: 390px) {
  .btn-cta,
  .btn-cta-outline,
  .btn-wa,
  .btn-ghost {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    padding: 12px 16px;
  }
  .btn-step1 {
    font-size: 13px;
    padding: 12px 14px;
  }
  /* Hero H1 tighter on tiny screens */
  .hero-h1 {
    font-size: 28px !important;
  }
  /* Form card padding tighter */
  .form-card {
    padding: 20px 16px;
  }
  .fc-title {
    font-size: 17px;
  }
}

/* ── FIX 3: Images — explicit dimensions to prevent CLS ── */
.hero-img      { width: 100%; height: 100%; }
.prod-photo    { width: 100%; height: 100%; }

.tc-photo      { width: 44px; height: 44px; }
.fcta-photo    { width: 100%; height: 100%; }

/* ── FIX 4: Overflow protection — no horizontal scroll ever ── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
.hero, .trust-bar, .compare-section, .products-section,
.calc-section, .how-section, .banks-section, .why-section,
.testi-section, .faq-section, .fcta-section, .footer {
  overflow-x: hidden;
}

/* ── FIX 5: Tablet (769px–1024px) — form card min width ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-grid {
    gap: 24px;
    padding-block: 60px;
  }
  .hero-copy { flex: 1; }
  .hero-form-col { flex: 1; min-width: 0; }
  .form-card { padding: 24px 20px; }
  .fc-title { font-size: 19px; }
  /* Product cards — ensure equal height */
  .prod-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  /* Why grid 2 col on tablet */
  .why-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  /* Calc body single col on tablet */
  .calc-body { grid-template-columns: 1fr; }
  /* How steps vertical on small tablet */
  .how-steps { flex-direction: column; }
  .how-arrow { display: none; }
  .how-step  { margin-bottom: 16px; flex: none; }
}

/* ── FIX 6: Large desktop (>1280px) — no stretch ── */
@media (min-width: 1280px) {
  .wrap { max-width: 1180px; }
  .hero-grid { max-width: 1180px; }
}

/* ── FIX 7: Hero form col — prevent overflow on all screens ── */
.hero-form-col { min-width: 0; }
.form-card     { min-width: 0; }

/* ── FIX 8: Compare table mobile — ensure no horizontal scroll ── */
@media (max-width: 768px) {
  .compare-table { width: 100%; max-width: 100%; }
  .ct-row        { width: 100%; box-sizing: border-box; }
  /* Labels inline before values */
  .ct-col:not(.ct-bank) { flex-wrap: wrap; }
}

/* ── FIX 9: FAQ question text — wrap cleanly on all screens ── */
.faq-q {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── FIX 10: Testimonial photos — prevent flex shrink ── */
.tc-photo { flex-shrink: 0; object-fit: cover; }

/* ── FIX 11: Bank marquee — no overflow on any device ── */
.marquee-outer { width: 100%; overflow: hidden; }

/* ── FIX 12: Sticky header — prevent content overlap ── */
@media (max-width: 768px) {
  .hdr-inner { height: 56px; }
}

/* ── FIX 13: Footer contacts on mobile — row wrap ── */
@media (max-width: 768px) {
  .footer-contacts {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* ── FIX 14: FCTA buttons on mobile — full width stack ── */
@media (max-width: 768px) {
  .fcta-btns .btn-cta,
  .fcta-btns .btn-wa,
  .fcta-btns .btn-ghost {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
}

/* ── FIX 15: EMI breakdown values — no overflow on small ── */
@media (max-width: 390px) {
  .eb-val { font-size: 12px; }
  .emi-amount { font-size: 32px; }
  .er-amount  { font-size: 30px; }
}

/* ═══════════════════════════════════════════════════════
   IPHONE 17 SPECIFIC FIXES — Based on screenshot audit
   Three issues: blob overflow · avatar overlap · form boundary
   ═══════════════════════════════════════════════════════ */

/* ── FIX A: Stop coloured blobs bleeding outside hero section ──
   Root cause: hero is display:block + overflow:visible on mobile
   The absolute-positioned overlay/image extends beyond section bounds */
@media (max-width: 768px) {
  .hero {
    overflow: hidden !important;
    position: relative;
  }

  /* Form col sits ON the photo (transparent bg) — order:1 puts it first */
  .hero-form-col {
    position: relative;
    z-index: 10;
    background: transparent !important; /* form floats on dark photo bg */
    isolation: isolate;
  }

  /* Ensure the hero section itself clips everything inside it */
  .hero-img-wrap {
    overflow: hidden;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 480px; /* updated: matches form-first layout */
    z-index: 0;
  }

  .hero-overlay {
    z-index: 1;
    overflow: hidden;
  }

  .hero-copy {
    z-index: 2;
    position: relative;
  }
}

@media (max-width: 768px) {
}

/* ── FIX C: Form card right boundary ──
   Form card must never exceed viewport width */
@media (max-width: 768px) {
  .form-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 12px; /* consistent with gold-top-border layout */
  }

  /* Phone input wrap — clip right overflow */
  .phone-input-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  .phone-input {
    min-width: 0;
    flex: 1;
  }

  /* Step 1 form — full width */
  .step1-form {
    width: 100%;
  }

  /* Ensure fc-alt row wraps cleanly */
  .fc-alt {
    flex-wrap: wrap;
    gap: 6px 10px;
  }
}

/* ── FIX D: Guarantee hero section clips ALL children ── */
.hero {
  position: relative;
}
@media (min-width: 769px) {
  .hero { overflow: hidden; }
}