/* RM glass: the live balloon from rbmccrmck.com, rebuilt for the RM case study */
.rm-glass { --gink: #2737dc; --ghost: #cdcdc9; }
.rm-gstage { position: relative; overflow: hidden; border-radius: 12px; background: var(--rp); box-shadow: inset 0 0 0 1px var(--rline); padding: clamp(28px, 5vw, 64px) clamp(12px, 3vw, 40px) clamp(40px, 6vw, 80px); touch-action: pan-y; }
.rm-gstage .g-head { position: relative; z-index: 1; margin: 0; text-align: center; color: var(--ghost); font-family: var(--rf); font-weight: 830; text-transform: uppercase; }
.rm-gstage .line, .rm-gstage .hm-text .line { display: block; width: fit-content; margin: 0 auto; white-space: nowrap; line-height: .84; letter-spacing: -.064em; }
.rm-gstage .hero-ribbon { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.rm-gstage .hero-mark { position: absolute; z-index: 3; left: 50%; top: 46%; aspect-ratio: 1000 / 1020; transform: translate(-50%, -50%); pointer-events: none; }
.rm-gstage .hm-float { position: absolute; inset: 0; will-change: transform; transform-origin: 0 0; }
.rm-gstage .hm-shadow, .rm-gstage .hm-lens, .rm-gstage .hm-shade, .rm-gstage .hm-knot { position: absolute; inset: 0; width: 100%; height: 100%; }
.rm-gstage .hm-shadow { transform: translate(2%, 5%); }
.rm-gstage .hm-lens { overflow: hidden; background: var(--rp); -webkit-mask: url(/assets/work/rm/glass/glass-mask.webp) center / 100% 100% no-repeat; mask: url(/assets/work/rm/glass/glass-mask.webp) center / 100% 100% no-repeat; }
.rm-gstage .hm-lens::after { content: ""; position: absolute; inset: 0; background: rgba(47, 69, 255, .07); }
.rm-gstage .hm-text { position: absolute; left: 0; top: 0; text-align: center; color: var(--gink); transform-origin: 0 0; font-family: var(--rf); font-weight: 830; text-transform: uppercase; }
.rm-gstage .hm-knot { overflow: visible; }
.rm-gstage .hm-shadow, .rm-gstage .hm-lens, .rm-gstage .hm-shade { transition: opacity .4s; }
.rm-glass.off1 .hm-shadow { opacity: 0; }
.rm-glass.off2 .hm-lens { -webkit-mask: none; mask: none; opacity: 0; }
.rm-glass.off3 .hm-shade { opacity: 0; }
.rm-glass.off4 .hm-lens { filter: none !important; }
.rm-tilt { display: none; }
.rm-tilt.on { display: inline-flex; }

/* the four layers, each shown whole */
.rm-layers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); margin: 0; padding: 0; list-style: none; }
.rm-layer { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rm-layer .art { aspect-ratio: 1000 / 1020; border-radius: 12px; display: grid; place-items: center; padding: 14%; background: conic-gradient(#dadad6 25%, #f2f2f0 0 50%, #dadad6 0 75%, #f2f2f0 0) 0 0 / 16px 16px; box-shadow: inset 0 0 0 1px var(--rline); transition: opacity .4s; }
.rm-layer .art.flat { background: #ffffff; }
.rm-layer .art img { width: 100%; height: auto; display: block; }
.rm-layer label { display: flex; align-items: center; gap: 10px; cursor: pointer; font: 600 15px/1.2 var(--rf); }
.rm-layer input { width: 18px; height: 18px; margin: 0; accent-color: var(--rb); flex: none; }
.rm-layer p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--rmute); overflow-wrap: anywhere; }
.rm-layer.is-off .art { opacity: .35; }
@media (max-width: 860px) { .rm-layers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }