/* services.css */

/* =========================================================================
   BASE COMPONENT RULES (smallest case shared skeleton, layered up by canon
   breakpoints: mobile <=767, tablet 768-1023, desktop 1024-1439,
   large 1440-1919, xl >=1920).
   ========================================================================= */

.restaurant-page {
  background: var(--service-page-bg);
  color: #131212;
}

.restaurant-shell {
  margin: auto;
}

.restaurant-title,
.restaurant-section-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: 0;
}

.restaurant-title {
  font-size: clamp(3.4rem, 6vw, 6rem);
  line-height: 0.92;
}

.restaurant-section-title {
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 0.96;
}

.restaurant-lead {
  font-size: 1rem;
  line-height: 1.7;
}

.restaurant-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: #f7f1e7;
  background: #171513;
}

.restaurant-hero__media,
.restaurant-hero__overlay {
  position: absolute;
  inset: 0;
}

.restaurant-hero__media {
  background:
    radial-gradient(circle at 24% 42%, rgba(255, 238, 214, 0.18), transparent 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)),
    linear-gradient(135deg, #4d453c 0%, #c6b8a4 32%, #8e6e53 58%, #2b231e 100%);
}

.restaurant-hero__overlay {
  background:
    linear-gradient(180deg, rgba(14, 13, 12, 0.2), rgba(14, 13, 12, 0.76)),
    linear-gradient(90deg, rgba(14, 13, 12, 0.68) 0%, rgba(14, 13, 12, 0.26) 42%, rgba(14, 13, 12, 0.2) 100%);
}

.restaurant-hero__content {
  position: relative;
  z-index: 2;
}

.restaurant-hero__actions {
  display: flex;
  gap: 16px;
  margin-top: 34px;
}

.restaurant-hero__crest {
  width: 260px;
  margin-bottom: 20px;
}

.restaurant-hero__crest img {
  display: block;
  width: 100%;
  height: auto;
}

.restaurant-hero__actions--dining {
  align-items: center;
  gap: 18px;
  margin-top: 34px;
}

.dining-section {
  background: var(--service-page-bg);
  color: #141312;
  padding: 118px 0 34px;
  scroll-margin-top: 50px;
}

.dining-section__intro {
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) minmax(240px, 1fr) minmax(240px, 1fr) auto;
  gap: 42px;
  align-items: start;
  margin-bottom: 48px;
}

.dining-section__intro > * {
  min-width: 0;
}

.dining-section__heading .restaurant-section-title {
  font-size: clamp(3.2rem, 4.8vw, 5rem);
  line-height: 0.94;
}

.dining-section__copy p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #2c2824;
}

.dining-section__controls {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-self: end;
}

.dining-section__menu-button {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  font-size: var(--button-font-size);
  letter-spacing: var(--button-letter-spacing);
}

.dining-section__nav {
  display: flex;
  gap: 12px;
}

.dining-gallery {
  display: grid;
  gap: 18px;
}

.dining-gallery--restaurant {
  grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr);
}

.dining-gallery--terrace {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dining-gallery--spa {
  grid-template-columns: minmax(0, 1.4fr) minmax(340px, 1fr);
}

.dining-photo {
  min-height: 420px;
  background-position: center;
  background-size: cover;
}

/* Shared carousel engine (restaurant / spa / dessange / conference) */

.dining-gallery[data-gallery-carousel],
.dessange-gallery[data-gallery-carousel],
.conference-detail__gallery[data-gallery-carousel] {
  --gallery-shift: 0;
  --service-gallery-gap: 18px;
  display: flex;
  grid-template-columns: none;
  gap: var(--service-gallery-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* pan-x lets the browser drive horizontal swipes natively on the compositor
     thread (no JS in the hot path, so a busy main thread can't stutter the
     strip); pan-y keeps vertical page scrolling from a touch that starts here.
     The JS pointer-drag engine stays for mouse only. */
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.dessange-gallery[data-gallery-carousel],
.conference-detail__gallery[data-gallery-carousel] {
  --service-gallery-gap: 20px;
}

.dining-gallery[data-gallery-carousel]::-webkit-scrollbar,
.dessange-gallery[data-gallery-carousel]::-webkit-scrollbar,
.conference-detail__gallery[data-gallery-carousel]::-webkit-scrollbar {
  display: none;
}

.dining-gallery[data-gallery-carousel].is-gallery-dragging,
.dessange-gallery[data-gallery-carousel].is-gallery-dragging,
.conference-detail__gallery[data-gallery-carousel].is-gallery-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.dining-gallery[data-gallery-carousel].is-gallery-programmatic,
.dessange-gallery[data-gallery-carousel].is-gallery-programmatic,
.conference-detail__gallery[data-gallery-carousel].is-gallery-programmatic {
  scroll-snap-type: none;
}

.dining-gallery[data-gallery-carousel] > *:focus,
.dessange-gallery[data-gallery-carousel] > *:focus,
.conference-detail__gallery[data-gallery-carousel] > *:focus,
.dining-gallery[data-gallery-carousel] > *:focus-visible,
.dessange-gallery[data-gallery-carousel] > *:focus-visible,
.conference-detail__gallery[data-gallery-carousel] > *:focus-visible {
  outline: none;
}

.dining-gallery[data-gallery-carousel] > *,
.dessange-gallery[data-gallery-carousel] > *,
.conference-detail__gallery[data-gallery-carousel] > * {
  flex: 0 0 calc((100% - var(--service-gallery-gap)) / 2);
  width: calc((100% - var(--service-gallery-gap)) / 2);
  scroll-snap-align: start;
  /* one slide per fling: a native momentum swipe may never skip past the next
     snap position (this is what clampDragOffset does for the mouse drag) */
  scroll-snap-stop: always;
  cursor: zoom-in;
  transition:
    opacity 0.24s ease,
    transform 0.24s ease;
}

.dining-gallery[data-gallery-carousel].is-gallery-changing > *,
.dessange-gallery[data-gallery-carousel].is-gallery-changing > *,
.conference-detail__gallery[data-gallery-carousel].is-gallery-changing > * {
  opacity: 0.36;
  transform: translateX(var(--gallery-shift, 0));
}

/* Conference page: show ONE photo per view in the carousel from iPad down (the
   base + desktop rules show two side-by-side). The extra [data-gallery-carousel]
   attribute makes this win over the shared 2-up rule, so it also holds at exactly
   1024px (iPad Pro portrait). */
@media (max-width: 1024px) {
  .conference-page--figma .conference-detail__gallery[data-gallery-carousel] > * {
    flex: 0 0 100%;
    width: 100%;
  }

  /* Mandatory snap stays ON here (it used to be disabled because the loop
     reset fought it and flipped the gallery back to the start — that was the
     wrap-on-contact bug, since fixed by the hysteresis guard in
     normalizeCurrentScroll). Native touch panning needs snap to settle on a
     slide at all. */
}

/* -------------------------------------------------------------------------
   RESTAURANT page (desktop-first base; layered down/up by canon breakpoints)
   ------------------------------------------------------------------------- */

.restaurant-page--restaurant {
  background: var(--service-page-bg);
  color: #000;
}

.restaurant-page--restaurant .restaurant-shell {
  width: var(--site-content-width);
}

.restaurant-page--restaurant .restaurant-hero {
  min-height: 100svh;
  align-items: flex-start;
  padding: clamp(320px, 42.87vh, 463px) 0 80px;
  background: #141414;
  overflow: hidden;
}

.restaurant-page--restaurant .restaurant-hero__media--dining {
  background: url("../images/figma/restaurant-hero-figma.webp") center / cover no-repeat;
}

.restaurant-page--restaurant .restaurant-hero__overlay--dining {
  background: linear-gradient(35deg, rgba(0, 0, 0, 0.92) 3%, rgba(0, 0, 0, 0) 89%), rgba(0, 0, 0, 0.04);
}

.restaurant-page--restaurant .restaurant-hero__content--dining {
  max-width: 720px;
  padding-left: clamp(0px, 6.25vw, 120px);
}

.restaurant-page--restaurant .restaurant-hero__crest {
  width: 250px;
  height: 152px;
  margin-bottom: 30px;
}

.restaurant-page--restaurant .restaurant-hero__crest img {
  width: 100%;
  height: 100%;
}

.restaurant-page--restaurant .restaurant-title,
.restaurant-page--restaurant .restaurant-section-title {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: 0;
}

.restaurant-page--restaurant .restaurant-title {
  font-size: 65px;
  line-height: 1;
}

.restaurant-page--restaurant .restaurant-lead {
  margin: 20px 0 0;
  max-width: 620px;
  font-size: 20px;
  line-height: 1.28;
  color: #fff;
}

.restaurant-page--restaurant .restaurant-hero__actions--dining {
  gap: 25px;
  margin-top: 48px;
}

.restaurant-page--restaurant .restaurant-hero__actions .button-circle,
.restaurant-page--restaurant .dining-section__nav .button-circle {
  width: var(--button-circle-size);
  height: var(--button-circle-size);
  min-width: var(--button-circle-size);
  min-height: var(--button-circle-size);
}

.restaurant-page--restaurant .restaurant-button--tab {
  width: 165px;
  min-height: var(--button-height);
  padding: 0 28px;
  font-size: var(--button-font-size);
  letter-spacing: var(--button-letter-spacing-compact);
}

.restaurant-page--restaurant .dining-section {
  padding: 72px 0 54px;
  background: var(--service-page-bg);
  color: #000;
}

.restaurant-page--restaurant .dining-section__intro {
  display: grid;
  /* Controls column = max-content, NOT fit-content(480px): the two buttons + two
     arrows have a hard min-width (~615px, and wider in RO) that fit-content(480px)
     couldn't honour, so the button row overflowed its 480px track leftwards and the
     copy paragraph (max-width 755) ran under it — the RO overlap. max-content reserves
     the buttons' true width per language; the copy takes the remaining 2×1fr and wraps
     within it. */
  grid-template-columns: repeat(2, minmax(0, 1fr)) max-content;
  grid-template-areas:
    "heading heading ."
    "copy-main copy-main controls";
  column-gap: 20px;
  row-gap: 20px;
  align-items: start;
  margin-bottom: 49px;
}

.restaurant-page--restaurant .dining-section__heading {
  grid-area: heading;
  width: 100%;
  max-width: 1220px;
}

.restaurant-page--restaurant .dining-section__heading .restaurant-section-title {
  font-size: 65px;
  line-height: 75px;
}

.restaurant-page--restaurant .dining-section__copy--main {
  grid-area: copy-main;
}

.restaurant-page--restaurant .dining-section__copy p {
  max-width: 755px;
  font-size: 22px;
  line-height: 26px;
  color: #222121;
}

.restaurant-page--restaurant .dining-section__controls {
  grid-area: controls;
  justify-self: end;
  align-self: end;
  gap: 24px;
  margin-top: 0;
}

.restaurant-page--restaurant .dining-section__menu-button {
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-color: #c6c1a1;
  font-size: var(--button-font-size);
  letter-spacing: var(--button-letter-spacing);
}

.restaurant-page--restaurant .dining-section__nav {
  gap: 20px;
}

.restaurant-page--restaurant .dining-gallery {
  gap: 20px;
}

.restaurant-page--restaurant .dining-gallery--restaurant {
  grid-template-columns: minmax(0, 1218fr) minmax(0, 600fr);
  column-gap: 22px;
}

.restaurant-page--restaurant .dining-gallery--terrace {
  grid-template-columns: minmax(0, 755fr) minmax(0, 600fr) minmax(0, 446fr);
}

.restaurant-page--restaurant .dining-photo {
  height: 630px;
  min-height: 630px;
  background-repeat: no-repeat;
}

.restaurant-page--restaurant .dining-photo--restaurant-nh-216-6 {
  background-image: url("../images/figma/restaurant-nh-216-6-figma-sm.webp");
  background-position: center;
  background-size: cover;
}

.restaurant-page--restaurant .dining-photo--restaurant-image-623 {
  background-image: url("../images/figma/restaurant-image-623-figma-sm.webp");
  background-position: center;
  background-size: cover;
}

.restaurant-page--restaurant .dining-photo--restaurant-nh-208-3 {
  background-image: url("../images/figma/restaurant-nh-208-3-figma-sm.webp");
  background-position: center;
  background-size: cover;
}

.restaurant-page--restaurant .dining-photo--restaurant-nh-101-3 {
  background-image: url("../images/figma/restaurant-nh-101-3-figma-sm.webp");
  background-position: center;
  background-size: cover;
}

.restaurant-page--restaurant .dining-photo--restaurant-nh-199-4 {
  background-image: url("../images/figma/restaurant-nh-199-4-figma-sm.webp");
  background-position: center;
  background-size: cover;
}

.restaurant-page--restaurant .dining-photo--restaurant-nh-173-3 {
  background-image: url("../images/figma/restaurant-nh-173-3-figma-sm.webp");
  background-position: center;
  background-size: cover;
}

.restaurant-page--restaurant .dining-photo--terrace-image-624 {
  background-image: url("../images/figma/restaurant-terrace-image-624-figma-sm.webp");
  background-position: center;
  background-size: cover;
}

.restaurant-page--restaurant .dining-photo--terrace-nh-91-3 {
  background-image: url("../images/figma/restaurant-terrace-nh-91-3-figma-sm.webp");
  background-position: center;
  background-size: cover;
}

.restaurant-page--restaurant .dining-photo--terrace-nh-94-3 {
  background-image: url("../images/figma/restaurant-terrace-nh-94-3-figma-sm.webp");
  background-position: center;
  background-size: cover;
}

.restaurant-page--restaurant .dining-photo--terrace-nh-64-3 {
  background-image: url("../images/figma/restaurant-terrace-nh-64-3-figma-sm.webp");
  background-position: center;
  background-size: cover;
}

.restaurant-page--restaurant .dining-photo--terrace-image-625 {
  background-image: url("../images/figma/restaurant-terrace-image-625-figma-sm.webp");
  background-position: center;
  background-size: cover;
}

.restaurant-page--restaurant .dining-photo--terrace-nh-78-3 {
  background-image: url("../images/figma/restaurant-terrace-nh-78-3-figma-sm.webp");
  background-position: center;
  background-size: cover;
}

/* -------------------------------------------------------------------------
   SPA page
   ------------------------------------------------------------------------- */

.dining-photo--spa-img-2816 {
  background-image: url("../images/figma/spa-gallery-img-2816-edit-sm.webp");
}

.dining-photo--spa-image-spa {
  background-image: url("../images/figma/spa-gallery-image-spa-2-sm.webp");
}

.dining-photo--spa-z633184 {
  background-image: url("../images/figma/spa-gallery-z633184-edit-2-sm.webp");
}

.dining-photo--spa-nh-10 {
  background-image: url("../images/figma/spa-gallery-nh-10-sm.webp");
}

.dining-photo--spa-nh-12 {
  background-image: url("../images/figma/spa-gallery-nh-12-sm.webp");
}

.dining-photo--spa-nh-6 {
  background-image: url("../images/figma/spa-gallery-nh-6-sm.webp");
}

.spa-page {
  background: var(--service-page-bg);
}

.spa-page .restaurant-shell {
  width: var(--site-content-width);
}

.spa-page .restaurant-hero {
  align-items: flex-start;
  overflow: hidden;
  background: #141414;
}

.spa-page .restaurant-hero__media {
  background: url("../images/figma/spa-hero-figma.webp") center bottom / cover no-repeat;
}

.spa-page .restaurant-hero__overlay {
  background:
    linear-gradient(
      55deg,
      rgba(0, 0, 0, 0.86) 0%,
      rgba(0, 0, 0, 0.58) 31%,
      rgba(0, 0, 0, 0.16) 65%,
      rgba(0, 0, 0, 0) 90%
    ),
    rgba(255, 255, 255, 0.1);
}

.spa-page .restaurant-hero__content {
  max-width: 600px;
  margin-left: clamp(0px, 8.1vw, 155px);
}

.spa-page .restaurant-hero__crest {
  width: 222px;
  margin-bottom: 20px;
}

.spa-page .restaurant-hero__crest img {
  width: 100%;
  height: auto;
}

.spa-page .restaurant-title,
.spa-page .restaurant-section-title {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: 0;
}

.spa-page .restaurant-title {
  max-width: 600px;
  font-size: 65px;
  line-height: 65px;
}

.spa-page .restaurant-lead {
  max-width: 560px;
  margin: 20px 0 0;
  color: #ffffff;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.24;
}

.spa-page .button-circle {
  width: var(--button-circle-size);
  height: var(--button-circle-size);
  min-width: var(--button-circle-size);
  min-height: var(--button-circle-size);
}

.spa-page .button-circle--arrow-left::before,
.spa-page .button-circle--arrow-right::before {
  width: 18px;
  height: 18px;
}

.spa-page .restaurant-hero__actions--dining {
  gap: 25px;
  margin-top: 48px;
}

.spa-page .restaurant-button--tab {
  width: auto;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  font-size: var(--button-font-size);
  letter-spacing: var(--button-letter-spacing-compact);
}

.spa-section {
  background: var(--service-page-bg);
  padding: 72px 0 80px;
}

.spa-section .dining-section__intro {
  /* Copy column flexes, controls column = max-content so it reserves the buttons'
     true width and stays flush right; the copy is capped by its own max-width (755).
     Was minmax(0,755px) minmax(0,1fr) — there the buttons' hard min-width overflowed
     the 1fr track into the copy at narrow desktop widths. */
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-areas:
    "heading controls"
    "copy controls";
  column-gap: 20px;
  row-gap: 20px;
  align-items: end;
  margin-bottom: 49px;
}

.spa-section .dining-section__heading {
  grid-area: heading;
}

.spa-section .dining-section__copy:nth-child(2) {
  grid-area: copy;
}

.spa-section .dining-section__heading .restaurant-section-title {
  font-size: 65px;
  line-height: 75px;
}

.spa-section .dining-section__copy p {
  max-width: 600px;
  color: #222121;
  font-size: 22px;
  line-height: 26px;
}

.spa-section .dining-section__copy:nth-child(2) p {
  max-width: 755px;
}

.spa-section .dining-section__controls {
  grid-area: controls;
  gap: 24px;
  justify-self: end;
  align-self: end;
  padding-top: 0;
}

.spa-section .dining-section__menu-button {
  width: auto;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  border-color: #c6c1a1;
  font-size: var(--button-font-size);
  letter-spacing: var(--button-letter-spacing);
}

.spa-section .dining-section__nav {
  gap: 20px;
}

.spa-section .dining-gallery--spa {
  grid-template-columns: minmax(0, 1061fr) minmax(0, 753fr);
  gap: 25px;
}

.spa-section .dining-gallery--spa .dining-photo {
  min-height: 645px;
  background-position: center;
  background-size: cover;
}

/* -------------------------------------------------------------------------
   CONFERENCE page (touch only to fix breakpoint values; do not redesign)
   ------------------------------------------------------------------------- */

.conference-page--figma {
  background: var(--service-page-bg);
}

.conference-detail {
  min-height: auto;
  padding: 140px 0 80px;
  background: var(--service-page-bg);
  color: #000;
}

.conference-detail__shell {
  width: var(--site-content-width);
  margin: 0 auto;
  display: grid;
  /* actions column = fit-content(560px): the price + virtual-tour buttons and the two
     arrows have a hard min-width (~500px in RU) that the old minmax(304px,1fr) couldn't
     hold, so on a 13" laptop the buttons overflowed their track into the copy (RU
     overlap). fit-content reserves their real width (measured max ~502px) while staying
     BOUNDED — plain max-content can't be used here because the gallery row spans all
     three columns and its carousel is ~7000px wide, which would blow the column up. */
  grid-template-columns: minmax(0, 600px) minmax(0, 600px) fit-content(560px);
  grid-template-areas:
    "back back back"
    "intro intro actions"
    "gallery gallery gallery";
  column-gap: 20px;
  row-gap: 20px;
  align-items: start;
}

.conference-detail__back {
  grid-area: back;
  width: 48.995px;
  height: 48.995px;
  display: block;
  margin-bottom: 11px;
}

.conference-detail__back img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.conference-detail__intro {
  grid-area: intro;
  width: 100%;
}

.conference-detail__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 4.0625rem;
  font-weight: 400;
  line-height: 75px;
  letter-spacing: 0;
}

.conference-detail__copy {
  display: block;
  max-width: 755px;
  margin-top: 20px;
  font-size: 1.375rem;
  line-height: 26px;
  color: #222121;
}

.conference-detail__copy p {
  margin: 0;
}

.conference-detail__actions {
  grid-area: actions;
  width: auto;
  display: flex;
  align-items: center;
  gap: 24px;
  justify-self: end;
  align-self: end;
  margin-bottom: 4px;
}

.conference-detail__price {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.conference-detail__arrows {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.conference-detail__arrow {
  flex: 0 0 var(--button-circle-size);
}

.conference-detail__gallery {
  grid-area: gallery;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: space-between;
  gap: 22px;
  margin-top: 50px;
}

.conference-detail__photo {
  position: relative;
  height: 645px;
  margin: 0;
  overflow: hidden;
  background: #ddd;
}

.conference-detail__photo img {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.conference-detail__photo--left img {
  width: 100%;
}

.conference-detail__photo--right img {
  width: 100%;
}

/* -------------------------------------------------------------------------
   DESSANGE / beauty salon page
   ------------------------------------------------------------------------- */

.dessange-hero--nobil {
  min-height: 100svh;
  padding: calc(var(--header-height) + 88px) 0 120px;
}

.dessange-hero__media--nobil {
  background-image: url("../images/figma/dessange-hero-figma.webp");
  background-position: center;
  background-size: cover;
}

.dessange-hero__overlay--nobil {
  background:
    linear-gradient(
      40deg,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.66) 28%,
      rgba(0, 0, 0, 0.2) 68%,
      rgba(0, 0, 0, 0.05) 100%
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.44));
}

.dessange-hero__content--nobil {
  padding-left: clamp(0px, 6.25vw, 120px);
}

.dessange-hero__content--nobil .restaurant-hero__crest {
  width: 250px;
  margin-bottom: 26px;
}

.dessange-hero__content--nobil .restaurant-hero__crest img {
  filter: brightness(0) invert(1);
}

.dessange-hero__content--nobil .restaurant-title {
  max-width: 560px;
}

.dessange-hero__title {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  font-family: var(--font-body);
  font-size: clamp(3rem, 3.4vw, 4.1rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.dessange-hero__title span {
  padding-bottom: 0.52em;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  text-transform: lowercase;
}

.dessange-hero__content--nobil .restaurant-lead {
  max-width: 600px;
  margin: 20px 0 0;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.42;
}

.dessange-page .restaurant-hero__actions--dining {
  gap: 25px;
  margin-top: 48px;
}

.dessange-page .restaurant-hero__actions--dining .button-circle,
.dessange-page .dining-section__nav .button-circle {
  width: var(--button-circle-size);
  height: var(--button-circle-size);
  min-width: var(--button-circle-size);
  min-height: var(--button-circle-size);
}

.dessange-page .restaurant-button--tab,
.dessange-page .dining-section__menu-button {
  width: auto;
  max-width: 100%;
  min-height: var(--button-height);
  border-color: #c6c1a1;
  padding: 0 var(--button-padding-x);
  font-size: var(--button-font-size);
  letter-spacing: var(--button-letter-spacing);
}

.dessange-page .restaurant-button--light {
  border-color: #fff;
}

.dessange-page .restaurant-shell {
  width: var(--site-content-width);
}

.dessange-page {
  overflow-x: hidden;
}

.dessange-page .restaurant-hero {
  background: #121212;
  overflow-x: hidden;
}

.dessange-page .restaurant-hero__media {
  background-image: url("../images/figma/dessange-hero-figma.webp");
  background-position: center;
  background-size: cover;
}

.dessange-page .restaurant-hero__overlay {
  background:
    linear-gradient(
      40deg,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.66) 28%,
      rgba(0, 0, 0, 0.2) 68%,
      rgba(0, 0, 0, 0.05) 100%
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.44));
}

.dessange-section {
  background: var(--service-page-bg);
  padding: 84px 0 40px;
}

.dessange-section .restaurant-shell {
  width: var(--site-content-width);
}

.dessange-section__intro {
  /* max-content controls column — see the restaurant intro note (same RO overlap). */
  grid-template-columns: repeat(2, minmax(0, 1fr)) max-content;
  grid-template-areas:
    "heading heading ."
    "copy copy controls";
  gap: 20px;
  align-items: start;
  margin-bottom: 48px;
}

.dessange-section__intro .dining-section__heading {
  grid-area: heading;
  min-width: 0;
}

.dessange-section__intro .dining-section__copy {
  grid-area: copy;
  min-width: 0;
  max-width: 755px;
  padding-top: 0;
}

.dessange-section__intro .restaurant-section-title {
  width: auto;
  max-width: 1220px;
  font-size: clamp(3.4rem, 3.4vw, 4.1rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.dessange-section__intro .dining-section__copy p {
  font-size: 1.375rem;
  line-height: 1.18;
  color: #222121;
}

.dessange-section__intro .dining-section__controls {
  grid-area: controls;
  justify-self: end;
  align-self: end;
  padding-top: 0;
  gap: 24px;
}

.dessange-page .dining-section__nav {
  gap: 20px;
}

.dessange-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.dessange-gallery__photo {
  min-height: 640px;
  background-position: center;
  background-size: cover;
}

.dessange-gallery__photo--dessange-3 {
  background-image: url("../images/figma/dessange-gallery-3-figma-sm.webp");
}

.dessange-gallery__photo--dessange-9 {
  background-image: url("../images/figma/dessange-gallery-9-figma-sm.webp");
}

.dessange-gallery__photo--dessange-7 {
  background-image: url("../images/figma/dessange-gallery-7-figma-sm.webp");
}

.dessange-gallery__photo--dessange-6 {
  background-image: url("../images/figma/dessange-gallery-6-figma-sm.webp");
}

.dessange-gallery__photo--dessange-12 {
  background-image: url("../images/figma/dessange-gallery-12-figma-sm.webp");
}

.dessange-gallery__photo--dessange-5 {
  background-image: url("../images/figma/dessange-gallery-5-figma-sm.webp");
}

/* =========================================================================
   RESPONSIVE LAYER (canon breakpoints only)
   mobile <=767 | tablet 768-1023 | desktop 1024-1439 | large 1440-1919 | xl >=1920
   Plus deliberate device hacks: <=374 sub-mobile, coarse-pointer,
   short-tablet (max-height:900), landscape-phone (max-height:480 + landscape).
   ========================================================================= */

/* ---- MOBILE + TABLET shared collapse (<=1023): single-column intros & galleries ---- */

@media (max-width: 1024px) {
  .dining-section__intro,
  .dining-gallery--restaurant,
  .dining-gallery--terrace,
  .dining-gallery--spa,
  .dessange-gallery {
    grid-template-columns: 1fr;
  }

  .restaurant-shell,
  .restaurant-shell--hero,
  .restaurant-page--restaurant .restaurant-shell,
  .spa-page .restaurant-shell,
  .dessange-section .restaurant-shell {
    width: min(100vw - 40px, 1840px);
  }

  /* generic hero / shared shell tweaks */

  .restaurant-hero {
    min-height: 100svh;
    padding-bottom: 48px;
  }

  .restaurant-hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .restaurant-hero__content--dining,
  .spa-hero__content--nobil,
  .dessange-hero__content--nobil {
    padding-left: 0;
  }

  .restaurant-hero__actions,
  .restaurant-hero__actions--dining,
  .dining-section__controls {
    flex-wrap: wrap;
  }

  .dining-photo {
    min-height: 320px;
  }

  .dessange-gallery__photo {
    min-height: 320px;
  }

  /* intro -> single column for every page */

  .dining-section__intro,
  .restaurant-page--restaurant .dining-section__intro,
  .spa-section .dining-section__intro,
  .dessange-section__intro {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "copy-left"
      "copy-right"
      "controls";
    column-gap: 18px;
  }

  .dessange-section__intro {
    grid-template-areas:
      "heading"
      "copy"
      "controls";
  }

  .spa-section .dining-section__copy:nth-child(2) {
    grid-area: copy;
  }

  .spa-section .dining-section__copy:nth-child(3) {
    grid-area: copy-right;
  }

  .spa-section .dining-section__intro {
    grid-template-areas:
      "heading"
      "copy"
      "controls";
  }

  .dining-section__controls,
  .restaurant-page--restaurant .dining-section__controls,
  .spa-section .dining-section__controls,
  .dessange-section__intro .dining-section__controls {
    justify-self: start;
    padding-top: 0;
    margin-top: 8px;
  }

  .dining-gallery,
  .dining-gallery--restaurant,
  .dining-gallery--terrace,
  .dining-gallery--spa,
  .dessange-gallery,
  .conference-detail__gallery {
    grid-template-columns: 1fr;
  }

  .restaurant-page--restaurant .dining-gallery--restaurant,
  .restaurant-page--restaurant .dining-gallery--terrace {
    grid-template-columns: 1fr;
  }

  /* tablet & mobile: show exactly ONE photo per view (the carousel scrolls to
     the rest) — restaurant/spa/salon galleries only, not conference */
  .dining-gallery[data-gallery-carousel] > *,
  .dessange-gallery[data-gallery-carousel] > * {
    flex: 0 0 100%;
    width: 100%;
  }

  /* RESTAURANT page intro / hero collapse */

  .restaurant-page--restaurant .restaurant-shell {
    width: min(100vw - 40px, 1840px);
  }

  .restaurant-page--restaurant .restaurant-hero {
    min-height: 100svh;
    padding: calc(var(--header-height) + 180px) 0 48px;
  }

  .restaurant-page--restaurant .restaurant-hero__content--dining {
    padding-left: 0;
  }

  .restaurant-page--restaurant .restaurant-hero__actions--dining {
    flex-wrap: wrap;
    gap: 14px;
  }

  .restaurant-page--restaurant .restaurant-title {
    font-size: clamp(52px, 11vw, 65px);
  }

  .restaurant-page--restaurant .restaurant-lead {
    font-size: clamp(18px, 3.6vw, 24px);
  }

  .restaurant-page--restaurant .dining-section {
    min-height: auto;
    padding: 170px 0 34px;
  }

  .restaurant-page--restaurant .dining-section__intro {
    grid-template-areas:
      "heading"
      "copy-left"
      "copy-right"
      "controls";
    row-gap: 18px;
    margin-bottom: 34px;
  }

  .restaurant-page--restaurant .dining-section__heading .restaurant-section-title {
    font-size: clamp(48px, 10vw, 65px);
    line-height: 1.08;
  }

  .restaurant-page--restaurant .dining-section__copy p {
    max-width: none;
    font-size: clamp(18px, 3.2vw, 22px);
    line-height: 1.3;
  }

  .restaurant-page--restaurant .dining-section__controls {
    justify-self: start;
    flex-wrap: wrap;
    margin-top: 8px;
  }

  .restaurant-page--restaurant .dining-photo {
    height: auto;
    min-height: 320px;
    background-size: cover;
  }

  /* SPA page intro / hero collapse */

  .spa-section .dining-section__intro {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "copy"
      "controls";
    row-gap: 22px;
    margin-bottom: 34px;
  }

  .spa-section .dining-section__controls {
    justify-self: start;
    padding-top: 0;
  }

  .spa-section .dining-gallery--spa {
    grid-template-columns: 1fr;
  }

  .spa-page .restaurant-hero {
    min-height: 100svh;
    padding: calc(var(--header-height) + 96px) 0 64px;
  }

  .spa-page .restaurant-hero__content {
    margin-left: 0;
  }

  .spa-page .restaurant-hero__crest {
    width: 180px;
  }

  .spa-page .restaurant-title {
    font-size: 52px;
    line-height: 54px;
  }

  .spa-page .restaurant-lead {
    font-size: 20px;
  }

  .spa-section {
    padding: 90px 0 54px;
  }

  .spa-section .dining-section__heading .restaurant-section-title {
    font-size: 48px;
    line-height: 54px;
  }

  .spa-section .dining-section__copy p {
    font-size: 18px;
    line-height: 24px;
  }

  .spa-section .dining-gallery--spa .dining-photo {
    min-height: 320px;
  }

  /* DESSANGE page intro / hero collapse */

  .dessange-hero--nobil {
    min-height: 100svh;
  }

  .dessange-hero__content--nobil .restaurant-hero__crest {
    width: 190px;
  }

  .dessange-hero__content--nobil .restaurant-lead {
    font-size: 1.125rem;
  }

  .dessange-section {
    padding-top: 82px;
  }

  .dessange-section__intro {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "copy"
      "controls";
    margin-bottom: 34px;
  }

  .dessange-section__intro .dining-section__copy,
  .dessange-section__intro .dining-section__controls {
    padding-top: 0;
  }

  .dessange-section__intro .dining-section__copy p {
    font-size: 1.125rem;
    line-height: 1.35;
  }

  .dessange-gallery {
    grid-template-columns: 1fr;
  }

  .dessange-gallery__photo {
    min-height: 420px;
  }

  /* CONFERENCE collapse */

  .conference-detail {
    min-height: auto;
    padding: calc(var(--header-height) + 72px) 0 64px;
  }

  .conference-detail__shell {
    width: min(100vw - 32px, 860px);
    min-height: auto;
    display: block;
  }

  .conference-detail__back,
  .conference-detail__intro,
  .conference-detail__actions,
  .conference-detail__gallery {
    position: static;
  }

  .conference-detail__back {
    margin-bottom: 28px;
  }

  .conference-detail__title {
    font-size: clamp(3rem, 8vw, 4.0625rem);
    line-height: 1.08;
  }

  .conference-detail__copy {
    width: 100%;
    grid-template-columns: 1fr;
    margin-top: 24px;
    font-size: 1.15rem;
    line-height: 1.45;
  }

  .conference-detail__actions {
    width: auto;
    margin: 36px 0 48px;
    justify-content: flex-start;
  }

  .conference-detail__gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .conference-detail__photo {
    height: min(62vw, 520px);
  }

  /* zoom modal width on tablet/down */

  .service-zoom-modal {
    --zoom-image-width: min(1100px, calc(100vw - 220px));
  }
}

/* ---- TABLET ONLY (768-1023): pixel layout rebuild ---- */

@media (min-width: 768px) and (max-width: 1024px) {
  .restaurant-shell {
    padding-top: initial;
  }

  .restaurant-page--restaurant #restaurant-main,
  .restaurant-page--restaurant #terrace-main,
  .spa-page #spa-main,
  .dessange-page #dessange-main,
  .conference-page--figma .conference-detail {
    min-height: auto;
    height: auto;
    padding: 96px 32px 56px;
    box-sizing: border-box;
  }

  .restaurant-page--restaurant #restaurant-main .restaurant-shell,
  .restaurant-page--restaurant #terrace-main .restaurant-shell,
  .spa-page #spa-main .restaurant-shell,
  .dessange-page #dessange-main .restaurant-shell,
  .conference-page--figma .conference-detail__shell {
    width: 100%;
    margin: 0;
  }

  .conference-page--figma .conference-detail__shell {
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    grid-template-columns: none;
    grid-template-areas: none;
    gap: 0;
  }

  .conference-page--figma .conference-detail__back {
    width: 45px;
    height: 45px;
    margin: 0 0 24px;
    transform: none;
    flex: 0 0 auto;
  }

  .conference-page--figma .conference-detail__intro {
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    grid-area: auto;
  }

  .restaurant-page--restaurant #restaurant-main .dining-section__intro,
  .restaurant-page--restaurant #terrace-main .dining-section__intro,
  .spa-page #spa-main .dining-section__intro,
  .dessange-page #dessange-main .dessange-section__intro {
    width: 100%;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .restaurant-page--restaurant #restaurant-main .dining-section__heading,
  .restaurant-page--restaurant #terrace-main .dining-section__heading,
  .spa-page #spa-main .dining-section__heading,
  .dessange-page #dessange-main .dining-section__heading {
    width: 100%;
    margin: 0 0 24px;
    grid-column: auto;
    transform: none;
  }

  .restaurant-page--restaurant #restaurant-main .dining-section__heading .restaurant-section-title,
  .restaurant-page--restaurant #terrace-main .dining-section__heading .restaurant-section-title,
  .spa-page #spa-main .dining-section__heading .restaurant-section-title,
  .dessange-page #dessange-main .restaurant-section-title,
  .conference-page--figma .conference-detail__title {
    max-width: none;
    margin: 0;
    font-size: 60px;
    line-height: 50px;
    letter-spacing: 0;
  }

  .conference-page--figma .conference-detail__title {
    width: 100%;
  }

  .dessange-page #dessange-main .restaurant-section-title {
    max-width: 520px;
  }

  .restaurant-page--restaurant #restaurant-main .dining-section__copy,
  .restaurant-page--restaurant #terrace-main .dining-section__copy,
  .spa-page #spa-main .dining-section__copy,
  .dessange-page #dessange-main .dining-section__copy {
    width: 100%;
    margin: 0;
    padding: 0;
    transform: none;
  }

  .restaurant-page--restaurant #restaurant-main .dining-section__copy + .dining-section__copy,
  .restaurant-page--restaurant #terrace-main .dining-section__copy + .dining-section__copy,
  .spa-page #spa-main .dining-section__copy + .dining-section__copy,
  .dessange-page #dessange-main .dining-section__copy + .dining-section__copy {
    margin-top: 16px;
  }

  .restaurant-page--restaurant #restaurant-main .dining-section__copy p,
  .restaurant-page--restaurant #terrace-main .dining-section__copy p,
  .spa-page #spa-main .dining-section__copy p,
  .spa-page #spa-main .dining-section__copy:nth-child(2) p,
  .spa-page #spa-main .dining-section__copy:nth-child(3) p,
  .dessange-page #dessange-main .dining-section__copy p,
  .dessange-page #dessange-main .dining-section__copy:nth-child(2) p,
  .dessange-page #dessange-main .dining-section__copy:nth-child(3) p {
    width: 100%;
    max-width: none;
    margin: 0;
    font-size: 16px;
    line-height: normal;
    color: #222121;
  }

  .conference-page--figma .conference-detail__copy {
    width: 100%;
    max-width: none;
    margin: 24px 0 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    grid-template-columns: none;
    font-size: 16px;
    line-height: normal;
    color: #222121;
  }

  .conference-page--figma .conference-detail__copy p {
    max-width: none;
    margin: 0;
  }

  .restaurant-page--restaurant #restaurant-main .dining-section__controls,
  .restaurant-page--restaurant #terrace-main .dining-section__controls,
  .spa-page #spa-main .dining-section__controls,
  .dessange-page #dessange-main .dining-section__controls,
  .conference-page--figma .conference-detail__actions {
    width: 100%;
    margin: 48px 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    align-self: stretch;
    justify-self: auto;
    grid-area: auto;
  }

  .conference-page--figma .conference-detail__actions {
    margin-bottom: 24px;
    transform: none;
  }

  .restaurant-page--restaurant #restaurant-main .dining-section__menu-button,
  .restaurant-page--restaurant #terrace-main .dining-section__menu-button,
  .spa-page #spa-main .dining-section__menu-button,
  .dessange-page #dessange-main .dining-section__menu-button,
  .conference-page--figma .conference-detail__price {
    /* stretch to the label width (RO "Meniul restaurantului" overflows a fixed
       180px) while keeping 180px as the minimum for the short labels */
    width: fit-content;
    min-width: 180px;
    max-width: 100%;
    min-height: 45px;
    padding: 0 16px;
    border-color: #c6c1a1;
    font-size: 12px;
    line-height: normal;
    letter-spacing: 2.4px;
  }

  .restaurant-page--restaurant #restaurant-main .dining-section__nav,
  .restaurant-page--restaurant #terrace-main .dining-section__nav,
  .spa-page #spa-main .dining-section__nav,
  .dessange-page #dessange-main .dining-section__nav,
  .conference-page--figma .conference-detail__arrows {
    gap: 16px;
  }

  .restaurant-page--restaurant #restaurant-main .dining-section__nav .button-circle,
  .restaurant-page--restaurant #terrace-main .dining-section__nav .button-circle,
  .spa-page #spa-main .dining-section__nav .button-circle,
  .dessange-page #dessange-main .dining-section__nav .button-circle,
  .conference-page--figma .conference-detail__arrow {
    width: 45px;
    height: 45px;
    min-width: 45px;
    min-height: 45px;
    flex: 0 0 45px;
    box-sizing: border-box;
  }

  .restaurant-page--restaurant #restaurant-main .dining-gallery--restaurant,
  .restaurant-page--restaurant #terrace-main .dining-gallery--terrace,
  .spa-page #spa-main .dining-gallery--spa,
  .dessange-page #dessange-main .dessange-gallery,
  .conference-page--figma .conference-detail__gallery {
    --service-gallery-gap: 24px;
    width: 100%;
    max-width: none;
  }

  .conference-page--figma .conference-detail__gallery {
    margin: 0;
    transform: none;
  }

  .restaurant-page--restaurant #restaurant-main .dining-photo,
  .restaurant-page--restaurant #terrace-main .dining-photo,
  .spa-page #spa-main .dining-gallery--spa .dining-photo,
  .dessange-page #dessange-main .dessange-gallery__photo,
  .conference-page--figma .conference-detail__photo {
    height: 500px;
    min-height: 500px;
    background-size: cover;
    background-position: center;
  }

  .conference-page--figma .conference-detail__photo {
    margin: 0;
  }

  .conference-page--figma .conference-detail__photo img,
  .conference-page--figma .conference-detail__photo--left img,
  .conference-page--figma .conference-detail__photo--right img {
    position: static;
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 0;
    object-fit: cover;
  }

  /* HERO rebuild for tablet (centered, full-svh column) */

  .restaurant-page--restaurant .restaurant-hero,
  .spa-page .restaurant-hero,
  .dessange-page .restaurant-hero {
    min-height: 100svh;
    height: auto;
    padding: 0;
    align-items: stretch;
    overflow: hidden;
    background: #141414;
  }

  .restaurant-page--restaurant .restaurant-hero__media,
  .restaurant-page--restaurant .restaurant-hero__overlay,
  .spa-page .restaurant-hero__media,
  .spa-page .restaurant-hero__overlay,
  .dessange-page .restaurant-hero__media,
  .dessange-page .restaurant-hero__overlay {
    inset: 0;
  }

  .restaurant-page--restaurant .restaurant-hero__overlay--dining,
  .spa-page .restaurant-hero__overlay {
    mix-blend-mode: multiply;
  }

  .dessange-page .dessange-hero__overlay--nobil {
    background: linear-gradient(37.603deg, #000 1.665%, rgba(0, 0, 0, 0) 127.15%);
    mix-blend-mode: multiply;
  }

  .restaurant-page--restaurant .restaurant-shell--hero,
  .spa-page .restaurant-shell--hero,
  .dessange-page .restaurant-shell--hero {
    width: 100%;
    min-height: 100svh;
    margin: 0;
    display: flex;
    justify-content: center;
    padding-top: initial;
  }

  .restaurant-page--restaurant .restaurant-hero__content--dining,
  .spa-page .restaurant-hero__content,
  .dessange-page .dessange-hero__content--nobil {
    width: 100%;
    max-width: none;
    min-height: 100svh;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-left: 32px;
    padding-right: 32px;
  }

  .restaurant-page--restaurant .restaurant-hero__content--dining {
    padding-bottom: 42px;
    justify-content: center;
  }

  .spa-page .restaurant-hero__content {
    padding-top: clamp(260px, 30.7svh, 314px);
    padding-bottom: 23px;
  }

  .dessange-page .dessange-hero__content--nobil {
    padding-top: clamp(260px, 30.3svh, 310px);
    padding-bottom: 23px;
  }

  .restaurant-page--restaurant .restaurant-hero__crest,
  .spa-page .restaurant-hero__crest,
  .dessange-page .dessange-hero__content--nobil .restaurant-hero__crest {
    flex: 0 0 auto;
    margin: 0 0 48px;
  }

  .restaurant-page--restaurant .restaurant-hero__crest {
    width: 250px;
    height: 152px;
  }

  .spa-page .restaurant-hero__crest {
    width: 221.662px;
    height: 160.498px;
  }

  .dessange-page .dessange-hero__content--nobil .restaurant-hero__crest {
    width: 204px;
    height: 167px;
  }

  .restaurant-page--restaurant .restaurant-hero__crest img,
  .spa-page .restaurant-hero__crest img,
  .dessange-page .dessange-hero__content--nobil .restaurant-hero__crest img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .restaurant-page--restaurant .restaurant-title,
  .spa-page .restaurant-title,
  .dessange-page .dessange-hero__title {
    width: 100%;
    max-width: 388px;
    margin: 0;
    display: block;
    font-family: var(--font-heading);
    font-size: 60px;
    font-weight: 400;
    line-height: 50px;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
  }

  .restaurant-page--restaurant .restaurant-lead,
  .spa-page .restaurant-lead,
  .dessange-page .dessange-hero__content--nobil .restaurant-lead {
    width: 100%;
    max-width: 388px;
    margin: 16px 0 0;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    text-align: center;
  }

  .restaurant-page--restaurant .restaurant-hero__actions--dining,
  .spa-page .restaurant-hero__actions--dining,
  .dessange-page .restaurant-hero__actions--dining {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
  }

  .restaurant-page--restaurant .restaurant-hero__actions--dining {
    width: 100%;
    max-width: 704px;
    gap: 24px;
  }

  .spa-page .restaurant-hero__actions--dining,
  .dessange-page .restaurant-hero__actions--dining {
    width: 100%;
    max-width: 340px;
    gap: 16px;
  }

  .restaurant-page--restaurant .restaurant-hero__actions--dining .button-circle,
  .spa-page .restaurant-hero__actions--dining .button-circle,
  .dessange-page .restaurant-hero__actions--dining .button-circle {
    flex: 0 0 45px;
    width: 45px;
    min-width: 45px;
    height: 45px;
    min-height: 45px;
  }

  .restaurant-page--restaurant .restaurant-button--tab,
  .spa-page .restaurant-button--tab,
  .dessange-page .restaurant-button--tab {
    min-height: 45px;
    height: 45px;
    padding: 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-color: #fff;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 1.8px;
    white-space: nowrap;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}

/* short tablet (height hack kept; width bound made canon) */

@media (min-width: 768px) and (max-width: 1024px) and (max-height: 900px) {
  .restaurant-page--restaurant .restaurant-hero__content--dining,
  .spa-page .restaurant-hero__content,
  .dessange-page .dessange-hero__content--nobil {
    padding-top: clamp(150px, 21svh, 180px);
  }
}

/* ---- MOBILE (<=767) ---- */

@media (max-width: 767px) {
  .restaurant-hero,
  .restaurant-page--restaurant .restaurant-hero,
  .spa-page .restaurant-hero,
  .dessange-hero--nobil {
    min-height: 680px;
    padding-top: calc(var(--header-height) + 76px);
    padding-bottom: 56px;
  }

  .restaurant-hero__content--dining,
  .dessange-hero__content--nobil,
  .spa-page .restaurant-hero__content {
    padding-left: 0;
    margin-left: 0;
  }

  .restaurant-title,
  .restaurant-page--restaurant .restaurant-title,
  .spa-page .restaurant-title {
    font-size: clamp(2.625rem, 12vw, 4rem);
    line-height: 1.05;
  }

  .restaurant-lead,
  .restaurant-page--restaurant .restaurant-lead,
  .spa-page .restaurant-lead,
  .dessange-hero__content--nobil .restaurant-lead {
    font-size: 1.0625rem;
    line-height: 1.36;
  }

  .restaurant-page--restaurant .restaurant-hero__crest {
    width: 190px;
  }

  .restaurant-page--restaurant .restaurant-button--tab,
  .restaurant-page--restaurant .dining-section__menu-button {
    width: auto;
    max-width: 100%;
  }

  .spa-page .restaurant-hero {
    min-height: 680px;
    padding-top: calc(var(--header-height) + 64px);
  }

  .spa-page .restaurant-hero__crest {
    width: 150px;
  }

  .spa-page .restaurant-title {
    font-size: 42px;
    line-height: 46px;
  }

  .spa-page .restaurant-lead {
    font-size: 17px;
    line-height: 1.35;
  }

  .spa-page .restaurant-hero__actions--dining,
  .spa-section .dining-section__controls {
    flex-direction: row;
  }

  .dessange-hero--nobil {
    min-height: 700px;
    padding-top: calc(var(--header-height) + 64px);
  }

  .dessange-hero__title {
    font-size: 2.55rem;
  }

  .dessange-hero__title span {
    font-size: 1rem;
  }

  .dessange-page .restaurant-hero__actions--dining {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .dessange-section__intro .dining-section__controls {
    flex-direction: row;
  }

  .dessange-section .restaurant-shell {
    width: min(100vw - 28px, 1840px);
  }

  .dessange-section__intro .restaurant-section-title {
    max-width: none;
    font-size: 2.5rem;
    line-height: 1.12;
  }

  .dining-section,
  .restaurant-page--restaurant .dining-section,
  .spa-section,
  .dessange-section {
    padding-top: 50px;
  }

  .spa-section {
    padding-top: 68px;
  }

  .restaurant-page--restaurant .dining-section__heading .restaurant-section-title,
  .spa-section .dining-section__heading .restaurant-section-title,
  .dessange-section__intro .restaurant-section-title,
  .conference-detail__title {
    font-size: clamp(2.5rem, 11vw, 3.5rem);
    line-height: 1.12;
  }

  .spa-section .dining-section__heading .restaurant-section-title {
    font-size: 40px;
    line-height: 46px;
  }

  .restaurant-page--restaurant .dining-section__copy p,
  .spa-section .dining-section__copy p,
  .dessange-section__intro .dining-section__copy p,
  .conference-detail__copy {
    font-size: 1rem;
    line-height: 1.45;
  }

  /* mobile: intro stacks in DOM order (heading -> copy -> controls), copy is
     left-aligned, and the controls are ONE row with the menu button on the left
     and the prev/next arrows on the right. (The tablet block has the same; this
     extends it below 768 so the button is not clipped and copy is not centered.) */
  .restaurant-page--restaurant #restaurant-main .dining-section__intro,
  .restaurant-page--restaurant #terrace-main .dining-section__intro,
  .spa-page #spa-main .dining-section__intro,
  .dessange-page #dessange-main .dessange-section__intro {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .restaurant-page--restaurant #restaurant-main .dining-section__heading,
  .restaurant-page--restaurant #terrace-main .dining-section__heading,
  .spa-page #spa-main .dining-section__heading,
  .dessange-page #dessange-main .dining-section__heading {
    margin: 0 0 24px;
  }

  .restaurant-page--restaurant #restaurant-main .dining-section__copy,
  .restaurant-page--restaurant #terrace-main .dining-section__copy,
  .spa-page #spa-main .dining-section__copy,
  .dessange-page #dessange-main .dining-section__copy {
    width: 100%;
    text-align: left;
  }

  .restaurant-page--restaurant #restaurant-main .dining-section__controls,
  .restaurant-page--restaurant #terrace-main .dining-section__controls,
  .spa-page #spa-main .dining-section__controls,
  .dessange-page #dessange-main .dining-section__controls {
    width: 100%;
    margin-top: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .restaurant-page--restaurant .dining-photo,
  .spa-section .dining-gallery--spa .dining-photo,
  .dessange-gallery__photo,
  .conference-detail__photo {
    min-height: 320px;
    height: 320px;
  }

  /* CONFERENCE mobile */

  .conference-detail {
    padding-top: calc(var(--header-height) + 48px);
  }

  .conference-detail__shell {
    width: min(100vw - 28px, 860px);
  }

  .conference-detail__actions {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }

  .conference-detail__photo {
    height: 280px;
  }

  /* price modal mobile */

  .service-price-modal__content {
    width: min(562px, calc(100% - 48px));
    padding-top: 36px;
    padding-bottom: 60px;
  }
}

/* ---- MOBILE 375-767: shell gutters + full hero/conference rebuild ---- */

@media (min-width: 375px) and (max-width: 767px) {
  .restaurant-shell,
  .restaurant-shell--hero,
  .restaurant-page--restaurant .restaurant-shell,
  .spa-page .restaurant-shell,
  .dessange-section .restaurant-shell,
  .conference-detail__shell {
    width: min(100vw - 28px, 760px);
  }

  .restaurant-shell {
    padding-top: initial;
  }

  .restaurant-hero__actions--dining,
  .spa-page .restaurant-hero__actions--dining,
  .dessange-page .restaurant-hero__actions--dining,
  .dining-section__controls,
  .spa-section .dining-section__controls,
  .dessange-section__intro .dining-section__controls,
  .conference-detail__actions {
    gap: 14px;
  }

  .dining-section__nav,
  .conference-detail__arrows {
    gap: 12px;
  }

  .restaurant-page .dining-section__controls,
  .spa-section .dining-section__controls,
  .dessange-section__intro .dining-section__controls,
  .conference-detail__actions {
    width: 100%;
    justify-content: space-between;
  }

  .dining-gallery[data-gallery-carousel],
  .dessange-gallery[data-gallery-carousel],
  .conference-detail__gallery[data-gallery-carousel] {
    --service-gallery-gap: 16px;
  }

  .dining-photo,
  .spa-section .dining-gallery--spa .dining-photo,
  .dessange-gallery__photo,
  .conference-detail__photo {
    height: clamp(440px, 118vw, 560px);
    min-height: clamp(440px, 118vw, 560px);
  }

  .conference-detail__photo {
    margin: 0;
  }

  .conference-detail__photo img,
  .conference-detail__photo--left img,
  .conference-detail__photo--right img {
    position: static;
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 0;
    object-fit: cover;
  }

  /* zoom modal mobile relayout */

  .service-zoom-modal {
    --zoom-control-size: 54px;
    --button-circle-size: var(--zoom-control-size);
    --zoom-image-width: calc(100vw - 32px);
    padding: 0 16px;
  }

  .service-zoom-modal__stage {
    width: 100%;
    display: block;
  }

  .service-zoom-modal__figure {
    width: var(--zoom-image-width);
    height: min(62dvh, 560px);
    margin: 0 auto;
    aspect-ratio: auto;
  }

  .service-zoom-modal__image {
    object-fit: cover;
  }

  /* close is position:fixed (pinned to the screen), so it must use a positive
     top to stay on-screen — the old -58px was from the absolute-positioned era
     and pushed the X above the top edge, making it look like there was no close. */
  .service-zoom-modal__close {
    top: 16px;
    right: 16px;
  }

  .service-zoom-modal__nav {
    position: absolute;
    top: 50%;
    width: var(--zoom-control-size);
    height: var(--zoom-control-size);
    transform: translateY(-50%);
  }

  .service-zoom-modal__nav--prev {
    left: 8px;
    grid-column: auto;
  }

  .service-zoom-modal__nav--next {
    right: 8px;
    grid-column: auto;
  }

  /* CONFERENCE full mobile rebuild */

  .conference-page--figma .conference-detail {
    min-height: auto;
    height: auto;
    padding: 96px 0 24px;
  }

  .conference-page--figma .conference-detail__shell {
    width: 100%;
    padding: 16px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .conference-page--figma .conference-detail__back {
    width: 45px;
    height: 45px;
    margin: 0 0 24px;
    transform: none;
  }

  .conference-page--figma .conference-detail__title {
    width: 100%;
    margin: 0;
    font-size: 60px;
    line-height: 50px;
  }

  .conference-page--figma .conference-detail__title-extra {
    display: none;
  }

  .conference-page--figma .conference-detail__copy {
    width: 100%;
    margin: 24px 0 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-size: 16px;
    line-height: normal;
    color: #222121;
  }

  .conference-page--figma .conference-detail__copy p {
    margin: 0;
    max-width: none;
  }

  .conference-page--figma .conference-detail__actions {
    width: 100%;
    height: 45px;
    margin: 48px 0 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transform: none;
  }

  .conference-page--figma .conference-detail__price {
    width: 179px;
    min-height: 45px;
    height: 45px;
    padding: 0 32px;
    border-color: #c6c1a1;
    font-size: 12px;
    line-height: normal;
    letter-spacing: 2.4px;
  }

  .conference-page--figma .conference-detail__arrows {
    gap: 16px;
  }

  .conference-page--figma .conference-detail__arrow {
    width: 45px;
    min-width: 45px;
    height: 45px;
    min-height: 45px;
    flex: 0 0 45px;
  }

  .conference-page--figma .conference-detail__gallery {
    --service-gallery-gap: 16px;
    width: 100%;
    margin: 0;
  }

  .conference-page--figma .conference-detail__photo {
    height: 340px;
    min-height: 340px;
    margin: 0;
  }

  .conference-page--figma .conference-detail__photo img,
  .conference-page--figma .conference-detail__photo--left img,
  .conference-page--figma .conference-detail__photo--right img {
    position: static;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
  }

  /* HERO full mobile rebuild (centered, full-svh column) */

  .restaurant-page--restaurant .restaurant-hero,
  .spa-page .restaurant-hero,
  .dessange-page .restaurant-hero {
    min-height: 100svh;
    height: auto;
    padding: 0;
    align-items: stretch;
    overflow: hidden;
    background: #141414;
  }

  .restaurant-page--restaurant .restaurant-hero__media,
  .restaurant-page--restaurant .restaurant-hero__overlay,
  .spa-page .restaurant-hero__media,
  .spa-page .restaurant-hero__overlay,
  .dessange-page .restaurant-hero__media,
  .dessange-page .restaurant-hero__overlay {
    inset: 0;
  }

  .restaurant-page--restaurant .restaurant-hero__overlay--dining,
  .spa-page .restaurant-hero__overlay {
    mix-blend-mode: multiply;
  }

  .dessange-page .dessange-hero__overlay--nobil {
    background: linear-gradient(37.603deg, #000 1.665%, rgba(0, 0, 0, 0) 127.15%);
    mix-blend-mode: multiply;
  }

  .restaurant-page--restaurant .restaurant-shell--hero,
  .spa-page .restaurant-shell--hero,
  .dessange-page .restaurant-shell--hero {
    width: 100%;
    min-height: 100svh;
    margin: 0;
    display: flex;
    justify-content: center;
  }

  .restaurant-page--restaurant .restaurant-hero__content--dining,
  .spa-page .restaurant-hero__content,
  .dessange-page .dessange-hero__content--nobil {
    width: 100%;
    max-width: none;
    min-height: 100svh;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: calc(var(--header-height, 60px) + 24px);
    padding-bottom: 24px;
  }

  .restaurant-page--restaurant .restaurant-hero__crest,
  .spa-page .restaurant-hero__crest,
  .dessange-page .dessange-hero__content--nobil .restaurant-hero__crest {
    flex: 0 0 auto;
    margin: auto 0 40px;
  }

  .restaurant-page--restaurant .restaurant-hero__crest {
    width: 250px;
    height: 152px;
  }

  .spa-page .restaurant-hero__crest {
    width: 221.662px;
    height: 160.498px;
  }

  .dessange-page .dessange-hero__content--nobil .restaurant-hero__crest {
    width: 204px;
    height: 167px;
  }

  .restaurant-page--restaurant .restaurant-hero__crest img,
  .spa-page .restaurant-hero__crest img,
  .dessange-page .dessange-hero__content--nobil .restaurant-hero__crest img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .restaurant-page--restaurant .restaurant-title,
  .spa-page .restaurant-title,
  .dessange-page .dessange-hero__title {
    width: 100%;
    max-width: 343px;
    margin: 0;
    display: block;
    text-align: center;
    text-transform: none;
  }

  .restaurant-page--restaurant .restaurant-lead,
  .spa-page .restaurant-lead,
  .dessange-page .dessange-hero__content--nobil .restaurant-lead {
    width: 100%;
    max-width: 343px;
    margin: 16px 0 0;
    text-align: center;
  }

  .restaurant-page--restaurant .restaurant-hero__actions--dining,
  .spa-page .restaurant-hero__actions--dining,
  .dessange-page .restaurant-hero__actions--dining {
    margin-top: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
  }

  /* button row tracks the page content band (same as .restaurant-shell, 14px
     gutters) instead of a fixed px width, so the buttons stay on the grid /
     near the edge at every phone width instead of drifting inward (centred) on
     phones wider than 375. Same for all three pages. */
  .restaurant-page--restaurant .restaurant-hero__actions--dining,
  .spa-page .restaurant-hero__actions--dining,
  .dessange-page .restaurant-hero__actions--dining {
    width: min(100vw - 28px, 760px);
    max-width: none;
    gap: 16px;
  }

  .restaurant-page--restaurant .restaurant-hero__actions--dining .button-circle,
  .spa-page .restaurant-hero__actions--dining .button-circle,
  .dessange-page .restaurant-hero__actions--dining .button-circle {
    flex: 0 0 45px;
    width: 45px;
    min-width: 45px;
    height: 45px;
    min-height: 45px;
  }

  .restaurant-page--restaurant .restaurant-button--tab,
  .spa-page .restaurant-button--tab,
  .dessange-page .restaurant-button--tab {
    min-height: 45px;
    height: 45px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-color: #fff;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 1.8px;
    white-space: nowrap;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  /* RESTAURANT 375 fix: crest + title + lead + tab pair grouped compactly,
     centered in the upper-middle (not spread full-height with buttons pinned
     to the very bottom). The two tab buttons sit directly under the lead as a
     centered pair; the back-arrow does not push the pair off-center. */

  .restaurant-page--restaurant .restaurant-hero__content--dining {
    justify-content: center;
    padding-bottom: 24px;
  }

  .restaurant-page--restaurant .restaurant-hero__crest {
    margin: 0 0 24px;
  }

  .restaurant-page--restaurant .restaurant-hero__actions--dining {
    margin-top: 24px;
    flex-wrap: wrap;
    row-gap: 12px;
  }
}

/* ---- SUB-MOBILE device hack (<=374) ---- */

@media (max-width: 374px) {
  .restaurant-shell,
  .restaurant-shell--hero,
  .restaurant-page--restaurant .restaurant-shell,
  .spa-page .restaurant-shell,
  .spa-page .restaurant-shell--hero,
  .dessange-page .restaurant-shell--hero,
  .dessange-section .restaurant-shell,
  .conference-detail__shell {
    width: min(100vw - 20px, 760px);
  }

  .restaurant-title,
  .restaurant-page--restaurant .restaurant-title,
  .spa-page .restaurant-title,
  .restaurant-page--restaurant .dining-section__heading .restaurant-section-title,
  .spa-section .dining-section__heading .restaurant-section-title,
  .dessange-section__intro .restaurant-section-title,
  .conference-detail__title {
    font-size: 2.25rem;
  }

  /* keep the hero button row on the (tighter) <=374 page grid too */
  .restaurant-page--restaurant .restaurant-hero__actions--dining,
  .spa-page .restaurant-hero__actions--dining,
  .dessange-page .restaurant-hero__actions--dining {
    width: min(100vw - 20px, 760px);
    max-width: none;
  }

  .restaurant-page--restaurant .restaurant-button--tab,
  .spa-page .restaurant-button--tab,
  .dessange-page .restaurant-button--tab {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }
}

/* (touch-action: manipulation for the zoom/price modals now lives on the modal
   roots in modals.css — the restriction cascades to every descendant, so the old
   per-button coarse-pointer hack became redundant.) */

/* ---- landscape-phone hack (kept as-is: short-height + orientation) ---- */

@media (min-width: 600px) and (max-width: 932px) and (max-height: 480px) and (orientation: landscape) {
  .restaurant-page--restaurant .restaurant-hero,
  .spa-page .restaurant-hero,
  .dessange-page .restaurant-hero {
    height: 100svh;
    min-height: 100svh;
    padding: 0;
    align-items: stretch;
    overflow: hidden;
  }

  .restaurant-page--restaurant .restaurant-hero__media,
  .spa-page .restaurant-hero__media,
  .dessange-page .restaurant-hero__media {
    background-position: center;
    background-size: cover;
  }

  .restaurant-page--restaurant .restaurant-shell--hero,
  .spa-page .restaurant-shell--hero,
  .dessange-page .restaurant-shell--hero {
    width: 100%;
    min-height: 100svh;
    margin: 0;
    padding: var(--header-height) 32px 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .restaurant-page--restaurant .restaurant-hero__content--dining,
  .spa-page .restaurant-hero__content,
  .dessange-page .dessange-hero__content--nobil {
    width: min(760px, calc(100vw - 64px));
    max-width: none;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    grid-template-areas:
      "crest title"
      "crest lead"
      "crest actions";
    align-items: center;
    column-gap: 24px;
    row-gap: 0;
    text-align: left;
  }

  .restaurant-page--restaurant .restaurant-hero__crest,
  .spa-page .restaurant-hero__crest,
  .dessange-page .dessange-hero__content--nobil .restaurant-hero__crest {
    grid-area: crest;
    width: 128px;
    height: auto;
    margin: 0;
    align-self: center;
  }

  .spa-page .restaurant-hero__crest {
    width: 120px;
  }

  .dessange-page .dessange-hero__content--nobil .restaurant-hero__crest {
    width: 116px;
  }

  .restaurant-page--restaurant .restaurant-title,
  .spa-page .restaurant-title,
  .dessange-page .dessange-hero__title {
    grid-area: title;
    width: auto;
    max-width: none;
    margin: 0 0 10px;
    font-size: 44px;
    line-height: 40px;
    text-align: left;
  }

  .restaurant-page--restaurant .restaurant-lead,
  .spa-page .restaurant-lead,
  .dessange-page .dessange-hero__content--nobil .restaurant-lead {
    grid-area: lead;
    width: auto;
    max-width: 460px;
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 20px;
    text-align: left;
  }

  .restaurant-page--restaurant .restaurant-hero__actions--dining,
  .spa-page .restaurant-hero__actions--dining,
  .dessange-page .restaurant-hero__actions--dining {
    grid-area: actions;
    width: 100%;
    max-width: 360px;
    margin: 0;
    justify-self: start;
    gap: 12px;
  }

  .restaurant-page--restaurant .restaurant-hero__actions--dining .button-circle,
  .spa-page .restaurant-hero__actions--dining .button-circle,
  .dessange-page .restaurant-hero__actions--dining .button-circle {
    flex: 0 0 40px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .restaurant-page--restaurant .restaurant-button--tab,
  .spa-page .restaurant-button--tab,
  .dessange-page .restaurant-button--tab {
    height: 40px;
    min-height: 40px;
    padding: 0 18px;
    font-size: 11px;
    letter-spacing: 1.6px;
  }
}

/* =========================================================================
   DESKTOP (>=1024): CSS-variable-driven heroes + carousel flex layout
   ========================================================================= */

@media (min-width: 1025px) {
  /* hero custom-property setup per page */

  .restaurant-page--restaurant .restaurant-hero {
    --service-hero-bg: #141414;
    --service-hero-copy-top: clamp(320px, 42.87vh, 463px);
    --service-hero-copy-width: 620px;
    --service-hero-tab-width: 165px;
    --service-hero-tab-padding: 0 28px;
    --service-hero-tab-letter-spacing: var(--button-letter-spacing-compact);
  }

  .spa-page .restaurant-hero {
    --service-hero-bg: #141414;
    --service-hero-copy-top: clamp(calc(var(--header-height) + 72px), 33svh, calc(var(--header-height) + 237px));
    --service-hero-copy-width: 560px;
    --service-hero-tab-width: auto;
    --service-hero-tab-padding: 0 var(--button-padding-x);
    --service-hero-tab-letter-spacing: var(--button-letter-spacing);
  }

  .dessange-page .restaurant-hero {
    --service-hero-bg: #121212;
    --service-hero-copy-top: calc(var(--header-height) + 88px);
    --service-hero-copy-width: 600px;
    --service-hero-tab-width: auto;
    --service-hero-tab-padding: 0 var(--button-padding-x);
    --service-hero-tab-letter-spacing: var(--button-letter-spacing);
  }

  .restaurant-page--restaurant .restaurant-hero,
  .spa-page .restaurant-hero,
  .dessange-page .restaurant-hero {
    min-height: 100svh;
    height: auto;
    align-items: flex-start;
    overflow: hidden;
    background: var(--service-hero-bg, #141414);
  }

  .restaurant-page--restaurant .restaurant-hero__actions--dining,
  .spa-page .restaurant-hero__actions--dining,
  .dessange-page .restaurant-hero__actions--dining {
    gap: var(--service-hero-actions-gap, 25px);
    margin-top: var(--service-hero-actions-top, 48px);
  }

  .restaurant-page--restaurant .restaurant-hero__actions--dining .button-circle,
  .spa-page .restaurant-hero__actions--dining .button-circle,
  .dessange-page .restaurant-hero__actions--dining .button-circle {
    width: var(--button-circle-size);
    height: var(--button-circle-size);
    min-width: var(--button-circle-size);
    min-height: var(--button-circle-size);
  }

  .restaurant-page--restaurant .restaurant-hero__actions--dining .restaurant-button--tab,
  .spa-page .restaurant-hero__actions--dining .restaurant-button--tab,
  .dessange-page .restaurant-hero__actions--dining .restaurant-button--tab {
    width: var(--service-hero-tab-width, auto);
    max-width: 100%;
    min-height: var(--button-height);
    padding: var(--service-hero-tab-padding, 0 var(--button-padding-x));
    font-size: var(--button-font-size);
    letter-spacing: var(--service-hero-tab-letter-spacing, var(--button-letter-spacing));
  }

  /* hero pinned to viewport height; bottom-aligned shell */

  .dessange-page .restaurant-hero {
    height: 100svh;
    max-height: 100svh;
    box-sizing: border-box;
  }

  .restaurant-page--restaurant .restaurant-hero {
    height: calc(100svh - var(--header-height));
    padding: 0;
    align-items: stretch;
  }

  .restaurant-page--restaurant .restaurant-shell--hero {
    min-height: 100%;
    display: flex;
    align-items: flex-end;
    padding-bottom: clamp(132px, 15.56svh, 168px);
    box-sizing: border-box;
  }

  .restaurant-page--restaurant .restaurant-hero__content--dining {
    width: min(600px, 100%);
    max-width: 600px;
    margin-left: clamp(72px, 6.25vw, 120px);
    padding-left: 0;
  }

  .restaurant-page--restaurant .restaurant-lead {
    max-width: 600px;
  }

  /* carousel = 2-up flex on desktop (gallery shows ~2 photos side-by-side) */

  .restaurant-page--restaurant #restaurant-main .dining-gallery--restaurant,
  .restaurant-page--restaurant #terrace-main .dining-gallery--terrace,
  .spa-page #spa-main .dining-gallery--spa,
  .dessange-page #dessange-main .dessange-gallery,
  .conference-page--figma .conference-detail__gallery {
    gap: var(--service-gallery-gap, 18px);
  }

  .restaurant-page--restaurant #restaurant-main .dining-gallery--restaurant > *,
  .restaurant-page--restaurant #terrace-main .dining-gallery--terrace > *,
  .spa-page #spa-main .dining-gallery--spa > *,
  .dessange-page #dessange-main .dessange-gallery > *,
  .conference-page--figma .conference-detail__gallery > * {
    flex: 0 0 calc((100% - var(--service-gallery-gap, 18px)) / 2);
    width: calc((100% - var(--service-gallery-gap, 18px)) / 2);
  }

  .spa-page #spa-main .dining-gallery--spa {
    --service-gallery-gap: 20px;
  }

  .spa-page #spa-main .dining-gallery--spa > .dining-photo--spa-img-2816 {
    flex-basis: clamp(445px, 32.609vw, 600px);
    width: clamp(445px, 32.609vw, 600px);
  }

  .spa-page #spa-main .dining-gallery--spa > .dining-photo--spa-image-spa,
  .spa-page #spa-main .dining-gallery--spa > .dining-photo--spa-nh-6 {
    flex-basis: clamp(533px, 41.033vw, 755px);
    width: clamp(533px, 41.033vw, 755px);
  }

  .spa-page #spa-main .dining-gallery--spa > .dining-photo--spa-z633184,
  .spa-page #spa-main .dining-gallery--spa > .dining-photo--spa-nh-10 {
    flex-basis: clamp(320px, 24.239vw, 446px);
    width: clamp(320px, 24.239vw, 446px);
  }

  .spa-page #spa-main .dining-gallery--spa > .dining-photo--spa-nh-12 {
    flex-basis: clamp(445px, 32.718vw, 602px);
    width: clamp(445px, 32.718vw, 602px);
  }

  /* Dessange shows three photos at once instead of the default two, so the
     carousel reads like the SPA one. The narrower slot lands at roughly the
     same portrait proportion as SPA's 446x645 photo. */
  .dessange-page #dessange-main .dessange-gallery > * {
    flex-basis: calc((100% - var(--service-gallery-gap, 20px) * 2) / 3);
    width: calc((100% - var(--service-gallery-gap, 20px) * 2) / 3);
  }
}

/* ---- DESKTOP (1024-1439): copy sizing, hero copy bands, photo heights ---- */

@media (min-width: 1025px) and (max-width: 1439px) {
  .restaurant-shell {
    padding-top: 5rem;
  }

  .restaurant-page--restaurant .dining-section,
  .spa-section,
  .dessange-section {
    padding-top: 84px;
  }

  /* 1025-1439: the photo height tracks the viewport so the intro + slider mostly fit.
     Now that the intro is a single side-by-side row (~200px, not the old ~325px stacked
     block) there's more height to give the photo. The floor matters most: on a 13" laptop
     (~700-800px tall) the old min(520, 100vh-440) collapsed the photo to ~260px — a 2.3:1
     letterbox that cropped faces off the top. clamp() keeps a 360px floor there (a much
     gentler ~1.6:1), scaling up to the 520px design height on taller screens. The floor
     can push the very bottom of the slider under the fold on short screens — an accepted
     trade for photos that no longer cut people's heads off. */
  .restaurant-page--restaurant .dining-photo,
  .spa-section .dining-gallery--spa .dining-photo,
  .dessange-gallery__photo,
  .conference-detail__photo {
    min-height: 0;
    height: clamp(360px, calc(100vh - 360px), 520px);
  }

  /* Conference gallery: drop the base 50px margin-top so the photos sit at the grid's
     own row-gap below the intro (the gutter the DevTools grid highlights) instead of a
     detached ~70px band. The compact 13" layout reads the extra 50px as the photos
     floating away from the text. */
  .conference-page--figma .conference-detail__gallery {
    margin-top: 0;
  }

  /* Same tightening for the other service pages: their intro→gallery gap is the intro's
     own margin-bottom (~48-49px), which on the compact 13" layout reads as a big empty
     band between the buttons and the photos. Bring it down to the ~20px the conference
     grid uses, so all four service pages match at this height. */
  .restaurant-page--restaurant .dining-section__intro,
  .spa-section .dining-section__intro,
  .dessange-section__intro {
    margin-bottom: 20px;
  }

  .restaurant-page--restaurant .dining-section__copy p,
  .spa-section .dining-section__copy p,
  .dessange-section__intro .dining-section__copy p,
  .conference-detail__copy {
    font-size: 1.18rem;
    line-height: 1.35;
  }

  /* 1025-1439: keep the same side-by-side intro as >=1440 (copy on the left, controls
     on the right of the text row). This tier used to stack them into a single column
     (menu button left / arrows right), but at Mac-13 widths (~1280) that dropped the
     buttons below the copy while there was still plenty of room beside it — the ask was
     for the copy to just narrow and the buttons to hold their place. The base grid now
     handles both, so nothing overrides the layout here; only the copy font size and the
     photo heights above stay tier-specific. */

  .restaurant-page--restaurant .restaurant-hero {
    --service-hero-copy-top: clamp(calc(var(--header-height) + 120px), 44.72svh, 483px);
    --service-hero-copy-width: 532px;
  }

  .spa-page .restaurant-hero {
    --service-hero-copy-top: clamp(calc(var(--header-height) + 56px), 34.44svh, 372px);
    --service-hero-copy-width: 532px;
  }

  .dessange-page .restaurant-hero {
    --service-hero-copy-top: clamp(calc(var(--header-height) + 88px), 40svh, 432px);
    --service-hero-copy-width: 532px;
  }
}

/* =========================================================================
   LARGE (>=1440): pixel-perfect Figma layout (~1440 design canvas)
   ========================================================================= */

@media (min-width: 1440px) {
  .restaurant-page--restaurant .restaurant-hero {
    --service-hero-copy-top: clamp(calc(var(--header-height) + 120px), 44.72svh, 483px);
    --service-hero-copy-width: 600px;
  }

  .spa-page .restaurant-hero {
    --service-hero-copy-top: clamp(calc(var(--header-height) + 56px), 34.44svh, 372px);
    --service-hero-copy-width: 600px;
  }

  .dessange-page .restaurant-hero {
    --service-hero-copy-top: clamp(calc(var(--header-height) + 88px), 40svh, 432px);
    --service-hero-copy-width: 735px;
    --service-hero-padding-bottom: 64px;
  }

  /* spa hero refinement */

  .spa-page .restaurant-hero {
    --service-hero-actions-gap: 24px;
    --service-hero-actions-top: 48px;
    --service-hero-tab-width: 180px;
    --service-hero-tab-padding: 0 32px;
    --service-hero-tab-letter-spacing: 1.8px;
    min-height: 100svh;
    height: auto;
  }

  .spa-page .restaurant-hero__media,
  .spa-page .restaurant-hero__overlay {
    inset: -2px 0 0;
  }

  .spa-page .restaurant-hero__crest {
    width: 222px;
    margin-bottom: 20px;
  }

  .spa-page .restaurant-title {
    font-size: 65px;
    line-height: 65px;
  }

  .spa-page .restaurant-lead {
    font-size: 24px;
    line-height: 29px;
  }

  .spa-page #spa-main {
    min-height: min(900px, 100svh);
    height: auto;
    padding: 184px 0 77px;
  }

  .spa-page #spa-main .restaurant-shell {
    width: var(--site-content-width);
  }

  .spa-page #spa-main .dining-section__intro {
    /* copy flexes, controls = max-content (reserves the buttons' real width so they
       can't overflow into the copy). See base .spa-section note. */
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas:
      "heading controls"
      "copy controls";
    column-gap: 24px;
    row-gap: 24px;
    margin-bottom: 44px;
    align-items: end;
  }

  .spa-page #spa-main .dining-section__heading {
    grid-area: heading;
    width: auto;
    transform: translateX(4px);
  }

  .spa-page #spa-main .dining-section__heading .restaurant-section-title {
    font-size: 65px;
    line-height: 65px;
  }

  .spa-page #spa-main .dining-section__copy {
    grid-area: copy;
    transform: translateX(4px);
  }

  .spa-page #spa-main .dining-section__copy p {
    font-size: 22px;
    line-height: 26px;
  }

  .spa-page #spa-main .dining-section__copy:nth-child(2) p {
    width: min(755px, 100%);
  }

  .spa-page #spa-main .dining-section__controls {
    grid-area: controls;
    gap: 24px;
    align-self: end;
    justify-self: end;
    padding-top: 0;
  }

  .spa-page #spa-main .dining-section__menu-button {
    width: fit-content;
    min-width: 162px;
    max-width: 100%;
    padding: 0 32px;
  }

  .spa-page #spa-main .dining-section__nav {
    gap: 16px;
  }

  .spa-page #spa-main .dining-gallery--spa {
    grid-template-columns: 755px 533px;
    column-gap: 24px;
    row-gap: 24px;
  }

  .spa-page #spa-main .dining-gallery--spa .dining-photo {
    height: 500px;
    min-height: 500px;
  }

  /* conference pixel layout */

  .conference-detail {
    min-height: min(900px, 100svh);
    height: auto;
    padding: 140px 0 48px;
  }

  .conference-detail__shell {
    width: var(--site-content-width);
    /* fit-content(560px) actions column — see the base .conference-detail__shell note
       (bumped from the old fit-content(480px), which was narrower than the RU buttons). */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) fit-content(560px);
    column-gap: 24px;
    row-gap: 24px;
  }

  .conference-detail__back {
    width: 48.995px;
    height: 48.995px;
    margin-bottom: 0;
    transform: translateX(1px);
  }

  .conference-detail__title {
    width: 867px;
    font-size: 65px;
    line-height: 65px;
  }

  .conference-detail__copy {
    width: 867px;
    grid-template-columns: 421px 422px;
    gap: 24px;
    margin-top: 24px;
    font-size: 22px;
    line-height: 26px;
  }

  .conference-detail__copy p {
    max-width: none;
  }

  .conference-detail__actions {
    gap: 24px;
    margin-bottom: 0;
    transform: translate(1px, -4px);
  }

  .conference-detail__price {
    width: 162px;
    padding: 0 32px;
  }

  .conference-detail__arrows {
    gap: 16px;
  }

  .conference-detail__gallery {
    /* span the full content band (it sits in the 3-column "gallery" grid area),
       so the two photos reach the same right edge as the buttons. A fixed 1311px
       matched the 1440 band but stayed put as the band grew on wider screens. */
    width: 100%;
    grid-template-columns: 754px 533px;
    justify-content: start;
    gap: 24px;
    margin-top: 20px;
    transform: translateX(1px);
  }

  .conference-detail__photo {
    height: 500px;
    min-height: 500px;
  }

  /* dessange pixel layout */

  .dessange-page .restaurant-hero {
    --service-hero-actions-gap: 24px;
    --service-hero-actions-top: 48px;
    --service-hero-tab-width: 180px;
    --service-hero-tab-padding: 0 32px;
    --service-hero-tab-letter-spacing: 1.8px;
    --service-hero-copy-width: 640px;
    --service-hero-padding-bottom: 56px;
    min-height: 100svh;
    height: auto;
  }

  .dessange-page .restaurant-hero__media,
  .dessange-page .restaurant-hero__overlay {
    inset: -2px 0 0;
  }

  .dessange-hero__content--nobil .restaurant-hero__crest {
    width: 195px;
    height: 160px;
    margin-bottom: 24px;
  }

  .dessange-hero__content--nobil .restaurant-hero__crest img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .dessange-hero__title {
    display: block;
    font-family: var(--font-heading);
    font-size: 60px;
    font-weight: 400;
    line-height: 50px;
    text-transform: none;
  }

  .dessange-hero__content--nobil .restaurant-lead {
    margin-top: 20px;
    font-size: 24px;
    line-height: 29px;
  }

  .dessange-page #dessange-main {
    min-height: min(900px, 100svh);
    height: auto;
    padding: 184px 0 77px;
  }

  .dessange-page #dessange-main .restaurant-shell {
    width: var(--site-content-width);
  }

  .dessange-page #dessange-main .dessange-section__intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content;
    grid-template-areas:
      "heading heading ."
      "copy copy controls";
    column-gap: 24px;
    row-gap: 24px;
    margin-bottom: 44px;
  }

  .dessange-page #dessange-main .dining-section__heading {
    grid-column: 1 / span 2;
    width: 863px;
    transform: translateX(4px);
  }

  .dessange-page #dessange-main .restaurant-section-title {
    max-width: none;
    font-size: 65px;
    line-height: 65px;
    letter-spacing: 0;
  }

  .dessange-page #dessange-main .dining-section__copy {
    transform: translateX(4px);
  }

  .dessange-page #dessange-main .dining-section__copy p {
    font-size: 22px;
    line-height: 26px;
  }

  .dessange-page #dessange-main .dining-section__controls {
    gap: 24px;
    align-self: end;
    padding-top: 0;
  }

  .dessange-page #dessange-main .dining-section__menu-button {
    width: fit-content;
    min-width: 162px;
    max-width: 100%;
    padding: 0 32px;
    font-weight: 500;
    letter-spacing: 2.4px;
  }

  .dessange-page #dessange-main .dining-section__nav {
    gap: 16px;
  }

  .dessange-page #dessange-main .dessange-gallery {
    width: 1313px;
    max-width: calc(100vw - 127px);
    grid-template-columns: 421px 423px 421px;
    gap: 24px;
  }

  /* The 1313px above sizes the static three-column grid. As a carousel the
     gallery must instead fill the section, so it ends level with the arrows. */
  .dessange-page #dessange-main .dessange-gallery[data-gallery-carousel] {
    width: 100%;
    max-width: none;
  }

  .dessange-page #dessange-main .dessange-gallery__photo {
    height: 500px;
    min-height: 500px;
  }

  /* restaurant pixel layout */

  .restaurant-page--restaurant .restaurant-hero {
    --service-hero-actions-gap: 24px;
    --service-hero-tab-width: 165px;
    --service-hero-tab-padding: 0 32px;
    min-height: 100svh;
    height: auto;
  }

  /* the hero is height:auto here, so the shell's `min-height:100%` (set at the
     1024 tier) resolves to 0 and the flex-end bottom-anchoring collapses — give
     the shell a definite min-height so the content stays anchored to the bottom */
  .restaurant-page--restaurant .restaurant-shell--hero {
    min-height: 100svh;
  }

  .restaurant-page--restaurant .restaurant-lead {
    font-size: 24px;
    line-height: normal;
  }

  .restaurant-page--restaurant #restaurant-main {
    min-height: min(900px, 100svh);
    height: auto;
    padding: 184px 0 47px;
  }

  .restaurant-page--restaurant #restaurant-main .restaurant-shell {
    width: var(--site-content-width);
  }

  .restaurant-page--restaurant #restaurant-main .dining-section__intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content;
    grid-template-areas:
      "heading heading ."
      "copy-main copy-main controls";
    column-gap: 24px;
    row-gap: 24px;
    margin-bottom: 48px;
  }

  .restaurant-page--restaurant #restaurant-main .dining-section__heading {
    grid-column: 1 / span 2;
    width: 867px;
  }

  .restaurant-page--restaurant #restaurant-main .dining-section__heading .restaurant-section-title {
    font-size: 65px;
    line-height: 65px;
  }

  .restaurant-page--restaurant #restaurant-main .dining-section__copy p {
    font-size: 22px;
    line-height: 26px;
  }

  .restaurant-page--restaurant #restaurant-main .dining-section__controls {
    gap: 24px;
    align-self: end;
    margin-top: 0;
  }

  .restaurant-page--restaurant #restaurant-main .dining-section__menu-button {
    width: fit-content;
    min-width: 200px;
    max-width: 100%;
    padding: 0 32px;
  }

  .restaurant-page--restaurant #restaurant-main .dining-section__nav {
    gap: 16px;
  }

  .restaurant-page--restaurant #restaurant-main .dining-gallery--restaurant {
    grid-template-columns: minmax(0, 867fr) minmax(0, 422fr);
    column-gap: 24px;
  }

  .restaurant-page--restaurant #restaurant-main .dining-photo {
    height: 500px;
    min-height: 500px;
  }

  .restaurant-page--restaurant #terrace-main {
    min-height: min(900px, 100svh);
    height: auto;
    padding: 184px 0 47px;
  }

  .restaurant-page--restaurant #terrace-main .restaurant-shell {
    width: var(--site-content-width);
  }

  .restaurant-page--restaurant #terrace-main .dining-section__intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content;
    grid-template-areas:
      "heading heading ."
      "copy-main copy-main controls";
    column-gap: 24px;
    row-gap: 24px;
    margin-bottom: 48px;
  }

  .restaurant-page--restaurant #terrace-main .dining-section__heading {
    grid-column: 1 / span 2;
    width: 867px;
  }

  .restaurant-page--restaurant #terrace-main .dining-section__heading .restaurant-section-title {
    font-size: 65px;
    line-height: 65px;
  }

  .restaurant-page--restaurant #terrace-main .dining-section__copy p {
    font-size: 22px;
    line-height: 26px;
  }

  .restaurant-page--restaurant #terrace-main .dining-section__controls {
    gap: 24px;
    align-self: end;
    margin-top: 0;
  }

  .restaurant-page--restaurant #terrace-main .dining-section__menu-button {
    width: fit-content;
    min-width: 200px;
    max-width: 100%;
    padding: 0 32px;
  }

  .restaurant-page--restaurant #terrace-main .dining-section__nav {
    gap: 16px;
  }

  .restaurant-page--restaurant #terrace-main .dining-gallery--terrace {
    grid-template-columns: minmax(0, 755fr) minmax(0, 533fr) minmax(0, 533fr);
    column-gap: 24px;
  }

  .restaurant-page--restaurant #terrace-main .dining-photo {
    height: 500px;
    min-height: 500px;
  }
}

/* =========================================================================
   Short desktop screens: keep the hero button off the bottom edge
   =========================================================================
   The hero copy is pushed down from the top by a share of the viewport height
   (--service-hero-copy-top) while the copy block's own height is fixed, so the room
   left under the «Смотреть» button shrinks as the screen gets shorter. Measured at
   1440 wide: the salon had 44px at 900 tall and −16px at 800 — the button sat below
   the fold entirely; spa had 17px at 800. (The restaurant hero positions its copy
   differently and stays clear, so it is left alone.)

   Cap the offset by what is actually left once the copy and a 96px breathing gap are
   paid for. min() means the designed value still wins wherever there is room, so tall
   screens (1920×1080) render exactly as before; the clamp minimum still guards the
   header overlap on very short screens. The subtrahend is the copy height + 96. */
@media (min-width: 1025px) {
  .spa-page .restaurant-hero {
    --service-hero-copy-top: clamp(
      calc(var(--header-height) + 56px),
      min(34.44svh, 100svh - 604px),
      372px
    );
  }

  .dessange-page .restaurant-hero {
    --service-hero-copy-top: clamp(
      calc(var(--header-height) + 88px),
      min(40svh, 100svh - 592px),
      432px
    );
  }
}

/* =========================================================================
   XL (>=1920): full-width content per 1920 Figma (gutter 40, content 1840)
   ========================================================================= */

@media (min-width: 1920px) {
  .restaurant-page--restaurant .restaurant-shell,
  .spa-page .restaurant-shell,
  .dessange-page .restaurant-shell,
  .dessange-section .restaurant-shell {
    width: min(1840px, calc(100vw - 80px));
  }

  .conference-detail__shell {
    width: min(1840px, calc(100vw - 80px));
  }

  /* hero text block: indented to left = calc(8.33% + 35px) ≈ 195px, top 483, width 600 */

  .restaurant-page--restaurant .restaurant-hero {
    --service-hero-copy-top: clamp(calc(var(--header-height) + 120px), 44.72svh, 483px);
    --service-hero-copy-width: 600px;
    min-height: 100svh;
    height: calc(100svh - var(--header-height));
  }

  .restaurant-page--restaurant .restaurant-hero__content--dining {
    width: min(600px, 100%);
    max-width: 600px;
    margin-left: calc(8.33% + 35px);
  }

  .spa-page .restaurant-hero {
    --service-hero-copy-width: 600px;
    min-height: 100svh;
  }

  .dessange-page .restaurant-hero {
    --service-hero-copy-width: 735px;
    height: 100svh;
    max-height: 100svh;
  }

  /* gallery section: cream bg, photos fixed 645px height, ~20px gaps from 40px gutter */

  .restaurant-page--restaurant #restaurant-main,
  .restaurant-page--restaurant #terrace-main {
    min-height: auto;
    height: auto;
    padding: 192px 0 80px;
  }

  .restaurant-page--restaurant #restaurant-main .restaurant-shell,
  .restaurant-page--restaurant #terrace-main .restaurant-shell,
  .spa-page #spa-main .restaurant-shell,
  .dessange-page #dessange-main .restaurant-shell {
    width: min(1840px, calc(100vw - 80px));
  }

  .restaurant-page--restaurant #restaurant-main .dining-section__copy p,
  .restaurant-page--restaurant #terrace-main .dining-section__copy p,
  .spa-page #spa-main .dining-section__copy p,
  .dessange-page #dessange-main .dining-section__copy p {
    max-width: 755px;
  }

  .restaurant-page--restaurant #restaurant-main .dining-photo,
  .restaurant-page--restaurant #terrace-main .dining-photo,
  .spa-page #spa-main .dining-gallery--spa .dining-photo,
  .dessange-page #dessange-main .dessange-gallery__photo,
  .conference-detail__photo {
    height: 645px;
    min-height: 645px;
  }

  .spa-page #spa-main .dining-gallery--spa,
  .restaurant-page--restaurant #restaurant-main .dining-gallery--restaurant,
  .restaurant-page--restaurant #terrace-main .dining-gallery--terrace,
  .dessange-page #dessange-main .dessange-gallery,
  .conference-detail__gallery {
    --service-gallery-gap: 20px;
    gap: 20px;
  }
}

/* =========================================================================
   HERO is CENTRED on tablet + mobile only (<=1023 — the 1024 / 768 / 375 macets
   centre the crest, title, lead and the tab buttons). Desktop (>=1024) keeps the
   left-aligned macet hero at every width; the 1024-1439 laptop range gets a
   shrink block below (smaller logo + type, copy pulled up) so the left-aligned
   block still fits short laptop heights. This single authoritative block
   supersedes the per-tier hero alignment so restaurant / spa / dessange behave
   identically.
   ========================================================================= */
@media (max-width: 1024px) {
  .restaurant-page--restaurant .restaurant-hero__content--dining,
  .spa-page .restaurant-hero__content,
  .spa-page .spa-hero__content--nobil,
  .dessange-hero__content--nobil {
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    text-align: center;
  }

  .restaurant-page--restaurant .restaurant-title,
  .restaurant-page--restaurant .restaurant-lead,
  .spa-page .restaurant-title,
  .spa-page .restaurant-lead,
  .dessange-hero__content--nobil .restaurant-title,
  .dessange-hero__content--nobil .restaurant-lead {
    text-align: center;
  }

  .restaurant-page--restaurant .restaurant-hero__crest,
  .spa-page .restaurant-hero__crest,
  .dessange-hero__content--nobil .restaurant-hero__crest {
    margin-left: auto;
    margin-right: auto;
  }

  .restaurant-page--restaurant .restaurant-hero__actions--dining,
  .spa-page .restaurant-hero__actions--dining,
  .dessange-page .restaurant-hero__actions--dining {
    justify-content: center;
  }
}

/* ============================================================
   Tablet + mobile (<=1023): the hero crest / title / lead stay vertically
   centred, but the action buttons are PINNED TO THE BOTTOM of the first screen.
   Auto margins on the crest (top) and the actions (top) split the free space so
   the [crest+title+lead] group centres while the buttons drop to the bottom.
   ============================================================ */
@media (max-width: 1024px) {
  .restaurant-page--restaurant .restaurant-hero__content--dining,
  .spa-page .restaurant-hero__content,
  .dessange-page .dessange-hero__content--nobil {
    min-height: 100svh;
    justify-content: flex-start;
    padding-top: calc(var(--header-height) + 16px);
    padding-bottom: 24px;
  }

  .restaurant-page--restaurant .restaurant-hero__crest,
  .spa-page .restaurant-hero__crest,
  .dessange-page .dessange-hero__content--nobil .restaurant-hero__crest {
    margin-top: auto;
  }

  .restaurant-page--restaurant .restaurant-hero__actions--dining,
  .spa-page .restaurant-hero__actions--dining,
  .dessange-page .restaurant-hero__actions--dining {
    margin-top: auto;
  }
}

/* ============================================================
   Mobile + tablet: the hero (first screen) fills the DYNAMIC viewport height so
   it always reaches the bottom of the screen as the browser toolbar shows /
   hides. 100svh stops at the toolbar-visible height and leaves a gap once the
   toolbar retracts. Hero container + shell + content only — galleries / photos
   keep svh so they don't reflow on scroll. Browsers without dvh fall back to the
   svh rules above.
   ============================================================ */
@media (max-width: 1024px) {
  .restaurant-page--restaurant .restaurant-hero,
  .spa-page .restaurant-hero,
  .dessange-page .restaurant-hero,
  .restaurant-page--restaurant .restaurant-shell--hero,
  .spa-page .restaurant-shell--hero,
  .dessange-page .restaurant-shell--hero,
  .restaurant-page--restaurant .restaurant-hero__content--dining,
  .spa-page .restaurant-hero__content,
  .dessange-page .dessange-hero__content--nobil {
    min-height: 100dvh;
  }
}

/* ============================================================
   Desktop (>=1024): spa & dessange hero content is vertically CENTRED (per the
   macet — Салон Красоты / Нобиль СПА), not bottom-anchored like the restaurant.
   ============================================================ */
@media (min-width: 1025px) {
  /* the hero's own padding-top (188px) would stack on top of the content offset
     below — zero it so the content sits exactly at --service-hero-copy-top */
  .spa-page .restaurant-hero,
  .dessange-page .restaurant-hero {
    padding-top: 0;
  }

  .spa-page .restaurant-shell--hero,
  .dessange-page .restaurant-shell--hero {
    display: flex;
    align-items: flex-start;
    min-height: 100svh;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* content top sits at the macet offset (--service-hero-copy-top: dessange 432 /
     spa 372), not bottom-anchored and not viewport-centred */
  .spa-page .restaurant-hero__content,
  .dessange-page .dessange-hero__content--nobil {
    min-height: 0;
    margin-top: var(--service-hero-copy-top);
    padding-top: 0;
    padding-bottom: 0;
    justify-content: flex-start;
  }
}

/* ============================================================
   Laptop (1024-1439): the >=1440 macet hero (left-aligned, vertically offset)
   is too tall for short laptop heights (e.g. 1280x700) — the lead + buttons
   fall off the bottom. Keep the LEFT alignment but shrink the crest (logo) and
   the title / lead type, and pull the copy offset up, so the whole left block
   fits one screen. (Chosen over vertical-centring per design direction.)
   ============================================================ */
@media (min-width: 1025px) and (max-width: 1439px) {
  /* pull the copy block up so it clears short viewports */
  .restaurant-page--restaurant .restaurant-hero,
  .spa-page .restaurant-hero,
  .dessange-page .restaurant-hero {
    --service-hero-copy-top: clamp(calc(var(--header-height) + 24px), 24svh, 280px);
  }

  /* Dessange sits a touch lower than restaurant/SPA here: its hero copy is shorter
     (crest + title + one short lead + a single VEZI button), so on a 13" laptop
     (~700px tall) there's ~150px of empty hero below the button — dropping the block
     ~40px reads more balanced without pushing the button anywhere near the fold. */
  .dessange-page .restaurant-hero {
    --service-hero-copy-top: clamp(calc(var(--header-height) + 56px), 30svh, 340px);
  }

  /* smaller logo */
  .restaurant-page--restaurant .restaurant-hero__crest,
  .spa-page .restaurant-hero__crest,
  .dessange-page .dessange-hero__content--nobil .restaurant-hero__crest {
    width: 190px;
    height: auto;
    margin-bottom: 18px;
  }

  /* smaller title */
  .restaurant-page--restaurant .restaurant-title,
  .spa-page .restaurant-title,
  .dessange-page .dessange-hero__title {
    font-size: 40px;
    line-height: 1.05;
  }

  /* smaller lead */
  .restaurant-page--restaurant .restaurant-lead,
  .spa-page .restaurant-lead,
  .dessange-page .dessange-hero__content--nobil .restaurant-lead {
    font-size: 18px;
    line-height: 1.4;
  }

  /* tighter gap from copy to the action buttons */
  .restaurant-page--restaurant .restaurant-hero__actions--dining,
  .spa-page .restaurant-hero__actions--dining,
  .dessange-page .restaurant-hero__actions--dining {
    margin-top: 24px;
  }
}

/* ============================================================
   Mobile (<=767): the gallery photo height adapts to the viewport height so the
   heading + copy + controls + the FIRST photo always fit on one screen at ANY
   phone height (the carousel "помещается в экран"), tighter rhythm to help it fit.
   ============================================================ */
@media (max-width: 767px) {
  .restaurant-page--restaurant .dining-section,
  .spa-section,
  .dessange-section,
  .conference-detail {
    padding-top: 48px;
  }

  .restaurant-page--restaurant #restaurant-main .dining-section__copy p,
  .restaurant-page--restaurant #terrace-main .dining-section__copy p,
  .spa-page #spa-main .dining-section__copy p,
  .dessange-page #dessange-main .dining-section__copy p,
  .conference-detail__copy {
    font-size: 14px;
    line-height: 1.32;
  }

  .restaurant-page--restaurant #restaurant-main .dining-section__intro,
  .restaurant-page--restaurant #terrace-main .dining-section__intro,
  .spa-page #spa-main .dining-section__intro,
  .dessange-page #dessange-main .dessange-section__intro {
    margin-bottom: 18px;
  }

  .restaurant-page--restaurant #restaurant-main .dining-section__controls,
  .restaurant-page--restaurant #terrace-main .dining-section__controls,
  .spa-page #spa-main .dining-section__controls,
  .dessange-page #dessange-main .dining-section__controls {
    margin-top: 20px;
  }

  .dining-photo,
  .spa-section .dining-gallery--spa .dining-photo,
  .dessange-gallery__photo,
  .conference-detail__photo {
    height: min(440px, calc(100svh - 470px));
    min-height: 0;
  }
}

/* ============================================================
   THREE photos in the carousel (instead of two) on wide screens so they don't
   over-stretch — the content grid caps at 1842, so 2-up makes each photo ~910px,
   3-up ~600px. Spa / conference switch at >=1920; restaurant + salon (dessange)
   keep 2 photos at 1920 (per the restaurant macet) and switch only on 4K (>=2200).
   ============================================================ */
@media (min-width: 1920px) {
  .spa-page #spa-main .dining-gallery--spa > *,
  .conference-page--figma .conference-detail__gallery > * {
    flex: 0 0 calc((100% - var(--service-gallery-gap, 18px) * 2) / 3);
    width: calc((100% - var(--service-gallery-gap, 18px) * 2) / 3);
  }
}

@media (min-width: 2200px) {
  .restaurant-page--restaurant #restaurant-main .dining-gallery--restaurant > *,
  .restaurant-page--restaurant #terrace-main .dining-gallery--terrace > *,
  .dessange-page #dessange-main .dessange-gallery > * {
    flex: 0 0 calc((100% - var(--service-gallery-gap, 18px) * 2) / 3);
    width: calc((100% - var(--service-gallery-gap, 18px) * 2) / 3);
  }
}

.service-gallery-dots {
  display: none;
}

@media (max-width: 767px) {
  .restaurant-page--restaurant #restaurant-main .dining-section__intro,
  .restaurant-page--restaurant #terrace-main .dining-section__intro,
  .spa-page #spa-main .dining-section__intro,
  .dessange-page #dessange-main .dessange-section__intro {
    margin-bottom: 24px;
  }

  .restaurant-page--restaurant #restaurant-main .dining-section__controls,
  .restaurant-page--restaurant #terrace-main .dining-section__controls,
  .spa-page #spa-main .dining-section__controls,
  .dessange-page #dessange-main .dining-section__controls {
    margin-top: 24px;
    display: block;
  }

  .dining-section__controls .service-action-buttons,
  .conference-detail__actions .service-action-buttons {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .service-action-buttons .dining-section__menu-button {
    width: 100%;
    min-width: 0;
    min-height: 45px;
    padding: 0 16px;
    flex: none;
    font-size: 12px;
    letter-spacing: 2.4px;
  }

  .service-action-buttons a {
    order: -1;
  }

  .service-gallery-arrows {
    display: none;
  }

  .conference-page--figma .conference-detail__actions {
    width: 100%;
    height: auto;
    margin: 24px 0;
    display: block;
  }

  .conference-page--figma .conference-detail__gallery {
    margin-top: 0;
  }

  .service-gallery-dots {
    position: relative;
    z-index: 2;
    width: max-content;
    margin: -24px auto 16px;
    display: flex;
    justify-content: center;
    gap: 8px;
  }
}