/* ==========================================================================
   Airport Nest Inn Fiji — main-nestinn.css
   Written for the Nest Inn site. Bootstrap 5.3.3 is loaded from CDN first;
   everything below is our own layer. All classes use the `nest-` prefix.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* ---- Dreamy Island Paradise palette ----------------------------------
     Waking at dawn in Fiji: soft light over the Sleeping Giant, mist on the
     Sabeto range, turquoise lagoon air, frangipani. Airy and luminous. */

  /* Base / atmosphere */
  --nest-shell: #fbf7f1;        /* warm shell white — page base            */
  --nest-mist: #eef4f2;         /* morning mist — alternating sections     */
  --nest-white: #ffffff;

  /* Water */
  --nest-lagoon: #7fc7c9;
  --nest-lagoon-rgb: 127, 199, 201;
  --nest-lagoon-deep: #2f8f96;

  /* Light / warmth */
  --nest-coral: #f2a08b;        /* dawn coral                              */
  --nest-gold: #e9c98f;         /* soft gold — primary decorative accent   */
  --nest-line: #a48361;         /* muted bronze — fine lines / details ONLY*/

  /* Lush / ink */
  --nest-palm: #5f8f6a;
  --nest-ink: #123332;          /* deep tropical ink — headings/text       */
  --nest-ink-rgb: 18, 51, 50;
  --nest-body: #3f5b58;         /* softened body copy                      */

  /* ---- Legacy token names remapped onto the new system ------------------
     Existing components reference these names; repointing them recolours the
     whole site at once. The interactive/text accent leans on deep lagoon so
     contrast stays AA; gold is deployed deliberately for fills/flourishes. */
  --nest-bronze: var(--nest-lagoon-deep);   /* links, eyebrows, nav accent */
  --nest-bronze-rgb: 47, 143, 150;
  --nest-bronze-deep: #226e74;
  --nest-copper: var(--nest-coral);
  --nest-terracotta: var(--nest-coral);
  --nest-sage: var(--nest-mist);            /* alt-section background       */
  --nest-black: var(--nest-ink);
  --nest-star: var(--nest-gold);            /* guest-favourite stars        */

  /* Type */
  --nest-font-head: "Marcellus", "Times New Roman", serif;
  --nest-font-body: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nest-fs-body: 16px;
  --nest-lh-body: 1.8;
  --nest-tracking-eyebrow: 0.28em;

  /* Rhythm — more air; the page should breathe */
  --nest-space-xl: clamp(96px, 12vw, 200px);
  --nest-space-lg: clamp(80px, 9vw, 140px);
  --nest-space-md: clamp(56px, 6vw, 96px);

  /* Shape */
  --nest-radius: 18px;
  --nest-radius-2xl: 28px;
  --nest-arch: 10px 10px / 10px 10px;  /* arch photo frame */

  /* Effects */
  --nest-shadow: 0 18px 40px -24px rgba(18, 51, 50, 0.28);
  --nest-shadow-lg: 0 30px 70px -30px rgba(18, 51, 50, 0.32);
  --nest-shadow-soft: 0 24px 60px -28px rgba(18, 51, 50, 0.26);
  --nest-hairline: 1px solid rgba(var(--nest-lagoon-rgb), 0.28);
  --nest-ease: 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  --nest-ease-float: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Dawn-sky atmosphere gradient (shell white → coral → lagoon) */
  --nest-dawn: linear-gradient(
    180deg,
    #fbf7f1 0%,
    #fbeee6 34%,
    #f6d9cf 60%,
    #dcece9 100%
  );

  /* Hero scrim — kept dark so white hero type stays legible over photos */
  --nest-scrim: linear-gradient(
    180deg,
    rgba(9, 26, 25, 0.66) 0%,
    rgba(9, 26, 25, 0.34) 45%,
    rgba(9, 26, 25, 0.68) 100%
  );
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body.nest-body {
  background-color: var(--nest-shell);
  color: var(--nest-body);
  font-family: var(--nest-font-body);
  font-size: var(--nest-fs-body);
  font-weight: 400;
  line-height: var(--nest-lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
/* Mobile / tablet safety net: clip (not hidden) so a stray wide child can never
   create a horizontal scrollbar. Scoped below the desktop pin breakpoint so it
   can never interact with ScrollTrigger's position:fixed pinning (which only
   runs at >=992px), and clip keeps position:sticky / Lenis working. */
@media (max-width: 991.98px) {
  body.nest-body { overflow-x: clip; }
}

/* :where() keeps this at zero specificity so any single-class component rule
   (.nest-hero__title, .nest-footer__title, …) can still override the colour.
   Without it these defaults win and paint dark headings onto dark panels. */
:where(.nest-body) h1,
:where(.nest-body) h2,
:where(.nest-body) h3,
:where(.nest-body) h4,
:where(.nest-body) h5,
:where(.nest-body) h6 {
  color: var(--nest-ink);
  font-family: var(--nest-font-head);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.nest-body a {
  color: var(--nest-bronze);
  text-decoration: none;
  transition: color var(--nest-ease);
}
.nest-body a:hover {
  color: var(--nest-ink);
}

.nest-body img {
  max-width: 100%;
  height: auto;
}

.nest-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Keyboard focus — the reference theme had none; this is a genuine a11y need */
.nest-body :focus-visible {
  outline: 2px solid var(--nest-bronze);
  outline-offset: 3px;
}

.nest-skip {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 2000;
  background: var(--nest-bronze);
  color: #fff;
  padding: 10px 20px;
  border-radius: 0 0 6px 6px;
  transition: top var(--nest-ease);
}
.nest-skip:focus {
  top: 0;
  color: #fff;
}

/* --------------------------------------------------------------------------
   3. Utilities
   -------------------------------------------------------------------------- */
.nest-container {
  max-width: 1200px;
  /* Must be >= half the largest Bootstrap gutter used inside it (g-5 = 3rem,
     giving rows -24px side margins) or those rows overflow the viewport. */
  padding-inline: 24px;
  margin-inline: auto;
  width: 100%;
}
.nest-container--wide {
  max-width: 1560px;
}

.nest-sec {
  padding-block: var(--nest-space-lg);
  position: relative;
}
.nest-sec--tall {
  padding-block: var(--nest-space-xl);
}
.nest-sec--sage {
  background: var(--nest-sage);
}
.nest-sec--mist {
  background: var(--nest-mist);
}
.nest-sec--ink {
  background: var(--nest-ink);
}
.nest-sec--flush-top {
  padding-top: 0;
}

.nest-bg-cover {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.nest-eyebrow {
  color: var(--nest-bronze);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--nest-font-head);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.22em;
  line-height: 1;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.nest-eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}
.nest-eyebrow--center::after {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}
.nest-eyebrow--light {
  color: rgba(255, 255, 255, 0.75);
}

/* --------------------------------------------------------------------------
   4. Section headings + watermark
   -------------------------------------------------------------------------- */
.nest-sec-head {
  margin-bottom: 54px;
  position: relative;
  z-index: 2;
}
.nest-sec-head--center {
  text-align: center;
}
.nest-sec-head--center .nest-eyebrow {
  justify-content: center;
}

.nest-sec-title {
  font-size: clamp(32px, 4.4vw, 50px);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 0;
}
.nest-sec-title--lead {
  font-size: clamp(38px, 5.6vw, 68px);
}

.nest-sec-text {
  font-size: 18px;
  line-height: 1.56;
  margin: 24px 0 0;
}

.nest-sec-head--light .nest-sec-title,
.nest-on-dark h1,
.nest-on-dark h2,
.nest-on-dark h3,
.nest-on-dark h4 {
  color: var(--nest-white);
}
.nest-sec-head--light .nest-sec-text,
.nest-on-dark p {
  color: rgba(255, 255, 255, 0.72);
}

/* Oversized masked watermark word — the theme's signature background heading */
.nest-watermark {
  font-family: var(--nest-font-head);
  font-size: clamp(64px, 13vw, 130px);
  font-weight: 400;
  line-height: 1;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  color: rgba(24, 24, 32, 0.1);
  pointer-events: none;
  user-select: none;
}
.nest-watermark--bronze {
  display: inline-block;
  color: var(--nest-bronze);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.7) -24%,
    rgba(20, 11, 2, 0) 84%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: var(--nest-bronze);
  -webkit-mask-image: linear-gradient(to bottom, rgb(0, 0, 0), rgba(0, 0, 0, 0));
  mask-image: linear-gradient(to bottom, rgb(0, 0, 0), rgba(0, 0, 0, 0));
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.nest-watermark--behind {
  position: absolute;
  left: 50%;
  top: -0.32em;
  translate: -50% 0;
  width: 100%;
  /* Must be negative: at z-index 0 a positioned element still paints above the
     static heading text. .nest-sec-head is a stacking context, so this stays
     in front of the section background. */
  z-index: -1;
}

/* --------------------------------------------------------------------------
   5. Buttons — three-part pill with arrow caps that swap side on hover
   -------------------------------------------------------------------------- */
.nest-btn {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding-right: 52px;
  border: 0;
  background: none;
  vertical-align: middle;
  transition: opacity var(--nest-ease);
}

.nest-btn__label {
  background: var(--nest-white);
  color: var(--nest-ink);
  font-family: var(--nest-font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
  padding: 13px 30px;
  border-radius: 100px;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
  z-index: 2;
  transition: transform var(--nest-ease), background-color var(--nest-ease),
    color var(--nest-ease);
}

.nest-btn__cap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--nest-white);
  color: var(--nest-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 1;
  transition: scale var(--nest-ease), background-color var(--nest-ease),
    color var(--nest-ease);
}
.nest-btn__cap--l {
  left: 0;
  scale: 0;
}
.nest-btn__cap--r {
  right: 0;
  scale: 1;
}

.nest-btn:hover .nest-btn__label,
.nest-btn:focus-visible .nest-btn__label {
  transform: translateX(52px);
}
.nest-btn:hover .nest-btn__cap--l,
.nest-btn:focus-visible .nest-btn__cap--l {
  scale: 1;
}
.nest-btn:hover .nest-btn__cap--r,
.nest-btn:focus-visible .nest-btn__cap--r {
  scale: 0;
}

/* Solid variant — soft gold fill with deep-ink type (the primary CTA).
   Gold is the accent of the dreamy system; ink keeps it well above AA. */
.nest-btn--solid .nest-btn__label,
.nest-btn--solid .nest-btn__cap {
  background: var(--nest-gold);
  color: var(--nest-ink);
}
.nest-btn--solid:hover .nest-btn__label,
.nest-btn--solid:hover .nest-btn__cap {
  background: var(--nest-coral);
  color: var(--nest-ink);
}

/* Ink variant */
.nest-btn--ink .nest-btn__label,
.nest-btn--ink .nest-btn__cap {
  background: var(--nest-ink);
  color: var(--nest-white);
}
.nest-btn--ink:hover .nest-btn__label,
.nest-btn--ink:hover .nest-btn__cap {
  background: var(--nest-bronze);
}

/* Outline variant, for light surfaces */
.nest-btn--outline .nest-btn__label {
  background: transparent;
  border: 1px solid rgba(var(--nest-ink-rgb), 0.18);
  color: var(--nest-ink);
  padding-block: 12px;
}
.nest-btn--outline .nest-btn__cap {
  background: var(--nest-bronze);
  color: var(--nest-white);
}
.nest-btn--outline:hover .nest-btn__label {
  background: var(--nest-bronze);
  border-color: var(--nest-bronze);
  color: var(--nest-white);
}

.nest-btn--block {
  width: 100%;
}
.nest-btn--block .nest-btn__label {
  flex: 1;
  text-align: center;
}

/* Plain text link with a sliding underline */
.nest-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--nest-font-head);
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nest-ink);
  padding-bottom: 4px;
  position: relative;
}
.nest-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--nest-bronze);
  transform-origin: right;
  transform: scaleX(0);
  transition: transform var(--nest-ease);
}
.nest-link:hover {
  color: var(--nest-bronze);
}
.nest-link:hover::after {
  transform-origin: left;
  transform: scaleX(1);
}
.nest-link i {
  transition: translate var(--nest-ease);
}
.nest-link:hover i {
  translate: 5px 0;
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.nest-header {
  position: absolute;
  inset: 25px 0 auto;
  width: 100%;
  z-index: 999;
}

/* The logo, a seven-item nav, the phone number and the CTA need ~1300px and do
   not fit the 1200px content column — at 1200-1500px they used to spill past
   the viewport and force a horizontal scrollbar. Give the bar its own width. */
.nest-header .nest-container,
.nest-sticky .nest-container {
  max-width: 1560px;
}

.nest-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nest-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.nest-logo img {
  width: 62px;
  height: auto;
  flex-shrink: 0;
}
.nest-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.nest-logo__name {
  font-family: var(--nest-font-head);
  font-size: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nest-white);
  white-space: nowrap;
}
.nest-logo__sub {
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--nest-white);
}
.nest-logo--ink .nest-logo__name {
  color: var(--nest-ink);
}

/* Primary nav */
.nest-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nest-nav__link {
  color: var(--nest-white);
  font-family: var(--nest-font-head);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 30px;
  position: relative;
  white-space: nowrap;
}
.nest-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 1px;
  background: var(--nest-bronze);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--nest-ease);
}
.nest-nav__link:hover,
.nest-nav__link[aria-current="page"] {
  color: var(--nest-bronze);
}
.nest-nav__link:hover::after,
.nest-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nest-header__actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nest-header__call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--nest-white);
  font-size: 15px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.nest-header__call i {
  color: var(--nest-bronze);
}
.nest-header__call:hover {
  color: var(--nest-bronze);
}

.nest-burger {
  width: 46px;
  height: 46px;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: var(--nest-white);
  font-size: 16px;
  flex-shrink: 0;
  transition: background-color var(--nest-ease);
}
.nest-burger:hover {
  background: var(--nest-bronze);
  border-color: var(--nest-bronze);
}

/* Sticky clone — dark bar that drops in on scroll */
.nest-sticky {
  position: fixed;
  inset: 0 0 auto;
  background: var(--nest-ink);
  padding-block: 14px;
  z-index: 1000;
  translate: 0 -101%;
  /* translate alone leaves this duplicate nav in the tab order while it sits
     off-screen; visibility takes it out until it actually drops in. */
  visibility: hidden;
  transition: translate var(--nest-ease), visibility var(--nest-ease);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.nest-sticky.is-stuck {
  translate: 0 0;
  visibility: visible;
}
.nest-sticky .nest-logo img {
  width: 50px;
}

/* Inner-page header sits on the banner scrim, so it needs no variant */

/* --------------------------------------------------------------------------
   7. Mobile drawer
   -------------------------------------------------------------------------- */
.nest-drawer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  visibility: hidden;
  pointer-events: none;
}
.nest-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.nest-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 24, 0.6);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--nest-ease);
}
.nest-drawer.is-open .nest-drawer__scrim {
  opacity: 1;
}

.nest-drawer__panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(330px, 86vw);
  background: var(--nest-ink);
  padding: 28px 26px 40px;
  overflow-y: auto;
  translate: -100% 0;
  transition: translate var(--nest-ease);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.nest-drawer.is-open .nest-drawer__panel {
  translate: 0 0;
}

.nest-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nest-drawer__close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: none;
  color: var(--nest-white);
  flex-shrink: 0;
  transition: background-color var(--nest-ease);
}
.nest-drawer__close:hover {
  background: var(--nest-bronze);
  border-color: var(--nest-bronze);
}

.nest-drawer__nav li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.nest-drawer__nav a {
  display: block;
  color: var(--nest-white);
  font-family: var(--nest-font-head);
  font-size: 17px;
  letter-spacing: 0.06em;
  padding: 14px 0;
}
.nest-drawer__nav a:hover,
.nest-drawer__nav a[aria-current="page"] {
  color: var(--nest-bronze);
  padding-left: 8px;
}

.nest-drawer__meta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 15px;
}
.nest-drawer__meta a {
  color: rgba(255, 255, 255, 0.66);
}
.nest-drawer__meta a:hover {
  color: var(--nest-bronze);
}
.nest-drawer__meta i {
  color: var(--nest-bronze);
  width: 18px;
  margin-right: 8px;
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.nest-hero {
  position: relative;
  overflow: hidden;
}
.nest-hero__slide {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 92vh, 900px);
  padding-block: 180px 120px;
}
.nest-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.nest-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nest-scrim);
}
/* Slow zoom on the active slide only */
.nest-hero .swiper-slide-active .nest-hero__bg {
  animation: nest-kenburns 9s ease-out forwards;
}
@keyframes nest-kenburns {
  from {
    scale: 1;
  }
  to {
    scale: 1.09;
  }
}

.nest-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
}

.nest-hero__stars {
  color: var(--nest-star);
  display: flex;
  gap: 6px;
  font-size: 13px;
  margin-bottom: 22px;
}

.nest-hero__title {
  color: var(--nest-white);
  font-size: clamp(38px, 7.4vw, 92px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.nest-hero__text {
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  max-width: 620px;
  margin-bottom: 38px;
}

.nest-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: center;
}

/* Slider chrome */
.nest-hero__nav {
  position: absolute;
  right: max(24px, 4vw);
  bottom: 48px;
  z-index: 5;
  display: flex;
  gap: 12px;
}
.nest-arrow {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  color: var(--nest-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--nest-ease), color var(--nest-ease),
    border-color var(--nest-ease);
}
.nest-arrow:hover {
  background: var(--nest-bronze);
  border-color: var(--nest-bronze);
  color: var(--nest-white);
}
.nest-arrow--ink {
  border-color: rgba(var(--nest-ink-rgb), 0.16);
  background: var(--nest-white);
  color: var(--nest-ink);
}
.nest-arrow--ink:hover {
  background: var(--nest-bronze);
  border-color: var(--nest-bronze);
  color: var(--nest-white);
}

.nest-hero .swiper-pagination {
  bottom: 60px !important;
  left: max(24px, 4vw) !important;
  width: auto !important;
  display: flex;
  gap: 10px;
  z-index: 5;
}
.nest-hero .swiper-pagination-bullet {
  width: 30px;
  height: 3px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
  transition: background-color var(--nest-ease), width var(--nest-ease);
}
.nest-hero .swiper-pagination-bullet-active {
  background: var(--nest-bronze);
  width: 52px;
}

/* Vertical "3 minutes from the terminal" rail */
.nest-hero__rail {
  position: absolute;
  left: max(18px, 2.4vw);
  top: 50%;
  translate: 0 -50%;
  z-index: 4;
  writing-mode: vertical-rl;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 18px;
}
.nest-hero__rail::after {
  content: "";
  width: 1px;
  height: 70px;
  background: linear-gradient(to bottom, var(--nest-bronze), transparent);
}

/* --------------------------------------------------------------------------
   9. Page banner (inner pages)
   -------------------------------------------------------------------------- */
.nest-banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(360px, 52vh, 520px);
  padding-block: 180px 70px;
  overflow: hidden;
}
.nest-banner__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.nest-banner__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(4, 6, 24, 0.72) 0%,
    rgba(4, 6, 24, 0.45) 55%,
    rgba(4, 6, 24, 0.78) 100%
  );
}
.nest-banner__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
.nest-banner__title {
  color: var(--nest-white);
  font-size: clamp(34px, 5.6vw, 66px);
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.nest-banner__text {
  color: rgba(255, 255, 255, 0.76);
  font-size: 18px;
  max-width: 640px;
  margin-bottom: 0;
}

.nest-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.nest-crumbs a {
  color: rgba(255, 255, 255, 0.6);
}
.nest-crumbs a:hover {
  color: var(--nest-bronze);
}
.nest-crumbs li:not(:last-child)::after {
  content: "/";
  margin-left: 10px;
  color: rgba(255, 255, 255, 0.3);
}
.nest-crumbs li {
  display: inline-flex;
  align-items: center;
}
.nest-crumbs [aria-current="page"] {
  color: var(--nest-bronze);
}

/* --------------------------------------------------------------------------
   10. Booking / enquiry bar
   -------------------------------------------------------------------------- */
.nest-booking {
  position: relative;
  z-index: 20;
  margin-top: -62px;
}
.nest-booking__card {
  background: var(--nest-white);
  box-shadow: var(--nest-shadow-lg);
  padding: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: end;
}
.nest-booking__field {
  padding-inline: 26px;
  border-right: 1px solid rgba(var(--nest-ink-rgb), 0.1);
}
.nest-booking__field:first-child {
  padding-left: 4px;
}
.nest-booking__field:nth-child(3) {
  border-right: 0;
}
.nest-booking__label {
  display: block;
  font-family: var(--nest-font-head);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nest-bronze);
  margin-bottom: 8px;
}
.nest-booking__input {
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  color: var(--nest-ink);
  font-family: var(--nest-font-head);
  font-size: 19px;
  line-height: 1.4;
}
.nest-booking__input:focus {
  outline: none;
}
.nest-booking__input::placeholder {
  color: rgba(var(--nest-ink-rgb), 0.45);
}
select.nest-booking__input {
  appearance: none;
  cursor: pointer;
}
.nest-booking__submit {
  padding-left: 26px;
  display: flex;
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   11. About / intro collage
   -------------------------------------------------------------------------- */
.nest-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 24px;
  position: relative;
}
.nest-collage__item {
  overflow: hidden;
  position: relative;
}
.nest-collage__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: scale 0.9s var(--nest-ease);
}
.nest-collage__item:hover img {
  scale: 1.06;
}
.nest-collage__item--tall {
  grid-row: span 2;
  min-height: 480px;
}
.nest-collage__item--short {
  min-height: 228px;
}

/* Floating stat badge */
.nest-stat {
  position: absolute;
  right: -18px;
  bottom: 40px;
  background: var(--nest-bronze);
  color: var(--nest-white);
  padding: 24px 28px;
  max-width: 210px;
  box-shadow: var(--nest-shadow-lg);
  z-index: 3;
}
.nest-stat__num {
  font-family: var(--nest-font-head);
  font-size: 42px;
  line-height: 1;
  display: block;
  margin-bottom: 6px;
  color: var(--nest-white);
}
.nest-stat__label {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  opacity: 0.9;
}

/* Tick list */
.nest-ticks {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 30px 0 38px;
}
.nest-ticks li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: var(--nest-ink);
  font-size: 17px;
  line-height: 1.6;
}
.nest-ticks i {
  color: var(--nest-bronze);
  font-size: 13px;
  margin-top: 7px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   12. Feature cards
   -------------------------------------------------------------------------- */
.nest-feature {
  background: var(--nest-white);
  box-shadow: var(--nest-shadow);
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 32px 30px;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: transform var(--nest-ease), box-shadow var(--nest-ease);
}
.nest-feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--nest-bronze);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--nest-ease);
}
.nest-feature:hover {
  transform: translateY(-6px);
  box-shadow: var(--nest-shadow-lg);
}
.nest-feature:hover::before {
  transform: scaleY(1);
  transform-origin: top;
}
.nest-feature__icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(var(--nest-bronze-rgb), 0.12);
  color: var(--nest-bronze);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  flex-shrink: 0;
  transition: background-color var(--nest-ease), color var(--nest-ease);
}
.nest-feature:hover .nest-feature__icon {
  background: var(--nest-bronze);
  color: var(--nest-white);
}
.nest-feature__title {
  font-size: 21px;
  margin-bottom: 8px;
}
.nest-feature__text {
  margin-bottom: 0;
  font-size: 15.5px;
  line-height: 1.65;
}

/* Compact amenity chip */
.nest-amenity {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--nest-white);
  border: var(--nest-hairline);
  height: 100%;
  transition: border-color var(--nest-ease), transform var(--nest-ease);
}
.nest-amenity:hover {
  border-color: var(--nest-bronze);
  transform: translateY(-4px);
}
.nest-amenity i {
  color: var(--nest-bronze);
  font-size: 18px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.nest-amenity span {
  font-size: 15px;
  line-height: 1.45;
  color: var(--nest-ink);
}
.nest-amenity--sage {
  background: var(--nest-sage);
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   13. Room cards
   -------------------------------------------------------------------------- */
.nest-room {
  background: var(--nest-white);
  border: var(--nest-hairline);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color var(--nest-ease), box-shadow var(--nest-ease),
    transform var(--nest-ease);
}
.nest-room:hover {
  border-color: transparent;
  box-shadow: var(--nest-shadow-lg);
  transform: translateY(-6px);
}
.nest-room__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}
.nest-room__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: scale 0.9s var(--nest-ease);
}
.nest-room:hover .nest-room__media img {
  scale: 1.07;
}
.nest-room__tag {
  position: absolute;
  left: 20px;
  top: 20px;
  background: var(--nest-white);
  color: var(--nest-ink);
  font-family: var(--nest-font-head);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 16px;
  z-index: 2;
}
.nest-room__body {
  padding: 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.nest-room__title {
  font-size: 26px;
  margin-bottom: 12px;
}
.nest-room__title a {
  color: inherit;
}
.nest-room__title a:hover {
  color: var(--nest-bronze);
}
.nest-room__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: var(--nest-hairline);
}
.nest-room__spec {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  color: var(--nest-body);
}
.nest-room__spec i {
  color: var(--nest-bronze);
  font-size: 14px;
}
.nest-room__text {
  font-size: 15.5px;
  line-height: 1.68;
  margin-bottom: 26px;
}
.nest-room__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.nest-room__price {
  line-height: 1.2;
}
.nest-room__price small {
  display: block;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nest-body);
  margin-bottom: 4px;
}
.nest-room__price strong {
  font-family: var(--nest-font-head);
  font-size: 22px;
  font-weight: 400;
  color: var(--nest-bronze);
}

/* --------------------------------------------------------------------------
   14. Split feature (image one side, copy the other)
   -------------------------------------------------------------------------- */
.nest-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
}
.nest-split__media {
  position: relative;
  min-height: 560px;
  overflow: hidden;
}
.nest-split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nest-split__body {
  padding: clamp(40px, 5vw, 90px);
}
.nest-split--flip .nest-split__media {
  order: 2;
}
.nest-split__badge {
  position: absolute;
  left: 0;
  top: 40px;
  background: var(--nest-bronze);
  color: var(--nest-white);
  font-family: var(--nest-font-head);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 12px 24px;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   15. Experience cards
   -------------------------------------------------------------------------- */
.nest-exp {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.nest-exp img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: scale 0.9s var(--nest-ease);
}
.nest-exp::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(4, 6, 24, 0) 30%,
    rgba(4, 6, 24, 0.82) 100%
  );
  transition: background var(--nest-ease);
}
.nest-exp:hover img {
  scale: 1.07;
}
.nest-exp:hover::after {
  background: linear-gradient(
    180deg,
    rgba(4, 6, 24, 0.1) 10%,
    rgba(var(--nest-bronze-rgb), 0.32) 60%,
    rgba(4, 6, 24, 0.9) 100%
  );
}
.nest-exp__body {
  padding: 34px 30px;
  width: 100%;
}
.nest-exp__num {
  font-family: var(--nest-font-head);
  font-size: 13px;
  letter-spacing: 0.24em;
  color: var(--nest-bronze);
  display: block;
  margin-bottom: 10px;
}
.nest-exp__title {
  color: var(--nest-white);
  font-size: 25px;
  margin-bottom: 10px;
}
.nest-exp__text {
  color: rgba(255, 255, 255, 0.76);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--nest-ease), opacity var(--nest-ease),
    margin var(--nest-ease);
}
.nest-exp:hover .nest-exp__text,
.nest-exp:focus-within .nest-exp__text {
  max-height: 220px;
  opacity: 1;
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   16. Gallery
   -------------------------------------------------------------------------- */
.nest-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.nest-gallery__item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: block;
}
.nest-gallery__item--wide {
  grid-column: span 2;
}
.nest-gallery__item--tall {
  grid-row: span 2;
  aspect-ratio: 2 / 3;
}
.nest-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: scale 0.9s var(--nest-ease);
}
.nest-gallery__item::after {
  content: "\f00e";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--nest-bronze-rgb), 0.82);
  color: var(--nest-white);
  font-size: 22px;
  opacity: 0;
  transition: opacity var(--nest-ease);
}
.nest-gallery__item:hover img {
  scale: 1.08;
}
.nest-gallery__item:hover::after,
.nest-gallery__item:focus-visible::after {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Masonry variant — add .nest-gallery--masonry to any .nest-gallery.
   Photos keep their natural proportions and pack into columns like a photo
   wall, instead of being cropped to a uniform grid. CSS multi-column is used
   so it needs no JS and reflows cleanly when the filter hides items.
   Used on the full gallery page and the home + restaurant photo sections.
   -------------------------------------------------------------------------- */
.nest-gallery--masonry {
  display: block;
  column-count: 4;
  column-gap: 14px;
}
.nest-gallery--masonry .nest-gallery__item {
  width: 100%;
  aspect-ratio: auto;          /* let each image set its own height */
  margin: 0 0 14px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid; /* Safari */
}
.nest-gallery--masonry .nest-gallery__item img {
  height: auto;                /* natural height, no crop */
}
@media (max-width: 1199.98px) {
  .nest-gallery--masonry { column-count: 3; }
}
@media (max-width: 767.98px) {
  .nest-gallery--masonry { column-count: 2; }
}
@media (max-width: 479.98px) {
  .nest-gallery--masonry { column-count: 1; }
}

/* Filter pills */
.nest-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 44px;
}
.nest-filter {
  background: none;
  border: var(--nest-hairline);
  border-radius: 100px;
  color: var(--nest-body);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 24px;
  transition: all var(--nest-ease);
}
.nest-filter:hover {
  border-color: var(--nest-bronze);
  color: var(--nest-bronze);
}
.nest-filter.is-active {
  background: var(--nest-bronze);
  border-color: var(--nest-bronze);
  color: var(--nest-white);
}
.nest-gallery__item.is-hidden {
  display: none;
}

/* --------------------------------------------------------------------------
   17. Video showcase — the clips are 9:16 phone footage, so they are laid out
   as upright reels rather than stretched into a letterboxed banner.
   -------------------------------------------------------------------------- */
.nest-videos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  /* max-width: 940px; */
  margin-inline: auto;
}
.nest-video {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--nest-black);
  aspect-ratio: 9 / 16;
}
.nest-video__el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Keeps the caption readable over bright frames. */
.nest-video::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(4, 6, 24, 0) 0%, rgba(4, 6, 24, 0.85) 100%);
  pointer-events: none;
}
.nest-video__cap {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 18px;
  z-index: 2;
  color: var(--nest-white);
  font-family: var(--nest-font-head);
  font-size: 16px;
  line-height: 1.4;
  pointer-events: none;
}
.nest-video__toggle,
.nest-video__mute {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(4, 6, 24, 0.45);
  backdrop-filter: blur(6px);
  color: var(--nest-white);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--nest-ease), border-color var(--nest-ease);
}
/* Mute/unmute sits just under the play/pause control. */
.nest-video__mute {
  top: 62px;
}
.nest-video__toggle:hover,
.nest-video__mute:hover,
.nest-video__mute.is-on {
  background: var(--nest-bronze);
  border-color: var(--nest-bronze);
}

/* --------------------------------------------------------------------------
   18. CTA band
   -------------------------------------------------------------------------- */
.nest-cta {
  position: relative;
  overflow: hidden;
  padding-block: var(--nest-space-lg);
  text-align: center;
}
.nest-cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.nest-cta__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 24, 0.76);
}
.nest-cta__inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin-inline: auto;
}
.nest-cta__title {
  color: var(--nest-white);
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.16;
  margin-bottom: 18px;
}
.nest-cta__text {
  color: rgba(255, 255, 255, 0.76);
  font-size: 18px;
  margin-bottom: 36px;
}
.nest-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   19. Contact
   -------------------------------------------------------------------------- */
.nest-info {
  background: var(--nest-white);
  border: var(--nest-hairline);
  padding: 36px 30px;
  height: 100%;
  text-align: center;
  transition: border-color var(--nest-ease), transform var(--nest-ease);
}
.nest-info:hover {
  border-color: var(--nest-bronze);
  transform: translateY(-6px);
}
.nest-info__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(var(--nest-bronze-rgb), 0.12);
  color: var(--nest-bronze);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 20px;
}
.nest-info__title {
  font-size: 20px;
  margin-bottom: 10px;
}
.nest-info p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 0;
  color: var(--nest-body);
}
.nest-info a {
  display: inline-block;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 0;
  color: var(--nest-body);
  min-height: 24px;
  padding-block: 2px;
}
.nest-info a:hover {
  color: var(--nest-bronze);
}

.nest-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.nest-form__group--full {
  grid-column: 1 / -1;
}
.nest-form label {
  display: block;
  font-family: var(--nest-font-head);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nest-bronze);
  margin-bottom: 8px;
}
.nest-form input,
.nest-form select,
.nest-form textarea {
  width: 100%;
  background: var(--nest-white);
  border: var(--nest-hairline);
  border-radius: 0;
  color: var(--nest-ink);
  font-family: var(--nest-font-body);
  font-size: 16px;
  padding: 14px 18px;
  transition: border-color var(--nest-ease);
}
.nest-form textarea {
  min-height: 150px;
  resize: vertical;
}
.nest-form input:focus,
.nest-form select:focus,
.nest-form textarea:focus {
  border-color: var(--nest-bronze);
  outline: none;
}
.nest-form__note {
  font-size: 14px;
  color: var(--nest-body);
  margin: 0;
}
.nest-form__status {
  background: var(--nest-white);
  border-left: 3px solid var(--nest-bronze);
  color: var(--nest-ink);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 14px;
  padding: 16px 20px;
}
.nest-form__status[hidden] {
  display: none;
}
.nest-form__status.is-error {
  border-left-color: var(--nest-coral);
  background: rgba(242, 160, 139, 0.12);
}

.nest-map-sec {
  line-height: 0;
}
.nest-map {
  width: 100%;
  height: 460px;
  border: 0;
  display: block;
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--nest-ease);
}
.nest-map:hover {
  filter: grayscale(0);
}

/* --------------------------------------------------------------------------
   20. Footer
   -------------------------------------------------------------------------- */
.nest-footer {
  background: var(--nest-ink);
  color: rgba(255, 255, 255, 0.62);
  position: relative;
  padding-top: clamp(64px, 8vw, 110px);
}
.nest-footer__grid {
  display: grid;
  grid-template-columns: 2.1fr 1fr 1fr 1.5fr;
  gap: 40px;
  padding-bottom: 64px;
}
.nest-footer__about {
  font-size: 15.5px;
  line-height: 1.75;
  margin: 22px 0 26px;
  max-width: 380px;
}
.nest-footer__title {
  color: var(--nest-white);
  font-size: 20px;
  margin-bottom: 22px;
}
.nest-footer__links li + li {
  margin-top: 12px;
}
.nest-footer__links a {
  color: rgba(255, 255, 255, 0.62);
  font-size: 15.5px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color var(--nest-ease), gap var(--nest-ease);
}
.nest-footer__links a::before {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--nest-bronze);
}
.nest-footer__links a:hover {
  color: var(--nest-white);
  gap: 15px;
}

.nest-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 15.5px;
  line-height: 1.7;
}
.nest-footer__contact li + li {
  margin-top: 18px;
}
.nest-footer__contact i {
  color: var(--nest-bronze);
  margin-top: 7px;
  flex-shrink: 0;
  width: 16px;
}
.nest-footer__contact a {
  color: rgba(255, 255, 255, 0.62);
}
.nest-footer__contact a:hover {
  color: var(--nest-white);
}

.nest-socials {
  display: flex;
  gap: 10px;
}
.nest-socials a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: all var(--nest-ease);
}
.nest-socials a:hover {
  background: var(--nest-bronze);
  border-color: var(--nest-bronze);
  color: var(--nest-white);
  translate: 0 -4px;
}
/* Font Awesome Free ships no TripAdvisor glyph, so that one is an inline SVG. */
.nest-socials svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.nest-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14.5px;
}
.nest-footer__bottom a {
  color: rgba(255, 255, 255, 0.62);
}
.nest-footer__bottom a:hover {
  color: var(--nest-bronze);
}
.nest-totop {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
  min-height: 24px;
  padding-block: 4px;
}
.nest-totop i {
  transition: translate var(--nest-ease);
}
.nest-totop:hover i {
  translate: 0 -4px;
}

/* Floating back-to-top */
.nest-scrolltop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: var(--nest-bronze);
  color: var(--nest-white);
  z-index: 900;
  opacity: 0;
  translate: 0 20px;
  pointer-events: none;
  transition: opacity var(--nest-ease), translate var(--nest-ease),
    background-color var(--nest-ease);
}
.nest-scrolltop.is-visible {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}
.nest-scrolltop:hover {
  background: var(--nest-ink);
}

/* --------------------------------------------------------------------------
   21. Reveal animation (GSAP-independent fallback for .nest-reveal)
   -------------------------------------------------------------------------- */
.nest-reveal {
  opacity: 0;
  translate: 0 26px;
  transition: opacity 0.8s ease, translate 0.8s ease;
}
.nest-reveal.is-in {
  opacity: 1;
  translate: 0 0;
}

/* --------------------------------------------------------------------------
   22. Responsive
   -------------------------------------------------------------------------- */
/* Swap to the burger while the full bar still fits, not once it has already
   overflowed — the nav needs ~1300px plus the container's own padding. */
@media (max-width: 1399.98px) {
  .nest-nav {
    display: none;
  }
  .nest-burger {
    display: inline-flex;
  }
  .nest-header__call {
    display: none;
  }
}

@media (max-width: 1199.98px) {
  .nest-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 30px;
  }
  .nest-hero__rail {
    display: none;
  }
  .nest-split__media {
    min-height: 540px;
  }
}

@media (max-width: 991.98px) {
  .nest-booking__card {
    grid-template-columns: 1fr 1fr;
    gap: 26px 0;
  }
  .nest-booking__field:nth-child(2) {
    border-right: 0;
  }
  .nest-booking__submit {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-left: 4px;
  }
  .nest-split {
    grid-template-columns: 1fr;
  }
  .nest-split--flip .nest-split__media {
    order: 0;
  }
  .nest-split__media {
    min-height: 380px;
  }
  .nest-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .nest-stat {
    right: 12px;
    bottom: 12px;
  }
  .nest-header__btn {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .nest-booking {
    margin-top: -30px;
  }
  .nest-booking__card {
    grid-template-columns: 1fr;
    padding: 24px;
  }
  .nest-booking__field {
    border-right: 0;
    border-bottom: 1px solid rgba(var(--nest-ink-rgb), 0.1);
    padding: 0 0 18px;
  }
  .nest-booking__field:nth-child(3) {
    border-bottom: 0;
  }
  .nest-booking__submit {
    padding-left: 0;
  }
  .nest-footer__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 44px;
  }
  .nest-footer__bottom {
    justify-content: center;
    text-align: center;
  }
  .nest-collage {
    gap: 14px;
  }
  .nest-collage__item--tall {
    min-height: 320px;
  }
  .nest-collage__item--short {
    min-height: 150px;
  }
  .nest-form {
    grid-template-columns: 1fr;
  }
  .nest-hero__nav {
    right: 18px;
    bottom: 30px;
  }
  .nest-hero .swiper-pagination {
    bottom: 40px !important;
  }
  .nest-exp {
    min-height: 380px;
  }
  .nest-exp__text {
    max-height: 220px;
    opacity: 1;
    margin-top: 8px;
  }
  /* Three upright reels side by side get far too narrow to read here. */
  .nest-videos {
    grid-template-columns: 1fr;
    max-width: 330px;
    gap: 18px;
  }
  .nest-sec-head {
    margin-bottom: 34px;
  }
}

@media (max-width: 575.98px) {
  .nest-gallery {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .nest-gallery__item--wide,
  .nest-gallery__item--tall {
    grid-column: span 1;
    grid-row: span 1;
    aspect-ratio: 4 / 3;
  }
  .nest-logo img {
    width: 48px;
  }
  .nest-logo__name {
    font-size: 16px;
  }
  .nest-logo__sub {
    font-size: 9px;
    letter-spacing: 0.24em;
  }
  .nest-btn__label {
    font-size: 13px;
    padding: 11px 22px;
  }
  .nest-btn {
    padding-right: 46px;
  }
  .nest-btn__cap {
    width: 38px;
    height: 38px;
  }
  .nest-btn:hover .nest-btn__label,
  .nest-btn:focus-visible .nest-btn__label {
    transform: translateX(46px);
  }
  .nest-stat {
    position: static;
    max-width: none;
    margin-top: 14px;
    /* Back in flow it becomes a collage grid item; without this it takes one
       of the two columns and leaves an empty cell beside it. */
    grid-column: 1 / -1;
  }
  /* Stack these, but never stretch them: .nest-btn is a label pill plus an
     absolutely-placed arrow cap, so a full-width button strands the cap out at
     the right edge, yards away from its label. Sizing to content keeps the
     two parts together. Each column follows the alignment of its own copy. */
  .nest-hero__cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .nest-cta__actions {
    flex-direction: column;
    align-items: center;
  }
  .nest-room__body,
  .nest-feature {
    padding: 24px 22px;
  }
  .nest-feature {
    flex-direction: column;
    gap: 16px;
  }
  /* 40px of padding each side leaves a 320px screen too little room for the
     nowrap button label inside, which pushed the whole panel wider than the
     viewport. */
  .nest-split__body {
    padding: 28px 20px;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .nest-body *,
  .nest-body *::before,
  .nest-body *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .nest-hero .swiper-slide-active .nest-hero__bg {
    animation: none;
  }
  .nest-reveal {
    opacity: 1;
    translate: none;
  }
}

/* --------------------------------------------------------------------------
   23. Dreamy Island additions (Stage 1 — shared shell)
   Atmospheres, organic dividers, arch frames, whisper type, grain / light-leak
   overlays, floating accents and motion helpers. GSAP (motion-nestinn.js)
   drives scroll choreography; these are the static styling hooks it animates.
   -------------------------------------------------------------------------- */

/* Section atmospheres ---------------------------------------------------- */
.nest-atmo-dawn  { background: var(--nest-dawn); }
.nest-atmo-mist  { background: var(--nest-mist); }
.nest-atmo-shell { background: var(--nest-shell); }
.nest-atmo-ink   { background: var(--nest-ink); color: rgba(255, 255, 255, 0.86); }
.nest-atmo-ink :where(h1, h2, h3, h4, h5, h6) { color: var(--nest-white); }

/* Organic wave / blob dividers ------------------------------------------
   Drop as the first or last child of a section. Set `color` to the colour of
   the ADJACENT section so the wave reads as that section bleeding across. */
.nest-wave { display: block; width: 100%; line-height: 0; color: var(--nest-shell); }
.nest-wave svg { display: block; width: 100%; height: clamp(44px, 7vw, 120px); fill: currentColor; }
.nest-wave--flip svg { transform: scaleX(-1); }
.nest-wave--top { margin-bottom: -1px; }
.nest-wave--bottom { margin-top: -1px; }

/* Arch (half-oval) + rounded-2xl image frames ---------------------------- */
.nest-arch     { border-radius: var(--nest-arch); overflow: hidden; }
.nest-round2xl { border-radius: var(--nest-radius-2xl); overflow: hidden; }
.nest-framed   { position: relative; overflow: hidden; }
.nest-framed img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Whisper line — short italic Marcellus poetry --------------------------- */
.nest-whisper {
  font-family: var(--nest-font-head);
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 30px);
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--nest-lagoon-deep);
  margin: 0;
}
.nest-whisper--light { color: rgba(255, 255, 255, 0.9); }

/* Airy eyebrow tracking (opt-in) ----------------------------------------- */
.nest-eyebrow--airy { letter-spacing: var(--nest-tracking-eyebrow); }

/* Grain + light-leak overlays (very low opacity, non-interactive) -------- */
.nest-grain { position: relative; }
.nest-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.nest-leak { position: relative; }
.nest-leak::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.5; mix-blend-mode: screen;
  background:
    radial-gradient(60% 50% at 82% 6%, rgba(242, 160, 139, 0.45), transparent 70%),
    radial-gradient(52% 46% at 8% 92%, rgba(127, 199, 201, 0.4), transparent 70%);
}
.nest-leak > * { position: relative; z-index: 1; }

/* Floating frangipani / palm-leaf accents (positioned per section) ------- */
.nest-float { position: absolute; pointer-events: none; z-index: 1; opacity: 0.9; will-change: transform; }
.nest-float img, .nest-float svg { display: block; width: 100%; height: auto; }

@keyframes nest-drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(4deg); }
}
.nest-drift      { animation: nest-drift 9s var(--nest-ease-float) infinite; }
.nest-drift--slow{ animation-duration: 14s; }
.nest-drift--rev { animation-direction: reverse; }

/* Card light-sweep on hover (CSS only) ----------------------------------- */
.nest-sweep { position: relative; overflow: hidden; }
.nest-sweep::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg); transition: left 0.8s var(--nest-ease-float);
  pointer-events: none; z-index: 2;
}
.nest-sweep:hover::after { left: 120%; }

/* Magnetic hover target — JS nudges the inner element on desktop only ----- */
.nest-magnetic { will-change: transform; }

/* Motion note: [data-nest-anim] initial states are applied by GSAP in JS
   (gsap.set), never hidden in CSS — so if JS/GSAP fail, all content is shown. */

/* Reduced-motion: silence every ambient loop and hover life -------------- */
@media (prefers-reduced-motion: reduce) {
  .nest-drift, .nest-drift--slow, .nest-drift--rev { animation: none !important; }
  .nest-float { display: none !important; }
  .nest-sweep::after { display: none !important; }
}

/* --------------------------------------------------------------------------
   24. Index showpiece — "Dreamy Island Paradise" (Stage 2)
   Dawn hero, the "3 Minutes to Paradise" journey scroller, runway-to-pillow
   stats band, Sleeping Giant parallax, stopover planner and Bula Moments.
   -------------------------------------------------------------------------- */

/* ---- Hero: dawn reveal ------------------------------------------------- */
.nest-hero--dawn {
  display: flex;
  align-items: center;
  min-height: clamp(620px, 96vh, 980px);
  padding-block: 200px 150px;
}
.nest-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  will-change: transform;
}
.nest-hero__sky {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(251, 238, 230, 0.5) 0%, rgba(220, 236, 233, 0.12) 42%, rgba(18, 51, 50, 0.28) 100%);
  mix-blend-mode: soft-light;
}
.nest-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--nest-scrim);
}
.nest-hero--dawn .nest-hero__inner {
  z-index: 3;
  max-width: 920px;
}
.nest-hero__eyebrow { margin-bottom: 22px; }
.nest-hero--dawn .nest-hero__title {
  color: var(--nest-white);
  text-transform: none;
  font-size: clamp(40px, 7.6vw, 104px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.03;
  margin-bottom: 16px;
}
.nest-hero__whisper { margin: 0 0 18px; }
.nest-hero__clock {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--nest-font-body);
  font-size: 15px;
  letter-spacing: 0.02em;
  margin-bottom: 34px;
}
.nest-hero__clock i { color: var(--nest-gold); }

/* floating accents */
.nest-hero__petal, .nest-hero__leaf { z-index: 2; }
.nest-hero__petal--1 { width: clamp(48px, 6vw, 92px); top: 15%; right: 9%; }
.nest-hero__petal--2 { width: clamp(34px, 4vw, 64px); bottom: 20%; left: 7%; }
.nest-hero__leaf { width: clamp(60px, 8vw, 120px); top: 28%; left: 3%; opacity: 0.8; }

/* scroll cue */
.nest-hero__cue {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  bottom: 30px;
  z-index: 4;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--nest-white) !important;
  font-family: var(--nest-font-head);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.nest-hero__cue:hover { color: var(--nest-gold); }
.nest-hero__cue i { animation: nest-bob 1.9s ease-in-out infinite; }
@keyframes nest-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
    color: var(--nest-white) !important;
}

/* ---- Journey scroller -------------------------------------------------- */
.nest-journey { position: relative; background: var(--nest-ink); }
.nest-journey__pin {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(600px, 100vh, 1000px);
  overflow: hidden;
  padding-block: 120px;
}
.nest-journey__media { position: absolute; inset: 0; z-index: 0; }
.nest-journey__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s var(--nest-ease-float);
}
.nest-journey__img.is-active { opacity: 1; }
.nest-journey__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(9, 26, 25, 0.86) 0%, rgba(9, 26, 25, 0.55) 55%, rgba(9, 26, 25, 0.3) 100%);
}
.nest-journey__path { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.nest-journey__plane { transform: translate(60px, 120px); }
.nest-journey__copy { position: relative; z-index: 2; max-width: 620px; color: var(--nest-white); }
.nest-journey__copy .nest-eyebrow { color: rgba(255, 255, 255, 0.8); }
.nest-journey__count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin: 8px 0 30px; min-width: 0; }
.nest-journey__dial { font-family: var(--nest-font-head); font-size: clamp(66px, 12vw, 152px); line-height: 0.9; color: var(--nest-gold); }
.nest-journey__unit { font-family: var(--nest-font-head); font-style: italic; font-size: clamp(18px, 2.4vw, 30px); color: rgba(255, 255, 255, 0.86); }
.nest-journey__steps { display: grid; gap: 2px; margin-bottom: 36px; }
.nest-journey__step {
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  opacity: 0.38;
  transition: opacity 0.5s var(--nest-ease-float);
}
.nest-journey__step:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.nest-journey__step.is-active { opacity: 1; }
.nest-journey__no { font-family: var(--nest-font-head); color: var(--nest-gold); letter-spacing: 0.22em; font-size: 13px; }
.nest-journey__title { color: var(--nest-white); font-size: clamp(24px, 3vw, 42px); margin: 4px 0 6px; }
.nest-journey__text { color: rgba(255, 255, 255, 0.8); max-width: 520px; margin: 0; }

/* ---- Stats band -------------------------------------------------------- */
.nest-band { padding-block: clamp(56px, 7vw, 100px); }
.nest-band__lead { text-align: center; margin-bottom: 34px; }
.nest-band__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.nest-band__cell { text-align: center; padding: 8px 12px; min-width: 0; }
.nest-band__cell + .nest-band__cell { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.nest-band__num {
  display: inline-flex;
  align-items: baseline;
  max-width: 100%;
  font-family: var(--nest-font-head);
  font-size: clamp(38px, 6vw, 78px);
  line-height: 1;
  color: var(--nest-gold);
}
.nest-band__num--word { color: var(--nest-white); font-size: clamp(34px, 4.6vw, 60px); }
.nest-band__sup { font-size: 0.5em; color: rgba(255, 255, 255, 0.7); margin-left: 2px; }
.nest-band__label { display: block; margin-top: 12px; color: rgba(255, 255, 255, 0.74); font-size: 14px; letter-spacing: 0.03em; }

/* ---- Sleeping Giant parallax ------------------------------------------ */
.nest-giant {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 88vh, 860px);
  padding-block: var(--nest-space-lg);
}
.nest-giant__bg { position: absolute; inset: -12% 0; z-index: 0; }
.nest-giant__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(18, 51, 50, 0.42) 0%, rgba(18, 51, 50, 0.66) 100%); }
.nest-giant__range { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(160px, 26vw, 340px); z-index: 2; }
.nest-giant__range--front { z-index: 3; }
.nest-giant__copy { position: relative; z-index: 4; max-width: 780px; margin: 0 auto; text-align: center; color: var(--nest-white); }
.nest-giant__copy .nest-eyebrow { color: rgba(255, 255, 255, 0.82); }
.nest-giant__title { color: var(--nest-white); font-size: clamp(34px, 5.4vw, 76px); line-height: 1.06; margin: 8px 0 14px; }
.nest-giant__text { color: rgba(255, 255, 255, 0.84); max-width: 620px; margin: 18px auto 0; }

/* ---- Stopover planner -------------------------------------------------- */
.nest-planner { max-width: 880px; margin: 0 auto; display: grid; gap: 16px; }
.nest-plan { background: var(--nest-white); border: var(--nest-hairline); border-radius: var(--nest-radius); overflow: hidden; box-shadow: var(--nest-shadow); }
.nest-plan__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.nest-plan__icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--nest-mist);
  color: var(--nest-lagoon-deep);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 18px;
}
.nest-plan__when { font-family: var(--nest-font-head); font-size: clamp(20px, 2.4vw, 28px); color: var(--nest-ink); }
.nest-plan__sub { flex: 1; color: var(--nest-body); font-size: 14px; }
.nest-plan__toggle { color: var(--nest-lagoon-deep); font-size: 16px; transition: transform var(--nest-ease); }
.nest-plan.is-open .nest-plan__toggle { transform: rotate(45deg); }
.nest-plan__panel { max-height: 0; overflow: hidden; transition: max-height 0.55s var(--nest-ease-float); }
.nest-plan.is-open .nest-plan__panel { max-height: 360px; }
.nest-plan__inner { padding: 0 26px 26px 92px; }
.nest-plan__list { display: grid; gap: 12px; margin-bottom: 18px; }
.nest-plan__list li { display: flex; gap: 12px; align-items: flex-start; color: var(--nest-body); }
.nest-plan__list i { color: var(--nest-lagoon-deep); margin-top: 5px; flex-shrink: 0; }

/* ---- Bula Moments ------------------------------------------------------ */
.nest-moments__note { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--nest-body); }
.nest-moments__note i { color: var(--nest-lagoon-deep); }
.nest-moments { columns: 3; column-gap: 20px; margin-top: 8px; }
.nest-moments > * { break-inside: avoid; margin-bottom: 20px; }
.nest-moments__photo { display: block; }
.nest-moments__photo img { display: block; width: 100%; }
.nest-moments__quote {
  background: var(--nest-white);
  border-radius: var(--nest-radius);
  border-left: 3px solid var(--nest-lagoon);
  padding: 24px 26px;
  box-shadow: var(--nest-shadow);
}
.nest-moments__quote--gold { border-left-color: var(--nest-gold); }
.nest-moments__quote p { font-family: var(--nest-font-head); font-style: italic; font-size: 19px; line-height: 1.5; color: var(--nest-ink); margin: 0 0 14px; }
.nest-moments__quote cite { font-style: normal; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nest-lagoon-deep); }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 991px) {
  .nest-moments { columns: 2; }
  .nest-journey__pin { min-height: auto; padding-block: 96px; }
}
@media (max-width: 767px) {
  .nest-band__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .nest-band__cell:nth-child(odd) { border-left: 0; }
  .nest-band__cell:nth-child(3), .nest-band__cell:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 24px; }
  .nest-moments { columns: 1; }
  .nest-plan__inner { padding-left: 26px; }
  .nest-hero--dawn { padding-block: 170px 120px; }
}

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nest-hero__cue i { animation: none !important; }
  .nest-journey__img { transition: none; }
}

/* --------------------------------------------------------------------------
   25. Rooms (Stage 3) — alternating showcase rows, arch room heroes and the
   sticky WhatsApp/phone booking sidebar.
   -------------------------------------------------------------------------- */

/* Ink crumbs for light sections -------------------------------------------- */
.nest-crumbs--ink { color: var(--nest-body); margin-top: 0; margin-bottom: 18px; }
.nest-crumbs--ink a { color: var(--nest-body); }
.nest-crumbs--ink a:hover { color: var(--nest-lagoon-deep); }
.nest-crumbs--ink li:not(:last-child)::after { color: rgba(var(--nest-ink-rgb), 0.3); }
.nest-crumbs--ink [aria-current="page"] { color: var(--nest-lagoon-deep); }

/* Room showcase rows (rooms.php) ------------------------------------------ */
.nest-roomrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  margin-top: clamp(44px, 6vw, 76px);
}
.nest-roomrow--flip .nest-roomrow__media { order: 2; }
.nest-roomrow__media { position: relative; aspect-ratio: 4 / 3; box-shadow: var(--nest-shadow-soft); margin: 0; }
.nest-roomrow__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nest-roomrow__tag {
  position: absolute; top: 18px; left: 18px;
  background: var(--nest-gold); color: var(--nest-ink);
  font-family: var(--nest-font-head); letter-spacing: 0.1em; text-transform: uppercase;
  font-size: 12px; padding: 7px 16px; border-radius: 100px;
}
.nest-roomrow__title { font-size: clamp(28px, 3.4vw, 44px); margin: 8px 0 6px; }
.nest-roomrow__title a { color: var(--nest-ink); }
.nest-roomrow__title a:hover { color: var(--nest-lagoon-deep); }
.nest-roomrow__text { color: var(--nest-body); margin-bottom: 20px; max-width: 520px; }
.nest-roomrow__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-bottom: 26px; }
.nest-roomrow__specs li { display: flex; align-items: center; gap: 10px; color: var(--nest-ink); font-size: 15px; }
.nest-roomrow__specs i { color: var(--nest-lagoon-deep); width: 20px; text-align: center; }
.nest-roomrow__actions { display: flex; align-items: center; gap: 22px 28px; flex-wrap: wrap; }
.nest-roomrow__rate { display: flex; flex-direction: column; line-height: 1.2; }
.nest-roomrow__rate small { text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; color: var(--nest-body); }
.nest-roomrow__rate strong { font-family: var(--nest-font-head); font-size: 20px; color: var(--nest-lagoon-deep); }

/* Room hero (detail pages) ------------------------------------------------- */
.nest-roomhero { position: relative; padding-block: clamp(140px, 16vw, 200px) var(--nest-space-md); }
.nest-roomhero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.nest-roomhero__copy { max-width: 620px; }
.nest-roomhero__title { font-size: clamp(38px, 5.4vw, 76px); line-height: 1.05; margin: 6px 0 10px; }
.nest-roomhero__text { color: var(--nest-body); max-width: 520px; margin-bottom: 24px; }
.nest-roomhero__chips { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-bottom: 30px; }
.nest-roomhero__chips li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; background: var(--nest-white); border: var(--nest-hairline);
  border-radius: 100px; font-size: 14px; color: var(--nest-ink);
}
.nest-roomhero__chips i { color: var(--nest-lagoon-deep); }
.nest-roomhero__figure { aspect-ratio: 4 / 5; box-shadow: var(--nest-shadow-soft); margin: 0; }
.nest-roomhero__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Carousel nav ------------------------------------------------------------- */
.nest-carousel__nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }

/* Section rule ------------------------------------------------------------- */
.nest-rule { border: 0; border-top: 1px solid rgba(var(--nest-ink-rgb), 0.12); margin: 40px 0; }

/* Sticky booking sidebar (room pages) -------------------------------------- */
/* Own namespace so it never collides with the .nest-booking popup modal,
   whose later fixed/hidden rules used to swallow this whole sidebar. */
.nest-roombook { position: sticky; top: 108px; }
.nest-roombook__card {
  background: var(--nest-white); border: var(--nest-hairline);
  border-radius: var(--nest-radius-2xl); box-shadow: var(--nest-shadow-soft);
  padding: 32px 30px;
}
.nest-roombook__title { font-size: 26px; margin: 8px 0 6px; }
.nest-roombook__rate { color: var(--nest-body); font-size: 14px; margin-bottom: 22px; }
.nest-roombook__fields { display: grid; gap: 14px; margin-bottom: 20px; }
.nest-roombook__field { display: grid; gap: 6px; }
.nest-roombook__field span { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--nest-body); }
.nest-roombook__field input,
.nest-roombook__field select {
  width: 100%; padding: 13px 16px;
  border: var(--nest-hairline); border-radius: 12px;
  background: var(--nest-shell); color: var(--nest-ink);
  font-family: var(--nest-font-body); font-size: 15px;
}
.nest-roombook__field input:focus,
.nest-roombook__field select:focus { outline: none; border-color: var(--nest-lagoon-deep); }
.nest-roombook__glance { margin: 24px 0 18px; display: grid; gap: 12px; }
.nest-roombook__glance li {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 12px; border-bottom: 1px solid rgba(var(--nest-ink-rgb), 0.1);
}
.nest-roombook__glance li:last-child { border-bottom: 0; padding-bottom: 0; }
.nest-roombook__glance span { color: var(--nest-body); font-size: 14px; }
.nest-roombook__glance strong { color: var(--nest-ink); }
.nest-roombook__note { font-size: 13px; color: var(--nest-body); display: flex; gap: 8px; margin: 0; }
.nest-roombook__note i { color: var(--nest-lagoon-deep); margin-top: 3px; flex-shrink: 0; }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 991px) {
  .nest-roomhero__grid { grid-template-columns: 1fr; }
  .nest-roomhero__figure { aspect-ratio: 3 / 2; }
  .nest-roomrow,
  .nest-roomrow--flip { grid-template-columns: 1fr; }
  .nest-roomrow__media,
  .nest-roomrow--flip .nest-roomrow__media { order: -1; }
  .nest-roombook { position: static; }
}
@media (max-width: 575px) {
  .nest-roomrow__specs { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   26. Experiences — "A day of adventures" horizontal scroll-scrubbed gallery.
   Default is a native swipeable strip (no JS / reduced-motion). On desktop the
   motion module pins it and drives the track from the vertical scroll.
   -------------------------------------------------------------------------- */
.nest-daytrip { position: relative; background: var(--nest-mist); }
.nest-daytrip__pin {
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.nest-daytrip__track {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  width: max-content;
  padding: clamp(56px, 7vw, 96px) clamp(24px, 6vw, 110px);
}
.nest-daytrip__intro,
.nest-daytrip__outro { flex: 0 0 auto; width: min(84vw, 400px); scroll-snap-align: center; }
.nest-daytrip__title { font-size: clamp(34px, 5vw, 66px); line-height: 1.05; margin: 8px 0 12px; }
.nest-daytrip__lead { color: var(--nest-body); margin: 14px 0 22px; max-width: 380px; }
.nest-daytrip__hint {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--nest-font-head); letter-spacing: 0.2em; text-transform: uppercase;
  font-size: 12px; color: var(--nest-lagoon-deep);
}
.nest-daytrip__hint i { animation: nest-nudge 1.6s ease-in-out infinite; }
@keyframes nest-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } }
.nest-daytrip__outrotitle { font-size: clamp(26px, 3.4vw, 44px); margin: 8px 0 14px; }

.nest-trip {
  flex: 0 0 auto;
  width: min(86vw, 540px);
  background: var(--nest-white);
  border: var(--nest-hairline);
  border-radius: var(--nest-radius-2xl);
  overflow: hidden;
  box-shadow: var(--nest-shadow-soft);
  scroll-snap-align: center;
}
.nest-trip__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.nest-trip__media img { width: 100%; height: 100%; object-fit: cover; display: block; scale: 1.14; }
.nest-trip__badge {
  position: absolute; top: 16px; left: 16px;
  background: rgba(18, 51, 50, 0.7); color: #fff;
  font-family: var(--nest-font-head); letter-spacing: 0.1em; text-transform: uppercase;
  font-size: 11px; padding: 6px 14px; border-radius: 100px;
}
.nest-trip__body { padding: 28px 30px 32px; }
.nest-trip__no { font-family: var(--nest-font-head); color: var(--nest-lagoon-deep); letter-spacing: 0.16em; font-size: 13px; text-transform: uppercase; }
.nest-trip__title { font-size: clamp(24px, 2.6vw, 32px); margin: 6px 0 10px; }
.nest-trip__text { color: var(--nest-body); margin-bottom: 18px; }
.nest-trip__tags { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.nest-trip__tags li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--nest-ink); background: var(--nest-mist); padding: 7px 14px; border-radius: 100px; }
.nest-trip__tags i { color: var(--nest-lagoon-deep); }

@media (prefers-reduced-motion: reduce) {
  .nest-daytrip__hint i { animation: none !important; }
  .nest-trip__media img { scale: 1; }
}

/* --------------------------------------------------------------------------
   27. Contact + gallery (Stage 5) — soft-glow form focus and the floating
   map card.
   -------------------------------------------------------------------------- */

/* Softer, rounded fields with a dreamy focus glow ------------------------- */
.nest-form input,
.nest-form select,
.nest-form textarea { border-radius: 12px; }
.nest-form input:focus,
.nest-form select:focus,
.nest-form textarea:focus {
  border-color: var(--nest-lagoon-deep);
  box-shadow: 0 0 0 4px rgba(var(--nest-lagoon-rgb), 0.18),
    0 12px 30px -16px rgba(47, 143, 150, 0.55);
}

/* Floating info card over the map ---------------------------------------- */
.nest-map-sec { position: relative; }
@media (min-width: 768px) { .nest-map { height: 560px; } }
.nest-mapcard {
  position: absolute;
  top: 50%;
  left: max(24px, 5vw);
  translate: 0 -50%;
  width: min(360px, 86vw);
  background: var(--nest-white);
  border-radius: var(--nest-radius-2xl);
  box-shadow: var(--nest-shadow-lg);
  padding: 32px 30px;
  line-height: var(--nest-lh-body);
  z-index: 2;
}
.nest-mapcard__title { font-size: clamp(26px, 3vw, 34px); margin: 8px 0 6px; }
.nest-mapcard .nest-whisper { margin-bottom: 20px; }
.nest-mapcard__meta { display: grid; gap: 12px; margin-bottom: 24px; }
.nest-mapcard__meta li { display: flex; align-items: center; gap: 12px; color: var(--nest-body); font-size: 15px; line-height: 1.4; }
.nest-mapcard__meta i { color: var(--nest-lagoon-deep); width: 20px; text-align: center; flex-shrink: 0; }
.nest-mapcard__meta a { color: var(--nest-ink); }
.nest-mapcard__meta a:hover { color: var(--nest-lagoon-deep); }

@media (max-width: 767.98px) {
  .nest-mapcard {
    position: static;
    translate: none;
    width: auto;
    margin: -48px 16px 0;
    box-shadow: var(--nest-shadow);
  }
}

/* --------------------------------------------------------------------------
   28. Fix — full-bleed cover images collapsing on mobile.
   The global `.nest-body img { height: auto }` reset (specificity 0,1,1) was
   beating `.nest-hero__img` / `.nest-journey__img` (0,1,0), so on narrow
   viewports these images fell back to their natural height and only covered
   the top of the section. Bump specificity so height:100% + cover wins.
   -------------------------------------------------------------------------- */
.nest-hero--dawn .nest-hero__img,
.nest-journey .nest-journey__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   29. Header nav / phone — force white.
   The global `.nest-body a { color: var(--nest-bronze) }` reset (0,1,1) was
   out-specifying `.nest-nav__link` / `.nest-header__call` (0,1,0), tinting the
   nav + phone teal. Scope under .nest-header/.nest-sticky (0,2,0) to win. Both
   bars are dark (hero scrim / --nest-ink), so white stays legible.
   -------------------------------------------------------------------------- */
.nest-header .nest-nav__link,
.nest-sticky .nest-nav__link,
.nest-header .nest-header__call,
.nest-sticky .nest-header__call,
.nest-header .nest-header__call i,
.nest-sticky .nest-header__call i {
  color: var(--nest-white);
}
.nest-header .nest-nav__link:hover,
.nest-sticky .nest-nav__link:hover,
.nest-header .nest-nav__link[aria-current="page"],
.nest-sticky .nest-nav__link[aria-current="page"],
.nest-header .nest-header__call:hover,
.nest-sticky .nest-header__call:hover {
  color: var(--nest-white);
}

/* Light-hero pages (room detail): the top header overlays a pale background,
   not a dark hero image, so its text/logo must be dark to stay visible. The
   sticky bar stays dark-on-scroll and keeps its own white text. */
.nest-body--lighthdr .nest-header .nest-logo__name,
.nest-body--lighthdr .nest-header .nest-logo__sub,
.nest-body--lighthdr .nest-header .nest-nav__link,
.nest-body--lighthdr .nest-header .nest-header__call,
.nest-body--lighthdr .nest-header .nest-header__call i {
  color: var(--nest-ink);
}
.nest-body--lighthdr .nest-header .nest-nav__link:hover,
.nest-body--lighthdr .nest-header .nest-nav__link[aria-current="page"],
.nest-body--lighthdr .nest-header .nest-header__call:hover {
  color: var(--nest-bronze);
}
.nest-body--lighthdr .nest-header .nest-header__call i {
  color: var(--nest-bronze);
}
.nest-body--lighthdr .nest-header .nest-burger {
  background: rgba(var(--nest-ink-rgb), 0.06);
  border-color: rgba(var(--nest-ink-rgb), 0.22);
  color: var(--nest-ink);
}
.nest-body--lighthdr .nest-header .nest-burger:hover {
  background: var(--nest-bronze);
  border-color: var(--nest-bronze);
  color: var(--nest-white);
}

/* --------------------------------------------------------------------------
   30. Floating Book Now pill — bottom-center, fades in once past the hero.
   Mirrors .nest-scrolltop's trigger/transition so both float in together
   without competing for attention (scrolltop stays bottom-right).
   -------------------------------------------------------------------------- */
.nest-booknow {
  position: fixed;
  left: 50%;
  bottom: 24px;
  translate: -50% 20px;
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--nest-ease), translate var(--nest-ease);
}
.nest-booknow.is-visible {
  opacity: 1;
  translate: -50% 0;
  pointer-events: auto;
}
.nest-booknow .nest-btn__label {
  box-shadow: var(--nest-shadow-lg);
}
@media (max-width: 575.98px) {
  .nest-booknow { bottom: 18px; }
  .nest-booknow .nest-btn__label { padding: 12px 26px; font-size: 14px; }
}

/* --------------------------------------------------------------------------
   31. Booking enquiry modal — the popup the floating "Book Now" pill opens.
   Injected once into every page by app-nestinn.js. A split panel: a dreamy
   image aside on the left, the enquiry form on the right. Library-free so it
   behaves identically on the pages that don't load flatpickr.
   -------------------------------------------------------------------------- */
.nest-booking {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 24px;
  visibility: hidden;
  pointer-events: none;
}
.nest-booking.is-open {
  visibility: visible;
  pointer-events: auto;
}

.nest-booking__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 120% at 50% 0%,
    rgba(18, 51, 50, 0.62),
    rgba(4, 12, 12, 0.78)
  );
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--nest-ease);
}
.nest-booking.is-open .nest-booking__scrim {
  opacity: 1;
}

.nest-booking__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(880px, 100%);
  max-height: min(95vh, 720px);
  background: var(--nest-shell);
  border-radius: var(--nest-radius-2xl);
  overflow: hidden;
  box-shadow: var(--nest-shadow-lg);
  opacity: 0;
  translate: 0 26px;
  scale: 0.965;
  transition: opacity var(--nest-ease), translate var(--nest-ease),
    scale var(--nest-ease);
}
.nest-booking.is-open .nest-booking__dialog {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* ---- Left aside: photo + island welcome ---- */
.nest-booking__aside {
  position: relative;
  flex: 0 0 40%;
  min-height: 100%;
  padding: 40px 34px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--nest-white);
  background: var(--nest-ink);
  overflow: hidden;
}
.nest-booking__aside::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/nest-46.jpg");
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
}
.nest-booking__aside::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(18, 51, 50, 0.35) 0%,
    rgba(12, 36, 35, 0.86) 100%
  );
}
.nest-booking__aside > * {
  position: relative;
  z-index: 1;
}
.nest-booking__petal {
  position: absolute;
  top: 24px;
  left: 26px;
  width: 72px;
  height: 72px;
  opacity: 0.9;
  z-index: 1;
}
.nest-booking__aside-eyebrow {
  font-family: var(--nest-font-head);
  font-size: 12px;
  letter-spacing: var(--nest-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--nest-gold);
  margin-bottom: 14px;
}
.nest-booking__aside-title {
  font-family: var(--nest-font-head);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.15;
  color: var(--nest-white);
  margin: 0 0 10px;
}
.nest-booking__aside-whisper {
  font-family: var(--nest-font-head);
  font-style: italic;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 26px;
}
.nest-booking__facts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.nest-booking__facts li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.86);
}
.nest-booking__facts i {
  color: var(--nest-gold);
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.nest-booking__facts a {
  color: inherit;
}
.nest-booking__facts a:hover {
  color: var(--nest-gold);
}

/* ---- Right main: the form ---- */
.nest-booking__main {
  flex: 1 1 auto;
  min-width: 0;
  padding: clamp(18px, 2.4vw, 26px);
  overflow-y: auto;
}
.nest-booking__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(var(--nest-ink-rgb), 0.16);
  background: rgba(255, 255, 255, 0.9);
  color: var(--nest-ink);
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--nest-ease), color var(--nest-ease),
    transform var(--nest-ease);
}
.nest-booking__close:hover {
  background: var(--nest-ink);
  color: var(--nest-white);
  transform: rotate(90deg);
}

.nest-booking__head {
  margin-bottom: 11px;
}
.nest-booking__eyebrow {
  display: inline-block;
  font-family: var(--nest-font-head);
  font-size: 12px;
  letter-spacing: var(--nest-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--nest-bronze);
  margin-bottom: 7px;
}
.nest-booking__title {
  font-family: var(--nest-font-head);
  font-size: clamp(23px, 2.6vw, 27px);
  line-height: 1.15;
  color: var(--nest-ink);
  margin: 0 0 5px;
}
.nest-booking__whisper {
  font-family: var(--nest-font-head);
  font-style: italic;
  font-size: 15px;
  color: var(--nest-body);
  margin: 0;
}

.nest-booking__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.nest-bk-field {
  display: flex;
  flex-direction: column;
}
.nest-bk-field--full {
  grid-column: 1 / -1;
}
.nest-bk-field label {
  font-family: var(--nest-font-head);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nest-bronze);
  margin-bottom: 4px;
}
.nest-bk-field label .nest-bk-req {
  color: var(--nest-coral);
}
.nest-bk-field input,
.nest-bk-field select,
.nest-bk-field textarea {
  width: 100%;
  background: var(--nest-white);
  border: var(--nest-hairline);
  border-radius: 11px;
  color: var(--nest-ink);
  font-family: var(--nest-font-body);
  font-size: 15px;
  padding: 9px 14px;
  transition: border-color var(--nest-ease), box-shadow var(--nest-ease);
}
.nest-bk-field textarea {
  min-height: 50px;
  resize: vertical;
}
.nest-bk-field input:focus,
.nest-bk-field select:focus,
.nest-bk-field textarea:focus {
  border-color: var(--nest-bronze);
  box-shadow: 0 0 0 3px rgba(var(--nest-bronze-rgb), 0.14);
  outline: none;
}

.nest-booking__status {
  grid-column: 1 / -1;
  background: rgba(var(--nest-bronze-rgb), 0.08);
  border-left: 3px solid var(--nest-bronze);
  border-radius: 8px;
  color: var(--nest-ink);
  font-size: 14px;
  line-height: 1.55;
  padding: 11px 14px;
  margin: 0;
}
.nest-booking__status[hidden] {
  display: none;
}

.nest-booking__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 2px;
}
.nest-booking__call {
  font-family: var(--nest-font-head);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--nest-ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nest-booking__call i {
  color: var(--nest-bronze);
}
.nest-booking__call:hover {
  color: var(--nest-bronze);
}
.nest-booking__fineprint {
  grid-column: 1 / -1;
  font-size: 12px;
  line-height: 1.5;
  color: var(--nest-body);
  margin: 0;
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Mobile: a compact card instead of the desktop split-panel dialog. The
   photo aside collapses to a slim solid-colour strip (no background image,
   no facts list) so the form starts almost immediately, and paired fields
   (check-in/out, nest/guests) stay two-up to keep the whole thing short
   enough to need little to no scrolling.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .nest-booking {
    padding: 14px;
    align-items: flex-end;
  }
  .nest-booking__dialog {
    flex-direction: column;
    width: 100%;
    max-height: 88vh;
    border-radius: 22px;
  }
  .nest-booking__aside {
    flex-basis: auto;
    min-height: 0;
    padding: 16px 60px 14px 20px;
    justify-content: center;
  }
  .nest-booking__aside::before {
    display: none;
  }
  .nest-booking__aside::after {
    background: linear-gradient(120deg, var(--nest-ink), var(--nest-bronze-deep));
  }
  .nest-booking__aside-eyebrow {
    margin-bottom: 2px;
  }
  .nest-booking__aside-title {
    font-size: 17px;
    margin: 0;
  }
  .nest-booking__aside-whisper,
  .nest-booking__facts,
  .nest-booking__petal {
    display: none;
  }
  .nest-booking__close {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
  }

  .nest-booking__main {
    padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
  }
  .nest-booking__head {
    margin-bottom: 8px;
  }
  .nest-booking__title {
    font-size: 19px;
  }
  .nest-booking__whisper {
    font-size: 13px;
  }
  .nest-booking__form {
    gap: 8px 10px;
  }
  .nest-bk-field label {
    font-size: 10.5px;
    margin-bottom: 3px;
  }
  .nest-bk-field input,
  .nest-bk-field select,
  .nest-bk-field textarea {
    padding: 8px 12px;
    font-size: 14px;
  }
  .nest-bk-field textarea {
    min-height: 38px;
  }
  .nest-booking__actions {
    gap: 6px 16px;
    margin-top: 0;
  }
  .nest-booking__fineprint {
    font-size: 11px;
  }
}

@media (max-width: 479.98px) {
  .nest-booking {
    padding: 0;
  }
  .nest-booking__dialog {
    border-radius: 20px 20px 0 0;
    max-height: 92vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nest-booking__dialog {
    translate: 0 0;
    scale: 1;
  }
  .nest-booking__close:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   32. Floating side rail — a Call button pinned to the left-middle and a
   WhatsApp button to the right-middle of every page. Injected once by
   app-nestinn.js. Each is a round icon that grows a label on hover/focus.
   -------------------------------------------------------------------------- */
.nest-siderail {
  position: fixed;
  bottom: 0%;
  translate: 0 -50%;
  z-index: 950;
}
.nest-siderail--left {
  left: 0;
}
.nest-siderail--right {
  right: 0;
}
.nest-siderail__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 15px;
  color: var(--nest-white) !important;
  font-family: var(--nest-font-head);
  font-size: 16px !important;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: var(--nest-shadow-lg);
  transition: background-color var(--nest-ease);
  /* Slide in from the screen edge once, then settle. */
  animation: nest-rail-in 0.7s var(--nest-ease-float) 0.35s both;
}
.nest-siderail--left .nest-siderail__btn {
  flex-direction: row;
  border-radius: 0 26px 26px 0;
  --nest-rail-from: -110%;
}
.nest-siderail--right .nest-siderail__btn {
  flex-direction: row-reverse;
  border-radius: 26px 0 0 26px;
  --nest-rail-from: 110%;
}
.nest-siderail__btn i {
  font-size: 26px !important;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}
.nest-siderail__btn--call {
  background: var(--nest-bronze);
    font-size: 22px !important;
}
.nest-siderail__btn--call i {
    font-size: 22px !important;
}
.nest-siderail__btn--call:hover,
.nest-siderail__btn--call:focus-visible {
  background: var(--nest-bronze-deep);
}
.nest-siderail__btn--wa {
  background: #25d366;

   
}
.nest-siderail__btn--wa:hover,
.nest-siderail__btn--wa:focus-visible {
  background: #1da851;
}
/* Label hugs its own content, so the pill never overshoots into empty space
   the way an animated max-width does — the width tracks the text exactly. */
.nest-siderail__label {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width var(--nest-ease), opacity var(--nest-ease),
    margin var(--nest-ease);
}
.nest-siderail--left .nest-siderail__label {
  margin-left: 0;
}
.nest-siderail--right .nest-siderail__label {
  margin-right: 0;
}
.nest-siderail__btn:hover .nest-siderail__label,
.nest-siderail__btn:focus-visible .nest-siderail__label {
  max-width: 8em;
  opacity: 1;
}
.nest-siderail--left .nest-siderail__btn:hover .nest-siderail__label,
.nest-siderail--left .nest-siderail__btn:focus-visible .nest-siderail__label {
  margin-left: 10px;
}
.nest-siderail--right .nest-siderail__btn:hover .nest-siderail__label,
.nest-siderail--right .nest-siderail__btn:focus-visible .nest-siderail__label {
  margin-right: 10px;
}

/* Gentle attention pulse around the resting icon; stops on hover/focus. */
.nest-siderail__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: nest-rail-pulse 2.6s ease-out infinite;
  animation-delay: 1.2s;
}
.nest-siderail__btn--call::after {
  --nest-rail-ring: rgba(var(--nest-bronze-rgb), 0.5);
}
.nest-siderail__btn--wa::after {
  --nest-rail-ring: rgba(37, 211, 102, 0.5);
}
.nest-siderail__btn:hover::after,
.nest-siderail__btn:focus-visible::after {
  animation: none;
}

@keyframes nest-rail-in {
  from {
    opacity: 0;
    transform: translateX(var(--nest-rail-from, -110%));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes nest-rail-pulse {
  0% {
    box-shadow: 0 0 0 0 var(--nest-rail-ring, rgba(255, 255, 255, 0.5));
  }
  70% {
    box-shadow: 0 0 0 12px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

@media (max-width: 575.98px) {
  .nest-siderail__btn {
    height: 46px;
    padding: 0 12px;
  }
  .nest-siderail__label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nest-siderail__btn {
    animation: none;
  }
  .nest-siderail__btn::after {
    animation: none;
  }
  .nest-siderail__label {
    transition: opacity var(--nest-ease);
  }
}

/* --------------------------------------------------------------------------
   34. Legal / policy pages — a narrow, readable prose column.
   -------------------------------------------------------------------------- */
.nest-legal {
  max-width: 820px;
  margin: 0 auto;
}
.nest-legal__updated {
  font-family: var(--nest-font-head);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--nest-bronze);
  margin-bottom: 34px;
}
.nest-legal h2 {
  font-family: var(--nest-font-head);
  font-size: clamp(22px, 2.4vw, 27px);
  color: var(--nest-ink);
  margin: 40px 0 14px;
}
.nest-legal h2:first-of-type {
  margin-top: 0;
}
.nest-legal h3 {
  font-family: var(--nest-font-head);
  font-size: 19px;
  color: var(--nest-ink);
  margin: 26px 0 10px;
}
.nest-legal p {
  margin: 0 0 16px;
}
.nest-legal ul,
.nest-legal ol {
  margin: 0 0 18px;
  padding-left: 22px;
}
.nest-legal li {
  margin-bottom: 8px;
}
.nest-legal a {
  color: var(--nest-bronze);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nest-legal a:hover {
  color: var(--nest-ink);
}
.nest-legal__note {
  background: rgba(var(--nest-bronze-rgb), 0.07);
  border-left: 3px solid var(--nest-bronze);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 26px 0;
  font-size: 14.5px;
  line-height: 1.7;
}

/* Legal links row appended into every footer bottom by app-nestinn.js. */
.nest-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
}
.nest-footer__legal a {
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72);
}
.nest-footer__legal a:hover {
  color: var(--nest-white);
}

/* --------------------------------------------------------------------------
   35. Bottom dock — the floating "home / back" icon sitting to the LEFT of the
   Book Now pill (bottom-centre). The pill keeps its own is-visible fade; the
   dock centres the pair and the FAB fades in with it. Injected/decided in
   includes/footer.php (hidden on the home page).
   -------------------------------------------------------------------------- */
.nest-dock {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* The pill is no longer individually fixed — the dock positions it. */
.nest-dock .nest-booknow {
  position: static;
  left: auto;
  bottom: auto;
  translate: 0 20px;
}
.nest-dock .nest-booknow.is-visible {
  translate: 0 0;
}

.nest-fab {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--nest-white);
  color: var(--nest-ink);
  font-size: 18px;
  box-shadow: var(--nest-shadow-lg);
  opacity: 0;
  translate: 0 20px;
  pointer-events: none;
  transition: opacity var(--nest-ease), translate var(--nest-ease),
    background-color var(--nest-ease), color var(--nest-ease);
}
.nest-dock.is-visible .nest-fab {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}
.nest-fab:hover,
.nest-fab:focus-visible {
  background: var(--nest-bronze);
  color: var(--nest-white);
}

@media (max-width: 575.98px) {
  .nest-dock {
    bottom: 24px;
    gap: 10px;
  }
  .nest-fab {
    width: 46px;
    height: 46px;
    font-size: 16px;
  }
}