/* Real customer photographs, choreographed as paper. No image is cropped or filtered. */
.rc-customer-story {
  /* Extend the ground through the album gutters without moving its content. */
  margin-inline: calc(-1 * var(--album-gutter));
  padding-inline: var(--album-gutter);
  padding-block: 40px 110px;
  border-top-color: #000;
  background: #000;
  color: #fff;
  scroll-margin-top: 110px;
}
.rc-customer-story > .rc-album-chapter-label { margin-bottom: 24px; color: #a1a1a6; }
.rc-customer-story > .rc-album-chapter-label > span:first-child { color: #f5f5f7; }
.rc-customer-collage { width: 100%; margin: 0 auto; text-align: center; }
.rc-collage-stage { position: relative; width: min(65vw, 1080px); margin: 0 auto; container-type: inline-size; perspective: 1400px; }
.rc-collage-orbit { transform-style: preserve-3d; }
.rc-collage-cover, .rc-collage-toggle { display: none; }
.rc-collage-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding-block: 30px; }
.rc-collage-piece { margin: 0; min-width: 0; }
.rc-site .rc-collage-photo button { display: block; width: 100%; padding: 9px 9px 0; border: 0; border-radius: 0; background: #fff; color: #6e6e73; box-shadow: 0 6px 21px -8px #1b1b1b30, 0 0 1px #2b2b2b45; text-align: left; font: inherit; transition: transform 330ms cubic-bezier(.22,1,.36,1), box-shadow 330ms ease, color 250ms ease; }
.rc-collage-photo img { display: block; width: 100%; height: auto; object-fit: contain; background: #f5f5f7; }
.rc-collage-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 33px; font-size: clamp(8px, .65vw, 10px); line-height: 1.35; }
.rc-collage-caption > span:first-child { font-size: 8px; color: #6e6e73; }
.rc-collage-caption > span:last-child { opacity: 0; transition: opacity 220ms ease; }
.is-enhanced:not(.is-static) .rc-collage-caption > span:nth-child(2) { opacity: 0; transform: translateY(3px); transition: opacity 220ms ease, transform 220ms ease; }
.rc-collage-note { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 18px; background: #f5f5f7; color: #1d1d1f; text-align: left; }
.rc-collage-note-2 { background: #1d1d1f; color: #fff; }
.rc-collage-note-3 { background: #f5f5f7; color: #1d1d1f; }
.rc-collage-note-number { font-size: 9px; letter-spacing: .1em; opacity: .65; margin-bottom: 8px; }
.rc-collage-note p { margin: 0; font-size: clamp(13px, 1.3vw, 19px); font-weight: 500; line-height: 1.2; letter-spacing: -.025em; }
.rc-customer-copy { text-align: center; max-width: 830px; margin: 46px auto 0; }
.rc-customer-copy h2 { font-size: clamp(38px, 4.25vw, 64px); font-weight: 500; line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; margin: 0; color: #fff; }
.rc-customer-copy h2 > span { display: block; }
.rc-customer-copy > p { max-width: 610px; margin: 25px auto 0; font-size: 15px; line-height: 1.85; color: #b5b5bb; text-wrap: pretty; }
.rc-customer-copy .rc-link { margin-top: 28px; padding-bottom: 8px; font-size: 14px; color: var(--rc-action, #26a5fd); }

/* Enhancement is opt-in. Static/no-JS keeps every photograph in the document. */
.is-enhanced:not(.is-static) .rc-collage-stage { aspect-ratio: 100 / 70; pointer-events: none; }
/* The carrier planes are transparent to hit testing: cards with negative Z
   must remain clickable through them. Only the visible cards own pointer hits. */
.is-enhanced:not(.is-static) .rc-collage-orbit { position: absolute; inset: 0; pointer-events: none; animation: rc-collage-float 10s ease-in-out infinite; }
.is-enhanced:not(.is-static) .rc-collage-gallery { display: block; position: absolute; inset: 0; padding: 0; transform-style: preserve-3d; pointer-events: none; }
.is-enhanced:not(.is-static) .rc-collage-piece { position: absolute; left: 50%; top: 50%; width: var(--piece-width); opacity: 0; transform: translate(-50%, -50%) translate3d(0,0,-70px) rotateY(83deg) rotateZ(0deg) scale(.72); transition: transform 850ms cubic-bezier(.22,1,.36,1), opacity 240ms ease; transition-delay: 0ms; pointer-events: none; backface-visibility: hidden; }
.is-enhanced:not(.is-static) .rc-collage-note { min-height: 6.2cqw; padding: 1.1cqw 1.4cqw; }
.is-enhanced:not(.is-static) .rc-collage-note-number { display: none; }
.is-enhanced:not(.is-static) .rc-collage-note p { font-size: clamp(12px, 1.1vw, 17px); line-height: 1.25; }
.is-enhanced:not(.is-static).is-open .rc-collage-piece { opacity: 1; transform: translate(-50%, -50%) translate3d(var(--x),var(--y),var(--z,0px)) rotateY(var(--yaw,0deg)) rotateZ(var(--angle)) scale(1); transition-delay: calc(70ms + var(--order) * 30ms); pointer-events: auto; }
.rc-site .is-enhanced:not(.is-static) .rc-collage-cover { position: absolute; display: flex; width: 48%; aspect-ratio: 1.5; height: auto; min-height: 0; left: 26%; top: 50%; margin: 0; padding: 0; border: 0; border-radius: 0; font: inherit; text-transform: none; letter-spacing: normal; background: #1d1d1f; color: #fff; box-shadow: 1px 2px 0 #151517, 0 24px 50px -26px #29292988; transform: translateY(-50%) translateZ(24px) rotateZ(-1deg) rotateY(0deg); transform-style: preserve-3d; backface-visibility: hidden; transition: transform 780ms cubic-bezier(.22,1,.36,1), opacity 300ms ease; cursor: pointer; pointer-events: auto; z-index: 20; }
.rc-collage-cover-face { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; padding: 7% 8% 6%; background: #1d1d1f; color: #fff; text-align: left; }
/* The two decorative planes travel with the existing card. Only the rear
   plane is blurred: the face, lettering and hit area remain untouched. */
.rc-site .is-enhanced:not(.is-static) .rc-collage-cover {
  --rc-collage-spectrum: conic-gradient(from 220deg, #f2b590, #e6ba72, #cddc97, #83cee0, #8ca9ed, #b3a1ea, #de9cb9, #f2b590);
}
.rc-site .is-enhanced:not(.is-static) .rc-collage-cover::before,
.rc-site .is-enhanced:not(.is-static) .rc-collage-cover::after {
  content: '';
  position: absolute;
  border-radius: inherit;
  background: var(--rc-collage-spectrum);
  pointer-events: none;
}
.rc-site .is-enhanced:not(.is-static) .rc-collage-cover::before {
  inset: -2px;
  transform: translateZ(-1px);
  filter: blur(8px);
  opacity: .4;
}
.rc-site .is-enhanced:not(.is-static) .rc-collage-cover::after {
  inset: -1px;
  padding: 1.25px;
  transform: translateZ(.1px);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.rc-collage-cover-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.rc-collage-brand { display: block; font-size: clamp(11px, 1.05vw, 17px); font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.rc-collage-edition { max-width: 8em; font-size: clamp(7px, .57vw, 9px); line-height: 1.4; text-align: right; letter-spacing: .03em; opacity: .72; }
.rc-collage-motto { position: relative; display: block; flex: 0 0 auto; width: 108%; aspect-ratio: 430 / 150; margin: 0 -4%; }
/* Give the moving SVG its own double-size paint surface before downsampling.
   Its layout size stays fixed; the 3D carrier still owns the card's motion. */
.rc-collage-handwriting { position: absolute; inset: 0 auto auto 0; display: block; width: 200%; height: 200%; max-width: none; overflow: visible; color: #fff; shape-rendering: geometricPrecision; transform: scale(.5); transform-origin: 0 0; will-change: transform; }
.rc-collage-cover-message { display: block; max-width: 24em; font-size: clamp(9px, .83vw, 13px); line-height: 1.45; letter-spacing: -.015em; }
.rc-collage-cover-invite { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 7%; padding-top: 4%; border-top: 1px solid #ffffff38; font-size: clamp(8px, .67vw, 11px); line-height: 1.4; letter-spacing: .01em; }
.rc-collage-cover-invite > span { font-size: 17px; }
.rc-site .is-enhanced:not(.is-static).is-open .rc-collage-cover { transform: translateY(-50%) translateZ(-90px) rotateZ(1deg) rotateY(-83deg) scale(.82); opacity: 0; pointer-events: none; }
/* The same slow carrier continues through opening and closing, so a reverse
   never snaps the card back to a different 3D attitude. */
@keyframes rc-collage-float {
  0%, 100% { transform: translate3d(0,3px,0) rotateX(-2deg) rotateY(-5deg); }
  32% { transform: translate3d(0,-4px,0) rotateX(2.5deg) rotateY(1deg); }
  67% { transform: translate3d(0,1px,0) rotateX(-1deg) rotateY(5deg); }
}
.is-enhanced:not(.is-static) .rc-collage-ink { animation: rc-collage-ink-fade 8s linear infinite; }
.is-enhanced:not(.is-static) .rc-collage-stroke { stroke-dasharray: 1; stroke-dashoffset: 1; animation-duration: 8s; animation-timing-function: linear; animation-iteration-count: infinite; }
.rc-collage-stroke-1 { animation-name: rc-collage-write-1; }
.rc-collage-stroke-2 { animation-name: rc-collage-write-2; }
.rc-collage-stroke-3 { animation-name: rc-collage-write-3; }
.rc-collage-stroke-4 { animation-name: rc-collage-write-4; }
.rc-collage-stroke-5 { animation-name: rc-collage-write-5; }
.rc-collage-stroke-6 { animation-name: rc-collage-write-6; }
.rc-collage-stroke-7 { animation-name: rc-collage-write-7; }
.rc-collage-stroke-8 { animation-name: rc-collage-write-8; }
@keyframes rc-collage-ink-fade { 0%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes rc-collage-write-1 { 0%, 4% { stroke-dashoffset: 1; opacity: 0; } 4.1% { stroke-dashoffset: 1; opacity: 1; } 13%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes rc-collage-write-2 { 0%, 12% { stroke-dashoffset: 1; opacity: 0; } 12.1% { stroke-dashoffset: 1; opacity: 1; } 19%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes rc-collage-write-3 { 0%, 18% { stroke-dashoffset: 1; opacity: 0; } 18.1% { stroke-dashoffset: 1; opacity: 1; } 27%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes rc-collage-write-4 { 0%, 26% { stroke-dashoffset: 1; opacity: 0; } 26.1% { stroke-dashoffset: 1; opacity: 1; } 32%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes rc-collage-write-5 { 0%, 31% { stroke-dashoffset: 1; opacity: 0; } 31.1% { stroke-dashoffset: 1; opacity: 1; } 37%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes rc-collage-write-6 { 0%, 36% { stroke-dashoffset: 1; opacity: 0; } 36.1% { stroke-dashoffset: 1; opacity: 1; } 45%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes rc-collage-write-7 { 0%, 44% { stroke-dashoffset: 1; opacity: 0; } 44.1% { stroke-dashoffset: 1; opacity: 1; } 50%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes rc-collage-write-8 { 0%, 49% { stroke-dashoffset: 1; opacity: 0; } 49.1% { stroke-dashoffset: 1; opacity: 1; } 57%, 100% { stroke-dashoffset: 0; opacity: 1; } }
.rc-site .is-enhanced:not(.is-static) .rc-collage-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 44px; margin: 10px auto 0; padding: 0 8px; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; color: var(--rc-action, #26a5fd); background: transparent; font-family: inherit; font-size: 11px; letter-spacing: .03em; cursor: pointer; }
.rc-collage-toggle-icon { font-size: 20px; transition: transform 300ms ease; }
.is-open .rc-collage-toggle-icon { transform: rotate(45deg); }
.rc-collage-toggle [data-collage-close-label], .is-open .rc-collage-toggle [data-collage-open-label] { display: none; }
.is-open .rc-collage-toggle [data-collage-close-label] { display: inline; }
.rc-collage-photo:focus-within, .rc-collage-photo.is-selected { z-index: 30; }
.rc-site .is-enhanced .rc-collage-photo:has(button:focus-visible) button,
.rc-site .is-enhanced .rc-collage-photo.is-selected button { transform: translateY(-7px) scale(1.07); box-shadow: 0 20px 32px -12px #28282840, 0 0 1px #2b2b2b45; color: #1d1d1f; }
.rc-site .rc-collage-photo button:focus-visible, .rc-site .rc-collage-toggle:focus-visible, .rc-site .rc-collage-cover:focus-visible { outline: 2px solid var(--rc-action, #26a5fd); outline-offset: 5px; }
.rc-collage-photo:focus-within .rc-collage-caption > span:last-child, .rc-collage-photo.is-selected .rc-collage-caption > span:last-child { opacity: 1; }
.is-enhanced:not(.is-static) .rc-collage-photo:focus-within .rc-collage-caption > span:nth-child(2),
.is-enhanced:not(.is-static) .rc-collage-photo.is-selected .rc-collage-caption > span:nth-child(2) { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .is-enhanced .rc-collage-photo:hover { z-index: 30; }
  .rc-site .is-enhanced:not(.is-static) .rc-collage-photo:hover button { transform: translateY(-7px) scale(1.07); box-shadow: 0 20px 32px -12px #28282840, 0 0 1px #2b2b2b45; color: #1d1d1f; }
  .rc-collage-photo:hover .rc-collage-caption > span:last-child { opacity: 1; }
  .is-enhanced:not(.is-static) .rc-collage-photo:hover .rc-collage-caption > span:nth-child(2) { opacity: 1; transform: none; }
}
.rc-customer-collage.is-static * { transition: none !important; animation: none !important; }
.rc-site .rc-customer-collage.is-static .rc-collage-photo button { transform: none !important; }
.rc-customer-collage.is-motion-blocked .rc-collage-orbit, .rc-customer-collage.is-motion-blocked .rc-collage-ink, .rc-customer-collage.is-motion-blocked .rc-collage-stroke { animation-play-state: paused !important; }
.rc-collage-viewer { box-sizing: border-box; width: max-content; max-width: 94vw; max-height: 92dvh; margin: auto; padding: 48px 24px 22px; border: 0; background: #f5f5f7; color: #1d1d1f; box-shadow: 0 20px 80px #0005; }
.rc-collage-viewer::backdrop { background: #141414c9; }
.rc-collage-viewer figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.rc-collage-viewer img { display: block; width: auto; height: auto; max-width: 100%; max-height: 72dvh; margin-inline: auto; object-fit: contain; }
.rc-collage-viewer figcaption { text-align: center; font-size: 13px; line-height: 1.5; }
.rc-site .rc-collage-viewer-close { position: absolute; top: 3px; right: 8px; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font-size: 29px; line-height: 1; cursor: pointer; }
.rc-site .rc-collage-viewer-close:focus-visible { outline: 2px solid #1d1d1f; outline-offset: -4px; }
@media (max-width: 1100px) and (min-width: 761px) {
  .rc-collage-stage { width: min(76vw, 900px); }
  .rc-collage-note p { font-size: 14px; }
}
@media (max-width: 760px) {
  .rc-customer-story { padding-block: 28px 70px; }
  .rc-customer-story > .rc-album-chapter-label { margin-bottom: 20px; }
  .rc-collage-stage { width: 100%; perspective: 900px; }
  .rc-collage-gallery { grid-template-columns: 1fr; gap: 28px; padding: 15px 6px; }
  .rc-collage-photo { width: min(100%, 390px); margin-inline: auto; }
  .rc-collage-photo:nth-child(3n+2) { width: min(90%, 350px); }
  .rc-collage-caption { min-height: 37px; font-size: 10px; }
  .rc-collage-note { width: 80%; min-height: 110px; margin: 10px auto; padding: 22px; }
  .rc-collage-note p { font-size: 22px; max-width: 12em; }
  .rc-collage-note-1 { order: 4; } .rc-collage-note-2 { order: 9; } .rc-collage-note-3 { order: 14; }
  .rc-collage-photo:nth-child(-n+4) { order: 1; }
  .rc-collage-photo:nth-child(n+5):nth-child(-n+8) { order: 6; }
  .rc-collage-photo:nth-child(n+9) { order: 11; }
  .is-enhanced:not(.is-static) .rc-collage-stage { aspect-ratio: 1.14; }
  .rc-site .is-enhanced:not(.is-static) .rc-collage-cover { width: 86%; left: 7%; top: 43.86cqw; padding: 0; aspect-ratio: 1.4; }
  .rc-collage-brand { font-size: 13px; }
  .rc-collage-edition { font-size: 8px; }
  .rc-collage-cover-message { font-size: 11px; }
  .rc-collage-cover-invite { font-size: 9px; }
  .is-enhanced:not(.is-static):not(.is-open) .rc-collage-gallery { visibility: hidden; }
  .is-enhanced:not(.is-static).is-open .rc-collage-stage { aspect-ratio: auto; }
  .is-enhanced:not(.is-static).is-open .rc-collage-orbit { position: relative; animation: none; transform: none; }
  .is-enhanced:not(.is-static).is-open .rc-collage-gallery { position: relative; display: grid; grid-template-columns: 1fr; gap: 26px; padding: 18px 6px; }
  .is-enhanced:not(.is-static).is-open .rc-collage-piece { position: relative; left: auto; top: auto; width: min(100%, 390px); transform: none; transition-delay: 0ms; }
  .is-enhanced:not(.is-static).is-open .rc-collage-photo:nth-child(3n+2) { width: min(90%, 350px); }
  .is-enhanced:not(.is-static).is-open .rc-collage-note { width: 84%; min-height: 110px; padding: 22px; }
  .is-enhanced:not(.is-static).is-open .rc-collage-note p { font-size: 22px; }
  .is-enhanced:not(.is-static).is-open .rc-collage-note-number { display: block; }
  .rc-customer-copy { margin-top: 35px; }
  .rc-customer-copy h2 { font-size: clamp(32px, 8.1vw, 46px); line-height: 1.17; letter-spacing: -.04em; }
  .rc-customer-copy > p { font-size: 14px; line-height: 1.85; margin-top: 22px; }
  .rc-customer-copy .rc-link { font-size: 13px; }
  .rc-site .is-enhanced .rc-collage-photo.is-selected button, .rc-site .is-enhanced .rc-collage-photo:has(button:focus-visible) button { transform: translateY(-4px); }
}
@media (max-width: 360px) {
  .rc-site .is-enhanced:not(.is-static) .rc-collage-cover { aspect-ratio: 1.26; }
  .rc-collage-cover-face { padding: 6% 7%; }
  .rc-collage-cover-message { font-size: 10px; line-height: 1.4; }
  .rc-collage-cover-invite { margin-top: 6%; padding-top: 3%; }
}
@media (prefers-reduced-motion: reduce) {
  .rc-customer-collage *, .rc-customer-collage *::after { transition: none !important; animation: none !important; }
}