.samples-gallery{padding:15px 0 72px;position:relative;isolation:isolate;color:var(--m-ink)}
.samples-heading{text-align:center;margin-bottom:33px}.samples-heading h2{font:500 clamp(38px,5.5vw,71px)/1.2 "Playfair Display","IBM Plex Sans Arabic",serif;letter-spacing:-.04em;margin:12px 0;color:var(--m-ink)}.samples-heading p{font-size:13px;line-height:1.8;color:var(--m-muted);margin:0}
.samples-stage{position:relative;width:100%;height:clamp(360px,50vw,615px);perspective:1400px;overflow:hidden;touch-action:pan-y;direction:ltr}
.sample-peek{position:absolute;left:50%;top:47%;width:clamp(255px,52vw,740px);height:clamp(300px,78%,515px);padding:0;border:1px solid var(--m-border);border-radius:18px;background:var(--m-surface);overflow:hidden;color:var(--m-ink);box-shadow:0 30px 70px #0003;display:flex;flex-direction:column;transform:translate(-50%,-50%) translateX(calc(var(--relative,0) * 73%)) scale(calc(1 - var(--distance,0) * .20)) rotateY(calc(var(--relative,0) * -12deg));transition:transform .65s cubic-bezier(.22,1,.36,1),filter .4s,opacity .4s,box-shadow .4s;z-index:var(--layer,1);opacity:var(--visibility,1);cursor:pointer;will-change:transform}
.sample-peek[data-current=true]{box-shadow:0 33px 90px #0004,0 0 0 3px var(--m-accent);cursor:default}
.sample-peek:not([data-current=true]):hover{filter:brightness(1.08);box-shadow:0 35px 80px #0005}
.sample-peek-art{position:relative;display:block;flex:1;overflow:hidden;isolation:isolate}
.sample-art-tide{background:linear-gradient(180deg,#728c98 0%,#e9c7a8 57%,#476e7b 100%)}
.sample-art-circle{position:absolute;width:32%;aspect-ratio:1;left:13%;top:15%;border-radius:50%;background:#f4dca9;box-shadow:0 0 90px #f3deb9}
.sample-art-tide:after{content:"";position:absolute;bottom:0;inset-inline:0;height:38%;background:linear-gradient(#577d85,#2e5d6d);clip-path:polygon(0 40%,22% 12%,48% 45%,66% 20%,100% 0,100% 100%,0 100%)}
.sample-art-mono{background:linear-gradient(145deg,#e7dbc7,#c9ac96)}
.sample-art-ceramic{position:absolute;width:28%;height:64%;left:56%;top:20%;border-radius:40% 40% 33% 33%;background:linear-gradient(90deg,#817763,#ddd3b7 55%,#8f7f6d);box-shadow:20px 22px 18px #271e2136}
.sample-art-orbit{background:radial-gradient(circle at 60% 45%,#483967,#141528 72%,#0c0e1d)}
.sample-art-planet{position:absolute;width:45%;aspect-ratio:1;border-radius:50%;left:47%;top:20%;background:radial-gradient(circle at 28% 25%,#e4c9ff,#855cbe 48%,#211734 80%);box-shadow:0 0 55px #a483f590}
.sample-art-title{position:absolute;z-index:2;left:7%;top:19%;font:500 clamp(42px,5vw,80px)/.98 "Playfair Display",serif;text-align:left;letter-spacing:-.065em;color:#fff;text-shadow:0 4px 25px #2226}
.sample-art-mono .sample-art-title{color:#403c35}.sample-art-orbit .sample-art-title{font-family:"DM Sans",sans-serif}
.sample-peek-label{height:48px;padding:15px 20px;display:block;text-align:left;font:600 11px "DM Sans",sans-serif;letter-spacing:.12em;color:var(--m-ink)}
.samples-navigation{display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,58px);margin-top:2px;direction:ltr}
.samples-navigation>button{height:46px;width:56px;border:1px solid var(--m-border);background:var(--m-surface);color:var(--m-ink);border-radius:40px;font-size:22px}
.samples-navigation>button:hover{background:var(--m-chip)}
.sample-current{text-align:center;display:flex;flex-direction:column;gap:3px;min-width:180px}
.sample-current>span{color:var(--m-accent);font:600 11px "DM Sans",sans-serif;letter-spacing:.2em}
.sample-current strong{font:500 24px "Playfair Display",serif;color:var(--m-ink)}
.sample-current small{font:400 12px "DM Sans",sans-serif;color:var(--m-muted)}
.sample-dots{display:flex;justify-content:center;gap:10px;margin:19px 0 15px;direction:ltr}.sample-dots button{width:11px;height:11px;border:1px solid var(--m-accent);border-radius:50%;background:transparent;padding:0}.sample-dots button[aria-current=true]{background:var(--m-accent)}
.sample-action{text-align:center}.sample-action a{display:inline-flex;padding:13px 25px;border:1px solid var(--m-border);border-radius:50px;background:var(--m-accent);color:var(--m-bg);font-size:13px;text-decoration:none;font-weight:600}.sample-action a:hover{filter:brightness(.92)}
.samples-note{text-align:center;font-size:11px;color:var(--m-muted);margin:20px 0 0}
@media(max-width:690px){.samples-gallery{padding:0 0 45px}.samples-stage{height:365px}.sample-peek{width:78%;height:275px;border-radius:12px;top:49%;transform:translate(-50%,-50%) translateX(calc(var(--relative,0) * 85%)) scale(calc(1 - var(--distance,0) * .18))}.sample-art-title{font-size:40px}.sample-peek-label{height:40px;padding:11px;font-size:9px}.sample-current strong{font-size:21px}.sample-current{min-width:150px}}
@media(prefers-reduced-motion:reduce){.sample-peek{transition:none!important}}

/* Live same-origin website preview in the featured card. */
.sample-live-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;pointer-events:none;z-index:6;animation:sample-in .35s ease both}
.sample-peek[data-current=true] .sample-art-title{opacity:0;pointer-events:none}
.sample-peek[data-current=true] .sample-peek-art{background:var(--m-surface)}
@keyframes sample-in{from{opacity:0}to{opacity:1}}
@media(max-width:690px){.sample-live-frame{width:165%;height:165%;transform:scale(.606);transform-origin:top left}}
@media(prefers-reduced-motion:reduce){.sample-live-frame{animation:none}}

/* Fourth showroom view: Zye’s Café, matching the original gallery geometry. */
.sample-art-cafe{background:#50312c url("/assets/cafe/mood/hero.png") center/cover no-repeat}
.sample-art-cafe:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#35211d24,#2c171eb8);pointer-events:none}
.sample-art-cafe .sample-art-title{color:#f9e6d1;text-shadow:0 4px 24px #190c0bc0}
.sample-peek[aria-hidden="true"]{pointer-events:none}