/* ============================================================
   IGM — India Gold Metaverse · Landing page styles
   Fonts: Satoshi (self-hosted) · Clash Display (self-hosted) · Instrument Serif (Google Fonts)
   ============================================================ */

@font-face {
  font-family: 'Satoshi';
  src: url('/assets/img/fonts/satoshi-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/img/fonts/satoshi-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/img/fonts/satoshi-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/img/fonts/satoshi-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('/assets/img/fonts/clashdisplay-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --neutral-50:  #ffffff;
  --neutral-300: #c8c8d2;
  --neutral-500: #77777f;
  --neutral-600: #606070;
  --neutral-800: #232330;
  --neutral-900: #0d0f1a;
  --gold-100:    #f0e6d1;  /* faint gold for oversized display numerals */
  --gold-300:    #d6ba81;
  --gold-warm:   #cfb38d;  /* warm serif accent used across the About redesign */
  --gold-500:    #b9903f;
  --gold-grad:   linear-gradient(100deg, #b9903f 0%, #e8cf8f 45%, #b9903f 100%);
  --cream:       #fbf7ef;
  --sans:  "Satoshi", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --maxw: 1200px;
  /* Figma's spring (mass 1, stiffness 100, damping 15) solved and sampled as an
     easing curve: damping ratio .75, so it overshoots ~2.8% and settles in .82s.
     A cubic-bezier can't overshoot, hence linear(). */
  --spring: linear(
    0 0%, 0.0424 3.8%, 0.1441 7.7%, 0.2747 11.5%, 0.4131 15.4%, 0.5455 19.2%,
    0.6637 23.1%, 0.7637 26.9%, 0.8447 30.8%, 0.9073 34.6%, 0.9536 38.5%,
    0.9861 42.3%, 1.0075 46.2%, 1.0202 50%, 1.0265 53.8%, 1.0284 57.7%,
    1.0273 61.5%, 1.0245 65.4%, 1.0208 69.2%, 1.0169 73.1%, 1.0131 76.9%,
    1.0097 80.8%, 1.0069 84.6%, 1.0045 88.5%, 1.0027 92.3%, 1.0014 96.2%, 1 100%
  );
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--sans);
  color: var(--neutral-900);
  background: #fff;
  line-height: 1.45;
  /* backstop for the full-bleed decorative curves. `hidden` on body alone relies on
     overflow propagating to the viewport, which some browsers don't honour — `clip`
     on both html and body kills the sideways scroll without making a scroll container */
  overflow-x: hidden;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0%;font-size: 22px;
    line-height: 28px; }
    em-btn { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0%;font-size: 14px;
    line-height: 28px; }

/* ---------- shared ---------- */
.pill {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: #eeeef1;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--neutral-900);
}

.nav-logo-header-footer{
  height: 90px;
  width: auto;
  padding-bottom: 10px;
}
.pill.small { font-size: 11px; padding: 3px 10px; background: #f2f2f2; }
.pill.dark-pill { background: #1c1c26; color: #fff; }

.section-title {
  font-weight: 300;
  text-align: center;
  margin: 18px 0 30px;
}
.section-title em {
  display: block;
  font-size: clamp(32px, 4vw, 42px);
  letter-spacing: .01em;
  line-height: 1.15;
}
.section-title .section-sub {
  display: block;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--neutral-800);
  font-weight: 300;
  margin-top: 6px;
}
.section-title .section-lead {
  display: block;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 300;
  letter-spacing: -.02em;
}
.section-title.light em { color: #fff; }

/* full-bleed section fades — the Figma Vector 1343/1344 exports, used as a soft
   white curve between two sections instead of a hard edge.
     .wave-top    → "Vector 1344.png"      (crisp white edge at the TOP)
     .wave-bottom → "vector-1343-wave.png" (crisp white edge at the BOTTOM)
   Bleeds 2px past each side so no seam shows at fractional widths. The parent
   needs `position: relative` and horizontal clipping (overflow hidden/clip). */
.wave-top,
.wave-bottom {
  position: absolute;
  left: -2px;
  width: calc(100% + 4px);
  max-width: none;
  height: auto;
  z-index: 3;
  pointer-events: none;
}
.wave-top    { top: -1px; }
.wave-bottom { bottom: -2px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 24px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;   /* 0.28px @ 14px, per Figma buttons */
  text-transform: uppercase;
  transition: opacity .2s, transform .2s;
}
.btn:hover { opacity: .85; transform: translateY(-1px); }
.btn-light { background: #fff; color: var(--neutral-900); }
.btn-dark  { background: #000; color: #fff; }   /* Neutral-950, per Figma "Dark Solid" */
.btn-dark.big { margin: 40px auto 0; display: flex; width: max-content; }
.btn-outline {
  background: rgba(255,255,255,.11);
  border: .8px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color: #fafafa;
  height: 40px;
  padding: 0 12px;
  font-family: "Clash Display", var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  border-radius: 4px;
}
/* .btn was only ever used on <a> until the enquire modal's triggers needed
   real <button>s — this strips the UA button chrome without touching the
   background/color that .btn-dark / .btn-light set. */
button.btn { border: none; cursor: pointer; font-family: inherit; -webkit-appearance: none; appearance: none; }

/* ---------- navbar ---------- */
.navbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 14px 40px;
}
.nav-inner {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.nav-left { display: flex; align-items: center; gap: 48px; }
.nav-link {
  color: #fafafa;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .02em;      /* 0.32px @ 16px */
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-link .chev { display: inline-block; margin-left: 3px; font-size: 13px; line-height: 1; opacity: .9; transform-origin: center; transition: transform .25s; }
.nav-link:hover { color: var(--gold-300); }

/* ---- offerings dropdown ---- */
.nav-item { position: relative; }
.nav-item.has-menu > .nav-link { cursor: pointer; }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  margin-top: 14px;
  padding: 8px;
  background: var(--neutral-50);
  border: 1px solid #eeeef1;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 60;
}
/* ABOUT US is a wider two-column panel: a small category label on the left,
   its destinations stacked on the right, one grid row per group (see image). */
.nav-dropdown--about { min-width: 360px; padding: 14px; }
.nav-dropdown__group {
  display: grid;
  grid-template-columns: 118px 1fr;
  align-items: start;
  padding: 10px 0;
}
.nav-dropdown__group + .nav-dropdown__group { border-top: 1px solid #eeeef1; }
.nav-dropdown__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--neutral-500);
  padding-top: 9px;      /* optically aligns the label with the first link row */
}
/* hover bridge so the menu doesn't close in the 14px gap */
.nav-item.has-menu::after {
  content: "";
  position: absolute;
  top: 100%; left: 0;
  width: 100%; height: 16px;
}
.nav-item.has-menu:hover .nav-dropdown,
.nav-item.has-menu:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-item.has-menu:hover > .nav-link .chev { transform: rotate(180deg); }
.nav-dropdown a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--neutral-600);
  transition: background .18s, color .18s;
}
.nav-dropdown a:hover { background: #f4f4f6; color: var(--gold-500); }
.nav-dropdown a.is-active { color: var(--gold-500); }
.nav-logo { text-align: center; color: #fff; }
.nav-logo-img { height: 56px; width: auto; filter: brightness(0) invert(1); }
.logo-mark {
  display: inline-block;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: .08em;
  border: 2px solid currentColor;
  padding: 1px 10px;
}
.logo-sub { display: block; font-size: 9.5px; letter-spacing: .08em; margin-top: 3px; font-weight: 500; }
.nav-right { display: flex; justify-content: flex-end; }

/* ---- second-row section nav (About-Us destinations) ----
   Sits under .nav-inner inside the same .navbar box, so it inherits the
   scrolled backdrop. Sentence-case, not uppercase like the main links. */
.nav-subnav {
  max-width: 1360px;
  margin: 12px auto 0;
  display: none;              /* revealed only when the ABOUT US arrow is clicked */
  justify-content: center;
  align-items: center;
  gap: 44px;
}
/* revealed by /assets/js/include.js only on the About-Us pages the strip links to */
.nav-subnav.is-open { display: flex; animation: subnav-in .22s ease both; }
@keyframes subnav-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-subnav__link {
  color: var(--neutral-300);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  transition: color .18s;
}
.nav-subnav__link:hover { color: var(--gold-300); }
.nav-subnav__link.is-active { color: var(--gold-500); }

/* ---- mobile: hamburger trigger + full-screen menu ----
   Hidden entirely on desktop (.nav-left carries the real links there); shown
   only at the ≤900px breakpoint where .nav-left already hides (see responsive). */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  justify-self: start;
  align-items: end;
}
.nav-burger span { display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px; }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #fff;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.22,1,.36,1), visibility .35s;
}
.mobile-nav.is-open { visibility: visible; transform: translateX(0); }
.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid #eeeef1;
}
.mobile-nav__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--neutral-900);
  cursor: pointer;
}
.mobile-nav__logo img { height: 40px; width: auto; }
.mobile-nav__body { flex: 1 1 auto; overflow-y: auto; padding: 4px 20px; }

.mobile-acc { border-bottom: 1px solid #eeeef1; }
.mobile-acc__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 2px;
  background: none;
  border: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--neutral-900);
  cursor: pointer;
  font-family: 'Satoshi';
}
.mobile-acc__trigger .chev { font-size: 16px; line-height: 1; color: #9a9aa4; transition: transform .25s, color .25s; }
.mobile-acc.is-open .mobile-acc__trigger { color: var(--gold-500); }
.mobile-acc.is-open .mobile-acc__trigger .chev { color: var(--gold-500); transform: rotate(180deg); }
/* grid-rows 0fr -> 1fr is a smooth auto-height collapse with no JS measuring;
   the inner wrapper is the grid item that actually clips during the transition */
.mobile-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.mobile-acc.is-open .mobile-acc__panel { grid-template-rows: 1fr; }
.mobile-acc__panel-inner { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 2px; }
.mobile-acc__panel a {
  margin: 2px 0;
  padding: 12px 14px;
  /* border-radius: 8px; */
  background: #fff;
  /* box-shadow: 0 4px 16px rgba(20, 16, 8, .08); */
  font-size: 14px;
  color: #606070;
  /* border-bottom: 1px solid #a2a2af; */
  font-family: 'Satoshi';
  font-size: 14px;

}
.mobile-acc__panel a:hover { color: var(--neutral-900); }
.mobile-nav__cta { margin: 16px 20px 24px; justify-content: center; }
/* body scroll-lock while the overlay is open (toggled from navbar.js) */
body.mobile-nav-open { overflow: hidden; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  /* min-height: 840px; */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  background: #000;
  padding:60px 0px;
}

.hero-carousel { position: absolute; inset: 0; }

/* Vimeo background embeds. An <iframe> is not replaced content, so object-fit
   does nothing to it — the frame has to be sized to cover by hand: take 16:9 off
   each axis of the container, floor both at the container's own size so the
   larger one wins, then centre the overflow. Container units rather than vw/vh
   because .pcontact is a normal section, not a viewport-sized box; that needs
   container-type: size, which is safe here since both parents size from insets. */
.video-cover { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.video-cover iframe {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 177.7778cqh;  min-width: 100cqw;
  height: 56.25cqw;    min-height: 100cqh;
  border: 0;
  pointer-events: none;   /* decorative: must not swallow scroll or taps */
}
/* stands in for the <video>'s old poster attribute — the embed streams, so the
   hero would otherwise flash black before the first frame arrives */
.hero-video-frame { background: #000 url("/assets/img/hero-1.png") center / cover no-repeat; }
.hero-carousel .hero-video,
.hero-carousel img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-carousel img { opacity: 0; transition: opacity 1.4s ease; }
.hero-carousel img.active { opacity: 1; }
/* sliding variant — opt in with class="hero-carousel slide". Same choreography as
   .statement-slide: every slide is parked off-screen right, the incoming one
   slides to 0 while the outgoing exits left. Needs a clipping ancestor. */
.hero-carousel.slide img {
  opacity: 1;
  transform: translateX(100%);
  transition: transform 1.1s cubic-bezier(.22, 1.1, .36, 1);
}
.hero-carousel.slide img.active   { transform: translateX(0); }
.hero-carousel.slide img.exit     { transform: translateX(-100%); }
.hero-carousel.slide img.no-trans { transition: none; }
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 30% 100%, rgba(107,90,52,.55) 0%, rgba(61,51,32,.4) 35%, transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(23,20,14,.3) 55%, rgba(43,36,23,.15) 100%);
}
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.02) 62%, rgba(0,0,0,0) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  margin-top: 150px;
  padding: 0 20px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}
.hero-title {
  color: #fff;
  font-weight: 300;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.2;
  letter-spacing: -.02em;
  max-width: 951px;
}
.hero-title .hero-serif {
  display: block;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.1;
  margin-top: 8px;
}
.hero-sub {
  margin-top: 30px;
  max-width: 643px;
  font-size: 18px;
  line-height: 26px;
  color: var(--neutral-300);
}

.hero-sub-custom {
  margin-top: 20px;
  max-width: 643px;
  font-size: 18px;
  line-height: 26px;
  color: var(--neutral-300);
}
.hero-pillars {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 26px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-pillars li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 18px;
}
.hero-pillars .pillar-icon { font-size: 17px; opacity: .9; font-family: var(--sans); font-style: normal; }
.hero-pillars .dot { width: 2px; height: 2px; background: #fff; padding: 0; }
.hero .btn-light { margin-top: 24px; }
/* Figma's Vector 1343 export, cropped to drop the transparent bottom
   padding so its crisp lower edge sits flush against the section boundary */
.hero-wave {
  position: absolute;
  right: 0;
  width: 100%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  width: calc(100% + 4px);
  left: -2px;
  transform: scale(1.08);
  max-width: none;
  bottom: -4px;
  transform-origin: center bottom;
}

/* ---------- vision ---------- */
.vision {
  padding: 60px 40px;
  text-align: center;
  max-width: var(--maxw);
  margin: 0 auto;
  /* position: relative; */
}
/* Disabled: this was meant to be a white curve on the vision's TOP edge, but
   .vision has no `position: relative` (see above), so it resolved against the
   viewport and painted at the top of the *document* — a white stripe across the
   navbar at z-index 4. The hero/vision boundary is already drawn by .hero-wave,
   so this is redundant; re-enabling it needs the `position: relative` above too.
.vision::before {
  content: "";
  position: absolute;
  top: -45px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 90px;
  z-index: 4;
  background: #fff;
  border-radius: 100% 100% 0 0 / 100% 100% 0 0;
  pointer-events: none;
}
*/
.vision-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.vision-card h3 { margin-top: 26px; font-weight: 400; font-size: 24px; }
.vision-card p  { margin-top: 10px; font-size: 15px; color: var(--neutral-500); line-height: 1.55; }
.vision-img {
  aspect-ratio: 240/198;
  width: 100%;
  background-size: cover;
  background-position: center;
}

/* ---------- ecosystem ---------- */
.ecosystem {
  padding: 60px 20px;
  text-align: center;
}
/* exact Figma frame: 548.06 x 595.58, bubbles 152.06, ring Ø443.52 */
.eco-ring {
  position: relative;
  width: 548.06px;
  height: 595.58px;
  margin: 60px auto 0;
  transform-origin: center;
  transition: transform 1s cubic-bezier(0, 0, .58, 1);
  /* --eco-fit shrinks the whole stage to fit narrow viewports (see responsive).
     Every transform on .eco-ring must carry it, or the fit is lost mid-animation. */
  --eco-fit: 1;
  transform: scale(var(--eco-fit));
}
.eco-goldring,
.eco-pulse {
  position: absolute;
  left: 52.2px; top: 76px;
  width: 443.52px; height: 443.52px;
  border: 3.17px solid #d6ba81;
  border-radius: 50%;
  opacity: 0;
  transform: scale(.8);
  transition: opacity 1s cubic-bezier(0,0,.58,1), transform 1s cubic-bezier(0,0,.58,1);
  pointer-events: none;
}
.eco-ring.stage3 { transform: scale(calc(var(--eco-fit) * .909)); }   /* zoom-out per motion data */
.eco-ring.stage3 .eco-goldring { opacity: 1; transform: none; }
.eco-ring.stage3 .eco-pulse { animation: ecoPulse 2.6s cubic-bezier(0,0,.58,1) .5s infinite; }
.eco-ring.stage3 .eco-bubble { animation: ecoBubbleZoom 2.6s ease-in-out infinite; }
.eco-ring.stage3 .eco-bubble.b2, .eco-ring.stage3 .eco-bubble.b5 { animation-delay: .43s; }
.eco-ring.stage3 .eco-bubble.b3, .eco-ring.stage3 .eco-bubble.b6 { animation-delay: .86s; }
@keyframes ecoBubbleZoom {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(0, 0) scale(1.1); }
}
@keyframes ecoPulse {                                     /* 443.52 → 798.34, fades, stroke lightens */
  0%   { opacity: .6; transform: scale(1);   border-color: #d6ba81; border-width: 3.17px; }
  100% { opacity: 0;  transform: scale(1.8); border-color: #f0e6d1; border-width: 1.58px; }
}
.eco-center {
  position: absolute;
  left: 0; right: 0;
  top: 275.62px;
  font-size: 28.51px;
  line-height: 39.6px;
  color: #232330;
  text-align: center;
  z-index: 3;
  opacity: 0;
  transition: opacity 1s cubic-bezier(0,0,.58,1);
}
.eco-ring.stage2 .eco-center { opacity: 1; }
.eco-connected {
  display: block;
  font-size: 28.51px;
  line-height: 39.6px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .9s cubic-bezier(0,0,.58,1) .1s, transform .9s cubic-bezier(0,0,.58,1) .1s;
}
.eco-ring.stage3 .eco-connected { opacity: 1; transform: none; }
.eco-connected .gold-grad {
  background: linear-gradient(147.3deg, #bc7b20 5.07%, #f0bf7a 32.9%, #b06b0b 93.7%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eco-bubble {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: 152.06px;
  height: 152.06px;
  border-radius: 50%;
  outline: 4.75px solid #f2f2f2;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate(var(--dx), var(--dy)) scale(.92);
  /* spring(1, 100, 15) ≈ 1.92s */
  transition: opacity 1.1s cubic-bezier(0,0,.58,1),
              transform 1.92s cubic-bezier(.22, 1.06, .36, 1);
}
.eco-ring.stage1 .eco-bubble { opacity: 1; }
.eco-ring.stage2 .eco-bubble { transform: translate(0, 0) scale(1); }
/* final left/top + fly-in delta — exact values from the Figma frame */
.eco-bubble.b1 { --l: 191.66px; --t: 0px;      --dx: 0px;       --dy: -354.82px; } /* digital ownership   — top    */
.eco-bubble.b2 { --l: 0px;      --t: 117.22px; --dx: -215.42px; --dy: -215.43px; } /* gold purity testing — left   */
.eco-bubble.b3 { --l: 396px;    --t: 117.22px; --dx: 202.75px;  --dy: -202.76px; } /* bullion trading     — right  */
.eco-bubble.b4 { --l: 1.58px;   --t: 342.14px; --dx: -229.68px; --dy: 240.77px;  } /* jewellery discovery — l.left */
.eco-bubble.b5 { --l: 394.42px; --t: 342.14px; --dx: 229.68px;  --dy: 204.34px;  } /* price standardz.    — l.right*/
.eco-bubble.b6 { --l: 191.66px; --t: 443.52px; --dx: 0px;       --dy: 329.47px;  } /* gold loans          — bottom */
.eco-bubble img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.eco-bubble::after {                                      /* blurred dark pill behind the label */
  content: "";
  position: absolute;
  left: 11.9px; top: 38px;
  width: 128.46px; height: 76.58px;
  background: rgba(0, 0, 0, .88);
  border-radius: 9999px;
  filter: blur(41.09px);
  z-index: 1;
}
.eco-bubble span {
  position: relative;
  z-index: 2;
  color: #fff;
  -webkit-text-fill-color: #fff;
  opacity: 1;
  font-family: var(--serif);
  font-style: normal;
  font-size: 22.18px;
  line-height: 26.93px;
  letter-spacing: .44px;
  text-align: center;
  /* the label sits over photography — this keeps it reading as pure white
     rather than picking up the image underneath */
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6), 0 0 20px rgba(0, 0, 0, .45);
}

/* ===== ecosystem — added: single 45° clockwise turn of the six verticals =====
   The existing circular gold ring is what visually connects them; the bubbles
   rotate 45° along it once, then stop. Content is counter-rotated to stay upright. */
.eco-orbit {
  position: absolute;
  left: 0; top: 0;
  width: 548.06px; height: 595.58px;
  transform-origin: 273.96px 297.76px;   /* ring centre */
}
.eco-b-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* the counter-rotation animation makes this a stacking context, so it needs
     to out-rank .eco-bubble::after (the blurred pill) or the pill would paint
     over the label and grey it out once the orbit settles */
  z-index: 2;
}
@keyframes ecoOrbit        { to { transform: rotate(45deg);  } }
@keyframes ecoOrbitCounter { to { transform: rotate(-45deg); } }

/* ============================================================
   VOICES — shared testimonial wall (GoldSense / RamMudra / Elanzia).
   Three masonry columns of quote cards. On desktop the columns
   auto-scroll — the outer two rise, the middle one descends — and
   hovering the grid pauses all three so a card can be read. Mobile
   drops the scroll for a static stack with a "View More" toggle.
   Base + card styling live here (not in a page file) because all
   three pages share this one section; the per-column card clones
   that make the loop seamless are added in script.js.
   ============================================================ */
.gs-gold {
  background: linear-gradient(130deg, #cfb38d 4%, #eab338 24%, #66471b 121%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.gs-voices {
  position: relative;
  overflow-x: clip;   /* .wave-bottom bleeds 2px past each side, see its rule */
  padding: 80px 40px 96px;
  background:
    radial-gradient(60% 40% at 50% 0%, #fdf6e8 0%, transparent 60%),
    #fff;
}
.gs-voices__head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
/* serif baked in here so the heading no longer depends on the .gs-scoped
   .serif-h helper that only exists on the GoldSense page */
.gs-voices__head h2 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.2; color: var(--neutral-900); }
.gs-voices__head p { margin-top: 14px; font-size: 16px; line-height: 24px; color: var(--neutral-600, #606070); }
.gs-voices__grid {
  max-width: 1016px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
.gs-vcol { display: flex; flex-direction: column; gap: 24px; }
.gs-vcard {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #efeff2;
  box-shadow: 0 10px 30px rgba(20,16,8,.05);
}
.gs-vcard__photo { position: relative; margin: 0; aspect-ratio: 322/290; background: #e9e5dc; overflow: hidden; }
.gs-vcard__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* frosted name plate over the photo */
.gs-vcard__name {
  position: absolute; left: 0; bottom: 18px;
  padding: 10px 20px;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 0 8px 8px 0;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.gs-vcard__name strong { display: block; font-size: 15px; font-weight: 600; color: var(--neutral-900); }
.gs-vcard__name span { font-size: 13px; color: var(--neutral-600, #606070); }
.gs-vcard__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.gs-tag {
  align-self: flex-start;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #7e642a;
  background: #f9f5ec;
  border-radius: 32px;
  padding: 4px 12px;
}
.gs-vcard__quote { font-size: 15px; line-height: 1.5; color: var(--neutral-800, #232330); }
.gs-vcard__who { margin-top: 4px; }
.gs-vcard__who strong { display: block; font-weight: 500; font-size: 16px; color: var(--neutral-900); }
.gs-vcard__who span { font-size: 14px; color: var(--neutral-500, #8a8a97); }
/* quote-only card (no photo) */
.gs-vcard--quote .gs-vcard__body { gap: 18px; padding: 28px 22px; }

/* mobile-only "View More" truncation: script.js marks the overflow cards
   .gs-vcard--extra (document order, first 3 kept); this supplies the
   hidden/revealed states and the trigger button. */
.gs-voices__more {
  display: none;
  margin: 8px auto 0;
  padding: 12px 28px;
  border-radius: 999px;
  border: 1px solid var(--neutral-300, #c8c8d2);
  background: #fff;
  color: var(--neutral-900);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.gs-vcard--extra { display: none; }
.gs-voices.is-expanded .gs-vcard--extra { display: block; }
.gs-voices.is-expanded .gs-voices__more { display: none; }

/* seamless-loop clones (added by script.js) stay hidden everywhere except
   the desktop auto-scroll below, so static and mobile views show one set */
.gs-vcard--clone { display: none; }

/* desktop auto-scroll: the grid becomes a fixed-height viewport and each
   column translates by exactly one set (-50% of the doubled content). The
   loop uses a trailing margin on every card instead of the column gap so
   the cloned set tiles with no seam; the middle column runs in reverse. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .gs-voices__grid { max-height: 764px; overflow: hidden; }
  .gs-vcard--clone { display: block; }
  .gs-vcol { gap: 0; animation: gs-vscroll-up 48s linear infinite; will-change: transform; }
  .gs-vcol > .gs-vcard { margin-bottom: 24px; }
  .gs-vcol:nth-child(2) { animation-name: gs-vscroll-down; }
  /* hover the wall to freeze all three columns and read a card */
  .gs-voices__grid:hover .gs-vcol { animation-play-state: paused; }
}
@keyframes gs-vscroll-up   { from { transform: translateY(0); }    to { transform: translateY(-50%); } }
@keyframes gs-vscroll-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }

/* motion only when the user hasn't asked to reduce it — one turn, holds, stops */
@media (prefers-reduced-motion: no-preference) {
  .eco-orbit.spin              { animation: ecoOrbit 1.6s cubic-bezier(.4, 0, .2, 1) forwards; }
  .eco-orbit.spin .eco-b-inner { animation: ecoOrbitCounter 1.6s cubic-bezier(.4, 0, .2, 1) forwards; }
}

/* ---------- ibja-igm gold benchmark ---------- */
.benchmark {
  padding: 60px 40px;
  text-align: center;
  max-width: var(--maxw);
  margin: 0 auto;
}
/* "Introducing" is the small sans kicker above the serif title, so it drops the
   shared .section-lead serif-ish scale */
.benchmark .section-title { margin-bottom: 22px; }
.benchmark .section-title .section-lead {
  font-family: var(--sans);
  font-size: clamp(16px, 1.5vw, 20px);
  letter-spacing: 0;
  color: var(--neutral-800);
  margin-bottom: 12px;
}
.benchmark .section-title em { font-size: clamp(27px, 3.4vw, 40px); }
.benchmark .section-title .gold { color: var(--gold-500); }
.benchmark-sub {
  max-width: 700px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 24px;
  color: var(--neutral-500);
}
.benchmark-grid {
  margin-top: 68px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.benchmark-card { display: flex; flex-direction: column; align-items: center; }
/* the four exports aren't a common size (Glass is 94px, the rest 80px), so a
   fixed box + contain keeps them optically equal */
.benchmark-icon { width: 72px; height: 72px; object-fit: contain; margin-bottom: 18px; }
.benchmark-card h3 { font-weight: 400; margin-bottom: 10px; }
.benchmark-card h3 em { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.25; }
.benchmark-card p {
  max-width: 260px;
  font-size: 14px;
  line-height: 21px;
  color: var(--neutral-500);
}
.benchmark-card p b { font-weight: 700; color: var(--neutral-800); }

/* ---------- offerings ---------- */
.offerings {
  padding: 60px 40px;
  text-align: center;
  /* the shared .wave-top / .wave-bottom fades anchor to this box, so it has to be
     positioned, and clipped horizontally to hide their 2px-per-side bleed */
  position: relative;
  overflow-x: clip;
  /* background: linear-gradient(180deg, #fff 0%, #f7f5f0 100%); */
   background:
    radial-gradient(80% 60% at 50% 0%, #fdf6e8 0%, transparent 60%),
    radial-gradient(90% 70% at 50% 100%, #f6ecd9 0%, transparent 55%),
    #fffdf9;
}



@media (max-width: 428px) {
  .offerings{
    padding: 60px 0px;
  }
}

.offerings-grid {
  max-width: 1316px;          /* 4 × 320 + 3 × 12 gap, per Figma */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.offer-card {
  position: relative;
  background: #fff;
  border: 0.8px solid #eeeef1;
  border-radius: 6px;
  min-height: 452px;
  padding: 40px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}
/* subtle grey glow behind the product (Figma: Neutral-200 ellipse, blur 25) */
.offer-card::after {
  content: "";
  position: absolute;
  top: 136px; left: 50%;
  width: 555px; height: 356px;
  transform: translateX(-50%);
  background: #eeeef1;
  border-radius: 9999px;
  filter: blur(25px);
  pointer-events: none;
  z-index: 0;
}
.offer-brand { margin: 0 0 6px; font-size: 15px; font-weight: 700; letter-spacing: .04em; position: relative; z-index: 2; }
.offer-brand-lockup { display: flex; align-items: center; gap: 4px; position: relative; z-index: 2; }
/* small brand-mark badge (Elanzia/RammudraIcon/BullionX/GoldSenseIcon svgs),
   sitting bare as the card's first child, above the big italic ghost word */
.offer-card > img:first-child { height: 16px; width: auto; display: block; margin: 0 0 6px; position: relative; z-index: 2; }
.brand-rm-icon { width: 18px; height: auto; }
.brand-rm-text { width: 90px; height: auto; }
.brand-elanzia  { color: #336b62; font-family: var(--serif); font-weight: 400; font-size: 18px; }  /* Figma teal */
.brand-rammudra { color: #8b3a15; }   /* Warning-800 */
.brand-bullionx { color: #8b3a15; }   /* Warning-800 (X is Gold-400) */
.brand-goldsense{ color: #cba65b; letter-spacing: .18em; font-size: 13px; }   /* IGM Gold-400 */
.offer-ghost {
  font-family: var(--serif);
  font-style: italic;
  font-size: 60px;
  color: #c8c8d2;
  line-height: 60px;
  margin-bottom: -34px;
  position: relative;
  z-index: 1;
}
.offer-img {
  width: 250px;
  max-width: 100%;
  height: 210px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.2));
  top:0px
}
/* fixed-height box (not just max-width) so every card's product shot occupies
   the same footprint under its heading regardless of the source asset's own
   aspect ratio — the coin/device photos are ~3:2, the BullionX wordmark SVG
   is a flat ~4:1, and without a shared box the flatter asset renders much
   shorter, leaving a big gap before the description on that card. */
.offer-icon {
  position: relative;
  z-index: 2;
  width: 233px;
  max-width: 100%;
  height: 148px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.offer-icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.2));
}
.offer-desc { font-size: 14px; color: #606070; line-height: 20px; margin-top: 18px; position: relative; z-index: 2; }
.offer-tags {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin-top: 16px;
  position: relative;
  z-index: 2;
}
.offer-tags span {
  height: 24px;
  padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(214,186,129,.14);
  color: var(--gold-500);
  font-size: 12px; line-height: 16px; font-weight: 500;
}
.offer-card .btn { margin-top: 20px; position: relative; z-index: 2; }
.offer-card .btn .arrow { font-size: 13px; line-height: 1; }

/* ---------- why igm ---------- */
/* overflow-x: clip trims the ::after curve's -8% side bleed (which was pushing the
   document ~94px wider than the viewport) while leaving overflow-y visible, so the
   curve still spills into the section below as intended */
.why-igm { padding: 60px 40px; text-align: center; position: relative; overflow-x: clip; }
/* wave dividers (Figma Vector 1344/1345) — before & after the section */
/* wave dividers — same technique as .hero-wave (border-radius curve) */
/* .why-igm::before,
.why-igm::after {
  content: "";
  position: absolute;
  left: -8%; right: -8%;
  height: 90px;
  background: #fff;                
  pointer-events: none;
  z-index: 2;
} */

.why-igm::after {
  content: "";
  position: absolute;
  left: -8%; right: -8%;
  height: 90px;
  background: #fff;                 
  pointer-events: none;
  z-index: 2;
}
/* white curves UP into the section above, and DOWN into the section below */
.why-igm::before { bottom: 100%; border-radius: 100% 100% 0 0 / 200% 200% 0 0; }
.why-igm::after  { top: 100%;    border-radius: 0 0 100% 100% / 0 0 200% 200%; }
.why-hero { position: relative; height: 380px; display: flex; align-items: center; justify-content: center; }
.why-ghost {
  position: absolute;
  top: 25%; left: 50%;
  transform: translate(-50%, -70%);
  width: min(481px, 70vw);
  height: auto;
}
.why-nugget {
  position: relative;
  width: min(443px, 80vw);
  aspect-ratio: 443/236;
}
.nug-piece {
  position: absolute;
  inset: 0;
  background-image: url("/assets/img/why-nugget2.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translate(var(--dx), var(--dy));
  transition: transform 1.9s cubic-bezier(.22, 1.08, .36, 1), opacity 1.1s ease;
}
/* fragments fly in from 6 directions and assemble — exact offsets from Figma motion keyframes */
.nug-piece.p1 { clip-path: polygon(0% 0%, 20% 0%, 26% 100%, 0% 100%);     --dx: -230px; --dy: 241px; }  /* from bottom-left  (1:1659) */
.nug-piece.p2 { clip-path: polygon(20% 0%, 38% 0%, 33% 100%, 26% 100%);   --dx: -215px; --dy: -215px; } /* from top-left     (1:1653) */
.nug-piece.p3 { clip-path: polygon(38% 0%, 54% 0%, 50% 100%, 33% 100%);   --dx: 0px;    --dy: -355px; } /* from top          (1:1665) */
.nug-piece.p4 { clip-path: polygon(54% 0%, 68% 0%, 72% 100%, 50% 100%);   --dx: 0px;    --dy: 330px; }  /* from bottom       (1:1668) */
.nug-piece.p5 { clip-path: polygon(68% 0%, 85% 0%, 89% 100%, 72% 100%);   --dx: 203px;  --dy: -203px; } /* from top-right    (1:1656) */
.nug-piece.p6 { clip-path: polygon(85% 0%, 100% 0%, 100% 100%, 89% 100%); --dx: 230px;  --dy: 204px; }  /* from bottom-right (1:1662) */
.why-hero.visible .nug-piece { opacity: 1; transform: translate(0, 0); }
.why-grid {
  max-width: 1000px;
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 24px;
}
.why-icon { width: 48px; height: 48px; margin: 0 auto 16px; }
.why-item h3 { font-weight: 400; }
.why-item h3 em { font-size: 28px; line-height: 39px; }
.why-item p  { margin-top: 4px; font-size: 15px; color: #606070; line-height: 22px; }

/* ---------- academy ---------- */
.academy {
  position: relative;
  overflow-x: clip;          /* .academy-wave-top's scale(1.02) bleeds ~12px per side */
  padding: 60px 40px 110px;
  text-align: center;
  background:
    radial-gradient(80% 60% at 50% 0%, #fdf6e8 0%, transparent 60%),
    radial-gradient(90% 70% at 50% 100%, #f6ecd9 0%, transparent 55%),
    #fffdf9;
}
.academy::before,
.academy::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 53px;
  background-image: url("/assets/img/wave.svg");
  background-size: 100% 100%;
  pointer-events: none;
}






.academy::before { top: 0; transform: scaleY(-1); }
.academy::after  { bottom: 0; transform: scaleY(-1); }
.academy-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  width: 100%;
  height: auto;
  z-index: 3;
  pointer-events: none;
}
.academy-wave-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 45px !important;
  height: auto;
  transform: scale(1.02);
  width: calc(100% + 4px);
  z-index: 3;
  pointer-events: none;
}
.academy-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 14px;
  margin-top: 60px;
}
.logo-mark.dark { color: var(--neutral-900); font-size: 18px; }
.acad-x { color: #b9b3a6; }
.acad-partner {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8c8471;
  border: 1px solid #e4ddcb;
  padding: 6px 10px;
  background: #fff;
}
.academy .section-title { margin-bottom: 40px; }
.academy .section-title em { display: inline; font-size: clamp(30px, 3.4vw, 40px); }
.academy-grid {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  /* cards cap at 320px and the row is centred, so tiles never stretch wider than
     the card art and any leftover space sits evenly on both sides; minmax lets
     them shrink to fit narrower viewports instead of overflowing */
  grid-template-columns: repeat(4, minmax(0, 320px));
  justify-content: center;
  gap: 18px;
}
.acad-card {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 30px rgba(30, 22, 8, .10);
  text-align: center;
  display: flex;
  flex-direction: column;
}
.acad-img {
  height: 420px;
  border-radius: 6px;
  width: 100%;
  background-size: cover;
  background-position: center;
  padding: 10px;
}
.acad-body {
  position: relative;
  margin: 160px 10px 10px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 18px 16px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.acad-body h3 { font-weight: 400; font-size: 19px; margin-top: 10px; line-height: 1.25; }
.acad-body p  { margin-top: 10px; font-size: 14px; color: var(--neutral-500); line-height: 20 px; flex: 1; letter-spacing: 0%;}
.acad-link { margin-top: 12px; font-size: 14px; }
.acad-link:hover { color: var(--gold-500); }

/* ---------- statement ---------- */
.statement {
  position: relative;
  text-align: center;
  overflow: hidden;
  /* fixed golden background washed with white toward the edges + a bright
     center, so the text reads on a clear area (matches the Figma overlays) */
  background:
    radial-gradient(58% 54% at 50% 50%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, #fff 6%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 58%, #fff 94%),
    #fbf6ea url("/assets/img/statement-bg-crop.png") center / cover no-repeat;
}
/* white curve at the TOP of the statement, curving up toward Academy
   (same technique as .hero-wave) */
.statement-wave {
  position: absolute;
  left: 100%; right: 100%;
  height: 90px;
  background: #fff;
  pointer-events: none;
  z-index: 3;
}
.statement-wave.top { top: -1px; border-radius: 0 0 100% 100% / 0 0 200% 200%; }






/* soft white fade on the left & right edges (matches the Figma side masks) */
/* .statement::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0) 80%, #fff 100%);
} */
.statement-slides {
  position: relative;
  width: 100%;
  height: clamp(360px, 46vw, 640px);
  margin: 0 auto;
  overflow: hidden;
}
/* only the TEXT slides now — the background stays put.
   the slide is just a centering wrapper; the <p> inside holds the text */
.statement-slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  transform: translateX(100%);
  /* spring(mass 1, stiffness 100, damping 15) ≈ 1.28s with slight overshoot */
  transition: transform 1.28s cubic-bezier(.22, 1.1, .36, 1);
  pointer-events: none;
}
.statement-slide p {
  margin: 0;
  max-width: 900px;
  text-align: center;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 52px);
  line-height: 1.4;
  color: #232330;
}
/* highlighted keywords: gold-gradient italic serif with a soft glow.
   diagonal gradient #CFB38D 4% → #EAB338 24% → #66471B 121% (per Figma) */
.statement-slide em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  background: linear-gradient(114deg, #cfb38d 4%, #eab338 24%, #66471b 121%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* the blurred 52% gold layer from Figma, as a tight glow around the letters */
  filter: drop-shadow(0 0 4px rgba(234, 179, 56, .5));
}
.statement-slide.active { transform: translateX(0); }
.statement-slide.exit   { transform: translateX(-100%); }
.statement-slide.no-trans { transition: none; }

/* ---------- focus / news (matched to Figma "IGM IN FOCUS") ---------- */
.focus {
  position: relative;
  padding: 64px 24px 100px;
  text-align: center;
  /* white base with a soft blurred gold glow behind the header (D6BA81) */
  background:
    radial-gradient(46% 30% at 50% 26%, rgba(214, 186, 129, .30) 0%, transparent 62%),
    #fff;
}
/* Figma's IGM Focus vector artwork — a soft concentric gold blob (7% opacity,
   baked into the SVG) centred behind the header, bleeding down into the
   card row. Sits above the radial-gradient glow but below all real content. */
.focus-vector-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 390px;
  max-width: 90%;
  height: auto;
  z-index: 0;
  pointer-events: none;
}
.focus > .pill,
.focus > .section-title,
.focus-grid {
  position: relative;
  z-index: 1;
}
/* Vector 1344 export — crisp edge is at the top of the source PNG, so it's
   flipped to put the crisp edge at the bottom, flush against the section
   boundary (same technique as .academy::before/::after mirroring wave.svg) */
.focus-wave-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  transform: scaleY(-1);
  z-index: 3;
  pointer-events: none;
}
/* header block */
.focus .section-title { margin: 26px 0 40px; }
.focus .section-title em {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1;
  letter-spacing: .44px;
  color: #0d0f1a;
}
.focus .section-title .section-sub {
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 40px;
  letter-spacing: -.6px;
  font-weight: 300;
  color: #0d0f1a;
  margin-top: 2px;
}
/* pill: plain dark label on the section (no visible chip, per design) */
.focus .pill {
  background: transparent;
  color: #0d0f1a;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0;
  text-transform: none;
  padding: 1px 10px;
}
/* horizontal carousel: 3 cards sit in view, the rest (we now have 6) scroll in.
   grid-auto-columns splits the 1088px viewport into 3 cards + the two 32px gaps,
   so exactly three land in frame; vertical padding keeps the card shadow un-clipped
   once overflow-x turns overflow-y into auto */
.focus-grid {
  max-width: 1088px;
  margin: 0 auto;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 64px) / 3);
  gap: 32px;
  padding: 16px 0 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.focus-grid::-webkit-scrollbar { display: none; }
.focus-card {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(20, 16, 8, .06);
  scroll-snap-align: start;
}
.focus-img {
  position: relative;
  height: 180px;
  border-radius: 6px;
  overflow: hidden;
}
/* photo fills the frame; the IGM banner sits on top of it (see .focus-banner) */
.focus-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* dark overlay on the thumbnail (Figma: rgba(0,0,0,.20)) */
.focus-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .20);
}
/* IGM lower-third: gold lockup on a dark strip with the city on the right,
   the way each event still is captioned in the source footage */
.focus-banner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;               /* above .focus-img::after so the caption stays crisp */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(to top, rgba(10, 4, 6, .9), rgba(10, 4, 6, .55));
}
.focus-banner-logo { height: 26px; width: auto; display: block; }
.focus-banner-city {
  font-size: 10px;
  line-height: 1;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold-300);
}
/* play button: plain white triangle over the thumbnail (no chip), middle card */
.focus-img .play {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
}
.focus-body {
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.focus-body h3 {
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: #0d0f1a;
  text-align: center;
  /* reserve two title lines (28px × 2) so 1- and 2-line headings claim the
     same height; centred inside the box so the description/meta rows below
     stay level across every card in the row */
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* description clamped to 2 lines with ellipsis (matches Figma) */
.focus-body p {
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: #606070;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* clamp caps the max at 2 lines; this reserves the same 2 lines as a floor so
     a 1-line description still holds the meta row level with its neighbours */
  min-height: 44px;
}
.focus-meta {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--gold-500);
  flex-wrap: wrap;
}
/* meta items: 14px gold icon + gold label, spaced (no separators, per the stills) */
.focus-meta li { display: flex; align-items: center; gap: 4px; }
.focus-meta li svg { width: 14px; height: 14px; fill: var(--gold-500); flex: none; }
.carousel-dots { display: flex; gap: 5px; justify-content: center; margin-top: 30px; }
.carousel-dots span { width: 6px; height: 3px; border-radius: 1px; background: #aeaeba; }
.carousel-dots .active { width: 26px; background: #606070; }

/* ---------- faq ---------- */
.faq-section {
  background: #050507;
  padding: 60px 40px 90px;
  position: relative;
  overflow: hidden;
}
/* Figma's Vector 1344 export — white dome that fades into the black FAQ,
   bleeding 2px past each edge so no seam shows at fractional widths */
.faq-wave-top {
  position: absolute;
  top: -1px;
  left: -2px;
  width: calc(100% + 4px);
  max-width: none;
  height: auto;
  z-index: 2;
  pointer-events: none;
}
.faq-inner { position: relative; z-index: 3; max-width: 720px; margin: 40px auto 0; text-align: center; }
.faq-inner .section-title { margin-bottom: 26px; }
.faq {
  text-align: left;
  border-bottom: 1px solid #26262e;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  color: #fff;
  font-size: 19px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "⌄"; color: #9a9aa4; transition: transform .2s; }
.faq[open] summary::after { transform: rotate(180deg); }
/* questions read upright: the <em> wrapper in the markup is only there for the
   serif face, not the slant — the italic now belongs to the FAQ heading */
.faq summary em { font-style: normal; }
.faq p {
  color: #b9b9c2;
  font-size: 14px;
  line-height: 1.65;
  padding: 0 0 22px;
}

/* ---------- footer ---------- */
.footer {
  position: relative;
  /* FooterBG art carries the warm gold sweep; the gradient on top darkens the
     edges so it meets the black FAQ cleanly and keeps the link columns legible */
  background:
    linear-gradient(180deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.5) 28%, rgba(0,0,0,.5) 72%, rgba(0,0,0,.7) 100%),
    url("/assets/img/FooterBG.png") center / cover no-repeat,
    #000;
  color: #fff;
  padding: 70px 40px 40px;
  text-align: center;
}
.footer-logo { font-size: 56px; padding: 3px 14px; }
.footer-logosub { display: block; margin-top: 8px; font-weight: 700; font-size: 14px; }
.footer-logo-img { height: 44px; width: auto; margin: 0 auto; filter: brightness(0) invert(1); }
.footer-rule { border: 0; border-top: 1px solid #232329; max-width: 1000px; margin: 34px auto; }
.footer-grid {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: left;
}
.footer-col h4 { font-size: 14px; font-weight: 700; margin-bottom: 14px; }
.footer-col a {
  display: block;
  font-size: 13px;
  color: #a2a2ab;
  margin-bottom: 9px;
}
.footer-col a:hover { color: var(--gold-300); }
.footer-social {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 50px;
}

.footer-social-partner {
  display: flex;
  justify-content: center;
  gap: 14px;
}
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #86868c;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.footer-social-partner a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #86868c;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.footer-brand{
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-social a:hover { background: var(--gold-300); }

.footer-social-partner a:hover { background: var(--gold-300); }
.footer-legal { margin-top: 44px; font-size: 12px; color: #9a9aa2; }
.footer-legal a:hover { color: #fff; }
.footer-copy { margin-top: 10px; font-size: 12px; color: #7c7c85; }

/* ---------- sticky enquiry bar ---------- */
.enquiry-bar {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
}
.enquiry-pill {
  background: #fff;
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 14px;
  color: var(--neutral-900);
  box-shadow: 0 8px 26px rgba(0,0,0,.25);
}
.enquiry-pill em { margin-left: 4px; }
.wa-btn {
  /* width: 46px; height: 46px; */
  border-radius: 50%;
  /* background: #25d366; */
  /* color: #fff; */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  /* box-shadow: 0 8px 26px rgba(0,0,0,.25); */
}

/* ---------- image slots ----------
   Replace these gradients with real exports from Figma:
   right-click layer in Figma → Export → save into /assets/img/ and
   swap e.g.  background-image: url("/assets/img/vision-jewellery.jpg");
------------------------------------ */
.img-jewellery { background-image: url("/assets/img/vision-1.webp"), linear-gradient(135deg, #3a1f24 0%, #6b3b2a 50%, #caa15a 100%); }
.img-bars      { background-image: url("/assets/img/vision-2.webp"), linear-gradient(135deg, #d8cdb8 0%, #e9d9ae 50%, #b98f3e 100%); }
.img-stack     { background-image: url("/assets/img/vision-3.webp"), linear-gradient(135deg, #c9b78a 0%, #e6d194 45%, #8f8f97 100%); }
.img-elanzia   { background-image: url("/assets/img/offer-elanzia.png"), radial-gradient(60% 60% at 50% 45%, transparent 70%); background-size: cover, 60% 60%; }
.img-rammudra  { background-image: url("/assets/img/Rammudra.png"), radial-gradient(60% 60% at 50% 45%, transparent 70%);  background-size: cover, 30% 30%; }
/* Rammudra.png is 320x159 — much wider than the other three product shots, so
   `cover` scales it to 422x210 and crops the coins hard at both edges. Sizing
   by width instead keeps more of the lockup visible. Tune --coin-w only.
   The partner page sets its own --coin-w on .poffer .img-rammudra. */
.offerings .img-rammudra {
  --coin-w: 145%;
  background-size: var(--coin-w) auto, 30% 30%;
}
.img-bullionx  { background-image: url("/assets/img/offer-bullionx.png"), radial-gradient(60% 60% at 50% 45%, transparent 70%);  background-size: cover, 50% 50%;}
.img-goldsense { background-image: url("/assets/img/offer-goldsense.png"), radial-gradient(60% 60% at 50% 45%, transparent 70%);  background-size: cover, 50% 50%; }
.img-nugget {
  background-image: url("/assets/img/why-nugget.png");
  background-size: 168% 119%;
  background-position: 55.5% 38.5%;
  background-repeat: no-repeat;
}
.img-bpmi      { background-image: url("/assets/img/acad-bpmi.webp"), linear-gradient(135deg, #7a4a10 0%, #d99a2b 60%, #f4d489 100%); }
.img-gdsp      { background-image: url("/assets/img/acad-gdsp.webp"), linear-gradient(135deg, #23425c 0%, #3f6d8e 60%, #b9d2e2 100%); }
.img-jdep      { background-image: url("/assets/img/acad-jdep.webp"), linear-gradient(135deg, #cbb9a5 0%, #e8dccb 60%, #f5efe4 100%); }
.img-jbsp      { background-image: url("/assets/img/acad-jbsp.webp"), linear-gradient(135deg, #b8a894 0%, #d9cbb8 60%, #efe7da 100%); }
.img-talk      { background-image: url("/assets/img/news-thumb.png"), linear-gradient(135deg, #4a2c17 0%, #8a5a2b 55%, #2c1c10 100%); }
.acad-logo     { height: 44px; width: auto; }

/* ---------- animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
.reveal.visible { opacity: 1; transform: none;    position: relative;}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px) scale(.97);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal-stagger.visible > * { opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: .12s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: .24s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: .36s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: .48s; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: .60s; }
.reveal-stagger.visible > *:nth-child(7) { transition-delay: .72s; }
/* per-child reveal: when a stagger group is taller than the viewport (mobile,
   where the grids collapse to one column) script.js observes each child instead
   of the group, so a child carries .visible itself. No nth-child delay applies
   here — they arrive one at a time, so each animates the moment it scrolls in. */
.reveal-stagger > .visible { opacity: 1; transform: none; }
.navbar { transition: background .35s ease, backdrop-filter .35s ease; }
.navbar.scrolled {
  position: fixed;
  background: rgba(5, 5, 10, .65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
.hero-content > * { animation: heroIn 1s cubic-bezier(.22,.61,.36,1) both; }
.hero-content > *:nth-child(2) { animation-delay: .18s; }
.hero-content > *:nth-child(3) { animation-delay: .34s; }
.hero-content > *:nth-child(4) { animation-delay: .5s; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > *, .hero-content > * { transition: none; animation: none; opacity: 1; transform: none; }
  /* the rotating tagline reveals itself via animation, so pin the first line
     visible (and hide the rest) when motion is suppressed */
  .about-tagline__line { animation: none; }
  .about-tagline__line:first-child { opacity: 1; }
}

/* ---------- shared enquire modal (enquire-modal.html partial) ----------
   One instance per page; any [data-modal-open="enquire-modal"] button opens
   it (see script.js). Shared so the BPMI page and the program-detail pages
   (GDSP/JDEP/JBSP) don't each carry their own copy. */
.site-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.site-modal.is-open { display: flex; }
.site-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 15, 26, .6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.site-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 10px;
  padding: 34px 30px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
}
.site-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #f2f2f2;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--neutral-900);
}
.site-modal__close:hover { background: #e8e8e8; }
.site-modal h3 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 28px; margin-bottom: 6px; }
.site-modal__sub { font-size: 13px; color: var(--neutral-500); margin-bottom: 22px; }

.site-form { display: flex; flex-direction: column; gap: 14px; }
.site-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.site-form input,
.site-form textarea {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--neutral-900);
}
.site-form input:focus,
.site-form textarea:focus { outline: none; border-color: var(--gold-500); }
.site-form textarea { resize: vertical; min-height: 90px; }
.site-form .btn { margin-top: 4px; align-self: flex-start; }
.site-modal.is-submitted .site-form { display: none; }
.site-form__success { display: none; text-align: center; padding: 20px 0; font-size: 15px; }
.site-modal.is-submitted .site-form__success { display: block; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .offerings-grid, .benchmark-grid { grid-template-columns: repeat(2, 1fr); }
  /* keep the capped-width, centred cards — just two per row now (justify-content
     is inherited from the base rule) */
  .academy-grid { grid-template-columns: repeat(2, minmax(0, 320px)); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .benchmark-grid { gap: 48px 32px; }
}
@media (max-width: 900px) {
  .vision-grid, .focus-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  /* The ring used to collapse into a static 2-column grid here, which threw away
     the fly-in, the gold ring, the pulse and the 45° orbit. Instead the 548×595
     stage is kept intact and scaled down to fit — same animation, smaller. The
     stage keeps its full-size layout box, so the margins below pull the surplus
     back: symmetric negative inline margins re-centre a box wider than its
     container, and the bottom margin removes the empty space the scale leaves. */
  .eco-ring {
    transform-origin: top center;   /* all the scale surplus falls to the bottom */
    margin-inline: calc((100% - 548.06px) / 2);
    margin-bottom: calc(595.58px * (var(--eco-fit) - 1));
  }
  .nav-left { display: none; }
  .nav-subnav, .nav-subnav.is-open { display: none; }
  .nav-inner { grid-template-columns: 1fr auto 1fr; }
  .nav-right { display: none; }
  /* explicit column + row placement, not DOM order: .nav-burger is the first
     child (so it doesn't shift focus order before the logo), but it belongs
     in the same right-hand column .nav-right used to occupy. Both need an
     explicit grid-row too, or auto-placement pushes the second explicit-column
     item onto a new row (leaving the two vertically unaligned). */
  .nav-logo { grid-column: 2; grid-row: 1; }
  .nav-burger { display: flex; grid-column: 3; grid-row: 1; justify-self: end; }
  /* voices: two columns, no auto-scroll below this width */
  .gs-voices__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .offerings-grid, .academy-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  /* voices: single stacked column with the "View More" toggle */
  .gs-voices { padding: 64px 20px; }
  .gs-voices__grid { grid-template-columns: 1fr; }
  /* :not(.is-expanded) so the button hides once its cards are revealed
     (otherwise :has(.gs-vcard--extra) keeps matching and outranks the
     is-expanded hide rule on source order) */
  .gs-voices:has(.gs-vcard--extra):not(.is-expanded) .gs-voices__more { display: block; }
  /* the four why-points stay two-up on phones, same as the benchmark row */
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 420px;
    margin-inline: auto;
    gap: 40px 20px;
  }
  .why-igm { padding-inline: 20px; }
  .why-icon { width: 38px; height: 38px; margin-bottom: 12px; }
  /* "Standardisation" is 205px at the desktop 28px — over any half-width column
     — and it cannot break, so the heading has to scale with the viewport */
  .why-item h3 em { font-size: clamp(15px, 5.2vw, 22px); line-height: 1.3; }
  .why-item p { font-size: clamp(12px, 3.5vw, 14px); line-height: 1.5; }
  /* the four benchmark points stay two-up on phones rather than collapsing to a
     single column — the copy is short enough to read in a half-width column, and
     a 1x4 stack pushed the last point a long way down the page */
  .benchmark-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 420px;
    margin-inline: auto;
    gap: 44px 20px;
  }
  /* narrower gutters buy the columns ~20px each, which is the difference between
     "Transaction-Based" sitting on one line and breaking at its hyphen */
  .benchmark { padding-inline: 20px; }
  .benchmark-icon { width: 58px; height: 58px; margin-bottom: 14px; }
  .benchmark-card h3 { margin-bottom: 8px; }
  /* that heading is one unbreakable 8.6-chars-per-em token, so the type has to
     track the column rather than sit at a fixed size: at 4.6vw it stays inside
     the half-width column from 320px phones upward */
  .benchmark-card h3 em { font-size: clamp(14px, 4.6vw, 20px); }
  .benchmark-card p { font-size: clamp(11px, 3.4vw, 13px); line-height: 1.45; }
  .hero-content { margin-top: 110px; }
  /* object-position:center (the default) just centres the raw ~1.6:1 photo —
     each slide's actual subject (the phone/device) sits off to one side
     within the frame, so a narrow crop cuts it off unless the crop point
     is shifted toward where the subject actually is */
  .hero-carousel img:nth-of-type(1) { object-position: 68% center; } /* elanzia: phone sits right of centre */
  .hero-carousel img:nth-of-type(2) { object-position: 30% center; } /* rammudra: phone sits left of centre */
  .hero-carousel img:nth-of-type(3) { object-position: 46% center; } /* goldsense: device already near-centred */
  .hero-pillars { gap: 12px; justify-content: flex-start; }
  /* the four pillars wrap to two rows on phones — force the break at the middle
     separator (4th li) by making it a full-width, invisible row break, so each
     row is a clean "word · word" pair instead of leaving that dot orphaned at
     the end of the first line */
  .hero-pillars li:nth-child(4) { flex-basis: 100%; height: 0; background: none; }
  /* two-up on phones: column flow (not the default row flow) so each column
     fills top-to-bottom in DOM order — left column gets About Us + Our
     Offerings, right column gets Academy + Policies, matching the layout brief */
  .footer-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto auto; grid-auto-flow: column; }
  .enquiry-pill { font-size: 12px; padding: 10px 14px; }
  .navbar { padding: 14px 20px; }
}

/* ---------- mobile: IGM Academy ----------
   The Figma timeline moves the card row by exactly one 375px step (the mobile
   frame width) per beat, so on phones the four cards stop stacking and become a
   swipeable, snapping track instead. Entrance timings are that export's own
   durations: 1.02s for the single elements, 1.28s for the card row. */
@media (max-width: 640px) {
  .academy-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78vw;
    max-width: none;
    /* the desktop rule centres the cards; on this overflowing scroll track that
       would push the first cards into unreachable negative scroll space, so pack
       them from the start instead */
    justify-content: start;
    gap: 14px;
    /* full-bleed track: cancel .academy's 40px side padding, then re-add it as
       the scroller's own padding so card 1 stays inset and the last card can
       still scroll clear of the right edge */
    margin-inline: -40px;
    padding: 6px 40px 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 40px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .academy-grid::-webkit-scrollbar { display: none; }
  .acad-card { scroll-snap-align: start; }
  /* The white .acad-body lives INSIDE .acad-img; a fixed image height clips it
     off (its content overflows past the tile and the card's overflow:hidden cuts
     it). Let the tile grow to fit the body instead, so the artwork reads as a
     ~150px banner at the top and the white card sits fully below it. width:auto
     lets the image fill the 78vw card rather than its fixed 320px desktop width. */
  .acad-img { height: auto; width: auto; }
  /* margin-top sets the image banner height; sides/bottom are 0 so the only frame
     around the white card is the image tile's own 10px padding — a clean, even
     10px border matching Figma (rather than the 20px the body's own margins added) */
  .acad-body { margin: 150px 0 0; }

  .academy .reveal {
    transform: translateY(24px);
    transition: opacity 1.02s var(--spring), transform 1.02s var(--spring);
  }
  .academy .reveal.visible { transform: none; }
  /* the cards drift in from the left, never the right — a positive X offset
     inside a horizontal scroller would widen the scrollable area mid-animation
     and let the track be swiped into empty space */
  .academy-grid.reveal-stagger > * {
    transform: translateX(-40px);
    transition: opacity 1.28s var(--spring), transform 1.28s var(--spring);
  }
  .academy-grid.reveal-stagger.visible > *,
  .academy-grid.reveal-stagger > .visible { opacity: 1; transform: none; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .academy .reveal,
  .academy-grid.reveal-stagger > * { transition: none; opacity: 1; transform: none; }
}

/* ---------- mobile: IGM in Focus ----------
   Same swipeable snapping track as the academy cards above, on the same spring.
   Only the bleed differs: .focus is padded 24px at the sides where .academy
   uses 40px, so the track has to cancel a different amount to reach the edge. */
@media (max-width: 640px) {
  .focus-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78vw;
    max-width: none;
    gap: 14px;
    margin-inline: -24px;
    padding: 6px 24px 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .focus-grid::-webkit-scrollbar { display: none; }
  .focus-card { scroll-snap-align: start; }

  .focus .reveal {
    transform: translateY(24px);
    transition: opacity 1.02s var(--spring), transform 1.02s var(--spring);
  }
  .focus .reveal.visible { transform: none; }
  .focus-grid.reveal-stagger > * {
    transform: translateX(-40px);
    transition: opacity 1.28s var(--spring), transform 1.28s var(--spring);
  }
  .focus-grid.reveal-stagger.visible > *,
  .focus-grid.reveal-stagger > .visible { opacity: 1; transform: none; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .focus .reveal,
  .focus-grid.reveal-stagger > * { transition: none; opacity: 1; transform: none; }
}

/* ---------- mobile: the IGM vision ----------
   A centred carousel rather than the start-aligned tracks used by the academy
   and focus rows: the card snaps to the middle of the screen and shows a sliver
   of the cards either side of it. 86vw of card plus 7vw of padding per side
   fills the viewport exactly, and the neighbours show through that padding as
   the track scrolls. */
@media (max-width: 640px) {
  .vision-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86vw;
    max-width: none;
    gap: 12px;
    margin-inline: -40px;      /* cancels .vision's side padding to go full-bleed */
    padding: 6px 7vw 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .vision-grid::-webkit-scrollbar { display: none; }
  .vision-card { scroll-snap-align: center; }

  .vision .reveal {
    transform: translateY(24px);
    transition: opacity 1.02s var(--spring), transform 1.02s var(--spring);
  }
  .vision .reveal.visible { transform: none; }
  .vision-grid.reveal-stagger > * {
    transform: translateX(-40px);
    transition: opacity 1.28s var(--spring), transform 1.28s var(--spring);
  }
  .vision-grid.reveal-stagger.visible > *,
  .vision-grid.reveal-stagger > .visible { opacity: 1; transform: none; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .vision .reveal,
  .vision-grid.reveal-stagger > * { transition: none; opacity: 1; transform: none; }
}

/* ---------- mobile: our offerings — vertical card stack ----------
   Each card pins a little lower than the one before it, so scrolling slides the
   next card up over the last and leaves a header strip behind: the cards pile
   into a stack instead of scrolling past. Pure scroll-driven — no JS, no
   scroll listener, and it tracks the finger exactly.
   Shared by index.html (.offerings) and partner.html (.poffer): both render
   .offerings-grid > .offer-card. Tune with --stack-top and --peek. */
@media (max-width: 640px) {
  /* bigger entrance travel for the Offerings title on phones than the shared
     .reveal default (28px/.8s) — same pattern as .academy/.focus/.vision
     below: the .reveal.visible reset (opacity:1, transform:none) has equal
     specificity, so it needs its own .visible override here too, or it loses
     the cascade to this rule and the title never returns from the offset */
  .offerings .reveal {
    transform: translateY(55px);
    transition: opacity .8s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
  }
  .offerings .reveal.visible { transform: none; }
  .offerings-grid {
    display: block;            /* grid tracks would size all four as one row set */
    /* the heading scrolls away normally; the stack begins with the first card,
       resting just clear of the navbar once it goes fixed */
    --stack-top: 84px;
    /* Height of the strip each pinned card leaves behind. Cards now carry the
       full 40px Figma top padding, so the strip has to clear that plus the
       tallest brand mark (Rammudra's icon+wordmark lockup, ~23px): 40 + 23 + 3
       breathing = 66. */
    --peek: 66px;
    padding-bottom: 0;
    --stack-gap: 140px;
  }
  .offer-card {
    position: sticky;
    /* fixed card size for mobile (296 × 416), centred in the track; min-height
       override is needed because the base rule sets min-height: 452px */
    width: 296px;
    height: 450px;
    min-height: 0;
    margin-inline: auto;
    /* opting out of the shared reveal: an entrance transform on a sticky element
       fights the pin, and a card that fades cannot hide the card beneath it */
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    /* flush, so a card sliding up meets the one below with no seam */
    margin-bottom: var(--stack-gap);
    /* the lift that separates one card from the stack under it */
    box-shadow: 0 -10px 28px rgba(20, 16, 8, .09);
    /* full 40px Figma top padding (matches desktop and the design spec) */
    padding-top: 40px;
  }
   .offer-card:last-child { margin-bottom: 0; }
  /* Additive hover/press effect on top of the sticky-stack animation (both are
     kept). The base card sets transition:none !important for the pin opt-out;
     re-enable transitions for box-shadow ONLY so the shadow eases — transform
     and opacity stay untransitioned, so the stacking is untouched. */
  .offer-card { transition: box-shadow .3s ease !important; }
  /* Figma "Drop shadow": X0 Y0 · blur 20 · spread 0 · #000 12%, layered over
     the existing stack-lift shadow. :active fires on touch (phones have no hover) */
  .offer-card:hover,
  .offer-card:active {
    box-shadow: 0 -10px 28px rgba(20, 16, 8, .09), 0 0 20px 0 rgba(0, 0, 0, .12);
  }
  /* separate the small brand logo from the large ghost serif under it, which
     otherwise crowd together on the narrower mobile card */
  .offer-card .offer-ghost { margin-top: 18px; }
  /* trimmed just enough that the last card's CTA still clears the fold once the
     three strips above it are pinned */
  .offer-card .offer-img { height: 190px; }
  .offer-card .offer-icon { height: 120px; }
  /* the auto-width CTA reads too small on the narrow card — grow it to a
     full-width, larger-text tap target. flex:none keeps its 48px height inside
     the fixed-height card's flex column (otherwise it shrinks to fit) */
  .offer-card .btn { width: 100%; justify-content: center; font-size: 16px; flex: none; }
  .offer-card:nth-child(1) { top: var(--stack-top); }
  .offer-card:nth-child(2) { top: calc(var(--stack-top) + var(--peek)); }
  .offer-card:nth-child(3) { top: calc(var(--stack-top) + 2 * var(--peek)); }
  .offer-card:nth-child(4) { top: calc(var(--stack-top) + 3 * var(--peek)); }
  .offer-card:nth-child(5) { top: calc(var(--stack-top) + 4 * var(--peek)); }
  .offer-card:nth-child(6) { top: calc(var(--stack-top) + 5 * var(--peek)); }
  /* Tail room. A sticky child stays pinned only while its container's CONTENT
     box is still under it — padding does not count, so this has to be a real
     block, not padding-bottom. Without it the whole stack is shoved up and
     squashed together at the exact moment the last card arrives; with it the
     finished stack (three strips + the last card at full height) holds still
     long enough to be read. */
  /* Kept deliberately short. The pinned header shares this containing block, so
     every pixel of tail is also a pixel the title stays stuck over empty space
     after the cards have gone — which reads as the title sliding down the page.
     18vh is enough to register the assembled stack without leaving a dead gap. */
  .offerings-grid::after { content: ""; display: block; height: 18vh; }
}
/* the stack is driven by scroll position rather than by a timed animation, so
   reduced-motion has nothing to switch off — the cards simply stay put. */
/* eco stage fit — the 548.06px stage plus .ecosystem's 20px side padding needs
   ~588px, so it only has to shrink below that. Stepped rather than fluid because
   calc() can't divide a length by a length to get a scale factor. */
@media (max-width: 600px) { .eco-ring { --eco-fit: .82; } }
@media (max-width: 480px) { .eco-ring { --eco-fit: .70; } }
@media (max-width: 400px) { .eco-ring { --eco-fit: .58; } }
@media (max-width: 360px) { .eco-ring { --eco-fit: .50; } }



.demo::after,.demo::before {
display: none;
}

/* ---------- about page (Genesis redesign) ---------- */
/* Hero is a decorative image band; the white wave bleeds it into the Genesis
   section, so the band sits flush under the fixed navbar. */
.about-hero { position: relative; height: 600px; overflow: hidden; }
.about-hero__img { width: 100%; height: 100%; object-fit: cover; }
.about-hero::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.20); }
.about-hero__wave { position: absolute; left: -2px; bottom: -3px; width: calc(100% + 4px); max-width: none; z-index: 2; }

/* pill variants layered over the shared .pill base */
.pill--onimage { background: rgba(255,255,255,.75); color: var(--gold-800, #5c491f); }
.pill--outline { background: transparent; color: var(--gold-50, #f9f5ec); border: 1px solid rgba(255,255,255,.12); }

/* Genesis intro */
.about-genesis { max-width: 640px; margin: 0 auto; padding: 110px 24px 0; text-align: center; }
.about-genesis__title { margin: 40px 0 20px; }
.about-genesis__title em { font-size: clamp(44px, 6vw, 60px); line-height: 1.06; color: var(--neutral-900); }
.about-genesis__lead { color: var(--neutral-800); font-family: var(--serif); font-style: italic; font-size: clamp(24px, 3vw, 36px); line-height: 1.28; letter-spacing: .01em; }

/* Two overlapping worlds IGM bridges — a single flattened export (captions and
   the woven gold seam are baked into the PNG, which has a transparent field) */
.about-genesis-figure { max-width: 1200px; margin: 56px auto 0; padding: 0 24px; }
.about-genesis-figure img { width: 100%; height: auto; }

/* "and offer a comprehensive range…" outro — live text (not the baked-in image)
   above a decorative gold-bar band cropped from the Genesisframe2 export */
.about-genesis-outro { padding: 96px 24px 0; text-align: center; }
.about-genesis-outro__frame { display: none; }
.about-genesis-outro__text { max-width: 760px; margin: 0 auto; color: var(--neutral-800); font-family: var(--serif); font-style: italic; font-size: clamp(24px, 3vw, 36px); line-height: 1.28; }
.about-genesis-outro__bars { display: block; height: 320px; margin-top: 56px; background: url('/assets/img/about/about-us-assets/Genesisframe2.png') 50% 82% / cover no-repeat; }

/* Rotating tagline. Slides are stacked and cross-faded on a 12s loop; gold
   serif words glow via a duplicated blur (text-shadow). */
.about-tagline { position: relative; overflow: hidden; padding: 40px 24px 80px; }
.about-tagline::before, .about-tagline::after { content: ""; position: absolute; top: 0; bottom: 0; width: 22%; z-index: 2; pointer-events: none; }
.about-tagline::before { left: 0; background: linear-gradient(90deg, #fff 20%, rgba(255,255,255,0)); }
.about-tagline::after { right: 0; background: linear-gradient(270deg, #fff 20%, rgba(255,255,255,0)); }
.about-tagline__viewport { position: relative; height: 200px; }
.about-tagline__line { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; color: var(--neutral-800); font-size: clamp(34px, 4vw, 52px); line-height: 1.4; opacity: 0; animation: aboutTagline 12s infinite; }
.about-tagline__line:nth-child(1) { animation-delay: 0s; }
.about-tagline__line:nth-child(2) { animation-delay: 4s; }
.about-tagline__line:nth-child(3) { animation-delay: 8s; }
.about-tagline__line em { color: var(--gold-warm); font-family: var(--serif); font-style: italic; font-size: 1.08em; text-shadow: 0 0 18px rgba(207,179,141,.55); }
@keyframes aboutTagline {
  0%, 3% { opacity: 0; transform: translateY(12px); }
  8%, 30% { opacity: 1; transform: none; }
  36%, 100% { opacity: 0; transform: translateY(-12px); }
}

/* The IGM Ecosystem — eight capability cards, two per row */
/* lighter white wash than the other bands so the golden texture reads as a
   warm cream->tan band behind the title, not a near-white field */
.about-ecosystem { padding: 110px max(24px, calc((100vw - 1064px) / 2)); text-align: center; background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.5) 22%, rgba(255,255,255,.5) 78%, #fff 100%), url('/assets/img/about/about-us-/assets/img/igm-ecosystem-bg.png') center / cover no-repeat; }
.about-ecosystem__title { margin-bottom: 64px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(40px, 5vw, 52px); line-height: 1.1; color: var(--gold-warm); }
.about-ecosystem__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.eco-card { padding: 4px; border-radius: 8px; overflow: hidden; background: var(--neutral-50); box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.eco-card__media { position: relative; height: 208px; border-radius: 8px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; padding: 28px 24px; }
.eco-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eco-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0), #000); }
.eco-card__media h3 { position: relative; z-index: 2; margin: 0; }
.eco-card__media h3 em { color: var(--neutral-50); font-size: clamp(32px, 3.4vw, 44px); line-height: 1; }
.eco-card p { padding: 24px; color: var(--neutral-600); font-size: 20px; line-height: 1.4; }

/* What we do — full-bleed flattened band (pill, headline and copy baked into
   the PNG, transparent field so it sits on the white page) */
.about-whatwedo { margin: 40px 0; }
.about-whatwedo__frame { width: 100%; height: auto; }
/* the What-We-Do mobile live-text block is desktop-hidden (shown in the 640 block) */
.about-whatwedo__mobile { display: none; }

.about-democratise { max-width: 640px; margin: 0 auto; padding: 88px 24px; text-align: center; }
.about-democratise p { color: var(--neutral-800); font-family: var(--serif); font-style: italic; font-size: clamp(24px, 3vw, 36px); line-height: 1.28; }

/* How we do it — four numbered steps, image cards alternating left/right */
.about-approach { padding: 110px max(24px, calc((100vw - 1240px) / 2)); background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.82) 28%, rgba(252,248,243,.9) 100%), url('/assets/img/about/about-us-/assets/img/How-we-do-it-bg.png') center / cover no-repeat; }
.about-approach__head { text-align: center; margin-bottom: 164px; }
/* this pill runs one step larger than the shared .pill base, per the How-we-do-it spec */
.about-approach__head .pill { padding: 1px 10px; font-size: 15px; line-height: 22px; }
.about-approach__head h2 { margin-top: 64px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 60px; line-height: 76px; color: var(--neutral-900); word-wrap: break-word; }
.about-approach__head h2 em { color: var(--gold-warm); font-size: inherit; line-height: inherit; }
.approach-step { display: flex; justify-content: flex-start; }
.approach-step--right { justify-content: flex-end; }
/* steps overlap vertically (-260) so each left block interlocks alongside the
   previous right card — the offset zigzag from the spec. Safe because the two
   columns never share horizontal space (572 + 572 < the 1240 track). */
.approach-step + .approach-step { margin-top: -260px; }
.approach-step__inner { width: 572px; max-width: 100%; display: flex; flex-direction: column; gap: 48px; }
.approach-step__intro { display: flex; align-items: flex-end; gap: 36px; padding-right: 24px; }
.approach-step__num { flex: 0 0 auto; color: var(--gold-100); font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 140px; line-height: 100px; opacity: .7; word-wrap: break-word; }
.approach-step__intro p { color: var(--neutral-600); font-size: 20px; line-height: 1.4; }
.approach-step__card { position: relative; height: 600px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; }
.approach-step__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.approach-step__card::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.30); }
.approach-step__card h3 { position: relative; z-index: 2; margin: 0; text-align: center; }
.approach-step__card h3 em { color: var(--neutral-50); font-size: 48px; line-height: 1.15; }

/* FAQ — reuses the shared dark .faq accordion */
.about-faq { position: relative; overflow: hidden; background: #060708; padding: 132px 80px 60px; }
.about-faq__inner { max-width: 1000px; margin: 0 auto; }
.about-faq__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 20px; }
.about-faq__title { color: var(--gold-50, #f9f5ec); font-family: var(--serif); font-style: italic; font-size: clamp(34px, 4vw, 44px); line-height: 1.27; letter-spacing: .01em; }
.about-faq__list .faq summary { font-family: var(--serif); font-style: italic; font-size: 24px; }

@media (max-width: 900px) {
  .about-ecosystem__grid { grid-template-columns: 1fr; }
  .approach-step, .approach-step--right { justify-content: center; }
  /* centred + stacked here, so drop the -260 overlap or the columns collide */
  .approach-step + .approach-step { margin-top: 56px; }
  /* number sizing for tablet + mobile, per the 100px spec */
  .approach-step__num { font-size: 100px; line-height: 76px; }
  .about-approach__head { margin-bottom: 70px; }
  .approach-step__card { height: 460px; }
}
/* Mobile — matches the Figma 375 frame (node 2615-3250) */
@media (max-width: 640px) {
  .about-hero { height: 480px; }

  /* Genesis intro */
  .about-genesis { padding: 100px 16px 0; }
  .about-genesis__title { margin: 40px 0 12px; }
  .about-genesis__title em { font-size: 28px; line-height: 36px; }
  .about-genesis__lead { font-size: 20px; line-height: 28px; }

  /* Circles stay side-by-side (as in Figma); the flat export is scaled up past
     the viewport and clipped so the circles read large and centred */
  .about-genesis-figure { max-width: none; margin: 40px 0 0; padding: 0; overflow: hidden; }
  .about-genesis-figure img { width: 185vw; max-width: none; position: relative; left: 50%; transform: translateX(-50%); }

  /* Outro: swap the flat frame for live text + a cropped gold-bar strip */
  .about-genesis-outro { padding: 56px 16px 0; }
  .about-genesis-outro__frame { display: none; }
  .about-genesis-outro__text { display: block; text-align: center; color: var(--neutral-800); font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 28px; }
  .about-genesis-outro__bars { display: block; height: 150px; margin-top: 40px; background: url('/assets/img/about/about-us-/assets/img/Genesisframe2.png') 50% 82% / cover no-repeat; }

  .about-tagline { padding: 24px 16px 40px; }
  .about-tagline__viewport { height: 120px; }
  .about-tagline__line { font-size: 20px; line-height: 1.4; }

  /* Ecosystem — one card per row */
  .about-ecosystem { padding: 80px 16px; }
  .about-ecosystem__title { margin-bottom: 40px; font-size: 28px; }
  .eco-card__media { height: 160px; }
  .eco-card__media h3 em { font-size: 28px; }
  .eco-card p { padding: 16px 24px; font-size: 16px; line-height: 24px; }

  /* What we do — hide the flat frame, show the live vertical band over the photo */
  .about-whatwedo { margin: 48px 0; }
  .about-whatwedo__frame { display: none; }
  .about-whatwedo__mobile { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; padding: 100px 16px 76px; color: var(--neutral-50); background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url('/assets/img/about/about-us-/assets/img/transforming-frame.png') 85% center / cover no-repeat; }
  .about-whatwedo__mobile h2 { font-family: var(--serif); font-style: italic; font-size: 32px; line-height: 42px; letter-spacing: .02em; }
  .about-whatwedo__mobile h2 em { color: var(--gold-warm); font-size: inherit; line-height: inherit; }
  .about-whatwedo__mobile p { max-width: 343px; font-size: 14px; line-height: 20px; }

  .about-democratise { padding: 48px 24px; }
  .about-democratise p { font-size: 20px; line-height: 28px; }

  /* How we do it — stacked steps, number alternates side per the mobile frame */
  .about-approach { padding: 80px 16px; }
  .about-approach__head { margin-bottom: 56px; }
  .about-approach__head h2 { margin-top: 40px; font-size: 28px; line-height: 36px; }
  .approach-step + .approach-step { margin-top: 56px; }
  .approach-step__inner { gap: 32px; }
  .approach-step__intro { gap: 20px; padding-right: 0; }
  .approach-step:not(.approach-step--right) .approach-step__intro { flex-direction: row-reverse; }
  .approach-step__intro p { font-size: 14px; line-height: 20px; }
  .approach-step__card { height: 350px; }
  .approach-step__card h3 em { font-size: 32px; line-height: 42px; }

  /* FAQ */
  .about-faq { padding: 108px 16px 24px; }
  .about-faq__title { font-size: 24px; line-height: 30px; }
  .about-faq__list .faq summary { font-size: 16px; }
}

/* ---------- mentor and coach page (Figma redesign) ---------- */
/* this page follows the Figma header: a solid dark bar with a full-width WHITE
   sub-nav strip below it (dark links, gold-600 for the current page). Scoped to
   the mentor page so the other About-Us pages keep the light-on-dark strip that
   reads over their dark heroes. */
/* All About-Us pages: solid dark nav bar + a full-width WHITE sub-nav band with
   dark links (active = gold, gold underline). The :has() scopes the dark bar to
   pages where the sub-nav is revealed — the About pages — so index and product
   pages keep their transparent-over-hero navbar. The .nav-subnav rules below are
   safe to leave unscoped since the strip is display:none everywhere else. */
.navbar:has(.nav-subnav.is-open) { background: #060708; padding-bottom: 0; }
.nav-subnav {
  max-width: none;
  margin: 0 -40px;                 /* cancel the navbar's 40px side padding -> full-bleed */
  padding: 8px 40px;
  gap: 12px;
  background: #fff;
  border-top: 1px solid rgba(174,174,186,.35);
}
.nav-subnav__link { position: relative; padding: 12px 10px; font-size: 14px; color: var(--neutral-900); }
.nav-subnav__link:hover { color: #a07f36; }
.nav-subnav__link.is-active { color: #a07f36; font-weight: 500; }
.nav-subnav__link.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 1px; background: #a07f36; border-radius: 4px 4px 0 0; }
.mentor-intro { padding: 195px 24px 0; display: flex; flex-direction: column; align-items: center; gap: 64px; background: #fff; overflow: hidden; }
.mentor-head { width: 100%; max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 84px; }

.mentor-portrait { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.mentor-portrait h1 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 60px; line-height: 76px; color: var(--neutral-900); text-align: center; }
/* warm glow pooling behind the lower half of the portrait */
.mentor-portrait__glow { position: absolute; z-index: 0; left: 50%; bottom: 30px; transform: translateX(-50%); width: 562px; max-width: 92%; height: 218px; background: #cba65b; opacity: .30; border-radius: 9999px; filter: blur(80px); pointer-events: none; }
.mentor-portrait__media { position: relative; z-index: 1; width: 596px; max-width: 100%; aspect-ratio: 1 / 1; }
/* signature art sits behind the photo and runs wider, so its tails show either side */
.mentor-portrait__sig { position: absolute; z-index: 1; left: 50%; top: 28%; transform: translateX(-50%); width: 170%; height: 46%; background: url('/assets/img/about/Js-sign.png') center / contain no-repeat; pointer-events: none; }
.mentor-portrait__photo { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
/* fade the portrait foot into the white page (stands in for the Figma blur pads) */
.mentor-portrait__media::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(to top, #fff, rgba(255,255,255,0)); pointer-events: none; }

.mentor-say { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.mentor-say__quote { text-align: center; color: var(--neutral-800); font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 28px; letter-spacing: .28px; line-height: 1.3; }
.mentor-say__attr { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.mentor-say__name { text-align: center; color: #c29c49; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 42px; line-height: 36px; }
.mentor-say__role { text-align: center; color: var(--neutral-800); font-size: 22px; line-height: 31px; }

/* Pioneer band — soft gold field, photo beside the biography, bottom-aligned */
.mentor-pioneer { margin-top: 100px; padding: 64px 24px; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 50%, #fff 100%), url('/assets/img/about/pioneer-bg.png') center / cover no-repeat; }
.mentor-pioneer__inner { max-width: 900px; margin: 0 auto; display: flex; justify-content: center; align-items: flex-end; gap: 32px; }
.mentor-pioneer__photo { flex: 0 0 auto; width: 372px; height: 464px; border-radius: 6px; object-fit: cover; }
.mentor-pioneer__copy { display: flex; flex-direction: column; gap: 24px; max-width: 420px; }
.mentor-pioneer__copy h2 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 48px; line-height: 36px; color: var(--neutral-900); }
.mentor-pioneer__copy p { color: #3d3d4d; font-size: 16px; font-weight: 500; line-height: 24px; }

/* the shared tagline band gets a touch more breathing room on this page */
.mentor-page .about-tagline { padding: 80px 24px 90px; }

@media (max-width: 900px) {
  .mentor-pioneer__inner { flex-direction: column; align-items: center; gap: 36px; }
  .mentor-pioneer__copy { align-items: center; text-align: center; max-width: 520px; }
}
@media (max-width: 640px) {
  .mentor-intro { padding: 120px 20px 0; gap: 40px; }
  .mentor-head { gap: 56px; }
  .mentor-portrait h1 { font-size: 32px; line-height: 40px; }
  .mentor-say__quote { font-size: 20px; line-height: 30px; }
  .mentor-say__name { font-size: 32px; line-height: 30px; }
  .mentor-say__role { font-size: 16px; line-height: 24px; }
  .mentor-pioneer { padding: 48px 20px; }
  .mentor-pioneer__photo { width: 100%; max-width: 320px; height: auto; aspect-ratio: 372 / 464; }
  .mentor-pioneer__copy h2 { font-size: 36px; line-height: 40px; }
}

/* ---------- tech partner and promoters page ---------- */
.tech-partners-hero {
  min-height: 720px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 150px 24px 100px;
  color: var(--neutral-50);
  background:
    linear-gradient(180deg, rgba(2,5,10,.38), rgba(2,5,10,.14) 50%, rgba(2,5,10,.62)),
    url('/assets/img/about/tech-partners-hero.png') center / cover no-repeat;
}
.tech-partners-hero__content { position: relative; z-index: 2; width: min(100%, 1000px); text-align: center; }
.tech-partners-hero h1 { margin: 24px 0; font-size: clamp(46px, 6vw, 78px); font-weight: 300; line-height: 1.04; letter-spacing: -.03em; }
.tech-partners-hero h1 em { color: var(--gold-300); font-size: inherit; line-height: inherit; }
.tech-partners-hero p { max-width: 680px; margin: 0 auto; color: var(--neutral-300); font-size: clamp(17px, 1.7vw, 21px); font-weight: 300; line-height: 1.65; }
.tech-story { max-width: 1000px; margin: 0 auto; padding: 110px 24px 105px; text-align: center; }
.tech-story__heading h2 { margin: 0; }
.tech-story__heading h2 em { font-size: clamp(36px, 4.2vw, 54px); line-height: 1.08; }
.tech-story__copy { margin-top: 32px; }
.tech-story__copy p { color: var(--neutral-600); font-size: 18px; line-height: 1.75; }
.tech-story__copy p + p { margin-top: 22px; }
.promoters-section { padding: 130px max(24px, calc((100vw - var(--maxw)) / 2)) 145px; background: #f3f3f5; }
.promoters-section__head { text-align: center; }
.promoters-list { max-width: 980px; margin: 60px auto 0; list-style: none; border-top: 1px solid #d9d9de; }
.promoters-list li { display: grid; grid-template-columns: 70px 1fr; gap: 25px; padding: 34px 0; border-bottom: 1px solid #d9d9de; }
.promoters-list li > span { color: var(--gold-500); font-size: 12px; font-weight: 700; letter-spacing: .12em; padding-top: 5px; }
.promoters-list p { color: var(--neutral-800); font-size: 19px; line-height: 1.7; }

@media (max-width: 900px) {
}
@media (max-width: 640px) {
  .tech-partners-hero { min-height: 650px; padding: 135px 20px 90px; background-position: center; }
  .tech-story { padding: 85px 20px 80px; }
  .promoters-section { padding: 95px 20px 105px; }
  .promoters-list li { grid-template-columns: 42px 1fr; gap: 12px; padding: 28px 0; }
  .promoters-list p { font-size: 17px; }
}

/* ---------- board members page ----------
   board-members.html ships its own self-contained stylesheet
   (board-members.css) and no longer loads this file, so its rules
   live there, not here. */

/* ---------- management team page ---------- */
.management-hero {
  min-height: 720px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 150px 24px 100px;
  color: var(--neutral-50);
  background:
    linear-gradient(180deg, rgba(3,6,12,.28), rgba(3,6,12,.08) 50%, rgba(3,6,12,.56)),
    url('/assets/img/about/management-hero.png') center / cover no-repeat;
}
.management-hero__content { position: relative; z-index: 2; width: min(100%, 980px); text-align: center; }
.management-hero h1 { margin: 24px 0; font-size: clamp(46px, 6vw, 78px); font-weight: 300; line-height: 1.04; letter-spacing: -.03em; }
.management-hero h1 em { color: var(--gold-300); font-size: inherit; line-height: inherit; }
.management-hero p { max-width: 720px; margin: 0 auto; color: var(--neutral-300); font-size: clamp(17px, 1.7vw, 21px); font-weight: 300; line-height: 1.65; }
.management-section { padding: 120px max(24px, calc((100vw - var(--maxw)) / 2)) 145px; background: #f4f4f6; }
.management-section__head { text-align: center; }
.management-grid { margin-top: 65px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 20px; }
.management-card { min-height: 455px; height: 100%; padding: 38px 34px; text-align: center; background: var(--neutral-50); border: 1px solid #e4e4e8; border-radius: 10px; box-shadow: 0 10px 30px rgba(13,15,26,.04); }
.management-card img { width: 150px; height: 150px; margin: 0 auto 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 10px 30px rgba(13,15,26,.12); }
.management-card > span { color: var(--gold-500); font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.management-card h3 { margin: 0px 0 0px; }
.management-card h3 em { font-size: 29px; line-height: 1.1; }
.management-card p { color: var(--neutral-600); font-size: 15px; line-height: 1.68; padding-top: 15px; }

@media (max-width: 900px) {
  .management-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .management-hero { min-height: 650px; padding: 135px 20px 90px; background-position: center; }
  .management-section { padding: 95px 20px 105px; }
  .management-grid { grid-template-columns: 1fr; gap: 14px; }
  .management-card { min-height: auto; padding: 34px 28px; }
}

/* ---------- objectives page ----------
   objectives.html ships its own self-contained stylesheet (objectives.css) and
   no longer loads this file, so its rules live there, not here. */

/* ---------- BullionX page ---------- */
.bullionx-hero { min-height: 760px; position: relative; overflow: hidden; display: grid; place-items: center; padding: 155px 24px 110px; color: var(--neutral-50); background: linear-gradient(180deg, rgba(2,5,10,.34), rgba(2,5,10,.12) 48%, rgba(2,5,10,.48)), url('//assets/img/bullionx/bullionx-hero.png') center / cover no-repeat; }
.bullionx-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(3,7,14,.05) 0%, rgba(3,7,14,.32) 72%, rgba(3,7,14,.62) 100%); }
.bullionx-hero__content { position: relative; z-index: 2; width: min(100%, 1000px); text-align: center; }
.bullionx-hero__logo { width: min(190px, 45vw); max-height: 50px; margin: 25px auto 30px; filter: brightness(0) invert(1); opacity: .95; }
.bullionx-hero h1 { font-size: clamp(44px, 5.4vw, 72px); font-weight: 300; line-height: 1.08; letter-spacing: -.035em; text-shadow: 0 3px 24px rgba(0,0,0,.48); }
.bullionx-hero h1 em { color: var(--gold-300); font-size: inherit; line-height: inherit; }
.bullionx-hero p { max-width: 720px; margin: 25px auto 0; color: var(--neutral-300); font-size: clamp(17px, 1.7vw, 21px); font-weight: 300; line-height: 1.65; }
.bullionx-intro { max-width: var(--maxw); margin: 0 auto; padding: 130px 24px 145px; display: grid; grid-template-columns: minmax(280px,.82fr) minmax(500px,1.18fr); gap: 100px; align-items: start; }
.bullionx-intro__heading { position: sticky; top: 135px; }
.bullionx-intro__heading h2 { margin-top: 28px; font-size: clamp(38px,4.4vw,62px); font-weight: 300; line-height: 1.05; letter-spacing: -.03em; }
.bullionx-intro__heading h2 span, .bullionx-intro__heading h2 em { display: block; }
.bullionx-intro__heading h2 em { color: var(--gold-500); }
.bullionx-intro__copy { border-top: 1px solid var(--neutral-300); }
.bullionx-copy-block { display: grid; grid-template-columns: 42px 1fr; gap: 22px; padding: 30px 0; border-bottom: 1px solid var(--neutral-300); }
.bullionx-copy-block > span { padding-top: 4px; color: var(--gold-600); font-size: 13px; font-weight: 700; letter-spacing: .12em; }
.bullionx-intro__copy p { color: var(--neutral-600); font-size: 17px; line-height: 1.75; }
.bullionx-features { padding: 125px max(24px, calc((100vw - var(--maxw)) / 2)) 145px; background: var(--cream); }
.bullionx-features__head { text-align: center; }
.bullionx-feature-grid { margin-top: 65px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #d9d1c2; border-left: 1px solid #d9d1c2; }
.bullionx-feature-grid article { min-height: 355px; position: relative; display: flex; flex-direction: column; align-items: center; padding: 34px 26px 32px; text-align: center; background: rgba(255,255,255,.48); border-right: 1px solid #d9d1c2; border-bottom: 1px solid #d9d1c2; }
.bullionx-feature-no { align-self: flex-start; color: var(--gold-600); font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.bullionx-feature-grid article > img { width: 126px; height: 95px; margin: 18px auto 19px; object-fit: contain; mix-blend-mode: multiply; }
.bullionx-feature-grid h3 { margin-bottom: 13px; }
.bullionx-feature-grid h3 em { font-size: 26px; line-height: 1.1; }
.bullionx-feature-grid p { color: var(--neutral-600); font-size: 14px; line-height: 1.65; }
.bullionx-coins { max-width: var(--maxw); margin: 0 auto; padding: 135px 24px 145px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 85px; }
.bullionx-coins__visual { min-height: 520px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: radial-gradient(circle at 50% 45%, rgba(214,186,129,.42), transparent 45%), var(--cream); }
.bullionx-coins__visual img { width: 82%; max-height: 420px; object-fit: contain; }
.bullionx-coins__copy h2 { margin: 24px 0 28px; }
.bullionx-coins__copy h2 em { font-size: clamp(36px, 4vw, 52px); line-height: 1.08; }
.bullionx-coins__copy p { color: var(--neutral-600); font-size: 17px; line-height: 1.72; }
.bullionx-coins__copy p + p { margin-top: 18px; }

@media (max-width: 900px) {
  .bullionx-intro { grid-template-columns: 1fr; gap: 55px; }
  .bullionx-intro__heading { position: static; }
  .bullionx-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bullionx-coins { grid-template-columns: 1fr; gap: 50px; }
}
@media (max-width: 640px) {
  .bullionx-hero { min-height: 650px; padding: 135px 20px 90px; }
  .bullionx-intro { padding: 95px 20px 105px; }
  .bullionx-features { padding: 95px 20px 105px; }
  .bullionx-feature-grid { grid-template-columns: 1fr; }
  .bullionx-feature-grid article { min-height: auto; padding: 28px 24px 34px; }
  .bullionx-coins { padding: 100px 20px 110px; }
  .bullionx-coins__visual { min-height: 380px; }
}

/* reCAPTCHA v3 badge hidden site-wide (per request). Google's terms allow hiding
   the badge only if the reCAPTCHA disclosure is shown instead — that's the
   .recaptcha-legal line we add inside each form's footer. */
.grecaptcha-badge { visibility: hidden !important; }
.recaptcha-legal { margin: 0; font-size: 11px; line-height: 1.5; color: #8a8a8a; text-align: center; }
.recaptcha-legal a { color: inherit; text-decoration: underline; }