/* Product previews retain the scale and movement of the existing collage. */
.performance-preview { background: #3a31a3; }
.performance-window {
  position: absolute; left: 150px; top: 94px; width: 500px;
  padding: 25px 28px 26px; border-radius: 10px;
  background: #fbfbff; color: #202033;
  box-shadow: 0 28px 65px #120b6955; transform: rotate(7deg) scale(.81);
  font-variant-numeric: tabular-nums;
}
.performance-top { display: flex; align-items: center; gap: 18px; border-bottom: 1px solid #e5e5ee; padding-bottom: 16px; }
.performance-top > strong { font-size: 24px; letter-spacing: -.06em; }
.performance-top > strong > span { color: #6554e8; }
.performance-top > span:nth-child(2) { margin-left: auto; color: #747487; font-size: 12px; }
.performance-avatar { border-radius: 50%; background: #e5e2fd; color: #5343b3; width: 28px; height: 28px; display: grid; place-items: center; font-size: 10px; }
.performance-title { display: flex; align-items: baseline; justify-content: space-between; margin: 24px 0 25px; }
.performance-title h3 { font-size: 35px; font-weight: 400; letter-spacing: -.055em; }
.performance-title > span { font-size: 13px; color: #747487; }
.performance-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 25px; }
.performance-kpis > div + div { border-left: 1px solid #e5e5ee; padding-left: 24px; }
.performance-kpis span, .performance-bottom > div > span { display: block; font-size: 13px; color: #67677b; }
.performance-kpis strong { display: block; font-size: 35px; font-weight: 400; letter-spacing: -.05em; margin: 7px 0; }
.performance-kpis small { display: block; font-size: 12px; color: #34735b; }
.performance-chart { border-top: 1px solid #e5e5ee; padding-top: 19px; }
.performance-chart-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; font-size: 14px; }
.performance-chart-heading strong { font-weight: 400; }
.performance-chart-heading > span { font-size: 12px; color: #747487; display: flex; align-items: center; gap: 7px; }
.performance-chart-heading i { width: 14px; height: 3px; background: #6554e8; }
.performance-chart svg { display: block; width: 100%; height: 127px; overflow: visible; }
.performance-months { display: flex; justify-content: space-between; color: #747487; font-size: 11px; letter-spacing: .06em; margin-top: 7px; }
.performance-bottom { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; border-top: 1px solid #e5e5ee; margin-top: 20px; padding-top: 18px; }
.performance-bottom strong { font-size: 32px; font-weight: 400; letter-spacing: -.04em; }
.performance-bottom strong > span { font-size: 20px; margin-left: 2px; }
.performance-target > div:nth-child(2) { display: flex; align-items: baseline; justify-content: space-between; margin-top: 7px; }
.performance-bottom small { color: #747487; font-size: 11px; }
.performance-progress { height: 5px; background: #e7e5f6; margin-top: 10px; border-radius: 8px; overflow: hidden; }
.performance-progress i { display: block; width: 85.333%; height: 100%; background: #6554e8; transform-origin: left; }
.performance-win { border-left: 1px solid #e5e5ee; padding-left: 24px; }
.performance-win > strong { display: block; margin: 7px 0 5px; }

/* A soft Merlion mascot, with a live gaze registered to the artwork. */
.story-title, .story-copy { position: relative; z-index: 2; }
.story-media { grid-column: 6 / 13; grid-row: 1 / 3; position: relative; aspect-ratio: 1.15; align-self: center; min-width: 0; }
.story-media .footer-background { inset: -10% 0 auto; width: 100%; height: auto; aspect-ratio: 1; display: grid; place-items: center; opacity: 1; pointer-events: none; }
.story-media .footer-background::after { display: none; }
.merlion-character { position: relative; width: 82%; aspect-ratio: 1; transform-origin: 50% 70%; will-change: transform; }
.merlion-art { width: 100%; height: 100%; object-fit: contain; user-select: none; }
.merlion-eye { --look-x: 0px; --look-y: 0px; position: absolute; left: var(--eye-left); top: var(--eye-top); width: var(--eye-width); height: var(--eye-height); transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; }
.merlion-eye-left { --eye-left: 37.95%; --eye-top: 33.15%; --eye-width: 9.3%; --eye-height: 9.3%; }
.merlion-eye-right { --eye-left: 57.4%; --eye-top: 33.15%; --eye-width: 9.3%; --eye-height: 9.3%; }
.merlion-iris { position: absolute; left: 50%; top: 50%; width: 53%; height: 60%; border-radius: 50%; background: radial-gradient(ellipse at 34% 25%,#47555a 0%,#111b20 26%,#05090c 58%,#18353c 83%,#071014 100%); box-shadow: 0 1px 3px #162b3933; transform: translate(calc(-50% + var(--look-x)),calc(-50% + var(--look-y))); }
.merlion-iris::before { content: ''; position: absolute; width: 25%; height: 20%; left: 20%; top: 15%; border-radius: 50%; background: #fff; transform: rotate(-24deg); opacity: .96; filter: blur(.3px); }
.merlion-iris::after { content: ''; position: absolute; width: 9%; height: 9%; right: 17%; bottom: 22%; border-radius: 50%; background: #eff9fb; opacity: .6; }
.merlion-eyelid { position: absolute; inset: -6%; border-radius: 45%; background: linear-gradient(170deg,#eee5d7,#d3cbbb); transform: scaleY(0); transform-origin: top; }
.merlion-eyelid::after { content: ''; position: absolute; left: 10%; right: 10%; top: 53%; border-bottom: 1px solid #9c958777; border-radius: 50%; height: 7%; }
.story-motion-controls { position: absolute; z-index: 3; left: 14%; right: 4%; bottom: -3.5vw; display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.story-motion-toggle { min-height: 44px; display: flex; align-items: center; gap: 10px; color: #e0ccbb; font-size: 14px; opacity: .75; transition: opacity .2s; }
.story-motion-toggle:hover, .story-motion-toggle:focus-visible { opacity: 1; }
.motion-symbol { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #e0ccbb66; border-radius: 50%; font-size: 12px; }
@media (max-width: 600px) {
 .story-media { grid-column: 1 / 11; grid-row: auto; order: 3; width: 100%; aspect-ratio: .92; margin-top: 8vw; }
 .story-media .footer-background { left: -4%; top: -3%; right: auto; width: 108%; height: auto; aspect-ratio: 1; }
 .story-motion-controls { left: 0; right: 0; bottom: -5vw; }
 .story-motion-toggle { font-size: 14px; }
 .footer-cta { order: 4; margin-top: 13vw; }
 .footer-divider { order: 5; }
 .footer-nav { order: 6; }
 .footer-services { order: 7; }
 .footer-address { order: 8; }
}
@media (prefers-reduced-motion: reduce) { .merlion-character { will-change: auto; } }