/* ---- variables.css ---- */
/* ==========================================================================
   Design tokens
   Change brand colours, fonts, spacing and motion here.
   ========================================================================== */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Marcellus";
  src: url("../fonts/marcellus-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Italianno";
  src: url("../fonts/italianno-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette */
  --color-cream: #F5F1E8;
  --color-soft-cream: #FAF8F3;
  --color-sea-blue: #91B6C8;
  --color-light-blue: #B8D2DD;
  --color-mist: #DCE8EC;
  --color-deep-blue: #183B55;
  --color-navy: #102F46;
  --color-midnight: #0B2236;
  --color-sand: #D8BE8B;
  --color-gold: #C9A45B;
  --color-gold-deep: #B48D43;
  --color-gold-soft: #E4CB93;
  --color-gold-text: #876727; /* gold that passes 4.5:1 on cream, for small text */
  --color-text: #2F3B42;
  --color-text-muted: #5E6B72;
  --color-line: rgb(24 59 85 / 0.14);
  --color-white: #FFFFFF;

  /* Typography */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  /* Everything except headings: reading text, buttons, labels, navigation, forms, footer.
     Marcellus has a single weight (400), so font-weight values on it have no effect. */
  --font-body: "Marcellus", Georgia, "Times New Roman", serif;
  /* Reading text (lead paragraphs, card descriptions) */
  --font-copy: var(--font-body);
  --font-script: "Italianno", "Cormorant Garamond", cursive;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem);
  --text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.3rem + 0.7vw, 2rem);
  --text-2xl: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  --text-3xl: clamp(2.5rem, 1.8rem + 3.2vw, 4.5rem);
  --text-script: clamp(2.8rem, 2.2rem + 2.4vw, 4.6rem);

  --tracking-caps: 0.22em;
  --tracking-wide: 0.12em;

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;
  --section-space: clamp(3.5rem, 2.4rem + 4vw, 6.5rem);
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 3rem);

  /* Layout */
  --container: 1440px;
  --header-height: 76px;

  /* Organic shapes — deliberately varied, never one mask everywhere */
  --shape-pebble: 55% 45% 58% 42% / 42% 52% 48% 58%;
  --shape-leaf: 40% 15% 35% 15%;
  --shape-soft: 60px 140px 60px 140px;
  --shape-arch: 999px 999px 48px 48px;
  --shape-wave: 38% 62% 28% 72% / 50% 30% 70% 50%;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;

  /* Depth */
  --shadow-soft: 0 18px 50px -24px rgb(16 47 70 / 0.35);
  --shadow-lift: 0 30px 70px -30px rgb(16 47 70 / 0.45);
  --shadow-panel: 0 24px 60px -28px rgb(16 47 70 / 0.4), 0 2px 8px rgb(16 47 70 / 0.05);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 300ms;
  --duration: 600ms;
  --duration-slow: 900ms;

  /* Layers */
  --z-base: 1;
  --z-raised: 10;
  --z-header: 100;
  --z-dock: 90;
  --z-overlay: 200;
}

/* ---- reset.css ---- */
/* Modern reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

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

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

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

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-weight: inherit;
  overflow-wrap: break-word;
}

[hidden] {
  display: none !important;
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- typography.css ---- */
/* Typography — editorial serif display, quiet sans body, script used sparingly */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  font-synthesis-weight: none;
  color: var(--color-text);
  background-color: var(--color-soft-cream);
}

.display-xl,
.display-lg,
.display-md {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-deep-blue);
  letter-spacing: -0.005em;
}

.display-xl {
  font-size: var(--text-3xl);
  line-height: 1.02;
}

.display-lg {
  font-size: var(--text-2xl);
  line-height: 1.08;
}

.display-md {
  font-size: var(--text-xl);
  line-height: 1.15;
}

.display-xl,
.display-lg,
.display-md {
  text-wrap: balance;
}

/* Second line of a headline: italic, set on its own line */
.display-xl em,
.display-lg em,
.display-md em {
  display: block;
  font-style: italic;
  font-weight: 400;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-gold-text);
}

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

.lead {
  font-family: var(--font-copy);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.75;
  font-weight: 400;
  color: var(--color-text-muted);
  max-width: 34em;
  text-wrap: pretty;
}

.script {
  font-family: var(--font-script);
  font-size: var(--text-script);
  font-weight: 400;
  line-height: 0.85;
  color: var(--color-gold);
}

.caps {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

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

::selection {
  background: var(--color-light-blue);
  color: var(--color-navy);
}

/* ---- layout.css ---- */
/* Layout primitives: containers, section rhythm, curved transitions, decorative layers */

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

body {
  overflow-x: clip;
}

.is-scroll-locked,
.is-scroll-locked body {
  overflow: hidden;
}

main {
  display: block;
}

.section {
  --section-bg: var(--color-soft-cream);
  position: relative;
  padding-block: var(--section-space);
  background-color: var(--section-bg);
  isolation: isolate;
}

/* ---------- Curved section transitions ----------
   Each section after the first grows an organic edge in its own colour
   into the section above, so the page flows like a shoreline. */
.section + .section::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: calc(100% - 1px);
  height: clamp(36px, 6vw, 110px);
  background-color: var(--section-bg);
  -webkit-mask: url("../assets/patterns/wave-edge.svg") center bottom / 100% 100% no-repeat;
  mask: url("../assets/patterns/wave-edge.svg") center bottom / 100% 100% no-repeat;
  transition: background-color var(--duration-slow) var(--ease-out);
  pointer-events: none;
  z-index: 2;
}

/* Mirror every other edge so neighbouring transitions don't repeat */
.section:nth-of-type(even)::before {
  transform: scaleX(-1);
}

/* ---------- Section headings ---------- */
.section-heading {
  display: grid;
  gap: 1.1rem;
  justify-items: start;
}

/* ---------- Decorative layers (brand elements, always low opacity) ---------- */
.deco-stars {
  position: absolute;
  pointer-events: none;
  background-color: var(--star-color, var(--color-gold-soft));
  -webkit-mask: url("../assets/patterns/stars.svg") center / 520px auto repeat;
  mask: url("../assets/patterns/stars.svg") center / 520px auto repeat;
}

.sparkle {
  position: absolute;
  pointer-events: none;
}

/* ---------- Organic image masks ---------- */
.shape-leaf {
  border-radius: var(--shape-leaf);
}

.shape-soft {
  border-radius: var(--shape-soft);
}

.shape-pebble {
  border-radius: var(--shape-pebble);
}

.shape-arch {
  border-radius: var(--shape-arch);
}

.shape-wave {
  border-radius: var(--shape-wave);
}

/* ---- components.css ---- */
/* Reusable components: icons, buttons, header & navigation, booking controls, dock, modal */

/* ---------- Icons (SVG masks so they inherit currentColor) ---------- */
.icon {
  --size: 1em;
  display: inline-block;
  flex: none;
  width: var(--size);
  height: var(--size);
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.icon--arrow { --icon: url("../assets/icons/ui-arrow-right.svg"); --size: 1.05em; }
.icon--chevron-down { --icon: url("../assets/icons/ui-chevron.svg"); rotate: 90deg; --size: 0.85em; }
.icon--calendar { --icon: url("../assets/icons/ui-calendar.svg"); }
.icon--guests { --icon: url("../assets/icons/ui-guests.svg"); }
.icon--close { --icon: url("../assets/icons/ui-close.svg"); }
.icon--minus { --icon: url("../assets/icons/ui-minus.svg"); }
.icon--plus { --icon: url("../assets/icons/ui-plus.svg"); }
.icon--instagram { --icon: url("../assets/icons/ui-instagram.svg"); }
.icon--facebook { --icon: url("../assets/icons/ui-facebook.svg"); }
.icon--youtube { --icon: url("../assets/icons/ui-youtube.svg"); }
.icon--line { --icon: url("../assets/icons/ui-line.svg"); }
.icon--chevron { --icon: url("../assets/icons/ui-chevron.svg"); }
.icon--bed { --icon: url("../assets/icons/ui-bed.svg"); }
.icon--waves { --icon: url("../assets/icons/ui-waves.svg"); }
.icon--pool { --icon: url("../assets/icons/ui-pool.svg"); }
.icon--area { --icon: url("../assets/icons/ui-area.svg"); }
.icon--beach { --icon: url("../assets/icons/ui-beach.svg"); }
.icon--temple { --icon: url("../assets/icons/ui-temple.svg"); }
.icon--town { --icon: url("../assets/icons/ui-town.svg"); }
.icon--plane { --icon: url("../assets/icons/ui-plane.svg"); }
.icon--download { --icon: url("../assets/icons/ui-download.svg"); }
.icon--play { --icon: url("../assets/icons/ui-play.svg"); }
.icon--flip { scale: -1 1; }

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: calc(var(--z-overlay) + 1);
  padding: 0.75rem 1.25rem;
  background: var(--color-navy);
  color: var(--color-soft-cream);
  border-radius: var(--radius-sm);
  translate: 0 -200%;
  transition: translate var(--duration-fast) var(--ease-out);
}

.skip-link:focus-visible {
  translate: 0 0;
}

/* ---------- Focus ---------- */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--color-deep-blue);
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  min-height: 3.25rem;
  padding: 0.95rem 1.9rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--btn-fg);
  background-color: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 2px;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.btn .icon--arrow {
  transition: translate var(--duration-fast) var(--ease-out);
}

.btn:hover .icon--arrow,
.btn:focus-visible .icon--arrow {
  translate: 4px 0;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  --btn-bg: var(--color-gold);
  --btn-fg: var(--color-navy);
  --btn-border: var(--color-gold);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  --btn-bg: var(--color-gold-deep);
  --btn-border: var(--color-gold-deep);
  --btn-fg: var(--color-midnight);
}

.btn--secondary {
  --btn-bg: var(--color-deep-blue);
  --btn-fg: var(--color-soft-cream);
  --btn-border: var(--color-deep-blue);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  --btn-bg: var(--color-navy);
}

.btn--outline {
  --btn-border: rgb(24 59 85 / 0.35);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  --btn-bg: var(--color-deep-blue);
  --btn-fg: var(--color-soft-cream);
  --btn-border: var(--color-deep-blue);
}

.btn--text {
  min-height: 2.75rem;
  padding: 0.5rem 0;
  position: relative;
}

.btn--text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 1.8em;
  bottom: 0.45rem;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  transform-origin: left;
  transition: transform var(--duration) var(--ease-out), opacity var(--duration-fast);
}

.btn--text:hover::after,
.btn--text:focus-visible::after {
  opacity: 0.9;
  transform: scaleX(1.06);
}

.btn--gold {
  --btn-fg: var(--color-gold-text);
}

/* Outline button for use over photography */
.btn--ghost {
  --btn-fg: var(--color-soft-cream);
  --btn-border: rgb(250 248 243 / 0.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  --btn-bg: var(--color-soft-cream);
  --btn-fg: var(--color-navy);
  --btn-border: var(--color-soft-cream);
}

.btn--sm {
  min-height: 2.5rem;
  padding: 0.65rem 1.25rem;
  font-size: 0.7rem;
}

.btn--play {
  --btn-fg: var(--color-soft-cream);
  padding: 0.5rem 0;
  gap: 1rem;
}

.btn__play {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid rgb(250 248 243 / 0.65);
  border-radius: 50%;
  transition: background-color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out);
}

.btn__play::before {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  margin-left: 0.2rem;
  background-color: currentColor;
  -webkit-mask: url("../assets/icons/ui-play.svg") center / contain no-repeat;
  mask: url("../assets/icons/ui-play.svg") center / contain no-repeat;
}

.btn__play::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgb(250 248 243 / 0.25);
  border-radius: 50%;
  animation: pulse-ring 3.2s var(--ease-out) infinite;
}

.btn--play:hover .btn__play,
.btn--play:focus-visible .btn__play {
  background-color: rgb(250 248 243 / 0.16);
  border-color: var(--color-soft-cream);
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  color: var(--color-deep-blue);
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast);
}

.icon-button--sm {
  width: 2.75rem;
  height: 2.75rem;
}

.icon-button--outline {
  border: 1px solid rgb(24 59 85 / 0.25);
}

.icon-button--outline:hover,
.icon-button--outline:focus-visible {
  background-color: var(--color-deep-blue);
  border-color: var(--color-deep-blue);
  color: var(--color-soft-cream);
}

.icon-button--light {
  color: var(--color-soft-cream);
  border: 1px solid rgb(250 248 243 / 0.4);
}

.icon-button--light:hover,
.icon-button--light:focus-visible {
  background: rgb(250 248 243 / 0.15);
}

/* ---------- Header ---------- */
.site-header {
  --header-fg: var(--color-soft-cream);
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  color: var(--header-fg);
  transition:
    background-color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}

.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgb(250 248 243 / 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  opacity: 0;
  transition: opacity var(--duration) var(--ease-out);
}

.site-header.is-scrolled,
.site-header.is-menu-open {
  --header-fg: var(--color-deep-blue);
  box-shadow: 0 1px 0 var(--color-line);
}

.site-header.is-scrolled::after,
.site-header.is-menu-open::after {
  opacity: 1;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--header-height);
}

/* Stacked logo (monogram over wordmark): sized by height to sit inside the header */
.site-header__logo {
  --logo-h: clamp(48px, 4vw + 30px, 64px);
  position: relative;
  display: block;
  height: var(--logo-h);
  width: calc(var(--logo-h) * 912 / 551);
  flex: none;
}

.logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity var(--duration) var(--ease-out);
}

.logo--dark,
.is-scrolled .logo--light,
.is-menu-open .logo--light {
  opacity: 0;
}

.is-scrolled .logo--dark,
.is-menu-open .logo--dark {
  opacity: 1;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.site-header__book {
  display: none;
}

/* Reservations line — hidden on small screens where the bar is already tight */
.site-header__tel {
  display: none;
  margin-right: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: inherit;
  opacity: 0.75;
  transition: opacity var(--duration) var(--ease-out);
}

.site-header__tel:hover,
.site-header__tel:focus-visible {
  opacity: 1;
}

/* Language selector */
.lang-select {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.lang-select::after {
  content: "";
  position: absolute;
  right: 0.55rem;
  width: 0.55rem;
  height: 0.55rem;
  background-color: currentColor;
  -webkit-mask: url("../assets/icons/ui-chevron.svg") center / contain no-repeat;
  mask: url("../assets/icons/ui-chevron.svg") center / contain no-repeat;
  rotate: 90deg;
  pointer-events: none;
}

.lang-select__control {
  appearance: none;
  min-height: 2.75rem;
  padding: 0.5rem 1.6rem 0.5rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.lang-select__control option {
  color: var(--color-text);
}

/* Hamburger */
.nav-toggle {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.5rem;
  height: 1px;
  background-color: currentColor;
  transition: transform var(--duration) var(--ease-out), opacity var(--duration-fast);
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before { transform: translateY(-7px); }
.nav-toggle__bars::after { transform: translateY(7px); width: 1rem; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background-color: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: rotate(-45deg); width: 1.5rem; }

/* Main navigation in the header bar: wide screens only (see responsive.css) */
.primary-nav {
  display: none;
}

.primary-nav__link {
  position: relative;
  display: inline-block;
}

.primary-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration) var(--ease-out);
}

.primary-nav__link:hover::after,
.primary-nav__link:focus-visible::after,
.primary-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ☰ menu: a full-screen panel under the header, on every screen size */
.menu-panel {
  position: fixed;
  inset: var(--header-height) 0 0;
  padding-block: 2.5rem 7rem;
  background-color: var(--color-soft-cream);
  color: var(--color-deep-blue);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  translate: 0 -12px;
  transition:
    opacity var(--duration) var(--ease-out),
    translate var(--duration) var(--ease-out),
    visibility 0s linear var(--duration);
}

.menu-panel.is-open {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: 0s;
}

.menu-panel__inner {
  display: grid;
  gap: 2rem;
}

.menu-panel__list {
  display: grid;
  gap: 0.25rem;
}

/* The second group sits under a fine gold rule */
.menu-panel__list--more {
  padding-top: 1.75rem;
  border-top: 1px solid rgb(201 164 91 / 0.4);
}

.menu-panel__link {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0;
  font-family: var(--font-body);
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.7rem);
  line-height: 1.15;
}

.menu-panel__list--more .menu-panel__link {
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
}

.menu-panel__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.3rem;
  height: 1px;
  background-color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration) var(--ease-out);
}

a.menu-panel__link:hover::after,
a.menu-panel__link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Menu items whose page does not exist yet: plain text, quietly dimmed */
.primary-nav__link.is-pending,
.menu-panel__link.is-pending {
  cursor: default;
  opacity: 0.55;
}

.primary-nav__link.is-pending::after {
  display: none;
}

/* ---------- Booking panel ---------- */
.booking-panel {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  background-color: var(--color-soft-cream);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
}

.booking-field {
  position: relative;
  display: grid;
  gap: 0.35rem;
}

.booking-field__label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.booking-field__label .icon {
  --size: 1rem;
  color: var(--color-gold-deep);
}

.booking-field__control {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.6rem 0.2rem;
  font-size: 0.95rem;
  color: var(--color-deep-blue);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.booking-field__control:hover,
.booking-field__control:focus-visible {
  border-bottom-color: var(--color-gold);
}

.booking-field__control[type="date"] {
  position: relative;
}

/* The whole field opens the native picker; the label carries the calendar icon */
.booking-field__control::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  opacity: 0;
  cursor: pointer;
}

.booking-field__control[aria-invalid="true"] {
  border-bottom-color: #A5483A;
}

.booking-field__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  text-align: left;
}

.guests-popover {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 0;
  right: 0;
  z-index: var(--z-raised);
  display: grid;
  gap: 0.9rem;
  min-width: 15rem;
  padding: 1.25rem;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
}

.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.stepper__label {
  font-size: 0.9rem;
  color: var(--color-deep-blue);
}

.stepper__controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.stepper__button {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  color: var(--color-deep-blue);
  transition: border-color var(--duration-fast), background-color var(--duration-fast);
}

.stepper__button:hover:not(:disabled) {
  border-color: var(--color-gold);
  background-color: var(--color-cream);
}

.stepper__button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.stepper__value {
  min-width: 1.5ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.guests-popover__done {
  justify-self: end;
  min-height: 2.25rem;
}

.booking-panel__submit {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
}

.booking-panel__button {
  width: 100%;
}

.booking-dock__note,
.finale__note {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.booking-panel__error {
  font-size: 0.85rem;
  color: #A5483A;
}

.booking-panel__error:empty {
  display: none;
}

.booking-panel__sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.booking-panel__sheet-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--color-deep-blue);
}

/* ---------- Mobile booking dock ---------- */
.booking-dock {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--z-dock);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
  background-color: rgb(250 248 243 / 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 -10px 30px -18px rgb(16 47 70 / 0.35);
  translate: 0 110%;
  transition: translate var(--duration) var(--ease-out);
}

.booking-dock.is-visible {
  translate: 0 0;
}

.booking-dock__button {
  flex: 1 1 auto;
  max-width: 16rem;
  padding-inline: 1.25rem;
  white-space: nowrap;
}

/* ---------- Carousel / swipe indicators ---------- */
.swipe-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.swipe-dots span {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.25;
  transition: opacity var(--duration-fast), width var(--duration) var(--ease-out), border-radius var(--duration);
}

.swipe-dots span.is-active {
  width: 1.5rem;
  border-radius: 1rem;
  opacity: 0.8;
}

/* ---------- Video modal ---------- */
.video-modal {
  width: min(100% - 2rem, 1100px);
  margin: auto;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.video-modal::backdrop {
  background: rgb(11 34 54 / 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.video-modal[open] {
  animation: modal-in var(--duration) var(--ease-out);
}

.video-modal__inner {
  position: relative;
}

.video-modal__close {
  position: absolute;
  top: -3.75rem;
  right: 0;
}

.video-modal__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-midnight);
}

.video-modal__frame img,
.video-modal__frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-modal__frame img {
  opacity: 0.45;
}

.video-modal__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  text-align: center;
  color: var(--color-soft-cream);
}

/* ---------- Social links ---------- */
.social-list {
  display: flex;
  gap: 0.6rem;
}

.social-link {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  color: var(--color-deep-blue);
  transition: background-color var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}

.social-link .icon {
  --size: 1.05rem;
}

.social-link:hover,
.social-link:focus-visible {
  background-color: var(--color-deep-blue);
  border-color: var(--color-deep-blue);
  color: var(--color-soft-cream);
}

/* ---------- Breadcrumb (sub pages) ---------- */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.5rem;
  opacity: 0.5;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--color-gold-soft);
}

/* ---- animations.css ---- */
/* Motion: slow, quiet, premium. Everything here is disabled for reduced-motion users. */

@keyframes pulse-ring {
  0% { transform: scale(0.9); opacity: 0.8; }
  70%, 100% { transform: scale(1.35); opacity: 0; }
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes twinkle {
  0%, 100% { opacity: var(--twinkle-min, 0.25); }
  50% { opacity: var(--twinkle-max, 0.7); }
}

@keyframes sparkle-breathe {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.9; }
  50% { transform: scale(0.82) rotate(12deg); opacity: 0.55; }
}

@keyframes hero-rise {
  from { opacity: 0.01; translate: 0 24px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes hero-settle {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}

/* ---------- Scroll reveal ----------
   Content stays visible when JavaScript is unavailable (scripting media query). */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    translate: 0 28px;
    transition:
      opacity var(--duration-slow) var(--ease-out),
      translate var(--duration-slow) var(--ease-out);
  }

  [data-reveal="image"] {
    translate: none;
    overflow: hidden;
  }

  [data-reveal="image"] img {
    scale: 1.08;
    transition: scale 1.6s var(--ease-out);
  }

  [data-reveal].is-revealed {
    opacity: 1;
    translate: 0 0;
  }

  [data-reveal="image"].is-revealed img {
    scale: 1;
  }

  [data-reveal-delay="1"] { transition-delay: 120ms; }
  [data-reveal-delay="2"] { transition-delay: 240ms; }
  [data-reveal-delay="3"] { transition-delay: 360ms; }
  [data-reveal-delay="4"] { transition-delay: 480ms; }
  [data-reveal-delay="5"] { transition-delay: 600ms; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Slow, gentle zoom-out on the photograph in view */
  .hero__image.is-active,
  .page-hero__slide.is-active {
    animation: hero-settle 7s var(--ease-out) both;
  }

  /* Hero copy animates with CSS alone so it never waits for JavaScript (keeps LCP fast) */
  .hero__content > *,
  .page-hero__content > * {
    animation: hero-rise var(--duration-slow) var(--ease-out) both;
  }

  .hero__content > :nth-child(2),
  .page-hero__content > :nth-child(2) { animation-delay: 120ms; }
  .hero__content > :nth-child(3),
  .page-hero__content > :nth-child(3) { animation-delay: 240ms; }
  .hero__content > :nth-child(4) { animation-delay: 360ms; }

  .hero__aside img {
    animation: sparkle-breathe 6s var(--ease-in-out) infinite;
  }

  .finale__stars--far {
    --twinkle-min: 0.2;
    --twinkle-max: 0.5;
    animation: twinkle 7s var(--ease-in-out) infinite;
  }

  .finale__stars--near {
    --twinkle-min: 0.15;
    --twinkle-max: 0.6;
    animation: twinkle 5s var(--ease-in-out) infinite -2s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn__play::after {
    display: none;
  }
}

/* ---- main.css ---- */
/* ==========================================================================
   Page sections (mobile-first). Larger breakpoints live in responsive.css.
   Layout follows the Ex-03 reference: compact bands, split columns.
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: max(620px, 100svh);
  padding-block: calc(var(--header-height) + 2rem) clamp(7rem, 16vh, 10rem);
  color: var(--color-soft-cream);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: -8% 0;
  z-index: -3;
  overflow: hidden;
  background: var(--color-navy);
}

/* Hero slideshow: stacked photographs that cross-fade */
.hero__slides {
  position: absolute;
  inset: 0;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 34% 60%;
  opacity: 0;
  transition: opacity 1.6s var(--ease-in-out);
}

.hero__image.is-active {
  opacity: 1;
}

/* Per-photo focal points on small screens */
.hero__image--pavilion { object-position: 30% 55%; }
.hero__image--terrace { object-position: 70% 55%; }
.hero__image--bay { object-position: 45% 55%; }

/* Portrait phones get photographs cropped to a tall frame (see <picture> sources),
   so the hero shows the whole frame: no parallax overscan and no off-centre focal point */
@media (max-width: 767px) and (orientation: portrait) {
  .hero__media {
    inset: 0;
  }

  .hero__slides {
    translate: none !important; /* overrides the inline parallax offset */
  }

  .hero__image.hero__image {
    object-position: 50% 50%;
  }
}

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgb(11 34 54 / 0.5) 0%, rgb(11 34 54 / 0) 26%),
    linear-gradient(0deg, rgb(11 34 54 / 0.78) 0%, rgb(11 34 54 / 0.4) 55%, rgb(11 34 54 / 0) 85%);
}

/* Organic cream edge where the hero meets the page, in the colour of the Why band below */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: clamp(44px, 7vw, 120px);
  background-color: var(--color-cream);
  -webkit-mask: url("../assets/patterns/wave-edge.svg") center bottom / 100% 100% no-repeat;
  mask: url("../assets/patterns/wave-edge.svg") center bottom / 100% 100% no-repeat;
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}

.hero__content .eyebrow {
  font-size: 0.66rem;
}

.hero__actions .btn {
  font-size: 0.64rem;
}

.hero__title {
  font-size: clamp(2rem, 1.5rem + 2.3vw, 3.5rem);
  color: var(--color-soft-cream);
  text-shadow: 0 2px 30px rgb(11 34 54 / 0.35);
}

.hero__title em {
  padding-left: 0.35em;
}

.hero__lead {
  max-width: 28rem;
  font-family: var(--font-copy);
  font-size: clamp(0.94rem, 0.9rem + 0.15vw, 1rem);
  line-height: 1.7;
  color: rgb(250 248 243 / 0.92);
  text-wrap: balance;
}

.hero__lead br {
  display: none;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 0.5rem;
}

/* Vertical brand line on the right edge of the hero (desktop only) */
.hero__aside {
  display: none;
}

/* ---------- Booking (mobile: bottom sheet opened from the dock) ---------- */
.booking {
  position: relative;
  z-index: var(--z-overlay);
  height: 0;
}

.booking__backdrop {
  position: fixed;
  inset: 0;
  background: rgb(11 34 54 / 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.booking-panel {
  position: fixed;
  inset: auto 0 0;
  max-height: 92svh;
  overflow-y: auto;
  padding: 1.5rem var(--gutter) calc(1.75rem + env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  translate: 0 105%;
  visibility: hidden;
  transition:
    translate var(--duration) var(--ease-out),
    visibility 0s linear var(--duration);
}

.booking-panel.is-open {
  translate: 0 0;
  visibility: visible;
  transition-delay: 0s;
}

.booking-panel .guests-popover {
  position: static;
  margin-top: 0.75rem;
  box-shadow: none;
  border: 1px solid var(--color-line);
}

.booking__note {
  display: none;
}

/* ---------- Our villas ---------- */
.villas {
  padding-top: clamp(3.5rem, 7vw, 6.5rem);
  overflow-x: clip;
}

.villas__layout {
  display: grid;
  gap: 2.5rem;
}

/* Heading, eyebrow and introduction centred above the carousel */
.villas__intro {
  display: grid;
  gap: 1.25rem;
  justify-items: center;
  text-align: center;
}

.villas__intro .section-heading {
  justify-items: center;
}

.villas__intro .lead {
  max-width: 58rem;
}

.location .display-lg span,
.finale__title span {
  display: block;
}

/* Headings that sit in a narrow intro column */
.villas__intro .display-lg,
.experiences__intro .display-lg,
.art-of__intro .display-lg,
.daylight__intro .display-lg {
  font-size: var(--text-2xl);
}

/* Prev · View all · Next, centred under the cards */
.villas__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.villa-carousel {
  --card-w: 82%;
  --next-x: 24%;
  --next-s: 0.88;
  --next-o: 0.9;
  --after-x: 40%;
  --after-s: 0.76;
  --after-o: 0;
  --prev-x: -30%;
  --prev-s: 0.88;
  --prev-o: 0;
  position: relative;
}

.villa-carousel__stage {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: start;
  padding-block: 1.5rem;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.villa-carousel__stage.is-dragging {
  cursor: grabbing;
}

/* Soft ivory card: rounded, framed by a fine white edge and a deep, diffused shadow */
.villa-card {
  grid-area: 1 / 1;
  width: var(--card-w);
  padding: 5px;
  background: #FBF8F2;
  border: 1px solid rgb(255 255 255 / 0.9);
  border-radius: 26px;
  box-shadow:
    0 40px 70px -40px rgb(16 47 70 / 0.35),
    0 10px 24px -12px rgb(16 47 70 / 0.12);
  transform-origin: center;
  transition:
    transform var(--duration-slow) var(--ease-out),
    opacity var(--duration-slow) var(--ease-out);
}

.villa-card[data-pos="active"] {
  z-index: 5;
  transform: translateX(var(--drag, 0px));
}

.is-dragging .villa-card[data-pos="active"] {
  transition: none;
}

.villa-card[data-pos="next"] {
  z-index: 4;
  transform: translateX(var(--next-x)) scale(var(--next-s));
  opacity: var(--next-o);
}

.villa-card[data-pos="after"] {
  z-index: 3;
  transform: translateX(var(--after-x)) scale(var(--after-s));
  opacity: var(--after-o);
}

.villa-card[data-pos="prev"] {
  z-index: 4;
  transform: translateX(var(--prev-x)) scale(var(--prev-s));
  opacity: var(--prev-o);
}

/* Outermost card on the left; only shown where the layout has room (desktop) */
.villa-card[data-pos="before"] {
  z-index: 3;
  transform: translateX(var(--before-x, -40%)) scale(var(--before-s, 0.76));
  opacity: var(--before-o, 0);
}

.villa-card[data-pos="hidden"] {
  z-index: 1;
  transform: translateX(var(--after-x)) scale(var(--after-s));
  opacity: 0;
  pointer-events: none;
}

.villa-card__media {
  position: relative;
  aspect-ratio: 16 / 9.5;
  overflow: hidden;
  border-radius: 21px 21px 4px 4px;
  background: var(--color-mist);
}

.villa-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: scale 1.6s var(--ease-out), filter var(--duration-slow) var(--ease-out);
}

/* Background villas take a light ivory veil */
.villa-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(251 248 242 / 0.28);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.villa-card:not([data-pos="active"]) .villa-card__media::after {
  opacity: 1;
}

.villa-card[data-pos="active"]:hover .villa-card__media img {
  scale: 1.03;
}

/* Placeholder until photography is supplied */
.villa-card__media--placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.6rem;
  background:
    radial-gradient(circle at 30% 25%, rgb(255 255 255 / 0.85), transparent 55%),
    linear-gradient(160deg, var(--color-mist), var(--color-light-blue));
}

.villa-card__media--placeholder .villa-card__placeholder-icon {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.villa-card__placeholder-note {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-deep-blue);
  opacity: 0.7;
}

.villa-card--sky img { object-position: 62% 50%; }
.villa-card--two-bed img { object-position: 30% 50%; }
.villa-card--duplex img { object-position: 58% 50%; }
.villa-card--three-bed img { object-position: 30% 50%; }

.villa-card__body {
  display: grid;
  gap: 0.5rem;
  padding: 1.25rem 1.25rem 1.2rem;
}

.villa-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.15rem + 0.5vw, 1.65rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-navy);
  text-wrap: balance;
}

.villa-card:not([data-pos="active"]) .villa-card__title {
  font-size: clamp(1.15rem, 1rem + 0.4vw, 1.35rem);
}

/* Keep background titles inside the part of the card left uncovered */
.villa-card[data-pos="next"] .villa-card__body { padding-left: var(--next-inset, 1.25rem); }
.villa-card[data-pos="after"] .villa-card__body { padding-left: var(--after-inset, 1.25rem); }
.villa-card[data-pos="prev"] .villa-card__body { padding-right: var(--prev-inset, 1.25rem); }
.villa-card[data-pos="before"] .villa-card__body { padding-right: var(--before-inset, 1.25rem); }

.villa-card__text {
  font-family: var(--font-copy);
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Highlights: gold label, then the features separated by middle dots */
.villa-card__highlights {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-text);
}

.villa-card__highlights-label {
  margin-right: 0.35rem;
  font-size: 0.7rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.villa-card__footer {
  display: flex;
  margin-top: 0.5rem;
}

/* Only the villa in front shows its details */
.villa-card:not([data-pos="active"]) .villa-card__text,
.villa-card:not([data-pos="active"]) .villa-card__features,
.villa-card:not([data-pos="active"]) .villa-card__highlights,
.villa-card:not([data-pos="active"]) .villa-card__footer {
  display: none;
}

/* Feature line: icon + label, separated by fine vertical rules */
.villa-card__features {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.villa-card__features li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.villa-card__features li:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 1.1rem;
  margin-inline: 0.9rem;
  background: rgb(135 103 39 / 0.35);
}

.villa-card__features .icon {
  --size: 1.2rem;
  color: var(--color-gold-text);
}

/* Phones: size and guests on their own lines, without the divider */
@media (max-width: 767px) {
  .villa-card__features {
    display: grid;
    gap: 0.4rem;
  }

  .villa-card__features li:not(:last-child)::after {
    content: none;
  }
}

.villa-card__link {
  --btn-fg: var(--color-gold-text);
  --btn-border: rgb(135 103 39 / 0.55);
  border-radius: 6px;
}

.villa-card__link:hover,
.villa-card__link:focus-visible {
  --btn-bg: var(--color-gold-text);
  --btn-fg: var(--color-soft-cream);
  --btn-border: var(--color-gold-text);
}

/* Gold-brown round arrows beside the intro */
.villas__controls .icon-button--outline {
  color: var(--color-gold-text);
  border-color: rgb(135 103 39 / 0.5);
}

.villas__controls .icon-button--outline:hover,
.villas__controls .icon-button--outline:focus-visible {
  background: var(--color-gold-text);
  border-color: var(--color-gold-text);
  color: var(--color-soft-cream);
}

.villa-carousel__dots {
  color: var(--color-deep-blue);
}

/* ---------- Why The Little Shore ---------- */
.why {
  --section-bg: var(--color-cream);
  /* Extra room at the bottom for the wave edge of the next section (same height as that edge) */
  padding-block: clamp(3rem, 5vw, 4.5rem) calc(clamp(3rem, 5vw, 4.5rem) + clamp(36px, 6vw, 110px));
}

/* Sea-reflection brand texture, faded into the band. A tall crop of the original,
   so it fills the band without being stretched (stretching blurred it) */
.why::after {
  content: "";
  position: absolute;
  /* Phones: a patch in the top-right corner, sized so the texture is not enlarged */
  inset: 0 0 auto 20%;
  height: min(120vw, 100%);
  z-index: -1;
  background: url("../assets/images/common/sea-reflection-texture-tall-600.webp") right top / cover no-repeat;
  opacity: 0.34;
  -webkit-mask-image: radial-gradient(ellipse at top right, #000 35%, transparent 75%);
  mask-image: radial-gradient(ellipse at top right, #000 35%, transparent 75%);
  pointer-events: none;
}

/* Centred: heading on the first row, four icons with text on the second */
.why__layout {
  display: grid;
  justify-items: center;
  gap: clamp(2.5rem, 4vw, 3.5rem);
  text-align: center;
}

.why__heading {
  justify-items: center;
}

/* Introduction runs nearly as wide as the headline above it */
.why__heading .lead {
  max-width: 58rem;
}

.why__heading .display-lg em {
  display: inline;
}

.usp-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 1rem;
  width: min(100%, 1100px);
}

.usp {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.75rem;
  text-align: center;
}

.usp__icon {
  width: 2.75rem;
  height: 2.75rem;
}

.usp__title {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-deep-blue);
}

.usp__title span {
  display: block;
}

.usp__text {
  max-width: 15rem;
  font-family: var(--font-copy);
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* ---------- Brand quote ---------- */
.brand-quote {
  --section-bg: var(--color-navy);
  z-index: 2; /* above the next section so its wave can overlap it */
  padding-block: clamp(3.5rem, 7vw, 6rem);
  text-align: center;
}

/* The navy band flows down over the top of the next section (the Location photograph) */
.brand-quote::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: calc(100% - 1px);
  height: clamp(36px, 6vw, 110px);
  background-color: var(--section-bg);
  -webkit-mask: url("../assets/patterns/wave-edge.svg") center bottom / 100% 100% no-repeat;
  mask: url("../assets/patterns/wave-edge.svg") center bottom / 100% 100% no-repeat;
  transform: scale(-1, -1);
  pointer-events: none;
}

.brand-quote__text {
  display: grid;
  gap: 1.4rem;
  max-width: 46rem;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.45;
  color: rgb(250 248 243 / 0.92);
}

.brand-quote__cite {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-style: normal;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-gold);
}

/* ---------- Location: four brand pillars ---------- */
/* ---------- Brand pillars band: villa photograph with the copy held on a dark scrim ---------- */
.pillars-band {
  --section-bg: var(--color-navy);
  --wave-h: clamp(36px, 6vw, 110px);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

/* The photograph forms the wave crest itself, so suppress the plain colour edge */
.pillars-band::before {
  display: none;
}

/* Photograph and scrim both rise into the crest, cut to the same wave silhouette */
.pillars-band__media,
.pillars-band::after {
  position: absolute;
  inset: calc(-1 * var(--wave-h)) 0 0 0;
  /* The solid layer overlaps the crest by 1px so no hairline shows where the two meet */
  -webkit-mask:
    url("../assets/patterns/wave-edge.svg") top center / 100% var(--wave-h) no-repeat,
    linear-gradient(#000, #000) bottom center / 100% calc(100% - var(--wave-h) + 1px) no-repeat;
  mask:
    url("../assets/patterns/wave-edge.svg") top center / 100% var(--wave-h) no-repeat,
    linear-gradient(#000, #000) bottom center / 100% calc(100% - var(--wave-h) + 1px) no-repeat;
}

.pillars-band__media {
  z-index: -2;
}

.pillars-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

/* Small screens: the copy runs the full width, so the scrim stays even across the photograph */
.pillars-band::after {
  content: "";
  z-index: -1;
  background: linear-gradient(180deg, rgb(11 34 54 / 0.9), rgb(11 34 54 / 0.82));
  pointer-events: none;
}

.location-pillars {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 3vw, 2.5rem);
}

.location-pillar {
  padding-left: 1.1rem;
  border-left: 2px solid var(--color-gold);
}

.location-pillar__title {
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--color-soft-cream);
}

.location-pillar__text {
  font-family: var(--font-copy);
  font-size: 0.85rem;
  line-height: 1.75;
  color: rgb(250 248 243 / 0.7);
}

/* ---------- Experiences: The Art of Doing Nothing Beautifully ---------- */
/* Sits on its own cream ground, divided from the blue band above by a wave crest */
.art-of {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(5rem, 9vw, 8.5rem);
  padding-block: clamp(1rem, 2vw, 2rem) var(--section-space);
}

/* Full-bleed cream ground behind the block */
.art-of::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background-color: var(--art-of-bg);
}

/* The wave crest itself, rising out of the cream into the blue above */
.art-of::after {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  bottom: 100%;
  height: clamp(36px, 6vw, 110px);
  z-index: -1;
  background-color: var(--art-of-bg);
  -webkit-mask: url("../assets/patterns/wave-edge.svg") center bottom / 100% 100% no-repeat;
  mask: url("../assets/patterns/wave-edge.svg") center bottom / 100% 100% no-repeat;
  pointer-events: none;
}

/* Starfish resting on the crest, straddling the two grounds */
/* Starfish medallion seated on the crest, half in the blue and half in the cream */
.art-of__crest {
  position: absolute;
  left: 50%;
  bottom: 100%;
  translate: -50% 8%;
  display: grid;
  place-items: center;
  width: clamp(3rem, 4.8vw, 4.2rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--art-of-bg);
}

/* The artwork carries its own padding, so it runs almost to the edge of the disc */
.art-of__crest img {
  width: 96%;
  height: auto;
}

/* Centred above the four points, the same way .villas__intro sits above its carousel */
.art-of__intro {
  display: grid;
  gap: 1.25rem;
  justify-items: center;
  text-align: center;
}

.art-of__intro .section-heading {
  justify-items: center;
}

.art-of__intro .lead {
  max-width: 58rem;
}

.art-of__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.art-of__item {
  padding-left: 1.1rem;
  border-left: 2px solid var(--color-gold);
}

.art-of__title {
  margin-bottom: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-deep-blue);
}

.art-of__text {
  font-family: var(--font-copy);
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--color-deep-blue);
  opacity: 0.78;
}

/* ---------- Signature experiences ---------- */
/* Plain sea-blue band — colour only, no pattern */
.experiences {
  --section-bg: #A2C1D1;
  /* The lower half of this section (The Art of Doing…) sits on its own cream ground */
  --art-of-bg: var(--color-cream);
  z-index: 4; /* above Daylight so its wave can overlap it (each wavy band sits one step above the next) */
  overflow-x: clip;
}

/* Only while The Art of Doing block is showing does the band hand over to cream:
   that block then carries the section's bottom space on its own ground. */
.experiences:has(.art-of:not([hidden])) {
  padding-bottom: 0;
}

/* The blue band flows down over the top of the Location photograph,
   so the two sections meet on one curve instead of a straight cut */
.experiences::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: calc(100% - 1px);
  height: clamp(36px, 6vw, 110px);
  background-color: var(--section-bg);
  -webkit-mask: url("../assets/patterns/wave-edge.svg") center bottom / 100% 100% no-repeat;
  mask: url("../assets/patterns/wave-edge.svg") center bottom / 100% 100% no-repeat;
  transform: scale(-1, -1);
  pointer-events: none;
}

/* Cream, not blue, when the band has already turned over to the Art of Doing ground */
.experiences:has(.art-of:not([hidden]))::after {
  background-color: var(--art-of-bg);
}

.experiences .display-lg,
.experiences .lead {
  color: var(--color-navy);
}

/* Same gold as the other section eyebrows on light backgrounds */
.experiences .eyebrow {
  color: var(--color-gold-text);
}

.experiences .btn--outline {
  --btn-border: rgb(16 47 70 / 0.5);
  --btn-fg: var(--color-navy);
}

.experiences .btn--outline:hover,
.experiences .btn--outline:focus-visible {
  --btn-fg: var(--color-soft-cream);
  --btn-border: var(--color-deep-blue);
}

.experiences__layout {
  display: grid;
  gap: 2.5rem;
}

.experiences__intro {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}

.experiences__gallery {
  position: relative;
}

.experience-list {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-inline: calc(-1 * var(--gutter));
  padding: 0 var(--gutter) 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

/* Mouse users can grab and drag the row */
@media (hover: hover) and (pointer: fine) {
  .experience-list {
    cursor: grab;
  }
}

.experience-list.is-dragging,
.experience-list.is-settling {
  scroll-snap-type: none;
  user-select: none;
  -webkit-user-select: none;
}

.experience-list.is-dragging,
.experience-list.is-dragging * {
  cursor: grabbing;
}

/* Fade between sets of experiences (auto-slide) */
.experience-list {
  transition:
    opacity 0.45s var(--ease-in-out),
    translate 0.45s var(--ease-in-out);
}

.experience-list.is-fading-out {
  opacity: 0;
  translate: -16px 0;
}

.experience-list.is-fading-in-start {
  opacity: 0;
  translate: 16px 0;
  transition: none;
}

.experience-list.is-fading-in {
  transition:
    opacity 0.7s var(--ease-out),
    translate 0.7s var(--ease-out);
}

/* The card arriving at the end of the row fades in while the row glides along */
.experience {
  transition:
    opacity 0.9s var(--ease-out) 0.2s,
    translate 0.9s var(--ease-out) 0.2s;
}

.experience.is-entering {
  opacity: 0;
  translate: 28px 0;
  transition: none;
}

.experience-list::-webkit-scrollbar {
  display: none;
}

.experience {
  flex: 0 0 66%;
  padding: 0 12px 12px 0; /* room for the offset outline */
  scroll-snap-align: start;
}

/* HOMEPAGE-ONLY MODE: cards whose destination page is not published yet keep their
   look but stop behaving like links — no pointer, no hover lift. Remove the class
   (and restore the href) once the Experiences pages go live. */
.experience__link.is-inert {
  cursor: default;
  pointer-events: none;
}

.experience__link {
  position: relative;
  display: block;
  isolation: isolate;
}

/* Every panel is the same soft arch — calm and consistent */
.experience__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4.6;
  overflow: hidden;
  border-radius: 999px 999px 18px 18px;
  box-shadow: 0 30px 50px -32px rgb(11 34 54 / 0.65);
}

/* A fine line echoes each arch, offset behind it */
.experience__link::before {
  content: "";
  position: absolute;
  inset: 12px -12px -12px 12px;
  z-index: -1;
  border: 1px solid rgb(250 248 243 / 0.6);
  border-radius: 999px 999px 18px 18px;
  transition: inset var(--duration-slow) var(--ease-out), border-color var(--duration-slow);
}

.experience__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--duration-slow) var(--ease-out);
}

.experience__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgb(11 34 54 / 0.78) 0%, rgb(11 34 54 / 0.25) 34%, rgb(11 34 54 / 0) 55%);
  transition: background-color var(--duration-slow) var(--ease-out);
}

/* Photographs are pre-cropped to the arch, so they sit centred */

/* Placeholder arch until photography is supplied */
.experience__media--placeholder {
  display: grid;
  place-content: start center;
  justify-items: center;
  gap: 0.6rem;
  padding-top: 32%;
  background:
    radial-gradient(circle at 50% 25%, rgb(255 255 255 / 0.85), transparent 60%),
    linear-gradient(170deg, var(--color-mist), #7FA3B8);
}

.experience__media--placeholder .experience__placeholder-icon {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}

.experience__placeholder-note {
  font-size: 0.68rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-deep-blue);
  opacity: 0.75;
}

.experience__caption {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 0 1.25rem 1.75rem;
  text-align: center;
  color: var(--color-soft-cream);
  transition: translate var(--duration) var(--ease-out);
}

.experience__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.05rem + 0.6vw, 1.7rem);
  font-style: italic;
  line-height: 1;
  color: var(--color-soft-cream);
}

/* Thin gold rule between title and description */
.experience__title::after {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1px;
  margin: 0.65rem auto 0.2rem;
  background: var(--color-gold-soft);
  transition: width var(--duration) var(--ease-out);
}

.experience__text {
  max-width: 14rem;
  font-family: var(--font-copy);
  font-size: 0.82rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: rgb(250 248 243 / 0.9);
}

.experience__link:hover .experience__media img,
.experience__link:focus-visible .experience__media img {
  scale: 1.03;
}

.experience__link:hover .experience__media::after,
.experience__link:focus-visible .experience__media::after {
  background-color: rgb(24 59 85 / 0.12);
}

.experience__link:hover .experience__caption,
.experience__link:focus-visible .experience__caption {
  translate: 0 -5px;
}

.experience__link:hover .experience__title::after,
.experience__link:focus-visible .experience__title::after {
  width: 2.75rem;
}

.experience__link:hover::before,
.experience__link:focus-visible::before {
  inset: -8px;
  border-color: rgb(250 248 243 / 0.85);
}

.experiences__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1rem;
}

.experiences .swipe-dots {
  margin-top: 0;
  color: var(--color-navy);
}

/* ---------- From daylight to starlight ---------- */
.daylight {
  --day-bg: var(--color-soft-cream);
  --day-fg: var(--color-text);
  --day-heading: var(--color-deep-blue);
  --day-muted: var(--color-text-muted);
  --day-accent: var(--color-gold);
  --day-eyebrow: var(--color-gold-text);
  --day-stars: 0;
  --section-bg: var(--day-bg);
  z-index: 3; /* above the Brand Quote so its wave can overlap it; below the Experiences wave */
  color: var(--day-fg);
  transition: background-color var(--duration-slow) var(--ease-out), color var(--duration-slow) var(--ease-out);
  overflow-x: clip;
}

.daylight[data-moment="afternoon"] {
  --day-bg: #E3EFF0;
  --day-accent: #3E95A3;
  --day-eyebrow: #265E68;
}

.daylight[data-moment="golden"] {
  --day-bg: #F3E4C6;
  --day-accent: var(--color-gold-deep);
  --day-eyebrow: #6E5220;
}

.daylight[data-moment="evening"] {
  --day-bg: #1D3F5C;
  --day-fg: #E9EEF1;
  --day-heading: var(--color-soft-cream);
  --day-muted: rgb(233 238 241 / 0.8);
  --day-accent: var(--color-gold-soft);
  --day-eyebrow: var(--color-gold-soft);
  --day-stars: 0.35;
}

.daylight[data-moment="night"] {
  --day-bg: #0E2A40;
  --day-fg: #E9EEF1;
  --day-heading: var(--color-soft-cream);
  --day-muted: rgb(233 238 241 / 0.8);
  --day-accent: var(--color-gold-soft);
  --day-eyebrow: var(--color-gold-soft);
  --day-stars: 0.7;
}

/* A section that follows a band with its own downward wave (Experiences, Daylight)
   tucks under that wave, so it needs no edge of its own */
.experiences + .section::before,
.daylight + .section::before,
.daylight + [hidden] + .section::before,
.brand-quote + .section::before {
  display: none;
}

/* The band flows down over the top of the Location photograph, in the colour of the moment */
.daylight::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: calc(100% - 1px);
  height: clamp(36px, 6vw, 110px);
  background-color: var(--section-bg);
  -webkit-mask: url("../assets/patterns/wave-edge.svg") center bottom / 100% 100% no-repeat;
  mask: url("../assets/patterns/wave-edge.svg") center bottom / 100% 100% no-repeat;
  transform: scale(-1, -1);
  transition: background-color var(--duration-slow) var(--ease-out);
  pointer-events: none;
}

.daylight__stars {
  inset: 0;
  z-index: -1;
  --star-color: var(--color-gold-soft);
  opacity: var(--day-stars);
  transition: opacity var(--duration-slow) var(--ease-out);
}

.daylight .display-lg,
.daylight .lead,
.daylight .eyebrow,
.daylight__note {
  transition: color var(--duration-slow) var(--ease-out);
}

.daylight .display-lg { color: var(--day-heading); }
.daylight .lead { color: var(--day-muted); }
.daylight .eyebrow { color: var(--day-eyebrow); }

.daylight__layout {
  display: grid;
  gap: 2.5rem;
}

.daylight__intro {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}

.daylight__ribbon {
  display: flex;
  gap: 3px;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.daylight__ribbon::-webkit-scrollbar {
  display: none;
}

.moment {
  position: relative;
  flex: 0 0 62%;
  height: clamp(300px, 90vw, 380px);
  overflow: hidden;
  scroll-snap-align: start;
  border-radius: 4px;
  cursor: pointer;
  isolation: isolate;
}

.moment__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 1.4s var(--ease-out), filter var(--duration-slow);
}

.moment::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgb(11 34 54 / 0.75) 0%, rgb(11 34 54 / 0.1) 45%, rgb(11 34 54 / 0) 65%);
}

/* Gold bar marks the active moment */
.moment::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-slow) var(--ease-out);
}

.moment.is-active::before {
  transform: scaleX(1);
}

.moment[data-moment-item="morning"] .moment__image { object-position: 40% 50%; }
.moment[data-moment-item="afternoon"] .moment__image { object-position: 62% 50%; }
.moment[data-moment-item="golden"] .moment__image { object-position: 22% 55%; }
.moment[data-moment-item="evening"] .moment__image { object-position: 60% 50%; }
.moment[data-moment-item="night"] .moment__image { object-position: 50% 55%; }

.moment__caption {
  position: absolute;
  inset: auto 0 0;
  padding: 1rem 1rem 1.2rem;
  color: var(--color-soft-cream);
}

.moment__time {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.1;
}

.moment__title {
  margin-top: 0.3rem;
  font-family: var(--font-copy);
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgb(250 248 243 / 0.88);
}

.moment__title span {
  display: block;
}

.timeline {
  --progress: 0%;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 1rem;
  padding: 0;
  list-style: none;
  color: var(--day-muted);
}

.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 10%;
  height: 1px;
}

.timeline::before {
  right: 10%;
  background: currentColor;
  opacity: 0.3;
}

.timeline::after {
  width: calc(var(--progress) * 0.8);
  background: var(--day-accent);
  transition: width var(--duration-slow) var(--ease-out), background-color var(--duration-slow);
}

.timeline__point {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 2.75rem;
}

.timeline__dot {
  width: 0.6rem;
  height: 0.6rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--day-bg);
  transition: transform var(--duration) var(--ease-out), background-color var(--duration-slow), border-color var(--duration);
}

.timeline__point[aria-pressed="true"] .timeline__dot {
  transform: scale(1.4);
  background: var(--day-accent);
  border-color: var(--day-accent);
}

.timeline__point:hover .timeline__dot {
  border-color: var(--day-accent);
}

/* Scroll story: the stage stays on screen while scrolling plays the five moments in turn.
   daylight-timeline.js adds .is-scrolly only when motion is allowed and the screen is tall
   enough; otherwise the section keeps its normal layout. */
.daylight.is-scrolly {
  --daylight-step: 60svh; /* scroll distance per moment; keep in step with STEP_VH in the JS */
  height: calc(100svh + 5 * var(--daylight-step));
  padding-block: 0;
}

.daylight.is-scrolly .daylight__stage {
  position: sticky;
  top: 0;
  display: grid;
  align-content: center;
  height: 100svh;
  padding-top: var(--header-height);
}

/* Phones: leave room for the booking dock fixed to the bottom of the screen */
@media (max-width: 767px) {
  .daylight.is-scrolly .daylight__stage {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
  }
}

/* Phones and tablets: scrolling down slides the ribbon sideways (set by the script) */
.daylight.is-scrolly .daylight__ribbon {
  overflow-x: hidden;
  scroll-snap-type: none;
}

/* Phones and tablets: the script slides the cards along with a transform (--ribbon-x) */
@media (max-width: 1023px) {
  .daylight.is-scrolly .moment {
    translate: var(--ribbon-x, 0) 0;
    will-change: translate;
  }
}

/* Phones and tablets: the panels take whatever height is left on screen, so the whole
   stage always fits between the header and the booking dock */
@media (max-width: 1023px) {
  .daylight.is-scrolly .daylight__stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .daylight.is-scrolly .daylight__layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-height: 0;
    padding-block: 1rem;
  }

  .daylight.is-scrolly .daylight__journey {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .daylight.is-scrolly .daylight__ribbon {
    flex: 0 1 clamp(300px, 90vw, 380px);
    min-height: 0;
  }

  .daylight.is-scrolly .moment {
    height: auto;
  }
}

/* Gentle parallax: each photograph drifts against the scroll (--shift: -1 → 1) */
.daylight.is-scrolly .moment__image {
  scale: 1.12;
  translate: calc(var(--shift, 0) * -5%) 0;
}

/* The progress line follows the scroll directly instead of easing between dots */
.daylight.is-scrolly .timeline::after {
  transition: background-color var(--duration-slow);
}

/* Small vertical caption beside a section (desktop only) */
.side-note {
  display: none;
}

/* ---------- Special offers (hidden until offers are published) ---------- */
.offers {
  --section-bg: var(--color-cream);
  padding-block: clamp(3rem, 5vw, 4.5rem);
}

.offers__layout {
  display: grid;
  gap: 2rem;
}

.offer-list {
  display: grid;
  gap: 1.25rem;
}

.offer {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
  padding: 1.75rem 1.75rem 1.25rem;
  background: var(--color-soft-cream);
  border: 1px solid rgb(201 164 91 / 0.35);
  border-radius: 18px;
}

.offer__tag {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.offer__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem);
  line-height: 1.15;
  color: var(--color-navy);
}

.offer__text {
  font-family: var(--font-copy);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ---------- Location ---------- */
.location {
  --section-bg: #EEF3F3;
  padding-top: calc(var(--section-space) + clamp(20px, 3vw, 56px));
  overflow-x: clip;
}

.location__media {
  position: relative;
  height: clamp(220px, 60vw, 340px);
  margin: calc(-1 * var(--section-space)) 0 2rem;
  -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent);
  mask-image: linear-gradient(180deg, #000 65%, transparent);
}

.location__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 55%;
}

.location__layout {
  position: relative;
  display: grid;
  gap: 2.25rem;
}

.location__content {
  display: grid;
  gap: 1rem;
  justify-items: start;
}

.location__place {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-deep-blue);
}

.location__aside {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
}

/* Journey times: a deep-navy glass panel over the photograph */
.journey {
  width: min(100%, 22rem);
  padding: 1.75rem 2rem 1.5rem;
  color: var(--color-soft-cream);
  background: var(--color-navy); /* solid on small screens, where it sits on cream */
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgb(250 248 243 / 0.18);
  border-radius: 6px;
  box-shadow: 0 30px 60px -30px rgb(11 34 54 / 0.6);
}

.journey__title {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-gold-soft);
}

.journey__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgb(228 203 147 / 0.4);
}

.journey__list {
  margin-top: 0.75rem;
}

.journey__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0.9rem;
  padding-block: 0.85rem;
}

.journey__item + .journey__item {
  border-top: 1px solid rgb(228 203 147 / 0.2);
}

.journey__icon {
  --size: 1rem;
  align-self: center;
  color: var(--color-gold-soft);
}

.journey__place {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.2;
}

.journey__time {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgb(250 248 243 / 0.75);
  white-space: nowrap;
}

.journey__number {
  margin-right: 0.15rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-gold-soft);
}

.distance {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.9rem;
  padding-block: 0.7rem;
}

.distance-card .distance + .distance {
  border-top: 1px dashed rgb(24 59 85 / 0.16);
}

.distance__icon {
  width: 1.25rem;
  height: 1.25rem;
}

.distance__place {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--color-deep-blue);
}

.distance__time {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.distance-card {
  position: relative;
  padding: 1.5rem 1.5rem 1.25rem;
  background: rgb(250 248 243 / 0.92);
  border-radius: 6px 36px 6px 36px;
  box-shadow: var(--shadow-panel);
}

.distance-card__title {
  color: var(--color-gold-text);
}

.distance-card .distance-list {
  margin-top: 0.75rem;
}

/* ---------- Final booking CTA ---------- */
.finale {
  position: relative;
  padding-block: clamp(3.5rem, 6vw, 5rem);
  color: var(--color-soft-cream);
  background: var(--color-midnight);
  isolation: isolate;
  overflow: hidden;
}

.finale__media {
  position: absolute;
  inset: 0;
  z-index: -3;
}

.finale__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}

.finale__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(11 34 54 / 0.96) 0%, rgb(11 34 54 / 0.82) 45%, rgb(11 34 54 / 0.7) 100%);
}

.finale__stars {
  inset: 0;
  z-index: -2;
  --star-color: var(--color-gold-soft);
}

.finale__stars--far {
  -webkit-mask-size: 420px auto;
  mask-size: 420px auto;
  opacity: 0.35;
}

.finale__stars--near {
  -webkit-mask-size: 900px auto;
  mask-size: 900px auto;
  -webkit-mask-position: 30% 20%;
  mask-position: 30% 20%;
  --star-color: #FFFFFF;
  opacity: 0.3;
}

.finale__layout {
  display: grid;
  gap: 2rem;
  justify-items: center;
  text-align: center;
}

.finale__title {
  color: var(--color-soft-cream);
}

.finale__lead {
  margin-top: 0.75rem;
  font-family: var(--font-copy);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  color: rgb(250 248 243 / 0.82);
}

.finale__actions {
  display: grid;
  gap: 0.85rem;
  justify-items: center;
}

.finale__note {
  color: rgb(250 248 243 / 0.72);
}

.finale__brand {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
}

.finale__brand img {
  width: 150px;
}

.finale__tagline {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgb(250 248 243 / 0.72);
}

/* ---------- Footer ---------- */
.site-footer {
  padding-block: clamp(2.5rem, 5vw, 3.5rem) calc(6rem + env(safe-area-inset-bottom));
  background: var(--color-white);
  color: var(--color-text-muted);
}

/* Katathani Collection: group mark centred, sister resorts in a row beneath */
.site-footer__brands {
  display: grid;
  justify-items: center;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(2rem, 4vw, 2.75rem);
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--color-line);
}

.site-footer__collection-link {
  display: block;
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration) var(--ease-out);
}

.site-footer__collection-link:hover,
.site-footer__collection-link:focus-visible {
  opacity: 0.85;
  transform: translateY(-2px);
}

.site-footer__collection {
  width: auto;
  height: clamp(72px, 7vw, 96px);
}

/* Wrapping rows stay centred, so a short last row never hugs the left edge */
.brand-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.75rem 1rem;
  width: 100%;
}

.brand-list__item {
  display: flex;
  justify-content: center;
  flex: 0 0 calc((100% - 2rem) / 3);
}

.brand-list__item img {
  width: auto;
  max-width: 100%;
  height: clamp(32px, 2.8vw, 42px);
  object-fit: contain;
}

.brand-list__link {
  display: flex;
  justify-content: center;
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration) var(--ease-out);
}

.brand-list__link:hover,
.brand-list__link:focus-visible {
  opacity: 0.8;
  transform: translateY(-2px);
}

/* Square artboards carry extra padding, so they need a little more height to match */
.brand-list__item--square img {
  height: clamp(44px, 3.9vw, 57px);
}

/* Contact block, menu and legal line — all centred */
.site-footer__inner {
  display: grid;
  justify-items: center;
  gap: 1.75rem;
  text-align: center;
}

.site-footer__contact {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
}

.site-footer__name {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem);
  line-height: 1.2;
  color: var(--color-navy);
}

.site-footer__address {
  display: grid;
  gap: 0.35rem;
  font-style: normal;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.site-footer__address a {
  transition: color var(--duration-fast);
}

.site-footer__address a:hover,
.site-footer__address a:focus-visible {
  color: var(--color-gold-text);
}

/* Social icons: fine line glyphs, no circles */
.site-footer .social-list {
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.site-footer .social-link {
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 0;
  color: var(--color-text-muted);
}

.site-footer .social-link .icon {
  --size: 1.3rem;
}

.site-footer .social-link:hover,
.site-footer .social-link:focus-visible {
  background: transparent;
  color: var(--color-gold-text);
}

.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.75rem;
}

.site-footer__nav a,
.site-footer__nav .is-pending {
  display: inline-block;
  padding-block: 0.4rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-deep-blue);
  transition: color var(--duration-fast);
}

/* Footer items whose page does not exist yet: plain text, quietly dimmed */
.site-footer__nav .is-pending {
  cursor: default;
  opacity: 0.55;
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible,
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: var(--color-gold-text);
}

/* Bottom line: © · credit · legal links, separated by fine rules */
.site-footer__legal {
  width: 100%;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-line);
}

.site-footer__legal ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem 0;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Rules between items appear once they sit on one line (tablet and up) */
.site-footer__legal li + li::before {
  content: "";
  display: none;
  width: 1px;
  height: 0.85em;
  margin-inline: 0.7rem;
  vertical-align: -0.1em;
  background: var(--color-line);
}

.site-footer__legal a {
  transition: color var(--duration-fast);
}

.site-footer__credit {
  font-style: italic;
  color: var(--color-gold-text);
}

/* ==========================================================================
   Sub pages
   ========================================================================== */

.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(480px, 72vh, 760px);
  padding-block: calc(var(--header-height) + 3rem) clamp(5.5rem, 12vh, 8rem);
  color: var(--color-soft-cream);
  overflow: hidden;
  isolation: isolate;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: clamp(40px, 6vw, 100px);
  background-color: var(--color-soft-cream);
  -webkit-mask: url("../assets/patterns/wave-edge.svg") center bottom / 100% 100% no-repeat;
  mask: url("../assets/patterns/wave-edge.svg") center bottom / 100% 100% no-repeat;
}

.page-hero__media {
  position: absolute;
  inset: -8% 0;
  z-index: -2;
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Page header slideshow (villas): stacked photographs that cross-fade */
.page-hero__slides {
  position: absolute;
  inset: 0;
}

.page-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s var(--ease-in-out);
}

.page-hero__slide.is-active {
  opacity: 1;
}

.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(11 34 54 / 0.5) 0%, rgb(11 34 54 / 0) 30%),
    linear-gradient(0deg, rgb(11 34 54 / 0.7) 0%, rgb(11 34 54 / 0.1) 60%);
}

.page-hero__content {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}

.page-hero .display-xl {
  color: var(--color-soft-cream);
}

.page-hero .display-xl em {
  color: var(--color-gold-soft);
}

/* Plain hero for text pages (privacy policy): a short navy band with soft stars,
   dark so the header keeps its light logo and links at the top of the page */
.page-hero--plain {
  min-height: 0;
  padding-block: calc(var(--header-height) + clamp(3rem, 7vw, 5.5rem)) clamp(4.5rem, 9vw, 7rem);
  background: linear-gradient(180deg, var(--color-navy) 0%, #12385A 100%);
}

.page-hero__stars {
  inset: 0;
  z-index: -1;
  --star-color: var(--color-gold-soft);
  opacity: 0.35;
}

/* ---------- Legal text (privacy policy) ---------- */
.legal__layout {
  display: grid;
  gap: 2.5rem;
}

.legal__toc {
  padding: 1.25rem 1.5rem;
  border: 1px solid rgb(201 164 91 / 0.35);
  border-radius: 18px;
  background-color: var(--color-cream);
}

.legal__toc-title {
  margin-bottom: 0.75rem;
  font-size: 0.7rem;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.legal__toc ol {
  display: grid;
  gap: 0.15rem;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.legal__toc li {
  counter-increment: toc;
}

.legal__toc a {
  display: flex;
  gap: 0.75rem;
  padding-block: 0.35rem;
  font-size: 0.92rem;
  color: var(--color-deep-blue);
  transition: color var(--duration) var(--ease-out);
}

.legal__toc a::before {
  content: counter(toc, decimal-leading-zero);
  min-width: 1.5rem;
  font-family: var(--font-display);
  color: var(--color-gold-text);
}

.legal__toc a:hover,
.legal__toc a:focus-visible {
  color: var(--color-gold-text);
}

.legal__body {
  max-width: 46rem;
  font-family: var(--font-copy);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-text);
}

.legal__body > * + * {
  margin-top: 1.1rem;
}

.legal__body h2 {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgb(201 164 91 / 0.35);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--color-deep-blue);
  /* Clear the fixed header when jumping to a heading */
  scroll-margin-top: calc(var(--header-height) + 1.5rem);
}

.legal__body ul:not(.legal__offices) {
  display: grid;
  gap: 0.7rem;
  padding: 0;
  list-style: none;
}

.legal__body ul:not(.legal__offices) li {
  position: relative;
  padding-left: 1.5rem;
}

/* Small gold diamond in place of the 🔸 bullets in the source text */
.legal__body ul:not(.legal__offices) li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.68em;
  width: 0.42rem;
  height: 0.42rem;
  background-color: var(--color-gold);
  rotate: 45deg;
}

.legal__body a {
  color: var(--color-deep-blue);
  text-decoration: underline;
  text-decoration-color: rgb(201 164 91 / 0.7);
  text-underline-offset: 0.2em;
}

.legal__body a:hover,
.legal__body a:focus-visible {
  color: var(--color-gold-text);
}

.legal__download {
  padding: 1rem 1.25rem;
  border-radius: 14px;
  background-color: var(--color-cream);
}

.legal__download .icon {
  margin-right: 0.4rem;
  vertical-align: -0.1em;
}

.legal__file {
  color: var(--color-text-muted);
  font-size: 0.85em;
}

.legal__offices {
  display: grid;
  gap: 1rem;
  padding: 0;
  list-style: none;
}

.legal__office {
  padding: 1.25rem 1.5rem;
  border: 1px solid rgb(201 164 91 / 0.35);
  border-radius: 18px;
  background-color: var(--color-white);
}

.legal__office h3 {
  margin-bottom: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-caps);
  color: var(--color-gold-text);
}

.legal__office address {
  display: grid;
  gap: 0.3rem;
  font-style: normal;
  overflow-wrap: anywhere; /* long e-mail addresses in narrow cards */
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Wider screens: office name beside its details */
@media (min-width: 768px) {
  .legal__office {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 1.5rem;
  }

  .legal__office h3 {
    margin: 0.2rem 0 0;
  }
}

/* Desktop: contents list in a sticky column beside the text */
@media (min-width: 1024px) {
  .legal__layout {
    grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
    align-items: start;
    gap: clamp(3rem, 6vw, 6rem);
  }

  .legal__toc {
    position: sticky;
    top: calc(var(--header-height) + 1.5rem);
  }
}

.intro-block {
  display: grid;
  gap: 1.5rem;
  justify-items: center;
  text-align: center;
}

.intro-block .lead {
  max-width: 40em;
}

.feature-stack {
  display: grid;
  gap: clamp(4.5rem, 9vw, 8rem);
  margin-top: clamp(3.5rem, 7vw, 6rem);
}

.feature-row {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  scroll-margin-top: calc(var(--header-height) + 2rem);
}

.feature-row__visual {
  position: relative;
  padding-bottom: 12%;
}

.feature-row__media {
  aspect-ratio: 4 / 3.2;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}

.feature-row__media img,
.feature-row__inset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-row__inset {
  position: absolute;
  right: 4%;
  bottom: 0;
  width: 42%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 6px solid var(--color-soft-cream);
  border-radius: 50%;
  box-shadow: var(--shadow-soft);
}

.feature-row__body {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}

.feature-row__body .villa-card__features {
  margin-block: 0.25rem 0;
}

/* Villas page: who each villa sleeps, beside a guests icon */
.villa-occupancy {
  display: flex;
  gap: 0.6rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.villa-occupancy .icon {
  --size: 1.2rem;
  flex: none;
  margin-top: 0.15rem;
  color: var(--color-gold-text);
}

.villa-occupancy p + p {
  margin-top: 0.2rem;
}

.feature-row__body .villa-card__highlights {
  margin-bottom: 0.5rem;
}

/* Buttons whose page does not exist yet: shown, but not clickable */
.btn.is-pending {
  cursor: default;
  opacity: 0.5;
  pointer-events: none;
}

/* Villas page: folding comparison table */
.villa-compare {
  max-width: 52rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto clamp(3.5rem, 7vw, 5.5rem);
  border: 1px solid rgb(201 164 91 / 0.4);
  border-radius: 18px;
  background-color: var(--color-white);
}

.villa-compare__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.75rem;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-gold-text);
  cursor: pointer;
  list-style: none;
}

.villa-compare__toggle::-webkit-details-marker {
  display: none;
}

.villa-compare__toggle .icon {
  transition: rotate var(--duration) var(--ease-out);
}

.villa-compare[open] .villa-compare__toggle .icon {
  rotate: -90deg;
}

.villa-compare__content {
  display: grid;
  gap: 0.4rem;
  padding: 0 clamp(1rem, 3vw, 2rem) 1.5rem;
}

/* Narrow screens scroll the table sideways instead of squeezing it */
.villa-compare__scroll {
  margin-bottom: 0.75rem;
  overflow-x: auto;
}

.villa-compare__table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: 0.9rem;
  text-align: left;
}

.villa-compare__table th,
.villa-compare__table td {
  padding: 0.85rem 0.75rem;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
}

.villa-compare__table thead th {
  font-size: 0.68rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.villa-compare__table tbody th {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-deep-blue);
}

.villa-compare__table tbody th a:hover,
.villa-compare__table tbody th a:focus-visible {
  color: var(--color-gold-text);
}

.villa-compare__table td {
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Phones: each villa becomes a small stacked card instead of a wide table row */
@media (max-width: 639px) {
  .villa-compare__table {
    min-width: 0;
  }

  .villa-compare__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .villa-compare__table tr {
    display: grid;
    gap: 0.3rem;
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--color-line);
  }

  .villa-compare__table th,
  .villa-compare__table td {
    padding: 0;
    border: 0;
    white-space: normal;
  }

  .villa-compare__table td::before {
    content: attr(data-label) "\00a0 ";
    font-size: 0.66rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-gold-text);
  }
}

.villa-compare__note {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Villas page: night-sky decoration behind the content.
   The supplied star elements are near-white, so their shapes are used as masks and
   filled with the brand gold; a drop-shadow on the wrapper gives each a glow. */
.star-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.star-field__cluster {
  position: absolute;
  display: block;
  width: clamp(180px, 24vw, 340px);
  aspect-ratio: 560 / 632;
  opacity: 0.55;
}

.star-field__art {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask: var(--art) center / contain no-repeat;
  mask: var(--art) center / contain no-repeat;
}

/* Gold sparkles (element-08) */
.star-field__art--sparkle {
  --art: url("../assets/images/elements/sparkle-cluster.webp");
  background-color: var(--color-gold);
}

/* Fine gold constellations (element-10) */
.star-field__art--constellation {
  --art: url("../assets/images/elements/constellation.webp");
  background-color: var(--color-gold);
}

.star-field__cluster:has(.star-field__art--constellation) {
  aspect-ratio: 560 / 792;
  opacity: 0.4;
}

/* Scattered down the page, alternating sides, peeking in from the margins */
.star-field__cluster--1 { top: 1%; right: -4%; }
.star-field__cluster--2 { top: 13%; left: -5%; }
.star-field__cluster--3 { top: 29%; right: -3%; }
.star-field__cluster--4 { top: 44%; left: -4%; }
.star-field__cluster--5 { top: 60%; right: -5%; }
.star-field__cluster--6 { top: 74%; left: -3%; }
.star-field__cluster--7 { top: 89%; right: -4%; }

/* Phones: fewer, smaller clusters so the text stays clear */
@media (max-width: 767px) {
  .star-field__cluster {
    width: 46vw;
    opacity: 0.4;
  }

  .star-field__cluster--1,
  .star-field__cluster--3,
  .star-field__cluster--5,
  .star-field__cluster--7 {
    right: -22%;
  }

  .star-field__cluster--2,
  .star-field__cluster--4,
  .star-field__cluster--6 {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Each cluster brightens and glows in turn, like stars catching the light */
  .star-field__cluster {
    animation: star-twinkle 7s var(--ease-in-out) infinite;
  }

  .star-field__cluster--2 { animation-duration: 9s; animation-delay: -2s; }
  .star-field__cluster--3 { animation-duration: 6s; animation-delay: -4s; }
  .star-field__cluster--4 { animation-duration: 8s; animation-delay: -1s; }
  .star-field__cluster--5 { animation-duration: 7.5s; animation-delay: -5s; }
  .star-field__cluster--6 { animation-duration: 9.5s; animation-delay: -3s; }
  .star-field__cluster--7 { animation-duration: 6.5s; animation-delay: -6s; }
}

/* Phones: a fainter twinkle behind the narrow text column */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .star-field__cluster {
    animation-name: star-twinkle-soft;
  }
}

@keyframes star-twinkle-soft {
  0%, 100% { opacity: 0.18; }
  50% { opacity: 0.45; filter: drop-shadow(0 0 5px rgb(228 203 147 / 0.8)); }
}

@keyframes star-twinkle {
  0%, 100% {
    opacity: 0.3;
    scale: 0.98;
    filter: drop-shadow(0 0 0 rgb(201 164 91 / 0));
  }

  50% {
    opacity: 0.75;
    scale: 1.02;
    filter: drop-shadow(0 0 6px rgb(228 203 147 / 0.9));
  }
}

/* Villas page: practical notes under the villas */
.good-to-know {
  max-width: 52rem;
  margin: clamp(3.5rem, 7vw, 5.5rem) auto 0;
  padding: 1.5rem clamp(1.25rem, 3vw, 2rem);
  border-radius: 18px;
  background-color: var(--color-cream);
}

.good-to-know__title {
  margin-bottom: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.good-to-know ul {
  display: grid;
  gap: 0.4rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.feature-row__placeholder {
  display: grid;
  place-items: center;
  gap: 0.5rem;
  align-content: center;
  height: 100%;
  background:
    radial-gradient(circle at 30% 25%, rgb(255 255 255 / 0.8), transparent 55%),
    linear-gradient(160deg, var(--color-mist), var(--color-light-blue));
}

.feature-row__placeholder img {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
}

.gallery {
  --section-bg: var(--color-cream);
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.gallery__item {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-section {
  --section-bg: var(--color-cream);
}

.contact {
  display: grid;
  gap: 2.5rem;
}

.contact-list a {
  border-bottom: 1px solid rgb(201 164 91 / 0.5);
  transition: color var(--duration-fast), border-color var(--duration-fast);
}

.contact-list a:hover,
.contact-list a:focus-visible {
  color: var(--color-gold-deep);
  border-color: currentColor;
}

.location__grid {
  display: grid;
  gap: 2.5rem;
}

.contact-list {
  display: grid;
  gap: 1rem;
}

.contact-list dt {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-gold-text);
}

.contact-list dd {
  margin: 0.25rem 0 0;
  font-family: var(--font-body);
  font-size: 1.15rem;
  color: var(--color-deep-blue);
}

/* ==========================================================================
   Gallery page
   ========================================================================== */

/* Photos / Video tabs: two pill buttons, the selected one filled */
.gallery-tabs {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: clamp(2rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2.25rem);
}

.gallery-tabs__tab {
  min-height: 3rem;
  padding: 0.75rem clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgb(135 103 39 / 0.45);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-gold-text);
  transition: background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}

.gallery-tabs__tab:hover {
  border-color: var(--color-gold-text);
}

.gallery-tabs__tab[aria-selected="true"] {
  background-color: var(--color-gold-text);
  border-color: var(--color-gold-text);
  color: var(--color-soft-cream);
}

/* Category filters: quiet text buttons, the chosen one underlined in gold */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.5rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.gallery-filters__button {
  position: relative;
  min-height: 2.75rem;
  padding: 0.5rem 0;
  font-size: 0.72rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.gallery-filters__button::after {
  content: "";
  position: absolute;
  inset: auto 0 0.45rem;
  height: 1px;
  background-color: var(--color-gold);
  transform: scaleX(0);
  transition: transform var(--duration) var(--ease-out);
}

.gallery-filters__button[aria-pressed="true"] {
  color: var(--color-deep-blue);
}

.gallery-filters__button[aria-pressed="true"]::after,
.gallery-filters__button:hover::after {
  transform: scaleX(1);
}

/* Photo grid: a masonry of columns, each photo at its natural shape */
.photo-grid {
  columns: 2;
  column-gap: clamp(0.6rem, 1.5vw, 1.25rem);
}

.photo-grid__item {
  break-inside: avoid;
  margin-bottom: clamp(0.6rem, 1.5vw, 1.25rem);
}

.photo-grid__button {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  background-color: var(--color-mist);
  cursor: zoom-in;
}

.photo-grid__button img {
  width: 100%;
  height: auto;
  transition: scale 1.2s var(--ease-out), filter var(--duration) var(--ease-out);
}

.photo-grid__button:hover img,
.photo-grid__button:focus-visible img {
  scale: 1.04;
  filter: brightness(1.04);
}

@media (min-width: 768px) {
  .photo-grid {
    columns: 3;
  }
}

@media (min-width: 1280px) {
  .photo-grid {
    columns: 4;
  }
}

/* Video tab, until films are added */
.video-empty {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) 1.5rem;
  border: 1px solid rgb(201 164 91 / 0.35);
  border-radius: 18px;
  background-color: var(--color-cream);
  text-align: center;
}

.video-empty__icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  color: var(--color-gold-text);
}

.video-empty__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  color: var(--color-deep-blue);
}

.video-empty__text {
  color: var(--color-text-muted);
}

/* Full-screen photo viewer */
.lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: clamp(3.5rem, 6vw, 4.5rem) clamp(0.75rem, 6vw, 5.5rem);
  border: 0;
  background: rgb(8 24 38 / 0.94);
  color: var(--color-soft-cream);
}

.lightbox::backdrop {
  background: rgb(8 24 38 / 0.6);
}

.lightbox[open] {
  display: grid;
  place-items: center;
}

.lightbox__figure {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  max-width: 100%;
}

.lightbox__image {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 10rem);
  border-radius: 10px;
  object-fit: contain;
}

.lightbox__caption {
  display: flex;
  gap: 1.25rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.lightbox__count {
  color: rgb(250 248 243 / 0.6);
}

.lightbox__button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgb(250 248 243 / 0.35);
  border-radius: 50%;
  color: var(--color-soft-cream);
  transition: background-color var(--duration) var(--ease-out);
}

.lightbox__button:hover,
.lightbox__button:focus-visible {
  background-color: rgb(250 248 243 / 0.15);
}

.lightbox__button--prev { left: clamp(0.5rem, 2vw, 1.5rem); top: 50%; translate: 0 -50%; }
.lightbox__button--next { right: clamp(0.5rem, 2vw, 1.5rem); top: 50%; translate: 0 -50%; }
.lightbox__button--close { top: 1rem; right: 1rem; }

/* Phones: arrows sit under the photo so they never cover it */
@media (max-width: 767px) {
  .lightbox__button--prev,
  .lightbox__button--next {
    top: auto;
    bottom: 1rem;
    translate: none;
  }

  .lightbox__button--prev { left: calc(50% - 3.5rem); }
  .lightbox__button--next { right: calc(50% - 3.5rem); }
}

/* ---- responsive.css ---- */
/* ==========================================================================
   Responsive overrides — mobile-first, min-width only.
   360 / 480 / 768 / 1024 / 1280 / 1440 / 1920
   ========================================================================== */

/* ---------- ≤ 380: very small phones ---------- */
@media (max-width: 380px) {
  .lang-select__control {
    padding-inline: 0.3rem 1.3rem;
  }

  .booking-dock__note {
    display: none;
  }

  .booking-dock__button {
    max-width: none;
  }
}

/* ---------- 480 ---------- */
@media (min-width: 480px) {
  .site-header__book {
    display: inline-flex;
  }

  .experience {
    flex-basis: 52%;
  }

  .moment {
    flex-basis: 46%;
  }
}

/* ---------- 768: tablet portrait ---------- */
@media (min-width: 768px) {
  :root {
    --header-height: 88px;
  }

  .hero {
    padding-bottom: clamp(10rem, 20vh, 13rem);
  }

  /* Booking bar floats over the hero edge */
  .booking {
    z-index: var(--z-raised);
    height: auto;
    margin-top: calc(-1 * clamp(5rem, 9vw, 7rem));
    /* Below the hero, the bar sits on the Why band's colour so the two meet without a seam */
    background: linear-gradient(180deg, transparent clamp(5rem, 9vw, 7rem), var(--color-cream) 0);
  }

  /* Sub pages: the strip under the bar matches the page, which is lighter than the Why band */
  .page-hero + .booking {
    background: linear-gradient(180deg, transparent clamp(5rem, 9vw, 7rem), var(--color-soft-cream) 0);
  }

  /* Room at the foot of each page header for the booking bar that overlaps it */
  .page-hero {
    padding-bottom: calc(clamp(5.5rem, 12vh, 8rem) + clamp(5rem, 9vw, 7rem));
  }

  .page-hero--plain {
    padding-bottom: calc(clamp(4.5rem, 9vw, 7rem) + clamp(5rem, 9vw, 7rem));
  }

  .booking__backdrop,
  .booking-panel__sheet-head {
    display: none;
  }

  .booking-panel {
    position: relative;
    inset: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 2rem;
    max-width: 1180px;
    max-height: none;
    margin-inline: auto;
    padding: 1.75rem 2rem;
    overflow: visible;
    border-radius: var(--radius-md);
    translate: none;
    visibility: visible;
    transition: none;
  }

  .booking-panel .guests-popover {
    position: absolute;
    margin-top: 0;
    border: 0;
    box-shadow: var(--shadow-lift);
  }

  .booking-panel__error {
    grid-column: 1 / -1;
  }

  .booking__note {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    max-width: 1180px;
    margin: 0.75rem auto 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-gold-text);
  }

  .booking-dock {
    display: none;
  }

  .villa-carousel {
    --card-w: 60%;
    --next-x: 60%;
    --next-s: 0.78;
    --next-o: 1;
    --after-x: 100%;
    --after-s: 0.62;
    --after-o: 0;
    --prev-x: -60%;
    --prev-s: 0.78;
    --prev-o: 1;
    --next-inset: 32%;
    --prev-inset: 32%;
  }

  .villa-carousel__stage {
    justify-items: center;
  }

  .usp-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }

  .usp {
    padding-inline: clamp(1rem, 2vw, 2rem);
  }

  .usp + .usp {
    border-left: 1px solid rgb(201 164 91 / 0.4);
  }

  .location-pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .art-of__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-header__tel {
    display: inline-flex;
  }

  .experience {
    flex-basis: 40%;
  }

  .moment {
    flex-basis: 32%;
  }

  .site-footer {
    padding-bottom: 1.75rem;
  }

  .brand-list__item {
    flex-basis: calc((100% - 3rem) / 4);
  }

  /* Sub pages */
  .feature-row {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 6rem);
  }

  .feature-row--reverse .feature-row__visual {
    order: 2;
  }

  .gallery__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
  }

  .gallery__item:nth-child(3n + 2) {
    margin-top: 3rem;
  }

  .contact,
  .location__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }
}

/* ---------- 1024: tablet landscape / small laptop ---------- */
@media (min-width: 1024px) {
  /* Two columns held to the dark left half, leaving the villa photograph open on the right */
  .location-pillars {
    width: min(100%, 56%);
    column-gap: clamp(2rem, 3.5vw, 3rem);
  }

  /* With the copy confined to the left, the scrim can fall away towards the photograph */
  .pillars-band::after {
    background: linear-gradient(90deg, rgb(11 34 54 / 0.94) 0%, rgb(11 34 54 / 0.88) 34%, rgb(11 34 54 / 0.6) 55%, rgb(11 34 54 / 0.25) 78%, rgb(11 34 54 / 0.12) 100%);
  }

  /* Hero */
  .hero {
    align-items: center;
    min-height: clamp(720px, 92vh, 960px);
    padding-bottom: clamp(10rem, 18vh, 13rem);
  }

  .hero__image {
    object-position: 40% 55%;
  }

  .hero__image--pavilion { object-position: 50% 55%; }
  .hero__image--terrace { object-position: 60% 50%; }
  .hero__image--bay { object-position: 50% 50%; }
  .hero__image--resort { object-position: 50% 58%; }

  .hero__veil {
    background:
      linear-gradient(180deg, rgb(11 34 54 / 0.45) 0%, rgb(11 34 54 / 0) 22%),
      linear-gradient(90deg, rgb(11 34 54 / 0.62) 0%, rgb(11 34 54 / 0.3) 38%, rgb(11 34 54 / 0) 62%),
      linear-gradient(0deg, rgb(11 34 54 / 0.35) 0%, rgb(11 34 54 / 0) 35%);
  }

  .hero__lead {
    max-width: 34rem;
  }

  .hero__lead br {
    display: inline;
  }

  .hero__aside {
    position: absolute;
    top: 50%;
    right: var(--gutter);
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 0.2rem;
    translate: 0 -60%;
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-align: center;
    text-transform: uppercase;
    color: rgb(250 248 243 / 0.85);
  }

  .hero__aside span {
    display: block;
  }

  .hero__aside::after {
    content: "";
    order: 1;
    width: 1px;
    height: 4.5rem;
    margin-block: 0.9rem 0.6rem;
    background: rgb(250 248 243 / 0.5);
  }

  .hero__aside img {
    order: 2;
  }

  /* Booking */
  .booking-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: center;
    gap: 0;
    padding: 1.3rem 1.5rem 1.3rem 0.5rem;
  }

  .booking-field {
    padding-inline: 1.5rem;
  }

  .booking-field + .booking-field {
    border-left: 1px solid var(--color-line);
  }

  .booking-field__control {
    border-bottom-color: transparent;
    padding-bottom: 0.25rem;
    min-height: 2.5rem;
  }

  .booking-panel__submit {
    padding-left: 1.5rem;
  }

  .booking-panel__button {
    width: auto;
    min-width: 15rem;
  }

  .booking-panel .guests-popover {
    left: 1.5rem;
    right: auto;
    width: 18rem;
  }

  /* Villas: centred heading on top; all five villas in view, two either side */
  .villa-carousel {
    --card-w: 36%;
    --next-x: 70%;
    --next-s: 0.76;
    --next-o: 1;
    --prev-x: -70%;
    --prev-s: 0.76;
    --prev-o: 1;
    --after-x: 120%;
    --after-s: 0.58;
    --after-o: 1;
    --before-x: -120%;
    --before-s: 0.58;
    --before-o: 1;
    --next-inset: 26%;
    --prev-inset: 26%;
    --after-inset: 31%;
    --before-inset: 31%;
  }

  .villa-carousel__dots {
    display: none;
  }

  /* Why */
  .why::after {
    inset: 0 0 0 45%;
    height: auto;
    background-image: url("../assets/images/common/sea-reflection-texture-tall-1100.webp");
    background-position: right center;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%);
    mask-image: linear-gradient(90deg, transparent, #000 60%);
  }

  /* Experiences: all text in the left column, sliding arches on the right */
  .experiences__layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    align-items: center;
    gap: clamp(2.5rem, 4vw, 3.5rem);
  }

  /* Three arches in view; the rest slide in with the arrows */
  .experience-list {
    --exp-gap: clamp(1.5rem, 2.5vw, 2.5rem);
    gap: var(--exp-gap);
    margin: 0;
    padding: 10px 12px 3rem 10px;
    scroll-padding-inline: 10px;
  }

  .experience {
    flex: 0 0 calc((100% - 2 * var(--exp-gap)) / 3);
    padding: 0;
  }

  .experience__media {
    aspect-ratio: 3 / 4.4;
  }

  .experience:nth-child(even) {
    margin-top: 2.5rem;
  }

  /* Daylight: text + five equal panels + side note */
  .daylight__layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 8.2fr) minmax(0, 0.8fr);
    align-items: center;
    gap: 2.5rem;
  }

  .daylight__ribbon {
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .moment {
    flex: 1 1 0;
    min-width: 0;
    height: clamp(260px, 23vw, 340px);
    border-radius: 0;
  }

  .moment:first-child { border-radius: 6px 0 0 6px; }
  .moment:last-child { border-radius: 0 6px 6px 0; }

  .moment:not(.is-active) .moment__image {
    filter: saturate(0.85) brightness(0.88);
  }

  .moment.is-active .moment__image {
    scale: 1.04;
  }

  /* Scroll story: the moment in play widens, the others narrow to slim previews */
  .daylight.is-scrolly .moment {
    height: clamp(300px, 48svh, 460px);
    transition: flex-grow 0.9s var(--ease-out);
  }

  .daylight.is-scrolly .moment.is-active {
    flex-grow: 2.2;
  }

  .daylight.is-scrolly .moment .moment__image {
    scale: 1.14;
  }

  /* Slim panels keep their label on one line (never split mid-word) */
  .daylight.is-scrolly .moment__time {
    overflow-wrap: normal;
    white-space: nowrap;
  }

  .daylight.is-scrolly .moment:not(.is-active) .moment__caption {
    padding-inline: 0.75rem;
  }

  .daylight.is-scrolly .moment:not(.is-active) .moment__time {
    font-size: clamp(0.95rem, 0.6rem + 0.5vw, 1.25rem);
  }

  /* Hidden subtitles take no room, so every slim label sits on the same line */
  .daylight.is-scrolly .moment:not(.is-active) .moment__title {
    height: 0;
    overflow: hidden;
  }

  .daylight.is-scrolly .moment__title {
    opacity: 0;
    transition: opacity var(--duration) var(--ease-out);
  }

  .daylight.is-scrolly .moment.is-active .moment__title {
    opacity: 1;
    transition-delay: 0.3s;
  }

  .side-note {
    display: grid;
    justify-items: center;
    gap: 0.3rem;
    font-size: 0.6rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.26em;
    text-align: center;
    text-transform: uppercase;
    color: var(--day-muted);
  }

  .side-note span {
    display: block;
  }

  .side-note img {
    margin-bottom: 0.75rem;
  }

  /* Offers: heading left, up to three offers right */
  .offers__layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    align-items: center;
    gap: 3rem;
  }

  .offer-list {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }

  /* All sister resorts in a single row */
  .brand-list {
    gap: 1.5rem clamp(1.75rem, 3.2vw, 3.5rem);
  }

  .brand-list__item {
    flex: none;
  }

  /* Location: text left, photograph across the band, glass list right */
  .location__media {
    position: absolute;
    inset: 0 0 0 30%;
    height: auto;
    margin: 0;
    /* Long, soft fade so the text sits on the pale band, not on the photograph */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.15) 30%, #000 60%, #000 82%, rgb(0 0 0 / 0.55) 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.15) 30%, #000 60%, #000 82%, rgb(0 0 0 / 0.55) 100%);
  }

  .location {
    padding-block: calc(clamp(3rem, 4.5vw, 4.25rem) + clamp(20px, 3vw, 56px)) clamp(3rem, 4.5vw, 4.25rem);
  }

  .location__layout {
    /* Wide text column so the introduction runs in fewer, longer lines */
    grid-template-columns: minmax(0, 5.6fr) minmax(0, 2fr) minmax(0, 4.4fr);
    align-items: center;
    min-height: clamp(300px, 24vw, 360px);
  }

  .location__aside {
    grid-column: 3;
    justify-items: end;
  }

  .location .lead {
    max-width: 40rem;
  }


  /* Over the photograph the panel becomes translucent glass */
  .journey {
    background: rgb(11 34 54 / 0.58);
  }

  /* Finale */
  .finale__layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
    align-items: center;
    text-align: left;
  }

  .finale__copy {
    justify-self: start;
  }

  .finale__brand {
    justify-self: end;
  }

  /* Sub pages */
  .location__grid {
    grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: center;
  }
}

/* ---------- 1280: laptop — full desktop navigation ---------- */
@media (min-width: 1280px) {
  .primary-nav {
    display: block;
  }

  /* The bar already shows the main navigation, so the ☰ panel lists only the more menu */
  .menu-panel__list--main {
    display: none;
  }

  .menu-panel__list--more {
    padding-top: 0;
    border-top: 0;
  }

  /* Wide screens: the ☰ menu drops down as a card under the ☰, right-aligned to the
     content edge, with the page still visible around it */
  .menu-panel {
    inset: auto;
    top: calc(var(--header-height) - 0.5rem);
    right: calc((100% - min(100% - 2 * var(--gutter), var(--container))) / 2);
    min-width: 17rem;
    padding: 1.5rem 2rem 1.75rem;
    border: 1px solid rgb(201 164 91 / 0.3);
    border-radius: 18px;
    box-shadow: 0 30px 60px -30px rgb(11 34 54 / 0.45), 0 8px 20px -12px rgb(11 34 54 / 0.2);
    overflow: visible;
  }

  .menu-panel__inner {
    width: auto;
    margin: 0;
  }

  .menu-panel__list--more .menu-panel__link {
    padding-block: 0.4rem;
    font-size: 1.05rem;
  }

  .primary-nav__list {
    display: flex;
    gap: clamp(1.25rem, 2vw, 2.25rem);
  }

  .primary-nav__link {
    padding: 0.75rem 0;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .primary-nav__link::after {
    bottom: 0.45rem;
    background-color: currentColor;
  }

  .is-scrolled .primary-nav__link::after {
    background-color: var(--color-gold);
  }

  .site-header__actions {
    gap: 1rem;
  }

  /* Footer legal line fits on one row from here up */
  .site-footer__legal ul {
    flex-direction: row;
  }

  .site-footer__legal li + li::before {
    display: inline-block;
  }
}

/* ---------- 1920: large desktop ---------- */
@media (min-width: 1920px) {
  :root {
    --container: 1600px;
    --text-3xl: 5rem;
    --text-2xl: 3rem;
  }

  .hero {
    min-height: 960px;
  }
}