/* 3-UAE Studio — demo website mockups (before / after).
   SOURCE FILE: "u" is a mock unit (calc(1 * var(--u)) = 1% of the mock's width on desktop).
   tools/build.py turns "calc(1.5 * var(--u))" into calc(1.5 * var(--u)) and writes assets/css/demos.css. */

.mock { position: absolute; inset: 0; overflow: hidden; --u: 1cqw; line-height: 1.35; text-align: start; pointer-events: none; }
.is-m .mock.new { --u: 2.56cqw; }
.mock > div { position: absolute; inset: 0; overflow: hidden; }
.mk-burger { display: none; width: calc(2.6 * var(--u)); height: calc(1.7 * var(--u)); flex-direction: column; justify-content: space-between; flex: none; }
.mk-burger i { display: block; height: calc(.22 * var(--u)); border-radius: calc(1 * var(--u)); background: currentColor; }
.is-m .mk-burger { display: flex; }
@keyframes mk-marq { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes mk-marq-rtl { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes mk-blink { 50% { visibility: hidden; } }

/* ========== BEFORE (shared): a template site from a beginner designer ==========
   Mixed fonts, stock-style photos with text shadow, slider arrows, generic cards, cookie bar. */
.ao { background: #fff; color: #666; font-family: Tahoma, "Segoe UI", Arial, sans-serif; font-size: calc(1.3 * var(--u)); line-height: 1.5; display: flex; flex-direction: column;
  --a: #43a047; --top: #4e342e; --b1: #ffa726; --b2: #ef6c00; --foot: #2b2b2b; }
.ao-top { flex: none; display: flex; align-items: center; gap: calc(2.4 * var(--u)); padding: calc(.5 * var(--u)) calc(3 * var(--u)); font-size: calc(1.05 * var(--u)); color: #fff; background: var(--top); white-space: nowrap; }
.ao-top2 { opacity: .8; }
.ao-soc { display: flex; gap: calc(.5 * var(--u)); margin-inline-start: auto; }
.ao-soc i { width: calc(1.8 * var(--u)); height: calc(1.8 * var(--u)); border-radius: 50%; display: grid; place-items: center; font-style: normal; font-family: Arial, sans-serif; font-weight: bold; font-size: calc(.85 * var(--u)); color: #fff; line-height: 1; }
.ao-soc .s1 { background: #3b5998; } .ao-soc .s2 { background: #1da1f2; } .ao-soc .s3 { background: #0077b5; }
.ao-nav { flex: none; position: relative; z-index: 2; display: flex; align-items: center; gap: calc(2.4 * var(--u)); padding: calc(1.2 * var(--u)) calc(3 * var(--u)); background: #fff; box-shadow: 0 calc(.2 * var(--u)) calc(.8 * var(--u)) rgba(0, 0, 0, .18); }
.ao-logo { display: flex; align-items: center; gap: calc(.6 * var(--u)); font-family: "Lalezar", "Arial Black", Tahoma, sans-serif; font-size: calc(2.6 * var(--u)); line-height: 1; color: var(--top); white-space: nowrap; }
.ao-logo small { font-size: .55em; }
.ao-links { display: flex; gap: calc(2 * var(--u)); margin-inline-start: auto; font-size: calc(1.15 * var(--u)); font-weight: bold; color: #444; white-space: nowrap; }
.ao-links i { font-style: normal; padding-bottom: calc(.3 * var(--u)); }
.ao-links i:first-child { color: var(--a); border-bottom: calc(.25 * var(--u)) solid var(--a); }
.ao-btn { flex: none; padding: calc(.7 * var(--u)) calc(1.6 * var(--u)); border-radius: calc(3 * var(--u)); color: #fff; font-weight: bold; font-size: calc(1.1 * var(--u)); background: linear-gradient(var(--b1), var(--b2)); box-shadow: 0 calc(.25 * var(--u)) calc(.6 * var(--u)) rgba(0, 0, 0, .3); white-space: nowrap; }
.ao-hero { flex: none; position: relative; height: calc(31 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(.8 * var(--u)); text-align: center; color: #fff; overflow: hidden; }
.ao-photo { position: absolute; inset: 0; }
.ao-hero::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .3); }
.ao-h, .ao-sub, .ao-cta, .aoe-search { position: relative; z-index: 1; }
.ao-h { font-family: "Lalezar", "Arial Black", Impact, sans-serif; font-size: calc(4.4 * var(--u)); line-height: 1.15; text-shadow: calc(.25 * var(--u)) calc(.25 * var(--u)) calc(.5 * var(--u)) rgba(0, 0, 0, .85); max-width: calc(72 * var(--u)); }
.ao-sub { font-family: "Times New Roman", Georgia, serif; font-style: italic; font-size: calc(1.8 * var(--u)); text-shadow: 0 0 calc(.5 * var(--u)) #000, 0 0 calc(.5 * var(--u)) #000; }
.ao-cta { display: flex; gap: calc(1.2 * var(--u)); margin-top: calc(1 * var(--u)); }
.ao-cta b, .ao-cta i { font-style: normal; padding: calc(.9 * var(--u)) calc(2.2 * var(--u)); font-size: calc(1.2 * var(--u)); font-weight: bold; white-space: nowrap; }
.ao-cta b { background: linear-gradient(var(--b1), var(--b2)); border-radius: calc(.3 * var(--u)); box-shadow: 0 calc(.3 * var(--u)) 0 rgba(0, 0, 0, .3); }
.ao-cta i { border: calc(.2 * var(--u)) solid #fff; border-radius: calc(3 * var(--u)); }
.ao-arrow { position: absolute; top: 50%; z-index: 1; width: calc(3.2 * var(--u)); height: calc(3.2 * var(--u)); margin-top: calc(-1.6 * var(--u)); display: grid; place-items: center; background: rgba(0, 0, 0, .45); color: #fff; font-size: calc(2.6 * var(--u)); line-height: 1; font-family: Arial, sans-serif; }
.ao-arrow.a1 { left: calc(1.2 * var(--u)); } .ao-arrow.a2 { right: calc(1.2 * var(--u)); }
.ao-dots { position: absolute; z-index: 1; bottom: calc(1.4 * var(--u)); left: 0; right: 0; display: flex; justify-content: center; gap: calc(.7 * var(--u)); }
.ao-dots i { width: calc(1 * var(--u)); height: calc(1 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .5); }
.ao-dots i:first-child { background: #fff; }
.ao-sec { flex: none; padding: calc(2.4 * var(--u)) calc(4 * var(--u)) calc(3 * var(--u)); text-align: center; background: #f7f7f7; }
.ao-title { display: block; font-family: "Arial Black", Tahoma, sans-serif; font-weight: 900; font-size: calc(2.3 * var(--u)); color: #333; }
.ao-title::after { content: ""; display: block; width: calc(6 * var(--u)); height: calc(.35 * var(--u)); margin: calc(.7 * var(--u)) auto 0; background: var(--a); }
.ao-intro { margin: calc(.8 * var(--u)) auto calc(2 * var(--u)); max-width: calc(60 * var(--u)); font-size: calc(1.2 * var(--u)); color: #999; }
.ao-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(2 * var(--u)); }
.ao-cards.c4 { grid-template-columns: repeat(4, 1fr); gap: calc(1.4 * var(--u)); }
.ao-card { background: #fff; border-radius: calc(.4 * var(--u)); box-shadow: 0 calc(.3 * var(--u)) calc(1.4 * var(--u)) rgba(0, 0, 0, .16); overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: calc(.3 * var(--u)); padding-bottom: calc(1.4 * var(--u)); }
.ao-img { position: relative; width: 100%; height: calc(10 * var(--u)); margin-bottom: calc(.6 * var(--u)); }
.ao-card b { font-family: "Times New Roman", Georgia, serif; font-size: calc(1.6 * var(--u)); color: #222; }
.ao-card p { font-size: calc(1.05 * var(--u)); color: #999; padding: 0 calc(1 * var(--u)); margin: 0; }
.ao-stars { color: #ffb400; font-size: calc(1.2 * var(--u)); letter-spacing: calc(.1 * var(--u)); }
.ao-price { color: #e53935; font-weight: bold; font-size: calc(1.4 * var(--u)); font-family: Arial, sans-serif; }
.ao-price s { color: #aaa; font-weight: normal; font-size: .85em; }
.ao-add { font-style: normal; margin-top: calc(.4 * var(--u)); background: var(--a); color: #fff; font-size: calc(1 * var(--u)); font-weight: bold; padding: calc(.5 * var(--u)) calc(1.4 * var(--u)); border-radius: calc(.2 * var(--u)); }
.ao-more { color: var(--a); font-size: calc(1.05 * var(--u)); font-weight: bold; }
.ao-foot { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(2.4 * var(--u)); padding: calc(2.4 * var(--u)) calc(4 * var(--u)); background: var(--foot); color: #aaa; font-size: calc(1 * var(--u)); }
.ao-foot div { display: flex; flex-direction: column; gap: calc(.7 * var(--u)); align-items: flex-start; }
.ao-foot b { color: #fff; font-size: calc(1.25 * var(--u)); border-bottom: calc(.2 * var(--u)) solid var(--a); padding-bottom: calc(.3 * var(--u)); margin-bottom: calc(.3 * var(--u)); }
.ao-foot span:not(.ao-soc) { display: block; width: 80%; height: calc(.7 * var(--u)); border-radius: calc(.3 * var(--u)); background: rgba(255, 255, 255, .18); }
.ao-foot span.s { width: 50%; }
.ao-foot .ao-soc { margin: 0; }
.ao-copy { flex: none; background: #111; color: #777; text-align: center; font-size: calc(.95 * var(--u)); padding: calc(.7 * var(--u)); }
.ao-cookie { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: center; gap: calc(1.6 * var(--u)); padding: calc(.9 * var(--u)) calc(3 * var(--u)); background: rgba(33, 33, 33, .94); color: #ddd; font-size: calc(1.05 * var(--u)); }
.ao-cookie b { background: #4caf50; color: #fff; padding: calc(.3 * var(--u)) calc(1.4 * var(--u)); border-radius: calc(.2 * var(--u)); }

/* before · café: brown + clashing green, blurry stock photo */
.aoc { --top: #4e342e; --a: #43a047; --b1: #ffa726; --b2: #ef6c00; --foot: #3e2723; }
.aoc .ao-logo { font-family: "Brush Script MT", "Segoe Script", "Lalezar", cursive; font-size: calc(3 * var(--u)); color: #6d4c41; }
.aoc .ao-photo { background:
  radial-gradient(circle at 18% 28%, rgba(255, 210, 140, .55) 0 calc(3 * var(--u)), transparent calc(3.3 * var(--u))),
  radial-gradient(circle at 82% 22%, rgba(255, 230, 170, .45) 0 calc(2 * var(--u)), transparent calc(2.3 * var(--u))),
  radial-gradient(circle at 70% 72%, rgba(255, 190, 100, .35) 0 calc(4.5 * var(--u)), transparent calc(4.8 * var(--u))),
  radial-gradient(circle at 34% 80%, rgba(255, 220, 160, .3) 0 calc(2.5 * var(--u)), transparent calc(2.8 * var(--u))),
  radial-gradient(ellipse 22% 34% at 50% 82%, #8d5a33, transparent 70%),
  linear-gradient(135deg, #3b2314, #7a4a24 45%, #2a170c); }
.aoc .ao-img.i1 { background: radial-gradient(circle at 50% 55%, #f5e1c8 0 18%, #c48a5a 19% 34%, #fff 35% 46%, #d7ccc8 47%); }
.aoc .ao-img.i2 { background: linear-gradient(#3e2723 0 30%, #6d4c41 30% 45%, #3e2723 45% 70%, #a1887f 70%); }
.aoc .ao-img.i3 { background: radial-gradient(ellipse at 50% 60%, #f9a825 0 14%, #8d6e63 15% 22%, #efebe9 23%); }

/* before · clinic: teal + purple buttons + rainbow icons */
.aon { --top: #00897b; --a: #00acc1; --b1: #ab47bc; --b2: #7b1fa2; --foot: #263238; }
.aon .ao-logo { font-family: "Times New Roman", Georgia, serif; font-weight: bold; font-size: calc(2.2 * var(--u)); color: #00796b; }
.aon .ao-logo small { display: block; font-size: .5em; font-style: italic; font-weight: normal; color: #9e9e9e; margin-top: calc(.2 * var(--u)); }
.aon-mark { width: calc(2.8 * var(--u)); height: calc(2.8 * var(--u)); border-radius: 50%; background: #e53935; color: #fff; display: grid; place-items: center; font-style: normal; font-size: calc(1.5 * var(--u)); flex: none; }
.aon .ao-photo { background:
  radial-gradient(circle at 76% 38%, rgba(255, 255, 255, .85) 0 calc(5 * var(--u)), rgba(255, 255, 255, 0) calc(9 * var(--u))),
  radial-gradient(circle at 20% 70%, rgba(255, 255, 255, .35) 0 calc(3 * var(--u)), transparent calc(3.3 * var(--u))),
  linear-gradient(110deg, #0277bd, #29b6f6 55%, #b2ebf2); }
.aon .ao-h { color: #fff; -webkit-text-stroke: calc(.08 * var(--u)) #004d40; }
.ao-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(2 * var(--u)); }
.ao-feat { display: flex; flex-direction: column; align-items: center; gap: calc(.4 * var(--u)); background: #fff; padding: calc(1.6 * var(--u)) calc(1 * var(--u)); border-radius: calc(.4 * var(--u)); box-shadow: 0 calc(.2 * var(--u)) calc(.8 * var(--u)) rgba(0, 0, 0, .1); }
.ao-feat i { width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; font-size: calc(2.2 * var(--u)); box-shadow: 0 calc(.3 * var(--u)) calc(.8 * var(--u)) rgba(0, 0, 0, .25); margin-bottom: calc(.4 * var(--u)); }
.ao-feat .fi1 { background: #e53935; } .ao-feat .fi2 { background: #fb8c00; } .ao-feat .fi3 { background: #43a047; } .ao-feat .fi4 { background: #1e88e5; }
.ao-feat b { font-family: "Times New Roman", serif; font-size: calc(1.5 * var(--u)); color: #222; }
.ao-feat p { font-size: calc(1 * var(--u)); color: #999; margin: 0; }
.ao-chat { position: absolute; z-index: 4; bottom: calc(4.6 * var(--u)); inset-inline-end: calc(2 * var(--u)); background: #7b1fa2; color: #fff; padding: calc(.8 * var(--u)) calc(1.6 * var(--u)); border-radius: calc(3 * var(--u)); font-size: calc(1.1 * var(--u)); font-weight: bold; box-shadow: 0 calc(.4 * var(--u)) calc(1 * var(--u)) rgba(0, 0, 0, .35); }

/* before · real estate: navy + red + gold, oversaturated daytime photo */
.aoe { --top: #1a237e; --a: #e53935; --b1: #ffca28; --b2: #ff8f00; --foot: #1a1a2e; }
.aoe .ao-logo { flex-direction: column; align-items: flex-start; gap: calc(.1 * var(--u)); font-family: Impact, "Arial Black", "Lalezar", sans-serif; font-size: calc(2.8 * var(--u)); color: #c9a227; letter-spacing: calc(.1 * var(--u)); }
.aoe .ao-logo small { font-family: Tahoma, sans-serif; font-weight: bold; font-size: .4em; color: #1a237e; letter-spacing: 0; }
.aoe .ao-photo { background: linear-gradient(#29b6f6, #b3e5fc 70%); }
.aoe-city { position: absolute; left: 0; bottom: 0; width: 100%; height: 72%; }
.aoe .ao-hero { justify-content: flex-start; padding-top: calc(4.6 * var(--u)); }
.aoe-search { display: flex; gap: calc(.5 * var(--u)); background: rgba(255, 255, 255, .92); padding: calc(.8 * var(--u)); border-radius: calc(.3 * var(--u)); margin-top: calc(1.2 * var(--u)); box-shadow: 0 calc(.4 * var(--u)) calc(1.2 * var(--u)) rgba(0, 0, 0, .3); }
.aoe-search span { background: #fff; border: calc(.12 * var(--u)) solid #bbb; color: #555; font-size: calc(1.1 * var(--u)); padding: calc(.6 * var(--u)) calc(2.4 * var(--u)) calc(.6 * var(--u)) calc(1 * var(--u)); min-width: calc(12 * var(--u)); text-align: start; white-space: nowrap; }
.aoe-search b { background: linear-gradient(#ffca28, #ff8f00); color: #fff; padding: calc(.6 * var(--u)) calc(2.2 * var(--u)); font-size: calc(1.15 * var(--u)); white-space: nowrap; }
.aoe .ao-card { align-items: flex-start; text-align: start; }
.aoe .ao-card > :not(.ao-img) { margin-inline: calc(1.2 * var(--u)); }
.aoe .ao-price { color: #1565c0; font-size: calc(1.6 * var(--u)); }
.aoe .ao-card b { font-size: calc(1.4 * var(--u)); }
.aoe .ao-img.i1 { background: linear-gradient(#81d4fa, #e1f5fe 55%, #90a4ae 56%), #90a4ae; }
.aoe .ao-img.i2 { background: linear-gradient(#4fc3f7 0 50%, #a5d6a7 50%); }
.aoe .ao-img.i3 { background: linear-gradient(135deg, #bcaaa4, #efebe9); }
.aoe .ao-img::after { content: ""; position: absolute; bottom: 0; left: 25%; width: 50%; height: 60%; background: rgba(69, 90, 100, .65); }
.ao-ribbon { position: absolute; top: calc(.8 * var(--u)); inset-inline-start: 0; z-index: 1; background: #e53935; color: #fff; font-size: calc(.95 * var(--u)); font-weight: bold; padding: calc(.2 * var(--u)) calc(1 * var(--u)); }

/* before · perfume: pink + purple + yellow, sparkly banner and discount badges */
.aop { --top: #ec407a; --a: #8e24aa; --b1: #f06292; --b2: #c2185b; --foot: #311b3b; }
.aop .ao-top { justify-content: center; }
.aop .ao-logo { font-size: calc(3 * var(--u)); color: #c79100; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .aop .ao-logo { background: linear-gradient(#ffd54f, #b8860b); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.aop .ao-btn { border-radius: calc(.2 * var(--u)); }
.aop .ao-photo { background:
  radial-gradient(circle at 14% 24%, #fff 0 calc(.25 * var(--u)), transparent calc(.4 * var(--u))), radial-gradient(circle at 30% 70%, #fff 0 calc(.2 * var(--u)), transparent calc(.35 * var(--u))),
  radial-gradient(circle at 62% 18%, #fff 0 calc(.3 * var(--u)), transparent calc(.45 * var(--u))), radial-gradient(circle at 88% 64%, #fff 0 calc(.25 * var(--u)), transparent calc(.4 * var(--u))),
  linear-gradient(120deg, #4a148c, #ad1457 60%, #f06292); }
.aop .ao-h { color: #ffeb3b; }
.aop-b1, .aop-b2, .aop-b3 { position: absolute; bottom: calc(3.5 * var(--u)); width: calc(5 * var(--u)); height: calc(9 * var(--u)); border-radius: calc(1 * var(--u)) calc(1 * var(--u)) calc(.6 * var(--u)) calc(.6 * var(--u)); background: linear-gradient(90deg, rgba(255, 255, 255, .5), rgba(255, 215, 120, .7) 40%, rgba(160, 90, 20, .8)); box-shadow: 0 calc(.6 * var(--u)) calc(1.4 * var(--u)) rgba(0, 0, 0, .4); }
.aop-b1::before, .aop-b2::before, .aop-b3::before { content: ""; position: absolute; left: 50%; top: calc(-2 * var(--u)); width: calc(2.2 * var(--u)); height: calc(2 * var(--u)); margin-left: calc(-1.1 * var(--u)); background: #d4af37; border-radius: calc(.3 * var(--u)); }
.aop-b1 { left: calc(8 * var(--u)); } .aop-b2 { left: calc(14 * var(--u)); height: calc(11 * var(--u)); } .aop-b3 { right: calc(9 * var(--u)); height: calc(10 * var(--u)); }
.aop .ao-img { background: #f3e5f5; display: grid; place-items: center; height: calc(9 * var(--u)); }
.aop-bottle { position: relative; width: calc(3.2 * var(--u)); height: calc(5.4 * var(--u)); border-radius: calc(.6 * var(--u)) calc(.6 * var(--u)) calc(.4 * var(--u)) calc(.4 * var(--u)); margin-top: calc(1.2 * var(--u)); }
.aop-bottle::before { content: ""; position: absolute; left: 50%; top: calc(-1.2 * var(--u)); width: calc(1.4 * var(--u)); height: calc(1.2 * var(--u)); margin-left: calc(-.7 * var(--u)); background: #d4af37; }
.aop-bottle.b1 { background: linear-gradient(#ce93d8, #8e24aa); } .aop-bottle.b2 { background: linear-gradient(#a1887f, #4e342e); }
.aop-bottle.b3 { background: linear-gradient(#90caf9, #1e88e5); } .aop-bottle.b4 { background: linear-gradient(#fafafa, #bdbdbd); }
.ao-off { position: absolute; top: calc(.6 * var(--u)); inset-inline-end: calc(.6 * var(--u)); z-index: 1; background: #e53935; color: #fff; font-size: calc(.85 * var(--u)); font-weight: bold; padding: calc(.2 * var(--u)) calc(.6 * var(--u)); border-radius: calc(2 * var(--u)); transform: rotate(-8deg); }
.aop .ao-add { background: linear-gradient(var(--b1), var(--b2)); border-radius: calc(2 * var(--u)); }

/* ========== CAFE · new ========== */
.dcn { background: #F6F0E7; color: #24170F; font-family: var(--f-body); padding: calc(2 * var(--u)) calc(3.2 * var(--u)); display: flex; flex-direction: column; gap: calc(2 * var(--u)); line-height: 1.4; }
.dcn-nav { flex: none; display: flex; align-items: center; justify-content: space-between; gap: calc(2 * var(--u)); }
.dcn-logo { font-family: var(--f-display); font-weight: 700; font-size: calc(2.2 * var(--u)); }
.dcn-links { display: flex; gap: calc(2.4 * var(--u)); font-size: calc(1.35 * var(--u)); color: #6A5647; }
.dcn-links i, .dnn-links i, .drn-links i, .dpn-links i { font-style: normal; }
.dcn-cta { background: #24170F; color: #F6F0E7; border-radius: calc(9 * var(--u)); padding: calc(.7 * var(--u)) calc(1.8 * var(--u)); font-size: calc(1.3 * var(--u)); font-weight: 600; }
.dcn-hero { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.15fr .85fr; gap: calc(3 * var(--u)); align-items: center; }
.dcn-copy { display: flex; flex-direction: column; gap: calc(1.1 * var(--u)); align-items: flex-start; }
.dcn-eb { font-size: calc(1.25 * var(--u)); color: #B4621C; font-weight: 600; }
.dcn-h { font-family: var(--f-display); font-weight: 700; font-size: calc(4.4 * var(--u)); line-height: 1.2; text-wrap: balance; }
.dcn-p { font-size: calc(1.5 * var(--u)); color: #6A5647; max-width: calc(36 * var(--u)); }
.dcn-btns { display: flex; gap: calc(1 * var(--u)); margin-top: calc(.6 * var(--u)); }
.dcn-btns b, .dcn-btns i { font-style: normal; font-size: calc(1.3 * var(--u)); padding: calc(.8 * var(--u)) calc(1.9 * var(--u)); border-radius: calc(9 * var(--u)); font-weight: 600; }
.dcn-btns b { background: #B4621C; color: #fff; }
.dcn-btns i { border: calc(.1 * var(--u)) solid rgba(36, 23, 15, .25); }
.dcn-art { display: grid; place-items: center; min-height: 0; height: 100%; }
.dcn-saucer { width: 76%; max-height: 100%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #EADFCF; box-shadow: 0 calc(1.6 * var(--u)) calc(3 * var(--u)) rgba(36, 23, 15, .16), inset 0 0 0 calc(.6 * var(--u)) #F3EADD; }
.dcn-cup { width: 70%; aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 calc(.6 * var(--u)) calc(1.4 * var(--u)) rgba(36, 23, 15, .18); }
.dcn-coffee { width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(ellipse 22% 16% at 50% 40%, #FBF1E3 70%, transparent 74%), radial-gradient(ellipse 30% 22% at 50% 54%, #F5E3CB 70%, transparent 74%), radial-gradient(ellipse 12% 30% at 50% 70%, #EFD7B6 60%, transparent 66%), radial-gradient(circle at 50% 50%, #C98A52 0 30%, #8E4F24 62%, #5E3014 100%); }
.dcn-menu { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1.4 * var(--u)); }
.dcn-item { display: flex; justify-content: space-between; align-items: center; gap: calc(1 * var(--u)); background: #fff; border-radius: calc(1.2 * var(--u)); padding: calc(1.1 * var(--u)) calc(1.6 * var(--u)); font-size: calc(1.4 * var(--u)); box-shadow: 0 calc(.4 * var(--u)) calc(1.4 * var(--u)) rgba(36, 23, 15, .08); }
.dcn-item b { color: #B4621C; white-space: nowrap; }
.dcn-bar { display: none; }
.is-m .dcn { padding: calc(2 * var(--u)) calc(2.2 * var(--u)) calc(8 * var(--u)); gap: calc(1.6 * var(--u)); }
.is-m .dcn-links, .is-m .dcn-cta { display: none; }
.is-m .dcn-hero { flex: none; grid-template-columns: 1fr; gap: calc(1.6 * var(--u)); }
.is-m .dcn-art { order: -1; height: auto; }
.is-m .dcn-saucer { width: 58%; }
.is-m .dcn-h { font-size: calc(3.5 * var(--u)); }
.is-m .dcn-menu { grid-template-columns: 1fr; gap: calc(.9 * var(--u)); }
.is-m .dcn-bar { display: flex; justify-content: center; position: absolute; inset: auto calc(2.2 * var(--u)) calc(2 * var(--u)); background: #24170F; color: #F6F0E7; border-radius: calc(9 * var(--u)); padding: calc(1.1 * var(--u)); font-size: calc(1.35 * var(--u)); font-weight: 600; }

/* ========== CLINIC · new ========== */
.dnn { background: #F7FAF9; color: #0E2A2B; font-family: var(--f-body); padding: calc(2 * var(--u)) calc(3.2 * var(--u)); display: flex; flex-direction: column; gap: calc(2.2 * var(--u)); line-height: 1.4; }
.dnn-nav { flex: none; display: flex; align-items: center; justify-content: space-between; gap: calc(2 * var(--u)); }
.dnn-logo { display: flex; align-items: center; gap: calc(.8 * var(--u)); }
.dnn-mark { width: calc(2.6 * var(--u)); height: calc(2.6 * var(--u)); border-radius: 50%; background: #0F6E6A; position: relative; flex: none; }
.dnn-mark::after { content: ""; position: absolute; left: 26%; right: 26%; top: 28%; bottom: 30%; border-bottom: calc(.3 * var(--u)) solid #fff; border-radius: 0 0 50% 50%; }
.dnn-logo b { font-family: var(--f-display); font-size: calc(2 * var(--u)); }
.dnn-logo em { font-style: normal; font-size: calc(1.2 * var(--u)); color: #5C7472; }
.dnn-links { display: flex; gap: calc(2.4 * var(--u)); font-size: calc(1.35 * var(--u)); color: #4D6664; }
.dnn-cta { background: #0F6E6A; color: #fff; border-radius: calc(9 * var(--u)); padding: calc(.7 * var(--u)) calc(1.8 * var(--u)); font-size: calc(1.3 * var(--u)); font-weight: 600; }
.dnn-hero { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.1fr .9fr; gap: calc(3.4 * var(--u)); align-items: center; }
.dnn-copy { display: flex; flex-direction: column; gap: calc(1.1 * var(--u)); align-items: flex-start; }
.dnn-eb { color: #0F6E6A; font-size: calc(1.25 * var(--u)); font-weight: 600; }
.dnn-h { font-family: var(--f-display); font-weight: 700; font-size: calc(4.2 * var(--u)); line-height: 1.2; text-wrap: balance; }
.dnn-p { font-size: calc(1.5 * var(--u)); color: #4D6664; max-width: calc(38 * var(--u)); }
.dnn-chips { display: flex; gap: calc(.8 * var(--u)); flex-wrap: wrap; margin-top: calc(.4 * var(--u)); }
.dnn-chips i { font-style: normal; font-size: calc(1.2 * var(--u)); background: #DDF1EC; color: #0F6E6A; padding: calc(.5 * var(--u)) calc(1.1 * var(--u)); border-radius: calc(9 * var(--u)); font-weight: 600; }
.dnn-card { background: #fff; border-radius: calc(1.6 * var(--u)); padding: calc(1.8 * var(--u)); box-shadow: 0 calc(1.4 * var(--u)) calc(3.4 * var(--u)) rgba(14, 42, 43, .1); display: flex; flex-direction: column; gap: calc(1.2 * var(--u)); border: calc(.1 * var(--u)) solid #E2EAE8; }
.dnn-ct { font-size: calc(1.6 * var(--u)); font-weight: 700; }
.dnn-days, .dnn-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(.7 * var(--u)); }
.dnn-days span { display: flex; flex-direction: column; align-items: center; padding: calc(.7 * var(--u)) 0; border-radius: calc(1 * var(--u)); border: calc(.1 * var(--u)) solid #E2EAE8; font-size: calc(1.1 * var(--u)); color: #5C7472; }
.dnn-days b { font-size: calc(1.8 * var(--u)); color: #0E2A2B; line-height: 1.2; }
.dnn-days .on { background: #0F6E6A; border-color: #0F6E6A; color: #CDEBE6; }
.dnn-days .on b { color: #fff; }
.dnn-times span { text-align: center; padding: calc(.6 * var(--u)) 0; border-radius: calc(.8 * var(--u)); background: #F1F6F5; font-size: calc(1.2 * var(--u)); white-space: nowrap; }
.dnn-times .on { background: #DDF1EC; color: #0F6E6A; font-weight: 700; box-shadow: inset 0 0 0 calc(.15 * var(--u)) #0F6E6A; }
.dnn-confirm { text-align: center; background: #0E2A2B; color: #fff; padding: calc(1 * var(--u)); border-radius: calc(1 * var(--u)); font-size: calc(1.35 * var(--u)); font-weight: 600; }
.dnn-svc { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(1.2 * var(--u)); }
.dnn-svc span { display: flex; align-items: center; gap: calc(.9 * var(--u)); background: #fff; border: calc(.1 * var(--u)) solid #E2EAE8; border-radius: calc(1.2 * var(--u)); padding: calc(1 * var(--u)) calc(1.2 * var(--u)); font-size: calc(1.3 * var(--u)); font-weight: 600; }
.dnn-svc i { width: calc(2.6 * var(--u)); height: calc(2.6 * var(--u)); border-radius: 50%; background: #DDF1EC; flex: none; position: relative; }
.dnn-svc i::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; border: calc(.25 * var(--u)) solid #0F6E6A; }
.is-m .dnn { padding: calc(2 * var(--u)) calc(2.2 * var(--u)); gap: calc(1.6 * var(--u)); }
.is-m .dnn-links, .is-m .dnn-cta { display: none; }
.is-m .dnn-hero { flex: none; grid-template-columns: 1fr; gap: calc(1.6 * var(--u)); }
.is-m .dnn-h { font-size: calc(3.4 * var(--u)); }
.is-m .dnn-svc { grid-template-columns: 1fr 1fr; gap: calc(.8 * var(--u)); }

/* ========== REAL ESTATE · new ========== */
.drn { background: #F4F1EC; color: #0E1726; font-family: var(--f-body); display: flex; flex-direction: column; line-height: 1.35; }
.drn-hero { position: relative; flex: 0 0 66%; overflow: hidden; display: flex; flex-direction: column; padding: calc(2 * var(--u)) calc(3.2 * var(--u)); color: #fff; }
.drn-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #141C33 0%, #2E3157 34%, #8E5677 62%, #E0905E 84%, #F4BB76 100%); }
.drn-city { position: absolute; left: 0; bottom: 0; width: 100%; height: 58%; }
.drn-nav { position: relative; flex: none; display: flex; justify-content: space-between; align-items: center; gap: calc(2 * var(--u)); }
.drn-logo { font-family: var(--f-display); font-weight: 700; font-size: calc(2.1 * var(--u)); letter-spacing: calc(.05 * var(--u)); }
.drn-links { display: flex; gap: calc(2.4 * var(--u)); font-size: calc(1.3 * var(--u)); opacity: .85; }
.drn-cta { border: calc(.12 * var(--u)) solid rgba(255, 255, 255, .6); border-radius: calc(9 * var(--u)); padding: calc(.6 * var(--u)) calc(1.6 * var(--u)); font-size: calc(1.25 * var(--u)); }
.drn-copy { position: relative; margin-top: calc(3 * var(--u)); display: flex; flex-direction: column; gap: calc(1.2 * var(--u)); align-items: flex-start; max-width: calc(62 * var(--u)); }
.drn-eb { color: #E9CF98; font-size: calc(1.25 * var(--u)); font-weight: 600; }
.drn-h { font-family: var(--f-display); font-size: calc(4.2 * var(--u)); font-weight: 700; line-height: 1.18; text-wrap: balance; }
.drn-search { display: flex; align-items: stretch; background: #fff; color: #0E1726; border-radius: calc(1.2 * var(--u)); padding: calc(.6 * var(--u)); gap: calc(.4 * var(--u)); box-shadow: 0 calc(1.6 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .25); margin-top: calc(.6 * var(--u)); }
.drn-search span { display: flex; flex-direction: column; padding: calc(.3 * var(--u)) calc(1.4 * var(--u)); border-inline-end: calc(.1 * var(--u)) solid #E5E1D8; white-space: nowrap; }
.drn-search em { font-style: normal; font-size: calc(1 * var(--u)); color: #7A7F89; }
.drn-search b { font-size: calc(1.3 * var(--u)); }
.drn-go { font-style: normal; background: #C8A96A; color: #0E1726; border-radius: calc(.9 * var(--u)); padding: calc(.6 * var(--u)) calc(2 * var(--u)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: calc(1.3 * var(--u)); }
.drn-cards { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1.6 * var(--u)); padding: 0 calc(3.2 * var(--u)); margin-top: calc(-4.5 * var(--u)); position: relative; min-height: 0; align-items: start; }
.drn-card { background: #fff; border-radius: calc(1.4 * var(--u)); overflow: hidden; box-shadow: 0 calc(1 * var(--u)) calc(2.4 * var(--u)) rgba(14, 23, 38, .14); display: flex; flex-direction: column; }
.drn-img { height: calc(8 * var(--u)); position: relative; overflow: hidden; }
.drn-img::before, .drn-img::after { content: ""; position: absolute; bottom: 0; background: rgba(14, 23, 38, .55); }
.drn-img.v1 { background: linear-gradient(180deg, #8EC5E8, #D9EEF7 70%, #2F7FB0 71%, #1E5F8A); }
.drn-img.v1::before { left: 18%; width: 22%; height: 78%; border-radius: calc(.6 * var(--u)) calc(.6 * var(--u)) 0 0; }
.drn-img.v1::after { left: 46%; width: 14%; height: 58%; }
.drn-img.v2 { background: linear-gradient(180deg, #F7D9A8, #F3C88A 62%, #7FA45B 63%, #5E8441); }
.drn-img.v2::before { left: 26%; width: 48%; height: 40%; background: #EFE6D8; box-shadow: inset 0 calc(-2 * var(--u)) 0 rgba(14, 23, 38, .15); }
.drn-img.v2::after { left: 22%; width: 56%; height: 14%; bottom: 40%; background: #8B5A3C; clip-path: polygon(8% 100%, 50% 0, 92% 100%); }
.drn-img.v3 { background: linear-gradient(160deg, #3A3F5C, #6B5B7B 60%, #C98B6B); }
.drn-img.v3::before { left: 12%; width: 30%; height: 64%; background: rgba(14, 23, 38, .7); }
.drn-img.v3::after { left: 48%; width: 40%; height: 46%; background: rgba(255, 220, 160, .25); }
.drn-info { padding: calc(1 * var(--u)) calc(1.2 * var(--u)) calc(1.2 * var(--u)); display: flex; flex-direction: column; gap: calc(.3 * var(--u)); }
.drn-info b { font-size: calc(1.5 * var(--u)); }
.drn-info span { font-size: calc(1.2 * var(--u)); }
.drn-info em { font-style: normal; font-size: calc(1.05 * var(--u)); color: #7A7F89; }
.is-m .drn-hero { flex: none; height: calc(58 * var(--u)); padding: calc(2 * var(--u)) calc(2.2 * var(--u)); }
.is-m .drn-links, .is-m .drn-cta { display: none; }
.is-m .drn-copy { margin-top: calc(2.4 * var(--u)); max-width: none; }
.is-m .drn-h { font-size: calc(3.4 * var(--u)); }
.is-m .drn-search { flex-direction: column; width: 100%; padding: calc(.8 * var(--u)); }
.is-m .drn-search span { border-inline-end: 0; border-bottom: calc(.1 * var(--u)) solid #E5E1D8; padding: calc(.5 * var(--u)) calc(.8 * var(--u)); }
.is-m .drn-go { padding: calc(.9 * var(--u)); }
.is-m .drn-city { height: 34%; }
.is-m .drn-cards { grid-template-columns: 1fr; padding: 0 calc(2.2 * var(--u)); margin-top: calc(-2.4 * var(--u)); }
.is-m .drn-img { height: calc(12 * var(--u)); }

/* ========== PERFUME · new ========== */
.dpn { background: radial-gradient(ellipse 55% 75% at 74% 46%, #2C1B14, #120E0C 72%); color: #F3EBDD; font-family: var(--f-body); padding: calc(2 * var(--u)) calc(3.2 * var(--u)); display: flex; flex-direction: column; gap: calc(1.8 * var(--u)); line-height: 1.4; }
[dir="rtl"] .dpn { background: radial-gradient(ellipse 55% 75% at 26% 46%, #2C1B14, #120E0C 72%); }
.dpn-nav { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: calc(2 * var(--u)); }
.dpn-links { display: flex; gap: calc(2.2 * var(--u)); font-size: calc(1.25 * var(--u)); color: #BCAE98; }
.dpn-logo { font-family: var(--f-display); font-weight: 700; font-size: calc(2.3 * var(--u)); color: #D4AF6A; letter-spacing: calc(.1 * var(--u)); text-align: center; white-space: nowrap; }
.dpn-cart { justify-self: end; width: calc(2.3 * var(--u)); height: calc(2.3 * var(--u)); border: calc(.15 * var(--u)) solid #D4AF6A; border-radius: calc(.4 * var(--u)) calc(.4 * var(--u)) calc(.8 * var(--u)) calc(.8 * var(--u)); position: relative; }
.dpn-cart b { position: absolute; top: calc(-.9 * var(--u)); inset-inline-end: calc(-.9 * var(--u)); width: calc(1.5 * var(--u)); height: calc(1.5 * var(--u)); border-radius: 50%; background: #D4AF6A; color: #120E0C; font-size: calc(.95 * var(--u)); display: grid; place-items: center; }
.dpn-hero { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.05fr .95fr; gap: calc(3 * var(--u)); align-items: center; }
.dpn-copy { display: flex; flex-direction: column; gap: calc(1.1 * var(--u)); align-items: flex-start; }
.dpn-eb { color: #D4AF6A; font-size: calc(1.2 * var(--u)); letter-spacing: calc(.1 * var(--u)); }
.dpn-h { font-family: var(--f-display); font-weight: 700; font-size: calc(4.6 * var(--u)); line-height: 1.15; text-wrap: balance; }
.dpn-p { font-size: calc(1.45 * var(--u)); color: #BCAE98; max-width: calc(34 * var(--u)); }
.dpn-btns { display: flex; gap: calc(1 * var(--u)); margin-top: calc(.6 * var(--u)); }
.dpn-btns b, .dpn-btns i { font-style: normal; font-size: calc(1.3 * var(--u)); padding: calc(.8 * var(--u)) calc(1.9 * var(--u)); border-radius: calc(9 * var(--u)); font-weight: 600; }
.dpn-btns b { background: #D4AF6A; color: #120E0C; }
.dpn-btns i { border: calc(.12 * var(--u)) solid rgba(212, 175, 106, .5); color: #D4AF6A; }
.dpn-art { position: relative; display: grid; place-items: center; height: 100%; min-height: 0; }
.dpn-glow { position: absolute; width: 74%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(212, 175, 106, .32), transparent 66%); }
.dpn-bottle { position: relative; display: flex; flex-direction: column; align-items: center; }
.dpn-bottle::after { content: ""; position: absolute; bottom: calc(-1.6 * var(--u)); width: 140%; height: calc(1.6 * var(--u)); border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .6), transparent 70%); }
.dpn-cap { width: calc(5 * var(--u)); height: calc(4.6 * var(--u)); background: linear-gradient(90deg, #7A5B22, #F1D58F 38%, #C49A45 62%, #6E511D); border-radius: calc(.6 * var(--u)) calc(.6 * var(--u)) calc(.3 * var(--u)) calc(.3 * var(--u)); }
.dpn-neck { width: calc(3.2 * var(--u)); height: calc(1.2 * var(--u)); background: linear-gradient(90deg, #8E6E30, #EBD08E, #8E6E30); }
.dpn-glass { width: calc(12.5 * var(--u)); height: calc(15.5 * var(--u)); border-radius: calc(2.2 * var(--u)) calc(2.2 * var(--u)) calc(1.6 * var(--u)) calc(1.6 * var(--u)); position: relative; display: grid; place-items: center; border: calc(.15 * var(--u)) solid rgba(255, 255, 255, .22); box-shadow: 0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .5); background: linear-gradient(90deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .03) 30%, rgba(255, 255, 255, .1) 72%, rgba(255, 255, 255, .26)), linear-gradient(180deg, rgba(94, 31, 43, .28) 0 16%, #74283A 16%, #3C0F1A); }
.dpn-glass em { font-style: normal; font-family: var(--f-display); color: #D4AF6A; font-size: calc(1.5 * var(--u)); border: calc(.1 * var(--u)) solid rgba(212, 175, 106, .6); padding: calc(.5 * var(--u)) calc(1.1 * var(--u)); background: rgba(18, 14, 12, .45); letter-spacing: calc(.1 * var(--u)); }
.dpn-row { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1.4 * var(--u)); }
.dpn-prod { display: flex; align-items: center; gap: calc(1.2 * var(--u)); background: rgba(243, 235, 221, .05); border: calc(.1 * var(--u)) solid rgba(212, 175, 106, .2); border-radius: calc(1.2 * var(--u)); padding: calc(1 * var(--u)) calc(1.2 * var(--u)); }
.dpn-mini { width: calc(2.4 * var(--u)); height: calc(3.8 * var(--u)); border-radius: calc(.5 * var(--u)) calc(.5 * var(--u)) calc(.4 * var(--u)) calc(.4 * var(--u)); position: relative; flex: none; margin-top: calc(.8 * var(--u)); }
.dpn-mini::before { content: ""; position: absolute; width: calc(1.2 * var(--u)); height: calc(.9 * var(--u)); top: calc(-.85 * var(--u)); left: 50%; margin-left: calc(-.6 * var(--u)); background: #D4AF6A; border-radius: calc(.2 * var(--u)); }
.dpn-mini.c1 { background: linear-gradient(#9A3B2E, #5A1A12); }
.dpn-mini.c2 { background: linear-gradient(#E3A3A8, #A8566A); }
.dpn-mini.c3 { background: linear-gradient(#F1EBE0, #BDB2A0); }
.dpn-prod b { font-size: calc(1.3 * var(--u)); display: block; font-weight: 600; }
.dpn-prod em { font-style: normal; color: #D4AF6A; font-size: calc(1.2 * var(--u)); }
.dpn-add { margin-inline-start: auto; font-size: calc(1.1 * var(--u)); border: calc(.1 * var(--u)) solid rgba(212, 175, 106, .5); color: #D4AF6A; border-radius: calc(9 * var(--u)); padding: calc(.35 * var(--u)) calc(.9 * var(--u)); }
.is-m .dpn { padding: calc(2 * var(--u)) calc(2.2 * var(--u)); gap: calc(1.4 * var(--u)); }
.is-m .dpn-nav { grid-template-columns: auto 1fr auto; }
.is-m .dpn-links { display: none; }
.is-m .dpn-hero { flex: none; grid-template-columns: 1fr; gap: calc(1.4 * var(--u)); }
.is-m .dpn-art { order: -1; height: calc(22 * var(--u)); }
.is-m .dpn-bottle { transform: scale(.8); }
.is-m .dpn-h { font-size: calc(3.6 * var(--u)); }
.is-m .dpn-row { grid-template-columns: 1fr; gap: calc(.8 * var(--u)); }

/* ========== STUDIO (3-uae.com itself) ========== */
.dsn { background: #F2F1EE; color: #232322; font-family: var(--f-body); padding: calc(2.2 * var(--u)) calc(3.6 * var(--u)); display: flex; flex-direction: column; gap: calc(2.4 * var(--u)); line-height: 1.3;
  background-image: linear-gradient(rgba(35, 34, 32, .06) calc(.1 * var(--u)), transparent calc(.1 * var(--u))), linear-gradient(90deg, rgba(35, 34, 32, .06) calc(.1 * var(--u)), transparent calc(.1 * var(--u))); background-size: calc(3 * var(--u)) calc(3 * var(--u)); }
.dsn-nav { flex: none; display: flex; align-items: center; justify-content: space-between; gap: calc(2 * var(--u)); }
.dsn-logo { display: flex; align-items: center; gap: calc(.8 * var(--u)); font-family: var(--f-brand, sans-serif); font-size: calc(1.6 * var(--u)); font-weight: 800; letter-spacing: calc(.05 * var(--u)); }
.dsn-logo i { font-style: normal; width: calc(2.4 * var(--u)); height: calc(2.6 * var(--u)); display: grid; place-items: center; color: #232322; font-size: calc(2 * var(--u)); font-weight: 800; border-top: calc(.45 * var(--u)) solid #8E8A86; }
.dsn-logo em { font-style: normal; font-weight: 500; color: #8D8984; }
.dsn-links { display: flex; gap: calc(1.6 * var(--u)); }
.dsn-links i { display: block; width: calc(4.5 * var(--u)); height: calc(.7 * var(--u)); border-radius: calc(1 * var(--u)); background: rgba(35, 34, 32, .2); }
.dsn-cta { width: calc(9 * var(--u)); height: calc(2.6 * var(--u)); border-radius: calc(9 * var(--u)); background: #2B2B2C; }
.dsn-h { font-family: var(--f-display); font-weight: 700; font-size: calc(5.2 * var(--u)); line-height: 1.16; max-width: calc(80 * var(--u)); text-wrap: balance; }
.dsn-h em { font-style: normal; color: #8E8A86; }
.dsn-stage { flex: 1; min-height: 0; border-radius: calc(1.4 * var(--u)); border: calc(.1 * var(--u)) solid rgba(35, 34, 32, .16); position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) calc(-2 * var(--u)) rgba(35, 34, 32, .3); }
.dsn-old { background: linear-gradient(#4e342e 0 5%, #fff 5% 14%, transparent 14% 62%, #f7f7f7 62%), radial-gradient(circle at 28% 32%, rgba(255, 210, 140, .6) 0 6%, transparent 7%), radial-gradient(circle at 72% 26%, rgba(255, 230, 170, .5) 0 4%, transparent 5%), linear-gradient(135deg, #3b2314, #7a4a24 50%, #2a170c); }
.dsn-new { background: #F6F0E7; background-image: radial-gradient(circle at 70% 55%, #8E4F24 0 12%, #fff 12.5% 17%, #EADFCF 17.5% 27%, transparent 27.5%), linear-gradient(transparent 30%, #24170F 30% 37%, transparent 37%), linear-gradient(transparent 42%, #24170F 42% 49%, transparent 49%); background-size: 100% 100%, 46% 100%, 34% 100%; background-repeat: no-repeat; background-position: 0 0, 12% 0, 12% 0; }
[dir="rtl"] .dsn-new { background-position: 0 0, 88% 0, 88% 0; }
.dsn-knob { position: absolute; top: 0; bottom: 0; left: 50%; width: calc(.25 * var(--u)); margin-left: calc(-.12 * var(--u)); background: #fff; }
.dsn-knob::after { content: ""; position: absolute; top: 50%; left: 50%; width: calc(3.6 * var(--u)); height: calc(3.6 * var(--u)); margin: calc(-1.8 * var(--u)) 0 0 calc(-1.8 * var(--u)); border-radius: 50%; background: #2B2B2C; }
.is-m .dsn { padding: calc(2 * var(--u)) calc(2.2 * var(--u)); gap: calc(2 * var(--u)); }
.is-m .dsn-links, .is-m .dsn-cta { display: none; }
.is-m .dsn-h { font-size: calc(4.2 * var(--u)); }
.is-m .dsn-stage { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.is-m .dsn-knob { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: calc(.25 * var(--u)); margin: calc(-.12 * var(--u)) 0 0; }

@media (prefers-reduced-motion: reduce) {
  .ao * { animation: none !important; }
}