/* ============================================================
   BREAKPOINT CONTRACT  (mirrors tokens.css — keep them in sync)

     Phone:   @media (max-width: 809.98px)    (390 preview target)
     Tablet:  @media (min-width: 810px) and (max-width: 1279.98px)
     Desktop: @media (min-width: 1280px)

   Default styles in this file are MOBILE-FIRST or breakpoint-agnostic;
   targeted overrides live inside the @media blocks. Raw px only.
   ============================================================

   components.css — nav, hero, room cards, lang-pill, footer, drawer base
   Loaded after tokens.css + base.css
   ============================================================ */

/* ─── App layout ─── */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}
html,
body {
  overflow-x: clip;
}

/* ─── Top fixed nav (matches live: left:40 top:40, height 57, bdr 36, blur 6) ─── */
.site-nav {
  position: fixed;
  top: 40px;
  left: 40px;
  z-index: 100;
  display: flex;
  align-items: center;
  width: fit-content;
  box-sizing: border-box;
  gap: 12px;
  height: 57px;
  padding: 8px;
  border-radius: 36px;
  background: rgba(10, 10, 10, 0.30);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(239, 231, 210, 0.10);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.site-nav > * {
  align-self: center;
}
@media (min-width: 810px) and (max-width: 1279px) {
  .site-nav {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}
@media (max-width: 809px) {
  .site-nav {
    top: 16px;
    left: 50%;                                 /* center horizontally */
    right: auto;
    transform: translateX(-50%);
    width: min(374px, calc(100vw - 16px));
    max-width: 374px;
    justify-content: center;
    display: grid;
    grid-template-columns: 44px 126px 52px 112px;
    align-items: center;
    height: 52px;
    padding: 6px;
    gap: 8px;
    overflow: hidden;
  }
  .site-nav__menu-btn { grid-column: 1; }
  .site-nav__logo {
    grid-column: 2;
    justify-content: center;
    height: 40px;
    min-width: 0;
    padding: 0;
  }
  .lang-pill {
    grid-column: 3;
    justify-self: center;
    height: 40px;
  }
  .site-nav__cta {
    grid-column: 4;
    justify-self: stretch;
    width: 100%;
    padding-inline: 0;
    font-size: 13px;
    letter-spacing: 0.9px;
    height: 40px;
    line-height: 1;
  }
  .site-nav__logo img { height: 24px; width: auto; }
}

/* Soba + Miza buttons (visible only when nav state="book") */
.site-nav__bookpair {
  display: none;
  align-items: center;
  gap: 8px;
}
.site-nav[data-state="book"] .site-nav__menu-btn,
.site-nav[data-state="book"] .lang-pill,
.site-nav[data-state="book"] .site-nav__cta {
  display: none;
}
.site-nav[data-state="book"] .site-nav__bookpair {
  display: flex;
}
.site-nav__book-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 43px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  background: var(--color-cream);
  color: var(--color-bg);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-fast) var(--ease-in-out);
  cursor: pointer;
  border: none;
}
.site-nav__book-btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-cream);
  border: 1px solid var(--color-border-hover);
}
.site-nav__book-btn:hover { transform: scale(1.03); }
.site-nav__book-close {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  box-sizing: border-box;
  background: transparent;
  color: var(--color-cream);
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.site-nav__menu-btn {
  width: 40px; height: 40px;
  min-width: 40px;
  flex: 0 0 40px;
  display: grid; place-items: center;
  align-self: center;
  box-sizing: border-box;
  border: 0; background: transparent;
  color: var(--color-cream); cursor: pointer;
  border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-in-out);
}
.site-nav__menu-btn:hover { background: var(--color-border-hover); }
.site-nav__menu-btn svg { width: 22px; height: 22px; }

.site-nav__home-btn {
  display: none;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--color-cream);
  text-decoration: none;
}
.site-nav__home-btn svg {
  width: 22px;
  height: 22px;
}

.site-nav__logo {
  display: flex;
  align-items: center;
  align-self: center;
  height: 100%;
  padding: 0 4px;
  text-decoration: none;
  flex: 0 0 auto;
}
.site-nav__logo img {
  height: 24px;
  width: auto;
  display: block;
  pointer-events: none;
  flex: 0 0 auto;
}

.site-nav__cta {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  box-sizing: border-box;
  height: 43px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  border: 0;
  outline: 0;
  background: rgb(10, 10, 10);
  color: var(--color-cream);
  text-decoration: none;
  font-family: var(--font-sans);          /* Barlow (NOT Semi-Condensed) */
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 15.4px;
  text-transform: uppercase;
  transition:
    transform var(--dur-base) var(--ease-spring),
    opacity var(--dur-base) var(--ease-out-quart);
  flex: 0 0 auto;
}
.site-nav__cta:focus { outline: 0; }
.site-nav__cta:hover { transform: scale(1.04); }

@media (max-width: 809px) {
  .site-nav__menu-btn,
  .site-nav__logo,
  .site-nav__cta,
  .lang-pill {
    height: 40px;
    align-self: center;
  }
  .site-nav__cta {
    line-height: 1;
  }
}

/* When language pill is open, slide CTA right and fade */
.site-nav.is-lang-open .site-nav__cta {
  opacity: 0;
  transform: translateX(20px) scale(0.9);
  pointer-events: none;
  width: 0;
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}
@media (max-width: 809px) {
  .site-nav.is-lang-open .site-nav__cta {
    visibility: hidden;
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
  .site-nav.is-lang-open .lang-pill {
    grid-column: 3 / 5;
    justify-self: stretch;
    width: 100%;
  }
}

/* ─── Liquid-glass language pill (adapted from Bon-System) ─── */
.lang-pill {
  --lang-step: 59px;
  position: relative;
  height: 44px;
  width: 44px;
  padding: 2px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  isolation: isolate;
  flex-shrink: 0;
  transition:
    width 0.55s cubic-bezier(.22, 1, .36, 1),
    padding 0.45s cubic-bezier(.22, 1, .36, 1),
    transform 0.55s cubic-bezier(.22, 1, .36, 1);
}

.lang-pill[data-state="open"] {
  width: 174px;
  padding: 2px 8px;
}

.lang-pill-defs { position: absolute; width: 0; height: 0; pointer-events: none; }

.lang-pill-trigger {
  position: relative;
  width: 40px; height: 40px;
  border: 0; padding: 0; margin: 0;
  background: transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  z-index: 3;
  transition:
    opacity var(--dur-base) ease,
    transform 0.4s cubic-bezier(.22, 1, .36, 1);
}
.lang-pill-trigger .lang-flag {
  width: 31px; height: 22px;
  border-radius: 3px;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  box-shadow: none;
}
.lang-pill[data-state="open"] .lang-pill-trigger {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.7);
}

.lang-pill-options {
  position: absolute;
  top: 50%;
  left: 8px; right: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(12px);
  border-radius: var(--radius-pill);
  overflow: hidden;
  transition:
    opacity 0.32s ease 0.08s,
    transform 0.55s cubic-bezier(.22, 1, .36, 1);
}
.lang-pill[data-state="open"] .lang-pill-options {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%);
}

.lang-opt {
  position: relative;
  width: 40px;
  height: 40px;
  border: 0; padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-pill);
  z-index: 3;
  display: grid;
  place-items: center;
  transition: transform var(--dur-base) ease;
}
.lang-opt:hover, .lang-opt:focus-visible { transform: scale(1.08); }
.lang-opt img {
  width: 31px; height: 22px;
  border-radius: 3px;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  box-shadow: none;
}
.lang-opt[aria-selected="true"] img {
  box-shadow: none;
}

.lang-lens {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px; height: 48px;
  border-radius: var(--radius-pill);
  background:
    radial-gradient(circle at 28% 12%, rgba(255, 255, 255, 0.72), transparent 18%),
    radial-gradient(circle at 80% 82%, rgba(255, 255, 255, 0.16), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.08) 46%, rgba(255, 255, 255, 0.20));
  border: 1px solid rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: blur(14px) saturate(185%) brightness(1.12) contrast(1.04);
  backdrop-filter: blur(14px) saturate(185%) brightness(1.12) contrast(1.04);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .52),
    inset 0 -12px 20px rgba(0, 0, 0, .12),
    0 10px 28px rgba(0, 0, 0, .32);
  opacity: 0;                                /* hidden until pill opens */
  z-index: 1;
  pointer-events: none;
  contain: paint;
  transform: translate(calc(-50% + var(--lens-x, 0px)), -50%) scale(0.9);
  transition:
    transform 0.56s cubic-bezier(.22, 1, .36, 1),
    width 0.56s cubic-bezier(.22, 1, .36, 1),
    opacity var(--dur-base) ease,
    background var(--dur-base) ease;
}
@supports ((backdrop-filter: url(#lg-lens)) or (-webkit-backdrop-filter: url(#lg-lens))) {
  .lang-lens {
    -webkit-backdrop-filter: url(#lg-lens) blur(14px) saturate(185%) brightness(1.12) contrast(1.04);
    backdrop-filter: url(#lg-lens) blur(14px) saturate(185%) brightness(1.12) contrast(1.04);
  }
}
.lang-lens::before,
.lang-lens::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.32);
  filter: blur(2px);
  pointer-events: none;
}
.lang-lens::before { top: 6px; }
.lang-lens::after {
  bottom: 6px;
  opacity: 0.36;
}
.lang-pill[data-state="open"] .lang-lens {
  opacity: 1;
  transform: translate(calc(-50% + var(--lens-x, 0px)), -50%) scale(1);
}

/* ============================================================
   HERO — exact measurements from live mahorcic.com DOM
   Outer: 100vw, 100vh, 16px gutters
   Main wrapper: full size, border-radius 48px, flex-row, 16px gap
   Left column: 1fr (≈1032 at 1440), 16px top/bottom padding
   Right column: 360px (desktop), 16px top/bottom padding, column flex 16px gap
   Inner video container: 100% × 100%, 16px border-radius, overflow hidden
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 0 16px;
  display: block;
}
@media (max-width: 809px) {
  .hero { padding: 0 8px; }
}

.hero__inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  gap: 16px;
  border-radius: 0;            /* no more "cropped" corners on outer */
  position: relative;
}
@media (max-width: 809px) {
  .hero__inner {
    flex-direction: column;
    gap: 8px;
  }
}

.hero__left {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 16px 0;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.hero__right {
  flex: 0 0 360px;
  height: 100%;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 1279px) {
  .hero__right { flex-basis: 320px; }
}
@media (max-width: 809px) {
  .hero__right {
    flex: 1 1 auto;
    flex-direction: column;
    padding: 0 0 16px;
  }
}

.hero__media {
  position: relative;
  flex: 1 1 auto;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-bg);
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
video.hero__video,
video.izdelki__bg,
video.adventure-hero__bg,
video.about-hero__video {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
video.hero__video::-webkit-media-controls,
video.izdelki__bg::-webkit-media-controls,
video.adventure-hero__bg::-webkit-media-controls,
video.about-hero__video::-webkit-media-controls,
video.hero__video::-webkit-media-controls-enclosure,
video.izdelki__bg::-webkit-media-controls-enclosure,
video.adventure-hero__bg::-webkit-media-controls-enclosure,
video.about-hero__video::-webkit-media-controls-enclosure,
video.hero__video::-webkit-media-controls-panel,
video.izdelki__bg::-webkit-media-controls-panel,
video.adventure-hero__bg::-webkit-media-controls-panel,
video.about-hero__video::-webkit-media-controls-panel,
video.hero__video::-webkit-media-controls-play-button,
video.izdelki__bg::-webkit-media-controls-play-button,
video.adventure-hero__bg::-webkit-media-controls-play-button,
video.about-hero__video::-webkit-media-controls-play-button,
video.hero__video::-webkit-media-controls-start-playback-button,
video.izdelki__bg::-webkit-media-controls-start-playback-button,
video.adventure-hero__bg::-webkit-media-controls-start-playback-button,
video.about-hero__video::-webkit-media-controls-start-playback-button,
video.hero__video::-webkit-media-controls-overlay-play-button,
video.izdelki__bg::-webkit-media-controls-overlay-play-button,
video.adventure-hero__bg::-webkit-media-controls-overlay-play-button,
video.about-hero__video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  -webkit-appearance: none;
}
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.62) 100%);
  pointer-events: none;
}

/* Awards / credentials block — bottom-left of hero__media */
.hero__credentials {
  position: absolute;
  left: 64px;
  bottom: 64px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--color-cream);
  z-index: 2;
}
@media (max-width: 1279px) { .hero__credentials { left: 32px; bottom: 32px; } }
@media (max-width: 809px)  { .hero__credentials { left: 20px; right: 20px; bottom: 72px; } }

/* All three badges align to the SAME visual baseline (the foot of the Michelin figure)
   JRE wordmark has more headroom + descender → uses a slightly smaller height so the J
   line-up matches the bottom of bib/green icons. */
.hero__credentials-row {
  display: flex;
  align-items: flex-end;        /* align bottoms */
  gap: 14px;
  height: 40px;
}
.hero__credentials-row img.cred-jre   { height: 28px; transform: translateY(2px); }
.hero__credentials-row img.cred-bib   { height: 36px; }
.hero__credentials-row img.cred-green { height: 36px; }
.hero__credentials-eyebrow {
  font-family: var(--font-sans);          /* Barlow */
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: uppercase;
  margin-top: 6px;
  color: var(--color-cream);
}
.hero__credentials-line {
  font-family: var(--font-sans);          /* Barlow */
  font-weight: 400;
  font-size: 20px;
  letter-spacing: normal;
  line-height: 24px;
  text-transform: uppercase;
  color: rgba(245, 242, 234, 0.7);        /* live: rgba(245,242,234,.7) */
  margin: 0;
}

/* Social icons row — bottom-right of hero__media */
.hero__socials {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: flex;
  gap: 8px;
  z-index: 2;
}
@media (max-width: 809px) {
  .hero__socials {
    right: 20px;
    bottom: 20px;
  }
}
.hero__socials a {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(239, 231, 210, 0.18);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  color: var(--color-cream);
  transition: background var(--dur-fast) var(--ease-in-out), transform var(--dur-base) var(--ease-spring);
}
.hero__socials a:hover { background: rgba(255, 255, 255, 0.22); transform: scale(1.06); }
.hero__socials svg {
  width: 18px; height: 18px;
  display: block;       /* avoid baseline misalignment */
}

/* ─── Hero right-column cards (3 stacked destination cards) ─── */
.hero__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.hero-card {
  position: relative;
  flex: 1 1 0;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-cream);
  transition: transform var(--dur-base) var(--ease-spring);
}
.hero-card:hover { transform: scale(1.01); }
.hero-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1);
  transform-origin: center;
  backface-visibility: hidden;
  transition: transform 0.9s var(--ease-out-quart);
}
.hero-card__overlay {
  position: absolute; inset: -1px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.85));
  pointer-events: none;
  backface-visibility: hidden;
}
.hero-card:hover img { transform: scale(1.04); }
.hero-card:hover .hero-card__overlay { transform: none; }
.hero-card__label {
  position: absolute;
  bottom: 24px; left: 24px; right: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-sans);          /* Barlow (NOT Semi-Condensed) */
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--color-cream);
  margin: 0;
}
.hero-card__arrow {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  flex-shrink: 0;
}
.hero-card__arrow svg { width: 18px; height: 18px; }

/* Breakpoints match the Framer export: desktop >=1280, tablet 810-1279, mobile <810. */
@media (min-width: 810px) and (max-width: 1279px) {
  .hero {
    height: auto;
    min-height: 100svh;
    padding: 28px 0 0;
  }
  .hero__inner {
    height: auto;
    flex-direction: column;
    gap: 22px;
  }
  .hero__left {
    height: auto;
    padding: 0;
  }
  .hero__media {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 1.23 / 1;
    min-height: 0;
    border-radius: 16px;
  }
  .hero__video { object-position: center center; }
  .hero__overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.64) 100%);
  }
  .hero__credentials {
    left: clamp(48px, 6vw, 96px);
    bottom: clamp(40px, 5vw, 76px);
    gap: 10px;
  }
  .hero__credentials-row {
    height: 56px;
    gap: 14px;
  }
  .hero__credentials-row img.cred-jre { height: 40px; transform: translateY(2px); }
  .hero__credentials-row img.cred-bib,
  .hero__credentials-row img.cred-green { height: 48px; }
  .hero__credentials-eyebrow {
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: 1.2px;
    margin-top: 2px;
  }
  .hero__credentials-line {
    font-size: clamp(19px, 2.4vw, 27px);
    line-height: 1.16;
    letter-spacing: 0.6px;
  }
  .hero__socials {
    right: 0;
    bottom: -1px;
    gap: 12px;
    padding: 22px 28px 0 32px;
    background: #050505;
    border-radius: 40px 0 0 0;
  }
  .hero__socials a {
    width: 58px;
    height: 58px;
    background: transparent;
    border-color: rgba(239, 231, 210, 0.32);
  }
  .hero__socials svg {
    width: 23px;
    height: 23px;
  }
  .hero__right {
    flex: none;
    height: auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .hero-card {
    flex: none;
    aspect-ratio: 1 / 1.28;
    min-height: 0;
    border-radius: 16px;
  }
  .hero-card__label {
    left: 24px;
    right: 24px;
    bottom: 28px;
    font-size: clamp(14px, 1.7vw, 18px);
    line-height: 1.05;
    letter-spacing: 1.6px;
  }
  .hero-card__arrow {
    width: 34px;
    height: 34px;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .hero-card__arrow svg {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 809px) {
  .hero {
    height: auto;
    min-height: 0;
    /* Nav top 16 + nav height 52 = bottom at 68. + 14 px gap = 82. */
    padding: 82px 0 0;
  }
  .hero__inner {
    height: auto;
    flex-direction: column;
    gap: 10px;
  }
  .hero__left {
    height: auto;
    padding: 0;
  }
  .hero__media {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1.23;
    min-height: 0;
    border-radius: 16px;
  }
  .hero__video { object-position: center center; }
  .hero__overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.68) 100%);
  }
  .hero__credentials {
    left: 44px;
    right: 32px;
    bottom: 50px;
    gap: 8px;
  }
  .hero__credentials-row {
    height: 34px;
    gap: 8px;
  }
  .hero__credentials-row img.cred-jre { height: 28px; transform: translateY(2px); }
  .hero__credentials-row img.cred-bib,
  .hero__credentials-row img.cred-green { height: 30px; }
  .hero__credentials-eyebrow {
    font-size: 20px;
    letter-spacing: 1px;
    margin-top: 2px;
  }
  .hero__credentials-line {
    font-size: 16px;
    line-height: 1.18;
    letter-spacing: 0.4px;
  }
  .hero__socials { display: none; }
  .hero__right {
    flex: none;
    height: auto;
    padding: 0 0 8px;
    gap: 10px;
  }
  .hero-card {
    flex: none;
    aspect-ratio: 1.45 / 1;
    min-height: 0;
    border-radius: 16px;
  }
  .hero-card__label {
    left: 28px;
    right: 28px;
    bottom: 22px;
    justify-content: flex-end;
    gap: 22px;
    text-align: right;
    font-size: clamp(16px, 4.7vw, 20px);
    line-height: 1;
    letter-spacing: 1.8px;
  }
  .hero-card__arrow {
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .hero-card__arrow svg {
    width: 24px;
    height: 24px;
  }
}

/* ─── Section helpers ───
   Section spacing: 16px vertical gap between sections.
   Tablet/desktop (≥810px): sections are full-bleed with NO border-radius (per user preference).
   Phone (<810px):   media inside sections gets a 16px border-radius (matches Framer mobile).
   Hero is the exception — it keeps its 48px outer radius (handled in .hero__inner). */
.section {
  padding: 96px 0;
  margin-top: 16px;          /* 16px gap to previous section */
}
@media (min-width: 810px) { .section { padding: 120px 0; } }

/* Desktop: NO gap between sections — full-bleed flush. Phone: 16px gap. */
main > section + section,
main > section + footer,
main > footer {
  margin-top: 0;
}
@media (max-width: 809px) {
  /* Section seams are flush on phone too — no more black band between sections. */
  main > section + section,
  main > section + footer,
  main > footer { margin-top: 0; }
  .o-nas, .veuve__sticky, .room-card, .award-card {
    border-radius: 16px;
    overflow: hidden;
  }
  .o-nas__bg { border-radius: inherit; }

  /* Tight phone rhythm for the O NAS-style image sections. */
  .o-nas {
    min-height: auto;
    padding: 40px clamp(20px, 5vw, 32px) 64px;
  }
}
.section { margin-top: 0; }     /* override the .section margin-top from earlier */

.eyebrow-block { display: flex; flex-direction: column; gap: var(--space-2); }

/* Forum 96px / 400 / -1.92px / 85px lh / uppercase  (live mahorcic.com) */
.section__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, 8vw, 96px);
  letter-spacing: -0.02em;
  line-height: 0.88;
  text-transform: uppercase;
  color: var(--color-cream);
  margin: 0;
}

/* Barlow Semi Condensed 28px / 300 / 33.6px lh */
.section__body {
  font-family: var(--font-semi-condensed);
  font-weight: 300;
  font-size: 28px;
  line-height: 33.6px;
  letter-spacing: normal;
  color: var(--color-cream);
  max-width: 65ch;
  margin: 0;
}
@media (max-width: 809px) {
  .section__body { font-size: 22px; line-height: 27px; }
}

/* Eyebrow above heading: Barlow 24px / 600 / 1px / uppercase / cream */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-cream);
  margin: 0;
}
@media (max-width: 809px) {
  .eyebrow { font-size: 18px; }
}

/* ─── O NAS section (and any image-bg section using the .o-nas class) ─── */
.o-nas {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  padding: 80px clamp(20px, 5vw, 80px) 80px;
  overflow: hidden;
}
.o-nas__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Full-coverage gradient so the heading isn't visually boxed */
.o-nas::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 25%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0) 80%);
  pointer-events: none;
  z-index: 1;
}
#ajdovscina::after {
  background:
    linear-gradient(0deg,
      rgba(0,0,0,0.94) 0%,
      rgba(0,0,0,0.82) 42%,
      rgba(0,0,0,0.56) 68%,
      rgba(0,0,0,0.18) 100%);
}
#ajdovscina .o-nas__content {
  text-shadow: 0 3px 22px rgba(0,0,0,0.65);
}
.o-nas__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  max-width: 720px;
  background: none;        /* explicitly clear any earlier per-content gradient */
}
.adventure-teaser__body {
  max-width: 48ch;
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1.18;
}

@media (max-width: 1279px) {
  .o-nas {
    min-height: min(92svh, 760px);
    padding: 72px clamp(24px, 5vw, 56px) 54px;
  }
  .o-nas__bg {
    display: block;
    opacity: 1;
  }
  .o-nas__content {
    gap: 12px;
  }
  .o-nas .cta-pill {
    margin-top: 2px;
  }
}

@media (max-width: 809px) {
  .o-nas {
    min-height: 78svh;
    padding: 56px 24px 34px;
  }
  .o-nas__content {
    gap: 10px;
  }
  .adventure-teaser__body {
    max-width: 34ch;
    font-size: 18px;
    line-height: 1.22;
  }
  .o-nas .bullet-list {
    gap: 8px;
  }
  .hero + .o-nas,
  .o-nas[aria-labelledby="o-nas-heading"] + .o-nas[aria-labelledby="meni-heading"],
  .o-nas[aria-labelledby="adv-heading"] + .framer-footer {
    margin-top: 10px;
  }
}

.o-nas[aria-labelledby="adv-heading"]::after {
  background: linear-gradient(0deg, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.78) 42%, rgba(0,0,0,0.34) 70%, rgba(0,0,0,0.04) 100%);
}
.o-nas[aria-labelledby="adv-heading"] .o-nas__content {
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.78);
}
.o-nas[aria-labelledby="adv-heading"] .bullet-list {
  margin-bottom: clamp(16px, 3vw, 30px);
}

/* ─── Three room cards ─── */
.rooms {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 0 16px;
  max-width: var(--container-max);
  margin-inline: auto;
}
@media (min-width: 1280px) {
  .rooms { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 16px; }
}

.room-card {
  position: relative;
  aspect-ratio: 3 / 4.2;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: var(--color-cream);
  cursor: pointer;
  isolation: isolate;
  contain: paint;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.room-card > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.8s var(--ease-out-quart);
  transform: translateZ(0);
  backface-visibility: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .room-card:hover > img { transform: scale(1.04) translateZ(0); }
}
.room-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, transparent 50%);
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.room-card__stars {
  position: absolute;
  top: var(--space-5); left: var(--space-5);
  display: flex; gap: 2px;
  z-index: 3;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.room-card__stars img {
  width: 18px;
  height: 18px;
  position: static;
  object-fit: contain;
}

.room-card__name {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 88px;
  font-family: var(--font-display);     /* Forum */
  font-weight: 400;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: -0.02em;
  line-height: 0.9;
  text-transform: uppercase;
  z-index: 2;
  color: var(--color-cream);
  margin: 0;
  transition: bottom 0.5s cubic-bezier(.22,1,.36,1);
  transform: translateZ(0);
  backface-visibility: hidden;
}
.room-card[data-expanded="true"] .room-card__name {
  bottom: calc(80px + 16px + var(--detail-h, 120px));
}

.room-card__cta {
  position: absolute;
  bottom: 16px; left: 16px;
  display: flex; gap: 8px;
  z-index: 4;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.room-card__zoom {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-hover);
  background: rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  color: var(--color-cream);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-in-out);
}
.room-card__zoom:hover { background: rgba(0, 0, 0, 0.5); }
.room-card__cta-link {
  display: inline-flex;
  align-items: center; justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-hover);
  text-decoration: none;
  color: var(--color-cream);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.30);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  transition: background var(--dur-fast) var(--ease-in-out);
}
.room-card__cta-link:hover { background: rgba(0, 0, 0, 0.5); }

/* Room card expanded state (toggled via [data-expanded] on click) */
.room-card__details {
  position: absolute;
  left: 20px; right: 20px;
  bottom: 80px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(.22,1,.36,1);
  backface-visibility: hidden;
}
.room-card[data-expanded="true"] .room-card__details { opacity: 1; transform: translateY(0); pointer-events: auto; }
.room-card[data-expanded="true"] .room-card__cta-link { background: var(--color-cream); color: var(--color-bg); border-color: var(--color-cream); }
.room-card[data-expanded="true"] .room-card__overlay {
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0) 100%);
}
.room-card__detail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-cream);
}
.room-card__detail-item img {
  position: static;
  inset: auto;
  width: 16px; height: 16px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);    /* whiten the dark room SVG icons */
  -webkit-filter: brightness(0) invert(1);
}
.room-card__hairline {
  height: 1px;
  background: rgba(239, 231, 210, 0.45);
  width: 100%;
  margin-bottom: 2px;
}

/* ─── Veuve Clicquot scroll-pin ─── */
.veuve {
  position: relative;
  height: 150vh;            /* 1.5x viewport — shorter, snappier scroll */
  background: var(--color-bg);
}
.veuve__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.veuve__head {
  position: absolute;
  top: clamp(48px, 8vh, 96px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 5;
  text-align: center;
}
.veuve__head .eyebrow { color: var(--color-cream); }
.veuve__head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 96px);
  letter-spacing: -0.02em;
  line-height: 0.9;
  color: var(--color-cream);
  margin: 0;
  text-transform: uppercase;
}
.veuve__stage {
  position: relative;
  width: min(90vw, 1100px);
  aspect-ratio: 16 / 9;
  --scroll: 0;            /* 0..1, set by JS */
}
.veuve__layer {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
.veuve__layer img {
  width: 100%; height: 100%;
  object-fit: contain;
}
/* Layer order (z): case (back) → bottle (middle) → road sign (front, the lid)
   ONLY the road sign moves. Bottle + case are STATIC.
   Sign slides in from the LEFT → right: translateX(-100%) at scroll=0 → translateX(0) at scroll=1. */
.veuve__case   { z-index: 1; }                /* static */
.veuve__bottle { z-index: 2; }                /* static */
.veuve__sign   {
  z-index: 3;
  transform: translateX(calc((var(--scroll) - 1) * 100%));
  will-change: transform;
}
/* (legacy .veuve__eyebrow removed — now using .veuve__head with .eyebrow + h2) */

/* Tablet + phone: restore scroll-pin so the JS-driven --scroll animation
   has real distance to play through. Box is allowed to bleed past the
   viewport edges so the road sign feels generous (cropped lid effect). */
@media (max-width: 1279px) {
  .veuve {
    height: 140vh;
    min-height: 0;
    padding: 0;
  }
  .veuve__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 0;
    padding: clamp(80px, 12vh, 120px) 0 0;
    border-radius: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    place-items: center;
    overflow: hidden;
  }
  .veuve__head {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: min(calc(100vw - 56px), 760px);
    margin: clamp(18px, 3vh, 42px) auto 28px;
    text-align: center;
    justify-self: center;
  }
  .veuve__head h2 {
    max-width: 100%;
    font-size: clamp(44px, 8vw, 78px);
  }
  .veuve__stage {
    width: min(115vw, 980px);              /* > 100vw → bleeds past viewport */
    aspect-ratio: 16 / 9;
    margin-inline: -7.5vw;
  }
  /* NB: do NOT reset .veuve__sign transform here — the JS --scroll
     translateX animation must run on tablet + phone too. */
}

@media (max-width: 809px) {
  .veuve {
    height: 128vh;
    min-height: 0;
  }
  .veuve__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 0;
    padding-top: 108px;
  }
  .veuve__head {
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100vw - 36px), 560px);
    padding-inline: 0;
    margin-bottom: 30px;
    text-align: center;
  }
  .veuve__head h2 {
    font-size: clamp(34px, 8.8vw, 44px);
    text-align: center;
  }
  .veuve__stage {
    width: min(132vw, 700px);
    margin-inline: auto;
    transform: translateX(-70px);          /* move all three animation layers together */
  }
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

/* ─── Generic CTA pill (replaces inline-styled .site-nav__cta usage in body sections) ─── */
.cta-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 28px;
  border-radius: var(--radius-pill);
  background: var(--color-cream);
  color: var(--color-bg);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
  transition:
    transform var(--dur-base) var(--ease-spring),
    background var(--dur-fast) var(--ease-in-out);
  align-self: flex-start;
}
.cta-pill:hover { transform: scale(1.03); background: var(--color-gold); }
.cta-pill--ghost {
  background: transparent;
  color: var(--color-cream);
  border: 1px solid var(--color-cream);
}
.cta-pill--ghost:hover { background: rgba(239,231,210,0.12); color: var(--color-cream); }

/* ─── Bullet list (Adventure highlights) ─── */
.bullet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bullet-list li {
  font-family: var(--font-sans);          /* Barlow */
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-cream);
}

/* ─── Hotel Josefina split block (UNIQUE / Hotel / Josefina letter-spaced display) ─── */
.josefina {
  position: relative;
  padding: 96px clamp(20px, 5vw, 80px);
}
@media (min-width: 810px) {
  .josefina {
    min-height: 100vh;
    padding: 160px clamp(40px, 5vw, 80px) 96px;
    display: flex;
    align-items: center;
  }
}

/* Scroll-down indicator — above any section overlay/gradient, fades out as user scrolls */
.scroll-down {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--color-cream);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  pointer-events: auto;
  z-index: 5;                       /* above .adventure-hero__overlay (z 1) and .about-hero::after (z 1) */
  opacity: var(--scroll-down-opacity, 1);
  transition: opacity 0.35s ease;
  animation: scrollNudge 2.4s ease-in-out infinite;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.45));
}
.scroll-down svg { width: 16px; height: 16px; opacity: 0.85; }
@keyframes scrollNudge {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}

.josefina__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  max-width: var(--container-max);
  margin-inline: auto;
}
@media (min-width: 810px) {
  .josefina__grid { grid-template-columns: 1fr 1fr; gap: 80px; }
}

.josefina__title {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.josefina__line {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, 9vw, 128px);
  letter-spacing: -0.02em;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--color-cream);
}
.josefina__line--strong { color: var(--color-cream); }
.josefina__line + .josefina__line { color: var(--color-cream-dim); }

.josefina__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.josefina__subheading {
  font-family: var(--font-sans);
  font-size: clamp(20px, 2.3vw, 28px);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.05;
  text-transform: uppercase;
}

@media (max-width: 809px) {
  .josefina {
    min-height: auto;
    padding: 54px 32px 30px;
  }
  .josefina__grid {
    gap: 34px;
  }
  .josefina__title {
    gap: 10px;
  }
  .josefina__line {
    font-size: clamp(62px, 19vw, 76px);
    line-height: 0.88;
  }
  .josefina__copy {
    gap: 16px;
  }
  .josefina__copy .cta-pill {
    margin-top: 2px;
  }
}

/* ─── IZDELKI / Made by Ksenija ─── */
.izdelki {
  position: relative;
  padding: 160px 24px;
  text-align: center;
  display: grid;
  place-items: center;
  min-height: 80vh;
  overflow: hidden;
}
.izdelki__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.izdelki__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
}
.izdelki__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 920px;
}
.izdelki__heading {
  display: block;
  margin: 0;
  line-height: 1;
}
.izdelki__heading img {
  display: block;
  width: clamp(280px, 60vw, 720px);
  height: auto;
  filter: brightness(0) invert(1);     /* whiten the dark-fill SVG */
  -webkit-filter: brightness(0) invert(1);
}
@media (max-width: 809px) {
  .izdelki {
    min-height: 68svh;
    padding: 112px 24px 96px;
  }
  .izdelki__inner {
    gap: 12px;
  }
  .izdelki__heading img {
    width: min(78vw, 420px);
  }
}

/* ─── Adventure page hero ─── */
.adventure-hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: 120px clamp(20px, 5vw, 80px) clamp(120px, 15vh, 180px);
  overflow: hidden;
}
.adventure-hero { background: var(--color-bg); }
.adventure-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  background: var(--color-bg);             /* kills any flash of placeholder image */
  opacity: 0;
  transition: opacity 0.45s ease;
}
.adventure-hero__bg.is-ready { opacity: 1; }
.adventure-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 35%, rgba(0,0,0,0.20) 70%);
  z-index: 1;
}
.adventure-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  max-width: 1080px;
}
.adventure-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(64px, 11vw, 168px);
  letter-spacing: -0.02em;
  line-height: 0.88;
  text-transform: uppercase;
  color: var(--color-cream);
  margin: 0;
}
.adventure-hero__signature {
  width: clamp(320px, 48vw, 640px);
  height: auto;
  opacity: 0.95;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.45));
}
.adventure-section__signature {
  display: block;
  width: clamp(260px, 34vw, 520px);
  height: auto;
  margin: 4px 0 8px;
  filter: brightness(0) invert(1) drop-shadow(0 4px 20px rgba(0,0,0,0.45));
  opacity: 0.95;
}
@media (max-width: 809px) {
  .adventure-hero__signature { width: 80vw; }
  .adventure-hero { align-items: end; padding-bottom: 112px; }
  .adventure-section__signature { width: min(82vw, 420px); }
}

/* ─── Single-screen bio page (about-us/*) ───
   Full viewport, NO page scroll on desktop. Photo on one side with the name
   overlaid on it; subheading + body + back button on the other side. */
.bio {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
@media (min-width: 810px) {
  .bio { grid-template-columns: 1fr 1fr; }
}

.bio__media {
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
}
.bio__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bio__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.05) 50%);
  pointer-events: none;
}
.bio__name {
  position: absolute;
  left: 32px; right: 32px;
  bottom: 32px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 88px);
  letter-spacing: -0.02em;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--color-cream);
  z-index: 2;
  margin: 0;
}

.bio__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 96px clamp(24px, 5vw, 64px) 32px;
  overflow-y: auto;
  max-height: 100vh;
}
.bio__body .eyebrow { color: var(--color-cream); }
.bio__quote {
  font-family: var(--font-semi-condensed);
  font-weight: 300;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.5;
  font-style: italic;                    /* italic ONLY on the pull quote */
  color: var(--color-cream);
  margin: 8px 0 0;
}
.bio__copy {
  font-family: var(--font-semi-condensed);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
  font-style: normal;                    /* explicitly not italic */
  color: var(--color-cream-dim);
  margin: 0;
}
.bio__back {
  position: fixed;
  top: 40px;
  right: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 12px;
  border-radius: var(--radius-pill);
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(239, 231, 210, 0.18);
  color: var(--color-cream);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  z-index: 200;
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-fast) var(--ease-in-out);
}
.bio__back:hover { transform: scale(1.04); background: rgba(10,10,10,0.75); }
.bio__back svg { width: 14px; height: 14px; }

@media (max-width: 809px) {
  .bio { position: static; height: auto; min-height: 100vh; }
  .bio__media { aspect-ratio: 4/5; max-height: 70vh; }
  .bio__body { padding: 32px 20px 48px; max-height: none; overflow: visible; }
  .bio__back { top: 16px; right: 16px; }
}

/* ─── Page hero (used on /menu/, /adventure/, etc.) ─── */
.page-hero {
  padding: 200px clamp(20px, 5vw, 80px) 80px;
  background: var(--color-bg);
}
.page-hero__inner {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
}
.page-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(64px, 11vw, 160px);
  letter-spacing: -0.02em;
  line-height: 0.85;
  color: var(--color-cream);
  text-transform: none;
  margin: 0;
}

/* ─── About hero ─── */
.about-hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: end center;
  padding: 120px 16px clamp(96px, 16vh, 180px);
  overflow: hidden;
  background: var(--color-bg);
}
.about-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  background: var(--color-bg);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.about-hero__video.is-ready { opacity: 1; }
.about-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Gradient rises from bottom to viewport-middle only — keeps video clearly visible up top */
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 35%, rgba(0, 0, 0, 0.20) 70%);
  pointer-events: none;
}
.about-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
}
.about-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(96px, 24vw, 340px);
  letter-spacing: -0.02em;
  line-height: 0.82;
  text-transform: uppercase;
  color: var(--color-cream);
  margin: 0;
}
@media (max-width: 809px) {
  .about-hero { min-height: 86vh; padding: 96px 8px 96px; }
  .about-hero__title { font-size: clamp(82px, 28vw, 150px); }
}

/* ─── Room detail (on /hotel/) ─── */
.room-detail {
  padding: 80px clamp(20px, 5vw, 64px);
}
.room-detail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  max-width: var(--container-max);
  margin-inline: auto;
}
@media (min-width: 810px) {
  .room-detail__grid { grid-template-columns: 1fr 1fr; gap: 64px; }
  .room-detail__grid--reverse > .room-detail__media { order: 2; }
}
.room-detail__media {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.room-detail__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.room-detail__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.room-detail__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.room-detail__price-value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 56px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-cream);
}
.room-detail__price-unit {
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-cream-dim);
}

/* ─── Spec list (room amenities) ─── */
.spec-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 20px 0;
}
.spec-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.spec-list strong {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: var(--color-cream);
}
.spec-list span {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-cream-dim);
}

/* ─── History section (on /hotel/) ─── */
.history { padding: 120px clamp(20px, 5vw, 80px); }
.history__inner {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
#kolo-kras {
  padding-top: clamp(96px, 12vh, 148px);
  padding-bottom: clamp(96px, 12vh, 148px);
}
#brin::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.66) 34%, rgba(0,0,0,0.24) 70%, rgba(0,0,0,0.08) 100%),
    linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.34) 58%, rgba(0,0,0,0.16) 100%);
}

/* ─── Menu sections (on /menu/) ─── */
.menu-block { padding: 80px clamp(20px, 5vw, 80px); }
.menu-block__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.menu-block--tasting { background: var(--color-surface); }

.menu-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.menu-section__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-cream);
  text-transform: uppercase;
  margin: 0;
}
.menu-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.menu-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-semi-condensed);
  font-weight: 500;
  font-size: clamp(20px, 1.5vw, 28px);
  line-height: 1.22;
  color: rgba(239, 231, 210, 0.88);
}
.menu-list__name {
  font-family: var(--font-semi-condensed);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  color: var(--color-cream);
}
.menu-list__detail {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--color-cream-dim);
}

/* ─── Tasting cards ─── */
.tasting-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 810px) {
  .tasting-grid { grid-template-columns: repeat(3, 1fr); }
}
.tasting-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}
.tasting-card__count {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 88px;
  letter-spacing: -0.04em;
  line-height: 0.85;
  color: var(--color-cream);
}
.tasting-card__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-cream);
  margin: 0;
}
.tasting-card__desc {
  font-family: var(--font-semi-condensed);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-cream-dim);
  margin: 0;
}
.tasting-card__price {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  letter-spacing: -0.01em;
  color: var(--color-cream);
  margin-top: auto;
}
.tasting-card .cta-pill,
.bon-cta__inner .cta-pill,
.reservation__inner .cta-pill {
  align-self: center;
}

/* ─── Reservation, bon CTA, policies (shared layout) ─── */
.reservation, .bon-cta, .policies { padding: 120px clamp(20px, 5vw, 80px); }
.reservation__inner, .bon-cta__inner, .policies__inner {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
}
.policies__list {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0; padding: 0;
}
.policies__list dt {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-cream);
  margin-bottom: 4px;
}
.policies__list dd {
  margin: 0 0 12px;
  font-family: var(--font-semi-condensed);
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-cream-dim);
}
.policies__list dd a { color: var(--color-cream); text-decoration: underline; }

/* ─── Menu page sticky-image layout ─── */
.menu-sticky {
  padding: 16px 16px 80px;
}
.menu-sticky__inner {
  max-width: 1920px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 810px) {
  .menu-sticky__inner { grid-template-columns: 1fr 1fr; align-items: start; }
}

.menu-sticky__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-surface);
}
@media (min-width: 810px) {
  .menu-sticky__media {
    position: sticky;
    top: 16px;
    height: calc(100vh - 32px);
    aspect-ratio: auto;
  }
}
.menu-sticky__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.menu-sticky__media img.is-active { opacity: 1; }
.menu-sticky__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.24) 42%, rgba(0,0,0,0.84) 100%);
  pointer-events: none;
}
.menu-sticky__media-copy {
  position: absolute;
  left: clamp(28px, 4vw, 64px);
  right: clamp(28px, 4vw, 64px);
  bottom: clamp(32px, 5vw, 72px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: ivory;
}
.menu-sticky__media-copy span {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 1;
  text-transform: uppercase;
}
.menu-sticky__media-copy h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(56px, 6.2vw, 112px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.88;
  color: ivory;
}
.menu-sticky__media-copy p {
  max-width: 680px;
  margin: 0;
  font-family: var(--font-semi-condensed);
  font-size: clamp(22px, 1.8vw, 32px);
  font-weight: 300;
  line-height: 1.16;
  color: rgba(245, 242, 234, 0.82);
}

.menu-sticky__content {
  display: flex;
  flex-direction: column;
  gap: 48px;
  min-height: calc(100vh - 32px);
  padding: clamp(40px, 5vw, 80px);
  border: 1px solid rgba(239, 231, 210, 0.20);
  border-radius: 16px;
  background: #000;
}

/* Tasting cards with images */
.tasting-grid--with-image .tasting-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tasting-card__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.tasting-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.tasting-grid--with-image .tasting-card > :not(.tasting-card__photo) {
  padding: 0 24px;
}
.tasting-grid--with-image .tasting-card > :first-child:not(.tasting-card__photo) {
  padding-top: 24px;
}
.tasting-grid--with-image .tasting-card > .cta-pill { margin: 16px 24px 24px; padding: 0 22px; }

/* On a tasting card with photo, price uses Forum but normal weight (not the giant 88 from .tasting-card__count) */
.tasting-grid--with-image .tasting-card__price {
  font-family: var(--font-display);
  font-size: 32px;
  margin-top: 0;
}

/* Override: tasting card "count" stays small and on its own line */
.tasting-grid--with-image .tasting-card__count {
  font-size: 56px;
  line-height: 0.85;
  padding-top: 16px;
}

/* ─── Awards strip (footer card row) ─── */
.awards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: var(--space-10) var(--container-px);
}
@media (min-width: 810px) { .awards { grid-template-columns: repeat(3, 1fr); } }

.award-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  text-align: center;
  font-family: var(--font-semi-condensed);
}
.award-card__title {
  font-family: var(--font-sans);          /* Barlow */
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-cream);
}
.award-card__line {
  font-family: var(--font-sans);          /* Barlow */
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-cream-dim);
}
.award-card__rating {
  font-family: var(--font-display);       /* Forum */
  font-weight: 400;
  font-size: 56px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-cream);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.award-card__icons {
  display: flex; align-items: center; gap: var(--space-3);
}
.award-card__icons img { height: 36px; width: auto; }

/* ============================================================
   ─── Unified site footer (same on every page) ───
   Structure (top → bottom):
     1. .contact-hero — page-specific bg image + "Stopite v stik" heading
     2. .awards-block — Google rating + Michelin + Gault & Millau cards
     3. .footer-detail — hours + contact + Google map embed
     4. .footer-bottom — copyright bar
   ============================================================ */

/* 1. Contact hero (image + heading) — only the image/heading text differ per page */
.contact-hero {
  position: relative;
  min-height: 60vh;
  display: grid;
  align-items: end;
  padding: 80px clamp(20px, 5vw, 80px);
  overflow: hidden;
}
.contact-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.contact-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0) 70%);
  z-index: 1;
  pointer-events: none;
}
.contact-hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin-inline: auto;
  width: 100%;
}
.contact-hero h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, 10vw, 144px);
  letter-spacing: -0.02em;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--color-cream);
  margin: 0;
}

/* 2. Awards block (3 cards: Google / Michelin / Gault Millau) */
.awards-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 64px clamp(20px, 5vw, 80px);
  max-width: var(--container-max);
  margin-inline: auto;
}
@media (min-width: 810px) { .awards-block { grid-template-columns: repeat(3, 1fr); } }

.awards-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 24px;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  text-align: center;
  min-height: 220px;
  justify-content: center;
}
.awards-card__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-cream);
}
.awards-card__big {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 56px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-cream);
}
.awards-card__big svg { width: 36px; height: 36px; color: rgb(255, 196, 0); }
.awards-card__stars {
  display: flex; gap: 2px;
  color: var(--color-cream);
}
.awards-card__stars svg { width: 14px; height: 14px; }
.awards-card__line {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-cream-dim);
}
.awards-card__icons {
  display: flex; align-items: center; gap: 16px;
}
.awards-card__icons img { height: 40px; width: auto; }
.awards-card__caps {
  display: flex; align-items: center; gap: 4px;
}
.awards-card__caps img { height: 32px; width: auto; }

/* 3. Footer detail (hours + contact + map) */
.footer-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0 clamp(20px, 5vw, 80px) 48px;
  max-width: var(--container-max);
  margin-inline: auto;
  border-top: 0;
}
@media (min-width: 810px) { .footer-detail { grid-template-columns: 1fr 1fr 2fr; } }

.footer-detail > div:not(.footer-detail__map),
.footer-detail__contact {
  min-height: 220px;
  padding: 32px;
  border-radius: 16px;
  border: 1px solid var(--color-border-hover);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    var(--color-surface);
}

.footer-detail dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.footer-detail dt {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-cream-dim);
}
.footer-detail dd {
  margin: 0;
  font-family: var(--font-semi-condensed);
  font-size: 16px;
  color: var(--color-cream);
}
.footer-detail__contact { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-semi-condensed); font-size: 16px; color: var(--color-cream); }
.footer-detail__contact a { color: var(--color-cream); text-decoration: none; }
.footer-detail__contact a:hover { color: var(--color-gold); }
.footer-detail__map {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--color-border-hover);
  min-height: 340px;
  background: var(--color-surface);
}
.footer-detail__map iframe {
  width: 100%;
  height: 100%;
  min-height: 280px;
  border: 0;
  display: block;
  filter: invert(0.92) hue-rotate(180deg) saturate(0.6);  /* dark-mode-ish map */
}
@media (max-width: 809px) {
  .footer-detail__map,
  .footer-detail__map iframe {
    min-height: 420px;
  }
}

/* 3b. Reservation CTA INSIDE the .footer-detail__contact card — small label
   plus the Sobo/Mizo pill pair, mirroring the side-hamburger menu's design.
   Sits between the social links and the closing of the contact card so the
   block reads as a natural extension of the contact info. */
.footer-detail__cta {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-detail__cta-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-cream-dim);
}
.footer-detail__cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.footer-detail__cta-action {
  min-height: 44px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.6px;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0 14px;
  transition: background var(--dur-fast) var(--ease-in-out), color var(--dur-fast) var(--ease-in-out), border-color var(--dur-fast) var(--ease-in-out);
}
/* Visual order: SOBO (cream) on the LEFT, MIZO (ghost) on the RIGHT. */
.footer-detail__cta-row .footer-detail__cta-action--room  { order: 1; }
.footer-detail__cta-row .footer-detail__cta-action--table { order: 2; }
.footer-detail__cta-action--room {
  border: 0;
  background: var(--color-cream);
  color: var(--color-bg);
}
.footer-detail__cta-action--room:hover { background: #fff8ec; }
.footer-detail__cta-action--ghost,
.footer-detail__cta-action--table {
  border: 1px solid rgba(239, 231, 210, 0.34);
  background: rgba(239, 231, 210, 0.04);
  color: var(--color-cream);
}
.footer-detail__cta-action--ghost:hover,
.footer-detail__cta-action--table:hover {
  border-color: rgba(239, 231, 210, 0.6);
  background: rgba(239, 231, 210, 0.1);
}
/* Tablet — slightly bigger pills (the contact card is wider). */
@media (min-width: 810px) and (max-width: 1279px) {
  .footer-detail__cta { margin-top: 16px; gap: 12px; }
  .footer-detail__cta-action { min-height: 46px; font-size: 13px; }
}
/* Desktop — roomier. */
@media (min-width: 1280px) {
  .footer-detail__cta { margin-top: 18px; gap: 12px; }
  .footer-detail__cta-action { min-height: 48px; font-size: 13.5px; }
}

/* 4. Footer bottom (copyright bar) */
.footer-bottom {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  padding: 24px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-cream-faint);
}

/* Legacy .site-footer kept as alias; new pages should use .footer-* sections */
.site-footer {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 48px clamp(20px, 5vw, 80px);
  border-top: 1px solid var(--color-border);
}
@media (min-width: 810px) { .site-footer { grid-template-columns: 1fr 1fr; } }
.site-footer__hours dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.site-footer__hours dt {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-cream-dim);
}
.site-footer__hours dd { margin: 0; font-family: var(--font-semi-condensed); font-size: 16px; color: var(--color-cream); }
.site-footer__contact { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-semi-condensed); font-size: 16px; }
.site-footer__contact a { color: var(--color-cream); text-decoration: none; }
.site-footer__contact a:hover { color: var(--color-gold); }
.site-footer__bottom {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-cream-faint);
}

/* ─── Hamburger side menu (LIQUID GLASS) — slides from the LEFT, side panel only ─── */
.site-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: clamp(420px, 34vw, 460px);
  max-width: calc(100vw - 80px);
  z-index: 110;
  background: rgba(10, 11, 10, 0.55);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-right: 1px solid rgba(239, 231, 210, 0.18);
  box-shadow: 32px 0 80px rgba(0, 0, 0, 0.45), inset 1px 0 0 rgba(239, 231, 210, 0.08);
  display: flex;
  flex-direction: column;
  padding: 96px 32px 32px;
  transform: translateX(-100%);
  visibility: hidden;
  transition: none;        /* NO transition until body.ready — prevents slide-out flash on first load */
  overflow-y: auto;
}
@media (min-width: 810px) {
  .site-menu {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto 1fr auto auto;
    column-gap: 16px;
    align-items: start;
    padding: 96px 34px 32px 38px;
  }
  .site-menu nav {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 72px;
  }
  .site-menu__contact {
    grid-column: 1 / -1;
    grid-row: 4;
  }
  .site-menu__actions {
    grid-column: 1 / -1;
    grid-row: 5;
  }
}
@media (max-width: 809px) {
  .site-menu {
    top: 0;
    bottom: 0;
    width: 100vw;
    max-width: none;
    height: 100svh;
    z-index: 92;
    padding: 106px 24px 22px;
    border-radius: 0;
    border-right: 0;
    background:
      radial-gradient(circle at 22% 18%, rgba(239, 231, 210, 0.10), transparent 30%),
      radial-gradient(circle at 78% 70%, rgba(226, 166, 0, 0.08), transparent 34%),
      rgba(8, 9, 8, 0.68);
    backdrop-filter: blur(34px) saturate(190%) brightness(0.9);
    -webkit-backdrop-filter: blur(34px) saturate(190%) brightness(0.9);
    box-shadow: inset 0 1px 0 rgba(239, 231, 210, 0.08);
    overflow: hidden;
  }
}
body.ready .site-menu {
  transition:
    transform 0.55s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear 0.55s;
}
.site-menu[data-state="open"] {
  transform: translateX(0);
  visibility: visible;
}
body.ready .site-menu[data-state="open"] {
  transition:
    transform 0.55s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear 0s;
}

.site-menu::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(239, 231, 210, 0.06), transparent);
  pointer-events: none;
}

.site-menu nav { width: 100%; }

.site-menu__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  z-index: 105;
  opacity: 0;
  pointer-events: none;
  transition: none;
}
body.ready .site-menu__overlay { transition: opacity 0.35s ease; }
.site-menu__overlay[data-state="open"] {
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 809px) {
  .site-menu__overlay {
    z-index: 90;
    background: rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

.site-menu__close {
  position: absolute;
  top: clamp(24px, 5vw, 64px);
  right: clamp(24px, 5vw, 64px);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 0;
  background: transparent;
  border-radius: var(--radius-pill);
  color: var(--color-cream);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-in-out);
}
.site-menu__close:hover { background: var(--color-surface); }
@media (min-width: 810px) {
  .site-menu__close {
    position: static;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    width: 44px;
    height: 44px;
  }
  .site-menu__close:hover {
    background: rgba(239, 231, 210, 0.08);
  }
}
@media (max-width: 809px) {
  .site-menu__close { display: none; }
  body.menu-open .site-nav {
    z-index: 120;
    /* 4 cols: X | logo | langs | home. `auto` for end cols (button width) +
       `auto` for content cols, with `justify-content: space-between` distributing
       leftover horizontal space between groups so X/home land at the drawer's
       padding edges. */
    grid-template-columns: auto auto auto auto;
    justify-content: space-between;
    column-gap: 4px;
    align-items: center;
    height: 56px;
    padding: 6px 0;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
  }
  body.menu-open .site-nav__cta,
  body.menu-open .site-nav__bookpair {
    display: none;
  }
  /* X (close) and home buttons sit on opposite edges of the drawer, aligned with the
     drawer body's content padding (24 px). Both become circular pills with a faint
     glass background so they read as "buttons" instead of naked icons. */
  body.menu-open .site-nav {
    padding-left: 18px;
    padding-right: 18px;
  }
  body.menu-open .site-nav__menu-btn {
    grid-column: 1;
    justify-self: start;
    width: 40px;
    min-width: 40px;
    height: 40px;
    align-self: center;
    border-radius: 999px;
    background: rgba(239, 231, 210, 0.07);
    border: 1px solid rgba(239, 231, 210, 0.14);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
  }
  body.menu-open .site-nav__menu-btn:hover {
    background: rgba(239, 231, 210, 0.12);
  }
  body.menu-open .site-nav__logo {
    grid-column: 2;
    justify-content: flex-start;
    align-self: center;
  }
  body.menu-open .site-nav .lang-pill {
    grid-column: 3;
    justify-self: start;
    align-self: center;
    width: 136px;
    padding: 2px 6px;
  }
  body.menu-open .site-nav .lang-pill-trigger {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.7);
  }
  body.menu-open .site-nav .lang-pill-options {
    left: 6px;
    right: 6px;
    gap: 8px;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%);
  }
  body.menu-open .site-nav .lang-lens {
    display: none;
  }
  body.menu-open .site-nav .lang-opt {
    width: 36px;
    height: 36px;
  }
  body.menu-open .site-nav__home-btn {
    display: grid;
    grid-column: 4;
    justify-self: end;
    align-self: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(239, 231, 210, 0.07);
    border: 1px solid rgba(239, 231, 210, 0.14);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    color: var(--color-cream);
    text-decoration: none;
  }
  body.menu-open .site-nav__home-btn:hover {
    background: rgba(239, 231, 210, 0.12);
  }
  body.menu-open .site-nav__home-btn svg,
  body.menu-open .site-nav__menu-btn svg {
    width: 20px;
    height: 20px;
  }
}

.site-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.site-menu__list li + li a { border-top: 1px solid rgba(239, 231, 210, 0.18); }
.site-menu__list a {
  display: block;
  padding: 20px 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-cream);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--dur-fast) var(--ease-in-out), padding-left var(--dur-base) var(--ease-spring);
}
.site-menu__list a:hover {
  color: var(--color-gold);
  padding-left: 6px;
}

.site-menu__contact {
  margin-top: 18px;                       /* small gap above contact; actions takes the auto-space */
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-sans);            /* Barlow */
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--color-cream-dim);
}
.site-menu__contact a {
  color: var(--color-cream);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-in-out);
}
.site-menu__contact a:hover { color: var(--color-gold); }

/* ─── Drawer logo (top-left inside drawer) — DT only; mobile shows top-nav transform ─── */
.site-menu__logo {
  display: block;
  margin-bottom: 24px;
}
.site-menu__logo img { height: 22px; width: auto; display: block; }
@media (min-width: 810px) {
  .site-menu__logo {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin: 0;
  }
  .site-menu__logo img { height: 30px; }
}
@media (max-width: 809px) {
  .site-menu__logo { display: none; }
}

/* ─── Drawer language flags (row of 3) — DT only ─── */
.site-menu__langs {
  display: flex;
  gap: 12px;
  padding-bottom: 24px;
}
@media (min-width: 810px) {
  .site-menu__langs {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: start;
    padding: 0;
  }
}
@media (max-width: 809px) {
  .site-menu__langs { display: none; }
}
.site-menu__lang-flag {
  width: 40px; height: 28px;
  padding: 0;
  border: 1px solid rgba(239, 231, 210, 0.18);
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.site-menu__lang-flag img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 3px;
  display: block;
  pointer-events: none;
}
.site-menu__lang-flag:hover { transform: scale(1.06); }
.site-menu__lang-flag[aria-selected="true"] {
  border-color: var(--color-cream);
  box-shadow: 0 0 0 1px var(--color-cream) inset;
}

/* ─── Drawer "Rezerviraj" actions block (eyebrow + two short pills) ───
   Visible at ALL breakpoints. The 2-button row matches the desktop top-nav
   bookpair so the drawer reads as a verb-object phrase:
       Rezerviraj
         [ Mizo ]  [ Sobo ]
*/
.site-menu__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
}
.site-menu__actions-label {
  display: block;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-cream);
}
.site-menu__actions-row {
  /* Two equal-width pills that stretch edge-to-edge inside the drawer's content
     padding (≈ width of the menu links above). 1fr 1fr at every breakpoint —
     no fixed-pixel cap on tablet/desktop. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.site-menu__action {
  min-height: 46px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.8px;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0 16px;
}
@media (min-width: 810px) {
  .site-menu__action {
    min-height: 42px;
    padding: 0 14px;
  }
}
/* Visual order: SOBO (cream, room) on the LEFT, MIZO (ghost, table) on the RIGHT.
   The HTML has MIZO first then SOBO (the desktop bookpair convention); CSS `order`
   flips them for the drawer without touching markup. */
.site-menu__actions-row .site-menu__action--room  { order: 1; }
.site-menu__actions-row .site-menu__action--table { order: 2; }
.site-menu__action--room,
.site-menu__action:not(.site-menu__action--ghost) {
  border: 0;
  background: var(--color-cream);
  color: var(--color-bg);
}
.site-menu__action--ghost,
.site-menu__action--table {
  border: 1px solid rgba(239, 231, 210, 0.34);
  background: rgba(239, 231, 210, 0.07);
  color: var(--color-cream);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

@media (max-width: 809px) {
  .site-menu__list a {
    padding: 14px 0;
    font-size: clamp(26px, 7.2vw, 34px);
    letter-spacing: 0.075em;
  }
  .site-menu__contact {
    margin-top: 18px;
    padding-top: 0;
    font-size: 14px;
    gap: 8px;
  }
}

/* When site menu is open, lock body scroll */
body.menu-open { overflow: hidden; }
html.menu-open { overflow: hidden; }

/* Keep legacy phone safety rules from overriding the Framer mobile/tablet hero. */
@media (max-width: 809px) {
  .hero { height: auto; min-height: 0; }
  .hero__inner { min-height: 0; }
  .hero__media,
  .hero-card { min-height: 0; }
}

/* ─── Booking drawer base (drawer JS / React component overlays this) ───
   Keep the fixed mount transparent. The React overlay/panel opt back into
   pointer events only while the drawer is open; otherwise this full-screen
   root would sit invisibly above the whole site and swallow every click. */
#booking-drawer-root {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}

/* ─── Voucher drawer base. The voucher app currently navigates to /voucher/ in a new tab;
       this mount point is here for Phase 3b when the voucher converts to an iframe overlay
       drawer (siblings of #booking-drawer-root). Keep z-index identical so both stack the
       same way relative to the site nav (z-index: 100). Same :has(*) pattern so it
       can't accidentally block clicks. ─── */
#voucher-drawer-root {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}
#voucher-drawer-root:has(*) {
  pointer-events: auto;
}

/* ============================================================
   Current design pass overrides — nav, language, room selector, footer
   ============================================================ */

.rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rating-stars img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  transform-origin: center;
  transition: transform 260ms var(--ease-out-quart), filter 260ms var(--ease-out-quart);
}
.rating-stars:hover img:nth-child(1) { transform: translateY(8px) scale(0.86); }
.rating-stars:hover img:nth-child(2) { transform: translateY(-8px) scale(1.06); }
.rating-stars:hover img:nth-child(3) { transform: translateY(5px) scale(0.96); }
.rating-stars:hover img:nth-child(4) { transform: translateY(-6px) scale(1.03); }
.rating-stars:hover img:nth-child(5) { transform: translateY(7px) scale(0.9); }

/* Nav choice state: close + logo + Mizo + Sobo */
.site-nav[data-state="book"] .site-nav__bookpair {
  display: contents;
}
.site-nav[data-state="book"] .site-nav__logo { order: 1; }
.site-nav[data-state="book"] .site-nav__book-close {
  order: 0;
  width: 42px;
  height: 42px;
  background: rgb(7, 7, 7);
}
.site-nav[data-state="book"] .site-nav__bookpair [data-open-table-reservation] { order: 2; }
.site-nav[data-state="book"] .site-nav__bookpair [data-open-booking-drawer] { order: 3; }
.site-nav__book-btn--ghost {
  min-width: 96px;
  background: rgb(7, 7, 7);
  color: var(--color-cream);
  border: 1px solid rgba(239, 231, 210, 0.20);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 1.6px;
}
.lang-pill[data-state="open"] {
  width: 174px;
}
@media (max-width: 809px) {
  .site-nav[data-state="book"] {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(354px, calc(100vw - 16px));
    max-width: 354px;
    display: grid;
    grid-template-columns: 40px 120px 72px 72px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 52px;
    padding: 6px;
    background: rgba(10, 10, 10, 0.34);
    overflow: hidden;
  }
  .site-nav[data-state="book"] .site-nav__logo {
    grid-column: 2;
    justify-content: flex-start;
  }
  .site-nav[data-state="book"] .site-nav__logo img { height: 24px; }
  .site-nav[data-state="book"] .site-nav__book-close {
    grid-column: 1;
    justify-self: center;
    width: 40px;
    height: 40px;
  }
  .site-nav[data-state="book"] .site-nav__bookpair {
    display: contents;
  }
  .site-nav[data-state="book"] .site-nav__book-btn {
    min-width: 0;
    width: 100%;
    height: 40px;
    padding: 0;
    font-size: 12.5px;
    letter-spacing: 1.35px;
  }
  .site-nav[data-state="book"] .site-nav__bookpair [data-open-table-reservation] {
    grid-column: 3;
  }
  .site-nav[data-state="book"] .site-nav__bookpair [data-open-booking-drawer] {
    grid-column: 4;
  }
}
@media (max-width: 809px) {
  .site-nav {
    grid-template-rows: 40px;
  }
  .site-nav .lang-pill {
    height: 40px;
  }
}

/* Homepage room cards (Image 7 lives only on the index page). */
.rooms .room-card {
  aspect-ratio: 3 / 4.7;
  cursor: default;
}
.rooms .room-card__overlay {
  background: linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.62) 32%, rgba(0,0,0,0.08) 70%);
}
.rooms .room-card__stars {
  top: auto;
  left: clamp(24px, 2vw, 30px);
  bottom: clamp(296px, calc(18.4vw - 16px), 326px);
}
.rooms .room-card__stars img {
  width: clamp(24px, 1.65vw, 32px);
  height: clamp(24px, 1.65vw, 32px);
  position: static;
  object-fit: contain;
}
.rooms .room-card__stars svg {
  width: clamp(24px, 1.65vw, 32px);
  height: clamp(24px, 1.65vw, 32px);
  display: block;
  color: #fff;
}
.rooms .room-card__name,
.rooms .room-card[data-expanded="true"] .room-card__name {
  left: clamp(24px, 2vw, 30px);
  right: clamp(24px, 2vw, 30px);
  bottom: clamp(199px, calc(13.3vw - 16px), 215px);
  font-size: clamp(58px, 4.8vw, 88px);
  line-height: 0.84;
}
.rooms .room-card__details,
.rooms .room-card[data-expanded="true"] .room-card__details {
  left: clamp(24px, 2vw, 30px);
  right: clamp(24px, 2vw, 30px);
  bottom: 90px;
  gap: 10px;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.rooms .room-card__hairline {
  height: 2px;
  margin-bottom: 2px;
  background: rgba(239, 231, 210, 0.76);
}
.rooms .room-card__detail-item {
  gap: 12px;
  font-family: var(--font-semi-condensed);
  font-size: clamp(15px, 1.05vw, 20px);
  font-weight: 500;
  letter-spacing: 0.5px;
  color: rgba(239, 231, 210, 0.74);
}
.rooms .room-card__detail-item img {
  position: static;
  inset: auto;
  display: block;
  width: clamp(18px, 1.15vw, 22px);
  height: clamp(18px, 1.15vw, 22px);
  object-fit: contain;
  flex: 0 0 auto;
  opacity: 0.72;
}
.rooms .room-card__cta {
  left: 50%;
  right: auto;
  width: min(calc(100% - clamp(80px, 6vw, 112px)), 370px);
  bottom: 24px;
  gap: 1px;
  transform: translateX(-50%);
}
.rooms .room-card__zoom {
  width: 46px;
  height: 46px;
  background: #fff;
  color: #050505;
  border: 0;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-fast) var(--ease-in-out), box-shadow var(--dur-fast) var(--ease-in-out);
  will-change: transform;
}
.rooms .room-card__cta-link,
.rooms .room-card[data-expanded="true"] .room-card__cta-link {
  flex: 1;
  max-width: 312px;
  height: 46px;
  background: #fff;
  color: #050505;
  border: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-fast) var(--ease-in-out), box-shadow var(--dur-fast) var(--ease-in-out);
  will-change: transform;
}
.rooms .room-card__cta:hover .room-card__zoom,
.rooms .room-card__zoom:hover {
  transform: translateY(-1px) scale(1.06);
  background: #f7f3e8;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}
.rooms .room-card__cta:hover .room-card__cta-link,
.rooms .room-card__cta-link:hover {
  transform: translateY(-1px) scale(1.025);
  background: #f7f3e8;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}
.rooms .room-card__zoom:active,
.rooms .room-card__cta-link:active {
  transform: translateY(0) scale(0.98);
}
@media (max-width: 809px) {
  .rooms .room-card { aspect-ratio: 3 / 4.9; }
  .rooms .room-card__name,
  .rooms .room-card[data-expanded="true"] .room-card__name {
    bottom: 202px;
    font-size: clamp(52px, 17vw, 76px);
  }
  .rooms .room-card__stars { bottom: 288px; }
  .rooms .room-card__details,
  .rooms .room-card[data-expanded="true"] .room-card__details { bottom: 104px; }
  .rooms .room-card__zoom,
  .rooms .room-card__cta-link { height: 46px; }
  .rooms .room-card__zoom { width: 46px; }
}

@media (max-width: 1279px) {
  .rooms {
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    width: max-content;
    max-width: none;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: auto;
    transform: translate3d(var(--rooms-x, 0px), 0, 0);
    transition: transform 0.22s linear;
    will-change: transform;
  }
  .rooms::-webkit-scrollbar { display: none; }
  .rooms .room-card {
    flex: 0 0 min(78vw, 560px);
    min-height: min(72svh, 720px);
    scroll-snap-align: none;
  }
  .rooms .room-card > img {
    display: block;
    opacity: 1;
  }
  .rooms .room-card__stars {
    bottom: clamp(257px, calc(24vw - 24px), 311px);
  }
  .rooms .room-card__name,
  .rooms .room-card[data-expanded="true"] .room-card__name {
    bottom: clamp(176px, calc(18vw - 24px), 226px);
    font-size: clamp(54px, 8vw, 78px);
  }
  .rooms .room-card__details,
  .rooms .room-card[data-expanded="true"] .room-card__details {
    bottom: 88px;                          /* +6 px from CTA */
    gap: 8px;
  }
  .rooms .room-card__detail-item {
    font-size: clamp(15px, 2.1vw, 19px);
    line-height: 1.05;
  }
}

@media (max-width: 809px) {
  .rooms { gap: 8px; }
  .rooms .room-card {
    flex-basis: min(calc(100vw - 16px), 430px);
    min-height: 560px;
    max-height: 74svh;
  }
  .rooms .room-card__stars {
    bottom: 268px;
  }
  .rooms .room-card__stars img,
  .rooms .room-card__stars svg {
    width: clamp(21px, 5.8vw, 24px);
    height: clamp(21px, 5.8vw, 24px);
  }
  .rooms .room-card__name,
  .rooms .room-card[data-expanded="true"] .room-card__name {
    bottom: 206px;
    font-size: clamp(56px, 15vw, 70px);
  }
  .rooms .room-card__details,
  .rooms .room-card[data-expanded="true"] .room-card__details {
    bottom: 98px;                          /* keeps 12px+ breathing room above CTA */
    gap: 7px;
  }
  .rooms .room-card__cta {
    left: 22px;
    right: 22px;
    bottom: 24px;
    width: auto;
    transform: none;
    gap: 4px;
    max-width: none;
  }
  .rooms .room-card__zoom,
  .rooms .room-card__cta-link,
  .rooms .room-card[data-expanded="true"] .room-card__cta-link {
    height: 54px;
  }
  .rooms .room-card__zoom {
    width: 54px;
    flex: 0 0 54px;
  }
  .rooms .room-card__cta-link,
  .rooms .room-card[data-expanded="true"] .room-card__cta-link {
    min-width: 0;
    max-width: none;
    font-size: 17px;
    letter-spacing: 1.15px;
  }
  .rooms .room-card__detail-item {
    font-size: clamp(15px, 4vw, 17px);
    line-height: 1.08;
  }
  .rooms .room-card__detail-item img {
    width: clamp(18px, 4.8vw, 21px);
    height: clamp(18px, 4.8vw, 21px);
  }
  .rooms .room-card__hairline {
    margin-bottom: 4px;
  }
}

/* Component: horizontal slide indicator — visible only on tablet + phone. */
.rooms__dots {
  display: none;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  justify-content: center;
  gap: 16px;
}
.rooms__dots li { display: block; }
.rooms__dots button {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(239, 231, 210, 0.28);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: width 0.35s var(--ease-out-quart), background 0.35s ease;
}
.rooms__dots button[aria-selected="true"] {
  width: 52px;
  background: var(--color-cream);
}
@media (max-width: 1279px) { .rooms__dots { display: flex; } }

/* Component: horizontal slide — tablet + phone vertical scroll drives the room sequence. */
@media (max-width: 1279px) {
  .rooms-pin {
    position: relative;
    height: calc(100svh + 190svh);           /* scroll distance for horizontal slide without a long empty tail */
    overflow: clip;
    isolation: isolate;
  }
  .rooms-pin__inner {
    position: sticky;
    top: 0;
    height: 100svh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 58px 0 24px;
    gap: 0;
    overflow: clip;
    isolation: isolate;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  .rooms-pin .rooms {
    align-self: flex-start;
    pointer-events: auto;
    touch-action: pan-y;
    z-index: 1;
  }
  .rooms-pin.cards-stagger > *,
  .rooms-pin .cards-stagger > *,
  .rooms-pin .room-card {
    opacity: 1 !important;
    transform: translateZ(0) !important;
    transition: none !important;
  }
  .rooms-pin .room-card:hover > img,
  .rooms-pin .room-card > img {
    transform: translateZ(0) !important;
  }
  .rooms-pin .room-card__overlay {
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .rooms-pin .room-card__details,
  .rooms-pin .room-card[data-expanded="true"] .room-card__details,
  .rooms-pin .room-card__name,
  .rooms-pin .room-card__stars,
  .rooms-pin .room-card__cta {
    opacity: 1;
    visibility: visible;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}
/* Desktop: wrapper is invisible — children behave as the 3-card grid. */
@media (min-width: 1280px) {
  .rooms-pin,
  .rooms-pin__inner { display: contents; }
}

/* /hotel interactive room selector */
.hotel-room-selector {
  padding: 0;
  min-height: 100svh;
  background: #000;
  position: relative;
}
.hotel-room-selector__inner {
  height: 100svh;
  min-height: 720px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.98fr);
  gap: clamp(28px, 3.4vw, 64px);
  align-items: stretch;
  overflow: hidden;
}
.hotel-room-selector__visual {
  position: relative;
  align-self: start;
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 720px;
  border-radius: 0 16px 16px 0;
  overflow: hidden;
  background: var(--color-surface);
}
.hotel-room-selector__media-track {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.hotel-room-selector__media-slide {
  position: absolute;
  inset: 0;
  transform: translate3d(0, calc((var(--room-index) - var(--room-track-progress, 0)) * 100%), 0);
  will-change: transform;
}
.hotel-room-selector__media-slide > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hotel-room-selector__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(0deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.45) 28%, rgba(0,0,0,0.04) 68%);
}
.hotel-room-selector__visual-copy {
  position: absolute;
  left: clamp(28px, 3vw, 54px);
  right: 24px;
  bottom: 24px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: opacity 220ms ease;
}
.hotel-room-selector__stars {
  display: flex;
  gap: 6px;
}
.hotel-room-selector__stars[hidden] { display: none; }
.hotel-room-selector__stars img,
.hotel-room-selector__stars svg {
  position: static;
  inset: auto;
  width: clamp(24px, 1.8vw, 34px);
  height: clamp(24px, 1.8vw, 34px);
  object-fit: contain;
}
.hotel-room-selector__choice-label {
  display: none;
}
/* Responsive eyebrow lives in the details/selector area, outside the image overlay. */
.hotel-room-selector__details-eyebrow {
  display: none;
}
.hotel-room-selector__visual-copy h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(64px, 6.2vw, 112px);
  line-height: 0.82;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fffef3;
}
.hotel-room-selector__mobile-summary {
  display: none;
}
.hotel-room-selector__mobile-summary h3,
.hotel-room-selector__mobile-summary p {
  margin: 0;
}
.hotel-room-selector__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0 0 22px;
}
.hotel-room-selector__tabs button {
  height: 52px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.42);
  color: rgba(239, 231, 210, 0.42);
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.05vw, 20px);
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  cursor: pointer;
}
.hotel-room-selector__tabs button.is-active {
  /* height intentionally inherits from the base `button` rule above so the active
     pill stays the same size as the inactive ones — no vertical jump on selection. */
  background: #fff;
  color: #050505;
  border-color: #fff;
}
.hotel-room-selector__details {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100svh;
  min-height: 720px;
  padding: clamp(70px, 7vh, 96px) clamp(36px, 4.2vw, 80px) clamp(28px, 4vh, 52px) 0;
  color: var(--color-cream);
}
.hotel-room-selector__details-copy {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  transition: opacity 220ms ease;
}
.hotel-room-selector.is-room-changing .hotel-room-selector__details-copy {
  opacity: 0;
}
.hotel-room-selector__details h2 {
  max-width: 780px;
  margin: 0 0 12px;
  font-family: var(--font-condensed);
  font-size: clamp(30px, 2.65vw, 48px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: 1px;
  text-transform: none;
}
.hotel-room-selector__details p {
  max-width: 880px;
  margin: 0;
  font-family: var(--font-semi-condensed);
  font-size: clamp(20px, 1.55vw, 28px);
  font-weight: 500;
  line-height: 1.12;
  color: rgba(239, 231, 210, 0.92);
}
.hotel-room-selector__features {
  list-style: none;
  padding: 0;
  margin: auto 0 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hotel-room-selector__features li,
.hotel-room-selector__meta span {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-semi-condensed);
  font-size: clamp(20px, 1.45vw, 27px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(239, 231, 210, 0.76);
}
.hotel-room-selector__features img,
.hotel-room-selector__meta img {
  width: clamp(22px, 1.65vw, 32px);
  height: clamp(22px, 1.65vw, 32px);
  filter: brightness(0) invert(1);
  opacity: 0.54;
}
.hotel-room-selector__scroll-reminder {
  display: none;
}
.hotel-room-selector__rule {
  height: 2px;
  background: rgba(239, 231, 210, 0.76);
  width: 100%;
  margin-bottom: 22px;
}
/* "Prihranite 20€…" savings disclaimer — same green-pill style as the badge
   inside the booking drawer. Sits directly above the price block, on all
   viewports (desktop / tablet / mobile). */
.hotel-room-selector__savings {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 14px;
  margin: 0 0 16px;
  border-radius: var(--radius-pill);
  background: rgba(34, 168, 85, 0.12);
  border: 1px solid rgba(34, 168, 85, 0.36);
  color: #4fd07b;
  font-family: var(--font-semi-condensed);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.3;
  align-self: flex-start;
  max-width: 100%;
}
.hotel-room-selector__savings-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22a855;
  box-shadow: 0 0 0 3px rgba(34, 168, 85, 0.22);
  flex-shrink: 0;
}
.hotel-room-selector__price {
  font-family: var(--font-condensed);
  font-size: clamp(32px, 2.65vw, 48px);
  font-weight: 600;
  line-height: 1;
  color: var(--color-cream);
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hotel-room-selector__price-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.hotel-room-selector__price-amount {
  color: var(--color-cream);
  font-weight: 600;
}
.hotel-room-selector__price-unit {
  color: rgba(239, 231, 210, 0.72);
  font-size: 0.72em;
  font-weight: 400;
  letter-spacing: 0.2px;
}
.hotel-room-selector__price-solo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-family: var(--font-semi-condensed);
  /* Desktop default — slightly bigger text for the "noč za 1 odraslo osebo" portion.
     Was clamp(15px, 1.05vw, 18px); bumped so the unit text reads more cleanly next
     to the bigger main price. */
  font-size: clamp(16px, 1.25vw, 22px);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--color-cream-dim);
}
/* The price number ("155 €") inside the 1-person line inherits `.price-amount`'s
   cream/white from the main-row rule. Override it here so the WHOLE 1-person line
   reads as a dim secondary price, not a primary one. */
.hotel-room-selector__price-solo .hotel-room-selector__price-amount {
  color: var(--color-cream-dim);
  font-weight: 500;
}
.hotel-room-selector__price-solo .hotel-room-selector__price-unit {
  color: var(--color-cream-dim);
}
.hotel-room-selector__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin-bottom: 24px;
}
.hotel-room-selector__book {
  width: min(360px, 100%);
  align-self: center;
  height: 56px;
  border: 0;
  border-radius: var(--radius-pill);
  background: #fff;
  color: #050505;
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.05vw, 20px);
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-spring), background var(--dur-fast) var(--ease-in-out), box-shadow var(--dur-fast) var(--ease-in-out);
  will-change: transform;
}
.hotel-room-selector__book:hover {
  transform: translateY(-1px) scale(1.035);
  background: #f7f3e8;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}
.hotel-room-selector__book:active {
  transform: translateY(0) scale(0.98);
}

@media (min-width: 1280px) {
  /* Desktop scroll-pin: enough room for the three scroll-driven room stops,
     with a shorter Unique tail before the next section starts. */
  .hotel-room-selector {
    min-height: 330svh;
  }
  .hotel-room-selector__inner {
    position: sticky;
    top: 0;
  }
}

@media (max-width: 1279px) {
  /* Tablet + phone ALSO scroll-pin.
     Each room gets a generous "dwell" zone where it sits stable for reading
     before the next threshold flips it to the next room. */
  .hotel-room-selector {
    min-height: 300svh;
  }
  .hotel-room-selector__inner {
    grid-template-columns: 1fr;
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 0;
    gap: 0;
    overflow: hidden;
    align-content: start;
  }
  .hotel-room-selector__visual {
    position: relative;
    top: auto;
    height: 36svh;
    min-height: 220px;
    max-height: 430px;
    aspect-ratio: auto;
    margin: 0;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
  }
  .hotel-room-selector__media-slide {
    transform: translate3d(calc((var(--room-index) - var(--room-track-progress, 0)) * 100%), 0, 0);
  }
  .hotel-room-selector__media-slide > img,
  .hotel-room-selector__shade {
    border-radius: 16px 16px 0 0;
  }
  .hotel-room-selector__shade {
    background: linear-gradient(0deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.48) 30%, rgba(0,0,0,0.04) 72%);
  }
  .hotel-room-selector__visual-copy {
    left: 0;
    right: 0;
    bottom: 0;
    gap: clamp(6px, 1.3vw, 10px);
    padding: 0 clamp(28px, 5vw, 48px) clamp(18px, 3vw, 28px);
  }
  .hotel-room-selector__stars {
    gap: clamp(4px, 0.8vw, 8px);
  }
  .hotel-room-selector__stars img,
  .hotel-room-selector__stars svg {
    width: clamp(26px, 4.7vw, 42px);
    height: clamp(26px, 4.7vw, 42px);
  }
  .hotel-room-selector__choice-label {
    display: none;
    font-family: var(--font-condensed);
    font-size: clamp(21px, 3.9vw, 34px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: clamp(1px, 0.25vw, 2px);
    text-transform: uppercase;
    color: var(--color-cream);
  }
  .hotel-room-selector__visual-copy h2 {
    display: none;
  }
  /* Tablet + phone tab style — rounded pills with gap (matches the desktop bookpair
     pattern). Active = white pill, inactive = dark pill with subtle cream border.
     Same height across both states so selecting a room doesn't bump the row.
     The scroll reminder owns the flexible top margin so the reminder, tabs, and
     booking button stay in the same bottom position across all rooms. This keeps the bottom section in the same
     position regardless of which room is active — Unique has 4 features + 2 meta items
     (vs 5+1 for Blue/Superior), and without this fix the buttons would jump up when
     the user picks Unique because the content above them shrinks. */
  .hotel-room-selector__tabs {
    gap: clamp(8px, 1.4vw, 14px);
    margin: 0 0 clamp(12px, 2.2vw, 20px);
  }
  .hotel-room-selector__tabs button,
  .hotel-room-selector__tabs button.is-active {
    height: clamp(48px, 6.4vw, 60px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(239, 231, 210, 0.5);
    font-family: var(--font-sans);
    font-size: clamp(14px, 2vw, 18px);
    font-weight: 600;
    letter-spacing: 1.4px;
  }
  .hotel-room-selector__tabs button.is-active {
    background: #fff;
    color: #050505;
    border-color: #fff;
  }
  .hotel-room-selector__details {
    height: calc(100svh - 36svh);
    min-height: 0;
    overflow: hidden;
    padding: clamp(18px, 3vw, 32px) clamp(28px, 4.5vw, 48px) clamp(22px, 4vw, 42px);
  }
  .hotel-room-selector__details h2 {
    margin-bottom: clamp(8px, 1.5vw, 16px);
    font-size: clamp(20px, 2.8vw, 30px);
    line-height: 1;
    letter-spacing: 0.7px;
  }
  .hotel-room-selector__details p {
    font-size: clamp(18px, 2.45vw, 25px);
    line-height: 1.12;
  }
  .hotel-room-selector__features {
    margin: clamp(18px, 3vw, 30px) 0 clamp(10px, 1.8vw, 18px);
    gap: clamp(8px, 1.35vw, 14px);
  }
  .hotel-room-selector__features li,
  .hotel-room-selector__meta span {
    gap: clamp(10px, 1.6vw, 16px);
    font-size: clamp(17px, 2.45vw, 24px);
    line-height: 1.05;
    letter-spacing: 0.2px;
  }
  .hotel-room-selector__features img,
  .hotel-room-selector__meta img {
    width: clamp(20px, 2.9vw, 30px);
    height: clamp(20px, 2.9vw, 30px);
  }
  .hotel-room-selector__details-eyebrow {
    display: block;
    margin: 0 0 clamp(10px, 1.8vw, 18px);
    font-family: var(--font-condensed);
    font-size: clamp(18px, 2.4vw, 24px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: clamp(1px, 0.25vw, 2px);
    text-transform: uppercase;
    color: var(--color-cream);
  }
  .hotel-room-selector__scroll-reminder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: center;
    margin: 0 0 clamp(12px, 2vw, 18px);
    font-family: var(--font-sans);
    font-size: clamp(11px, 1.45vw, 13px);
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(239, 231, 210, 0.68);
    animation: hotelScrollReminder 2.2s ease-in-out infinite;
    flex: 0 0 auto;
    margin-top: auto;
  }
  .hotel-room-selector__scroll-reminder svg {
    width: 14px;
    height: 14px;
  }
  .hotel-room-selector__rule {
    margin-bottom: clamp(12px, 2vw, 22px);
  }
  .hotel-room-selector__savings {
    font-size: clamp(11px, 1.6vw, 14px);
    padding: 7px 14px 7px 12px;
    margin-bottom: clamp(10px, 1.6vw, 14px);
    gap: 8px;
  }
  .hotel-room-selector__savings-dot {
    width: 6px;
    height: 6px;
    box-shadow: 0 0 0 2px rgba(34, 168, 85, 0.22);
  }
  .hotel-room-selector__price {
    font-size: clamp(28px, 4vw, 40px);
    margin-bottom: clamp(9px, 1.5vw, 16px);
  }
  .hotel-room-selector__price-solo {
    font-size: clamp(16px, 2.05vw, 19px);
  }
  .hotel-room-selector__meta {
    gap: 10px 22px;
    margin-bottom: clamp(18px, 3vw, 32px);
  }
  .hotel-room-selector__book {
    width: 100%;
    height: clamp(56px, 7vw, 68px);
    font-size: clamp(17px, 2.5vw, 23px);
  }
}

@media (min-width: 810px) and (max-width: 1279px) {
  /* Tablet: image as a full-width banner on top, details stacked below.
     Scroll-pin inherited from the shared `(max-width: 1279px)` block above. */
  .hotel-room-selector__inner {
    grid-template-rows: auto 1fr;
  }
  .hotel-room-selector__visual {
    position: relative;
    top: auto;
    height: clamp(360px, 50svh, 520px);
    min-height: 0;
    max-height: none;
    border-radius: 16px 16px 0 0;
  }
  .hotel-room-selector__media-slide > img,
  .hotel-room-selector__shade {
    border-radius: 16px 16px 0 0;
  }
  .hotel-room-selector__shade {
    /* Stronger overlay so the title + description on top of the image read cleanly. */
    background: linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.52) 32%, rgba(0,0,0,0.04) 72%);
  }
  .hotel-room-selector__visual-copy {
    left: 0; right: 0; bottom: 0;
    padding: 0 clamp(32px, 5vw, 56px) clamp(28px, 4vw, 44px);
    gap: clamp(10px, 1.4vw, 16px);
  }
  /* On tablet show the room name on the image (big Forum display) like desktop. */
  .hotel-room-selector__visual-copy h2 {
    display: block;
    font-size: clamp(54px, 8vw, 88px);
    line-height: 0.86;
  }
  /* Show the image-summary heading + copy on the image (the description that lives
     in the desktop details column). Mobile-summary is already styled below. */
  .hotel-room-selector__mobile-summary {
    display: grid;
    gap: 6px;
    max-width: 680px;
    color: var(--color-cream);
  }
  .hotel-room-selector__mobile-summary h3 {
    font-family: var(--font-condensed);
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 600;
    line-height: 1.05;
    margin: 0;
  }
  .hotel-room-selector__mobile-summary p {
    font-family: var(--font-semi-condensed);
    font-size: clamp(16px, 1.9vw, 21px);
    font-weight: 500;
    line-height: 1.2;
    color: rgba(239, 231, 210, 0.88);
    margin: 0;
  }
  .hotel-room-selector__choice-label {
    display: none;
  }
  /* Details column becomes a stacked layout below the banner. */
  .hotel-room-selector__details {
    height: auto;
    min-height: 0;
    padding: clamp(20px, 3vw, 34px) clamp(36px, 5vw, 64px) clamp(24px, 3vw, 38px);
    justify-content: flex-start;
  }
  .hotel-room-selector__details-eyebrow,
  .hotel-room-selector__scroll-reminder {
    display: none;
  }
  .hotel-room-selector__details-copy {
    flex: 0 0 auto;
    min-height: 0;
    padding-top: 0;
  }
  /* Already shown on image via .__mobile-summary — keep the details copy clean. */
  .hotel-room-selector__details h2,
  .hotel-room-selector__details p {
    display: none;
  }
  /* iPad / tablet: features in 2 columns since the section is wide enough.
     Row gap (vertical) stays modest; column gap (horizontal) is generous so the
     two columns don't read as one cramped block. */
  .hotel-room-selector__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 0 clamp(18px, 2.4vw, 28px);
    gap: clamp(8px, 1vw, 14px) clamp(20px, 3vw, 36px);
  }
  .hotel-room-selector__features li,
  .hotel-room-selector__meta span {
    font-size: clamp(16px, 1.85vw, 22px);
    gap: clamp(12px, 1.6vw, 18px);
  }
  .hotel-room-selector__features img,
  .hotel-room-selector__meta img {
    width: clamp(22px, 2.4vw, 28px);
    height: clamp(22px, 2.4vw, 28px);
  }
  .hotel-room-selector__rule {
    margin-bottom: clamp(16px, 2vw, 24px);
  }
  .hotel-room-selector__price {
    font-size: clamp(30px, 3.4vw, 44px);
    margin-bottom: clamp(10px, 1.4vw, 16px);
  }
  /* Tablet — bump the 1-person price text a notch for legibility on the wider
     tablet column. The number itself inherits this size; main bigger price is
     unchanged so the visual hierarchy stays intact. */
  .hotel-room-selector__price-solo {
    font-size: clamp(17px, 2vw, 22px);
  }
  .hotel-room-selector__meta {
    gap: 12px 28px;
    margin-bottom: clamp(14px, 2vw, 24px);
  }
  /* On tablet the details column fills the 1fr grid track below the banner image.
     Push the tabs + REZERVIRAJ button to the BOTTOM of that column so the bottom
     two rows hug the bottom of the 100svh section regardless of how much vertical
     space the features/price/meta above them occupy.
     `margin-top: auto` inside the flex column creates a flexible spacer between
     the meta row and the tabs, soaking up any remaining height. */
  .hotel-room-selector__tabs {
    margin-top: auto;
  }
  /* REZERVIRAJ button: regular pill, centered, narrower than full container width.
     Matches the round-pill tab style used on tablet+phone. */
  .hotel-room-selector__book {
    width: min(420px, 100%);
    height: clamp(50px, 5.6vw, 60px);
    margin: 0 auto;
  }
}

@media (max-width: 809px) {
  .hotel-hero {
    padding-top: 128px;
  }
  .hotel-hero .scroll-down {
    display: none;
  }
  .hotel-hero .josefina__line {
    font-size: clamp(54px, 16.4vw, 70px);
  }
  /* Phone layout, top → bottom (matches the reference design):
       1. Image (~46 svh) with FULL overlay: stars, IZBERITE VRSTO SOBE eyebrow,
          BLUE SUITE big Forum name, "Prostor za popoln počitek" sub, description
       2. Details column (under image):
          • features
          • divider
          • price + per-person sub
          • meta row
          • 3 rounded-pill tabs (NOT segmented edge-to-edge)
          • REZERVIRAJ pill button — same size/style as the tab pills */
  .hotel-room-selector__visual {
    height: clamp(380px, 46svh, 500px);
    min-height: 0;
    max-height: none;
  }
  .hotel-room-selector__visual-copy {
    left: 0; right: 0; bottom: 0;
    padding: 0 clamp(22px, 5.6vw, 32px) clamp(20px, 4.5vw, 28px);
    gap: clamp(8px, 2vw, 12px);
  }
  /* Stars at top of overlay */
  .hotel-room-selector__stars {
    display: flex;
    gap: clamp(2px, 0.6vw, 4px);
  }
  .hotel-room-selector__stars img,
  .hotel-room-selector__stars svg {
    width: clamp(20px, 5vw, 26px);
    height: clamp(20px, 5vw, 26px);
  }
  /* IZBERITE eyebrow has moved below the image, next to the selector/content area. */
  .hotel-room-selector__choice-label {
    display: none;
    font-family: var(--font-condensed);
    font-size: clamp(13px, 3.4vw, 16px);
    font-weight: 600;
    letter-spacing: 1.2px;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-cream);
  }
  /* BLUE SUITE big Forum display on the image */
  .hotel-room-selector__visual-copy h2 {
    display: block;
    font-size: clamp(40px, 11vw, 60px);
    line-height: 0.86;
  }
  /* Mobile-summary: sub-eyebrow ("Prostor za popoln počitek") + description on image */
  .hotel-room-selector__mobile-summary {
    display: grid;
    gap: 4px;
    max-width: 100%;
    color: var(--color-cream);
    margin-top: clamp(4px, 1vw, 8px);
  }
  .hotel-room-selector__mobile-summary h3 {
    font-family: var(--font-condensed);
    font-size: clamp(14px, 3.6vw, 17px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin: 0;
  }
  .hotel-room-selector__mobile-summary p {
    font-family: var(--font-semi-condensed);
    font-size: clamp(13px, 3.3vw, 16px);
    font-weight: 500;
    line-height: 1.22;
    color: rgba(239, 231, 210, 0.88);
    margin: 0;
  }
  .hotel-room-selector__details-eyebrow {
    display: block;
    margin: 0 0 clamp(12px, 3vw, 16px);
    font-family: var(--font-condensed);
    font-size: clamp(14px, 3.6vw, 17px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-cream);
  }
  /* Details column under image: natural HTML order (details-copy → tabs → book),
     consistent horizontal padding, fills the remaining viewport. */
  .hotel-room-selector__details {
    height: auto;
    min-height: calc(100svh - clamp(380px, 46svh, 500px));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: clamp(20px, 5vw, 28px) clamp(22px, 5.6vw, 32px) clamp(18px, 4vw, 24px);
    gap: 0;
  }
  /* Heading + description are on the IMAGE (mobile-summary) — hide the details copies. */
  .hotel-room-selector__details h2,
  .hotel-room-selector__details p {
    display: none;
  }
  .hotel-room-selector__details-copy {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }
  .hotel-room-selector__features {
    margin: 0;
    gap: clamp(8px, 2.2vw, 12px);
  }
  .hotel-room-selector__features li,
  .hotel-room-selector__meta span {
    gap: clamp(10px, 2.8vw, 14px);
    font-size: clamp(15px, 4vw, 18px);
    line-height: 1.05;
    letter-spacing: 0.3px;
  }
  .hotel-room-selector__features img,
  .hotel-room-selector__meta img {
    width: clamp(20px, 5.1vw, 26px);
    height: clamp(20px, 5.1vw, 26px);
  }
  .hotel-room-selector__rule {
    height: 1px;
    margin: clamp(10px, 2.6vw, 14px) 0 clamp(8px, 2vw, 12px);
  }
  .hotel-room-selector__price {
    font-size: clamp(28px, 7.4vw, 36px);
    margin-bottom: clamp(4px, 1.2vw, 8px);
    gap: 4px;
  }
  .hotel-room-selector__price-unit {
    font-size: 0.66em;
  }
  .hotel-room-selector__price-solo {
    font-size: clamp(17px, 4.5vw, 20px);
  }
  .hotel-room-selector__meta {
    gap: 6px 16px;
    margin-bottom: clamp(12px, 3vw, 18px);
  }
  .hotel-room-selector__scroll-reminder {
    margin-bottom: clamp(10px, 2.6vw, 14px);
    font-size: clamp(10px, 2.7vw, 12px);
    letter-spacing: 1.8px;
  }
  .hotel-room-selector__scroll-reminder svg {
    width: 12px;
    height: 12px;
  }
  /* REZERVIRAJ pill: matches the tab pill style (same height, same border-radius).
     Full width WITHIN the details padding — does NOT touch the screen edges.
     Sits below the tabs row with a small gap above it. */
  .hotel-room-selector__book {
    width: 100%;
    height: clamp(48px, 6.4vw, 60px);
    font-size: clamp(14px, 3.7vw, 17px);
    letter-spacing: 1.4px;
    margin: 0;
  }
}

@keyframes hotelScrollReminder {
  0%, 100% {
    opacity: 0.48;
    transform: translateY(-1px);
  }
  50% {
    opacity: 0.9;
    transform: translateY(4px);
  }
}

/* Menu-page degustation cards: Barlow family for the numeric/menu typography. */
.menu-block--tasting {
  min-height: 100svh;
  padding: clamp(96px, 11vh, 132px) clamp(40px, 4vw, 72px) clamp(36px, 5vh, 64px);
}
.menu-block--tasting .menu-block__inner {
  max-width: 1780px;
  gap: clamp(28px, 4vh, 52px);
}
.menu-block--tasting .eyebrow {
  display: none;
}
.menu-block--tasting .section__heading {
  margin: 0;
  font-size: clamp(72px, 7.3vw, 140px);
  line-height: 0.82;
  letter-spacing: 0;
  text-transform: uppercase;
}
.tasting-grid--with-image {
  gap: clamp(14px, 1.4vw, 24px);
  align-items: stretch;
}
.tasting-grid--with-image .tasting-card {
  min-height: min(620px, calc(100svh - 292px));
  border-radius: 14px;
  gap: 10px;
}
.tasting-grid--with-image .tasting-card__photo {
  aspect-ratio: 1.72 / 1;
}
.tasting-grid--with-image .tasting-card > :not(.tasting-card__photo) {
  padding-left: 28px;
  padding-right: 28px;
}
.tasting-grid--with-image .tasting-card__count {
  font-family: var(--font-condensed);
  font-size: clamp(44px, 3.4vw, 66px);
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 0.9;
  padding-top: 18px;
}
.tasting-grid--with-image .tasting-card__title {
  font-family: var(--font-condensed);
  font-size: clamp(28px, 2.4vw, 46px);
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 0.92;
}
.tasting-grid--with-image .tasting-card__price {
  font-family: var(--font-condensed);
  font-size: clamp(18px, 1.25vw, 24px);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.tasting-grid--with-image .tasting-card__desc {
  font-family: var(--font-semi-condensed);
  font-size: clamp(19px, 1.45vw, 27px);
  line-height: 1.15;
}
.tasting-grid--with-image .tasting-card > .cta-pill {
  min-width: 176px;
  height: 50px;
  margin: auto auto 26px;
  padding: 0 28px;
  font-size: 14px;
}
@media (max-width: 809px) {
  .menu-block--tasting {
    min-height: 0;
    padding: 88px 16px 56px;
  }
  .menu-block--tasting .section__heading {
    font-size: clamp(54px, 16vw, 82px);
  }
  .tasting-grid--with-image .tasting-card {
    min-height: 0;
  }
}

/* Framer-style combined footer used on all main pages. */
.framer-footer {
  padding: 16px 0;
  background: #000;
}
.framer-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(6, minmax(0, 0.1667fr));
  grid-template-rows: 340px 196px 360px;
  gap: 16px;
  width: min(100%, 1920px);
  margin-inline: auto;
}
.framer-footer__photo {
  grid-column: 1;
  grid-row: 1 / 4;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  min-height: 928px;
}
.framer-footer__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.framer-footer__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.22) 40%, rgba(0,0,0,0.02) 72%);
}
.framer-footer__photo--with-policies::after {
  background: linear-gradient(0deg, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.78) 48%, rgba(0,0,0,0.30) 100%);
}
.framer-footer__photo h2 {
  position: absolute;
  left: 56px;
  bottom: 56px;
  z-index: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 400;
  line-height: 85px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: ivory;
}
.framer-footer__policy-copy {
  position: absolute;
  left: clamp(32px, 4vw, 64px);
  right: clamp(32px, 4vw, 64px);
  bottom: clamp(32px, 4vw, 64px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  color: ivory;
}
.framer-footer__policy-copy h2 {
  position: static;
  width: auto;
  padding-inline: 0;
  margin: 0;
  font-size: clamp(54px, 5.2vw, 96px);
  line-height: 0.88;
  letter-spacing: -0.02em;
}
.framer-footer__policy-copy .policies__list {
  max-width: 720px;
  gap: 12px;
}
.framer-footer__policy-copy .policies__list dt {
  color: ivory;
  font-size: 15px;
  letter-spacing: 1px;
}
.framer-footer__policy-copy .policies__list dd {
  margin-bottom: 8px;
  color: rgba(245, 242, 234, 0.74);
  font-size: 17px;
  line-height: 1.35;
}
.framer-footer__policy-copy .policies__list a {
  color: ivory;
}
.framer-footer__card,
.framer-footer__award {
  border: 1px solid rgba(239, 231, 210, 0.20);
  border-radius: 16px;
  background: #000;
  color: var(--color-cream);
}
.framer-footer__hours {
  grid-column: 2 / 5;
  grid-row: 1;
  display: grid;
  place-content: center;
  padding: 24px 32px;
}
.framer-footer__hours h3 {
  position: relative;
  margin: 0 0 22px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 2.5px;
  line-height: 1.2;
}
.framer-footer__hours h3::before,
.framer-footer__hours h3::after {
  content: '◇';
  position: absolute;
  top: 50%;
  color: rgba(239, 231, 210, 0.2);
  font-size: 18px;
  transform: translateY(-54%);
}
.framer-footer__hours h3::before { right: calc(50% + 64px); }
.framer-footer__hours h3::after { left: calc(50% + 64px); }
.framer-footer__hours dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 14px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.2;
}
.framer-footer__hours dt {
  color: var(--color-cream);
}
.framer-footer__hours dd {
  margin: 0;
  text-align: right;
  white-space: nowrap;
}
.framer-footer__hours dt::after {
  content: '';
  display: inline-block;
  width: 88px;
  border-bottom: 0.5px dashed rgba(239, 231, 210, 0.24);
  margin-left: 12px;
  transform: translateY(-4px);
}
.framer-footer__contact {
  grid-column: 5 / 8;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 11px;
  padding: 28px 44px;
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}
.framer-footer__contact a {
  color: rgba(239, 231, 210, 0.76);
  text-decoration: none;
}
.framer-footer__contact a,
.framer-footer__socials {
  display: flex;
  align-items: center;
  gap: 16px;
}
.framer-footer__contact img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
  opacity: 0.48;
}
.framer-footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(239, 231, 210, 0.74);
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1;
  overflow: visible;
}
.framer-footer__socials img {
  width: auto;
  height: 24px;
  filter: none;
  opacity: 0.74;
}
.framer-footer__socials svg {
  width: 22px;
  height: 22px;
  display: block;
  overflow: visible;
}
.framer-footer__socials a img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
  opacity: 0.74;
}
.framer-footer__social-lead {
  flex: 0 0 auto;
}
.framer-footer__award {
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
  padding: 24px;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.framer-footer__award:nth-of-type(4) { grid-column: 2 / 4; grid-row: 2; }
.framer-footer__award:nth-of-type(5) { grid-column: 4 / 6; grid-row: 2; }
.framer-footer__award:nth-of-type(6) { grid-column: 6 / 8; grid-row: 2; }
.framer-footer__award.framer-footer__award--google { grid-column: 2 / 4; grid-row: 2; }
.framer-footer__award.framer-footer__award--google + .framer-footer__award { grid-column: 4 / 6; grid-row: 2; }
.framer-footer__award.framer-footer__award--gault { grid-column: 6 / 8; grid-row: 2; }
.framer-footer__award strong {
  font-size: 32px;
  line-height: 1;
}
.framer-footer__award span,
.framer-footer__award small {
  font-size: 16px;
  line-height: 1.1;
}
.framer-footer__stars {
  gap: 3px;
}
.framer-footer__stars img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.framer-footer__award-icons {
  display: flex;
  gap: 16px;
  align-items: center;
}
.framer-footer__award-icons img {
  height: 36px;
  width: auto;
}
.framer-footer__award--gault strong,
.framer-footer__award--gault small {
  color: #E2A600;
}
.framer-footer__award--gault strong {
  font-size: 24px;
  line-height: 1;
}
.framer-footer__google-logo {
  width: 112px;
  max-width: 72%;
  height: auto;
  display: block;
}
.framer-footer__caps {
  display: flex;
  gap: 5px;
}
.framer-footer__caps img {
  width: 31px;
  height: auto;
  filter: brightness(0) invert(1);
}
.framer-footer__map {
  grid-column: 2 / 8;
  grid-row: 3;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(239, 231, 210, 0.20);
  background: var(--color-surface);
}
.framer-footer__map iframe {
  width: 100%;
  height: 100%;
  min-height: 360px;
  border: 0;
  display: block;
  filter: grayscale(1) invert(1);
}
@media (min-width: 810px) and (max-width: 1279px) {
  .framer-footer {
    padding: 32px 0 0;
  }
  .framer-footer__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 16px;
  }
  .framer-footer__photo,
  .framer-footer__hours,
  .framer-footer__contact,
  .framer-footer__award,
  .framer-footer__map {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .framer-footer__photo {
    grid-column: 1 / -1 !important;
    aspect-ratio: 1.2 / 1;
    min-height: 0;
  }
  .framer-footer__photo--with-policies {
    aspect-ratio: auto;
    min-height: 760px;
  }
  .framer-footer__photo h2 {
    left: 50%;
    bottom: 64px;
    font-size: 72px;
    line-height: 64px;
    text-align: center;
    transform: translateX(-50%);
  }
  .framer-footer__policy-copy h2 {
    transform: none;
    text-align: left;
  }
  .framer-footer__hours,
  .framer-footer__contact {
    min-height: 240px;
  }
  .framer-footer__contact {
    padding: 40px 64px;
  }
  .framer-footer__award {
    min-height: 220px;
  }
  .framer-footer__award--gault {
    grid-column: 1 / -1 !important;
    min-height: 230px;
  }
  .framer-footer__map {
    grid-column: 1 / -1 !important;
    min-height: 360px;
  }
  .framer-footer__map iframe {
    min-height: 360px;
  }
}
@media (min-width: 1280px) and (max-width: 1400px) {
  .framer-footer__grid {
    grid-template-columns: minmax(0, 1fr) repeat(6, minmax(0, 0.1667fr));
    grid-template-rows: 320px 190px 340px;
  }
  .framer-footer__photo { min-height: 882px; }
  .framer-footer__hours { padding: 24px; }
  .framer-footer__hours h3 {
    font-size: 23px;
    letter-spacing: 2.5px;
    margin-bottom: 24px;
  }
  .framer-footer__hours dl { font-size: 16px; }
  .framer-footer__hours dl { gap: 10px 14px; }
  .framer-footer__hours dt::after {
    width: 72px;
    margin-left: 12px;
  }
  .framer-footer__contact {
    padding: 26px 32px;
    gap: 10px;
    font-size: 15px;
  }
  .framer-footer__contact img {
    width: 21px;
    height: 21px;
  }
}
@media (max-width: 809px) {
  .framer-footer { padding: 0; }
  .framer-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 10px;
    width: 100%;
  }
  .framer-footer__photo {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    aspect-ratio: 1;
    min-height: 0;
    border-radius: 16px;
  }
  .framer-footer__photo--with-policies {
    aspect-ratio: auto;
    min-height: 780px;
  }
  .framer-footer__photo h2 {
    left: 50%;
    bottom: 54px;
    width: 100%;
    padding-inline: 28px;
    font-size: 64px;
    line-height: 0.82;
    text-align: center;
    transform: translateX(-50%);
  }
  .framer-footer__policy-copy {
    left: 28px;
    right: 28px;
    bottom: 34px;
    gap: 20px;
  }
  .framer-footer__policy-copy h2 {
    transform: none;
    text-align: left;
    font-size: 54px;
  }
  .framer-footer__policy-copy .policies__list dd {
    font-size: 15px;
    line-height: 1.28;
  }
  .framer-footer__hours,
  .framer-footer__contact {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 0;
  }
  .framer-footer__hours {
    padding: 34px 30px;
  }
  .framer-footer__hours h3 {
    font-size: 26px;
    margin-bottom: 22px;
  }
  .framer-footer__hours dl {
    gap: 9px 12px;
    font-size: 18px;
  }
  .framer-footer__hours dt::after {
    width: 72px;
  }
  .framer-footer__contact {
    padding: 38px 42px;
    gap: 12px;
    font-size: 18px;
    min-height: 230px;
  }
  .framer-footer__contact a,
  .framer-footer__socials {
    gap: 14px;
  }
  .framer-footer__contact img {
    width: 25px;
    height: 25px;
  }
  .framer-footer__socials a {
    width: 28px;
    height: 28px;
  }
  .framer-footer__socials svg {
    width: 26px;
    height: 26px;
  }
  .framer-footer__socials img {
    height: 28px;
  }
  .framer-footer__socials img:not(.framer-footer__social-lead) {
    width: 54px !important;
    height: auto !important;
    max-width: none;
  }
  .framer-footer__award {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 204px;
    padding: 28px 18px;
  }
  .framer-footer__award--gault {
    grid-column: 1 / -1 !important;
    min-height: 203px;
  }
  .framer-footer__award strong {
    font-size: 26px;
  }
  .framer-footer__award--gault strong {
    font-size: 24px;
  }
  .framer-footer__award span,
  .framer-footer__award small {
    font-size: 16px;
  }
  .framer-footer__google-logo {
    width: 112px;
  }
  .framer-footer__stars img { width: 26px; height: 26px; }
  .framer-footer__map {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    aspect-ratio: auto;
    min-height: 420px;
    border-radius: 16px;
    background: #111;
  }
  .framer-footer__map iframe {
    height: 420px;
    min-height: 420px;
    filter: grayscale(1) invert(1) contrast(0.95);
  }
}