/* ============================================================
   ELITE CREDITS — styles.css
   Mobile-first. Base = 375px. Scales up at 768 / 1024 / 1440.
   Visual reference: sc.com/my (Standard Chartered Malaysia)
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* Brand — see claude.md "Colour law" before using --ec-green */
  --ec-blue:        #0473EA;
  --ec-blue-deep:   #0356B0;
  --ec-blue-soft:   #EAF3FE;
  --ec-navy:        #0A2540;
  --ec-navy-deep:   #06182A;
  --ec-green:       #38D200;   /* SIGNAL ONLY — never text on white */
  --ec-green-ink:   #0B7A2E;   /* accessible green when text is required */
  --ec-green-soft:  #ECFAE3;

  --ec-bg:          #FFFFFF;
  --ec-bg-alt:      #F5F8FC;
  --ec-text:        #0A2540;
  --ec-muted:       #55697F;
  --ec-border:      #DDE5EE;
  --ec-white:       #FFFFFF;

  /* Single-family system. Headings are the same face as body, separated by
     weight and tracking rather than a second typeface — the way retail banks
     actually set type. Syne was tried and rejected: its numerals are wide and
     short, which reads badly at the large figures this site is full of. */
  --font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;

  --radius-card: 4px;      /* near-square — SC's card language */
  --radius-btn:  999px;    /* pill CTAs — SC's button language */

  --shadow-sm:   0 1px 3px rgba(10, 37, 64, .06);
  --shadow-md:   0 6px 24px rgba(10, 37, 64, .08);
  --shadow-lg:   0 18px 50px rgba(10, 37, 64, .14);

  --nav-h:     64px;
  --utility-h: 40px;

  --pad: 1.25rem;          /* horizontal page padding at 375px */
  --maxw: 1240px;
}

/* ============================================================
   2. RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  overflow-x: hidden;      /* non-negotiable: no horizontal scroll */
  max-width: 100%;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ec-text);
  background: var(--ec-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;    /* PJS bold needs tightening at display sizes */
  margin: 0;
  color: var(--ec-navy);
  overflow-wrap: break-word;   /* last-resort guard against 375px overflow */
}

/* Large figures: tabular so digits don't jitter while counters animate,
   and tighter still because PJS numerals are generously spaced by default. */
.stat__num,
.calc__result-amount,
.calc__amount input,
.pcard__amount {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
}

p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, video, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--ec-blue); text-decoration: none; }
a:hover { color: var(--ec-blue-deep); }

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

/* Visible focus for keyboard users only */
:focus-visible {
  outline: 3px solid var(--ec-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

.sr-only, .hp {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ec-navy); color: #fff;
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-card) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ============================================================
   3. SHARED PRIMITIVES
   ============================================================ */
.ic       { width: 24px; height: 24px; flex: none; }
.ic--sm   { width: 18px; height: 18px; }
.ic--xs   { width: 14px; height: 14px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body);
  font-size: .75rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ec-blue);
  margin-bottom: .875rem;
}
.eyebrow::before {
  content: ''; width: 22px; height: 2px;
  background: var(--ec-green);           /* green as signal, not text */
  flex: none;
}
.eyebrow--light { color: #9EC9FA; }

.section-title {
  font-size: clamp(1.875rem, 7vw, 3.5rem);   /* 30px min — safe at 375px */
  font-weight: 800;                          /* PJS 700 reads soft at this scale */
  margin-bottom: .875rem;
}
.section-title em {
  font-style: normal;
  color: var(--ec-blue);
}
.section-title--light { color: #fff; }
.section-title--light em { color: var(--ec-green); }  /* on navy — contrast is fine */

.section-lead {
  color: var(--ec-muted);
  font-size: 1rem;
  max-width: 60ch;
}
.section-lead--light { color: #B7C9DC; }

.section-head { margin-bottom: 2rem; }
/* margin-inline:auto matters once .section-head gains a max-width at desktop:
   without it the block pins left and its centred text sits off the page axis. */
.section-head--center { text-align: center; margin-inline: auto; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .section-lead { margin-inline: auto; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  min-height: 48px;                       /* ≥44px touch target */
  padding: .75rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: .9375rem; font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn .ic { transition: transform .2s ease; }
.btn:hover .ic { transform: translateX(3px); }

.btn--primary { background: var(--ec-blue); color: #fff; }
.btn--primary:hover { background: var(--ec-blue-deep); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--ec-navy);
  border-color: var(--ec-border);
}
.btn--ghost:hover { border-color: var(--ec-navy); color: var(--ec-navy); background: #fff; }

.btn--whatsapp { background: #25D366; color: #06301A; }
.btn--whatsapp:hover { background: #1EB855; color: #06301A; }
.btn--whatsapp:hover .ic { transform: none; }

.btn--sm  { min-height: 42px; padding: .5rem 1.125rem; font-size: .875rem; }
.btn--full { width: 100%; }

/* --- Arrow link (SC's "Find out more →") --- */
.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .9375rem; font-weight: 700;
  color: var(--ec-blue);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--ec-green), var(--ec-green));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size .3s ease;
}
.link-arrow .ic { transition: transform .25s ease; }
a.link-arrow:hover, .pcard:hover .link-arrow {
  background-size: 100% 2px;
}
a.link-arrow:hover .ic, .pcard:hover .link-arrow .ic {
  transform: translateX(4px);
}

/* --- Scroll progress --- */
.scroll-progress {
  position: fixed; inset: 0 auto auto 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--ec-blue), var(--ec-green));
  z-index: 200;
}

/* ============================================================
   4. UTILITY BAR (sc.com top strip)
   ============================================================ */
.utility {
  background: var(--ec-navy);
  color: #C6D6E6;
  font-size: .8125rem;
}
.utility__inner {
  width: 100%;
  padding: 0 var(--pad);
  min-height: var(--utility-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}

.segmented { display: flex; }
.segmented__btn {
  background: none; border: 0;
  padding: .625rem .875rem;
  min-height: 40px;
  color: #8FA8C0;
  font-size: .8125rem; font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.segmented__btn:hover { color: #fff; }
.segmented__btn.is-active { color: #fff; border-bottom-color: var(--ec-green); }

.utility__right { display: flex; align-items: center; gap: 1.25rem; }
.utility__link {
  display: none;                          /* contact details are in the nav CTA on mobile */
  align-items: center; gap: .4375rem;
  color: #C6D6E6;
}
.utility__link:hover { color: #fff; }

/* Lives in the navbar, not the utility strip. */
.lang-toggle { display: flex; align-items: center; gap: .125rem; }
.lang-toggle__btn {
  background: none; border: 0;
  padding: .375rem .25rem;
  min-height: 44px; min-width: 32px;
  color: var(--ec-muted);
  font-size: .8125rem; font-weight: 700;
  cursor: pointer;
  transition: color .2s ease;
}
.lang-toggle__btn:hover { color: var(--ec-navy); }
.lang-toggle__btn.is-active { color: var(--ec-blue); }
.lang-toggle__sep { color: var(--ec-border); font-size: .8125rem; }

/* ============================================================
   5. NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ec-border);
  transition: box-shadow .25s ease;
}
.nav.is-scrolled { box-shadow: var(--shadow-md); }

/* Full-bleed: the nav deliberately ignores the 1240px container so the logo and
   actions sit near the viewport edges instead of floating in a narrow band. */
.nav__inner {
  width: 100%;
  padding: 0 var(--pad);
  min-height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}

.brand { display: inline-flex; align-items: center; }
/* Aspect ratio is fixed by width/height attrs on the <img>; height drives size. */
.brand__logo { height: 30px; width: auto; display: block; }

/* Anchored to the nav itself, not the viewport — the utility bar scrolls
   away, so a fixed offset would leave a 40px gap once the page moves. */
.nav__links {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: #fff;
  border-bottom: 1px solid var(--ec-border);
  box-shadow: var(--shadow-lg);
  flex-direction: column;
  display: none;
  padding: .5rem var(--pad) 1.25rem;
}
.nav__links.open { display: flex; }
.nav__links a {
  padding: .875rem 0;
  min-height: 44px;
  display: flex; align-items: center;
  color: var(--ec-navy);
  font-size: 1rem; font-weight: 600;
  border-bottom: 1px solid var(--ec-border);
}
.nav__links a:last-child { border-bottom: 0; }
.nav__links a:hover { color: var(--ec-blue); }

.nav__actions { display: flex; align-items: center; gap: .5rem; }
.nav__actions .btn--sm { padding: .5rem 1rem; }

/* Mobile: the language switcher lives in the burger menu, not the bar. */
.nav__actions .lang-toggle { display: none; }

.nav__menu-lang {
  display: flex; align-items: center; justify-content: space-between;
  padding: .625rem 0 .25rem;
}
.nav__menu-lang-label {
  font-size: .75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ec-muted);
}

.nav__burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--ec-border);
  border-radius: var(--radius-card);
  color: var(--ec-navy);
  cursor: pointer;
}

/* ============================================================
   6. HERO — rotating message (left) + persistent form (right)
   ============================================================ */
.hero { position: relative; background: var(--ec-navy); overflow: hidden; }

/* Rotating background photos, crossfading behind the navy tint. */
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero__bg-img.is-active { opacity: 1; }

/* Navy wash: darker on the left where the white copy sits, lighter on the right
   and lower so the KL photo reads clearly behind the form and the tile card
   rather than flattening into empty navy. */
.hero__tint {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(105deg, rgba(6,24,42,.90) 0%, rgba(6,24,42,.74) 52%, rgba(6,24,42,.58) 100%);
}

.hero__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 1.75rem;
  padding-top: 2.25rem; padding-bottom: 0;   /* gap to the tile card is on .hero__quick */
}

/* --- Left: rotating copy --- */
.hero__copy { color: #fff; }

/* Text slides share one grid cell so the block is as tall as the tallest
   message and nothing below it jumps as they rotate. Hidden with visibility so
   they leave the a11y tree and tab order but still hold that height. */
.hero__slides { display: grid; }
.hero__text {
  grid-area: 1 / 1;
  visibility: hidden; opacity: 0;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.hero__text.is-active {
  visibility: visible; opacity: 1;
  transition: opacity .5s ease, visibility 0s;
}

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #9EC9FA;
  margin-bottom: .875rem;
}
.hero__eyebrow-chev { color: var(--ec-green); }

.hero__title {
  color: #fff;
  font-size: clamp(1.75rem, 7.5vw, 3.5rem);  /* 28px min — fits 375px with room */
  font-weight: 800;
  margin-bottom: .875rem;
}
.hero__title em { font-style: normal; color: var(--ec-green); }

.hero__lead {
  color: #B7C9DC;
  font-size: .9375rem;
  max-width: 44ch;
}

.hero__dots { display: flex; gap: .5rem; margin-top: 1.25rem; }
.hero__dot {
  position: relative;
  width: 28px; height: 4px;
  padding: 0; border: 0;
  background: rgba(255,255,255,.3);
  cursor: pointer;
  transition: background .25s ease;
}
.hero__dot::before { content: ''; position: absolute; inset: -20px 0; }  /* ≥44px touch */
.hero__dot.is-active { background: var(--ec-green); }

.hero__trust { display: grid; gap: .5rem; margin-top: 1.5rem; }
.hero__trust li {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8125rem; font-weight: 600;
  color: #CDE0F2;
}
.hero__trust-chev { width: 12px; height: 12px; flex: none; color: var(--ec-green); }

/* --- Right: application form card --- */
.hero-form {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  padding: 1.25rem;
}
.hero-form__head { margin-bottom: 1.125rem; }
.hero-form__head h2 { font-size: 1.375rem; margin-bottom: .25rem; }
.hero-form__head p  { font-size: .8125rem; line-height: 1.5; color: var(--ec-muted); }

/* ============================================================
   7. QUICK ACCESS — overlaps the hero (the intentional grid-break)
   ============================================================ */
/* The strip carries the hero's navy rather than sitting on white. The card is
   what overlaps (negative margin on the CARD, not the section), so it still
   straddles the hero edge, but the surrounding area stays navy and runs
   straight into the blue band. Overlapping the section itself left a band of
   white either side of the card, which read as an unfinished gap. */
/* The tile card lives inside the hero, over the background image. No navy
   background of its own — the hero photo shows through the gaps. margin-top is
   the gap from the form; padding-bottom is the gap down to the chevron band. */
.hero__quick {
  position: relative; z-index: 2;
  margin-top: 1.5rem;
  padding-bottom: 2.5rem;
}

.quick__card {
  background: #fff;
  border: 1px solid var(--ec-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  overflow: hidden;
}

.quick__tile {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: .625rem;
  padding: 1.25rem .625rem;
  min-height: 108px;
  text-align: center;
  color: var(--ec-navy);
  border-right: 1px solid var(--ec-border);
  border-bottom: 1px solid var(--ec-border);
  transition: background .2s ease;
}
.quick__tile:nth-child(2n) { border-right: 0; }
.quick__tile:nth-last-child(-n+2) { border-bottom: 0; }
.quick__tile:hover { background: var(--ec-blue-soft); color: var(--ec-navy); }

.quick__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ec-blue-soft);
  color: var(--ec-blue);
  transition: background .2s ease, color .2s ease;
}
.quick__tile:hover .quick__icon { background: var(--ec-blue); color: #fff; }

.quick__label { font-size: .8125rem; font-weight: 600; line-height: 1.3; }

/* ============================================================
   8. CHEVRON TRUST BAND (signature motion)
   ============================================================ */
.band {
  margin-top: 0;   /* runs straight off the navy quick strip, no white seam */
  background: var(--ec-blue);
  color: #fff;
  overflow: hidden;
  padding: .875rem 0;
}
.band__track {
  display: flex; width: max-content;
  animation: band-scroll var(--band-duration, 30s) linear infinite;
}
.band__group {
  display: flex; align-items: center; gap: 1.25rem;
  padding-right: 1.25rem;
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.band__chev { width: 10px; height: 10px; color: var(--ec-green); flex: none; }

@keyframes band-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--band-group-width, 1000px))); }
}

/* ============================================================
   9. PRODUCTS
   ============================================================ */
/* Navy slot (position 2). The white product cards pop against it. */
.products {
  padding: 3.5rem 0;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(4, 115, 234, .35), transparent 60%),
    var(--ec-navy);
}

/* Two-up from 375px. Each card is ~160px wide there, so the internals are
   scaled down to match rather than inheriting desktop sizing. */
.products__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }

.pcard {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--ec-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.pcard:hover {
  border-color: var(--ec-blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* Filtered out by the Personal/Business segmented control — [hidden] must
   beat .pcard's display:flex, so it needs an explicit rule. */
.pcard[hidden] { display: none; }

.pcard__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.pcard:hover .pcard__media img { transform: scale(1.04); }

.pcard__flag {
  position: absolute; top: .5rem; left: .5rem;
  background: var(--ec-green);
  color: #06301A;
  font-size: .5625rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .25rem .4375rem;
  border-radius: 2px;
}

.pcard__body {
  display: flex; flex-direction: column;
  gap: .4375rem;
  padding: .75rem;
  flex: 1;
}

.pcard__cat {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .625rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ec-muted);
}
.pcard__cat .ic { color: var(--ec-blue); width: 14px; height: 14px; }

.pcard__body h3 { font-size: 1rem; line-height: 1.25; }
.pcard__body > p { color: var(--ec-muted); font-size: .8125rem; line-height: 1.5; flex: 1; }

.pcard__meta {
  display: flex; flex-direction: column; gap: .125rem;
  padding-top: .5rem;
  border-top: 1px solid var(--ec-border);
}
.pcard__amount { font-family: var(--font-heading); font-weight: 700; font-size: .8125rem; color: var(--ec-navy); }
.pcard__rate   { font-size: .6875rem; font-weight: 600; color: var(--ec-green-ink); }
.pcard .link-arrow { font-size: .8125rem; }

/* ============================================================
   10. JADUAL ANSURAN
   ============================================================ */
/* White slot (position 1) — dark text, calculator card gets a border so it
   doesn't float invisibly on the white ground. */
.jadual { padding: 3.5rem 0; background: var(--ec-bg); }
.jadual__grid { display: grid; gap: 2rem; }

/* Numbered how-to steps (Infinity Capital's jadual format). */
.jadual__steps { display: grid; gap: 1rem; margin-top: 1.75rem; }
.jadual__steps li { display: flex; align-items: center; gap: .875rem; color: var(--ec-text); font-size: .9375rem; }
.jadual__step-num {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--ec-border);
  font-size: .75rem; font-weight: 800;
  color: var(--ec-green-ink);   /* colour law: bright green is not text-on-white */
}

/* --- Calculator card --- */
.calc {
  background: #fff;
  border: 1px solid var(--ec-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem;
}
.calc__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.calc__label {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.25rem; font-weight: 700;
  color: var(--ec-navy);
}
.calc__sub { font-size: .8125rem; color: var(--ec-muted); }
.calc__badge {
  display: inline-flex; align-items: center; gap: .3125rem;
  flex: none;
  background: var(--ec-green-soft);
  color: var(--ec-green-ink);
  font-size: .6875rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .375rem .625rem;
  border-radius: var(--radius-btn);
}

.calc__field { margin-bottom: 1.25rem; }
.calc__field label,
.calc__field-label {
  display: block;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ec-muted);
  margin-bottom: .5rem;
}

.calc__amount {
  display: flex; align-items: center; gap: .5rem;
  border-bottom: 2px solid var(--ec-border);   /* bottom-border-only inputs */
  padding-bottom: .375rem;
  transition: border-color .2s ease;
}
.calc__amount:focus-within { border-color: var(--ec-blue); }
.calc__currency { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; color: var(--ec-muted); }
.calc__amount input {
  flex: 1; width: 100%;
  border: 0; background: none; padding: 0;
  font-family: var(--font-heading);
  font-size: 1.75rem; font-weight: 800;
  color: var(--ec-navy);
  min-width: 0;
}
.calc__amount input:focus { outline: none; }

.calc__range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  margin-top: 1rem;
  background: var(--ec-border);
  border-radius: 2px;
  cursor: pointer;
}
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ec-blue);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(4,115,234,.5);
  cursor: pointer;
}
.calc__range::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ec-blue);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(4,115,234,.5);
  cursor: pointer;
}
.calc__range-legend {
  display: flex; justify-content: space-between;
  margin-top: .375rem;
  font-size: .6875rem; color: var(--ec-muted);
}


.calc__result {
  background: var(--ec-blue-soft);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.calc__result-label {
  font-size: .75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ec-blue-deep);
}
.calc__result-amount {
  display: flex; align-items: baseline; gap: .375rem;
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--ec-navy);
  margin: .25rem 0 1rem;
}
.calc__result-prefix { font-size: 1.125rem; }
.calc__result-amount #calcMonthly {
  font-size: clamp(2.25rem, 11vw, 3.25rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.calc__result-meta {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(4,115,234,.2);
  font-size: .875rem;
  color: var(--ec-muted);
}
.calc__result-meta strong { color: var(--ec-navy); font-variant-numeric: tabular-nums; }

/* Tenure chips (Infinity Capital's format). */
.calc__chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: .375rem; }
.calc__chip {
  min-height: 44px;
  border: 1.5px solid var(--ec-border);
  border-radius: var(--radius-card);
  background: #fff;
  font-size: .875rem; font-weight: 700;
  color: var(--ec-muted);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.calc__chip:hover { border-color: var(--ec-blue); color: var(--ec-blue); }
.calc__chip.is-active {
  background: var(--ec-blue);
  border-color: var(--ec-blue);
  color: #fff;
}

.calc__disclaimer { margin-top: .875rem; font-size: .75rem; color: var(--ec-muted); line-height: 1.5; }

/* ============================================================
   11. FEATURE BAND — Why Elite
   ============================================================ */
.feature { padding: 3.5rem 0; background: var(--ec-bg-alt); }
.feature__grid { display: grid; gap: 2rem; }

.feature__media { position: relative; border-radius: var(--radius-card); overflow: hidden; }
/* Shallower crop on mobile: a 4:3 image here cost roughly a third of a screen. */
.feature__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.feature__stamp {
  position: absolute; left: 1rem; bottom: 1rem;
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff;
  border-radius: var(--radius-btn);
  padding: .625rem 1rem;
  box-shadow: var(--shadow-md);
  font-size: .8125rem; font-weight: 700;
  color: var(--ec-navy);
}
.feature__stamp .ic { color: var(--ec-green-ink); }

/* Mobile: six stacked icon+heading+paragraph rows ran nearly a full screen on
   their own. Two-up tiles with the icon above the text roughly halve that
   without dropping any of the six points. */
.benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  margin-top: 1.5rem;
}
.benefits li {
  display: block;
  background: #fff;
  border: 1px solid var(--ec-border);
  border-radius: var(--radius-card);
  padding: .875rem .75rem;
}
.benefits__icon {
  display: grid; place-items: center;
  width: 32px; height: 32px; flex: none;
  margin-bottom: .5rem;
  border-radius: 50%;
  background: var(--ec-blue-soft);
  color: var(--ec-blue);
}
.benefits h3 { font-size: .875rem; line-height: 1.3; margin-bottom: .1875rem; }
.benefits p  { font-size: .75rem; line-height: 1.45; color: var(--ec-muted); }

/* ============================================================
   12. PROCESS
   ============================================================ */
.process { padding: 3.5rem 0; }
.steps { display: grid; gap: 1.25rem; counter-reset: step; }

.step {
  position: relative;
  background: #fff;
  border: 1px solid var(--ec-border);
  border-top: 3px solid var(--ec-blue);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.25rem 1.25rem;
}
.step__num {
  font-family: var(--font-heading);
  font-size: .875rem; font-weight: 800;
  letter-spacing: .1em;
  color: var(--ec-green-ink);
}
.step__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  margin: .625rem 0 .875rem;
  border-radius: 50%;
  background: var(--ec-blue-soft);
  color: var(--ec-blue);
}
.step h3 { font-size: 1.125rem; margin-bottom: .375rem; }
.step p  { font-size: .875rem; color: var(--ec-muted); }

/* ============================================================
   13. STATS
   ============================================================ */
.stats {
  background: linear-gradient(135deg, var(--ec-blue) 0%, var(--ec-blue-deep) 60%, var(--ec-navy) 100%);
  padding: 2.5rem 0;
  color: #fff;
}
.stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
.stat { text-align: center; }
.stat__num {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.875rem, 8vw, 3rem);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;   /* keeps "RM 5M" on one line */
}
.stat__label {
  display: block;
  margin-top: .4375rem;
  font-size: .75rem; font-weight: 600;
  color: #C4DDFB;
  line-height: 1.35;
}

/* ============================================================
   14b. FAQ
   Native <details>, so it works with JS disabled and is keyboard
   accessible for free.
   ============================================================ */
.faq { padding: 3.5rem 0; background: var(--ec-bg-alt); }

.faq__grid { display: grid; gap: 1.5rem; }

/* --- Left column: heading + a contact card for anything not covered --- */
.faq__help {
  margin-top: 1.75rem;
  background: var(--ec-navy);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  color: #fff;
}
.faq__help-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  margin-bottom: .875rem;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: var(--ec-green);
}
.faq__help h3 { color: #fff; font-size: 1.125rem; margin-bottom: .375rem; }
.faq__help p {
  color: #B7C9DC;
  font-size: .875rem;
  margin-bottom: 1.25rem;
}

/* --- Right column: accordion as discrete cards --- */
.faq__list { display: grid; gap: .625rem; align-content: start; }

.faq__item {
  background: #fff;
  border: 1px solid var(--ec-border);
  border-radius: var(--radius-card);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq__item:hover { border-color: #BBCFE6; }
.faq__item[open] {
  border-color: var(--ec-blue);
  box-shadow: var(--shadow-md);
}

.faq__item summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.125rem;
  min-height: 56px;                    /* comfortably above the 44px target */
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-size: .9375rem; font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ec-navy);
  transition: color .2s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--ec-blue); }
.faq__item[open] summary { color: var(--ec-blue); }

.faq__chev {
  width: 26px; height: 26px; flex: none;
  padding: 7px;
  border-radius: 50%;
  background: var(--ec-blue-soft);
  color: var(--ec-blue);
  transform: rotate(90deg);            /* points down when closed */
  transition: transform .25s ease, background .2s ease, color .2s ease;
}
.faq__item[open] .faq__chev {
  transform: rotate(-90deg);
  background: var(--ec-blue);
  color: #fff;
}

.faq__answer { padding: 0 1.125rem 1.125rem; }
.faq__answer p {
  padding-top: .875rem;
  border-top: 1px solid var(--ec-border);
  color: var(--ec-muted);
  font-size: .875rem;
  line-height: 1.65;
}

/* ============================================================
   15. CONTACT  (the form now lives in the hero; this is contact-only)
   ============================================================ */
.contact-section { padding: 3.5rem 0; background: var(--ec-navy); }
.contact-grid { display: grid; gap: 2rem; }

/* Vertical rhythm: lead, buttons and the contact list each get clear air.
   Without the explicit margins they stack at line-height distance and read
   cramped, especially on the dark background. */
.contact-intro .section-lead { margin-bottom: 2rem; }

.contact-intro__actions {
  display: flex; flex-wrap: wrap; gap: 1rem;
  margin-bottom: 2.5rem;
}
.btn--ghost-light { color: #fff; border-color: rgba(255,255,255,.35); }
.btn--ghost-light:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

/* --- Shared form-field styles (used by the hero form) --- */
/* Paired from 375px. Halves the form's height; the inputs stay at 16px so iOS
   still will not auto-zoom, and the labels wrap rather than shrink. */
.field-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  margin-bottom: .75rem;
}
.field-row--single { grid-template-columns: 1fr; }

.field label {
  display: block;
  font-size: .625rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.3;
  color: var(--ec-muted);
  margin-bottom: .25rem;
  min-height: 1.7em;                     /* keeps paired inputs on one baseline
                                            when one label wraps to two lines */
}
.field input, .field select {
  width: 100%;
  min-height: 44px;
  padding: .5rem 0;
  font-size: 1rem;                       /* ≥16px: prevents iOS auto-zoom */
  color: var(--ec-navy);
  background: none;
  border: 0;
  border-bottom: 2px solid var(--ec-border);   /* bottom-border-only, editorial */
  border-radius: 0;
  transition: border-color .2s ease;
}
.field select { padding-inline: 0; }
.field input:focus, .field select:focus {
  outline: none;
  border-bottom-color: var(--ec-blue);
}
.field input:invalid:not(:placeholder-shown) { border-bottom-color: #D64545; }

.form__note   { margin-top: .875rem; font-size: .75rem; color: var(--ec-muted); line-height: 1.5; }
.form__status { margin-top: .75rem; font-size: .875rem; font-weight: 600; min-height: 1.25rem; }
.form__status.is-success { color: var(--ec-green-ink); }
.form__status.is-error   { color: #D64545; }

.contact-intro { color: #fff; }

.contact-list { display: grid; gap: 1.125rem; }
.contact-list li { display: flex; gap: .875rem; align-items: flex-start; }
.contact-list .ic { color: var(--ec-green); margin-top: .1875rem; }
.contact-list__k {
  display: block;
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #8FA8C0;
  margin-bottom: .125rem;
}
.contact-list a, .contact-list span:not(.contact-list__k) { color: #E4EDF6; font-size: .9375rem; }
.contact-list a:hover { color: var(--ec-green); }

.contact-map {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  line-height: 0;
}
.contact-map iframe { width: 100%; height: 240px; display: block; }

/* ============================================================
   16. WHATSAPP FAB
   ============================================================ */
.wa-fab {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(37,211,102,.45);
}
.wa-fab:hover { color: #fff; }
.wa-fab__pulse {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: wa-pulse 2.4s ease-out infinite;
  z-index: -1;
}
@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ============================================================
   17. FOOTER
   ============================================================ */
.footer { background: var(--ec-navy-deep); color: #93A9C0; padding: 2.5rem 0 0; font-size: .875rem; }
.footer__grid { display: grid; gap: 1.5rem; }

/* The logo is coloured ink (blue + navy tagline) on transparency, unreadable on
   the dark footer, so it sits on a white chip. */
.footer .brand--footer {
  display: inline-flex;
  background: #fff;
  padding: .625rem .875rem;
  border-radius: var(--radius-card);
  margin-bottom: 1rem;
}
.footer .brand--footer .brand__logo { height: 34px; }
.footer__brand > p { max-width: 34ch; }

.footer__social { display: flex; gap: .5rem; margin-top: 1.25rem; }
.footer__social a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  color: #93A9C0;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.footer__social a:hover { background: var(--ec-blue); border-color: var(--ec-blue); color: #fff; }

.footer__col h3 {
  color: #fff;
  font-size: .8125rem;
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.footer__col ul { display: grid; gap: .0625rem; }
.footer__col a {
  display: flex; align-items: center;
  padding: .5rem 0;
  min-height: 44px;              /* nav links must hold the 44px touch target */
  font-size: .8125rem;
  color: #93A9C0;
}
.footer__col a:hover { color: #fff; }

/* Borrowing and Company sit side by side so the footer does not become a long
   single-file scroll on mobile. */
.footer__links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }

.footer__bottom {
  display: flex; flex-direction: column; gap: .375rem;
  margin-top: 1.75rem;
  padding: 1rem 0 1.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .6875rem;
}
.footer__address { line-height: 1.5; }
.footer__poweredby a { color: var(--ec-green); font-weight: 600; }

/* ============================================================
   18. BREAKPOINT — 768px (tablet)
   ============================================================ */
@media (min-width: 768px) {
  :root { --pad: 2rem; }

  .utility__link { display: inline-flex; }

  .nav__actions .btn--sm { padding: .5rem 1.25rem; }

  .hero__inner { padding-top: 3rem; padding-bottom: 0; }
  .hero-form { padding: 1.75rem; }
  .hero__quick { margin-top: 2rem; padding-bottom: 3rem; }

  .quick__card { grid-template-columns: repeat(3, 1fr); }
  .quick__tile:nth-child(2n) { border-right: 1px solid var(--ec-border); }
  .quick__tile:nth-child(3n) { border-right: 0; }
  .quick__tile:nth-last-child(-n+2) { border-bottom: 1px solid var(--ec-border); }
  .quick__tile:nth-last-child(-n+3) { border-bottom: 0; }

  .products, .jadual, .feature, .process, .faq, .contact-section { padding: 5rem 0; }
  /* Back to full-size card internals once there is room for them. */
  .products__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .pcard__flag { top: .75rem; left: .75rem; font-size: .6875rem; letter-spacing: .08em; padding: .3125rem .625rem; }
  .pcard__body { gap: .625rem; padding: 1.25rem; }
  .pcard__cat { font-size: .75rem; letter-spacing: .1em; gap: .4375rem; }
  .pcard__cat .ic { width: 18px; height: 18px; }
  .pcard__body h3 { font-size: 1.375rem; }
  .pcard__body > p { font-size: .9375rem; }
  .pcard__meta { gap: .1875rem; padding-top: .75rem; }
  .pcard__amount { font-size: 1.0625rem; }
  .pcard__rate { font-size: .8125rem; }
  .pcard .link-arrow { font-size: .9375rem; }
  .steps          { grid-template-columns: repeat(2, 1fr); }
  .stats__grid    { grid-template-columns: repeat(4, 1fr); }

  .field-row { gap: 1.5rem; margin-bottom: 1rem; }
  .field label { font-size: .75rem; letter-spacing: .08em; margin-bottom: .375rem; min-height: 0; }
  .field input, .field select { min-height: 48px; padding: .625rem 0; }

  .calc { padding: 2rem; }
  .hero-form__head h2 { font-size: 1.5rem; }
  .hero-form__head p  { font-size: .875rem; }

  /* Back to borderless rows with the icon beside the text. */
  .benefits { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 1.75rem; }
  .benefits li {
    display: flex; gap: .875rem; align-items: flex-start;
    background: none; border: 0; padding: 0;
  }
  .benefits__icon {
    width: 40px; height: 40px; margin-bottom: 0;
    background: #fff; border: 1px solid var(--ec-border);
  }
  .benefits h3 { font-size: 1.0625rem; }
  .benefits p  { font-size: .875rem; line-height: 1.6; }
  .feature__media img { aspect-ratio: 4 / 3; }

  .faq__grid { gap: 2.5rem; }
  .faq__help { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: start; padding: 1.75rem; }
  .faq__help-icon { grid-row: span 2; margin-bottom: 0; }
  .faq__help p { grid-column: 2; }
  .faq__help .btn { grid-column: 1 / -1; }
  .faq__item summary { font-size: 1rem; padding: 1.125rem 1.25rem; }
  .faq__answer { padding: 0 1.25rem 1.25rem; }

  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
  .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ============================================================
   19. BREAKPOINT — 1024px (desktop)
   ============================================================ */
@media (min-width: 1024px) {
  :root { --pad: 2.5rem; --nav-h: 76px; }

  /* Links become a normal horizontal row and the burger retires. Without this
     the mobile dropdown styling persisted at every width and the burger was
     the only way to navigate on desktop. */
  .nav__links {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(1rem, 2vw, 1.75rem);
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
  }
  .nav__links a {
    padding: 0;
    min-height: 0;
    border-bottom: 0;
    font-size: .9375rem;
    white-space: nowrap;
  }
  .nav__burger { display: none; }

  /* Desktop: switcher returns to the bar; the in-menu one disappears. */
  .nav__actions .lang-toggle { display: flex; }
  .nav__menu-lang { display: none; }

  /* --- Hero: rotating copy left, application form right, photo full-bleed --- */
  /* Copy left, form right, both centred; the tile card is a full-width row
     below, all over the same background image. */
  .hero__inner {
    flex-direction: row;
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
    padding-top: 4.5rem;
    padding-bottom: 0;
  }
  .hero__copy { flex: 1 1 48%; }
  .hero__form-wrap { flex: 0 0 clamp(390px, 38%, 450px); }
  .hero__title { font-size: clamp(2.25rem, 3.4vw, 3.5rem); }
  .hero__lead { font-size: 1rem; }

  .hero__quick { margin-top: 2.25rem; padding-bottom: 3.5rem; }
  .quick__card { grid-template-columns: repeat(6, 1fr); }
  .quick__tile {
    border-bottom: 0 !important;
    border-right: 1px solid var(--ec-border) !important;
    height: 128px;
    padding: 1.5rem .75rem;
  }
  .quick__tile:last-child { border-right: 0 !important; }
  .quick__label { font-size: .875rem; }


  .products, .jadual, .feature, .process, .faq, .contact-section { padding: 6rem 0; }
  /* Two columns: the heading and contact card hold the left rail while the
     accordion fills the right. Stops the list floating in dead white space. */
  .faq__grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 4rem;
    align-items: start;
  }
  .faq__aside { position: sticky; top: calc(var(--nav-h) + 2rem); }
  .faq__list { gap: .75rem; }
  .faq__item summary { font-size: 1.0625rem; }

  /* Featured product card spans two columns */
  /* 4 columns. The two wide cards span 2 each, so row 1 fills exactly and the
     remaining four products land in a single clean row underneath — no orphan. */
  .products__grid { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }

  .pcard--feature,
  .pcard--wide { grid-column: span 2; flex-direction: row; }

  .pcard--feature .pcard__media,
  .pcard--wide .pcard__media { aspect-ratio: auto; flex: 0 0 46%; }

  .pcard--feature .pcard__body,
  .pcard--wide .pcard__body { padding: 2rem; justify-content: center; }

  .pcard--feature .pcard__body h3,
  .pcard--wide .pcard__body h3 { font-size: 1.75rem; }

  .pcard--feature .pcard__body > p,
  .pcard--wide .pcard__body > p { flex: 0 1 auto; font-size: 1rem; }

  .jadual__grid { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }

  .feature__grid { grid-template-columns: 1fr 1.1fr; gap: 3.5rem; align-items: center; }
  .feature__media img { aspect-ratio: 3 / 4; }

  .steps { grid-template-columns: repeat(4, 1fr); }

  .contact-grid { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
  .contact-map iframe { height: 100%; min-height: 380px; }

  .footer__grid { grid-template-columns: 1fr 1.5fr; gap: 4rem; }
  .footer__links { gap: 3rem; }

  .section-head { max-width: 68ch; }
  .section-head--split {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 3rem; align-items: end; max-width: none;
  }
  .section-head--split .section-lead { margin-bottom: .5rem; }

  .wa-fab { right: 1.75rem; bottom: 1.75rem; width: 60px; height: 60px; }
}

/* ============================================================
   20. BREAKPOINT — 1440px (wide)
   ============================================================ */
@media (min-width: 1440px) {
  :root { --pad: 3rem; }
}

/* ============================================================
   21. MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .band__track { animation: none; }
  .wa-fab__pulse { display: none; }
}