/* catering.css — «Кейтеринг» /catering of the MOS-HOOKAH demo (018, build P6, 28.09).
   Skeleton after timeless /catering almost word for word (refs/timeless/pages/catering.md, the Operator's S04):
   hero with one button → five reasons № 1–5 in a zigzag, a pair of photos each → the price in one line →
   what is included in capitals → formats «1/–4/» → occasions as tabs inside the page → six steps → a live person + form.
   Hero collage of three after R10 (drink · girl with a hookah · plate), each frame with its own slow parallax.
   Every length is calc(N * var(--u)); motion only transform/opacity (base.css header). */

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

/* ---------- 6.B1 hero ---------- */
.ch { position: relative; overflow: hidden;
  background: radial-gradient(60% 80% at 80% 50%, rgba(92, 26, 160, .26) 0%, rgba(11, 11, 12, 0) 64%),
              radial-gradient(45% 55% at 8% 100%, rgba(66, 207, 245, .07) 0%, rgba(11, 11, 12, 0) 70%), var(--bg); }
.ch__in { --ch: min(calc(660 * var(--u)), calc(100vh - var(--hdr) - 72 * var(--u)));
  min-height: max(100vh, calc(700 * var(--u))); display: flex; align-items: flex-end;
  padding-top: calc(var(--hdr) + 24 * var(--u)); padding-bottom: calc(96 * var(--u)); }
.ch__txt { position: relative; z-index: 2; width: calc(700 * var(--u)); }
.ch__h { margin-top: calc(22 * var(--u)); }
.ch__sub { margin-top: calc(26 * var(--u)); max-width: calc(560 * var(--u)); color: var(--text); }
.ch__about { margin-top: calc(18 * var(--u)); max-width: calc(560 * var(--u)); }
.ch__cta { margin-top: calc(40 * var(--u)); display: flex; align-items: center; gap: calc(34 * var(--u)); }
.ch__price { display: flex; flex-direction: column; gap: calc(6 * var(--u)); line-height: 1.15; }
.ch__price-v { font-size: calc(20 * var(--u)); letter-spacing: .04em; white-space: nowrap; }
.ch__price-k { font-size: var(--t-xs); letter-spacing: .24em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; transition: none; }
.ch__price:hover .ch__price-k { color: var(--cyan); }

/* the collage: a cascade column on the right — drink up-left, girl with a hookah in the middle, plate down-right (R10) */
.ch__col { position: absolute; z-index: 1; right: var(--pad); top: calc(var(--hdr) + (100vh - var(--hdr) - var(--ch)) / 2);
  width: calc(var(--ch) * .8487); height: var(--ch); }
.ch__fr { position: absolute; margin: 0; aspect-ratio: 16 / 9; will-change: transform; }
.ch__fr--drink { left: 0; top: 0; height: 31.8%; }
.ch__fr--vibe { right: 0; top: 26.1%; height: 47.7%; z-index: 2; }
.ch__fr--food { right: 0; bottom: 0; height: 31.8%; }
.ch__frin { position: absolute; inset: 0; box-shadow: 0 calc(30 * var(--u)) calc(70 * var(--u)) rgba(0, 0, 0, .55); }
.ch__frin::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13); }

/* ---------- 6.B2 five reasons, zigzag (tl catering B2) ---------- */
.why { position: relative; padding: calc(150 * var(--u)) 0 calc(170 * var(--u)); }
.why__head { text-align: center; }
.why__head .h1 { margin: calc(18 * var(--u)) auto 0; max-width: calc(1060 * var(--u)); }
.why__head .txt { margin: calc(24 * var(--u)) auto 0; }
.why__list { margin-top: calc(120 * var(--u)); display: grid; row-gap: calc(160 * var(--u)); }
.rsn { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
.rsn__pics { position: relative; grid-column: 2 / span 6; grid-row: 1; height: calc(462 * var(--u)); }
.rsn__big, .rsn__small { position: absolute; will-change: transform; }
.rsn__big { left: 0; top: 0; width: calc(470 * var(--u)); aspect-ratio: 4 / 3; }
.rsn__small { left: calc(360 * var(--u)); top: calc(232 * var(--u)); width: calc(230 * var(--u)); aspect-ratio: 1; z-index: 2; }
.rsn__in { position: absolute; inset: 0; }
.rsn__small .rsn__in { box-shadow: 0 calc(24 * var(--u)) calc(50 * var(--u)) rgba(0, 0, 0, .6); }
.rsn__txt { grid-column: 8 / span 4; grid-row: 1; }
.rsn--r .rsn__pics { grid-column: 7 / span 6; height: calc(402 * var(--u)); }
.rsn--r .rsn__big { top: calc(50 * var(--u)); }
.rsn--r .rsn__small { left: calc(420 * var(--u)); top: 0; }
.rsn--r .rsn__txt { grid-column: 2 / span 4; }
.rsn__n { font-size: var(--t-xs); letter-spacing: .2em; color: var(--cyan); font-weight: 600; }
.rsn__h { margin-top: calc(18 * var(--u)); font-size: calc(28 * var(--u)); line-height: 1.16; letter-spacing: .05em; text-transform: uppercase; font-weight: 400; }
.rsn__t { margin-top: calc(24 * var(--u)); max-width: calc(420 * var(--u)); }
.rsn__t p:first-child { color: var(--text); }

/* ---------- 6.B3 price in one line (tl «3 кальяна · 50 000 ₽ · 3 часа») ---------- */
.price { position: relative; padding: calc(150 * var(--u)) 0; background: var(--bg-2); border-top: 1px solid var(--line); }
.price__head { text-align: center; }
.price__head .h1 { margin: calc(18 * var(--u)) auto 0; max-width: calc(1120 * var(--u)); }
.price__head .txt { margin: calc(22 * var(--u)) auto 0; }
.price__row { margin-top: calc(90 * var(--u)); align-items: center; }
.price__calc { grid-column: 1 / span 6; padding-right: calc(30 * var(--u)); }
.price__line { font-size: calc(28 * var(--u)); line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.price__q b { font-weight: 400; }
.price__dot { color: var(--text-3); }
.price__sum { position: relative; margin-top: calc(28 * var(--u)); padding-top: calc(30 * var(--u)); display: flex; align-items: baseline; gap: calc(14 * var(--u)); transform-origin: 0 50%; }
.price__sum::before { content: ""; position: absolute; left: 0; top: 0; width: calc(290 * var(--u)); height: 1px; background: var(--line-2); }
.price__sum .num { display: inline-block; font-size: calc(78 * var(--u)); line-height: .95; white-space: nowrap; }
.price__sum .num.tick { animation: price-tick .55s var(--ease-out); }
@keyframes price-tick { from { opacity: .3; transform: translateY(calc(10 * var(--u))); } to { opacity: 1; transform: none; } }
.price__rub { font-size: calc(36 * var(--u)); color: var(--text-2); }
.price__formula { margin-top: calc(14 * var(--u)); }
.price__ctl { margin-top: calc(34 * var(--u)); display: flex; flex-wrap: wrap; gap: calc(18 * var(--u)) calc(40 * var(--u)); }
.stp { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.stp__k { min-width: calc(92 * var(--u)); font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--text-3); font-weight: 600; }
.stp__b { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; color: var(--text);
  transition: transform .3s var(--ease), opacity .3s; }
.stp__b svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.stp__b:hover { border-color: var(--cyan); color: var(--cyan); }
.stp__b:active { transform: scale(.92); }
.stp__b[disabled] { opacity: .28; pointer-events: none; }
.stp__v { min-width: calc(40 * var(--u)); text-align: center; font-family: var(--f-disp); font-weight: 700; font-size: calc(22 * var(--u)); }
.price__facts { margin-top: calc(38 * var(--u)); display: grid; gap: calc(14 * var(--u)); }
.price__facts li { display: flex; align-items: center; gap: calc(18 * var(--u)); font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase; font-weight: 600; }
.price__facts li::before { content: ""; width: calc(18 * var(--u)); height: 1px; background: var(--cyan); flex: none; }
.price__note { margin-top: calc(26 * var(--u)); max-width: calc(440 * var(--u)); }
.price__calc .btn { margin-top: calc(30 * var(--u)); }
.price__ph { grid-column: 7 / -1; margin-right: calc((min(100vw, var(--wrap)) - 100vw) / 2 - var(--pad)); }
.price__ph .ph { aspect-ratio: 3 / 2; }

/* ---------- 6.B4 what is included (tl catering B4: list in capitals + conditions small) ---------- */
.incl { position: relative; padding: calc(150 * var(--u)) 0; background: var(--bg-2); }
.incl__head { text-align: center; }
.incl__head .h1 { margin-top: calc(18 * var(--u)); }
.incl__head .txt { margin: calc(22 * var(--u)) auto 0; }
.incl__row { margin-top: calc(90 * var(--u)); align-items: start; }
.incl__pics { grid-column: 1 / span 6; }
.incl__ph { aspect-ratio: 16 / 10; }
.incl__cap { margin-top: calc(24 * var(--u)); display: flex; gap: calc(16 * var(--u)); max-width: calc(560 * var(--u)); font-size: var(--t-s); line-height: 1.55; color: var(--text-2); }
.incl__cap::before { content: ""; width: calc(18 * var(--u)); height: 1px; margin-top: .75em; background: var(--cyan); flex: none; }
.incl__list { grid-column: 8 / span 5; }
.incl__acc .acc__q { grid-template-columns: calc(46 * var(--u)) 1fr calc(30 * var(--u)); padding: calc(22 * var(--u)) 0; font-size: max(11px, calc(12.5 * var(--u))); letter-spacing: .2em; text-transform: uppercase; font-weight: 600; }
.incl__acc .acc__q b { font-size: calc(13 * var(--u)); }
.incl__acc .acc__q:hover { color: var(--cyan); }
.incl__acc .acc__a p { padding: 0 0 calc(24 * var(--u)) calc(46 * var(--u) + var(--gap)); font-size: var(--t-s); max-width: none; }
.incl__terms { margin-top: calc(30 * var(--u)); display: grid; gap: calc(8 * var(--u)); font-size: var(--t-s); color: var(--text-3); }
.incl__terms li::before { content: "* "; color: var(--cyan); }

/* ---------- 6.B5 formats «1/–4/» (tl catering B5) ---------- */
.fmt { position: relative; padding: calc(150 * var(--u)) 0; background: var(--bg-2); border-top: 1px solid var(--line); }
.fmt__head { text-align: center; }
.fmt__head .h1 { margin-top: calc(18 * var(--u)); }
.fmt__row { margin-top: calc(90 * var(--u)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
.fmt__i { padding-right: calc(22 * var(--u)); }
.fmt__n { font-size: calc(50 * var(--u)); line-height: 1; }
.fmt__rule { position: relative; display: block; width: calc(130 * var(--u)); height: 1px; margin: calc(44 * var(--u)) 0 calc(30 * var(--u)); background: var(--line-2); }
.fmt__rule::after { content: ""; position: absolute; left: 0; top: 0; width: 45%; height: 1px; background: var(--grad); }
.fmt__name { font-size: calc(20 * var(--u)); }
.fmt__guests, .fmt__tag { margin-top: calc(14 * var(--u)); font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--cyan); }
.fmt__tag { display: inline-block; padding: calc(5 * var(--u)) calc(10 * var(--u)); border: 1px solid rgba(66, 207, 245, .45); }
.fmt__t { margin-top: calc(18 * var(--u)); }
.fmt__who { margin-top: calc(18 * var(--u)); font-size: var(--t-s); line-height: 1.5; color: var(--text-2); }
.fmt__who span { display: block; margin-bottom: calc(4 * var(--u)); font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.fmt__price { margin-top: calc(26 * var(--u)); padding-top: calc(18 * var(--u)); border-top: 1px solid var(--line); display: grid; gap: calc(6 * var(--u)); }
.fmt__from { font-size: calc(22 * var(--u)); letter-spacing: .02em; white-space: nowrap; }
.fmt__from b { font-weight: 700; }

/* ---------- 6.B6 + 7 occasions as tabs inside the page ---------- */
.pov { position: relative; padding: calc(150 * var(--u)) 0; background: var(--bg); border-top: 1px solid var(--line); }
.pov__head { text-align: center; }
.pov__head .h1 { margin: calc(18 * var(--u)) auto 0; max-width: calc(1060 * var(--u)); }
.pov__head .txt { margin: calc(22 * var(--u)) auto 0; }
.pov__tabs { margin-top: calc(64 * var(--u)); display: flex; justify-content: center; gap: calc(48 * var(--u)); border-bottom: 1px solid var(--line); }
.pov__tab { position: relative; display: flex; align-items: baseline; gap: calc(12 * var(--u)); padding: 0 0 calc(22 * var(--u)); font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--text-3); transition: none; }
.pov__tab b { font-family: var(--f-disp); font-weight: 700; font-size: calc(13 * var(--u)); letter-spacing: .08em; transition: none; }
.pov__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.pov__tab:hover { color: var(--text-2); }
.pov__tab[aria-selected="true"] { color: var(--text); }
.pov__tab[aria-selected="true"] b { color: var(--cyan); }
.pov__tab[aria-selected="true"]::after { transform: none; }
.pov__stage { margin-top: calc(64 * var(--u)); align-items: start; }
.pov__pics { position: relative; grid-column: 1 / span 7; aspect-ratio: 3 / 2; }
.pov__pic { position: absolute; inset: 0; opacity: 0; transform: scale(1.035); transition: opacity .9s var(--ease), transform 1.4s var(--ease); }
.pov__pic.is-on { z-index: 1; opacity: 1; transform: none; }
.pov__panels { grid-column: 9 / span 4; display: grid; }
.pov__panel { grid-area: 1 / 1; opacity: 0; transform: translateY(calc(18 * var(--u))); visibility: hidden;
  transition: opacity .5s var(--ease), transform .7s var(--ease); }
.pov__panel.is-on { opacity: 1; transform: none; visibility: visible; transition: opacity .8s var(--ease) .15s, transform 1s var(--ease) .15s; }
.pov__h { margin-top: calc(14 * var(--u)); }
.pov__lead { margin-top: calc(20 * var(--u)); color: var(--text); }
.pov__qa { margin-top: calc(26 * var(--u)); padding-left: calc(18 * var(--u)); border-left: 1px solid var(--cyan); }
.pov__q { margin-bottom: calc(6 * var(--u)); font-size: var(--t-s); font-weight: 600; color: var(--text); }
.pov__facts { margin: calc(26 * var(--u)) 0 0; display: grid; gap: calc(12 * var(--u)); }
.pov__facts div { display: grid; gap: calc(5 * var(--u)); padding-top: calc(12 * var(--u)); border-top: 1px solid var(--line); }
.pov__facts dt { font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.pov__facts dd { margin: 0; font-size: var(--t-s); line-height: 1.5; color: var(--text-2); }
.pov__p { font-size: calc(17 * var(--u)); font-weight: 400; color: var(--text); white-space: nowrap; }
.pov__ref { margin-top: calc(14 * var(--u)); }
.pov__btn { margin-top: calc(26 * var(--u)); }

/* ---------- 6.B7 six steps ---------- */
.flow { position: relative; padding: calc(150 * var(--u)) 0; background: var(--bg-2); border-top: 1px solid var(--line); }
.flow__head { text-align: center; }
.flow__head .h1 { margin-top: calc(18 * var(--u)); }
.flow__grid { margin-top: calc(80 * var(--u)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(64 * var(--u)) var(--gap); }
.flow__i { position: relative; padding-top: calc(28 * var(--u)); border-top: 1px solid var(--line-2); }
.flow__i::before { content: ""; position: absolute; left: 0; top: -1px; width: 38%; height: 1px; background: var(--grad); }
.flow__n { display: block; font-size: calc(34 * var(--u)); line-height: 1; color: var(--cyan); }
.flow__h { margin-top: calc(18 * var(--u)); font-size: var(--t-h4); line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.flow__i .txt { margin-top: calc(12 * var(--u)); max-width: calc(380 * var(--u)); }

/* ---------- 6.B8 a live person + short form (tl catering B6) ---------- */
.cta { position: relative; padding: calc(150 * var(--u)) 0 calc(170 * var(--u)); background: var(--bg); border-top: 1px solid var(--line); }
.cta__head { text-align: center; }
.cta__head .h1 { margin-top: calc(18 * var(--u)); }
.cta__in { margin-top: calc(70 * var(--u)); align-items: stretch; }
.mgr { grid-column: 1 / span 5; display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(48 * var(--u)) calc(40 * var(--u));
  border: 1px solid var(--line); background: radial-gradient(90% 70% at 50% 42%, rgba(153, 33, 255, .15), rgba(0, 0, 0, 0) 72%); }
.mgr__role { letter-spacing: .14em; }
.mgr__t { margin-top: calc(14 * var(--u)); max-width: calc(380 * var(--u)); }
.mgr__qr { display: block; margin-top: calc(30 * var(--u)); width: calc(172 * var(--u)); padding: calc(14 * var(--u)); border: 1px solid var(--line-2); transition: none; }
.mgr__qr:hover { border-color: var(--cyan); }
.mgr__qr img { width: 100%; height: auto; }
.mgr__tg { margin-top: calc(26 * var(--u)); font-size: var(--t-s); letter-spacing: .04em; }
.mgr__tel { margin-top: calc(18 * var(--u)); font-size: var(--t-s); letter-spacing: .08em; line-height: 1.3; }
.mgr__tel small { display: block; font-size: var(--t-xs); letter-spacing: .24em; text-transform: uppercase; color: var(--cyan); }
.rq { grid-column: 7 / span 6; display: grid; align-content: center; }
.rq__body, .rq__done { grid-area: 1 / 1; }
.rq__body { transition: opacity .5s var(--ease), transform .6s var(--ease); }
.rq__k { margin-bottom: calc(14 * var(--u)); font-size: var(--t-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--text-3); }
.rq__chips { margin-bottom: calc(30 * var(--u)); }
.rq__chips .chip { transition: none; }
.rq__chips .chip:hover { border-color: var(--text-2); }
.rq__chips .chip.flash { animation: chip-flash 1.2s var(--ease); }
@keyframes chip-flash { 0%, 100% { opacity: 1; } 30% { opacity: .35; } 60% { opacity: 1; } }
.rq__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(30 * var(--u)); row-gap: calc(6 * var(--u)); }
.rq input[type="date"] { color-scheme: dark; }
.rq input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.rq input[type="number"]::-webkit-inner-spin-button, .rq input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rq input::placeholder { color: var(--text-3); opacity: .8; }
.rq__est { margin: calc(12 * var(--u)) 0 calc(22 * var(--u)); color: var(--text-2); }
.rq__done { align-self: center; opacity: 0; transform: translateY(calc(16 * var(--u))); transition: opacity .8s var(--ease) .2s, transform 1s var(--ease) .2s; }
.rq__thanks { margin-top: calc(16 * var(--u)); }
.rq__done .lead { margin-top: calc(18 * var(--u)); }
.rq.sent .rq__body { opacity: 0; transform: translateY(calc(-12 * var(--u))); pointer-events: none; }
.rq.sent .rq__done { opacity: 1; transform: none; }

/* screenshot mode: every reveal is final, parallax off (JS does not run it) */
html.shot .ch__fr, html.shot .rsn__big, html.shot .rsn__small { transform: none !important; }