:root {
  /* Palette: ivory walls, wrought-iron black and the gold of the ALSET mark, with the
     building’s rose render as the one secondary surface. */
  --ivory: #f8f7f4;
  --white: #fff;
  --surface: #f0ece6;
  --render: #efe5de;
  --ink: #202124;
  --muted: #666664;
  --line: #e8e5df;
  --iron: #1c1d20;
  --iron-deep: #141517;
  --gold: #b88a2a;
  --gold-deep: #7d5a13;
  --gold-light: #e2c27a;
  --whatsapp: #25d366;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --shadow-sm: 0 1px 2px rgba(22, 23, 26, .06), 0 6px 16px -8px rgba(22, 23, 26, .12);
  --shadow: 0 28px 60px -28px rgba(22, 23, 26, .32);
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 76px;
  /* Spacing scale: 4 8 12 16 24 32 48 64 96 128 */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--ivory);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

[id] {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* Fixed glass bar. Over the tour photos it turns dark (tour.js sets .is-on-photo). */
.site-header {
  -webkit-backdrop-filter: saturate(1.5) blur(18px);
  align-items: center;
  backdrop-filter: saturate(1.5) blur(18px);
  background: rgba(248, 247, 244, .82);
  border-bottom: 1px solid rgba(32, 33, 36, .07);
  color: var(--ink);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  height: var(--header-h);
  left: 0;
  padding: 0 clamp(20px, 5vw, 76px);
  position: fixed;
  right: 0;
  top: 0;
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
  z-index: 20;
}

.site-header.is-on-photo {
  background: rgba(20, 21, 23, .58);
  border-bottom-color: rgba(255, 255, 255, .1);
  color: var(--white);
}

.brand {
  align-items: center;
  display: inline-flex;
  gap: 12px;
  justify-self: start;
}

.brand-mark {
  display: flex;
  height: 44px;
}

.brand-mark img {
  height: 44px;
  width: auto;
}

.brand > span:last-child {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand strong {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: .08em;
}

.brand small {
  font-size:12px;
  font-weight: 500;
  letter-spacing: .3em;
  margin-top: 5px;
}

.desktop-nav {
  display: flex;
  gap: clamp(22px, 2.6vw, 40px);
}

.desktop-nav a {
  font-size: 14px;
  font-weight: 500;
  position: relative;
}

.desktop-nav a::after {
  background: var(--gold);
  bottom: -7px;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
  width: 100%;
}

.desktop-nav a:hover::after {
  transform: scaleX(1);
}

.header-cta {
  justify-self: end;
}

.site-header.is-on-photo .header-cta {
  background: var(--gold);
  color: var(--iron-deep);
}

.button {
  align-items: center;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  font-size: 15px;
  font-weight: 500;
  gap: 10px;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  transition: transform .2s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
}

.button:active {
  transform: scale(.97);
}

.button-small {
  font-size: 14px;
  min-height: 42px;
  padding: 0 20px;
}

.button-dark {
  background: var(--iron);
  color: var(--white);
}

.button-dark:hover {
  background: #33353a;
}

.button-gold {
  background: var(--gold);
  color: var(--iron-deep);
}

.button-gold:hover {
  background: #c99a36;
}

.menu-toggle,
.mobile-nav {
  display: none;
}

/* Sentence-case gold kicker; tracked all-caps labels read as template chrome. */
.eyebrow {
  color: var(--gold-deep);
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 12px;
}

.eyebrow-light {
  color: var(--gold-light);
}

h1,
h2 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: -.012em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(46px, 7vw, 100px);
}

/* Headings keep their markup but no longer colour or italicise a single word. */
h1 em,
h2 em {
  color: inherit;
  font-style: inherit;
  font-weight: inherit;
}

.text-link {
  align-items: center;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  gap: 9px;
}

.text-link svg {
  height: 19px;
  width: 19px;
}

.text-link.light {
  color: rgba(255, 255, 255, .9);
}

.section {
  padding-left: clamp(24px, 9vw, 140px);
  padding-right: clamp(24px, 9vw, 140px);
}

.intro {
  align-items: center;
  display: grid;
  gap: clamp(32px, 6vw, 96px);
  grid-template-columns: 1fr 1fr;
  padding-bottom: 100px;
  padding-top: 120px;
}

h2 {
  color: var(--ink);
  font-size: clamp(32px, 3.8vw, 52px);
}


.intro-copy {
  border-left: 1px solid var(--line);
  padding-left: clamp(30px, 5vw, 72px);
}

.intro-copy p {
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.55;
  margin: 0;
}

.intro-copy p.muted {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.75;
  margin-top: 24px;
}

.features {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  padding-bottom: 120px;
}

.feature {
  background: var(--surface);
  min-height: 340px;
  padding: 42px;
  position: relative;
  transition: background .25s ease, transform .25s ease;
}

.feature:hover {
  background: var(--white);
  transform: translateY(-5px);
}

.feature-number {
  color: var(--muted);
  font-family: var(--serif);
  font-size: 12px;
  position: absolute;
  right: 25px;
  top: 23px;
}

.feature-icon {
  align-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--iron);
  display: flex;
  height: 62px;
  justify-content: center;
  margin-bottom: 48px;
  width: 62px;
}

.feature-icon svg {
  height: 29px;
  width: 29px;
}

.feature h3 {
  color: var(--iron);
  font-family: var(--serif);
  font-size: 24px;
  margin: 0 0 15px;
}

.feature p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
  margin: 0;
  max-width: 280px;
}

.amenities-section {
  background: var(--surface);
  padding-bottom: 120px;
  padding-top: 120px;
}

.amenities-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, 1fr);
}

.amenity-card {
  align-items: center;
  background: rgba(255, 255, 255, .66);
  display: flex;
  gap: 18px;
  min-height: 112px;
  padding: 24px;
}

.amenity-icon {
  align-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--iron);
  display: flex;
  flex: 0 0 46px;
  font-family: var(--serif);
  font-size: 13px;
  height: 46px;
  justify-content: center;
}

.amenity-card div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.amenity-card strong {
  color: var(--iron);
  font-family: var(--serif);
  font-size: 17px;
}

.amenity-card small {
  color: var(--muted);
  font-size:12px;
  line-height: 1.45;
}

.amenities-note {
  color: var(--muted);
  font-size: 12px;
  margin: 22px 0 0;
}

.availability-section {
  align-items: center;
  background: var(--iron);
  color: var(--white);
  display: grid;
  gap: clamp(48px, 8vw, 115px);
  grid-template-columns: .8fr 1.2fr;
  padding-bottom: 120px;
  padding-top: 120px;
}

.availability-intro h2 {
  color: var(--white);
}


.availability-intro > p:not(.eyebrow) {
  color: rgba(255, 255, 255, .68);
  font-size: 14px;
  line-height: 1.8;
  margin: 28px 0;
  max-width: 440px;
}

.calendar-legend {
  display: flex;
  gap: 22px;
  margin-bottom: 32px;
}

.calendar-legend span {
  align-items: center;
  color: rgba(255, 255, 255, .72);
  display: flex;
  font-size:12px;
  gap: 8px;
}

.calendar-legend i {
  border-radius: 50%;
  height: 9px;
  width: 9px;
}

.legend-available {
  background: #74c69d;
}

.legend-unavailable {
  background: #c47c72;
}

.calendar-card {
  background: var(--ivory);
  box-shadow: var(--shadow);
  color: var(--ink);
  padding: clamp(22px, 4vw, 42px);
}

.calendar-toolbar {
  align-items: flex-end;
  display: flex;
  gap: 30px;
  justify-content: space-between;
  margin-bottom: 27px;
}

.calendar-toolbar label {
  color: var(--muted);
  font-size:12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.calendar-toolbar select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--iron);
  display: block;
  font-size: 14px;
  margin-top: 8px;
  outline: 0;
  padding: 6px 26px 8px 0;
}

.calendar-nav {
  align-items: center;
  display: flex;
  gap: 15px;
}

.calendar-nav strong {
  color: var(--iron);
  font-family: var(--serif);
  font-size: 20px;
  min-width: 150px;
  text-align: center;
}

.calendar-nav button {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--iron);
  cursor: pointer;
  display: flex;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.calendar-weekdays,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-weekdays span {
  color: var(--muted);
  font-size:12px;
  font-weight: 700;
  padding: 9px 0;
  text-align: center;
  text-transform: uppercase;
}

.calendar-day {
  align-items: center;
  aspect-ratio: 1;
  background: transparent;
  border: 0;
  color: var(--ink);
  display: flex;
  font-size: 12px;
  justify-content: center;
  margin: 2px;
  position: relative;
}

.calendar-day.empty {
  visibility: hidden;
}

.calendar-day.past {
  color: #c0c3bf;
}

.calendar-day.unavailable {
  background: #ead9d4;
  color: #985a53;
  text-decoration: line-through;
}

.calendar-day.today {
  outline: 1px solid var(--gold);
  outline-offset: -3px;
}

.calendar-status {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size:12px;
  margin: 20px 0 0;
  padding-top: 15px;
}

.section-heading {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
  margin-bottom: 55px;
}

.section-heading > p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
  max-width: 365px;
}

.location-section {
  background: var(--ivory);
  padding-bottom: 120px;
  padding-top: 120px;
}

.contact-section {
  background: var(--iron);
  color: var(--white);
  display: grid;
  gap: clamp(50px, 8vw, 125px);
  grid-template-columns: .9fr 1.1fr;
  padding: 120px clamp(24px, 9vw, 140px);
}

.contact-copy h2 {
  color: var(--white);
}


.contact-copy > p:not(.eyebrow) {
  color: rgba(255, 255, 255, .68);
  font-size: 15px;
  line-height: 1.8;
  margin: 28px 0 40px;
  max-width: 500px;
}

.direct-contact {
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 380px;
  padding-top: 25px;
}

.direct-contact span {
  color: rgba(255, 255, 255, .53);
  font-size:12px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.direct-contact a {
  align-items: center;
  display: flex;
  font-family: var(--serif);
  font-size: 22px;
  gap: 12px;
}

.direct-contact svg {
  color: var(--gold-light);
  height: 21px;
  width: 21px;
}

.inquiry-form {
  background: var(--ivory);
  box-shadow: var(--shadow);
  color: var(--ink);
  padding: clamp(26px, 4vw, 50px);
}

.form-heading {
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  margin-bottom: 27px;
  padding-bottom: 24px;
}

.form-heading > div {
  display: flex;
  flex-direction: column;
}

.form-heading span {
  color: var(--muted);
  font-size:12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.form-heading strong {
  color: var(--iron);
  font-family: var(--serif);
  font-size: 28px;
  margin-top: 4px;
}

.form-heading strong small {
  color: var(--muted);
  font-family: var(--sans);
  font-size:12px;
  font-weight: 400;
}

.availability-dot {
  align-items: center;
  display: flex;
  gap: 7px;
  margin-top: 5px;
}

.availability-dot i {
  background: #46a675;
  border-radius: 50%;
  height: 7px;
  width: 7px;
}

.form-row {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
}

.price-summary {
  align-items: center;
  background: var(--surface);
  display: flex;
  justify-content: space-between;
  margin: 0 0 20px;
  padding: 17px 18px;
}

.price-summary > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.price-summary span {
  color: var(--muted);
  font-size:12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.price-summary strong {
  color: var(--iron);
  font-family: var(--serif);
  font-size: 17px;
}

.price-summary .price-total {
  text-align: right;
}

.price-summary .price-total strong {
  color: var(--gold-deep);
  font-size: 22px;
}

.inquiry-form label {
  color: var(--muted);
  display: block;
  font-size:12px;
  font-weight: 700;
  letter-spacing: .07em;
  margin-bottom: 17px;
  text-transform: uppercase;
}

.inquiry-form label span {
  color: var(--muted);
  font-weight: 400;
}

.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
  background: var(--white);
  border: 1px solid #dbd8d0;
  border-radius: 0;
  color: var(--ink);
  display: block;
  font-size: 14px;
  margin-top: 8px;
  min-height: 50px;
  outline: none;
  padding: 12px 15px;
  resize: vertical;
  text-transform: none;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
}

.inquiry-form textarea {
  min-height: 84px;
}

.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 170, 103, .13);
}

.button-whatsapp {
  background: var(--whatsapp);
  color: #082b19;
  width: 100%;
}

.button-whatsapp:hover {
  background: #36df75;
}

.button-whatsapp svg {
  fill: currentColor;
  height: 23px;
  stroke: none;
  width: 23px;
}

.form-note {
  color: var(--muted);
  font-size:12px;
  margin: 13px 0 0;
  text-align: center;
}

.form-error {
  color: #b44545;
  display: none;
  font-size: 12px;
  margin: -6px 0 15px;
}

.form-error.visible {
  display: block;
}

footer {
  align-items: center;
  background: var(--iron-deep);
  color: var(--white);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  padding: 45px clamp(24px, 5vw, 76px);
}

/* Logo artwork sits in the same 43px disc the inline mark used, so headers are unchanged. */
.brand-mark img {
  height: 30px;
  object-fit: contain;
  width: 30px;
}

/* Whole-property option: the apartment card shape, set apart by the gold rule. */
.apartment-card-property {
  border: 2px solid var(--gold);
  box-shadow: 0 18px 44px rgba(22, 23, 26, .16);
}

.apartment-card.is-unavailable {
  opacity: .62;
}

.apartment-card.is-unavailable .book-apartment {
  cursor: not-allowed;
}

.booking-choice-property {
  border-color: var(--gold);
}

/* Large parties get a number field rather than a row of eighteen radio buttons. */
.guest-count {
  margin: 0 0 22px;
}

.guest-count label {
  display: flex;
  flex-direction: column;
  font-size: .78rem;
  font-weight: 600;
  gap: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.guest-count input {
  border: 1px solid rgba(22, 23, 26, .22);
  border-radius: 12px;
  font: inherit;
  padding: 14px 16px;
  text-transform: none;
}

footer > p {
  color: rgba(255, 255, 255, .72);
  font-family: var(--serif);
  font-size: 14px;
  justify-self: center;
}

.footer-links {
  display: flex;
  font-size: 12px;
  gap: 25px;
  justify-self: end;
}

.footer-links a:hover {
  color: var(--gold-light);
}

.copyright {
  color: rgba(255, 255, 255, .62);
  font-size:12px;
  grid-column: 1 / -1;
  letter-spacing: .14em;
  margin-top: 30px;
  text-align: center;
}

.floating-whatsapp {
  align-items: center;
  background: var(--whatsapp);
  border: 4px solid var(--white);
  border-radius: 50%;
  bottom: 22px;
  box-shadow: 0 7px 24px rgba(0, 0, 0, .2);
  color: var(--white);
  display: flex;
  height: 58px;
  justify-content: center;
  position: fixed;
  right: 22px;
  transition: transform .2s ease;
  width: 58px;
  z-index: 15;
}

.floating-whatsapp:hover {
  transform: scale(1.08);
}

.floating-whatsapp svg {
  fill: currentColor;
  height: 31px;
  stroke: none;
  width: 31px;
}

@media (max-width: 900px) {
  .site-header {
    display: flex;
    height: 78px;
    justify-content: space-between;
    position: absolute;
  }

  .desktop-nav,
  .header-cta {
    display: none;
  }

  .menu-toggle {
    background: transparent;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
  }

  .menu-toggle span {
    background: var(--iron);
    height: 2px;
    transition: transform .2s;
    width: 23px;
  }

  .menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(4px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-4px) rotate(-45deg);
  }

  .mobile-nav {
    background: var(--ivory);
    box-shadow: 0 18px 30px rgba(22, 23, 26, .12);
    display: flex;
    flex-direction: column;
    gap: 20px;
    left: 0;
    opacity: 0;
    padding: 26px;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 78px;
    transform: translateY(-10px);
    transition: opacity .2s, transform .2s;
  }

  .mobile-nav.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .intro {
    gap: 45px;
    grid-template-columns: 1fr;
    padding-bottom: 80px;
    padding-top: 85px;
  }

  .intro-copy {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 35px;
  }

  .features {
    grid-template-columns: 1fr;
    padding-bottom: 80px;
  }

  .amenities-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .availability-section {
    grid-template-columns: 1fr;
    padding-bottom: 85px;
    padding-top: 85px;
  }

  .feature {
    min-height: auto;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 25px;
  }

  .contact-section {
    grid-template-columns: 1fr;
    padding-bottom: 85px;
    padding-top: 85px;
  }

  footer {
    gap: 25px;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  footer .brand,
  .footer-links,
  footer > p {
    justify-self: center;
  }

  .copyright {
    grid-column: 1;
  }
}

@media (max-width: 620px) {
  .brand strong {
    font-size: 17px;
  }

  .brand small {
    font-size:12px;
  }

  .section {
    padding-left: 22px;
    padding-right: 22px;
  }

  .amenities-section,
  .location-section {
    padding-bottom: 80px;
    padding-top: 80px;
  }

  .amenities-grid {
    grid-template-columns: 1fr;
  }

  .calendar-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .calendar-nav {
    justify-content: space-between;
  }

  .calendar-nav strong {
    min-width: auto;
  }

  .calendar-day {
    font-size:12px;
    margin: 1px;
  }

  .price-summary {
    align-items: flex-start;
    gap: 18px;
  }

  .contact-section {
    padding-left: 20px;
    padding-right: 20px;
  }

  .inquiry-form {
    margin-left: -4px;
    margin-right: -4px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer-links {
    flex-direction: column;
    gap: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
  }
}

/* Full booking platform */
.search-strip{background:var(--white);box-shadow:var(--shadow);margin:-55px auto 0;max-width:1240px;padding-bottom:32px;padding-top:32px;position:relative;z-index:5}.search-heading h2{font-size:30px}.search-heading .eyebrow{margin-bottom:7px}.availability-search{align-items:end;display:grid;gap:14px;grid-template-columns:repeat(3,1fr) auto;margin-top:22px}.availability-search label,.booking-shell label,.payment-tabs label{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}.availability-search input,.booking-shell input,.booking-shell textarea,.payment-tabs input{background:var(--ivory);border:1px solid var(--line);display:block;margin-top:8px;min-height:50px;padding:12px;width:100%}.search-feedback{color:var(--gold-deep);font-size:12px;margin:16px 0 0;min-height:16px}.apartments-section{background:var(--white);padding-bottom:120px;padding-top:120px}.apartment-results-heading{align-items:center;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;margin-bottom:28px;padding-bottom:15px}.apartment-grid{display:grid;gap:24px;grid-template-columns:repeat(3,1fr)}.apartment-card{background:var(--ivory);border:1px solid transparent;overflow:hidden;transition:.25s}.apartment-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}.apartment-card.featured{border-color:var(--gold)}.apartment-image{height:230px;position:relative}.apartment-image img{height:100%;object-fit:cover;width:100%}.availability-pill,.featured-pill{background:#d8eddd;color:#27613d;font-size:12px;font-weight:700;left:14px;padding:8px 10px;position:absolute;top:14px;text-transform:uppercase}.featured-pill{background:var(--gold);color:var(--iron);left:auto;right:14px}.apartment-card-body{padding:25px}.apartment-title{display:flex;justify-content:space-between}.apartment-title small{color:var(--muted);font-size:12px;text-transform:uppercase}.apartment-title h3{color:var(--iron);font-family:var(--serif);font-size:23px;margin:5px 0}.apartment-title>strong{color:var(--gold-deep);font-family:var(--serif);font-size:19px;text-align:right}.apartment-title>strong small{display:block;text-transform:none}.apartment-card-body>p{color:var(--muted);font-size:12px;line-height:1.65}.apartment-facts{display:flex;gap:18px;margin:18px 0}.apartment-facts span{font-size:12px;font-weight:700}.apartment-actions{display:grid;gap:8px;grid-template-columns:1fr 1fr}.button-outline{background:transparent;border:1px solid var(--iron);color:var(--iron)}.apartment-actions .button{font-size:12px;min-height:45px;padding:0 10px}.no-results{grid-column:1/-1;padding:60px;text-align:center}.availability-matrix-section{grid-template-columns:.65fr 1.35fr}.matrix-card{background:var(--ivory);box-shadow:var(--shadow);color:var(--ink);min-width:0;padding:28px}.matrix-toolbar{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.matrix-toolbar strong{color:var(--iron);font-family:var(--serif)}.matrix-toolbar button{background:transparent;border:1px solid var(--line);height:38px;width:38px}.occupancy-scroll{overflow-x:auto}.occupancy-table{border-collapse:separate;border-spacing:3px;min-width:900px;width:100%}.occupancy-table th{font-size:12px;padding:8px;text-align:center}.occupancy-table thead th small,.occupancy-table tbody th small{color:var(--muted);display:block;font-size:12px}.occupancy-table td{height:42px;min-width:52px;text-align:center}.occupancy-table td.vacant{background:#ccebd5;color:#27613d}.occupancy-table td.occupied{background:#e5aaa4;color:#802d27}.occupancy-table td span{font-size:12px;font-weight:700;text-transform:uppercase}.bank-details{display:grid;gap:10px}.bank-details p{align-items:center;background:var(--surface);display:flex;justify-content:space-between;margin:0;padding:16px}.bank-details span{color:var(--muted);font-size:12px;text-transform:uppercase}.bank-details strong{color:var(--iron)}.payment-explainer{color:var(--muted);font-size:13px;line-height:1.7}.payment-info-card>.button{width:100%}
dialog{border:0;box-shadow:0 30px 90px rgba(0,0,0,.3);max-height:92vh;max-width:1050px;padding:0;width:calc(100% - 32px)}dialog::backdrop{background:rgba(22, 23, 26, .75)}.dialog-close{background:var(--ivory);border:0;border-radius:50%;font-size:24px;height:40px;position:absolute;right:16px;top:16px;width:40px;z-index:3}.detail-gallery{display:grid;grid-template-columns:1.5fr 1fr;height:430px}.detail-gallery>img,.detail-gallery div img{height:100%;object-fit:cover;width:100%}.detail-gallery div{display:grid;grid-template-rows:1fr 1fr}.detail-content{padding:45px}.detail-content h2{font-size:48px}.detail-facts{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.detail-facts span{background:var(--surface);padding:10px 13px}.detail-content>p{color:var(--muted);line-height:1.7}.detail-content ul{display:grid;grid-template-columns:1fr 1fr;padding-left:20px}.booking-shell{padding:40px}.booking-progress{display:flex;justify-content:space-between;margin:0 0 35px;overflow:hidden}.booking-progress span{align-items:center;color:var(--muted);display:flex;flex-direction:column;font-size:12px;gap:5px;text-align:center}.booking-progress i{align-items:center;border:1px solid var(--line);border-radius:50%;display:flex;font-style:normal;height:25px;justify-content:center;width:25px}.booking-progress .active{color:var(--iron)}.booking-progress .active i{background:var(--iron);color:white}.booking-shell h2{font-size:42px;margin-bottom:25px}.booking-apartment-list{display:grid;gap:8px;grid-template-columns:repeat(2,1fr);max-height:390px;overflow:auto}.booking-choice{align-items:center;border:1px solid var(--line);display:grid;gap:7px;grid-template-columns:auto 55px 1fr auto;padding:15px}.booking-choice.selected{background:var(--surface);border-color:var(--gold)}.booking-choice input{height:auto;margin:0;min-height:auto;width:auto}.booking-choice strong{font-family:var(--serif);font-size:20px}.booking-choice span{font-size:12px}.booking-choice b{color:var(--gold-deep);font-size:12px}.booking-nav{border-top:1px solid var(--line);display:flex;justify-content:space-between;margin-top:25px;padding-top:20px}.booking-error{color:#a33b34;font-size:12px;min-height:16px}.booking-date-grid,.booking-fields{display:grid;gap:15px;grid-template-columns:1fr 1fr}.booking-fields .wide{grid-column:1/-1}.booking-shell textarea{min-height:90px}.booking-estimate{align-items:center;background:var(--surface);display:flex;justify-content:space-between;margin-top:20px;padding:20px}.booking-estimate strong{color:var(--gold-deep);font-family:var(--serif);font-size:25px}.guest-picker{display:flex;gap:10px}.guest-picker input{display:none}.guest-picker span{align-items:center;border:1px solid var(--line);display:flex;flex-direction:column;font-family:var(--serif);font-size:25px;height:80px;justify-content:center;width:80px}.guest-picker input:checked+span{background:var(--iron);color:white}.guest-picker small{font-family:var(--sans);font-size:12px}.summary-card,.confirmation-reference{background:var(--surface);padding:24px}.summary-card h3{font-family:var(--serif);font-size:24px}.summary-card dl,.confirmation dl{display:grid;grid-template-columns:1fr 1fr}.summary-card dl div,.confirmation dl div{border-top:1px solid #d8d0c3;padding:12px}.summary-card dt,.confirmation dt,.payment-tabs dt{color:var(--muted);font-size:12px;text-transform:uppercase}.summary-card dd,.confirmation dd,.payment-tabs dd{font-size:12px;margin:5px 0 0}.summary-card .summary-total{grid-column:1/-1}.summary-total dd{color:var(--gold-deep);font-family:var(--serif);font-size:25px}.payment-tabs{display:grid;gap:18px;grid-template-columns:1fr 1fr}.payment-tabs article{border:1px solid var(--line);padding:25px}.payment-tabs h3{color:var(--iron);font-family:var(--serif)}.payment-tabs p{color:var(--muted);font-size:12px;line-height:1.6}.payment-tabs .button{margin-top:15px;width:100%}.manual-payment{background:var(--surface)}.manual-payment dl div{display:flex;justify-content:space-between;margin:10px 0}.confirmation{text-align:center}.confirmation-mark{align-items:center;background:#d2ead8;border-radius:50%;color:#27613d;display:flex;font-size:30px;height:70px;justify-content:center;margin:auto;width:70px}.confirmation-reference{display:flex;flex-direction:column;margin:25px auto;max-width:400px}.confirmation-reference strong{color:var(--iron);font-family:var(--serif);font-size:25px}.confirmation dl{margin:auto;max-width:600px;text-align:left}
@media(max-width:1000px){.apartment-grid{grid-template-columns:repeat(2,1fr)}.availability-matrix-section{grid-template-columns:1fr}.availability-search{grid-template-columns:repeat(2,1fr)}.availability-search .button{width:100%}}@media(max-width:650px){.search-strip{margin:0}.availability-search,.apartment-grid,.payment-tabs,.booking-fields,.booking-date-grid{grid-template-columns:1fr}.apartments-section{padding-top:80px}.detail-gallery{height:280px}.detail-content{padding:28px}.detail-content h2{font-size:38px}.detail-content ul{grid-template-columns:1fr}.booking-shell{padding:25px 18px}.booking-progress span{font-size:0}.booking-progress i{font-size:12px}.booking-apartment-list{grid-template-columns:1fr}.booking-choice{grid-template-columns:auto 45px 1fr}.booking-choice b{grid-column:3}.summary-card dl,.confirmation dl{grid-template-columns:1fr}.payment-tabs{grid-template-columns:1fr}.apartment-actions{grid-template-columns:1fr}.no-results{padding:35px 15px}}

/* Production interaction and guest self-service */
:where(a,button,input,select,textarea):focus-visible{outline:3px solid var(--gold);outline-offset:3px}
button:disabled,.button:disabled{cursor:wait;opacity:.58}
[aria-busy="true"]{cursor:progress;opacity:.72}
.occupancy-table th:first-child{background:var(--ivory);left:0;position:sticky;z-index:2}
.calendar-load-error{color:#a33b34;padding:30px!important;text-align:center}
.confirmation-actions{display:flex;gap:10px;justify-content:center;margin-top:24px}.confirmation-actions .button{min-width:170px}
.booking-lookup-section{align-items:start;background:var(--surface);display:grid;gap:70px;grid-template-columns:.8fr 1.2fr;padding-bottom:90px;padding-top:90px}.booking-lookup-section h2{color:var(--iron);font-size:clamp(38px,5vw,62px)}.booking-lookup-section>div>p:last-child{color:var(--muted);line-height:1.7;max-width:520px}.booking-lookup-form{background:var(--ivory);box-shadow:var(--shadow);padding:30px}.booking-lookup-form>label{color:var(--muted);display:block;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}.booking-lookup-form>div:first-of-type{display:grid;gap:10px;grid-template-columns:1fr auto;margin-top:9px}.booking-lookup-form input{background:var(--white);border:1px solid var(--line);font-size:14px;min-height:52px;padding:12px 14px;text-transform:uppercase;width:100%}.booking-lookup-result dl{display:grid;grid-template-columns:repeat(2,1fr);margin:18px 0 0}.booking-lookup-result dl div{border-top:1px solid var(--line);padding:12px}.booking-lookup-result dt{color:var(--muted);font-size:12px;text-transform:uppercase}.booking-lookup-result dd{color:var(--iron);font-size:12px;font-weight:700;margin:5px 0 0}

@media(max-width:800px){.booking-lookup-section{gap:30px;grid-template-columns:1fr}}
@media(max-width:650px){dialog{max-height:100dvh;width:100%}.apartment-dialog,.booking-dialog{margin:0;max-width:none}.dialog-close{height:44px;right:10px;top:10px;width:44px}.booking-progress{gap:6px;overflow-x:auto;padding-bottom:5px}.booking-progress span{flex:0 0 26px}.guest-picker{display:grid;grid-template-columns:repeat(2,1fr)}.guest-picker span{height:70px;width:100%}.booking-nav{gap:10px}.booking-nav .button{flex:1;min-width:0;padding:0 12px}.confirmation-actions{flex-direction:column}.confirmation-actions .button{width:100%}.booking-lookup-section{padding-bottom:65px;padding-top:65px}.booking-lookup-form{padding:22px 18px}.booking-lookup-form>div:first-of-type{grid-template-columns:1fr}.booking-lookup-form .button{width:100%}.booking-lookup-result dl{grid-template-columns:1fr}.floating-whatsapp{bottom:18px;right:18px}.occupancy-scroll{margin-right:-22px;padding-right:22px;scrollbar-width:thin}}

/* ===== Design system 2026: cinematic tour + shared components ===== */
body {
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

/* --- Tour: a pinned stage whose photos cross-fade with scroll (tour.js). Without JS or with
   reduced motion, the same markup reads as a stack of captioned full-width photos. --- */
.tour {
  --gutter: clamp(20px, 7vw, 120px);
  --tour-step: 58svh;
  background: var(--iron-deep);
  color: var(--white);
  position: relative;
}

.tour-live .tour {
  height: calc(100svh + 8 * var(--tour-step));
}

.tour-stage {
  position: relative;
}

.tour-live .tour-stage {
  height: 100svh;
  overflow: hidden;
  position: sticky;
  top: 0;
}

.tour-scene {
  height: 86svh;
  overflow: hidden;
  position: relative;
}

.tour-scene:first-of-type {
  height: 100svh;
}

.tour-live .tour-scene {
  height: auto;
  inset: 0;
  opacity: 0;
  position: absolute;
}

.tour-live .tour-scene:first-of-type {
  opacity: 1;
}

.tour-live .tour-scene:not(.is-near) .tour-photo {
  display: none;
}

.tour-photo,
.tour-photo img {
  height: 100%;
  width: 100%;
}

.tour-photo img {
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}

.tour-live .tour-photo img {
  transform: translate3d(calc(var(--drift, 0) * 1%), 0, 0) scale(var(--zoom, 1.08));
  will-change: transform;
}

/* Focus points keep each subject in frame on narrow portrait crops. Set here, not in markup:
   the CSP (style-src without unsafe-inline) blocks style attributes. */
.tour-scene:nth-of-type(1) { --focus: 62% 50%; }
.tour-scene:nth-of-type(2) { --focus: 60% 62%; }
.tour-scene:nth-of-type(3) { --focus: 45% 50%; }
.tour-scene:nth-of-type(4) { --focus: 58% 55%; }
.tour-scene:nth-of-type(5) { --focus: 50% 55%; }
.tour-scene:nth-of-type(6) { --focus: 55% 55%; }
.tour-scene:nth-of-type(7) { --focus: 55% 45%; }
.tour-scene:nth-of-type(8) { --focus: 62% 50%; }

/* Top band keeps the header legible; the low band carries the captions. */
.tour-scene::after {
  background:
    linear-gradient(180deg, rgba(20, 21, 23, .45) 0%, rgba(20, 21, 23, 0) 20%),
    linear-gradient(90deg, rgba(20, 21, 23, .66) 0%, rgba(20, 21, 23, .32) 42%, rgba(20, 21, 23, 0) 72%),
    linear-gradient(0deg, rgba(20, 21, 23, .85) 0%, rgba(20, 21, 23, .35) 42%, rgba(20, 21, 23, 0) 68%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.tour-intro {
  display: flex;
  flex-direction: column;
  height: 100svh;
  inset: 0 0 auto;
  justify-content: flex-end;
  padding: 0 var(--gutter) clamp(56px, 13svh, 140px);
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

.tour-intro > * {
  max-width: 760px;
  pointer-events: auto;
}

.tour-intro h1 {
  color: var(--white);
}

.tour-intro > p:first-of-type {
  color: var(--white);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  margin: 22px 0 32px;
  max-width: 34ch;
}

.tour-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
}

.tour-cue {
  align-items: center;
  color: rgba(255, 255, 255, .9);
  display: flex;
  font-size: 13px;
  gap: 12px;
  margin: 44px 0 0;
}

.tour-cue::before {
  animation: tour-cue 2.6s var(--ease) infinite;
  background: linear-gradient(var(--gold-light), rgba(226, 194, 122, 0));
  content: "";
  height: 38px;
  transform-origin: top;
  width: 1px;
}

@keyframes tour-cue {
  0% { opacity: 1; transform: scaleY(0); }
  55% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}

html:not(.tour-live) .tour-cue {
  display: none;
}

.tour-caption {
  bottom: clamp(36px, 9svh, 96px);
  left: var(--gutter);
  max-width: min(640px, calc(100vw - 40px));
  position: absolute;
  z-index: 2;
}

html:not(.tour-live) .tour-scene:first-of-type .tour-caption {
  display: none;
}

.tour-count {
  color: var(--gold-light);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  margin: 0 0 12px;
}

.tour-title {
  color: var(--white);
  font-size: clamp(40px, 6.4vw, 92px);
  overflow: hidden;
  padding-bottom: .08em;
}

.tour-title span {
  display: block;
}

.tour-caption > p:not(.tour-count) {
  color: var(--white);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  margin: 14px 0 0;
  max-width: 40ch;
}

/* One motion idea for text: the title rises out of a mask, the lines around it follow. */
.tour-live .tour-caption {
  transition: visibility 0s linear .3s;
  visibility: hidden;
}

.tour-live .tour-caption > *,
.tour-live .tour-title span {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.tour-live .tour-title {
  opacity: 1;
  transform: none;
}

.tour-live .tour-title span {
  opacity: 1;
  transform: translateY(108%);
}

.tour-live .tour-scene.is-active .tour-caption {
  transition-delay: 0s;
  visibility: visible;
}

.tour-live .tour-scene.is-active .tour-caption > *,
.tour-live .tour-scene.is-active .tour-title span {
  opacity: 1;
  transform: none;
  transition-duration: .7s, .9s;
}

.tour-live .tour-scene.is-active .tour-title span { transition-delay: .06s; }
.tour-live .tour-scene.is-active .tour-caption > p:not(.tour-count) { transition-delay: .18s; }
.tour-live .tour-scene.is-active .tour-caption > .button { transition-delay: .28s; }

.tour-progress {
  display: none;
}

.tour-live .tour-progress {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  right: clamp(14px, 3vw, 44px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
}

.tour-progress button {
  align-items: center;
  background: none;
  border: 0;
  color: var(--white);
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 7px 0;
}

.tour-progress button::after {
  background: rgba(255, 255, 255, .45);
  content: "";
  height: 1px;
  transition: width .45s var(--ease), background .45s var(--ease);
  width: 14px;
}

.tour-progress button[aria-current]::after {
  background: var(--gold-light);
  width: 38px;
}

.tour-progress span {
  font-size: 13px;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  white-space: nowrap;
}

.tour-progress button:hover span,
.tour-progress button:focus-visible span {
  opacity: 1;
  transform: none;
}

.tour-skip {
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  position: absolute;
  right: clamp(14px, 3vw, 44px);
  text-decoration: underline;
  text-underline-offset: 4px;
  top: calc(var(--header-h) + 22px);
  z-index: 4;
}

html:not(.tour-live) .tour-skip {
  display: none;
}

/* --- Shared components --- */
.feature-number {
  display: none;
}

.features {
  border-radius: var(--radius-lg);
  margin: 0 clamp(24px, 9vw, 140px) 120px;
  overflow: hidden;
  padding: 0;
}

.feature {
  background: var(--surface);
  transition: background .3s var(--ease);
}

.feature:hover {
  transform: none;
}

.amenities-section {
  background: var(--render);
}

.amenity-card {
  background: rgba(255, 255, 255, .72);
  border-radius: var(--radius);
}

.search-strip,
.matrix-card,
.inquiry-form,
dialog {
  border-radius: var(--radius-lg);
}

dialog {
  overflow: hidden;
}

.search-strip {
  box-shadow: var(--shadow);
}

.availability-search input,
.booking-shell input,
.booking-shell textarea,
.payment-tabs input,
.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea,
.booking-lookup-form input {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.availability-search input:focus,
.booking-shell input:focus,
.booking-shell textarea:focus,
.booking-lookup-form input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 138, 42, .16);
  outline: none;
}

.apartment-card {
  background: var(--ivory);
  border-radius: var(--radius);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}

.apartment-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.apartment-image {
  overflow: hidden;
}

.apartment-image img {
  transition: transform .8s var(--ease);
}

.apartment-card:hover .apartment-image img {
  transform: scale(1.04);
}

.availability-pill,
.featured-pill {
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 11px;
  text-transform: none;
}

.featured-pill {
  color: var(--iron-deep);
}

.apartment-actions .button {
  font-size: 14px;
}

.button-outline {
  border-color: rgba(32, 33, 36, .28);
}

.button-outline:hover {
  border-color: var(--iron);
}

.occupancy-table td {
  border-radius: 4px;
}

.bank-details p,
.detail-facts span,
.booking-estimate,
.summary-card,
.confirmation-reference,
.price-summary {
  border-radius: var(--radius-sm);
}

dialog::backdrop {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: rgba(20, 21, 23, .62);
}

dialog[open] {
  animation: dialog-in .45s var(--ease);
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
}

.mobile-nav {
  color: var(--ink);
}

.mobile-nav a {
  font-size: 17px;
}

.menu-toggle {
  color: inherit;
}

.menu-toggle span {
  background: currentColor;
}

@media (max-width: 900px) {
  .site-header {
    height: var(--header-h);
    position: fixed;
  }

  .mobile-nav {
    top: var(--header-h);
  }
}

@media (max-width: 700px) {
  :root {
    --header-h: 66px;
  }

  .brand-mark,
  .brand-mark img {
    height: 38px;
  }

  .tour {
    --gutter: 20px;
    --tour-step: 46svh;
  }

  .tour-caption {
    max-width: calc(100vw - 104px);
  }

  .tour-live .tour-progress {
    flex-direction: row;
    gap: 4px;
    left: 20px;
    right: 20px;
    top: calc(var(--header-h) + 12px);
    transform: none;
  }

  .tour-progress button {
    flex: 1;
    padding: 10px 0;
  }

  .tour-progress button::after,
  .tour-progress button[aria-current]::after {
    width: 100%;
  }

  /* Hidden visually but kept as each button's accessible name. */
  .tour-progress span {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .tour-skip {
    top: calc(var(--header-h) + 44px);
  }

  .features {
    margin: 0 22px 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tour-cue::before,
  dialog[open] {
    animation: none;
  }
}

/* Section rhythm: one vertical step for every band (was 120px top and bottom). */
:root {
  --section-y: clamp(32px, 4.2vw, 56px);
}

.intro,
.apartments-section,
.amenities-section,
.availability-section,
.location-section,
.contact-section,
.booking-lookup-section {
  padding-bottom: var(--section-y);
  padding-top: var(--section-y);
}

/* Intro and the feature row share the ivory band, so they sit closer together. */
.intro {
  padding-bottom: calc(var(--section-y) * .6);
}

.features {
  margin-bottom: var(--section-y);
}

.section-heading {
  margin-bottom: 32px;
}

/* Compact cards: content sets the height, not a fixed minimum. */
.feature {
  min-height: 0;
  padding: 32px;
}

.feature-icon {
  height: 52px;
  margin-bottom: 24px;
  width: 52px;
}

.feature-icon svg {
  height: 24px;
  width: 24px;
}

.amenity-card {
  min-height: 0;
  padding: 18px 20px;
}

.amenity-card strong {
  line-height: 1.25;
}

.amenities-note {
  margin-top: 16px;
}

.booking-lookup-section {
  align-items: center;
  gap: clamp(28px, 4vw, 48px);
}

.booking-lookup-form {
  border-radius: var(--radius-lg);
  padding: 24px;
}

.booking-lookup-form .search-feedback {
  margin-top: 8px;
}

@media (max-width: 700px) {
  .section-heading {
    margin-bottom: 24px;
  }

  .feature {
    padding: 24px;
  }
}

/* --- Night backdrop: the lit building behind "What your stay offers" through "Plan your stay".
   A sticky full-screen layer sits under translucent sections; tour.js scrubs it with Motion.
   Only transform and opacity animate: the blur is baked into a 2KB image, never a CSS filter. --- */
/* Dark base: what the translucent sections sit on if the photo has not loaded. */
.night {
  background: var(--iron-deep);
  isolation: isolate;
  position: relative;
}

/* Absolute layer the exact size of .night, holding a sticky screen-sized view. The sticky box can
   never outrun its container this way; a negative-margin sticky element stays pinned one screen
   past the end and paints over the sections that follow. */
.night-backdrop {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.night-view {
  background: var(--iron-deep);
  height: 100svh;
  overflow: hidden;
  position: sticky;
  top: 0;
}

.night-frame {
  inset: 0;
  position: absolute;
  transform: scale(1.1);
}

.night-blur,
.night-sharp,
.night-sharp img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: 62% 50%;
  position: absolute;
  width: 100%;
}

.night-sharp {
  opacity: 0;
}

.night-veil {
  background: var(--iron-deep);
  inset: 0;
  opacity: .5;
  position: absolute;
}

/* Sections let the backdrop through. Every band is dark glass so the building stays visible all the way
   down; text on the bands is light, and content that needs a light ground keeps its own white card. */
.night .amenities-section {
  background: rgba(20, 21, 23, .42);
  color: var(--white);
}

.night .availability-section {
  background: rgba(20, 21, 23, .3);
}

/* The location band only frames its white map card, so it can be almost clear. */
.night .location-section {
  background: rgba(20, 21, 23, .18);
}

.night .contact-section {
  background: linear-gradient(90deg, rgba(20, 21, 23, .62) 0%, rgba(20, 21, 23, .36) 55%, rgba(20, 21, 23, .14) 100%);
}

.night .amenities-section h2 {
  color: var(--white);
}

.night .amenities-section .eyebrow {
  color: var(--gold-light);
}

.night .amenities-section .section-heading > p,
.night .amenities-section .amenities-note {
  color: rgba(255, 255, 255, .88);
}

.night .amenity-card {
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
}

/* A soft halo keeps light text legible where it crosses the brightest lit walls of the photo. */
.night .amenities-section .section-heading,
.night .amenities-section .amenities-note,
.night .availability-intro,
.night .contact-copy {
  text-shadow: 0 1px 18px rgba(20, 21, 23, .6);
}

/* --- Find us: a night-toned map with a gold beacon on the exact spot, and a glass panel over it.
   Google's embed cannot be restyled from inside, so a CSS filter recolours its pixels; the map
   underneath stays fully interactive (pan, zoom, "View larger map"). --- */
.find-us {
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .7);
  isolation: isolate;
  min-height: clamp(520px, 72svh, 680px);
  outline: 1px solid rgba(226, 194, 122, .28);
  outline-offset: -1px;
  overflow: hidden;
  position: relative;
}

.find-us-map {
  background-color: #1d1f24;
  /* Faint survey grid shows while the lazy map frame loads. */
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 48px 48px;
  inset: 0;
  position: absolute;
}

.find-us-frame {
  border: 0;
  filter: invert(.92) hue-rotate(180deg) saturate(.4) brightness(.95) contrast(.95);
  height: 100%;
  position: relative;
  width: 100%;
}

/* Warm glow at the pin, and a darker edge on the side the panel sits on. */
.find-us-map::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(226, 194, 122, .2), rgba(226, 194, 122, 0) 34%),
    linear-gradient(90deg, rgba(20, 21, 23, .55) 0%, rgba(20, 21, 23, 0) 52%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

/* The embed centres on the property's coordinates, so the centre of the frame is the gate. */
.find-us-beacon,
.find-us-beacon span {
  border: 1.5px solid var(--gold-light);
  border-radius: 50%;
}

.find-us-beacon {
  height: 22px;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  z-index: 2;
}

.find-us-beacon span,
.find-us-beacon::after {
  animation: find-us-pulse 3s var(--ease) infinite;
  inset: -1.5px;
  position: absolute;
}

.find-us-beacon::after {
  animation-delay: 1.5s;
  border: 1.5px solid var(--gold-light);
  border-radius: 50%;
  content: "";
}

@keyframes find-us-pulse {
  0% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(5.5); }
}

.find-us-panel {
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  background: rgba(20, 21, 23, .66);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius);
  bottom: clamp(16px, 3vw, 32px);
  color: var(--white);
  left: clamp(16px, 3vw, 32px);
  max-width: 440px;
  padding: clamp(24px, 3vw, 36px);
  position: absolute;
  z-index: 3;
}

.find-us-panel .eyebrow {
  color: var(--gold-light);
}

.find-us-panel h2 {
  color: var(--white);
  font-size: clamp(30px, 3.2vw, 44px);
}

.find-us-panel h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  margin: 22px 0 6px;
}

.find-us-coords {
  align-items: center;
  color: var(--gold-light);
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  gap: 8px 14px;
  letter-spacing: .04em;
  margin: 0 0 16px;
}

.find-us-copy {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  color: var(--white);
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0;
  min-height: 30px;
  padding: 0 12px;
  transition: background .2s var(--ease);
}

.find-us-copy:hover {
  background: rgba(255, 255, 255, .16);
}

#location-description {
  color: rgba(255, 255, 255, .84);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 24px;
}

.find-us-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.find-us-actions .button {
  flex: 1 1 auto;
}

.find-us-status {
  color: var(--gold-light);
  font-size: 13px;
  margin: 12px 0 0;
  min-height: 1.2em;
}

/* Secondary action on dark glass. */
.button-glass {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .28);
  color: var(--white);
}

.button-glass:hover {
  background: rgba(255, 255, 255, .16);
}

@media (max-width: 760px) {
  .find-us {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .find-us-map {
    height: 340px;
    position: relative;
  }

  .find-us-map::after {
    background: radial-gradient(circle at 50% 50%, rgba(226, 194, 122, .2), rgba(226, 194, 122, 0) 40%);
  }

  .find-us-panel {
    background: rgba(20, 21, 23, .92);
    border: 0;
    border-radius: 0;
    border-top: 1px solid rgba(226, 194, 122, .25);
    inset: auto;
    max-width: none;
    position: relative;
  }
}

@media (prefers-reduced-motion: reduce) {
  .find-us-beacon span,
  .find-us-beacon::after {
    animation: none;
    opacity: 0;
  }
}

/* ===== Mobile refinements ===== */
/* Fields at 16px everywhere: iOS zooms the page when a focused field's text is smaller,
   and these inputs were inheriting their 11-12px uppercase label size. */
.availability-search input,
.booking-shell input,
.booking-shell textarea,
.payment-tabs input,
.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea,
.booking-lookup-form input,
.guest-count input,
.admin-login input,
.admin-booking-form input,
.admin-booking-form select,
.admin-booking-form textarea {
  font-size: 16px;
}

/* Notches and home indicators (viewport-fit=cover). */
.site-header {
  padding-left: max(clamp(20px, 5vw, 76px), env(safe-area-inset-left));
  padding-right: max(clamp(20px, 5vw, 76px), env(safe-area-inset-right));
}

.floating-whatsapp {
  bottom: calc(22px + env(safe-area-inset-bottom));
  right: calc(22px + env(safe-area-inset-right));
  transition: transform .2s ease, bottom .35s var(--ease);
}

footer {
  padding-bottom: calc(45px + env(safe-area-inset-bottom));
}

/* Tap targets: 44px for primary controls, at least 24px for compact ones. */
.menu-toggle {
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}

.matrix-toolbar button {
  height: 44px;
  width: 44px;
}

.find-us-copy {
  min-height: 40px;
  padding: 0 16px;
}

.tour-skip {
  padding: 10px 0;
  top: calc(var(--header-h) + 12px);
}

html.menu-open {
  overflow: hidden;
}

/* Booking bar exists only on phones. */
.mobile-book-bar {
  display: none;
}

@media (max-width: 900px) {
  /* Menu: a solid night sheet under the header (absolute, not fixed: the header's backdrop-filter
     makes it the containing block). Items settle in with a short stagger; reduced motion skips it. */
  .mobile-nav {
    background: var(--iron-deep);
    box-shadow: none;
    color: var(--white);
    gap: 0;
    height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px max(22px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
    top: 100%;
    transform: none;
    transition: opacity .2s var(--ease), visibility 0s linear .2s;
    visibility: hidden;
  }

  .mobile-nav.open {
    transform: none;
    transition-delay: 0s;
    visibility: visible;
  }

  .mobile-nav-links {
    display: flex;
    flex-direction: column;
  }

  .mobile-nav-links a {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .92);
    display: flex;
    font-size: 16px;
    font-weight: 500;
    justify-content: space-between;
    min-height: 48px;
  }

  /* Fine gold chevron, drawn with borders so it scales with the text. */
  .mobile-nav-links a::after {
    border-right: 1.5px solid var(--gold-light);
    border-top: 1.5px solid var(--gold-light);
    content: "";
    height: 6px;
    margin-right: 4px;
    transform: rotate(45deg);
    width: 6px;
  }

  .mobile-nav-links a,
  .mobile-nav-feature,
  .mobile-nav-book,
  .mobile-nav-note {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s var(--ease), transform .35s var(--ease);
  }

  .mobile-nav.open .mobile-nav-links a,
  .mobile-nav.open .mobile-nav-feature,
  .mobile-nav.open .mobile-nav-book,
  .mobile-nav.open .mobile-nav-note {
    opacity: 1;
    transform: none;
  }

  .mobile-nav.open .mobile-nav-links a:nth-child(2) { transition-delay: .03s; }
  .mobile-nav.open .mobile-nav-links a:nth-child(3) { transition-delay: .06s; }
  .mobile-nav.open .mobile-nav-links a:nth-child(4) { transition-delay: .09s; }
  .mobile-nav.open .mobile-nav-links a:nth-child(5) { transition-delay: .12s; }
  .mobile-nav.open .mobile-nav-links a:nth-child(6) { transition-delay: .15s; }
  .mobile-nav.open .mobile-nav-feature { transition-delay: .18s; }
  .mobile-nav.open .mobile-nav-book { transition-delay: .21s; }
  .mobile-nav.open .mobile-nav-note { transition-delay: .25s; }

  /* The lit building as a quiet invitation; only on screens tall enough to hold it without scrolling. */
  .mobile-nav-feature {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    display: block;
    margin-top: 20px;
    overflow: hidden;
    position: relative;
  }

  .mobile-nav-feature picture {
    display: block;
    height: 100%;
  }

  .mobile-nav-feature img {
    height: 100%;
    object-fit: cover;
    object-position: 62% 50%;
    width: 100%;
  }

  .mobile-nav-feature::after {
    background: linear-gradient(0deg, rgba(20, 21, 23, .88) 0%, rgba(20, 21, 23, 0) 70%);
    content: "";
    inset: 0;
    position: absolute;
  }

  .mobile-nav-feature span {
    bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    left: 16px;
    position: absolute;
    right: 16px;
    z-index: 1;
  }

  .mobile-nav-feature strong {
    color: var(--white);
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 500;
  }

  .mobile-nav-feature small {
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
  }

  .mobile-nav-book {
    display: grid;
    gap: 10px;
    margin-top: 16px;
  }

  .mobile-nav-book .button {
    min-height: 48px;
    width: 100%;
  }

  .mobile-nav-contact {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
  }

  .mobile-nav-contact a {
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    color: var(--white);
    display: flex;
    font-size: 15px;
    font-weight: 500;
    justify-content: center;
    min-height: 44px;
    transition: background .2s var(--ease);
  }

  .mobile-nav-contact a:active {
    background: rgba(255, 255, 255, .08);
  }

  .mobile-nav-note {
    color: rgba(255, 255, 255, .62);
    font-size: 13px;
    margin: auto 0 0;
    padding-top: 20px;
    text-align: center;
  }

  .site-header.menu-open {
    background: var(--iron-deep);
    border-bottom-color: rgba(255, 255, 255, .08);
    color: var(--white);
  }
}

@media (max-width: 900px) and (max-height: 700px) {
  .mobile-nav-feature {
    display: none;
  }
}

@media (max-width: 700px) {
  .tour {
    --tour-step: 40svh;
  }

  .tour-progress button {
    padding: 14px 0;
  }

  .tour-skip {
    top: calc(var(--header-h) + 40px);
  }

  .footer-links {
    gap: 2px;
  }

  .footer-links a {
    display: inline-block;
    padding: 10px 6px;
  }

  .apartment-image {
    aspect-ratio: 16 / 10;
    height: auto;
  }

  .apartment-actions .button,
  .booking-nav .button {
    min-height: 48px;
  }

  .booking-nav {
    gap: 10px;
  }

  .booking-nav .button {
    flex: 1;
  }

  /* Dialogs scroll inside, so the close button can sit in the dialog's corner and stay put. */
  .dialog-close {
    box-shadow: var(--shadow-sm);
    height: 44px;
    position: absolute;
    right: calc(12px + env(safe-area-inset-right));
    top: calc(12px + env(safe-area-inset-top));
    width: 44px;
  }

  /* Apartment photos: a swipeable strip; the next photo peeks in so it reads as more. */
  .detail-gallery {
    display: flex;
    gap: 8px;
    height: auto;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .detail-gallery::-webkit-scrollbar {
    display: none;
  }

  .detail-gallery div {
    display: contents;
  }

  .detail-gallery > img,
  .detail-gallery div img {
    aspect-ratio: 4 / 3;
    flex: 0 0 auto;
    height: auto;
    min-width: 0;
    scroll-snap-align: center;
    width: 88%;
  }

  /* Sticky booking bar; body padding keeps the footer clear of it. */
  .mobile-book-bar {
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    align-items: center;
    backdrop-filter: blur(16px) saturate(1.3);
    background: rgba(248, 247, 244, .92);
    border-top: 1px solid var(--line);
    bottom: 0;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    left: 0;
    padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    position: fixed;
    right: 0;
    transform: translateY(110%);
    transition: transform .35s var(--ease);
    z-index: 14;
  }

  .mobile-book-bar.is-visible {
    transform: none;
  }

  .mobile-book-bar p {
    line-height: 1.2;
    margin: 0;
  }

  .mobile-book-bar strong {
    display: block;
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 500;
  }

  .mobile-book-bar span {
    color: var(--muted);
    font-size: 13px;
  }

  .mobile-book-bar .button {
    min-height: 48px;
    padding: 0 22px;
  }

  body:has(.mobile-book-bar) {
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }

  body:has(.mobile-book-bar.is-visible) .floating-whatsapp {
    bottom: calc(84px + env(safe-area-inset-bottom));
  }
}

/* Portrait screens get portrait crops already centred on the subject (see <source media>). */
@media (max-aspect-ratio: 4/5) {
  .tour-photo img,
  .night-sharp img {
    object-position: 50% 50%;
  }
}

/* Short landscape phones: keep the tour captions and intro clear of the header. */
@media (max-height: 480px) and (orientation: landscape) {
  .tour-intro {
    padding-bottom: 24px;
  }

  .tour-intro h1 {
    font-size: clamp(32px, 7vh, 44px);
  }

  .tour-intro > p:first-of-type {
    margin: 10px 0 16px;
  }

  .tour-cue {
    display: none;
  }

  .tour-title {
    font-size: clamp(30px, 9vh, 48px);
  }

  .tour-caption {
    bottom: 20px;
  }
}

/* ===== Density pass: intro, features, apartments, card actions, footer ===== */
.intro {
  padding-bottom: calc(var(--section-y) * .5);
  padding-top: calc(var(--section-y) * .6);
}

.features {
  margin-bottom: calc(var(--section-y) * .6);
}

.apartments-section {
  padding-top: calc(var(--section-y) * .6);
}

.section-heading {
  margin-bottom: 24px;
}

.intro-copy p {
  font-size: clamp(17px, 1.6vw, 22px);
}

.intro-copy p.muted {
  margin-top: 14px;
}

.eyebrow {
  margin-bottom: 10px;
}

.search-strip {
  padding-bottom: 24px;
  padding-top: 24px;
}

.apartment-grid {
  gap: 20px;
}

.apartment-results-heading {
  margin-bottom: 20px;
  padding-bottom: 12px;
}

.apartment-card-body {
  padding: 18px 20px;
}

.apartment-facts {
  margin: 10px 0 14px;
}

/* Compact actions: two equal buttons on one line at every width. */
.apartment-actions {
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

.apartment-actions .button {
  font-size: 14px;
  min-height: 40px;
  padding: 0 12px;
}

/* Footer: brand and links on one line, a hairline, then the copyright. */
.site-footer {
  align-items: start;
  column-gap: 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 40px clamp(24px, 9vw, 140px) calc(24px + env(safe-area-inset-bottom));
  row-gap: 24px;
}

.site-footer .footer-brand {
  justify-self: start;
}

.footer-brand p {
  color: rgba(255, 255, 255, .72);
  font-family: var(--serif);
  font-size: 15px;
  margin: 14px 0 0;
}

.site-footer .footer-links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 4px 28px;
  justify-self: end;
}

.site-footer .footer-links a {
  color: rgba(255, 255, 255, .86);
  padding: 10px 0;
}

.site-footer .copyright {
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .62);
  grid-column: 1 / -1;
  letter-spacing: .04em;
  margin: 0;
  padding-top: 20px;
  text-align: left;
}

@media (max-width: 700px) {
  #stay {
    gap: 14px;
  }

  .intro-copy {
    padding-top: 16px;
  }

  .section-heading {
    margin-bottom: 16px;
  }

  .apartment-grid {
    gap: 16px;
  }

  /* Search: dates side by side, then guests beside the button. */
  .availability-search {
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .availability-search > * {
    min-width: 0;
  }

  .search-heading h2 {
    font-size: 26px;
  }

  .availability-search .button {
    padding: 0 12px;
    white-space: nowrap;
  }

  /* Amenities: a 2x2 grid, icon above the text. */
  .amenities-grid {
    gap: 10px;
    grid-template-columns: 1fr 1fr;
  }

  .amenity-card {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
  }

  .amenity-icon {
    flex-basis: auto;
    height: 40px;
    width: 40px;
  }

  .booking-lookup-section {
    gap: 20px;
  }

  .booking-lookup-form {
    padding: 18px;
  }

  /* Feature cards become compact rows: icon beside the text. */
  .feature {
    align-items: start;
    column-gap: 16px;
    display: grid;
    grid-template-columns: 44px 1fr;
    padding: 18px 20px;
  }

  .feature-icon {
    grid-row: span 2;
    height: 44px;
    margin: 0;
    width: 44px;
  }

  .feature-icon svg {
    height: 20px;
    width: 20px;
  }

  .feature h3 {
    font-size: 20px;
    margin: 0 0 4px;
  }

  .feature p {
    font-size: 14px;
    line-height: 1.55;
  }

  #apartments .section-heading {
    gap: 10px;
    margin-bottom: 16px;
  }

  .apartment-results-heading {
    margin-bottom: 16px;
    padding-bottom: 10px;
  }

  .apartment-card-body {
    padding: 16px;
  }

  .apartment-actions {
    grid-template-columns: 1fr 1fr;
  }

  .apartment-actions .button {
    min-height: 44px;
  }

  .site-footer {
    grid-template-columns: 1fr;
    justify-items: stretch;
    padding: 28px 22px calc(20px + env(safe-area-inset-bottom));
    row-gap: 18px;
    text-align: left;
  }

  .site-footer .footer-links {
    display: grid;
    gap: 0 16px;
    grid-template-columns: 1fr 1fr;
    justify-self: stretch;
  }

  .site-footer .footer-links a {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: 12px 0;
  }
}

@media (max-width: 360px) {
  /* Too narrow for two date fields side by side (date inputs have a wide minimum): stack them. */
  .availability-search {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== Live availability day view, tighter apartments section, menu gaps ===== */
/* Apartments: less air above and below; the heading now fits on one line on desktop. */
.features {
  margin-bottom: calc(var(--section-y) * .4);
}

.apartments-section {
  padding-bottom: calc(var(--section-y) * .7);
  padding-top: calc(var(--section-y) * .4);
}

.apartment-results-heading {
  margin-bottom: 14px;
  padding-bottom: 8px;
}

/* Live availability on every screen: a strip of the 14 days, each chip showing how many apartments
   are free, then the chosen day's apartments with a Book button on the free ones. */
.day-strip {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 2px 0 12px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.day-strip::-webkit-scrollbar {
  display: none;
}

.day-chip {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  flex: 1 0 42px;
  gap: 5px;
  justify-items: center;
  padding: 10px 4px;
  scroll-snap-align: start;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.day-chip small,
.day-chip em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.day-chip strong {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}

.day-meter {
  background: var(--line);
  border-radius: 2px;
  height: 4px;
  overflow: hidden;
  width: min(36px, 80%);
}

.day-meter i {
  background: #2f7d5c;
  display: block;
  height: 100%;
  width: calc(var(--free, 0) * 100%);
}

.day-chip.is-full {
  background: var(--surface);
}

.day-chip.is-selected {
  background: #fbf6ea;
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}

.day-heading {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  justify-content: space-between;
  margin: 6px 0 10px;
}

/* Gold-deep ties the heading to the gold-outlined chip of the chosen day. */
.day-heading strong {
  color: var(--gold-deep);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
}

.day-heading span {
  color: var(--muted);
  font-size: 13px;
}

/* One line per apartment; the details wrap under the name only on very narrow screens. */
.day-units {
  display: grid;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.day-units li {
  align-items: center;
  background: var(--white);
  border-radius: 10px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 44px;
  padding: 6px 6px 6px 12px;
}

.day-units span {
  align-items: baseline;
  column-gap: 8px;
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}

.day-units strong {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

.day-units small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.day-units .is-busy {
  background: #f1dcd9;
  border-radius: 999px;
  color: #8c3b33;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  white-space: nowrap;
}

.day-book {
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  min-height: 32px;
  padding: 0 14px;
}

.day-book:active {
  transform: scale(.97);
}

@media (hover: hover) {
  .day-chip:hover {
    border-color: var(--gold);
  }
}

/* Wider screens: the chips share the card's width and the apartments sit in two columns. */
@media (min-width: 701px) {
  .day-units {
    gap: 6px;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .matrix-card {
    padding: 16px;
  }

  .matrix-toolbar {
    margin-bottom: 12px;
  }

  /* Phones swipe the strip edge to edge; the snap padding keeps the first chip on the card's inset
     instead of being pulled to the edge. */
  .day-strip {
    gap: 8px;
    margin: 0 -16px;
    padding: 2px 16px 12px;
    scroll-padding-inline: 16px;
  }

  .day-chip {
    flex: 0 0 64px;
  }
}

/* Menu: a little tighter. */
@media (max-width: 900px) {
  .mobile-nav-links a {
    min-height: 44px;
  }

  .mobile-nav-feature {
    margin-top: 14px;
  }

  .mobile-nav-book {
    gap: 8px;
    margin-top: 12px;
  }

  .mobile-nav-contact {
    gap: 8px;
  }

  .mobile-nav-note {
    padding-top: 14px;
  }
}

/* ===== Buttons, headings and hover colour ===== */
:root {
  /* Book Now: deep emerald beside the gold (white text 7.8:1). */
  --emerald: #1f5c48;
}

/* Buttons: one size down everywhere. */
.button {
  font-size: 14px;
  min-height: 44px;
  padding: 0 22px;
}

.button-small {
  font-size: 13px;
  min-height: 36px;
  padding: 0 16px;
}

.apartment-actions .button {
  font-size: 13px;
  min-height: 38px;
}

.availability-search input {
  min-height: 46px;
}

.availability-search .button {
  min-height: 46px;
}

.apartment-actions .book-apartment,
.day-book {
  background: var(--emerald);
  color: var(--white);
}

/* Headings: smaller across sections, dialogs and the tour. */
h1 {
  font-size: clamp(36px, 5.4vw, 72px);
}

h2,
.booking-lookup-section h2 {
  font-size: clamp(26px, 3vw, 40px);
}

.tour-title {
  font-size: clamp(32px, 5vw, 68px);
}

.find-us-panel h2 {
  font-size: clamp(26px, 2.6vw, 34px);
}

.search-heading h2 {
  font-size: 24px;
}

.detail-content h2 {
  font-size: 34px;
}

.booking-shell h2 {
  font-size: 30px;
}

.feature h3 {
  font-size: 20px;
}

.apartment-title h3 {
  font-size: 20px;
}

/* Hover (and press) changes colour, not just shade. Hover only where a pointer can hover,
   so a tap on a phone does not leave a button stuck in its hover colour. */
@media (hover: hover) {
  .button-gold:hover {
    background: var(--gold-light);
    color: var(--iron-deep);
  }

  .button-dark:hover {
    background: var(--gold);
    color: var(--iron-deep);
  }

  .button-outline:hover {
    background: var(--iron);
    border-color: var(--iron);
    color: var(--white);
  }

  .button-glass:hover {
    background: var(--white);
    border-color: var(--white);
    color: var(--iron-deep);
  }

  .apartment-actions .book-apartment:hover,
  .day-book:hover {
    background: var(--gold);
    color: var(--iron-deep);
  }

  .find-us-copy:hover {
    background: var(--gold-light);
    border-color: var(--gold-light);
    color: var(--iron-deep);
  }

  .mobile-nav-contact a:hover {
    background: rgba(255, 255, 255, .1);
  }
}

.button-gold:active {
  background: var(--gold-light);
}

.button-dark:active,
.apartment-actions .book-apartment:active,
.day-book:active {
  background: var(--gold);
  color: var(--iron-deep);
}

.button-outline:active {
  background: var(--iron);
  color: var(--white);
}

.day-book {
  transition: background .25s var(--ease), color .25s var(--ease), transform .2s var(--ease);
}

@media (max-width: 700px) {
  .apartment-actions .button {
    min-height: 40px;
  }

  .booking-nav .button {
    min-height: 44px;
  }

  .mobile-book-bar .button {
    min-height: 42px;
    padding: 0 18px;
  }

  .mobile-nav-book .button {
    min-height: 44px;
  }

  .search-heading h2 {
    font-size: 22px;
  }

  .detail-content h2 {
    font-size: 28px;
  }

  .booking-shell h2 {
    font-size: 26px;
  }

  .tour-intro h1 {
    font-size: clamp(34px, 9.5vw, 42px);
  }
}

/* Find us: smaller heading and address on phones only. */
@media (max-width: 700px) {
  .find-us-panel h2 {
    font-size: 22px;
  }

  .find-us-panel h3 {
    font-size: 16px;
    line-height: 1.4;
    margin: 12px 0 4px;
  }
}

/* Phones: smaller section headings, tighter Find us panel. */
@media (max-width: 700px) {
  h2,
  .booking-lookup-section h2 {
    font-size: 22px;
  }

  .tour-title {
    font-size: 28px;
  }

  .find-us-panel {
    padding: 18px 16px 20px;
  }

  .find-us-panel .eyebrow {
    margin-bottom: 6px;
  }

  .find-us-panel h3 {
    margin: 8px 0 2px;
  }

  .find-us-coords {
    gap: 6px 12px;
    margin-bottom: 10px;
  }

  #location-description {
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 14px;
  }

  .find-us-actions {
    gap: 8px;
  }
}

/* Phones: compact payment card (Lipa na Family Bank). */
@media (max-width: 700px) {
  .contact-section {
    gap: 28px;
  }

  .payment-info-card {
    margin: 0;
    padding: 20px 18px;
  }

  .payment-info-card .form-heading {
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-bottom: 14px;
    padding-bottom: 14px;
  }

  .payment-info-card .form-heading strong {
    font-size: 22px;
    line-height: 1.2;
  }

  .payment-info-card .availability-dot {
    white-space: nowrap;
  }

  .bank-details {
    gap: 6px;
  }

  .bank-details p {
    gap: 12px;
    padding: 10px 14px;
  }

  .bank-details strong {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
  }

  .payment-explainer {
    line-height: 1.6;
    margin: 12px 0 14px;
  }
}

/* Booking dialog: several apartments on one booking. */
.booking-shell .booking-multi {
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font-size: 15px;
  font-weight: 600;
  gap: 12px;
  letter-spacing: 0;
  margin: 0 0 14px;
  padding: 12px 14px;
  text-transform: none;
}

.booking-shell .booking-multi input {
  accent-color: var(--gold-deep);
  flex: none;
  height: 20px;
  margin: 1px 0 0;
  min-height: 0;
  padding: 0;
  width: 20px;
}

.booking-multi span {
  display: grid;
  gap: 2px;
}

.booking-multi small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.booking-shell .booking-multi:has(input:checked) {
  background: #fbf6ea;
  border-color: var(--gold);
}

.booking-multi-total {
  color: var(--gold-deep);
  font-size: 14px;
  font-weight: 600;
  margin: 12px 0 0;
}

.booking-add-unit {
  background: none;
  border: 0;
  color: var(--gold-deep);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  margin-top: 14px;
  min-height: 32px;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .booking-add-unit:hover {
    color: var(--ink);
  }
}

/* Booking dialog: scrolls instead of clipping on short screens, keeps Back and Continue in view,
   and uses a tighter type scale. */
/* The dialog stays still so its close button never scrolls away; the content inside it scrolls. */
.booking-dialog[open],
.apartment-dialog[open] {
  display: flex;
  flex-direction: column;
}

.booking-shell,
#apartment-detail {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--line) transparent;
  scrollbar-width: thin;
}

.dialog-close {
  color: var(--ink);
  cursor: pointer;
  line-height: 1;
  transition: background .2s var(--ease);
}

@media (hover: hover) {
  .dialog-close:hover {
    background: var(--line);
  }
}

.booking-shell {
  padding: 30px 40px 0;
}

/* Room on the right for the close button, so it never sits on the last step. */
.booking-progress {
  margin-bottom: 22px;
  padding-right: 36px;
}

.booking-shell .eyebrow {
  font-size: 13px;
  margin-bottom: 6px;
}

.booking-shell h2 {
  font-size: 28px;
  margin-bottom: 18px;
}

.booking-shell .booking-date-grid input {
  min-height: 46px;
}

.booking-estimate {
  font-size: 15px;
  margin-top: 14px;
  padding: 14px 18px;
}

.booking-estimate strong {
  font-size: 22px;
}

.booking-add-unit {
  margin-top: 10px;
}

.booking-error {
  margin: 10px 0 0;
}

.booking-error:empty {
  margin: 0;
  min-height: 0;
}

.booking-nav {
  background: var(--white);
  bottom: 0;
  margin-top: 16px;
  padding: 14px 0 22px;
  position: sticky;
  z-index: 2;
}

@media (max-width: 650px) {
  .booking-shell {
    padding: 22px 18px 0;
  }

  .booking-progress {
    padding-right: 48px;
  }

  .booking-shell h2 {
    font-size: 24px;
  }

  .booking-nav {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
}

/* Step 1 choices: sentence case rather than the uppercase field-label style, and a name column
   wide enough for "Entire property", which takes the full row. */
.booking-shell .booking-choice {
  color: var(--ink);
  font-size: 13px;
  font-weight: 400;
  grid-template-columns: auto minmax(44px, max-content) 1fr auto;
  letter-spacing: 0;
  text-transform: none;
}

.booking-choice strong {
  line-height: 1.1;
  white-space: nowrap;
}

.booking-choice span {
  color: var(--muted);
  font-size: 13px;
}

.booking-choice b {
  font-size: 13px;
}

.booking-choice-property {
  grid-column: 1 / -1;
}

@media (max-width: 650px) {
  .booking-shell .booking-choice {
    grid-template-columns: auto minmax(44px, max-content) 1fr;
  }

  /* The longer whole-property details go under its name instead of a narrow column beside it. */
  .booking-choice-property span,
  .booking-choice-property b {
    grid-column: 2 / -1;
  }
}

/* Check availability: a warm, gold-tinted ivory card with a fine gold border, light beside the photos. */
.search-strip {
  background: #fbf5e8;
  border: 1px solid rgba(184, 138, 42, .38);
  box-shadow: 0 24px 50px -30px rgba(125, 90, 19, .45);
}

.search-strip .eyebrow {
  color: var(--gold-deep);
}

.search-strip .search-heading h2 {
  color: var(--ink);
}

.search-strip .availability-search label {
  color: #6a5a3c;
}

.search-strip .availability-search input {
  background: var(--white);
  border-color: rgba(184, 138, 42, .34);
  color: var(--ink);
  height: 50px;
  min-height: 50px;
}

.search-strip .availability-search input:hover {
  border-color: rgba(184, 138, 42, .6);
}

.search-strip .availability-search input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 138, 42, .18);
}

.search-strip .availability-search .button {
  min-height: 50px;
}

.search-strip .search-feedback {
  color: var(--gold-deep);
}

/* Footer social links: round icon buttons under the tagline. */
.footer-social {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.footer-social a {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  color: rgba(255, 255, 255, .88);
  display: flex;
  height: 40px;
  justify-content: center;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  width: 40px;
}

.footer-social svg {
  fill: currentColor;
  height: 18px;
  width: 18px;
}

.footer-social .stroke-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.footer-social .stroke-icon .dot {
  fill: currentColor;
  stroke: none;
}

.footer-social a:active {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--iron-deep);
}

@media (hover: hover) {
  .footer-social a:hover {
    background: var(--gold-light);
    border-color: var(--gold-light);
    color: var(--iron-deep);
  }
}

/* Review step: what confirming agrees to. */
.booking-terms {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 12px 0 0;
}

.booking-terms a {
  color: var(--gold-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Footer, in order: brand on the left, social icons in the centre, links on the right, all on one
   line, then the copyright centred under the hairline. Below 1000px it all stacks on the centre line. */
.site-footer {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.site-footer .footer-social {
  justify-self: center;
  margin: 0;
}

.site-footer .footer-links {
  gap: 4px 22px;
  justify-content: flex-end;
  justify-self: end;
}

.site-footer .copyright {
  text-align: center;
}

@media (max-width: 1000px) {
  .site-footer {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: 18px;
    text-align: center;
  }

  .site-footer .footer-brand {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-self: center;
  }

  /* Links wrap in centred rows (an older phone rule stacked them one per line). */
  .site-footer .footer-links {
    display: flex;
    flex-direction: row;
    gap: 0 20px;
    justify-content: center;
    justify-self: center;
  }

  .site-footer .footer-links a {
    border-top: 0;
    padding: 10px 0;
  }
}

/* Narrow, short screens: the intro grows up from the bottom, so it keeps clear of the header and the
   "Skip the tour" link (at most header + 85px down); when space runs out it starts below them instead. */
@media (max-width: 700px) {
  .tour-intro {
    justify-content: safe flex-end;
    padding-top: calc(var(--header-h) + 92px);
  }
}

/* Too short for the scroll hint as well: it would sit below the fold. */
@media (max-width: 700px) and (max-height: 520px) {
  .tour-cue {
    display: none;
  }
}

/* Payment step: only the Family Bank Paybill card is offered. */
.payment-tabs.payment-single {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}

/* Confirmation: copy the booking reference in one tap. */
.confirmation-reference .copy-reference {
  align-self: center;
  margin-top: 14px;
  min-width: 170px;
}

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Popup when the chosen nights are already booked; opens above the booking dialog. */
.notice-dialog {
  max-width: 420px;
  padding: 30px 28px 26px;
  text-align: left;
  width: calc(100% - 32px);
}

.notice-dialog h2 {
  font-size: clamp(24px, 6vw, 30px);
  line-height: 1.15;
  margin: 6px 0 12px;
}

.notice-dialog .notice-text {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 8px;
}

.notice-dialog .notice-hint {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 22px;
}

.notice-dialog .button {
  width: 100%;
}