/* COLD. — демо студии MERIDIAN: колд брю в банках, Новосибирск.
   Механики по altitudebev.com, подача своя: страница «остывает» при прокрутке от ночного кофейного к ледяному. */
@import url(fonts/fonts.css);

:root {
  --ink: #F4F1EC;
  --ink-2: rgba(244, 241, 236, .66);
  --dark: #14110F;
  --glass: rgba(255, 255, 255, .1);
  --glass-2: rgba(255, 255, 255, .16);
  --edge: rgba(255, 255, 255, .16);
  --blur: blur(22px) saturate(1.3);
  --r: 20px;
  --serif: 'CSerif', 'Times New Roman', serif;
  --mono: 'CMono', ui-monospace, Menlo, monospace;
  --mark: 'CMark', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --ease: cubic-bezier(.22, .8, .16, 1);
  /* вкусы */
  --ton: #E8661E; --ton-2: #F6A04A;
  --blk: #2B6CB4; --blk-2: #9CC4E4;
  --oat: #CFA774; --oat-2: #EAD6B4;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #100B09; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font: 14px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
  /* остывание: от ночного эспрессо через сланец к инею */
  background: linear-gradient(180deg, #100B09 0%, #1B1512 18%, #252326 34%, #2E3B4C 52%, #587892 70%, #A9C0D0 86%, #E2EAEF 97%);
}
html[lang=ru] .en, html[lang=en] .ru { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.mono { font: 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.serif { font-family: var(--serif); font-stretch: 62.5%; font-weight: 300; letter-spacing: -.005em; }

/* ── стекло и пилюли ───────────────────────── */
.glass {
  background: var(--glass); border: 1px solid var(--edge); border-radius: var(--r);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0 16px;
  border-radius: 999px; font: 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  transition: background .3s, color .3s, transform .3s var(--ease);
}
.pill.white { background: #fff; color: #111; }
.pill.white:hover { background: #E9F1F6; }
.pill.ghost { border: 1px solid var(--edge); }
.pill.ghost:hover { background: var(--glass-2); }
.pill.dim { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); }

/* ── шапка ───────────────────────── */
.top {
  position: fixed; inset: 10px 10px auto; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.logo {
  justify-self: start; height: 38px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center;
  background: rgba(20, 17, 15, .38); border: 1px solid var(--edge); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  font: italic 900 19px/1 var(--mark); letter-spacing: -.045em;
}
.menu {
  display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(20, 17, 15, .38); border: 1px solid var(--edge); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.menu .pill { height: 30px; padding: 0 14px; }
.menu .pill:hover, .menu .pill[aria-current] { background: rgba(255, 255, 255, .14); }
.top .right { justify-self: end; display: flex; gap: 6px; }
.round {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(20, 17, 15, .38); border: 1px solid var(--edge); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  font: 11px/1 var(--mono); letter-spacing: .04em;
}
.round svg { width: 18px; height: 18px; }
.round:hover { background: rgba(255, 255, 255, .16); }
@media (max-width: 760px) {
  .top { grid-template-columns: auto 1fr auto; gap: 6px; }
  .menu .opt { display: none; }
  .menu { justify-self: center; }
  .menu .pill { padding: 0 10px; }
  .top .right .round + .round { display: none; }
}

/* ── загрузчик: знак-градус на чёрном ─────────── */
.boot {
  position: fixed; inset: 0; z-index: 100; background: #000; display: grid; place-items: center;
  transition: opacity .7s var(--ease), visibility .7s;
}
.boot svg { width: 64px; height: 64px; color: #8C8A88; animation: bootin 1s var(--ease) both; }
@keyframes bootin { from { opacity: 0; transform: scale(.86); filter: blur(8px); } }
html.ready .boot { opacity: 0; visibility: hidden; }

/* ── проявление из размытия ─────────── */
.blurin { opacity: 0; filter: blur(14px); transform: translateY(14px); transition: opacity 1s var(--ease), filter 1.1s var(--ease), transform 1.1s var(--ease); }
.blurin.in { opacity: 1; filter: none; transform: none; }
.blurin.d1 { transition-delay: .12s; } .blurin.d2 { transition-delay: .24s; } .blurin.d3 { transition-delay: .36s; }

/* ── первый экран: три высокие карточки. По умолчанию одинаковые; на какой курсор задержался, та раскрывается,
   соседние сужаются в полоски (как у референса, без самопрокрутки) ───────────────── */
.hero { position: relative; height: 100svh; min-height: 560px; padding: 8px; }
.rib { display: flex; gap: 8px; height: 100%; }
.slide {
  position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--r); overflow: hidden; background: #222; cursor: pointer;
  transition: flex-grow 1.1s var(--ease);
}
.rib.has .slide.on { flex-grow: 4.1; cursor: default; }
.slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s var(--ease); }
.slide.on > img, .slide:hover > img { transform: none; }
.slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18), transparent 22%, transparent 48%, rgba(0,0,0,.28) 70%, rgba(0,0,0,.58)); pointer-events: none; }
.slide .nm { position: absolute; left: 18px; bottom: 18px; z-index: 2; transition: opacity .5s, filter .6s; }
.rib.has .slide .nm { opacity: 0; filter: blur(8px); }
.slide .say {
  position: absolute; left: clamp(20px, 3vw, 44px); bottom: clamp(24px, 4vw, 48px); z-index: 2; width: max-content; max-width: min(720px, 60vw);
  opacity: 0; filter: blur(12px); transform: translateY(10px); transition: opacity .45s, filter .5s, transform .6s var(--ease); pointer-events: none;
}
.rib.has .slide.on .say { opacity: 1; filter: none; transform: none; transition: opacity .8s .5s, filter .9s .5s, transform 1s .5s var(--ease); pointer-events: auto; }
.say h2 { margin: 10px 0 22px; font: 300 clamp(34px, 3.3vw, 54px)/.98 var(--serif); font-stretch: 62.5%; letter-spacing: -.01em; }
.slide .mini {
  position: absolute; right: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 26px); z-index: 2; width: clamp(130px, 12vw, 170px);
  padding: 12px 12px 14px; text-align: center; opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .6s var(--ease); pointer-events: none;
}
.rib.has .slide.on .mini { opacity: 1; transform: none; transition: opacity .7s .65s, transform .9s .65s var(--ease); pointer-events: auto; }
.mini .can { height: clamp(90px, 9vw, 130px); margin: 0 auto 10px; }
.mini b { display: block; font: 600 11px/1.15 var(--sans); letter-spacing: .02em; text-transform: uppercase; }
.mini small { display: block; margin-top: 3px; font: 300 12px/1.2 var(--serif); font-stretch: 62.5%; opacity: .8; }
.dots { position: absolute; left: 50%; bottom: 18px; z-index: 3; transform: translateX(-50%); display: flex; gap: 6px; }
.dots button { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); transition: background .3s, width .3s; }
.dots button[aria-current] { background: #fff; width: 18px; border-radius: 3px; }
@media (max-width: 760px) {
  .rib.has .slide.on { flex-grow: 7; }
  .slide .say { width: auto; right: 18px; left: 18px; bottom: 68px; max-width: none; }
  .say h2 { font-size: 34px; }
  .slide .mini { display: none; }
  .slide .nm { writing-mode: vertical-rl; transform: rotate(180deg); left: 50%; margin-left: -6px; }
}

/* ── вырезанная банка (до 3D-рендера: кадр p-* кругом) ─────── */
.can { aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; }
.can img { width: 100%; height: 100%; object-fit: cover; }
/* вырезанная банка с этикеткой: без плашки, размер по высоте, мягкая тень */
.can.cut { aspect-ratio: auto; border-radius: 0; overflow: visible; display: flex; justify-content: center; }
.can.cut img { width: auto; height: 100%; object-fit: contain; filter: drop-shadow(0 16px 22px rgba(0,0,0,.32)); }
.fcard .face .can.cut { width: auto; height: 260px; }
.mini .can.cut { height: clamp(110px, 10vw, 150px); }
.flv .can.cut { height: 66px; }
.cart li .can.cut { width: 56px; height: 76px; }
.dock .can.cut { width: auto; height: 120px; }

/* ── вступление: огромный размытый знак, текст проявляется ───── */
.intro { position: relative; height: 210vh; }
.intro .stick { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.ghost {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none;
  font: italic 900 clamp(120px, 22vw, 360px)/1 var(--mark); letter-spacing: -.055em; color: rgba(255, 255, 255, .18);
  filter: blur(var(--gb, 6px)); opacity: var(--go, 1);
}
.intro .txt { position: relative; z-index: 2; max-width: 760px; padding: 0 24px; text-align: center; opacity: var(--to, 0); filter: blur(var(--tb, 16px)); }
.intro .txt p:not(.mono) { margin: 14px 0 26px; font: 300 clamp(26px, 3vw, 40px)/1.08 var(--serif); font-stretch: 62.5%; }

/* ── вкусы: три стеклянные карточки ─────── */
.flavors { padding: 10vh 10px 14vh; text-align: center; }
.flavors > .mono { opacity: .7; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 26px; text-align: center; }
.fcard { position: relative; display: grid; min-height: 500px; padding: 10px; overflow: hidden; isolation: isolate; transition: transform .7s var(--ease); }
.fcard > .face, .fcard > .back { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; transition: opacity .6s var(--ease), filter .7s var(--ease), transform .8s var(--ease); }
.fcard::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255,255,255,.04) 10%, var(--fc)); opacity: 0; transition: opacity .7s var(--ease); }
.fcard .face { justify-content: center; padding-bottom: 40px; }
.fcard .face .can { width: 40%; margin-bottom: 22px; }
.fcard b { font: 600 14px/1.15 var(--sans); letter-spacing: .02em; text-transform: uppercase; }
.fcard small { margin-top: 5px; font: 300 15px/1.2 var(--serif); font-stretch: 62.5%; opacity: .85; }
.fcard .back { position: relative; margin-bottom: 52px; padding: 16px 14px 18px; border: 1px solid rgba(255,255,255,.38); border-radius: 14px; opacity: 0; filter: blur(8px); }
.fcard .back svg { width: 26px; height: 26px; color: rgba(255,255,255,.75); }
.fcard .back .deg { margin-top: 8px; opacity: .85; }
.fcard .back .ab { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -62%); z-index: -1; font: italic 900 clamp(110px, 10vw, 170px)/1 var(--mark); letter-spacing: -.06em; color: rgba(255,255,255,.16); white-space: nowrap; }
.fcard .back b { margin-top: auto; }
.fcard .back small { margin-bottom: auto; }
.fcard .tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.tag { display: inline-flex; height: 22px; align-items: center; padding: 0 9px; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; font: 9.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.fcard .buy { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 40px; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .7s var(--ease); }
.fcard:is(:hover, .hov), .fcard:focus-visible { transform: scale(1.015); }
.fcard:is(:hover, .hov)::before, .fcard:focus-visible::before { opacity: .95; }
.fcard:is(:hover, .hov) .face, .fcard:focus-visible .face { opacity: 0; filter: blur(10px); transform: translateY(-14px); }
.fcard:is(:hover, .hov) .back, .fcard:focus-visible .back { opacity: 1; filter: none; transition-delay: .12s; }
.fcard:is(:hover, .hov) .buy, .fcard:focus-visible .buy { opacity: 1; transform: none; transition-delay: .18s; }
.fcard[data-f=ton] { --fc: var(--ton); } .fcard[data-f=blk] { --fc: var(--blk); } .fcard[data-f=oat] { --fc: #B98A55; }
@media (hover: none) { .fcard .face { display: none; } .fcard .back, .fcard .buy { opacity: 1; filter: none; transform: none; } .fcard::before { opacity: .8; } }
@media (max-width: 900px) { .cards { grid-template-columns: minmax(0, 1fr); } .fcard { min-height: 460px; } }

/* ── подписка на фото людей ─────── */
.sub { position: relative; margin: 0 10px; height: min(92vh, 860px); border-radius: var(--r); overflow: hidden; }
.sub > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sub .glass { position: absolute; left: clamp(16px, 8vw, 140px); top: 50%; transform: translateY(-50%); width: min(440px, calc(100% - 32px)); padding: 30px 30px 26px; text-align: center; background: rgba(120, 130, 140, .28); }
.sub .glass p:not(.mono) { margin: 12px 0 22px; font: 300 clamp(26px, 2.6vw, 36px)/1.05 var(--serif); font-stretch: 62.5%; }

/* ── подвал: «стало холоднее.» ─────── */
.foot { position: relative; margin-top: 18vh; padding: 0 10px; color: #3B4652; overflow: hidden; }
.foot .row { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.foot .row > div { display: flex; gap: 6px; flex-wrap: wrap; }
.foot .pill { background: rgba(255,255,255,.5); color: #46525E; }
.foot .pill:hover { background: #fff; color: #111; }
.foot .big { margin: 10px 0 0; font: italic 900 12.4vw/.8 var(--mark); letter-spacing: -.06em; color: rgba(255,255,255,.55); white-space: nowrap; user-select: none; }
html[lang=en] .foot .big { font-size: 17.4vw; }
.foot .fine { display: flex; justify-content: space-between; gap: 12px; padding: 14px 4px 10px; opacity: .7; }
.foot .note { margin: 0 auto; padding: 4px 4px 22px; max-width: 760px; text-align: center; font: 11.5px/1.55 var(--sans); opacity: .7; }
.foot .note a { text-decoration: underline; }

/* ── корзина: размытый слой поверх страницы ─────── */
.cart {
  position: fixed; inset: 0; z-index: 80; display: grid; grid-template-rows: auto 1fr; padding: 10px;
  background: rgba(14, 18, 26, .5); -webkit-backdrop-filter: blur(30px) saturate(1.2); backdrop-filter: blur(30px) saturate(1.2);
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s;
}
.cart.open { opacity: 1; visibility: visible; }
.cart .x { justify-self: center; }
.cart .body { align-self: center; justify-self: center; width: min(520px, 100%); text-align: center; }
.cart .empty .pill { margin-top: 22px; }
.cart ul { list-style: none; margin: 0 0 18px; padding: 0; text-align: left; }
.cart li { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 10px; margin-bottom: 6px; }
.cart li .can { width: 56px; border-radius: 10px; }
.cart li b { display: block; font: 300 22px/1.05 var(--serif); font-stretch: 62.5%; }
.cart li .q { display: flex; align-items: center; gap: 4px; }
.cart li .q button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--edge); }
.cart .sum { display: flex; justify-content: space-between; padding: 6px 4px 16px; }
.cart .go { width: 100%; height: 44px; }
.cart .fine { margin-top: 12px; opacity: .6; text-transform: none; letter-spacing: .02em; }

/* ── страница вкуса ─────── */
.pdp { display: grid; grid-template-columns: minmax(0, 27fr) minmax(0, 46fr) minmax(0, 27fr); gap: 8px; height: 100svh; min-height: 640px; padding: 8px; }
.pdp .side { position: relative; border-radius: var(--r); overflow: hidden; }
.pdp .side > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pdp .panels { position: absolute; inset: auto 10px 10px; display: grid; gap: 8px; z-index: 2; }
.pdp .panels .glass { padding: 16px; background: rgba(60, 64, 74, .42); }
.pdp h1 { margin: 0 0 8px; font: 300 34px/1 var(--serif); font-stretch: 62.5%; }
.pdp .desc { margin: 0 0 12px; font-size: 12.5px; line-height: 1.4; opacity: .88; }
.opt-h { margin: 0 0 8px; opacity: .8; }
.flv { display: grid; grid-template-columns: repeat(3, 52px); gap: 6px; margin-bottom: 14px; }
.flv a { border-radius: 10px; border: 1px solid transparent; padding: 3px; transition: border-color .3s; }
.flv a[aria-current] { border-color: rgba(255,255,255,.8); }
.flv .can { border-radius: 7px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; }
.seg button { position: relative; height: 32px; border-radius: 999px; border: 1px solid var(--edge); font: 10.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; opacity: .62; transition: opacity .3s, border-color .3s, background .3s; }
.seg button[aria-pressed=true] { opacity: 1; border-color: rgba(255,255,255,.85); }
.seg .off { position: absolute; top: -9px; right: 10px; padding: 2px 5px; border-radius: 4px; background: #D4322C; font-size: 8.5px; color: #fff; }
.pdp .add { width: 100%; height: 40px; }
.pdp .fine { margin-top: 8px; opacity: .55; text-align: center; font-size: 9.5px; }
.stage { position: relative; border-radius: var(--r); overflow: hidden; background: linear-gradient(180deg, #1A2233, var(--fc)); }
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ease); }
.stage img.on { opacity: 1; }
.pdp[data-f=ton] { --fc: var(--ton); } .pdp[data-f=blk] { --fc: var(--blk-2); } .pdp[data-f=oat] { --fc: var(--oat); }
@media (max-width: 900px) {
  .pdp { grid-template-columns: minmax(0, 1fr); height: auto; }
  .pdp .stage { order: -1; height: 78svh; }
  .pdp .side.l { min-height: 0; overflow: visible; }
  .pdp .side.l > img { display: none; }
  .pdp .panels { position: static; }
  .pdp .side.r { height: 60svh; }
}

.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 14vh 8px 6vh; }
.story .pic { position: sticky; top: 8px; height: calc(100svh - 16px); border-radius: var(--r); overflow: hidden; }
.story .pic img { width: 100%; height: 100%; object-fit: cover; }
.story .copy { padding: 6vh clamp(16px, 4vw, 70px) 30vh; }
.tabs { display: flex; gap: 4px; margin-bottom: 26px; }
.tabs button { height: 28px; padding: 0 12px; border-radius: 999px; font: 10.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; opacity: .7; }
.tabs button[aria-selected=true] { opacity: 1; border: 1px solid rgba(255,255,255,.8); }
.story .lead { margin: 0 0 8vh; font: 300 clamp(30px, 3.3vw, 50px)/1.02 var(--serif); font-stretch: 62.5%; }
.story dl { margin: 0; }
.story dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 20px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.18); }
.story dt { font: 300 24px/1.05 var(--serif); font-stretch: 62.5%; }
.story dd { margin: 0; font-size: 13px; line-height: 1.5; opacity: .88; }
.story [role=tabpanel][hidden] { display: none; }
@media (max-width: 900px) { .story { grid-template-columns: minmax(0, 1fr); } .story .pic { position: relative; height: 70svh; } .story .copy { padding-bottom: 8vh; } }

.dock { position: fixed; right: 10px; bottom: 10px; z-index: 40; width: 150px; padding: 12px; text-align: center; transform: translateY(130%); transition: transform .7s var(--ease); background: rgba(70, 76, 88, .4); }
.dock.show { transform: none; }
.dock .can { width: 60%; margin: 0 auto 8px; }
.dock b { display: block; font: 600 11px/1.15 var(--sans); text-transform: uppercase; }
.dock small { display: block; margin: 3px 0 10px; opacity: .7; }
.dock .pill { width: 100%; height: 30px; padding: 0 6px; font-size: 9.5px; }

/* ── где купить ─────── */
.find { display: grid; grid-template-columns: minmax(280px, 26fr) minmax(0, 74fr); gap: 8px; min-height: 100svh; padding: 64px 8px 8px; }
.find h1 { margin: 26px 6px 18px; font: 300 clamp(32px, 2.6vw, 42px)/1 var(--serif); font-stretch: 62.5%; }
.find .q { width: 100%; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--edge); background: rgba(255,255,255,.06); color: var(--ink); font: 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.find .q::placeholder { color: var(--ink-2); }
.spots { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; max-height: calc(100svh - 230px); overflow: auto; }
.spots button { width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid transparent; transition: background .3s, border-color .3s; }
.spots button:hover, .spots button[aria-current] { background: rgba(255,255,255,.08); border-color: var(--edge); }
.spots b { display: block; font: 300 21px/1.05 var(--serif); font-stretch: 62.5%; }
.spots span { display: block; margin-top: 4px; font-size: 12px; opacity: .72; }
.spots .mono { margin-top: 6px; opacity: .55; }
.mapbox { position: relative; border-radius: var(--r); overflow: hidden; background: #1B2330; min-height: 560px; touch-action: none; cursor: grab; }
.mapbox.grab { cursor: grabbing; }
.mapbox .layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.mapbox svg.map { display: block; }
.pin { position: absolute; z-index: 3; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.18); transition: transform .3s var(--ease), box-shadow .3s; }
.pin.on { transform: scale(1.35); box-shadow: 0 0 0 9px rgba(255,255,255,.22); }
.pin i { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); padding: 5px 9px; border-radius: 999px; background: #fff; color: #111; font: 10px/1 var(--mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity .3s; pointer-events: none; }
.pin.on i, .pin:hover i { opacity: 1; }
.mapbox .zoom { position: absolute; right: 10px; top: 10px; z-index: 4; display: grid; gap: 4px; }
.mapbox .attr { position: absolute; right: 8px; bottom: 8px; z-index: 4; padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,.85); color: #222; font: 9.5px/1.2 var(--sans); }
@media (max-width: 900px) { .find { grid-template-columns: minmax(0, 1fr); } .mapbox { min-height: 70svh; order: -1; } .spots { max-height: none; } }

/* ── о нас ─────── */
.about-h { padding: 22vh 16px 8vh; text-align: center; }
.about-h h1 { margin: 0 auto; max-width: 900px; font: 300 clamp(38px, 4.4vw, 64px)/1 var(--serif); font-stretch: 62.5%; }
.strip { display: flex; gap: 8px; padding: 0 8px; will-change: transform; }
.strip figure { flex: none; margin: 0; width: min(46vw, 760px); aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; }
.strip figure.v { width: min(24vw, 400px); aspect-ratio: 3 / 4; align-self: end; }
.strip img { width: 100%; height: 100%; object-fit: cover; }
.manifest { max-width: 640px; margin: 0 auto; padding: 22vh 20px; text-align: center; font: 300 clamp(22px, 2vw, 29px)/1.12 var(--serif); font-stretch: 62.5%; }
.manifest p { margin: 0 0 1.1em; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 8px; }
.duo .glass { overflow: hidden; padding: 0 0 26px; text-align: center; background: rgba(255,255,255,.2); }
.duo img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: var(--r) var(--r) 0 0; margin-bottom: 22px; }
.duo h2 { margin: 8px 0 16px; font: 300 clamp(26px, 2.4vw, 36px)/1 var(--serif); font-stretch: 62.5%; }
@media (max-width: 760px) { .duo { grid-template-columns: minmax(0, 1fr); } .strip figure { width: 78vw; } .strip figure.v { width: 50vw; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01s !important; animation-duration: .01s !important; }
  .blurin { opacity: 1; filter: none; transform: none; }
}