/* Chernika nails — страница записи.
   Телефон: без шапки — портрет и имя в одну строку, сразу под ними запись; дальше работы, прайс.
   При прокрутке ниже кнопок записи снизу появляется плашка «Записаться».
   От 760px — текст и портрет рядом, запись ниже. От 1100px — три колонки: текст / портрет / запись. */

:root {
  --bg: #F7F6F0;
  --surface: #FFFFFF;
  --pista: #E4EBDD;
  --sage: #A5B49B;
  --stem: #7E9578;
  --green: #365844;
  --green-deep: #2A4636;
  --ink: #252D27;
  --muted: #687066; /* чуть темнее #777F76 — контраст ≥ 4.5:1 на фоне */
  --line: #DEE3D5;
  --shadow: 0 24px 48px -32px rgba(42, 70, 54, .35);

  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hand: "Corinthia", "Segoe Script", cursive;

  --r-md: 16px;

  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  position: relative;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.i {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}

.eyebrow {
  margin: 0;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green);
}

.only-desktop { display: none !important; }
.is-desktop .only-desktop { display: inline-flex !important; }

/* ---------- Навигация ---------- */
/* На телефоне шапка не нужна: имя — в заголовке, а разделы идут сразу под записью */
.nav { display: none; position: relative; z-index: 6; border-bottom: 1px solid var(--line); }
.nav__inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px var(--gutter-r) 14px var(--gutter);
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.logo__mark { width: 28px; height: 28px; flex: none; }
.logo__text { font-family: var(--serif); font-size: 28px; line-height: 1; font-weight: 500; }
.logo__text em { color: var(--green); }

.nav__links { display: flex; align-items: center; gap: 34px; font-size: 13.5px; }
.nav__links a { padding: 6px 0; text-decoration: none; border-bottom: 1px solid transparent; }
.nav__links a:hover { border-color: var(--sage); }
.nav__links .nav__cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: var(--bg);
  transition: background-color .25s var(--ease);
}
.nav__links .nav__cta:hover { background: var(--green-deep); }

/* ---------- Декор страницы ----------
   Отдельный слой на всю высоту документа: листья проходят поверх линий шапки
   и подвала и обрезаются только краем страницы. Ветки стоят в полях, контент не перекрывают. */
.page-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.branch-slot { position: absolute; }
/* На телефоне веток в полях нет: места мало, размытые листья выглядели бы пятнами */
.branch-slot--left,
.branch-slot--blur-left,
.branch-slot--corner,
.branch-slot--mid,
.branch-slot--edge,
.branch-slot--prices { display: none; }

/* ---------- Первый экран ---------- */
.hero { position: relative; overflow-x: clip; }
/* Телефон: портрет слева, имя справа — визитка в одну строку, чтобы кнопки записи
   попадали на первый экран */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 50fr) minmax(0, 50fr);
  grid-template-areas: "portrait text" "panel panel" "outro outro";
  align-items: center;
  gap: 28px 14px;
  padding-block: calc(32px + env(safe-area-inset-top, 0px)) 0;
}
.hero__text { grid-area: text; display: grid; justify-items: start; }
.display {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 11.6vw, 52px);
  line-height: .9;
  letter-spacing: -.01em;
}
.display em { display: block; font-weight: 400; color: var(--green); }
.tagline { margin: 12px 0 0; font-size: 15px; line-height: 1.35; color: #4E564F; white-space: pre-line; }
.slogan {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 28px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
  white-space: pre-line;
}
.slogan .logo__mark { width: 34px; height: 34px; }
/* На телефоне имя уже в заголовке рядом, подпись и слоган — лишний повтор */
.hero__text .eyebrow, .slogan, .portrait__sign { display: none; }

/* Портрет: форма фото обведена по референсу (срезанный правый нижний угол, выемка справа),
   рамка — та же форма чуть крупнее, поэтому идёт ровно вокруг фото */
.portrait {
  grid-area: portrait;
  position: relative;
  margin: 0;
  width: calc(100% - 8px);
  justify-self: end;
}
.portrait__media { position: relative; aspect-ratio: 468 / 656; }
.portrait__pic { position: relative; z-index: 2; display: block; width: 100%; height: 100%; }
.portrait__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  clip-path: url(#blob);
  background: var(--pista);
}
.portrait__frame {
  --pad: 7px; /* ширина белой каймы вокруг фото */
  position: absolute;
  inset: calc(-1 * var(--pad));
  z-index: 1;
  width: calc(100% + 2 * var(--pad));
  height: calc(100% + 2 * var(--pad));
  overflow: visible;
  filter: drop-shadow(0 22px 30px rgba(42, 70, 54, .12));
}
.portrait__frame path { fill: rgba(255, 255, 255, .72); stroke: #C3CDBB; stroke-width: 1; vector-effect: non-scaling-stroke; }
/* Листья и веточки за рамкой: выглядывают из-под каймы, ни рамку, ни фото не закрывают */
.portrait__leaves { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* Подпись — в свободном правом нижнем углу под срезом фото, как на референсе */
.portrait__sign {
  position: absolute;
  left: 70%;
  top: 89%;
  z-index: 3;
  justify-items: start;
  margin: 0;
  transform: rotate(-24deg);
  transform-origin: left top;
  pointer-events: none;
}
.signature {
  display: grid;
  font-family: var(--hand);
  font-size: 40px;
  line-height: .78;
  color: var(--green);
  white-space: nowrap;
}
.signature__2 { display: inline-flex; align-items: center; gap: 8px; padding-left: 1.1em; }
.signature .i { width: 14px; height: 14px; margin-top: 10px; color: var(--stem); stroke-width: 1.4; }

/* Запись и связь */
.panel { grid-area: panel; display: grid; gap: 10px; scroll-margin-top: 16px; }
.panel__title { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.05; }
.panel__sub { margin: -6px 0 6px; color: var(--muted); font-size: 14px; }

.msgr { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.msg {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  min-height: 66px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.msg:hover { border-color: var(--sage); box-shadow: var(--shadow); }
.msg:active { transform: scale(.985); }
.msg__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--pista);
  color: var(--green);
}
.msg__icon .i { width: 24px; height: 24px; }
/* Логотипы мессенджеров — монохромные (MAX — из официального брендбука go.max.ru/brandbook) */
.msg__icon--brand svg { display: block; width: 24px; height: 24px; }
.msg__text { display: grid; min-width: 0; }
.msg__label { font-size: 17px; }
.msg__hint { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.msg--main { background: var(--green); border-color: var(--green); color: var(--bg); box-shadow: 0 14px 28px -20px rgba(54, 88, 68, .9); }
.msg--main:hover { background: var(--green-deep); border-color: var(--green-deep); }
.msg--main .msg__icon { background: rgba(247, 246, 240, .14); color: var(--bg); }
.msg--main .msg__hint { color: rgba(247, 246, 240, .82); }

/* Адрес студии — ссылка на Яндекс Карты */
.address {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  margin-top: 2px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px dashed var(--sage);
  text-decoration: none;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.address:hover { border-style: solid; border-color: var(--green); background: rgba(255, 255, 255, .6); }
.address__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--pista); color: var(--green); }
.address__text { display: grid; min-width: 0; }
.address__label { font-size: 13px; color: var(--muted); }
.address__value { font-size: 16px; }
.address__go { width: 18px; height: 18px; color: var(--green); transition: transform .25s var(--ease); }
.address:hover .address__go { transform: translate(2px, -2px); }

.panel__qr {
  align-items: center;
  gap: 16px;
  margin: 4px 0 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(228, 235, 221, .55);
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.panel__qr .i { width: 28px; height: 28px; color: var(--ink); stroke-width: 1.4; }
.panel__qr strong { display: block; font-weight: 500; color: var(--ink); }

/* Нижний декор первого экрана — только на телефоне */
.hero__outro {
  grid-area: outro;
  position: relative;
  height: 150px;
  margin-inline: calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r));
  overflow: hidden;
}
.branch-slot--outro { left: -10px; bottom: 0; width: 190px; height: 150px; }
.outro__script {
  position: absolute;
  right: 36px;
  bottom: 28px;
  margin: 0;
  font-family: var(--hand);
  font-size: 40px;
  line-height: .85;
  color: var(--green);
  white-space: pre-line;
  transform: rotate(-12deg);
}
.outro__script .i { width: 14px; height: 14px; stroke-width: 1.4; vertical-align: middle; }

/* Плашка записи внизу экрана — только на телефоне, когда кнопки записи уже прокручены */
.dock {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter-r);
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  border-radius: 999px;
  background: var(--green);
  color: var(--bg);
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 18px 36px -18px rgba(42, 70, 54, .8);
  transform: translateY(calc(100% + 24px));
  opacity: 0;
  visibility: hidden;
  transition: transform .35s var(--ease), opacity .35s var(--ease), visibility 0s linear .35s;
  -webkit-tap-highlight-color: transparent;
}
.dock.is-shown { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
.dock:active { background: var(--green-deep); }
.dock .i { width: 20px; height: 20px; }

/* ---------- Работы ---------- */
.works { padding-block: 40px 8px; scroll-margin-top: 8px; }
.works__grid { display: grid; gap: 22px; }
.works__intro { display: grid; gap: 8px; }
.works__intro .eyebrow { display: none; }
.works__title { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 38px; line-height: 1.02; }
.works__text { margin: 0; color: var(--muted); font-size: 16px; }
.for-wide { display: none; }

/* Карусель работ: свайп/прокрутка с привязкой к карточкам, стрелки и полоса прогресса */
.works__gallery { display: grid; gap: 18px; min-width: 0; }
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 64%;
  gap: 10px;
  margin-inline: calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r));
  padding-inline: var(--gutter) var(--gutter-r);
  scroll-padding-inline: var(--gutter) var(--gutter-r);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline-offset: -2px; }
.carousel__bar { display: flex; align-items: center; gap: 10px; }
.carousel__progress { position: relative; flex: 1; height: 2px; margin-right: 12px; border-radius: 2px; background: var(--line); overflow: hidden; }
.carousel__progress span {
  position: absolute; inset: 0 auto 0 0;
  width: var(--w, 25%);
  transform: translateX(var(--x, 0%));
  border-radius: inherit;
  background: var(--green);
}
.carousel__btn {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--green);
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s, opacity .2s;
}
.carousel__btn:hover:not(:disabled) { border-color: var(--green); background: var(--green); color: var(--bg); }
.carousel__btn:disabled { opacity: .4; cursor: default; }
.carousel__btn .i { width: 20px; height: 20px; }
.work {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--pista);
  aspect-ratio: 4 / 5;
  scroll-snap-align: start;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.work img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.work:hover img { transform: scale(1.04); }
.work:focus-visible { outline-offset: 2px; }

/* ---------- Прайс ---------- */
.prices { position: relative; padding-block: 40px 48px; scroll-margin-top: 8px; }
.prices__grid { display: grid; gap: 24px; }
.prices__intro { position: relative; display: grid; gap: 10px; }
.prices__title { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 36px; line-height: 1.02; }
.prices__text { margin: 0; color: var(--muted); font-size: 15px; }
.prices__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.price {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  column-gap: 16px;
  row-gap: 4px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.price:hover { border-color: var(--sage); box-shadow: var(--shadow); transform: translateY(-2px); }
.price__name { font-size: 16px; font-weight: 500; }
.price__desc { grid-row: 2; font-size: 14px; line-height: 1.4; color: var(--muted); }
.price__cost { grid-column: 2; grid-row: 1; font-size: 16px; white-space: nowrap; }

/* ---------- Подвал ---------- */
.footer { position: relative; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
.footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.footer .wrap { padding-inline: 0; width: calc(100% - var(--gutter) - var(--gutter-r)); }
.footer__name { font-family: var(--serif); font-size: 16px; color: var(--ink); }
.footer__address { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: color .2s; }
.footer__address .i { width: 18px; height: 18px; color: var(--green); stroke-width: 1.4; }
.footer__address:hover { color: var(--green); }
.footer__links { display: flex; gap: 22px; }
.footer__links a { text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.footer__links a:hover { color: var(--green); border-color: var(--sage); }
.footer__thanks { display: inline-flex; align-items: center; gap: 10px; }
.footer__thanks .i { width: 18px; height: 18px; color: var(--green); stroke-width: 1.4; }

/* ---------- Листья ----------
   Картинка внутри двух слоёв: .lp__sway — медленное покачивание от черенка,
   .lp__flutter — мелкий шелест с наклоном. Разные длительности дают живое движение. */
.lp { position: absolute; display: block; }
.lp--soft { opacity: .6; }
.lp--wide { display: none; }
.lp__sway, .lp__flutter { display: block; width: 100%; height: 100%; }
.lp img { width: 100%; height: 100%; user-select: none; }
.lp img.is-flipped { transform: scaleX(-1); }
.lp__sway { animation: sway var(--d, 9s) ease-in-out var(--del, 0s) infinite alternate; }
.lp__flutter { animation: flutter var(--d, 3s) ease-in-out var(--del, 0s) infinite alternate; }

@keyframes sway    { from { transform: rotate(calc(var(--a, 2deg) * -1)); } to { transform: rotate(var(--a, 2deg)); } }
@keyframes flutter { from { transform: rotate(-.8deg) skewX(-1.2deg); } to { transform: rotate(.9deg) skewX(1deg); } }
@keyframes unfurl  { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
.branch-slot, .portrait__leaves { animation: unfurl 1.6s var(--ease) .15s both; }

/* Листья не двигаются, пока их не видно: экономим батарею */
.is-paused .lp__sway,
.is-paused .lp__flutter { animation-play-state: paused; }

/* ---------- Модальное окно QR ---------- */
.modal {
  width: min(380px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--bg);
  color: var(--ink);
  overflow: auto;
}
.modal::backdrop {
  background: rgba(37, 45, 39, .32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal[open] { animation: rise .32s var(--ease); }
.modal[open]::backdrop { animation: fade .32s var(--ease); }
.modal__inner {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 6px;
  padding: 30px 26px 26px;
}
.modal__close {
  position: absolute; top: 12px; right: 12px;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--muted);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.modal__close:hover { background: var(--pista); color: var(--ink); }
.modal__eyebrow { margin: 0; font-size: 14px; letter-spacing: .02em; color: var(--green); }
.modal__title { margin: 0 0 12px; font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.05; }
.modal__qr {
  width: 100%;
  max-width: 260px;
  padding: 14px;
  border-radius: 20px;
  background: #FFFFFF;
  border: 1px solid var(--line);
}
.modal__qr svg { display: block; width: 100%; height: auto; }
.modal__desc { margin: 12px 0 0; color: var(--muted); font-size: 15px; max-width: 30ch; }
.modal__open {
  margin-top: 6px;
  font-size: 14px;
  color: var(--green);
  text-decoration: underline;
  text-decoration-color: var(--sage);
  text-underline-offset: 4px;
  padding: 6px;
}
.modal__open:hover { text-decoration-color: currentColor; }
.modal__phone { display: grid; justify-items: center; gap: 14px; margin: 4px 0 2px; }
.modal__number { margin: 0; font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; user-select: all; }
.btn-copy {
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  border: 0;
  background: var(--green);
  color: var(--bg);
  cursor: pointer;
  transition: background-color .25s;
}
.btn-copy:hover { background: var(--green-deep); }
.btn-copy.is-done { background: var(--sage); color: var(--ink); }

/* ---------- Лайтбокс ---------- */
.lightbox {
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  margin: 0; padding: 0;
  border: 0;
  background: rgba(247, 246, 240, .97);
  color: var(--ink);
  overflow: hidden;
}
.lightbox[open] { display: grid; place-items: center; animation: fade .25s var(--ease); }
.lightbox::backdrop { background: transparent; }
.lightbox__figure {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: calc(64px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px));
  max-width: 100%;
  max-height: 100%;
  touch-action: pan-y;
}
.lightbox__figure img {
  max-width: min(100%, 980px);
  max-height: calc(100dvh - 140px);
  width: auto; height: auto;
  border-radius: var(--r-md);
  object-fit: contain;
}
.lightbox__count { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  z-index: 1;
  transition: border-color .2s;
}
.lightbox__close:hover, .lightbox__nav:hover { border-color: var(--sage); }
.lightbox__close { top: calc(12px + env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); }
.lightbox__nav { top: 50%; transform: translateY(-50%); display: none; }
.lightbox__nav--prev { left: max(16px, env(safe-area-inset-left, 0px)); }
.lightbox__nav--next { right: max(16px, env(safe-area-inset-right, 0px)); }

@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Планшет ---------- */
@media (min-width: 600px) {
  .lightbox__nav { display: grid; }
}

@media (min-width: 760px) {
  :root { --gutter: 40px; --gutter-r: 40px; }
  .nav { display: block; }
  .dock { display: none; }
  .nav__inner { padding-block: 18px; }

  .hero { border-bottom: 1px solid var(--line); }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "text portrait" "panel panel";
    align-items: center;
    gap: 48px 32px;
    padding-block: 56px 48px;
  }
  .hero__text .eyebrow { display: block; }
  .slogan { display: flex; }
  .display { margin-top: 14px; font-size: 68px; }
  .tagline { margin-top: 18px; font-size: 20px; line-height: 1.3; }
  .portrait { justify-self: auto; width: min(68vw, 290px); margin: 0 auto; padding-bottom: 46px; }
  .portrait__sign { display: grid; }
  .portrait__frame { --pad: 16px; }
  .lp--wide { display: block; }
  .panel__title { font-size: 34px; }
  .panel__sub { margin: -4px 0 10px; font-size: 16px; }
  .msg { min-height: 74px; padding: 12px 16px; gap: 16px; }
  .hero__outro { display: none; }
  .branch-slot--corner { display: block; top: -14px; right: -70px; width: 240px; height: 190px; opacity: .55; }
  .panel { position: relative; z-index: 6; padding: 24px; border-radius: 20px; background: #EEF1E9; box-shadow: 0 30px 60px -44px rgba(42, 70, 54, .45); }

  .works { padding-block: 56px; border-bottom: 1px solid var(--line); }
  .works__intro .eyebrow { display: block; letter-spacing: .22em; }
  .for-wide { display: inline; }
  .for-narrow { display: none; }
  .carousel__track { grid-auto-columns: calc((100% - 2 * 14px) / 3); gap: 14px; margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
  .work { aspect-ratio: 1 / 1.08; }
  .works__title { font-size: 42px; }

  .prices { padding-block: 56px 48px; }
  .prices__title { white-space: pre-line; font-size: 44px; }
  .prices__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .price { grid-template-columns: 1fr; align-content: start; padding: 20px 22px; }
  .price__desc { grid-row: auto; }
  .price__cost { grid-column: 1; grid-row: auto; margin-top: 8px; font-size: 18px; }
}

/* ---------- Десктоп: текст / портрет / запись ---------- */
@media (min-width: 1100px) {
  :root { --gutter: 60px; --gutter-r: 60px; }
  .wrap, .nav__inner { max-width: 1360px; }
  .nav__inner { padding-left: calc(var(--gutter) + 108px); }
  .hero__grid {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) minmax(360px, 1.2fr);
    grid-template-areas: "text portrait panel";
    gap: 32px;
    align-items: start;
    padding-block: 40px 56px;
    padding-left: calc(var(--gutter) + 104px);
  }
  .hero__text { padding-top: 58px; }
  .display { font-size: clamp(64px, 5.6vw, 80px); }
  .tagline { font-size: 19px; margin-top: 22px; }
  .tagline::after { content: ""; display: block; width: 36px; height: 1px; margin-top: 22px; background: var(--line); }
  .slogan { margin-top: 26px; font-size: 13.5px; }
  .portrait { justify-self: start; width: min(100%, 320px); margin: 6px 0 0 -20px; padding-bottom: 40px; }
  .signature { font-size: 46px; }
  .panel { padding: 24px 22px 18px; gap: 10px; }
  .panel__title { font-size: 32px; }
  .panel__sub { font-size: 13px; margin: -2px 0 8px; }
  .msgr { gap: 10px; }
  .msg { min-height: 62px; padding: 8px 12px; gap: 14px; border-radius: 12px; }
  .panel__qr { padding: 12px 14px; }
  .address { padding: 8px 12px; gap: 14px; border-radius: 12px; }
  .address__icon { width: 42px; height: 42px; border-radius: 10px; }
  .address__value { font-size: 15px; }
  .address__label { font-size: 12px; }
  .msg__icon { width: 42px; height: 42px; border-radius: 10px; }
  .msg__icon .i { width: 22px; height: 22px; }
  .msg__label { font-size: 15.5px; }
  .msg__hint { font-size: 13px; }

  .branch-slot--left { display: block; top: -50px; left: -96px; width: 250px; height: 370px; }
  .branch-slot--blur-left { display: block; top: 470px; left: -50px; width: 200px; height: 220px; }
  .branch-slot--mid { display: block; top: 560px; left: 33%; width: 100px; height: 80px; }
  .branch-slot--edge { display: block; bottom: 110px; right: -54px; width: 170px; height: 134px; }

  .works__grid {
    grid-template-columns: minmax(300px, 1fr) minmax(0, 2.65fr);
    column-gap: 30px;
    align-items: start;
  }
  .works__intro { padding-top: 6px; gap: 12px; }
  .works__title { font-size: 40px; }
  .works__text { font-size: 15px; max-width: 30ch; }
  .carousel__track { grid-auto-columns: calc((100% - 3 * 14px) / 4); }

  .prices__grid {
    grid-template-columns: minmax(270px, 1fr) minmax(0, 2.65fr);
    column-gap: 30px;
    align-items: start;
  }
  .prices__intro { padding-top: 6px; gap: 14px; }
  .prices__title { font-size: 42px; }
  .prices__text { max-width: 26ch; }
  .prices__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
  .price { min-height: 116px; padding: 18px 22px; }
  .branch-slot--prices { display: block; position: relative; margin: 18px 0 0 90px; width: 120px; height: 96px; }
}

/* ---------- Без анимаций ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}