/* ---------- Top bar / navigation ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--gutter);
  color: var(--paper);
  background: transparent;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline-light);
}
/* When the drawer is open we strip any backdrop-filter from ancestors —
   otherwise they'd create a new containing block and break the drawer's
   position:fixed positioning. */
body.menu-open .site-header,
body.menu-open .site-header.is-scrolled {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header.is-light:not(.is-scrolled) {
  color: var(--ink);
}

.brand {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  letter-spacing: 0.32em;
  font-weight: 600;
  font-size: 13px;
}
.brand__main {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 0.18em;
}
.brand__sub {
  font-size: 10px;
  margin-top: 4px;
  color: var(--gold);
  letter-spacing: 0.4em;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.nav__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-5);
}
.nav__link {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.32em;
  font-weight: 600;
}
.nav__lang button {
  padding: 6px 8px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 4px;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav__lang button:hover { color: var(--gold); }
.nav__lang button[aria-current="true"] { color: var(--gold); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -4px -8px -4px 0;
  position: relative;
  z-index: 60;
  background: transparent;
}
.nav-toggle__icon {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: background var(--t-fast) var(--ease), transform var(--t-base) var(--ease);
}
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform var(--t-base) var(--ease), top var(--t-base) var(--ease);
}
.nav-toggle__icon::before { top: -7px; }
.nav-toggle__icon::after  { top:  7px; }

body.menu-open .nav-toggle__icon { background: transparent; }
body.menu-open .nav-toggle__icon::before { top: 0; transform: rotate(45deg); }
body.menu-open .nav-toggle__icon::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 960px) {
  /* On mobile the header always has a solid backdrop so the brand and the
     hamburger never collide with the photo behind them.
     IMPORTANT: no backdrop-filter here — it would create a new containing
     block and break the position:fixed drawer we render inside the header. */
  .site-header {
    background: rgba(10, 10, 10, 0.94);
    color: var(--paper);
    border-bottom-color: var(--hairline-light);
    padding-block: 14px;
  }
  .site-header.is-light:not(.is-scrolled) { color: var(--paper); }
  .brand { font-size: 11px; letter-spacing: 0.28em; }
  .brand__main { font-size: 18px; letter-spacing: 0.16em; }
  .brand__sub { font-size: 9px; margin-top: 3px; letter-spacing: 0.32em; }

  .nav__list, .nav__lang { display: none; }
  .nav-toggle { display: inline-flex; }

  /* ---------- Off-canvas drawer ----------
     When the drawer opens we promote `.nav` itself into the full-screen
     drawer. That way the list AND the language pill are siblings inside
     ONE flex column, so we can pin PL/EN to the bottom with margin-top:auto
     instead of stacking it on top of the booking CTA. */
  body.menu-open .nav {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    padding:
      calc(76px + env(safe-area-inset-top, 0px))
      var(--gutter)
      calc(24px + env(safe-area-inset-bottom, 0px));
    background: var(--ink);
    overflow-y: auto;
    color: var(--paper);
  }
  /* The X button needs to float above the drawer flow in the corner. */
  body.menu-open .nav-toggle {
    position: fixed;
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: var(--gutter);
    z-index: 60;
    color: var(--paper);
    margin: 0;
  }

  body.menu-open .nav__list,
  body.menu-open .nav__lang {
    display: flex;
  }
  body.menu-open .nav__list {
    flex-direction: column;
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--paper);
    gap: 0;
    /* Push everything that follows the list (i.e. PL/EN) to the bottom. */
    flex: 1 0 auto;
  }
  body.menu-open .nav__list li {
    list-style: none;
    padding: 18px 0;
    border-bottom: 1px solid var(--hairline-light);
  }
  body.menu-open .nav__list .nav__link {
    display: block;
    font-size: 18px;
    letter-spacing: 0.18em;
    color: var(--paper);
    padding: 4px 0;
  }
  body.menu-open .nav__list .nav__link[aria-current="page"] { color: var(--gold); }

  /* PL/EN sits naturally in the drawer flow, centered, separated from the
     CTA above by a real margin so they no longer overlap. */
  body.menu-open .nav__lang {
    align-self: center;
    margin-top: var(--space-4);
    justify-content: center;
    gap: 4px;
    color: var(--paper);
    font-size: 12px;
    letter-spacing: 0.32em;
    padding: 12px 22px;
    border: 1px solid var(--hairline-light);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
  }
  body.menu-open .nav__lang button { color: rgba(255, 255, 255, 0.6); }
  body.menu-open .nav__lang button[aria-current="true"] { color: var(--gold); }

  /* In-drawer booking CTA — last item in the list, full-width pill. */
  .nav__cta {
    display: none;
    margin-top: var(--space-3);
    padding: 16px 24px;
    border: 1px solid var(--gold);
    background: var(--gold);
    color: var(--ink);
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    border-radius: 0;
  }
  body.menu-open .nav__cta { display: block; }
  /* The CTA's <li> wrapper shouldn't draw a divider — visually it IS the
     section break. */
  body.menu-open .nav__list li:last-child { border-bottom: 0; padding-bottom: 0; }

  body.menu-open { overflow: hidden; }
}

@media (min-width: 961px) {
  .nav__cta { display: none; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  /* Full viewport hero — image + headline fills the screen before any other
     content peeks above the fold. `svh` keeps it tidy on iOS Safari where
     the URL bar otherwise pushes the hero past the visible area. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: stretch;
  color: var(--paper);
  background: var(--ink);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.15) 35%, rgba(10,10,10,0.75) 100%),
    linear-gradient(90deg, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0) 60%);
}
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: end;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  /* Top padding keeps the eyebrow from sliding under the fixed header on
     short laptop displays (1366x768 etc.) where align-items:end would
     otherwise push content right under the GOLD 21 lockup. */
  padding: clamp(88px, 11vh, 128px) var(--gutter) clamp(64px, 9vw, 128px);
  gap: var(--space-6);
}
.hero__title {
  font-size: clamp(56px, 11vw, 132px);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}
.hero__title em {
  font-style: normal;
  color: var(--gold);
}
.hero__lede {
  max-width: 44ch;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: var(--space-5);
}
.hero__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  justify-self: end;
  text-align: right;
  padding-bottom: var(--space-2);
}
.hero__meta-row { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hero__meta-value { font-family: var(--font-display); font-size: 32px; font-weight: 300; letter-spacing: 0.04em; }
.hero__meta-label { font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255,255,255,0.6); }

/* Short-viewport tune-down: on laptops with <=860px vertical space the full
   132px hero title eats the entire fold and pushes the eyebrow against the
   header. Scale the title (and lede) so the whole block fits with breathing
   room above and below. Desktop monitors with more height keep the big type.
   Must come AFTER the base .hero__title rule above, otherwise cascade wins
   against this media query. */
@media (min-width: 881px) and (max-height: 860px) {
  .hero__title { font-size: clamp(48px, 8vw, 96px); margin-bottom: var(--space-3); }
  .hero__lede { font-size: 14px; line-height: 1.55; margin-bottom: var(--space-4); }
  .hero__meta-value { font-size: 26px; }
  .hero__meta { gap: var(--space-3); }
}

@media (max-width: 880px) {
  /* Use small/dynamic viewport units so iOS Safari URL-bar resize doesn't
     stretch the hero into the off-screen zone. */
  .hero { min-height: 88svh; }
  .hero__inner {
    grid-template-columns: 1fr;
    align-items: end;
    /* Reserve room for the fixed header so the title doesn't sit right
       under the GOLD 21 lockup. */
    padding-top: 96px;
    padding-bottom: 32px;
    gap: var(--space-4);
  }
  .hero__title { font-size: clamp(48px, 14vw, 80px); margin-bottom: var(--space-3); }
  .hero__lede { font-size: 15px; line-height: 1.6; }
  .hero__meta {
    justify-self: stretch;
    text-align: left;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    padding-bottom: 0;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  .hero__meta-row { flex-direction: row; align-items: baseline; gap: 8px; }
  .hero__meta-value { font-size: 22px; }
  .hero__meta-label { font-size: 10px; letter-spacing: 0.22em; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 16px 28px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--paper);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.btn:hover { background: var(--paper); color: var(--ink); }
.btn--solid { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn--solid:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--paper); }
.btn--ink { color: var(--ink); }
.btn--ink:hover { background: var(--ink); color: var(--paper); }
.btn__arrow { width: 24px; height: 1px; background: currentColor; position: relative; }
.btn__arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 8px; height: 8px; border-right: 1px solid currentColor; border-top: 1px solid currentColor; transform: rotate(45deg); }

/* ---------- Editorial split section ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.split--reverse > :first-child { order: 2; }
.split__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media--tall { aspect-ratio: 3 / 4; }
.split__title {
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 300;
  margin: var(--space-3) 0 var(--space-4);
}
.split__body { color: var(--steel); font-size: 16px; line-height: 1.75; max-width: 48ch; }
.split--dark .split__body { color: rgba(255, 255, 255, 0.7); }

@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse > :first-child { order: 0; }
}

/* ---------- Feature grid ---------- */

.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--hairline); }
.features--dark { border-top-color: var(--hairline-light); }
.feature {
  padding: var(--space-5) var(--space-4);
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.features--dark .feature { border-right-color: var(--hairline-light); }
.feature:last-child { border-right: 0; }
.feature__value { font-family: var(--font-display); font-size: 56px; font-weight: 300; line-height: 1; }
.feature__value em { font-style: normal; color: var(--gold); }
.feature__label { font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--steel); }
.features--dark .feature__label { color: rgba(255,255,255,0.6); }

@media (max-width: 880px) {
  .features { grid-template-columns: 1fr 1fr; }
  .feature {
    padding: var(--space-4) var(--space-3);
    gap: var(--space-1);
  }
  .feature:nth-child(2n) { border-right: 0; }
  .feature:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }
  .features--dark .feature:nth-child(-n+2) { border-bottom-color: var(--hairline-light); }
  /* Big 56px display numerals overflowed narrow columns and got clipped
     under the fixed header on scroll. Smaller, calmer, still confident. */
  .feature__value { font-size: 38px; }
  .feature__label { font-size: 10px; letter-spacing: 0.28em; }
}

/* ---------- Amenities (list of icons + names) ---------- */

.amenities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
}
.amenities li {
  list-style: none;
  font-size: 14px;
  letter-spacing: 0.08em;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.amenities li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--gold);
  display: inline-block;
}
@media (max-width: 720px) {
  .amenities { grid-template-columns: 1fr 1fr; }
}

/* ---------- Section heading ---------- */

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
.section-head__title {
  font-size: clamp(40px, 5.5vw, 80px);
  font-weight: 300;
  max-width: 18ch;
}
.section-head__aside {
  max-width: 32ch;
  color: var(--steel);
}
.section--dark .section-head__aside { color: rgba(255,255,255,0.7); }

@media (max-width: 720px) {
  .section-head { flex-direction: column; align-items: flex-start; }
}

/* ---------- Gallery (asymmetric editorial grid) ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-3);
}
.gallery figure { margin: 0; position: relative; overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.gallery figure:hover img { transform: scale(1.04); }
/* Aspect ratios are tuned so the two hero tiles end up with the SAME
   rendered height despite occupying 7 vs 5 columns: width(__a)/width(__b)
   ≈ 7/5, so we make aspect(__a)/aspect(__b) = 7/5 too. 7/4 paired with 5/4
   gives equal pixel heights at every container width (gap rounding aside)
   while keeping the editorial 7+5 split. */
.gallery__a { grid-column: span 7; aspect-ratio: 7 / 4; }
.gallery__b { grid-column: span 5; aspect-ratio: 5 / 4; }
.gallery__c { grid-column: span 4; aspect-ratio: 3 / 4; }
.gallery__d { grid-column: span 4; aspect-ratio: 3 / 4; }
.gallery__e { grid-column: span 4; aspect-ratio: 3 / 4; }
@media (max-width: 720px) {
  .gallery__a, .gallery__b, .gallery__c, .gallery__d, .gallery__e { grid-column: span 12; aspect-ratio: 4 / 3; }
}

/* ---------- Reviews quote ---------- */

.review-quote {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 300;
  line-height: 1.2;
  max-width: 24ch;
}
.review-cite {
  margin-top: var(--space-4);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--steel);
}
.section--dark .review-cite { color: rgba(255,255,255,0.6); }
.review-score {
  font-family: var(--font-display);
  font-size: clamp(56px, 8vw, 88px);
  font-weight: 300;
  line-height: 1;
  color: var(--gold);
}

/* On mobile the .split that hosts the review block stacks vertically; the
   score column was originally inline-styled `text-align: right` which leaves
   the big 9.4 floating awkwardly far right under the quote. Realign it. */
@media (max-width: 880px) {
  .review-quote { font-size: clamp(26px, 6vw, 36px); max-width: none; }
  .split .review-score-block {
    text-align: left !important;
    margin-top: var(--space-4);
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
  }
  .split .review-score-block .review-score { margin: 0; }
  .split .review-score-block .eyebrow { margin: 0; }
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-7) var(--gutter) var(--space-5);
}
.site-footer__grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-6);
  border-bottom: 1px solid var(--hairline-light);
  padding-bottom: var(--space-6);
}
.site-footer h4 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: var(--space-3);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: 14px; }
.site-footer p { color: rgba(255,255,255,0.7); font-size: 14px; }
.site-footer__bottom {
  max-width: var(--container);
  margin: var(--space-4) auto 0;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
@media (max-width: 880px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .site-footer__bottom { flex-direction: column; gap: var(--space-3); text-align: center; }
}
@media (max-width: 520px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* Footer legal strip — company details under the main grid, before bottom bar.
   Quiet but explicit so PL B2B guests can sanity-check before paying a deposit. */
.site-footer__legal {
  max-width: var(--container);
  margin: var(--space-4) auto 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline-light);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.04em;
}
.site-footer__legal strong { color: rgba(255, 255, 255, 0.65); font-weight: 500; }
.site-footer a.tel-link,
.site-footer a.wa-link {
  color: var(--gold);
  border-bottom: 1px solid rgba(200, 166, 94, 0.35);
  padding-bottom: 1px;
}
.site-footer a.tel-link:hover,
.site-footer a.wa-link:hover { color: var(--paper); border-bottom-color: var(--paper); }

/* ---------- FAQ accordion ---------- */
.faq { display: flex; flex-direction: column; max-width: 880px; }
.faq__item {
  border-top: 1px solid var(--hairline);
}
.faq__item:last-child { border-bottom: 1px solid var(--hairline); }
.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 22px 0;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.25;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.faq__q:hover { color: var(--gold-deep); }
.faq__q::after {
  content: "+";
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 300;
  color: var(--gold);
  flex: 0 0 24px;
  text-align: center;
  transition: transform var(--t-base) var(--ease);
}
.faq__item[open] .faq__q::after { content: "−"; }
.faq__a {
  padding: 0 0 22px;
  color: var(--steel);
  line-height: 1.75;
  font-size: 15px;
}
.faq__a strong { color: var(--ink); font-weight: 600; }
.section--dark .faq__q { color: var(--paper); }
.section--dark .faq__item { border-color: var(--hairline-light); }
.section--dark .faq__a { color: rgba(255, 255, 255, 0.72); }
.section--dark .faq__a strong { color: var(--paper); }

/* ---------- Booking CTA bar ---------- */

.booking-bar {
  background: var(--paper-warm);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-4) var(--gutter);
}
.booking-bar__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: var(--space-4);
  align-items: end;
}
.booking-bar label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: var(--space-2);
}
.booking-bar input, .booking-bar select {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 8px 0;
  font: inherit;
  color: var(--ink);
}
.booking-bar input:focus, .booking-bar select:focus { outline: none; border-bottom-color: var(--gold-deep); }

@media (max-width: 880px) {
  .booking-bar__inner { grid-template-columns: 1fr 1fr; }
  .booking-bar .btn { grid-column: 1 / -1; justify-content: center; }
}