@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500;600;700&display=swap');
/* Photography keeps its intrinsic proportions; captions sit outside the image. */
.reference-concept .mosaic{height:auto;display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:auto;gap:20px;align-items:start}
.reference-concept .mosaic a{display:block;overflow:visible;background:transparent;align-self:start}
.reference-concept .mosaic a:first-child{grid-row:auto;grid-column:auto}
.reference-concept .mosaic img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;transform:none;animation:refReveal .55s ease}
.reference-concept .mosaic a:hover img{transform:none}
.reference-concept .mosaic .image-caption{display:block;position:relative;padding:16px 25px 0 0;background:none;color:var(--ref-ink)}
.reference-concept .mosaic .image-caption small{color:var(--ref-muted);font-size:10px;font-family:"Sarabun",sans-serif}
.reference-concept .mosaic .image-caption strong{font-size:17px;line-height:1.45;margin-top:6px}
.reference-concept .mosaic .image-caption .view-arrow{right:0;bottom:0;font-size:22px}
.reference-concept .slide-controls{margin-top:22px}
.reference-concept .photo-grid{display:block;columns:3;column-gap:24px}
.reference-concept .photo-card{display:inline-block;width:100%;break-inside:avoid;margin:0 0 30px;vertical-align:top}
.reference-concept .photo-card .photo-frame{aspect-ratio:auto;overflow:visible;background:transparent}
.reference-concept .photo-card img{display:block;width:100%;height:auto;object-fit:contain;transform:none}
.reference-concept .photo-card:hover img{transform:none}
@media(max-width:800px){.reference-concept .mosaic{grid-template-columns:1fr 1fr;gap:22px 16px}.reference-concept .mosaic a:first-child{grid-column:span 2}.reference-concept .photo-grid{columns:2;column-gap:18px}}
@media(max-width:500px){.reference-concept .mosaic{height:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:22px 12px}.reference-concept .mosaic a:first-child{grid-row:auto;grid-column:span 2}.reference-concept .mosaic .image-caption{padding-top:10px}.reference-concept .mosaic .image-caption small{font-size:9px;letter-spacing:.5px}.reference-concept .mosaic .image-caption strong{font-size:14px;font-family:"Sarabun",sans-serif}.reference-concept .mosaic a:first-child .image-caption strong{font-size:18px}.reference-concept .photo-grid{columns:2;column-gap:14px}.reference-concept .photo-card{margin-bottom:25px}}
@media(prefers-reduced-motion:reduce){.reference-concept .mosaic img{animation:none}}

/* Selected original composition, with overlapping decoded sets for soft crossfades. */
.reference-concept .mosaic{display:block;position:relative;height:auto;transition:height var(--reference-fade,1.6s) ease}
.trio-layer{position:absolute;top:0;left:0;width:100%;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:20px;align-items:start;opacity:0;transition:opacity var(--reference-fade,1.6s) ease-in-out!important;pointer-events:none}
.trio-layer.visible{opacity:1;pointer-events:auto}
.reference-concept .mosaic .trio-layer img{animation:none;transition:none}
@media(max-width:800px){.trio-layer{grid-template-columns:1fr 1fr;gap:22px 16px}.trio-layer>a:first-child{grid-column:span 2}}
@media(max-width:500px){.trio-layer{gap:22px 12px}}
@media(prefers-reduced-motion:reduce){.reference-concept .mosaic{transition:none}}
/* Match Products and Spaces content gutters. */
.reference-concept .ref-main,.reference-concept .ref-footer{width:calc(100% - 112px);max-width:1168px;margin-left:auto;margin-right:auto}
@media(max-width:700px){.reference-concept .ref-main,.reference-concept .ref-footer{width:calc(100% - 48px)}}