/* ==========================================================================
   ANG-FINTECH — SHARED DESIGN SYSTEM
   Extracted verbatim from the approved Home page (index.html <style>) so every
   internal page inherits identical tokens, type ladder, buttons, header,
   footer and reveal behaviour. index.html keeps its own inline copy and is
   deliberately left untouched — this file must stay in sync with it.
   Internal-page-only components are appended in section 16 at the end.
   ========================================================================== */
/* ==========================================================================
   0. DESIGN TOKENS — ANG-FINTECH brand
   --------------------------------------------------------------------------
   Palette sampled from the live angfintech.in homepage: amber/gold primary,
   near-black navy for header/footer, green used only as a success accent.
   Type is Inter throughout (the IDFC FIRST reference build's family).
   Fine-tune the hex values below if you have exact brand-guide codes.
   ========================================================================== */
:root{
  --c-ink:#141C2B;            /* headings */
  --c-ink-deep:#1C2434;       /* footer / dark sections (matches live footer) */
  --c-brand:#E9A13B;          /* ANG amber — primary CTA fill */
  --c-brand-dark:#D18C24;     /* amber hover */
  --c-brand-tint:#FDF3E3;     /* lightest amber wash */
  --c-brand-deep:#A35C08;     /* amber that passes contrast as TEXT on white */
  --c-green:#3FB24C;          /* live site's Apply Now green — used sparingly */

  --c-text:#22303F;
  --c-text-soft:#54677C;
  --c-text-faint:#7C8DA1;
  --c-bg:#FFFFFF;
  --c-bg-alt:#F7F8FA;
  --c-line:#E4E8EE;
  --c-line-soft:#EFF2F6;
  --c-warn-bg:#FFF7E6;
  --c-warn-line:#E9C173;
  --c-warn-text:#7A5200;

  /* Per-product card tints — coordinated warm/cool mix, all distinct */
  --p1-bg:#FDEFE0; --p1-ic:#A8570C;
  --p2-bg:#E9F4EC; --p2-ic:#22734A;
  --p3-bg:#EAF1F9; --p3-ic:#1C5480;
  --p4-bg:#F3EEF8; --p4-ic:#65389B;
  --p5-bg:#FAF0D3; --p5-ic:#7A5A0C;
  --p6-bg:#ECEFF3; --p6-ic:#38495C;

  --r-sm:10px; --r-md:14px; --r-lg:22px; --r-xl:26px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(20,28,43,.05), 0 4px 14px rgba(20,28,43,.05);
  --sh-2:0 2px 6px rgba(20,28,43,.06), 0 14px 34px rgba(20,28,43,.10);
  --sh-3:0 24px 60px rgba(20,28,43,.16);

  --f:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --wrap:1280px;
  --gut:clamp(16px, 3.2vw, 34px);
  --header-h:64px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   1. RESET / BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0; background:var(--c-bg); color:var(--c-text);
  font-family:var(--f); font-size:16px; line-height:26px; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{max-width:100%; height:auto; display:block}
/* ==========================================================================
   TYPE LADDER — mirrors the IDFC FIRST Bank system read from its DevTools:
     .h1  48/59 w500  ->  38/46 (<=1199)  ->  32/40 (<=991)  ->  26/33 (<=767)
     card heading 14px w500 | small label 10px | body 16/26
   Headings are MEDIUM (500) / SEMIBOLD (600), not heavy, and carry no negative
   tracking — that light-heading + small-body contrast is what defines the look.
   ========================================================================== */
h1,h2,h3,h4{font-family:var(--f); color:var(--c-ink); margin:0 0 15px; letter-spacing:normal}
h1{font-size:48px; line-height:59px; font-weight:500}
h2{font-size:38px; line-height:46px; font-weight:600}
h3{font-size:20px; line-height:28px; font-weight:600}
h4{font-size:16px; line-height:24px; font-weight:600}
p{margin:0 0 1rem}
a{color:var(--c-brand-deep); text-decoration:none}
a:hover{text-decoration:underline}
ul{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit; cursor:pointer}
:focus-visible{outline:3px solid var(--c-brand-deep); outline-offset:3px; border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--c-ink-deep);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.section{padding:clamp(30px, 2.9vw, 46px) 0; position:relative}
.section--alt{background:linear-gradient(180deg,#FAF7F1 0%, #F5F7FA 100%)}
/* Warm tint so the page never reads as a wall of white */
.section--tint{background:linear-gradient(180deg,#FFFCF6 0%, #FAF1E1 58%, #FDFAF5 100%); overflow:hidden}
.section--wash{background:linear-gradient(180deg,#FFFFFF 0%, #FDFAF3 100%); overflow:hidden}
/* Soft brand blobs behind content */
.section--wash::before{
  content:""; position:absolute; top:-90px; right:-140px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(233,161,59,.16) 0%, transparent 68%); pointer-events:none;
}
.section--tint::after{
  content:""; position:absolute; bottom:-160px; left:-160px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(56,73,95,.10) 0%, transparent 68%); pointer-events:none;
}
.section > .wrap{position:relative; z-index:1}
.eyebrow{
  display:inline-block; font-weight:700; font-size:10px; line-height:14px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--c-brand-deep); background:var(--c-brand-tint);
  border:1px solid rgba(233,161,59,.35); padding:6px 11px; border-radius:var(--r-pill); margin:0 0 12px;
}
.lede{color:var(--c-text-soft); font-size:16px; line-height:26px; max-width:62ch}
.sec-head{max-width:680px; margin-bottom:clamp(14px,1.5vw,20px)}
.sec-head--center{margin-inline:auto; text-align:center}

/* Buttons ---------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-weight:600; font-size:15px; line-height:1; letter-spacing:normal;
  padding:12px 22px; border-radius:var(--r-pill); border:1.5px solid transparent;
  min-height:44px; text-decoration:none; cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
/* Amber fill + ink text: on-brand and passes contrast, unlike white-on-amber */
.btn--primary{background:var(--c-brand); color:var(--c-ink); box-shadow:0 8px 20px rgba(233,161,59,.34)}
.btn--primary:hover{background:var(--c-brand-dark); color:var(--c-ink); box-shadow:0 12px 26px rgba(233,161,59,.42)}
.btn--dark{background:var(--c-ink-deep); color:#fff}
.btn--dark:hover{background:#0E1522; color:#fff}
.btn--ghost{background:#fff; color:var(--c-ink); border-color:var(--c-line)}
.btn--ghost:hover{border-color:var(--c-brand); color:var(--c-brand-deep); background:var(--c-brand-tint)}
.btn--onDark{background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.55)}
.btn--onDark:hover{background:#fff; color:var(--c-ink); border-color:#fff}
.btn--sm{padding:9px 16px; min-height:38px; font-size:14px}
.btn--full{width:100%}

/* Build-note banner — development marker, remove before launch --------------*/
.buildnote{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--c-warn-bg); border:1px dashed var(--c-warn-line); color:var(--c-warn-text);
  border-radius:var(--r-md); padding:10px 14px; font-size:13px; line-height:20px; margin:0 0 16px;
}
.buildnote svg{flex:0 0 auto; margin-top:3px}

/* ==========================================================================
   2. HEADER / NAV
   ========================================================================== */
.header{
  position:sticky; top:0; z-index:90; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.header.is-stuck{border-bottom-color:var(--c-line); box-shadow:0 6px 24px rgba(20,28,43,.07)}
.header__inner{display:flex; align-items:center; gap:clamp(8px,1.4vw,20px); min-height:var(--header-h)}
/* Logo lockup: the gold ANG mark, with FINTECH set live in Inter beside it. */
.logo{flex:0 0 auto; display:inline-flex; align-items:center; gap:10px; text-decoration:none}
.logo:hover{text-decoration:none}
.logo__mark{height:38px; width:auto; display:block; flex:0 0 auto}
.logo__word{
  font-family:var(--f); font-weight:500; font-size:20px; line-height:1;
  letter-spacing:.24em; margin-inline-end:-.24em;  /* trims the trailing tracking so the lockup optically centres */
  text-transform:uppercase; color:var(--c-ink); white-space:nowrap;
}
.logo--onDark .logo__word{color:#fff}

.nav{margin-inline-start:auto}
.nav__list{display:flex; align-items:center; gap:2px}
.nav__link{
  display:inline-flex; align-items:center; gap:5px; padding:8px 11px; border-radius:var(--r-pill);
  font-weight:500; font-size:15px; color:var(--c-ink); text-decoration:none;
  transition:background-color .18s var(--ease), color .18s var(--ease);
}
.nav__link:hover,.nav__link[aria-expanded="true"]{background:var(--c-brand-tint); color:var(--c-brand-deep); text-decoration:none}
.nav__item{position:relative}
.nav__chev{transition:transform .2s var(--ease)}
.nav__link[aria-expanded="true"] .nav__chev{transform:rotate(180deg)}
.nav__menu{
  position:absolute; top:calc(100% + 10px); left:0; min-width:252px; background:#fff;
  border:1px solid var(--c-line); border-radius:var(--r-md); box-shadow:var(--sh-2);
  padding:8px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav__item.is-open .nav__menu{opacity:1; visibility:visible; transform:translateY(0)}
.nav__menu a{display:block; padding:9px 13px; border-radius:10px; color:var(--c-text); font-size:14px; text-decoration:none}
.nav__menu a:hover{background:var(--c-bg-alt); color:var(--c-brand-deep); text-decoration:none}

.header__actions{display:flex; align-items:center; gap:7px; flex:0 0 auto}
.iconbtn{
  width:38px; height:38px; border-radius:var(--r-pill); border:1px solid var(--c-line);
  background:#fff; display:grid; place-items:center; color:var(--c-ink);
  transition:border-color .18s var(--ease), color .18s var(--ease), background-color .18s var(--ease);
}
.iconbtn:hover{border-color:var(--c-brand); color:var(--c-brand-deep); background:var(--c-brand-tint)}
.btn--login{background:#fff; color:var(--c-ink); border-color:var(--c-brand)}
.btn--login:hover{background:var(--c-brand-tint); color:var(--c-brand-deep)}
.burger{display:none}

/* Mobile drawer ---------------------------------------------------------- */
.drawer{position:fixed; inset:0; z-index:120; visibility:hidden}
.drawer.is-open{visibility:visible}
.drawer__scrim{position:absolute; inset:0; background:rgba(20,28,43,.55); opacity:0; transition:opacity .28s var(--ease)}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer__panel{
  position:absolute; inset:0 0 0 auto; width:min(360px,88vw); background:#fff;
  transform:translateX(100%); transition:transform .3s var(--ease);
  display:flex; flex-direction:column; padding:18px; overflow-y:auto;
}
.drawer.is-open .drawer__panel{transform:translateX(0)}
.drawer__top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.drawer__top .logo__mark{height:34px}
.drawer__top .logo__word{font-size:18px}
.drawer__list{display:flex; flex-direction:column; gap:2px; margin-bottom:18px}
.drawer__list a{
  display:block; padding:13px 12px; border-radius:12px; font-weight:500; font-size:15px;
  color:var(--c-ink); text-decoration:none; border-bottom:1px solid var(--c-line-soft);
}
.drawer__list a:hover{background:var(--c-bg-alt); text-decoration:none}
.drawer__cta{display:grid; gap:10px; margin-top:auto; padding-top:18px}

/* Search overlay --------------------------------------------------------- */
.search{position:fixed; inset:0; z-index:130; display:none}
.search.is-open{display:block}
.search__scrim{position:absolute; inset:0; background:rgba(20,28,43,.6)}
.search__box{
  position:relative; max-width:620px; margin:14vh auto 0; background:#fff;
  border-radius:var(--r-lg); box-shadow:var(--sh-3); padding:18px; width:calc(100% - 32px);
}
.search__field{display:flex; align-items:center; gap:10px; border:2px solid var(--c-line); border-radius:var(--r-pill); padding:11px 16px}
.search__field:focus-within{border-color:var(--c-brand)}
.search__field input{border:0; outline:0; flex:1; font:inherit; font-size:1rem; background:transparent; min-width:0}
.search__results{margin-top:14px; max-height:46vh; overflow-y:auto}
.search__results a{display:block; padding:11px 14px; border-radius:12px; color:var(--c-text); text-decoration:none}
.search__results a:hover,.search__results a:focus{background:var(--c-bg-alt); text-decoration:none}
.search__results strong{color:var(--c-ink)}
.search__results small{display:block; color:var(--c-text-faint); font-size:13px}
.search__empty{padding:14px; color:var(--c-text-faint); font-size:.92rem}

/* ==========================================================================
   3. HERO SLIDER  (desktop banner 1920x700 = 2.743:1 | mobile 818x500)
   ========================================================================== */
.hero{position:relative; background:var(--c-ink-deep)}
.hero__viewport{position:relative; overflow:hidden}
.hero__track{display:flex; transition:transform .7s var(--ease)}
@media (prefers-reduced-motion:reduce){ .hero__track{transition:none} .hero__tag{transition:none} }
.hero__slide{
  position:relative; flex:0 0 100%; aspect-ratio:1920/700; min-height:372px;
  display:flex; align-items:center; overflow:hidden;
}
.hero__slide img,.hero__slide video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* Placeholder colors shown while the banner media loads; "gold" is a designed
   slide of its own (no gold-loan asset supplied yet — drop one into new_banners
   and add the <img> to that slide to upgrade it). */
.hero__slide[data-bg="y"]{background:linear-gradient(115deg,#D6891F 0%,#E8A33D 60%,#EDB158 100%)}
.hero__slide[data-bg="r"]{background:linear-gradient(115deg,#7E1B10 0%,#A62A1B 55%,#C33A24 110%)}
.hero__slide[data-bg="gold"]{background:radial-gradient(1050px 620px at 78% 46%, rgba(233,161,59,.5) 0%, transparent 62%), linear-gradient(115deg,#4E100A 0%,#7E1F13 50%,#A93A20 115%)}
/* Taglines are overlaid as HTML, so a soft left scrim keeps them readable. */
.hero__slide::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(97deg, rgba(15,22,34,.58) 0%, rgba(15,22,34,.30) 38%, rgba(15,22,34,0) 62%)}
.hero__deco{position:absolute; inset:0; opacity:.3; mix-blend-mode:screen; pointer-events:none}
.hero__content{position:relative; z-index:2; width:100%; padding-block:clamp(28px,5vw,56px)}
.hero__inner{max-width:640px; color:#fff}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-weight:700;
  font-size:10px; line-height:14px; letter-spacing:.12em; text-transform:uppercase; color:#fff;
  background:rgba(233,161,59,.22); border:1px solid rgba(233,161,59,.6);
  padding:5px 12px; border-radius:var(--r-pill); margin-bottom:13px;
}
.hero__title{color:#fff; margin-bottom:12px; text-wrap:balance; font-size:clamp(27px,3.2vw,44px); line-height:1.22; font-weight:600}
.hero__title em{font-style:normal; color:var(--c-brand)}
.hero__sub{color:rgba(255,255,255,.9); font-size:clamp(15px,1.3vw,19px); line-height:1.55; max-width:50ch; margin-bottom:0}
.hero__tags{display:grid; margin-bottom:24px}
.hero__tag{grid-area:1/1; opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease), transform .55s var(--ease); pointer-events:none}
.hero__tag.is-on{opacity:1; transform:none; pointer-events:auto}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px}
.hero__slide[aria-hidden="true"] .hero__inner{opacity:0; transform:translateY(14px)}
.hero__slide[aria-hidden="false"] .hero__inner{opacity:1; transform:none; transition:opacity .55s .18s var(--ease), transform .55s .18s var(--ease)}

.hero__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:42px; height:42px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.45);
  background:rgba(20,28,43,.45); color:#fff; display:grid; place-items:center;
  backdrop-filter:blur(6px); transition:background-color .2s var(--ease), color .2s var(--ease);
}
.hero__arrow:hover{background:var(--c-brand); color:var(--c-ink); border-color:var(--c-brand)}
.hero__arrow--prev{left:clamp(10px,2vw,26px)}
.hero__arrow--next{right:clamp(10px,2vw,26px)}
.hero__dots{
  position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(52px,4.4vw,66px); z-index:3;
  display:flex; gap:9px; padding:8px 12px; border-radius:var(--r-pill); background:rgba(20,28,43,.4); backdrop-filter:blur(6px);
}
.hero__dot{
  width:9px; height:9px; padding:0; border:0; border-radius:var(--r-pill); background:rgba(255,255,255,.45);
  transition:width .28s var(--ease), background-color .28s var(--ease);
}
.hero__dot[aria-current="true"]{width:30px; background:var(--c-brand)}

/* ==========================================================================
   4. FLOATING CATEGORY BAR
   ========================================================================== */
.catbar{position:relative; z-index:10; margin-top:clamp(-40px,-3.4vw,-30px)}
.catbar__panel{
  background:#fff; border:1px solid var(--c-line); border-radius:var(--r-xl); box-shadow:var(--sh-2);
  padding:7px; display:flex; gap:5px; overflow-x:auto; scrollbar-width:none;
}
.catbar__panel::-webkit-scrollbar{display:none}
.cat{
  flex:1 1 0; min-width:140px; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:16px; border:0; background:transparent;
  font-weight:600; font-size:15px; color:var(--c-text-soft);
  position:relative; transition:background-color .2s var(--ease), color .2s var(--ease);
}
.cat:hover{background:var(--c-bg-alt); color:var(--c-ink)}
.cat svg{flex:0 0 auto; transition:transform .25s var(--ease)}
.cat:hover svg{transform:translateY(-2px)}
.cat[aria-selected="true"]{background:var(--c-brand-tint); color:var(--c-brand-deep)}
.cat[aria-selected="true"]::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:9px;
  width:26px; height:3px; border-radius:2px; background:var(--c-brand);
}

/* ==========================================================================
   5. PRODUCT CARDS
   ========================================================================== */
.products{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(11px,1.2vw,16px)}
.pcard{
  position:relative; border-radius:var(--r-lg); padding:18px; border:1px solid transparent;
  display:flex; flex-direction:column;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.pcard[hidden]{display:none}
.pcard:hover{transform:translateY(-6px); box-shadow:var(--sh-2)}
.pcard__ic{width:44px; height:44px; border-radius:13px; display:grid; place-items:center; margin-bottom:13px; background:#fff; transition:transform .3s var(--ease)}
.pcard:hover .pcard__ic{transform:translateY(-4px) rotate(-4deg)}
.pcard h3{margin-bottom:6px; font-size:18px; line-height:26px}
.pcard p{color:var(--c-text-soft); font-size:14px; line-height:22px; margin-bottom:16px}
.pcard__actions{display:flex; flex-wrap:wrap; gap:7px; margin-top:auto}
.pcard__tag{
  position:absolute; top:15px; right:15px; font-weight:700; font-size:10px; line-height:14px;
  letter-spacing:.09em; text-transform:uppercase; padding:4px 9px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.8); color:var(--c-text-soft);
}
.pcard[data-p="1"]{background:var(--p1-bg)} .pcard[data-p="1"] .pcard__ic{color:var(--p1-ic)}
.pcard[data-p="2"]{background:var(--p2-bg)} .pcard[data-p="2"] .pcard__ic{color:var(--p2-ic)}
.pcard[data-p="3"]{background:var(--p3-bg)} .pcard[data-p="3"] .pcard__ic{color:var(--p3-ic)}
.pcard[data-p="4"]{background:var(--p4-bg)} .pcard[data-p="4"] .pcard__ic{color:var(--p4-ic)}
.pcard[data-p="5"]{background:var(--p5-bg)} .pcard[data-p="5"] .pcard__ic{color:var(--p5-ic)}
.pcard[data-p="6"]{background:var(--p6-bg)} .pcard[data-p="6"] .pcard__ic{color:var(--p6-ic)}
.pcard .btn--ghost{background:rgba(255,255,255,.75); border-color:rgba(20,28,43,.10)}

/* ==========================================================================
   6. STATS + FEATURE RAIL
   ========================================================================== */
/* Slim inline stats row — lives inside the section header, not its own card */
.stats{display:flex; align-items:center; gap:clamp(14px,1.8vw,26px); flex-wrap:wrap}
.stat{display:flex; align-items:baseline; gap:8px}
.stat b{font-size:30px; font-weight:600; color:var(--c-brand-deep); line-height:1; letter-spacing:-.03em}
.stat span{font-size:13px; color:var(--c-text-soft); line-height:1.3}
.stat + .stat{padding-left:clamp(14px,1.8vw,26px); border-left:1px solid var(--c-line)}

.knowmore{
  display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:15px;
  color:var(--c-brand-deep); text-decoration:none; margin-top:2px;
}
.knowmore:hover{text-decoration:none; gap:12px}
.knowmore svg{transition:transform .2s var(--ease)}

.rail__track{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr);
  gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 4px 16px;
  scrollbar-width:thin; scrollbar-color:var(--c-line) transparent;
}
.rail__track::-webkit-scrollbar{height:6px}
.rail__track::-webkit-scrollbar-thumb{background:var(--c-line); border-radius:99px}
.fcard{
  scroll-snap-align:start; border:1px solid rgba(20,28,43,.07); border-radius:var(--r-lg); padding:18px;
  display:flex; flex-direction:column; min-height:178px; position:relative; overflow:hidden;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.fcard:hover{transform:translateY(-6px); box-shadow:var(--sh-2)}
.fcard__ic{
  width:40px; height:40px; border-radius:var(--r-pill); display:grid; place-items:center;
  margin-bottom:11px; transition:transform .3s var(--ease); position:relative; z-index:1;
}
.fcard:hover .fcard__ic{transform:scale(1.09)}
.fcard h3{font-size:17px; line-height:24px; margin-bottom:5px; position:relative; z-index:1}
.fcard p{font-size:14px; line-height:21px; margin:0; position:relative; z-index:1}
/* Benefit cards share the SAME language as the product cards above — soft tints,
   dark text, white icon chip — so the two card systems read as one. Colour comes
   from a warm/cool alternation inside the ANG amber + navy family, plus a thin
   top accent in each card's own icon colour. */
.fcard{background:#fff}
.fcard::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; z-index:2}
.fcard[data-f="1"]{background:linear-gradient(168deg,#FDF0DE 0%,#FBE7C9 100%)}
.fcard[data-f="1"] .fcard__ic{color:#B4700F} .fcard[data-f="1"]::before{background:#B4700F}
.fcard[data-f="2"]{background:linear-gradient(168deg,#EDF1F8 0%,#DFE6F1 100%)}
.fcard[data-f="2"] .fcard__ic{color:#38495F} .fcard[data-f="2"]::before{background:#38495F}
.fcard[data-f="3"]{background:linear-gradient(168deg,#FBF5E6 0%,#F5EAD2 100%)}
.fcard[data-f="3"] .fcard__ic{color:#8A6410} .fcard[data-f="3"]::before{background:#8A6410}
.fcard[data-f="4"]{background:linear-gradient(168deg,#EFF2F6 0%,#E2E7EF 100%)}
.fcard[data-f="4"] .fcard__ic{color:#46586F} .fcard[data-f="4"]::before{background:#46586F}
.fcard[data-f="5"]{background:linear-gradient(168deg,#FDF2E7 0%,#F8E6D3 100%)}
.fcard[data-f="5"] .fcard__ic{color:#A8570C} .fcard[data-f="5"]::before{background:#A8570C}
.fcard[data-f="6"]{background:linear-gradient(168deg,#F1F1F6 0%,#E4E5EE 100%)}
.fcard[data-f="6"] .fcard__ic{color:#4B4E68} .fcard[data-f="6"]::before{background:#4B4E68}
.fcard h3{color:var(--c-ink)}
.fcard p{color:var(--c-text-soft)}
.fcard .fcard__ic{background:#fff; box-shadow:0 1px 3px rgba(20,28,43,.08)}

.rail__nav{display:flex; gap:8px}
.sec-head--rail{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; max-width:none; margin-bottom:16px}
.sec-head--rail > div:first-child{max-width:560px}
.rail__side{display:flex; flex-direction:column; align-items:flex-end; gap:16px; flex:0 0 auto}
.buildnote--slim{padding:8px 13px; font-size:13px; margin-bottom:16px}

/* ==========================================================================
   7. EMI CALCULATOR
   ========================================================================== */
/* Calculator section is sized to fit one viewport, like the IDFC reference:
   the heading lives INSIDE the left column rather than stacked above the grid. */
.section--calc{padding:clamp(36px,3.4vw,56px) 0}
.emi{display:grid; grid-template-columns:1fr 1.02fr; gap:clamp(22px,3vw,44px); align-items:center}
.emi__left{display:flex; flex-direction:column; align-self:stretch}
.emi__left .eyebrow{align-self:flex-start}
.emi__left h2{margin-bottom:8px}
.emi__left .lede{margin-bottom:0}
.emi__visual{position:relative; flex:1; min-height:0; width:100%; margin:18px 0 0}
.emi__visual::before{content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); height:64%; aspect-ratio:1; border-radius:50%; background:linear-gradient(135deg,#FDF3E3,#F7E3C2)}
.emi__visual img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:bottom center; filter:drop-shadow(0 18px 30px rgba(28,36,52,.16))}
.emi__panel{background:#fff; border:1px solid var(--c-line); border-radius:var(--r-xl); box-shadow:var(--sh-2); padding:clamp(16px,1.6vw,22px)}
.field{margin-bottom:8px}
.field__top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:5px; flex-wrap:wrap}
.field label{font-weight:500; font-size:15px; color:var(--c-text)}
.field__ctl{display:flex; align-items:center; gap:8px}
.field__val{display:inline-flex; align-items:center; gap:2px; border:1.5px solid var(--c-line); border-radius:10px; padding:6px 10px; background:var(--c-bg-alt)}
.field__val span{font-weight:600; color:var(--c-ink); font-size:15px}
.field__val input{
  border:0; background:transparent; outline:0; font-family:var(--f); font-weight:600;
  font-size:15px; color:var(--c-ink); width:8ch; text-align:right; min-width:0; -moz-appearance:textfield;
}
.field__val input::-webkit-outer-spin-button,.field__val input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.field__val--sm input{width:5ch}
.field__hint{display:flex; justify-content:space-between; font-size:12px; line-height:1.25; color:var(--c-text-faint); margin-top:0}
/* Yr / Mo toggle — matches the live ANG-FINTECH calculator */
.unit{display:inline-flex; border:1.5px solid var(--c-line); border-radius:10px; overflow:hidden}
.unit button{border:0; background:#fff; padding:7px 12px; font-size:13px; font-weight:700; color:var(--c-text-soft)}
.unit button[aria-pressed="true"]{background:var(--c-ink-deep); color:#fff}

input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:18px; background:transparent; cursor:pointer; margin:0; display:block}
input[type=range]::-webkit-slider-runnable-track{
  height:8px; border-radius:99px;
  background:linear-gradient(var(--c-brand),var(--c-brand)) 0/var(--fill,50%) 100% no-repeat, var(--c-line-soft);
}
input[type=range]::-moz-range-track{height:8px; border-radius:99px; background:var(--c-line-soft)}
input[type=range]::-moz-range-progress{height:8px; border-radius:99px; background:var(--c-brand)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#fff;
  border:3px solid var(--c-brand); box-shadow:0 3px 10px rgba(20,28,43,.24); margin-top:-6px;
  transition:transform .15s var(--ease);
}
input[type=range]::-moz-range-thumb{width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--c-brand); box-shadow:0 3px 10px rgba(20,28,43,.24)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}

.emi__out{display:grid; grid-template-columns:auto 1fr; gap:clamp(14px,1.8vw,24px); align-items:center; border-top:1px solid var(--c-line); padding-top:14px; margin-top:6px}
.donut{
  --a:60; width:98px; height:98px; border-radius:50%; flex:0 0 auto;
  background:conic-gradient(var(--c-green) 0 calc(var(--a) * 1%), var(--c-brand) calc(var(--a) * 1%) 100%);
  display:grid; place-items:center;
}
.donut__hole{width:70px; height:70px; border-radius:50%; background:#fff; display:grid; place-items:center; text-align:center; line-height:1.15}
.donut__hole b{display:block; font-size:15px; font-weight:600; color:var(--c-ink)}
.donut__hole small{font-size:9px; color:var(--c-text-faint); letter-spacing:.06em; text-transform:uppercase}
.emi__figs{display:grid; gap:6px}
.fig{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap}
.fig dt{color:var(--c-text-soft); font-size:14px; display:inline-flex; align-items:center; gap:8px}
.fig dt::before{content:""; width:10px; height:10px; border-radius:3px; background:var(--c-line)}
.fig--p dt::before{background:var(--c-green)}
.fig--i dt::before{background:var(--c-brand)}
.fig dd{margin:0; font-weight:600; color:var(--c-ink); font-size:15px}
.fig--emi{border:1px solid rgba(233,161,59,.45); background:linear-gradient(120deg,#FDF3E3,#FAE8CC); border-radius:var(--r-md); padding:10px 14px; margin-bottom:2px}
.fig--emi dt{font-weight:500; color:var(--c-ink)}
.fig--emi dt::before{display:none}
.fig--emi dd{font-size:28px; line-height:34px; color:var(--c-brand-deep); letter-spacing:-.025em}
.emi__note{font-size:12px; color:var(--c-text-faint); margin:10px 0 12px; line-height:1.45}
.emi__panel .btn--full{min-height:46px; padding:13px 24px}

/* ==========================================================================
   8. DIGITAL EXPERIENCE / PHONE
   Structure mirrors the IDFC reference: text+CTA left, device centre, action
   block right, hairline 4-up beneath. Content is ANG-only — no app, no store
   ratings, no awards, so the third column is a real contact card, not a QR.
   ========================================================================== */
.digital{background:#fff; color:var(--c-text); position:relative; overflow:hidden}
.digital::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(720px 430px at 50% 96%, rgba(233,161,59,.26) 0%, transparent 68%),
    radial-gradient(660px 470px at 90% 2%, rgba(56,73,95,.12) 0%, transparent 66%),
    linear-gradient(180deg,#FDFAF5 0%,#FDF7EC 50%,#FAF7F1 100%);
}
/* faint dot grid for depth */
.digital::after{
  content:""; position:absolute; inset:0; opacity:.9; pointer-events:none;
  background-image:radial-gradient(rgba(20,28,43,.07) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 100%);
          mask-image:radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 100%);
}
.digital .wrap{position:relative; z-index:2}
.digital__grid{display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(18px,2.1vw,34px); align-items:center}
.dcol h3{font-size:22px; line-height:30px; margin-bottom:12px; text-wrap:balance; font-weight:600}
.dcol > p{color:var(--c-text-soft); font-size:15px; line-height:24px; margin-bottom:20px}
/* hold the section heading to two lines on desktop */
.brk{display:none}
@media (min-width:992px){
  .digital h2{font-size:33px; line-height:41px}
  .brk{display:inline}
}
/* narrower laptops: scale the heading so the forced break still fits one line */
@media (min-width:992px) and (max-width:1199px){
  .digital h2{font-size:25px; line-height:33px}
}

/* Left: numbered journey steps */
.dsteps{display:grid; gap:14px; margin:0 0 22px}
.dstep{display:flex; gap:13px; align-items:flex-start}
.dstep i{
  flex:0 0 auto; width:27px; height:27px; border-radius:50%; display:grid; place-items:center;
  background:var(--c-brand-tint); border:1px solid rgba(233,161,59,.55); color:var(--c-brand-deep);
  font-style:normal; font-size:12px; font-weight:700;
}
.dstep b{display:block; font-size:15px; font-weight:600; color:var(--c-ink); line-height:22px}
.dstep span{display:block; font-size:13px; line-height:20px; color:var(--c-text-soft)}
.dcta{display:flex; flex-wrap:wrap; gap:10px}

/* Right: contact action card (the honest analogue of IDFC's QR card) */
.dcard{
  border:1px solid var(--c-line); border-radius:var(--r-lg); padding:18px;
  background:#fff; box-shadow:var(--sh-1); display:grid; gap:12px;
}
.dcard__row{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.dcard__row:hover{text-decoration:none}
.dcard__row:hover .dcard__ic{background:var(--c-brand); color:var(--c-ink)}
.dcard__row:hover b{color:var(--c-brand-deep)}
.dcard__ic{
  flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:var(--c-brand-tint); color:var(--c-brand-deep); transition:background-color .2s var(--ease), color .2s var(--ease);
}
.dcard__row b{display:block; font-size:15px; font-weight:600; color:var(--c-ink); line-height:21px; transition:color .2s var(--ease)}
.dcard__row span{display:block; font-size:13px; color:var(--c-text-faint)}
.dcard hr{border:0; border-top:1px solid var(--c-line-soft); margin:0}

/* Hairline 4-up beneath, as on the reference */
.dstrip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  margin-top:clamp(24px,2.8vw,40px); border-top:1px solid var(--c-line);
}
.dstrip div{padding:20px clamp(12px,1.6vw,26px); text-align:center}
.dstrip div + div{border-left:1px solid var(--c-line)}
.dstrip svg{margin:0 auto 10px; color:var(--c-brand-deep)}
.dstrip p{margin:0; font-size:14px; line-height:21px; color:var(--c-text-soft)}
.dstrip strong{color:var(--c-ink); font-weight:600}

/* ---------- Device ---------- */
.phone-stage{position:relative; display:grid; place-items:center; padding:6px 0}
.phone-stage::before{  /* glow pool behind the device */
  content:""; position:absolute; width:330px; height:330px; border-radius:50%;
  background:radial-gradient(circle, rgba(233,161,59,.34) 0%, transparent 68%); filter:blur(10px);
}
.phone-stage::after{   /* floor shadow */
  content:""; position:absolute; bottom:-4px; width:190px; height:26px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(20,28,43,.26) 0%, transparent 72%);
}
.phone{
  position:relative; z-index:2; width:min(242px,66vw); aspect-ratio:9/19.3;
  border-radius:38px; padding:9px;
  background:linear-gradient(150deg,#5A6577 0%,#2A3444 26%,#1A2231 55%,#39445A 100%);
  box-shadow:0 26px 54px rgba(20,28,43,.28), 0 6px 16px rgba(20,28,43,.12),
             0 0 0 1px rgba(20,28,43,.10), inset 0 0 0 1px rgba(255,255,255,.20);
}
.phone__screen{
  position:relative; height:100%; border-radius:30px; overflow:hidden;
  background:#F5F7FA; display:flex; flex-direction:column; min-height:0;
}
.phone__island{
  position:absolute; top:7px; left:50%; transform:translateX(-50%); z-index:9;
  width:64px; height:19px; border-radius:99px; background:#0A0E16;
}
/* status bar */
.ph-status{
  display:flex; align-items:center; justify-content:space-between; height:30px;
  padding:0 14px 0 15px; background:var(--c-ink-deep); color:#fff; font-size:9.5px; font-weight:600;
}
.ph-status .r{display:flex; align-items:center; gap:3px}
/* app header */
.ph-head{background:var(--c-ink-deep); padding:3px 12px 9px; min-height:30px; display:flex; align-items:center; justify-content:space-between}
.ph-head .logo{gap:5px}
.ph-head .logo__mark{height:17px}
.ph-head .logo__word{font-size:9px; letter-spacing:.18em; margin-inline-end:-.18em}
.ph-body{flex:1; min-height:0; padding:9px; display:flex; flex-direction:column; gap:6px; overflow:hidden; background:#F5F7FA}
/* amber hero card */
.ph-hero{
  border-radius:14px; padding:9px 11px; color:var(--c-ink);
  background:linear-gradient(140deg,#F5BC66 0%,#E9A13B 55%,#D08A22 100%);
  box-shadow:0 6px 16px rgba(233,161,59,.30);
}
.ph-hero .lbl{font-size:8.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; opacity:.72}
.ph-hero .amt{font-size:19px; font-weight:700; line-height:1.1; letter-spacing:-.02em; margin-top:1px}
.ph-track{height:4px; border-radius:99px; background:rgba(20,28,43,.20); margin:7px 0 6px; position:relative}
.ph-track i{position:absolute; inset:0 42% 0 0; background:var(--c-ink); border-radius:99px}
.ph-track b{position:absolute; left:58%; top:50%; transform:translate(-50%,-50%); width:11px; height:11px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3)}
.ph-hero .emi{display:flex; align-items:baseline; justify-content:space-between; gap:4px; white-space:nowrap; font-size:8.6px; opacity:.82; font-weight:600}
.ph-hero .emi b{font-size:11.5px; font-weight:700; opacity:1}
/* 4-up quick actions */
.ph-quick{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; background:#fff; border-radius:13px; padding:8px 5px; box-shadow:0 2px 8px rgba(17,26,41,.07)}
.ph-quick span{display:flex; flex-direction:column; align-items:center; gap:5px; font-size:7.6px; font-weight:600; color:#42566E; text-align:center; line-height:1.2}
.ph-quick i{width:25px; height:25px; border-radius:50%; display:grid; place-items:center; background:var(--c-brand-tint); color:var(--c-brand-deep)}
/* product tiles */
.ph-tiles{display:grid; grid-template-columns:1fr 1fr; gap:5px}
.ph-tile{border-radius:11px; padding:7px 8px; min-height:36px; display:flex; flex-direction:column; justify-content:space-between}
.ph-tile b{font-size:9px; font-weight:700; line-height:1.25}
.ph-tile em{font-style:normal; font-size:7.4px; opacity:.72; font-weight:500}
.ph-tile:nth-child(1){background:#FDEFDE; color:#8A5307}
.ph-tile:nth-child(2){background:#E9F1FA; color:#22537D}
.ph-tile:nth-child(3){background:#FBF3E2; color:#7A5A0C}
.ph-tile:nth-child(4){background:#EDEEF6; color:#414664}
/* status row */
.ph-note{display:flex; align-items:center; gap:7px; background:#fff; border-radius:11px; padding:7px 9px; flex:0 0 auto; box-shadow:0 2px 8px rgba(17,26,41,.06)}
.ph-note i{width:22px; height:22px; border-radius:7px; display:grid; place-items:center; flex:0 0 auto; background:#E8F6EC; color:#1F7431}
.ph-note b{display:block; font-size:9px; color:var(--c-ink); line-height:1.3; font-weight:600}
.ph-note span{font-size:7.6px; color:#8496AC}
/* tab bar */
.ph-tabs{flex:0 0 auto; display:grid; grid-template-columns:repeat(4,1fr); background:#fff; border-top:1px solid #E7EBF1; padding:6px 4px 7px}
.ph-tabs span{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:7.2px; font-weight:600; color:#9AA9BC}
.ph-tabs span.on{color:var(--c-brand-deep)}

/* ==========================================================================
   9. TESTIMONIALS
   ========================================================================== */
.tcarousel__track{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 48px)/3);
  gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px; scrollbar-width:none;
}
.tcarousel__track::-webkit-scrollbar{display:none}
.tcard{
  scroll-snap-align:start; background:linear-gradient(180deg,#FFFDF8 0%,#FFFFFF 60%);
  border:1px solid var(--c-line); border-top:3px solid var(--c-brand); border-radius:var(--r-lg);
  padding:20px; display:flex; flex-direction:column; gap:10px;
}
.tcard__q{color:#F2D8A8}
.tcard blockquote{margin:0; font-size:15px; line-height:24px; color:var(--c-text)}
.tcard__who{display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:8px}
.tcard__av{width:36px; height:36px; border-radius:50%; background:var(--c-brand-tint); color:var(--c-brand-deep); display:grid; place-items:center; font-weight:800; flex:0 0 auto}
.tcard__who b{display:block; font-size:15px; font-weight:600; color:var(--c-ink)}
.tcard__who small{color:var(--c-text-faint); font-size:13px}
.tcarousel__foot{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:26px}
.dots{display:flex; gap:8px}
.dots button{width:9px; height:9px; border:0; padding:0; border-radius:99px; background:var(--c-line); transition:width .25s var(--ease), background-color .25s var(--ease)}
.dots button[aria-current="true"]{width:28px; background:var(--c-brand)}

/* ==========================================================================
   10. GET IN TOUCH
   ========================================================================== */
.touch{display:grid; grid-template-columns:repeat(3,1fr); gap:13px}
.tile{
  display:flex; align-items:center; gap:13px; padding:17px; border-radius:var(--r-lg);
  border:1px solid transparent; color:var(--c-text); text-decoration:none;
  transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.tile:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:rgba(20,28,43,.14); text-decoration:none}
.tile__ic{width:44px; height:44px; border-radius:13px; background:#fff; display:grid; place-items:center; flex:0 0 auto}
.tile[data-t="1"]{background:linear-gradient(158deg,#FDF3E3 0%,#F8E5C6 100%)} .tile[data-t="1"] .tile__ic{color:#B4700F}
.tile[data-t="2"]{background:linear-gradient(158deg,#EDF0F6 0%,#DDE3EE 100%)} .tile[data-t="2"] .tile__ic{color:#38495F}
.tile[data-t="3"]{background:linear-gradient(158deg,#F8F3EA 0%,#EEE4D3 100%)} .tile[data-t="3"] .tile__ic{color:#8A6410}
.tile b{display:block; font-size:16px; font-weight:600; line-height:24px; color:var(--c-ink)}
.tile span{font-size:14px; line-height:21px; color:var(--c-text-soft)}
.tile__arrow{margin-inline-start:auto; color:var(--c-text-faint); transition:transform .24s var(--ease), color .24s var(--ease)}
.tile:hover .tile__arrow{transform:translateX(4px); color:var(--c-brand-deep)}

/* ==========================================================================
   11. FINAL CTA
   ========================================================================== */
.finalcta{
  border-radius:var(--r-xl); padding:clamp(26px,3.4vw,50px); text-align:center; color:#fff;
  background:radial-gradient(900px 440px at 50% 0%, rgba(233,161,59,.42) 0%, transparent 62%), linear-gradient(120deg,#141C2B 0%, #1C2434 55%, #3A2C12 100%);
}
.finalcta h2{color:#fff; text-wrap:balance}
.finalcta p{color:rgba(255,255,255,.82); max-width:58ch; margin-inline:auto; margin-bottom:24px; font-size:16px; line-height:26px}
.finalcta__btns{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}

/* ==========================================================================
   12. FOOTER — structure and content follow the live angfintech.in footer
   (brand + social | NAVIGATION | CONTACTS, centred copyright), on ANG amber.
   ========================================================================== */
.footer{
  background:linear-gradient(180deg,#EFAC49 0%,#E59C31 52%,#D78F21 100%);
  color:rgba(20,28,43,.78); padding-top:clamp(26px,2.6vw,38px); position:relative; overflow:hidden;
}
.footer__statement{margin:0 0 clamp(20px,2.2vw,30px)}
.footer__statement span{display:block; color:#7A4A08; font-family:var(--f)}
.footer__statement .sm{font-size:20px; line-height:26px; font-weight:700; letter-spacing:.14em; text-transform:uppercase}
.footer__statement .lg{
  font-size:clamp(26px,.6rem + 3.1vw,48px); line-height:1.04; font-weight:800;
  letter-spacing:-.02em; text-transform:uppercase; text-wrap:balance;
}

.footer__grid{
  padding-bottom:clamp(20px,2.2vw,30px); display:grid;
  grid-template-columns:minmax(190px,1.05fr) minmax(110px,.62fr) minmax(150px,.8fr) minmax(215px,1.05fr);
  gap:clamp(20px,2.6vw,44px); align-items:start;
}
/* white plate keeps the logo readable on amber whichever asset is used */
.fbrand__plate{
  display:inline-flex; align-items:center; background:#fff; border-radius:12px;
  padding:8px 14px; border:1px solid rgba(20,28,43,.09); box-shadow:0 2px 8px rgba(20,28,43,.14); margin-bottom:14px;
}
.fbrand__plate{gap:9px}
.fbrand__plate .logo__mark{height:32px}
.fbrand__plate .logo__word{font-size:16px}
.fbrand p{font-size:14px; line-height:22px; color:rgba(20,28,43,.75); margin:0 0 16px; max-width:32ch}
.social{display:flex; gap:9px}
.social a{
  width:32px; height:32px; border-radius:50%; border:1px solid rgba(20,28,43,.3);
  display:grid; place-items:center; color:rgba(20,28,43,.8);
  transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.social a:hover{background:var(--c-ink); color:var(--c-brand); border-color:var(--c-ink)}

.fhead{
  font-size:12px; line-height:16px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--c-ink); font-weight:700; margin:0 0 14px;
}
.fnav li{margin-bottom:7px}
.fnav a,.fcontact a{color:rgba(20,28,43,.78); font-size:14px; text-decoration:none}
.fnav a:hover,.fcontact a:hover{color:var(--c-ink); text-decoration:underline}

.fcontact ul{display:grid; gap:12px}
.fcontact li{display:flex; gap:10px; align-items:flex-start}
.fcontact li > i{
  flex:0 0 auto; width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:rgba(20,28,43,.1); color:var(--c-ink);
}
.fcontact b{display:block; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--c-ink); line-height:18px}
.fcontact span,.fcontact address{
  font-style:normal; font-size:14px; line-height:21px; color:rgba(20,28,43,.78); display:block;
}

/* White base band under the amber block — mirrors the reference footer, where
   the legal strip sits on white rather than inside the brand colour. */
.footer__base{background:#fff; padding:16px 0 22px}
.footer__base-top{display:flex; flex-wrap:wrap; gap:10px clamp(20px,3vw,44px); align-items:flex-start; justify-content:space-between}
.footer__disc{margin:0; flex:1 1 540px; font-size:12px; line-height:19px; color:var(--c-text-soft)}
.footer__legal{display:flex; flex-wrap:wrap; align-items:center; flex:0 0 auto; font-size:13px; font-weight:600}
.footer__legal a{color:var(--c-brand-deep); padding:0 12px; border-left:1px solid var(--c-line); text-decoration:none; white-space:nowrap}
.footer__legal a:first-child{border-left:0; padding-left:0}
.footer__legal a:last-child{padding-right:0}
.footer__legal a:hover{color:var(--c-ink); text-decoration:underline}
.footer__copy{margin:12px 0 0; font-size:12.5px; color:var(--c-text-faint)}

/* ==========================================================================
   13. FLOATING UI
   ========================================================================== */
.totop{
  position:fixed; right:20px; bottom:20px; z-index:70; width:48px; height:48px; border-radius:50%;
  background:#fff; border:1px solid var(--c-line); color:var(--c-ink); display:grid; place-items:center;
  box-shadow:var(--sh-2); opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.totop.is-on{opacity:1; visibility:visible; transform:none}
.totop:hover{background:var(--c-brand); color:var(--c-ink); border-color:var(--c-brand)}
.sticky-apply{
  position:fixed; right:0; top:50%; transform:translateY(-50%) translateX(calc(100% - 46px)); z-index:69;
  background:var(--c-brand); color:var(--c-ink); padding:16px 20px 16px 14px; border-radius:16px 0 0 16px;
  display:flex; align-items:center; gap:10px; font-weight:700; font-size:.95rem;
  text-decoration:none; box-shadow:var(--sh-2); transition:transform .28s var(--ease);
}
.sticky-apply:hover,.sticky-apply:focus-visible{transform:translateY(-50%) translateX(0); text-decoration:none; color:var(--c-ink)}
.mobilebar{display:none}

/* ==========================================================================
   14. SCROLL REVEAL
   ========================================================================== */
.reveal{opacity:0; transform:translateY(22px)}
.reveal.is-in{opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important}
  .reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   14b. RESPONSIVE TYPE LADDER — IDFC breakpoints (1199 / 991 / 767)
   Fixed px steps, exactly as the reference build does it, rather than clamp().
   ========================================================================== */
@media (max-width:1199px){
  h1{font-size:38px; line-height:46px}
  h2{font-size:32px; line-height:40px}
  h3{font-size:19px; line-height:27px}
  .dcol h3{font-size:20px; line-height:28px}
  .fig--emi dd{font-size:26px; line-height:32px}
  .stat b{font-size:27px}
}
@media (max-width:991px){
  h1{font-size:32px; line-height:40px}
  h2{font-size:28px; line-height:36px}
  h3{font-size:18px; line-height:26px}
  body,.lede,.hero__sub,.finalcta p{font-size:15px; line-height:24px}
  .pcard h3{font-size:17px; line-height:25px}
  .fig--emi dd{font-size:24px; line-height:30px}
  .stat b{font-size:24px}
}
@media (max-width:767px){
  h1{font-size:26px; line-height:33px; margin-bottom:6px}
  h2{font-size:24px; line-height:31px; margin-bottom:10px}
  h3{font-size:17px; line-height:25px}
  .dcol h3{font-size:19px; line-height:27px}
  body,.lede,.hero__sub,.finalcta p{font-size:15px; line-height:24px}
  .pcard p,.fcard p,.tile span{font-size:14px; line-height:21px}
  .fig--emi dd{font-size:23px; line-height:29px}
  .stat b{font-size:22px}
  .btn{font-size:14px; min-height:42px; padding:11px 18px}
}

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */
@media (max-width:1279px){ .nav__link{padding:7px 8px; font-size:14px} }
@media (max-width:991px){           /* ---- Tablet ---- */
  :root{--header-h:72px}
  .nav,.header__actions .btn--ghost,.header__actions .btn--primary{display:none}
  .burger{display:grid}
  .products{grid-template-columns:repeat(2,1fr)}
  .sec-head--rail{flex-direction:column; align-items:flex-start}
  .rail__side{flex-direction:row; align-items:center; justify-content:space-between; width:100%; gap:20px}
  .emi{grid-template-columns:1fr}
  .emi__left{max-width:600px; margin-inline:auto; text-align:center; align-items:center}
  .emi__left .eyebrow{align-self:center}
  .emi__left .lede{margin-inline:auto}
  .emi__visual{max-width:320px; margin:14px auto 0; aspect-ratio:736/1104}
  .digital__grid{grid-template-columns:1fr; text-align:center}
  .dcol{max-width:560px; margin-inline:auto}
  .dlist li{text-align:left}
  .phone{order:-1; width:min(258px,66vw)}
  .tcarousel__track{grid-auto-columns:calc((100% - 24px)/2)}
  .touch{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr; gap:26px 32px; justify-content:stretch}
  .fbrand{grid-column:1 / -1}
  .sticky-apply{display:none}
}
@media (max-width:767px){           /* ---- Mobile ---- */
  :root{--header-h:64px}
  .logo__mark{height:33px}
  .logo__word{font-size:17px}
  /* Taglines are HTML overlays now, so the slide sizes to its text. */
  .hero__slide{aspect-ratio:auto; min-height:0}
  .hero__slide::after{background:linear-gradient(115deg, rgba(15,22,34,.70) 0%, rgba(15,22,34,.48) 55%, rgba(15,22,34,.22) 100%)}
  .hero__inner{max-width:none}
  .hero__cta .btn{flex:1 1 160px}
  .hero__arrow{width:40px; height:40px}
  .hero__arrow--prev{left:8px} .hero__arrow--next{right:8px}
  .hero__dots{bottom:14px}
  .catbar{margin-top:18px}
  .catbar__panel{border-radius:22px}
  .cat{min-width:auto; flex:0 0 auto; padding:13px 16px; font-size:.92rem}
  .cat[aria-selected="true"]::after{bottom:6px}
  .products{grid-template-columns:1fr}
  .pcard{padding:24px}
  .rail__track{grid-auto-columns:min(80vw,300px)}
  .rail__nav{display:none}
  .stats{gap:12px}
  .stat + .stat{padding-left:12px}
  .stat b{font-size:1.45rem}
  .stat span{font-size:.74rem}
  .emi__out{grid-template-columns:1fr; justify-items:center; text-align:center}
  .emi__figs{width:100%}
  .tcarousel__track{grid-auto-columns:min(86vw,420px)}
  .footer__grid{grid-template-columns:1fr 1fr; gap:22px 24px}
  .fbrand{grid-column:1 / -1}
  .fcontact{grid-column:1 / -1}
  .footer__base-top{gap:12px}
  .footer__legal{font-size:12.5px}
  .totop{bottom:84px; right:14px; width:44px; height:44px}
  .mobilebar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:68; gap:10px; padding:10px 12px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.97); backdrop-filter:blur(12px); border-top:1px solid var(--c-line);
  }
  .mobilebar .btn{flex:1; padding:13px 12px; min-height:48px; font-size:.94rem}
  body{padding-bottom:76px}
}
@media (min-width:1600px){ :root{--wrap:1400px} }
/* Mid widths: keep the overlay text clear of the edge arrows. */
@media (max-width:1150px) and (min-width:601px){
  .hero__inner{margin-inline:48px}
}
/* Phones: the slide keeps sizing to its overlaid text; the media center-crops
   toward the subject on the right of each banner. Swipe + dots replace arrows. */
@media (max-width:600px){
  .hero__slide img,.hero__slide video{object-position:72% 50%}
  .hero__arrow{display:none}
}

/* ==========================================================================
   16. INTERNAL PAGES — components used only by the non-Home routes.
   Everything below is composed from the tokens above (radii, shadows, type
   ladder, amber accents) so internal pages read as the same design system.
   ========================================================================== */

/* Page hero ---------------------------------------------------------------- */
.phero{
  position:relative; overflow:hidden; padding:clamp(30px,4.6vw,62px) 0 clamp(26px,3.4vw,46px);
  background:linear-gradient(180deg,#FFFCF6 0%, #FAF1E1 56%, #FDFAF5 100%);
  border-bottom:1px solid var(--c-line-soft);
}
.phero::before{
  content:""; position:absolute; top:-140px; right:-120px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(233,161,59,.20) 0%, transparent 68%); pointer-events:none;
}
.phero::after{
  content:""; position:absolute; bottom:-220px; left:-170px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(56,73,95,.10) 0%, transparent 68%); pointer-events:none;
}
.phero > .wrap{position:relative; z-index:1}
.phero__grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(20px,3vw,44px); align-items:center}
.phero__grid--solo{grid-template-columns:1fr; max-width:820px}
.phero h1{text-wrap:balance; margin-bottom:12px}
.phero .lede{max-width:56ch}
.phero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:20px}
.phero__art{border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-2); aspect-ratio:4/3; background:var(--c-bg-alt)}
.phero__art img{width:100%; height:100%; object-fit:cover}

/* Breadcrumb --------------------------------------------------------------- */
.crumb{display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-size:13px; line-height:20px; margin:0 0 14px; color:var(--c-text-faint)}
.crumb a{color:var(--c-text-soft); text-decoration:none}
.crumb a:hover{color:var(--c-brand-deep); text-decoration:underline}
.crumb svg{opacity:.55; flex:0 0 auto}
.crumb [aria-current]{color:var(--c-ink); font-weight:600}

/* Generic grids ------------------------------------------------------------ */
.g2{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(13px,1.5vw,20px)}
.g3{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(13px,1.5vw,20px)}
.g-side{display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(18px,2.6vw,34px); align-items:start}

/* Info card ---------------------------------------------------------------- */
.icard{
  background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg); padding:clamp(18px,2vw,26px);
  box-shadow:var(--sh-1); transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.icard:hover{transform:translateY(-4px); box-shadow:var(--sh-2)}
.icard--flat:hover{transform:none; box-shadow:var(--sh-1)}
.icard__ic{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center; margin-bottom:14px;
  background:var(--c-brand-tint); color:var(--c-brand-deep); border:1px solid rgba(233,161,59,.32);
}
.icard h3{margin-bottom:7px}
.icard p:last-child{margin-bottom:0}
.icard p{color:var(--c-text-soft); font-size:15px; line-height:24px}

/* Checklist ---------------------------------------------------------------- */
.checklist{display:grid; gap:11px; margin:0}
.checklist li{display:flex; gap:11px; align-items:flex-start; font-size:15px; line-height:24px; color:var(--c-text)}
.checklist li > svg{flex:0 0 auto; margin-top:4px; color:var(--c-brand-deep)}
.checklist--sub li{font-size:14px; line-height:22px; color:var(--c-text-soft)}
.checklist strong{font-weight:600; color:var(--c-ink)}
.sublist{margin:7px 0 0 0; display:grid; gap:5px}
.sublist li{font-size:13.5px; line-height:21px; color:var(--c-text-soft); padding-left:14px; position:relative}
.sublist li::before{content:""; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:var(--c-brand)}

/* Process flow ------------------------------------------------------------- */
.flow{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(10px,1.2vw,16px); margin:0; padding:0; list-style:none}
.flow__item{
  position:relative; background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg);
  padding:20px 16px 18px; text-align:center; box-shadow:var(--sh-1);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.flow__item:hover{transform:translateY(-5px); box-shadow:var(--sh-2); border-color:rgba(233,161,59,.5)}
.flow__n{
  width:38px; height:38px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center;
  background:var(--c-brand); color:var(--c-ink); font-weight:700; font-size:15px; box-shadow:0 6px 16px rgba(233,161,59,.34);
}
.flow__item h3{font-size:15px; line-height:22px; margin-bottom:5px}
.flow__item p{font-size:13px; line-height:20px; color:var(--c-text-soft); margin:0}
.flow__item:not(:last-child)::after{
  content:""; position:absolute; top:38px; right:calc(-1 * clamp(10px,1.2vw,16px) / 2 - 4px);
  width:8px; height:8px; border-top:2px solid var(--c-brand); border-right:2px solid var(--c-brand);
  transform:rotate(45deg); opacity:.55;
}

/* Talk-to-an-expert callout ------------------------------------------------ */
.expert{
  border-radius:var(--r-xl); padding:clamp(22px,2.6vw,32px); color:#fff; position:sticky; top:calc(var(--header-h) + 18px);
  background:radial-gradient(680px 340px at 50% 0%, rgba(233,161,59,.40) 0%, transparent 62%), linear-gradient(150deg,#141C2B 0%, #1C2434 58%, #3A2C12 100%);
}
.expert h3{color:#fff; margin-bottom:6px}
.expert p{color:rgba(255,255,255,.80); font-size:14px; line-height:22px; margin-bottom:16px}
.expert__num{display:block; font-size:22px; line-height:30px; font-weight:600; color:#fff; text-decoration:none; margin-bottom:16px}
.expert__num:hover{color:var(--c-brand); text-decoration:none}
.expert .btn{width:100%}

/* Mission / Vision --------------------------------------------------------- */
.mv{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.8vw,22px)}
.mv__card{
  position:relative; overflow:hidden; border-radius:var(--r-xl); padding:clamp(22px,2.6vw,34px);
  border:1px solid var(--c-line); box-shadow:var(--sh-1);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.mv__card:hover{transform:translateY(-5px); box-shadow:var(--sh-2)}
.mv__card--v{background:linear-gradient(158deg,#FDF3E3 0%,#F8E5C6 100%)}
.mv__card--m{background:linear-gradient(158deg,#E9F4EC 0%,#D9EBE0 100%)}
.mv__ic{width:50px; height:50px; border-radius:15px; background:#fff; display:grid; place-items:center; margin-bottom:16px; box-shadow:var(--sh-1)}
.mv__card--v .mv__ic{color:#A8570C} .mv__card--m .mv__ic{color:#22734A}
.mv__card h3{font-size:22px; line-height:30px; margin-bottom:9px}
.mv__card p{margin:0; color:var(--c-text); font-size:15px; line-height:25px}

/* Leadership --------------------------------------------------------------- */
.leader{
  display:grid; grid-template-columns:230px 1fr; gap:clamp(20px,2.8vw,38px); align-items:center;
  background:#fff; border:1px solid var(--c-line); border-radius:var(--r-xl);
  padding:clamp(20px,2.6vw,34px); box-shadow:var(--sh-1);
}
.leader__av{
  width:100%; aspect-ratio:1; border-radius:var(--r-lg); overflow:hidden; position:relative;
  background:linear-gradient(158deg,#FDF3E3 0%,#F8E5C6 100%); display:grid; place-items:center;
}
.leader__av img{width:100%; height:100%; object-fit:cover; object-position:top center}
.leader__initials{font-size:52px; font-weight:600; color:var(--c-brand-deep); letter-spacing:.02em}
.leader__role{display:block; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-brand-deep); margin-bottom:6px}
.leader h3{font-size:26px; line-height:34px; margin-bottom:10px}
.leader p{color:var(--c-text-soft); margin-bottom:0}

/* Lending partners --------------------------------------------------------- */
.partners{
  background:#fff; border:1px solid var(--c-line); border-radius:var(--r-xl);
  padding:clamp(16px,2.2vw,30px); box-shadow:var(--sh-1);
}
.partners img{width:100%; height:auto; border-radius:var(--r-md)}
.partners__note{margin:14px 0 0; font-size:13px; line-height:20px; color:var(--c-text-faint); text-align:center}

/* Careers ------------------------------------------------------------------ */
.jobs{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(13px,1.5vw,20px)}
.jcard{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--c-line);
  border-radius:var(--r-lg); padding:clamp(18px,2vw,24px); box-shadow:var(--sh-1);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.jcard:hover{transform:translateY(-5px); box-shadow:var(--sh-2); border-color:rgba(233,161,59,.5)}
.jcard__tag{
  align-self:flex-start; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--c-brand-deep); background:var(--c-brand-tint); border:1px solid rgba(233,161,59,.35);
  padding:5px 10px; border-radius:var(--r-pill); margin-bottom:12px;
}
.jcard h3{margin-bottom:8px; font-size:18px; line-height:26px}
.jcard p{color:var(--c-text-soft); font-size:14px; line-height:22px; margin-bottom:18px}
.jcard .btn{margin-top:auto; align-self:flex-start}

/* Contact ------------------------------------------------------------------ */
.contact{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(18px,2.6vw,34px); align-items:start}
.cdetails{display:grid; gap:13px}
.cdetail{
  display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--c-line);
  border-radius:var(--r-lg); padding:18px; box-shadow:var(--sh-1);
  transition:transform .26s var(--ease), box-shadow .26s var(--ease);
}
.cdetail:hover{transform:translateY(-4px); box-shadow:var(--sh-2)}
.cdetail i{
  flex:0 0 auto; width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
  background:var(--c-brand-tint); color:var(--c-brand-deep); border:1px solid rgba(233,161,59,.32);
}
.cdetail b{display:block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-text-faint); margin-bottom:5px}
.cdetail address,.cdetail span{font-style:normal; font-size:15px; line-height:23px; color:var(--c-text)}
.cdetail a{color:var(--c-ink); text-decoration:none; font-weight:500}
.cdetail a:hover{color:var(--c-brand-deep); text-decoration:underline}

/* Form --------------------------------------------------------------------- */
.form{background:#fff; border:1px solid var(--c-line); border-radius:var(--r-xl); padding:clamp(20px,2.6vw,32px); box-shadow:var(--sh-1)}
.form__row{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.form__f{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.form__f label{font-size:13px; font-weight:600; color:var(--c-ink)}
.form__f .req{color:#B4351F}
.form__f input,.form__f select,.form__f textarea{
  font:inherit; font-size:15px; color:var(--c-text); background:#fff;
  border:1.5px solid var(--c-line); border-radius:var(--r-md); padding:11px 13px; width:100%;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form__f textarea{resize:vertical; min-height:112px}
.form__f input:focus,.form__f select:focus,.form__f textarea:focus{
  outline:none; border-color:var(--c-brand); box-shadow:0 0 0 3px rgba(233,161,59,.20);
}
.form__f input:user-invalid,.form__f select:user-invalid,.form__f textarea:user-invalid{border-color:#D8654B}
.form__err{font-size:12.5px; line-height:18px; color:#B4351F; min-height:0}
.form__f input:user-invalid ~ .form__err::before,
.form__f select:user-invalid ~ .form__err::before,
.form__f textarea:user-invalid ~ .form__err::before{content:attr(data-msg)}
.form__note{font-size:13px; line-height:20px; color:var(--c-text-soft); margin:14px 0 0}
.form__status{margin:14px 0 0; padding:13px 15px; border-radius:var(--r-md); font-size:14px; line-height:22px}
.form__status[hidden]{display:none}
.form__status--info{background:var(--c-warn-bg); border:1px dashed var(--c-warn-line); color:var(--c-warn-text)}

/* Map ---------------------------------------------------------------------- */
.map{border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--c-line); box-shadow:var(--sh-1); background:var(--c-bg-alt)}
.map iframe{display:block; width:100%; height:clamp(260px,34vw,380px); border:0}

/* Related products --------------------------------------------------------- */
.related{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(9px,1vw,13px)}
.rtile{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px; padding:16px 11px;
  border-radius:var(--r-lg); border:1px solid var(--c-line); background:#fff; color:var(--c-text);
  text-decoration:none; font-size:13px; line-height:19px; font-weight:600;
  transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.rtile:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:rgba(233,161,59,.5); text-decoration:none; color:var(--c-ink)}
.rtile[aria-current]{border-color:var(--c-brand); background:var(--c-brand-tint)}
.rtile i{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--c-brand-tint); color:var(--c-brand-deep)}

/* Legal / prose ------------------------------------------------------------ */
.prose{max-width:74ch}
.prose h2{font-size:24px; line-height:32px; margin:34px 0 12px; padding-top:6px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:17px; line-height:25px; margin:22px 0 8px}
.prose p,.prose li{color:var(--c-text); font-size:15.5px; line-height:27px}
.prose p{margin:0 0 14px}
.prose ul{display:grid; gap:9px; margin:0 0 16px}
.prose ul li{padding-left:18px; position:relative}
.prose ul li::before{content:""; position:absolute; left:0; top:11px; width:6px; height:6px; border-radius:50%; background:var(--c-brand)}
.prose a{color:var(--c-brand-deep); text-decoration:underline}
.prose__meta{font-size:13px; color:var(--c-text-faint); margin:0 0 22px; padding-bottom:18px; border-bottom:1px solid var(--c-line)}
.legal-grid{display:grid; grid-template-columns:230px 1fr; gap:clamp(22px,3vw,44px); align-items:start}
.legal-toc{position:sticky; top:calc(var(--header-h) + 18px); font-size:14px}
.legal-toc b{display:block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-text-faint); margin-bottom:11px}
.legal-toc ul{display:grid; gap:2px}
.legal-toc a{display:block; padding:7px 11px; border-radius:var(--r-sm); color:var(--c-text-soft); text-decoration:none; line-height:20px}
.legal-toc a:hover{background:var(--c-brand-tint); color:var(--c-brand-deep); text-decoration:none}

/* Overview split ----------------------------------------------------------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,44px); align-items:center}
.split__art{border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-2); aspect-ratio:16/11; background:var(--c-bg-alt)}
.split__art img{width:100%; height:100%; object-fit:cover}

/* Internal-page responsive ------------------------------------------------- */
@media (max-width:1099px){
  .flow{grid-template-columns:repeat(3,1fr)}
  .flow__item:not(:last-child)::after{display:none}
  .related{grid-template-columns:repeat(3,1fr)}
  .g-side{grid-template-columns:1fr}
  .expert{position:static}
  .legal-grid{grid-template-columns:1fr}
  .legal-toc{position:static; display:none}
}
@media (max-width:991px){
  .phero__grid{grid-template-columns:1fr}
  .phero__art{order:-1; aspect-ratio:16/9}
  .contact{grid-template-columns:1fr}
  .g3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .leader{grid-template-columns:1fr; text-align:center}
  .leader__av{max-width:190px; margin-inline:auto}
}
@media (max-width:767px){
  .g2,.g3,.jobs,.mv{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .related{grid-template-columns:repeat(2,1fr)}
  .form__row{grid-template-columns:1fr}
  .phero{padding-top:26px}
  .prose h2{font-size:21px; line-height:29px}
}

/* ==========================================================================
   17. COMING SOON — the /blog/ placeholder.
   One logo lockup, one line of copy, one loading animation. Nothing else.
   ========================================================================== */
.soon{
  position:relative; overflow:hidden; display:grid; place-items:center; text-align:center;
  min-height:min(74vh, 660px); padding:clamp(40px,6vw,80px) 0;
  background:linear-gradient(180deg,#FFFCF6 0%, #FAF1E1 55%, #FDFAF5 100%);
}
.soon::before{
  content:""; position:absolute; top:-160px; right:-140px; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle, rgba(233,161,59,.22) 0%, transparent 68%); pointer-events:none;
}
.soon::after{
  content:""; position:absolute; bottom:-240px; left:-180px; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle, rgba(56,73,95,.10) 0%, transparent 68%); pointer-events:none;
}
.soon__inner{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; max-width:560px; padding-inline:var(--gut)}

/* Logo lockup — same structure as the header, scaled up */
.soon .logo{gap:14px; margin-bottom:clamp(20px,3vw,30px)}
.soon .logo__mark{height:clamp(58px,8vw,80px)}
.soon .logo__word{font-size:clamp(26px,3.4vw,36px)}

.soon h1{font-size:clamp(28px,4.4vw,44px); line-height:1.18; margin-bottom:10px}
.soon p{color:var(--c-text-soft); font-size:16px; line-height:26px; margin:0 0 clamp(24px,3.2vw,34px); max-width:44ch}

/* The single loading animation ------------------------------------------- */
.soon__bar{
  width:min(240px, 70vw); height:5px; border-radius:var(--r-pill);
  background:rgba(233,161,59,.22); overflow:hidden; position:relative;
}
.soon__bar::after{
  content:""; position:absolute; inset:0; width:42%; border-radius:inherit;
  background:linear-gradient(90deg, var(--c-brand) 0%, var(--c-brand-dark) 100%);
  animation:soonSlide 1.5s var(--ease) infinite;
}
@keyframes soonSlide{
  0%   {transform:translateX(-105%)}
  100% {transform:translateX(245%)}
}
.soon__note{margin:clamp(22px,3vw,32px) 0 0; font-size:13px; line-height:20px; color:var(--c-text-faint)}
.soon__cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:clamp(22px,3vw,30px)}

/* The global reduced-motion rule freezes animations, which would leave the
   bar looking broken — show it as a settled state instead. */
@media (prefers-reduced-motion:reduce){
  .soon__bar::after{animation:none; width:45%; transform:none}
}

/* ==========================================================================
   18. FOOTER CREDIT — copyright left, build credit right, on one baseline.
   Overrides the .footer__copy rule in section 12 above. The same two rules
   are appended to index.html's inline <style> so the Home page footer matches.
   ========================================================================== */
.footer__copy{display:flex; flex-wrap:wrap; gap:4px clamp(16px,2.4vw,32px); justify-content:space-between; align-items:baseline}
.footer__credit{color:var(--c-text-faint)}
.footer__credit a{color:inherit; text-decoration:underline; text-underline-offset:2px; transition:color .18s var(--ease)}
.footer__credit a:hover{color:var(--c-ink)}
@media (max-width:600px){ .footer__copy{justify-content:flex-start} }
/* ==========================================================================
   19. FOOTER SOCIAL BUTTONS — restyled to match the white logo plate above
   them. The thin dark outline in section 12 read as washed-out on the amber
   footer; solid white with the plate's border/shadow gives them real presence.
   Mirrored into index.html's inline <style>.
   ========================================================================== */
.social{gap:10px}
.social a{
  width:40px; height:40px; background:#fff; color:var(--c-ink-deep);
  border:1px solid rgba(20,28,43,.09); box-shadow:0 2px 8px rgba(20,28,43,.14);
  transition:transform .22s var(--ease), background-color .22s var(--ease),
             color .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.social a svg{width:18px; height:18px}
.social a:hover{
  background:var(--c-ink-deep); color:var(--c-brand); border-color:var(--c-ink-deep);
  transform:translateY(-3px); box-shadow:0 10px 22px rgba(20,28,43,.28);
}
.social a:active{transform:translateY(-1px)}

/* ==========================================================================
   20. CONTACT FORM — submission states
   ========================================================================== */
.form__status--ok{background:#E9F4EC; border:1px solid #B7DCC4; color:#1B5E3A}
.form__status--err{background:#FDECE8; border:1px solid #F0B9AC; color:#8C2D16}
.form__status a{color:inherit; text-decoration:underline}
/* Honeypot — visible to bots, never to people or screen readers */
.form__hp{position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden}
.btn[aria-busy="true"]{opacity:.72; pointer-events:none}