@font-face {
  font-family: "Pier Sans";
  src: url("assets/fonts/pier-sans.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Shared responsive corrections. Keep this after each page's existing styles. */
html { scrollbar-gutter: stable; scroll-behavior: auto; }
body { min-width: 0; }
.page-design, .page-design article, .page-design .room-info,
.page-design .room-info li, .page-design .room-info li span { min-width: 0; }
.page-design .room-info h2, .page-design .room-info li span,
.service-content h1, .service-content h2, .service-content p { overflow-wrap: break-word; }
.page-design .closing-area .footer-brand {
  width: 280px;
  max-width: 100%;
  grid-template-columns: minmax(0, 210px) 70px;
}
.page-design .closing-area .footer-brand strong,
.page-design .closing-area .footer-brand small { min-width: 0; }
.page-design .closing-area .footer-brand img { max-width: 100%; }

@media (max-width: 1439px) {
  /* Use the homepage dropdown treatment on every page, preserving each link list. */
  .page-design .header { --internal-header: 76px; padding: 8px clamp(20px, 4vw, 56px); }
  .page-design .header .menu-toggle {
    display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px;
    padding: 0; border: 1px solid #572e1140; border-radius: 50%;
    background: transparent; color: #572e11; font: 26px/1 Arial;
  }
  .page-design .header-menu {
    position: fixed; inset: var(--internal-header) 0 auto;
    display: block; max-height: calc(100dvh - var(--internal-header)); overflow-y: auto;
    padding: 12px clamp(20px, 4vw, 56px) 20px; background: #fff4ea;
    box-shadow: 0 16px 24px #24150d20;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .page-design .menu-open .header-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .page-design .header .inner-nav { display: grid; grid-template-columns: 1fr; gap: 0; }
  .page-design .header .inner-nav a {
    display: flex; align-items: center; min-height: 48px; padding: 10px 12px;
    border-radius: 12px; font-size: 17px; line-height: 1.3; letter-spacing: 0;
    font-family: 'Monument Extended','Arial Black',Arial,sans-serif; white-space: normal;
  }
  .page-design .header .inner-nav a:hover, .page-design .header .inner-nav a.active { color: #c74600; background: #fd770215; }
  .page-design .header .inner-nav a::after { content: none; }
  .page-design .header .header-socials { margin: 0; padding: 12px; gap: 12px; justify-content: flex-start; }
  .page-design .header .header-socials .social-icon { width: 44px; height: 44px; }
  #design .footer-brand { width: 220px; grid-template-columns: 160px 60px; }
  #design .benefit b { overflow-wrap: break-word; }
  .reviews-2gis-pill { flex-shrink: 0; }
  .reviews-2gis-pill strong { flex-shrink: 0; }
  #design .reviews-2gis-block { grid-template-columns: minmax(190px, 1.4fr) minmax(0, 1fr); }
  /* Reveal vertically: horizontal offsets could leave narrow room cards. */
  .page-design .room-card.motion-card .room-photo,
  .page-design .room-card.motion-card .room-info { transform: translateY(12px); }
  .page-design .room-card.motion-card.is-visible .room-photo,
  .page-design .room-card.motion-card.is-visible .room-info { transform: none; }
  .page-design .room-card.motion-card.is-visible .room-info li { animation: none; }
}
@media (max-width: 649px) {
  .page-design { --internal-header: 72px; }
  .page-design .header { --internal-header: 72px; padding-inline: 20px; }
  .page-design .header-menu { padding-inline: 20px; }
  #design .winter-promo-script { font-size: clamp(48px, 14vw, 86px); }
  #design .reviews-2gis-block { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  #design .reviews-2gis-pill { padding: 10px; gap: 6px; }
  #design .reviews-2gis-pill strong { font-size: clamp(28px, 8vw, 34px); }
  #design .reviews-2gis-pill img { width: 36px; height: 36px; flex-shrink: 0; }
  #design .reviews-2gis-divider { flex-shrink: 0; }
  .page-design .closing-area .footer-brand { width: 260px; grid-template-columns: minmax(0, 195px) 65px; }
  .page-design .closing-area .footer-brand strong { font-size: 32px; }
  .page-design .room-card.motion-card { transform: translateY(24px); }
  .page-design .room-card.motion-card.is-visible { transform: none; }
}
@media (min-width: 1440px) {
  .winter-tea-card strong { font-size: 40px; }
}

/* Internal pages keep their full-bleed photography on panoramic screens.
   The homepage itself is scaled by script.js, so it must not be expanded twice. */
@media (min-width: 1921px) {
  .page-viewport { overflow: clip; }
  .page-design .header::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 50%;
    width: var(--viewport-width, 100vw);
    transform: translateX(-50%);
    background: #fff4ea;
    z-index: -1;
  }
  .page-design .hero-slider, .page-design .cafe-slider {
    width: var(--viewport-width, 100vw);
    margin-left: calc((100% - var(--viewport-width, 100vw)) / 2);
    height: clamp(800px, 65vh, 1100px);
  }
  .page-design .hero-slider .slider-arrow--prev,
  .page-design .cafe-slider .cafe-arrow--prev { left: max(24px, calc((var(--viewport-width, 100vw) - 1840px) / 2)); }
  .page-design .hero-slider .slider-arrow--next,
  .page-design .cafe-slider .cafe-arrow--next { right: max(24px, calc((var(--viewport-width, 100vw) - 1840px) / 2)); }
  .page-design .closing-area {
    width: var(--viewport-width, 100vw);
    margin-left: calc((100% - var(--viewport-width, 100vw)) / 2);
  }
  .page-design .closing-area .real-footer {
    padding-inline: max(64px, calc((var(--viewport-width, 100vw) - 1792px) / 2));
  }
}

/* Keep the footer identity in exactly the same geometry on every page.
   Text and the berry are pinned inside one fixed component, so font loading
   and neighbouring grid columns cannot move them independently. */
.page-design .closing-area .footer-brand {
  position: relative;
  inset: auto;
  display: block;
  width: 370px;
  height: 100px;
  max-width: none;
}
.page-design .closing-area .footer-brand strong {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  font-size: 44px;
  line-height: 1;
}
.page-design .closing-area .footer-brand small {
  position: absolute;
  left: 11px;
  top: 50px;
  white-space: nowrap;
  font-size: 18px;
  line-height: 1.2;
  padding: 0;
}
.page-design .closing-area .footer-brand img {
  position: absolute;
  left: 250px;
  top: -8px;
  width: 97px;
  height: 83px;
  max-width: none;
  object-fit: contain;
}
.page-design .closing-area .footer-address {
  box-sizing: border-box;
  width: 400px;
  padding-left: 0;
  justify-self: end;
}
.page-design .closing-area .footer-address p {
  margin: 0 0 24px 68px;
  font-size: 32px;
  line-height: 1.08;
}
.page-design .closing-area .footer-location-icon {
  top: 13px;
  left: 0;
  width: 37px;
  height: 55px;
}
.page-design .closing-area .footer-socials { margin-left: 66px; }

@media (min-width: 1000px) and (max-width: 1439px) {
  .page-design .closing-area .real-footer {
    grid-template-columns: minmax(250px, .8fr) minmax(330px, 1.3fr) minmax(250px, .85fr);
    gap: 24px;
  }
  .page-design .closing-area .footer-address {
    grid-column: 3;
    justify-self: end;
  }
}

@media (max-width: 1439px) {
  #design .closing-area .footer-brand,
  .page-design .closing-area .footer-brand {
    position: relative;
    inset: auto;
    display: block;
    width: min(100%, 330px);
    height: 75px;
    max-width: 330px;
  }
  #design .closing-area .footer-brand strong,
  .page-design .closing-area .footer-brand strong {
    position: absolute;
    left: 0;
    top: 6px;
    white-space: nowrap;
    font-size: 34px;
    line-height: 1;
  }
  #design .closing-area .footer-brand small,
  .page-design .closing-area .footer-brand small {
    position: absolute;
    left: 6px;
    top: 44px;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.2;
  }
  #design .closing-area .footer-brand img,
  .page-design .closing-area .footer-brand img {
    position: absolute;
    left: auto;
    right: 0;
    top: 0;
    width: 70px;
    height: 65px;
    max-width: none;
    object-fit: contain;
  }
  #design .closing-area .footer-address,
  .page-design .closing-area .footer-address {
    box-sizing: border-box;
    width: min(100%, 310px);
    padding-left: 0;
  }
  #design .closing-area .footer-address p,
  .page-design .closing-area .footer-address p {
    margin: 0 0 20px 38px;
    font-size: 20px;
    line-height: 1.3;
  }
  #design .closing-area .footer-location-icon,
  .page-design .closing-area .footer-location-icon {
    left: 0;
    top: 4px;
    width: 24px;
    height: 34px;
  }
  #design .closing-area .footer-socials,
  .page-design .closing-area .footer-socials { margin-left: 38px; }
}

@media (min-width: 700px) and (max-width: 999px) {
  #design .closing-area .real-footer,
  .page-design .closing-area .real-footer { grid-template-columns: minmax(0, 1fr) minmax(270px, 1fr); }
  #design .closing-area .footer-brand,
  .page-design .closing-area .footer-brand { grid-column: 1 / -1; justify-self: start; }
  #design .closing-area .footer-address,
  .page-design .closing-area .footer-address { grid-column: 2; justify-self: end; }
}

@media (max-width: 699px) {
  #design .closing-area .real-footer,
  .page-design .closing-area .real-footer { grid-template-columns: minmax(0, 1fr); }
  #design .closing-area .footer-brand,
  .page-design .closing-area .footer-brand { grid-column: auto; justify-self: start; }
  #design .closing-area .footer-brand strong,
  .page-design .closing-area .footer-brand strong { font-size: 32px; }
  #design .closing-area .footer-address,
  .page-design .closing-area .footer-address { grid-column: auto; justify-self: start; }
}

@media (max-width: 359px) {
  #design .closing-area .footer-brand,
  .page-design .closing-area .footer-brand { width: min(100%, 300px); }
  #design .closing-area .footer-brand strong,
  .page-design .closing-area .footer-brand strong { font-size: 29px; }
  #design .closing-area .footer-brand img,
  .page-design .closing-area .footer-brand img { left: auto; right: 0; width: 60px; }
}

/* v11.1: lock the Облепиха identity as one fixed composition on responsive layouts.
   The berry must be positioned from the LEFT edge of the logo component, never
   from a flexible grid track/right edge. This prevents it jumping between pages,
   viewport widths and font-load states. */
@media (max-width: 1439px) {
  #design .header .brand,
  .page-design .header .brand {
    position: relative;
    inset: auto;
    display: block;
    flex: 0 0 214px;
    width: 214px;
    height: 56px;
    min-width: 214px;
  }

  #design .header .brand strong,
  .page-design .header .brand strong {
    position: absolute;
    left: 0;
    top: 8px;
    margin: 0;
    white-space: nowrap;
    font-size: 27px;
    line-height: 1;
  }

  #design .header .brand small,
  .page-design .header .brand small {
    position: absolute;
    left: 2px;
    top: 39px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1;
  }

  #design .header .brand img,
  .page-design .header .brand img {
    position: absolute;
    left: 156px;
    right: auto;
    top: 3px;
    display: block;
    width: 58px;
    height: 50px;
    max-width: none;
    object-fit: contain;
  }

  #design .closing-area .footer-brand,
  .page-design .closing-area .footer-brand {
    position: relative;
    inset: auto;
    display: block;
    width: 270px;
    max-width: 270px;
    min-width: 270px;
    height: 75px;
  }

  #design .closing-area .footer-brand strong,
  .page-design .closing-area .footer-brand strong {
    position: absolute;
    left: 0;
    top: 6px;
    margin: 0;
    white-space: nowrap;
    font-size: 34px;
    line-height: 1;
  }

  #design .closing-area .footer-brand small,
  .page-design .closing-area .footer-brand small {
    position: absolute;
    left: 6px;
    top: 44px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.2;
  }

  #design .closing-area .footer-brand img,
  .page-design .closing-area .footer-brand img {
    position: absolute;
    left: 195px;
    right: auto;
    top: 0;
    display: block;
    width: 70px;
    height: 65px;
    max-width: none;
    object-fit: contain;
  }
}

@media (max-width: 319px) {
  /* Defensive fallback only for unusually narrow embedded webviews. */
  #design .header .brand,
  .page-design .header .brand { transform: scale(.92); transform-origin: left center; }
  #design .closing-area .footer-brand,
  .page-design .closing-area .footer-brand { transform: scale(.92); transform-origin: left center; }
}


/* v12.1: make the header/footer logo spacing constant across responsive widths,
   and center the address + socials as one compact footer block. */
@media (max-width: 1439px) {
  #design .header .brand,
  .page-design .header .brand {
    position: relative;
    inset: auto;
    display: inline-grid;
    grid-template-columns: max-content auto;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 2px;
    width: max-content;
    min-width: 0;
    height: auto;
    flex: 0 0 auto;
    align-items: start;
    justify-items: start;
  }

  #design .header .brand strong,
  .page-design .header .brand strong {
    position: static;
    margin: 0;
    white-space: nowrap;
    font-size: 27px;
    line-height: 1;
  }

  #design .header .brand small,
  .page-design .header .brand small {
    position: static;
    margin: 0;
    padding: 0 0 0 2px;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.1;
  }

  #design .header .brand img,
  .page-design .header .brand img {
    position: static;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: start;
    justify-self: start;
    display: block;
    width: 58px;
    height: 50px;
    max-width: none;
    object-fit: contain;
  }

  #design .closing-area .footer-brand,
  .page-design .closing-area .footer-brand {
    position: relative;
    inset: auto;
    display: inline-grid;
    grid-template-columns: max-content auto;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 2px;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    height: auto;
    justify-self: start;
    align-items: start;
    justify-items: start;
  }

  #design .closing-area .footer-brand strong,
  .page-design .closing-area .footer-brand strong {
    position: static;
    margin: 0;
    white-space: nowrap;
    font-size: 34px;
    line-height: 1;
  }

  #design .closing-area .footer-brand small,
  .page-design .closing-area .footer-brand small {
    position: static;
    margin: 0;
    padding: 0 0 0 6px;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.15;
  }

  #design .closing-area .footer-brand img,
  .page-design .closing-area .footer-brand img {
    position: static;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: start;
    justify-self: start;
    display: block;
    width: 70px;
    height: 65px;
    max-width: none;
    object-fit: contain;
  }

  #design .closing-area .footer-address,
  .page-design .closing-area .footer-address {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "icon text"
      "socials socials";
    column-gap: 12px;
    row-gap: 18px;
    align-items: start;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    padding-left: 0;
  }

  #design .closing-area .footer-location-icon,
  .page-design .closing-area .footer-location-icon {
    position: static;
    grid-area: icon;
    align-self: start;
    justify-self: center;
    width: 24px;
    height: 34px;
  }

  #design .closing-area .footer-address p,
  .page-design .closing-area .footer-address p {
    position: static;
    grid-area: text;
    width: auto;
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
    text-align: left;
  }

  #design .closing-area .footer-socials,
  .page-design .closing-area .footer-socials {
    position: static;
    grid-area: socials;
    margin: 0;
    justify-self: center;
  }
}

@media (min-width: 700px) and (max-width: 1439px) {
  #design .closing-area .footer-address,
  .page-design .closing-area .footer-address {
    justify-self: end;
  }
}

@media (max-width: 699px) {
  #design .closing-area .footer-brand,
  .page-design .closing-area .footer-brand {
    justify-self: center;
  }

  #design .closing-area .footer-address,
  .page-design .closing-area .footer-address {
    justify-self: center;
  }
}

@media (max-width: 419px) {
  #design .header .brand,
  .page-design .header .brand {
    column-gap: 8px;
  }

  #design .header .brand strong,
  .page-design .header .brand strong {
    font-size: 25px;
  }

  #design .header .brand img,
  .page-design .header .brand img {
    width: 48px;
    height: 42px;
  }

  #design .closing-area .footer-brand,
  .page-design .closing-area .footer-brand {
    column-gap: 8px;
  }

  #design .closing-area .footer-brand strong,
  .page-design .closing-area .footer-brand strong {
    font-size: 32px;
  }

  #design .closing-area .footer-brand img,
  .page-design .closing-area .footer-brand img {
    width: 62px;
    height: 58px;
  }
}

@media (max-width: 359px) {
  #design .header .brand strong,
  .page-design .header .brand strong {
    font-size: 22px;
  }

  #design .header .brand small,
  .page-design .header .brand small {
    font-size: 10px;
  }

  #design .header .brand img,
  .page-design .header .brand img {
    width: 44px;
    height: 39px;
  }

  #design .closing-area .footer-brand strong,
  .page-design .closing-area .footer-brand strong {
    font-size: 29px;
  }

  #design .closing-area .footer-brand small,
  .page-design .closing-area .footer-brand small {
    font-size: 12px;
  }

  #design .closing-area .footer-brand img,
  .page-design .closing-area .footer-brand img {
    width: 58px;
    height: 54px;
  }

  #design .closing-area .footer-address p,
  .page-design .closing-area .footer-address p {
    font-size: 18px;
  }
}