/* Stationery-inspired color: each geometric piece fades into its backdrop.
   Original PNG alpha masks preserve the supplied silhouettes; files stay intact.
   This is a spatial fill, independent of the existing drift animation. */
.brand-geometry {
  aspect-ratio: 1001 / 1000;
  pointer-events: none;
  -webkit-mask: var(--geometry-mask) center / contain no-repeat;
  mask: var(--geometry-mask) center / contain no-repeat;
}
.brand-geometry > i {
  position: absolute;
  display: block;
  background: linear-gradient(var(--piece-angle, 90deg),
    color-mix(in srgb, var(--piece-color) 0%, transparent) 0%,
    color-mix(in srgb, var(--piece-color) 12%, transparent) 22%,
    color-mix(in srgb, var(--piece-color) 68%, transparent) 60%,
    var(--piece-color) 90%);
}
.geometry-mosaic { --geometry-mask: url('../assets/brand/elements/shape-mosaic.png'); }
.geometry-mosaic .mosaic-stem {
  left: 49%; top: 13.2%; width: 33.1%; height: 48%;
  border-radius: 0 54% 0 44%;
  --piece-color: var(--mg-gradient-green); --piece-angle: 180deg;
}
.geometry-mosaic .mosaic-foot {
  left: 14.3%; top: 57.5%; width: 18.8%; height: 29.4%;
  border-radius: 100% 0 0 0;
  --piece-color: var(--mg-gradient-emerald); --piece-angle: 90deg;
}
.geometry-mosaic .mosaic-cap {
  left: 33.8%; top: 13.2%; width: 30.7%; height: 14.1%;
  border-radius: 0 0 0 100%;
  --piece-color: var(--mg-gradient-cyan); --piece-angle: 180deg;
}
.geometry-mosaic .mosaic-dot {
  left: 24.6%; top: 15.6%; width: 5.8%; height: 5.8%;
  border-radius: 50%; --piece-color: var(--mg-gradient-yellow);
}
.geometry-mosaic .mosaic-tip {
  left: 82%; top: 13.2%; width: 12%; height: 19.6%;
  border-radius: 0 100% 0 0;
  --piece-color: var(--mg-gradient-emerald); --piece-angle: 180deg;
}
.geometry-mosaic .mosaic-circle {
  left: 14.8%; top: 23.4%; width: 34.4%; height: 34.5%;
  border-radius: 50%; --piece-color: var(--mg-gradient-yellow);
}
.geometry-mosaic .mosaic-base {
  left: 62.5%; top: 68%; width: 31%; height: 15.7%;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  --piece-color: var(--mg-gradient-cyan); --piece-angle: 0deg;
}
.geometry-mosaic .mosaic-block {
  left: 62.6%; top: 37.3%; width: 30.9%; height: 30.9%;
  border-radius: 0 38% 0 0;
  --piece-color: var(--mg-gradient-fuchsia); --piece-angle: 110deg;
}
.geometry-mosaic .mosaic-step {
  left: 3.8%; top: 76.8%; width: 28.9%; height: 10.1%;
  border-radius: 100px 0 0 0;
  --piece-color: var(--mg-gradient-cyan);
}
.geometry-mosaic .mosaic-petal {
  left: 32.5%; top: 56.3%; width: 30.5%; height: 30.6%;
  border-radius: 50% 50% 50% 0;
  --piece-color: var(--mg-gradient-yellow);
}
.geometry-meeting { --geometry-mask: url('../assets/brand/elements/shape-meeting.png'); }
.geometry-meeting .meeting-quarter {
  left: 19.5%; top: 26.8%; width: 30.1%; height: 30.7%;
  border-radius: 100% 0 0 0;
  --piece-color: var(--mg-gradient-yellow); --piece-angle: 100deg;
}
.geometry-meeting .meeting-foot {
  left: 2.8%; top: 57.4%; width: 45.9%; height: 16%;
  border-radius: 100px 0 0 0;
  --piece-color: var(--mg-gradient-fuchsia); --piece-angle: 180deg;
}
.geometry-meeting .meeting-petal {
  left: 48.6%; top: 24.6%; width: 48.8%; height: 48.8%;
  border-radius: 50% 50% 50% 0;
  --piece-color: var(--mg-gradient-cyan); --piece-angle: 90deg;
}
.page-how .geometry-person {
  position: relative;
  width: 100%;
  --geometry-mask: url('../assets/brand/elements/shape-person-teal.png');
}
.geometry-person .person-head {
  left: 34%; top: 8%; width: 29.6%; height: 29.6%;
  --piece-color: var(--mg-gradient-emerald); --piece-angle: 105deg;
}
.geometry-person .person-body {
  left: 5.5%; top: 44%; width: 86.5%; height: 48%;
  --piece-color: var(--mg-gradient-cyan); --piece-angle: 105deg;
}