/* ===========================================================
   Aruba Ocean Views — Design System
   Luxury, editorial, restrained. Photography-led.
   =========================================================== */

:root {
  /* Palette */
  --color-white: #ffffff;
  --color-ink: #14211f;           /* near-black, warm */
  --color-navy: #0f2a3f;          /* deep ocean navy */
  --color-turquoise: #2fa9a1;     /* caribbean turquoise */
  --color-turquoise-light: #eaf5f3;
  --color-sand: #d9c4a3;          /* warm sand accent */
  --color-sand-light: #f6f1e8;
  --color-line: rgba(20, 33, 31, 0.12);

  /* Type */
  --font-serif: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  /* Rhythm */
  --container-max: 1240px;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;

  --transition: 400ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  letter-spacing: 0.01em;
}
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

@media (max-width: 640px) {
  .container { padding: 0 var(--space-sm); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 0.9em 2em;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.btn-light {
  color: var(--color-white);
  border-color: rgba(255,255,255,0.7);
}
.btn-light:hover { background: var(--color-white); color: var(--color-ink); }

.btn-dark {
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn-dark:hover { background: var(--color-ink); color: var(--color-white); }

.btn-fill {
  background: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
}
.btn-fill:hover { background: var(--color-turquoise); border-color: var(--color-turquoise); }

.link-arrow {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity var(--transition);
}
.link-arrow:hover { opacity: 0.6; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: var(--space-sm) 0;
  transition: background var(--transition), box-shadow var(--transition), padding var(--transition);
}
.site-header.is-transparent { background: transparent; }
.site-header.is-solid {
  background: rgba(255,255,255,0.98);
  box-shadow: 0 1px 0 var(--color-line);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.brand img { height: 40px; width: auto; }
.brand-word {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--color-white);
  transition: color var(--transition);
}
.site-header.is-solid .brand-word { color: var(--color-ink); }

.nav-primary {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.nav-primary a {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
  transition: color var(--transition), opacity var(--transition);
  opacity: 0.92;
}
.nav-primary a:hover { opacity: 1; }
.site-header.is-solid .nav-primary a { color: var(--color-ink); }
.nav-primary .btn {
  color: var(--color-white);
  border-color: rgba(255,255,255,0.7);
}
.site-header.is-solid .nav-primary .btn {
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  z-index: 110;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--color-white);
  margin: 5px 0;
  transition: background var(--transition);
}
.site-header.is-solid .nav-toggle span,
.site-header.nav-open .nav-toggle span { background: var(--color-ink); }

@media (max-width: 860px) {
  .nav-primary {
    position: fixed;
    inset: 0;
    background: var(--color-white);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    transform: translateY(-100%);
    transition: transform var(--transition);
  }
  .nav-primary a { color: var(--color-ink); font-size: 1rem; }
  .nav-primary .btn { color: var(--color-ink); border-color: var(--color-ink); }
  .site-header.nav-open .nav-primary { transform: translateY(0); }
  .nav-toggle { display: block; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--color-white);
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kenburns 18s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

/* Video hero variant: static poster <img> + <video>, both absolutely
   stacked. Poster shows by default (renders immediately, and is the
   permanent state for prefers-reduced-motion). JS adds .has-motion only
   when it has decided autoplay is appropriate, which swaps to the video
   and starts playback — see the "Hero video" block in main.js. */
.hero-media .hero-static-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: none;
}
.hero-media .hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.hero-media.has-motion .hero-static-poster { display: none; }
.hero-media.has-motion .hero-bg-video { display: block; }
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,20,25,0.35) 0%, rgba(10,20,25,0.08) 35%, rgba(10,20,25,0.55) 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-bottom: var(--space-xl);
  text-align: center;
}
.hero-title {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
  max-width: 16ch;
  margin: 0 auto;
}
.hero-sub {
  margin-top: var(--space-sm);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  letter-spacing: 0.03em;
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
  opacity: 0.95;
}
.hero-cta { margin-top: var(--space-md); }
.hero-scroll {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ---------- Section rhythm ---------- */
.section { padding: var(--space-xl) 0; }
.section-tight { padding: var(--space-lg) 0; }
.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-turquoise);
  margin-bottom: var(--space-sm);
}

/* ---------- Intro statement ---------- */
.intro {
  text-align: center;
}
.intro-media { margin-bottom: var(--space-lg); }
.intro-media img { width: 100%; height: 62vh; min-height: 380px; object-fit: cover; }
.intro-copy {
  max-width: 62ch;
  margin: 0 auto;
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.5;
  color: var(--color-navy);
}

/* ---------- Residences ---------- */
.residences-intro {
  text-align: center;
  max-width: 40ch;
  margin: 0 auto var(--space-lg);
}
.residences-intro h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }

.collection { margin-bottom: var(--space-xl); }
.collection-header {
  text-align: center;
  max-width: 50ch;
  margin: 0 auto var(--space-lg);
}
.collection-name {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-sand);
  background: var(--color-navy);
  display: inline-block;
  padding: 0.4em 1em;
  margin-bottom: var(--space-sm);
}
.collection-line {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  color: var(--color-navy);
}

.property-block {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
  min-height: 480px;
  margin-bottom: var(--space-md);
}
.property-block:nth-child(even) { direction: rtl; }
.property-block:nth-child(even) > * { direction: ltr; }
.property-media { overflow: hidden; }
.property-media img {
  width: 100%; height: 100%; object-fit: cover; min-height: 320px;
  transition: transform 900ms ease;
}
.property-block:hover .property-media img { transform: scale(1.04); }
.property-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-sand-light);
}
.property-copy .property-name {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}
.property-copy .property-place {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-turquoise);
}
.property-copy p.property-desc {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-ink);
  max-width: 42ch;
}
.property-meta {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(20,33,31,0.6);
}

@media (max-width: 860px) {
  .property-block { grid-template-columns: 1fr; min-height: auto; }
  .property-block:nth-child(even) { direction: ltr; }
  .property-media img { min-height: 280px; }
  .property-copy { padding: var(--space-md); }
}

.property-media { position: relative; }
.property-badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 1;
  background: rgba(20,33,31,0.82);
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4em 0.9em;
  border-radius: 3px;
}

/* ---------- Trust band ---------- */
.trust {
  background: var(--color-navy);
  color: var(--color-white);
  text-align: center;
}
.trust-rating {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
}
.trust-rating span { font-size: 0.4em; letter-spacing: 0.05em; opacity: 0.8; }
.trust-quotes {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
  text-align: left;
}
.trust-quote {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.6;
  border-top: 1px solid rgba(255,255,255,0.25);
  padding-top: var(--space-sm);
}
.trust-quote cite {
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* ---------- Why book direct ---------- */
.why-direct {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  text-align: center;
}
.why-direct h3 {
  font-size: 1.05rem;
  margin-bottom: var(--space-xs);
}
.why-direct p {
  font-size: 0.95rem;
  color: rgba(20,33,31,0.75);
  max-width: 32ch;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .why-direct { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* ---------- Taste of Aruba ---------- */
.taste {
  position: relative;
  height: 56vh;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-white);
  text-align: center;
}
.taste img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.taste::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(15, 42, 63, 0.45);
}
.taste-copy {
  position: relative; z-index: 1;
  max-width: 46ch;
  padding: 0 var(--space-md);
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

/* ---------- Closing CTA ---------- */
.closing-cta {
  position: relative;
  height: 80vh;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-white);
  text-align: center;
}
.closing-cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.closing-cta::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,20,25,0.15), rgba(10,20,25,0.55));
}
.closing-cta-copy { position: relative; z-index: 1; }
.closing-cta h2 {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.closing-cta p.sub {
  margin-top: var(--space-sm);
  font-size: 1rem;
  opacity: 0.9;
}
.closing-cta-actions {
  margin-top: var(--space-md);
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.closing-cta-actions .whatsapp-link {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.6);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-ink);
  color: rgba(255,255,255,0.75);
  padding: var(--space-lg) 0 var(--space-md);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-brand img { height: 34px; margin-bottom: var(--space-sm); }
.footer-brand p { max-width: 32ch; font-size: 0.9rem; opacity: 0.7; }
.footer-nav { display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-sm);
}
.footer-col li { margin-bottom: 0.5rem; }
.footer-col a { font-size: 0.9rem; opacity: 0.85; transition: opacity var(--transition); }
.footer-col a:hover { opacity: 1; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  font-size: 0.78rem;
  opacity: 0.6;
}
.footer-social { display: flex; gap: var(--space-sm); }

@media (max-width: 640px) {
  .footer-top { flex-direction: column; }
}

/* ---------- Fade-in on scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms ease, transform 900ms ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================================================
   Property pages
   =========================================================== */

/* ---------- Page hero (shorter than homepage hero) ---------- */
.page-hero {
  position: relative;
  height: 92vh;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-white);
  text-align: center;
}
.page-hero-media { position: absolute; inset: 0; z-index: 0; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 20s ease-in-out infinite alternate; }
.page-hero-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,20,25,0.45) 0%, rgba(10,20,25,0.15) 40%, rgba(10,20,25,0.55) 100%);
}
.page-hero-content { position: relative; z-index: 1; }
.page-hero-title {
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  max-width: 20ch;
  margin: 0 auto;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.page-hero-sub {
  margin-top: var(--space-sm);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.92;
  text-shadow: 0 1px 12px rgba(0,0,0,0.3);
}
.page-hero-actions {
  margin-top: var(--space-md);
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* Modifier: headline sits low in the lower third, bottom-only gradient.
   For bright, high-key hero images where a full scrim would muddy the shot
   and the top of the frame needs to stay clear (e.g. a split sky). */
.page-hero--bottom {
  height: 70vh;
  min-height: 460px;
  align-items: flex-end;
  padding-bottom: var(--space-xl);
}
.page-hero--bottom .page-hero-media img { object-position: center 42%; }
.page-hero--bottom .page-hero-media::after {
  background: linear-gradient(180deg, rgba(10,20,25,0) 0%, rgba(10,20,25,0) 45%, rgba(10,20,25,0.72) 100%);
}
@media (max-width: 640px) {
  .page-hero--bottom { height: 60vh; min-height: 400px; padding-bottom: var(--space-lg); }
  .page-hero--bottom .page-hero-media img { object-position: center 22%; }
}
.hero-render-tag {
  position: absolute;
  right: var(--space-md);
  bottom: var(--space-sm);
  z-index: 1;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.75);
  text-align: right;
  max-width: 46ch;
}

/* ---------- Story ---------- */
.story {
  max-width: 62ch;
  margin: 0 auto;
  text-align: center;
}
.story p {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.6;
  color: var(--color-navy);
}

/* ---------- Gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 220px;
  gap: 6px;
}
.gallery-grid a { display: block; overflow: hidden; width: 100%; height: 100%; }
.gallery-grid img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms ease;
}
.gallery-grid a:hover img { transform: scale(1.05); }
.gallery-grid .span-2 { grid-column: span 2; }
.gallery-grid .span-3 { grid-column: span 3; }
.gallery-grid .span-4 { grid-column: span 4; }
.gallery-grid .span-6 { grid-column: span 6; }
.gallery-grid .row-2 { grid-row: span 2; }

/* Figure-based tile: same grid sizing as a plain <a>, plus room for a
   visible render/caption tag. Used where images are architectural
   renders rather than photographs and must be labeled as such. */
.gallery-grid figure.gallery-item {
  position: relative;
  margin: 0;
  overflow: hidden;
}
.gallery-grid figure.gallery-item a { display: block; width: 100%; height: 100%; }
.render-tag {
  position: absolute;
  left: 0.6em;
  bottom: 0.6em;
  z-index: 1;
  background: rgba(10,20,25,0.65);
  color: var(--color-white);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 0.35em 0.7em;
  pointer-events: none;
}
/* Exempt from the mobile "always full-width" rule below — used for the
   lowest-resolution source image so it never gets stretched. */
.gallery-grid .small { grid-column: span 2; }

@media (max-width: 860px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery-grid .span-2, .gallery-grid .span-3, .gallery-grid .span-4, .gallery-grid .span-6 { grid-column: span 2; }
  .gallery-grid .row-2 { grid-row: span 1; }
  .gallery-grid .small { grid-column: span 1 !important; }
}

/* ---------- Square gallery (native-square source photos) ----------
   These source photos are ~790x790 crops with no higher-resolution originals,
   so the grid is designed around that ratio instead of forcing a 16:9/masonry
   crop. Two/three-up max — nothing runs full-viewport-width. */
.square-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.square-gallery .sq-item {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.square-gallery .sq-item.feature {
  grid-column: span 2;
  grid-row: span 2;
}
.square-gallery .sq-item a { display: block; width: 100%; height: 100%; }
.square-gallery .sq-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms ease;
}
.square-gallery .sq-item a:hover img { transform: scale(1.05); }

@media (max-width: 700px) {
  .square-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Section heading ---------- */
.section-heading {
  text-align: center;
  max-width: 44ch;
  margin: 0 auto var(--space-lg);
}
.section-heading h1,
.section-heading h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }

/* ---------- Widget embed (Explore Aruba / GetYourGuide) ---------- */
.widget-embed {
  width: 100%;
  min-height: 200px;
}
.widget-disclosure {
  font-size: 0.72rem;
  color: rgba(20,33,31,0.6);
  margin-top: var(--space-xs);
  text-align: left;
}
.featured-tour-card {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid var(--color-line);
  overflow: hidden;
}
.featured-tour-photo {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}
.featured-tour-card h3,
.featured-tour-card p {
  margin-left: var(--space-md);
  margin-right: var(--space-md);
}
.featured-tour-card h3 {
  font-size: 1.3rem;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}
.featured-tour-card p {
  color: rgba(20,33,31,0.8);
  line-height: 1.6;
  margin-bottom: var(--space-lg);
}

/* ---------- Plan / render figure (placeholder interior visuals) ---------- */
.plan-figure {
  max-width: 480px;
  margin: 0 auto var(--space-lg);
  text-align: center;
}
.plan-figure img {
  width: 100%;
  border: 1px solid var(--color-line);
}
.plan-figure figcaption {
  margin-top: var(--space-xs);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(20,33,31,0.55);
}

/* ---------- Specs ---------- */
.specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md) var(--space-lg);
  max-width: 900px;
  margin: 0 auto;
}
.spec-item dt {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-turquoise);
  margin-bottom: 0.3em;
}
.spec-item dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-ink);
}
@media (max-width: 640px) {
  .specs-grid { grid-template-columns: 1fr; }
}

/* ---------- Amenities ---------- */
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  max-width: 980px;
  margin: 0 auto;
}
.amenities-col h4 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-turquoise);
  margin-bottom: var(--space-sm);
}
.amenities-col ul li {
  padding: 0.5em 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.98rem;
}
@media (max-width: 640px) {
  .amenities-grid { grid-template-columns: 1fr; gap: var(--space-md); }
}
.amenities-note {
  max-width: 60ch;
  margin: var(--space-lg) auto 0;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(20,33,31,0.6);
}

/* ---------- Location ---------- */
.location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.location-copy p.lede {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--color-navy);
  margin-bottom: var(--space-md);
}
.building-dining p {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
}
.location-list li {
  padding: 0.6em 0;
  border-top: 1px solid var(--color-line);
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: 0.95rem;
}
.location-map {
  height: 340px;
  background: var(--color-sand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(20,33,31,0.5);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.location-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 860px) {
  .location-grid { grid-template-columns: 1fr; }
}

/* ---------- The Building (amenities + downstairs dining) ---------- */
.building-amenities-list {
  margin: var(--space-md) 0 var(--space-lg);
}
.building-amenities-list li {
  padding: 0.6em 0;
  border-top: 1px solid var(--color-line);
  font-size: 0.98rem;
}
.building-dining h4 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-turquoise);
  margin-bottom: var(--space-sm);
}
.building-photos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.building-photos img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.building-feature-photo {
  margin: var(--space-lg) 0 0;
}
.building-feature-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ---------- Reviews ---------- */
.reviews-band { background: var(--color-navy); color: var(--color-white); }
.reviews-rating {
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: var(--space-lg);
}
.reviews-rating span { font-size: 0.42em; opacity: 0.8; letter-spacing: 0.03em; }
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
}
.review-card {
  border-top: 1px solid rgba(255,255,255,0.25);
  padding-top: var(--space-sm);
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 1.6;
}
.review-card cite {
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* ---------- Booking ---------- */
.book-box {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid var(--color-line);
  padding: var(--space-lg) var(--space-md);
}
.book-microcopy {
  font-size: 0.95rem;
  color: rgba(20,33,31,0.75);
  margin-bottom: var(--space-md);
}
.book-calendar {
  width: 100%;
  margin-bottom: var(--space-lg);
}
.book-calendar .calendarWidget,
.book-calendar .calendarContent {
  width: 100%;
}
.book-embed {
  /* Smoobu drops an iframe in here. Sized so the calendar/rates widget
     has room to breathe; the iframe itself is told to fill the box so it
     inherits this container's responsiveness instead of using its own
     fixed width. */
  width: 100%;
  min-height: 420px;
  background: var(--color-sand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(20,33,31,0.55);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-align: center;
  padding: var(--space-md);
  overflow: hidden;
}
.book-embed > div {
  /* Smoobu's own container div (id="apartmentIframe…") — let it fill the
     flex parent instead of shrink-wrapping to its injected iframe. */
  width: 100%;
  height: 100%;
}
.book-embed iframe {
  width: 100% !important;
  max-width: 100% !important;
  height: 100%;
  min-height: 420px;
  border: 0;
  display: block;
}
@media (max-width: 640px) {
  .book-embed, .book-embed iframe { min-height: 640px; }
}
.book-support {
  margin-top: var(--space-md);
  font-size: 0.9rem;
}

/* ---------- Legal / prose pages ---------- */
.legal-copy {
  max-width: 68ch;
  margin: 0 auto;
}
.legal-copy > p { margin-bottom: var(--space-sm); color: rgba(20,33,31,0.85); line-height: 1.7; }
.legal-copy h3 {
  font-size: 1.1rem;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}
.legal-copy h3:first-of-type { margin-top: var(--space-md); }
.legal-disclaimer {
  background: var(--color-sand-light);
  border-left: 3px solid var(--color-turquoise);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(20,33,31,0.8);
  margin-bottom: var(--space-lg);
}

/* ---------- Inquiry form (Walishali) ---------- */
.inquiry-form {
  max-width: 560px;
  margin: 0 auto;
}
.inquiry-form .field { margin-bottom: var(--space-sm); }
.inquiry-form label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(20,33,31,0.65);
  margin-bottom: 0.4em;
}
.inquiry-form input,
.inquiry-form textarea {
  width: 100%;
  border: 1px solid var(--color-line);
  padding: 0.8em 1em;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  background: var(--color-white);
}
.inquiry-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}
@media (max-width: 560px) {
  .inquiry-form .field-row { grid-template-columns: 1fr; }
}
.inquiry-form .btn { border: 1px solid var(--color-navy); background: var(--color-navy); color: var(--color-white); width: 100%; padding: 1em; }
.inquiry-form .btn:hover { background: var(--color-turquoise); border-color: var(--color-turquoise); }
.inquiry-note {
  margin-top: var(--space-sm);
  font-size: 0.85rem;
  color: rgba(20,33,31,0.6);
  text-align: center;
}

/* ---------- Ribbon ---------- */
.ribbon {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5em 1em;
  border: 1px solid rgba(255,255,255,0.5);
}
.ribbon-dark {
  border-color: var(--color-line);
  color: rgba(20,33,31,0.7);
}

/* ---------- Split hero (Retreats collection) ----------
   Portrait hero images can't go full-bleed without destroying the shot, so this
   splits image and copy into two columns instead of stacking text over the photo.
   No scrim needed since text never sits on the image. */
.split-hero {
  display: flex;
  align-items: stretch;
  min-height: 90vh;
}
.split-hero-media {
  flex: 0 0 48%;
  max-width: 48%;
  overflow: hidden;
}
.split-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split-hero-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
  background: var(--color-sand-light);
  padding: var(--space-xl) var(--space-lg);
}
.split-hero-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-turquoise);
}
.split-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  color: var(--color-ink);
  max-width: 16ch;
}
.split-hero-sub {
  font-size: 1rem;
  color: rgba(20,33,31,0.75);
  max-width: 40ch;
}
.split-hero-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}

@media (max-width: 1023px) {
  .split-hero { flex-direction: column; min-height: 0; }
  .split-hero-media {
    flex: none;
    max-width: 100%;
    width: 100%;
    aspect-ratio: 4 / 5;
  }
  .split-hero-copy { padding: var(--space-lg) var(--space-md); }
}

/* ---------- Gallery lightbox ---------- */
/* Signals the gallery images are openable (they were already links). */
.gallery-grid a,
.square-gallery .sq-item a { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 20, 25, 0.94);
  padding: var(--space-md);
}
/* Must beat the display:flex above when the dialog is closed. */
.lightbox[hidden] { display: none; }

.lightbox-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(1400px, 92vw);
  max-height: 88vh;
}
.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox-btn {
  position: absolute;
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-white);
  line-height: 1;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity var(--transition);
  /* Keep a comfortable tap target regardless of glyph size. */
  min-width: 44px;
  min-height: 44px;
}
.lightbox-btn:hover { opacity: 1; }
.lightbox-btn:focus-visible {
  opacity: 1;
  outline: 2px solid var(--color-white);
  outline-offset: 4px;
}
.lightbox-btn[hidden] { display: none; }

.lightbox-close {
  top: var(--space-sm);
  right: var(--space-sm);
  font-size: 2.4rem;
}
.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 1.8rem;
  padding: 0;
  border-radius: 50%;
  /* Most gallery photos are bright, so the arrows need a scrim behind
     them at every breakpoint — not just on mobile — or they disappear
     against light skies, walls, sand. */
  background: rgba(10, 20, 25, 0.55);
}
.lightbox-prev:hover,
.lightbox-next:hover { background: rgba(10, 20, 25, 0.78); }
.lightbox-prev { left: var(--space-xs); }
.lightbox-next { right: var(--space-xs); }

.lightbox-counter {
  position: absolute;
  bottom: var(--space-sm);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .lightbox { padding: var(--space-sm); }
  .lightbox-img { max-height: 76vh; }
  .lightbox-close { font-size: 2rem; }
}

/* ---------- Progress video (click-to-play, never autoplays) ---------- */
.progress-video-block {
  max-width: 480px;
  margin: 0 auto;
}
.progress-video-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-ink);
  overflow: hidden;
  cursor: pointer;
}
.progress-video-frame img,
.progress-video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.progress-video-frame video { display: none; }
.progress-video-frame.is-playing img { display: none; }
.progress-video-frame.is-playing video { display: block; }

.progress-video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 20, 25, 0.18);
  border: 0;
  padding: 0;
  transition: background var(--transition);
}
.progress-video-play:hover,
.progress-video-play:focus-visible { background: rgba(10, 20, 25, 0.32); }
.progress-video-play:focus-visible { outline: 2px solid var(--color-white); outline-offset: -6px; }
.progress-video-frame.is-playing .progress-video-play { display: none; }

.progress-video-play-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}
.progress-video-play-icon::after {
  content: '';
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--color-ink);
  margin-left: 4px;
}

.progress-video-caption {
  margin-top: var(--space-sm);
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: rgba(20,33,31,0.7);
}