/* ============================================================
   Elanzia — A Curated Marketplace for India's Finest Jewellery
   Page-specific styles. Loads AFTER /assets/css/styles.css (shares navbar,
   .btn, .faq, .footer, .enquiry-bar, fonts and tokens).
   ============================================================ */

:root {
  --elz-gold-50:  #f9f5ec;
  --elz-gold-100: #f0e6d1;
  --elz-gold-200: #e3d1a8;
  --elz-gold-800: #5c491f;
  --elz-teal-accent: #cfb38d;   /* italic serif accent per Figma */
  --elz-dark-green: #191f0b;
}

/* ---- shared thumbnail gradients (stand-ins for jewellery photography) ---- */
.grad-a { background: radial-gradient(120% 120% at 20% 15%, #f3c68f 0%, #6d3a1e 55%, #230e09 100%); }
.grad-b { background: radial-gradient(120% 120% at 80% 10%, #3a2a4a 0%, #241826 55%, #0e0910 100%); }
.grad-c { background: linear-gradient(150deg, #efe7d6 0%, #d8c8a6 55%, #b9a072 100%); }
.grad-d { background: linear-gradient(150deg, #23425c 0%, #2c2a24 55%, #120d0a 100%); }

/* ============================================================
   HERO
   ============================================================ */
.elz-hero {
  position: relative;
  min-height: 840px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0b0b0d;
  text-align: center;
}
.elz-hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  overflow: hidden;            /* crops the oversized Vimeo iframe below to the hero */
  z-index: 0;
  /* poster fallback = the video's own first frame (exported to WebP), shown until
     the Vimeo iframe paints or if it fails to load; the playing video hides it */
  background: url("/assets/img/elanzia/elanzia-hero-banner.webp") center / cover no-repeat;
}
/* the fill is now a Vimeo background iframe (background=1). Size it like the old
   <video>'s object-fit:cover: match the video's native 1730x1080 (~16:10) so it
   never pillarboxes, grow to the larger of the hero's width/height, centre, then
   let the parent crop the overflow. pointer-events off so it stays purely
   decorative, exactly like the muted loop it replaced. */
.elz-hero-video iframe {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: auto; height: auto;
  min-width: 100%; min-height: 100%;
  aspect-ratio: 1730 / 1080;
  border: 0;
  pointer-events: none;
}
.elz-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.6) 60%, rgba(0,0,0,.72) 100%);
}
.elz-hero-content {
  position: relative;
  z-index: 3;
  max-width: 780px;
  padding: 120px 24px 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.elz-tag {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 32px;
  background: rgba(255,255,255,.25);
  color: #fff;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.elz-wordmark {
  width: min(300px, 62vw);
  height: auto;
  filter: drop-shadow(0 6px 30px rgba(227,209,168,.25));
}
.elz-hero-title {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--elz-gold-50);
  font-size: clamp(30px, 4.6vw, 42px);
  line-height: 1.12;
  letter-spacing: -.01em;
  max-width: 640px;
}
.elz-hero-sub {
  color: #f4f4f6;
  font-size: 16px;
  line-height: 1.55;
  max-width: 560px;
}
.elz-hero .btn { margin-top: 4px; }
.elz-hero .hero-wave { position: absolute; bottom: -3px; z-index: 4; }

/* hero content entrance — Figma motion: spring (mass 1, stiffness 100,
   damping 15) over 1022ms. var(--spring) is that spring solved as a linear()
   easing (it overshoots ~2.8%, matching Figma). Content fades + rises in. */
.elz-hero-content > * { animation: elzHeroIn 1.022s var(--spring) both; }
.elz-hero-content > *:nth-child(2) { animation-delay: .1s; }
.elz-hero-content > *:nth-child(3) { animation-delay: .22s; }
.elz-hero-content > *:nth-child(4) { animation-delay: .34s; }
.elz-hero-content > *:nth-child(5) { animation-delay: .46s; }
@keyframes elzHeroIn {
  from { opacity: 0; transform: translate(24px, 16px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   QUOTE / STORY — scroll-scrubbed 7-image crossfade
   Same pattern as RamMudra's India's Story (rammudra.css/rammudra.js,
   itself ported from igm-html-63): a pinned stage crossfades photos while
   the 3 caption lines below highlight cumulatively as their step is
   reached. The original three framed photos (E201/E202/E203.svg — frame +
   shadow baked into each SVG) play first, then four new narrative photos
   (story-img1..4.webp: thinking about jewellery -> the trust/purity/choice
   worries -> the digital+physical answer -> the nationwide network)
   continue after them — 7 steps total, so the runway height below is
   scaled up from the original 3-step timing accordingly.
   Matches RamMudra's #framedSlides/#digitalSlide split exactly, including
   how each side animates: the 3 legacy photos crossfade among themselves
   with the shift+scale active/exiting/far-exiting "stack" transform, same
   as RamMudra's framed photos. RamMudra's digital phase, though, is just
   one static image — it only ever does a plain opacity fade, no shift+scale
   between images. #elzDigitalSlides has four images instead of one, so it
   still needs active/exiting/far-exiting to track *which* one is current,
   but the override below strips the shift+scale transform back down to a
   flat opacity crossfade for that group, matching RamMudra's plainer feel
   there. The old/new group handoff stays a separate whole-group opacity/
   scale fade (#elzDigitalSlides.visible), same as before. */
/* ============================================================
   QUOTE / STORY — OLD vertical crossfade: DISABLED. Wrapped in a
   never-matching @media so the rules stay for reference but never
   apply (a plain block comment is impossible here — the block already
   contains its own CSS comments). Replaced by the scrubber styles below.
   ============================================================ */
@media not all {
.elz-story { position: relative; height: 790vh; min-height: 1800px; background: #fff; }
.elz-story-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 44px;
  overflow: hidden;
  background: #fff;
}
.elz-story-media {
  position: relative;
  width: min(70vw, 340px);
  aspect-ratio: 367 / 386;
}
#elzLegacySlides { position: absolute; inset: 0; }
#elzDigitalSlides {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.22,1,.36,1);
}
#elzDigitalSlides.visible { opacity: 1; transform: scale(1); }
.elz-story-image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  z-index: 0;
  opacity: 0;
  transform: translate3d(9.4%, -9.2%, 0) scale(1);
  transition: opacity .75s cubic-bezier(.22,1,.36,1), transform 1s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.elz-story-image.active { z-index: 3; opacity: 1; transform: translate3d(0,0,0) scale(1); }
.elz-story-image.exiting { z-index: 2; opacity: 1; transform: translate3d(-8.25%, 9.2%, 0) scale(.93); }
.elz-story-image.far-exiting { z-index: 1; opacity: .6; transform: translate3d(-7.4%, 18.2%, 0) scale(.88); }
/* digital narrative photos: flat crossfade, no shift+scale stack — RamMudra's
   equivalent phase is a single image doing nothing more than an opacity fade,
   so the four photos here get the same plain treatment between each other */
#elzDigitalSlides .elz-story-image { transform: none; transition: opacity .75s cubic-bezier(.22,1,.36,1); }
#elzDigitalSlides .elz-story-image.active { z-index: 1; opacity: 1; transform: none; }
#elzDigitalSlides .elz-story-image.exiting,
#elzDigitalSlides .elz-story-image.far-exiting { z-index: 0; opacity: 0; transform: none; }
/* floating claims over the media box — only shown for the "discover" digital
   photo (story-img3.webp), same pattern as RamMudra's #floatingClaims */
#elzFloatingClaims {
  pointer-events: none;
  position: absolute; inset: 0;
  z-index: 4;
  opacity: 0;
  transition: opacity .8s ease;
}
#elzFloatingClaims.is-visible { opacity: 1; }
.elz-claim {
  position: absolute;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(13px, 1.7vw, 18px);
  color: #1a1a1a;
  white-space: nowrap;
}
.elz-claim em { font-style: italic; color: var(--elz-teal-accent); }
.elz-claim-top { top: -32px; left: 50%; transform: translateX(-50%); }
.elz-claim-left { left: -4%; top: 42%; }
.elz-claim-right { right: -4%; top: 58%; }

.elz-story-copy-wrap {
  position: relative;
  z-index: 2;
  max-width: 720px;
  text-align: center;
}
.elz-story-copy {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: 1.3;
  letter-spacing: .01em;
}
.elz-story-copy p { margin: 0; }
#elzLegacyCopy p { color: rgba(26,26,26,.38); transition: color .55s ease, transform .55s ease; }
#elzLegacyCopy p.highlight { color: #1a1a1a; transform: translateY(-1px); }
/* problem / discover / reimagining copy: absolute overlays that cross-fade in
   the same slot as the legacy copy, same technique as RamMudra's
   #consumerCopy/#futureCopy — first line reads dark, the follow-on line reads
   muted, matching the site's existing two-tone quote treatment */
.elz-story-copy--overlay {
  position: absolute; left: 0; right: 0; top: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s ease, transform .8s cubic-bezier(.22,1,.36,1);
  color: #1a1a1a;
}
.elz-story-copy--overlay p + p { margin-top: 6px; }
.elz-story-copy--overlay.is-visible { opacity: 1; transform: translateY(0); }
.elz-story-copy__muted { color: rgba(26,26,26,.5); }

/* reduced motion / no-JS: unpin and just show the first frame + legacy copy */
.elz-story.elz-story--static { height: auto; min-height: 0; }
.elz-story--static .elz-story-stage { position: static; height: auto; min-height: 0; padding: 90px 20px; }
.elz-story--static .elz-story-image { position: relative; opacity: 0; }
.elz-story--static .elz-story-image.active { opacity: 1; transform: none; display: block; }
.elz-story--static #elzDigitalSlides { display: none; }
.elz-story--static #elzFloatingClaims { display: none; }
.elz-story--static #elzLegacyCopy p { color: #1a1a1a; }
}
/* end DISABLED old QUOTE/STORY */

@media not all and (max-width: 767px) {
  .elz-story { height: 700vh; }
  .elz-story-stage { min-height: 500px; }
}

/* ============================================================
   QUOTE / STORY — pinned horizontal scrubber (NEW)
   A tall .elz-story runway pins .elz-story-pin (position:sticky)
   while scroll progress translates the 5-slide .elz-story-track
   sideways; a 5-segment gold progress bar tracks position. The
   scrub is a hand-built rAF loop in elanzia.js — no library.
   ============================================================ */
.elz-story { position: relative; height: 500vh; background: #fff; }
.elz-story-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: #fff;
  /* lay the progress bar + slides out as one centred vertical cluster, pushed
     clear of the fixed .navbar.scrolled (92px) so nothing jams under it */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 44px;
  padding-top: 92px;
}
/* progress bar: a gold cap bar (--gold-300) with a soft blurred glow beneath;
   the glow colour is what changes with state — grey upcoming, light gold done,
   gold current. #CBA65B / #E3D1A8 have no token, so they stay literal here. */
/* in-flow first item of the centred cluster (was absolute-pinned to the top) */
.elz-story-progress {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  z-index: 3;
}
.elz-story-prog {
  position: relative;
  width: 80px;
  height: 8px;
  border-radius: 2px;
  overflow: hidden;                       /* clip the gold fill to the rounded track */
  background: var(--neutral-200, #eeeef1); /* light grey track */
}
/* light champagne-gold fill that grows left→right in sync with scroll; its width
   (0%..100%) is set per segment by elanzia.js each frame */
.elz-story-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, var(--elz-gold-200, #e3d1a8) 0%, var(--elz-gold-100, #f0e6d1) 100%);
  transition: width .12s linear;
}
/* horizontal track: 5 full-width slides in a row, translated by JS.
   align-self:flex-start keeps its left edge at 0 (so slide 1 shows first and
   the JS translateX math holds) instead of being centred by the flex column. */
.elz-story-track {
  align-self: flex-start;
  display: flex;
  width: 500vw;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.elz-story-slide {
  flex: none;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  padding: 0 clamp(20px, 8vw, 120px);
  text-align: center;
}
.elz-story-slide img {
  width: min(760px, 62vw);
  height: auto;
  aspect-ratio: 760 / 366;
  object-fit: cover;
  border-radius: 8px;
}
/* the centred (active) slide reads at 42px, the rest at 36px — per Figma */
.elz-story-caption {
  margin: 0;
  max-width: 900px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.24;
  letter-spacing: .01em;
  color: var(--neutral-900, #0D0F1A);
  transition: font-size .5s ease;
}
.elz-story-slide.is-active .elz-story-caption { font-size: 42px; }

/* reduced motion / no-JS: unpin and stack the slides vertically */
.elz-story--static { height: auto; }
.elz-story--static .elz-story-pin { position: static; height: auto; min-height: 0; padding: 80px 20px; }
.elz-story--static .elz-story-progress { display: none; }
.elz-story--static .elz-story-track { flex-direction: column; width: 100%; transform: none !important; gap: 72px; }
.elz-story--static .elz-story-slide { width: 100%; height: auto; }

@media (max-width: 767px) {
  .elz-story { height: 460vh; }
  .elz-story-pin { min-height: 500px; }
  .elz-story-progress { gap: 3px; }
  .elz-story-prog { width: 44px; }
  .elz-story-slide { gap: 28px; }
  .elz-story-slide img { width: 82vw; }
  .elz-story-caption { font-size: 24px; }
  .elz-story-slide.is-active .elz-story-caption { font-size: 27px; }
}

/* ============================================================
   DESIGNED FOR EVERY SIDE OF JEWELLERY COMMERCE
   ============================================================ */
.elz-designed {
  position: relative;
  overflow: hidden;
  padding: 110px 40px 120px;
  background: var(--elz-dark-green);
}
.elz-designed-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(25,31,11,.15) 0%, rgba(25,31,11,.55) 46%, var(--elz-dark-green) 82%),
    url("/assets/img/elanzia/jewellerycommerce.svg") top center / cover no-repeat;
    background-attachment: fixed;
}
.elz-designed-inner {
  position: relative;
  z-index: 2;
  max-width: 1316px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
}
.elz-designed-head { text-align: center; margin-bottom: 40px; }
.elz-designed-eyebrow {
  color: var(--elz-gold-100);
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.3;
}
.elz-designed-title {
  margin-top: 6px;
  font-weight: 300;
}
.elz-designed-title em {
  color: var(--elz-gold-100);
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: .01em;
  line-height: 1.1;
}

/* toggle */
.elz-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border-radius: 60px;
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 19px rgba(0,0,0,.05);
  margin-bottom: 42px;
}
.elz-toggle-btn {
  border: 0;
  cursor: pointer;
  background: transparent;
  color: #1a1919;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .03em;
  padding: 10px 22px;
  border-radius: 60px;
  transition: background .25s, color .25s;
}
.elz-toggle-btn.is-active { background: #fff; }

/* cards */
.elz-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.elz-cards.is-hidden { display: none; }
.elz-card {
  position: relative;
  overflow: hidden;
  min-height: 474px;
  padding: 60px 20px;
  border-radius: 8px;
  background: rgba(255,255,255,.1);
  /* crisp light rim so the card edge stays visible even where the white glow
     brightens the frosted surface (the plain border from the Figma reference) */
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.28),
    0 18px 40px rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(13.5px);
  backdrop-filter: blur(13.5px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
}
.elz-card-glow {
  position: absolute;
  left: -132px; top: -37px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  filter: blur(100px);
  pointer-events: none;
}
/* provided jewellery icon SVGs sit directly on the frosted card (no plate) */
.elz-ico {
  position: relative;
  z-index: 2;
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(120,90,30,.22));
}
.elz-card-body { position: relative; z-index: 2; }
.elz-card-body h3 {
  color: #1c1c1c;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 12px;
}
.elz-card-body p {
  color: #1c1c1c;
  font-size: 16px;
  line-height: 1.5;
  max-width: 240px;
  margin: 0 auto;
}

/* ============================================================
   ELANZIA'S TECHNOLOGY — icon + serif-title feature grid on white.
   Two explicit rows (not a single wrapping flex) because Figma sizes
   them differently: the top row is three equal columns, the bottom
   row is two fixed 357px columns centered — a wrap can't produce both.
   ============================================================ */
.elz-tech { padding: 100px 120px 140px; background: #fff; }
.elz-tech-head {
  max-width: 637px;
  margin: 0 auto 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.elz-tech-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  font-weight: 300;
}
.elz-tech-lead {
  font-size: 30px;
  line-height: 40px;
  color: var(--neutral-900);
}
.elz-tech-title em {
  font-size: 44px;
  line-height: 56px;
  letter-spacing: .01em;
  color: var(--neutral-900);
}
.elz-tech-title .accent { color: var(--elz-teal-accent); }  /* champagne #cfb38d per Figma */
.elz-tech-grid {
  max-width: 1020px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.elz-tech-row {
  display: flex;
  justify-content: center;
  gap: 64px;
}
.elz-tech-row > .elz-tech-item { flex: 1 1 0; }              /* top row: equal thirds */
.elz-tech-row--pair > .elz-tech-item { flex: 0 0 357px; }   /* bottom row: fixed, centered */
.elz-tech-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.elz-tech-ico {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(120,90,30,.22));
}
.elz-tech-item h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
  color: var(--neutral-900);
}
.elz-tech-item p {
  font-size: 15px;
  line-height: 22px;
  color: var(--neutral-600);
}

/* pinned, scroll-scrubbed runway for the toggle + card stage — mirrors
   RamMudra's "Two Ways to Own Gold" section (rammudra.css/rammudra.js).
   .elz-ways is a tall scroll runway; .elz-ways__sticky (the toggle + card
   stage) pins under the navbar for as long as the runway has room, and
   scroll progress through that range picks the active panel — Businesses
   by default, Consumers past the midpoint, back again scrolling up.
   Pin/unpin/release is done with JS-toggled fixed/absolute (elanzia.js)
   rather than position:sticky, same reasoning as rammudra.js. */
/* full-bleed breakout: .elz-ways sits inside .elz-designed-inner (centered,
   max-width:1316px) inside .elz-designed (40px side padding). .elz-ways__sticky
   ignores all of that while pinned (position:fixed measures against the
   viewport), but once the pin releases (position:absolute, is-end) its
   containing block becomes .elz-ways itself — 80px narrower than the
   viewport from that padding+centering. That mismatch made the stage (and
   the cards in it) visibly shrink the instant the pin released. Stretching
   .elz-ways to the full viewport width here means both states measure
   against the same width, so only .elz-ways__sticky's own 40px padding
   ever applies, in both states. (100%/auto-margin centering trick — works
   regardless of .elz-designed-inner's own width because that box is itself
   centered in the viewport via margin:0 auto. align-self:flex-start is
   required here — .elz-designed-inner is a flex column with
   align-items:center, which centers a flex item's whole margin box
   (margin-left included) within ITS OWN width; left uncorrected that adds a
   second, smaller centering offset on top of the calc() above and the
   breakout lands off-centre instead of flush with the viewport. flex-start
   makes this item flush against the cross-axis start instead, so the calc()
   above is the only offset applied. */
.elz-ways { position: relative; width: 100vw; margin-left: calc(50% - 50vw); align-self: flex-start; height: 220vh; }
.elz-ways__sticky {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 110px top clears the fixed navbar (~84px tall, /assets/css/styles.css .navbar.scrolled,
     z-index 50 vs this box's z-index 2) with a gap — matches RamMudra's
     .rm-ways__sticky desktop padding-top. At the old 60px the navbar painted
     over most of the toggle for the entire pinned duration on laptop/desktop
     widths (mobile already gets its own 96px in the 720px media query below). */
  padding: 110px 40px 40px;
}
.elz-ways__sticky.is-pinned { position: fixed; top: 0; bottom: auto; }
.elz-ways__sticky.is-end { position: absolute; top: auto; bottom: 0; }

.elz-ways__stage { position: relative; width: 100%; max-width: 1316px; }
.elz-ways__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .5s cubic-bezier(0,0,.58,1), transform .5s cubic-bezier(0,0,.58,1);
}
.elz-ways__panel.is-active {
  position: relative;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* reduced motion / no-JS: unpin and stack both panels, one after the other */
.elz-ways.elz-ways--static { height: auto; }
.elz-ways--static .elz-ways__sticky { position: static; padding: 0; }
.elz-ways--static .elz-ways__stage { display: flex; flex-direction: column; gap: 60px; }
.elz-ways--static .elz-ways__panel {
  position: relative; inset: auto;
  opacity: 1; transform: none; pointer-events: auto;
}

/* ============================================================
   A NETWORK BUILT ON TRUST — marquees
   ============================================================ */
.elz-network {
  background: #fff;
  padding: 100px 0 40px;
  text-align: center;
  overflow: hidden;
}
.elz-network-title {
  font-weight: 400;
  font-size: clamp(30px, 4vw, 44px);
  color: var(--neutral-900);
  margin-bottom: 46px;
}
.elz-network-title em { color: var(--elz-teal-accent); }
.elz-marquee-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* soft white radial vignette on top of the rows (Figma radial fade) */
.elz-vignette {
  position: absolute;
  inset: -20px 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(60% 75% at 50% 50%, rgba(255,255,255,0) 30%, rgba(255,255,255,.85) 78%, #fff 100%),
    linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 12% 88%, #fff 100%);
}
.elz-marquee { overflow: hidden; }
.elz-track {
  display: flex;
  width: max-content;
  animation: elzMarquee 46s linear infinite;
}
/* trailing gap lives on each card (not the flex container) so the duplicated
   second half is exactly the same width as the first — translateX(-50%) then
   loops with no per-cycle seam */
.elz-track > .col-card { margin-right: 18px; }
.elz-track.reverse { animation-direction: reverse; animation-duration: 52s; }
.elz-marquee-wrap:hover .elz-track { animation-play-state: paused; }
@keyframes elzMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* collection cards */
.col-card {
  flex: 0 0 300px;
  width: 300px;
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: left;
}
.col-card.feature { color: #fff; }
.col-card.feature::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(20,10,6,.85) 100%);
}
.col-card.feature > * { position: relative; z-index: 2; }
.cc-tag {
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin-bottom: auto;
}
.col-card.feature h4 { font-size: 22px; font-weight: 600; margin-bottom: 6px; }
.col-card.feature p { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.85); }
.cc-link {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--serif);
  font-size: 14px;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.7);
  padding-bottom: 3px;
  width: max-content;
}
.col-card.price {
  background: #fff;
  border: 1px solid rgba(226,172,45,.25);
  justify-content: space-between;
  align-items: flex-start;
}
.col-card.price h4 { color: #200f0a; font-size: 16px; font-weight: 600; }
.cc-price { color: #200f0a; font-size: 14px; opacity: .8; }
.col-card.brand {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.cc-brand {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: .14em;
  color: rgba(255,255,255,.92);
}
.col-card.grad-c .cc-brand { color: #3a3120; }

/* partner logo tiles — the marquee card slimmed to a white chip that centres
   each real jeweller logo (replaces the placeholder brand/collection cards) */
.col-card.logo {
  flex-basis: 240px;
  width: 240px;
  height: 150px;
  background: #fff;
  border: 1px solid rgba(226,172,45,.25);
  align-items: center;
  justify-content: center;
  padding: 22px 30px;
}
.col-card.logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ============================================================
   VOICES OF ELANZIA — masonry
   ============================================================ */
.elz-voices {
  background: #fefefe;
  padding: 100px 40px 120px;
  position: relative;
}
.elz-voices-head { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.elz-voices-title {
  font-weight: 400;
  font-size: clamp(30px, 4vw, 44px);
  color: var(--neutral-900);
}
.elz-voices-title em { color: var(--elz-teal-accent); }
.elz-voices-sub {
  margin-top: 12px;
  color: #8a8a97;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}
.elz-voices-grid {
  max-width: 1016px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: start;
}
.v-col { display: flex; flex-direction: column; gap: 32px; }
.v-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #eeeef1;
  box-shadow: 0 0 12px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
}
.v-photo { width: 100%; height: 250px; }
.v-card.tall .v-photo { height: 320px; }
.v-caption {
  position: absolute;
  left: 0;
  top: 250px;
  transform: translateY(-100%);
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.v-card.tall .v-caption { top: 320px; }
.v-caption strong { color: #0a121b; font-size: 15px; font-weight: 500; }
.v-caption span { color: #34383d; font-size: 14px; }
.v-body { padding: 20px; }
.v-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 32px;
  background: var(--elz-gold-50);
  color: var(--elz-gold-800);
  font-size: 12px;
  margin-bottom: 12px;
}
.v-body p { color: #606070; font-size: 15px; line-height: 1.5; }

/* flipped card (body on top, photo below) */
.v-card.v-flip .v-body.top { order: 0; }
.v-card.v-flip .v-photo { order: 1; height: 300px; }
.v-card.v-flip .v-caption { top: auto; bottom: 0; transform: none; }

/* dark testimonial */
.v-card.quote-dark {
  background: #231f1e;
  padding: 26px 22px 30px;
  gap: 16px;
  justify-content: flex-end;
  min-height: 300px;
}
.v-card.quote-dark blockquote {
  color: rgba(255,255,255,.72);
  font-size: 15px;
  line-height: 1.45;
}
.v-card.quote-dark cite {
  color: rgba(255,255,255,.92);
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
}

/* ============================================================
   JOIN INDIA'S JEWELLERY COLLECTIVE
   ============================================================ */
.elz-join {
  position: relative;
  overflow: hidden;
  /* gold-glitter texture spans the whole section (provided asset); black copy
     sits over the lighter top-left where it stays legible */
  background: url("/assets/img/elanzia/join-india-bg-image.webp") center/cover no-repeat;
  padding: 90px 00px 120px 40px;
  min-height: 620px;
  display: flex;
  align-items: center;
}
/* Transparent PNG cutout of the hand + necklace, laid over the gold-glitter
   section background. object-fit:contain keeps the whole hand and the draping
   chain in view; anchored right so the copy reads clear on the left.
   The source PNG faces wrist-left / fingers-right, but the Figma design has the
   wrist entering from the RIGHT with fingers pointing left, so scaleX(-1) mirrors
   it to match. object-position stays right-top so the flipped wrist hugs the edge. */
.elz-join-art {
  position: absolute;
  right: 0; top: 100px;
  width: 30%;
  height: 100%;
  object-fit: contain;
  object-position: right top;
  z-index: 0;
}
.elz-join-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  max-width: 560px;
  margin-left: max(40px, calc((100vw - 1200px) / 2));
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.elz-join-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.05;
  color: #000;
}
.elz-join-sub {
  margin-top: 22px;
  color: #737373;
  font-family: "Clash Display", var(--sans);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .01em;
  max-width: 500px;
}
.elz-join-stats {
  list-style: none;
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
}
.elz-join-stats li {
  flex: 1 1 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
/* provided line-art stat icons — normalise on height, keep each aspect ratio */
.js-ico {
  width: auto;
  height: 46px;
  object-fit: contain;
}
.js-label { color: #0a121b; font-size: 15px; font-weight: 500; line-height: 1.4; max-width: 140px; }
.elz-join .btn { align-self: flex-start; }

/* ============================================================
   REVEALS (opt-in via script.js .reveal / .reveal-stagger)
   ============================================================ */
.elz-designed-head.reveal,
.elz-network-title.reveal,
.elz-voices-head.reveal,
.elz-join-inner.reveal { will-change: opacity, transform; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .elz-cards { grid-template-columns: repeat(2, 1fr); }
  .elz-card { min-height: 380px; padding: 44px 20px; }
  .elz-voices-grid { grid-template-columns: repeat(2, 1fr); }
  .elz-join-inner { margin-left: 40px; }
  /* the 2x2 card grid is taller than desktop's single row, so the pinned
     stage needs more runway to scrub through both panels comfortably */
  .elz-ways { height: 280vh; }
  /* Figma's 120px side gutter only fits at full desktop; drop to the page's
     standard 40px so the three columns keep breathing room */
  .elz-tech { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 720px) {
  .elz-hero { min-height: 720px; }
  /* stay in a 2-col grid on mobile too (matches RamMudra's rm-ways__grid,
     which never collapses to a single column) — all four cards sit together
     in the pinned stage instead of one giant card at a time */
  .elz-cards { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .elz-card { min-height: 230px; padding: 22px 12px; gap: 14px; }
  .elz-card-body h3 { font-size: 15px; margin-bottom: 6px; }
  .elz-card-body p { font-size: 12px; line-height: 1.35; }
  /* the compact 2-col grid needs far less runway than a stacked single
     column did — matches RamMudra's flat height across breakpoints */
  .elz-ways { height: 220vh; }
  .elz-voices-grid { grid-template-columns: 1fr; max-width: 380px; }
  /* mobile: stacked CTA card — heading + hand up top, three stats in a row,
     then a full-width black button (per the provided mobile design). It was
     hidden on phones before; now it carries the CTA that desktop shows wide. */
  .elz-join {
    display: flex;
    padding: 44px 24px 52px;
    min-height: 0;
  }
  .elz-join-inner {
    margin-left: 0;
    max-width: none;
    width: 100%;
    gap: 34px;
  }
  /* hand + necklace sits top-right beside the heading, cropped to the upper
     zone so it never runs down over the stats or button below it */
  .elz-join-art {
    width: 44%;
    height: 320px;
    opacity: 1;
  }
  /* keep the copy clear of the hand on the right */
  .elz-join-title { font-size: 30px; max-width: 56%; }
  .elz-join-sub { max-width: 60%; }
  .elz-join-stats { gap: 16px; }
  .elz-join-stats li { flex: 1 1 0; gap: 10px; }
  .js-ico { height: 40px; }
  .js-label { font-size: 12px; max-width: 100%; }
  /* image shows an edge-to-edge black button under the stats */
  .elz-join .btn { align-self: stretch; justify-content: center; height: 52px; }
  /* smaller marquee cards on phones (Figma mobile: 195×130 landscape); the
     flex-basis must match the width or it wins the main axis and squares the
     card. Inner padding/type scale down so the copy still fits cleanly */
  .col-card { flex: 0 0 195px; width: 195px; height: 130px; padding: 14px; }
  /* logo chips shrink with the row but keep breathing room around the mark */
  .col-card.logo { flex-basis: 165px; width: 165px; height: 118px; padding: 14px 18px; }
  .elz-track > .col-card { margin-right: 12px; }
  .col-card.feature h4 { font-size: 15px; }
  .col-card.feature p { font-size: 11px; }
  .cc-tag { font-size: 10px; }
  .cc-link { font-size: 12px; margin-top: 8px; }
  .col-card.price h4 { font-size: 14px; }
  .cc-price { font-size: 12px; }
  .cc-brand { font-size: 16px; }
  /* both rows collapse to a single stacked column; the fixed 357px pair
     releases to full width so it never overflows a narrow screen */
  .elz-tech { padding: 64px 20px 72px; }
  .elz-tech-head { margin-bottom: 40px; gap: 24px; }
  .elz-tech-lead { font-size: 22px; line-height: 30px; }
  .elz-tech-title em { font-size: 30px; line-height: 38px; }
  /* two-column mobile grid (same convention as the .elz-cards grid above).
     display:contents dissolves the two row wrappers so all five features
     become direct grid children — natural order lays out 2 · 2 · 1, and the
     odd-one-out Digital Muscle spans both columns so it stays centred */
  .elz-tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 20px; }
  .elz-tech-row { display: contents; }
  /* display:contents removes each row's box, so the scroll-reveal observer can
     never mark the .reveal-stagger rows .visible and the items would stay at
     opacity:0 (blank section). Pin them visible here — the section reveals with
     the rest of the page instead of on its own stagger. */
  .elz-tech-grid .reveal-stagger > * { opacity: 1; transform: none; }
  .elz-tech-row--pair > .elz-tech-item:last-child { grid-column: 1 / -1; }
  .elz-tech-ico { width: 56px; height: 56px; }
  .elz-tech-item h3 { font-size: 20px; line-height: 26px; }
  .elz-tech-item p { font-size: 13px; line-height: 19px; }
  /* tuck the Partner FAB into the corner as an icon-only bubble on phones */
  .elz-fab { right: 16px; bottom: 16px; padding: 15px; }
  .elz-fab__label { display: none; }
  .elz-fab__icon { font-size: 20px; }
}
/* Voices of Elanzia — mobile horizontal auto-scroll.
   Off phones this stays the shared .gs-voices masonry (/assets/css/styles.css). On phones
   we reuse the IGM Academy pattern from index.html instead: the three masonry
   columns dissolve (display:contents) so every card becomes one item in a
   single snapping, swipeable row that elanzia.js auto-advances. Scoped here
   because elanzia.css is this page only, so GoldSense/RamMudra keep their
   stacked "View More" layout. 640px matches the auto-scroll's matchMedia in
   elanzia.js. */
@media (max-width: 640px) {
  .gs-voices__grid {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    max-width: none;
    /* top-align so a short quote card doesn't get stretched to the tallest
       card's height the way flex's default align-items:stretch would */
    align-items: start;
    justify-content: start;
    gap: 14px;
    /* full-bleed track: cancel .gs-voices' 20px mobile side padding, then
       re-add it as the scroller's own padding so card 1 stays inset and the
       last card can scroll clear of the right edge (mirrors .academy-grid) */
    margin-inline: -20px;
    padding: 6px 20px 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gs-voices__grid::-webkit-scrollbar { display: none; }
  /* dissolve the three masonry columns so their cards line up as one row */
  .gs-vcol { display: contents; }
  .gs-vcard { flex: 0 0 82vw; scroll-snap-align: start; }
  /* every card belongs in the track: undo the shared "View More" truncation
     (script.js tags overflow cards .gs-vcard--extra on phones) and drop its
     button — the horizontal scroll already surfaces the full set */
  .gs-vcard--extra { display: block; }
  .gs-voices:has(.gs-vcard--extra):not(.is-expanded) .gs-voices__more { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .elz-track { animation: none; }
  .elz-hero-content > * { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   PARTNER WITH US — popup + sticky launcher
   Reuses partner.css's .pform-success modal shell + .field styling; these are
   the same overrides GoldSense's .gs-demo / .gs-fab use, ported here under an
   elz- prefix so no goldsense.css is needed and nothing clashes with this
   page's own gs- classes. Behaviour is wired in elanzia.js.
   ============================================================ */
.elz-demo-card { max-width: 560px; align-items: stretch; text-align: left; gap: 28px; max-height: 90vh; overflow-y: auto; }
.elz-demo-form { display: flex; flex-direction: column; gap: 28px; }

/* Sticky launcher — a champagne chat-bubble FAB pinned bottom-right. Sits above
   the page but below the modal (.pform-success is z 1000+); the soft halo
   breathes to draw the eye and matches the hero CTA gradient. */
.elz-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 190;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border: none; border-radius: 999px; cursor: pointer;
  font: 600 15px/1 inherit; color: #1a1408; white-space: nowrap;
  background: var(--gold-grad, linear-gradient(100deg, #b9903f 0%, #e8cf8f 45%, #b9903f 100%));
  box-shadow: 0 10px 28px rgba(20, 16, 8, .28), 0 0 0 6px rgba(185, 144, 63, .16);
  transition: transform .35s var(--spring, cubic-bezier(.2,.9,.3,1.3)), box-shadow .35s ease;
  animation: elz-fab-pulse 2.6s ease-in-out infinite;
}
.elz-fab:hover { transform: translateY(-3px) scale(1.04); }
.elz-fab__icon { font-size: 18px; }

/* the champagne halo breathes outward; paused for reduced-motion users below */
@keyframes elz-fab-pulse {
  0%, 100% { box-shadow: 0 10px 28px rgba(20,16,8,.28), 0 0 0 6px rgba(185,144,63,.16); }
  50%      { box-shadow: 0 10px 28px rgba(20,16,8,.28), 0 0 0 12px rgba(185,144,63,0); }
}
@media (prefers-reduced-motion: reduce) { .elz-fab { animation: none; } }