/* ==========================================================================
   SUCCESS experience layer
   3D service scenes, product explorer, editorial articles, chat testimonials
   and the financial heat map. Motion: transform and opacity only; looping
   motion runs only while a scene is on screen (.is-live); "before arrival"
   states exist only once experience.js is running (html.js-exp).
   Opacity, overflow and masks flatten 3D, so they sit on flat leaf elements,
   never on an element that keeps its children in 3D (preserve-3d).
   ========================================================================== */
:root {
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* --------------------------------------------------------------------------
   Shared scene frame (replaces the photos beside the three service pillars)
   -------------------------------------------------------------------------- */
.pillar-media.pillar-media--scene {
  position: relative;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  overflow: visible;
  transform: none;
}
.scene {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  container-type: size;
}
.scene-rig { position: absolute; inset: 0; transform-style: preserve-3d; }
/* Percent of the core's own height (30cqmin), so no container units in keyframes. */
@keyframes scene-float { from { transform: translateY(0); } to { transform: translateY(-5.3%); } }

/* Scene 1: financial planning. Savings orbit one core, each on its own track. */
.scene-orbit { perspective: 1100px; --tilt: 62deg; }
.so-floor {
  position: absolute; left: 50%; top: 84%;
  width: 70cqmin; height: 12cqmin;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15,42,74,.2), rgba(15,42,74,0));
}
.so-core {
  position: absolute; left: 50%; top: 50%;
  width: 30cqmin; aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 34% 28%, #a9c6f0 0%, #3a6fa8 22%, #163a63 52%, #0a1b33 78%, #060f1f 100%);
  box-shadow: 0 3cqmin 6cqmin -1cqmin rgba(15,42,74,.45), inset 0 0 0 .5cqmin rgba(255,255,255,.08);
  transition: opacity .7s var(--ease-out), scale .9s var(--ease-out);
}
.so-core::after {
  content: ''; position: absolute; inset: 9%; border-radius: 50%;
  background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.55), rgba(255,255,255,0) 40%);
}
.so-core svg { position: relative; z-index: 1; width: 40%; height: auto; color: #fff; }
.so-ring {
  position: absolute; left: 50%; top: 50%;
  width: var(--d); aspect-ratio: 1;
  translate: -50% -50%;
  transform-style: preserve-3d;
  transform: rotateZ(var(--rz)) rotateX(var(--tilt));
  transition: scale .9s var(--ease-out);
}
.so-ring::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: .45cqmin solid rgba(47,98,153,.42);
  transition: opacity .7s var(--ease-out);
}
.so-ring--1 { --d: 56cqmin; --rz: -18deg; --a0: 30deg;  --dur: 22s; }
.so-ring--2 { --d: 76cqmin; --rz: 12deg;  --a0: 160deg; --dur: 30s; }
.so-ring--3 { --d: 96cqmin; --rz: -6deg;  --a0: 275deg; --dur: 40s; }
.so-spin { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateZ(var(--a0)); }
.so-node { position: absolute; left: 100%; top: 50%; transform-style: preserve-3d; }
/* The chip undoes the spin and the ring tilt in reverse order, so it always faces the viewer. */
.so-chip {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 1.2cqmin;
  padding: 1.4cqmin 2.6cqmin;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(15,42,74,.08);
  box-shadow: 0 1.2cqmin 3cqmin -1cqmin rgba(15,42,74,.35);
  color: var(--navy-900);
  font: 500 max(11px, 3.3cqmin)/1 var(--font-head);
  white-space: nowrap;
  transform: translate(-50%, -50%) rotateZ(calc(-1 * var(--a0))) rotateX(calc(-1 * var(--tilt))) rotateZ(calc(-1 * var(--rz)));
  transition: opacity .6s var(--ease-out) .35s;
}
.so-chip i { width: 1.6cqmin; aspect-ratio: 1; border-radius: 50%; background: var(--red-500); flex: none; }
/* Keyframes hold literal angles: Safari on iPhone does not reliably resolve
   custom properties or container units inside @keyframes. Each ring's values
   mirror its --a0 / --rz above and the scene's --tilt (62deg). */
.is-live .so-ring--1 .so-spin { animation: so-spin-1 22s linear infinite; }
.is-live .so-ring--2 .so-spin { animation: so-spin-2 30s linear infinite; }
.is-live .so-ring--3 .so-spin { animation: so-spin-3 40s linear infinite; }
.is-live .so-ring--1 .so-chip { animation: so-counter-1 22s linear infinite; }
.is-live .so-ring--2 .so-chip { animation: so-counter-2 30s linear infinite; }
.is-live .so-ring--3 .so-chip { animation: so-counter-3 40s linear infinite; }
.is-live .so-core { animation: scene-float 6s var(--ease-in-out) infinite alternate; }
@keyframes so-spin-1 { from { transform: rotateZ(30deg); } to { transform: rotateZ(390deg); } }
@keyframes so-spin-2 { from { transform: rotateZ(160deg); } to { transform: rotateZ(520deg); } }
@keyframes so-spin-3 { from { transform: rotateZ(275deg); } to { transform: rotateZ(635deg); } }
@keyframes so-counter-1 {
  from { transform: translate(-50%, -50%) rotateZ(-30deg) rotateX(-62deg) rotateZ(18deg); }
  to { transform: translate(-50%, -50%) rotateZ(-390deg) rotateX(-62deg) rotateZ(18deg); }
}
@keyframes so-counter-2 {
  from { transform: translate(-50%, -50%) rotateZ(-160deg) rotateX(-62deg) rotateZ(-12deg); }
  to { transform: translate(-50%, -50%) rotateZ(-520deg) rotateX(-62deg) rotateZ(-12deg); }
}
@keyframes so-counter-3 {
  from { transform: translate(-50%, -50%) rotateZ(-275deg) rotateX(-62deg) rotateZ(6deg); }
  to { transform: translate(-50%, -50%) rotateZ(-635deg) rotateX(-62deg) rotateZ(6deg); }
}
.so-ring--2, .so-ring--2::before { transition-delay: .12s; }
.so-ring--3, .so-ring--3::before { transition-delay: .24s; }
html.js-exp [data-arrive]:not(.arrived) .so-ring { scale: .86; }
html.js-exp [data-arrive]:not(.arrived) .so-ring::before,
html.js-exp [data-arrive]:not(.arrived) .so-chip,
html.js-exp [data-arrive]:not(.arrived) .so-core { opacity: 0; }
html.js-exp [data-arrive]:not(.arrived) .so-core { scale: .9; }

/* Scene 2: pension planning. A road toward a planned retirement; milestones
   come toward the viewer. Like the other two scenes it has no frame or ground:
   the road floats on the page and fades out at both ends. Only the road, its
   centre line and the three milestones are 3D, which keeps the scene light to
   draw while scrolling. Sizes are in container units so the shape holds from
   phone to desktop; nothing in the scene ever reaches the camera plane. */
.scene-road { overflow: hidden; }
.scene-road::before {
  content: ''; position: absolute; left: 50%; top: 40%;
  width: 96%; height: 56%;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(232,83,107,.13), rgba(232,83,107,0));
}
.sr-sun {
  position: absolute; left: 50%; top: 40%;
  width: 32cqmin; aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe3e7 0%, #ff8a9b 32%, #e8536b 52%, rgba(232,83,107,0) 70%);
  transition: opacity 1s var(--ease-out), translate 1.2s var(--ease-out);
}
.is-live .sr-sun { animation: sr-glow 5s var(--ease-in-out) infinite alternate; }
@keyframes sr-glow { to { transform: scale(1.1); } }
.sr-view { position: absolute; inset: 0; perspective: 70cqh; perspective-origin: 50% 34%; }
.sr-road {
  position: absolute; left: 50%; bottom: -4cqh;
  width: 64cqw; height: 400cqh;
  translate: -50% 0;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  transform: rotateX(86deg) scaleY(1);
  background: linear-gradient(180deg, rgba(49,82,124,0) 0%, #31527c 12%, var(--navy-700) 40%, var(--navy-900) 84%, rgba(10,27,51,0) 99%);
  transition: transform 1.4s var(--ease-out);
}
.sr-road::before, .sr-road::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: .8cqw;
  background: linear-gradient(180deg, rgba(111,159,224,0) 0%, rgba(111,159,224,.9) 12%, rgba(111,159,224,.9) 84%, rgba(111,159,224,0) 99%);
}
.sr-road::before { left: 0; }
.sr-road::after { right: 0; }
.sr-dash-wrap { position: absolute; left: 50%; top: 0; width: 1.8cqw; height: 100%; translate: -50% 0; overflow: hidden; }
.sr-dash {
  position: absolute; left: 0; right: 0; top: -34cqh; bottom: 0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.92) 0 14cqh, transparent 14cqh 34cqh);
}
.is-live .sr-dash { animation: sr-dash 1.5s linear infinite; }
/* One dash period (34cqh) as a percent of the strip's own height (400 + 34cqh). */
@keyframes sr-dash { from { transform: translateY(0); } to { transform: translateY(7.834%); } }
/* A milestone stands upright on the road: the flag undoes the road's tilt.
   Each mark is a box the size of the road, so it moves in percents of the road
   (x: 21cqw of a 64cqw road = 32.8%; y: per 400cqh of length). */
.sr-mark { position: absolute; inset: 0; transform-style: preserve-3d; }
.sr-mark--1 { transform: translate3d(-32.8%, 90%, 0); }
.sr-mark--2 { transform: translate3d(32.8%, 76.25%, 0); }
.sr-mark--3 { transform: translate3d(-32.8%, 60%, 0); }
.sr-flag {
  position: absolute; left: 50%; top: 0;
  display: flex; flex-direction: column; align-items: center;
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotateX(-86deg);
}
.sr-flag span {
  display: block;
  padding: 2.6cqmin 4.4cqmin;
  border-radius: 999px;
  background: #fff;
  color: var(--navy-900);
  font: 500 8.4cqmin/1 var(--font-head);
  white-space: nowrap;
  box-shadow: 0 2cqmin 4cqmin rgba(6,15,31,.25);
}
.sr-flag::after {
  content: ''; display: block; width: 1cqmin; height: 12cqmin;
  background: linear-gradient(#ffffff, rgba(255,255,255,.3));
}
.is-live .sr-mark--1 { animation: sr-move-l 10.2s linear infinite; }
.is-live .sr-mark--2 { animation: sr-move-r 10.2s linear -3.4s infinite; }
.is-live .sr-mark--3 { animation: sr-move-l 10.2s linear -6.8s infinite; }
.is-live .sr-flag { animation: sr-fade 10.2s linear infinite; }
.is-live .sr-mark--2 .sr-flag { animation-delay: -3.4s; }
.is-live .sr-mark--3 .sr-flag { animation-delay: -6.8s; }
@keyframes sr-move-l {
  from { transform: translate3d(-32.8%, 45%, 0); }
  to { transform: translate3d(-32.8%, 99%, 0); }
}
@keyframes sr-move-r {
  from { transform: translate3d(32.8%, 45%, 0); }
  to { transform: translate3d(32.8%, 99%, 0); }
}
@keyframes sr-fade { 0% { opacity: 0; } 14%, 86% { opacity: 1; } 96%, 100% { opacity: 0; } }
.sr-goal {
  position: absolute; left: 50%; top: 40%;
  translate: -50% -170%;
  padding: 1.5cqmin 3.2cqmin;
  border-radius: 999px;
  background: var(--navy-900);
  color: #fff;
  font: 500 max(11px, 3.4cqmin)/1 var(--font-head);
  white-space: nowrap;
  box-shadow: 0 1.4cqmin 3.4cqmin -1cqmin rgba(6,15,31,.45);
  transition: opacity .8s var(--ease-out) .7s, translate 1s var(--ease-out) .7s;
}
html.js-exp [data-arrive]:not(.arrived) .sr-road { transform: rotateX(86deg) scaleY(.02); }
html.js-exp [data-arrive]:not(.arrived) .sr-sun { opacity: 0; translate: -50% -10%; }
html.js-exp [data-arrive]:not(.arrived) .sr-goal { opacity: 0; translate: -50% -110%; }

/* Scene 3: insurance. A solid shield; each cover lights up in turn. */
/* Clipped to its frame: the tilted floor otherwise counts as page overflow on tablets. */
.scene-shield { perspective: 900px; overflow: hidden; }
.sh-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sh-floor {
  position: absolute; left: 50%; top: 72%;
  width: 84cqmin; aspect-ratio: 1;
  translate: -50% -50%;
  transform: rotateX(76deg);
}
.sh-floor::before {
  content: ''; position: absolute; inset: 16%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15,42,74,.3), rgba(15,42,74,0));
}
.sh-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  border: .6cqmin solid rgba(232,83,107,.7);
  opacity: 0;
  transform: scale(.3);
}
.is-live .sh-pulse { animation: sh-pulse 3.6s var(--ease-out) infinite; }
.is-live .sh-pulse:nth-child(2) { animation-delay: 1.2s; }
.is-live .sh-pulse:nth-child(3) { animation-delay: 2.4s; }
@keyframes sh-pulse { 0% { opacity: 0; transform: scale(.3); } 12% { opacity: .85; } 100% { opacity: 0; transform: scale(1); } }
.sh-body {
  position: absolute; left: 50%; top: 44%;
  width: 35cqmin; aspect-ratio: 100 / 118;
  translate: -50% -50%;
  transform-style: preserve-3d;
  transition: translate 1s var(--ease-out), scale 1s var(--ease-out);
}
.is-live .sh-body { animation: sh-sway 8s var(--ease-in-out) infinite alternate; }
/* Same function list at both ends; the lift is a percent of the shield's own height. */
@keyframes sh-sway { from { transform: rotateY(-20deg) translateY(0); } to { transform: rotateY(20deg) translateY(-3.9%); } }
.sh-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: opacity .8s var(--ease-out); }
.sh-layer--1 { transform: translateZ(-1cqmin); }
.sh-layer--2 { transform: translateZ(-2cqmin); }
.sh-layer--3 { transform: translateZ(-3cqmin); }
.sh-chip {
  position: absolute; left: var(--x); top: var(--y);
  translate: -50% -50%;
  display: flex; align-items: center; gap: 1.2cqmin;
  padding: 1.3cqmin 2.4cqmin;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(15,42,74,.08);
  box-shadow: 0 1cqmin 2.6cqmin -.6cqmin rgba(15,42,74,.3);
  color: var(--navy-900);
  font: 500 max(10px, 3cqmin)/1 var(--font-head);
  white-space: nowrap;
  transition: opacity .6s var(--ease-out), scale .6s var(--ease-out);
}
.sh-chip::before { content: ''; flex: none; width: 1.6cqmin; aspect-ratio: 1; border-radius: 50%; background: var(--red-500); }
.is-live .sh-chip::before { animation: sh-lock 7.5s var(--ease-out) infinite; animation-delay: var(--t); }
/* Opacity and scale only, so the dots light up without repainting. */
@keyframes sh-lock {
  0%, 6% { opacity: .3; transform: scale(1); }
  11% { opacity: 1; transform: scale(1.7); }
  18%, 100% { opacity: 1; transform: scale(1); }
}
.sh-chip:nth-of-type(2) { transition-delay: .1s; }
.sh-chip:nth-of-type(3) { transition-delay: .2s; }
.sh-chip:nth-of-type(4) { transition-delay: .3s; }
.sh-chip:nth-of-type(5) { transition-delay: .4s; }
html.js-exp [data-arrive]:not(.arrived) .sh-body { scale: .92; translate: -50% -38%; }
html.js-exp [data-arrive]:not(.arrived) .sh-layer,
html.js-exp [data-arrive]:not(.arrived) .sh-chip { opacity: 0; }
html.js-exp [data-arrive]:not(.arrived) .sh-chip { scale: .9; }

/* --------------------------------------------------------------------------
   Products: an editorial list beside a 3D medallion (no card grid)
   -------------------------------------------------------------------------- */
.prod-explorer {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.prod-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline-strong); perspective: 1200px; }
.prod-item {
  border-bottom: 1px solid var(--hairline);
  transform-origin: 50% 0;
  transition: opacity .55s var(--ease-out) var(--arrive-delay, 0ms), transform .75s var(--ease-out) var(--arrive-delay, 0ms), background-color .25s ease;
}
html.js-exp .prod-item[data-arrive]:not(.arrived) { opacity: 0; transform: rotateX(-60deg) translateY(-6px); }
.prod-item.is-open { background-color: #f4f6fb; }
.prod-h { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.prod-head {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 22px 12px;
  background: none;
  border: 0;
  text-align: start;
  font: inherit;
  color: var(--navy-900);
  cursor: pointer;
  position: relative;
}
.prod-head::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 20%; bottom: 20%; width: 3px;
  border-radius: 3px; background: var(--red-500);
  transform: scaleY(0); transition: transform .3s var(--ease-out);
}
.prod-item.is-open .prod-head::before { transform: scaleY(1); }
.prod-num {
  font-family: 'Oswald', var(--font-head); font-weight: 400; font-size: 1rem;
  color: var(--gray-600); font-variant-numeric: tabular-nums; min-width: 2ch;
}
.prod-ico { display: none; }
.prod-name { font: 500 clamp(1.1rem, 1.6vw, 1.38rem)/1.35 var(--font-head); color: var(--navy-900); text-wrap: balance; }
.prod-cat { font-size: .82rem; color: var(--gray-600); white-space: nowrap; }
.prod-plus { position: relative; width: 16px; height: 16px; flex: none; }
.prod-plus::before, .prod-plus::after {
  content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 2px; background: var(--navy-800);
  transition: transform .3s var(--ease-out);
}
.prod-plus::after { transform: rotate(90deg); }
.prod-item.is-open .prod-plus::after { transform: rotate(0deg); }
.prod-desc { display: grid; grid-template-rows: 1fr; }
html.js-exp .prod-desc { transition: grid-template-rows .3s var(--ease-out), visibility 0s linear 0s; }
html.js-exp .prod-item:not(.is-open) .prod-desc { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .3s var(--ease-out), visibility 0s linear .3s; }
.prod-desc > div { overflow: hidden; min-height: 0; }
.prod-desc p {
  margin: 0;
  padding-block: 0 24px;
  padding-inline: calc(2ch + 30px) 12px;
  max-width: 62ch;
  color: var(--text-muted); font-size: 1rem; line-height: 1.75;
}
@media (hover: hover) and (pointer: fine) {
  .prod-head .prod-name { transition: color .2s ease; }
  .prod-head:hover .prod-name { color: var(--red-500); }
}

/* The medallion */
.prod-stage {
  position: sticky; top: 120px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  transition: opacity .8s var(--ease-out), scale .9s var(--ease-out);
}
html.js-exp .prod-stage[data-arrive]:not(.arrived) { opacity: 0; scale: .94; }
.medal-wrap { position: relative; width: min(100%, 340px); aspect-ratio: 1; perspective: 1000px; container-type: inline-size; }
.medal-orbit {
  position: absolute; inset: 2%;
  border-radius: 50%;
  border: 1px dashed rgba(47,98,153,.4);
  transform: rotateX(70deg);
  transform-style: preserve-3d;
}
.medal-orbit--2 { inset: 9%; border-style: solid; border-color: rgba(176,32,58,.22); transform: rotateY(64deg); }
.medal-orbit i {
  position: absolute; left: 50%; top: -1.6cqi;
  width: 3.2cqi; aspect-ratio: 1; translate: -50% 0;
  border-radius: 50%; background: var(--red-500);
}
.medal-orbit--2 i { background: var(--blue-signal); }
.is-live .medal-orbit { animation: medal-orbit 18s linear infinite; }
.is-live .medal-orbit--2 { animation: medal-orbit-2 26s linear infinite; }
@keyframes medal-orbit { to { transform: rotateX(70deg) rotateZ(360deg); } }
@keyframes medal-orbit-2 { to { transform: rotateY(64deg) rotateZ(-360deg); } }
.medal-rig { position: absolute; inset: 0; transform-style: preserve-3d; }
.medal-float { position: absolute; inset: 0; transform-style: preserve-3d; }
.is-live .medal-float { animation: medal-float 6s var(--ease-in-out) infinite alternate; }
@keyframes medal-float { from { transform: translateY(0); } to { transform: translateY(-2.4%); } }
.medal {
  position: absolute; inset: 21%;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform .7s var(--ease-in-out);
}
.medal-rim {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(135deg, #c3cee2, #7d91b4);
  transform: translateZ(var(--z));
}
.medal-face {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background: radial-gradient(circle at 32% 26%, #ffffff 0%, #f1f4fa 26%, #cfd8e8 64%, #a8b8d2 100%);
  box-shadow: inset 0 0 0 1.6cqi rgba(255,255,255,.9), inset 0 0 0 2.2cqi rgba(15,42,74,.14), inset -3cqi -5cqi 9cqi rgba(15,42,74,.22);
  transform: translateZ(2cqi);
}
.medal-face--b { transform: rotateY(180deg) translateZ(2cqi); }
.medal-icon { width: 38%; color: var(--navy-800); display: grid; place-items: center; }
.medal-icon svg { width: 100%; height: auto; stroke-width: 1.3; }
.medal-shadow {
  position: absolute; left: 50%; bottom: 4%;
  width: 46%; height: 7%;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15,42,74,.26), rgba(15,42,74,0));
}
.medal-caption { text-align: center; min-height: 112px; }
.medal-caption > * { display: block; transition: opacity .18s ease, transform .18s ease; }
.medal-caption.is-swapping > * { opacity: 0; transform: translateY(6px); }
.mc-num { font-family: 'Oswald', var(--font-head); font-weight: 400; font-size: 2.6rem; line-height: 1; color: var(--navy-800); }
.mc-name { margin-top: 8px; font: 500 1.2rem/1.35 var(--font-head); color: var(--navy-900); text-wrap: balance; }
.mc-cat { margin-top: 6px; font-size: .82rem; color: var(--red-500); }

@media (max-width: 899px) {
  .prod-explorer { grid-template-columns: 1fr; }
  .prod-stage { display: none; }
  .prod-head { grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 14px; padding: 16px 6px; }
  .prod-cat { display: none; }
  .prod-ico {
    display: grid; place-items: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: radial-gradient(circle at 32% 26%, #ffffff 0%, #eef2f9 45%, #cfd8e8 100%);
    box-shadow: inset 0 0 0 1px rgba(15,42,74,.1);
    color: var(--navy-800);
    transform: perspective(300px) rotateY(0deg);
    transition: transform .6s var(--ease-in-out);
  }
  .prod-ico svg { width: 20px; height: 20px; }
  .prod-item.is-open .prod-ico { transform: perspective(300px) rotateY(360deg); }
  .prod-desc p { padding-inline: 6px; padding-block: 0 20px; }
}

/* --------------------------------------------------------------------------
   Articles: editorial rows that unfold like pages
   -------------------------------------------------------------------------- */
.news-list { border-top: 1px solid var(--hairline-strong); perspective: 1200px; }
.news-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  padding: 30px 12px;
  border-bottom: 1px solid var(--hairline);
  color: inherit;
  text-decoration: none;
  transform-origin: 50% 0;
  transition: opacity .55s var(--ease-out) var(--arrive-delay, 0ms), transform .8s var(--ease-out) var(--arrive-delay, 0ms), background-color .25s ease;
}
html.js-exp .news-item[data-arrive]:not(.arrived) { opacity: 0; transform: rotateX(-80deg); }
.news-source {
  font: 700 clamp(1.5rem, 2.8vw, 2.3rem)/1.1 var(--font-head);
  color: var(--navy-900);
  -webkit-text-stroke: 1px var(--navy-800);
  transition: color .7s var(--ease-out);
}
/* The masthead is drawn as an outline first and fills in once the row has unfolded. */
html.js-exp .news-item:not(.is-inked) .news-source { color: transparent; }
.news-title { margin: 0; font: 500 clamp(1.05rem, 1.5vw, 1.26rem)/1.55 var(--font-head); color: var(--navy-900); text-wrap: pretty; }
.news-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: .95rem; color: var(--navy-800);
  white-space: nowrap;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--hairline-strong);
}
.news-cta svg { width: 18px; height: 18px; transition: transform .25s var(--ease-out); }
.news-page {
  position: absolute; inset-inline-end: clamp(120px, 13vw, 180px); bottom: 50%;
  width: 104px; height: 132px;
  padding: 12px 10px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 18px 40px -16px rgba(15,42,74,.45), 0 0 0 1px rgba(15,42,74,.08);
  display: flex; flex-direction: column; gap: 6px;
  transform-origin: 50% 100%;
  transform: perspective(600px) rotateX(90deg) translateY(0);
  opacity: 0;
  pointer-events: none;
  transition: transform .45s var(--ease-out), opacity .25s ease;
  z-index: 2;
}
.news-page b { font: 700 .72rem/1 var(--font-head); color: var(--navy-900); border-bottom: 2px solid var(--navy-900); padding-bottom: 5px; }
.news-page i { display: block; height: 6px; border-radius: 3px; background: #dfe5ef; }
.news-page i:nth-of-type(1) { width: 92%; height: 9px; background: #c3cddc; }
.news-page i:nth-of-type(2) { width: 100%; }
.news-page i:nth-of-type(3) { width: 84%; }
.news-page i:nth-of-type(4) { width: 70%; }
@media (hover: hover) and (pointer: fine) {
  .news-item:hover { background-color: #f4f6fb; }
  .news-item:hover .news-source { color: var(--red-500); -webkit-text-stroke-color: var(--red-500); transition-duration: .2s; }
  .news-item:hover .news-cta svg { transform: translateX(-6px); }
  .news-item:hover .news-page { transform: perspective(600px) rotateX(0deg) translateY(-12px); opacity: 1; }
}
@media (max-width: 767px) {
  .news-item { grid-template-columns: 1fr; gap: 10px; padding: 24px 4px; }
  .news-source { font-size: 1.45rem; }
  .news-cta { justify-self: start; margin-top: 4px; }
  .news-page { display: none; }
}

/* --------------------------------------------------------------------------
   Testimonials: a chat thread, beside a 3D phone on wide screens
   -------------------------------------------------------------------------- */
#testimonials {
  background-color: var(--white);
  background-image: radial-gradient(rgba(15,42,74,.07) 1px, transparent 1.3px);
  background-size: 22px 22px;
}
.chat-scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.chat-thread {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 18px;
  perspective: 1400px;
}
.chat-msg {
  position: relative;
  align-self: flex-start;
  max-width: min(660px, 92%);
  padding: 12px 18px 10px;
  border-radius: 20px;
  border-start-start-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(15,42,74,.08), 0 14px 30px -16px rgba(15,42,74,.3);
  transform-origin: 100% 0;
  transition: opacity .5s var(--ease-out) var(--arrive-delay, 0ms), transform .65s var(--ease-out) var(--arrive-delay, 0ms);
}
/* The tail sits at the top corner on the start (right) side, like an incoming message. */
.chat-msg::before {
  content: '';
  position: absolute; top: 0; inset-inline-start: -9px;
  width: 12px; height: 14px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.chat-msg:nth-child(even) { margin-inline-start: clamp(0px, 5vw, 64px); }
html.js-exp .chat-msg[data-arrive]:not(.arrived) { opacity: 0; transform: translateY(18px) rotateX(-16deg) scale(.96); }
.chat-who { display: block; margin-bottom: 4px; font: 700 .84rem/1.2 var(--font-head); color: var(--red-500); }
.chat-text { margin: 0; color: var(--gray-900); font-size: 1.04rem; line-height: 1.75; }
.chat-msg--long .chat-text { font-size: 1.1rem; line-height: 1.85; }
.chat-meta {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  margin-top: 6px;
  font-size: .78rem; color: var(--gray-600);
}
.chat-stars { color: var(--red-500); letter-spacing: 1px; font-size: .82rem; }
.chat-ticks { width: 18px; height: 12px; color: var(--navy-500); }

/* The phone: decorative, wide screens only */
.chat-phone { position: sticky; top: 110px; transition: opacity .9s var(--ease-out), scale 1s var(--ease-out); }
html.js-exp .chat-phone[data-arrive]:not(.arrived) { opacity: 0; scale: .94; }
.cp-rig { perspective: 1200px; transform-style: preserve-3d; }
.cp-body {
  position: relative;
  width: 100%; aspect-ratio: 9 / 18.5;
  padding: 9px;
  border-radius: 38px;
  background: linear-gradient(150deg, #22344f, #060f1f 60%);
  box-shadow: 0 40px 70px -30px rgba(6,15,31,.55), inset 0 0 0 1.5px rgba(255,255,255,.08);
  transform: rotateY(-16deg) rotateX(6deg);
  transform-style: preserve-3d;
}
.cp-edge { position: absolute; inset: 0; border-radius: 38px; background: #050b16; transform: translateZ(-10px); }
.cp-screen {
  position: relative; height: 100%;
  border-radius: 30px; overflow: hidden;
  background: #e8eef6;
  background-image: radial-gradient(rgba(15,42,74,.08) 1px, transparent 1.2px);
  background-size: 16px 16px;
  transform: translateZ(1px);
}
.cp-head { display: flex; align-items: center; gap: 10px; padding: 26px 14px 12px; background: var(--navy-900); color: #fff; }
.cp-avatar { width: 34px; height: 34px; border-radius: 50%; background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; }
.cp-avatar img { width: 82%; height: auto; }
.cp-title { font: 700 .8rem/1.2 var(--font-head); letter-spacing: .04em; }
.cp-title small { display: block; font-weight: 400; letter-spacing: 0; opacity: .75; }
.cp-thread { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px; }
.cp-b {
  align-self: flex-start;
  height: 34px; border-radius: 14px; border-start-start-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(15,42,74,.08);
  transform-origin: 100% 0;
}
.cp-b--1 { width: 82%; }
.cp-b--2 { width: 60%; height: 52px; }
.cp-b--3 { width: 72%; }
.cp-b--me { align-self: flex-end; width: 46%; background: #d9f2df; border-radius: 14px; border-start-end-radius: 4px; transform-origin: 0 0; }
.cp-typing { align-self: flex-start; display: flex; gap: 4px; padding: 10px 12px; border-radius: 14px; background: #fff; }
.cp-typing i { width: 6px; height: 6px; border-radius: 50%; background: #9fb0cc; }
.is-live .cp-b { animation: cp-pop 8s var(--ease-out) infinite backwards; }
.is-live .cp-b--2 { animation-delay: .9s; }
.is-live .cp-b--me { animation-delay: 1.8s; }
.is-live .cp-b--3 { animation-delay: 2.7s; }
.is-live .cp-typing i { animation: cp-dot 1.2s ease-in-out infinite; }
.is-live .cp-typing i:nth-child(2) { animation-delay: .15s; }
.is-live .cp-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cp-pop { 0% { opacity: 0; transform: scale(.94) translateY(8px); } 6%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes cp-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (max-width: 899px) {
  .chat-scene { grid-template-columns: 1fr; }
  .chat-phone { display: none; }
}
@media (max-width: 767px) {
  .chat-msg--long .chat-text { font-size: 1.04rem; line-height: 1.75; }
}

/* --------------------------------------------------------------------------
   Financial heat map (live data from TradingView, loaded near the section)
   -------------------------------------------------------------------------- */
/* Runs from the articles' tint into the white of the testimonials, so there is no seam. */
.heatmap-section { background: linear-gradient(180deg, #f4f6fb 0%, var(--white) 100%); overflow-x: clip; }
.hm-controls {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 14px 30px;
  margin-bottom: 30px;
}
.hm-advanced { display: contents; }
.hm-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hm-label { font-size: .84rem; color: var(--gray-600); margin-inline-end: 4px; }
.hm-chip, .hm-more {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: rgba(255,255,255,.9);
  color: var(--navy-900);
  font: 500 .92rem/1 var(--font-body);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .12s var(--ease-out);
}
.hm-chip[aria-pressed="true"] { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.hm-chip:active, .hm-more:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .hm-chip:hover, .hm-more:hover { border-color: var(--navy-700); }
}
.hm-more { display: none; align-items: center; gap: 8px; }
.hm-more svg { width: 16px; height: 16px; transition: transform .25s var(--ease-out); }
.hm-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.hm-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: .92rem; color: var(--navy-900); cursor: pointer; min-height: 44px; }
.hm-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.hm-switch-track { position: relative; width: 42px; height: 24px; border-radius: 999px; background: #b9c4d6; transition: background-color .2s ease; flex: none; }
.hm-switch-track::after {
  content: ''; position: absolute; top: 3px; right: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(6,15,31,.3);
  transition: transform .2s var(--ease-out);
}
.hm-switch input:checked + .hm-switch-track { background: var(--navy-800); }
.hm-switch input:checked + .hm-switch-track::after { transform: translateX(-18px); }
.hm-switch input:focus-visible + .hm-switch-track { outline: 3px solid var(--red-400); outline-offset: 2px; }
.hm-stage { position: relative; perspective: 1600px; padding-bottom: 56px; }
.hm-floor-wrap {
  position: absolute; left: -6%; right: -6%; bottom: 0; height: 300px;
  perspective: 700px; perspective-origin: 50% 0%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(0deg, #000 30%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(0deg, #000 30%, transparent);
          mask-composite: intersect;
  transition: opacity 1s var(--ease-out) .3s;
}
.hm-floor {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(14, 1fr); grid-auto-rows: 1fr; gap: 6px;
  transform-origin: 50% 100%;
  transform: rotateX(64deg);
}
/* A still floor: the map above it is the moving part. */
.hm-floor span { border-radius: 4px; background: var(--c); opacity: .55; }
.hm-frame {
  position: relative; z-index: 1;
  height: 560px;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 0 rgba(15,42,74,.05), 0 44px 80px -42px rgba(15,42,74,.5);
  transform-origin: 50% 100%;
  transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out);
}
html.js-exp .hm[data-arrive]:not(.arrived) .hm-frame { opacity: 0; transform: rotateX(24deg) translateY(36px) scale(.96); }
html.js-exp .hm[data-arrive]:not(.arrived) .hm-floor-wrap { opacity: 0; }
.hm-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.hm-skeleton {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr;
  gap: 3px; padding: 3px;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.hm-skeleton span { border-radius: 4px; background: #eef1f6; }
.hm-skeleton span:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.hm-skeleton span:nth-child(2) { grid-column: span 2; grid-row: span 2; }
.hm-skeleton span:nth-child(5) { grid-column: span 2; }
.hm-frame:not(.is-loaded) .hm-skeleton span { animation: hm-wait 1.4s ease-in-out infinite alternate; }
.hm-frame.is-loaded .hm-skeleton { opacity: 0; visibility: hidden; }
@keyframes hm-wait { to { opacity: .5; } }
/* On touch screens the page keeps the scroll; one tap hands touch to the map.
   The button sits on the tile floor under the map, so it hides none of the data. */
.hm-touch {
  position: absolute; left: 50%; bottom: 6px; z-index: 2;
  translate: -50% 0;
  display: none;
  min-height: 44px; padding: 10px 18px;
  border: 0; border-radius: 999px;
  background: rgba(10,27,51,.9); color: #fff;
  font: 500 .9rem/1 var(--font-body);
  white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(6,15,31,.6);
  cursor: pointer;
}
@media (pointer: coarse) {
  .hm-touch { display: inline-flex; align-items: center; }
  .hm-frame:not(.is-interactive) iframe { pointer-events: none; }
}
.hm-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px; margin-top: 16px; }
.hm-credit { display: inline-block; font-size: .86rem; color: var(--navy-800); border-bottom: 1px solid var(--hairline-strong); padding-block: 12px 3px; }
.hm-note { margin: 0; max-width: 72ch; font-size: .82rem; color: var(--gray-600); line-height: 1.6; }
@media (max-width: 767px) {
  .hm-controls { flex-direction: column; align-items: stretch; gap: 12px; }
  .hm-label { flex-basis: 100%; }
  .hm-chip { padding: 8px 14px; min-height: 44px; }
  .hm-more { display: inline-flex; align-self: flex-start; min-height: 44px; }
  .hm-advanced { display: none; flex-direction: column; gap: 12px; }
  .hm-controls.is-expanded .hm-advanced { display: flex; }
  .hm-frame { height: 440px; border-radius: 18px; }
  .hm-floor { grid-template-columns: repeat(8, 1fr); }
  .hm-floor span:nth-child(n+25) { display: none; }
}

/* --------------------------------------------------------------------------
   Pause control for the looping scenes (WCAG 2.2.2). One press pauses every
   decorative loop on the page where it stands; a second press resumes them.
   -------------------------------------------------------------------------- */
.motion-toggle {
  position: absolute; z-index: 3;
  bottom: 6px; inset-inline-end: 6px;
  width: 44px; height: 44px;
  display: none; place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: rgba(255,255,255,.92);
  color: var(--navy-800);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .12s var(--ease-out);
}
html.js-exp .motion-toggle { display: grid; }
.motion-toggle svg { grid-area: 1 / 1; width: 16px; height: 16px; }
.motion-toggle .mt-play, .motion-toggle[aria-pressed="true"] .mt-pause { display: none; }
.motion-toggle[aria-pressed="true"] .mt-play { display: block; }
.motion-toggle:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .motion-toggle:hover { border-color: var(--navy-700); background: #fff; }
}
.prod-stage .motion-toggle { bottom: auto; top: 0; }
/* In the gap between the phone and the messages, clear of the WhatsApp button. */
.chat-phone .motion-toggle { bottom: 6px; inset-inline-end: auto; inset-inline-start: -56px; }
html.motion-paused .is-live *,
html.motion-paused .is-live *::before,
html.motion-paused .is-live *::after { animation-play-state: paused !important; }

/* --------------------------------------------------------------------------
   Reduced motion: final states, no loops, no travel
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .so-spin, .so-chip, .so-core, .sr-sun, .sr-dash, .sr-mark, .sr-flag,
  .sh-pulse, .sh-body, .sh-chip::before, .medal-orbit, .medal-float, .cp-b, .cp-typing i {
    animation: none !important;
  }
  html.js-exp .motion-toggle { display: none; }
  .medal, .prod-ico, .news-page { transition-property: opacity; }
  .prod-item, .news-item, .chat-msg { transform: none !important; }
}