/* A photo album that opens into a gently moving ribbon. */
.customer-moments { padding: 90px 0 44px; background: #faf9f6; overflow: hidden; }
.moments-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; }
.moments-heading h2 { font: 500 clamp(32px, 3.6vw, 50px)/1.18 'Lora', serif; color: #0a1628; margin: 14px 0 0; }
.moments-heading h2 em { font-style: normal; color: #165e6a; }
.moments-intro { max-width: 370px; padding-bottom: 4px; }
.moments-intro p { font-size: 14px; line-height: 1.8; color: #5c6b6e; margin: 0 0 18px; }
.moments-viewport { --photo-width: clamp(240px, 23vw, 330px); --photo-gap: 30px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-behavior: auto; overscroll-behavior-x: contain; padding: 48px 0 52px; margin-top: 14px; }
.moments-viewport::-webkit-scrollbar { display: none; }
.moments-viewport:focus-visible { outline-offset: -6px; }
.moments-track { display: flex; align-items: center; gap: var(--photo-gap); width: max-content; list-style: none; padding: 0 max(24px, calc((100vw - 1160px)/2)); margin: 0; }
.moments-card { width: var(--photo-width); flex: 0 0 var(--photo-width); transform: rotate(var(--photo-tilt, -5deg)); transform-origin: 50% 70%; }
.moments-card:nth-child(3n+2) { --photo-tilt: 4deg; }
.moments-card:nth-child(3n) { --photo-tilt: -2deg; }
.moments-card figure { margin: 0; background: white; border: 1px solid #e1e5e1; border-radius: 22px; padding: 10px 10px 0; box-shadow: 0 10px 24px #0a16280b; overflow: hidden; }
.moments-card img { display: block; width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; object-position: 50% 40%; border-radius: 14px; background: #e8edeb; }
.moments-card-wide img { aspect-ratio: 4/3; }
.moments-card figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 7px 17px; color: #165e6a; font-size: 12px; font-weight: 500; }
.moments-number { color: #897247; font-size: 11px; font-variant-numeric: tabular-nums; }
.moments-footnote { display: flex; justify-content: space-between; gap: 20px; color: #697572; font-size: 11px; }
.moments-static .moments-copy { display: none; }
@media (max-width: 600px) {
 .customer-moments { padding: 56px 0 30px; }
 .moments-heading { display: block; }
 .moments-intro { margin-top: 22px; }
 .moments-intro p { margin-bottom: 12px; }
 .moments-viewport { --photo-width: 68vw; --photo-gap: 22px; margin-top: 0; padding-top: 32px; padding-bottom: 38px; }
 .moments-footnote > :last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
 .customer-moments:not(.moments-motion-enabled) .moments-card { transform: rotate(var(--photo-tilt, -5deg)) !important; opacity: 1 !important; }
 .customer-moments:not(.moments-motion-enabled) .moments-copy { display: none; }
}


.moments-open { display: block; border-radius: 14px; cursor: zoom-in; overflow: hidden; }
.moments-card figure { transition: transform .3s ease, box-shadow .3s ease; }
@media (hover: hover) and (pointer: fine) {
 .moments-card:hover figure { transform: translateY(-10px) rotate(2deg); box-shadow: 0 18px 34px #0a16281a; }
}
.moments-card:focus-within figure { box-shadow: 0 0 0 3px #ab7c26; }
.moments-lightbox { width: min(1180px, calc(100vw - 32px)); height: min(940px, calc(100dvh - 32px)); max-width: none; max-height: none; padding: 16px; border: 0; border-radius: 16px; background: #faf9f6; color: #0a1628; }
.moments-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; }
.moments-lightbox::backdrop { background: #07111de8; }
.moments-viewer-bar, .moments-viewer-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; }
.moments-viewer-controls { justify-content: center; }
.moments-position { min-width: 65px; text-align: center; }
.moments-lightbox button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #e7edeb; color: #165e6a; font-size: 26px; cursor: pointer; }
.moments-image-stage { min-height: 0; position: relative; }
.moments-image-stage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.moments-image-stage p { position: absolute; top: 45%; left: 0; right: 0; text-align: center; }
.moments-image-stage p:empty { display: none; }