/* Twiga Rooftop Lounge, concept site by KERA Tech Solutions.
   Layout, type scale and motion rebuilt section by section from the Mùn Rooftop reference
   (1920 design grid, min(vw, px) clamps, orientation breakpoints). */

:root {
  --blue: #1f2540;          /* midnight navy (was #222944) */
  --light-blue: #474e78;    /* hero gradient end */
  --accent: #b3826d;        /* clay / copper from Twiga's printed logo (was sage #92aba0) */
  --accent-mid: #5f4d5a;    /* reserve orb gradient middle */
  --cream: #f2eedc;
  --cream-light: #f1ecda;
  --white: #d9d9d9;
  --focus: #f2eedc;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; min-width: 0; min-height: 0; -webkit-font-smoothing: antialiased; }
html { background: var(--blue); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body { font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; letter-spacing: .05em; font-weight: 400; color: var(--white); background-color: var(--blue); min-height: 100vh; overflow-x: hidden; word-break: keep-all; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; letter-spacing: inherit; }
h1, h2, h3, h4, p { font-weight: inherit; font-size: inherit; line-height: inherit; }
section { position: relative; }
::selection { background: var(--cream); color: var(--blue); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.c-blue :focus-visible, .contacts-new :focus-visible { outline-color: var(--blue); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--cream); color: var(--blue); padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media screen and (orientation: portrait) { .hidden-portrait { display: none !important; } }
@media screen and (orientation: landscape) { .hidden-landscape { display: none !important; } }

/* ---------- type scale (reference t-* classes) ---------- */
.font-1 { font-family: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; letter-spacing: .05em; }
.font-1--ls-15 { letter-spacing: .15em; }
.font-2 { font-family: "Poiret One", "Josefin Sans", sans-serif; letter-spacing: .04em; word-spacing: .16em; font-weight: 400; }
.t-uppercase { text-transform: uppercase; }
.t-center { text-align: center; }
.c-yellow { color: var(--cream); }
.c-yellow-light { color: var(--cream-light); }
.c-white { color: var(--white); }
.c-blue { color: var(--blue); }
.t-15 { font-size: min(.78125svw, 15px); line-height: min(1.3020833333svw, 25px); }
.t-20, body { font-size: min(1.0416666667svw, 20px); line-height: min(1.0416666667svw, 20px); }
.t-25 { font-size: min(1.5625svw, 30px); line-height: min(1.5625svw, 30px); }
.t-30 { font-size: min(1.5625svw, 30px); line-height: min(1.8229166667svw, 35px); }
.t-40 { font-size: min(2.0833333333svw, 40px); line-height: min(2.34375svw, 45px); }
.t-50 { font-size: min(2.6041666667svw, 50px); line-height: min(2.8645833333svw, 55px); }
.t-60 { font-size: min(3.125svw, 60px); line-height: min(3.125svw, 60px); }
.t-70 { font-size: min(3.6458333333svw, 70px); line-height: min(3.6458333333svw, 70px); }
.t-100 { font-size: min(5.2083333333svw, 100px); line-height: min(5.2083333333svw, 100px); }
.t-130 { font-size: min(6.7708333333svw, 130px); line-height: min(5.7291666667svw, 110px); }
.t-160 { font-size: min(8.3333333333svw, 160px); line-height: min(8.3333333333svw, 160px); }
.t-200 { font-size: min(10.4166666667svw, 200px); line-height: min(10.4166666667svw, 200px); }
@media screen and (orientation: portrait) {
  .t-15 { font-size: min(4svw, 15px); line-height: min(5.3333333333svw, 20px); }
  .t-20, body { font-size: min(4svw, 15px); line-height: min(4svw, 15px); }
  .t-20--m-20 { font-size: min(5.3333333333svw, 20px); line-height: min(6.6666666667svw, 25px); }
  .t-20--m-10 { font-size: min(2.6666666667svw, 10px); line-height: min(2.6666666667svw, 10px); }
  .t-25 { font-size: min(4.2666666667svw, 16px); line-height: min(5.6svw, 21px); }
  .t-30 { font-size: min(5.3333333333svw, 20px); line-height: min(6.6666666667svw, 25px); }
  .t-40 { font-size: min(6.4svw, 24px); line-height: min(7.4666666667svw, 28px); }
  .t-40--m-40 { font-size: min(10.6666666667svw, 40px); line-height: min(10.6666666667svw, 40px); }
  .t-50 { font-size: min(8svw, 30px); line-height: min(8svw, 30px); }
  .t-50--m-35 { font-size: min(9.3333333333svw, 35px); line-height: min(10.1333333333svw, 38px); }
  .t-60 { font-size: min(6.6666666667svw, 25px); line-height: min(6.6666666667svw, 25px); }
  .t-60--m-35 { font-size: min(9.3333333333svw, 35px); line-height: min(9.3333333333svw, 35px); }
  .t-60--m-50 { font-size: min(10.6666666667svw, 40px); line-height: min(10.6666666667svw, 40px); }
  .t-70 { font-size: min(10.6666666667svw, 40px); line-height: min(10.6666666667svw, 40px); }
  .t-100 { font-size: min(10.6666666667svw, 40px); line-height: min(10.6666666667svw, 40px); }
  .t-130 { font-size: min(10.6666666667svw, 40px); line-height: min(10.6666666667svw, 40px); }
  .t-130--m-50 { font-size: min(13.3333333333svw, 50px); line-height: min(11.2svw, 42px); }
  .t-160 { font-size: min(16svw, 60px); line-height: min(16svw, 60px); }
  .t-200 { font-size: min(18.6666666667svw, 70px); line-height: min(18.6666666667svw, 70px); }
}

.lines, .words, .chars { vertical-align: top; padding: .2em 0; margin: -.2em 0; }

/* ---------- grain (reference #noise) ---------- */
#noise { position: fixed; inset: 0; z-index: 9990; pointer-events: none; mix-blend-mode: overlay; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.1 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- buttons ---------- */
.button { display: inline-flex; justify-content: center; align-items: center; text-transform: uppercase; font-family: "Hanken Grotesk", sans-serif; letter-spacing: .05em; font-size: min(1.0416666667svw, 20px); line-height: min(1.0416666667svw, 20px); border: 2px solid var(--cream); padding: calc(min(.5208333333svw, 10px) - 2px) calc(min(1.5625svw, 30px) + 2px); background-color: var(--cream); border-radius: min(.5208333333svw, 10px); color: var(--blue); cursor: pointer; width: fit-content; transition: background-color .4s ease-in-out, color .3s ease-in-out, opacity .4s ease-in-out; }
.button:hover { background-color: var(--blue); color: var(--cream); }
.button--blue { background-color: var(--blue); color: var(--cream); border-color: var(--blue); }
.button--blue:hover { background-color: var(--cream); color: var(--blue); }
.button--ghost { background: transparent; color: var(--blue); border-color: var(--blue); }
.button--ghost:hover { background: var(--blue); color: var(--cream); }
@media screen and (orientation: portrait) {
  .button { font-size: min(4svw, 15px); line-height: min(4svw, 15px); padding: calc(min(2.6666666667svw, 10px) + 2px) calc(min(8svw, 30px) + 2px); border-radius: min(2.6666666667svw, 10px); border-width: 1px; }
}

/* ---------- star (diamond) ---------- */
.star { display: block; width: 100%; height: auto; }
.star path { fill: var(--cream); }

/* ---------- preloader + page loader (reference #preloader / .barbaLoader) ---------- */
#preloader, .page-loader { display: none; }
.js #preloader { position: fixed; z-index: 100; inset: 0; height: 100svh; overflow: hidden; background-color: var(--blue); display: flex; align-items: center; justify-content: center; }
.js .page-loader { position: fixed; inset: 0; z-index: 100; background-color: var(--blue); opacity: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
#preloader svg, .page-loader svg { height: 15vh; width: auto; }

/* ---------- reserve CTA (fixed, rotating text) ---------- */
.reserve-cta { display: block; position: fixed; bottom: min(2.6041666667svw, 50px); right: min(2.1875svw, 42px); z-index: 10; cursor: pointer; }
.reserve-cta__landscape { display: block; width: min(6.7708333333svw, 130px); aspect-ratio: 1; transition: transform .4s ease-in-out; }
.reserve-cta__landscape:hover { transform: scale(1.05); }
.reserve-cta__landscape svg { width: 100%; height: auto; overflow: visible; }
.reserve-cta__orb { transition: transform .4s ease-in-out; transform-origin: 65px 65px; }
.reserve-cta__landscape:hover .reserve-cta__orb { transform: scale(.8); }
.reserve-cta__text { transform-origin: 65px 65px; animation: rotate360 10s linear infinite; fill: var(--cream); font-family: "Hanken Grotesk", sans-serif; font-size: 10.4px; letter-spacing: .14em; font-weight: 500; text-transform: uppercase; }
@keyframes rotate360 { to { transform: rotate(360deg); } }
.reserve-cta__portrait { display: none; }
@media screen and (orientation: portrait) {
  .reserve-cta { bottom: min(4.2666666667svw, 16px); right: auto; left: 50%; transform: translateX(-50%); }
  .reserve-cta__portrait { display: flex; justify-content: center; align-items: center; padding: min(2.6666666667svw, 10px) min(5.3333333333svw, 20px); background-color: var(--white); color: #000; border-radius: 100vh; width: max-content; text-transform: uppercase; }
}

/* ---------- header ---------- */
.header { position: fixed; z-index: 12; top: 0; left: 0; right: 0; }
.header::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: min(15.625svw, 300px); pointer-events: none; z-index: -1; background: linear-gradient(0deg, rgba(31,37,64,0), var(--blue)); }
.header__inner { padding-top: min(.8333333333svw, 16px); padding-left: min(1.6145833333svw, 31px); padding-right: min(2.0833333333svw, 40px); display: flex; align-items: center; justify-content: space-between; }
.hamburger { position: relative; z-index: 2; width: min(1.6666666667svw, 32px); height: min(1.1458333333svw, 22px); cursor: pointer; }
.hamburger::before { content: ""; position: absolute; inset: -12px; }
.hamburger__line { position: absolute; left: 0; height: 2px; width: 100%; background-color: var(--cream); border-radius: 100vh; transition: transform .4s ease-in-out, top .4s ease-in-out, background-color .4s ease-in-out; }
.hamburger__line:nth-child(1) { top: 0; }
.hamburger__line:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger__line:nth-child(3) { top: calc(100% - 2px); }
.hamburger.open .hamburger__line:nth-child(1) { transform: rotate(45deg); top: 50%; }
.hamburger.open .hamburger__line:nth-child(2) { transform: rotate(-45deg); top: 50%; }
.hamburger.open .hamburger__line:nth-child(3) { transform: rotate(45deg); top: 50%; }
.header__logo { position: absolute; z-index: 2; top: min(.46875svw, 9px); left: 50%; transform: translateX(-50%); display: block; }
.logo { display: block; position: relative; font-family: "Marcellus", serif; color: var(--cream); font-size: min(1.875svw, 36px); line-height: 1; letter-spacing: .34em; margin-right: -.34em; padding-top: .62em; -webkit-text-stroke: .028em currentColor; transition: color .4s ease-in-out; }
.logo__i { position: relative; display: inline-block; }
.logo__i svg { position: absolute; left: 50%; top: -.66em; width: .3em; transform: translateX(-62%); }
.logo__i svg path { fill: currentColor; }
.header__cta { display: flex; align-items: center; gap: min(1.5625svw, 30px); position: relative; z-index: 2; }
.header__cta a, .lang button { transition: opacity .3s; }
.header__cta a:hover { opacity: .7; }
.lang { display: flex; align-items: center; gap: .4em; color: var(--cream); }
.lang button { padding: 4px 2px; opacity: .5; text-transform: uppercase; }
.lang button[aria-pressed="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.lang button:hover { opacity: 1; }
.header__nav { position: absolute; top: calc(100% + min(2.0833333333svw, 40px)); left: min(1.0416666667svw, 20px); transition: opacity .4s ease-in-out, visibility .4s; opacity: 0; visibility: hidden; pointer-events: none; }
.header__nav.open { opacity: 1; visibility: visible; pointer-events: all; }
.header__nav-list { display: flex; flex-direction: column; align-items: flex-start; gap: min(.4166666667svw, 8px) 0; }
.header__nav-item { border-radius: min(.5208333333svw, 10px); background-color: var(--cream); color: var(--blue); display: flex; align-items: flex-start; gap: 0 min(.78125svw, 15px); padding: min(.5208333333svw, 10px) min(.78125svw, 15px); transition: background-color .3s; }
.header__nav-item:hover { background-color: var(--accent); }
.header__nav-link::after { content: ""; position: absolute; inset: 0; }
.header__nav-item { position: relative; }
@media screen and (orientation: portrait) {
  .header::after { height: min(21.3333333333svw, 80px); }
  .header__inner { padding-top: min(10.4svw, 39px); padding-left: min(4.8svw, 18px); padding-right: min(4.8svw, 18px); align-items: flex-start; }
  .hamburger { width: min(8.5333333333svw, 32px); height: min(6.4svw, 24px); }
  .header__logo { top: min(8.5svw, 32px); }
  .logo { font-size: min(5.6svw, 22px); }
  .header.open .hamburger__line { background-color: var(--blue); }
  .header.open .logo, .header.open .lang { color: var(--blue); }
  .header__nav { top: 0; left: 0; width: 100vw; height: 100svh; background-color: var(--cream); padding-top: min(30svw, 120px); padding-left: min(6.4svw, 24px); padding-right: min(6.4svw, 24px); z-index: 1; position: fixed; }
  .header__nav-list { gap: min(4.2666666667svw, 16px) 0; }
  .header__nav-item { background-color: transparent; gap: 0 min(4svw, 15px); padding: 0; }
  .header__nav-item:hover { background-color: transparent; }
  .header__nav-foot { margin-top: min(10svw, 40px); color: var(--blue); display: flex; flex-direction: column; gap: 10px; }
}
@media screen and (orientation: landscape) { .header__nav-foot { display: none; } }

/* ---------- home hero ---------- */
.home-hero { overflow: hidden; }
.home-hero__inner { width: 100%; min-height: 100lvh; display: flex; flex-direction: column; position: relative; }
.home-hero__background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; --bgp: 0; background: linear-gradient(108deg, var(--blue) calc(15% + 70% * var(--bgp)), var(--light-blue) 100%); }
.home-hero__top { min-height: 100lvh; position: relative; display: flex; justify-content: center; align-items: center; }
.home-hero__stars { position: absolute; top: 0; left: 0; width: 100%; height: 100svh; z-index: 0; -webkit-mask-image: linear-gradient(0deg, transparent, #000 50%); mask-image: linear-gradient(0deg, transparent, #000 50%); }
.home-hero__star { position: absolute; inset: -4%; }
.home-hero__star canvas { width: 100%; height: 100%; display: block; }
.home-hero__title { position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%); z-index: 1; will-change: transform; pointer-events: none; }
.home-hero__title-top, .home-hero__title-bottom { display: block; }
@media screen and (orientation: landscape) { .home-hero__title-top, .home-hero__title-bottom { white-space: nowrap; } }
.home-hero__moon-initial { width: min(37.6041666667svw, 722px); aspect-ratio: 1; position: relative; }
.home-hero__moon { width: 100%; height: 100%; will-change: transform; }
.home-hero__moon-inner { width: 100%; height: 100%; position: relative; border-radius: 50%; overflow: hidden; box-shadow: 0 0 min(6svw, 110px) rgba(170, 165, 225, .16); --lit: .35; isolation: isolate; }
.home-hero__moon-inner img { width: 100%; height: 100%; object-fit: cover; }
.home-hero__moon-inner::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 min(3svw, 60px) rgba(10, 12, 30, .55); z-index: 2; pointer-events: none; }
.home-hero__moon-inner::after { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle at 62% 22%, rgba(178, 172, 232, .42), rgba(178, 172, 232, .12) 45%, transparent 70%); }
.moon-shade { position: absolute; inset: -2%; border-radius: 50%; background: rgba(12, 14, 32, .86); filter: blur(min(1.6svw, 26px)); transform: translateX(calc(var(--lit) * -118%)); z-index: 1; pointer-events: none; }
.home-hero__bottom { min-height: 100lvh; padding: 0 min(5.9895833333svw, 115px); position: relative; display: flex; align-items: center; justify-content: space-between; gap: 0 min(5.2083333333svw, 100px); }
.home-hero__description { flex-basis: min(37.5svw, 720px); white-space: pre-line; }
.home-hero__image { --dw: min(27svw, 520px); flex-basis: var(--dw); width: var(--dw); flex-shrink: 0; position: relative; align-self: flex-end; height: calc(var(--dw) * 1.8372 - min(7.1354166667svw, 137px)); margin-right: min(6svw, 115px); }
.home-hero__moon-final { position: absolute; width: calc(var(--dw) * .62); aspect-ratio: 1; left: calc(var(--dw) * .246); top: calc(var(--dw) * .3355); }
.home-hero__drink { position: absolute; width: 100%; left: 0; bottom: max(-7.1354166667svw, -137px); will-change: transform; }
.home-hero__drink img { width: 100%; height: auto; }
@media screen and (orientation: portrait) {
  .home-hero__title { padding: 0 min(5.3333333333svw, 20px); }
  .home-hero__moon-initial { width: min(133.3333333333svw, 500px); flex-shrink: 0; }
  .home-hero__bottom { flex-direction: column; justify-content: flex-end; padding: min(36svw, 140px) min(10.6666666667svw, 40px) 0; gap: min(8svw, 30px) 0; }
  .home-hero__description { flex-basis: auto; }
  .home-hero__image { --dw: min(62svw, 300px); flex-basis: auto; align-self: center; margin-right: 0; }
}

/* ---------- marquee + image zoom (reference .video-zoom) ---------- */
.video-zoom { min-height: 100svh; display: flex; flex-direction: column; position: relative; z-index: 1; }
.video-zoom__inner { flex-grow: 1; position: relative; background-color: var(--accent); overflow: hidden; }
.video-zoom__marquee { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); }
.marquee { overflow: hidden; width: 100%; }
.marquee__inner { display: flex; width: max-content; white-space: nowrap; }
.marquee__item { display: flex; align-items: center; padding-right: .45em; }
.marquee__separator { width: .38em; margin-left: .45em; flex-shrink: 0; }
.video-zoom__video { --progress: 0; --scale: calc(.3125 + (1 - .3125) * var(--progress)); position: absolute; z-index: 2; inset: 0; overflow: hidden; display: flex; transform: scale(var(--scale)); border-radius: calc(min(2.6041666667svw, 50px) * (1 - var(--progress)) / var(--scale)); }
.video-zoom__video img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 16s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-2%, -1%, 0); } }
.video-zoom__button { position: absolute; top: 50%; left: 50%; z-index: 4; opacity: .55; width: min(6.25svw, 120px); padding: min(1.0416666667svw, 20px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(calc(1 / var(--scale))); }
.video-zoom__button:hover { opacity: 1; background: var(--cream); color: var(--blue); }
@media screen and (orientation: portrait) {
  .video-zoom__video { --scale: calc(.2213740458 + (1 - .2213740458) * var(--progress)); border-radius: calc(min(2.6666666667svw, 10px) * (1 - var(--progress)) / var(--scale)); }
  .video-zoom__button { display: none; }
}

/* ---------- pinned paragraph ---------- */
.paragraph { min-height: 100svh; display: flex; flex-direction: column; position: relative; }
.paragraph--view { background-color: var(--accent); }
.paragraph--view .paragraph__diamond { margin-bottom: min(3.6458333333svw, 70px); }
.paragraph--pin { height: calc(100svh + 100lvh); margin-top: -100svh; }
.paragraph--pin .paragraph__inner { position: sticky; height: 100lvh; top: 0; flex-grow: 0; }
.paragraph__inner { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: min(3.6458333333svw, 70px) 0; padding: 0 min(12.2395833333svw, 235px); }
.paragraph__diamond { width: min(4.1145833333svw, 79px); margin-bottom: min(1.0416666667svw, 20px); }
.paragraph__cite { margin-top: max(-2svw, -38px); }
@media screen and (orientation: portrait) {
  .paragraph__inner { padding: min(6.9333333333svw, 26px); gap: min(9.3333333333svw, 35px) 0; }
  .paragraph__diamond { width: min(13.3333333333svw, 50px); margin-bottom: 0; }
  .paragraph__cite { margin-top: 0; }
}

/* ---------- circle slider (gallery) ---------- */
.circle-slider { overflow: hidden; }
.circle-slider__inner { position: relative; height: 56.25svw; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.circle-slider__label { position: absolute; top: 28.2291666667svw; left: 50%; transform: translateX(-50%); z-index: 4; white-space: nowrap; pointer-events: none; }
.circle-slider__control { position: absolute; top: 24.5833333333svw; width: 3.125svw; aspect-ratio: 1; border-radius: 50%; background-color: var(--cream); border: 2px solid var(--accent); z-index: 5; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: background-color .3s ease-in-out, border-color .3s ease-in-out; }
.circle-slider__control:hover { background-color: var(--accent); }
.circle-slider__control svg { width: 1.5104166667svw; height: auto; }
.circle-slider__control svg path { fill: var(--accent); transition: fill .3s ease-in-out; }
.circle-slider__control:hover svg path { fill: var(--cream); }
.circle-slider__control--prev { left: 15.4166666667svw; transform: rotate(-40deg); }
.circle-slider__control--next { right: 15.4166666667svw; transform: rotate(40deg); }
.circle-slider__control--next svg { transform: scaleX(-1); }
.circle-slider__wheel { position: absolute; width: 106.25svw; height: 106.25svw; left: -3.125svw; top: 14.5833333333svw; will-change: transform; cursor: grab; }
.circle-slider__wheel.is-dragging { cursor: grabbing; }
.circle-slider__circle { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 50%; border: 2px solid var(--accent); z-index: 2; pointer-events: none; }
.circle-slider__item { z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; pointer-events: none; }
.circle-slider__item-inner { width: 22.1875svw; height: 29.1666666667svw; will-change: transform; transform: translateY(-50%) scale(.8); pointer-events: auto; }
.circle-slider__item:nth-child(2) .circle-slider__item-inner { transform: translateY(-50%); }
.circle-slider__item:nth-child(3) { transform: rotate(45deg); }
.circle-slider__item:nth-child(4) { transform: rotate(90deg); }
.circle-slider__item:nth-child(5) { transform: rotate(135deg); }
.circle-slider__item:nth-child(6) { transform: rotate(180deg); }
.circle-slider__item:nth-child(7) { transform: rotate(225deg); }
.circle-slider__item:nth-child(8) { transform: rotate(270deg); }
.circle-slider__item:nth-child(9) { transform: rotate(315deg); }
.circle-slider__image { overflow: hidden; border-radius: 2.0833333333svw; display: flex; height: 100%; }
.circle-slider__image img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
@media screen and (orientation: portrait) {
  .circle-slider__inner { height: 146.6666666667svw; }
  .circle-slider__label { top: 84svw; }
  .circle-slider__control { width: 10.6666666667svw; top: 45.0666666667svw; }
  .circle-slider__control svg { width: 5.8666666667svw; }
  .circle-slider__control--prev { left: 6.1333333333svw; transform: rotate(-15deg); }
  .circle-slider__control--next { right: 6.1333333333svw; transform: rotate(15deg); }
  .circle-slider__wheel { width: 280svw; height: 280svw; left: -90svw; top: 44.8svw; }
  .circle-slider__item-inner { width: 52svw; height: 68.4svw; }
  .circle-slider__image { border-radius: 6.4svw; }
}

/* ---------- big list ---------- */
.list { position: relative; padding-bottom: min(6.25svw, 120px); z-index: 3; }
.list__line { width: 100%; height: 2px; background-color: var(--cream); transform-origin: center left; }
.list__item { transition: background-color .25s ease; }
@media screen and (orientation: landscape) { .list__item:hover { background-color: var(--accent); } }
@media screen and (orientation: portrait) { .list { padding-bottom: 0; } .list__line { height: 1px; } .list__item.active { background-color: var(--accent); } }
.list__images { width: min(28.3333333333svw, 544px); height: min(36.4583333333svw, 700px); border-radius: min(2.0833333333svw, 40px); position: absolute; pointer-events: none; right: min(3.6458333333svw, 70px); top: max(-18.2291666667svw, -350px); overflow: hidden; z-index: 4; }
.list__image { position: absolute; top: -3px; left: -3px; width: calc(100% + 6px); height: calc(100% + 6px); object-fit: cover; border-radius: min(2.0833333333svw, 40px); }
.home-list__item { padding: min(1.0416666667svw, 20px) 0 min(1.0416666667svw, 20px) min(3.6458333333svw, 70px); }
.home-list__item-link { display: flex; gap: 0 min(1.0416666667svw, 20px); align-items: baseline; }
@media screen and (orientation: portrait) {
  .home-list__item { padding: min(2.4svw, 9px) 0 min(3.4666666667svw, 13px) min(6.6666666667svw, 25px); }
  .home-list__item-link { flex-direction: column; gap: min(1.6svw, 6px); }
  .home-list__images { display: none; }
}

/* ---------- double column (story) ---------- */
.double-col { min-height: 100svh; display: flex; flex-direction: column; background-color: var(--blue); position: relative; z-index: 2; }
.double-col__inner { display: flex; align-items: center; flex-grow: 1; gap: 0 min(9.375svw, 180px); padding-left: min(9.8958333333svw, 190px); padding-right: min(12.2395833333svw, 235px); }
.double-col__image { flex-basis: min(31.25svw, 600px); flex-shrink: 0; border-radius: min(2.0833333333svw, 40px); overflow: hidden; display: flex; }
.double-col__image img { width: 100%; height: auto; aspect-ratio: 800 / 1030; object-fit: cover; }
.double-col__content { display: flex; flex-direction: column; gap: min(1.8229166667svw, 35px) 0; }
.double-col__description { line-height: 1.22 !important; }
@media screen and (orientation: portrait) {
  .double-col__inner { flex-direction: column-reverse; gap: min(18.6666666667svw, 70px) 0; padding: 0; }
  .double-col__image { flex-basis: auto; width: 100%; min-height: 100svh; border-radius: 0; }
  .double-col__image img { height: 100%; min-height: 100svh; object-fit: cover; aspect-ratio: auto; }
  .double-col__content { gap: min(9.3333333333svw, 35px) 0; padding: min(24svw, 90px) min(7.7333333333svw, 29px) 0; justify-content: center; }
}

/* ---------- two boxes (reference home-news) ---------- */
.home-news__inner { display: flex; position: relative; align-items: stretch; margin-bottom: min(2.6041666667svw, 50px); }
.home-news__line { background-color: var(--cream); }
.home-news__line--v { width: 2px; flex-shrink: 0; transform-origin: top center; }
.home-news__line--h { width: 100%; height: 2px; }
.home-news__diamond { position: absolute; top: 100%; left: 50%; transform: translate(-50%, -50%); width: min(4.1145833333svw, 79px); }
.home-news__box { flex-basis: 50%; display: flex; flex-direction: column; }
.home-news__box--l .home-news__line--h { transform-origin: right center; }
.home-news__box--r .home-news__line--h { transform-origin: left center; }
.home-news__header { padding-left: min(3.6458333333svw, 70px); min-height: min(5.2083333333svw, 100px); display: flex; align-items: center; }
.home-news__body { padding: min(3.6458333333svw, 70px) min(3svw, 50px) min(4.4270833333svw, 85px) min(6.25svw, 120px); flex-grow: 1; }
.home-news__label { padding-bottom: min(.7291666667svw, 14px); }
.home-news__title { padding-bottom: min(5.9375svw, 114px); max-width: min(26svw, 500px); }
.home-news__description { max-width: min(29.6875svw, 570px); padding-bottom: min(5.2083333333svw, 100px); line-height: 1.22 !important; }
.home-news__description cite { display: block; font-style: normal; margin-top: .9em; opacity: .75; }
@media screen and (orientation: portrait) {
  .home-news__inner { flex-direction: column; }
  .home-news__line--v, .home-news__diamond { display: none; }
  .home-news__header { padding-left: min(8svw, 30px); min-height: min(17.3333333333svw, 65px); }
  .home-news__body { padding: min(9.3333333333svw, 35px) min(8svw, 30px); }
  .home-news__title { max-width: min(75.2svw, 282px); padding-bottom: min(6.1333333333svw, 23px); }
  .home-news__description { max-width: 100%; padding-bottom: min(7.4666666667svw, 28px); }
}

/* ---------- reservations + visit (reference contacts-new) ---------- */
.contacts-new { padding: min(12.5svw, 240px) min(10.625svw, 204px) min(17.7083333333svw, 340px); }
.contacts-new__inner { background-color: var(--accent); border-radius: min(2.6041666667svw, 50px); }
.contacts-new__reservations { padding: min(3.6458333333svw, 70px) min(5.2083333333svw, 100px); position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; z-index: 1; }
.contacts-new__reservations-title { padding-bottom: min(2.0833333333svw, 40px); }
.contacts-new__reservations-description { padding-bottom: min(1.71875svw, 33px); line-height: 1.25 !important; }
.contacts-new__contacts { background-color: var(--cream); border-radius: min(2.6041666667svw, 50px); padding: min(5.2083333333svw, 100px); padding-bottom: min(3.6458333333svw, 70px); display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; text-align: center; }
.contacts-new__title { padding-bottom: min(2.0833333333svw, 40px); }
.contacts-new__description { padding-bottom: min(3.6458333333svw, 70px); line-height: 1.25 !important; max-width: 46em; }
.info { width: 100%; text-align: left; color: var(--blue); }
.info__row { display: flex; gap: min(2svw, 38px); align-items: baseline; padding: min(1.0416666667svw, 20px); border-bottom: 2px solid var(--blue); }
.info__label { flex: 0 0 min(14svw, 260px); text-transform: uppercase; }
.info__value { flex: 1; line-height: 1.3 !important; }
.info__value a { text-decoration: underline; text-underline-offset: 3px; }
.info__actions { display: flex; flex-wrap: wrap; gap: min(1svw, 16px); justify-content: center; margin-top: min(3.6458333333svw, 70px); }
@media screen and (orientation: portrait) {
  .contacts-new { padding: min(32svw, 120px) min(2.6666666667svw, 10px) min(32svw, 120px); }
  .contacts-new__inner { border-radius: min(8svw, 30px); }
  .contacts-new__reservations { padding: min(10.6666666667svw, 40px) min(8svw, 30px) min(8svw, 30px); }
  .contacts-new__reservations-title { padding-bottom: min(5.3333333333svw, 20px); }
  .contacts-new__reservations-description { padding-bottom: min(5.3333333333svw, 20px); }
  .contacts-new__contacts { padding: min(10.6666666667svw, 40px) min(6svw, 24px) min(14svw, 54px); border-radius: min(8svw, 30px); }
  .contacts-new__title { padding-bottom: min(4svw, 15px); }
  .contacts-new__description { padding-bottom: min(9.3333333333svw, 35px); }
  .info__row { flex-direction: column; gap: 6px; padding: min(4.2666666667svw, 16px) min(1.3333333333svw, 5px); border-bottom-width: 1px; }
  .info__label { flex: none; }
  .info__actions { gap: 10px; margin-top: min(9.3333333333svw, 35px); }
}

/* ---------- footer ---------- */
.footer { position: relative; min-height: min(39.0625svw, 750px); overflow: hidden; display: flex; flex-direction: column; z-index: 11; }
.footer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,37,64,0) 0%, var(--blue) 74.5%); z-index: 2; pointer-events: none; }
.footer__moon { position: absolute; z-index: 1; width: min(111.6666666667svw, 2144px); top: min(15svw, 288px); left: calc((100% - min(111.6666666667svw, 2144px)) / 2); transform-origin: center center; }
.footer__moon img { width: 100%; height: auto; }
.footer__inner { position: relative; z-index: 3; padding: min(22svw, 420px) min(3.6458333333svw, 70px) min(3.6458333333svw, 70px); display: flex; flex-direction: column; align-items: center; flex-grow: 1; }
.footer__logo { padding-bottom: min(2.6041666667svw, 50px); }
.footer__logo .logo { font-size: min(4.6svw, 88px); }
.footer__social { padding-bottom: min(9.6354166667svw, 185px); display: flex; justify-content: center; gap: 0 min(1.0416666667svw, 20px); }
.socials__social { width: min(3.2291666667svw, 62px); aspect-ratio: 1; display: flex; justify-content: center; align-items: center; border-radius: 50%; background-color: var(--cream); color: var(--blue); transition: transform .3s; }
.socials__social:hover { transform: scale(1.08); }
.socials__social svg { width: 55%; height: auto; }
.footer__bottom { flex-grow: 1; display: flex; width: 100%; gap: 0 min(10svw, 190px); justify-content: space-between; align-items: flex-end; }
.footer__menus { display: flex; justify-content: space-between; flex-grow: 1; gap: 0 min(3svw, 50px); }
.footer__menu, .footer__utility { display: flex; flex-direction: column; }
.footer__menu a, .footer__utility a, .footer__info a { transition: opacity .3s; }
.footer__menu a:hover, .footer__utility a:hover, .footer__info a:hover, .footer__credit a:hover { opacity: .65; }
.footer__logos { display: flex; align-items: center; gap: 0 min(4svw, 80px); }
.seal { width: min(6.5104166667svw, 125px); aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--cream); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--cream); gap: .25em; box-shadow: inset 0 0 0 min(.35svw, 6px) var(--blue), inset 0 0 0 min(.42svw, 7.5px) rgba(242,238,220,.5); }
.seal__score { font-family: "Poiret One", sans-serif; font-size: min(1.8svw, 34px); line-height: 1; }
.seal__txt { font-size: min(.55svw, 10.5px); letter-spacing: .14em; text-transform: uppercase; line-height: 1.35; }
.footer__credit { text-align: right; line-height: min(1.3020833333svw, 25px); }
.footer__credit a { text-decoration: underline; text-underline-offset: 3px; transition: opacity .3s; }
@media screen and (orientation: portrait) {
  .footer__moon { width: min(285.8666666667svw, 1072px); left: calc((100% - min(285.8666666667svw, 1072px)) / 2); top: min(20svw, 80px); }
  .footer__inner { padding: min(60svw, 230px) min(8svw, 30px) min(24svw, 90px); }
  .footer__logo { padding-bottom: min(7.2svw, 27px); }
  .footer__logo .logo { font-size: min(12svw, 46px); }
  .socials__social { width: min(11svw, 42px); }
  .footer__social { padding-bottom: min(16svw, 60px); }
  .footer__bottom { flex-direction: column; align-items: center; gap: min(14svw, 54px) 0; }
  .footer__menus { flex-direction: column; gap: min(10svw, 40px) 0; align-items: center; width: 100%; text-align: center; }
  .footer__menu { gap: 4px; }
  .footer__logos { flex-direction: column; gap: min(8svw, 30px); }
  .seal { width: min(26svw, 100px); }
  .seal__score { font-size: min(7svw, 26px); }
  .seal__txt { font-size: min(2.4svw, 9px); }
  .footer__credit { text-align: center; }
}

/* ---------- concept toast ---------- */
.toast { position: fixed; left: min(1.6svw, 24px); bottom: min(1.6svw, 24px); z-index: 60; max-width: min(380px, calc(100vw - 32px)); background: var(--cream); color: var(--blue); border-radius: 12px; padding: 14px 44px 14px 16px; font-size: 13px; line-height: 1.4; letter-spacing: .02em; box-shadow: 0 10px 40px rgba(0,0,0,.3); opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.toast.show { opacity: 1; transform: none; pointer-events: auto; }
.toast a { text-decoration: underline; text-underline-offset: 2px; }
.toast__close { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--blue); font-size: 20px; line-height: 1; }
.toast__close:hover { background: rgba(31,37,64,.08); }
@media screen and (orientation: portrait) { .toast { bottom: 72px; left: 16px; } }

/* ---------- inner page: common hero + catalog (reference menu page) ---------- */
.common-hero { height: 100vh; height: 100svh; }
.common-hero__inner { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: min(1.5svw, 24px); }
.common-hero__background { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.common-hero__background img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.common-hero__background::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(31,37,64,.62), rgba(31,37,64,.38) 70%), linear-gradient(180deg, rgba(31,37,64,.6), rgba(31,37,64,0) 40%, rgba(31,37,64,.75)); }
.common-hero__title, .common-hero__subtitle { position: relative; z-index: 2; }
.catalog { padding: 0 0 min(6svw, 110px); }
.catalog__menu { display: flex; flex-direction: column; align-items: center; justify-content: center; scroll-margin-top: 80px; }
.catalog__menu:not(:first-child) { margin-top: min(9.375svw, 180px); }
.catalog__diamond { width: min(4.1145833333svw, 79px); margin-bottom: min(1.0416666667svw, 20px); }
.catalog__title { margin-bottom: min(1.0416666667svw, 20px); text-align: center; }
.catalog__subtitle { margin-bottom: min(5.2083333333svw, 100px); text-align: center; line-height: 1.5 !important; padding: 0 16px; }
.catalog__line { width: 100%; height: 2px; background-color: var(--cream); }
.catalog__item { width: 100%; scroll-margin-top: 80px; }
.catalog__item-header { position: relative; width: 100%; text-align: left; min-height: min(8.3333333333svw, 160px); display: flex; flex-direction: column; justify-content: center; gap: min(.5208333333svw, 10px) 0; padding: 0 min(3.125svw, 60px) 0 min(4.1666666667svw, 80px); transition: background-color .3s; color: var(--cream); }
button.catalog__item-header:hover, .catalog__item.open .catalog__item-header { background-color: var(--accent); }
.catalog__icon { width: min(1.5625svw, 30px); aspect-ratio: 1; position: absolute; right: min(3.125svw, 60px); top: 50%; margin-top: calc(min(1.5625svw, 30px) / -2); transition: transform .5s ease-in-out; }
.catalog__icon::before, .catalog__icon::after { content: ""; display: block; width: 100%; height: 2px; background-color: var(--cream); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 100vh; }
.catalog__icon::after { transition: transform .5s ease-in-out; transform: translate(-50%, -50%) rotate(90deg); }
.catalog__item.open .catalog__icon { transform: rotate(180deg); }
.catalog__item.open .catalog__icon::after { transform: translate(-50%, -50%) rotate(0); }
.js .catalog__subitems { overflow: hidden; height: 0; }
.catalog__subitem-header { min-height: min(6.25svw, 120px); display: flex; align-items: center; justify-content: space-between; gap: 0 min(3svw, 50px); padding: min(1.2svw, 20px) min(3.125svw, 60px) min(1.2svw, 20px) min(6.25svw, 120px); }
.catalog__subitem-text { display: flex; flex-direction: column; gap: min(.5208333333svw, 10px) 0; }
.catalog__price { white-space: nowrap; }
html[lang="sq"] .tr-en { display: none; }
.catalog__note { margin-top: min(4svw, 70px); text-align: center; padding: 0 16px; opacity: .8; line-height: 1.5 !important; }
@media screen and (orientation: portrait) {
  .catalog__menu:not(:first-child) { margin-top: min(26.6666666667svw, 100px); }
  .catalog__diamond { width: min(13.3333333333svw, 50px); margin-bottom: min(1.6svw, 6px); }
  .catalog__title { margin-bottom: min(1.6svw, 6px); }
  .catalog__subtitle { margin-bottom: min(9.3333333333svw, 35px); }
  .catalog__line { height: 1px; }
  .catalog__item-header { padding: min(4svw, 15px) min(14svw, 54px) min(4svw, 15px) min(6.6666666667svw, 25px); min-height: min(18svw, 70px); }
  .catalog__icon { width: min(5.3333333333svw, 20px); right: min(4svw, 15px); margin-top: calc(min(5.3333333333svw, 20px) / -2); }
  .catalog__subitem-header { padding: min(4svw, 15px) min(4svw, 15px) min(4svw, 15px) min(9svw, 34px); min-height: 0; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js #preloader, .js .page-loader { display: none !important; }
}