/* ==========================================================================
   Heeraa Financials — "House" theme
   Parchment ground, architectural line art, and colour arriving as whole
   full-bleed blocks: navy for record, emerald for contact, garnet for accent.

   Loaded AFTER site.css. It overrides the token layer, so every existing
   component reskins itself, and it adds the components this direction needs
   that the white system had no equivalent for.
   ========================================================================== */

:root{
  /* ---- ground ---------------------------------------------------------- */
  --white:#FBF8F1;          /* the page is parchment, never pure white */
  --paper:#F4EFE3;          /* alternating band, inputs, raised cells */
  --paper-2:#EAE3D2;        /* pressed, hover, table rules */
  --tint:#F3EDDE;           /* the warm block */
  --tint-rule:#DCD1B6;

  /* ---- the three colour grounds --------------------------------------- */
  --navy:#10314F;
  --navy-2:#0B2439;
  --navy-lift:#1B4670;
  --emerald:#0C4A3E;
  --emerald-2:#083529;
  --emerald-lift:#116352;
  --garnet:#7C2130;
  --garnet-2:#5E1824;
  --garnet-lift:#9A3141;

  /* ---- ink ------------------------------------------------------------- */
  --ink:#16232F;
  --ink-2:#4A5560;
  --ink-3:#6B7079;
  --on-navy:#F4EFE3;
  --on-navy-2:#A9BACB;
  --on-emerald:#EFEADC;
  --on-emerald-2:#9DB5AC;
  --on-garnet:#F4E7E4;
  --on-garnet-2:#D0A9A9;

  /* ---- rule ------------------------------------------------------------ */
  --rule:#E2DACA;
  --rule-2:#B7AC92;         /* 3.1:1 on parchment — input borders clear AA */
  --rule-navy:rgba(200,162,76,.30);

  /* ---- brass ----------------------------------------------------------- */
  --gold:#8A6A1E;           /* gold that carries text: 5.0:1 on parchment */
  --gold-lift:#C8A24C;      /* on the dark grounds only */
  --gold-deep:#6F5416;

  /* ---- type ------------------------------------------------------------ */
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Archivo', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --t-h1: clamp(36px, 4.4vw + 18px, 68px);
  --t-h2: clamp(26px, 1.9vw + 19px, 40px);
}

/* Indic scripts have no Playfair companion — the local Noto carries display
   duty at a lighter weight, with the tracking and leading the script needs. */
html[lang="ta"],html[lang="hi"],html[lang="ml"],html[lang="te"],html[lang="kn"]{
  --serif:'Noto Sans Tamil','Noto Sans Devanagari','Noto Sans Malayalam','Noto Sans Telugu','Noto Sans Kannada',var(--sans);
}

body{
  background:var(--white);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(140,120,80,.045), transparent 42%),
    radial-gradient(circle at 84% 78%, rgba(140,120,80,.035), transparent 46%);
  background-attachment:fixed;
}

/* Display type in this direction is heavier and tighter than the white system */
.hero h1,.sec-head h1,.sec-head h2,.band h2,.tinted h2{
  font-weight:500; letter-spacing:-.015em;
}
html:not([lang="en"]) .hero h1,
html:not([lang="en"]) .sec-head h1,
html:not([lang="en"]) .sec-head h2{ font-weight:600; letter-spacing:0 }

/* the italic second line — the signature of this direction */
.hero h1 em,.sec-head h2 em{
  display:block; font-style:italic; font-weight:400; color:var(--garnet);
}
html:not([lang="en"]) .hero h1 em{ font-style:normal; color:var(--garnet) }

/* the short brass rule that sits under a display line */
.brass-rule{
  width:74px; height:2px; background:var(--gold-lift); margin:22px auto 26px;
  position:relative;
}
.brass-rule::before,.brass-rule::after{
  content:""; position:absolute; top:50%; width:5px; height:5px;
  background:var(--gold-lift); transform:translateY(-50%) rotate(45deg);
}
.brass-rule::before{left:-11px} .brass-rule::after{right:-11px}

/* ==========================================================================
   HERO — parchment, centred, illustration behind and beside the type
   ========================================================================== */
.hero-house{
  position:relative; overflow:hidden; text-align:center;
  padding-block:clamp(44px,6vw,86px) clamp(40px,5vw,70px);
  background:linear-gradient(180deg,var(--paper) 0%,var(--white) 68%);
  border-bottom:1px solid var(--rule);
}
.hero-house .wrap{position:relative; z-index:2}
.hero-house .crest{width:clamp(72px,9vw,104px); margin:0 auto 20px}
.hero-house .eyebrow{
  font-size:var(--t-cap); letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:18px; display:block;
}
.hero-house h1{
  font-family:var(--serif); font-size:var(--t-h1); line-height:1.04;
  color:var(--navy); margin:0;
}
.hero-house .lede{
  max-width:52ch; margin:0 auto; font-size:var(--t-lede); color:var(--ink-2);
  line-height:1.62;
}
.hero-house .btn-row{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px;
}
/* the etched illustration sits behind the type, never over it */
.hero-art{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-repeat:no-repeat; background-position:center 62%;
  background-size:min(1180px,148%) auto; opacity:.13;
}
@media (min-width:1000px){
  .hero-art{ background-position:right -40px bottom -10px;
    background-size:auto min(78%,430px); opacity:.2 }
}
@media (prefers-reduced-motion:no-preference){
  .hero-house .crest{animation:rise .7s cubic-bezier(.2,.7,.3,1) both}
  .hero-house h1{animation:rise .7s .06s cubic-bezier(.2,.7,.3,1) both}
  .hero-house .lede{animation:rise .7s .12s cubic-bezier(.2,.7,.3,1) both}
  .hero-house .btn-row{animation:rise .7s .18s cubic-bezier(.2,.7,.3,1) both}
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ==========================================================================
   LEDGER BAND — the full-bleed record strip
   ========================================================================== */
.ledger-band{
  background:var(--navy); color:var(--on-navy-2);
  border-block:1px solid var(--navy-2);
  padding-block:clamp(30px,3.4vw,44px);
}
.ledger-band .kicker{color:var(--gold-lift); text-align:center; margin-bottom:22px}
.ledger-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px; background:var(--rule-navy);
}
.ledger-grid > div{
  background:var(--navy); padding:20px 18px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:9px;
}
.ledger-grid .ic{width:30px;height:30px;color:var(--gold-lift)}
.ledger-grid .ic svg{width:100%;height:100%;stroke:currentColor;fill:none;
  stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.ledger-grid dt{
  font-size:var(--t-cap); letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-navy-2); order:3;
}
.ledger-grid dd{
  margin:0; order:2; font-family:var(--serif); font-weight:500;
  font-size:clamp(24px,1.8vw+16px,34px); line-height:1; color:var(--on-navy);
  font-variant-numeric:tabular-nums;
}
.ledger-grid .note{order:4; font-size:12.5px; color:var(--on-navy-2); opacity:.8;
  max-width:24ch}

/* ==========================================================================
   PRODUCT STRIP — full-bleed coloured tiles
   ========================================================================== */
.strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0}
.strip a{
  padding:26px 22px 24px; display:flex; flex-direction:column; gap:10px;
  min-height:150px; position:relative; transition:filter .18s ease;
  border-right:1px solid rgba(0,0,0,.12);
}
.strip a:last-child{border-right:none}
.strip a:hover{filter:brightness(1.09)}
.strip .ic{width:34px;height:34px}
.strip .ic svg{width:100%;height:100%;stroke:currentColor;fill:none;
  stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.strip h3{font-family:var(--serif); font-weight:500; font-size:19px; color:inherit;
  letter-spacing:0}
.strip p{font-size:13.5px; opacity:.86; margin:0; flex:1}
.strip .go{font-size:18px; line-height:1; opacity:.75; margin-top:4px}
.strip .lead-cell{background:var(--paper); color:var(--ink-2)}
.strip .lead-cell h3{color:var(--navy)}
.strip .t-emerald{background:var(--emerald); color:var(--on-emerald)}
.strip .t-sage   {background:#5C7360; color:#EEF1E9}
.strip .t-teal   {background:#3F6C6C; color:#EAF2F1}
.strip .t-garnet {background:var(--garnet); color:var(--on-garnet)}
.strip .t-sand   {background:#C7A97B; color:#2A2113}
.strip .t-navy   {background:var(--navy); color:var(--on-navy)}
.strip .t-slate  {background:#4F6B81; color:#EDF2F6}

/* ==========================================================================
   COMPANY RECORD — the verifiable table
   ========================================================================== */
.record{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,60px); align-items:start;
}
.record-intro h2{font-family:var(--serif); font-weight:500; font-size:var(--t-h2);
  color:var(--navy); line-height:1.14; max-width:16ch}
.record-intro p{margin-top:14px; font-size:var(--t-small); color:var(--ink-2);
  max-width:44ch}
.record-table{width:100%; border-collapse:collapse}
.record-table th,.record-table td{
  text-align:left; padding:13px 0; border-bottom:1px solid var(--rule);
  font-size:var(--t-small); vertical-align:top;
}
.record-table th{
  font-weight:500; color:var(--ink-3); width:42%; padding-right:20px;
  font-size:var(--t-cap); letter-spacing:.14em; text-transform:uppercase;
  padding-top:16px;
}
.record-table td{color:var(--ink); font-variant-numeric:tabular-nums}
.record-table td.mono{font-family:var(--sans); letter-spacing:.02em}
.record-note{margin-top:18px; font-size:12.5px; color:var(--ink-3)}

/* ==========================================================================
   CONTACT BLOCK — full-bleed emerald
   ========================================================================== */
.contact-band{
  background:var(--emerald); color:var(--on-emerald-2);
  padding-block:clamp(44px,5vw,72px); position:relative; overflow:hidden;
}
.contact-band .kicker{color:var(--gold-lift)}
.contact-band h2{
  font-family:var(--serif); font-weight:500; font-size:var(--t-h2);
  color:var(--on-emerald); line-height:1.16; max-width:18ch; margin:14px auto 0;
}
.contact-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:28px; margin-top:36px; text-align:left;
}
.contact-grid > div{
  display:flex; gap:13px; align-items:flex-start;
  padding-left:22px; border-left:1px solid var(--rule-navy);
}
.contact-grid .ic{width:22px;height:22px;color:var(--gold-lift);flex:none;margin-top:2px}
.contact-grid .ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.4}
.contact-grid h3{
  font-size:var(--t-cap); letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-lift); font-weight:600; margin-bottom:7px;
}
.contact-grid p,.contact-grid a{
  font-size:var(--t-small); color:var(--on-emerald); line-height:1.6; display:block;
}
.contact-grid a:hover{color:#fff; text-decoration:underline}
.contact-band .btn-row{display:flex;justify-content:center;margin-top:34px}

/* ==========================================================================
   Reskin of the components the white system already had
   ========================================================================== */
.site-header{background:rgba(251,248,241,.95); border-bottom:1px solid var(--rule)}
.brand-name b{color:var(--navy); font-family:var(--serif); font-weight:500;
  letter-spacing:.02em}
.btn-primary{background:var(--emerald); color:#fff}
.btn-primary:hover{background:var(--emerald-lift)}
.btn-ghost{border-color:var(--rule-2); color:var(--navy)}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold-deep)}
.btn-garnet{background:var(--garnet); color:#fff}
.btn-garnet:hover{background:var(--garnet-lift)}

.card{background:var(--paper); border-color:var(--rule)}
.card:hover{border-color:var(--gold-lift); background:#fff}
.card h3{color:var(--navy)}
.card .rate{color:var(--gold-deep); border-top-color:var(--rule)}
.rows h3{color:var(--navy)}
.band{background:var(--navy)}
.tinted{background:var(--tint)}
.steps > div{background:var(--paper)}
.steps{background:var(--rule); border-color:var(--rule)}
.facts div{background:var(--paper)}
.facts{background:var(--rule); border-color:var(--rule)}
.timeline li::before{background:var(--garnet)}
.timeline .year{color:var(--gold)}
.pullquote blockquote{color:var(--navy)}
.site-footer{background:var(--navy-2)}
.float .chat-open{background:var(--emerald); color:var(--gold-lift)}
.calc{background:var(--paper); border-color:var(--tint-rule)}
.form input,.form select,.form textarea{background:#fff}
.prose a{color:var(--garnet); border-bottom-color:var(--rule-2)}
.person .portrait{background:var(--paper); border-color:var(--rule-2)}
.memoriam .portrait{border-color:var(--gold-lift); background:var(--paper)}

/* ==========================================================================
   Responsive — every grid above collapses cleanly, nothing overlaps
   ========================================================================== */
@media (max-width:900px){
  .record{grid-template-columns:1fr; gap:26px}
  .record-intro h2{max-width:none}
}
@media (max-width:760px){
  .strip a{border-right:none; border-bottom:1px solid rgba(0,0,0,.14); min-height:0}
  .strip a:last-child{border-bottom:none}
  .contact-grid{grid-template-columns:1fr; gap:20px}
  .contact-band h2{max-width:none}
  .hero-art{opacity:.09}
}
@media (max-width:520px){
  .ledger-grid{grid-template-columns:1fr 1fr}
  .record-table th{width:46%}
}
@media (max-width:380px){
  .ledger-grid{grid-template-columns:1fr}
}

@media print{
  .ledger-band,.contact-band,.strip a{background:#fff!important;color:#000!important}
  .hero-art{display:none}
}

/* --- gaps found while building the home page --------------------------- */
.strip .lead-cell{padding:26px 22px 24px; display:flex; flex-direction:column;
  gap:10px; justify-content:center; border-right:1px solid rgba(0,0,0,.12)}
.ledger-grid .note{font-family:var(--sans); font-weight:400}
.contact-band{text-align:center}
.contact-band .contact-grid{text-align:left}

/* --- header overflow ---------------------------------------------------
   `.header-in{flex-wrap:nowrap}` keeps the six nav links and the CTA on one
   row on desktop, but below the nav's own breakpoint the nav collapses into
   the toggle and nowrap forced the brand + actions past the viewport — 471px
   of horizontal scroll on a 390px screen. Wrapping is allowed again there,
   and nothing in the bar is permitted to exceed its share of the width. */
@media (max-width:760px){
  .header-in{flex-wrap:wrap; gap:10px}
  .brand{min-width:0; flex:1 1 auto}
  .brand-name{min-width:0}
  .brand-name b,.brand-name span{overflow-wrap:anywhere}
  .header-actions{flex:0 0 auto; gap:8px}
  .lang-btn{padding:7px 9px; font-size:12px}
  .btn-sm{padding:8px 12px; font-size:10.5px}
}
@media (max-width:400px){
  .brand img{height:32px}
  .brand-name span{display:none}   /* the eyebrow is the first thing to go */
}
/* Q5 — THE STICKY HEADER WAS NOT STICKY, anywhere, at any width.
   This line used to read `html,body{max-width:100%; overflow-x:hidden}`.
   `overflow-x:hidden` on <body> computes <body>'s overflow-y to `auto`,
   which makes <body> a scroll container — and a `position:sticky` element's
   nearest scrollport is that container, not the viewport. So `.site-header`
   stuck to a box that scrolls with the document: measured at scrollY 987 on
   /ml/lending/ at 390px, the header's top was at -987, i.e. gone. The
   overflow guard belongs on the root element alone, where it propagates to
   the viewport without creating a scrollport. The sweep independently
   proves no page overflows horizontally at any of the ten widths, so this
   is a belt-and-braces guard, not a load-bearing clip. */
html{max-width:100%; overflow-x:hidden}
body{max-width:100%}

/* =======================================================================
   Layout QA pass — geometry defects only. No change of direction.
   Every rule below exists because an automated sweep of 670 page/width/
   locale combinations reported a measured failure.
   ======================================================================= */

/* Q1 — 2.5.8 Target Size (Minimum). The sweep measured every link and
        button at every width. Five families sat under the 24px floor:
        the nav row (21px), the footer column links (22px), the contact
        band's address/phone/email lines (21px), the twelve links in the
        lending index table (13px in English, 17–19px in the Indic
        locales, because a table cell shrink-wraps its text), and a
        standalone link that is the whole of its paragraph (the grievance
        link on /contact/, 17–21px). Each is a block or cell context, so a
        minimum box costs nothing in the flow. Links inside a running
        sentence are left alone — WCAG exempts inline text links, and
        boxing them would stop them wrapping. */
.nav-main a{min-height:24px; display:flex; align-items:center}
.footer-grid a{min-height:24px; padding-block:5px; display:flex; align-items:center}
.contact-grid a{min-height:24px; padding-block:2px}
.prose table th a,.prose table td a,
.prose p > a:only-child{display:inline-block; min-height:24px; line-height:24px}

/* Q2 — 2.4.1 / sticky-header occlusion. The header is `position:sticky`
        and is 63–68px tall on desktop, 91px at 768 and up to 113px once it
        wraps to two rows below 760px. Nothing set a scroll offset, so the
        skip link's `#main` target — and any future in-page anchor — landed
        flush with the viewport top and sat *behind* the bar. Reserve the
        bar's height plus a little air. */

/* Q3 — the same criterion, the width axis. Two labels are shorter than
        24px once set: the Hindi nav item "लोन" (18px) and the Hindi
        heading link "ग्रुप" on /legacy/ (20px). Give a link that is the
        whole of its heading or nav item a floor on the horizontal axis
        too; it only pads the hit box, never the text. */
.nav-main a{min-width:24px; justify-content:center}
.timeline h3 > a:only-child,.rows h3 > a:only-child,
.prose h3 > a:only-child,.trust h3 > a:only-child,.trust a{
  display:inline-block; min-width:24px; min-height:24px}

/* Q4 — Language menu, ≤414px. `.lang-menu` is `position:absolute; right:0`
        on `.lang`, with `min-width:190px`. Below 520px the header wraps and
        `.lang` no longer sits at the right edge of the row, so a 190px menu
        anchored to its right edge started 77–112px *outside the left edge of
        the viewport* — in all six locales, at 320, 360, 390 and 414. Half
        the menu was unreachable. Below the header's own breakpoint, hang the
        menu off the header row instead of off the pill and let it span the
        wrap's measure, the way the nav drawer already does. */
@media (max-width:640px){
  .lang{position:static}
  .lang-menu{
    left:clamp(20px,5vw,44px); right:clamp(20px,5vw,44px);
    min-width:0; top:calc(100% + 8px);
  }
}

/* Q6 — Cross-cell baselines in the card, step and tile grids.
        Cell *heights* were already equal (the grids stretch), and the top
        rail (icon / number) and bottom rail (rate / arrow) lined up. But the
        middle of each cell drifted: whenever one heading in a row wrapped to
        two lines and its neighbours did not, that cell's body copy sat 27–38px
        lower than the rest — measured on `.cards` (/lending/, /group/),
        `.cards.four` and `.steps` (home), in every locale, at 600px and up.
        In ta and ml at 1024 a two-line rate line pushed the bottom rail out
        of true by 21px as well.

        The children of these cells are uniform (icon, heading, body, rail for
        a card; number, heading, body for a step), so the fix is to let the
        cell's own rows BE the grid's rows: `grid-template-rows:subgrid`.
        Every row is then sized by the tallest cell in it, so all four
        headings share a baseline, all four body blocks start on the same
        line, and all four rails sit on the same rule — with no reserved
        empty space when nothing wraps. */
@supports (grid-template-rows:subgrid){
  .cards > .card{
    display:grid; grid-template-rows:subgrid; grid-row:span 4;
    align-content:stretch;
  }
  .cards > .card > p{flex:none}
  .steps > div{
    display:grid; grid-template-rows:subgrid; grid-row:span 3;
  }
  /* The strip's tiles share the card's four-part shape; its lead cell is a
     deliberately different, vertically centred block and keeps its own flow. */
  .strip > a:not(.lead-cell){
    display:grid; grid-template-rows:subgrid; grid-row:span 4;
  }
  .strip > a:not(.lead-cell) > p{flex:none}
  .strip > .lead-cell{grid-row:span 4}
}

/* --- L1: the italic line must break -------------------------------------
   The display:block rule was written against `.hero h1 em`; the hero class
   in this direction is `.hero-house`, so the second line was running on. */
.hero-house h1 em{display:block; font-style:italic; font-weight:400;
  color:var(--garnet)}
html:not([lang="en"]) .hero-house h1 em{font-style:normal}

/* --- L2: the art is a watermark, not a picture --------------------------
   At 1440 it was sitting centre-behind the lede at full strength and reading
   as two overlapping drawings. Push it to the right margin, below the type,
   and take it down to a genuine watermark. */
.hero-art{opacity:.10}
@media (min-width:1000px){
  .hero-art{
    background-position:right -70px bottom -24px;
    background-size:auto min(66%,360px);
    opacity:.14;
  }
}
@media (min-width:1400px){
  .hero-art{background-position:right 2% bottom -24px}
}