/* ========================================================================== Heeraa Financials — design system White ground, colour in whole blocks, centred composition. Two Latin faces; one Noto Sans per Indic script. ========================================================================== */ :root{ /* ground */ --white:#FFFFFF; --paper:#FAF9F7; /* alternating band, inputs */ --tint:#FBF4E6; /* the warm block — sampled from the crest */ --tint-rule:#EADFC4; --navy:#0B1E38; /* the deep block */ --navy-2:#081729; --navy-lift:#14304F; /* ink */ --ink:#0C1520; --ink-2:#4C525B; --ink-3:#7C828B; --on-navy:#F2EFE8; --on-navy-2:#9FB0C4; /* rule */ --rule:#E9E9E7; --rule-2:#B4B3AC; /* 3.06:1 on white — WCAG 1.4.11 for input borders */ --rule-navy:rgba(216,180,88,.28); /* accent */ --gold:#B08A2C; --gold-lift:#D8B458; --gold-deep:#8A6A1E; /* semantic */ --ok:#1F6F4A; --warn:#8A5A12; /* type */ --serif:'Playfair Display', Georgia, 'Times New Roman', serif; --sans:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* scale — fluid between a 360px phone and a 1440px desktop */ --t-cap: clamp(10px, .16vw + 9.4px, 11px); --t-small:clamp(13px, .18vw + 12.3px, 14px); --t-body: clamp(15px, .22vw + 14.2px, 16.5px); --t-lede: clamp(17px, .5vw + 15.2px, 20px); --t-h3: clamp(19px, .5vw + 17.2px, 23px); --t-h2: clamp(25px, 1.7vw + 19px, 38px); --t-h1: clamp(34px, 4vw + 20px, 66px); --t-fig: clamp(30px, 2.6vw + 21px, 48px); /* rhythm */ --sp-section: clamp(56px, 6vw, 104px); --sp-block: clamp(28px, 3vw, 48px); --measure: 62ch; --wrap: 1080px; --wrap-narrow: 760px; } /* --- script-specific stacks -------------------------------------------- */ html[lang="ta"]{ --serif:'Noto Sans Tamil', var(--sans); --sans:'Noto Sans Tamil', -apple-system, system-ui, sans-serif; } html[lang="hi"]{ --serif:'Noto Sans Devanagari', var(--sans); --sans:'Noto Sans Devanagari', -apple-system, system-ui, sans-serif; } html[lang="ml"]{ --serif:'Noto Sans Malayalam', var(--sans); --sans:'Noto Sans Malayalam', -apple-system, system-ui, sans-serif; } html[lang="te"]{ --serif:'Noto Sans Telugu', var(--sans); --sans:'Noto Sans Telugu', -apple-system, system-ui, sans-serif; } html[lang="kn"]{ --serif:'Noto Sans Kannada', var(--sans); --sans:'Noto Sans Kannada', -apple-system, system-ui, sans-serif; } /* Indic display type has no light serif companion — it goes lighter and larger instead */ html:not([lang="en"]) .display{ font-weight:300; letter-spacing:0; line-height:1.22; } html:not([lang="en"]) .kicker{ letter-spacing:.08em; } *,*::before,*::after{ box-sizing:border-box } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } body{ margin:0; background:var(--white); color:var(--ink-2); font-family:var(--sans); font-size:var(--t-body); line-height:1.65; font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;height:auto;display:block} a{color:var(--ink); text-decoration:none} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; } h1,h2,h3,h4{margin:0; color:var(--ink); text-wrap:balance; font-weight:400} p{margin:0} ul{margin:0;padding:0;list-style:none} /* --- skip link --------------------------------------------------------- */ .skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:200} .skip:focus{left:12px;top:12px} /* --- layout ------------------------------------------------------------ */ .wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,44px)} .narrow{max-width:var(--wrap-narrow); margin-inline:auto} .section{padding-block:var(--sp-section)} .centered{text-align:center} .centered .measure{margin-inline:auto} .measure{max-width:var(--measure)} /* the site is centred: headings, ledes and section heads sit on the centre line */ .sec-head{text-align:center; margin-bottom:var(--sp-block)} .sec-head .kicker{margin-bottom:14px} .sec-head h2{font-family:var(--serif); font-weight:200; font-size:var(--t-h2); line-height:1.14; letter-spacing:-.012em; max-width:24ch; margin-inline:auto} .sec-head .lede{margin:16px auto 0; max-width:56ch; color:var(--ink-2); font-size:var(--t-lede); line-height:1.6} .kicker{font-size:var(--t-cap); letter-spacing:.22em; text-transform:uppercase; color:var(--gold); font-weight:600; display:block} .kicker.muted{color:var(--ink-3)} .rule-diamond{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto var(--sp-block)} .rule-diamond i{height:1px;width:min(90px,14vw);background:var(--rule-2);display:block} .rule-diamond b{width:5px;height:5px;background:var(--gold);transform:rotate(45deg);display:block} /* --- header ------------------------------------------------------------ */ .site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--rule)} .header-in{display:flex;align-items:center;justify-content:space-between;gap:20px; padding-block:12px} .brand{display:flex;align-items:center;gap:11px} .brand img{height:38px;width:auto} .brand-name{display:flex;flex-direction:column;line-height:1.1} .brand-name b{font-family:var(--serif);font-weight:400;font-size:16px;color:var(--ink); letter-spacing:.01em} .brand-name span{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3); margin-top:3px} .nav-main{display:flex;gap:clamp(14px,2vw,26px);align-items:center} .nav-main a{font-size:13.5px;color:var(--ink-2)} .nav-main a:hover,.nav-main a[aria-current="page"]{color:var(--ink)} .header-actions{display:flex;align-items:center;gap:12px} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600; padding:12px 22px;border:1px solid transparent;cursor:pointer;font-family:var(--sans)} .btn-primary{background:var(--navy);color:#fff} .btn-primary:hover{background:var(--navy-lift)} .btn-ghost{border-color:var(--rule-2);color:var(--ink)} .btn-ghost:hover{border-color:var(--gold);color:var(--gold-deep)} .btn-gold{background:var(--gold);color:#fff} .btn-gold:hover{background:var(--gold-deep)} .btn-sm{padding:8px 15px;font-size:11px} .btn-on-navy{border:1px solid var(--gold-lift);color:var(--gold-lift);background:transparent} .btn-on-navy:hover{background:var(--gold-lift);color:var(--navy)} /* language switch */ .lang{position:relative} .lang-btn{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2); border:1px solid var(--rule-2);background:transparent;padding:7px 13px;cursor:pointer; font-family:var(--sans)} .lang-btn:hover{border-color:var(--gold)} .lang-menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--rule-2); min-width:190px;padding:6px;display:none;box-shadow:0 12px 34px -18px rgba(12,21,32,.4);z-index:120} .lang-menu[data-open="true"]{display:block} .lang-menu a{display:flex;justify-content:space-between;gap:14px;padding:9px 12px;font-size:14px; color:var(--ink-2)} .lang-menu a:hover{background:var(--paper);color:var(--ink)} .lang-menu a[aria-current="true"]{color:var(--gold-deep);font-weight:600} .lang-menu .en-name{color:var(--ink-3);font-size:12px} .nav-toggle{display:none;background:none;border:1px solid var(--rule-2);padding:8px 12px; cursor:pointer;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-family:var(--sans)} /* --- hero -------------------------------------------------------------- */ .hero{padding-block:clamp(56px,9vw,110px) clamp(44px,6vw,76px);text-align:center} .hero .crest{width:clamp(64px,9vw,92px);margin:0 auto 26px} .hero h1{font-family:var(--serif);font-weight:200;font-size:var(--t-h1);line-height:1.02; letter-spacing:-.022em;margin-bottom:22px} .hero .lede{max-width:50ch;margin:0 auto;font-size:var(--t-lede);line-height:1.6;color:var(--ink-2)} .hero .btn-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px} .states{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap; margin-top:26px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} .states i{width:4px;height:4px;background:var(--gold);transform:rotate(45deg);display:block} /* --- facts strip ------------------------------------------------------- */ .facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule); border-block:1px solid var(--rule)} .facts div{background:var(--white);padding:26px 18px;text-align:center} .facts dt{font-size:var(--t-cap);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3); margin-bottom:8px} .facts dd{margin:0;font-family:var(--serif);font-weight:200;font-size:var(--t-fig);line-height:1; color:var(--ink);font-variant-numeric:tabular-nums} /* --- product grid ------------------------------------------------------ */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:18px} .card{border:1px solid var(--rule);padding:30px 24px 26px;text-align:center;background:var(--white); display:flex;flex-direction:column;transition:border-color .18s ease} .card:hover{border-color:var(--gold)} .card .ic{width:42px;height:42px;margin:0 auto 18px;color:var(--gold)} .card .ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.3; stroke-linecap:round;stroke-linejoin:round} .card h3{font-family:var(--serif);font-weight:300;font-size:var(--t-h3);margin-bottom:10px} .card p{font-size:var(--t-small);color:var(--ink-2);flex:1} .card .rate{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule); font-size:12px;letter-spacing:.06em;color:var(--gold-deep);font-variant-numeric:tabular-nums} /* --- rows list (structured books) -------------------------------------- */ .rows{border-top:1px solid var(--rule);max-width:860px;margin-inline:auto} .rows li{border-bottom:1px solid var(--rule)} .rows a{display:grid;grid-template-columns:1fr auto;gap:24px;padding:20px 4px;align-items:baseline} .rows a:hover h3{color:var(--gold-deep)} .rows h3{font-family:var(--serif);font-weight:300;font-size:var(--t-h3);margin-bottom:5px} .rows p{font-size:var(--t-small);color:var(--ink-2);max-width:56ch} .rows .rate{font-size:12px;color:var(--gold-deep);white-space:nowrap;font-variant-numeric:tabular-nums} /* --- the deep block ---------------------------------------------------- */ .band{background:var(--navy);color:var(--on-navy-2);padding-block:var(--sp-section);text-align:center} .band .kicker{color:var(--gold-lift)} .band h2{font-family:var(--serif);font-weight:200;font-size:var(--t-h2);line-height:1.16; color:var(--on-navy);max-width:22ch;margin:0 auto 20px} .band p{max-width:58ch;margin-inline:auto;font-size:var(--t-body);line-height:1.75} .band .ledger{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:720px; margin:44px auto 0;padding-top:26px;border-top:1px solid var(--rule-navy)} .band .ledger dt{font-size:var(--t-cap);letter-spacing:.16em;text-transform:uppercase; color:var(--gold-lift);margin-bottom:8px} .band .ledger dd{margin:0;font-family:var(--serif);font-weight:200;font-size:var(--t-fig); line-height:1;color:var(--on-navy);font-variant-numeric:tabular-nums} .band .btn-row{margin-top:34px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap} /* --- the warm block ---------------------------------------------------- */ .tinted{background:var(--tint);padding-block:var(--sp-section)} .tinted .sec-head h2{color:var(--ink)} .tinted .kicker{color:var(--gold-deep)} /* --- steps ------------------------------------------------------------- */ .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px; background:var(--rule);border:1px solid var(--rule)} .steps > div{background:var(--white);padding:28px 22px;text-align:center} .steps .n{font-size:12px;color:var(--gold);letter-spacing:.14em;display:block;margin-bottom:12px; font-variant-numeric:tabular-nums} .steps h3{font-family:var(--serif);font-weight:300;font-size:var(--t-h3);margin-bottom:8px} .steps p{font-size:var(--t-small);color:var(--ink-2)} /* --- calculator -------------------------------------------------------- */ .calc{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px); background:var(--white);border:1px solid var(--tint-rule);padding:clamp(24px,3.4vw,40px); max-width:940px;margin-inline:auto;text-align:left} .calc .field{margin-bottom:24px} .calc .field:last-child{margin-bottom:0} .calc .field-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px; margin-bottom:10px} .calc label{font-size:var(--t-cap);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)} .calc output,.calc .val{font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums; font-weight:500} .calc input[type=range]{width:100%;-webkit-appearance:none;appearance:none;background:transparent; height:20px;cursor:pointer;margin:0} .calc input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--rule-2)} .calc input[type=range]::-moz-range-track{height:2px;background:var(--rule-2)} .calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px; background:var(--gold);margin-top:-6px;transform:rotate(45deg);border:none} .calc input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--gold);border:none; transform:rotate(45deg)} .calc .result{border-left:1px solid var(--tint-rule);padding-left:clamp(20px,3vw,40px); display:flex;flex-direction:column;justify-content:center} .calc .result dt{font-size:var(--t-cap);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)} .calc .result .big{font-family:var(--serif);font-weight:200;font-size:var(--t-fig);line-height:1; color:var(--ink);margin:10px 0 20px;font-variant-numeric:tabular-nums} .calc .result .sub{display:flex;justify-content:space-between;gap:16px;padding:9px 0; border-top:1px solid var(--tint-rule);font-size:var(--t-small)} .calc .result .sub b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums} .disclaimer{font-size:12.5px;color:var(--ink-3);max-width:60ch;margin:20px auto 0;text-align:center} /* --- timeline ---------------------------------------------------------- */ .timeline{max-width:760px;margin-inline:auto;border-left:1px solid var(--rule); padding-left:clamp(22px,4vw,40px);text-align:left} .timeline li{position:relative;padding-bottom:36px} .timeline li:last-child{padding-bottom:0} .timeline li::before{content:"";position:absolute;left:calc(-1 * clamp(22px,4vw,40px) - 4px);top:9px; width:7px;height:7px;background:var(--gold);transform:rotate(45deg)} .timeline .year{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold); display:block;margin-bottom:7px;font-variant-numeric:tabular-nums} .timeline h3{font-family:var(--serif);font-weight:300;font-size:var(--t-h3);margin-bottom:8px} .timeline p{font-size:var(--t-small);color:var(--ink-2)} /* --- people ------------------------------------------------------------ */ .people{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:26px; max-width:820px;margin-inline:auto} .person{text-align:center} .person .portrait{width:112px;height:140px;margin:0 auto 16px;border:1px solid var(--rule-2); background:var(--paper);display:flex;align-items:center;justify-content:center; color:var(--ink-3);font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-align:center; padding:10px} .person h3{font-family:var(--serif);font-weight:400;font-size:18px;margin-bottom:5px} .person .role{font-size:var(--t-cap);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)} .person p{font-size:var(--t-small);color:var(--ink-2);margin-top:10px} .memoriam{text-align:center;max-width:640px;margin-inline:auto} .memoriam .portrait{width:128px;height:160px;margin:0 auto 20px;border:2px solid var(--gold); border-radius:50%;overflow:hidden;background:var(--paper);display:flex;align-items:center; justify-content:center;color:var(--ink-3);font-size:11px;padding:14px;text-align:center} .memoriam .label{font-size:var(--t-cap);letter-spacing:.2em;text-transform:uppercase; color:var(--gold);margin-bottom:10px;display:block} .memoriam h2{font-family:var(--serif);font-weight:300;font-size:var(--t-h2);margin-bottom:8px} .memoriam .role{font-size:var(--t-cap);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)} /* --- prose ------------------------------------------------------------- */ .prose{max-width:var(--measure);margin-inline:auto;text-align:left} .prose h2{font-family:var(--serif);font-weight:300;font-size:var(--t-h2);margin:44px 0 14px} .prose h3{font-family:var(--serif);font-weight:400;font-size:var(--t-h3);margin:32px 0 10px} .prose p{margin-bottom:16px} .prose ul{margin:0 0 20px;padding-left:0} .prose ul li{position:relative;padding-left:22px;margin-bottom:9px} .prose ul li::before{content:"";position:absolute;left:2px;top:11px;width:5px;height:5px; background:var(--gold);transform:rotate(45deg)} .prose a{color:var(--gold-deep);border-bottom:1px solid var(--tint-rule)} /* --- quote ------------------------------------------------------------- */ .pullquote{text-align:center;max-width:min(600px,100%);margin-inline:auto} .pullquote blockquote{margin:0;font-family:var(--serif);font-weight:200;font-style:italic; font-size:var(--t-h2);line-height:1.3;color:var(--ink)} .pullquote figcaption{margin-top:22px;font-size:var(--t-cap);letter-spacing:.16em; text-transform:uppercase;color:var(--ink-3)} /* --- trust grid -------------------------------------------------------- */ .trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px; max-width:940px;margin-inline:auto} .trust > div{text-align:center;padding:0 8px} .trust h3{font-family:var(--serif);font-weight:400;font-size:17px;margin-bottom:9px} .trust p{font-size:var(--t-small);color:var(--ink-2)} /* --- form -------------------------------------------------------------- */ .form{max-width:620px;margin-inline:auto;text-align:left} .form .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form .f{margin-bottom:16px} .form label{display:block;font-size:var(--t-cap);letter-spacing:.14em;text-transform:uppercase; color:var(--ink-3);margin-bottom:7px} .form input,.form select,.form textarea{width:100%;padding:12px 14px;border:1px solid var(--rule-2); background:var(--white);font-family:var(--sans);font-size:15px;color:var(--ink);border-radius:0} .form textarea{min-height:110px;resize:vertical} .form input:focus,.form select:focus,.form textarea:focus{border-color:var(--gold);outline:none; box-shadow:0 0 0 3px rgba(176,138,44,.12)} .form .consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-2); margin:18px 0} .form .consent input{width:auto;margin-top:3px} .form .msg{padding:13px 16px;font-size:14px;margin-top:16px;display:none} .form .msg[data-show="true"]{display:block} .form .msg.ok{background:var(--tint);color:var(--gold-deep);border:1px solid var(--tint-rule)} .form .msg.err{background:#FDF2F0;color:#8A2A18;border:1px solid #E9CFC9} /* --- footer ------------------------------------------------------------ */ .site-footer{background:var(--navy-2);color:var(--on-navy-2);padding-block:var(--sp-section) 0; margin-top:0} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;text-align:left} .footer-grid h2,.footer-grid h4{font-size:var(--t-cap);letter-spacing:.16em;text-transform:uppercase; color:var(--gold-lift);margin-bottom:14px;font-weight:600} .footer-grid a{color:var(--on-navy-2);font-size:var(--t-small);display:block;padding:4px 0} .footer-grid a:hover{color:var(--on-navy)} .footer-grid p{font-size:var(--t-small);line-height:1.7} .footer-brand{display:flex;align-items:center;gap:11px;margin-bottom:16px} .footer-brand img{height:44px;width:auto} .footer-brand b{font-family:var(--serif);font-weight:400;font-size:17px;color:var(--on-navy)} .footer-legal{border-top:1px solid var(--rule-navy);margin-top:44px;padding-block:26px 34px; text-align:center;font-size:12.5px;line-height:1.8} .footer-legal .deposit{color:var(--gold-lift);margin-top:8px} .footer-legal .memoriam-line{margin-top:12px;font-style:italic} /* --- floating actions -------------------------------------------------- */ .float{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;flex-direction:column;gap:10px} .float a,.float button{width:52px;height:52px;border-radius:50%;display:flex;align-items:center; justify-content:center;border:none;cursor:pointer;box-shadow:0 6px 22px -8px rgba(12,21,32,.45)} .float .wa{background:#25D366;color:#fff} .float .chat-open{background:var(--navy);color:var(--gold-lift)} .float svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6} /* --- chat -------------------------------------------------------------- */ .chat-panel{position:fixed;right:18px;bottom:18px;width:min(390px,calc(100vw - 36px)); height:min(620px,calc(100vh - 36px));background:#fff;border:1px solid var(--rule-2); box-shadow:0 24px 60px -24px rgba(12,21,32,.45);display:none;flex-direction:column;z-index:130} .chat-panel[data-open="true"]{display:flex} .chat-head{background:var(--navy);color:var(--on-navy);padding:14px 16px;display:flex; align-items:center;gap:11px} .chat-head img{height:32px;width:auto} .chat-head .t{flex:1} .chat-head b{display:block;font-family:var(--serif);font-weight:400;font-size:15px;color:#fff} .chat-head span{font-size:11px;color:var(--on-navy-2)} .chat-head button{background:none;border:none;color:var(--on-navy-2);cursor:pointer;font-size:20px; line-height:1;padding:4px 6px} .chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px; background:var(--paper)} .msg-row{display:flex} .msg-row.me{justify-content:flex-end} .bubble{max-width:84%;padding:11px 14px;font-size:14.5px;line-height:1.55} .bubble.bot{background:#fff;border:1px solid var(--rule);color:var(--ink-2)} .bubble.me{background:var(--navy);color:#fff} .bubble b{color:var(--ink);font-weight:600} .bubble.me b{color:#fff} .bubble ul{margin:8px 0 0} .bubble li{padding-left:15px;position:relative;margin-bottom:5px} .bubble li::before{content:"";position:absolute;left:2px;top:9px;width:4px;height:4px; background:var(--gold);transform:rotate(45deg)} .chips{display:flex;flex-wrap:wrap;gap:7px;padding:10px 16px;border-top:1px solid var(--rule); background:#fff} .chips button{font-size:12.5px;padding:7px 12px;border:1px solid var(--rule-2);background:#fff; cursor:pointer;color:var(--ink-2);font-family:var(--sans);text-align:left} .chips button:hover{border-color:var(--gold);color:var(--gold-deep)} .chat-form{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--rule);background:#fff} .chat-form input{flex:1;padding:11px 13px;border:1px solid var(--rule-2);font-family:var(--sans); font-size:14.5px;color:var(--ink)} .chat-form button{background:var(--navy);color:#fff;border:none;padding:0 17px;cursor:pointer; font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-family:var(--sans)} .chat-foot{padding:8px 16px 12px;font-size:11px;color:var(--ink-3);text-align:center;background:#fff} /* --- responsive -------------------------------------------------------- */ @media (max-width:900px){ .footer-grid{grid-template-columns:1fr 1fr} .calc{grid-template-columns:1fr} .calc .result{border-left:none;border-top:1px solid var(--tint-rule);padding-left:0;padding-top:26px} .facts{grid-template-columns:1fr 1fr} } @media (max-width:760px){ .nav-main{display:none;position:absolute;left:0;right:0;top:100%;background:#fff; border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;padding:10px 0; gap:0} .nav-main[data-open="true"]{display:flex} .nav-main a{padding:12px clamp(20px,5vw,44px);border-bottom:1px solid var(--rule)} .nav-toggle{display:inline-block} .site-header .header-in{position:relative} .band .ledger{grid-template-columns:1fr;gap:22px} .rows a{grid-template-columns:1fr;gap:6px} .rows .rate{text-align:left} .form .grid2{grid-template-columns:1fr} } @media (max-width:520px){ .facts{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr} .chat-panel{right:0;bottom:0;width:100vw;height:100vh;border:none} } /* --- print ------------------------------------------------------------- */ @media print{ .site-header,.float,.chat-panel,.btn-row{display:none!important} body{color:#000;background:#fff} .band,.tinted{background:#fff!important;color:#000!important} .band h2,.band p{color:#000!important} } /* ---- Smooth reveal (site.js only; the attribute is set by script, so without JavaScript nothing here applies and every section is untouched). Additive: sections stay fully visible and readable without .in — this only slides them the last few pixels into place. ---- */ html[data-reveal="on"] .section{ transform:translateY(10px); transition:transform .5s ease } html[data-reveal="on"] .section.in{transform:none} @media (prefers-reduced-motion:reduce){ html[data-reveal="on"] .section{transform:none;transition:none} } /* --- policy tables ----------------------------------------------------- */ .table-scroll{overflow-x:auto;margin:0 0 22px;-webkit-overflow-scrolling:touch} .prose table{border-collapse:collapse;width:100%;min-width:520px;font-size:var(--t-small)} .prose th,.prose td{border:1px solid var(--rule);padding:10px 12px;text-align:left;vertical-align:top} .prose th{font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-2);font-weight:500;background:var(--tint)} .prose ol{margin:0 0 20px;padding-left:22px} .prose ol li{margin-bottom:9px} /* ======================================================================= Design-review corrections. Defect fixes only — no change of direction. ======================================================================= */ /* 1 — Product icon rendered as a solid black blob wherever .ic sits outside a .card (the product hero on /lending//), because the stroke styling was scoped to `.card .ic svg`. Scope it to `.ic svg`. */ .ic{color:var(--gold)} .ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.3; stroke-linecap:round;stroke-linejoin:round} /* 2 — Facts strip. `repeat(4,1fr)` uses an auto (min-content) minimum, so the 21-character CIN on /about/ blew the tracks past the container: the fourth cell sat outside the ruled box on desktop and the strip caused horizontal page scroll at 390px. Cap the tracks, let long values wrap, and bottom-align the figures so two-line labels do not shunt one figure below its neighbours. */ .facts{grid-template-columns:repeat(4,minmax(0,1fr))} .facts div{display:flex;flex-direction:column;min-width:0} .facts dt{overflow-wrap:break-word} .facts dd{margin-top:auto;overflow-wrap:break-word} /* A registration code is not a display figure: set it in the text face at a size that fits its column instead of at --t-fig. */ .facts dd.code{font-family:var(--sans);font-weight:400;font-size:var(--t-small); letter-spacing:.05em;line-height:1.45;overflow-wrap:anywhere; padding-top:6px} /* 3 — Header. "The house" and "Apply now" wrapped mid-label and sat off the nav baseline; in ta/ml/hi the wordmark wrapped and the nav overlapped it. Hold every header label on one line and let the nav, not the brand, absorb the slack. */ .header-in{gap:clamp(12px,1.6vw,20px)} .brand{flex:0 0 auto} .brand-name b,.brand-name span{white-space:nowrap} .nav-main{flex:1 1 auto;justify-content:center;flex-wrap:wrap;row-gap:4px} .nav-main a{white-space:nowrap} .header-actions{flex:0 0 auto} .header-actions .btn,.lang-btn,.nav-toggle{white-space:nowrap} /* 4 — Calculator facility select was the raw browser control — the only unstyled input on the site. Match the form fields. */ .calc select{width:100%;margin-top:10px;padding:11px 38px 11px 14px; border:1px solid var(--rule-2);background-color:var(--white);color:var(--ink); font-family:var(--sans);font-size:var(--t-small);line-height:1.3;border-radius:0; -webkit-appearance:none;appearance:none;cursor:pointer; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23B08A2C' stroke-width='1.3'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;background-size:11px 8px} .calc select:hover{border-color:var(--gold)} .calc select:focus{border-color:var(--gold);outline:none} /* 5 — Rhythm. A page head that lives in its own
collected that section's bottom padding plus the next section's top padding — up to 208px of empty white between a lede and the first content on /about/, /contact/, /founders/ and the product pages. Collapse the join when both sides are plain white; coloured blocks keep their full breathing room. */ main > section:has(> .wrap > .sec-head h1) + section:not(.band):not(.tinted):not(.hero), main > section:has(> .wrap > .memoriam) + section:not(.band):not(.tinted):not(.hero){ padding-top:0 } /* 6 — Indic locales. The display line-height (1.02) and the Latin tracking were carried into scripts that cannot take them: Devanagari matras collided with the line above, and .12–.22em tracking pulled Tamil and Malayalam words apart glyph by glyph. */ html:not([lang="en"]) h1, html:not([lang="en"]) h2, html:not([lang="en"]) h3, html:not([lang="en"]) .hero h1, html:not([lang="en"]) .band h2, html:not([lang="en"]) .display{letter-spacing:0;line-height:1.35} html:not([lang="en"]) .facts dd, html:not([lang="en"]) .calc .result .big, html:not([lang="en"]) .ledger b, html:not([lang="en"]) .rows .rate{line-height:1.3} html:not([lang="en"]) .lede, html:not([lang="en"]) p{line-height:1.75} html:not([lang="en"]) .kicker, html:not([lang="en"]) .states, html:not([lang="en"]) .btn, html:not([lang="en"]) .nav-toggle, html:not([lang="en"]) .lang-btn, html:not([lang="en"]) .facts dt, html:not([lang="en"]) .calc label, html:not([lang="en"]) .calc .result dt, html:not([lang="en"]) .role, html:not([lang="en"]) .site-footer h4, html:not([lang="en"]) .chat-panel .kicker{letter-spacing:.02em} html:not([lang="en"]) .pullquote blockquote{line-height:1.55} /* 7 — Mobile header. At 390px the wordmark wrapped under the MENU button and the eyebrow ran beneath it; in ta/ml the Apply label pushed the whole row past the viewport and the page scrolled sideways. Let the row wrap into two clean lines instead of colliding. */ @media (max-width:760px){ .header-in{flex-wrap:wrap;gap:10px;row-gap:10px} .brand{flex:1 1 auto;min-width:0} .brand-name b{font-size:15px} .nav-toggle{flex:0 0 auto} .header-actions{flex:1 1 100%;justify-content:flex-end;gap:10px} .header-actions .btn{white-space:normal;text-align:center;line-height:1.3; max-width:60%} .nav-main{top:100%} } /* 8 — A single very long word can be wider than a phone screen: the Malayalam band heading spells 1995 out as one 44-character word and pushed /ml/ 190px past the viewport at 390. Let display text break inside a word only when it genuinely will not fit. */ h1,h2,h3,.display,.pullquote blockquote,.hero .lede{overflow-wrap:break-word} /* 9 — With every header label held on one line (3), the seven nav links no longer fit the 1080px measure at their old tracking. Tighten the two header gaps so English, Tamil, Hindi, Telugu and Kannada all sit on a single row; Malayalam, whose labels are longest, now wraps to a second centred row instead of overlapping the wordmark. */ .header-in{gap:clamp(10px,1.3vw,16px)} .nav-main{gap:clamp(12px,1.7vw,21px)} html:not([lang="en"]) .nav-main a{font-size:12.5px} /* 10 — Page titles. `.sec-head h2` carried the light-serif display treatment but `.sec-head h1` was never styled, so the

on /about/, /contact/, /lending/, /calculators/, /founders/ and every product page fell back to 32px Archivo 400 — the body face — while the two hero pages showed the intended Playfair Display. Give the h1 the display treatment, one step above the section h2. */ .sec-head h1{font-family:var(--serif);font-weight:200; font-size:clamp(30px,2.4vw + 18px,48px);line-height:1.08;letter-spacing:-.018em; max-width:22ch;margin-inline:auto} html:not([lang="en"]) .sec-head h1{letter-spacing:0;line-height:1.35;font-weight:300} /* 11 — Facts figures at --t-fig (48px) are wider than a quarter of the 1080px measure once the value is a real one: "₹5,00,00,000" broke mid-number on /about/ and the ticket range wrapped on the product pages. Size the strip's figures to the column they actually live in. */ .facts dd{font-size:clamp(22px,1.8vw + 11px,37px)} /* 12 — Indic caption sizes. --t-cap is 10–11px, set for uppercase Latin; Tamil, Malayalam and Devanagari carry vowel signs and conjuncts that are not legible at that size. Give the caption tier one step more in the Indic locales. */ html:not([lang="en"]) .kicker, html:not([lang="en"]) .states, html:not([lang="en"]) .facts dt, html:not([lang="en"]) .calc label, html:not([lang="en"]) .calc .result dt, html:not([lang="en"]) .role, html:not([lang="en"]) .site-footer h4, html:not([lang="en"]) .steps .num, html:not([lang="en"]) .btn{font-size:12.5px} html:not([lang="en"]) .btn-sm{font-size:11.5px} /* 13 — The book index (/lending/) needs the whole wrap, not the 62ch prose measure: five columns of a twelve-row ledger. The table keeps its own horizontal scroll inside .table-scroll, so the page never scrolls. */ .prose.wide{max-width:none} .prose.wide table{min-width:660px;font-variant-numeric:tabular-nums} /* 14 — The CIN inside the verify .trust block: the register number set apart from the sentence above it, in the caption face, and never broken across a line in a way that hides a character. */ .trust p.cin{margin-top:9px;font-family:var(--sans);font-size:var(--t-small); letter-spacing:.06em;color:var(--ink);overflow-wrap:anywhere} /* --- open Q&A stack ---------------------------------------------------- */ /* Every answer visible: rule-separated question/answer pairs in a centred column, the answer left-aligned in a readable measure. No accordion. */ .faq{max-width:820px;margin-inline:auto;text-align:left;border-top:1px solid var(--rule)} .faq > div{border-bottom:1px solid var(--rule);padding:26px 0} .faq h3{font-family:var(--serif);font-weight:300;font-size:var(--t-h3);margin-bottom:10px} .faq p,.faq li{font-size:var(--t-small);color:var(--ink-2);max-width:65ch} .faq p + p,.faq ul{margin-top:10px} .faq li{position:relative;padding-left:22px;margin-bottom:7px} .faq li::before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px; background:var(--gold);transform:rotate(45deg)} /* 15 — Four to a row. Both auto-fit grids are a few pixels short of fitting four columns in their own container — .cards needs 1006px and the wrap gives 992, .trust needs 1038px and is capped at 940 — so the fourth item dropped to a row of its own on the lending groups and on the four states. Pin the count and step it down at the existing breakpoints. */ .cards.four,.trust.four{grid-template-columns:repeat(4,1fr)} @media (max-width:900px){.cards.four,.trust.four{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.cards.four,.trust.four{grid-template-columns:1fr}} /* ======================================================================= Accessibility audit — WCAG 2.2 AA corrections. Appended by the accessibility pass. Defect fixes only; the design direction (white ground, centred composition, gold as accent) is unchanged. Every rule below exists because a real criterion failed. ======================================================================= */ /* A1 — 1.4.3 Contrast (Minimum), AA. --ink-3 (#7C828B) is 3.87:1 on white and 3.54:1 on --tint. It carries the whole caption tier: .facts dt, .calc label, .form label, .calc .result dt, .states, .person .role, .disclaimer, .pullquote figcaption, .chat-foot, .kicker.muted. All of that is small text at 10–12.5px, so it needs 4.5:1, and all of it failed on both grounds. #686D75 is 5.21:1 on white and 4.76:1 on --tint — the same cool grey, one step down. */ :root{ --ink-3:#686D75; } /* A2 — 1.4.3, AA. --gold (#B08A2C) is 3.22:1 on white. It is set as the colour of .kicker (10–11px, the eyebrow above every section heading on every page) and of .steps .n. --gold-deep (#8A6A1E) is 5.05:1 on white and is already the site's gold-for-text token (.card .rate, .rows .rate, .tinted .kicker). Gold stays the accent; it just uses the readable member of the pair when it is text. .band .kicker (--gold-lift on navy, 8.42:1) and .tinted .kicker (--gold-deep on tint, 4.61:1) are more specific and keep theirs. */ .kicker{ color:var(--gold-deep) } .steps .n{ color:var(--gold-deep) } /* A3 — 1.4.3, AA + legibility. The header eyebrow "NBFC · Chennai · 1995" was 9.5px in --ink-3: 3.87:1 and below any usable size for an older reader. 11px in --ink-2 is 7.88:1. */ .brand-name span{ font-size:11px; color:var(--ink-2) } /* A4 — 2.4.7 Focus Visible, AA. `.form input:focus`, `.form select:focus`, `.form textarea:focus` and `.calc select:focus` each set `outline:none`, and being two-class selectors they beat the global :focus-visible ring. On the calculator's product