/*
 * stylesheet-full.css — complete legacy + homepage bundle (~220KB).
 * Used by: index-alt-1.html, index-alt-2.html, index-v1.html (with their inline overrides / scripts).
 * Production index.html uses the generated slim assets/css/stylesheet.css (python3 tools/purge_css_for_index.py).
 */

:root {
  /* Site-wide Tokens */
  --ds-primary: #13283e;
  --ds-forest: #1B3022;
  --ds-white: #ffffff;
  --ds-hematite: #7B2E20;
  --ds-olive: #8da089;
  --ds-sand: #D9C5B2;
  --ds-creme: #f4f3e9;
  --ds-lagoon: #50849F;
  --ds-sand-refined: #DED5C3;
  --ds-terracotta: #a65d4b;
  --ds-pureza: #c19a6b;

  --ds-border: rgba(19, 40, 62, 0.15);
  --ds-glass: rgba(255, 255, 255, 0.85);

  --font-serif: "PP Editorial New", serif;
  --font-sans: "Founders Grotesk", sans-serif;
}

/* --- DS LIBRARY COMPONENTS --- */
.ds-navbar {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: var(--ds-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--ds-border);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.ds-navbar a {
  font-family: var(--font-sans);
  color: var(--ds-primary);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin: 0 2vw;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.ds-navbar a:hover {
  opacity: 1;
}

.ds-section {
  position: relative;
  padding: 14vh 6vw;
  border-bottom: 1px solid var(--ds-border);
  max-width: 1600px;
  margin: 0 auto;
}

.ds-header {
  margin-bottom: 10vh;
}

.ds-header h2 {
  font-family: var(--font-serif);
  color: var(--ds-primary);
  font-size: 5vw;
  font-weight: 200;
  line-height: 1;
  margin: 0;
}

.ds-label {
  font-family: var(--font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ds-primary);
  opacity: 0.4;
}

/* Interactive & Atmospheric */
.ds-texture-card {
  background: var(--ds-white);
  padding: 5px;
  border-radius: 4px;
  border: 1px solid var(--ds-border);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.6s ease;
}

.grow-image-container {
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  position: relative;
  will-change: width, height, border-radius;
  transform: translateZ(0);
}

.grow-text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(244, 243, 233, 0.4) 0%, rgba(244, 243, 233, 0.0) 60%);
  opacity: 0;
}

.fade-up {
  opacity: 0;
  transform: translateY(40px);
}

/* Branch Divider (Custom Module) */
.branch-divider-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url('../images/dividers/branch-divider.png');
  /* Proportional “thicker” branch: one axis (width) + auto height preserves aspect ratio — no rotation. */
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center top;
  opacity: 1;
  transform: translateY(-45%);
  pointer-events: none;
  z-index: 12;
}


/* --- START OF ORIGINAL ASSETS --- */
/* Casa Patacas - Clean CSS Architecture */
/* Modern Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

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

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

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


/* ==========================================================================
   Start of custom Webflow CSS
   ========================================================================== */

:root {
  /* Brand Colors - Primary */
  --cp-forest: #1a251a;
  /* Deep Forest Green */
  --cp-lagoon: #8da089;
  /* Muted Lagoon Green */
  --cp-creme: #f9f4ee;
  /* Soft Sand / Creme */
  --cp-sand-dark: #c19a6b;
  /* Refined Sand / Gold Accent */

  /* Brand Colors - Secondary/Atmospheric */
  --cp-terracotta: #7e5c42;
  /* Earthy Terracotta */
  --cp-ocean: #50849f;
  /* Dusty Ocean Blue */
  --cp-coral: var(--cp-coral);
  /* Atmospheric Coral */

  /* UI Colors */
  --cp-white: #ffffff;
  --cp-border: rgba(26, 37, 26, 0.1);
  --cp-overlay: rgba(245, 242, 235, 0.3);

  /* Typography — sans UI/copy follows --font-sans (pair switcher); --cp-font-body stays an alias for older rules */
  --cp-font-heading: 'PP Editorial New', serif;
  --cp-font-body: var(--font-sans);
  --cp-font-accent: 'Brown Sugar', serif;

  /* Spacing & Utilities */
  --cp-section-gap: 15vh;
  --cp-column-gap: 2vw;
  --cp-container-max: 1400px;
}

@font-face {
  font-family: 'Brown Sugar';
  src: url('../fonts/Brown-Sugar/Brown-Sugar-Regular.woff2') format('woff2'),
    url('../fonts/Brown-Sugar/Brown-Sugar-Regular.otf') format('opentype'),
    url('../fonts/Brown-Sugar/Brown-Sugar-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Founders Grotesk';
  src: url('../fonts/Founders_Grotesk/FoundersGrotesk-Regular.otf') format('opentype');
  /* Single file serves light UI copy (300) through regular (400) */
  font-weight: 300 450;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Founders Grotesk';
  src: url('../fonts/Founders_Grotesk/FoundersGrotesk-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Founders Grotesk';
  src: url('../fonts/Founders_Grotesk/FoundersGrotesk-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Founders Grotesk';
  src: url('../fonts/Founders_Grotesk/FoundersGrotesk-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Editorial New';
  src: url('../fonts/editorial-new-font-family/PPEditorialNew-Regular-BF644b214ff145f.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Editorial New';
  src: url('../fonts/editorial-new-font-family/PPEditorialNew-Italic-BF644b214fb0c0a.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

.body {
  background-color: var(--cp-creme);
  color: var(--cp-forest);
  font-family: var(--font-sans);
}

.home-hero-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100vh;
  margin-bottom: 34vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-image-div {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 134vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.img-fill {
  position: relative;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: auto;
  z-index: 2;
  width: 100%;
  height: 120%;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0.3))), url("Images/63c530ecce5aa29c5dee32d7_resor_3ac7f0973675.jpg");
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("Images/63c530ecce5aa29c5dee32d7_resor_3ac7f0973675.jpg");
  background-position: 0px 0px, 50% 0%;
  background-size: auto, cover;
}

.img-fill.cta2 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(rgba(0, 0, 0, 0.25))), url("Images/63ef58d15a1f5826bff80b8f_mbau-_462a875fd16e.jpg");
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url("Images/63ef58d15a1f5826bff80b8f_mbau-_462a875fd16e.jpg");
  background-position: 0px 0px, 50% 50%;
  background-size: auto, cover;
}

.img-fill.cta2.s2 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0.3))), url("Images/63c591d1a057f00f5f0844d4_sunse_bd771f332e10.jpg");
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("Images/63c591d1a057f00f5f0844d4_sunse_bd771f332e10.jpg");
}

.img-fill.cta2.rr {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(rgba(0, 0, 0, 0.25))), url("Images/63d8fd801496873cff5f2bac_mbau-_25f1fbdcd873.jpg");
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url("Images/63d8fd801496873cff5f2bac_mbau-_25f1fbdcd873.jpg");
  background-position: 0px 0px, 50% 50%;
  background-size: auto, cover;
}

.img-fill.cta2.sr {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(rgba(0, 0, 0, 0.25))), url("Images/63d925da4288973c086c650d_mbau-_d2a691eca946.jpg");
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url("Images/63d925da4288973c086c650d_mbau-_d2a691eca946.jpg");
  background-position: 0px 0px, 50% 50%;
  background-size: auto, cover;
}

.img-fill.cta2-2 {
  height: 100%;
  background-image: none;
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.cta2-2.s2 {
  background-image: none;
}

.img-fill.zoom {
  height: 100%;
  background-image: none;
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.zoom.right {
  background-image: url("Images/63c579bda8e69c0518c3e90b_cta2-_a9e02f0fe2ce.jpg");
}

.img-fill.zoom.s1 {
  background-image: none;
}

.img-fill.bg {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(rgba(0, 0, 0, 0.25))), url("Images/63ef599a0f836ca15753539e_mbau-_47b342d89ca9.jpg");
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url("Images/63ef599a0f836ca15753539e_mbau-_47b342d89ca9.jpg");
  background-position: 0px 0px, 50% 50%;
  background-size: auto, cover;
}

.img-fill.bg.right {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(rgba(0, 0, 0, 0.25))), url("Images/63c579bda8e69c0518c3e90b_cta2-_a9e02f0fe2ce.jpg");
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url("Images/63c579bda8e69c0518c3e90b_cta2-_a9e02f0fe2ce.jpg");
  background-position: 0px 0px, 50% 50%;
  background-size: auto, cover;
}

.img-fill.bg.s1 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0.3))), url("Images/63ef6cd699354083768a1fcb_mbau-_eabcf9c47b7d.jpg");
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("Images/63ef6cd699354083768a1fcb_mbau-_eabcf9c47b7d.jpg");
}

.img-fill.bg.rl {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(rgba(0, 0, 0, 0.25))), url("Images/63e10745f6111a46044229a9_mbau-_9dbd6eba5380.jpg");
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url("Images/63e10745f6111a46044229a9_mbau-_9dbd6eba5380.jpg");
  background-position: 0px 0px, 50% 50%;
  background-size: auto, cover;
}

.img-fill.bg.x1 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), to(rgba(0, 0, 0, 0.25))), url("Images/63e4c26ce1728d1634c5c186_mbau-_1ef9da1e8a00.jpg");
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url("Images/63e4c26ce1728d1634c5c186_mbau-_1ef9da1e8a00.jpg");
  background-position: 0px 0px, 50% 50%;
  background-size: auto, cover;
}

.img-fill._2 {
  background-image: none;
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill._1 {
  background-image: none;
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.dine1 {
  background-image: none;
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.dine2 {
  display: none;
  background-image: url("Images/63c67a4ab8051f145d78ba93_dinin_5c1dc78e89d5.jpg");
  background-position: 50% 0%;
  background-size: cover;
}

.img-fill.dine3 {
  background-image: none;
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.coffee {
  background-image: none;
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.square {
  background-image: none;
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.central {
  display: none;
  background-image: url("Images/63c7d2e381ac424ed9f2d607_spa-i_be3352031dcc.jpg");
  background-position: 50% 0%;
  background-size: cover;
}

.img-fill.signup {
  background-image: none;
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.footer {
  background-image: url("Images/63c7d6e635ae7b24c6da13a7_foote_3781791836fc.jpg");
  background-position: 50% 0%;
  background-size: cover;
}

.img-fill.hero {
  background-image: none;
}

.img-fill.spa {
  background-image: none;
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.spa1 {
  background-image: url("Images/63d7f189de037f59fa8c55a7_spa-h_96415b92493c.jpg");
  background-position: 50% 0%;
  background-size: cover;
}

.img-fill.spa2 {
  display: none;
  background-image: url("Images/63d7f90a11a832028953805c_mbau-_c0c5408af9dd.jpg");
  background-position: 50% 0%;
  background-size: cover;
}

.img-fill.spa3 {
  background-image: none;
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.spa4 {
  background-image: none;
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.spa4._2 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1))), url("Images/63d925da4288973c086c650d_mbau-_d2a691eca946.jpg");
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("Images/63d925da4288973c086c650d_mbau-_d2a691eca946.jpg");
  background-position: 0px 0px, 50% 0%;
  background-size: auto, cover;
}

.img-fill.spa5 {
  background-image: url("Images/63d900ef0c64c79918d94e91_mbau-_c08a74329701.jpg");
  background-position: 50% 0%;
  background-size: cover;
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.spa6 {
  background-image: url("Images/63d8fd801496873cff5f2bac_mbau-_25f1fbdcd873.jpg");
  background-position: 50% 0%;
  background-size: cover;
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.xp {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(70, 39, 36, 0.2)), to(rgba(70, 39, 36, 0.2))), url("Images/63dd0eb175562ff2746063e3_mbau-_20fd7b0202cf.jpg");
  background-image: linear-gradient(180deg, rgba(70, 39, 36, 0.2), rgba(70, 39, 36, 0.2)), url("Images/63dd0eb175562ff2746063e3_mbau-_20fd7b0202cf.jpg");
  background-position: 0px 0px, 50% 0%;
  background-size: auto, cover;
}

.img-fill.e1 {
  background-image: none;
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.e2 {
  background-image: none;
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.e3 {
  background-image: url("Images/63d8fd801496873cff5f2bac_mbau-_25f1fbdcd873.jpg");
  background-position: 50% 0%;
  background-size: cover;
}

.img-fill.e4 {
  background-image: none;
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.e5 {
  background-image: none;
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.e6 {
  background-image: url("Images/63c67a4a62d93378485bb133_dinin_3f622d842794.jpg");
  background-position: 50% 0%;
  background-size: cover;
}

.img-fill.e7 {
  background-image: none;
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.e8 {
  background-image: none;
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.e9 {
  background-image: url("Images/63d7f90a11a832028953805c_mbau-_c0c5408af9dd.jpg");
  background-position: 50% 0%;
  background-size: cover;
}

.img-fill.st1 {
  position: absolute;
  left: 0%;
  top: auto;
  right: 0%;
  bottom: 0%;
  height: 95vh;
  background-image: url("Images/63e1093e6582935a361c2001_mbau-_ef1c7b738e8c.jpg");
  background-position: 50% 0%;
  background-size: cover;
}

.img-fill.st1-2 {
  position: absolute;
  height: 40vh;
  background-image: url("Images/63e10948ad00f719a32961fb_mbau-_b635d9ceeedd.jpg");
  background-position: 50% 0%;
  background-size: cover;
}

.img-fill.st2 {
  z-index: 3;
  height: 95vh;
  background-image: url("Images/63e10745f6111a46044229a9_mbau-_9dbd6eba5380.jpg");
  background-position: 50% 0%;
  background-size: cover;
}

.img-fill.st2-2 {
  height: 40vh;
  background-image: url("Images/63e1073c140d9cea23f9551c_mbau-_48168000e7bd.jpg");
  background-position: 50% 0%;
  background-size: cover;
}

.img-fill.st3 {
  z-index: 4;
  height: 95vh;
  background-image: url("Images/63d93f8b509f2ef7bb42896f_mbau-_677d547e52f1.jpg");
  background-position: 50% 0%;
  background-size: cover;
}

.img-fill.st3-2 {
  height: 40vh;
  background-image: url("Images/63e107f0108050c1053be60c_mbau-_0cf068bc9de4.jpg");
  background-position: 50% 0%;
  background-size: cover;
}

.img-fill.st4 {
  z-index: 5;
  height: 95vh;
  background-image: url("Images/63e10bf36455fe471107027c_mbau-_0f60c5873439.jpg");
  background-position: 50% 0%;
  background-size: cover;
}

.img-fill.st4-2 {
  height: 40vh;
  background-image: url("Images/63c67a4a199d46508279b138_dinin_028656dd4a21.jpg");
  background-position: 50% 0%;
  background-size: cover;
}

.img-fill.xp-circle {
  background-image: none;
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.r1 {
  background-image: url("Images/63e393a5d98fcca4322bd5c1_mbau-_ed38b10cec2f.jpg");
  background-position: 50% 0%;
  background-size: cover;
}

.img-fill.r2 {
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.r3 {
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.r4 {
  background-image: url("Images/63c57a0be1e3f9203f77816d_cta1-_6c09744fafdd.jpg");
  background-position: 50% 0%;
  background-size: cover;
}

.img-fill.s1 {
  background-image: none;
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.s2 {
  background-image: none;
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.s3 {
  background-image: none;
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.s4 {
  background-image: none;
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.s5 {
  background-image: url("Images/63e4c0ed8c7a8fa615645e4e_mbau-_06fca60081ef.jpg");
  background-position: 50% 0%;
  background-size: cover;
}

.img-fill.s6 {
  -o-object-fit: cover;
  object-fit: cover;
}

.img-fill.s7 {
  background-image: url("Images/63d925da4288973c086c650d_mbau-_d2a691eca946.jpg");
  background-position: 50% 0%;
  background-size: cover;
}

.img-fill.s8 {
  background-image: url("Images/63c67a4a62d93378485bb133_dinin_3f622d842794.jpg");
  background-position: 50% 0%;
  background-size: cover;
}

.hero-heading-div {
  position: absolute;
  left: 0%;
  top: auto;
  right: 0%;
  bottom: 6vh;
  z-index: 12;
  display: flex;
  width: 100%;
  padding-right: 30vw;
  padding-left: 30vw;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  grid-row-gap: 2.5vh;
}

.subheading {
  margin-top: 0px;
  margin-bottom: 0px;
  font-family: var(--font-sans);
  color: var(--cp-white);
  font-size: 0.7vw;
  line-height: 0.9vw;
  font-weight: 400;
  letter-spacing: 0.2vw;
  text-decoration: none;
  text-transform: uppercase;
}

.subheading.phonetic {
  position: absolute;
  left: auto;
  top: 0%;
  right: -0.5vw;
  bottom: auto;
  display: inline;
  color: var(--cp-coral);
  text-align: right;
}

.subheading.mid {
  position: relative;
  z-index: 5;
  text-align: center;
}

.subheading.mid.coral {
  color: var(--cp-coral);
}

.subheading.mid.cta {
  position: absolute;
  bottom: 2vh;
}

.subheading.mid.ctal {
  position: absolute;
  bottom: 3.5vw;
  z-index: 7;
  color: var(--cp-coral);
}

.subheading.coral {
  color: var(--cp-coral);
}

.subheading.right {
  text-align: right;
}

.subheading.intro {
  color: var(--cp-coral);
  text-align: center;
}

.subheading.midc {
  color: var(--cp-coral);
  text-align: center;
}

.subheading.link {
  text-decoration: underline;
}

.motif-div {
  position: absolute;
  bottom: 10vh;
  z-index: 10;
  width: 15vh;
  height: 18vh;
  background-image: url("Images/63c539ddf6343ef74b9fc788_mbau-_908757a6830a.svg");
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: overlay;
}

.motif-div._2 {
  opacity: 0.3;
}

.nav-container {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: auto;
  z-index: 80;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-top: 1.5vw;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.nav-div {
  position: absolute;
  left: 1.5vw;
  top: 1.5vw;
  right: auto;
  bottom: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  grid-row-gap: 0.6vh;
}

.nav-div.right {
  left: auto;
  top: 1.5vw;
  right: 1.5vw;
  bottom: auto;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.nav-div.footer {
  left: 0vw;
  top: 0vw;
}

.nav-div.rightfoot {
  left: auto;
  top: 0vw;
  right: 0vw;
  bottom: auto;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.nav-button {
  margin-top: 0px;
  margin-bottom: 0px;
  font-family: var(--font-sans), sans-serif;
  color: #fff;
  font-size: 0.8vw;
  line-height: 0.8vw;
  font-weight: 400;
  letter-spacing: 0.1vw;
  text-decoration: none;
  text-transform: uppercase;
}

.nav-button.coral {
  color: var(--cp-coral);
}

.nav-button.mob {
  display: none;
}

.nav-logo {
  position: relative;
  z-index: 10;
  width: 6vw;
  height: 3vw;
  background-image: url("Images/63c54a898ec26439b3636c56_mbau-_105d4d490565.svg");
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
}

.nav-logo._2 {
  background-image: url("Images/63c7d9b2c443b01b8e0fa829_logo-_f867b32fcbc8.svg");
}

.hero-line {
  position: absolute;
  bottom: 0vh;
  z-index: 10;
  width: 1px;
  height: 10vh;
  border-style: dotted;
  border-width: 1px;
  border-color: #fff;
  mix-blend-mode: overlay;
}

.hero-line._2 {
  opacity: 0.3;
}

.intro-section {
  position: relative;
  z-index: 11;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 100%;
  padding-top: 25vh;
  padding-bottom: 25vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #f9f4ee;
}

.intro-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 30vw;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.heading2 {
  margin-top: 0px;
  margin-bottom: 0px;
  font-family: var(--cp-font-heading), sans-serif;
  font-size: 3vw;
  line-height: 3vw;
  font-weight: 200;
}

.intro-heading-div {
  position: relative;
  padding-top: 1vw;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.intro-sub-div {
  width: 25vw;
  padding-top: 1vh;
}

.intro-img {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 36vh;
  margin-top: 4vh;
  margin-bottom: 4vh;
}

.large-body {
  font-family: var(--cp-font-heading), sans-serif;
  color: var(--cp-coral);
  font-size: 1.5vw;
  line-height: 1.7vw;
  font-weight: 200;
  text-align: center;
}

.large-body.right {
  text-align: right;
}

.large-body.left {
  text-align: left;
}

.intro-para {
  width: 100%;
}

.motif-container {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 134vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.cta-section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 100%;
  padding-right: 1vw;
  padding-left: 1vw;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  grid-column-gap: 1vw;
}

.cta-column {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 50%;
  padding-top: 20vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.cta-column.ncta {
  padding-top: 0vh;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.cta-column-img {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.cta-img {
  position: relative;
  z-index: 6;
  overflow: hidden;
  width: 50%;
  height: 60vh;
  margin-top: 2vh;
  margin-bottom: 2vh;
}

.italic-pp {
  font-style: italic;
}

.cta-button {
  position: relative;
  z-index: 6;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 26vh;
  height: 13vh;
  margin-top: 5vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  mix-blend-mode: overlay;
}

.cta-button-shape {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-image: url("Images/63c576ed8c4631e48dd75128_hover_788b09e31979.svg");
  background-position: 50% 100%;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.25;
}

.temp-spacer {
  position: relative;
  width: 100%;
  height: 100vh;
}

.background-video {
  width: 100%;
  height: 100%;
}

.date-div {
  position: absolute;
  left: 0%;
  top: auto;
  right: 0%;
  bottom: 2vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  grid-column-gap: 1vw;
}

.offset-section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 100%;
  padding-top: 25vh;
  padding-bottom: 30vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.text-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.display-type {
  margin-top: 0px;
  margin-bottom: 0px;
  font-family: var(--cp-font-heading), sans-serif;
  color: var(--cp-coral);
  font-size: 34vw;
  line-height: 28vw;
  font-weight: 200;
  letter-spacing: -1vw;
}

.body-container {
  width: 67vw;
  margin-bottom: 5vh;
}

.body-container.resort {
  margin-bottom: 3vh;
}

.internal-motif {
  width: 7vw;
  height: 9vw;
  background-image: url("Images/63c58fc3628bb13e0a35d251_Group_6d1f27c4440b.svg");
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
}

.split-container {
  display: flex;
  width: 100%;
  margin-top: 10vh;
  padding-right: var(--cp-column-gap);
  padding-left: var(--cp-column-gap);
  justify-content: space-between;
  align-items: flex-end;
}

.split-container.spa {
  align-items: stretch;
}

.left-column {
  display: flex;
  width: 15vw;
  flex-direction: column;
  align-items: flex-start;
  grid-row-gap: 2vh;
}

.left-column.spa {
  width: 35vw;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.shell-div {
  width: 6vw;
  height: 5vw;
  margin-bottom: 2vh;
  background-image: url("Images/63c58fc3f0dae77647e1281b_shell_cfa472fbf9f2.svg");
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
}

.shell-div._2 {
  background-image: url("Images/63c7d14cdcf6a4a61f0c979b_shell_84faa413f84a.svg");
}

.year {
  font-family: var(--cp-font-heading), sans-serif;
  color: var(--cp-coral);
  font-size: 2vw;
  line-height: 2vw;
  font-style: italic;
  font-weight: 200;
  text-align: left;
  letter-spacing: -0.1vw;
}

.body-copy {
  margin-bottom: 0px;
  font-family: var(--font-sans), sans-serif;
  color: var(--cp-coral);
  font-size: 0.85vw;
  line-height: 1vw;
  font-weight: 400;
}

.right-column {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  grid-column-gap: 2vw;
}

.right-column.spa {
  padding-top: 15vh;
}

.image-div {
  overflow: hidden;
  width: 22vw;
  height: 28vw;
}

.image-div._2 {
  width: 13vw;
  height: 16vw;
}

.image-div.spa {
  width: 26vw;
  height: 30vw;
}

.divider-container {
  display: flex;
  width: 100%;
  margin-top: 15vh;
  margin-bottom: 15vh;
  flex-direction: column;
  align-items: center;
}

.divider-container.xp {
  margin-bottom: 30vh;
}

.divider-container.xp2 {
  margin-top: 5vh;
}

.divider-div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  grid-column-gap: 2vw;
}

.divider-line {
  width: 42vw;
  height: 0.5px;
  background-color: var(--cp-lagoon);
  opacity: 0.25;
}

.divider-line._2 {
  width: 44vw;
  margin-top: -2vw;
}

.divider-line._1 {
  width: 39vw;
}

.divider-line._3 {
  width: 36vw;
}

.stars-flex {
  display: flex;
  margin-top: 2vh;
  justify-content: center;
  align-items: center;
  grid-column-gap: 1vw;
}

.star-div {
  width: 0.4vw;
  height: 0.4vw;
  background-image: url("Images/63c6773234da513bf42548c7_star-_6ae2265b8457.svg");
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
}

.dining-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.dining-column {
  display: flex;
  width: 50%;
  padding-top: 18vh;
  padding-bottom: 18vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.img-container {
  position: relative;
  overflow: hidden;
  width: 25vw;
  height: 30vw;
}

.dining-txt-split {
  display: flex;
  width: 25vw;
  margin-top: 2vh;
  justify-content: space-between;
}

.small-img {
  overflow: hidden;
  width: 40%;
  height: 12vw;
}

.dining-text-flex {
  display: flex;
  width: 60%;
  padding-right: 5%;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.dining-img-column {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 50%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.parallax-section {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 100%;
  padding-top: 25vh;
  padding-bottom: 40vh;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.text-wrap {
  position: relative;
  z-index: 5;
  width: 65%;
}

.display-heading {
  margin-top: 0px;
  margin-bottom: 0px;
  font-family: var(--cp-font-heading), sans-serif;
  color: var(--cp-coral);
  font-size: 8vw;
  line-height: 8vw;
  font-weight: 200;
  text-align: center;
}

.display-heading.large {
  position: relative;
  z-index: 4;
  margin-top: 6vh;
  margin-left: 1vw;
  font-size: 27vw;
  line-height: 27vw;
  letter-spacing: -0.8vw;
}

.display-heading.white {
  color: #fff;
}

.italic-display {
  font-style: italic;
}

.cliff-base {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 2;
  background-image: url("Images/63c69a3ba382faf725319407_islan_491746766e7a.jpg");
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.cliff-top {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 6;
  background-image: url("Images/63c69a3e0a57ab0b8191c552_islan_11960ed2d92d.png");
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.cta-large {
  position: absolute;
  left: 0%;
  top: auto;
  right: 0%;
  bottom: 0%;
  z-index: 8;
  width: 24vw;
  height: 12vw;
  margin-left: 38vw;
  background-image: url("Images/63c576ed8c4631e48dd75128_hover_788b09e31979.svg");
  background-position: 50% 100%;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.25;
  mix-blend-mode: overlay;
}

.cards-section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 100%;
  padding: 30vh 8vw;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.cards-left {
  width: 42%;
  padding-top: 12vh;
}

.text-flex {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-bottom: 16vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.para-div {
  width: 17vw;
  margin-top: 5vh;
}

.motif-2 {
  position: absolute;
  left: 0%;
  top: auto;
  right: auto;
  bottom: 0%;
  width: 13vh;
  height: 20vh;
  background-image: url("Images/63c7ca329471e632c9d52ff6_motif_a1bfc6df52a2.svg");
  background-position: 0px 0px;
  background-size: contain;
  background-repeat: no-repeat;
}

.motif-2.resort {
  position: relative;
}

.cards-right {
  position: relative;
  width: 58%;
}

.card-base {
  position: absolute;
  z-index: 5;
  width: 22vw;
  height: 31vw;
  background-image: url("Images/63c814d5848e51506867e264_locat_a78318adcca7.jpg");
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}

.card-base.top {
  left: auto;
  right: 4vw;
  bottom: 5vw;
  z-index: 6;
  background-image: url("Images/63c814d5a16a181bfdda57aa_admis_306966a8f459.jpg");
  box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.1);
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}

.card-base.base {
  left: auto;
  top: auto;
  right: 15vw;
  bottom: 0vw;
  box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.1);
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}

.relaxation-section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.image-split-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.large-img {
  overflow: hidden;
  width: 55%;
  height: 55vw;
}

.split-right {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 45%;
  padding-right: 1vw;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.small-image {
  overflow: hidden;
  width: 16vw;
  height: 22vw;
  margin-top: 14vw;
  margin-right: 10vw;
  border-radius: 8vw;
}

.italic {
  font-style: italic;
}

.circle-split {
  position: relative;
  z-index: 5;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.right-text {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 55%;
  padding-left: 18vw;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  grid-row-gap: 4vh;
}

.circle-div {
  position: relative;
  z-index: 5;
  overflow: hidden;
  width: 30vw;
  height: 30vw;
  margin-top: -8vw;
  margin-right: 6vw;
  border-radius: 50%;
}

.circle-div.spa {
  width: 34vw;
  height: 34vw;
  margin-top: -3vw;
  margin-right: 0vw;
}

.divider-section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 100%;
  margin-top: 12vh;
  padding-bottom: 25vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  grid-row-gap: 14vh;
}

.divider-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  grid-column-gap: 2vw;
}

.divider-wrap.resort {
  padding-top: 30vh;
  padding-bottom: 15vh;
}

.shell-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.signup-section {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 100%;
  padding-top: 45vh;
  padding-bottom: 45vh;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.signup-box {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 22vw;
  height: 22vw;
  padding: 0.5vw;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: var(--cp-coral);
}

.signup-container {
  position: relative;
  z-index: 5;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  grid-row-gap: 1vh;
}

.signup-img {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 4;
  overflow: hidden;
}

.signup-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.enquire-button {
  position: absolute;
  z-index: 10;
  padding-bottom: 4px;
  border-bottom: 0.5px solid #fff;
  text-decoration: none;
}

.div-block {
  position: relative;
  z-index: 5;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.footer-section {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  padding-right: 1vw;
  padding-left: 1vw;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.footer-base-div {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.footer-img {
  overflow: hidden;
  width: 28vh;
  height: 35vh;
}

.legal-links {
  position: absolute;
  left: 0%;
  top: auto;
  right: auto;
  bottom: 1vw;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  grid-column-gap: 2vw;
}

.signup-footer {
  position: absolute;
  left: auto;
  top: auto;
  right: 0%;
  bottom: 1vw;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 24vw;
  height: 7vw;
  padding: 0.5vw;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  background-color: var(--cp-coral);
  text-decoration: none;
  cursor: pointer;
}

.footer-heading {
  position: relative;
  left: 0%;
  top: auto;
  right: 0%;
  z-index: 12;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 30vw;
  margin-bottom: 14vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  grid-row-gap: 2.5vh;
}

.footer-logo {
  position: absolute;
  left: 47vw;
  top: 4vh;
  right: 0%;
  bottom: auto;
  width: 6vw;
  height: 3vw;
  background-image: url("Images/63c7d9b2c443b01b8e0fa829_logo-_f867b32fcbc8.svg");
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
}

.html-embed {
  width: 100%;
  height: 100%;
}

.collection-list-wrapper {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 1;
  width: 100%;
  height: 120%;
}

.collection-item {
  position: relative;
  width: 100%;
  height: 100%;
}

.collection-list {
  width: 100%;
  height: 100%;
}

.html-embed-2 {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  height: 0px;
  padding-top: 56.25%;
}

.intro-heading {
  position: relative;
  z-index: 5;
  margin-top: 0px;
  margin-bottom: 0px;
  font-family: var(--cp-font-heading), sans-serif;
  color: var(--cp-coral);
  font-size: 3.2vw;
  line-height: 3.2vw;
  font-weight: 200;
  text-align: center;
  letter-spacing: -0.1vw;
}

.intro-heading.coral {
  color: var(--cp-coral);
}

.intro-heading.left {
  text-align: left;
}

.intro-heading.base {
  margin-top: 1vh;
}

.intro-heading.mandc._8 {
  padding-right: 0.8vw;
}

.intro-heading.nd {
  display: none;
}

.relax-trigger {
  position: relative;
  z-index: 4;
}

.relax-display {
  position: relative;
  z-index: 4;
  margin-top: 6vh;
  margin-bottom: 0px;
  margin-left: 1vw;
  font-family: var(--cp-font-heading), sans-serif;
  color: var(--cp-coral);
  font-size: 26vw;
  line-height: 27vw;
  font-style: normal;
  font-weight: 200;
  text-align: center;
  letter-spacing: -0.8vw;
}

.video-wrapper-2 {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.home-lower-txt {
  position: relative;
  z-index: 5;
  margin-top: 0px;
  margin-bottom: 0px;
  font-family: var(--cp-font-heading), sans-serif;
  color: var(--cp-coral);
  font-size: 3.2vw;
  line-height: 3.2vw;
  font-weight: 200;
  text-align: center;
  letter-spacing: -0.1vw;
}

.home-lower-txt.coral {
  color: var(--cp-coral);
}

.home-lower-txt.left {
  text-align: left;
}

.home-lower-txt.base {
  margin-top: 1vh;
}

.loader-wrapper {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 100;
  width: 100vw;
  height: 100vh;
}

.m-contain {
  position: absolute;
  left: 1.5vw;
  top: 2vh;
  right: auto;
  bottom: auto;
  z-index: 20;
  width: 5%;
  height: 10%;
}

.m-div {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 5;
  background-image: url("Images/63cfc7157c15220fcad1a101_mw_a45ad127a6b3.svg");
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
}

.m-div.coral {
  z-index: 4;
  background-image: url("Images/63cfc715867ebfbfcf076f2f_mc_a253a772490f.svg");
  opacity: 1;
}

.b-contain {
  position: absolute;
  left: auto;
  top: 2vh;
  right: 1vw;
  bottom: auto;
  z-index: 20;
  width: 5%;
  height: 10%;
}

.b-div {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 5;
  background-image: url("Images/63cfc71529c06592b07e7bf5_bw_32eb251fefea.svg");
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
}

.b-div.coral {
  z-index: 4;
  background-image: url("Images/63cfc715cd678e7638a387bb_bc_e58c6a6af6d9.svg");
  opacity: 1;
}

.a-contain {
  position: absolute;
  left: 1vw;
  top: auto;
  right: auto;
  bottom: 2vh;
  z-index: 20;
  width: 5%;
  height: 10%;
}

.u-contain {
  position: absolute;
  left: auto;
  top: auto;
  right: 1vw;
  bottom: 2vh;
  z-index: 20;
  width: 5%;
  height: 10%;
}

.a-div {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 5;
  background-image: url("Images/63cfc7150dffeb165d795e47_aw_79c6a57dab67.svg");
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
}

.a-div.coral {
  z-index: 4;
  background-image: url("Images/63cfc7155156c7584cf3ecbd_ac_3f6a4d1cec22.svg");
  opacity: 1;
}

.u-div {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 5;
  background-image: url("Images/63cfc71531fcb0cf1022c396_uw_ec41d27191fc.svg");
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
}

.u-div.coral {
  z-index: 4;
  background-image: url("Images/63cfc71529c065f7d27e7bf6_uc_3fe70a8d3826.svg");
  opacity: 1;
}

.tempremove {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 5;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-top: 2vh;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.templ {
  width: 5%;
  height: 10%;
  background-image: url("Images/63cfc7157c15220fcad1a101_mw_a45ad127a6b3.svg");
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
}

.templ._2 {
  margin-left: -1.2%;
  background-image: url("Images/63cfc71529c06592b07e7bf5_bw_32eb251fefea.svg");
}

.templ._3 {
  margin-left: -2.2%;
  background-image: url("Images/63cfc7150dffeb165d795e47_aw_79c6a57dab67.svg");
}

.templ._4 {
  margin-left: -2.3%;
  background-image: url("Images/63cfc71531fcb0cf1022c396_uw_ec41d27191fc.svg");
  background-position: 50% 50%;
}

.logo-in-contain {
  position: absolute;
  z-index: 11;
  display: none;
  margin-top: -0.1vw;
  margin-left: 0.5vw;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.letter-div {
  width: 2.3vw;
  height: 2.25vw;
}

.letter-div.m {
  position: relative;
}

.letter-div.b {
  position: relative;
  margin-left: -0.55vw;
}

.letter-div.a {
  position: relative;
  margin-left: -1vw;
}

.letter-div.u {
  position: relative;
  margin-left: -1.1vw;
}

.hero-overlay {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 2;
  display: none;
  width: 100%;
  height: 120%;
  margin-top: -4%;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.hero-overlay._2 {
  display: none;
  margin-top: 4vh;
}

.overlay-column {
  width: 55%;
  height: 100%;
  background-color: #f9f4ee;
}

.mw {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 2;
  background-image: url("Images/63cfc7157c15220fcad1a101_mw_a45ad127a6b3.svg");
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
}

.mw.coral {
  z-index: 3;
  background-image: url("Images/63cfc715867ebfbfcf076f2f_mc_a253a772490f.svg");
  opacity: 1;
}

.bw {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 2;
  background-image: url("Images/63cfc71529c06592b07e7bf5_bw_32eb251fefea.svg");
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
}

.bw.coral {
  z-index: 3;
  background-image: url("Images/63cfc715867ebfbfcf076f2f_mc_a253a772490f.svg");
}

.bw._2 {
  z-index: 3;
  background-image: url("Images/63cfc715cd678e7638a387bb_bc_e58c6a6af6d9.svg");
  opacity: 1;
}

.aw {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 2;
  background-image: url("Images/63cfc7150dffeb165d795e47_aw_79c6a57dab67.svg");
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
}

.aw.coral {
  z-index: 3;
  background-image: url("Images/63cfc715867ebfbfcf076f2f_mc_a253a772490f.svg");
}

.aw._2 {
  z-index: 3;
  background-image: url("Images/63cfc7155156c7584cf3ecbd_ac_3f6a4d1cec22.svg");
  opacity: 1;
}

.uw {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 2;
  background-image: url("Images/63cfc71531fcb0cf1022c396_uw_ec41d27191fc.svg");
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
}

.uw.coral {
  z-index: 3;
  background-image: url("Images/63cfc715867ebfbfcf076f2f_mc_a253a772490f.svg");
}

.uw._2 {
  z-index: 3;
  background-image: url("Images/63cfc7155156c7584cf3ecbd_ac_3f6a4d1cec22.svg");
}

.uw._3 {
  z-index: 3;
  background-image: url("Images/63cfc71529c065f7d27e7bf6_uc_3fe70a8d3826.svg");
  opacity: 1;
}

.overlay-mask {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 2;
  display: none;
  overflow: hidden;
  width: 100%;
  height: 134vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #f9f4ee;
}

.video-overlay {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.4);
}

.image-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  margin-bottom: 30vh;
}

.burger-contain {
  display: none;
}

.burger-link {
  position: relative;
  z-index: 5;
  margin-top: 0px;
  margin-bottom: 0px;
  font-family: var(--cp-font-heading), sans-serif;
  color: var(--cp-coral);
  font-size: 3.2vw;
  line-height: 3.2vw;
  font-weight: 200;
  text-align: center;
  letter-spacing: -0.1vw;
}

.burger-link.coral {
  color: var(--cp-coral);
}

.burger-link.left {
  text-align: left;
}

.burger-link.base {
  margin-top: 1vh;
}

.stop--scroll {
  display: none;
}

.start--scroll {
  display: none;
}

.img-hero-contain {
  overflow: hidden;
  width: 100%;
  height: 130vh;
}

.video-split {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.split-one {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 50%;
  padding-top: 20vh;
  padding-bottom: 20vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.split-two {
  position: relative;
  display: none;
  overflow: hidden;
  width: 50%;
}

.mbau-spa-heading {
  margin-top: 0px;
  margin-bottom: 0px;
  font-family: var(--cp-font-heading), sans-serif;
  color: #f9f4ee;
  font-size: 23vw;
  line-height: 23vw;
  font-weight: 200;
  text-align: center;
  letter-spacing: -0.8vw;
}

.mbau-spa-heading.large {
  position: relative;
  z-index: 4;
  margin-top: 6vh;
  margin-left: 1vw;
  font-size: 27vw;
  line-height: 27vw;
  letter-spacing: -0.8vw;
}

.mbau-spa-heading.xp {
  letter-spacing: -1vw;
}

.mbau-spa-heading.resort {
  color: var(--cp-coral);
}

.spa-heading-contain {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 5;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  padding-top: 8vh;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.text-span {
  font-style: italic;
}

.spa-intro {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-top: 30vh;
  padding-bottom: 25vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.spa-heading {
  position: relative;
  z-index: 6;
  width: 54vw;
}

.spa-heading._2 {
  width: 30vw;
  margin-top: 6vh;
}

.spa-heading._3 {
  width: 30vw;
  margin-top: 12vh;
}

.spa-heading._4 {
  width: 32vw;
  margin-top: 6vh;
}

.large-heading {
  position: relative;
  z-index: 5;
  margin-top: 0px;
  margin-bottom: 0px;
  font-family: var(--cp-font-heading), sans-serif;
  color: var(--cp-coral);
  font-size: 6.5vw;
  line-height: 6.5vw;
  font-weight: 200;
  text-align: center;
  letter-spacing: -0.1vw;
}

.large-heading.coral {
  color: var(--cp-coral);
}

.large-heading.left {
  font-size: 6vw;
  line-height: 6.2vw;
  text-align: left;
}

.large-heading.left.white {
  color: #f9f4ee;
}

.large-heading.base {
  margin-top: 1vh;
}

.large-heading.nls {
  letter-spacing: 0vw;
}

.split-image {
  overflow: hidden;
  width: 18vw;
  height: 24vw;
  border-top-left-radius: 10vw;
  border-top-right-radius: 10vw;
}

.split-text-div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 34vw;
  margin-top: 5vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  grid-row-gap: 2vh;
}

.spa-video-section {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-right: 2vw;
  padding-left: 2vw;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.spa-unwind {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: -3vw;
  font-family: var(--cp-font-heading), sans-serif;
  color: var(--cp-coral);
  font-size: 35vw;
  line-height: 35vw;
  font-weight: 200;
  text-align: center;
  letter-spacing: -0.8vw;
}

.spa-unwind.large {
  position: relative;
  z-index: 4;
  margin-top: 6vh;
  margin-left: 1vw;
  font-size: 27vw;
  line-height: 27vw;
  letter-spacing: -0.8vw;
}

.unwind-video-contain {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 110vh;
  margin-top: -3vw;
}

.spa-text {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  grid-row-gap: 3vh;
}

.list-contain {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  grid-column-gap: 3vw;
}

.list-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.shell-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  grid-column-gap: 1vw;
}

.pull-quote-section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-top: 8vh;
  padding-bottom: 8vh;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.quote-column {
  width: 62vw;
  padding-right: 7vw;
}

.cta-text-contain {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-bottom: 7vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.cta-text-div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 35vw;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  grid-row-gap: 2vh;
}

.xp-intro-section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-top: 20vh;
  padding-bottom: 15vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.xp-intro {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 73vw;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  grid-row-gap: 8vh;
}

.xp-intro-div {
  width: 31vw;
  margin-right: 2vw;
}

.image-scroll-section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100vh;
  padding-right: 1vw;
  padding-left: 1vw;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.image-scroll-wrap {
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 1vw;
  background-color: #f1eae1;
}

.image-scroll-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-left: -8vw;
  padding-right: 2vw;
  padding-left: 2vw;
  grid-column-gap: 2vw;
  -webkit-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  transform: rotate(5deg);
}

.image-column {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 33.33%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  grid-row-gap: 2vw;
}

.image-scroll-div {
  overflow: hidden;
  width: 100%;
  height: 68vh;
}

.xp-text-section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 100%;
  padding-top: 25vh;
  padding-bottom: 12vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.xp-text-section._2 {
  padding-top: 10vh;
}

.xp-heading-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-right: 3vw;
  padding-left: 3vw;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.xp-heading-row._2 {
  margin-top: -11vw;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.xp-heading-row._3 {
  margin-top: -1.5vw;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  grid-column-gap: 3vw;
}

.xp-heading {
  margin-top: 0px;
  margin-bottom: 0px;
  font-family: var(--cp-font-heading), sans-serif;
  color: var(--cp-coral);
  font-size: 19vw;
  line-height: 19vw;
  font-weight: 200;
  letter-spacing: -1vw;
}

.xp-heading.italic {
  margin-right: 2.5vw;
}

.xp-heading.white {
  color: #f9f4ee;
}

.xp-shell {
  width: 16vw;
  height: 16vw;
  margin-top: 9vw;
  margin-right: 14vw;
  background-image: url("Images/63c58fc3f0dae77647e1281b_shell_cfa472fbf9f2.svg");
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
}

.mbau-motif {
  width: 8vw;
  height: 12vw;
  margin-top: -4vw;
  background-image: url("Images/63c7ca329471e632c9d52ff6_motif_a1bfc6df52a2.svg");
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
}

.xp-sticky-section {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.experience-wrapper {
  position: -webkit-sticky;
  position: sticky;
  top: 5vh;
  z-index: 5;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 95vh;
}

.experience-wrapper._2 {
  top: 12vh;
  z-index: 6;
}

.experience-wrapper._3 {
  top: 19vh;
  z-index: 7;
}

.experience-wrapper._4 {
  top: 26vh;
  z-index: 8;
}

.xp-img-wrap {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 38%;
  height: 95vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.xp-text-column {
  position: relative;
  width: 62%;
  padding-right: 2vw;
  padding-left: 2vw;
  background-color: #f9f4ee;
}

.xp-detail-txt {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 30vw;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  grid-row-gap: 1vh;
}

.xp-txt-wrap {
  position: relative;
  z-index: 5;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.small-img-contain {
  position: -webkit-sticky;
  position: sticky;
  left: auto;
  top: 35vh;
  right: 0%;
  bottom: auto;
  z-index: 30;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 32vh;
  height: 40vh;
  margin-top: -70vh;
  margin-right: 2vw;
  margin-bottom: 32vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.xp-gradient {
  position: absolute;
  left: 0%;
  top: -7vh;
  right: 0%;
  bottom: auto;
  z-index: 3;
  height: 7vh;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(249, 244, 238, 0)), color-stop(72%, #f9f4ee));
  background-image: linear-gradient(180deg, rgba(249, 244, 238, 0), #f9f4ee 72%);
}

.xp-img-contain {
  position: absolute;
  z-index: 8;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.xp-img-contain._2 {
  z-index: 6;
}

.xp-img-contain._3 {
  z-index: 7;
}

.circle-section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-top: 30vh;
  padding-bottom: 25vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
}

.resort-hero {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.oval-img-contain {
  position: absolute;
  z-index: 4;
  overflow: hidden;
  width: 52vh;
  height: 68vh;
  margin-top: -3vh;
  border-radius: 50%;
}

.resort-h1 {
  position: relative;
  z-index: 5;
  margin-top: -3vh;
}

.resort-hero-sub {
  position: absolute;
  left: 0%;
  top: auto;
  right: 0%;
  bottom: 0%;
  z-index: 5;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.resort-image-section {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-right: 2vw;
  padding-left: 2vw;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.resort-image-section._2 {
  margin-top: -72vh;
  margin-bottom: 8vh;
}

.resort-video-contain {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 110vh;
  margin-top: 1vh;
}

.resort-intro-div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 31vw;
  margin-right: 2vw;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  grid-row-gap: 2vh;
}

.accomodation-section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-right: 2vw;
  padding-left: 2vw;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  grid-column-gap: 1vw;
}

.resort-img-left {
  overflow: hidden;
  width: 50vw;
  height: 40vw;
}

.resort-img-right {
  overflow: hidden;
  width: 16vw;
  height: 20vw;
}

.resort-right {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  grid-column-gap: 11vw;
}

.resort-divider-section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.resort-img-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 180vh;
  margin-top: 1vh;
}

.resort-img-text {
  position: absolute;
  left: 3vw;
  top: auto;
  right: auto;
  bottom: 50vh;
  z-index: 3;
  width: 50vw;
}

.resort-feature-text {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin-top: 20vh;
  margin-bottom: 30vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.feature-txt-wrap {
  width: 75.6vw;
}

.feature-txt-div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.resort-sticky-div {
  position: relative;
  top: 0px;
  width: 100%;
}

.facilities-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  grid-row-gap: 1vh;
}

.resort-sticky-section {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 5vh;
}

.sticky-images-wrap {
  position: -webkit-sticky;
  position: sticky;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: -130vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.images-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 85vw;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.images-row._2 {
  width: 100%;
  padding-right: 2vw;
  padding-left: 2vw;
}

.images-row._3 {
  width: 100%;
  margin-top: -5vh;
  padding-right: 2vw;
  padding-left: 2vw;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.images-row._4 {
  width: 100%;
  margin-top: 5vh;
  padding-right: 2vw;
  padding-left: 2vw;
}

.s-image._1 {
  overflow: hidden;
  width: 10vw;
  height: 24vh;
  margin-left: 18vw;
}

.s-image._2 {
  overflow: hidden;
  width: 18vw;
  height: 40vh;
  margin-top: 15vh;
}

.s-image._3 {
  overflow: hidden;
  width: 35vw;
  height: 45vh;
  margin-top: 20vh;
}

.s-image._4 {
  overflow: hidden;
  width: 11vw;
  height: 24vh;
  margin-right: 30vw;
}

.s-image._5 {
  overflow: hidden;
  width: 25vw;
  height: 32vh;
  margin-right: 10vw;
}

.s-image._6 {
  overflow: hidden;
  width: 18vw;
  height: 40vh;
  margin-top: 25vh;
  margin-left: 24vw;
}

.s-image._7 {
  overflow: hidden;
  width: 10vw;
  height: 24vh;
  margin-left: 5vw;
}

.s-image._8 {
  overflow: hidden;
  width: 22vw;
  height: 40vh;
  margin-top: 15vh;
  margin-right: 18vw;
}

.utility-page-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100vw;
  height: 100vh;
  max-height: 100%;
  max-width: 100%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.utility-page-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 260px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
}

.form-section {
  position: fixed;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 900;
  display: none;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  background-color: rgba(0, 0, 0, 0.15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.form-wrapper {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 46vw;
  height: 100vh;
  padding-right: 5.5vw;
  padding-left: 5.5vw;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: rgba(249, 244, 238, 0.9);
}

.form-contain {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-top: 5vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  grid-row-gap: 6vh;
}

.form-close {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 5vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.field-style {
  width: 100%;
  margin-bottom: 0px;
  padding: 4vh 1.5vw;
  border-style: solid none;
  border-width: 1px 0px;
  border-color: var(--cp-coral) #000;
  background-color: transparent;
  font-family: var(--cp-font-heading), sans-serif;
  color: var(--cp-coral);
  font-size: 1.5vw;
  line-height: 1.7vw;
  font-weight: 200;
}

.field-style:active {
  border-top-color: var(--cp-coral);
  border-bottom-color: var(--cp-coral);
}

.field-style:focus {
  border-top-color: var(--cp-coral);
  border-bottom-color: var(--cp-coral);
}

.field-style:focus-visible {
  border-top-color: var(--cp-coral);
  border-bottom-color: var(--cp-coral);
}

.field-style[data-wf-focus-visible] {
  border-top-color: var(--cp-coral);
  border-bottom-color: var(--cp-coral);
}

.field-style::-webkit-input-placeholder {
  color: var(--cp-coral);
}

.field-style:-ms-input-placeholder {
  color: var(--cp-coral);
}

.field-style::-ms-input-placeholder {
  color: var(--cp-coral);
}

.field-style::placeholder {
  color: var(--cp-coral);
}

.field-style._2 {
  padding-bottom: 8vh;
  border-top-style: none;
}

.form-block {
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.form-button {
  display: block;
  margin-top: 10vh;
  padding: 0px 0px 1vh;
  border-bottom: 1px solid var(--cp-coral);
  background-color: transparent;
  font-family: var(--font-sans), sans-serif;
  color: var(--cp-coral);
  font-size: 0.7vw;
  line-height: 0.9vw;
  letter-spacing: 0.1vw;
  text-transform: uppercase;
}

.form {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.xp-mobile-wrap {
  display: none;
}

.success-message {
  border-style: dashed;
  border-width: 1px;
  border-color: var(--cp-coral);
  background-color: transparent;
}

.error-message {
  margin-top: 25px;
  padding: 15px;
  border-style: dashed;
  border-width: 1px;
  border-color: var(--cp-coral);
  background-color: transparent;
}

.transition-trigger {
  display: none;
}

.image-hero-contain {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background-color: var(--cp-coral);
}

._404-wrap {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

._404-image {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 2;
  display: none;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

._404-content {
  position: relative;
  z-index: 4;
}

.wilson-div {
  position: absolute;
  z-index: 3;
  width: 30vh;
  height: 30vh;
  background-image: url("Images/63ed05de63580ffb4663fdc8_wilso_d2217c50c5b1.png");
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
}

._404-subheading {
  position: absolute;
  left: 0%;
  top: auto;
  right: 0%;
  bottom: 4vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-right: 3vw;
  padding-left: 3vw;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  grid-column-gap: 0.4vw;
}

.div-block-2 {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  z-index: 3;
  background-color: rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 991px) {
  .hero-heading-div {
    padding-right: 25vw;
    padding-left: 25vw;
  }

  .subheading {
    font-size: 14px;
    line-height: 14px;
  }

  .subheading.phonetic {
    right: -25px;
  }

  .subheading.mid.cta {
    bottom: 3vw;
  }

  .subheading.coral.legal {
    font-size: 12px;
  }

  .subheading.coral.spa {
    display: none;
  }

  .subheading.coral.no {
    display: none;
  }

  .nav-div.footer {
    left: 0%;
    top: 0%;
    right: auto;
    bottom: auto;
  }

  .nav-div.rightfoot {
    left: auto;
    top: 0%;
    right: 0%;
    bottom: auto;
  }

  .nav-button {
    font-size: 13px;
    line-height: 13px;
  }

  .nav-logo {
    width: 10vw;
    height: 5vw;
  }

  .intro-container {
    width: 50vw;
  }

  .intro-sub-div {
    width: 100%;
  }

  .intro-img {
    height: 30vw;
  }

  .large-body {
    font-size: 20px;
    line-height: 20px;
  }

  .large-body.left.nm {
    display: none;
  }

  .cta-section {
    padding-right: 2vw;
    padding-left: 2vw;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    grid-row-gap: 2vw;
  }

  .cta-column {
    width: 100%;
  }

  .cta-img {
    height: 70vh;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .cta-img.spa {
    margin-top: 15vh;
    margin-bottom: 15vh;
  }

  .cta-button {
    width: 30vw;
    height: 15vw;
    margin-top: 8vh;
  }

  .display-type.mandc {
    font-size: 40vw;
    line-height: 36vw;
  }

  .internal-motif {
    width: 12vw;
    height: 15vw;
  }

  .split-container.spa {
    padding-right: 20px;
    padding-left: 20px;
  }

  .left-column {
    width: 30vw;
  }

  .left-column.spa {
    width: 45vw;
  }

  .shell-div {
    width: 9vw;
    height: 7vw;
  }

  .year {
    font-size: 3vw;
    line-height: 3vw;
  }

  .body-copy {
    font-size: 12px;
    line-height: 12px;
  }

  .divider-line._1 {
    width: 32vw;
  }

  .divider-line._3 {
    width: 25vw;
  }

  .star-div {
    width: 1vw;
    height: 1vw;
  }

  .star-div.mid {
    width: 1vw;
    height: 1vw;
  }

  .star-div.outer {
    width: 1vw;
    height: 1vw;
  }

  .dining-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .dining-column {
    width: 100%;
    padding-bottom: 0vh;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    grid-column-gap: 6vw;
  }

  .img-container {
    width: 30vw;
    height: 38vw;
  }

  .dining-txt-split {
    width: 30vw;
    margin-top: 20px;
  }

  .small-img {
    display: none;
  }

  .dining-text-flex {
    width: 100%;
    grid-row-gap: 10px;
  }

  .dining-img-column {
    width: 100%;
    height: 90vh;
  }

  .text-wrap {
    width: 82%;
  }

  .display-heading {
    font-size: 10vw;
    line-height: 10vw;
  }

  .cta-large {
    width: 40vw;
    height: 18vw;
    margin-left: 30vw;
  }

  .cards-section {
    padding-top: 22vh;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .cards-left {
    width: 80%;
    padding-top: 0vh;
  }

  .text-flex {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .para-div {
    width: 30vw;
    margin-top: 20px;
  }

  .motif-2 {
    position: relative;
    top: 40px;
  }

  .cards-right {
    width: 100%;
  }

  .large-img {
    width: 85%;
    height: 80vw;
  }

  .split-right {
    display: none;
  }

  .circle-div.spa {
    width: 50vw;
    height: 50vw;
  }

  .divider-wrap.resort {
    padding-top: 20vh;
    padding-bottom: 6vh;
  }

  .signup-section {
    padding-top: 35vh;
    padding-bottom: 35vh;
  }

  .signup-box {
    width: 40vw;
    height: 40vw;
    padding: 10px;
  }

  .signup-container {
    grid-row-gap: 12px;
  }

  .footer-section {
    height: auto;
    padding-top: 0px;
    padding-right: 20px;
    padding-left: 20px;
  }

  .footer-base-div {
    padding-top: 100px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    grid-column-gap: 20px;
  }

  .footer-img {
    width: 35%;
    height: 25vw;
    margin-bottom: 80px;
  }

  .legal-links {
    position: absolute;
    bottom: 20px;
    width: 100%;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .signup-footer {
    position: relative;
    bottom: 0vw;
    width: 65%;
    height: 25vw;
    margin-bottom: 80px;
    padding: 10px;
  }

  .footer-heading {
    width: 60vw;
    margin-top: 160px;
    margin-bottom: 120px;
  }

  .footer-logo {
    position: relative;
    left: 0vw;
    top: 30px;
    width: 12vw;
    height: 6vw;
  }

  .intro-heading.left.nm {
    display: none;
  }

  .intro-heading.mandc {
    font-size: 40px;
    line-height: 40px;
  }

  .intro-heading.mandc._8 {
    display: none;
  }

  .intro-heading.nd {
    display: block;
  }

  .logo-in-contain {
    display: none;
  }

  .burger-link.mandc {
    font-size: 40px;
    line-height: 40px;
  }

  .video-split {
    padding-right: 15px;
    padding-left: 15px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }

  .split-one {
    width: 100%;
    padding-bottom: 8vh;
  }

  .mbau-spa-heading {
    font-size: 24vw;
    line-height: 24vw;
  }

  .mbau-spa-heading.xp {
    font-size: 22.5vw;
  }

  .spa-intro {
    padding-top: 20vh;
  }

  .spa-heading {
    width: 65vw;
  }

  .spa-heading._2 {
    width: 55vw;
  }

  .spa-heading._3 {
    width: 55vw;
  }

  .spa-heading._4 {
    width: 55vw;
  }

  .large-heading {
    font-size: 7.5vw;
    line-height: 7vw;
  }

  .large-heading.mandc {
    font-size: 40px;
    line-height: 40px;
  }

  .split-image {
    width: 28vw;
    height: 38vw;
    border-top-left-radius: 20vw;
    border-top-right-radius: 20vw;
  }

  .split-text-div {
    width: 55vw;
  }

  .spa-unwind {
    margin-left: -2.5vw;
    font-size: 35vw;
    line-height: 35vw;
  }

  .unwind-video-contain {
    height: 80vh;
  }

  .pull-quote-section {
    padding-bottom: 12vh;
  }

  .cta-text-div {
    width: 60vw;
  }

  .xp-intro {
    width: 80%;
  }

  .xp-intro-div {
    width: 50%;
    margin-right: 0vw;
  }

  .xp-heading.mandc {
    font-size: 40vw;
    line-height: 36vw;
  }

  .xp-heading.white {
    font-size: 30vw;
    line-height: 30vw;
  }

  .mbau-motif {
    width: 10vw;
    height: 16vw;
    margin-top: -2vw;
  }

  .xp-img-wrap {
    width: 65%;
  }

  .xp-text-column {
    width: 35%;
  }

  .small-img-contain {
    display: none;
  }

  .circle-section {
    padding-top: 20vh;
  }

  .oval-img-contain {
    width: 40vh;
    height: 55vh;
  }

  .resort-image-section._2 {
    margin-top: 0vh;
  }

  .resort-video-contain {
    height: 80vh;
  }

  .resort-intro-div {
    width: 50%;
    margin-right: 0vw;
  }

  .resort-img-wrap {
    height: 85vh;
  }

  .resort-img-text {
    left: 3vw;
    top: auto;
    right: auto;
    bottom: 20vh;
  }

  .feature-txt-wrap {
    width: 65vw;
  }

  .resort-sticky-section {
    overflow: visible;
  }

  .sticky-images-wrap {
    margin-top: -100vh;
  }

  .images-row {
    width: 100%;
  }

  .images-row._2 {
    padding-left: 0vw;
  }

  .images-row._4 {
    display: none;
  }

  .s-image._1 {
    width: 15vw;
    height: 20vh;
    margin-left: 12vw;
  }

  .s-image._2 {
    width: 25vw;
    height: 35vh;
  }

  .s-image._3 {
    height: 35vh;
    margin-top: 5vh;
  }

  .s-image._4 {
    display: none;
    width: 18vw;
    height: 20vh;
    margin-top: 10vh;
    margin-right: 20vw;
  }

  .s-image._5 {
    width: 25vw;
    height: 30vh;
    margin-right: 8vw;
  }

  .s-image._6 {
    width: 30vw;
    height: 35vh;
    margin-top: 30vh;
    margin-left: 16vw;
  }

  .form-wrapper {
    width: 78%;
  }

  .field-style {
    font-size: 3vw;
    line-height: 3vw;
  }

  .form-button {
    font-size: 1.8vw;
    line-height: 2vw;
  }
}

@media screen and (max-width: 767px) {
  .img-fill.xp1 {
    background-image: url("Images/63e1093e6582935a361c2001_mbau-_ef1c7b738e8c.jpg");
    background-position: 50% 0%;
    background-size: cover;
  }

  .img-fill.xp2 {
    background-image: url("Images/63e10745f6111a46044229a9_mbau-_9dbd6eba5380.jpg");
    background-position: 50% 0%;
    background-size: cover;
  }

  .img-fill.xp3 {
    background-image: url("Images/63d93f8b509f2ef7bb42896f_mbau-_677d547e52f1.jpg");
    background-position: 50% 0%;
    background-size: cover;
  }

  .img-fill.xp4 {
    background-image: url("Images/63e10bf36455fe471107027c_mbau-_0f60c5873439.jpg");
    background-position: 50% 0%;
    background-size: cover;
  }

  .hero-heading-div {
    padding-right: 8vw;
    padding-left: 8vw;
  }

  .subheading {
    font-size: 12px;
  }

  .subheading.phonetic {
    top: -5px;
    right: -20px;
  }

  .subheading.mid.coral.nm {
    display: none;
  }

  .subheading.mid.ctal {
    bottom: 25px;
  }

  .nav-container {
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .nav-div {
    display: none;
  }

  .nav-button.mob {
    display: block;
    font-size: 15px;
    line-height: 15px;
  }

  .nav-logo {
    width: 15vw;
    height: 8vw;
  }

  .nav-logo.coral {
    background-image: url("Images/63c7d9b2c443b01b8e0fa829_logo-_f867b32fcbc8.svg");
  }

  .intro-container {
    width: 65vw;
  }

  .intro-img {
    height: 40vw;
  }

  .cta-column {
    padding-top: 16vh;
  }

  .cta-img {
    height: 60vw;
  }

  .cta-button {
    width: 40vw;
    height: 18vw;
  }

  .offset-section {
    padding-top: 15vh;
  }

  .body-container {
    width: 90%;
  }

  .internal-motif {
    width: 16vw;
    height: 20vw;
  }

  .internal-motif.burger {
    width: 80px;
    height: 100px;
  }

  .split-container.spa {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .left-column {
    width: 40vw;
  }

  .left-column.spa {
    width: 80vw;
    grid-row-gap: 12vh;
  }

  .right-column.spa {
    padding-top: 8vh;
  }

  .image-div {
    width: 28vw;
    height: 35vw;
  }

  .image-div._2 {
    width: 16vw;
    height: 20vw;
  }

  .image-div.spa {
    width: 32vw;
    height: 40vw;
  }

  .divider-container.xp {
    margin-bottom: 15vh;
  }

  .cta-large {
    width: 50vw;
    height: 24vw;
    margin-left: 25vw;
  }

  .cards-section {
    padding-bottom: 35vh;
  }

  .para-div {
    width: 68vw;
  }

  .card-base.top {
    bottom: -10vh;
    width: 30vw;
    height: 43vw;
  }

  .card-base.base {
    right: 10vw;
    bottom: -15vh;
    width: 30vw;
    height: 43vw;
  }

  .right-text {
    padding-left: 6vw;
  }

  .circle-div {
    width: 35vw;
    height: 35vw;
    margin-right: 4vw;
  }

  .circle-div.spa {
    width: 60vw;
    height: 60vw;
    margin-top: -6vw;
  }

  .intro-heading.nd {
    font-size: 4.5vw;
    line-height: 4.5vw;
  }

  .burger-contain {
    position: absolute;
    z-index: 100;
    display: none;
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    grid-row-gap: 80px;
    background-color: #f9f4ee;
  }

  .burger-nav {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .burger-footer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 320px;
    padding-bottom: 30px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    grid-row-gap: 30px;
  }

  .burger-menu-contain {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    padding-right: 20px;
    padding-left: 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    grid-row-gap: 20px;
  }

  .burger-button {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .burger-button.reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }

  .burger-link {
    font-size: 14vw;
    line-height: 14vw;
    text-decoration: none;
  }

  .burger-img-div {
    overflow: hidden;
    width: 25vw;
    height: 25vw;
    border-radius: 50%;
  }

  .burger-img {
    width: 100%;
    height: 100%;
    background-image: url("Images/63c7d6e635ae7b24c6da13a7_foote_3781791836fc.jpg");
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .burger-img._2 {
    background-image: url("Images/63c57a0be1e3f9203f77816d_cta1-_6c09744fafdd.jpg");
  }

  .burger-img._3 {
    background-image: url("Images/63c7d2e381ac424ed9f2d607_spa-i_be3352031dcc.jpg");
  }

  .burger-divider {
    width: 100%;
    height: 1px;
    max-height: 1px;
    min-height: 1px;
    background-color: #fe6f61;
  }

  .stop--scroll {
    display: block;
    font-family: var(--font-sans), sans-serif;
    color: #fff;
    font-size: 15px;
    line-height: 15px;
    font-weight: 400;
    text-transform: uppercase;
  }

  .stop--scroll.coral {
    color: #fe6f61;
  }

  .start--scroll {
    display: block;
    font-family: var(--font-sans), sans-serif;
    color: #fe6f61;
    font-size: 15px;
    line-height: 15px;
    font-weight: 400;
    text-transform: uppercase;
  }

  .split-one {
    padding-bottom: 0vh;
  }

  .spa-heading {
    width: 80vw;
  }

  .spa-heading._2 {
    width: 70vw;
  }

  .spa-heading._3 {
    width: 75%;
  }

  .spa-heading._4 {
    width: 70vw;
  }

  .large-heading {
    font-size: 9vw;
    line-height: 9vw;
  }

  .list-contain {
    grid-column-gap: 8vw;
  }

  .xp-intro-section {
    padding-top: 14vh;
  }

  .xp-intro-div {
    width: 82%;
  }

  .image-scroll-section {
    height: 70vh;
  }

  .image-scroll-flex {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }

  .image-column {
    width: 55vw;
  }

  .image-column._3rd {
    display: none;
  }

  .image-scroll-div {
    height: 50vh;
  }

  .xp-text-section {
    padding-top: 15vh;
  }

  .xp-text-section._2 {
    padding-bottom: 4vh;
  }

  .experience-wrapper {
    display: none;
  }

  .resort-hero {
    height: auto;
    min-height: 100vh;
  }

  .oval-img-contain {
    width: 35vh;
    height: 50vh;
  }

  .resort-intro-div {
    width: 82%;
  }

  .feature-txt-wrap {
    width: 70vw;
  }

  .form-wrapper {
    width: 84%;
  }

  .xp-mobile-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    padding-right: 6vw;
    padding-bottom: 10vh;
    padding-left: 6vw;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    grid-row-gap: 8vh;
  }

  .xp-image-mob {
    overflow: hidden;
    width: 100%;
    height: 85vh;
  }

  .xp-mobile {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    grid-row-gap: 4vh;
  }

  .xp-text-mob {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 90%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    grid-row-gap: 10px;
  }

  .wilson-div {
    width: 40vw;
    height: 40vw;
  }

  ._404-subheading {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 479px) {
  .hero-heading-div {
    bottom: 14vh;
    padding-right: 5vw;
    padding-left: 5vw;
    grid-row-gap: 14px;
  }

  .subheading.phonetic {
    top: -7px;
    right: -15px;
  }

  .subheading.mid.cta {
    bottom: 15px;
  }

  .subheading.mid.ctal {
    bottom: 20px;
  }

  .subheading.midc.nm {
    display: none;
  }

  .nav-container {
    padding-top: 15px;
  }

  .nav-div {
    left: 10px;
    top: 10px;
  }

  .nav-div.right {
    top: 10px;
    right: 10px;
  }

  .nav-button {
    font-size: 12px;
  }

  .nav-logo {
    width: 22vw;
    height: 13vw;
    margin-top: 2.5vw;
  }

  .intro-section {
    overflow: hidden;
  }

  .intro-container {
    width: 75vw;
  }

  .intro-sub-div {
    padding-top: 20px;
  }

  .intro-img {
    height: 45vw;
  }

  .large-body.right {
    text-align: center;
  }

  .cta-section {
    overflow: hidden;
  }

  .cta-img {
    width: 58%;
    height: 64vw;
  }

  .cta-button {
    width: 60vw;
    height: 28vw;
    margin-top: 20px;
  }

  .offset-section {
    overflow: hidden;
    padding-bottom: 20vh;
  }

  .body-container {
    margin-top: 20px;
  }

  .body-container.resort {
    margin-bottom: 6vh;
  }

  .internal-motif {
    width: 24vw;
    height: 30vw;
  }

  .split-container {
    margin-top: 120px;
    padding-right: 20px;
    padding-left: 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }

  .split-container.spa {
    margin-top: 80px;
  }

  .left-column {
    width: 100%;
    margin-top: 80px;
    padding-right: 8vw;
    padding-left: 8vw;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .left-column.spa {
    width: 100%;
    padding-right: 0vw;
    padding-left: 0vw;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .shell-div {
    width: 18vw;
    height: 12vw;
  }

  .year {
    font-size: 6vw;
    line-height: 6vw;
    text-align: center;
  }

  .body-copy.mid {
    text-align: center;
  }

  .right-column {
    grid-column-gap: 20px;
  }

  .right-column.spa {
    padding-top: 14vh;
  }

  .image-div {
    width: 46vw;
    height: 62vw;
  }

  .image-div._2 {
    width: 25vw;
    height: 30vw;
  }

  .image-div.spa {
    width: 40vw;
    height: 52vw;
  }

  .divider-div {
    width: 100%;
    padding-right: 10px;
    padding-left: 10px;
    grid-column-gap: 12px;
  }

  .divider-line._1 {
    width: 16vw;
  }

  .divider-line._3 {
    width: 10vw;
  }

  .stars-flex {
    grid-column-gap: 5px;
  }

  .star-div {
    width: 7px;
    height: 7px;
  }

  .star-div.mid {
    width: 7px;
    height: 7px;
  }

  .star-div.outer {
    width: 7px;
    height: 7px;
  }

  .dining-container {
    padding-right: 10px;
    padding-left: 10px;
  }

  .dining-column {
    padding-top: 12vh;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
  }

  .dining-txt-split {
    width: 55vw;
  }

  .dining-img-column {
    height: 80vh;
  }

  .parallax-section {
    padding-top: 20vh;
    padding-bottom: 30vh;
  }

  .text-wrap {
    width: 94%;
  }

  .display-heading {
    font-size: 12.5vw;
    line-height: 12vw;
  }

  .cta-large {
    width: 80vw;
    height: 35vw;
    margin-left: 10vw;
  }

  .cards-section {
    overflow: hidden;
    padding-bottom: 45vh;
  }

  .cards-left {
    width: 100%;
  }

  .para-div {
    width: 75vw;
  }

  .motif-2.resort {
    display: none;
  }

  .card-base.top {
    right: 4vw;
    bottom: -20vh;
    width: 47vw;
    height: 67vw;
  }

  .card-base.base {
    right: 8vw;
    bottom: -27vh;
    width: 47vw;
    height: 67vw;
  }

  .relaxation-section {
    overflow: hidden;
  }

  .circle-split {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .right-text {
    width: 100%;
    margin-top: 60px;
    padding-right: 5vw;
    padding-left: 5vw;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .circle-div {
    width: 55vw;
    height: 55vw;
  }

  .circle-div.spa {
    width: 68vw;
    height: 68vw;
    margin-top: -2vw;
  }

  .divider-section {
    overflow: hidden;
  }

  .signup-section {
    padding-top: 30vh;
    padding-bottom: 30vh;
  }

  .signup-box {
    width: 70vw;
    height: 70vw;
  }

  .footer-section {
    overflow: hidden;
  }

  .footer-img {
    display: none;
  }

  .signup-footer {
    width: 100%;
    height: 30vw;
  }

  .footer-heading {
    width: 78vw;
  }

  .footer-logo {
    width: 22vw;
    height: 14vw;
  }

  .collection-list-wrapper {
    height: 100%;
  }

  .intro-heading.mandc {
    font-size: 10vw;
    letter-spacing: -0.3vw;
  }

  .intro-heading.nd {
    font-size: 5vw;
    line-height: 5vw;
  }

  .relax-trigger {
    overflow: hidden;
    width: 100%;
  }

  .home-lower-txt.mandc {
    font-size: 10vw;
    line-height: 9vw;
  }

  .burger-contain {
    overflow: hidden;
    min-height: 100vh;
    grid-row-gap: 0px;
  }

  .burger-nav {
    padding-top: 15px;
  }

  .burger-footer {
    width: 100%;
    margin-bottom: 6vh;
    padding-right: 30px;
    padding-bottom: 0px;
    padding-left: 30px;
  }

  .burger-menu-contain {
    margin-top: -5vh;
    padding-right: 30px;
    padding-left: 30px;
  }

  .burger-link {
    font-size: 13vw;
    line-height: 13vw;
  }

  .burger-link.mandc {
    font-size: 10vw;
    letter-spacing: -0.3vw;
  }

  .burger-img-div {
    width: 23vw;
    height: 23vw;
  }

  .img-hero-contain {
    height: 120vh;
  }

  .mbau-spa-heading {
    margin-top: -10vh;
    font-size: 25vw;
    line-height: 25vw;
  }

  .spa-intro {
    padding-top: 12vh;
  }

  .large-heading.left {
    font-size: 8vw;
    line-height: 8vw;
  }

  .large-heading.left.lm {
    font-size: 9vw;
    line-height: 8.6vw;
  }

  .large-heading.mandc {
    font-size: 10vw;
    letter-spacing: -0.3vw;
  }

  .large-heading.nls._2 {
    font-size: 14vw;
    line-height: 16vw;
  }

  .large-heading.fac {
    font-size: 10.5vw;
    line-height: 10vw;
  }

  .split-text-div {
    width: 80vw;
  }

  .spa-unwind {
    font-size: 35vw;
    line-height: 35vw;
  }

  .unwind-video-contain {
    height: 72vh;
  }

  .pull-quote-section {
    padding-top: 5vh;
    padding-bottom: 0vh;
  }

  .quote-column {
    width: 80vw;
  }

  .cta-text-div {
    width: 80%;
  }

  .xp-intro-section._1 {
    padding-top: 4vh;
  }

  .xp-intro {
    width: 88%;
  }

  .image-scroll-section {
    padding-right: 0vw;
    padding-left: 0vw;
  }

  .image-scroll-flex {
    margin-left: -120px;
    padding-right: 0vw;
  }

  .image-column {
    width: 260px;
    min-width: 260px;
  }

  .xp-text-section._2 {
    padding-bottom: 0vh;
  }

  .circle-section {
    padding-top: 12vh;
  }

  .oval-img-contain {
    width: 38vh;
    height: 55vh;
    margin-top: -10vh;
  }

  .resort-h1 {
    margin-top: 1vh;
  }

  .resort-video-contain {
    height: 72vh;
  }

  .resort-img-left {
    width: 54vw;
    height: 48vw;
  }

  .resort-img-right {
    width: 20vw;
    height: 26vw;
  }

  .resort-img-wrap {
    height: 84vh;
  }

  .resort-img-text {
    left: 5vw;
    width: 70%;
  }

  .resort-feature-text {
    margin-bottom: 16vh;
  }

  .feature-txt-wrap {
    width: 78vw;
  }

  .resort-sticky-section {
    padding-bottom: 15vh;
  }

  /* Legacy inner-page row variant (older layout blocks; not the index hero) */
  .images-row.alt {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  .s-image._1 {
    display: none;
    width: 25vw;
    height: 20vh;
  }

  .s-image._2 {
    width: 26vw;
    height: 22vh;
    margin-top: 10vh;
    opacity: 0.8;
  }

  .s-image._3 {
    width: 38vw;
    height: 22vh;
    margin-top: 10vh;
    opacity: 0.8;
  }

  .s-image._5 {
    width: 20vw;
    height: 15vh;
    margin-top: 15vh;
    margin-right: 4vw;
    opacity: 0.8;
  }

  .s-image._6 {
    width: 40vw;
    height: 26vh;
    margin-top: 45vh;
    margin-left: 14vw;
    opacity: 0.8;
  }

  .form-wrapper {
    width: 94%;
  }

  .field-style {
    font-size: 5.5vw;
    line-height: 5.5vw;
  }

  .form-button {
    font-size: 3vw;
    line-height: 4vw;
  }

  .xp-image-mob {
    height: 60vh;
  }

  .xp-mobile {
    grid-row-gap: 3vh;
  }

  .wilson-div {
    width: 55vw;
    height: 55vw;
  }
}
/* ── Dev: ghost at rest; full frosted-glass on hover (hidden pages + design-system) ── */
.dev-version-switcher {
  position: fixed;
  bottom: 22px;
  left: 22px;
  right: auto;
  z-index: 10000;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 92vw;
  pointer-events: none;
}

.dev-version-switcher a {
  pointer-events: auto;
  padding: 8px 14px;
  margin: 0;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  color: var(--ds-primary, #13283e);
  border-radius: 100px;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  opacity: 0.07;
  transition:
    opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    background-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    border-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    backdrop-filter 0.4s ease,
    -webkit-backdrop-filter 0.4s ease,
    box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    padding 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    font-size 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.dev-version-switcher a:hover,
.dev-version-switcher a:focus-visible {
  opacity: 1;
  padding: 12px 24px;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: #ffffff;
  background: rgba(19, 40, 62, 0.88);
  border-color: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(15px) saturate(1.1);
  -webkit-backdrop-filter: blur(15px) saturate(1.1);
  box-shadow:
    0 4px 28px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  outline: none;
}

.dev-version-switcher a.dev-version-switcher--current {
  opacity: 0.045;
  pointer-events: none;
}

/* ===================================================================
   INDEX SITE — main homepage (index.html) layout & components
   (Historically merged from index-site.css; still shared with draft HTML that reuse these classes.)
   =================================================================== */

/* Tokens + type scale for the homepage layer (overrides / extends design-system :root above when duplicated) */
:root {
    --ds-primary: #13283e;
    --ds-forest: #1B3022;
    --ds-white: #ffffff;
    --ds-hematite: #7B2E20;
    --ds-olive: #8da089;
    --ds-sand: #D9C5B2;
    --ds-creme: #f4f3e9;
    --ds-lagoon: #50849F;
    --ds-sand-refined: #DED5C3;
    --ds-terracotta: #a65d4b;
    --ds-border: rgba(19, 40, 62, 0.15);
    --ds-glass: rgba(255, 255, 255, 0.85);
    --font-serif: "PP Editorial New", serif;
    --font-sans: "Founders Grotesk", sans-serif;

    /* Fluid type scale — one system for body, UI, headings (rem + vw via clamp) */
    --cp-type-h1: clamp(2.65rem, 1.2rem + 3.75vw, 4rem);
    --cp-type-h2: clamp(1.7rem, 0.92rem + 2.5vw, 2.85rem);
    --cp-type-h2-display: clamp(2rem, 1rem + 3vw, 3.35rem);
    --cp-type-h3: clamp(1.45rem, 0.78rem + 1.85vw, 2.25rem);
    --cp-type-h3-accent: clamp(1.65rem, 0.88rem + 2.35vw, 3rem);
    --cp-type-eyebrow: clamp(0.625rem, 0.12rem + 0.55vw, 0.8125rem);
    --cp-type-body: clamp(1rem, 0.18rem + 1.05vw, 1.125rem);
    --cp-type-body-lg: clamp(1.0625rem, 0.22rem + 1.1vw, 1.2rem);
    --cp-type-lead: clamp(1.0625rem, 0.28rem + 1.15vw, 1.3rem);
    --cp-type-cta: 0.75rem;
    --cp-type-feature-quote: clamp(1rem, 0.35rem + 1.05vw, 1.3rem);
    --cp-lh-tight: 1.12;
    --cp-lh-heading: 1.15;
    --cp-lh-body: 1.65;
}

/* #experiencia-cards-horizontal — sideways feature-card track (nav “TUDO INCLUSO” links here) */
.feature-card-title {
    font-family: var(--font-sans);
    font-size: 14px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin: 0 0 4vh;
    font-weight: 600;
    color: var(--ds-creme);
}

.feature-card-copy {
    font-family: var(--font-sans);
    font-style: italic;
    font-size: clamp(1rem, 2.2vw, 1.6rem);
    line-height: 1.4;
    color: var(--ds-white);
    opacity: 0.95;
    margin: 0;
}

.feature-card-copy--serif {
    font-family: var(--font-serif);
}

/* ── index.html — repeated layout (sheet > duplicate inline) ── */

.ds-navbar .nav-center > a {
    margin: 0;
    opacity: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

#sub-hero {
    position: relative;
}

.sub-hero-divider-svg-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 151px;
    transform: translateY(-100%) translateY(2.5px);
    pointer-events: none;
    line-height: 0;
    z-index: 10;
}

.sub-hero-divider-svg-wrap svg {
    width: 100%;
    height: 100%;
    display: block;
}

.a-casa-eyebrow.fade-up {
    display: flex;
    align-items: center;
    gap: 15px;
}

.a-casa-rule {
    width: 40px;
    height: 1px;
    background-color: var(--ds-sand-refined);
    opacity: 0.5;
}

#a-casa .a-casa-eyebrow .ds-label {
    color: var(--ds-sand-refined);
    opacity: 1;
    margin: 0;
}

.a-casa-polaroid-frame {
    width: 100%;
    max-width: 520px;
    background: var(--ds-white);
    padding: 5px;
    border-radius: 4px;
    border: 1px solid var(--ds-border);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
    transform: rotate(-1.5deg);
}

.a-casa-polaroid-media {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 2px;
    overflow: hidden;
    background: var(--ds-primary);
}

.a-casa-polaroid-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.a-casa-polaroid-footer {
    display: none;
}

/* v1 snapshot: show polaroid logo strips (production index hides via lean stylesheet) */
html.cp-v1 .a-casa-polaroid-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2vh 0 1.35vh;
    box-sizing: border-box;
}

html.cp-v1 .a-casa-polaroid-footer img {
    height: clamp(72px, 12vh, 108px);
    width: auto;
    margin: 0 auto;
    display: block;
    filter: brightness(0);
    opacity: 0.86;
}

html.cp-v1 #experiencia .polaroid-brand-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.35vh 0 1.55vh;
    box-sizing: border-box;
}

html.cp-v1 #experiencia .polaroid-brand-logo {
    height: clamp(40px, 5.5vh, 58px);
    width: auto;
    opacity: 0.74;
    filter: brightness(0);
}

    padding: 3px;
}

html.cp-v2 #experiencia .polaroid-stack-item.ds-texture-card .card-img {
    border-radius: 2px;
}

html.cp-v2 .dl-takes-float-item--photo {
    background: var(--ds-white);
    padding: 3px;
    box-sizing: border-box;
}

html.cp-v2 .dl-takes-float-item--photo picture img,
html.cp-v2 .dl-takes-float-item--photo img {
    border-radius: 2px;
}

#a-casa .a-casa-main.text-block {
    padding: 0;
}

#a-casa .a-casa-main h2.fade-up {
    font-size: clamp(1.6rem, 3.8vw, 3rem);
    line-height: 1.1;
    margin-bottom: 4vh;
}

#a-casa .a-casa-main .text-block-content.fade-up {
    border-left: 1px solid rgba(217, 197, 178, 0.2);
    padding-left: 2.5vw;
    margin-left: 0.5vw;
}

#a-casa .a-casa-main .text-block-content p {
    font-size: clamp(0.95rem, 1.1vw, 1.08rem);
    line-height: 1.6;
    margin-bottom: 3vh;
    opacity: 0.9;
}

#a-casa .a-casa-main .text-block-content p:last-of-type {
    margin-bottom: 4vh;
}

#a-casa .a-casa-cta-wrap {
    margin-top: 2vh;
}

#a-casa .a-casa-cta {
    font-family: var(--font-sans);
    color: var(--ds-sand-refined);
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ds-terracotta);
    padding-bottom: 8px;
    transition: all 0.3s ease;
}

.manifesto-divider-top .manifesto-navy-cap {
    height: 30px;
    background: var(--ds-primary);
    margin-bottom: -1px;
}

.manifesto-divider-top > svg {
    width: 100%;
    height: 151px;
    display: block;
}

html.cp-v2 .manifesto-divider-top {
    height: 112px;
}

html.cp-v2 .manifesto-divider-top .manifesto-navy-cap {
    display: block;
    height: 56px;
}

html.cp-v2 .manifesto-divider-top > svg {
    height: 56px;
}

/* Experiencia: shared row grid (intro + room stacks) */
.experiencia-stack-section {
    display: flex;
    position: relative;
    z-index: 5;
    justify-content: space-between;
    align-items: center;
}

.experiencia-stack-section--intro {
    min-height: 100vh;
}

.experiencia-stack-section .stack-text-left {
    flex: 0 0 55%;
    max-width: 55%;
    padding-right: 5vw;
    position: relative;
}

.experiencia-stack-section .stack-text-left .text-block {
    max-width: 900px;
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 0;
    z-index: auto;
}

.experiencia-stack-section .stack-polaroids-right {
    flex: 0 0 45%;
    max-width: 45%;
    position: relative;
    height: 75vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#experiencia .experiencia-stack-section--intro h2.fade-up {
    font-family: var(--cp-font-heading);
    font-size: clamp(1.8rem, 5vw, 4rem);
    line-height: 1.05;
    margin-bottom: 6vh;
    color: var(--ds-primary);
}

#experiencia .experiencia-stack-section--intro .xp-stack-lead {
    font-size: clamp(0.95rem, 1.6vw, 1.25rem);
    line-height: 1.5;
    color: var(--ds-primary);
    font-weight: 300;
}

.polaroid-brand-row {
    display: none;
}

/* Intro stack only: GSAP animates y/opacity from these bases */
#experiencia .experiencia-stack-section--intro .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(1) {
    position: absolute;
    width: 30vw;
    z-index: 1;
    transform: translateY(60px) rotate(-5deg);
    opacity: 0;
}

#experiencia .experiencia-stack-section--intro .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(2) {
    position: absolute;
    width: 33vw;
    z-index: 2;
    transform: translateY(100vh) rotate(-12deg);
    opacity: 0;
}

#experiencia .experiencia-stack-section--intro .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(3) {
    position: absolute;
    width: 31vw;
    z-index: 3;
    transform: translateY(100vh) rotate(5deg);
    opacity: 0;
}

#shared-satellite-wrapper {
    position: relative;
    z-index: 1;
    isolation: isolate;
}

.satellite-sticky-bg {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
    overflow: hidden;
}

.satellite-sticky-bg picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.satellite-sticky-bg .desert-lake-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

.satellite-scroll-over {
    position: relative;
    z-index: 5;
    margin-top: -100vh;
}

.satellite-atmosphere {
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1;
    margin-bottom: -100vh;
    pointer-events: none;
}

.satellite-atmosphere__wash {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #f4f3e9 0%, rgba(244, 243, 233, 0.62) 38%, rgba(244, 243, 233, 0.22) 100%);
}

.satellite-atmosphere__texture {
    position: absolute;
    inset: 0;
    background-image: url('../images/texturas/areia-branca.jpg');
    background-size: cover;
    opacity: 0.05;
}

.satellite-atmosphere .host-cta-overlay {
    position: absolute;
    inset: 0;
    background: #f4f3e9;
}

#experiencia {
    position: relative;
    margin-top: -2px;
    padding: 10vh 8vw;
    background-color: var(--ds-creme);
    color: var(--ds-primary);
    z-index: 12;
    overflow: visible;
}

#experiencia .experiencia-texture-shell {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

#experiencia .experiencia-creme-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 80%, var(--ds-creme) 100%);
    pointer-events: none;
    z-index: 1;
}

#experiencia-cards-horizontal {
    position: relative;
    height: 100vh;
    background-color: transparent;
    color: var(--ds-primary);
    z-index: 3;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Center in the viewport below fixed .ds-navbar (56px), not full 100vh — matches NAV_SCROLL_OFFSET in scripts.js */
    box-sizing: border-box;
    padding-top: 56px;
}

.features-horizontal-scroll-container {
    width: 100%;
    position: relative;
    z-index: 5;
    padding: 0 clamp(4vw, 18vw, 18vw) 0 clamp(4vw, 8vw, 8vw);
    box-sizing: border-box;
}

.features-horizontal-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 6vw;
    align-items: center;
    will-change: transform;
    backface-visibility: hidden;
}

.feature-card-item:not(.contact-cta) {
    flex: 0 0 70vw;
    height: 75vh;
    border-radius: 4px;
    border: none;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 20;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10vh 6vw;
}

.feature-parallax-slot {
    position: absolute;
    top: 0;
    left: -25vw;
    width: calc(100% + 25vw);
    height: 100%;
    z-index: 1;
}

.feature-card-shade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(15, 33, 50, 0.85) 0%, rgba(15, 33, 50, 0.4) 55%, transparent 100%);
    z-index: 2;
}

.feature-card-copy-col {
    position: relative;
    z-index: 5;
    max-width: 40vw;
}

.feature-card-item.contact-cta {
    flex: 0 0 70vw;
    padding: 0 6vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-cta-actions a {
    font-family: var(--font-sans);
    color: var(--ds-primary);
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 0.15em;
    border: 1px solid var(--ds-primary);
    padding: 15px 32px;
    text-transform: uppercase;
    font-weight: 500;
    transition: all 0.3s ease;
}

.features-cta-runway {
    flex: 0 0 18vw;
    flex-shrink: 0;
}

.features-scroll-runway {
    height: 250vh;
    position: relative;
    z-index: 0;
}

.features-pin-budget-spacer {
    height: 150vh;
    position: relative;
    z-index: 0;
}

.features-track-end-spacer {
    flex: 0 0 28vw;
    flex-shrink: 0;
}

/* Inside #shared-satellite-wrapper: stacks above .satellite-scroll-over (z-index 5) so Lençóis/totems win over the
   horizontal-features pin during −150vh overlap. Aerial = same .satellite-sticky-bg sibling (no duplicate JPG). */
#o-lugar-transforma {
    position: relative;
    z-index: 25;
    margin-top: -150vh;
    background: transparent;
}

.o-lugar-transforma__wash {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(245, 240, 230, 0.4) 0%, rgba(245, 240, 230, 0.1) 100%);
    pointer-events: none;
    z-index: 0;
}

.o-lugar-transforma__grain {
    position: absolute;
    inset: 0;
    background-image: url('../images/texturas/areia-branca.jpg');
    background-repeat: repeat;
    background-size: 600px;
    opacity: 0.05;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}

#o-lugar-transforma > .desert-lakes-overlay {
    position: absolute;
    inset: 0;
    background: #f4f3e9;
    pointer-events: none;
    z-index: 3;
    opacity: 0.05;
}

#o-lugar-transforma-conteudo.patacas-aereo-below-branch {
    position: relative;
    z-index: 3;
}

#o-lugar-transforma-conteudo .totems-container {
    top: 10px;
}

#o-lugar-transforma-conteudo .totems-container picture:nth-child(1) .hanging-totem {
    margin-top: -10px;
}

#o-lugar-transforma-conteudo .totems-container picture:nth-child(2) .hanging-totem {
    margin-top: -30px;
}

#o-lugar-transforma-conteudo .totems-container picture:nth-child(3) .hanging-totem {
    margin-top: 42px;
}

#o-lugar-transforma-conteudo .totems-container picture:nth-child(4) .hanging-totem {
    margin-top: -40px;
}

#o-lugar-transforma-conteudo .totems-container picture:nth-child(5) .hanging-totem {
    margin-top: -35px;
}

#o-lugar-transforma-conteudo .totems-container picture:nth-child(6) .hanging-totem {
    margin-top: -5px;
}

#o-lugar-transforma-conteudo .totems-container picture:nth-child(7) .hanging-totem {
    margin-top: -20px;
}

.totems-section-anchor {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    overflow: visible;
}

#paisagem-esculpida-tempo {
    position: relative;
    min-height: 100vh;
    box-sizing: border-box;
    padding-top: clamp(36vh, 44vmin, 50vh);
    padding-bottom: clamp(8vh, 12vmin, 5rem);
    margin-bottom: clamp(4rem, 12vh, 10rem);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: visible;
    z-index: 4;
    background-color: transparent;
}

/* Space below hanging totems before Lençóis image + copy row (gap above card + text row) */
#paisagem-esculpida-tempo .desert-lakes-scroll-wrapper {
    margin-top: clamp(28vh, 38vmin, 52vh);
}

/* Viewport-fixed: bell is opacity-only vs viewport center; if this layer scrolled with the section, the wash drifted wrong. */
#paisagem-esculpida-tempo > .desert-lakes-overlay--scroll {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background: #f4f3e9;
    z-index: 2;
    pointer-events: none;
    /* Subtle until JS bell runs; peaks when card row is centered, then back to ~transparent before Turismo. */
    opacity: 0.05;
}

@media (prefers-reduced-motion: reduce) {
    #paisagem-esculpida-tempo > .desert-lakes-overlay--scroll {
        position: absolute;
        inset: auto;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
    }
}

#o-lugar {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

body {
    background-color: var(--ds-creme);
    margin: 0;
    overflow-x: hidden;
}

.ds-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 56px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 9999;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    transition:
        background 1.6s cubic-bezier(0.16, 1, 0.3, 1),
        backdrop-filter 1.6s cubic-bezier(0.16, 1, 0.3, 1),
        border 1.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
    border-bottom: 1px solid transparent;
    padding: 0 4vw;
}

/* GLASS STATE: High-end frosted glass (matching version switcher) */
.ds-navbar.glass {
    background: rgba(19, 40, 62, 0.05);
    /* Brand blue at very low opacity */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: none;
}

/* SOLID STATE: Brand blue after sub-hero */
.ds-navbar.scrolled {
    background: var(--ds-primary);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: none;
}

.nav-group-left {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 0;
    transform: translateX(-10vw);
    /* Pushed left initially */
    transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-group-right {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 0;
    transform: translateX(10vw);
    /* Pushed right initially */
    transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* i18n: fixed top-right — same 56px row + vertical center as .ds-navbar; right inset matches nav padding 4vw */
.locale-switcher--fixed {
    position: fixed;
    top: 0;
    right: max(4vw, calc(0.5rem + env(safe-area-inset-right, 0px)));
    z-index: 100100;
    height: 56px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
    pointer-events: auto;
    padding-right: 0.5rem;
}

/* Pull links inward once logo/glass activates */
.ds-navbar.glass .nav-group-left,
.ds-navbar.glass .nav-group-right,
.ds-navbar.scrolled .nav-group-left,
.ds-navbar.scrolled .nav-group-right {
    transform: translateX(0);
}

.nav-center {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0;
    width: auto;
    max-width: min(44vw, 380px);
    flex-shrink: 0;
}

.nav-logo {
    height: clamp(28px, 3.1vw, 36px);
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
    object-position: 50% 50%;
    opacity: 0;
    /* Hidden at first */
    transform: translateY(10px) scale(0.9);
    transition: all 1.6s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

/* Reveal logo once we start scrolling */
.ds-navbar.glass .nav-logo,
.ds-navbar.scrolled .nav-logo {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.ds-navbar a {
    font-family: var(--font-sans);
    color: var(--ds-creme);
    /* Default to cream for better visibility over video */
    text-decoration: none;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    margin: 0 1.5vw;
    opacity: 0.8;
    /* Visible at first */
    transform: translateY(0);
    transition: all 0.5s ease;
    white-space: nowrap;
}

.ds-navbar a:hover {
    opacity: 1;
}

/*
   Editorial homepage nav (index.html + index-alt-2.html with body.layout-editorial):
   tighter margins / type so ten links + locale switcher fit without wrapping on desktop.
*/
body.layout-editorial .ds-navbar a {
    margin: 0 0.7vw;
    letter-spacing: 0.14em;
    font-size: 10px;
}

@media (max-width: 1180px) {
    body.layout-editorial .ds-navbar a {
        margin: 0 0.5vw;
        letter-spacing: 0.12em;
        font-size: 9.5px;
    }
}

@media (max-width: 920px) {
    body.layout-editorial .ds-navbar a {
        margin: 0 0.35vw;
        font-size: 9px;
        letter-spacing: 0.1em;
    }
}

/* Locale switcher (i18n) — quiet type-only; fixed strip uses .locale-switcher--fixed */
.locale-switcher {
    display: flex;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
}
.locale-switcher .locale-switcher__btn {
    font-family: var(--font-sans);
    font-size: 8.5px;
    letter-spacing: 0.12em;
    line-height: 1;
    padding: 5px 5px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--ds-creme);
    opacity: 0.55;
    cursor: pointer;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.2s ease, background 0.2s ease;
}
.locale-switcher .locale-switcher__btn:hover,
.locale-switcher .locale-switcher__btn:focus-visible {
    opacity: 0.95;
    outline: none;
}
.locale-switcher .locale-switcher__btn[aria-pressed="true"] {
    opacity: 1;
    font-weight: 600;
    background: rgba(244, 243, 233, 0.12);
}
.ds-navbar.glass + .locale-switcher--fixed .locale-switcher__btn,
.ds-navbar.scrolled + .locale-switcher--fixed .locale-switcher__btn {
    color: var(--ds-creme);
    opacity: 0.62;
}
.ds-navbar.glass + .locale-switcher--fixed .locale-switcher__btn:hover,
.ds-navbar.glass + .locale-switcher--fixed .locale-switcher__btn:focus-visible,
.ds-navbar.scrolled + .locale-switcher--fixed .locale-switcher__btn:hover,
.ds-navbar.scrolled + .locale-switcher--fixed .locale-switcher__btn:focus-visible {
    opacity: 1;
    color: var(--ds-sand-refined);
}
.ds-navbar.glass + .locale-switcher--fixed .locale-switcher__btn[aria-pressed="true"],
.ds-navbar.scrolled + .locale-switcher--fixed .locale-switcher__btn[aria-pressed="true"] {
    opacity: 1;
    color: var(--ds-creme);
    background: rgba(166, 93, 75, 0.58);
    box-shadow: inset 0 0 0 1px rgba(244, 243, 233, 0.22);
}

/* Hero Section Styling from DS */
#hero {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: visible;
}

.home-hero-wrap {
    height: 100%;
    width: 100%;
    position: relative;
}

/* Hero video container - match design-system positioning & layering */
.hero-image-div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

#hero .hero-image-div video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
}

/* No dimmer: global .video-overlay in stylesheet.css uses rgba black — beat it here */
#hero .hero-image-div .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none !important;
    background-color: transparent !important;
    z-index: 2;
    pointer-events: none;
}

/* Fallback image when video doesn't load - center, 10% down, cover */
.hero-image-div .hero-video-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    z-index: 0;
    display: none;
}

.hero-image-div.video-failed .hero-video-fallback {
    display: block;
}

.hero-image-div.video-failed video {
    display: none;
}

/* Demo: body.media-fallback-preview — hide videos, show poster / still layers */
body.media-fallback-preview .hero-image-div > video#hero-v {
    display: none !important;
}

body.media-fallback-preview .hero-image-div .hero-video-fallback {
    display: block !important;
}

.manifesto-bg-still {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    pointer-events: none;
    display: none;
}

body.media-fallback-preview .manifesto-v1-zoom-shell video,
body.media-fallback-preview .manifesto-v2-zoom-shell video {
    display: none !important;
}

body.media-fallback-preview .manifesto-bg-still {
    display: block;
}

.manifesto-v1-zoom-shell .manifesto-bg-still {
    filter: brightness(1.14) saturate(1.05);
}

.feature-parallax-slot .feature-parallax-media-v,
.feature-parallax-slot .feature-parallax-media-s {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
}

.feature-parallax-slot .feature-parallax-media-s {
    display: none;
}

.feature-parallax-slot picture.feature-parallax-media-s {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}

.feature-parallax-slot picture.feature-parallax-media-s img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.media-fallback-preview .feature-parallax-slot .feature-parallax-media-v {
    display: none !important;
}

body.media-fallback-preview .feature-parallax-slot .feature-parallax-media-s {
    display: block;
}

.dl-takes-video-still {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 1;
    pointer-events: none;
    display: none;
    z-index: 0;
}

body.media-fallback-preview .dl-takes-media > video {
    display: none !important;
}

body.media-fallback-preview .dl-takes-media .dl-takes-video-still {
    display: block;
}

/* Fixed top-left: demo toggle — subtle ghost dot, no ring */
.media-fallback-toggle {
    position: fixed;
    top: max(6px, env(safe-area-inset-top, 0px));
    left: max(10px, env(safe-area-inset-left, 0px));
    z-index: 10000;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.09);
    cursor: pointer;
    opacity: 0.22;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

.media-fallback-toggle:hover,
.media-fallback-toggle:focus-visible {
    opacity: 0.55;
    background: rgba(255, 255, 255, 0.18);
    outline: none;
}

body.media-fallback-preview .media-fallback-toggle {
    background: rgba(19, 40, 62, 0.1);
}

/* index-v1: bottom-right demo dot — swap DJI ↔ bg hero video (scripts-v1.js #hero-video-demo-toggle) */
.hero-video-demo-toggle {
    position: fixed;
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
    right: max(14px, env(safe-area-inset-right, 0px));
    z-index: 10001;
    width: 42px;
    height: 42px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    opacity: 0.3;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

.hero-video-demo-toggle:hover,
.hero-video-demo-toggle:focus-visible {
    opacity: 0.62;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
}

.hero-content {
    position: relative;
    z-index: 10;
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6vh 0 clamp(3.25rem, 10vh, 7.5rem);
    box-sizing: border-box;
    text-align: center;
}

#hero .hero-copy-cta-wrap {
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    gap: clamp(3vh, 5vh, 6.5vh);
    transform: translateY(clamp(2vh, 3.5vh, 5.5vh));
    box-sizing: border-box;
}

#hero .hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    gap: clamp(1.25rem, 2.2vh, 2rem);
}

#hero .hero-kicker {
    margin: 0;
    max-width: 36rem;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--ds-creme);
    opacity: 0.88;
}

#hero .hero-lead {
    margin: 0;
    max-width: min(680px, 90vw);
    font-family: var(--font-sans);
    font-size: clamp(0.9rem, 1.15vw, 1.1rem);
    font-weight: 300;
    line-height: 1.65;
    letter-spacing: 0.01em;
    color: var(--ds-creme);
    opacity: 0.92;
}

.hero-logo {
    position: absolute;
    top: 0px;
    /* Offset to clear the 56px fixed navbar */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

.hero-logo img {
    width: 15vw;
    max-width: 200px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5)) drop-shadow(0 8px 32px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 60px rgba(0, 0, 0, 0.4));
    margin: 0 auto;
}

.heading-medium.patacas {
    position: relative;
    z-index: 5;
    font-family: var(--cp-font-heading);
    font-size: var(--cp-type-h1);
    font-weight: 200;
    text-align: center;
    letter-spacing: -0.1vw;
    color: var(--ds-creme) !important;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.9),
        0 2px 12px rgba(0, 0, 0, 0.65),
        0 4px 28px rgba(0, 0, 0, 0.45);
    max-width: 810px;
    line-height: var(--cp-lh-tight);
    margin: 0;
}

#hero .hero-content p {
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.85),
        0 2px 14px rgba(0, 0, 0, 0.55);
}

#hero .hero-content a {
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.85),
        0 2px 10px rgba(0, 0, 0, 0.5);
}

#hero .hero-cta-row {
    flex-shrink: 0;
    display: flex;
    gap: 2vw;
    justify-content: center;
    margin-top: 0;
    margin-bottom: 0;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.85rem 1.25rem;
    border-radius: 6px;
    /* Glass: weak blur = less muddying; tiny fill + border keep CTAs legible */
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px) saturate(1.05);
    -webkit-backdrop-filter: blur(8px) saturate(1.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

#hero .hero-cta-primary {
    font-family: var(--font-sans);
    text-decoration: none;
    font-size: var(--cp-type-cta);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 12px 24px;
    border: 1px solid var(--ds-creme);
    border-radius: 2px;
    background: var(--ds-creme);
    color: var(--ds-primary) !important;
    text-shadow: none !important;
    font-weight: 600;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#hero .hero-cta-primary:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

#hero .hero-cta-secondary {
    font-family: var(--font-sans);
    color: var(--ds-creme) !important;
    text-decoration: none;
    font-size: var(--cp-type-cta);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    padding: 12px 18px;
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.06);
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.95),
        0 0 24px rgba(0, 0, 0, 0.55);
    transition: background 0.2s ease, border-color 0.2s ease;
}

#hero .hero-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.75);
}

.heading-medium.patacas .italic,
.heading-medium.patacas em {
    font-style: italic;
    font-weight: 200;
}

/* Locale HTML: semantic emphasis + accent words (no inline styles in JSON) */
.cp-em-accent-hematite {
    font-style: italic;
    font-weight: 200;
    color: var(--ds-hematite);
}

.cp-em-accent-terracotta {
    font-style: italic;
    font-weight: 200;
    color: var(--ds-terracotta);
}

.desert-lakes-text h2 em {
    font-style: italic;
    font-weight: 200;
}

.cv-heading em {
    font-style: italic;
    font-weight: 200;
}

/* Sub-Hero — z below manifesto so the manifesto top cap isn’t covered */
#sub-hero {
    position: relative;
    padding: clamp(4rem, 14vh, 7rem) 8vw;
    background-color: var(--ds-primary);
    color: var(--ds-creme);
    z-index: 4;
}

/* Room for totem mark (half sits above padding edge, over the wave) */
#sub-hero:has(.sub-hero-icon-wrap) {
    padding-top: calc(clamp(4rem, 14vh, 7rem) + clamp(1.5rem, 3.5vmin, 2.75rem));
}

/* Totem on hero→navy seam: no .fade-up (scroll scrub handles opacity + scale in scripts) */
#sub-hero-icon.sub-hero-icon-wrap,
.sub-hero-icon-wrap {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 11;
    pointer-events: none;
    width: clamp(62px, 9.5vw, 96px);
    height: clamp(62px, 9.5vw, 96px);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, calc(-50% - 5px));
}

.sub-hero-icon-wrap .sub-hero-icon-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    opacity: 1;
    transform: none;
}

.sub-hero-icon-wrap .sub-hero-icon-inner img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    display: block;
    filter:
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45))
        drop-shadow(0 0 14px rgba(222, 213, 195, 0.22));
    will-change: transform, opacity;
}

@media (max-width: 991px) {
    #sub-hero-icon.sub-hero-icon-wrap,
    .sub-hero-icon-wrap {
        width: clamp(52px, 16vw, 78px);
        height: clamp(52px, 16vw, 78px);
        transform: translate(-50%, calc(-52% - 4px));
    }
}

/* Grow Image Section */
.grow-image-container {
    width: 30vw;
    /* Started smaller */
    height: 45vh;
    /* Started smaller */
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 5;
    will-change: width, height, border-radius;
    /* Hint to browser for hardware acceleration */
    transform: translateZ(0);
    /* Force GPU rendering to prevent jitter */
}

.grow-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateZ(0);
    /* Force GPU rendering */
}

.grow-text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    color: var(--ds-primary);
    text-align: center;
    pointer-events: none;
    /* Extremely subtle gradient, just enough to separate text from complex background details */
    background: radial-gradient(circle at center, rgba(244, 243, 233, 0.4) 0%, rgba(244, 243, 233, 0.0) 60%);
    opacity: 0;
    /* Hidden initially */
}

.grow-text-overlay h2 {
    font-family: var(--cp-font-heading);
    font-size: 6vw;
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.02em;
    transform: translateY(50px) scale(0.9);
    opacity: 0;
    /* Soft, wide white glow to ensure readability without muddying the image */
    text-shadow: 0 0 40px rgba(244, 243, 233, 0.8), 0 0 80px rgba(244, 243, 233, 0.6);
}

.grow-text-overlay p {
    font-family: var(--font-sans);
    font-size: 1.25vw;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-top: 3vh;
    opacity: 0;
    transform: translateY(20px);
    text-shadow: 0 0 20px rgba(244, 243, 233, 0.9);
}

/* Desert Lakes - card final size (original smaller size) */
.desert-lakes-grow-card {
    width: 100%;
    aspect-ratio: 4/3;
}

.desert-lakes-grow-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.desert-lakes-overlay {
    opacity: 0;
}

.desert-lakes-content {
    opacity: 0;
}

/* Lençóis → “takes” beat: fixed layer + in-flow spacer (parade scroll) so #cultura-impacto waits until runway ends. */
.dl-takes-beat {
    position: relative;
    z-index: 6;
    margin-top: 0;
}

/* Fixed video + scrim only; copy + floats live in scrolling sticky row below */
.dl-takes-fixed-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
    visibility: hidden;
}

.dl-takes-fixed-bg.dl-takes--active {
    visibility: visible;
}

.dl-takes-scroll-stages {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

/*
 * Desktop (motion): GSAP pins .dl-takes-row-primary for (pre+parade) scroll — spacer hidden; pinSpacing
 * replaces it. Mobile / reduced-motion desktop: in-flow spacer keeps green below until enough scroll.
 */
.dl-takes-sticky-window {
    min-height: calc(100vh + 120vh + clamp(2rem, 18vh, 7rem));
    width: 100%;
    position: relative;
}

@media (min-width: 721px) {
    /*
     * Primary 100vh + in-flow stats (cards + padding, ~50vh) + modest tail before #cultura-impacto.
     * Avoid a third full 100vh — that matched old min-height on .dl-takes-row-stats and read as huge empty band.
     */
    /* 100vh row + 150vh parade scroll distance + stats tail. Matches old effective height (pinSpacing added ~150vh). */
    .dl-takes-sticky-window {
        min-height: calc(300vh + clamp(2rem, 12vh, 5rem));
    }

    .dl-takes-parade-spacer {
        min-height: 150vh;
    }
}

/* Sticky on all viewports — row sits at viewport top while user scrolls through the parade. */
.dl-takes-row-primary {
    position: sticky;
    top: 0;
    z-index: 3;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    pointer-events: none;
}

.dl-takes-parade-spacer {
    min-height: 120vh;
    width: 100%;
    pointer-events: none;
}

.dl-takes-row-primary-left,
.dl-takes-row-primary-right {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
}

.dl-takes-row-primary-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Desktop: CSS sticky holds the row at viewport top — no GSAP pin needed (avoids pin-spacer offset jump). */
@media (min-width: 721px) {
    .dl-takes-row-primary-left .dl-takes-inner {
        padding-top: max(2.5rem, calc(56px + 1.5vh));
        padding-bottom: max(2.5rem, calc(56px + 1.5vh));
    }
}

/* Same horizontal + bottom breathing room as #cultura-impacto (padding 25vh 8vw); tight top under copy */
.dl-takes-row-stats {
    position: sticky;
    top: 0;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(0.25rem, 1vh, 0.5rem) clamp(1rem, 5vw, 3rem) clamp(18vh, 25vh, 28vh);
    pointer-events: none;
}

@media (min-width: 721px) {
    .dl-takes-row-stats {
        padding-left: 8vw;
        padding-right: 8vw;
        padding-top: clamp(1rem, 2vh, 2rem);
        padding-bottom: 25vh;
        margin-top: clamp(3rem, 8vh, 6rem);
    }
}

.dl-takes-stats-inner {
    pointer-events: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 3vw, 2.5rem);
    width: 100%;
    max-width: min(1100px, 100%);
    box-sizing: border-box;
}

/* Mirrors stat cards in #cultura-impacto (glass panel + terracotta figure + uppercase label) */
.dl-takes-beat-stat-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: clamp(1.75rem, 6vh, 3.5rem) clamp(1rem, 2vw, 1.75rem);
    border-radius: 4px;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .dl-takes-beat-stat-card:hover {
        transform: translateY(-10px);
    }
}

.dl-takes-beat-stat-num {
    font-family: var(--cp-font-heading);
    font-size: clamp(2.25rem, 5.5vw, 4rem);
    font-weight: 400;
    display: block;
    color: var(--ds-terracotta);
    line-height: 1;
    margin-bottom: clamp(0.75rem, 2vh, 1.25rem);
}

.dl-takes-beat-stat-label {
    font-family: var(--font-sans);
    font-size: clamp(9px, 0.55vw + 7px, 11px);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.8;
    font-weight: 500;
    color: rgba(244, 243, 233, 0.9);
    margin: 0;
    line-height: 1.35;
}

/* Video + scrim fade together (scrim alone was painting over the whole viewport at opacity 1). */
.dl-takes-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
}

.dl-takes-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 1;
    pointer-events: none;
    z-index: 0;
}

/*
 * Original stack: uniform blue wash + full-frame subtle creme, then left→right blue accent for copy.
 * (Same layering as pre-merge; avoids “gradient only” looking too thin on the right.)
 */
.dl-takes-scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(
            to right,
            rgba(19, 40, 62, 0.82) 0%,
            rgba(19, 40, 62, 0.54) 22%,
            rgba(19, 40, 62, 0.18) 48%,
            rgba(19, 40, 62, 0.04) 68%,
            transparent 100%
        ),
        linear-gradient(
            to top,
            rgba(19, 40, 62, 0.30) 0%,
            rgba(19, 40, 62, 0.08) 28%,
            transparent 55%
        );
}

/* Right-half canvas: diagonal float parade — soft-edged mask instead of hard overflow clip. */
.dl-takes-float-canvas {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    width: auto;
    height: calc(100vh - 56px);
    height: calc(100dvh - 56px);
    overflow: hidden;
    z-index: 3;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right,  transparent, black 12%, black 88%, transparent),
                        linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    -webkit-mask-composite: destination-in;
    mask-image: linear-gradient(to right,  transparent, black 12%, black 88%, transparent),
                linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    mask-composite: intersect;
}

.dl-takes-float-item {
    position: absolute;
    width: clamp(58px, 9.8vw, 112px);
    height: auto;
    opacity: 0;
    transform-origin: center center;
    will-change: transform, opacity;
}

.dl-takes-float-item picture {
    display: block;
    width: 100%;
    height: auto;
}

.dl-takes-float-item img,
.dl-takes-float-item picture img {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: 0.88;
}

.dl-takes-float-item--photo {
    width: clamp(78px, 14.5vw, 148px);
    border-radius: 4px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.38);
}

.dl-takes-float-item--photo img,
.dl-takes-float-item--photo picture img {
    filter: none;
    opacity: 1;
    border-radius: 3px;
}

.dl-takes-inner {
    position: relative;
    z-index: 4;
    box-sizing: border-box;
    width: 100%;
    max-width: min(46rem, calc(100vw - clamp(2rem, 9vw, 6rem)));
    padding: max(5.5rem, calc(56px + 4vh)) clamp(1.25rem, 5vw, 3rem) clamp(2rem, 6vh, 4rem);
    margin-left: clamp(1rem, 5vw, 4.5rem);
    margin-right: auto;
    opacity: 0;
    hyphens: auto;
    -webkit-hyphens: auto;
    pointer-events: auto;
}

.dl-takes-eyebrow {
    font-family: var(--font-sans);
    font-size: clamp(9px, 0.65vw + 7px, 10px);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ds-sand-refined);
    margin: 0 0 clamp(0.85rem, 2vh, 1.35rem);
    opacity: 0.93;
    line-height: 1.35;
}

.dl-takes-eyebrow--terracotta {
    color: var(--ds-terracotta);
    opacity: 1;
}

.dl-takes-heading {
    font-family: var(--cp-font-heading);
    font-weight: 300;
    font-size: clamp(2rem, 3.15vw + 1.25rem, 3.55rem);
    line-height: 1.14;
    color: var(--ds-creme);
    margin: 0 0 clamp(1.25rem, 2.8vh, 2rem);
    letter-spacing: -0.028em;
    text-wrap: balance;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 8px 28px rgba(0, 0, 0, 0.35);
    max-width: 40ch;
}

.dl-takes-heading em {
    font-style: italic;
    color: var(--ds-sand-refined);
}

/* Paragraphs only: keep right edge ~viewport center (title / eyebrow unchanged). */
.dl-takes-lead,
.dl-takes-body {
    box-sizing: border-box;
}

@media (min-width: 721px) {
    .dl-takes-lead,
    .dl-takes-body {
        max-width: min(
            30rem,
            calc(48vw - clamp(2.25rem, 8vw, 6.5rem))
        );
    }
}

.dl-takes-lead {
    font-family: var(--font-sans);
    font-size: clamp(1rem, 0.55vw + 0.92rem, 1.14rem);
    font-weight: 400;
    line-height: 1.78;
    letter-spacing: 0.01em;
    color: rgba(244, 243, 233, 0.94);
    margin: 0 0 clamp(1rem, 2.2vh, 1.5rem);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.dl-takes-body {
    font-family: var(--font-sans);
    font-size: clamp(0.98rem, 0.45vw + 0.9rem, 1.08rem);
    font-weight: 300;
    line-height: 1.78;
    letter-spacing: 0.012em;
    color: rgba(244, 243, 233, 0.9);
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.dl-takes-body + .dl-takes-body {
    margin-top: clamp(0.95rem, 2vh, 1.35rem);
}

@media (max-width: 720px) {
    .dl-takes-float-canvas {
        display: none;
    }

    .dl-takes-row-primary {
        grid-template-columns: 1fr;
    }

    .dl-takes-row-primary-left {
        justify-content: center;
    }

    .dl-takes-row-primary-right {
        display: none;
    }

    .dl-takes-row-stats {
        padding-left: clamp(1rem, 5vw, 1.5rem);
        padding-right: clamp(1rem, 5vw, 1.5rem);
    }

    .dl-takes-stats-inner {
        grid-template-columns: 1fr;
        gap: clamp(1.25rem, 4vw, 2rem);
    }

    .dl-takes-inner {
        margin-left: clamp(1rem, 4vw, 1.5rem);
        max-width: calc(100vw - clamp(1.5rem, 8vw, 2rem));
        padding-top: max(4.5rem, calc(56px + 2.5vh));
        padding-bottom: max(4.5rem, calc(56px + 2.5vh));
    }

    .dl-takes-heading {
        max-width: none;
        font-size: clamp(1.65rem, 7vw + 0.45rem, 2.35rem);
    }

    .dl-takes-scrim {
        background:
            linear-gradient(
                to right,
                rgba(19, 40, 62, 0.88) 0%,
                rgba(19, 40, 62, 0.62) 35%,
                rgba(19, 40, 62, 0.22) 70%,
                transparent 100%
            ),
            linear-gradient(
                to top,
                rgba(19, 40, 62, 0.35) 0%,
                rgba(19, 40, 62, 0.10) 30%,
                transparent 55%
            );
    }
}

@media (prefers-reduced-motion: reduce) {
    .dl-takes-media {
        opacity: 0.35 !important;
    }

    .dl-takes-row-primary {
        position: relative !important;
        top: auto !important;
    }

    .dl-takes-float-canvas {
        display: none !important;
    }

    .dl-takes-sticky-window {
        min-height: calc(100vh + 120vh + clamp(2rem, 18vh, 7rem)) !important;
    }

    .dl-takes-parade-spacer {
        min-height: 120vh !important;
    }

    .dl-takes-inner {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) and (min-width: 721px) {
    .dl-takes-sticky-window {
        min-height: calc(100vh + (22vh + 128vh) + max(72vh, 30rem) + clamp(2rem, 12vh, 5rem)) !important;
    }

    .dl-takes-parade-spacer {
        display: block !important;
        min-height: calc(22vh + 128vh) !important;
    }
}

/* Experiência features — host CTA (GSAP block reveal on heading / lead) */
.contact-cta-heading {
    font-family: var(--cp-font-heading);
    font-size: clamp(1.85rem, 4vw, 3.15rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--ds-primary);
    margin: 0 0 2.5vh;
    letter-spacing: -0.02em;
}

.contact-cta-lead {
    font-family: var(--font-sans);
    font-style: italic;
    font-size: clamp(1rem, 2.2vw, 1.35rem);
    line-height: 1.5;
    color: var(--ds-primary);
    margin: 0 auto 5vh;
    max-width: 42ch;
}

.contact-cta-inner {
    width: 100%;
    text-align: center;
}

.contact-cta-actions {
    display: flex;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    flex-wrap: wrap;
    justify-content: center;
}

.sub-hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 30;
}

/* A Casa: eyebrow over text column only; flex row below centers polaroid vs title+body+CTA (grid was visually top-aligning). */
#a-casa.sub-hero-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

#a-casa .a-casa-eyebrow-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 8vw;
    width: 100%;
    margin-bottom: 40px;
}

#a-casa .a-casa-eyebrow-spacer {
    min-height: 0;
}

#a-casa .a-casa-eyebrow {
    grid-column: 2;
}

#a-casa .a-casa-split {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 8vw;
    width: 100%;
}

#a-casa .a-casa-visual {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: center;
}

#a-casa .a-casa-main {
    flex: 1 1 0;
    min-width: 0;
}

#a-casa .a-casa-main.text-block {
    flex: 1 1 0;
    max-width: none;
    padding: 0;
}

#a-casa .a-casa-main h2 {
    margin-top: 0;
}

#a-casa .a-casa-main .text-block-content > :last-child {
    margin-bottom: 0;
}

/* Zig-zag: same row layout as original stack; DOM order text then polaroids, reverse flips visual order */
.experiencia-stack-section--reverse {
    flex-direction: row-reverse;
}

/* Room stacks: no scroll stack animation — 3 polaroids fully stacked from load; hover only (GSAP stack is intro row only) */
#experiencia .experiencia-stack-section--room {
    min-height: 0;
    margin-top: -2vh;
    padding-block: 3vh 4vh;
    overflow: visible;
    gap: clamp(0.25rem, 1.25vw, 1rem);
}

#experiencia .experiencia-stack-section--room + .experiencia-stack-section--room {
    margin-top: -8vh;
}

#experiencia .experiencia-stack-section--room .stack-text-left {
    z-index: 1;
}

/* Comfortable measure for room copy (~60–68ch); overrides generic 900px stack text-block */
#experiencia .experiencia-stack-section--room .stack-text-left .text-block {
    max-width: min(36rem, 100%);
}

/* Room + reverse (Pulsar, Carnaúba): polaroids left, text right — mirror intro’s text↔polaroids gap (intro uses padding-right: 5vw on text) */
#experiencia .experiencia-stack-section--room.experiencia-stack-section--reverse .stack-text-left {
    padding-left: 5vw !important;
    padding-right: 0 !important;
}

/* Room, no reverse (Estrelar only): same 5vw band toward polaroids as intro; text block centered in column so copy isn’t hugging the left */
#experiencia .experiencia-stack-section--room:not(.experiencia-stack-section--reverse) .stack-text-left {
    padding-left: 0 !important;
    padding-right: 5vw !important;
    text-align: right;
}

#experiencia .experiencia-stack-section--room:not(.experiencia-stack-section--reverse) .stack-text-left .text-block {
    margin-left: auto;
    margin-right: auto;
    text-align: right;
}

#experiencia .experiencia-stack-section--room:not(.experiencia-stack-section--reverse) .stack-text-left .text-block-content {
    border-left: none !important;
    border-right: 2px solid var(--ds-terracotta) !important;
    padding-left: 0 !important;
    padding-right: 3vw !important;
}

#experiencia .experiencia-stack-section--room .stack-polaroids-right {
    height: min(78vh, 780px) !important;
    min-height: 340px;
    position: relative;
    z-index: 2;
    overflow: visible;
}

#experiencia .experiencia-stack-section--room .stack-polaroids-right:has(.polaroid-stack-item.ds-texture-card:hover),
#experiencia .experiencia-stack-section--room .stack-polaroids-right:has(.polaroid-stack-item.ds-texture-card:focus-within) {
    z-index: 30;
    pointer-events: auto;
}

/* Discoverability: motion only — stack gently rises/falls + photos “breathe” in sequence; stops on hover / focus */
@keyframes experiencia-stack-invite-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -9px, 0);
    }
}

@keyframes experiencia-polaroid-img-invite {
    0%,
    100% {
        filter: brightness(1) saturate(1);
    }

    50% {
        filter: brightness(1.1) saturate(1.04);
    }
}

#experiencia .experiencia-stack-section--room .stack-polaroids-right {
    animation: experiencia-stack-invite-float 3.8s ease-in-out infinite;
    will-change: transform;
}

#experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(1) .card-img {
    animation: experiencia-polaroid-img-invite 2.4s ease-in-out infinite;
    animation-delay: 0s;
}

#experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(2) .card-img {
    animation: experiencia-polaroid-img-invite 2.4s ease-in-out infinite;
    animation-delay: 0.3s;
}

#experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(3) .card-img {
    animation: experiencia-polaroid-img-invite 2.4s ease-in-out infinite;
    animation-delay: 0.6s;
}

#experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(4) .card-img {
    animation: experiencia-polaroid-img-invite 2.4s ease-in-out infinite;
    animation-delay: 0.9s;
}

@media (prefers-reduced-motion: reduce) {
    #experiencia .experiencia-stack-section--room .stack-polaroids-right {
        animation: none !important;
        will-change: auto !important;
    }

    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card .card-img {
        animation: none !important;
        filter: none !important;
    }
}

/* Leave: card settles back gently */
#experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card {
    transform-origin: center center;
    transition:
        transform 0.55s cubic-bezier(0.33, 1, 0.68, 1),
        box-shadow 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}

/* Four-card fan: rear pair (1–2) pulled out further so more of each shows past the front pair (3–4).
   No !important — GSAP needs to override these for the deal-out entry animation. */
#experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(1) {
    transform: translate3d(clamp(-118px, -10.5vw, -58px), clamp(38px, 5.8vh, 72px), 0) rotate(-11deg) scale(1);
}

#experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(2) {
    transform: translate3d(clamp(-56px, -5vw, -4px), clamp(-72px, -8.5vh, -42px), 0) rotate(8deg) scale(1);
}

#experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(3) {
    transform: translate3d(clamp(68px, 9.5vw, 128px), clamp(-6px, -0.5vh, 20px), 0) rotate(13deg) scale(1);
}

#experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(4) {
    transform: translate3d(clamp(12px, 2vw, 42px), clamp(58px, 8.5vh, 108px), 0) rotate(-7deg) scale(1);
}

@media (hover: hover) and (pointer: fine) {
    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card {
        cursor: pointer;
    }

    /* Enter: slight spring overshoot — feels like lifting a card off a table */
    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:hover,
    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:focus-within {
        transition:
            transform 0.65s cubic-bezier(0.2, 1.4, 0.4, 1) 0.2s,
            box-shadow 0.65s cubic-bezier(0.2, 1.4, 0.4, 1) 0.2s;
    }

    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(1):hover,
    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(1):focus-within {
        transform: translate3d(clamp(-100px, -8vw, -42px), clamp(28px, 4vh, 56px), 0) rotate(-3deg) scale(1.6) !important;
        z-index: 50 !important;
        box-shadow: 0 24px 56px rgba(0, 0, 0, 0.18), 0 8px 20px rgba(0, 0, 0, 0.10) !important;
    }

    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(2):hover,
    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(2):focus-within {
        transform: translate3d(clamp(-40px, -3vw, 4px), clamp(-56px, -6vh, -30px), 0) rotate(2deg) scale(1.6) !important;
        z-index: 50 !important;
        box-shadow: 0 24px 56px rgba(0, 0, 0, 0.18), 0 8px 20px rgba(0, 0, 0, 0.10) !important;
    }

    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(3):hover,
    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(3):focus-within {
        transform: translate3d(clamp(52px, 7vw, 104px), clamp(-2px, 0vh, 14px), 0) rotate(4deg) scale(1.6) !important;
        z-index: 50 !important;
        box-shadow: 0 24px 56px rgba(0, 0, 0, 0.18), 0 8px 20px rgba(0, 0, 0, 0.10) !important;
    }

    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(4):hover,
    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(4):focus-within {
        transform: translate3d(clamp(8px, 1.5vw, 34px), clamp(44px, 6vh, 88px), 0) rotate(-2deg) scale(1.6) !important;
        z-index: 50 !important;
        box-shadow: 0 24px 56px rgba(0, 0, 0, 0.18), 0 8px 20px rgba(0, 0, 0, 0.10) !important;
    }
}

/* Touch / no-hover: whole-card zoom while finger is down */
@media (hover: none) {
    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(1):active {
        transform: translate3d(clamp(-118px, -10.5vw, -58px), clamp(38px, 5.8vh, 72px), 0) rotate(-11deg) scale(1.22) !important;
        z-index: 50 !important;
        box-shadow:
            0 20px 44px rgba(0, 0, 0, 0.16),
            0 52px 96px rgba(0, 0, 0, 0.26) !important;
    }

    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(2):active {
        transform: translate3d(clamp(-56px, -5vw, -4px), clamp(-72px, -8.5vh, -42px), 0) rotate(8deg) scale(1.22) !important;
        z-index: 50 !important;
        box-shadow:
            0 20px 44px rgba(0, 0, 0, 0.16),
            0 52px 96px rgba(0, 0, 0, 0.26) !important;
    }

    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(3):active {
        transform: translate3d(clamp(68px, 9.5vw, 128px), clamp(-6px, -0.5vh, 20px), 0) rotate(13deg) scale(1.22) !important;
        z-index: 50 !important;
        box-shadow:
            0 20px 44px rgba(0, 0, 0, 0.16),
            0 52px 96px rgba(0, 0, 0, 0.26) !important;
    }

    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(4):active {
        transform: translate3d(clamp(12px, 2vw, 42px), clamp(58px, 8.5vh, 108px), 0) rotate(-7deg) scale(1.22) !important;
        z-index: 50 !important;
        box-shadow:
            0 20px 44px rgba(0, 0, 0, 0.16),
            0 52px 96px rgba(0, 0, 0, 0.26) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card {
        transition: none !important;
    }

    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(1):hover,
    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(1):focus-within {
        transform: translate3d(clamp(-118px, -10.5vw, -58px), clamp(38px, 5.8vh, 72px), 0) rotate(-11deg) scale(1) !important;
        box-shadow: none !important;
    }

    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(2):hover,
    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(2):focus-within {
        transform: translate3d(clamp(-56px, -5vw, -4px), clamp(-72px, -8.5vh, -42px), 0) rotate(8deg) scale(1) !important;
        box-shadow: none !important;
    }

    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(3):hover,
    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(3):focus-within {
        transform: translate3d(clamp(68px, 9.5vw, 128px), clamp(-6px, -0.5vh, 20px), 0) rotate(13deg) scale(1) !important;
        box-shadow: none !important;
    }

    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(4):hover,
    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(4):focus-within {
        transform: translate3d(clamp(12px, 2vw, 42px), clamp(58px, 8.5vh, 108px), 0) rotate(-7deg) scale(1) !important;
        box-shadow: none !important;
    }

    @media (hover: none) {
        #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(1):active {
            transform: translate3d(clamp(-118px, -10.5vw, -58px), clamp(38px, 5.8vh, 72px), 0) rotate(-11deg) scale(1) !important;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
        }

        #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(2):active {
            transform: translate3d(clamp(-56px, -5vw, -4px), clamp(-72px, -8.5vh, -42px), 0) rotate(8deg) scale(1) !important;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
        }

        #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(3):active {
            transform: translate3d(clamp(68px, 9.5vw, 128px), clamp(-6px, -0.5vh, 20px), 0) rotate(13deg) scale(1) !important;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
        }

        #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card:nth-child(4):active {
            transform: translate3d(clamp(12px, 2vw, 42px), clamp(58px, 8.5vh, 108px), 0) rotate(-7deg) scale(1) !important;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
        }
    }
}

#experiencia .experiencia-stack-section--room .polaroid-stack-item.ds-texture-card:focus-visible {
    outline: 2px solid var(--ds-terracotta);
    outline-offset: 6px;
    border-radius: 6px;
}

#experiencia .experiencia-stack-section--room .polaroid-stack-item.ds-texture-card:focus:not(:focus-visible) {
    outline: none;
}

#experiencia .experiencia-stack-section--room .polaroid-stack-item.ds-texture-card {
    width: min(20vw, 260px) !important;
    max-width: 90%;
    padding: 10px;
    opacity: 1 !important;
}

#experiencia .experiencia-stack-section--room .polaroid-stack-item.ds-texture-card:nth-child(2) {
    width: min(20.5vw, 268px) !important;
}

#experiencia .experiencia-stack-section--room .polaroid-stack-item.ds-texture-card:nth-child(3) {
    width: min(21vw, 276px) !important;
}

#experiencia .experiencia-stack-section--room .polaroid-stack-item.ds-texture-card:nth-child(4) {
    width: min(21.5vw, 284px) !important;
}

#experiencia .experiencia-stack-section--room .stack-text-left h2.fade-up {
    font-size: clamp(1.65rem, 3.15vw, 2.85rem) !important;
    line-height: 1.06 !important;
    margin-bottom: 3.25vh !important;
    color: var(--ds-primary) !important;
}

#experiencia .experiencia-stack-section--room .stack-text-left h2.fade-up em {
    color: var(--ds-sand);
}

#experiencia .experiencia-stack-section--room .text-block-content p {
    font-size: clamp(0.9rem, 1.08vw, 1rem) !important;
    line-height: 1.62 !important;
    color: var(--ds-primary) !important;
    opacity: 0.95;
    font-weight: 300;
    max-width: 62ch;
}


.text-block {
    flex: 0 0 45%;
    z-index: 5;
    padding-right: 4vw;
}

.text-block h2 {
    font-family: var(--cp-font-heading);
    font-size: 4vw;
    line-height: 1.05;
    margin-bottom: 5vh;
    color: var(--ds-creme);
    letter-spacing: -0.02em;
}

.text-block h2 .italic,
.text-block h2 em {
    font-style: italic;
    font-weight: 200;
    color: var(--ds-sand);
}

.text-block h2 em.cp-em-accent-terracotta {
    color: var(--ds-terracotta);
}

.text-block p {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1.15vw;
    line-height: 1.6;
    opacity: 0.85;
    color: var(--ds-creme);
    margin-bottom: 2.5vh;
}

.text-block-content {
    border-left: 1px solid rgba(217, 197, 178, 0.2);
    padding-left: 2vw;
    margin-left: 1vw;
}

/* After .text-block-content so this wins over the default pale rail (see experiencia room rows + intro). */
.text-block-content.xp-text-rail-terracotta {
    border-left: 2px solid var(--ds-terracotta);
    padding-left: 3vw;
}

.ds-texture-card {
    background: var(--ds-white);
    padding: 5px;
    border-radius: 4px;
    border: 1px solid var(--ds-border);
    width: 18vw;
    position: absolute;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transform-origin: center center;
    will-change: transform, box-shadow, z-index, filter;
}

.ds-texture-card .card-img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: 2px;
    display: block;
}

.ds-texture-card .card-label {
    padding: 1.5vh 0;
    text-align: center;
}

.ds-texture-card .card-label strong {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    color: var(--ds-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.ds-texture-card .card-label small {
    color: rgba(19, 40, 62, 0.6);
    font-size: 0.75rem;
}

/* Enter Animations */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
}

/* Propósito: one filled wave only — top fades into satellite; no stacked scrims or outline strokes (those caused ghost lines). */
#cultura-impacto .proposito-divider-top {
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.15) 10%,
        rgba(0, 0, 0, 0.55) 24%,
        #000 40%,
        #000 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.15) 10%,
        rgba(0, 0, 0, 0.55) 24%,
        #000 40%,
        #000 100%
    );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Blend flat bottom of blue wave into garden photo — no hard horizontal clip line (#13283e = --ds-primary) */
#cultura-impacto .proposito-bg-top-fade {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        var(--ds-primary) 0%,
        var(--ds-primary) 5%,
        rgba(19, 40, 62, 0.88) 10%,
        rgba(19, 40, 62, 0.48) 17%,
        rgba(19, 40, 62, 0.12) 24%,
        rgba(19, 40, 62, 0) 32%
    );
}

/* Turismo regenerativo proposito block (in #cultura-impacto after content swap) */
#cultura-impacto .tourisme-regenerativo-proposito__eyebrow-rule {
    width: 40px;
    height: 1px;
    background-color: var(--ds-terracotta);
    opacity: 1;
    flex-shrink: 0;
}

#cultura-impacto .tourisme-regenerativo-proposito__heading em {
    color: var(--ds-sand-refined);
    font-style: italic;
}

/* Ultima section: aerial + layered scrims + dunes top; base blue hides seams vs footer */
.cultura-viva-section {
    position: relative;
    z-index: 31;
    padding: 25vh 8vw;
    background-color: var(--ds-primary);
    color: var(--ds-creme);
    overflow: visible;
}

/* Creme dunes wave — same SVG mask as .experiencia-top-wave / .manifesto-bottom-wave */
.cultura-viva-section__dunes-creme-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: clamp(112px, 15vh, 172px);
    transform: translateY(-100%) translateY(2px);
    pointer-events: none;
    z-index: 4;
    background-color: var(--ds-creme);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 150' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,150 L1440,150 L1440,80 C1250,50 1100,140 950,90 C800,40 650,130 450,70 C250,10 100,120 0,80 L0,150 Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 150' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,150 L1440,150 L1440,80 C1250,50 1100,140 950,90 C800,40 650,130 450,70 C250,10 100,120 0,80 L0,150 Z' fill='white'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
}

.cultura-viva-section__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 1;
    pointer-events: none;
    background-color: var(--ds-primary);
    background-image: url("../images/patacas-aereo-ai.jpg");
    background-image: -webkit-image-set(
        url("../images/patacas-aereo-ai.avif") type("image/avif"),
        url("../images/patacas-aereo-ai.webp") type("image/webp"),
        url("../images/patacas-aereo-ai.jpg") type("image/jpeg")
    );
    background-image: image-set(
        url("../images/patacas-aereo-ai.avif") type("image/avif"),
        url("../images/patacas-aereo-ai.webp") type("image/webp"),
        url("../images/patacas-aereo-ai.jpg") type("image/jpeg")
    );
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@media (prefers-reduced-motion: reduce) {
    .cultura-viva-section__bg {
        background-attachment: scroll;
    }
}

/*
 * Top: solid creme at the very edge (divider), then a long gentle creme-only α ramp before neutrals.
 * Bottom: solid primary into footer. Mid: aerial visible.
 */
.cultura-viva-section__scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: linear-gradient(
        180deg,
        var(--ds-creme) 0%,
        var(--ds-creme) 5%,
        rgba(244, 243, 233, 0.96) 10%,
        rgba(244, 243, 233, 0.9) 14%,
        rgba(244, 243, 233, 0.82) 17%,
        rgba(244, 243, 233, 0.7) 19%,
        rgba(224, 221, 210, 0.68) 21%,
        rgba(156, 154, 145, 0.64) 24%,
        rgba(82, 85, 92, 0.6) 34%,
        rgba(43, 48, 56, 0.55) 52%,
        rgba(28, 37, 48, 0.52) 58%,
        rgba(23, 37, 53, 0.56) 64%,
        rgba(19, 40, 62, 0.68) 74%,
        rgba(19, 40, 62, 0.82) 82%,
        rgba(19, 40, 62, 0.94) 90%,
        var(--ds-primary) 96%,
        var(--ds-primary) 100%
    );
}


.cultura-viva-section__inner {
    position: relative;
    z-index: 5;
}

#cultura-impacto .tourisme-regenerativo-proposito--ultima {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
}

#cultura-impacto .tourisme-regenerativo-proposito__copy {
    align-self: flex-start;
    max-width: 800px;
    width: 100%;
    margin: 0 0 5vh;
    text-align: left;
}

#cultura-impacto .tourisme-regenerativo-proposito__eyebrow {
    justify-content: flex-start;
}

#cultura-impacto .tourisme-regenerativo-proposito__heading {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 5vw, 3.75rem);
    line-height: 1.05;
    margin: 0 0 4vh;
    color: var(--ds-creme);
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.55),
        0 4px 24px rgba(0, 0, 0, 0.35);
}

#cultura-impacto .tourisme-regenerativo-proposito__body {
    font-size: clamp(1rem, 1.35vw, 1.2rem);
    line-height: 1.65;
    font-weight: 300;
    max-width: 42rem;
    margin: 0;
    color: rgba(244, 243, 233, 0.94);
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.65),
        0 2px 18px rgba(0, 0, 0, 0.4);
}

/* 3-col stats: same left edge as __copy; cap width without centering in the flex column */
#cultura-impacto .tourisme-regenerativo-proposito__stats.dl-takes-stats-inner {
    align-self: flex-start;
    width: 100%;
    max-width: min(1100px, 100%);
    box-sizing: border-box;
    padding-top: 1.5vh;
    margin-inline: 0;
    justify-content: start;
    justify-items: stretch;
}

#cultura-impacto .dl-takes-beat-stat-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(244, 243, 233, 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

#cultura-impacto .dl-takes-beat-stat-label {
    color: rgba(244, 243, 233, 0.92);
    opacity: 0.9;
}

@media (max-width: 720px) {
    #cultura-impacto .tourisme-regenerativo-proposito__stats.dl-takes-stats-inner {
        max-width: min(420px, 100%);
    }
}

/*
 * Desert→totems creme bridge: opaque band center, transparent top/bottom of strip; translateY on #o-lugar-transforma-conteudo top.
 */
.desert-totems-creme-bridge {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: clamp(340px, 45vh, 500px);
    top: 0;
    transform: translateY(-55%);
    pointer-events: none;
    z-index: 5;
    background: linear-gradient(
  180deg,
  rgba(244, 243, 233, 0) 0%,
  rgba(244, 243, 233, 0.1) 12%,
  rgba(244, 243, 233, 0.4) 28%,
  rgba(244, 243, 233, 0.8) 42%,
  rgba(0, 0, 0, 0.9) 53%,
  rgba(244, 243, 233, 0.8) 56%,
  rgba(244, 243, 233, 0.4) 69%,
  rgba(244, 243, 233, 0.1) 80%,
  rgba(244, 243, 233, 0) 100%
);
}

/* Totems Hanging Container */
.totems-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    pointer-events: none;
    z-index: 2;
}

.hanging-totem {
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.15));
    will-change: transform;
    height: clamp(315px, 40.5vh, 495px);
    object-fit: contain;
    object-position: top center;
    transform-origin: top center;
    pointer-events: none;
}

.hanging-totem:nth-child(1) {
    height: clamp(320px, 35vh, 480px);
}

.hanging-totem:nth-child(2) {
    height: clamp(400px, 45vh, 600px);
}

.hanging-totem:nth-child(3) {
    height: clamp(350px, 40vh, 520px);
}

.hanging-totem:nth-child(4) {
    height: clamp(450px, 50vh, 650px);
}

.hanging-totem:nth-child(5) {
    height: clamp(300px, 30vh, 450px);
}

.hanging-totem:nth-child(6) {
    height: clamp(380px, 40vh, 580px);
}

.hanging-totem:nth-child(7) {
    height: clamp(350px, 38vh, 540px);
}

@media (max-width: 991px) {
    .sub-hero-container {
        flex-direction: column;
        text-align: center;
    }

    #a-casa.sub-hero-container {
        gap: 6vw;
    }

    #a-casa .a-casa-eyebrow-row {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    #a-casa .a-casa-eyebrow-spacer {
        display: none;
    }

    #a-casa .a-casa-eyebrow {
        grid-column: 1;
        justify-content: center;
    }

    #a-casa .a-casa-split {
        flex-direction: column;
        align-items: center;
        row-gap: 6vw;
    }

    #a-casa .a-casa-visual,
    #a-casa .a-casa-main {
        width: 100%;
    }

    .experiencia-stack-section,
    .experiencia-stack-section--reverse {
        flex-direction: column !important;
        min-height: 0 !important;
    }

    .stack-text-left,
    .stack-polaroids-right {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        padding-right: 0 !important;
    }

    .stack-polaroids-right {
        height: 55vh !important;
        min-height: 280px;
    }

    #experiencia .experiencia-stack-section--room {
        margin-top: 0 !important;
        padding-block: 0;
        gap: 1rem;
    }

    #experiencia .experiencia-stack-section--room .stack-text-left {
        padding-left: clamp(1rem, 5vw, 1.5rem) !important;
        padding-right: clamp(1rem, 5vw, 1.5rem) !important;
    }

    #experiencia .experiencia-stack-section--room:not(.experiencia-stack-section--reverse) .stack-text-left {
        text-align: left !important;
    }

    #experiencia .experiencia-stack-section--room:not(.experiencia-stack-section--reverse) .stack-text-left .text-block-content {
        border-right: none !important;
        border-left: 2px solid var(--ds-terracotta) !important;
        padding-right: 0 !important;
        padding-left: 3vw !important;
    }

    #experiencia .experiencia-stack-section--room + .experiencia-stack-section--room {
        margin-top: 0 !important;
    }

    #experiencia .experiencia-stack-section--room .stack-polaroids-right {
        height: min(58vh, 520px) !important;
        min-height: 280px;
        overflow: visible !important;
    }

    #experiencia .experiencia-stack-section--room .polaroid-stack-item.ds-texture-card,
    #experiencia .experiencia-stack-section--room .polaroid-stack-item.ds-texture-card:nth-child(2),
    #experiencia .experiencia-stack-section--room .polaroid-stack-item.ds-texture-card:nth-child(3),
    #experiencia .experiencia-stack-section--room .polaroid-stack-item.ds-texture-card:nth-child(4) {
        width: min(68vw, 300px) !important;
    }

    #experiencia .experiencia-stack-section--room .stack-text-left h2.fade-up {
        font-size: clamp(1.5rem, 6.5vw, 2rem) !important;
    }

    #experiencia .experiencia-stack-section--room .text-block-content p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    #experiencia .experiencia-stack-section--room .stack-text-left .text-block {
        max-width: 100% !important;
    }

    #experiencia .experiencia-stack-section--intro .stack-text-left {
        padding: 0 clamp(1rem, 5vw, 1.5rem) !important;
        text-align: center;
    }

    #experiencia .experiencia-stack-section--intro .stack-polaroids-right > .polaroid-stack-item.ds-texture-card {
        width: min(52vw, 240px) !important;
    }

    .text-block {
        flex: 0 0 100%;
        margin-bottom: 6vh;
    }

    .text-block p {
        margin: 0 auto;
        font-size: 1rem;
        margin-bottom: 2vh;
    }

    .feature-card-copy-col {
        max-width: 70vw !important;
    }

    .feature-card-item:not(.contact-cta) {
        flex: 0 0 82vw !important;
        height: 65vh;
        padding: 8vh 5vw !important;
    }

    .feature-card-item.contact-cta {
        flex: 0 0 82vw !important;
    }

    .ds-texture-card {
        width: 40vw;
    }

    .heading-medium.patacas {
        font-size: 8.5vw;
    }

    .manifesto-banner {
        min-height: 90vh !important;
        justify-content: center !important;
        padding-top: 0 !important;
    }

    .manifesto-inner {
        padding-block: clamp(1.25rem, 5vh, 2.5rem) !important;
    }

    .manifesto-columns {
        flex-direction: column !important;
    }

    .manifesto-accent {
        width: 40px !important;
        height: 2px !important;
        min-height: 0 !important;
        align-self: center !important;
        background: linear-gradient(90deg, var(--ds-terracotta), transparent) !important;
    }

    .manifesto-title {
        text-align: center;
    }

    .manifesto-prose {
        max-width: none;
    }

    .manifesto-pillars {
        text-align: center;
    }

    .manifesto-stanza {
        font-size: clamp(1.05rem, 3.6vw, 1.2rem) !important;
    }

    .manifesto-stanza--lead {
        font-size: clamp(1.12rem, 4vw, 1.35rem) !important;
    }

    html.cp-v2 #manifesto .manifesto-prose > p.manifesto-stanza--lead {
        font-size: clamp(1.08rem, 3.75vw, 1.22rem) !important;
        line-height: 1.78 !important;
        max-width: min(96vw, 22em);
        margin-inline: auto !important;
        padding-inline: clamp(0.5rem, 2vw, 1.25rem) !important;
    }
}

/* Manifesto: min 90vh, pinned crawl. z-5 > sub-hero (4); #experiencia (6) overlaps bottom to kill flat seam */
.manifesto-banner {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    height: 100vh;
    color: var(--ds-creme);
    padding: 0;
    box-sizing: border-box;
    background-color: var(--ds-primary); /* Fills the 30px spacer above the waves */
}

.manifesto-stage {
    position: relative;
    isolation: isolate;
    flex: 1 1 auto;
    width: 100%;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.manifesto-divider-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 181px; /* 151 + 30px spacer */
    pointer-events: none;
    line-height: 0;
    z-index: 20;
}

/* Creme wave: CSS background + SVG mask so it renders in the same
   compositing context as #experiencia — eliminates tone mismatch. */
.manifesto-bottom-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: clamp(112px, 15vh, 172px);
    pointer-events: none;
    z-index: 50;
    background-color: var(--ds-creme);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 150' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,150 L1440,150 L1440,80 C1250,50 1100,140 950,90 C800,40 650,130 450,70 C250,10 100,120 0,80 L0,150 Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 150' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,150 L1440,150 L1440,80 C1250,50 1100,140 950,90 C800,40 650,130 450,70 C250,10 100,120 0,80 L0,150 Z' fill='white'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
}

.experiencia-top-wave {
    position: absolute;
    bottom: calc(100% - 2px);
    left: 0;
    width: 100%;
    height: clamp(112px, 15vh, 172px);
    pointer-events: none;
    z-index: 2;
    background-color: var(--ds-creme);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 150' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,150 L1440,150 L1440,80 C1250,50 1100,140 950,90 C800,40 650,130 450,70 C250,10 100,120 0,80 L0,150 Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 150' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M0,150 L1440,150 L1440,80 C1250,50 1100,140 950,90 C800,40 650,130 450,70 C250,10 100,120 0,80 L0,150 Z' fill='white'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
}

#experiencia .sand-texture-parallax {
    position: absolute;
    top: -180px;
    left: 0;
    width: 100%;
    height: calc(100% + 180px);
    background-image: url('../images/texturas/areia-branca.jpg');
    background-size: 800px auto;
    background-position: left top;
    opacity: 0.22;
    mix-blend-mode: multiply;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 180px, black 430px);
    mask-image: linear-gradient(to bottom, transparent 180px, black 430px);
    background-repeat: repeat;
    background-attachment: fixed;
    animation: experiencia-sand-drift-bg 32s linear infinite;
    will-change: background-position;
}

/* Horizontal sheen — wind left → right, matches sand drift */
#experiencia .sand-texture-parallax::before {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    width: 180%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0%,
        transparent 38%,
        rgba(255, 250, 240, 0.26) 50%,
        transparent 62%,
        transparent 100%
    );
    mix-blend-mode: soft-light;
    opacity: 0.62;
    animation: experiencia-sand-sheen 18s linear infinite;
}

/* One full tile width (800px) = seamless repeat; +X = grain drifts left→right (wind from the left) */
@keyframes experiencia-sand-drift-bg {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 800px 0;
    }
}

@keyframes experiencia-sand-sheen {
    from {
        transform: translate3d(-8%, 0, 0);
    }

    to {
        transform: translate3d(8%, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    #experiencia .sand-texture-parallax,
    #experiencia .sand-texture-parallax::before {
        animation: none;
        will-change: auto;
    }
}

.manifesto-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.manifesto-bg-video-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Clips scaled dunes video — transform on <video> is unreliable in some engines without a crop shell */
.manifesto-v1-zoom-shell {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.manifesto-v2-zoom-shell {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.manifesto-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.manifesto-bg-video-2 {
    opacity: 0;
    will-change: opacity, transform;
}

/* First clip (dunes): sunny desert read — no dark scrim; copy uses text-shadow */
#manifesto-video-1.manifesto-bg-video {
    filter: brightness(1.14) saturate(1.05);
}

/* No dark overlay (element kept for layout hooks) */
.manifesto-bg-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: transparent;
    opacity: 0;
    pointer-events: none;
}

/* Reveal layer: content that appears over the second video */
.manifesto-reveal {
    position: absolute;
    inset: 0;
    z-index: 45;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    pointer-events: none;
}

.manifesto-reveal-label {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--ds-sand-refined);
    opacity: 0.78;
    margin: 0 0 1.5rem;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.75), 0 4px 18px rgba(0, 0, 0, 0.5);
}

.manifesto-reveal-heading {
    font-family: var(--cp-font-heading);
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.15;
    color: var(--ds-creme);
    font-weight: 300;
    margin: 0;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.85), 0 2px 6px rgba(0, 0, 0, 0.65), 0 8px 28px rgba(0, 0, 0, 0.45);
}

.manifesto-reveal-heading em {
    font-style: italic;
    color: var(--ds-primary);
}

/* Manifesto crawl + reveals: same accent as <em> in this section (--ds-primary) */
.manifesto-highlight-blue {
    color: var(--ds-primary);
    font-style: inherit;
    font-weight: inherit;
}

.manifesto-reveal-heading .manifesto-highlight-blue,
.manifesto-reveal-heading em.manifesto-highlight-blue {
    color: var(--ds-primary);
}

.manifesto-reveal-heading em.manifesto-highlight-blue {
    font-style: italic;
}

.manifesto-inner {
    position: relative;
    z-index: 40;
    flex: 1 1 auto;
    width: 100%;
    height: 100vh;
    margin-inline: auto;
    padding: 0 8vw; /* Restoring safety padding */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Viewport-height mask: text only reads in ~24% vertical band (center); long transparent
       tails so lines near top/bottom edges (esp. bottom while crawling) are fully gone */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 34%,
        black 39%,
        black 61%,
        transparent 66%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 34%,
        black 39%,
        black 61%,
        transparent 66%,
        transparent 100%
    );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.manifesto-wrap {
    width: 100%;
}

.manifesto-crawl {
    width: 100%;
    will-change: transform;
}

.manifesto-header {
    margin-bottom: clamp(1.75rem, 3.5vh, 2.5rem);
}

.manifesto-title {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--ds-sand-refined);
    opacity: 0.78;
    font-weight: 500;
    margin: 0;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.78), 0 4px 16px rgba(0, 0, 0, 0.55);
}

.manifesto-columns {
    display: block;
    width: 100%;
    text-align: center;
}

.manifesto-accent {
    display: none;
}

.manifesto-prose {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 85vw;
    margin-inline: auto;
}

.manifesto-stanza {
    font-family: var(--cp-font-heading);
    font-size: clamp(1.8rem, 3.5vw, 3.2rem);
    line-height: 1.2;
    font-weight: 300;
    color: var(--ds-creme);
    letter-spacing: -0.01em;
    margin: 0 0 2em;
    text-align: center;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.88), 0 2px 6px rgba(0, 0, 0, 0.72), 0 10px 30px rgba(0, 0, 0, 0.5);
}

.manifesto-stanza--lead {
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    line-height: 1.1;
    margin-bottom: 1.5em;
}

/* Editorial manifesto crawl — index-v2 only (#manifesto): one paragraph, even type, airy line rhythm */
html.cp-v2 #manifesto .manifesto-prose > p.manifesto-stanza--lead {
    font-size: clamp(1.8rem, 3.9vw, 3.4rem);
    line-height: 1.92;
    max-width: min(22em, 88vw);
    margin-inline: auto;
    margin-bottom: 1.5em;
    padding-inline: clamp(0.5rem, 2vw, 1.25rem);
    color: var(--ds-creme);
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.88), 0 2px 6px rgba(0, 0, 0, 0.72), 0 10px 30px rgba(0, 0, 0, 0.5);
}

html.cp-v2 #manifesto .manifesto-prose > p.manifesto-stanza--lead .manifesto-line {
    display: block;
    margin-bottom: 0.8em;
}

html.cp-v2 #manifesto .manifesto-prose > p.manifesto-stanza--lead .manifesto-line:last-child {
    margin-bottom: 0;
}

.manifesto-stanza em {
    font-style: italic;
    color: var(--ds-primary);
}

.manifesto-em {
    color: var(--ds-sand);
    font-style: italic;
    font-weight: 400;
}

.manifesto-pillars {
    font-family: var(--font-sans);
    font-size: 10px; /* Refined footer size */
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: var(--ds-sand-refined);
    opacity: 0.6;
    margin: clamp(3rem, 6vh, 4rem) 0 0;
    line-height: 1.8;
    text-align: center;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.88), 0 1px 3px rgba(0, 0, 0, 0.7), 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* ── Main site footer (#footer.site-footer on index.html only — draft pages use different footers) ──
   Height: one viewport minus fixed .ds-navbar (56px). Content vertically centered; symmetric vertical padding. */
/* Hairline vs last section before footer: same fill; slight overlap kills subpixel gap */
#cultura-impacto + #footer.site-footer {
    border-top: none;
    margin-top: -1px;
    padding-top: 1px;
}

.site-footer {
    position: relative;
    overflow: hidden;
    background-color: var(--ds-primary);
    color: var(--ds-creme);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    box-sizing: border-box;
    height: calc(100vh - 56px);
    min-height: calc(100vh - 56px);
    max-height: calc(100vh - 56px);
    padding-inline: clamp(1.25rem, 5vw, 2.5rem);
    padding-block: 0;
    display: flex;
    flex-direction: column;
}

.site-footer__glow {
    pointer-events: none;
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: min(120vw, 1400px);
    height: 70%;
    background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(80, 132, 159, 0.22) 0%, transparent 65%);
    opacity: 0.9;
}

.site-footer__inner {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: clamp(2.5rem, 6vh, 4.25rem);
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-block: clamp(1.25rem, 4vh, 2.5rem);
    box-sizing: border-box;
}

.site-footer__cta {
    text-align: center;
    padding-bottom: clamp(1.25rem, 2.5vh, 2rem);
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.site-footer__eyebrow {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ds-sand-refined);
    opacity: 0.85;
    margin: 0 0 1.25rem;
}

.site-footer__cta-title {
    font-family: var(--cp-font-heading);
    font-weight: 300;
    font-size: clamp(1.75rem, 4.2vw, 2.65rem);
    line-height: 1.2;
    margin: 0 auto 1rem;
    max-width: 22ch;
    color: var(--ds-creme);
}

.site-footer__cta-lead {
    font-family: var(--font-sans);
    font-size: clamp(0.9rem, 1.35vw, 1.05rem);
    font-weight: 300;
    line-height: 1.65;
    color: rgba(244, 243, 233, 0.72);
    max-width: 36rem;
    margin: 0 auto clamp(1.15rem, 2.2vw, 1.45rem);
}

.site-footer__cta-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    justify-content: center;
    align-items: center;
}

.site-footer__btn {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    padding: 1rem 1.75rem;
    border-radius: 2px;
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}

.site-footer__btn:focus-visible {
    outline: 2px solid var(--ds-sand);
    outline-offset: 3px;
}

.site-footer__btn--primary {
    background: var(--ds-creme);
    color: var(--ds-primary);
    border: 1px solid var(--ds-creme);
}

.site-footer__btn--primary:hover {
    background: var(--ds-sand-refined);
    border-color: var(--ds-sand-refined);
    transform: translateY(-1px);
}

.site-footer__btn--ghost {
    background: transparent;
    color: var(--ds-creme);
    border: 1px solid rgba(244, 243, 233, 0.35);
}

.site-footer__btn--ghost:hover {
    border-color: rgba(244, 243, 233, 0.65);
    background: rgba(255, 255, 255, 0.06);
}

.site-footer__btn-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.site-footer__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.92;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 3vw, 2rem);
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 960px) {
    .site-footer__grid {
        grid-template-columns: minmax(220px, 1.25fr) 1fr 1fr;
        gap: 2rem 2.75rem;
        align-items: start;
    }
}

.site-footer__brand-logo-link {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
    border-radius: 2px;
}

.site-footer__brand-logo-link picture {
    display: block;
    line-height: 0;
}

.site-footer__brand-logo-link:focus-visible {
    outline: 2px solid var(--ds-sand);
    outline-offset: 6px;
}

/* assets/brand/casa-patacas-logo-dark-brown.* — trimmed wordmark, navy footer */
.site-footer__brand-logo {
    display: block;
    /* ~30% smaller than previous min(88vw, 420px) */
    width: min(62vw, 294px);
    max-width: 100%;
    height: auto;
    margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
    filter: drop-shadow(0 2px 24px rgba(0, 0, 0, 0.25));
    opacity: 0.98;
}

.site-footer__brand-text {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.75;
    color: rgba(244, 243, 233, 0.65);
    max-width: 28rem;
    margin: 0;
}

.site-footer__col-title {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ds-sand-refined);
    margin: 0 0 1.1rem;
}

.site-footer__contact-block {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(244, 243, 233, 0.7);
    margin: 0 0 1rem;
}

.site-footer__contact-block strong {
    display: block;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ds-sand-refined);
    margin-bottom: 0.35rem;
}

.site-footer__contact-links {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.site-footer__icon-link {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: rgba(244, 243, 233, 0.88);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    transition: color 0.25s ease, transform 0.2s ease;
}

.site-footer__icon-link:hover {
    color: var(--ds-creme);
}

.site-footer__icon-link:focus-visible {
    outline: 2px solid var(--ds-sand);
    outline-offset: 3px;
}

.site-footer__social-links {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.site-footer__social-links .site-footer__icon-link {
    color: rgba(244, 243, 233, 0.82);
}

.site-footer__base {
    margin-top: 0;
    flex-shrink: 0;
    padding-top: clamp(1.25rem, 2.5vh, 2rem);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
    text-align: center;
}

@media (min-width: 768px) {
    .site-footer__base {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        text-align: left;
    }
}

.site-footer__base-copy {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

@media (min-width: 768px) {
    .site-footer__base-copy {
        align-items: flex-end;
        text-align: right;
        max-width: min(100%, 48rem);
    }
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    justify-content: center;
}

@media (min-width: 768px) {
    .site-footer__legal {
        justify-content: flex-start;
    }
}

.site-footer__legal a {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(244, 243, 233, 0.45);
    text-decoration: none;
    transition: color 0.25s ease;
}

.site-footer__legal a:hover {
    color: rgba(244, 243, 233, 0.85);
}

.site-footer__copyright {
    font-family: var(--font-sans);
    font-size: clamp(8px, 2.35vw, 10px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(244, 243, 233, 0.35);
    margin: 0;
    line-height: 1.5;
    white-space: normal;
    max-width: 100%;
    overflow: visible;
}

.site-footer__credit {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: rgba(244, 243, 233, 0.4);
    margin: 0;
    font-style: italic;
    font-weight: 300;
}

.site-footer__credit strong {
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: inherit;
}

.site-footer__credit-link {
    color: rgba(244, 243, 233, 0.58);
    text-decoration: none;
    border-bottom: 1px solid rgba(244, 243, 233, 0.22);
    transition: color 0.25s ease, border-color 0.25s ease;
}

.site-footer__credit-link:hover {
    color: var(--ds-creme);
    border-bottom-color: rgba(244, 243, 233, 0.45);
}

.site-footer__credit-link:focus-visible {
    outline: 2px solid var(--ds-sand);
    outline-offset: 3px;
    border-radius: 1px;
}

/* ===================================================================
   CULTURA VIVA SECTION (merged from cultura-viva-section.css)
   =================================================================== */

/* Cultura Viva card section (was inline in index.html) */
/* ---- Container ---- */
.cv-wrap {
    position: relative;
    z-index: 5;
    max-width: 1300px;
    margin: 0 auto;
    padding-top: 15vh;
    padding-bottom: 20vh;
}

/* Main card */
.cv-card {
    display: flex;
    align-items: stretch;
    background: var(--ds-primary);
    border-radius: 20px;
    overflow: visible;
    box-shadow: 0 80px 160px rgba(0, 0, 0, 0.55), 0 20px 40px rgba(0, 0, 0, 0.3);
    position: relative;
    height: 82vh;
    min-height: 560px;
}

/* Atmospheric underbelly glow */
.cv-card::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 10%;
    right: 10%;
    height: 100px;
    background: radial-gradient(ellipse at center, rgba(19, 40, 62, 0.6), transparent 70%);
    filter: blur(20px);
    pointer-events: none;
    z-index: -1;
}

/* Ghost watermark */
.cv-watermark {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--cp-font-heading);
    font-size: 13vw;
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -0.05em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);
    pointer-events: none;
    overflow: hidden;
    user-select: none;
    z-index: 0;
}

/* ---- LEFT: Text ---- */
.cv-left {
    flex: 0 0 44%;
    padding: 5vw 3.5vw 4vw 5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.cv-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 3.5vh;
    opacity: 0;
    transform: translateY(16px);
}

.cv-heading {
    font-family: var(--cp-font-heading);
    font-size: clamp(1.8rem, 3vw, 3.4rem);
    color: var(--ds-creme);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin-bottom: 2.5vh;
    opacity: 0;
    transform: translateY(20px);
}

.cv-rule {
    width: 52px;
    height: 2px;
    background: var(--ds-terracotta);
    margin-bottom: 3.5vh;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
}

.cv-para {
    font-family: var(--font-sans);
    font-size: clamp(0.82rem, 1vw, 1rem);
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 2vh;
    opacity: 0;
    transform: translateY(14px);
}

.cv-para.accent {
    color: var(--ds-terracotta);
    font-style: italic;
    font-weight: 500;
}

.cv-stats {
    display: flex;
    gap: 2.5vw;
    margin-top: 4vh;
    padding-top: 3vh;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(14px);
}

.cv-stat-n {
    font-family: var(--cp-font-heading);
    font-size: 2.2rem;
    color: var(--ds-terracotta);
    line-height: 1;
    margin: 0;
}

.cv-stat-l {
    font-family: var(--font-sans);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin: 5px 0 0;
}

/* ---- RIGHT: Image Panel ---- */
.cv-right {
    flex: 0 0 56%;
    position: relative;
    border-radius: 0 20px 20px 0;
    overflow: hidden;
    height: 100%;
}

/* Image slides — absolute fill */
.cv-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 1;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.cv-slide.is-active {
    opacity: 1;
    z-index: 2;
}

.cv-slide picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
}

.cv-slide img,
.cv-slide picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.06);
    transition: transform 8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.cv-slide.is-active img,
.cv-slide.is-active picture img {
    transform: scale(1.0);
}

/* Gradient on image */
.cv-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
            rgba(19, 40, 62, 0.55) 0%,
            rgba(19, 40, 62, 0.15) 45%,
            transparent 70%);
    z-index: 3;
    pointer-events: none;
}

/* Caption (inside each slide) */
.cv-slide-caption {
    position: absolute;
    bottom: 80px;
    left: 24px;
    right: 24px;
    z-index: 4;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s;
}

.cv-slide.is-active .cv-slide-caption {
    opacity: 1;
    transform: translateY(0);
}

.cv-slide-caption p {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 4px;
}

.cv-slide-caption span {
    font-family: var(--cp-font-heading);
    font-size: clamp(1rem, 1.3vw, 1.4rem);
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
    letter-spacing: 0.01em;
}

/* Thumbnail strip + progress bar */
.cv-thumbs {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    height: 68px;
    background: rgba(19, 40, 62, 0.8);
    backdrop-filter: blur(12px);
}

.cv-thumb {
    flex: 1;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: flex 0.4s ease;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.cv-thumb:last-child {
    border-right: none;
}

.cv-thumb picture {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

.cv-thumb img,
.cv-thumb picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.45;
    transition: opacity 0.4s;
}

.cv-thumb.is-active img,
.cv-thumb.is-active picture img {
    opacity: 1;
}

.cv-thumb.is-active {
    flex: 1.6;
}

/* Progress bar on active thumb */
.cv-thumb-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--ds-terracotta);
    width: 0%;
    transition: width linear;
    z-index: 2;
}

/* A Casa — postcard (linen margin + ridges; static) */
.a-casa-postcard {
  width: 100%;
  max-width: min(92vw, 720px);
  margin: 0;
  padding: 0;
  border: none;
}

.a-casa-postcard__paper {
  position: relative;
  width: 100%;
  /* Thin margin — tinted stock, no bright white mat */
  padding: clamp(4px, 0.65vw, 6px);
  box-sizing: border-box;
  background: linear-gradient(168deg, #c4b8a9 0%, #b0a394 52%, #9c8f81 100%);
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.18),
    0 0 0 2px rgba(255, 252, 246, 0.06),
    0 20px 48px rgba(0, 0, 0, 0.32),
    0 6px 16px rgba(0, 0, 0, 0.14);
  transform: rotate(-2.25deg);
}

/* Linen + vertical/horizontal ridges only in the margin (masked ring) */
.a-casa-postcard__paper::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: clamp(4px, 0.65vw, 6px);
  box-sizing: border-box;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.075) 0 1px,
      transparent 1px 4px,
      rgba(255, 255, 255, 0.05) 4px 5px,
      transparent 5px 8px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.05) 0 1px,
      transparent 1px 3px,
      rgba(255, 255, 255, 0.04) 3px 4px,
      transparent 4px 7px
    ),
    linear-gradient(145deg, #e0d5c8 0%, #d0c4b5 45%, #c2b5a6 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.a-casa-postcard__media {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 1px;
  background: #1a1510;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 0 0 2px rgba(255, 250, 242, 0.04);
}

.a-casa-postcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
  filter: sepia(0.22) saturate(0.78) contrast(1.08) brightness(0.94);
}

.a-casa-postcard__vintage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.32;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(40, 32, 24, 0.04) 2px,
      rgba(40, 32, 24, 0.04) 3px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(30, 24, 18, 0.03) 2px,
      rgba(30, 24, 18, 0.03) 3px
    );
  box-shadow: inset 0 0 72px rgba(19, 40, 62, 0.2);
}

/* Postmark cluster: wavy cancellation lines + stamp (classic postcard) */
.a-casa-postcard__postmark {
  position: absolute;
  top: clamp(6px, 1.4vw, 14px);
  right: clamp(6px, 1.4vw, 14px);
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.15rem;
  transform: rotate(11deg);
  transform-origin: 100% 0;
  pointer-events: none;
}

/* Wavy “machine cancellation” lines — sit just left of the stamp */
.a-casa-postcard__cancellation {
  flex-shrink: 0;
  width: clamp(72px, 16vw, 108px);
  height: auto;
  color: var(--ds-creme);
  opacity: 0.92;
  mix-blend-mode: soft-light;
}

.a-casa-postcard__cancellation-strokes {
  opacity: 0.92;
}

/* Postage stamp: perforated edge + pressed ink (wordmark stays horizontal) */
.a-casa-postcard__stamp {
  width: clamp(104px, 22vw, 152px);
  padding: 7px 11px 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: radial-gradient(120% 100% at 30% 20%, #f2ebe1, #d8cdc0 55%, #c9bdb0);
  border-radius: 2px;
  border: 2px dotted rgba(42, 32, 24, 0.55);
  outline: 1px solid rgba(28, 22, 18, 0.22);
  outline-offset: 1px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 3px 14px rgba(0, 0, 0, 0.28);
}

.a-casa-postcard__stamp-ring {
  position: absolute;
  inset: 4px;
  border-radius: 1px;
  border: 1px solid rgba(55, 42, 32, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.a-casa-postcard__stamp img {
  position: relative;
  z-index: 1;
  width: 86%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: brightness(0.18) sepia(0.65) contrast(1.35);
  opacity: 0.88;
}

.a-casa-postcard__circle-mark {
  position: absolute;
  left: clamp(-30px, -4vw, -20px);
  top: clamp(-5px, -1vh, 5px);
  z-index: 3;
  opacity: 0.95;
  mix-blend-mode: multiply;
  color: var(--ds-primary);
  width: 76px;
  height: 76px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Site boot loader — hero + manifesto videos buffered before reveal
   ═══════════════════════════════════════════════════════════════════════ */

html.site-loader-active {
  overflow: hidden;
}

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-primary);
  transition:
    opacity 0.48s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-loader--exiting {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* [hidden] must win — otherwise display:flex keeps a full-screen layer that blocks scroll */
.site-loader[hidden] {
  display: none !important;
}

.site-loader__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.site-loader__logo {
  width: min(42vw, 220px);
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  animation: site-loader-logo-pulse 1.65s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .site-loader__logo {
    animation: none;
  }
}

@keyframes site-loader-logo-pulse {
  0%,
  100% {
    opacity: 0.86;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.045);
  }
}