/* Device showcase (inc/showcase.php) — a live client site on laptop + phone. */
.dsx{--gold:#c9a46a;--gold-2:#e8cf9f;--ink:#14110e;--ink-2:#221c16;--cream:#f4ede2;--e:cubic-bezier(.7,0,.2,1);--o:cubic-bezier(.16,1,.3,1);
	position:relative;margin:0;border-radius:28px;overflow:hidden;isolation:isolate;color:var(--cream);
	background:radial-gradient(120% 90% at 78% 30%,#2b231b 0,var(--ink-2) 38%,var(--ink) 100%);
	display:grid;grid-template-columns:minmax(260px,.82fr) 1.9fr;grid-template-rows:1fr auto;align-items:center;
	gap:0 clamp(16px,3vw,48px);padding:clamp(28px,4.2vw,64px) clamp(24px,4.2vw,64px) clamp(20px,2.6vw,36px);min-height:560px}

/* ambient background */
.dsx-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.dsx-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.dsx-orb.a{width:46%;aspect-ratio:1;inset-inline-end:4%;top:-14%;background:radial-gradient(circle,rgba(201,164,106,.55),transparent 65%);animation:dsxDrift 16s ease-in-out infinite alternate}
.dsx-orb.b{width:38%;aspect-ratio:1;inset-inline-start:22%;bottom:-30%;background:radial-gradient(circle,rgba(79,182,200,.28),transparent 65%);animation:dsxDrift 20s ease-in-out -6s infinite alternate-reverse}
.dsx-lines{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(244,237,226,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(244,237,226,.045) 1px,transparent 1px);background-size:56px 56px;
	-webkit-mask-image:radial-gradient(80% 70% at 70% 45%,#000 20%,transparent 75%);mask-image:radial-gradient(80% 70% at 70% 45%,#000 20%,transparent 75%)}
@keyframes dsxDrift{to{transform:translate3d(-8%,10%,0) scale(1.12)}}

/* copy */
.dsx-copy{grid-row:1/3;align-self:center;position:relative;z-index:2}
.dsx-eb{display:inline-block;font:600 .78rem/1 var(--font-mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
[dir=rtl] .dsx-eb{letter-spacing:0;font-family:var(--font-body)}
.dsx-h{margin:.7rem 0 .9rem;font:700 clamp(1.9rem,3.1vw,2.9rem)/1.04 var(--font-display);letter-spacing:-.02em;color:#fff}
.dsx-h::after{content:"";display:block;width:56px;height:2px;margin-top:1rem;background:linear-gradient(90deg,var(--gold),transparent)}
[dir=rtl] .dsx-h::after{background:linear-gradient(-90deg,var(--gold),transparent)}
.dsx-p{font-style:normal;color:rgba(244,237,226,.72);font-size:1rem;line-height:1.65;max-width:36ch}
.dsx-chips{display:flex;flex-wrap:wrap;gap:8px;margin:1.3rem 0 1.6rem}
.dsx-chips span{padding:6px 13px;border-radius:999px;border:1px solid rgba(201,164,106,.38);font:500 .8rem/1.2 var(--font-body);color:var(--gold-2);background:rgba(201,164,106,.06)}
.dsx-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.dsx-btn{display:inline-flex;align-items:center;gap:.6em;height:48px;padding:0 1.35rem;border-radius:999px;background:var(--gold);color:var(--ink);font:600 .95rem var(--font-body);text-decoration:none;transition:transform .4s var(--o),box-shadow .4s var(--o),background .2s}
.dsx-btn:hover{transform:translateY(-2px);background:var(--gold-2);box-shadow:0 14px 30px -12px rgba(201,164,106,.7);color:var(--ink)}
.dsx-btn b{transition:transform .4s var(--o)}.dsx-btn:hover b{transform:translateX(4px)}[dir=rtl] .dsx-btn b{transform:scaleX(-1)}[dir=rtl] .dsx-btn:hover b{transform:scaleX(-1) translateX(4px)}
.dsx-link{color:var(--cream);font:500 .92rem var(--font-body);text-decoration:none;border-bottom:1px solid rgba(244,237,226,.3);padding-bottom:2px;transition:border-color .2s,color .2s}
.dsx-link:hover{color:var(--gold-2);border-color:var(--gold)}

/* stage + rig (pointer tilt is set by JS through --rx/--ry) */
.dsx-stage{position:relative;perspective:1600px;grid-column:2;grid-row:1;padding:2% 9% 6% 0}
[dir=rtl] .dsx-stage{padding:2% 0 6% 9%}
.dsx-rig{position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s linear}

/* laptop */
.dsx-laptop{position:relative;transform-style:preserve-3d}
.dsx-lid{position:relative;padding:2.2% 2.2% 3%;border-radius:18px 18px 6px 6px;background:linear-gradient(160deg,#3a3a3d,#141416 55%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 40px 80px -30px rgba(0,0,0,.8);
	transform-origin:50% 100%;transform:rotateX(0)}
.dsx-cam{position:absolute;top:1%;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#000;box-shadow:inset 0 0 0 1.5px #2a2a2e}
.dsx-screen{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:6px;background:#0c0a08}
.dsx-base{position:relative;height:0;padding-bottom:3.2%;margin:0 -7.5%;border-radius:2px 2px 22px 22px/2px 2px 100% 100%;background:linear-gradient(#d9d9de,#9c9ca3 60%,#6d6d73)}
.dsx-base i{position:absolute;top:0;left:50%;width:15%;height:38%;transform:translateX(-50%);border-radius:0 0 10px 10px;background:linear-gradient(#8d8d93,#b4b4ba)}

/* phone */
.dsx-phone{position:absolute;inset-inline-end:-1%;bottom:-3%;width:23%;z-index:3;padding:2.4%;border-radius:15%/7%;background:linear-gradient(150deg,#45454a,#121214 60%);
	box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12),-30px 40px 60px -24px rgba(0,0,0,.85);transform:translateZ(60px)}
[dir=rtl] .dsx-phone{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12),30px 40px 60px -24px rgba(0,0,0,.85)}
.dsx-pscreen{position:relative;aspect-ratio:540/1169;overflow:hidden;border-radius:12%/5.6%;background:#0c0a08}
.dsx-island{position:absolute;top:4.6%;left:50%;width:30%;height:3%;transform:translateX(-50%);border-radius:999px;background:#000;z-index:2}
.dsx-shadow{position:absolute;left:4%;right:4%;bottom:-6%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);filter:blur(6px);z-index:-1}

/* screens: the incoming slide wipes over the outgoing one, then drifts slowly */
.dsx-s{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;clip-path:inset(0 0 0 100%);transform:scale(1.1)}
[dir=rtl] .dsx-s{clip-path:inset(0 100% 0 0)}
.dsx-s.was{opacity:1;clip-path:inset(0);transform:scale(1);z-index:1;transition:transform 1.2s var(--e),filter 1.2s;filter:brightness(.55)}
.dsx-s.on{opacity:1;clip-path:inset(0);transform:scale(1);z-index:2;transition:clip-path 1.15s var(--e),transform 6s var(--o)}
.dsx-glare{position:absolute;inset:-20% -60%;z-index:3;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.16) 49%,rgba(255,255,255,.04) 52%,transparent 58%);transform:translateX(-60%)}
.dsx.sweep .dsx-glare{animation:dsxSweep 1.4s var(--e)}
@keyframes dsxSweep{from{transform:translateX(-60%)}to{transform:translateX(60%)}}

/* nav */
.dsx-nav{grid-column:2;grid-row:2;display:flex;align-items:center;gap:6px;justify-content:flex-start;margin-top:clamp(10px,1.6vw,22px);position:relative;z-index:2}
.dsx-dot{position:relative;flex:1 1 0;max-width:130px;padding:14px 0 10px;background:none;border:0;color:rgba(244,237,226,.45);font:500 .78rem/1 var(--font-body);text-align:start;cursor:pointer;transition:color .3s}
.dsx-dot span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsx-dot::before,.dsx-dot i{content:"";position:absolute;left:0;right:8px;top:0;height:2px;border-radius:2px;background:rgba(244,237,226,.16)}
.dsx-dot i{background:var(--gold);transform:scaleX(0);transform-origin:left}
[dir=rtl] .dsx-dot::before,[dir=rtl] .dsx-dot i{left:8px;right:0;transform-origin:right}
.dsx-dot:hover,.dsx-dot.on{color:var(--cream)}
.dsx-dot.on i{animation:dsxFill var(--dur,4.6s) linear forwards}
.dsx.paused .dsx-dot.on i{animation-play-state:paused}
.dsx-dot.done i{transform:scaleX(1);opacity:.35}
@keyframes dsxFill{to{transform:scaleX(1)}}
.dsx-pp{flex:0 0 auto;width:36px;height:36px;margin-inline-start:8px;border-radius:50%;border:1px solid rgba(244,237,226,.25);background:none;cursor:pointer;display:grid;place-items:center;transition:border-color .2s,background .2s}
.dsx-pp:hover{border-color:var(--gold);background:rgba(201,164,106,.1)}
.dsx-pp i{width:10px;height:11px;border-inline:3px solid var(--cream);box-sizing:border-box}
.dsx.paused .dsx-pp i{width:0;height:0;border:0;border-block:6px solid transparent;border-inline-start:10px solid var(--cream);margin-inline-start:3px}
.dsx-dot:focus-visible,.dsx-pp:focus-visible,.dsx-btn:focus-visible,.dsx-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* entrance: lid opens on its hinge, phone glides in, copy rises */
.js .dsx:not(.in) .dsx-lid{transform:rotateX(-88deg)}
.js .dsx:not(.in) .dsx-phone{opacity:0;transform:translate3d(30%,18%,60px) rotate(8deg)}
[dir=rtl].js .dsx:not(.in) .dsx-phone,.js [dir=rtl] .dsx:not(.in) .dsx-phone{transform:translate3d(-30%,18%,60px) rotate(-8deg)}
.js .dsx:not(.in) .dsx-copy>*,.js .dsx:not(.in) .dsx-nav{opacity:0;transform:translateY(18px)}
.js .dsx:not(.in) .dsx-laptop{opacity:.2}
.dsx .dsx-lid{transition:transform 1.5s var(--o) .15s}
.dsx .dsx-laptop{transition:opacity .8s ease}
.dsx .dsx-phone{transition:opacity .9s ease .75s,transform 1.4s var(--o) .75s}
.dsx .dsx-copy>*{transition:opacity .9s ease,transform 1s var(--o)}
.dsx .dsx-copy>:nth-child(2){transition-delay:.08s}.dsx .dsx-copy>:nth-child(3){transition-delay:.16s}.dsx .dsx-copy>:nth-child(4){transition-delay:.24s}.dsx .dsx-copy>:nth-child(5){transition-delay:.32s}
.dsx .dsx-nav{transition:opacity .9s ease 1s,transform 1s var(--o) 1s}
.dsx.in .dsx-phone{animation:dsxFloat 7s ease-in-out 2.2s infinite}
@keyframes dsxFloat{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -10px;rotate:-1.2deg}}

/* responsive */
@media(max-width:1024px){
	.dsx{grid-template-columns:1fr;grid-template-rows:auto auto auto;min-height:0;padding-top:clamp(28px,6vw,48px)}
	.dsx-copy{grid-row:1;max-width:560px}.dsx-p{max-width:none}
	.dsx-stage{grid-column:1;grid-row:2;padding:9% 11% 7% 4%;margin-top:6px}
	[dir=rtl] .dsx-stage{padding:9% 4% 7% 11%}
	.dsx-nav{grid-column:1;grid-row:3}
}
@media(max-width:600px){
	.dsx{border-radius:22px;padding:26px 18px 16px}
	.dsx-stage{padding:10% 14% 8% 2%}[dir=rtl] .dsx-stage{padding:10% 2% 8% 14%}
	.dsx-phone{width:30%;inset-inline-end:-6%}
	.dsx-lid{border-radius:11px 11px 4px 4px}
	.dsx-dot{font-size:0;padding:10px 0 6px}.dsx-dot span{display:none}
	.dsx-cta{gap:12px 18px}
}
@media(prefers-reduced-motion:reduce){
	.dsx *,.dsx *::before{animation:none!important;transition:opacity .4s ease!important}
	.dsx-s{clip-path:none!important;transform:none!important}
	.dsx-s.was{opacity:0}
	.js .dsx:not(.in) .dsx-lid,.js .dsx:not(.in) .dsx-phone{transform:none}
	.dsx-rig{transform:none!important}
}

/* ---------- light "clean" variant (case studies): centred copy, scroll-linked tilt, floating stats ---------- */
.dsx-light{--gold:#b98a58;--gold-2:#9a7046;--ink:#1d1915;--cream:#1d1915;--paper:#f7f3ed;--sand:#efe6da;
	color:var(--ink);background:linear-gradient(180deg,#fbf8f4 0,var(--paper) 55%,var(--sand) 100%);
	grid-template-columns:1fr;grid-template-rows:auto auto auto;justify-items:center;text-align:center;min-height:0;
	padding:clamp(40px,5.5vw,84px) clamp(20px,4vw,64px) clamp(22px,2.6vw,36px);box-shadow:inset 0 0 0 1px rgba(29,25,21,.06)}
.dsx-light .dsx-orb.a{background:radial-gradient(circle,rgba(185,138,88,.32),transparent 65%);opacity:.8;inset-inline-end:-6%;top:18%}
.dsx-light .dsx-orb.b{background:radial-gradient(circle,rgba(70,150,140,.16),transparent 65%);inset-inline-start:-6%;bottom:auto;top:30%}
.dsx-light .dsx-lines{opacity:.9;background-image:linear-gradient(rgba(29,25,21,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(29,25,21,.05) 1px,transparent 1px);background-size:64px 64px;
	-webkit-mask-image:radial-gradient(70% 55% at 50% 62%,#000 10%,transparent 72%);mask-image:radial-gradient(70% 55% at 50% 62%,#000 10%,transparent 72%)}
.dsx-light .dsx-copy{grid-row:1;max-width:760px;display:flex;flex-direction:column;align-items:center}
.dsx-light .dsx-eb{color:var(--gold-2);text-transform:none;letter-spacing:.04em}
.dsx-light .dsx-h{color:var(--ink);font-size:clamp(1.9rem,3.6vw,3.2rem);line-height:1.08;margin:.8rem 0 1rem}
.dsx-light .dsx-h::after{display:none}
.dsx-light .dsx-p{color:#5b5248;max-width:58ch;margin-inline:auto}
.dsx-light .dsx-chips{justify-content:center;margin:1.2rem 0 1.4rem}
.dsx-light .dsx-chips span{color:#6e5032;border-color:rgba(185,138,88,.35);background:rgba(255,255,255,.6);backdrop-filter:blur(6px)}
.dsx-light .dsx-btn{background:var(--ink);color:#fff}
.dsx-light .dsx-btn:hover{background:#000;color:#fff;box-shadow:0 16px 34px -14px rgba(29,25,21,.55)}
.dsx-light .dsx-stage{grid-column:1;grid-row:2;width:min(100%,1040px);padding:clamp(28px,4vw,56px) 9% 5%;perspective:1800px}
[dir=rtl] .dsx-light .dsx-stage{padding:clamp(28px,4vw,56px) 9% 5%}
.dsx-light .dsx-rig{transform:translateY(var(--sy,0px)) scale(var(--ss,1)) rotateX(calc(var(--rx,0deg) + var(--sx,0deg))) rotateY(var(--ry,0deg));transition:none;will-change:transform}
.dsx-light .dsx-lid{background:linear-gradient(160deg,#2f2f33,#111113 60%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 50px 90px -40px rgba(60,40,20,.55)}
.dsx-light .dsx-base{background:linear-gradient(#e9e9ed,#b9b9c0 60%,#8a8a91)}
.dsx-light .dsx-phone{width:21%;inset-inline-end:2%;bottom:-6%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12),-24px 36px 60px -26px rgba(60,40,20,.6)}
[dir=rtl] .dsx-light .dsx-phone{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12),24px 36px 60px -26px rgba(60,40,20,.6)}
.dsx-light .dsx-shadow{background:radial-gradient(closest-side,rgba(90,60,30,.35),transparent)}
/* screens rise in from below and sharpen, instead of the side wipe */
.dsx-light .dsx-s{clip-path:inset(100% 0 0 0);transform:scale(1.06);filter:blur(6px)}
.dsx-light .dsx-s.on{clip-path:inset(0);transform:scale(1);filter:blur(0);transition:clip-path 1.1s var(--e),filter .9s ease .15s,transform 5.5s var(--o)}
.dsx-light .dsx-s.was{filter:brightness(.8);clip-path:inset(0);transform:scale(.98)}

/* floating stat cards (parallax via --py set by JS) */
.dsx-stats{position:absolute;inset:0;pointer-events:none;z-index:4;transform-style:preserve-3d}
.dsx-stat{position:absolute;display:flex;flex-direction:column;gap:2px;padding:12px 18px 13px;border-radius:16px;text-align:start;
	background:rgba(255,255,255,.78);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);
	box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 40px -18px rgba(60,40,20,.45),0 0 0 1px rgba(29,25,21,.06);
	transform:translate3d(0,var(--py,0px),90px);transition:opacity .8s ease,translate 1.2s var(--o)}
.dsx-stat b{font:700 clamp(1.15rem,1.9vw,1.6rem)/1 var(--font-display);color:var(--ink);letter-spacing:-.01em}
.dsx-stat span{font:500 .74rem/1.2 var(--font-body);color:#7a6a58}
.dsx-stat-1{inset-inline-start:-2%;top:16%}
.dsx-stat-2{inset-inline-start:7%;bottom:10%}
.dsx-stat-3{inset-inline-end:-4%;top:6%}
.dsx-stat::before{content:"";position:absolute;inset-inline-start:12px;top:-5px;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(185,138,88,.18)}
.js .dsx-light:not(.in) .dsx-stat{opacity:0;translate:0 24px}
.dsx-light.in .dsx-stat-1{transition-delay:.9s}.dsx-light.in .dsx-stat-2{transition-delay:1.1s}.dsx-light.in .dsx-stat-3{transition-delay:1.3s}

.dsx-light .dsx-nav{grid-column:1;grid-row:3;justify-content:center;width:min(100%,720px)}
.dsx-light .dsx-dot{color:rgba(29,25,21,.42);text-align:center}
.dsx-light .dsx-dot:hover,.dsx-light .dsx-dot.on{color:var(--ink)}
.dsx-light .dsx-dot::before{background:rgba(29,25,21,.12)}
.dsx-light .dsx-pp{border-color:rgba(29,25,21,.2)}
.dsx-light .dsx-pp:hover{border-color:var(--gold);background:rgba(185,138,88,.1)}
.dsx-light .dsx-pp i{border-color:var(--ink)}
.dsx-light.paused .dsx-pp i{border-inline-start-color:var(--ink);border-block-color:transparent}
/* the light stage opens flat (the scroll does the 3D), so no lid hinge here */
.js .dsx-light:not(.in) .dsx-lid{transform:none}
.js .dsx-light:not(.in) .dsx-laptop{opacity:0}
.dsx-light .dsx-laptop{transition:opacity 1s ease .1s}

/* case-study template: the featured-image container becomes a plain wrapper */
.e-con.ph-band:has(.dsx){aspect-ratio:auto;overflow:visible;background:none;border-radius:0}
.ph-img:has(.dsx),.ph-band .elementor-widget-container:has(.dsx){height:auto;border-radius:0;overflow:visible}

@media(max-width:700px){
	.dsx-light .dsx-stage{padding:30px 6% 8%}
	.dsx-light .dsx-phone{width:27%;inset-inline-end:-3%}
	.dsx-stat{padding:8px 11px 9px;border-radius:12px}.dsx-stat span{font-size:.62rem}
	.dsx-stat-1{top:2%;inset-inline-start:-4%}.dsx-stat-2{bottom:2%;inset-inline-start:2%}.dsx-stat-3{display:none}
}
@media(prefers-reduced-motion:reduce){.dsx-light .dsx-s{filter:none!important}.dsx-stat{translate:none!important}}

/* per-site accent (inline --gold / --on-acc from showcase-sites.json) */
.dsx-dark[style] .dsx-btn{color:var(--on-acc,var(--ink))}
.dsx-dark[style] .dsx-btn:hover{color:var(--on-acc,var(--ink));filter:brightness(1.08)}
.dsx-dark[style] .dsx-eb{color:color-mix(in srgb,var(--gold) 80%,#fff)}
.dsx-dark[style] .dsx-chips span{color:color-mix(in srgb,var(--gold) 55%,#fff);border-color:color-mix(in srgb,var(--gold) 45%,transparent);background:color-mix(in srgb,var(--gold) 8%,transparent)}
.dsx-dark[style] .dsx-orb.a{background:radial-gradient(circle,color-mix(in srgb,var(--gold) 50%,transparent),transparent 65%)}
.dsx-light[style] .dsx-eb{color:color-mix(in srgb,var(--gold) 75%,#000)}
.dsx-light[style] .dsx-chips span{color:color-mix(in srgb,var(--gold) 65%,#000);border-color:color-mix(in srgb,var(--gold) 38%,transparent)}
.dsx-light[style] .dsx-orb.a{background:radial-gradient(circle,color-mix(in srgb,var(--gold) 30%,transparent),transparent 65%)}
.dsx-light[style] .dsx-pp:hover{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,transparent)}
.dsx-light[style] .dsx-stat::before{box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 20%,transparent)}

/* inside the case-study featured-image widget, Elementor's ".elementor-widget-image a{display:inline-block}" outranks .dsx-btn */
.dsx .dsx-cta a.dsx-btn{display:inline-flex;align-items:center;justify-content:center;height:48px;line-height:1;padding:0 1.35rem}
.dsx .dsx-cta a.dsx-link{display:inline-block;line-height:1.4}
.dsx .dsx-cta a b{display:inline-block;line-height:1}
.dsx-dark[style]{background:radial-gradient(120% 90% at 78% 30%,color-mix(in srgb,var(--gold) 22%,#16181c) 0,color-mix(in srgb,var(--gold) 8%,#121417) 42%,#0c0d10 100%)}
.dsx-dark .dsx-copy{text-align:start}
.dsx-dark .dsx-p{margin-inline:0}