/* ============================================================
   PERFEX CAPITAL — New Design
   "Guiding Dreams to Capital"
   Palette: deep forest green · muted gold · warm cream
   ============================================================ */

:root{
  --green-950:#06241b;
  --green-900:#0a2f23;
  --green-850:#0c392b;
  --green-800:#104531;
  --green-700:#16563c;
  --green-600:#1e6b49;
  --green-500:#2c855c;
  --green-100:#dfeee6;
  --green-50:#eff6f1;

  --gold-700:#9a7123;
  --gold-600:#b98c2f;
  --gold-500:#c99a3e;
  --gold-400:#d9ad55;
  --gold-300:#e7c77f;
  --gold-200:#f2e0b3;
  --gold-100:#faf3dd;

  --cream:#faf6ec;
  --paper:#ffffff;
  --line:#e6ece7;
  --ink:#0d211a;
  --muted:#5f7168;
  --muted-light:#8ba197;

  --serif:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  --shadow-sm:0 2px 10px rgba(6,36,27,.06);
  --shadow-md:0 14px 34px rgba(6,36,27,.10);
  --shadow-lg:0 26px 60px rgba(6,36,27,.16);
  --radius:16px;
  --radius-lg:24px;

  /* The gold divider that closes the header and opens the footer. It shades
     from a deeper gold at the ends through a pale highlight in the middle, so
     it reads as a gilded rule rather than a flat stripe of colour. Both rules
     are driven by these two tokens - change them here, not per rule. */
  --gold-rule:linear-gradient(90deg,var(--gold-600),var(--gold-400) 12%,var(--gold-200) 50%,var(--gold-400) 88%,var(--gold-600));
  --gold-rule-h:2px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:100px}

/* In-page anchors (the nav's /loans#education links, and the "On this page"
   contents list on Terms & Privacy) have to land BELOW the sticky header,
   otherwise the heading you jumped to is hidden behind it.
   The header is now 84-85px tall at every width (the wide logo made it
   shorter), so a single value clears it everywhere with ~15px to spare.
   This is the ONLY place the offset is declared - anything that also sets
   its own scroll-margin-top will add to it and overshoot. */
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.12;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,4.6vw,3.9rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
h3{font-size:1.35rem}
h4{font-size:1rem;letter-spacing:.04em}

.container{width:min(1200px,92%);margin-inline:auto}
.section{padding:clamp(56px,7vw,96px) 0}
.section.tight{padding:clamp(40px,5vw,64px) 0}
.section.alt{background:var(--green-50)}
.section.cream{background:var(--cream)}

/* ---------- Eyebrow / headings ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-600);
}
.eyebrow:before{content:"";width:26px;height:2px;background:var(--gold-500)}
.eyebrow.light{color:var(--gold-300)}
.eyebrow.light:before{background:var(--gold-300)}

.section-head{max-width:720px;margin-bottom:clamp(32px,4vw,52px)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-head h2{margin:.8rem 0 1rem;color:var(--green-900)}
.section-head p{color:var(--muted);font-size:1.05rem}
.section-head.light h2{color:#fff}
.section-head.light p{color:#c9dbd1}

/* ---------- Topbar ---------- */
.topbar{background:var(--green-950);color:#bcd2c6;font-size:.74rem;letter-spacing:.08em}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:.55rem 0}
.topbar span{display:inline-flex;align-items:center;gap:.5rem}
.topbar .dot{width:6px;height:6px;border-radius:50%;background:var(--gold-400)}

/* ---------- Header ----------
   --logo-w drives BOTH the logo image and the green plaque behind it, so the
   plaque always hugs the lockup with 30px of green on the left and 60px on the
   right, no matter the screen size.

   Still painted as a background strip rather than a border, because BOTH
   header pseudo elements are already spoken for (the green plaque and the logo
   light sweep). Being part of the header means the rule is sticky with it and
   stays pinned while scrolling. */
.header{
  --logo-w:200px;position:sticky;top:0;z-index:60;
  background-color:var(--paper);
  background-image:var(--gold-rule);
  background-size:100% var(--gold-rule-h);
  background-position:0 100%;
  background-repeat:no-repeat;
}
/* Light-leak sweep across the logo.
   A soft diagonal highlight travels over the artwork once every 6 seconds, and
   the first pass happens 6s after load (animation-delay 6s + 6s duration).

   It rides on .header::after, NOT on the logo itself, and is clipped to the
   logo's shape with a CSS mask - so the light only appears on the gold, never
   on the green chip around it. The reason it lives on a decorative pseudo
   element: a mask image that fails to load is treated as fully transparent,
   which hides the element. That risk must never sit on the logo.
   If masks are unsupported the sweep simply falls back to a band over the
   logo's bounding box, which still reads as a light leak.

   The mask box matches .brand exactly - same left edge, same --logo-w - so the
   artwork lines up with its own silhouette. Keep those in step.
   The background is 250% wide and travels 100% -> 0%, which parks the band off
   the left edge and sweeps it off the right. */
.header:after{
  content:"";position:absolute;z-index:2;pointer-events:none;
  top:50%;transform:translateY(-50%);
  left:calc((100% - min(1200px,92%))/2);
  width:var(--logo-w);
  height:calc(var(--logo-w) * 0.2389);
  background:linear-gradient(105deg,
    rgba(255,255,255,0) 42%,
    rgba(255,250,232,.92) 50%,
    rgba(255,255,255,0) 58%);
  background-size:250% 100%;
  background-position:100% 0;
  -webkit-mask-image:url("assets/perfex-logo-gold.webp");
  mask-image:url("assets/perfex-logo-gold.webp");
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-position:0 0;
  mask-position:0 0;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  animation:logoShine 6s linear 6s infinite;
}
/* The pass occupies the first 18% of the cycle, i.e. ~1.1s at 6s - the same
   sweep speed as before, just arriving more often. Raise the 18% for a slower
   pass, lower it for a snappier one. */
@keyframes logoShine{
  0%   { background-position:100% 0; }  /* parked off the left edge     */
  18%  { background-position:0% 0;   }  /* ~1.1s pass across the logo   */
  100% { background-position:0% 0;   }  /* rest for the remaining ~4.9s */
}

/* The green plaque behind the logo.
   It deliberately mirrors the "call us now" button on the right of the header,
   and uses the SAME flat fill as it - `var(--green-800)` (#104531), no gradient
   - so the two read as one matched pair. Keep this in step with `.call-btn`;
   if that button's background ever changes, change this with it.
   same green, same 12px radius, same soft shadow. So the header reads as a green
   chip on the left and a matching green button on the right.

   It is a FIXED-SIZE chip sized from --logo-w, so it always hugs the lockup and
   never grows with the screen. (An earlier full-bleed band had to grow with the
   container's side margin, which turned it into a ~900px slab of flat green on a
   2560px monitor.)

   left = container edge minus 22px of padding, clamped at 0 so the rounded
   corners are never sliced off on a phone. Height tracks the logo's own aspect
   (900x215) plus 14px, so the padding around the artwork stays even. */
.header:before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:50%;transform:translateY(-50%);
  left:max(0px, calc((100% - min(1200px,92%))/2 - 22px));
  width:calc(var(--logo-w) + 50px);
  height:calc(var(--logo-w) * 0.2389 + 14px);
  border-radius:12px;
  background:var(--green-800);
  box-shadow:0 8px 22px rgba(16,69,49,.25);
}
.header-inner{display:flex;align-items:center;gap:28px;padding:.9rem 0;position:relative;z-index:1}
.brand{display:inline-flex;align-items:center;gap:12px;flex-shrink:0;position:relative}
/* The logo is a wide horizontal lockup (~4.19:1), so it is sized by WIDTH.
   Widths: 200px while the nav is showing, 180px once it collapses, and a
   fluid 150-180px on phones. --logo-w is defined on .header. */
.brand img{width:var(--logo-w);height:auto;display:block}
.brand-mark{width:54px;height:54px;flex-shrink:0;display:block}
.brand-mark svg{width:100%;height:100%;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-name{font-family:var(--serif);font-weight:700;font-size:1.22rem;letter-spacing:.06em;color:#fff;white-space:nowrap}
.brand-sub{font-family:var(--serif);font-weight:600;font-size:.92rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-300);white-space:nowrap;margin-top:2px}
.brand-tag{font-size:.54rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#b9d2c5;margin-top:4px;white-space:nowrap}
.nav{display:flex;align-items:center;gap:4px;margin-inline:auto}
.nav a{
  font-size:.78rem;font-weight:700;letter-spacing:.08em;color:#31453d;
  padding:.55rem .8rem;border-radius:8px;white-space:nowrap;transition:.2s;
}
.nav a:hover{color:var(--green-800);background:var(--green-50)}
.nav a.active{color:var(--green-800)}
.nav a.active:after{content:"";display:block;height:2px;background:var(--gold-500);border-radius:2px;margin-top:3px}
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop .caret{font-size:.6rem;margin-left:3px}
.drop-menu{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);min-width:190px;padding:.5rem;display:none;z-index:60}
.nav-drop:hover .drop-menu,.nav-drop:focus-within .drop-menu{display:block}
.drop-menu a{display:block;padding:.55rem .85rem;font-size:.8rem;color:#31453d;border-radius:8px;white-space:normal;letter-spacing:.03em}
.drop-menu a:hover{background:var(--green-50);color:var(--green-800)}

.call-btn{
  display:inline-flex;align-items:center;gap:12px;flex-shrink:0;
  background:var(--green-800);color:#fff;border-radius:12px;padding:.55rem 1rem .55rem .75rem;
  box-shadow:0 8px 22px rgba(16,69,49,.25);transition:.25s;
}
.call-btn:hover{background:var(--green-700);transform:translateY(-2px)}
.call-icon{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--gold-500);color:var(--green-950);flex-shrink:0;
}
.call-icon svg{width:18px;height:18px}
.call-text{display:flex;flex-direction:column;line-height:1.2}
.call-text small{font-size:.6rem;letter-spacing:.16em;color:var(--gold-300);font-weight:700}
.call-text strong{font-size:.92rem;letter-spacing:.02em}

.menu-btn{display:none;font-size:1.6rem;color:var(--green-900);line-height:1}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;font-weight:700;letter-spacing:.04em;
  padding:.95rem 1.7rem;border-radius:12px;font-size:.86rem;transition:.25s;line-height:1;
}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}
.btn-gold{background:linear-gradient(135deg,var(--gold-500),var(--gold-600));color:var(--green-950);box-shadow:0 12px 26px rgba(185,140,47,.3)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(185,140,47,.4)}
.btn-green{background:var(--green-800);color:#fff;box-shadow:0 12px 26px rgba(16,69,49,.28)}
.btn-green:hover{background:var(--green-700);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--green-900);border:1.5px solid var(--green-800)}
.btn-outline:hover{background:var(--green-900);color:#fff}
.btn-white{background:#fff;color:var(--green-900)}
.btn-white:hover{background:var(--gold-300);color:var(--green-950)}
.btn-ghost-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn-ghost-light:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ---------- Hero (home) ---------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(820px 520px at 88% 20%,rgba(217,173,85,.16),transparent 62%),
    radial-gradient(620px 460px at 102% 100%,rgba(30,107,73,.4),transparent 65%),
    linear-gradient(125deg,var(--green-950) 8%,var(--green-900) 42%,var(--green-800) 100%);
}
.hero:before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,var(--green-950) 0%,rgba(10,47,35,.94) 34%,rgba(10,47,35,.5) 58%,rgba(10,47,35,.3) 78%,rgba(10,47,35,.55) 100%)}
.hero-inner{position:relative;z-index:1;width:min(1280px,94%);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.35fr);min-height:clamp(640px,82vh,840px)}
.hero-left{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,4.5vw,70px) clamp(22px,3vw,42px);
}
.hero-left:before{content:"";position:absolute;width:340px;height:340px;border:1px solid rgba(231,199,127,.16);border-radius:50%;right:-130px;top:-110px}
.hero-right{
  display:flex;align-items:center;justify-content:flex-end;
  padding:clamp(24px,3.5vw,48px);
}
.hero-right .calc-card{width:min(640px,92%);box-shadow:var(--shadow-lg)}
.hero-copy .eyebrow{margin-bottom:1.2rem}
.hero-copy h1{color:#fff;margin-bottom:1.1rem;font-size:clamp(1.6rem,3.15vw,2.7rem)}
.hero-copy h1 .gold{color:var(--gold-300);font-style:italic}

/* ---------- Hero typewriter: "LOAN CONSULTANT IN <city>" ----------
   .tw-sizer is an invisible copy of the longest city name. It holds that
   width permanently, so the heading never reflows while the word types and
   deletes — the reason the effect reads as calm rather than twitchy. The
   visible word is absolutely positioned on top of it. */
.tw{position:relative;display:inline-block;text-transform:uppercase;white-space:nowrap}
/* "IN <city>" is one unbreakable unit, so the preposition can never be
   left stranded on a line of its own while the city drops to the next. */
.tw-lead{white-space:nowrap}
/* The spacer is sized by generated content rather than real text, so it
   reserves the exact width of the longest city WITHOUT leaking that word
   into the heading's text — copying the heading, or reading it as plain
   text, still yields "LOAN CONSULTANT IN <city>". */
.tw-sizer{visibility:hidden}
.tw-sizer::before{content:"Surendranagar"}
.tw-live{position:absolute;left:0;top:0;line-height:inherit;white-space:nowrap}

/* The city is the word the eye should land on, so it is deliberately NOT
   styled like the white line above it: champagne gold, a soft gold
   underline and a faint glow, reading as one highlighted phrase. */
#twCity{
  color:var(--gold-200);
  text-decoration:underline;
  text-decoration-color:rgba(217,173,85,.45);
  text-decoration-thickness:.045em;
  text-underline-offset:.14em;
  text-shadow:0 0 26px rgba(217,173,85,.3);
}

.tw-cursor{
  display:inline-block;width:2px;height:.84em;margin-left:.09em;
  background:var(--gold-300);vertical-align:-.06em;
  animation:tw-blink 1.05s infinite;
}
@keyframes tw-blink{0%,45%{opacity:1}46%,100%{opacity:0}}
/* Honour the OS "reduce motion" preference: stay on the static word. */
@media (prefers-reduced-motion:reduce){
  .tw-cursor{animation:none;opacity:0}
}
/* Below 900px the hero becomes a single column, so the headline gets a much
   wider box. Left on the two-column sizing it would look small and lost. */
@media(max-width:900px){
  .hero-copy h1{font-size:clamp(1.6rem,5.6vw,2.9rem)}
}
.hero-copy .sub{
  font-family:var(--serif);font-size:1.18rem;color:var(--gold-200);margin-bottom:.6rem;
}
.hero-copy p.lead{color:#cfe0d6;max-width:52ch;font-size:1.02rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.8rem}

/* PAN India strap line. Sits directly under the lead paragraph so the
   nationwide reach is stated before the loan-type features begin, and reads
   as part of the same sentence block rather than as a floating badge.
   Plain text in the chip - no icon - to keep it quiet next to the H1. */
.hero-pan{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:.55rem;margin-top:1.15rem;
  font-size:.9rem;line-height:1.5;color:#a9c6b6;
}
.pan-chip{
  display:inline-flex;align-items:center;flex-shrink:0;white-space:nowrap;
  padding:.34rem .8rem;border-radius:999px;
  background:rgba(231,199,127,.13);border:1px solid rgba(231,199,127,.45);
  color:var(--gold-300);font-size:.66rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
}
@media(max-width:560px){
  .hero-pan{gap:.5rem;font-size:.86rem}
}
a.pan-chip{transition:background .25s ease,border-color .25s ease,color .25s ease}
a.pan-chip:hover,a.pan-chip:focus-visible{
  background:rgba(231,199,127,.24);border-color:var(--gold-300);color:var(--gold-200);
}


.hero-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin-top:2rem}
.hf{display:flex;align-items:center;gap:12px}
.hf .ic{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(231,199,127,.4);color:var(--gold-300);
}
.hf .ic svg{width:21px;height:21px}
.hf strong{display:block;font-size:.88rem;color:#fff;font-weight:700;line-height:1.2}
.hf small{display:block;font-size:.72rem;color:#a9c6b6;line-height:1.3}

/* Hero scene (illustrated photo stand-in) */
.hero-scene{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  min-height:420px;box-shadow:var(--shadow-lg);
  background:linear-gradient(160deg,#123b2d 0%,#0a2f23 46%,#06241b 100%);
  border:1px solid rgba(231,199,127,.18);
}
.hero-scene .scene-svg{position:absolute;inset:0;width:100%;height:100%}
.hero-scene .scene-badge{
  position:absolute;left:20px;bottom:20px;z-index:2;background:rgba(255,255,255,.08);
  backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.16);border-radius:14px;
  padding:.8rem 1rem;color:#fff;display:flex;align-items:center;gap:.7rem;
}
.hero-scene .scene-badge .dot{width:9px;height:9px;border-radius:50%;background:var(--gold-400);box-shadow:0 0 0 4px rgba(217,173,85,.22)}
.hero-scene .scene-badge strong{font-size:.82rem;letter-spacing:.02em}
.hero-scene .scene-badge small{display:block;font-size:.7rem;color:#b9d2c5}

/* ---------- Calculator card (home hero) ---------- */
.calc-card{
  position:relative;background:var(--paper);color:var(--ink);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:clamp(14px,1.8vw,20px);
}
/* Loan-type tabs (hero calculator).
   Five icon chips. The selected one extends sideways to reveal the loan name,
   which doubles as the card's title, so there is no separate heading row.
   The label is collapsed with max-width + opacity rather than display:none, so
   it stays in the accessibility tree and a screen reader still announces every
   tab's full name. flex-wrap is the safety valve: on a very narrow phone the
   row wraps instead of overflowing the card. */
.calc-loans{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin-bottom:.85rem;padding-bottom:.85rem;border-bottom:1px solid var(--line);
}
.calc-loan{
  display:inline-flex;align-items:center;height:44px;padding:0;border-radius:12px;
  background:var(--green-50);color:var(--green-800);border:1px solid var(--line);
  transition:background .25s,color .25s,border-color .25s,box-shadow .25s;
}
.calc-loan .ic{width:42px;height:42px;flex-shrink:0;display:grid;place-items:center}
.calc-loan .ic svg{width:20px;height:20px}
.calc-loan .nm{
  max-width:0;opacity:0;overflow:hidden;white-space:nowrap;padding-right:0;
  font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.04em;
  transition:max-width .3s ease,padding-right .3s ease,opacity .18s ease;
}
.calc-loan[aria-selected="true"]{
  background:var(--green-900);color:var(--gold-300);border-color:var(--green-900);
  box-shadow:0 6px 16px rgba(6,36,27,.18);
}
/* The label fades in a beat AFTER the chip starts widening, so the text is
   never squashed mid-transition. */
.calc-loan[aria-selected="true"] .nm{
  max-width:9rem;opacity:1;padding-right:14px;
  transition:max-width .3s ease,padding-right .3s ease,opacity .18s ease .12s;
}
.calc-loan:hover:not([aria-selected="true"]){background:var(--green-100);color:var(--green-900)}
.calc-loan:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}

/* Every loan type exposes the moratorium fields. The three moratorium result
   rows only appear once a moratorium is actually set (M > 0), and are swapped
   for a single principal row when it is 0 - otherwise a loan with no
   moratorium would show a pointless "Moratorium Interest  ₹0". */
.calc-card:not(.has-mor) .res-row[data-mor]{display:none}
.calc-card.has-mor .res-row[data-nomor]{display:none}
.calc-body{display:grid;grid-template-columns:.95fr 1.1fr;gap:14px}
.calc-body .calc-results{margin-top:0}

.range{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.25rem}
.range label{font-size:.66rem;font-weight:700;letter-spacing:.08em;color:#42574e}
.range .val{font-family:var(--sans);font-size:.92rem;font-weight:700;color:var(--green-800)}
input[type=range]{
  width:100%;height:6px;border-radius:6px;appearance:none;-webkit-appearance:none;
  background:linear-gradient(90deg,var(--green-600) var(--fill,50%),var(--line) var(--fill,50%));
  outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--gold-500);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.2);cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:var(--gold-500);border:3px solid #fff;cursor:pointer;
}
.range-scale{display:flex;justify-content:space-between;font-size:.62rem;color:var(--muted-light);margin-bottom:.7rem}

.dual{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:.3rem}
.dual .range{display:block}
.select{
  width:100%;padding:.8rem 2.4rem .8rem .9rem;border:1.5px solid var(--line);border-radius:10px;
  font-size:.92rem;font-family:var(--sans);color:var(--ink);background:#fff;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2316543b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;cursor:pointer;transition:.2s;
}
.select:focus{outline:none;border-color:var(--green-600);box-shadow:0 0 0 3px rgba(30,107,73,.12)}
.dual .range label{display:block;font-size:.66rem;font-weight:700;letter-spacing:.08em;color:#42574e;margin-bottom:4px}

.calc-results{
  margin-top:.9rem;background:#f8f1e1;border:1px solid #eadfc6;
  border-radius:12px;padding:.75rem .85rem;
}
.calc-results h4{font-size:.64rem;letter-spacing:.16em;color:var(--green-700);margin-bottom:.55rem;font-family:var(--sans)}
.res-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:.35rem 0;border-bottom:1px dashed #e4d8c0}
.res-row:last-child{border-bottom:none}
.res-row span{font-size:.72rem;color:#42574e}
.res-row b{font-family:var(--sans);font-size:.88rem;font-weight:700;color:var(--green-900);text-align:right;white-space:nowrap}
.res-row.emph{background:var(--green-900);margin:.3rem -.3rem 0;padding:.55rem .8rem;border-radius:8px}
.res-row.emph span,.res-row.emph b{color:#fff}
.res-row.emph b{color:var(--gold-300)}
.calc-note{font-size:.6rem;color:var(--muted-light);margin-top:.5rem}
.calc-card .btn{width:100%;justify-content:center;margin-top:.75rem;padding:.78rem 1.2rem;font-size:.78rem}

/* ---------- Loan solutions grid ---------- */
.loans-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.loans-grid.seven{grid-template-columns:repeat(4,minmax(0,1fr))}
.loan-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.4rem;
  transition:.3s;position:relative;overflow:hidden;display:flex;flex-direction:column;
}
.loan-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--gold-300)}
.loan-card:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--gold-500),transparent);
  transform:scaleX(0);transform-origin:left;transition:.35s;
}
.loan-card:hover:after{transform:scaleX(1)}
.loan-card .ic{
  width:52px;height:52px;border-radius:13px;display:grid;place-items:center;margin-bottom:1.1rem;
  background:var(--green-50);color:var(--green-800);border:1px solid var(--green-100);transition:.3s;
}
.loan-card:hover .ic{background:var(--green-900);color:var(--gold-300)}
.loan-card .ic svg{width:26px;height:26px}
.loan-card .tag{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600);margin-bottom:.7rem}
.loan-card h3{font-size:1.16rem;color:var(--green-900);margin-bottom:.5rem}
.loan-card p{font-size:.88rem;color:var(--muted);flex:1}
.loan-card .more{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:700;letter-spacing:.06em;color:var(--green-700);margin-top:1rem}
.loan-card .more .arr{transition:transform .25s}
.loan-card:hover .more{color:var(--gold-600)}
.loan-card:hover .more .arr{transform:translateX(4px)}

/* Click highlight for a targeted loan card.
   NOTE: the sticky-header offset is not set here. It is a single global
   scroll-padding-top on <html>; adding scroll-margin-top here as well
   would double the offset and scroll past the card. */
.loan-card:target{animation:loanFlash 1.8s ease}
@keyframes loanFlash{
  0%{box-shadow:0 0 0 0 rgba(201,154,62,.6);background:#fff}
  30%{box-shadow:0 0 0 7px rgba(201,154,62,.35);background:var(--gold-100)}
  100%{box-shadow:0 0 0 0 rgba(201,154,62,0);background:#fff}
}

/* ---------- Stats band ---------- */
.stats-band{background:var(--green-950);color:#fff;padding:clamp(38px,4vw,56px) 0}
.stats-row{display:flex;flex-wrap:wrap;gap:22px 0;align-items:center}
.stat{display:flex;align-items:center;gap:14px;padding:0 26px;border-left:1px solid rgba(255,255,255,.12)}
.stat:first-child{border-left:none;padding-left:0}
.stat .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.07);color:var(--gold-300);flex-shrink:0}
.stat .ic svg{width:22px;height:22px}
.stat .num{font-family:var(--serif);font-size:1.6rem;font-weight:700;color:var(--gold-300);line-height:1.1}
.stat .lbl{font-size:.78rem;color:#b9d2c5;letter-spacing:.02em}

.stats-cta{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-left:auto;padding-left:26px}
.stats-cta .txt{text-align:right;line-height:1.3}
.stats-cta .txt strong{display:block;font-family:var(--serif);font-size:1.02rem;color:#fff}
.stats-cta .txt small{color:#a9c6b6;font-size:.78rem}
.wa-btn{
  display:inline-flex;align-items:center;gap:.6rem;background:#1eb955;color:#fff;border-radius:12px;
  padding:.85rem 1.3rem;font-weight:700;font-size:.84rem;box-shadow:0 10px 24px rgba(30,185,85,.3);transition:.25s;
}
.wa-btn:hover{transform:translateY(-2px);background:#17a84a}
.wa-btn svg{width:20px;height:20px}

/* ---------- Dark section (approach) ---------- */
.dark-section{background:var(--green-950);color:#fff}
.dark-section .section-head h2{color:#fff}
.approach-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:16px;overflow:hidden}
.approach-item{padding:30px 24px;background:rgba(255,255,255,.025)}
.approach-item .num{font-size:2rem;font-weight:800;color:var(--gold-300);line-height:1;margin-bottom:.8rem;font-family:var(--serif)}
.approach-item .lbl{font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#b9d2c5}
.quote{font-size:1.3rem;line-height:1.45;color:var(--green-800);border-left:3px solid var(--gold-400);padding-left:1.1rem;margin:1.2rem 0;font-weight:600}

/* ---------- Process / steps ---------- */
.process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:step}
.step{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.8rem 1.5rem;transition:.3s;
}
.step:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.step .no{
  font-family:var(--serif);font-size:2.4rem;font-weight:700;color:var(--gold-400);line-height:1;margin-bottom:1rem;
}
.step h3{font-size:1.15rem;color:var(--green-900);margin-bottom:.5rem}
.step p{font-size:.88rem;color:var(--muted)}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,56px);align-items:start}
.about-panel{
  background:linear-gradient(150deg,var(--green-900),var(--green-800));color:#fff;
  border-radius:var(--radius-lg);padding:clamp(26px,3vw,40px);position:relative;overflow:hidden;
}
.about-panel:before{content:"";position:absolute;width:220px;height:220px;border:1px solid rgba(231,199,127,.3);border-radius:50%;right:-80px;top:-80px}
.about-panel h2{color:#fff;margin:.6rem 0 .8rem}
.about-panel p{color:#cfe0d6;font-size:.95rem}
.about-panel .panel-line{height:1px;background:rgba(231,199,127,.3);margin:1.2rem 0}
.about-panel strong{color:var(--gold-300);font-family:var(--serif);font-size:1.1rem}

.checklist{margin-top:1.4rem;display:grid;gap:.9rem}
.checklist li{display:flex;gap:14px;align-items:flex-start}
.check{width:26px;height:26px;border-radius:50%;background:var(--green-100);color:var(--green-700);display:grid;place-items:center;font-size:.85rem;flex-shrink:0;margin-top:2px}
.checklist strong{display:block;color:var(--green-900)}
.checklist span{color:var(--muted);font-size:.9rem}

/* ---------- Value cards (Why Us) ---------- */
.value-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.value-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.4rem;transition:.3s;
}
.value-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--gold-300)}
.value-card .ic{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;background:var(--cream);color:var(--green-800);border:1px solid var(--gold-200);margin-bottom:1rem}
.value-card .ic svg{width:24px;height:24px}
.value-card h3{font-size:1.12rem;color:var(--green-900);margin-bottom:.45rem}
.value-card p{font-size:.88rem;color:var(--muted)}

/* ---------- Page hero (inner pages) ----------
   A compact masthead, NOT a second home-page hero. The h1 is deliberately
   smaller than the global h1 clamp so the longest page titles (loans, about,
   contact) stay around three lines, and the measure is wide enough that they
   do not wrap into a tall block. Keep it noticeably shorter than .hero. */
.page-hero{
  position:relative;overflow:hidden;color:#fff;padding:clamp(26px,3.2vw,46px) 0;
  background:linear-gradient(120deg,var(--green-950),var(--green-800) 70%,var(--green-700));
}
.page-hero:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(720px 380px at 82% 12%,rgba(217,173,85,.22),transparent 60%);
}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{
  color:#fff;margin:.45rem 0 .6rem;max-width:34ch;
  font-size:clamp(1.6rem,2.9vw,2.45rem);line-height:1.14;
}
.page-hero h1 .gold{color:var(--gold-300);font-style:italic}
.page-hero p{color:#cfe0d6;max-width:72ch;font-size:.95rem;line-height:1.6}
.crumbs{font-size:.72rem;letter-spacing:.1em;color:#a9c6b6;margin-top:.8rem}
.crumbs a:hover{color:var(--gold-300)}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:linear-gradient(120deg,var(--green-900),var(--green-800));color:#fff;
  padding:clamp(32px,4vw,54px) clamp(24px,4vw,54px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.cta-band:before{content:"";position:absolute;width:280px;height:280px;border:1px solid rgba(231,199,127,.28);border-radius:50%;right:-100px;bottom:-120px}
.cta-band h2{color:#fff;margin-bottom:.4rem}
.cta-band p{color:#cfe0d6}
/* Both numbers in the contact page CTA band, as tappable tel: links. The
   band sits on dark green, so the links need explicit colour - the global
   anchor colour would be near-invisible against it. */
.cta-band .cta-phones a{
  color:var(--gold-300);font-weight:700;white-space:nowrap;
  border-bottom:1.5px solid rgba(231,199,127,.45);padding-bottom:1px;
  transition:color .25s ease,border-color .25s ease;
}
.cta-band .cta-phones a:hover,.cta-band .cta-phones a:focus-visible{
  color:#fff;border-color:var(--gold-300);
}
.cta-band .btn{position:relative;z-index:1}

/* ---------- Calculator page ---------- */
.calc-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:start}
.panel{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(22px,3vw,32px);
  box-shadow:var(--shadow-sm);
}
.panel h3{color:var(--green-900);margin-bottom:.4rem}
.panel .hint{font-size:.8rem;color:var(--muted);margin-bottom:1.2rem}
.field{margin-bottom:1rem}
/* Step hint on a cascading field label.
   Deliberately NOT called ".step": that name is already the numbered card
   used by the process grids on the home and about pages, so a span with
   that class picked up its padding, border and white background and sat
   on top of the select below it. Keep this name unique. */
.field label .field-step{font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:none;color:var(--muted-light)}
.field label{display:block;font-size:.74rem;font-weight:700;letter-spacing:.08em;color:#42574e;margin-bottom:.45rem}
.field input,.field select,.field textarea{
  width:100%;padding:.8rem .9rem;border:1.5px solid var(--line);border-radius:10px;
  font-size:.92rem;font-family:var(--sans);color:var(--ink);transition:.2s;
}
.field select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2316543b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;
  cursor:pointer;padding-right:2.4rem;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green-600);box-shadow:0 0 0 3px rgba(30,107,73,.12)}
.field textarea{resize:vertical;min-height:110px}
.result-box{
  background:var(--green-900);color:#fff;border-radius:14px;padding:1.4rem;display:grid;gap:1rem;margin-top:1.2rem;
}
.result-box .res{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.result-box .res small{font-size:.72rem;letter-spacing:.08em;color:#b9d2c5;text-transform:uppercase}
.result-box .res strong{font-family:var(--serif);font-size:1.5rem;color:var(--gold-300)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,3vw,40px);align-items:start}
.contact-card{background:var(--cream);border:1px solid var(--gold-200);border-radius:var(--radius-lg);padding:clamp(24px,3vw,36px)}
.contact-card h2{color:var(--green-900);margin:.4rem 0 1.4rem}
/* ---------- Cascading select: locked-state tooltip ----------
   The city box is disabled until a state is chosen. A disabled control
   gives no feedback of its own, so clicking the wrapper pops a short
   explanation. The tip is positioned above the control with a downward
   arrow, is visible only while .show is set, and ignores pointer events
   so it can never swallow a click meant for something else. */
.select-shell{position:relative}
.select-shell.locked select{cursor:not-allowed;color:var(--muted)}
/* Covers the locked control so the click has somewhere to land. Only
   present while .locked is set. */
.select-shell .select-guard{display:none;position:absolute;left:0;right:0;top:0;height:46px;cursor:not-allowed}
.select-shell.locked .select-guard{display:block}
.select-tip{
  position:absolute;left:0;top:calc(100% + 9px);z-index:6;
  max-width:min(240px,100%);
  background:var(--green-900);color:#fff;
  font-size:.75rem;line-height:1.45;font-weight:600;
  padding:.5rem .7rem;border-radius:9px;box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
}
/* Arrow points UP at the city control. The tip sits below the field on
   purpose: above it, the space belongs to the STATE dropdown and the
   message read as if it were attached to the wrong control. */
.select-tip:after{
  content:"";position:absolute;left:16px;bottom:100%;
  border:6px solid transparent;border-bottom-color:var(--green-900);
}
.select-tip.show{opacity:1;visibility:visible;transform:none}
@media(prefers-reduced-motion:reduce){.select-tip{transition:none;transform:none}}

.contact-item{display:flex;flex-direction:column;padding:1rem 0;border-bottom:1px solid var(--gold-200)}
.contact-item:last-child{border-bottom:none}
.contact-item strong{font-size:.7rem;letter-spacing:.16em;color:var(--gold-600);margin-bottom:.25rem}
.contact-item a,.contact-item span{font-size:1rem;font-weight:600;color:var(--green-900)}
/* Two numbers can share one PHONE label. The item is a column, so a second
   anchor would sit flush against the first - this keeps them as two clearly
   separate, individually tappable lines. Only ever matches when an item holds
   more than one link, so EMAIL / WEBSITE are unaffected. */
.contact-item a + a{margin-top:.22rem}
.contact-item a:hover{color:var(--green-600)}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(24px,3vw,36px);box-shadow:var(--shadow-sm)}
.form-card h2{color:var(--green-900);margin:.4rem 0 .6rem}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.form-grid .full{grid-column:1/-1}

/* Honeypot field: taken out of the visual flow and the tab order, but still
   present in the DOM so bots fill it in. Never display:none — some bots skip
   hidden inputs, and screen readers should not announce it either. */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* WhatsApp backup route under the enquiry form */
.wa-backup{margin-top:1.1rem;font-size:.85rem;color:var(--muted)}
.wa-backup a{color:var(--green-800);font-weight:700;text-decoration:underline}
.wa-backup a:hover{color:var(--green-600)}
.notice{
  font-size:.78rem;color:#8a6d2f;background:var(--gold-100);border:1px solid var(--gold-200);
  border-radius:10px;padding:.7rem .9rem;margin-bottom:1.1rem;
}

/* ---------- Form validation & confirmation ---------- */

/* Inline validation message. Kept in the DOM from the start so showing it
   never shifts the fields below by more than one line. */
.field-error{margin:.4rem 0 0;font-size:.78rem;line-height:1.5;font-weight:600;color:#b3261e}
.field-error:empty{display:none}

.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#d93025}
.field.invalid input:focus,.field.invalid select:focus,.field.invalid textarea:focus{border-color:#d93025;box-shadow:0 0 0 3px rgba(217,48,37,.16)}

.form-captcha{margin:.15rem 0 .1rem}

/* Post-submission confirmation, shown in place of the form */
.form-success{
  background:var(--green-50);border:1px solid var(--green-100);border-radius:var(--radius-lg);
  padding:clamp(22px,3vw,32px);box-shadow:var(--shadow-sm);
}
.form-success:focus{outline:none}
.form-success .fs-tick{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;background:var(--green-600);color:#fff;font-size:1.25rem;font-weight:700;margin-bottom:.9rem;
}
.form-success h3{color:var(--green-900);font-size:1.12rem;margin:0 0 .6rem}
.form-success p{font-size:.9rem;line-height:1.7;color:#33453d;margin:.5rem 0}
.form-success #successRefWrap strong{color:var(--green-800);letter-spacing:.03em}
.form-success a{color:var(--green-700);font-weight:700;text-decoration:underline}
.form-success a:hover{color:var(--green-600)}
.fs-actions{border-top:1px solid var(--green-100);padding-top:.9rem;margin-top:.9rem!important}

/* ---------- Blog ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.post{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.3s;display:flex;flex-direction:column;
}
.post:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.post .thumb{
  height:200px;display:grid;place-items:center;color:var(--gold-300);position:relative;overflow:hidden;
  background:linear-gradient(140deg,var(--green-800),var(--green-950));
}
.post .thumb:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(170deg,rgba(6,36,27,.5),rgba(6,36,27,.05) 55%,rgba(6,36,27,.35))}
.post .thumb i{width:54px;height:54px;position:relative;z-index:2}
.post .body{padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.post .meta{display:flex;gap:12px;font-size:.72rem;letter-spacing:.06em;color:var(--gold-600);font-weight:700;text-transform:uppercase;margin-bottom:.7rem}
.post h3{font-size:1.18rem;color:var(--green-900);margin-bottom:.6rem;line-height:1.25}
.post p{font-size:.88rem;color:var(--muted);flex:1}
.post .read{display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;font-weight:700;color:var(--green-700);margin-top:1rem}
.post:hover .read{color:var(--gold-600)}

/* ---------- Footer ---------- */
/* Opened by the same gold divider as the header, mirrored to the top edge. It
   sits between the white page background and the dark green footer, so it is
   the one warm line at that seam. */
.footer{
  background-color:var(--green-950);color:#b9d2c5;padding:clamp(48px,6vw,72px) 0 0;
  background-image:var(--gold-rule);
  background-size:100% var(--gold-rule-h);
  background-position:0 0;
  background-repeat:no-repeat;
}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:36px;padding-bottom:40px}
/* The footer logo is the white lockup, which needs no drop shadow against the
   dark footer - the shadow only muddied its edges.

   The -15px lift is deliberate: it is what makes the logo sit level with the
   QUICK LINKS / LOAN SOLUTIONS / MORE headings.
   WHY IT WAS NEEDED: the logo is ONE wide lockup image (900x230) in which the
   shield spans the full height while the "PERFEX CAPITAL" lettering only starts
   64px down the artwork (27.8% of its height). The logo's box top and the h4
   boxes DID share the same top edge - the boxes were never misaligned - but at
   this 260px display width the lettering lands 18.5px below the image's top
   edge, against only ~2.7px of cap-height inset for the headings' text. That
   ~15px difference is what read as the logo "sitting lower".
   The value scales with the logo's WIDTH, so re-measure if `width` changes:
   offset = 64/900 * width.
   margin-top is used rather than transform so the description and socials below
   ride up with the logo instead of leaving a gap underneath it. */
.footer-grid .flogo{width:260px;max-width:100%;height:auto;display:block;margin-top:-15px}
.footer-grid .brand-line{color:var(--gold-300);font-family:var(--serif);font-size:1.05rem;letter-spacing:.04em;margin:.8rem 0 .6rem}
.brand-footer .brand-name{color:#fff}
.brand-footer .brand-sub{color:var(--gold-300)}
.brand-footer .brand-tag{color:#b9d2c5}
.brand-footer .brand-mark{width:48px;height:48px}
.footer-grid p{font-size:.88rem;max-width:34ch}
.footer h4{color:#fff;font-size:.78rem;letter-spacing:.16em;margin-bottom:1.1rem;font-family:var(--sans);font-weight:700}
.footer-links{display:grid;gap:.55rem}
.footer-links a{font-size:.88rem;color:#b9d2c5;transition:.2s;display:inline-flex;align-items:center;gap:.4rem}
.footer-links a:before{content:"›";color:var(--gold-400)}
.footer-links a:hover{color:var(--gold-300);transform:translateX(3px)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding:1.3rem 0;font-size:.76rem;color:#8ba197;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
/* Social icons sit in the footer's BRAND column, under the logo description -
   not in the bottom bar. Moving them out is what lets the bottom bar hold
   copyright + disclaimer + the VedaVerse credit as three evenly spread items;
   with the socials still in there it was four, which reflowed the row and left
   the credit stranded on a line of its own. */
.footer-socials{display:flex;gap:10px;margin-top:1.15rem}
.footer-socials a{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#dbe8e0;
  background:rgba(255,255,255,.06);transition:.2s;
}
.footer-socials a:hover{background:var(--gold-500);color:var(--green-950)}
/* "Design & Developed by VedaVerse", last item in the bottom bar so it sits on
   the right, opposite the copyright.
   Hover changes the colour ONLY - no underline. The global `a{text-decoration:
   none}` reset at the top of this file already keeps links bare, so do not add
   a text-decoration here. */
.footer-bottom .fb-credit a{color:#b9d2c5;font-weight:600;transition:.2s}
.footer-bottom .fb-credit a:hover{color:var(--gold-300)}

/* ---------- Areas we serve -------------------------------------------
   City names are real text rather than an image or script output, so every
   one of them is readable by search engines. Only cities that actually have
   a page are links; the rest stay as text so nobody clicks into a 404. */
.footer-areas{border-top:1px solid rgba(255,255,255,.1);padding-top:1.4rem;margin-top:.4rem}
.footer-areas h4{color:#fff;font-size:.78rem;letter-spacing:.16em;margin-bottom:.8rem;font-family:var(--sans);font-weight:700}
.footer-areas p{font-size:.8rem;line-height:2;color:#8ba197;max-width:none}
.footer-areas a{color:var(--gold-300);font-weight:600;transition:.2s}
.footer-areas a:hover{color:#fff}
.footer-areas .fa-more{margin-left:.45rem;white-space:nowrap;text-decoration:underline}

.areas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.areas-grid a,.areas-grid span{
  display:block;padding:.62rem .85rem;border:1px solid var(--line);border-radius:10px;background:#fff;
  font-size:.86rem;font-weight:600;color:var(--green-900);text-decoration:none;transition:.2s;
}
.areas-grid a{border-color:var(--gold-200)}
.areas-grid a:hover{border-color:var(--gold-400);color:var(--green-700);transform:translateY(-3px);box-shadow:var(--shadow-sm)}

/* States variant, used for the 36 states and union territories on the
   PAN India page. State names run longer than district names, so the
   tracks are wider and each cell reserves a two-line height. Without
   that, rows come out 45px, 67px and 90px tall next to each other
   (whichever name in the row wraps the most sets the height). */
.areas-grid.states{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.areas-grid.states a,.areas-grid.states span{min-height:67px;display:flex;align-items:center}

/* ---------- City line (homepage "Areas we serve")
   A single inline line: each city is a link, followed by the one-line
   summary of what we do there. Separated by a gold middot and allowed to
   wrap on narrow screens. No artwork, by request.
   The separator is generated content so the copies/reads stay clean. */
.city-line{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:.35rem 0;
  font-size:.84rem;line-height:2;color:var(--muted);text-align:center;
}
.city-line a{
  display:inline-block;padding:.15rem .3rem;border-radius:6px;
  color:var(--muted);white-space:normal;
  transition:color .25s ease;
}

/* Homepage PAN India coverage panel. The 36-state list is the point of
   the section, so it sits in a bordered card instead of loose in a
   column, which also stops it reading as an unfinished paragraph. */
.coverage-panel{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(20px,2.6vw,32px);
  box-shadow:var(--shadow-sm);align-self:start;
}
.coverage-panel h2{margin:.8rem 0 0;font-size:clamp(1.15rem,1.7vw,1.5rem);color:var(--green-900)}

/* A plain list of place names - coverage, not navigation. Same rhythm as
   the old district list that used to sit in the footer. */
.state-line{color:var(--muted);font-size:.86rem;line-height:1.95;margin-top:.6rem}
.city-line a b{
  color:var(--green-900);font-weight:700;
  border-bottom:1.5px solid var(--gold-200);padding-bottom:1px;
  transition:border-color .25s ease;
}
.city-line a:hover,.city-line a:focus-visible{color:var(--green-700)}
.city-line a:hover b,.city-line a:focus-visible b{border-color:var(--gold-400)}
.city-line a + a:before{
  content:"\00b7";color:var(--gold-400);font-weight:700;
  margin:0 .6rem 0 .3rem;
}
/* ---------- 404 ---------- */
.e404-wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,56px);align-items:center}
.e404-art{display:block;width:100%;max-width:420px;height:auto;margin-inline:auto;animation:e404-float 7s ease-in-out infinite}
@keyframes e404-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.e404-copy h2{color:var(--green-900);margin-bottom:.9rem}
.e404-copy p{color:var(--muted);font-size:1rem;max-width:46ch}
.e404-copy .hero-actions{margin-top:1.7rem}
@media(max-width:900px){
  .e404-wrap{grid-template-columns:1fr}
  .e404-art{max-width:320px}
}
@media (prefers-reduced-motion:reduce){
  .e404-art{animation:none}
}

/* ---------- WhatsApp float ---------- */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:80;width:56px;height:56px;border-radius:50%;
  background:#1eb955;color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px rgba(30,185,85,.4);transition:.25s;
}
.wa-float:hover{transform:scale(1.08)}

/* ---------- WhatsApp popup ------------------------------------------
   The float button stays a real link to wa.me so it works with
   JavaScript off. When the script is available it intercepts the click and
   shows this dialog instead, so the visitor can type a message that then
   arrives pre-filled in WhatsApp. */
.wa-modal{position:fixed;inset:0;z-index:200;display:none;padding:20px}
.wa-modal.open{display:grid;place-items:center}
.wa-modal-backdrop{position:absolute;inset:0;background:rgba(6,36,27,.68)}
.wa-modal-card{
  position:relative;width:min(460px,100%);max-height:calc(100vh - 40px);overflow:auto;
  background:var(--paper);border-radius:var(--radius-lg);
  padding:clamp(22px,3.4vw,32px);box-shadow:var(--shadow-lg);
  animation:wa-rise .28s cubic-bezier(.22,1,.36,1) both;
}
@keyframes wa-rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.wa-modal-close{
  position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:50%;
  font-size:1.5rem;line-height:1;color:var(--muted);display:grid;place-items:center;transition:.2s;
}
.wa-modal-close:hover,.wa-modal-close:focus-visible{background:var(--green-50);color:var(--green-900)}
.wa-modal-card h2{color:var(--green-900);margin:.5rem 0 .5rem;font-size:clamp(1.25rem,2.2vw,1.6rem)}
.wa-modal-sub{font-size:.88rem;color:var(--muted);margin-bottom:1.3rem}
.wa-modal-card label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;color:#42574e;margin:0 0 .4rem}
.wa-modal-card input,.wa-modal-card textarea{
  width:100%;padding:.8rem .9rem;border:1.5px solid var(--line);border-radius:10px;
  font-size:.92rem;font-family:var(--sans);color:var(--ink);transition:.2s;margin-bottom:1rem;resize:vertical;
}
.wa-modal-card input:focus,.wa-modal-card textarea:focus{
  outline:none;border-color:var(--gold-400);box-shadow:0 0 0 3px rgba(217,173,85,.16);
}
.wa-modal-error{margin:-.5rem 0 .9rem;font-size:.78rem;font-weight:600;color:#b3261e}
/* Flagged field. Kept as an attribute selector rather than a class so the
   red state and the aria-invalid the screen reader announces can never
   drift apart. */
.wa-modal-card input[aria-invalid="true"],.wa-modal-card textarea[aria-invalid="true"]{
  border-color:#b3261e;box-shadow:0 0 0 3px rgba(179,38,30,.12);
}
.wa-send{width:100%;justify-content:center}
.wa-modal-note{margin-top:.9rem;font-size:.82rem;color:var(--muted);text-align:center}
.wa-modal-note a{color:var(--green-800);font-weight:700;text-decoration:underline}
@media(prefers-reduced-motion:reduce){.wa-modal.open .wa-modal-card{animation:none}}

/* ---------- Back to top ---------------------------------------------
   Sits between the areas band and the legal bar so the copyright line
   still closes the footer. Styled as a utility control rather than a
   heading: sentence case, no letter-spacing, and an arrow in a small
   disc - which is the shape people already read as "go to top".
   Vertical padding is 1.9rem above and 1.5rem below, which clears the
   areas band above it and leaves an even gap before the rule that opens
   the legal bar below. */
.footer-totop{display:flex;justify-content:center;padding:1.9rem 0 1.5rem}
.to-top{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.62rem 1.3rem .62rem .72rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  color:#cfe0d6;font-size:.82rem;font-weight:600;letter-spacing:0;text-transform:none;
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;
}
.to-top .tt-ic{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:rgba(231,199,127,.14);border:1px solid rgba(231,199,127,.4);color:var(--gold-300);
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.to-top .tt-ic svg{width:14px;height:14px}
.to-top:hover,.to-top:focus-visible{
  background:rgba(255,255,255,.1);border-color:rgba(231,199,127,.55);color:#fff;transform:translateY(-2px);
}
.to-top:hover .tt-ic,.to-top:focus-visible .tt-ic{background:var(--gold-400);border-color:var(--gold-400);color:var(--green-950)}
@media(prefers-reduced-motion:reduce){.to-top:hover,.to-top:focus-visible{transform:none}}
.wa-float svg{width:28px;height:28px}

/* ---------- Toast ---------- */
.toast{
  display:none;position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:100;
  background:var(--green-900);color:#fff;padding:.9rem 1.4rem;border-radius:12px;font-size:.9rem;
  box-shadow:var(--shadow-lg);border:1px solid var(--gold-400);
}

/* ---------- Font Awesome sizing ---------- */
.ic i{font-size:24px;line-height:1}
.call-icon i{font-size:17px;line-height:1}
.stat .ic i{font-size:21px}
.calc-title .ic i{font-size:21px}
.value-card .ic i{font-size:23px}
.wa-btn i{font-size:19px}
.wa-float i{font-size:25px}
.socials a i{font-size:15px}
.post .thumb i{font-size:44px}
.btn i{font-size:.95em}
.contact-item i{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--green-900);color:var(--gold-300);font-size:15px;flex-shrink:0}

/* ---------- Images / media ---------- */
.img-cover{width:100%;height:100%;object-fit:cover;display:block}
.card-media{height:178px;overflow:hidden;margin:-1.5rem -1.4rem 1.2rem;border-radius:var(--radius) var(--radius) 0 0}
.card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.loan-card:hover .card-media img,.value-card:hover .card-media img,.post:hover .thumb img{transform:scale(1.07)}
.post .thumb{position:relative}
.post .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;z-index:0}
.post .thumb .tag{position:absolute;left:14px;bottom:14px;z-index:2;background:var(--gold-500);color:var(--green-950);font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .6rem;border-radius:6px}
.about-img{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.about-img img{width:100%;height:100%;object-fit:cover;display:block}
.about-img .floating{
  position:absolute;left:18px;bottom:18px;right:18px;background:rgba(255,255,255,.92);backdrop-filter:blur(4px);
  border-radius:14px;padding:1rem 1.2rem;display:flex;align-items:center;gap:14px;
}
.about-img .floating .ic{width:46px;height:46px;border-radius:11px;background:var(--green-900);color:var(--gold-300);display:grid;place-items:center;flex-shrink:0}
.about-img .floating strong{display:block;color:var(--green-900);font-size:.95rem}
.about-img .floating small{color:var(--muted);font-size:.8rem}
.map-frame{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.map-frame iframe{width:100%;height:340px;border:0;display:block;filter:saturate(.85)}

/* ---------- Reveal animations ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.in-view .reveal,.reveal.is-visible{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* ---------- EMI Calculator (calculators page) ----------
   Two columns: controls on the left, live result + principal/interest split on
   the right, with a repayment schedule underneath. Sliders reuse the global
   `input[type=range]` styling and its --fill variable, which script.js paints. */
.emi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}

.emi-form{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1.15rem,2.4vw,1.7rem);box-shadow:var(--shadow-sm);
}

/* loan-type tabs */
.emi-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.5rem}
.emi-tab{
  font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:#42574e;background:var(--green-50);border:1px solid var(--line);
  border-radius:999px;padding:.5rem .95rem;transition:.2s;
}
.emi-tab:hover{color:var(--green-800);border-color:var(--green-500)}
.emi-tab[aria-selected="true"]{
  background:var(--green-800);border-color:var(--green-800);color:#fff;
  box-shadow:0 8px 18px rgba(16,69,49,.22);
}

/* one input: label + typed value on top, slider under it */
.emi-field{margin-bottom:1.4rem}
.emi-field:last-of-type{margin-bottom:0}
.emi-field-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:.55rem}
.emi-field-top label{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#42574e}
.emi-num{
  display:inline-flex;align-items:center;gap:1px;white-space:nowrap;
  font-size:.95rem;font-weight:700;color:var(--green-800);
  background:var(--green-50);border:1px solid var(--line);border-radius:9px;padding:.28rem .55rem;
}
.emi-num input{
  width:9ch;border:none;background:transparent;text-align:right;
  font:inherit;color:inherit;padding:0;
}
.emi-num input:focus{outline:none}
.emi-num:focus-within{border-color:var(--green-600);box-shadow:0 0 0 3px rgba(30,107,73,.12)}
.emi-scale{display:flex;justify-content:space-between;font-size:.62rem;color:var(--muted-light);margin-top:.35rem}

/* quick-value chips */
.emi-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:.6rem}
.emi-chips button{
  font-size:.66rem;font-weight:700;color:var(--green-700);
  background:var(--cream);border:1px solid var(--gold-200);border-radius:999px;
  padding:.26rem .58rem;transition:.2s;
}
.emi-chips button:hover,.emi-chips button:focus-visible{background:var(--gold-100);border-color:var(--gold-400)}

/* years / months unit switch */
.emi-tenure-right{display:inline-flex;align-items:center;gap:8px}
.emi-unit{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.emi-unit button{
  font-size:.62rem;font-weight:700;letter-spacing:.06em;padding:.22rem .55rem;
  color:#42574e;background:var(--paper);transition:.2s;
}
.emi-unit button[aria-pressed="true"]{background:var(--green-800);color:#fff}

/* result panel */
.emi-out{
  background:var(--green-900);border-radius:var(--radius-lg);
  padding:clamp(1.15rem,2.4vw,1.7rem);box-shadow:var(--shadow-md);
  position:sticky;top:104px;
}
.emi-cards{display:grid;gap:10px}
.emi-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:.85rem 1.05rem}
.emi-card small{display:block;font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9fbdb0}
.emi-card strong{display:block;font-family:var(--serif);font-size:clamp(1.45rem,2.8vw,1.85rem);color:var(--gold-300);margin-top:.28rem;line-height:1.1;overflow-wrap:anywhere}
.emi-card.is-primary{background:rgba(217,173,85,.13);border-color:rgba(217,173,85,.4)}

/* principal vs interest donut */
.emi-split{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:1.4rem}
.emi-donut{position:relative;width:126px;height:126px;flex-shrink:0}
.emi-donut svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.emi-donut circle{fill:none;stroke-width:4.2}
.emi-donut .track{stroke:rgba(255,255,255,.13)}
.emi-donut .seg-principal{stroke:var(--gold-400);transition:stroke-dasharray .45s ease}
.emi-donut .seg-interest{stroke:var(--green-500);transition:stroke-dasharray .45s ease}
.emi-donut-mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:0 14px}
.emi-donut-mid b{display:block;font-family:var(--serif);font-size:1rem;color:#fff;line-height:1.1}
.emi-donut-mid small{display:block;font-size:.53rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#9fbdb0;margin-top:3px}
.emi-legend{display:grid;gap:.55rem;min-width:150px;flex:1}
.emi-legend div{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:#cfe0d6}
.emi-legend i{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.emi-legend .k-principal{background:var(--gold-400)}
.emi-legend .k-interest{background:var(--green-500)}
.emi-legend b{margin-left:auto;color:#fff;font-weight:700;white-space:nowrap}

/* repayment schedule */
.emi-schedule{
  margin-top:24px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);
}
.emi-schedule-head{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:1.1rem 1.3rem;border-bottom:1px solid var(--line);
}
.emi-schedule-head h3{font-size:1.02rem;color:var(--green-900)}
.emi-schedule-head p{font-size:.75rem;color:var(--muted);margin-top:.15rem}
.emi-view{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.emi-view button{font-size:.66rem;font-weight:700;padding:.38rem .85rem;color:#42574e;background:var(--paper);transition:.2s}
.emi-view button[aria-pressed="true"]{background:var(--green-800);color:#fff}

.emi-table-wrap{max-height:352px;overflow:auto;-webkit-overflow-scrolling:touch}
.emi-table{width:100%;border-collapse:collapse;font-size:.8rem}
.emi-table th{
  position:sticky;top:0;z-index:1;background:var(--green-50);
  font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green-700);text-align:right;padding:.68rem 1rem;white-space:nowrap;
}
.emi-table td{
  padding:.6rem 1rem;text-align:right;color:var(--muted);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.emi-table th:first-child,.emi-table td:first-child{text-align:left;font-weight:700;color:var(--green-900)}
.emi-table tbody tr:hover td{background:var(--green-50)}
.emi-table tfoot td{background:var(--green-900);color:#fff;font-weight:700;border-bottom:none}
.emi-table tfoot td:first-child{color:var(--gold-300)}

@media(max-width:900px){
  .emi{grid-template-columns:1fr}
  .emi-out{position:static}
}

/* Tighten the schedule so more of it fits before it has to scroll sideways. */
@media(max-width:600px){
  .emi-table{font-size:.74rem}
  .emi-table th,.emi-table td{padding:.55rem .7rem}
  .emi-schedule-head{padding:1rem 1.1rem}
}

/* ---------- Legal pages (Terms & Privacy) ----------
   Long-form prose, so it gets a comfortable reading measure instead of the
   full 1200px container. Deliberately NOT using .reveal on these pages:
   legal text must be readable with JavaScript disabled. */
.legal-wrap{max-width:820px;margin-inline:auto}
.legal-meta{
  display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green-700);background:var(--green-50);border:1px solid var(--line);
  border-radius:999px;padding:.42rem .95rem;margin-bottom:1.8rem;
}
.legal h2{
  font-size:clamp(1.22rem,2.2vw,1.55rem);color:var(--green-900);
  margin:2.4rem 0 .85rem;padding-top:1.7rem;border-top:1px solid var(--line);
}
.legal h2:first-of-type{border-top:none;padding-top:0;margin-top:0}
/* Briefly flash the section you jumped to, so it is obvious the contents
   link worked. No `forwards`, so it settles back to normal afterwards. */
.legal h2:target{animation:legalFlash 2s ease}
@keyframes legalFlash{
  0%,55%{background:var(--gold-100);box-shadow:0 0 0 10px var(--gold-100)}
  100%{background:transparent;box-shadow:0 0 0 10px transparent}
}
.legal h3{
  font-family:var(--sans);font-size:1rem;color:var(--green-800);
  margin:1.5rem 0 .5rem;
}
.legal p{color:var(--muted);font-size:.95rem;margin-bottom:.95rem}
.legal strong{color:var(--ink)}
.legal ul{list-style:none;margin:.2rem 0 1.15rem}
.legal ul li{
  position:relative;padding-left:1.45rem;margin-bottom:.55rem;
  color:var(--muted);font-size:.95rem;
}
.legal ul li:before{
  content:"";position:absolute;left:.1rem;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--gold-400);
}
.legal a{color:var(--green-700);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--gold-600)}

/* Table of contents */
.legal-toc{
  background:var(--green-50);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.2rem 1.35rem;margin:1.6rem 0 2.2rem;
}
.legal-toc strong{
  display:block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-600);margin-bottom:.85rem;
}
.legal-toc-links{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.legal-toc-links a{
  font-size:.86rem;font-weight:600;color:var(--green-700);text-decoration:none;
}
.legal-toc-links a:hover{color:var(--gold-600);text-decoration:underline}

/* Highlighted callout for the "never send us your PIN" style warnings */
.legal-note{
  background:var(--cream);border:1px solid var(--gold-200);border-left:4px solid var(--gold-400);
  border-radius:var(--radius);padding:1.15rem 1.35rem;margin:1.4rem 0 1.6rem;
}
.legal-note p{margin-bottom:.6rem;color:var(--ink)}
.legal-note p:last-child{margin-bottom:0}

/* Consent line under the enquiry form */
.form-consent{font-size:.78rem;color:var(--muted);margin-top:.9rem;line-height:1.6}
.form-consent a{color:var(--green-700);text-decoration:underline;text-underline-offset:2px}
.form-consent a:hover{color:var(--gold-600)}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .header:after{display:none}
  .emi-donut .seg-principal,.emi-donut .seg-interest{transition:none}
}

/* ---------- Responsive ---------- */
@media(max-width:1060px){
  .nav a{padding:.55rem .6rem;font-size:.72rem}
  .header-inner{gap:16px}
  .brand-mark{width:44px;height:44px}
  .brand-name{font-size:1.25rem}
  .stat{padding:0 16px}
  .stat:nth-child(2){border-left:none;padding-left:0}
  .stats-cta{justify-content:flex-start;margin-left:0;padding-left:0}
  .loans-grid.seven,.loans-grid{grid-template-columns:repeat(3,1fr)}
  .value-grid{grid-template-columns:repeat(2,1fr)}
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;min-height:auto}
  .hero-right{min-height:420px;padding:24px 16px;border-left:none}
  .hero-right .calc-card{width:100%}
  .calc-body{grid-template-columns:1fr}
  .hero-scene{min-height:320px}
  .calc-layout,.about-grid,.contact-grid{grid-template-columns:1fr}
  .stat{padding:0 12px}
}
/* The primary nav collapses to the hamburger below 1200px. It has to: with a
   wide horizontal logo, brand + nav + call button no longer fit — and that
   range was already overflowing the container by 26-29px before this change. */
@media(max-width:1200px){
  .header{--logo-w:180px}
  .nav{display:none}
  .nav.open{
    display:flex;flex-direction:column;align-items:stretch;position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:1rem 4%;box-shadow:var(--shadow-md);
  }
  .nav.open a{padding:.8rem .4rem;border-bottom:1px solid var(--line);border-radius:0}
  .nav.open .nav-drop{display:block;border-bottom:1px solid var(--line)}
  .nav.open .nav-drop > a{display:block;border-bottom:none}
  .nav.open .drop-menu{
    position:static;display:block;min-width:0;box-shadow:none;border:none;border-radius:0;
    background:transparent;padding:0 0 .1rem 1rem;
  }
  .nav.open .drop-menu a{font-size:.78rem;padding:.62rem .4rem;border-bottom:1px dashed var(--line);color:#31453d}
  .nav.open .drop-menu a:last-child{border-bottom:none}
  .menu-btn{display:block;margin-left:auto}
  .call-btn .call-text{display:none}
  .call-btn{padding:.5rem}
}

@media(max-width:760px){
  /* Inner-page banner: drop the fixed measure so the title uses the full
     column, and trim the description so it stays to ~2 lines. */
  .page-hero{padding:26px 0 24px}
  .page-hero h1{max-width:none;margin:.4rem 0 .55rem}
  .page-hero p{font-size:.92rem;max-width:none}
  .crumbs{margin-top:.7rem}
  .loans-grid.seven,.loans-grid{grid-template-columns:repeat(2,1fr)}
  .value-grid,.process-grid,.blog-grid{grid-template-columns:1fr}
  .approach-grid{grid-template-columns:repeat(2,1fr)}
  .stat{padding:0;border-left:none}
  .form-grid{grid-template-columns:1fr}
  .topbar .container{font-size:.68rem}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:460px){
  .page-hero{padding:22px 0 20px}
  .page-hero h1{font-size:1.45rem;line-height:1.15;letter-spacing:-.02em}
  .page-hero p{font-size:.88rem;line-height:1.55}
  .crumbs{font-size:.68rem;letter-spacing:.08em;margin-top:.65rem}
  .loans-grid.seven,.loans-grid{grid-template-columns:1fr}
  .approach-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{justify-content:center}
  .hero-features{grid-template-columns:1fr}
  /* Hero calculator tabs: shrink the chips so all five still sit on ONE row.
     Re-measure if a label ever gets longer than "Education". */
  .calc-loans{gap:5px}
  .calc-loan{height:38px;border-radius:10px}
  .calc-loan .ic{width:36px;height:36px}
  .calc-loan .ic svg{width:18px;height:18px}
  .calc-loan .nm{font-size:.66rem}
  .calc-loan[aria-selected="true"] .nm{max-width:8rem;padding-right:11px}
  .brand-tag{display:none}
  .brand-name{font-size:1.15rem}
  .brand-mark{width:40px;height:40px}
}

/* Phones: ease the logo down so the hamburger and call button always fit.
   The chip follows automatically because it is sized from --logo-w; its right
   padding is trimmed a little so it never butts up against the menu button. */
@media(max-width:400px){
  .header{--logo-w:clamp(150px,44vw,180px)}
  .header:before{width:calc(var(--logo-w) + 38px)}
  /* Tightest step for the calculator tabs. Re-measured: at 320px the card's
     inner width is ~227px, and five 32px chips plus the open label plus 2px
     gaps come to ~215px, so they still hold one row. Going back up to 34px
     chips wraps that last chip onto a second line. */
  .calc-loans{gap:2px}
  .calc-loan{height:32px;border-radius:8px}
  .calc-loan .ic{width:31px;height:31px}
  .calc-loan .ic svg{width:15px;height:15px}
  .calc-loan .nm{font-size:.54rem;letter-spacing:0}
  .calc-loan[aria-selected="true"] .nm{max-width:7rem;padding-right:5px}
}