@charset "utf-8";
/* ==========================================================================
   ProsVelop India Pvt Ltd — Stylesheet
   --------------------------------------------------------------------------
   1.  Design tokens              12. EMI calculator
   2.  Reset & base               13. Directors
   3.  Typography                 14. Call to action
   4.  Layout primitives          15. Trust counters
   5.  Buttons                    16. Testimonials
   6.  Header & navigation        17. Lender network
   7.  Hero slider                18. Footer
   8.  Services                   19. Modal
   9.  Feature strip              20. Utilities & accessibility
   10. About / Why us             21. Responsive — width breakpoints
   11. Quick apply                22. Responsive — device capability & posture

   NOTE: in §21 the `max-width` blocks are ordered LARGEST FIRST, so that a
   narrower breakpoint always wins the cascade against a wider one.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* Brand green — kept close to the logo */
  --green:        #0b5d35;
  --green-dark:   #084b2b;
  --green-deep:   #063d25;
  --green-bright: #12855a;
  --green-pale:   #cfe9d8;
  --green-tint:   #edf5ef;

  /* Navy — the dark surfaces. Deep and cool, the register people already
     associate with banking. */
  --ink:          #0a1a2f;
  --ink-2:        #102844;
  --ink-3:        #1b3c63;

  /* Blue — the interactive accent: pointer glow, highlights, progress. */
  --blue:         #2a6fb5;
  --blue-bright:  #3d8fd6;
  --blue-pale:    #bcd9f2;

  /* Bone — a warm off-white base, so light sections have warmth instead of
     the flat white the page had before. */
  --bone:         #faf8f4;
  --bone-2:       #f2eee7;

  --gold:         #b8912f;
  --gold-light:   #d9b869;
  --gold-pale:    #ecd9a4;
  --gold-line:    #cfae5f;

  --water:        #eef9ff;
  --water-soft:   #f1faff;
  --water-line:   #d9effa;

  /* Neutrals */
  --text:         #173326;
  --text-soft:    #53645a;
  --muted:        #66736d;
  --muted-light:  #7a857f;
  --ink-blue:     #45616d;
  --ink-soft:     #5c727c;
  --surface:      #ffffff;
  --surface-alt:  var(--bone-2);
  --surface-warm: var(--bone);
  --border:       #e5e0d6;
  --border-water: #dcebe5;

  /* Fluid type scale — clamps from 320px to 1600px viewports */
  --fs-xs:    clamp(0.688rem, 0.66rem + 0.14vw, 0.75rem);
  --fs-sm:    clamp(0.75rem,  0.72rem + 0.16vw, 0.813rem);
  --fs-base:  clamp(0.875rem, 0.85rem + 0.16vw, 0.938rem);
  --fs-md:    clamp(0.938rem, 0.90rem + 0.23vw, 1.063rem);
  --fs-lg:    clamp(1rem,     0.95rem + 0.31vw, 1.125rem);
  --fs-h3:    clamp(1rem,     0.94rem + 0.31vw, 1.25rem);
  --fs-h2:    clamp(1.625rem, 1.28rem + 1.72vw, 2.5rem);
  --fs-h1:    clamp(1.875rem, 1.25rem + 3.13vw, 4.25rem);
  --fs-emi:   clamp(2rem,     1.42rem + 2.89vw, 3.25rem);
  --fs-count: clamp(1.875rem, 1.53rem + 1.72vw, 2.625rem);

  /* Spacing */
  --gutter:    clamp(1rem, 0.65rem + 1.72vw, 1.375rem);
  --section-y: clamp(3.25rem, 1.9rem + 6.4vw, 6.5rem);
  --gap:       clamp(0.625rem, 0.5rem + 0.63vw, 0.875rem);

  /* Type */
  --font-body:    "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;

  /* Structure */
  --wrap:      1180px;
  --header-h:  78px;
  --hero-h:    620px;
  --radius:    8px;
  --radius-lg: 14px;
  --tap:       44px;             /* WCAG 2.5.5 target size */

  /* Effects */
  --shadow-sm: 0 1px 2px  rgba(16, 58, 40, .05), 0 4px 14px rgba(16, 58, 40, .05);
  --shadow-md: 0 2px 5px  rgba(16, 58, 40, .05), 0 16px 34px rgba(16, 58, 40, .09);
  --shadow-lg: 0 4px 10px rgba(16, 58, 40, .06), 0 30px 66px rgba(16, 58, 40, .16);
  --ring:      0 0 0 3px rgba(61, 143, 214, .35);
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --spring:    cubic-bezier(.34, 1.56, .64, 1);

  /* Safe areas (notches, punch-holes, gesture bars) */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--bone);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked { overflow: hidden; }

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a { color: inherit; text-decoration: none; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: 0; }

ul { list-style: none; }

address { font-style: normal; }

::selection {
  background: var(--green);
  color: #fff;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--green-bright);
  outline-offset: 2px;
  border-radius: 3px;
}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3 {
  font-weight: 800;
  line-height: 1.1;
  text-wrap: balance;
}

/* Display serif for the two headline levels; card titles stay in the sans,
   where a high-contrast serif would go weak at small sizes. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-feature-settings: "kern" 1, "liga" 1;
}

h1 { font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -0.018em; }
h2 { font-size: var(--fs-h2); line-height: 1.14; letter-spacing: -0.012em; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.005em; }

p { text-wrap: pretty; }

.eyebrow {
  margin-bottom: 0.875rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--green-bright);
}

/* Short gold rule leading into the label */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1.5px;
  margin-right: 0.8em;
  vertical-align: middle;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  transition: width .45s var(--spring), margin-right .45s var(--spring);
}

@media (hover: hover) {
  .section-head:hover .eyebrow::before,
  .directors__head:hover .eyebrow::before,
  .split__panel:hover .eyebrow::before,
  .cta:hover .eyebrow::before,
  .apply-copy:hover .eyebrow::before,
  .lenders:hover .eyebrow::before { width: 46px; margin-right: 1em; }

  .section-head h2 { transition: letter-spacing .45s var(--ease); }
  .section-head:hover h2 { letter-spacing: 0.002em; }
}

.muted { font-size: var(--fs-sm); color: var(--muted-light); }


/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: max(var(--gutter), var(--safe-l)) max(var(--gutter), var(--safe-r));
}

.section { 
  padding-block: var(--section-y); 
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(0.75rem, 2vw, 1.875rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.375rem);
}

.section-head > p:not(.eyebrow) {
  max-width: 42ch;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--muted);
}

/* A heading on its own, with no explanatory column beside it */
.section-head--solo { display: block; }


/* -- Ambient depth ---------------------------------------------------------
   Soft brand-coloured orbs drifting behind a section. `overflow: hidden` is
   required: a 60px blur bleeds well past its own box and would otherwise push
   the page sideways on narrow screens.
   --------------------------------------------------------------------------- */

.ambient {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ambient::before,
.ambient::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
}

.ambient::before {
  width: clamp(240px, 34vw, 440px);
  aspect-ratio: 1;
  top: -8%;
  left: -6%;
  translate: var(--px, 0px) var(--py, 0px);
  transition: translate .9s cubic-bezier(.22, .68, .28, 1);
  background: radial-gradient(circle, rgba(61, 143, 214, .16), transparent 70%);
  animation: orb-drift-a 19s ease-in-out infinite alternate;
}

.ambient::after {
  width: clamp(200px, 28vw, 380px);
  aspect-ratio: 1;
  bottom: -10%;
  right: -5%;
  translate: calc(var(--px, 0px) * -0.6) calc(var(--py, 0px) * -0.6);
  transition: translate 1.1s cubic-bezier(.22, .68, .28, 1);
  background: radial-gradient(circle, rgba(216, 183, 90, .20), transparent 70%);
  animation: orb-drift-b 24s ease-in-out infinite alternate;
}

@keyframes orb-drift-a {
  from { transform: translate(0, 0)      scale(1);    }
  to   { transform: translate(70px, 46px) scale(1.14); }
}

@keyframes orb-drift-b {
  from { transform: translate(0, 0)        scale(1);    }
  to   { transform: translate(-58px, -40px) scale(1.10); }
}

/* -- Surface treatments ----------------------------------------------------- */

/* Light green ground — keeps the palette warm between the dark bands
   instead of dropping back to plain white. */
/* Warm bone ground with the faintest green cast — warmth instead of the
   flat white the page used to fall back to. */
.leafy {
  background:
    radial-gradient(circle at 86% 6%, rgba(42, 111, 181, .06), transparent 44%),
    linear-gradient(180deg, var(--bone) 0%, var(--bone-2) 100%);
}

/* Faint dot grid so large panels are not dead flat */
.textured {
  background-image: radial-gradient(rgba(11, 93, 53, .06) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
}


/* -- Dark surfaces ----------------------------------------------------------
   `.on-dark` flips a whole section to deep green and re-tunes every child
   that would otherwise vanish against it. Applied per section so the page
   alternates green / light rather than running white throughout.
   --------------------------------------------------------------------------- */

.on-dark {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(27, 60, 99, .55), transparent 70%),
    linear-gradient(175deg, var(--ink-2) 0%, var(--ink) 60%, #06111f 100%);
  background-size: 140% 140%, 100% 100%;
  color: rgba(255, 255, 255, .78);
  animation: dark-drift 30s ease-in-out infinite alternate;
}

@keyframes dark-drift {
  from { background-position: 42% 0%, 0 0; }
  to   { background-position: 58% 22%, 0 0; }
}

.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark strong,
.on-dark b        { color: #fff; }

.on-dark p,
.on-dark li,
.on-dark cite,
.on-dark address  { color: rgba(255, 255, 255, .80); }

.on-dark .eyebrow { color: var(--gold-light); }
.on-dark .muted   { color: rgba(255, 255, 255, .60); }

/* Component rules such as `.feature p` are as specific as `.on-dark p` and
   sit later in the file, so they win and leave muted grey on green at about
   3:1. These name the pairs explicitly to take the cascade back. */
.on-dark .feature p,
.on-dark .feature h3,
.on-dark .apply-copy p:not(.eyebrow),
.on-dark .testimonial p,
.on-dark .testimonial__meta span,
.on-dark .section-head > p:not(.eyebrow),
.on-dark .about-points span,
.on-dark .why-item p,
.on-dark .lenders__intro,
.on-dark .lenders__disclaimer,
.on-dark .directors__intro { color: rgba(255, 255, 255, .80); }

.on-dark .about-points b,
.on-dark .testimonial__meta cite,
.on-dark .why-item h3 { color: #fff; }

/* Cards become glass so the green reads through them */
.on-dark .feature,
.on-dark .apply-grid,
.on-dark .testimonial,
.on-dark .about-points > div {
  border-color: rgba(217, 184, 105, .22);
  background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

.on-dark .feature__icon {
  background: rgba(217, 184, 105, .16);
  color: var(--gold-light);
}

.on-dark .btn--outline {
  background: rgba(255, 255, 255, .10);
  color: #fff;
  border-color: rgba(255, 255, 255, .70);
}

.on-dark .btn--primary {
  background: var(--green-bright);
  border-color: var(--green-bright);
}

/* Form fields stay solid — a glass input is hard to read and harder to type in */
.on-dark .form-grid input,
.on-dark .form-grid select {
  border-color: rgba(255, 255, 255, .30);
  background: rgba(255, 255, 255, .96);
  color: var(--text);
}

.on-dark .eyebrow::before {
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
}

/* Drifting motes, only on the dark bands */
.on-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(217, 184, 105, .13) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 72px 72px, 108px 108px;
  background-position: 0 0, 32px 42px;
  animation: mote-drift 42s linear infinite;
}

@keyframes mote-drift {
  to { background-position: 64px 64px, 96px 138px; }
}


/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--tap);
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), box-shadow .25s var(--ease),
              transform .45s cubic-bezier(.34, 1.56, .64, 1);
}

.btn:active { transform: translateY(1px); }

/* Light sweeps across the face on hover */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
              transparent 38%, rgba(255, 255, 255, .40) 50%, transparent 62%);
  background-size: 250% 100%;
  background-position: 160% 0;
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) {
  .btn--primary:hover { box-shadow: var(--shadow-md); }

  .btn:hover::after {
    opacity: 1;
    animation: btn-shine .85s var(--ease);
  }
}

@keyframes btn-shine {
  from { background-position: 160% 0; }
  to   { background-position: -160% 0; }
}

.btn--primary { background: var(--green); color: #fff; border-color: var(--green); }
.btn--outline { background: #fff; color: var(--green); border-color: var(--green); }
.btn--light   { background: var(--gold-pale); color: var(--text); border-color: var(--gold-line); }
.btn--block   { width: 100%; }

@media (hover: hover) {
  .btn--primary:hover { background: var(--green-dark); border-color: var(--green-dark); }
  .btn--outline:hover { background: var(--surface-alt); }
  .btn--light:hover   { background: #e3c77f; }
}


/* ==========================================================================
   6. HEADER & NAVIGATION
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--border);
  padding-top: var(--safe-t);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow .4s var(--ease), background-color .4s var(--ease);
}

/* Height stays fixed — the header is in flow, so shrinking it would
   shove the page. Only the shadow and logo scale respond. */
.header.is-scrolled {
  background: rgba(255, 255, 255, .99);
  box-shadow: 0 2px 20px rgba(16, 58, 40, .10);
}

.header.is-scrolled .brand__logo { transform: scale(.93); }

.header__inner {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  min-height: var(--header-h);
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: max(var(--gutter), var(--safe-l)) max(var(--gutter), var(--safe-r));
}

/* -- Brand: single horizontal lockup (emblem + wordmark) ------------------ */

.brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.brand__logo {
  width: clamp(200px, 19vw, 280px);
  height: auto;
  transition: transform .45s var(--spring);
}

@media (hover: hover) {
  /* Restrained: a logo that jumps reads as cheap */
  .brand:hover .brand__logo { transform: scale(1.02); }
}

/* -- Primary nav ---------------------------------------------------------- */

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  margin-left: auto;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #294136;
  white-space: nowrap;
  transition: color .2s var(--ease);
}

/* Hairline that wipes in from the left */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}

@media (hover: hover) {
  .nav__link:hover { color: var(--green); }
  .nav__link:hover::after { transform: scaleX(1); }
}

.nav__link[aria-current="page"] { color: var(--green); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* -- Fixed social rail ----------------------------------------------------
   A vertical column of icons pinned to the right edge, vertically centred.
   Flush to the edge (rounded on the left only) so it reads as an attachment
   rather than an island floating over the page. A column costs almost no
   horizontal space, so every icon keeps a full 44px touch target.
   ------------------------------------------------------------------------ */

.social-rail {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  max-height: 84dvh;
  padding: 0.5rem;
  margin-right: var(--safe-r);
  border: 1px solid var(--water-line);
  border-right: 0;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background: rgba(255, 255, 255, .94);
  box-shadow: -6px 0 22px rgba(15, 64, 38, .12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateY(-50%);
}

.social-rail__link {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: 11px;
  border-radius: 50%;
  background: var(--surface-alt);
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}

.social-rail__link svg { width: 100%; height: 100%; }

/* Label pulled straight from aria-label, so there is nothing extra to
   keep in sync in the markup. */
.social-rail__link::after {
  content: attr(aria-label);
  position: absolute;
  right: calc(100% + 8px);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(10px) scale(.92);
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .4s var(--spring);
}

@media (hover: hover) {
  .social-rail__link:hover::after { opacity: 1; transform: none; }
}

/* Gentle staggered pulse so the rail catches the eye without nagging */
.social-rail__link { animation: social-pulse 2.4s var(--ease) infinite; }
.social-rail__link:nth-child(2) { animation-delay: .2s; }
.social-rail__link:nth-child(3) { animation-delay: .4s; }
.social-rail__link:nth-child(4) { animation-delay: .6s; }

@media (hover: hover) {
  .social-rail__link:hover {
    transform: translateX(-3px) scale(1.06);
    background: var(--green-tint);
  }
}

@keyframes social-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .55; transform: scale(1.06); }
}

/* -- Menu toggle (mobile) ------------------------------------------------- */

.menu-toggle {
  display: none;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  margin-left: auto;
  border-radius: var(--radius);
  color: var(--green);
}

.menu-toggle__bar,
.menu-toggle__bar::before,
.menu-toggle__bar::after {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}

.menu-toggle__bar::before,
.menu-toggle__bar::after {
  content: "";
  position: absolute;
}

.menu-toggle__bar::before { transform: translateY(-7px); }
.menu-toggle__bar::after  { transform: translateY(7px); }

.menu-toggle[aria-expanded="true"] .menu-toggle__bar         { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar::before { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar::after  { transform: rotate(-45deg); }


/* ==========================================================================
   7. HERO SLIDER
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--ink);
}

.slider {
  position: relative;
  width: 100%;
  height: clamp(430px, 62vh, var(--hero-h));
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  background-color: var(--water);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: opacity .55s var(--ease), visibility .55s var(--ease);
}

.slide.is-active { visibility: visible; opacity: 1; z-index: 2; }

/* Deep green scrim: the copy side goes almost solid so white type reads,
   the right side stays open so the photograph still shows through. */
.slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              rgba(8, 22, 40, .94) 0%,
              rgba(10, 26, 47, .85) 42%,
              rgba(16, 40, 68, .56) 72%,
              rgba(27, 60, 99, .32) 100%);
}

.slide__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) max(var(--gutter), var(--safe-l));
  color: #fff;
}

.slide__inner .eyebrow { color: var(--gold-light); }

.slide__inner h1 { max-width: 16ch; margin-bottom: 1rem; color: #fff; }

.slide__inner p:not(.eyebrow) {
  max-width: 52ch;
  margin-bottom: 1.5rem;
  font-size: var(--fs-lg);
  color: rgba(255, 255, 255, .90);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Each slide's copy staggers in as it becomes the active one */
.slide.is-active .slide__inner > * {
  animation: hero-rise .85s var(--spring) both;
}

.slide.is-active .slide__inner > *:nth-child(1) { animation-delay: .06s; }
.slide.is-active .slide__inner > *:nth-child(2) { animation-delay: .16s; }
.slide.is-active .slide__inner > *:nth-child(3) { animation-delay: .26s; }
.slide.is-active .slide__inner > *:nth-child(4) { animation-delay: .36s; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.slide .btn--primary { background: var(--green-bright); border-color: var(--green-bright); }
.slide .btn--outline { background: rgba(255, 255, 255, .10); color: #fff; border-color: rgba(255, 255, 255, .75); }

/* -- Dots ----------------------------------------------------------------- */

.slider__dots {
  position: absolute;
  left: 50%;
  bottom: calc(1.25rem + var(--safe-b));
  z-index: 4;
  display: flex;
  gap: 0.5rem;
  transform: translateX(-50%);
}

.slider__dot {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
}

.slider__dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transition: transform .3s var(--ease), background-color .3s var(--ease);
}

.slider__dot[aria-selected="true"]::before { background: #fff; transform: scale(1.4); }

@media (hover: hover) {
  .slider__dot:hover::before { background: #fff; transform: scale(1.7); }
}


/* ==========================================================================
   8. SERVICES
   ========================================================================== */

.loan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--gap);
}

/* Offsets the idle loops so the row ripples instead of pulsing as one */
.loan-grid > :nth-child(1) { --stagger: 0s;    }
.loan-grid > :nth-child(2) { --stagger: -0.5s; }
.loan-grid > :nth-child(3) { --stagger: -1s;   }
.loan-grid > :nth-child(4) { --stagger: -1.5s; }
.loan-grid > :nth-child(5) { --stagger: -2s;   }
.loan-grid > :nth-child(6) { --stagger: -2.5s; }

.loan-card {
  position: relative;
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.125rem, 2.5vw, 1.5rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  text-align: center;
  cursor: pointer;
  transition: transform .25s var(--ease), border-color .25s var(--ease),
              box-shadow .25s var(--ease);
}

/* Gold bar wipes across the top edge */
.loan-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}

@media (hover: hover) {
  .loan-card:hover {
    transform: translateY(-5px);
    border-color: #a8c9b3;
    box-shadow: var(--shadow-md);
  }
}

/* -- Icon ------------------------------------------------------------------
   A struck-coin look: a warm gold disc with a glassy highlight, circled by a
   gold arc that keeps turning, over a halo that breathes underneath.
   --------------------------------------------------------------------------- */

.loan-card__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 1.125rem;
  border-radius: 50%;
  background:
    linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .88) 50%, transparent 60%),
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .80), transparent 58%),
    linear-gradient(150deg, #fdfaf3 0%, #f0e4cb 52%, #d8c298 100%);
  background-size: 300% 100%, auto, auto;
  background-position: 165% 0, 0 0, 0 0;
  animation: icon-sheen 6.5s var(--ease) infinite;
  animation-delay: var(--stagger, 0s);
  /* the inset ring gives the pale disc an edge against the white card */
  box-shadow: 0 7px 18px rgba(122, 96, 34, .22),
              inset 0 0 0 1px rgba(184, 145, 47, .30),
              inset 0 2px 5px rgba(255, 255, 255, .90),
              inset 0 -4px 9px rgba(150, 118, 48, .26);
  transition: transform .4s var(--spring), box-shadow .35s var(--ease);
}

/* Gold arc orbiting the disc — masked to a hairline ring */
.loan-card__icon::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  /* Deeper blues than the accent elsewhere: the disc beneath is champagne,
     and --blue-bright only reaches 2.7:1 on it. */
  background: conic-gradient(from 0deg,
              transparent 0 50%,
              rgba(29, 82, 137, .60) 66%,
              #215c95 79%,
              #1d5289 90%,
              transparent 97%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: icon-orbit 7s linear infinite;
  animation-delay: var(--stagger, 0s);
  pointer-events: none;
}

/* Soft halo breathing behind everything */
.loan-card__icon::after {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 145, 47, .38), transparent 68%);
  animation: icon-halo 4.5s var(--ease) infinite;
  animation-delay: var(--stagger, 0s);
  pointer-events: none;
}

.loan-card__icon svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: var(--green);
  stroke-width: 2.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .75));
  animation: icon-bob 3.6s var(--ease) infinite;
  animation-delay: var(--stagger, 0s);
}

/* pathLength="1" on every shape lets one dash rule draw them all.
   Offset 0 at rest, so the glyph is always fully drawn by default. */
.loan-card__icon svg > * {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: icon-idle-draw 9s var(--ease) infinite;
  animation-delay: var(--stagger, 0s);
}

/* Soft green light follows the pointer across every card type.
   `--mx` / `--my` are written by the pointer handler in main.js. */
.loan-card::after,
.lender::after,
.feature::after,
.testimonial::after,
.about-points > div::after,
.why-item::after,
.apply-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
              240px circle at var(--mx, 50%) var(--my, 50%),
              rgba(61, 143, 214, .16), transparent 62%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}

/* On the ink bands the same green would disappear, so it lifts to a paler
   tint at higher opacity. */
.on-dark .feature::after,
.on-dark .testimonial::after,
.on-dark .about-points > div::after,
.on-dark .apply-grid::after {
  background: radial-gradient(
              320px circle at var(--mx, 50%) var(--my, 50%),
              rgba(140, 200, 250, .18), transparent 64%);
}

@media (hover: hover) {
  .loan-card:hover::after,
  .lender:hover::after,
  .feature:hover::after,
  .testimonial:hover::after,
  .about-points > div:hover::after,
  .why-item:hover::after,
  .apply-grid:hover::after { opacity: 1; }
}

.loan-card h3 {
  margin-bottom: 0.5rem;
  transition: color .3s var(--ease);
}

@media (hover: hover) {
  .loan-card:hover h3      { color: var(--green); }
  .loan-card:hover .loan-card__arrow { letter-spacing: .04em; }
}

.loan-card__arrow { transition: letter-spacing .35s var(--ease); }
.loan-card p  { flex: 1; font-size: var(--fs-sm); color: var(--muted); }

.loan-card__arrow {
  margin-top: 1.125rem;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--green);
}

/* Arrow glyph is a pseudo-element so it can slide on its own */
.loan-card__arrow::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.35em;
  transition: transform .3s var(--spring);
}

/* -- Hover / focus choreography -------------------------------------------
   Triggered by the card, by the icon itself, and by keyboard focus.
   ------------------------------------------------------------------------- */

.loan-card:hover::before,
.loan-card:focus-visible::before { transform: scaleX(1); }

.loan-card:hover .loan-card__icon,
.loan-card__icon:hover,
.loan-card:focus-visible .loan-card__icon {
  transform: translateY(-6px) scale(1.08);
  box-shadow: 0 18px 30px rgba(122, 96, 34, .30),
              inset 0 0 0 1px rgba(184, 145, 47, .38),
              inset 0 2px 5px rgba(255, 255, 255, .95),
              inset 0 -4px 9px rgba(150, 118, 48, .26);
}

/* The arc spins up and the halo brightens */
.loan-card:hover .loan-card__icon::before,
.loan-card__icon:hover::before,
.loan-card:focus-visible .loan-card__icon::before {
  animation-duration: 2.1s;
  animation-delay: 0s;
}

.loan-card:hover .loan-card__icon::after,
.loan-card__icon:hover::after,
.loan-card:focus-visible .loan-card__icon::after {
  animation-duration: 2.2s;
  animation-delay: 0s;
}

/* The glyph redraws itself, stroke by stroke */
.loan-card:hover .loan-card__icon svg > *,
.loan-card__icon:hover svg > *,
.loan-card:focus-visible .loan-card__icon svg > * {
  animation: icon-draw .9s var(--ease) both;
  animation-delay: 0s;
}

.loan-card:hover .loan-card__icon,
.loan-card__icon:hover,
.loan-card:focus-visible .loan-card__icon { animation-duration: 2.4s; }

.loan-card:hover .loan-card__icon svg,
.loan-card__icon:hover svg,
.loan-card:focus-visible .loan-card__icon svg {
  animation: icon-bob-hover 1.6s var(--ease) infinite;
  animation-delay: 0s;
}

.loan-card:hover .loan-card__arrow::after,
.loan-card:focus-visible .loan-card__arrow::after { transform: translateX(5px); }

/* -- Loops ----------------------------------------------------------------- */

@keyframes icon-orbit {
  to { transform: rotate(360deg); }
}

@keyframes icon-halo {
  0%, 100% { opacity: .30; transform: scale(.92); }
  50%      { opacity: .65; transform: scale(1.06); }
}

@keyframes icon-sheen {
  0%        { background-position: 165% 0, 0 0, 0 0; }
  34%, 100% { background-position: -165% 0, 0 0, 0 0; }
}

@keyframes icon-bob {
  0%, 100% { transform: translateY(0);    }
  50%      { transform: translateY(-2px); }
}

@keyframes icon-bob-hover {
  0%, 100% { transform: translateY(0)    scale(1.06); }
  50%      { transform: translateY(-3px) scale(1.09); }
}

/* Holds, erases, redraws, holds. Both ends of the cycle sit at 0 so the
   loop seam is invisible — jumping straight to 1 would read as a glitch. */
@keyframes icon-idle-draw {
  0%, 50% { stroke-dashoffset: 0; }
  66%     { stroke-dashoffset: 1; }
  86%     { stroke-dashoffset: 0; }
  100%    { stroke-dashoffset: 0; }
}

@keyframes icon-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}


/* ==========================================================================
   8b. MARQUEE
   --------------------------------------------------------------------------
   A green band between Services and the service promise, breaking up two
   white sections. The track holds the list twice and slides exactly -50%,
   so the loop closes on itself with no visible jump.
   ========================================================================== */

.ticker {
  overflow: hidden;
  background: linear-gradient(90deg, var(--ink) 0%, var(--ink-3) 50%, var(--ink) 100%);
  border-block: 1px solid rgba(217, 184, 105, .26);

  /* Items fade at both edges instead of being sliced off */
  -webkit-mask-image: linear-gradient(90deg,
                      transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg,
                      transparent 0, #000 7%, #000 93%, transparent 100%);
}

.ticker-inner {
  display: flex;
  width: max-content;
  animation: ticker-scroll 46s linear infinite;
}

@media (hover: hover) {
  .ticker:hover .ticker-inner { animation-play-state: paused; }
  .ticker-item:hover .sep { transform: scale(1.4) rotate(90deg); }
  .ticker-item:hover {
    color: var(--gold-light);
    text-shadow: 0 0 18px rgba(217, 184, 105, .45);
  }
}

.ticker-item { transition: color .3s var(--ease), text-shadow .3s var(--ease); }

.ticker-item {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  padding-block: clamp(0.75rem, 2vw, 1.0625rem);
  padding-right: clamp(0.75rem, 2vw, 1.25rem);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}

.ticker-item .sep {
  display: inline-block;
  font-size: 0.75em;
  line-height: 1;
  color: var(--gold-light);
  transition: transform .45s var(--spring);
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ==========================================================================
   9. FEATURE STRIP
   ========================================================================== */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap);
}

.feature {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  padding: clamp(1.125rem, 2.5vw, 1.375rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  transition: transform .35s var(--ease), border-color .35s var(--ease),
              box-shadow .35s var(--ease);
}

.feature__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 0.875rem;
  border-radius: 50%;
  background: linear-gradient(150deg, #fdfaf3, #f0e4cb);
  color: var(--green);
  font-size: 1.125rem;
  font-weight: 900;
}

.feature h3 { margin-bottom: 0.3rem; font-size: var(--fs-md); }
.feature p  { font-size: var(--fs-sm); color: var(--muted); }

/* Animation rather than transition, so the idle loop and the hover state
   are not fighting over the same transform. */
.feature__icon {
  transition: background-color .35s var(--ease);
  animation: feature-pulse 4.2s var(--ease) infinite;
}

.feature-grid > :nth-child(2) .feature__icon { animation-delay: -1.4s; }
.feature-grid > :nth-child(3) .feature__icon { animation-delay: -2.8s; }

@keyframes feature-pulse {
  0%, 100% { transform: scale(1)    rotate(0deg); }
  50%      { transform: scale(1.07) rotate(-4deg); }
}

@keyframes feature-pulse-hover {
  0%, 100% { transform: scale(1.12) rotate(-8deg); }
  50%      { transform: scale(1.18) rotate(-2deg); }
}

@media (hover: hover) {
  .feature:hover {
    transform: translateY(-4px);
    border-color: var(--gold-line);
    box-shadow: var(--shadow-md);
  }

  .feature:hover .feature__icon {
    background: #f0e4cb;
    animation: feature-pulse-hover 1.7s var(--ease) infinite;
    animation-delay: 0s;
  }
}


/* ==========================================================================
   10. ABOUT / WHY US
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bone);
}

.split__panel { padding: var(--section-y) max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }

.split__panel--about { padding-right: clamp(var(--gutter), 4vw, 4.375rem); }

/* A hairline rather than a second background colour — the hard 50% seam
   between two grounds looked like a rendering fault. */
.split__panel--why {
  /* inset shadow rather than a border: a real border on a 1fr grid track
     pushed the row 1px past the viewport. */
  box-shadow: inset 1px 0 0 var(--border);
  padding-left: clamp(var(--gutter), 4vw, 4.375rem);
}

.split__panel h2 { margin-bottom: 1.5rem; }

.split__panel--about p:not(.eyebrow) {
  margin-bottom: 1.125rem;
  color: var(--text-soft);
}

.about-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.625rem;
  margin-block: 1.375rem;
}

.about-points > div {
  position: relative;
  overflow: hidden;
  padding: 0.8rem 0.5rem;
  border: 1px solid var(--border-water);
  border-radius: var(--radius-lg);
  background: #f4faf7;
  text-align: center;
  transition: transform .35s var(--ease), border-color .35s var(--ease),
              background-color .35s var(--ease), box-shadow .35s var(--ease);
}

.about-points b { transition: transform .4s var(--spring); }

@media (hover: hover) {
  .about-points > div:hover {
    transform: translateY(-3px);
    border-color: var(--gold-line);
    background: #fff;
    box-shadow: var(--shadow-sm);
  }

  .about-points > div:hover b { transform: scale(1.12); }
}

.about-points b { display: block; font-size: var(--fs-h3); color: #17683f; }
.about-points span { display: block; margin-top: 4px; font-size: var(--fs-xs); color: #6b7d76; }

.about-usp__title {
  margin-bottom: 0.875rem;
  font-size: var(--fs-md);
  color: var(--text);
}

.about-usp {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.375rem;
}

.about-usp li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-soft);
}

.about-usp li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--gold-light), var(--gold));
  box-shadow: 0 0 0 3px rgba(216, 183, 90, .18);
}

.about-usp strong { color: var(--text); }

.why-item {
  position: relative;
  display: flex;
  gap: 1.125rem;
  padding-block: 1.375rem;
  padding-left: 0;
  border-bottom: 1px solid var(--border);
  transition: padding-left .35s var(--ease);
}

/* Gold bar grows down the left edge */
.why-item::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .4s var(--ease);
}

.why-item:last-child { border-bottom: 0; }
.why-item b  { flex: 0 0 auto; font-size: var(--fs-sm); color: var(--gold); }
.why-item h3 { font-size: var(--fs-md); }
.why-item p  { margin-top: 5px; font-size: var(--fs-sm); color: var(--muted); }

.why-item b,
.why-item h3 { transition: color .3s var(--ease); }

@media (hover: hover) {
  .why-item:hover { padding-left: 0.75rem; }
  .why-item:hover::before { transform: scaleY(1); }
  .why-item:hover b  { color: var(--green-bright); }
  .why-item:hover h3 { color: var(--green); }
}


/* ==========================================================================
   11. QUICK APPLY
   ========================================================================== */

.apply-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 1.563rem);
  padding: clamp(1.25rem, 3vw, 1.875rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  background-clip: padding-box;
}

/* Hairline frame that turns slowly behind the panel.
   The element itself never rotates — spinning a box only 2px larger than the
   panel throws its corners far outside. Instead the gradient's own angle is
   animated via a registered custom property, so nothing ever moves. */
@property --frame-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.apply-grid::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  padding: 2px;
  border-radius: calc(var(--radius) + 2px);
  background: conic-gradient(from var(--frame-angle),
              transparent 0 58%,
              rgba(216, 183, 90, .85) 72%,
              var(--green-bright) 86%,
              transparent 96%);
  /* Paint only the 2px ring. Previously this relied on an opaque panel to
     hide the middle, which stopped working the moment the panel became
     glass on a dark section — the whole gradient showed through. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: frame-turn 9s linear infinite;
}

@media (hover: hover) {
  .apply-grid:hover::before { animation-duration: 3.2s; }
}

/* Where @property is unsupported the frame simply sits still. */
@keyframes frame-turn {
  to { --frame-angle: 360deg; }
}

.apply-copy { padding: clamp(0.5rem, 2vw, 1.25rem); }

.apply-copy p:not(.eyebrow) {
  margin-top: 0.75rem;
  font-size: var(--fs-base);
  color: var(--muted);
}

.apply-copy .btn { margin-top: 1.25rem; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.813rem; }

.form-grid input,
.form-grid select {
  width: 100%;
  min-height: var(--tap);
  padding: 0.75rem;
  border: 1px solid #ccd9d0;
  border-radius: var(--radius);
  background: #fff;
  font-size: 1rem;              /* 16px stops iOS Safari zooming on focus */
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

@media (hover: hover) {
  .form-grid input:hover,
  .form-grid select:hover,
  .calculator__inputs input:hover {
    border-color: var(--gold-line);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(122, 96, 34, .12);
  }
}

.form-grid input,
.form-grid select,
.calculator__inputs input { transition: transform .3s var(--ease); }

.form-grid input:focus,
.form-grid select:focus {
  border-color: var(--green);
  outline: none;
  box-shadow: var(--ring);
}

.form-grid .full { grid-column: 1 / -1; }


/* ==========================================================================
   12. EMI CALCULATOR
   ========================================================================== */

.calculator {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-alt);
}

.calculator__inputs {
  display: grid;
  align-content: start;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2.188rem);
}

.calculator__inputs label { font-size: var(--fs-xs); font-weight: 800; color: #43534a; }

.calculator__inputs input {
  width: 100%;
  min-height: var(--tap);
  margin-top: 7px;
  padding: 0.75rem;
  border: 1px solid #ccd9d0;
  border-radius: var(--radius);
  background: #fff;
  font-size: 1rem;
}

.calculator__inputs input:focus {
  border-color: var(--green);
  outline: none;
  box-shadow: var(--ring);
}

.emi-result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(1.5rem, 4vw, 2.625rem);
  border-left: 1px solid var(--border);
  background:
    radial-gradient(circle at 82% 18%, rgba(217, 184, 105, .16), transparent 52%),
    linear-gradient(150deg, #fdfbf6 0%, var(--bone-2) 100%);
  color: var(--text);
}

.emi-result__label {
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (hover: hover) {
  .emi-result:hover { box-shadow: inset 0 0 60px rgba(184, 145, 47, .12); }
  .emi-result:hover .emi-result__value { transform: scale(1.04); }
  .emi-result:hover .emi-result__label { letter-spacing: .16em; color: var(--gold); }
}

.emi-result { transition: box-shadow .45s var(--ease); }
.emi-result__label { transition: letter-spacing .4s var(--ease), color .3s var(--ease); }

.emi-result__value {
  transform-origin: left center;
  transition: transform .45s var(--spring);
  margin-block: 0.625rem;
  font-family: var(--font-display);
  font-size: var(--fs-emi);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-variant-numeric: lining-nums tabular-nums;
}

.emi-result__meta { margin-bottom: 1.563rem; font-size: var(--fs-sm); color: var(--muted); }

/* Brief lift when the figure is recalculated */
.emi-result__value.is-updated { animation: emi-flash .55s var(--ease); }

@keyframes emi-flash {
  0%   { transform: none;            color: var(--text); }
  35%  { transform: scale(1.045);    color: var(--green-bright); }
  100% { transform: none;            color: var(--text); }
}


/* ==========================================================================
   13. DIRECTORS
   ========================================================================== */

.directors {
  background:
    radial-gradient(circle at 15% 15%, rgba(255, 255, 255, .8), transparent 42%),
    linear-gradient(135deg, var(--bone) 0%, var(--bone-2) 55%, var(--bone) 100%);
  border-block: 1px solid var(--border);
}

.directors__head {
  max-width: 44ch;
  margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
  text-align: center;
}

.directors__intro {
  margin-top: 0.75rem;
  font-size: var(--fs-base);
  color: var(--muted);
}

.director-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.875rem, 2.5vw, 1.5rem);
  max-width: 720px;
  margin-inline: auto;
}

.director {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1rem, 3vw, 1.75rem);
  overflow: hidden;
  border: 1px solid var(--border-water);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
}

/* Gold hairline that fills in on hover */
.director::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}

@media (hover: hover) {
  .director:hover {
    transform: translateY(-5px);
    border-color: var(--gold-line);
    box-shadow: var(--shadow-md);
  }

  .director:hover::before { transform: scaleX(1); }
}

.director__avatar {
  display: grid;
  place-items: center;
  width: clamp(76px, 13vw, 96px);
  aspect-ratio: 1;
  margin-bottom: 1.125rem;
  padding: 18px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--gold-light), var(--gold));
  box-shadow: 0 6px 18px rgba(145, 112, 35, .22),
              0 0 0 6px rgba(216, 183, 90, .16);
  color: #fff;
}

.director__avatar--alt {
  background: linear-gradient(145deg, #2fa368, var(--green));
  box-shadow: 0 6px 18px rgba(11, 93, 53, .22),
              0 0 0 6px rgba(19, 132, 71, .14);
}

.director__avatar svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.director__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  letter-spacing: -0.005em;
  color: var(--text);
}

.director__role {
  margin-top: 0.3rem;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Gold rule closes the card, echoing the divider in the logo wordmark */
.director__role::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin: 0.875rem auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}




/* ==========================================================================
   14. CALL TO ACTION
   ========================================================================== */

.cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.188rem);
  padding: clamp(2.5rem, 6vw, 4.688rem) max(var(--gutter), calc((100vw - var(--wrap)) / 2));
  /* No background here: this section is painted by `.on-dark`, which sits
     far earlier in the file and would lose the tie on specificity. */
}

.cta h2 { margin-bottom: 0.625rem; }

.cta.on-dark { border-top: 0; }
.cta.on-dark .btn--light {
  background: var(--gold-pale);
  color: var(--text);
  border-color: var(--gold-line);
}

.cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }


/* ==========================================================================
   15. TRUST COUNTERS
   ========================================================================== */

.trust {
  padding: clamp(2.25rem, 5vw, 3.25rem) var(--gutter);
  border-block: 1px solid var(--border);
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(42, 111, 181, .07), transparent 70%),
    linear-gradient(180deg, var(--bone) 0%, var(--bone-2) 100%);
}

.trust.on-dark .trust__badge  { color: var(--gold-light); }
.trust.on-dark .trust__pulse  { background: var(--gold-light);
                                box-shadow: 0 0 0 0 rgba(216, 183, 90, .55); }
.trust.on-dark .trust__number { color: #fff; }
.trust.on-dark .trust__label  { color: rgba(255, 255, 255, .70); }

.trust__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green);
}

.trust__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 0 0 rgba(19, 132, 71, .55);
  animation: trust-pulse 2s ease-out infinite;
}

@keyframes trust-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(216, 183, 90, .55); }
  70%  { box-shadow: 0 0 0 10px rgba(216, 183, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(216, 183, 90, 0); }
}

.trust__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 4vw, 2.5rem);
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
}

.trust__item { min-width: 0; }

.trust__number { transition: transform .4s var(--spring); }

.trust__item  { transition: transform .4s var(--spring); }
.trust__label { transition: letter-spacing .4s var(--ease), color .3s var(--ease); }

@media (hover: hover) {
  .trust__item:hover { transform: translateY(-6px); }
  .trust__item:hover .trust__number { transform: scale(1.08); }
  .trust__item:hover .trust__label  { letter-spacing: .2em; color: var(--gold); }
}

.trust__number {
  font-family: var(--font-display);
  font-size: var(--fs-count);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--green);
  font-variant-numeric: lining-nums tabular-nums;
}

.trust__label {
  margin-top: 0.5rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #60757d;
}


/* ==========================================================================
   16. TESTIMONIALS
   ========================================================================== */

.testimonials { background: var(--bone); }

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.testimonial {
  position: relative;
  transform-style: preserve-3d;
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease),
              box-shadow .35s var(--ease);
  padding: clamp(1.25rem, 3vw, 1.5rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}

/* Oversized set quote, kept faint so it reads as texture. Sits fully inside
   the card — clipped to its two dots it just looks like a rendering fault. */
.testimonial::before {
  content: "\201C";
  position: absolute;
  top: -0.06em;
  right: 0.1em;
  font-family: var(--font-display);
  font-size: 5.25rem;
  line-height: 1;
  color: var(--green);
  opacity: .07;
  pointer-events: none;
  transform-origin: top right;
  transition: opacity .4s var(--ease), transform .5s var(--spring);
}

.testimonial {
  display: flex;
  flex-direction: column;
}

.testimonial p {
  flex: 1;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-soft);
}

.testimonial__stars {
  display: flex;
  gap: 2px;
  margin-bottom: 0.75rem;
}

.testimonial__stars svg {
  width: 15px;
  height: 15px;
  fill: var(--gold-light);
  transition: transform .35s var(--spring);
}

@media (hover: hover) {
  .testimonial:hover {
    transform: translateY(-4px);
    border-color: var(--water-line);
    box-shadow: var(--shadow-md);
  }

  /* the set quote lifts out of the texture */
  .testimonial:hover::before { opacity: .13; transform: scale(1.05); }

  /* stars pop left to right */
  .testimonial:hover .testimonial__stars svg { transform: scale(1.18); }
  .testimonial:hover .testimonial__stars svg:nth-child(2) { transition-delay: .04s; }
  .testimonial:hover .testimonial__stars svg:nth-child(3) { transition-delay: .08s; }
  .testimonial:hover .testimonial__stars svg:nth-child(4) { transition-delay: .12s; }
  .testimonial:hover .testimonial__stars svg:nth-child(5) { transition-delay: .16s; }
}

.testimonial__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 1.125rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--border);
}

.testimonial__meta cite {
  font-size: var(--fs-sm);
  font-weight: 700;
  font-style: normal;
  color: var(--green);
  transition: transform .4s var(--spring);
}

@media (hover: hover) {
  .testimonial:hover .testimonial__meta cite { transform: translateX(5px); }
  .testimonial:hover .testimonial__meta      { border-top-color: var(--gold-line); }
}

.testimonial__meta { transition: border-color .4s var(--ease); }

.testimonial__meta span {
  font-size: var(--fs-xs);
  color: var(--muted);
}

.testimonials__note {
  max-width: 70ch;
  margin: clamp(1.25rem, 3vw, 1.75rem) auto 0;
  font-size: var(--fs-xs);
  line-height: 1.55;
  text-align: center;
  color: var(--muted-light);
}


/* ==========================================================================
   17. LENDER NETWORK
   ========================================================================== */

.lenders { text-align: center; }

.lenders__intro {
  max-width: 62ch;
  margin: 0.625rem auto 1.5rem;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--muted);
}

.lender-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--gap);
  margin-inline: auto;
}

.lender {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 88px;
  padding: 0.875rem 0.75rem;
  border: 1px solid var(--border-water);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              border-color .25s var(--ease);
}

/* Logos arrive in wildly different aspect ratios; a fixed box plus
   object-fit:contain makes them read as one evenly-weighted set. */
.lender img {
  width: 100%;
  max-width: 130px;
  height: 46px;
  object-fit: contain;
  object-position: center;
}

.lender img {
  filter: saturate(.82) contrast(.96);
  transition: filter .45s var(--ease);
  animation: lender-drift 5.4s var(--ease) infinite;
}

@media (hover: hover) {
  .lender:hover img { filter: saturate(1.06) contrast(1); }
}

/* Six-step offset so the grid ripples instead of pulsing as a block */
.lender-grid > :nth-child(6n + 2) img { animation-delay: -0.9s; }
.lender-grid > :nth-child(6n + 3) img { animation-delay: -1.8s; }
.lender-grid > :nth-child(6n + 4) img { animation-delay: -2.7s; }
.lender-grid > :nth-child(6n + 5) img { animation-delay: -3.6s; }
.lender-grid > :nth-child(6n + 6) img { animation-delay: -4.5s; }

@keyframes lender-drift {
  0%, 100% { transform: translateY(0);    }
  50%      { transform: translateY(-3px); }
}

@keyframes lender-drift-hover {
  0%, 100% { transform: translateY(0)    scale(1.07); }
  50%      { transform: translateY(-4px) scale(1.10); }
}

@media (hover: hover) {
  .lender:hover {
    transform: translateY(-3px);
    border-color: var(--gold-line);
    box-shadow: var(--shadow-md);
  }

  .lender:hover img {
    animation: lender-drift-hover 1.8s var(--ease) infinite;
    animation-delay: 0s;
  }
}

.lenders__note {
  display: inline-block;
  margin: 1.375rem auto 0.5rem;
  padding: 0.563rem 1.125rem;
  border-radius: 22px;
  background: #e8f5ed;
  font-size: var(--fs-sm);
  color: #16683f;
}

.lenders__disclaimer {
  max-width: 90ch;
  margin: 0.75rem auto 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: #87928e;
}


/* ==========================================================================
   18. FOOTER
   ========================================================================== */

.footer { border-top: 0; }

.footer__inner {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.4fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4rem)
           max(var(--gutter), var(--safe-r))
           clamp(2rem, 4vw, 3rem)
           max(var(--gutter), var(--safe-l));
}

/* -- Brand column --------------------------------------------------------- */

.footer__logo {
  width: clamp(200px, 22vw, 250px);
  height: auto;
  margin-bottom: 1.125rem;
  transition: transform .45s var(--spring);
}

@media (hover: hover) {
  .footer__brand:hover .footer__logo { transform: scale(1.02); }
}

.footer__tagline {
  max-width: 34ch;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: rgba(255, 255, 255, .70);
}

.footer__social { display: flex; gap: 0.625rem; margin-top: 1.375rem; }

.footer__social-link {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
  color: #fff;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease);
}

.footer__social-link svg { width: 100%; height: 100%; }

/* Ring pulses out of each icon — box-shadow is free here, so this never
   collides with the hover transform. */
.footer__social-link { animation: social-ring 3.4s ease-out infinite; }
.footer__social-link:nth-child(2) { animation-delay: .35s; }
.footer__social-link:nth-child(3) { animation-delay: .70s; }
.footer__social-link:nth-child(4) { animation-delay: 1.05s; }

@keyframes social-ring {
  0%        { box-shadow: 0 0 0 0 rgba(19, 132, 71, .28); }
  55%, 100% { box-shadow: 0 0 0 12px rgba(19, 132, 71, 0); }
}

@media (hover: hover) {
  .footer__social-link:hover {
    transform: translateY(-2px);
    border-color: var(--gold-light);
    background: var(--gold-light);
    color: var(--green-deep);
  }
}

/* -- Link columns --------------------------------------------------------- */

/* min-width:0 stops long link text from forcing the grid track wider */
.footer__col { min-width: 0; }

.footer__heading {
  position: relative;
  margin-bottom: 1.125rem;
  padding-bottom: 0.5rem;
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.footer__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 22px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-light), transparent);
  transition: width .45s var(--spring);
}

@media (hover: hover) {
  .footer__col:hover .footer__heading::after { width: 62px; }
}

.footer__links { display: flex; flex-direction: column; gap: 0.125rem; }

.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .70);
  transition: color .2s var(--ease), transform .2s var(--ease);
}

@media (hover: hover) {
  .footer__links a:hover { color: var(--gold-light); transform: translateX(3px); }
}

/* -- Contact column ------------------------------------------------------- */

.footer__contact { display: flex; flex-direction: column; gap: 0.875rem; }

.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, .70);
  transition: color .2s var(--ease);
}

a.footer__contact-item { min-height: 2rem; align-items: center; }

@media (hover: hover) {
  a.footer__contact-item:hover { color: var(--gold-light); }
}

.footer__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  fill: none;
  stroke: var(--gold-light);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

a.footer__contact-item .footer__icon { margin-top: 0; }

/* -- Bottom bar ----------------------------------------------------------- */

.footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); }

.footer__bottom > * {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: max(var(--gutter), var(--safe-l)) max(var(--gutter), var(--safe-r));
}

.footer__disclaimer {
  padding-top: 1.25rem;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: rgba(255, 255, 255, .52);
}

/* Copyright and build credit share the closing row, splitting apart on
   wide screens and stacking on narrow ones. */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.35rem 1.5rem;
  padding-block: 0.875rem calc(1.25rem + var(--safe-b));
}

.footer__copyright,
.footer__credit {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .62);
}

.footer__credit a {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  font-weight: 700;
  color: var(--gold-light);
  transition: color .2s var(--ease);
}

@media (hover: hover) {
  .footer__credit a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}


/* -- Back to top ---------------------------------------------------------- */

.to-top {
  position: fixed;
  right: max(1rem, var(--safe-r));
  bottom: calc(1rem + var(--safe-b));
  z-index: 55;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: 12px;
  border: 1px solid var(--water-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  color: var(--green);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* hidden until it is useful */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.85);
  transition: opacity .4s var(--ease), transform .45s var(--spring),
              visibility .4s var(--ease), background-color .3s var(--ease),
              color .3s var(--ease);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) {
  .to-top:hover {
    background: var(--green);
    color: #fff;
    transform: translateY(-3px);
  }
}

/* Nudges upward to hint at what it does */
.to-top.is-visible svg { animation: to-top-hint 2.6s var(--ease) infinite; }

@keyframes to-top-hint {
  0%, 70%, 100% { transform: translateY(0); }
  80%           { transform: translateY(-3px); }
}


/* ==========================================================================
   19. MODAL
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(1.25rem, var(--safe-t)) max(1.25rem, var(--safe-r))
           max(1.25rem, var(--safe-b)) max(1.25rem, var(--safe-l));
}

.modal.is-open { display: flex; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 24, 14, .65);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Animations, not transitions: the dialog goes display:none -> flex, and a
   transition cannot run on an element that was not previously rendered. */
.modal.is-open .modal__backdrop { animation: modal-fade .35s var(--ease) both; }
.modal.is-open .modal__box      { animation: modal-rise .45s var(--spring) both; }

@keyframes modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modal-rise {
  from { opacity: 0; transform: translateY(22px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.modal__box {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 590px;
  max-height: min(90vh, 90dvh);
  padding: clamp(1.5rem, 4vw, 2.625rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .2);
}

.modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  font-size: 1.75rem;
  line-height: 1;
  color: #65736b;
}

@media (hover: hover) {
  .modal__close:hover { background: var(--surface-alt); }
}

.modal__box h2  { margin-bottom: 0.875rem; padding-right: 2rem; }
.modal__box > p { font-size: var(--fs-base); color: var(--muted); }
.modal__box h3  { margin: 1.75rem 0 0.625rem; font-size: var(--fs-md); }

.modal__box ul {
  padding-left: 1.25rem;
  list-style: disc;
  font-size: var(--fs-base);
  color: var(--text-soft);
}

/* Emphasised label at the head of a document line */
.modal__box li strong {
  font-weight: 800;
  color: var(--text);
}

/* Group titles ("1. Salaried Individuals") sit outside the bullet column
   and get air above, so each block reads as its own set. */
.modal__box li.modal__docs-heading {
  list-style: none;
  margin-left: -1.25rem;
  margin-top: 1.125rem;
  margin-bottom: 0.375rem;
}

.modal__box li.modal__docs-heading:first-child { margin-top: 0; }

/* The per-item delay is written inline when the list is built, so a list of
   any length cascades. Fixed nth-child rules only covered the first five,
   which left every later item animating at once, before the cascade began. */
.modal.is-open .modal__box li { animation: modal-item .4s var(--ease) both; }

@keyframes modal-item {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}

.modal__note { margin-top: 1.25rem; font-size: var(--fs-xs); color: var(--muted-light); }

.modal__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.563rem; }


/* ==========================================================================
   20. UTILITIES & ACCESSIBILITY
   ========================================================================== */

/* Scroll reveal — JS adds .reveal, so with no JS the content simply shows.
   Slow and soft: content drifts up out of a light blur rather than snapping. */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(.985);
  filter: blur(7px);
  transition: opacity 1.15s var(--ease),
              transform 1.15s cubic-bezier(.22, .68, .28, 1),
              filter .95s var(--ease);
}

/* -- Hover sway -------------------------------------------------------------
   `translate` and `rotate` are their own properties, so this composes with
   the inline `transform` the 3D tilt writes rather than overwriting it.
   --------------------------------------------------------------------------- */

@keyframes card-sway {
  0%, 100% { translate: 0 0;     rotate: 0deg;    }
  50%      { translate: 0 -7px;  rotate: 0.45deg; }
}

@keyframes card-sway-soft {
  0%, 100% { translate: 0 0;     rotate: 0deg;    }
  50%      { translate: 0 -5px;  rotate: -0.3deg; }
}

@media (hover: hover) {
  .loan-card:hover   { animation: card-sway 2.6s ease-in-out infinite; }
  .feature:hover     { animation: card-sway-soft 3s ease-in-out infinite; }
  .testimonial:hover { animation: card-sway-soft 3.4s ease-in-out infinite; }
  .lender:hover      { animation: card-sway 2.8s ease-in-out infinite; }

  /* Content drifts a beat behind the card it sits on */
  .loan-card:hover h3,
  .loan-card:hover p { animation: card-sway-soft 2.6s ease-in-out .12s infinite; }
}

/* -- Reveal variants --------------------------------------------------------- */

/* Sideways entrances only where a card is narrow relative to the viewport.
   On smaller screens cards are near full-width, so a horizontal offset pushes
   them past the edge and creates a scrollbar. */
.reveal--left,
.reveal--right { transform: translateY(26px) scale(.94); }

/* The offset has to stay inside the container gutter (22px), or the card
   starts outside the viewport. Only past 1280px, where the 1180px container
   leaves real margin either side, is there room for the full travel. */
@media (min-width: 820px) {
  .reveal--left  { transform: translateX(-20px) translateY(12px); }
  .reveal--right { transform: translateX(20px)  translateY(12px); }
}

@media (min-width: 1280px) {
  .reveal--left  { transform: translateX(-38px) translateY(10px); }
  .reveal--right { transform: translateX(38px)  translateY(10px); }
}
.reveal--scale { transform: scale(.88); }

/* Tips up from its own base, as though standing itself upright */
.reveal--flip {
  transform: perspective(900px) rotateX(-18deg) translateY(34px);
  transform-origin: center bottom;
}

.reveal--tilt  { transform: scale(.92) translateY(24px); }

@media (min-width: 820px) {
  .reveal--tilt { transform: rotate(-3.5deg) scale(.9) translateY(26px); }
}
.reveal--drop  { transform: translateY(-30px) scale(.94); }

.reveal.is-revealed {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 0.5rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  background: var(--green);
  color: #fff;
  font-weight: 700;
}

.skip-link:focus { top: 0.5rem; }

/* -- Reading progress ----------------------------------------------------- */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  height: 3px;
  pointer-events: none;
}

.scroll-progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--blue), var(--blue-bright) 55%, var(--gold-light));
  transition: transform .12s linear;
}


/* ==========================================================================
   21. RESPONSIVE — WIDTH BREAKPOINTS
   --------------------------------------------------------------------------
   Mobile-first base above. `max-width` blocks run LARGEST → SMALLEST so the
   narrower breakpoint always wins; `min-width` blocks then run ascending.
   ========================================================================== */

/* -- ≤ 819px — phones, foldables and small tablets: nav becomes a drawer.
      Above this the seven links plus social icons no longer fit one row,
      so the horizontal bar only starts at 820px. --------------------------- */
@media (max-width: 819px) {
  :root { --header-h: 64px; }

  .menu-toggle { display: grid; }
  .brand__logo { width: clamp(180px, 50vw, 230px); }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 49;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 72dvh;
    margin-left: 0;
    padding: 0.5rem max(var(--gutter), var(--safe-l)) calc(1rem + var(--safe-b));
    overflow-y: auto;
    background: #fff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 30px rgba(15, 64, 38, .10);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s var(--ease);
  }

  .nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }

  .nav__link {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    padding-block: 0.25rem;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-md);
  }

  .nav__link:last-child { border-bottom: 0; }

  .split        { grid-template-columns: 1fr; }
  .split__panel { padding-inline: var(--gutter); }
  .apply-grid,
  .calculator   { grid-template-columns: 1fr; }
  .emi-result   { border-left: 0; border-top: 1px solid var(--water-line); }
  .cta          { justify-content: flex-start; }

  /* Footer: brand spans the row, the two link columns pair up, contact spans */
  .footer__inner        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand        { grid-column: 1 / -1; }
  .footer__col--contact { grid-column: 1 / -1; }
}

/* -- ≤ 599px — all phones ------------------------------------------------- */
@media (max-width: 599px) {
  .form-grid           { grid-template-columns: 1fr; }
  .form-grid .full     { grid-column: auto; }
  .lender-grid         { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .lender img          { max-width: 104px; height: 40px; }
  .section-head        { display: block; }
  .section-head > p    { margin-top: 0.75rem; }
  .modal__actions .btn { flex: 1 1 100%; }
  .footer__inner       { grid-template-columns: 1fr; }
  .footer__tagline     { max-width: none; }
  .trust__inner        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -- ≤ 359px — flip covers, Fold outer screen, compact Androids ----------- */
@media (max-width: 359px) {
  :root { --gutter: 0.875rem; }

  .header__inner { gap: 0.5rem; }
  .brand__logo   { width: clamp(150px, 54vw, 175px); }

  .slider            { height: clamp(400px, 78vh, 520px); }
  .hero-actions      { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }

  .loan-grid,
  .feature-grid,
  .lender-grid,
  .testimonial-grid  { grid-template-columns: 1fr; }

  .about-points      { grid-template-columns: 1fr 1fr; }
  .director-grid     { grid-template-columns: 1fr; }
  .cta__actions .btn { flex: 1 1 100%; }
  .trust__inner      { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .footer__social    { flex-wrap: wrap; }
}

/* -- ≥ 820px — tablets portrait and up: nav is always visible ------------- */
@media (min-width: 820px) {
  .nav { visibility: visible; opacity: 1; }
}

/* -- 820px–1023px — tablets portrait, Fold unfolded landscape ------------- */
@media (min-width: 820px) and (max-width: 1023px) {
  .nav           { gap: 0.75rem; }
  .nav__link     { font-size: var(--fs-xs); }
  .brand__logo   { width: clamp(185px, 24vw, 215px); }
  .loan-grid     { grid-template-columns: repeat(3, 1fr); }
  .lender-grid   { grid-template-columns: repeat(4, 1fr); }
  .split__panel  { padding-inline: var(--gutter); }
  .footer__inner { grid-template-columns: 1.5fr 1fr 1.3fr; gap: 2rem; }
  .footer__brand { grid-column: 1 / -1; }
}

/* -- 1024px–1279px — tablet landscape, small laptops --------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .loan-grid   { grid-template-columns: repeat(3, 1fr); }
  .lender-grid { grid-template-columns: repeat(5, 1fr); }
}

/* -- ≥ 1280px — desktop --------------------------------------------------- */
@media (min-width: 1280px) {
  :root { --header-h: 92px; }

  .loan-grid    { grid-template-columns: repeat(6, 1fr); }
  .loan-card    { padding-inline: 1rem; }
  .loan-card h3 { font-size: 1.0625rem; }
  .lender-grid  { grid-template-columns: repeat(6, 1fr); }
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

/* -- ≥ 1600px — large desktop & 4K --------------------------------------- */
@media (min-width: 1600px) {
  :root { --wrap: 1320px; --hero-h: 700px; }
}


/* ==========================================================================
   22. RESPONSIVE — DEVICE CAPABILITY & POSTURE
   ========================================================================== */

/* -- Short landscape: phones & flip phones turned sideways ---------------- */
@media (orientation: landscape) and (max-height: 560px) {
  :root { --header-h: 56px; --section-y: 2.5rem; }

  .slider          { height: clamp(320px, 100dvh - 56px, 480px); }
  .slide__inner    { padding-block: 1rem; }
  .slide__inner h1 { font-size: clamp(1.375rem, 4.2vw, 2.125rem); margin-bottom: 0.5rem; }
  .slide__inner p:not(.eyebrow) { margin-bottom: 0.875rem; font-size: var(--fs-base); }
  .brand__logo     { width: clamp(170px, 22vw, 205px); }
  .modal__box      { max-height: min(94vh, 94dvh); }

  /* Vertical room is scarce here, so the column tightens up */
  .social-rail       { gap: 0.2rem; padding: 0.3rem; }
  .social-rail__link { width: 34px; height: 34px; padding: 8px; }
}

/* -- Very short landscape: Flip opened sideways --------------------------- */
@media (orientation: landscape) and (max-height: 430px) {
  .slider       { height: calc(100dvh - var(--header-h)); min-height: 260px; }
  .slide__inner p:not(.eyebrow) { display: none; }
  .slider__dots { bottom: 0.5rem; }
}

/* -- Foldables opened flat: two side-by-side segments with a hinge --------
      Content is kept out of the seam, one panel per segment. -------------- */
@media (horizontal-viewport-segments: 2) {
  .split,
  .apply-grid,
  .calculator {
    grid-template-columns:
      calc(env(viewport-segment-right 0 0) - env(viewport-segment-left 0 0))
      1fr;
    column-gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
  }

  .slide__inner {
    max-width: calc(env(viewport-segment-right 0 0) - env(viewport-segment-left 0 0));
    margin-inline: 0;
  }

  .footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -- Foldables in flex/laptop posture: stacked segments ------------------- */
@media (vertical-viewport-segments: 2) {
  .slider { height: calc(env(viewport-segment-bottom 0 0) - env(viewport-segment-top 0 0)); }

  .split,
  .apply-grid,
  .calculator { grid-template-columns: 1fr; }
}

/* -- Touch devices with a horizontal nav: trade gap for padding so short
      labels ("Home", "About") reach a full 44px target without widening
      the bar. -------------------------------------------------------------- */
@media (hover: none) and (min-width: 820px) {
  .nav       { gap: 0.25rem; }
  .nav__link { padding-inline: 0.375rem; }
}


/* -- Touch devices: no hover lift, larger targets ------------------------- */
@media (hover: none) {
  /* :hover can stick after a tap on touch, so send these back to the idle
     loops rather than to a stopped state. */
  .loan-card:hover,
  .feature:hover,
  .testimonial:hover,
  .lender:hover { animation: none; translate: none; rotate: none; }

  .loan-card:hover h3,
  .loan-card:hover p { animation: none; translate: none; rotate: none; }

  .loan-card:hover { transform: none; box-shadow: none; }
  .loan-card:hover::before { transform: scaleX(0); }
  .loan-card:hover .loan-card__icon {
    transform: none;
    box-shadow: 0 7px 18px rgba(122, 96, 34, .22);
    animation-duration: 6.5s;
  }
  .loan-card:hover .loan-card__icon svg {
    animation: icon-bob 3.6s var(--ease) infinite;
    animation-delay: var(--stagger, 0s);
  }
  .loan-card:hover .loan-card__icon svg > * {
    animation: icon-idle-draw 9s var(--ease) infinite;
    animation-delay: var(--stagger, 0s);
  }
  .loan-card:hover .loan-card__icon::before {
    animation: icon-orbit 7s linear infinite;
    animation-delay: var(--stagger, 0s);
  }
  .loan-card:hover .loan-card__icon::after {
    animation: icon-halo 4.5s var(--ease) infinite;
    animation-delay: var(--stagger, 0s);
  }
  .loan-card:hover .loan-card__arrow::after { transform: none; }

  .feature:hover .feature__icon {
    animation: feature-pulse 4.2s var(--ease) infinite;
  }

  .lender:hover img {
    animation: lender-drift 5.4s var(--ease) infinite;
  }

  .nav__link,
  .footer__links a,
  .footer__credit a { min-height: var(--tap); }

  /* `a.footer__contact-item` in §18 outranks a bare class selector here, so
     this override has to match its specificity. */
  a.footer__contact-item { min-height: var(--tap); }

  /* Stacked links hug their text; widen them to a full target. */
  .footer__links a { min-width: var(--tap); }

  .brand { min-height: var(--tap); }
}


/* -- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .social-rail__link { animation: none; opacity: 1; }
  .reveal { opacity: 1; transform: none; }

  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .reveal--flip,
  .reveal--tilt,
  .reveal--drop { transform: none; }

  .loan-card:hover,
  .feature:hover,
  .testimonial:hover,
  .lender:hover { animation: none; translate: none; rotate: none; }

  .ambient::before,
  .ambient::after { translate: none; }

  /* Nothing slides; the row becomes hand-scrollable so it stays readable */
  .ticker { overflow-x: auto; }
  .ticker-inner { animation: none; transform: none; }
}

/* -- Increased contrast --------------------------------------------------- */
@media (prefers-contrast: more) {
  :root { --muted: #4a5651; --muted-light: #4a5651; --border: #b6c4bc; --ink-soft: #3f5761; }
  .slide::before { background: rgba(8, 22, 40, .94); }
}

/* -- Print ---------------------------------------------------------------- */
@media print {
  .header,
  .slider__dots,
  .scroll-progress,
  .to-top,
  .social-rail,
  .footer__social,
  .menu-toggle,
  .modal,
  .cta__actions,
  .hero-actions,
  .skip-link { display: none !important; }

  body { color: #000; background: #fff; }

  .slider { height: auto; }

  .slide {
    position: static;
    visibility: visible;
    opacity: 1;
    background: none;
    color: #000;
  }

  .slide:not(:first-child) { display: none; }
  .slide::before           { display: none; }
  .slide__inner,
  .slide__inner h1,
  .slide__inner p          { color: #000; }

  .section       { padding-block: 1.5rem; break-inside: avoid; }
  .footer__inner { grid-template-columns: 1fr 1fr; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}