/* ============================================================
   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; }
.section-head--center { text-align: center; }
.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; gap: .625rem; color: var(--ec-navy); }
.brand__mark { width: 30px; height: 21px; flex: none; }
.brand__text {
  font-family: var(--font-heading);
  font-size: 1.125rem; font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand__text strong { font-weight: 800; }

/* 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 span { display: none; }   /* icon-only CTA at 375px */
.nav__actions .btn--sm { min-width: 44px; padding: .5rem .875rem; }

.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 CAROUSEL
   ============================================================ */
.hero { position: relative; background: var(--ec-navy); }

/* All slides share one grid cell, so the carousel is always as tall as its
   tallest slide and the page never jumps as it advances. Slides are hidden with
   visibility (not display:none) so they keep contributing that height —
   visibility:hidden still removes them from the a11y tree and tab order. */
.hero__slides { position: relative; display: grid; }

.hero__slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column-reverse;   /* image above text on mobile */
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.hero__slide.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity .5s ease, visibility 0s;
}

/* flex:1 is what kills the navy gap above the photo on mobile. All three slides
   share one grid cell, so a shorter slide is stretched to the tallest one's
   height. With a fixed aspect-ratio and no grow, that surplus had nowhere to go
   and column-reverse pushed it to the top. Letting the media absorb it means
   the photo simply crops taller (object-fit: cover), and the gap cannot occur. */
.hero__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 210px;
  overflow: hidden;
}

/* Absolute, so the photo is CROPPED to the slide rather than setting its height.
   Left in flow, `height:100%` resolves to auto against an indefinite parent and
   each slide ends up as tall as its own image — slides of different heights. */
.hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Two stacked layers dissolve the photo into the navy panel instead of butting
   against it. ::before blurs the photo itself, masked so the blur is strongest
   at the seam and gone by the time you're into the image. ::after lays the navy
   over the top, reaching FULL opacity at the seam so it meets the panel exactly.
   Mobile stacks image-over-panel, so both run top→bottom; desktop flips to
   left→right in the 1024px block. */
.hero__media::before,
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  pointer-events: none;
}

.hero__media::before {
  z-index: 1;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 55%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 55%, #000 100%);
}

.hero__media::after {
  z-index: 2;
  background: linear-gradient(to bottom,
    rgba(10, 37, 64, .10) 0%,
    rgba(10, 37, 64, .30) 45%,
    rgba(10, 37, 64, .75) 80%,
    var(--ec-navy) 100%);
}

.hero__panel {
  background: var(--ec-navy);
  padding: 2rem var(--pad) 4.5rem;   /* bottom room for the overlapping quick strip */
  color: #fff;
}

.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: 1rem;
}
.hero__eyebrow-chev { color: var(--ec-green); }

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

.hero__lead {
  color: #B7C9DC;
  font-size: 1rem;
  max-width: 46ch;
  margin-bottom: 1.5rem;
}

.hero__actions { display: flex; flex-direction: column; gap: .75rem; }
.hero__actions .btn--ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.hero__actions .btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

.hero__dots {
  position: absolute; left: var(--pad); bottom: 3.5rem;
  display: flex; gap: .5rem; z-index: 3;
}
.hero__dot {
  width: 32px; height: 4px;
  padding: 0; border: 0;
  background: rgba(255,255,255,.3);
  cursor: pointer;
  transition: background .25s ease;
}
.hero__dot::before {                       /* keeps the touch target ≥44px tall */
  content: ''; position: absolute;
  inset: -20px 0;
}
.hero__dot { position: relative; }
.hero__dot.is-active { background: var(--ec-green); }

/* ============================================================
   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. */
.quick {
  position: relative; z-index: 4;
  background: var(--ec-navy);
  padding-bottom: 2.5rem;
}
.quick__card { margin-top: -3.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
   ============================================================ */
.products { padding: 3.5rem 0; }

/* 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
   ============================================================ */
.jadual {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(4,115,234,.35), transparent 60%),
    var(--ec-navy);
  padding: 3.5rem 0;
}
.jadual__grid { display: grid; gap: 2rem; }

/* Four columns of financial data don't fit 375px — scroll the table, not the page. */
.ratecard-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.ratecard {
  width: 100%;
  min-width: 340px;
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-size: .8125rem;
  color: #D5E2EF;
}
.ratecard th, .ratecard td {
  padding: .625rem .5rem;
  text-align: right;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.ratecard thead th {
  font-family: var(--font-body);
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: #8FA8C0;
}
.ratecard th[scope="row"] { text-align: left; font-weight: 600; color: #fff; }
.ratecard thead th:first-child { text-align: left; }
.ratecard td.is-best { color: var(--ec-green); font-weight: 800; }

.jadual__note { margin-top: .75rem; font-size: .8125rem; color: #8FA8C0; }

/* --- Calculator card --- */
.calc {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem;
}
.calc__head { 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__field { margin-bottom: 1.25rem; }
.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__field select {
  width: 100%;
  min-height: 48px;
  padding: .625rem .75rem;
  font-size: 1rem;                    /* ≥16px: no iOS zoom */
  border: 1px solid var(--ec-border);
  border-radius: var(--radius-card);
  background: #fff;
}
.calc__field select:focus { outline: none; border-color: var(--ec-blue); box-shadow: 0 0 0 3px var(--ec-blue-soft); }

.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__breakdown {
  display: grid; gap: .5rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(4,115,234,.2);
  font-size: .875rem;
}
.calc__breakdown div { display: flex; justify-content: space-between; gap: 1rem; }
.calc__breakdown dt { color: var(--ec-muted); }
.calc__breakdown dd { margin: 0; font-weight: 700; color: var(--ec-navy); font-variant-numeric: tabular-nums; }

.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. APPLY
   ============================================================ */
.apply { padding: 3.5rem 0; background: var(--ec-navy); }
.apply__grid { display: grid; gap: 2rem; }

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

/* 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; }

.apply__side { color: #fff; }
.apply__side .btn--whatsapp { margin-bottom: 1.75rem; }

.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 {
  margin-top: 1.75rem;
  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; }

.footer .brand--footer { color: #fff; margin-bottom: .875rem; }
.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 span { display: inline; }
  .nav__actions .btn--sm { padding: .5rem 1.25rem; }

  .hero__panel { padding: 3rem var(--pad) 5rem; }
  .hero__actions { flex-direction: row; flex-wrap: wrap; }
  .hero__actions .btn { flex: 0 1 auto; }

  .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, .apply { 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, .apply__form { padding: 2rem; }
  .apply__form-head { margin-bottom: 1.5rem; }
  .apply__form-head h2 { font-size: 1.625rem; margin-bottom: .375rem; }
  .apply__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; }

  /* --- Hero becomes the SC split: text panel left, photo right --- */
  .hero__slide {
    flex-direction: row;
    align-items: stretch;
    min-height: 520px;
  }
  .hero__panel {
    flex: 0 0 48%;
    display: flex; flex-direction: column; justify-content: center;
    /* Bottom padding clears the quick strip, which now overlays the hero's
       last ~130px. Reduce this and the CTAs slide under the card. */
    padding: 4rem clamp(2.5rem, 4vw, 4rem) 11rem;
  }
  .hero__media { flex: 1; aspect-ratio: auto; }

  /* Seam is now vertical (panel left, photo right) — rotate both layers. */
  .hero__media::before {
    -webkit-mask-image: linear-gradient(to left, transparent 62%, #000 100%);
    mask-image: linear-gradient(to left, transparent 62%, #000 100%);
  }
  .hero__media::after {
    background: linear-gradient(to right,
      var(--ec-navy) 0%,
      rgba(10, 37, 64, .82) 9%,
      rgba(10, 37, 64, .42) 26%,
      rgba(10, 37, 64, .12) 44%,
      transparent 58%);
  }
  .hero__dots { bottom: 9.5rem; left: clamp(2.5rem, 4vw, 4rem); }  /* above the quick strip */

  /* Desktop: the strip sits ENTIRELY on the hero. Pulling the section up by
     roughly its own height (tile min-height 128px + borders) collapses it to
     zero, so the hero photo runs behind and either side of the card and the
     band starts right at the hero's bottom edge. No flat navy, no white.
     Only viable here, where the card is a single row. */
  .quick {
    background: none;
    margin-top: -8.125rem;
    padding-bottom: 0;
  }
  .quick__card { margin-top: 0; }
  .quick__card { grid-template-columns: repeat(6, 1fr); }
  .quick__tile {
    border-bottom: 0 !important;
    border-right: 1px solid var(--ec-border) !important;
    /* Fixed, not min-height: the section's negative margin above is derived
       from this (128px + the card's 2px of border = 8.125rem). If a label ever
       wrapped and grew the tile, the leftover height would leak as a white
       sliver under the card. */
    height: 128px;
    padding: 1.5rem .75rem;
  }
  .quick__tile:last-child { border-right: 0 !important; }
  .quick__label { font-size: .875rem; }


  .products, .jadual, .feature, .process, .faq, .apply { 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); }

  .apply__grid { grid-template-columns: 1.25fr 1fr; gap: 4rem; align-items: start; }
  .apply__side { position: sticky; top: calc(var(--nav-h) + 2rem); }

  .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; }
  .hero__slide { min-height: 600px; }
  .hero__panel { flex-basis: 46%; }
}

/* ============================================================
   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; }
}