/* =========================================================
   NORTHSTONE GROUP — Home Loan Page
   Scoped block: only affects .hl-* classes used on home-loan.html
   Builds on css/home-hero.css (ph-topbar / ph-menu / nav-menu drawer).
   ========================================================= */

.hl-page { background: #FBF6EF; cursor: auto; }
.hl-page * { cursor: auto; }

/* ---------- HERO (deep espresso banner) ---------- */
.hl-hero {
  position: relative; padding: 180px clamp(20px, 4vw, 56px) 120px;
  background:
    radial-gradient(circle at 20% 20%, rgba(192,138,84,0.14), transparent 55%),
    linear-gradient(160deg, #241A12 0%, #34241A 55%, #241A12 100%);
  text-align: center; overflow: hidden;
}
.hl-eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  letter-spacing: 0.28em; text-transform: uppercase; color: #E4A93B;
  margin-bottom: 26px;
}
.hl-hero-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(32px, 5vw, 62px); line-height: 1.14; color: #fff;
  max-width: 900px; margin: 0 auto 26px;
}
.hl-hero-title .accent { color: #E4A93B; }
.hl-hero-sub {
  font-family: var(--font-body); font-weight: 300; font-size: clamp(15px, 1.4vw, 18px);
  color: rgba(255,255,255,0.72); line-height: 1.8; max-width: 62ch; margin: 0 auto 46px;
}
.hl-hero-points {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 34px;
}
.hl-hero-point {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-size: 14.5px; color: rgba(255,255,255,0.88);
}
.hl-hero-point::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: #E4A93B; flex-shrink: 0;
}

/* ---------- STAT CARDS (overlap hero bottom) ---------- */
.hl-stats-wrap {
  position: relative; z-index: 3;
  background: linear-gradient(120deg, #F3E9D9 0%, #EFE0CB 50%, #F6E7D3 100%);
  padding: 0 clamp(20px, 4vw, 56px) 70px;
}
.hl-stats-grid {
  max-width: 1160px; margin: 0 auto; transform: translateY(-56px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.hl-stat-card {
  background: #fff; border: 1px solid #EFD9C4; border-radius: 16px;
  padding: 30px 22px; text-align: center;
  box-shadow: 0 20px 50px rgba(30,20,10,0.08);
}
.hl-stat-num {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 2.6vw, 34px);
  color: #E29A1E;
}
.hl-stat-label { margin-top: 8px; font-family: var(--font-body); font-size: 13.5px; color: #5B5F6A; }

.hl-disclaimer {
  max-width: 1160px; margin: 18px auto 0; text-align: center;
  font-family: var(--font-body); font-size: 12px; color: #6B5D4F;
}

@media (max-width: 900px) {
  .hl-stats-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .hl-stats-grid { grid-template-columns: 1fr; }
}

/* ---------- SHARED SECTION HEAD ---------- */
.hl-section { padding: 90px clamp(20px, 4vw, 56px); }
.hl-section.alt {
  background: linear-gradient(120deg, #F6EDE0 0%, #F1E4CE 50%, #F8ECD9 100%);
}
.hl-section-head { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.hl-section-eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.26em; text-transform: uppercase; color: #8B5A2B; margin-bottom: 16px;
}
.hl-section-title {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.2vw, 40px);
  color: #16181D;
}
.hl-section-sub {
  margin-top: 14px; font-family: var(--font-body); font-size: 15.5px; color: #666B76;
}

/* ---------- EMI CALCULATOR ---------- */
.hl-calc {
  max-width: 1080px; margin: 0 auto; background: #fff; border-radius: 22px;
  border: 1px solid #EFE3D6; box-shadow: 0 24px 60px rgba(30,20,10,0.08);
  padding: clamp(24px, 4vw, 48px);
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px;
}
.hl-calc-field { margin-bottom: 30px; }
.hl-calc-field:last-child { margin-bottom: 0; }
.hl-calc-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.hl-calc-label { font-family: var(--font-body); font-weight: 500; font-size: 14.5px; color: #23262E; }
.hl-calc-value { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: #E29A1E; }
.hl-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 4px;
  background: #E7E4DD; outline: none;
}
.hl-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: #16181D; border: 3px solid #fff; box-shadow: 0 0 0 1px #16181D; cursor: pointer;
}
.hl-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: #16181D; border: 3px solid #fff;
  box-shadow: 0 0 0 1px #16181D; cursor: pointer;
}
.hl-calc-minmax { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12.5px; color: #9296A0; }

.hl-calc-results {
  background: linear-gradient(160deg, #FBF3E6, #FDF0EE); border-radius: 16px;
  padding: 28px 24px;
}
.hl-calc-results h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 19px; color: #16181D; margin-bottom: 20px;
}
.hl-result-row {
  display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 12px;
  padding: 16px 16px; margin-bottom: 14px;
}
.hl-result-row:last-child { margin-bottom: 0; }
.hl-result-icon {
  width: 40px; height: 40px; border-radius: 10px; background: #FBEAD3; color: #E29A1E;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hl-result-icon svg { width: 19px; height: 19px; }
.hl-result-label { font-family: var(--font-body); font-size: 13.5px; color: #5B5F6A; }
.hl-result-value { margin-left: auto; font-family: var(--font-display); font-weight: 600; font-size: 18px; color: #16181D; }

@media (max-width: 860px) { .hl-calc { grid-template-columns: 1fr; } }

/* ---------- BANK COMPARISON TABLE ---------- */
.hl-table-wrap { max-width: 1080px; margin: 0 auto; overflow-x: auto; }
.hl-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.hl-table th {
  text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: #16181D; padding: 14px 16px; border-bottom: 2px solid #EAE4DA;
}
.hl-table td { padding: 16px; border-bottom: 1px solid #F0ECE4; vertical-align: middle; }
.hl-bank { display: flex; align-items: center; gap: 12px; font-family: var(--font-body); font-weight: 500; color: #23262E; }
.hl-bank-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #fff;
}
.hl-rate { color: #E29A1E; font-weight: 600; font-family: var(--font-body); }
.hl-table td, .hl-table th { font-family: var(--font-body); font-size: 14px; color: #4B4F59; }
.hl-table-more-row.hidden { display: none; }
.hl-table-more {
  display: block; margin: 26px auto 0; background: none; border: none;
  font-family: var(--font-body); font-weight: 500; font-size: 14.5px; color: #23262E;
  display: flex; align-items: center; gap: 6px; cursor: pointer;
}
.hl-table-more svg { width: 16px; height: 16px; transition: transform .25s ease; }
.hl-table-more.open svg { transform: rotate(180deg); }

/* ---------- HOW IT WORKS ---------- */
.hl-steps { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; }
.hl-step { display: flex; gap: 22px; align-items: flex-start; }
.hl-step-num {
  width: 42px; height: 42px; border-radius: 50%; background: #E29A1E; color: #1A1206;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
}
.hl-step-title { font-family: var(--font-display); font-weight: 600; font-size: 18.5px; color: #16181D; margin-bottom: 6px; }
.hl-step-body { font-family: var(--font-body); font-size: 14.5px; color: #666B76; line-height: 1.7; }

/* ---------- ELIGIBILITY / DOCS CARDS ---------- */
.hl-cards { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.hl-cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
.hl-card {
  background: #fff; border: 1px solid #EFE3D6; border-radius: 16px; padding: 30px 26px;
  box-shadow: 0 16px 40px rgba(30,20,10,0.06);
}
.hl-card-icon {
  width: 44px; height: 44px; border-radius: 12px; background: #FBEAD3; color: #E29A1E;
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.hl-card-icon svg { width: 21px; height: 21px; }
.hl-card-title { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: #16181D; margin-bottom: 16px; }
.hl-card-list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.hl-card-list li {
  display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-body);
  font-size: 14.5px; color: #4B4F59; line-height: 1.5;
}
.hl-card-list li svg { width: 17px; height: 17px; color: #E29A1E; flex-shrink: 0; margin-top: 1px; }

@media (max-width: 760px) {
  .hl-cards, .hl-cards.cols-3 { grid-template-columns: 1fr; }
}

/* ---------- FAQ ACCORDION ---------- */
.hl-faq { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.hl-faq-item {
  background: #fff; border: 1px solid #EFE3D6; border-radius: 12px; overflow: hidden;
}
.hl-faq-q {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 18px 20px; background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 500; font-size: 15.5px; color: #16181D;
}
.hl-faq-q-icon {
  width: 26px; height: 26px; border-radius: 50%; background: #FBEAD3; color: #E29A1E;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; font-weight: 700;
}
.hl-faq-caret { margin-left: auto; width: 18px; height: 18px; color: #9296A0; flex-shrink: 0; transition: transform .25s ease; }
.hl-faq-item.open .hl-faq-caret { transform: rotate(180deg); }
.hl-faq-a {
  max-height: 0; overflow: hidden; transition: max-height .3s ease;
  font-family: var(--font-body); font-size: 14.5px; color: #666B76; line-height: 1.7;
}
.hl-faq-a-inner { padding: 0 20px 20px 60px; }
.hl-faq-item.open .hl-faq-a { max-height: 260px; }

/* ---------- APPLICATION FORM ---------- */
.hl-form-card {
  max-width: 900px; margin: 0 auto; background: #fff; border: 1px solid #EFE3D6;
  border-radius: 22px; box-shadow: 0 24px 60px rgba(30,20,10,0.08);
  padding: clamp(24px, 4vw, 48px);
}
.hl-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px; }
.hl-form-group { display: flex; flex-direction: column; gap: 9px; }
.hl-form-group label { font-family: var(--font-body); font-weight: 600; font-size: 13.5px; color: #23262E; }
.hl-form-group label .req { color: #D9534F; }
.hl-form-group input, .hl-form-group select, .hl-form-group textarea {
  font-family: var(--font-body); font-size: 14.5px; color: #16181D;
  border: 1px solid #E4E1D9; border-radius: 10px; padding: 13px 15px; outline: none;
  background: #fff; transition: border-color .2s ease;
}
.hl-form-group input:focus, .hl-form-group select:focus, .hl-form-group textarea:focus { border-color: #E29A1E; }
.hl-form-group textarea { resize: vertical; min-height: 100px; }
.hl-form-submit {
  width: 100%; margin-top: 6px; background: linear-gradient(135deg, #F0B429, #D98E1F);
  color: #1A1206; font-family: var(--font-body); font-weight: 600; font-size: 15.5px;
  border: none; border-radius: 12px; padding: 16px; cursor: pointer;
  transition: filter .2s ease, transform .2s ease;
}
.hl-form-submit:hover { filter: brightness(1.05); transform: translateY(-1px); }
.hl-form-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
@media (max-width: 700px) { .hl-form-row { grid-template-columns: 1fr; } }