/* na-dom.css — «Кальян на дом» /na-dom of the MOS-HOOKAH demo (018, build P6, agent nadom, 28.09).
   Skeleton: tl menu_aromaty (positions with a price and a small object frame) + tl catering (sections in order, the
   navigator «1/N» below, a live person at the end) + tl publication (the author hookah on light «paper» over the page).
   Order: hero · builder (bowl → hookah → tobacco, the total sticky on the right) · kit with arrow tags (R02) · delivery
   with a dark zone scheme · payment rules · flavours (R19) · fruit bowls (R05) · fillers (R06 once) · ready bowls ·
   for the evening (extra bowl, one more day, the master, promotions, price list) · dry-cleaning · the manager + QR.
   Sizes in u (base.css); motion only transform/opacity; everything readable in ?shot=1. */

body[data-page="na-dom"] { background: var(--bg); }

/* ---------- shared ---------- */
.nd-head { text-align: center; }
.nd-head .h1, .nd-head .h2 { margin: calc(18 * var(--u)) auto 0; max-width: calc(1080 * var(--u)); }
.nd-head .txt, .nd-head .lead { margin: calc(22 * var(--u)) auto 0; }
.nd-head--l { text-align: left; }
.nd-head--l .h1, .nd-head--l .h2 { margin-left: 0; }
.nd-head--l .txt, .nd-head--l .lead { margin-left: 0; }
.nd-ok { position: absolute; top: calc(10 * var(--u)); right: calc(10 * var(--u)); z-index: 2; width: calc(26 * var(--u)); height: calc(26 * var(--u));
  border-radius: 50%; background: var(--grad); display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: opacity .3s var(--ease), transform .45s var(--ease-out); pointer-events: none; }
.nd-ok::after { content: ""; width: 42%; height: 22%; border-left: calc(2 * var(--u)) solid #0b0b0c; border-bottom: calc(2 * var(--u)) solid #0b0b0c; transform: translateY(-18%) rotate(-45deg); }
[aria-pressed="true"] > .nd-ok { opacity: 1; transform: none; }
.nd-lv { display: flex; gap: calc(4 * var(--u)); margin-top: calc(9 * var(--u)); }
.nd-lv i { width: calc(18 * var(--u)); height: calc(2 * var(--u)); background: var(--line-2); }
.nd-lv i.on { background: var(--cyan); }

/* ---------- hero (2.B1): the client's hookah at the bar, framed, text bottom-left like the home ---------- */
.nd-hero { position: relative; height: 100vh; min-height: calc(720 * var(--u)); overflow: hidden;
  background: radial-gradient(70% 90% at 78% 40%, #1b1030 0%, rgba(11,11,12,0) 60%), var(--bg); }
.nd-hero__in { height: 100%; }
.nd-hero__pic { position: absolute; right: var(--pad); top: calc(var(--hdr) + 22 * var(--u)); bottom: calc(44 * var(--u)); aspect-ratio: 3 / 4; will-change: transform; }
.nd-hero__ph { position: absolute; inset: 0; margin: 0; }
.nd-hero__pic::before { content: ""; position: absolute; inset: calc(-12 * var(--u)); border: 1px solid var(--line); pointer-events: none; }
.nd-hero__tag { left: var(--x); top: var(--y); transform: translate(calc(-100% + 6 * var(--u)), -50%); z-index: 3; }
.nd-hero__tag .tag__line { width: calc(110 * var(--u)); }
.nd-hero__txt { position: absolute; left: var(--pad); bottom: calc(92 * var(--u)); width: calc(640 * var(--u)); z-index: 2; }
.nd-hero__h { margin-top: calc(22 * var(--u)); }
.nd-hero__sub { margin-top: calc(26 * var(--u)); max-width: calc(540 * var(--u)); }
.nd-hero__sub2 { margin-top: calc(8 * var(--u)); font-size: var(--t-l); color: var(--text); }
.nd-hero__cta { margin-top: calc(38 * var(--u)); display: flex; align-items: center; gap: calc(30 * var(--u)); }
.nd-hero__time { max-width: calc(250 * var(--u)); color: var(--text-2); }
.nd-hero__tag .tag__line { transform: scaleX(0); transform-origin: right; transition: transform .9s var(--ease) 1.1s; }
.nd-hero__tag .tag__box, .nd-hero__tag .tag__dot { opacity: 0; transition: opacity .7s var(--ease) 1.5s; }
.nd-hero__ph.is-in ~ .nd-hero__tag .tag__line { transform: none; }
.nd-hero__ph.is-in ~ .nd-hero__tag .tag__box, .nd-hero__ph.is-in ~ .nd-hero__tag .tag__dot { opacity: 1; }

/* ---------- builder (2.B2-B5) ---------- */
.nd-b { background: var(--bg-2); }
.nd-b__grid { margin-top: calc(70 * var(--u)); align-items: start; }
.nd-b__steps { grid-column: 1 / span 8; display: grid; gap: calc(88 * var(--u)); }
.nd-step__head { display: flex; align-items: baseline; gap: calc(18 * var(--u)); padding-bottom: calc(18 * var(--u)); margin-bottom: calc(28 * var(--u)); border-bottom: 1px solid var(--line); }
.nd-step__n { font-size: calc(34 * var(--u)); line-height: 1; color: var(--cyan); }
.nd-step__aside { margin-left: auto; }
.nd-step__foot { margin-top: calc(26 * var(--u)); display: flex; align-items: center; gap: calc(26 * var(--u)); }
.nd-step__foot .small { max-width: calc(420 * var(--u)); }
.nd-step__warn { margin-top: calc(16 * var(--u)); font-size: var(--t-s); color: var(--cyan); }

/* step 1 — bowls, four prices of the Maps on view, the rest opens (Paradox of Choice) */
.nd-bowls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.nd-bowls + .nd-bowls { margin-top: var(--gap); }
.nd-bw { position: relative; display: block; width: 100%; text-align: left; background: var(--bg); border: 1px solid var(--line); }
.nd-bw::after, .nd-hk::after, .nd-st::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--cyan); opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; }
.nd-bw[aria-pressed="true"]::after, .nd-st[aria-pressed="true"]::after { opacity: 1; }
.nd-bw__ph, .nd-st__ph { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--bg-3); }
.nd-bw__ph img, .nd-st__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.nd-bw:hover .nd-bw__ph img, .nd-st:hover .nd-st__ph img { transform: scale(1.05); }
.nd-miss { position: absolute; inset: 0; display: none; place-items: center; text-align: center; padding: 12%;
  background: radial-gradient(52% 52% at 50% 46%, var(--c, #444) 0%, rgba(0,0,0,0) 72%), #121214; font-size: var(--t-xs); letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.is-missing > .nd-miss { display: grid; }
.is-missing > img { opacity: 0; }
.nd-bw__t { display: block; padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u)); }
.nd-bw__n, .nd-st__n { display: block; font-size: var(--t-s); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.nd-bw__p { display: block; margin-top: calc(6 * var(--u)); font-size: var(--t-s); color: var(--text-3); white-space: nowrap; }
.nd-bw__p b { color: var(--text); font-weight: 600; font-size: var(--t-m); }
.nd-bw[aria-disabled="true"] { opacity: .32; }
.nd-bowls--more .nd-bw { animation: nd-in .7s var(--ease) both; animation-delay: calc(var(--k, 0) * 60ms); }
@keyframes nd-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* step 2 — hookahs as menu positions (tl menu_aromaty): name · price · models · small object frame */
.nd-tabs { margin-left: auto; display: flex; gap: calc(24 * var(--u)); }
.nd-tabs button { position: relative; padding: calc(6 * var(--u)) 0; font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--text-3); }
.nd-tabs button[aria-selected="true"] { color: var(--text); }
.nd-tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.nd-tabs button[aria-selected="true"]::after { transform: none; }
.nd-hks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.nd-hks[hidden] { display: none; }
.nd-hk { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) calc(108 * var(--u)); gap: calc(20 * var(--u)); align-items: start;
  width: 100%; padding: calc(24 * var(--u)) calc(22 * var(--u)); text-align: left; border-bottom: 1px solid var(--line); }
.nd-hk:nth-child(odd) { border-right: 1px solid var(--line); }
.nd-hk::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(66,207,245,.09), rgba(153,33,255,.06) 60%, rgba(0,0,0,0)); opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; }
.nd-hk[aria-pressed="true"]::before, .nd-hk[aria-pressed="true"]::after { opacity: 1; }
.nd-hk--au::before { background: linear-gradient(100deg, rgba(153,33,255,.1), rgba(0,0,0,0) 70%); }
.nd-hk--au:hover::before { opacity: 1; }
.nd-hk__t { position: relative; display: block; min-width: 0; }
.nd-hk__n { display: block; font-size: calc(20 * var(--u)); line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; }
.nd-hk__p { display: block; margin-top: calc(8 * var(--u)); font-size: var(--t-s); letter-spacing: .06em; color: var(--cyan); white-space: nowrap; }
.nd-hk__note { display: block; margin-top: calc(4 * var(--u)); font-size: var(--t-xs); color: var(--text-2); letter-spacing: .04em; }
.nd-hk__ln { display: block; width: calc(60 * var(--u)); height: 1px; margin: calc(14 * var(--u)) 0 calc(12 * var(--u)); background: var(--line-2); }
.nd-hk__m { display: block; font-size: var(--t-xs); line-height: 1.55; letter-spacing: .03em; color: var(--text-3); }
.nd-hk__open { display: inline-block; margin-top: calc(12 * var(--u)); font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--violet); padding-bottom: 2px; }
.nd-hk__ph { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #000; }
.nd-hk__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.nd-hk:hover .nd-hk__ph img { transform: scale(1.06); }
.nd-hk > .nd-ok { right: calc(12 * var(--u)); top: calc(12 * var(--u)); }

/* step 3 — tobacco: strength (R19 series), the master's taste, own mix of up to five, filler */
.nd-str { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.nd-st { position: relative; display: block; width: 100%; text-align: left; background: var(--bg); border: 1px solid var(--line); }
.nd-st__t { display: block; padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u)); }
.nd-st__b { display: block; margin-top: calc(9 * var(--u)); font-size: var(--t-xs); line-height: 1.5; letter-spacing: .03em; color: var(--text-3); }
.nd-master { margin-top: calc(34 * var(--u)); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(30 * var(--u)); align-items: center;
  padding: calc(26 * var(--u)); border: 1px solid var(--line); background: linear-gradient(160deg, rgba(153,33,255,.08), rgba(66,207,245,.03)); }
.nd-master .btn[aria-pressed="false"] .btn__fill { opacity: 0; }
.nd-master .btn[aria-pressed="false"] .btn__ring { opacity: 1; }
.nd-master .btn[aria-pressed="false"] { color: var(--text); }
.nd-quote { margin: 0; }
.nd-quote blockquote { margin: 0; font-size: calc(17 * var(--u)); line-height: 1.45; }
.nd-quote figcaption { margin-top: calc(10 * var(--u)); font-size: var(--t-xs); letter-spacing: .24em; text-transform: uppercase; color: var(--cyan); }
.nd-mix { margin-top: calc(40 * var(--u)); }
.nd-mix .h4, .nd-fill .h4 { margin-bottom: calc(16 * var(--u)); }
.nd-mix__row { margin-top: calc(18 * var(--u)); display: flex; align-items: flex-end; gap: calc(14 * var(--u)); }
.nd-mix__fld { flex: 1; margin: 0; }
.nd-mix__sel { margin-top: calc(16 * var(--u)); min-height: calc(36 * var(--u)); }
.nd-mix__sel .chip { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); border-color: var(--cyan); color: var(--text); }
.nd-mix__sel .chip i { position: relative; width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
.nd-mix__sel .chip i::before, .nd-mix__sel .chip i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transform: rotate(45deg); }
.nd-mix__sel .chip i::after { transform: rotate(-45deg); }
.nd-mix__max { margin-top: calc(10 * var(--u)); }
.nd-mix.full .nd-mix__max { color: var(--cyan); }
.nd-mix.full .nd-mix__sug .chip { opacity: .35; }
.chip:hover { border-color: var(--text-2); }
.chip[aria-pressed="true"]:hover { border-color: var(--cyan); }
.nd-fill { margin-top: calc(40 * var(--u)); }

/* the total — hangs on the right while you choose (cro «CTAs at decision points») */
.nd-sum { grid-column: 9 / span 4; position: sticky; top: calc(var(--hdr) + 20 * var(--u)); }
.nd-sum__in { border: 1px solid var(--line); background: var(--bg); padding: calc(22 * var(--u)); }
.nd-sum__vis { height: min(calc(360 * var(--u)), calc(100vh - 560 * var(--u))); min-height: calc(200 * var(--u)); overflow: hidden;
  background: radial-gradient(60% 70% at 50% 42%, rgba(153,33,255,.2), rgba(0,0,0,0) 70%), #0d0d0f; }
.nd-sum__vis::after { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity .8s;
  background: linear-gradient(90deg, #0d0d0f 4%, rgba(13,13,15,0) 26%, rgba(13,13,15,0) 74%, #0d0d0f 96%); }
/* the chosen bowl in a round inset over the hookah photo (28.09: the 3D builder model is gone, the bowl stays visible) */
.nd-sum__bowl { position: absolute; left: calc(14 * var(--u)); bottom: calc(14 * var(--u)); z-index: 2; width: calc(96 * var(--u));
  aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); background: #0d0d0f; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.nd-sum__bowl img { width: 100%; height: 100%; object-fit: cover; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.nd-sum__bowl img.swap { opacity: 0; transform: scale(1.06); }
.nd-sum__vis .v3d__fb { transition: opacity .8s, transform .6s var(--ease); }
.nd-sum__vis .v3d__fb.swap { opacity: 0; transform: scale(.97); }
.nd-sum__rows { margin: calc(16 * var(--u)) 0 0; }
.nd-sum__rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: calc(14 * var(--u)); padding: calc(8 * var(--u)) 0; border-bottom: 1px solid var(--line); }
.nd-sum__rows dt { flex: none; font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.nd-sum__rows dd { margin: 0; min-width: 0; text-align: right; font-size: var(--t-s); line-height: 1.35; }
.nd-sum__tot { display: flex; justify-content: space-between; align-items: baseline; margin-top: calc(16 * var(--u)); font-size: var(--t-s); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.nd-sum__tot b { font-size: calc(34 * var(--u)); line-height: 1; color: var(--text); letter-spacing: .01em; white-space: nowrap; }
.nd-sum__time { margin: calc(10 * var(--u)) 0 calc(16 * var(--u)); }

/* ---------- kit (2.B6, R02): objects signed with tags and leader lines ---------- */
.nd-kit { background: var(--bg); }
.nd-kit__stage { position: relative; margin-top: calc(70 * var(--u)); aspect-ratio: 1344 / 494; }
.nd-kit__ph { position: absolute; top: 0; bottom: 0; left: 17.262%; width: 65.476%; }
.nd-kit__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nd-kit__lines polyline { fill: none; stroke: rgba(255,255,255,.66); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .9s var(--ease); transition-delay: calc(.55s + var(--i) * .1s); }
.nd-kit__stage.is-in polyline { opacity: 1; }
.nd-kit__dot { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; transform: scale(0); transition: transform .7s var(--ease-out); transition-delay: calc(.35s + var(--i) * .1s); }
.nd-kit__stage.is-in .nd-kit__dot { transform: none; }
.nd-kit__box { position: absolute; left: var(--x); top: var(--y); width: 14.881%; margin: 0; translate: 0 -50%; font-size: calc(13 * var(--u)); line-height: 1.4; letter-spacing: .03em; color: var(--text);
  opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(.75s + var(--i) * .1s); }
.nd-kit__stage.is-in .nd-kit__box { opacity: 1; transform: none; }
.nd-kit__more { margin: calc(40 * var(--u)) auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: calc(10 * var(--u)) calc(34 * var(--u)); font-size: var(--t-s); color: var(--text-2); }
.nd-kit__more li { position: relative; padding-left: calc(18 * var(--u)); }
.nd-kit__more li::before { content: ""; position: absolute; left: 0; top: .72em; width: calc(9 * var(--u)); height: 1px; background: var(--cyan); }

/* ---------- delivery (2.B7): three speeds, the zone as a dark scheme (tl location) ---------- */
.nd-dost { background: var(--bg-2); }
.nd-dost__in { align-items: center; }
.nd-dost__txt { grid-column: 1 / span 6; }
.nd-tar { margin-top: calc(40 * var(--u)); border-top: 1px solid var(--line); }
.nd-tar li { display: grid; grid-template-columns: calc(56 * var(--u)) minmax(0, 1fr); gap: var(--gap); align-items: baseline; padding: calc(20 * var(--u)) 0; border-bottom: 1px solid var(--line); }
.nd-tar .num { font-size: calc(15 * var(--u)); color: var(--cyan); letter-spacing: .1em; }
.nd-tar p { font-size: calc(19 * var(--u)); line-height: 1.35; letter-spacing: .02em; }
.nd-tar small { display: block; margin-top: calc(6 * var(--u)); font-size: var(--t-s); color: var(--text-3); letter-spacing: .02em; }
.nd-dost__zone { margin-top: calc(26 * var(--u)); display: grid; gap: calc(8 * var(--u)); font-size: var(--t-m); color: var(--text-2); }
.nd-dost__zone li { position: relative; padding-left: calc(20 * var(--u)); }
.nd-dost__zone li::before { content: ""; position: absolute; left: 0; top: .78em; width: calc(10 * var(--u)); height: 1px; background: var(--violet); }
.nd-dost__call { margin-top: calc(26 * var(--u)); display: inline-flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(12 * var(--u)) calc(18 * var(--u)); border: 1px solid var(--line-2); font-size: var(--t-s); letter-spacing: .06em; }
.nd-dost__call svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: var(--cyan); }
.nd-map { grid-column: 7 / span 6; position: relative; margin: 0; border: 1px solid var(--line); background: radial-gradient(60% 60% at 50% 52%, rgba(66,207,245,.06), rgba(0,0,0,0) 70%), #0d0d0f; }
.nd-map__svg { width: 100%; height: auto; }
.nd-map__l { font-family: var(--f); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; fill: var(--text-2); }
.nd-map__l--c { fill: var(--cyan); }
.nd-map__l--v { fill: #b98cff; }
.nd-map__l--w { fill: #fff; }
.nd-map__pin { position: absolute; width: calc(54 * var(--u)); translate: -50% -100%; }
.nd-map__pin::before { content: ""; position: absolute; inset: 10% -25% -35%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(153,33,255,.5), rgba(153,33,255,0)); }
.nd-map figcaption { position: absolute; left: calc(20 * var(--u)); bottom: calc(16 * var(--u)); right: calc(20 * var(--u)); color: var(--text-3); }

/* ---------- payment (2.B8): three rules «1/ 2/ 3/» ---------- */
.nd-pay { background: var(--bg-2); border-top: 1px solid var(--line); }
.nd-pay__cols { margin-top: calc(70 * var(--u)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(40 * var(--u)); }
.nd-pay__n { font-size: calc(44 * var(--u)); line-height: 1; color: var(--text); }
.nd-pay__c .h4 { margin-top: calc(22 * var(--u)); padding-top: calc(18 * var(--u)); border-top: 1px solid var(--line-2); color: var(--cyan); font-size: var(--t-xs); letter-spacing: .3em; }
.nd-pay__big { margin-top: calc(16 * var(--u)); font-size: calc(21 * var(--u)); line-height: 1.35; letter-spacing: .01em; }
.nd-pay__rest { display: block; margin-top: calc(10 * var(--u)); font-size: var(--t-s); line-height: 1.55; color: var(--text-2); letter-spacing: 0; }
.nd-pay__t { margin-top: calc(14 * var(--u)); font-size: var(--t-s); line-height: 1.6; color: var(--text-2); }
.nd-pay__t li + li { margin-top: calc(6 * var(--u)); }

/* ---------- flavours (4.B1-B2, R19): one series, four strengths ---------- */
.nd-vk { background: var(--bg); }
.nd-vk__h { max-width: calc(1000 * var(--u)); }
.nd-vk__cols { margin-top: calc(60 * var(--u)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.nd-vk__ph { aspect-ratio: 1; }
.nd-vk__n { margin-top: calc(22 * var(--u)); }
.nd-vk__b { margin-top: calc(16 * var(--u)); padding-top: calc(14 * var(--u)); border-top: 1px solid var(--line); display: grid; gap: calc(6 * var(--u)); font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); }
.nd-vk__foot { margin-top: calc(56 * var(--u)); display: flex; align-items: center; justify-content: space-between; gap: var(--gap); padding-top: calc(30 * var(--u)); border-top: 1px solid var(--line); }
.nd-vk__foot .lead { max-width: calc(620 * var(--u)); color: var(--text); }

/* ---------- fruit bowls (4.B3, R05): cut fruit, the price on each, a 3D bowl beside ---------- */
.nd-ch { background: var(--bg); border-top: 1px solid var(--line); }
.nd-ch__head .h1 { max-width: calc(1100 * var(--u)); }
.nd-ch__list { margin-top: calc(12 * var(--u)); max-width: calc(760 * var(--u)); }
.nd-ch__in { margin-top: calc(60 * var(--u)); align-items: start; }
.nd-ch__side { grid-column: 1 / span 5; position: sticky; top: calc(var(--hdr) + 20 * var(--u)); }
.nd-ch__vis { aspect-ratio: 1; max-height: calc(100vh - 220 * var(--u)); margin: 0 auto; overflow: hidden; background: #0d0d0f; border: 1px solid var(--line); }
.nd-ch__vis .v3d__fb { object-fit: cover; transition: opacity .6s var(--ease); }
.nd-ch__vis .v3d__fb.swap { opacity: 0; }
.nd-ch__cap { margin-top: calc(18 * var(--u)); display: flex; align-items: baseline; gap: calc(14 * var(--u)); font-size: var(--t-s); letter-spacing: .14em; text-transform: uppercase; }
.nd-ch__cap b { font-weight: 600; font-size: calc(20 * var(--u)); letter-spacing: .02em; text-transform: none; white-space: nowrap; }
.nd-ch__cap .small { text-transform: none; letter-spacing: .02em; }
.nd-ch__grid { grid-column: 6 / span 7; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(34 * var(--u)) var(--gap); }
.nd-cb { position: relative; display: block; width: 100%; text-align: left; }
.nd-cb__ph { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--bg-3); }
.nd-cb__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.nd-cb:hover .nd-cb__ph img, .nd-cb:focus-visible .nd-cb__ph img { transform: scale(1.05); }
.nd-cb__n { display: block; margin-top: calc(14 * var(--u)); font-size: var(--t-s); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.nd-cb__p { display: flex; align-items: baseline; gap: calc(8 * var(--u)); margin-top: calc(6 * var(--u)); font-size: var(--t-s); color: var(--text-3); }
.nd-cb__p b { color: var(--text); font-weight: 600; font-size: var(--t-m); white-space: nowrap; }
.nd-cb__go { position: absolute; right: calc(12 * var(--u)); bottom: calc(12 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)); background: rgba(11,11,12,.72); border: 1px solid var(--line-2);
  font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.nd-cb:hover .nd-cb__go, .nd-cb:focus-visible .nd-cb__go { opacity: 1; transform: none; }
.nd-cb.is-sel .nd-cb__ph::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--cyan); pointer-events: none; }

/* ---------- fillers (4.B4, R06 once) ---------- */
.nd-fi { background: var(--bg-2); }
.nd-fi__in { align-items: center; }
.nd-fi__pic { grid-column: 1 / span 5; position: relative; }
.nd-fi__ph { aspect-ratio: 3 / 4; }
.nd-fi__tag { left: var(--x); top: var(--y); transform: translate(calc(-6 * var(--u)), -50%); z-index: 2; }
.nd-fi__tag .tag__line { width: calc(96 * var(--u)); transform: scaleX(0); transition: transform .9s var(--ease) .8s; }
.nd-fi__tag .tag__box { opacity: 0; transform: translateX(-10px); transition: opacity .7s var(--ease) 1.2s, transform .7s var(--ease) 1.2s; }
.nd-fi__pic.is-in .nd-fi__tag .tag__line { transform: none; }
.nd-fi__pic.is-in .nd-fi__tag .tag__box { opacity: 1; transform: none; }
.nd-fi__txt { grid-column: 7 / span 6; }
.nd-fi__txt .h1 { margin-top: calc(18 * var(--u)); }
.nd-fi__list { margin: calc(40 * var(--u)) 0 calc(40 * var(--u)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(40 * var(--u)); border-top: 1px solid var(--line); }
.nd-fi__list li { display: flex; justify-content: space-between; align-items: baseline; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)) 0; border-bottom: 1px solid var(--line); }
.nd-fi__n { font-size: var(--t-s); letter-spacing: .14em; text-transform: uppercase; }
.nd-fi__p { font-size: var(--t-s); color: var(--cyan); white-space: nowrap; }
.nd-fi__p.muted { color: var(--text-3); }

/* ---------- ready bowls (4.B6) ---------- */
.nd-rd { background: var(--bg-2); border-top: 1px solid var(--line); }
.nd-rd__in { align-items: center; }
.nd-rd__ph { grid-column: 1 / span 7; aspect-ratio: 16 / 9; }
.nd-rd__txt { grid-column: 9 / span 4; }
.nd-rd__txt .h1 { margin-top: calc(18 * var(--u)); font-size: calc(38 * var(--u)); }
.nd-rd__txt .lead { margin-top: calc(24 * var(--u)); color: var(--text); }
.nd-rd__txt .txt { margin-top: calc(14 * var(--u)); }
.nd-rd__price { margin-top: calc(28 * var(--u)); display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap); padding: calc(16 * var(--u)) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.nd-rd__price span { font-size: var(--t-s); letter-spacing: .14em; text-transform: uppercase; }
.nd-rd__price b { font-size: calc(30 * var(--u)); line-height: 1; white-space: nowrap; }
.nd-rd__cta { margin-top: calc(28 * var(--u)); display: flex; flex-wrap: wrap; align-items: center; gap: calc(16 * var(--u)) calc(26 * var(--u)); }
.nd-rd__cta .lnk { color: var(--text-2); }

/* ---------- for the evening (2.B9) ---------- */
.nd-up { background: var(--bg); }
.nd-up__cols { margin-top: calc(70 * var(--u)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.nd-up__c { display: flex; flex-direction: column; align-items: flex-start; padding: calc(32 * var(--u)); border: 1px solid var(--line); background: linear-gradient(160deg, rgba(153,33,255,.06), rgba(66,207,245,.02)); }
.nd-up__n { font-size: calc(40 * var(--u)); line-height: 1; color: var(--cyan); }
.nd-up__h { margin-top: calc(24 * var(--u)); font-size: calc(19 * var(--u)); line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; font-weight: 400; }
.nd-up__t { margin-top: calc(14 * var(--u)); font-size: var(--t-s); line-height: 1.6; color: var(--text-2); }
.nd-up__t--w { color: var(--text); }
.nd-up__c .btn, .nd-up__c .lnk { margin-top: auto; }
.nd-up__c .nd-up__t:last-of-type { margin-bottom: calc(24 * var(--u)); }
.nd-up__c .lnk { color: var(--text-2); }
.nd-promo { margin-top: calc(110 * var(--u)); padding-top: calc(60 * var(--u)); border-top: 1px solid var(--line); align-items: start; }
.nd-promo__head { grid-column: 1 / span 4; }
.nd-promo__head .h2 { margin-top: calc(16 * var(--u)); }
.nd-promo__head .txt { margin-top: calc(18 * var(--u)); }
.nd-promo__cards { grid-column: 5 / span 8; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.nd-promo__c { padding: calc(26 * var(--u)) calc(24 * var(--u)); border-top: 1px solid var(--line-2); position: relative; }
.nd-promo__c::before { content: ""; position: absolute; left: 0; top: -1px; width: 38%; height: 1px; background: var(--grad); }
.nd-promo__big { display: block; font-size: calc(58 * var(--u)); line-height: 1; }
.nd-promo__c p { margin-top: calc(18 * var(--u)); font-size: var(--t-s); line-height: 1.6; color: var(--text-2); }
.nd-price { margin-top: calc(110 * var(--u)); }
.nd-price__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--gap); }
.nd-price__head .txt { max-width: calc(420 * var(--u)); text-align: right; }
.nd-price__list { margin-top: calc(40 * var(--u)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(60 * var(--u)); border-top: 1px solid var(--line); }
.nd-price__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--gap); align-items: baseline; padding: calc(16 * var(--u)) 0; border-bottom: 1px solid var(--line); }
.nd-price__list span { font-size: var(--t-s); letter-spacing: .12em; text-transform: uppercase; }
.nd-price__list b { font-weight: 600; font-size: calc(18 * var(--u)); white-space: nowrap; }
.nd-price__list small { grid-column: 1 / -1; margin-top: calc(4 * var(--u)); font-size: var(--t-xs); color: var(--text-3); letter-spacing: .04em; }
.nd-price__hk { margin-top: calc(22 * var(--u)); color: var(--text-2); }

/* ---------- dry-cleaning (10.B6) ---------- */
.nd-hc { background: var(--bg-2); }
.nd-hc__in { align-items: center; }
.nd-hc__ph { grid-column: 1 / span 6; aspect-ratio: 4 / 3; }
.nd-hc__txt { grid-column: 8 / span 5; }
.nd-hc__txt .h1 { margin-top: calc(18 * var(--u)); }
.nd-hc__price { margin-top: calc(30 * var(--u)); font-size: calc(26 * var(--u)); line-height: 1.25; letter-spacing: .02em; }
.nd-hc__txt .txt { margin-top: calc(12 * var(--u)); }
.nd-hc__gift { margin-top: calc(22 * var(--u)); display: inline-flex; align-items: baseline; gap: calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)); border: 1px solid var(--line-2); font-size: var(--t-s); }
.nd-hc__gift span { font-size: var(--t-xs); letter-spacing: .24em; text-transform: uppercase; color: var(--cyan); font-weight: 600; }
.nd-hc__rep { margin: calc(18 * var(--u)) 0 calc(30 * var(--u)); }

/* ---------- a live person (2.B10, tl catering B6) ---------- */
.nd-pod { background: radial-gradient(50% 60% at 50% 55%, rgba(153,33,255,.14), rgba(0,0,0,0) 70%), var(--bg); border-top: 1px solid var(--line); }
.nd-pod__in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.nd-pod__in .h1 { margin-top: calc(18 * var(--u)); max-width: calc(900 * var(--u)); }
.nd-pod__lead { margin-top: calc(22 * var(--u)); max-width: calc(560 * var(--u)); }
.nd-pod__who { margin-top: calc(44 * var(--u)); font-size: var(--t-h3); letter-spacing: .08em; text-transform: uppercase; }
.nd-pod__role { margin-top: calc(8 * var(--u)); font-size: var(--t-xs); letter-spacing: .3em; text-transform: uppercase; color: var(--text-3); }
.nd-pod__qr { display: block; margin-top: calc(30 * var(--u)); padding: calc(16 * var(--u)); border: 1px solid var(--line-2); }
.nd-pod__qr img { width: calc(150 * var(--u)); height: calc(150 * var(--u)); }
.nd-pod__tg { margin-top: calc(18 * var(--u)); color: var(--text-3); letter-spacing: .12em; text-transform: uppercase; }
.nd-pod__tg .lnk { color: var(--text); text-transform: none; letter-spacing: .04em; }
.nd-pod__btns { margin-top: calc(30 * var(--u)); display: flex; gap: calc(12 * var(--u)); }
.nd-pod__code { margin-top: calc(18 * var(--u)); font-size: var(--t-s); color: var(--text-2); letter-spacing: .04em; }

/* ---------- the author hookah card: light paper over the page (карта 3, tl publication) ---------- */
.ap { position: fixed; inset: 0; z-index: 76; pointer-events: none; }
.ap__shade { position: absolute; inset: 0; background: rgba(0,0,0,.62); opacity: 0; transition: opacity .6s var(--ease); }
.ap__paper { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, calc(1120 * var(--u))); display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink); transform: translateX(102%); transition: transform .8s var(--ease); box-shadow: -30px 0 80px rgba(0,0,0,.45); }
.ap-open .ap { pointer-events: auto; }
.ap-open .ap__shade { opacity: 1; }
.ap-open .ap__paper { transform: none; }
.ap__top { flex: none; padding: calc(14 * var(--u)) calc(40 * var(--u)) 0; }
.ap__x { position: relative; display: block; margin: 0 auto; width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
.ap__x::before, .ap__x::after { content: ""; position: absolute; left: 22%; right: 22%; top: 50%; height: 1px; background: var(--ink); transform: rotate(45deg); transition: transform .6s var(--ease); }
.ap__x::after { transform: rotate(-45deg); }
.ap__x:hover::before { transform: rotate(135deg); }
.ap__x:hover::after { transform: rotate(45deg); }
.ap__bar { margin-top: calc(10 * var(--u)); padding: calc(10 * var(--u)); border: 1px solid rgba(20,20,20,.16); text-align: center; font-size: var(--t-xs); letter-spacing: .3em; text-transform: uppercase; font-weight: 600; }
.ap__scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: calc(36 * var(--u)) calc(40 * var(--u)) calc(48 * var(--u)); scrollbar-width: thin; }
.ap__body { display: grid; grid-template-columns: 5fr 6fr; gap: calc(48 * var(--u)); align-items: start; }
.ap__ph { position: sticky; top: 0; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: #1b1b1d; }
.ap__ph img { width: 100%; height: 100%; object-fit: cover; transition: opacity .5s var(--ease); }
.ap__ph img.swap { opacity: 0; }
.ap__over { font-size: var(--t-xs); letter-spacing: .3em; text-transform: uppercase; font-weight: 600; color: rgba(20,20,20,.55); }
.ap__name { margin-top: calc(14 * var(--u)); font-size: var(--t-h1); line-height: 1.06; letter-spacing: .03em; text-transform: uppercase; font-weight: 400; }
.ap__price { margin-top: calc(14 * var(--u)); font-size: calc(40 * var(--u)); line-height: 1; color: var(--violet); }
.ap__lead { margin-top: calc(20 * var(--u)); font-size: var(--t-l); line-height: 1.5; }
.ap__h { margin: calc(28 * var(--u)) 0 calc(10 * var(--u)); padding-top: calc(16 * var(--u)); border-top: 1px solid rgba(20,20,20,.14); font-size: var(--t-xs); letter-spacing: .3em; text-transform: uppercase; font-weight: 600; }
.ap__it p:not([class]) { font-size: var(--t-m); line-height: 1.6; color: rgba(20,20,20,.82); }
.ap__it p:not([class]) + p:not([class]) { margin-top: .9em; }
.ap__it:not([hidden]) { animation: nd-in .6s var(--ease) both; }
.ap__cta { margin-top: calc(32 * var(--u)); }
.ap .btn:hover, .ap .btn:focus-visible { color: var(--ink); }
.ap__more .ap__h { margin-top: calc(34 * var(--u)); }
.ap__nbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(14 * var(--u)); }
.ap__nb { display: grid; grid-template-columns: calc(64 * var(--u)) minmax(0, 1fr); gap: calc(14 * var(--u)); align-items: center; padding: calc(10 * var(--u)); text-align: left; border: 1px solid rgba(20,20,20,.14); }
.ap__nb:hover { border-color: rgba(20,20,20,.4); }
.ap__nb img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.ap__nb b { display: block; font-size: var(--t-s); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.ap__nb small { display: block; margin-top: calc(4 * var(--u)); font-size: var(--t-s); color: rgba(20,20,20,.62); }
.ap :focus-visible { outline-color: var(--violet); }

@media (prefers-reduced-motion: reduce) {
  .nd-kit__lines polyline, .nd-kit__box { opacity: 1; transform: none; }
  .nd-kit__dot { transform: none; }
}