.experiences{background:#171615;outline:none;position:relative}
.experience-heading{padding:100px 7vw 65px;display:grid;grid-template-columns:1fr 2fr;gap:0 4vw;align-items:start}
.experience-heading .eyebrow{color:#beb09e;padding-top:12px}
.experience-heading h2{font:400 clamp(55px,6.3vw,105px)/.94 Cormorant,Georgia,serif;letter-spacing:-.035em;margin:0}
.experience-heading h2 em{color:#c3b4a1}
.experience-heading>p:last-child{grid-column:2;font-size:12px;line-height:1.8;margin:25px 0 0;color:#c8c1b7}
.experience-scene{position:relative;min-height:820px;height:105svh;overflow:hidden;background:#222}
.experience-image{position:absolute;right:0;top:0;height:100%;width:63%;overflow:hidden}
.experience-image img{height:100%;width:100%;object-fit:cover;object-position:50% 10%;display:block}
.experience-scene:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#171615 20%,#171615f2 32%,#17161500 68%);pointer-events:none}
.experience-copy{position:relative;z-index:1;padding:85px 0 80px 7vw;width:45%;height:100%;display:flex;flex-direction:column;justify-content:center}
.experience-copy>.eyebrow{color:#bfb09d}
.experience-description{min-height:235px}
.experience-description h3{font:400 clamp(48px,5.5vw,90px)/.94 Cormorant,Georgia,serif;letter-spacing:-.035em;margin:0 0 25px}
.experience-description h3 em{color:#c3b4a1}
.experience-description p{font-size:12px;line-height:1.8;max-width:310px;color:#ccc5bb;margin:0}
.experience-options{margin-top:34px;max-width:340px}
.experience-options button{border:0;border-top:1px solid #ffffff20;background:transparent;color:#afa99e;width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;padding:17px 0;cursor:pointer;font-size:12px;transition:color .25s}
.experience-options button:last-child{border-bottom:1px solid #ffffff20}
.experience-options button[aria-pressed=true]{color:#fff4e0}
.experience-options button span{font-size:18px;opacity:.35;transition:opacity .25s,transform .25s}
.experience-options button:hover span,.experience-options button[aria-pressed=true] span{opacity:1;transform:translate(2px,-2px)}
@media(max-width:700px){.experience-heading{display:block;padding:70px 8vw 45px}.experience-heading .eyebrow{margin-bottom:25px}.experience-heading h2{font-size:16vw}.experience-heading>p:last-child{font-size:12px;max-width:250px;margin-top:20px}.experience-scene{height:auto;min-height:0;display:flex;flex-direction:column}.experience-image{position:relative;width:100%;height:78svh;max-height:780px;min-height:440px}.experience-image img{object-position:50% 8%}.experience-scene:after{display:none}.experience-copy{padding:35px 8vw 60px;width:100%;background:#171615;height:auto}.experience-description{min-height:190px}.experience-description h3{font-size:15vw;margin-bottom:20px}.experience-description p{max-width:310px}.experience-options{max-width:none;margin-top:20px}.experience-options button{padding:19px 0;font-size:13px}.experience-copy>.eyebrow{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){.experience-options button,.experience-options button span{transition:none}}
@media(max-width:700px){.experience-scene{display:grid;grid-template-columns:100%}.experience-copy{display:contents}.experience-copy>.eyebrow{display:none}.experience-options{grid-row:1;display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding:16px 8vw 22px;margin:0;max-width:none;background:#171615}.experience-options button{font-size:11px;gap:10px;padding:16px 0;border-bottom:1px solid #ffffff20;border-top:0}.experience-image{grid-row:2;height:66svh;min-height:390px}.experience-description{grid-row:3;min-height:0;padding:35px 8vw 55px}.experience-description h3{font-size:14vw}.experience-description p{font-size:12px}}

/* The final viewport is the approved composition, with no content after it. */
.experience-scene{height:100svh;min-height:0;background:#171615}
.experience-copy{padding-top:clamp(24px,7svh,85px);padding-bottom:clamp(24px,7svh,80px)}
.experience-description{min-height:0}
.experience-image img{position:absolute;inset:0;object-position:50% 10%}
.slideshow-control{position:absolute;z-index:3;right:24px;top:24px;bottom:auto;border:1px solid #ffffff35;background:#17161580;color:#eee7dc;border-radius:30px;padding:8px 13px;font:10px Inter,Arial,sans-serif;cursor:pointer;backdrop-filter:blur(8px)}
.slideshow-count{margin-left:14px;color:#c3b4a1;font-size:9px;letter-spacing:.1em}
.slideshow-control:focus-visible{outline:2px solid #e3d2b9;outline-offset:4px}
@media(max-width:700px){
 .experience-scene{display:block;height:100svh;min-height:0}
 .experience-image{position:absolute;inset:0;width:100%;height:65%;min-height:0;max-height:none}
 .experience-image img{object-position:50% 8%}
 .experience-scene:after{display:block;z-index:0;background:linear-gradient(0deg,#171615 0%,#171615 30%,#171615d9 39%,#17161500 61%)}
 .experience-copy{display:flex;position:absolute;inset:auto 0 0;padding:0 8vw max(22px,env(safe-area-inset-bottom));width:100%;height:auto;background:transparent;z-index:1}
 .experience-description{padding:0;min-height:0}
 .experience-description h3{font-size:clamp(30px,9.2vw,60px);margin:0 0 12px}
 .experience-description p{font-size:11px;line-height:1.6;max-width:290px}
 .experience-options{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding:0;margin-top:14px;background:transparent}
 .experience-options button{font-size:10px;padding:10px 0}
 .slideshow-control{top:16px;right:16px;bottom:auto}
}
@media(min-width:701px) and (max-height:650px){
 .experience-copy{padding-top:24px;padding-bottom:24px}
 .experience-copy>.eyebrow{margin-bottom:14px}
 .experience-description h3{font-size:clamp(30px,7svh,60px);margin-bottom:15px}
 .experience-description p{font-size:10px}
 .experience-options{margin-top:16px}.experience-options button{padding:10px 0;font-size:10px}
}
@media(max-width:700px) and (max-height:450px){
 .experience-image{left:36%;width:64%;height:100%}
 .experience-scene:after{background:linear-gradient(90deg,#171615 10%,#171615ec 32%,#17161500 72%)}
 .experience-copy{inset:0 auto 0 0;justify-content:center;width:57%;padding:15px 5vw}
 .experience-description h3{font-size:clamp(24px,8svh,34px)}
 .experience-description p{font-size:9px}.experience-options{margin-top:9px}.experience-options button{font-size:8px;padding:6px 0}
}