.rave-screen-group { display: grid; align-items: center; justify-items: center; gap: clamp(16px, 3vw, 40px); }
.rave-screen-group--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rave-screen-group--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; width: 100%; margin-inline: auto; }
.rave-screen { margin: 0; min-width: 0; width: 100%; display: flex; justify-content: center; }
.rave-screen img { width: auto; max-width: 100%; height: auto; max-height: min(65svh, 620px); object-fit: contain; }
.portfolio-tile--rave .portfolio-tile-thumb { background: #f4f4f4; }
.portfolio-tile--rave .portfolio-tile-thumb img { object-fit: cover; object-position: center; }
@media (max-width: 800px) {
  .rave-screen-group--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .rave-screen-group--3, .rave-screen-group--2 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .rave-screen img { max-height: min(72svh, 620px); }
}

/* Process overview: concise steps with the portfolio's lilac accent. */
.rave-process { padding-top: 16px; }
.rave-process > h2 { font-family: var(--font-display); font-size: clamp(25px, 3vw, 38px); line-height: 1.2; font-weight: 400; margin-bottom: 24px; }
.rave-process-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rave-process-card { padding: clamp(22px, 2.5vw, 32px); border: 1px solid #eeedeb; background: #fff; border-radius: 22px; box-shadow: 0 8px 28px rgba(41, 35, 47, .055); }
.rave-process-number { display: inline-flex; flex: 0 0 56px; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #F0EFED; color: var(--color-text); font: 800 24px/1 var(--font-sans); }
.rave-process-card-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.rave-process-card-top svg { flex: 0 0 24px; width: 24px; height: 24px; color: #716F6E; }
.rave-process-card h3 { font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1.25; margin: 24px 0 12px; }
.rave-process-card p { font-family: var(--font-sans); font-size: 17px; line-height: 1.55; }
@media (max-width: 720px) { .rave-process-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; } .rave-process-card h3 { margin-top: 18px; } }

/* Individual transparent assets form the hero directly on the page canvas. */
.rave-floating-hero { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.65fr); grid-template-rows: minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 48px); height: min(68svh, 620px); padding: 24px 20px; background: transparent; border: 0; overflow: visible; }
.rave-floating-logo { display: block; width: 100%; height: auto; object-fit: contain; }
.rave-floating-phones { position: relative; height: 100%; min-height: 0; width: 100%; }
.rave-floating-phone { position: absolute; top: 8%; height: 80%; width: auto; max-width: 38%; object-fit: contain; }
.rave-floating-phone--left { left: 2%; transform: rotate(-9deg) translateY(4%); z-index: 1; }
.rave-floating-phone--middle { left: 31%; top: 3%; z-index: 3; }
.rave-floating-phone--right { left: 60%; transform: rotate(8deg) translateY(6%); z-index: 2; }
@media (max-width: 700px) {
  .rave-floating-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); justify-items: center; height: min(73svh, 620px); padding: 16px 12px; gap: 20px; }
  .rave-floating-logo { width: min(50%, 220px); max-height: 12svh; }
  .rave-floating-phones { width: min(100%, 520px); }
}