.experience-three .experience-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.experience-three .label-compare,.experience-three .light-demo,.coating-demo{aspect-ratio:1.4}.experience-three .experience-copy{padding:18px 20px 20px}.experience-three .experience-copy h3{font-size:18px}.experience-three .compare-tag{top:16px;padding:9px 11px;font-size:10px}.experience-three .compare-tag-left{left:14px}.experience-three .compare-tag-right{right:14px}.experience-three .light-switch{top:16px;left:14px}.coating-demo{position:relative;background:#101720;overflow:hidden}.coating-scene{position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;aspect-ratio:4/3;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}.coating-scene>img{display:block;width:100%;height:100%;object-fit:contain}.coating-surface{position:absolute;left:37%;top:35.7%;width:25.3%;height:37.3%;border-radius:5% / 2%;overflow:hidden;pointer-events:none;background:#A7A9A70D;transition:background .3s;box-shadow:inset 5px 0 10px #0000000A,inset -5px 0 10px #0000000A}.coating-sheen{position:absolute;inset:-40% -120%;background:linear-gradient(108deg,transparent 40%,#FFFFFF1A 44%,#FFFFFFD9 48%,#FFFFFF70 50%,transparent 55%);opacity:0;transform:translateX(-50%);mix-blend-mode:screen}.coating-gold{position:absolute;inset:20% 5%;background:radial-gradient(ellipse at 50% 20%,#FFDF7666,transparent 48%);mix-blend-mode:color-dodge;opacity:0}.coating-demo[data-coating=gloss] .coating-surface{background:#FFF0}.coating-demo[data-coating=gloss] .coating-sheen{opacity:.9;animation:laminate-shine 4.5s ease-in-out infinite}.coating-demo[data-coating=gloss] .coating-gold{animation:laminate-gold 4.5s ease-in-out infinite}.coating-switch button:focus-visible{outline:2px solid #F4DEAA;outline-offset:2px}@keyframes laminate-shine{0%{transform:translateX(-45%);opacity:0}15%{opacity:.9}65%{transform:translateX(45%);opacity:.9}80%,100%{transform:translateX(45%);opacity:0}}@keyframes laminate-gold{0%,15%,70%,100%{opacity:0}40%{opacity:.85}}
@media(max-width:1023px) and (min-width:768px){.experience-three .experience-copy{padding:16px 14px}.experience-three .experience-copy h3{font-size:16px}.experience-three .compare-tag{padding:7px 8px;font-size:9px;top:10px;min-height:34px}.experience-three .compare-tag-left{left:8px}.experience-three .compare-tag-right{right:8px}.experience-three .light-switch{left:8px;top:10px}.experience-three .light-switch button{padding:8px;font-size:9px}.experience-three .label-compare,.experience-three .light-demo,.coating-demo{aspect-ratio:1.15}}
@media(max-width:767px){.experience-three .experience-grid{grid-template-columns:1fr}.experience-three .label-compare,.experience-three .light-demo,.coating-demo{aspect-ratio:1.5}.experience-three .experience-copy h3{font-size:18px}.experience-three .compare-tag{font-size:10px}.experience-three .light-switch{left:12px;top:12px}}
@media(prefers-reduced-motion:reduce){.coating-demo[data-coating=gloss] .coating-sheen{animation:none;transform:translateX(0);opacity:.65}.coating-demo[data-coating=gloss] .coating-gold{animation:none;opacity:.3}.coating-surface{transition:none}}
/* Compact coating selector. */
.coating-switch{gap:3px;padding:3px;border-radius:7px}.coating-switch button{min-height:30px;padding:7px 10px;font-size:10px;line-height:1.3;border-radius:4px}
@media(max-width:1023px) and (min-width:768px){.experience-three .coating-switch button{min-height:28px;padding:6px 8px;font-size:9px}}
@media(max-width:767px){.coating-switch button{min-height:32px;padding:8px 10px;font-size:10px}}
.material-switch{z-index:5;gap:3px;padding:3px;border-radius:7px}.material-switch button{min-height:30px;padding:7px 10px;font-size:10px;line-height:1.3;border-radius:4px}.material-switch button:focus-visible{outline:2px solid #F4DEAA;outline-offset:2px}
@media(max-width:1023px) and (min-width:768px){.experience-three .material-switch button{min-height:28px;padding:6px 8px;font-size:9px}}
@media(max-width:767px){.material-switch button{min-height:32px;padding:8px 10px;font-size:10px}}
/* Same compact proportions for all three switch groups. */
.experience-three .light-switch{gap:2px;padding:3px;border-radius:6px;top:12px;left:12px}.experience-three .light-switch button{min-height:26px;padding:6px 8px;font-size:9px;line-height:1.3;border-radius:4px}
@media(max-width:767px){.experience-three .light-switch{top:10px;left:10px}.experience-three .light-switch button{min-height:28px;padding:7px 8px;font-size:9px}}
/* Cinematic photographic scenes: amber glass, condensation and real studio light. */
.experience-three .label-compare,.experience-three .light-demo,.experience-three .coating-demo{background:#111820}
.experience-three .label-compare>.compare-base{transform:scale(1.5)}
.experience-three .compare-paper{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.experience-three .compare-paper>img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.5)}
.experience-three .light-demo>img{inset:0;left:0;top:0;transform:none;width:100%;height:100%;object-fit:cover;mask-image:none;background:none}
.experience-three .coating-scene{inset:0;left:0;transform:none;width:100%;height:100%;aspect-ratio:auto;mask-image:none}
.experience-three .coating-scene>img{position:absolute;inset:0;object-fit:cover}
.coating-gloss-photo{opacity:0;transition:opacity .4s}.coating-demo[data-coating=gloss] .coating-gloss-photo{opacity:1}
.experience-three .coating-surface{left:37%;top:29.2%;width:24.8%;height:46%;background:transparent;box-shadow:none;border-radius:2% / 2%}
.experience-three .coating-demo[data-coating=gloss] .coating-sheen{opacity:.35;animation:laminate-shine 4.5s ease-in-out infinite}
.experience-three .coating-demo[data-coating=gloss] .coating-gold{opacity:0;animation:none}
@media(max-width:1023px) and (min-width:768px){.experience-three .coating-surface{top:31%;height:41%}}
@media(prefers-reduced-motion:reduce){.coating-gloss-photo{transition:none}.experience-three .coating-demo[data-coating=gloss] .coating-sheen{animation:none;opacity:.2;transform:none}}
.experience-three .label-compare,.experience-three .light-demo,.experience-three .coating-demo{aspect-ratio:4/3}.experience-three .coating-surface{top:30.2%;height:43.5%}
/* Let the photographic laminate reflection carry the finish. */
.experience-three .coating-surface{display:none}
/* Glossy jar: a restrained moving reflection, clipped to the printed label. */
.experience-three .coating-surface{display:block;left:22.8%;top:41.4%;width:54.6%;height:37.7%;border-radius:2% / 3%;background:transparent;box-shadow:none}
.experience-three .coating-demo[data-coating=gloss] .coating-sheen{background:linear-gradient(108deg,transparent 41%,#DFEAF712 45%,#EDF4FC99 48%,#DCE9F733 51%,transparent 56%);mix-blend-mode:screen;animation:jar-gloss-sweep 5s ease-in-out infinite;opacity:0}
@keyframes jar-gloss-sweep{0%,12%{transform:translateX(-45%);opacity:0}24%{opacity:.5}64%{transform:translateX(45%);opacity:.5}76%,100%{transform:translateX(45%);opacity:0}}
@media(prefers-reduced-motion:reduce){.experience-three .coating-demo[data-coating=gloss] .coating-sheen{animation:none;transform:translateX(0);opacity:.15}}
/* Russian text with firmer letterforms and a quieter caption hierarchy. */
@font-face{font-family:'Golos Text';src:url('/assets/prestige/fonts/golos-text-variable.ttf') format('truetype');font-weight:400 900;font-display:swap}
.experience-three{font-family:'Golos Text',Arial,sans-serif}
.experience-three .experience-heading h2{font-weight:600;letter-spacing:-.025em}
.experience-three .experience-copy h3{font-family:'Golos Text',Arial,sans-serif;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.22;margin-bottom:10px;color:#EBEFF2}
.experience-three .experience-copy p{font-size:13px;font-weight:400;line-height:1.55;letter-spacing:0;color:#B5BEC7}
.experience-three .experience-hint{font-size:10px;font-weight:500;line-height:1.4;letter-spacing:.015em;color:#969FA7;margin-top:13px}
.experience-three .finish-caption h3{font-family:'Golos Text',Arial,sans-serif;font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.experience-three .finish-caption p{font-size:12px;font-weight:400;line-height:1.55;color:#B5BEC7}
.experience-three .light-switch button{font-family:'Golos Text',Arial,sans-serif;font-weight:500}
@media(max-width:1023px) and (min-width:768px){.experience-three .experience-copy h3{font-size:17px}.experience-three .experience-copy p{font-size:12px}}
@media(max-width:767px){.experience-three .experience-copy h3{font-size:19px}.experience-three .experience-copy p{font-size:13px}.experience-three .finish-caption h3{font-size:16px}.experience-three .finish-caption p{font-size:11px}}
