/*
 * 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;

  /*
   * Editorial rhythm (cp-v2 homepage): navy bands vs Lençóis “chapter” sand blocks.
   * Prefer these over per-section vw/vh one-offs where possible.
   */
  --cp-editorial-inline: clamp(1.5rem, 8vw, 5.5rem);
  --cp-editorial-navy-pad-block: clamp(5.5rem, 14vh, 10rem);
  --cp-editorial-chapter-pad-block: 20vh;

  /* cp-v2 story sections: shared rail + top-wave compensation */
  --cp-content-max: 1180px;
  --cp-wave-pad-offset: clamp(5rem, 13vh, 9.5rem);
}

/* --- DS LIBRARY COMPONENTS --- (non–layout-editorial shells only; editorial homepage uses fixed bar below) */
body:not(.layout-editorial) .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);
}

body:not(.layout-editorial) .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;
}

body:not(.layout-editorial) .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;
}

/* Shared editorial display headline — matches experiência “Tudo incluso…” scale; tune typography here only. */
.cp-display-headline {
    font-family: var(--cp-font-heading) !important;
    font-size: clamp(2rem, 5.5vw, 4.45rem) !important;
    line-height: 1.05 !important;
}

@media (max-width: 991px) {
    .cp-display-headline {
        font-size: clamp(2.45rem, 10.25vw, 3.55rem) !important;
        line-height: 1.06 !important;
    }
}

@media (max-width: 720px) {
    .cp-display-headline {
        font-size: clamp(2.25rem, 9.5vw, 3.25rem) !important;
        line-height: 1.06 !important;
    }
}

@media (max-width: 480px) {
    .cp-display-headline {
        font-size: clamp(2.05rem, 8.75vw, 2.98rem) !important;
        line-height: 1.06 !important;
    }
}

#cultura-impacto .cp-display-headline {
    margin-bottom: 4vh;
}

/* Shared editorial eyebrow — uppercase sans; slightly larger than video-manifesto mobile kicker (~9px). */
.cp-editorial-eyebrow {
    font-family: var(--font-sans) !important;
    font-size: clamp(10px, 0.42vw + 9.1px, 11px) !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

@media (max-width: 720px) {
    .cp-editorial-eyebrow {
        font-size: clamp(10px, 2.2vw + 7.9px, 11px) !important;
        letter-spacing: 0.24em !important;
    }
}

@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;
  }
}

/* ===================================================================
   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 {
    margin: 0 0 4vh;
    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-creme);
    padding: 2px;
    border-radius: 4px;
    border: 1px solid rgba(19, 40, 62, 0.08);
    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);
}

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

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 {
    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 {
    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;
}

#experiencia .experiencia-stack-section--intro .xp-stack-lead strong {
    font-weight: 600;
}

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

/* Polaroid mats in #experiencia — white mat @ 95% opacity (shows sand beneath).
   Same mat on navy paisagem satellite card (.cp-v2-unforgettable-nights__media). */
#experiencia .polaroid-stack-item.ds-texture-card,
html.cp-v2 .cp-v2-unforgettable-nights__media .polaroid-stack-item.ds-texture-card {
    padding: clamp(2px, 0.32vw, 3px);
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 2px;
    box-shadow:
        0 0 0 1px rgba(19, 40, 62, 0.06),
        0 20px 48px rgba(19, 40, 62, 0.14),
        0 6px 16px rgba(19, 40, 62, 0.08);
    box-sizing: border-box;
}

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

/* Navy paisagem card: landscape satellite (avoid global .ds-texture-card 4/5 aspect on this image). */
html.cp-v2 .cp-v2-unforgettable-nights__media {
    margin: 0;
    min-width: 0;
    position: relative;
}
html.cp-v2 .cp-v2-unforgettable-nights__media .polaroid-stack-item.ds-texture-card picture {
    display: block;
    line-height: 0;
}

/* Intro stack only: GSAP animates y/opacity from these bases */






/* Decorative stack only — not clickable; override .ds-texture-card pointer */
#experiencia .experiencia-stack-section--intro .stack-polaroids-right > .polaroid-stack-item.ds-texture-card,
#experiencia .experiencia-stack-section--intro .stack-polaroids-right > .polaroid-stack-item.ds-texture-card .card-img {
    cursor: default;
}

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

/* Blend cream ↔ aerial chapter — avoids subpixel hairline after last #experiencia block */
#experiencia + #shared-satellite-wrapper {
    margin-top: -2px;
}

.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;
    /* Lighter than solid creme so sticky aerial stays legible behind feature strip + host CTA */
    background: linear-gradient(to bottom, rgba(244, 243, 233, 0.38) 0%, rgba(244, 243, 233, 0.2) 40%, rgba(244, 243, 233, 0.04) 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;
    /* Soft center read — edges stay clear so the aerial reads strong during “falar com anfitrião” */
    background: radial-gradient(
        ellipse 65% 58% at 50% 50%,
        rgba(244, 243, 233, 0.52) 0%,
        rgba(244, 243, 233, 0.14) 48%,
        transparent 74%
    );
}

#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,
#cultura-viva-section .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;
}

/* Quartos → faixa horizontal: chamada antes dos vídeo-cards (mobile + desktop) */
#experiencia .experiencia-horizontal-bridge {
    position: relative;
    z-index: 6;
    width: 100%;
    max-width: min(84rem, 100%);
    margin-left: 0;
    margin-right: auto;
    /* Top: air after last suite / dots; bottom: thin handoff into next chapter (smaller than top) */
    --xp-bridge-rhythm: clamp(4rem, 14vh, 8.5rem);
    --xp-bridge-rhythm-bottom: clamp(1rem, 3vh, 2.5rem);
    padding-top: var(--xp-bridge-rhythm);
    padding-bottom: var(--xp-bridge-rhythm-bottom);
    box-sizing: border-box;
    text-align: left;
    pointer-events: none;
}

/* Bridge is last in-flow child — section’s default bottom padding (e.g. 10vh) stacks under the bridge and breaks symmetry */
#experiencia:has(> .experiencia-horizontal-bridge:last-child) {
    padding-bottom: 0;
}

#experiencia .experiencia-horizontal-bridge > * {
    pointer-events: auto;
}

#experiencia .experiencia-horizontal-bridge__headline {
    margin: 0;
    color: var(--ds-primary);
    font-size: clamp(1.5rem, 2.8vw, 2.4rem) !important;
    line-height: 1.2 !important;
    max-width: 100%;
    font-weight: 400;
    text-align: left;
}

#experiencia .experiencia-horizontal-bridge__headline:not(:last-child) {
    margin-bottom: 2.5rem;
}

.experiencia-bridge-cta-wrap {
    margin-top: clamp(1.5rem, 4vh, 2.5rem);
    text-align: left;
}

.experiencia-bridge-cta {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: clamp(10px, 0.42vw + 9.1px, 12px);
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ds-primary);
    opacity: 0.65;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.experiencia-bridge-cta:hover {
    opacity: 1;
    transform: translateX(4px);
}

@media (max-width: 991px) {
    #experiencia .experiencia-horizontal-bridge {
        padding-left: var(--cp-xp-mobile-copy-rail);
        padding-right: var(--cp-xp-mobile-copy-rail);
        /* ~½ desktop bridge rhythm — tall vh was reading huge on phones */
        --xp-bridge-rhythm: clamp(2.25rem, 9vh, 4.75rem);
        --xp-bridge-rhythm-bottom: 0;
        padding-top: var(--xp-bridge-rhythm);
        padding-bottom: var(--xp-bridge-rhythm-bottom);
    }
    #experiencia .experiencia-horizontal-bridge__headline {
        font-size: clamp(1.25rem, 5.5vw, 1.6rem) !important;
        line-height: 1.38 !important;
        max-width: 100%;
        text-align: left;
    }
    .experiencia-bridge-cta-wrap {
        text-align: left;
    }
}

@media (max-width: 768px) {
    #experiencia .experiencia-horizontal-bridge {
        /* Remove edge-to-edge override to maintain standard section margins */
    }
}

@media (max-width: 600px) {
    #experiencia .experiencia-stack-section--detalhes-stack .stack-detalhes-heading {
        font-size: clamp(1.15rem, 5.25vw, 1.35rem) !important;
    }

    #experiencia .experiencia-horizontal-bridge__headline {
        font-size: clamp(1.15rem, 5.25vw, 1.35rem) !important;
        line-height: 1.4 !important;
    }
    #experiencia .experiencia-horizontal-bridge__headline:not(:last-child) {
        margin-bottom: 1.75rem;
    }
    .experiencia-bridge-cta-wrap {
        margin-top: 1.75rem;
    }
}

@media (min-width: 992px) {
    #experiencia .experiencia-horizontal-bridge {
        max-width: min(84rem, min(96vw, var(--cp-content-max, 1180px)));
        --xp-bridge-rhythm: clamp(5rem, 11vw, 11.5rem);
        --xp-bridge-rhythm-bottom: clamp(0.35rem, 1vw, 1.1rem);
        padding-top: var(--xp-bridge-rhythm);
        padding-bottom: var(--xp-bridge-rhythm-bottom);
    }
}

#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;
}

/* Host CTA: light creme halo — navy type stays readable with a thinner atmosphere wash */
#experiencia-cards-horizontal .contact-cta-heading,
#experiencia-cards-horizontal .contact-cta-lead {
    text-shadow:
        0 0 22px rgba(244, 243, 233, 0.9),
        0 0 10px rgba(244, 243, 233, 0.85),
        0 1px 2px rgba(244, 243, 233, 0.95);
}

.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 90vw;
    padding: 0 4vw;
    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: clip;
}

.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);
  }


.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%;
    /* Sits above the always-present fallback image (z-index 0); covers it once
       the clip paints frames. If the video stalls / is evicted / errors, the
       image behind shows through instead of a black gap. */
    position: relative;
    z-index: 1;
}

/* 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%;
    /* Always-present base layer behind the hero video (z-index 0). The video
       (z-index 1) covers it when playing; on stall/error/fallback it shows. */
    z-index: 0;
    display: block;
}

.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 {
    /* Still fallback: visible until the video is actually playing. The native
       <video> poster is unreliable once load() starts on a slow link (Chrome
       drops it before a frame is ready), so we layer the image on top and fade
       it out on the 'playing' event (is-video-playing on the slot). */
    display: block;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.feature-parallax-slot.is-video-playing .feature-parallax-media-s {
    opacity: 0;
    pointer-events: 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;
    /* Visible fallback above the video (below the scrim) until the clip actually
       plays — the native poster is unreliable once load() starts on a slow link,
       and this clip is the heaviest on the site. Faded out on 'playing'. */
    opacity: 1;
    pointer-events: none;
    display: block;
    z-index: 1;
    transition: opacity 0.5s ease;
}

.dl-takes-media.is-video-playing .dl-takes-video-still {
    opacity: 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;
}

/*
  Mobile hero wordmark: park it in the sky band (above dunes), modest size — same stack as desktop (absolute logo + centered copy).
  Nav chrome on editorial is unchanged from desktop (transparent → .glass → .scrolled).
*/
@media (max-width: 839px) {
    .hero-logo {
        top: max(4.25rem, calc(env(safe-area-inset-top, 0px) + 3rem));
        /* Pin to the same horizontal band as #hero .hero-cta-row (editorial gutters +
           safe-area), then flex-centre the mark — avoids %/translate drift vs headline stack. */
        left: calc(var(--cp-editorial-inline) + env(safe-area-inset-left, 0px));
        right: calc(var(--cp-editorial-inline) + env(safe-area-inset-right, 0px));
        width: auto;
        transform: none;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .hero-logo img {
        width: min(68vw, 300px);
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0;
    }
}

.heading-medium.patacas {
    position: relative;
    z-index: 5;
    font-family: var(--cp-font-heading);
    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;
    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);
}

/* Hero CTA glass: match editorial side gutters on small viewports (not edge-to-edge) */
@media (max-width: 839px) {
    #hero .hero-cta-row {
        box-sizing: border-box;
        width: calc(
            100% - 2 * var(--cp-editorial-inline) - env(safe-area-inset-left, 0px) -
                env(safe-area-inset-right, 0px)
        );
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

.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: var(--cp-editorial-navy-pad-block) var(--cp-editorial-inline);
    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(var(--cp-editorial-navy-pad-block) + 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;
}

/* Manifesto (vídeo integral): coluna única, sem canvas flutuante */
.dl-takes-beat--manifesto .dl-takes-row-primary {
    grid-template-columns: 1fr;
}

.dl-takes-row-primary-left--manifesto {
    justify-content: center;
    position: relative;
}

/* Scroll-hint river — visible before parade starts, fades out as text reveals */
.manifesto-scroll-hint {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
}

.msh-svg {
    width: clamp(140px, 22vw, 280px);
    height: 48vh;
    display: block;
}

/* All paths start undrawn — dasharray covers max path length in 80×300 viewBox */
.manifesto-scroll-hint path {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
}

/*
 * Perpetual stagger via negative animation-delay:
 * delay = -(duration − offset) preserves the phase gap on every loop.
 * duration = 4s · offsets: t0=0s, t1=0.5s, t2a=1.0s, t2b=1.3s, t3=1.6s
 */
.manifesto-scroll-hint .msh-t0  { animation: river-stream     4s linear infinite  0s;    }
.manifesto-scroll-hint .msh-t1  { animation: river-stream     4s linear infinite -3.5s;  }
.manifesto-scroll-hint .msh-t2a { animation: river-stream-sub 4s linear infinite -3.0s;  }
.manifesto-scroll-hint .msh-t2b { animation: river-stream-sub 4s linear infinite -2.7s;  }
.manifesto-scroll-hint .msh-t3  { animation: river-stream-sub 4s linear infinite -2.4s;  }

/* Main paths: draw in from 0→55%, hold, then dissolve back to undrawn by 88% */
@keyframes river-stream {
    0%   { stroke-dashoffset: 500; opacity: 0;   }
    5%   { stroke-dashoffset: 490; opacity: 1;   }
    55%  { stroke-dashoffset: 0;   opacity: 1;   }
    72%  { stroke-dashoffset: 0;   opacity: 0.4; }
    88%  { stroke-dashoffset: 500; opacity: 0;   }
    100% { stroke-dashoffset: 500; opacity: 0;   }
}

/* Sub-branches: same rhythm but softer peak opacity */
@keyframes river-stream-sub {
    0%   { stroke-dashoffset: 500; opacity: 0;    }
    5%   { stroke-dashoffset: 490; opacity: 0.65; }
    55%  { stroke-dashoffset: 0;   opacity: 0.65; }
    72%  { stroke-dashoffset: 0;   opacity: 0.2;  }
    88%  { stroke-dashoffset: 500; opacity: 0;    }
    100% { stroke-dashoffset: 500; opacity: 0;    }
}

.dl-takes-inner.dl-takes-inner--manifesto {
    margin-left: auto;
    margin-right: auto;
    /* Wider canvas so each .dl-manifesto-line stays closer to one screen line */
    max-width: min(90rem, calc(100vw - clamp(2.5rem, 8vw, 5.5rem)));
    padding-left: clamp(1rem, 3.5vw, 2rem);
    padding-right: clamp(1rem, 3.5vw, 2rem);
    hyphens: none;
    -webkit-hyphens: none;
    text-align: left;
}

.dl-manifesto-blocks {
    margin: 0;
}

.dl-manifesto-kicker {
    margin: 0 0 clamp(1rem, 2.5vh, 1.75rem);
}

/* Stage spans full manifest column (no narrow 40ch cap) */
.dl-manifesto-stage {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: clamp(13.5rem, 34vh, 24rem);
    box-sizing: border-box;
}

@media (min-width: 721px) {
    .dl-manifesto-stage {
        overflow: hidden;
    }

    .dl-manifesto-stanza {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        pointer-events: none;
    }
}

/* Same voice as “Uma casa inteira…” heading — all lines share this */
.dl-manifesto-line {
    font-family: var(--cp-font-heading);
    font-weight: 300;
    font-size: clamp(1.75rem, 2.95vw + 1.05rem, 3.55rem);
    line-height: 1.14;
    color: var(--ds-creme);
    letter-spacing: -0.028em;
    hyphens: none;
    -webkit-hyphens: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 8px 28px rgba(0, 0, 0, 0.35);
    margin: 0 0 clamp(0.35rem, 1.1vh, 0.55rem);
    max-width: 100%;
}

.dl-manifesto-line:last-child {
    margin-bottom: 0;
}

@media (min-width: 721px) {
    html.cp-v2 .dl-takes-beat--manifesto .dl-manifesto-line {
        opacity: 0;
    }
}

@media (max-width: 720px) {
    /* Manifesto: same layered stage as desktop — GSAP scrubs stanzas on scroll */
    .dl-manifesto-stage {
        overflow: hidden;
        min-height: clamp(13rem, 44vh, 28rem);
        max-width: none;
    }

    .dl-manifesto-stanza {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        pointer-events: none;
    }

    .dl-manifesto-line {
        font-size: clamp(1.5rem, 6vw + 0.35rem, 2.15rem) !important;
    }

    /* Initial hide before GSAP scrub; visibility stays visible so layout/sticky math stays stable */
    #casa-inteira-grupo.dl-takes-beat--manifesto .dl-manifesto-line {
        opacity: 0;
        visibility: visible;
    }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
    .dl-manifesto-stage {
        min-height: 0 !important;
        max-width: none;
        overflow: visible !important;
    }

    .dl-manifesto-stanza {
        position: relative !important;
        margin-bottom: clamp(1.35rem, 4.5vh, 2.25rem);
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }

    .dl-manifesto-stanza:last-child {
        margin-bottom: 0;
    }

    .dl-manifesto-line {
        opacity: 1 !important;
        transform: none !important;
    }

    html.cp-v2 #casa-inteira-grupo.dl-takes-beat--manifesto .dl-manifesto-line,
    html.cp-v2 #casa-inteira-grupo.dl-takes-beat--manifesto .dl-manifesto-stanza {
        opacity: 1 !important;
        transform: none !important;
    }

    #casa-inteira-grupo.dl-takes-beat--manifesto .dl-manifesto-line {
        opacity: 1 !important;
    }
}

.dl-manifesto-kicker.dl-takes-eyebrow {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* 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;
  }


.dl-takes-eyebrow {
    color: var(--ds-sand-refined);
    margin: 0 0 clamp(0.85rem, 2vh, 1.35rem);
    opacity: 0.93;
}

.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;
    }

    #casa-inteira-grupo.dl-takes-beat--manifesto .dl-manifesto-line,
    #casa-inteira-grupo.dl-takes-beat--manifesto .dl-manifesto-stanza {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }

    #casa-inteira-grupo.dl-takes-beat--manifesto .dl-manifesto-stage {
        min-height: 0 !important;
        overflow: visible !important;
    }

    #casa-inteira-grupo.dl-takes-beat--manifesto .dl-manifesto-stanza {
        position: relative !important;
        margin-bottom: clamp(1.25rem, 4vh, 2rem);
    }

    #casa-inteira-grupo.dl-takes-beat--manifesto .dl-manifesto-stanza:last-child {
        margin-bottom: 0 !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-weight: 400;
    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;
}

.continue-explore-prompt {
    margin-top: 6vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    color: rgba(19, 40, 62, 0.45);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    animation: continueExploreBounce 2s infinite ease-in-out;
}

/* Manifesto dark-bg variant: cream text instead of navy; hidden until GSAP reveals */
.continue-explore-prompt--manifesto {
    color: rgba(244, 243, 233, 0.55);
    margin-top: 5vh;
    visibility: hidden;
    opacity: 0;
    pointer-events: auto;
    cursor: pointer;
}
.continue-explore-prompt--manifesto:hover {
    color: rgba(244, 243, 233, 0.9);
}

.continue-explore-prompt svg {
    opacity: 0.8;
}

@keyframes continueExploreBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

.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 {
    min-height: 0;
    margin-top: -2vh;
    padding-block: 3vh;
    overflow: visible;
    gap: clamp(0.25rem, 1.25vw, 1rem);
    pointer-events: none;
}

#experiencia .experiencia-stack-section--room > *,
#experiencia .experiencia-stack-section--intro > * {
    pointer-events: auto;
}

#experiencia .experiencia-stack-section + .experiencia-stack-section {
    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 .stack-polaroids-right {
    height: min(78vh, 780px) !important;
    min-height: 340px;
    position: relative;
    z-index: 2;
    overflow: visible;
    pointer-events: auto;
    cursor: pointer;
}

/* Large touch viewports (>991): polaroid swipe (see scripts.js) needs a hit target; cards use pointer-events: none */
@media (pointer: coarse) and (hover: none) and (min-width: 992px) {
    #experiencia .experiencia-stack-section .stack-polaroids-right {
        pointer-events: auto;
        touch-action: pan-y;
    }
}

#experiencia .experiencia-stack-section .stack-polaroids-right > * {
  }


#experiencia .experiencia-stack-section .stack-polaroids-right:has(.polaroid-stack-item.ds-texture-card:hover),
#experiencia .experiencia-stack-section .stack-polaroids-right:has(.polaroid-stack-item.ds-texture-card:focus-within) {
    z-index: 30;
}

/* 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 .stack-polaroids-right {
    /* animation: experiencia-stack-invite-float 3.8s ease-in-out infinite; */
    will-change: transform;
}

#experiencia .experiencia-stack-section .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 .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 .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 .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 .stack-polaroids-right {
        animation: none !important;
        will-change: auto !important;
    }

    #experiencia .experiencia-stack-section .stack-polaroids-right > .polaroid-stack-item.ds-texture-card .card-img {
        animation: none !important;
        filter: none !important;
    }
}

/* Leave: card settles back gently */
/* Room stacks — carousel card positions */
#experiencia .experiencia-stack-section .stack-polaroids-right > .polaroid-stack-item.ds-texture-card {
    pointer-events: none !important;
    cursor: default !important;
    transform-origin: center center;
    transition:
        transform 0.65s cubic-bezier(0.2, 1.4, 0.4, 1),
        box-shadow 0.65s ease,
        opacity 0.65s ease,
        z-index 0.65s step-start;
    position: absolute;
}

#experiencia .experiencia-stack-section .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-active {
    transform: translate3d(0, 0, 0) rotate(0deg) 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;
    opacity: 1 !important;
  }


#experiencia .experiencia-stack-section .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-prev {
    transform: translate3d(-95px, 15px, 0) rotate(-6deg) scale(1.4) !important;
    z-index: 40 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
    opacity: 1 !important;
    pointer-events: none;
}

#experiencia .experiencia-stack-section .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-next {
    transform: translate3d(100px, 5px, 0) rotate(8deg) scale(1.4) !important;
    z-index: 40 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
    opacity: 1 !important;
    pointer-events: none;
}

#experiencia .experiencia-stack-section .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-hidden {
    transform: translate3d(-20px, -30px, 0) rotate(2deg) scale(1.3) !important;
    z-index: 30 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    opacity: 0 !important;
    pointer-events: none;
}

/* Dots navigation */
.polaroid-carousel-dots {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: clamp(14px, 3.5vw, 22px);
    justify-content: center;
    flex-wrap: nowrap;
    z-index: 9999;
    pointer-events: auto !important;
}

.polaroid-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(19, 40, 62, 0.3);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
    pointer-events: auto !important;
}

.polaroid-dot:hover,
.polaroid-dot:focus-visible {
    background: rgba(19, 40, 62, 0.6);
    transform: scale(1.15);
    outline: none;
}

.polaroid-dot.is-active {
    background: var(--ds-terracotta);
    transform: scale(1.15);
}

/* Fullscreen gallery opened from polaroid stack tap (mobile / coarse pointer — scripts.js) */
.polaroid-stack-lightbox {
    position: fixed;
    inset: 0;
    z-index: 300000;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: rgba(19, 40, 62, 0.96);
    color: var(--ds-creme);
}

.polaroid-stack-lightbox__header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-top: max(0.35rem, env(safe-area-inset-top, 0px));
    padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
    padding-bottom: 0.35rem;
    padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
}

.polaroid-stack-lightbox__back {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ds-creme);
    background: transparent;
    border: none;
    padding: 0.65rem 0.35rem;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.polaroid-stack-lightbox__back:focus-visible {
    outline: 2px solid var(--ds-terracotta);
    outline-offset: 3px;
}

.polaroid-stack-lightbox__track {
    flex: 1;
    min-height: 0;
    /* One column per viewport width — reliable horizontal paging + snap */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    align-items: stretch;
    align-content: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* Custom pointer drag (scripts.js) drives scrollLeft — avoid browser stealing the gesture */
    touch-action: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

.polaroid-stack-lightbox__slide {
    min-width: 0;
    width: 100%;
    max-width: none;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    margin: 0;
    box-sizing: border-box;
    padding: 0.35rem max(0.65rem, env(safe-area-inset-left, 0px))
        max(0.85rem, env(safe-area-inset-bottom, 0px)) max(0.65rem, env(safe-area-inset-right, 0px));
    display: flex;
    align-items: center;
    justify-content: center;
}

.polaroid-stack-lightbox__slide picture {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
}

.polaroid-stack-lightbox__img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: min(88vh, calc(100vh - 120px));
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}

/* Lightbox nav arrows — desktop only */
.polaroid-stack-lightbox__nav {
    display: none;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(19, 40, 62, 0.72);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    z-index: 10001;
    transition: background 0.2s ease;
}
.polaroid-stack-lightbox__nav:hover {
    background: rgba(19, 40, 62, 0.95);
}
.polaroid-stack-lightbox__nav--prev { left: 1.5rem; }
.polaroid-stack-lightbox__nav--next { right: 1.5rem; }

.polaroid-stack-lightbox__nav {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* No horizontal scroll on desktop — arrows handle navigation */
@media (hover: hover) and (pointer: fine) {
    .polaroid-stack-lightbox__track {
        overflow-x: hidden;
    }
}

/* Hover and Active replaced by carousel dots */



#experiencia .experiencia-stack-section .polaroid-stack-item.ds-texture-card:focus-visible {
    outline: 2px solid var(--ds-terracotta);
    outline-offset: 6px;
    border-radius: 6px;
}

#experiencia .experiencia-stack-section .polaroid-stack-item.ds-texture-card:focus:not(:focus-visible) {
    outline: none;
}

#experiencia .experiencia-stack-section .polaroid-stack-item.ds-texture-card {
    width: min(20vw, 260px) !important;
    max-width: 90%;
    opacity: 1 !important;
}

#experiencia .experiencia-stack-section .polaroid-stack-item.ds-texture-card:nth-child(2) {
    width: min(20.5vw, 268px) !important;
}

#experiencia .experiencia-stack-section .polaroid-stack-item.ds-texture-card:nth-child(3) {
    width: min(21vw, 276px) !important;
}

#experiencia .experiencia-stack-section .polaroid-stack-item.ds-texture-card:nth-child(4) {
    width: min(21.5vw, 284px) !important;
}

#experiencia .experiencia-stack-section--room .stack-text-left h3.fade-up {
    font-family: var(--cp-font-heading);
    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 h3.fade-up em {
    color: var(--ds-sand);
}

#experiencia .experiencia-stack-section--room .text-block-content p {
    font-size: clamp(1rem, 1.3vw, 1.15rem) !important;
    line-height: 1.62 !important;
    color: var(--ds-primary) !important;
    opacity: 0.95;
    font-weight: 300;
    max-width: 62ch;
}

#experiencia .experiencia-stack-section--room .text-block-content p strong {
    font-weight: 600;
}


.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-creme);
    padding: 2px;
    border-radius: 4px;
    border: 1px solid rgba(19, 40, 62, 0.08);
    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;
}

/* cp-v2 paisagem (#paisagem-esculpida-centro): reset editorial absolute card shell after rule above */
html.cp-v2 .cp-v2-unforgettable-nights__media .polaroid-stack-item.ds-texture-card {
    position: relative;
    width: 100%;
    max-width: 100%;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    margin: 0;
    transform: none;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    padding: clamp(2px, 0.32vw, 3px);
    aspect-ratio: auto;
    min-height: min(44vh, 400px);
    max-height: min(52vh, 480px);
    object-fit: cover;
    border-radius: 1px;
    display: block;
    width: 100%;
}

.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);
}

/* Turismo regenerativo — symmetric band padding (was 25vh inline; aligns with Noites / sub-hero) */
#cultura-impacto {
    padding: var(--cp-editorial-navy-pad-block) var(--cp-editorial-inline);
    box-sizing: border-box;
    /* Above #cultura-viva-section (31) so .proposito-divider-top (translateY −100%) is not masked by Saber fazer */
    position: relative;
    z-index: 32 !important;
}

/* Inner rail shrinks correctly with section padding + avoids horizontal bleed from grids */
#cultura-impacto > .sub-hero-container {
    width: 100%;
    max-width: min(1400px, 100%);
    min-width: 0;
    box-sizing: border-box;
}

/* Stats strip — responsive grid (desktop 3-col; narrow viewports stack). minmax(0,1fr) avoids overflow. */
#cultura-impacto .impacto-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 3vw, 2rem);
    width: 100%;
    max-width: 100%;
    padding-top: 0;
    box-sizing: border-box;
}

#cultura-impacto .impacto-stat-card {
    min-width: 0;
    box-sizing: border-box;
    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, 5vh, 3.25rem) clamp(1rem, 2.25vw, 1.75rem);
    border-radius: 4px;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

#cultura-impacto .impacto-stat-value {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 6vw, 4rem);
    display: block;
    color: var(--ds-terracotta);
    line-height: 1;
    margin-bottom: clamp(0.65rem, 2vh, 1.25rem);
}

#cultura-impacto .impacto-stat-label {
    font-family: var(--font-sans);
    font-size: clamp(0.62rem, 2.15vw, 0.6875rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.85;
    font-weight: 500;
    margin: 0;
    line-height: 1.35;
    hyphens: auto;
    overflow-wrap: anywhere;
}

@media (max-width: 768px) {
    #cultura-impacto .impacto-stats-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    #cultura-impacto .impacto-stat-card {
        padding: clamp(1.15rem, 4vw, 1.65rem) clamp(1rem, 4vw, 1.35rem);
    }

    #cultura-impacto .impacto-stat-value {
        font-size: clamp(2rem, 14vw, 2.85rem);
        margin-bottom: 0.45rem;
    }

    #cultura-impacto .impacto-stat-label {
        font-size: 0.58rem;
        letter-spacing: 0.14em;
        line-height: 1.4;
    }
}

/* 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;
}

/* Turismo após Cultura Viva: mask was for handoff com satélite/creme longínquo — topo transparente some na areia clara */
#cultura-viva-section + #cultura-impacto .proposito-divider-top {
    -webkit-mask-image: none;
    mask-image: none;
}

/* 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;
}

/* Cultura Viva / Saber fazer — mesmo ondulado `.experiencia-top-wave` que #experiencia */
#cultura-viva-section.cultura-viva-section {
    position: relative;
    z-index: 31;
    padding-inline: var(--cp-editorial-inline);
    padding-top: clamp(1.75rem, 5vh, 3.25rem);
    padding-bottom: var(--cp-editorial-navy-pad-block);
    background-color: var(--ds-creme);
    color: var(--ds-primary);
    overflow: visible;
    box-sizing: border-box;
}
.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: min(48vh, 400px) !important;
        min-height: 240px;
        width: 100% !important;
        align-self: stretch !important;
    }

    #experiencia .experiencia-stack-section {
        margin-top: 0 !important;
        padding-block: clamp(0.5rem, 2vw, 1rem);
        /* Title → polaroids (+ dots) → paragraph */
        gap: clamp(2rem, 7.5vw, 3.35rem);
    }

    #experiencia {
        --cp-xp-mobile-copy-rail: calc(2px + 4vw);
        /* Narrower paragraph measure vs polaroid stack (“inner” guides) */
        --cp-xp-copy-inner-gutter: clamp(0.7rem, 3.5vw, 1.45rem);
        /* Outer red lines: extra inset beyond copy rail so fan-out cards stay inside the stage */
        --cp-xp-stack-outer-inset: clamp(0.85rem, 4.25vw, 1.45rem);
        /* Inner red lines: front card width (~ terracotta copy column) */
        --cp-xp-stack-active-w: min(88vw, 360px);
        /* Tighter above first headline; keep breathing room toward following stacks */
        padding-top: clamp(0.65rem, 2.5vh, 1.65rem);
        padding-bottom: clamp(1.25rem, 4vh, 2.75rem);
        padding-inline: 0;
    }

    /* Intro (≤991): column order = headline → polaroids → lead; desktop reset @992px */
    #experiencia .experiencia-stack-section--intro .stack-text-left {
        display: contents;
    }

    #experiencia .experiencia-stack-section--intro .stack-text-left .text-block {
        display: contents;
    }

    #experiencia .experiencia-stack-section--intro > .stack-text-left h2.fade-up {
        order: 1;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: var(--cp-xp-mobile-copy-rail);
        padding-right: var(--cp-xp-mobile-copy-rail);
        text-align: left !important;
        /* Extra title ↔ polaroids air (reads tight vs dots→paragraph because cards sit mid-stage); gap handles polaroids+dots ↔ paragraph only */
        margin-bottom: clamp(2.35rem, 8.25vw, 3.85rem);
    }

    /* Intro-only: polaroids+dots ↔ paragraph (dots→lead rhythm — keep when tuning headline offset above) */
    #experiencia .experiencia-stack-section--intro {
        gap: clamp(2.35rem, 8.25vw, 3.85rem);
        /* Less cushion above headline than generic stack rows */
        padding-top: clamp(0.15rem, 1vw, 0.45rem);
        padding-bottom: clamp(0.5rem, 2vw, 1rem);
    }

    /* Suites: same stack ↔ copy gap as intro (no extra margin-top on copy — was doubling dots→paragraph) */
    #experiencia .experiencia-stack-section--room {
        gap: clamp(2.35rem, 8.25vw, 3.85rem);
    }

    #experiencia .experiencia-stack-section--intro > .stack-text-left .text-block-content {
        order: 3;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: var(--cp-xp-mobile-copy-rail);
        padding-right: var(--cp-xp-mobile-copy-rail);
        margin-top: 0;
        text-align: left !important;
    }

    #experiencia .experiencia-stack-section--intro .stack-polaroids-right {
        order: 2;
    }

    /* Rooms (≤991): same column rhythm as intro — title → polaroids → copy */
    #experiencia .experiencia-stack-section--room .stack-text-left {
        display: contents;
        padding: 0 !important;
    }

    #experiencia .experiencia-stack-section--room .stack-text-left .text-block {
        display: contents;
        max-width: none !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        /* Beat desktop Estrelar (.room:not(.reverse) .text-block { text-align: right }) */
        text-align: left !important;
    }

    #experiencia .experiencia-stack-section--room:not(.experiencia-stack-section--reverse) .stack-text-left .text-block {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #experiencia .experiencia-stack-section--room > .stack-text-left h3.fade-up {
        order: 1;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: var(--cp-xp-mobile-copy-rail);
        padding-right: var(--cp-xp-mobile-copy-rail);
        text-align: left !important;
        /* Match pre–h3–refactor mobile suite titles (were h2) */
        font-size: clamp(2.05rem, 9vw, 3.05rem) !important;
        line-height: 1.06 !important;
        /* Match intro h2 → polaroids optical offset (mid-stage cards + shared stack gap) */
        margin-bottom: clamp(2.35rem, 8.25vw, 3.85rem);
    }

    #experiencia .experiencia-stack-section--room > .stack-polaroids-right {
        order: 2;
    }

    /* Detalhes stack mobile: fotos em cima, texto abaixo */
    #experiencia .experiencia-stack-section--detalhes-stack > .stack-polaroids-right {
        order: 1 !important;
    }

    #experiencia .experiencia-stack-section--detalhes-stack .stack-detalhes-heading {
        order: 2 !important;
        font-size: clamp(1.25rem, 5.5vw, 1.6rem) !important;
        padding-left: var(--cp-xp-mobile-copy-rail) !important;
        padding-right: var(--cp-xp-mobile-copy-rail) !important;
        width: 100%;
        box-sizing: border-box;
    }

    #experiencia .experiencia-stack-section--room > .stack-text-left .text-block-content {
        order: 3;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-right: var(--cp-xp-mobile-copy-rail);
        margin-top: 0;
    }

    #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: set only by .xp-text-rail-terracotta mobile rule (matches reverse suites) */
        text-align: left !important;
        /* Padding: .xp-text-rail-terracotta */
    }

    /* Outer rail lines up with headline rail; copy inset so measure sits inside polaroid width */
    #experiencia .experiencia-stack-section--intro > .stack-text-left .text-block-content.xp-text-rail-terracotta,
    #experiencia .experiencia-stack-section--room > .stack-text-left .text-block-content.xp-text-rail-terracotta {
        margin-left: var(--cp-xp-mobile-copy-rail);
        width: calc(100% - var(--cp-xp-mobile-copy-rail));
        box-sizing: border-box;
        padding-left: calc(4vw + var(--cp-xp-copy-inner-gutter)) !important;
        padding-right: calc(var(--cp-xp-copy-inner-gutter) + var(--cp-xp-mobile-copy-rail)) !important;
        border-left: 2px solid var(--ds-terracotta) !important;
        border-right: none !important;
    }

    /* Intro (≤991): centered lead matches headline rails — no extra “inner column” squeeze */
    #experiencia .experiencia-stack-section--intro > .stack-text-left .text-block-content.xp-text-rail-terracotta {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        border-left: none !important;
        padding-left: var(--cp-xp-mobile-copy-rail) !important;
        padding-right: var(--cp-xp-mobile-copy-rail) !important;
        text-align: left !important;
    }

    #experiencia .experiencia-stack-section--intro .xp-stack-lead {
        text-align: left !important;
    }

    #experiencia .experiencia-stack-section + .experiencia-stack-section {
        margin-top: clamp(1.25rem, 5vw, 2.25rem) !important;
    }

    #experiencia .experiencia-stack-section--room + .experiencia-stack-section--detalhes-stack {
        margin-top: 0 !important;
        padding-top: clamp(4rem, 16vw, 7rem) !important;
        border-top: none !important;
    }

    /* Detalhes heading ends with text → bridge starts with text: collapse gap so they read as one block */
    #experiencia .experiencia-stack-section--detalhes-stack + .experiencia-horizontal-bridge {
        --xp-bridge-rhythm: 0px;
        padding-top: 0 !important;
    }

    /* Mobile stack stage: symmetric copy rail on both sides */
    #experiencia .experiencia-stack-section .stack-polaroids-right {
        position: relative;
        z-index: 1;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
        padding-inline: var(--cp-xp-mobile-copy-rail);
        padding-bottom: clamp(5.75rem, 15vw, 7.25rem);
        height: min(44vh, 380px) !important;
        min-height: 240px;
        max-height: min(46vh, 400px);
        overflow: visible !important;
        /* Receive swipe/drag on the stage; polaroids stay pointer-transparent so gestures hit this layer */
        pointer-events: auto;
        touch-action: pan-y;
    }

    /* Intro + suites: band under dots (pairs with mats→dots gap — shared kit) */
    #experiencia .experiencia-stack-section--intro .stack-polaroids-right,
    #experiencia .experiencia-stack-section--room .stack-polaroids-right {
        padding-bottom: clamp(5rem, 17vw, 7.35rem);
    }

    #experiencia .experiencia-stack-section .polaroid-stack-item.ds-texture-card,
    #experiencia .experiencia-stack-section .polaroid-stack-item.ds-texture-card:nth-child(2),
    #experiencia .experiencia-stack-section .polaroid-stack-item.ds-texture-card:nth-child(3),
    #experiencia .experiencia-stack-section .polaroid-stack-item.ds-texture-card:nth-child(4) {
        width: min(64vw, 248px) !important;
    }

    /* Cards are position:absolute (no insets) → flex static-position centering is
       unreliable on iOS Safari, leaving them offset to one side. Pin them centered
       with auto inline margins; transforms (is-prev/next/hidden) fan out from here. */
    #experiencia .experiencia-stack-section .stack-polaroids-right > .polaroid-stack-item.ds-texture-card {
        left: 0;
        right: 0;
        margin-inline: auto;
    }

    /* Desktop carousel uses scale(~1.6) + wide translates — too large for narrow columns */
    #experiencia .experiencia-stack-section .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-active {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1.08) !important;
    }

    #experiencia .experiencia-stack-section .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-prev {
        transform: translate3d(-36px, 8px, 0) rotate(-5deg) scale(1.02) !important;
    }

    #experiencia .experiencia-stack-section .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-next {
        transform: translate3d(36px, 4px, 0) rotate(6deg) scale(1.02) !important;
    }

    #experiencia .experiencia-stack-section .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-hidden {
        transform: translate3d(-10px, -14px, 0) rotate(2deg) scale(0.92) !important;
    }

    /* Typographic body + lift copy above polaroid paints (flattened columns) */
    #experiencia .experiencia-stack-section--intro > .stack-text-left h2.fade-up,
    #experiencia .experiencia-stack-section--intro > .stack-text-left .text-block-content,
    #experiencia .experiencia-stack-section--room > .stack-text-left h3.fade-up,
    #experiencia .experiencia-stack-section--room > .stack-text-left .text-block-content {
        position: relative;
        z-index: 2;
    }

    #experiencia .experiencia-stack-section .text-block-content p {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #experiencia .experiencia-stack-section--room .text-block-content p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    #experiencia .experiencia-stack-section--intro .stack-text-left {
        padding: 0 !important;
        text-align: center !important;
    }

    /* Intro + room: taller carousel stage (rail + dot band from shared mobile stack rule) */
    #experiencia .experiencia-stack-section--intro > .stack-polaroids-right,
    #experiencia .experiencia-stack-section--room > .stack-polaroids-right {
        height: min(46vh, 400px) !important;
        max-height: min(48vh, 420px);
        min-height: 260px;
    }

    /* Dots: shared placement + mats→dots air (matches intro “tudo incluso” kit on suites) */
    #experiencia .experiencia-stack-section--intro .stack-polaroids-right .polaroid-carousel-dots,
    #experiencia .experiencia-stack-section--room .stack-polaroids-right .polaroid-carousel-dots {
        bottom: clamp(0.35rem, 1.25vw, 0.65rem);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        gap: clamp(18px, 5.5vw, 30px);
        box-sizing: border-box;
        padding-top: clamp(5.35rem, 22vw, 9rem);
    }

    #experiencia .experiencia-stack-section--intro .stack-polaroids-right > .polaroid-stack-item.ds-texture-card,
    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card {
        width: var(--cp-xp-stack-active-w) !important;
        max-width: calc(100% - 2px);
    }

    /* Carousel fan-out — mobile */
    #experiencia .experiencia-stack-section--intro .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-active,
    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-active {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1.02) !important;
    }

    #experiencia .experiencia-stack-section--intro .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-prev,
    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-prev {
        transform: translate3d(calc(-1 * min(6.25vw, 26px)), 10px, 0) rotate(-4deg) scale(0.9) !important;
    }

    #experiencia .experiencia-stack-section--intro .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-next,
    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-next {
        transform: translate3d(min(6.25vw, 26px), 6px, 0) rotate(5deg) scale(0.9) !important;
    }

    #experiencia .experiencia-stack-section--intro .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-hidden,
    #experiencia .experiencia-stack-section--room .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-hidden {
        transform: translate3d(-12px, -16px, 0) rotate(2deg) scale(0.92) !important;
    }

    .text-block {
        flex: 0 0 100%;
        margin-bottom: 6vh;
    }

    .text-block p {
        margin: 0 auto;
        font-size: 1rem;
        margin-bottom: 2vh;
    }

    /* Horizontal strip: centered with a little air above/below; cards a bit taller than pre-86vh but not edge-to-edge */
    #experiencia-cards-horizontal {
        align-items: center;
        padding-top: calc(56px + env(safe-area-inset-top, 0px));
        padding-bottom: clamp(0.75rem, 2.5vh, 2rem);
    }

    .feature-card-copy-col {
        max-width: 70vw !important;
    }

    .feature-card-item:not(.contact-cta) {
        flex: 0 0 82vw !important;
        height: min(78vh, 680px);
        height: min(78dvh, 680px);
        min-height: 400px;
        padding: 5.25vh 5vw !important;
    }

    .feature-card-item.contact-cta {
        flex: 0 0 82vw !important;
        /* Same vertical footprint as video cards — center copy + CTAs in the frame */
        height: min(78vh, 680px);
        height: min(78dvh, 680px);
        min-height: 400px;
        justify-content: center;
        align-items: center;
        padding: clamp(1rem, 3vh, 1.75rem) clamp(1rem, 5vw, 1.5rem);
        box-sizing: border-box;
    }

    #experiencia-cards-horizontal .contact-cta-lead {
        margin-bottom: clamp(1.25rem, 3.5vh, 2rem);
    }

    #experiencia-cards-horizontal .contact-cta-actions a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 14px 22px;
        border-radius: 8px;
        font-weight: 600;
        letter-spacing: 0.12em;
        transition: filter 0.2s ease, transform 0.2s ease;
    }

    #experiencia-cards-horizontal .contact-cta-actions a[data-wa-link] {
        background-color: var(--ds-terracotta);
        border-color: var(--ds-terracotta);
        color: var(--ds-creme);
    }

    #experiencia-cards-horizontal .contact-cta-actions a[data-email-link] {
        background-color: var(--ds-primary);
        border-color: var(--ds-primary);
        color: var(--ds-creme);
    }

    #experiencia-cards-horizontal .contact-cta-actions a[data-wa-link]:active,
    #experiencia-cards-horizontal .contact-cta-actions a[data-email-link]:active {
        filter: brightness(0.92);
        transform: scale(0.99);
    }

    #experiencia-cards-horizontal .contact-cta-actions a:focus-visible {
        outline: 2px solid var(--ds-creme);
        outline-offset: 3px;
    }

    .ds-texture-card {
        width: 40vw;
    }

    .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(2rem, 8vw, 2.8rem) !important;
    }

    .manifesto-stanza--lead {
        font-size: clamp(2.4rem, 9.5vw, 3.4rem) !important;
    }

    html.cp-v2 #manifesto .manifesto-prose > p.manifesto-stanza--lead,
    html.cp-v2 #experiencia-intro .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,
#cultura-viva-section .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;
}

/* Saber fazer / Cultura Viva — sand texture scrolls com a secção (não viewport-fixed como #experiencia) */
#cultura-viva-section .sand-texture-parallax {
    top: 0;
    height: 100%;
    -webkit-mask-image: none;
    mask-image: none;
    background-attachment: scroll;
}

/* Horizontal sheen — wind left → right, matches sand drift */
#experiencia .sand-texture-parallax::before,
#cultura-viva-section .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,
    #cultura-viva-section .sand-texture-parallax,
    #cultura-viva-section .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;
    top: 56px;
    left: 0;
    width: 100%;
    height: calc(100% - 56px);
}

/* 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);
    /* Hero lines (“Bem vindo…”, “Cada momento…”) — much larger than crawl prose */
    font-size: clamp(2.4rem, 6.5vw, 5rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: var(--ds-creme);
    font-weight: 400;
    margin: 0;
    max-width: min(94vw, 42rem);
    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;
    font-weight: 200;
    /* Same accent as <em> in Experiência “Tudo incluso / Nada supérfluo” (.text-block h2 em — --ds-sand) 
       UPDATE: User requested same color as "Tudo incluso" (the primary text), which is --ds-primary. */
    color: var(--ds-primary);
}

/* Manifesto crawl: prose highlights (--ds-primary) — distinct from full-screen reveal <em>s above */
.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: reading band in upper third (sky / horizon) so crawl reads above the dunes */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 8%,
        black 14%,
        black 45%,
        transparent 55%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 8%,
        black 14%,
        black 45%,
        transparent 55%,
        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,
html.cp-v2 #experiencia-intro .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,
html.cp-v2 #experiencia-intro .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,
html.cp-v2 #experiencia-intro .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) ── */
/* Hairline vs last section before footer: slight overlap kills subpixel gap */
#cv-shop-section + #footer.site-footer {
    border-top: none;
    margin-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;
    padding-inline: clamp(1.25rem, 5vw, 2.5rem);
    padding-block: clamp(2.5rem, 5vh, 4rem);
    display: flex;
    flex-direction: column;
    --cp-footer-line-height: 1.3;
}

/* Desktop: generous vertical rhythm without 100vh min-height (zoom changes layout viewport → footer jump). */
@media (min-width: 960px) {
    .site-footer {
        padding-block: clamp(3rem, 8vh, 5.5rem);
    }

    .site-footer__inner {
        justify-content: flex-start;
        padding-block: clamp(2rem, 5vh, 3.5rem);
    }
}

.site-footer__glow {
    pointer-events: none;
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: min(100%, 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;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    /* Gap between major sections — unified so all internal spacing matches */
    --cp-footer-spacing: clamp(1.5rem, 3vh, 2rem);
    --cp-footer-stack-gap: clamp(1.5rem, 3vh, 2rem);
    --cp-footer-col-gap: clamp(1.35rem, 2.5vw, 2rem);
    /* Top/bottom breathing room — larger than the internal gaps */
    --cp-footer-edge-pad: clamp(2.5rem, 5vh, 4rem);
    
    gap: var(--cp-footer-spacing);
    width: 100%;
    box-sizing: border-box;
    min-height: 0;
    text-align: center;
}

.site-footer__cta {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cp-footer-stack-gap);
    padding-bottom: var(--cp-footer-spacing);
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.site-footer__eyebrow {
    color: var(--ds-sand-refined);
    opacity: 0.85;
    margin: 0;
}

.site-footer__cta-title {
    font-family: var(--cp-font-heading);
    font-weight: 300;
    margin: 0 auto;
    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: var(--cp-footer-line-height);
    color: rgba(244, 243, 233, 0.72);
    max-width: 36rem;
    margin: 0 auto;
}

.site-footer__cta-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    justify-content: center;
    align-items: center;
    margin-inline: auto;
}

.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: var(--cp-footer-col-gap);
    flex-shrink: 0;
    justify-items: stretch;
}

/* Tablet: logo row, contact | region, social full-width */
@media (min-width: 560px) and (max-width: 959px) {
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .site-footer__brand {
        grid-column: 1 / -1;
    }

    .site-footer__social {
        grid-column: 1 / -1;
    }
}

@media (min-width: 960px) {
    .site-footer__grid {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
        gap: var(--cp-footer-col-gap) clamp(1.5rem, 2vw, 2rem);
        align-items: start;
    }

    .site-footer__region {
        min-width: 0;
    }

    .site-footer__region-place {
        white-space: nowrap;
    }

    .site-footer__icon-link {
        white-space: nowrap;
    }
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.site-footer__contact,
.site-footer__region,
.site-footer__social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
}

.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-inline: 0;
    margin-bottom: var(--cp-footer-col-gap, clamp(1.35rem, 2.5vw, 2rem));
    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: var(--cp-footer-line-height);
    color: rgba(244, 243, 233, 0.65);
    max-width: 28rem;
    margin: 0;
    text-align: left;
    padding-bottom: 0;
    margin-bottom: 0;
}

.site-footer__region-place {
    display: inline-block;
    max-width: 100%;
}

.site-footer__col-title {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 600;
    line-height: var(--cp-footer-line-height);
    color: var(--ds-sand-refined);
    margin: 0 0 var(--cp-footer-stack-gap, clamp(0.75rem, 1.6vw, 1rem));
}

.site-footer__col-body {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 300;
    line-height: var(--cp-footer-line-height);
    color: rgba(244, 243, 233, 0.7);
    margin: 0;
}

.site-footer__contact-block {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 300;
    line-height: var(--cp-footer-line-height);
    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;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0;
    width: 100%;
}

.site-footer__icon-link {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    line-height: var(--cp-footer-line-height);
    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;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0;
    width: 100%;
}

.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(0.5rem, 1.25vh, 0.85rem);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    flex-direction: column;
    gap: var(--cp-footer-stack-gap, clamp(0.75rem, 1.6vw, 1rem));
    align-items: center;
    text-align: center;
}

@media (min-width: 768px) {
    .site-footer__base {
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
}

.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: center;
        text-align: center;
        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: center;
    }
}

.site-footer__legal a {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: var(--cp-footer-line-height);
    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: var(--cp-footer-line-height);
    white-space: normal;
    max-width: 100%;
    overflow: visible;
    text-align: center;
}

.site-footer__credit {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.08em;
    line-height: var(--cp-footer-line-height);
    color: rgba(244, 243, 233, 0.4);
    margin: 0;
    font-style: italic;
    font-weight: 300;
    text-align: center;
}

.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: 5vh;
    padding-bottom: 20vh;
}

/* Main card */
.cv-card {
    display: flex;
    align-items: stretch;
    background: var(--ds-primary);
    border-radius: 20px;
    overflow: visible;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.14), 0 6px 18px rgba(0, 0, 0, 0.08);
    position: relative;
    min-height: 560px;
    min-height: max(82vh, 560px);
}

/* Card lift on creme chapter ground */
.cv-card::after {
    content: '';
    position: absolute;
    bottom: -28px;
    left: 12%;
    right: 12%;
    height: 72px;
    background: radial-gradient(ellipse at center, rgba(19, 40, 62, 0.18), transparent 72%);
    filter: blur(18px);
    pointer-events: none;
    z-index: -1;
}

/* Ghost watermark */
.cv-watermark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    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;
    border-radius: 20px;
    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;
}

/* 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);
}

/* Slide 03/05 (artesanato / Fibras do cerrado): bottom-align crop (hands band) */
.cv-slide[data-cv="2"] img,
.cv-slide[data-cv="2"] picture img,
.cv-thumb[data-cv-t="2"] img,
.cv-thumb[data-cv-t="2"] picture img {
    object-position: center bottom;
}

/* Gradient on image */
.cv-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(to right, 
            rgba(19, 40, 62, 1) 0%, 
            rgba(19, 40, 62, 0.8) 15%, 
            rgba(19, 40, 62, 0.45) 40%, 
            rgba(19, 40, 62, 0.15) 70%, 
            transparent 100%),
        linear-gradient(to top, rgba(19, 40, 62, 0.6) 0%, transparent 40%);
    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;
}

/* Saber fazer — no extra wrap padding (section band carries vertical rhythm) */
#cultura-viva-section .cv-wrap {
    padding-top: 0;
    padding-bottom: 0;
}

/* Loja virtual — em breve (forest green band before navy footer) */
#cv-shop-section.cv-shop-section {
    position: relative;
    z-index: 31;
    padding: var(--cp-editorial-navy-pad-block) var(--cp-editorial-inline);
    background-color: var(--ds-forest);
    color: var(--ds-creme);
    box-sizing: border-box;
}

#cv-shop-section .cv-shop-section__inner {
    max-width: 1300px;
    margin: 0 auto;
}

#cv-shop-section .cv-shop-teaser {
    margin: 0;
    text-align: left;
}

#cv-shop-section .cv-shop-teaser__eyebrow-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 1.25rem;
}

#cv-shop-section .cv-shop-teaser__rule {
    width: 40px;
    height: 1px;
    background: var(--ds-terracotta);
    flex-shrink: 0;
}

#cv-shop-section .cv-shop-teaser__eyebrow {
    margin: 0;
    color: var(--ds-terracotta);
    opacity: 1;
}

#cv-shop-section .cv-shop-teaser__title {
    font-family: var(--cp-font-heading);
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ds-creme);
    margin: 0 0 1rem;
    max-width: 28rem;
}

#cv-shop-section .cv-shop-teaser__lead {
    font-family: var(--font-sans);
    font-size: clamp(0.92rem, 1.05vw, 1.05rem);
    line-height: 1.75;
    font-weight: 300;
    color: rgba(244, 243, 233, 0.78);
    margin: 0;
    max-width: 42rem;
}

/* 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);
  }
}

/* Undo intro-only mobile flattening (display:contents + flex order) on desktop */
@media (min-width: 992px) {
    #experiencia .experiencia-stack-section--intro .stack-text-left,
    #experiencia .experiencia-stack-section--room .stack-text-left {
        display: block;
    }

    #experiencia .experiencia-stack-section--intro .stack-text-left .text-block,
    #experiencia .experiencia-stack-section--room .stack-text-left .text-block {
        display: block;
    }

    #experiencia .experiencia-stack-section--intro > .stack-text-left h2.fade-up,
    #experiencia .experiencia-stack-section--intro > .stack-text-left .text-block-content,
    #experiencia .experiencia-stack-section--intro > .stack-polaroids-right,
    #experiencia .experiencia-stack-section--room > .stack-text-left h3.fade-up,
    #experiencia .experiencia-stack-section--room > .stack-text-left .text-block-content,
    #experiencia .experiencia-stack-section--room > .stack-polaroids-right {
        order: unset;
        width: unset;
        max-width: unset;
    }

    #experiencia .experiencia-stack-section--intro > .stack-text-left .text-block-content,
    #experiencia .experiencia-stack-section--room > .stack-text-left .text-block-content {
        padding-right: unset;
        margin-top: unset;
    }

    #experiencia .experiencia-stack-section--intro > .stack-text-left h2.fade-up,
    #experiencia .experiencia-stack-section--room > .stack-text-left h3.fade-up {
        padding-left: unset;
        padding-right: unset;
    }

    #experiencia .experiencia-stack-section--room .stack-text-left .text-block {
        max-width: min(36rem, 100%);
    }
}

/* ==========================================================================
   MOBILE OPTIMIZATION — visible sections only (hero → footer)
   Primary breakpoint: 720px (matches existing patterns)
   Secondary: 480px (small phones)
   ========================================================================== */

@media (max-width: 720px) {

    /* ── HERO ────────────────────────────────────────────────────────── */

    .home-hero-wrap {
        margin-bottom: 20vh;
    }

    /* Extra height for scroll/parallax — anchor bottom so visible 100vh shows lower crop + video object-position bottom */
    .hero-image-div {
        height: 120vh;
        top: auto;
        bottom: 0;
    }

    #hero .hero-content {
        padding: max(env(safe-area-inset-top, 0px), 4vh) clamp(0.65rem, 3.25vw, 1rem) clamp(2rem, 8vh, 5rem);
        justify-content: flex-end;
    }

    #hero .hero-copy-cta-wrap {
        gap: clamp(2vh, 3.5vh, 4.5vh);
        transform: translateY(0);
    }

    .heading-medium.patacas {
        max-width: 90vw;
        letter-spacing: -0.015em;
    }

    #hero .hero-cta-row {
        flex-direction: column;
        gap: 0.65rem;
        width: 100% !important;
        max-width: none;
        padding: 0.65rem 0.75rem;
        border-radius: 8px;
        box-sizing: border-box;
    }

    #hero .hero-cta-primary,
    #hero .hero-cta-secondary {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 14px 16px;
        font-size: 0.7rem;
        letter-spacing: 0.12em;
    }

    #hero .hero-cta-primary {
        font-weight: 600;
    }

    /* ── SUB-HERO / A CASA ──────────────────────────────────────────── */

    .sub-hero-container {
        flex-direction: column;
        text-align: left;
    }

    #sub-hero {
        padding-top: clamp(3rem, 8vh, 5rem);
        padding-inline: clamp(1.25rem, 5vw, 2rem);
        padding-bottom: 0;
    }

    .sub-hero-divider-svg-wrap {
        height: 100px;
    }

    #a-casa.sub-hero-container {
        gap: clamp(1.5rem, 4vw, 2rem);
    }

    #a-casa .a-casa-eyebrow-row {
        grid-template-columns: 1fr;
        justify-items: start;
        margin-bottom: clamp(1rem, 3vh, 1.5rem);
    }

    #a-casa .a-casa-eyebrow-spacer {
        display: none;
    }

    #a-casa .a-casa-eyebrow {
        grid-column: 1;
        justify-content: flex-start;
    }

    #a-casa .a-casa-split {
        flex-direction: column;
        align-items: flex-start;
        row-gap: clamp(1.5rem, 4vw, 2rem);
    }

    #a-casa .a-casa-visual {
        width: 100%;
        max-width: none;
        justify-content: flex-start;
    }

    .a-casa-postcard {
        max-width: 82vw;
    }

    .a-casa-postcard__paper {
        transform: rotate(-1.2deg);
    }

    /* Postmark: scale down on small screens so it doesn't dominate */
    .a-casa-postcard__postmark {
        transform: rotate(11deg) scale(0.75);
        top: 4px;
        right: 4px;
    }

    #a-casa .a-casa-main h2.fade-up {
        margin-bottom: 1vh;
        text-align: left;
    }

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

    #a-casa .a-casa-main .text-block-content p {
        font-size: 0.95rem;
        line-height: 1.65;
        margin-bottom: 1.5vh;
        text-align: left;
    }

    #a-casa .a-casa-main .text-block-content p:last-child {
        margin-bottom: 0;
    }

    #a-casa .a-casa-cta-wrap {
        margin-top: 1.5vh;
        margin-bottom: 0;
    }

    #a-casa .a-casa-cta {
        font-size: 10px;
        letter-spacing: 0.12em;
        display: inline-block;
    }

    /* ── MANIFESTO (video crawl) ───────────────────────────────────── */

    .manifesto-banner {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .manifesto-stage {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .manifesto-divider-top {
        height: 80px;
        top: -1px;
    }

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

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

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

    .manifesto-inner {
        padding: 0 5vw;
        /* Expand reading band vertically for mobile */
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            transparent 5%,
            black 12%,
            black 55%,
            transparent 65%,
            transparent 100%
        );
        mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            transparent 5%,
            black 12%,
            black 55%,
            transparent 65%,
            transparent 100%
        );
    }

    .manifesto-reveal-heading {
        font-size: clamp(2.1rem, 9vw, 3.75rem);
        line-height: 1.08;
        letter-spacing: -0.035em;
        font-weight: 400;
        padding: 0 clamp(1rem, 5vw, 2rem);
        max-width: min(94vw, 36rem);
    }

    .manifesto-prose {
        max-width: 100%;
    }

    .manifesto-stanza {
        font-size: clamp(1.3rem, 4.8vw, 1.8rem) !important;
        line-height: 1.35;
        margin-bottom: 1.5em;
    }

    .manifesto-stanza--lead {
        font-size: clamp(1.5rem, 5.5vw, 2rem) !important;
        line-height: 1.25;
    }

    html.cp-v2 #manifesto .manifesto-prose > p.manifesto-stanza--lead,
    html.cp-v2 #experiencia-intro .manifesto-prose > p.manifesto-stanza--lead {
        font-size: clamp(1.65rem, 6vw, 2.5rem) !important;
        line-height: 1.7 !important;
        max-width: 100%;
        padding-inline: 0 !important;
    }

    html.cp-v2 #manifesto .manifesto-prose > p.manifesto-stanza--lead .manifesto-line,
    html.cp-v2 #experiencia-intro .manifesto-prose > p.manifesto-stanza--lead .manifesto-line {
        margin-bottom: 0.6em;
    }

    /* ── EXPERIÊNCIA (suites / polaroid stacks) ────────────────────── */

    #experiencia {
        padding-inline: 0;
        /* Matches headline rail + inner copy gutters (≤991 block defines vars) */
        --cp-xp-mobile-copy-rail: calc(2px + 4vw);
        --cp-xp-copy-inner-gutter: clamp(0.7rem, 3.5vw, 1.45rem);
        --cp-xp-stack-outer-inset: clamp(0.85rem, 4.25vw, 1.45rem);
        --cp-xp-stack-active-w: min(88vw, 360px);
    }

    .experiencia-stack-section {
        padding-inline: 0 !important;
    }

    /* Suite titles (same size as when they were h2) */
    #experiencia .experiencia-stack-section--room > .stack-text-left h3.fade-up {
        font-size: clamp(1.95rem, 8.5vw, 2.85rem) !important;
    }

    .xp-stack-lead {
        font-size: 0.95rem !important;
        line-height: 1.65 !important;
        text-align: left;
    }

    #experiencia .experiencia-stack-section--intro .xp-stack-lead {
        text-align: left !important;
    }

    /* Suite stacks: rail inset + bottom band for dots (matches ≤991 block; 720px was overriding it) */
    #experiencia .experiencia-stack-section .stack-polaroids-right {
        width: 100% !important;
        max-width: 100% !important;
        height: min(40vh, 340px) !important;
        max-height: min(42vh, 360px);
        min-height: 220px;
        margin-top: 0.25rem;
        margin-left: auto;
        margin-right: auto;
        padding-inline: var(--cp-xp-mobile-copy-rail);
        padding-bottom: clamp(5.75rem, 15vw, 7.25rem);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        overflow: visible !important;
        pointer-events: auto;
        touch-action: pan-y;
    }

    #experiencia .experiencia-stack-section--intro .stack-polaroids-right,
    #experiencia .experiencia-stack-section--room .stack-polaroids-right {
        padding-bottom: clamp(5rem, 17vw, 7.35rem);
    }

    #experiencia .experiencia-stack-section .polaroid-stack-item.ds-texture-card,
    #experiencia .experiencia-stack-section .polaroid-stack-item.ds-texture-card:nth-child(2),
    #experiencia .experiencia-stack-section .polaroid-stack-item.ds-texture-card:nth-child(3),
    #experiencia .experiencia-stack-section .polaroid-stack-item.ds-texture-card:nth-child(4) {
        width: min(46vw, 178px) !important;
        opacity: 1 !important; /* Ensure visibility on mobile */
    }

    #experiencia .experiencia-stack-section .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-active {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1.02) !important;
    }

    #experiencia .experiencia-stack-section .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-prev {
        transform: translate3d(-28px, 6px, 0) rotate(-4deg) scale(1) !important;
    }

    #experiencia .experiencia-stack-section .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-next {
        transform: translate3d(28px, 3px, 0) rotate(5deg) scale(1) !important;
    }

    #experiencia .experiencia-stack-section .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-hidden {
        transform: translate3d(-8px, -12px, 0) rotate(2deg) scale(0.9) !important;
    }

    /* Intro + room: taller stage; inset + dot band from `.stack-polaroids-right` above */
    #experiencia .experiencia-stack-section--intro > .stack-polaroids-right,
    #experiencia .experiencia-stack-section--room > .stack-polaroids-right {
        height: min(44vh, 392px) !important;
        max-height: min(46vh, 412px);
        min-height: 248px;
    }

    #experiencia .experiencia-stack-section--intro .stack-polaroids-right .polaroid-carousel-dots,
    #experiencia .experiencia-stack-section--room .stack-polaroids-right .polaroid-carousel-dots {
        bottom: clamp(0.35rem, 1.25vw, 0.65rem);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        gap: clamp(18px, 5.5vw, 30px);
        box-sizing: border-box;
        padding-top: clamp(5.35rem, 22vw, 9rem);
    }

    #experiencia .experiencia-stack-section--intro .stack-polaroids-right > .polaroid-stack-item.ds-texture-card,
    #experiencia .experiencia-stack-section--room > .stack-polaroids-right > .polaroid-stack-item.ds-texture-card {
        width: var(--cp-xp-stack-active-w) !important;
        max-width: calc(100% - 2px);
    }

    #experiencia .experiencia-stack-section--intro .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-active,
    #experiencia .experiencia-stack-section--room > .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-active {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1.02) !important;
    }

    #experiencia .experiencia-stack-section--intro .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-prev,
    #experiencia .experiencia-stack-section--room > .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-prev {
        transform: translate3d(calc(-1 * min(6.25vw, 26px)), 10px, 0) rotate(-4deg) scale(0.9) !important;
    }

    #experiencia .experiencia-stack-section--intro .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-next,
    #experiencia .experiencia-stack-section--room > .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-next {
        transform: translate3d(min(6.25vw, 26px), 6px, 0) rotate(5deg) scale(0.9) !important;
    }

    #experiencia .experiencia-stack-section--intro .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-hidden,
    #experiencia .experiencia-stack-section--room > .stack-polaroids-right > .polaroid-stack-item.ds-texture-card.is-hidden {
        transform: translate3d(-12px, -16px, 0) rotate(2deg) scale(0.92) !important;
    }


    /* Remove text-align: right on Estrelar (non-reverse) on mobile */
    #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: keep .xp-text-rail-terracotta calc — do not zero (≤720 Estrelar rule must not override later) */
        text-align: left !important;
        /* Horizontal padding: .xp-text-rail-terracotta below (4vw) — keep single source */
    }

    /* Terracotta rail (left-border accent) on mobile: use thinner + closer */
    .xp-text-rail-terracotta {
        border-left-width: 2px !important;
        padding-left: 4vw !important;
    }

    /* ── HORIZONTAL FEATURES STRIP ─────────────────────────────────── */

    #experiencia-cards-horizontal {
        align-items: center;
        padding-top: calc(56px + env(safe-area-inset-top, 0px));
        padding-bottom: clamp(0.65rem, 2.25vh, 1.75rem);
    }

    .feature-card-item:not(.contact-cta) {
        flex: 0 0 80vw !important;
        height: min(76dvh, 640px);
        height: min(76vh, 640px);
        min-height: 380px;
        padding: 5vh 5vw !important;
        border-radius: 6px;
    }

    .feature-card-copy-col {
        max-width: 68vw !important;
    }

    .feature-card-title {
        margin-bottom: 2.5vh;
    }

    .feature-card-copy {
        font-size: clamp(0.95rem, 3.5vw, 1.15rem);
        line-height: 1.5;
    }

    .feature-card-item.contact-cta {
        flex: 0 0 80vw !important;
        height: min(76dvh, 640px);
        height: min(76vh, 640px);
        min-height: 380px;
        justify-content: center;
        align-items: center;
        padding: clamp(1rem, 3vh, 1.75rem) clamp(1rem, 5vw, 1.5rem);
        box-sizing: border-box;
    }

    .contact-cta-lead {
        font-size: clamp(0.9rem, 3vw, 1.05rem) !important;
        line-height: 1.5;
    }

    .contact-cta-actions {
        flex-direction: column;
        gap: 0.65rem !important;
        width: 100%;
    }

    .contact-cta-actions a {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* ── VIDEO MANIFESTO (dl-takes / casa-inteira-grupo) ──────────── */

    .dl-takes-beat--manifesto .dl-takes-row-primary {
        grid-template-columns: 1fr;
    }

    .dl-takes-inner.dl-takes-inner--manifesto {
        max-width: 100%;
        padding-left: clamp(1.25rem, 5vw, 2rem);
        padding-right: clamp(1.25rem, 5vw, 2rem);
        text-align: left;
    }

    .dl-manifesto-line {
        font-size: clamp(1.65rem, 6vw, 2.5rem) !important;
        line-height: 1.2;
        margin-bottom: clamp(0.3rem, 1.2vh, 0.5rem);
    }

    /* Stanza stacking + scrub: see earlier @media (max-width: 720px) + prefers-reduced-motion */

    /* Stats card grid: 1-column on mobile */
    .dl-takes-stats-inner {
        grid-template-columns: 1fr !important;
        gap: 0.75rem;
        max-width: min(360px, 100%);
    }

    .dl-takes-beat-stat-num {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .dl-takes-beat-stat-label {
        font-size: 10px;
    }

    /* ── FOOTER ─────────────────────────────────────────────────────── */

    .site-footer {
        /* Side inset tracks the centered CTA rail (buttons max 320px): half of leftover viewport */
        padding-inline: clamp(1.65rem, calc((100vw - 320px) / 2), 3.5rem);
        min-height: auto;
    }

    .site-footer__inner {
        --cp-footer-pad-block: clamp(2rem, 5vh, 3rem);
        --cp-footer-section-gap: clamp(1.75rem, 4vh, 2.5rem);
        --cp-footer-cta-pad-below-btns: clamp(2.25rem, 5.5vh, 3.5rem);
        --cp-footer-col-gap: clamp(1.5rem, 4vw, 2rem);
    }

    .site-footer__cta-title {
        max-width: 18ch;
    }

    .site-footer__cta-lead {
        font-size: 0.9rem;
        line-height: var(--cp-footer-line-height);
        max-width: 32ch;
    }

    .site-footer__cta-btns {
        flex-direction: column;
        gap: 0.6rem;
        width: min(100%, 320px);
    }

    .site-footer__btn {
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 14px 20px;
        font-size: 0.75rem;
    }

    .site-footer__grid {
        grid-template-columns: 1fr !important;
    }

    .site-footer__brand-logo {
        width: min(55vw, 240px);
    }

    .site-footer__brand-text {
        font-size: 0.82rem;
        line-height: var(--cp-footer-line-height);
        padding-bottom: 0;
    }

    .site-footer__col-title {
        font-size: 9px;
    }

    .site-footer__col-body {
        font-size: 0.85rem;
        line-height: var(--cp-footer-line-height);
    }

    .site-footer__icon-link {
        font-size: 0.85rem;
        line-height: var(--cp-footer-line-height);
        padding-block: 0.4rem;
    }

    .site-footer__base {
        flex-direction: column;
        gap: 0.75rem;
    }

    .site-footer__legal {
        gap: 1rem;
    }

    .site-footer__copyright,
    .site-footer__credit {
        font-size: 0.72rem;
        text-align: center;
    }

    /* ── GENERAL TEXT & SPACING ─────────────────────────────────────── */

    .text-block h2 {
        font-size: clamp(1.5rem, 6.5vw, 2.1rem);
        line-height: 1.15;
    }

    .text-block h2 em {
        font-style: italic;
    }

    .text-block p {
        font-size: 0.95rem;
        line-height: 1.65;
    }

    .ds-label {
        font-size: 9px;
        letter-spacing: 0.15em;
    }
}

/* ── Extra-small phones (≤ 480px) ───────────────────────────────────── */
@media (max-width: 480px) {

    #hero .hero-cta-row {
        width: 100% !important;
        max-width: none;
    }

    /* Match headline/CTAs when CTA row drops the editorial gutters (breakpoint ≤480px). */
    #hero .hero-logo {
        left: 0;
        right: 0;
        transform: none;
    }

    #hero .hero-cta-primary,
    #hero .hero-cta-secondary {
        padding: 13px 12px;
        font-size: 0.65rem;
    }

    .a-casa-postcard__postmark {
        transform: rotate(11deg) scale(0.6);
    }

    .site-footer {
        padding-inline: clamp(1.7rem, calc((100vw - 320px) / 2), 3.35rem);
    }

    #experiencia {
        --cp-xp-stack-outer-inset: clamp(0.75rem, 3.5vw, 1.2rem);
        --cp-xp-stack-active-w: min(62vw, 240px);
    }

    #experiencia .experiencia-stack-section .stack-polaroids-right {
        height: min(36vh, 292px) !important;
        max-height: min(38vh, 308px);
        min-height: 200px;
    }

    #experiencia .experiencia-stack-section .polaroid-stack-item.ds-texture-card,
    #experiencia .experiencia-stack-section .polaroid-stack-item.ds-texture-card:nth-child(2),
    #experiencia .experiencia-stack-section .polaroid-stack-item.ds-texture-card:nth-child(3),
    #experiencia .experiencia-stack-section .polaroid-stack-item.ds-texture-card:nth-child(4) {
        width: min(44vw, 164px) !important;
    }

    #experiencia .experiencia-stack-section--room > .stack-text-left h3.fade-up {
        font-size: clamp(1.85rem, 7.75vw, 2.55rem) !important;
    }

    #experiencia .experiencia-stack-section--intro > .stack-polaroids-right,
    #experiencia .experiencia-stack-section--room > .stack-polaroids-right {
        height: min(42vh, 372px) !important;
        max-height: min(44vh, 388px);
        min-height: 232px;
    }

    #experiencia .experiencia-stack-section--intro .stack-polaroids-right > .polaroid-stack-item.ds-texture-card,
    #experiencia .experiencia-stack-section--room > .stack-polaroids-right > .polaroid-stack-item.ds-texture-card {
        width: var(--cp-xp-stack-active-w) !important;
        max-width: calc(100% - 2px);
    }


    .feature-card-item:not(.contact-cta) {
        flex: 0 0 85vw !important;
        height: min(74dvh, 580px);
        height: min(74vh, 580px);
        min-height: 360px;
    }

    .feature-card-item.contact-cta {
        flex: 0 0 85vw !important;
        height: min(74dvh, 580px);
        height: min(74vh, 580px);
        min-height: 360px;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }

    .dl-manifesto-line {
        font-size: clamp(1.2rem, 5vw + 0.15rem, 1.65rem) !important;
    }

    /* Tighten footer CTA buttons */
    .site-footer__cta-btns {
        width: min(100%, 280px);
    }
}

/* ── Safe-area support (notched phones) ────────────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 720px) {
        .site-footer {
            padding-bottom: calc(clamp(1rem, 3vh, 2rem) + env(safe-area-inset-bottom, 0px));
        }

        #hero .hero-content {
            padding-bottom: calc(clamp(2rem, 8vh, 5rem) + env(safe-area-inset-bottom, 0px));
        }
    }
}

/* ── Mobile Typography & Padding Consistency Override ────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --cp-editorial-inline: 5vw !important;
        --cp-editorial-chapter-pad-block: 10vh !important;
        --cp-editorial-navy-pad-block: 10vh !important;
        --cp-wave-pad-offset: 5vh !important;
    }

    body p:not(.site-footer__brand-text), 
    .text-block-content p, 
    .grow-subheading, 
    .xp-stack-lead,
    .cp-v2-unforgettable-nights__body,
    .cp-v2-unforgettable-nights__lead,
    .dl-takes-float-line,
    .site-footer__p,
    .contact-cta-lead {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    .site-footer__brand-text,
    .site-footer__col-body,
    .site-footer__cta-lead,
    .site-footer__icon-link,
    .site-footer__copyright,
    .site-footer__credit {
        line-height: var(--cp-footer-line-height) !important;
    }


    .ds-section, 
    #experiencia, 
    #cultura-viva-section,
    #cv-shop-section {
        padding-left: var(--cp-editorial-inline, 5vw) !important;
        padding-right: var(--cp-editorial-inline, 5vw) !important;
    }

    #a-casa {
        padding-left: var(--cp-editorial-inline, 5vw) !important;
        padding-right: var(--cp-editorial-inline, 5vw) !important;
        padding-bottom: 0 !important;
    }

    /* Specific 50px padding for the last 2 sections and footer */
    #cultura-impacto,
    .dl-takes-inner--manifesto,
    .site-footer {
        padding-left: 50px !important;
        padding-right: 50px !important;
    }

    /* Remove redundant inner margins/widths now that section has padding */
    .site-footer__inner {
        max-width: none !important;
        margin: 0 !important;
    }

    /* Footer CTA: centered; grid columns (brand + info): left-aligned */
    .site-footer__cta,
    .site-footer__cta-btns {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .site-footer__grid {
        justify-items: stretch !important;
        text-align: left !important;
    }

    .site-footer__brand,
    .site-footer__contact,
    .site-footer__region,
    .site-footer__social {
        align-items: flex-start !important;
        text-align: left !important;
    }

    .site-footer__brand-logo {
        margin-inline: 0 !important;
    }

    .site-footer__brand-text {
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left !important;
    }

    .site-footer__contact-links,
    .site-footer__social-links {
        align-items: flex-start !important;
    }

    .site-footer__col-title,
    .site-footer__col-body {
        text-align: left !important;
    }

    .site-footer__eyebrow,
    .site-footer__cta-title,
    .site-footer__cta-lead {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: none !important;
        text-align: center !important;
    }
}

/* ── CUSTOM FOOTER ADJUSTMENTS (DESKTOP) ────────────────────────────── */
@media (min-width: 960px) {
    .site-footer__grid {
        /* First column (Brand) is wider; other 3 are equal width */
        grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
        gap: clamp(1.5rem, 2vw, 2rem) !important;
    }

    .site-footer__contact-links,
    .site-footer__social-links {
        /* Tighter vertical spacing between links */
        gap: 0.35rem !important;
    }

    .site-footer__brand-text,
    .site-footer__col-body,
    .site-footer__cta-lead,
    .site-footer__icon-link,
    .site-footer__copyright,
    .site-footer__credit {
        /* Consistent line-height across all footer elements */
        line-height: 1.3 !important;
    }

    .site-footer__cta-title {
        /* Reduced size as requested, more like a sub-headline */
        font-size: clamp(1.5rem, 3.5vw, 2.6rem) !important;
        line-height: 1.1 !important;
        margin-bottom: 0.5rem !important;
    }
}

/* ── FOOTER REORGANIZATION ────────────────────────────── */
.site-footer__legal-grid {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 1.25rem;
}

.site-footer__legal-link {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(244, 243, 233, 0.45);
    text-decoration: none;
    transition: color 0.25s ease;
    line-height: 1.3;
}

.site-footer__legal-link:hover {
    color: rgba(244, 243, 233, 0.85);
}

@media (min-width: 768px) {
    .site-footer__base-copy {
        flex-direction: row !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: none !important;
        align-items: center !important;
    }

    .site-footer__copyright,
    .site-footer__credit {
        text-align: left !important;
    }

    .site-footer__credit {
        text-align: right !important;
    }
}

/* Intro stack reversed: mesmo gap horizontal que os --room --reverse */
#experiencia .experiencia-stack-section--intro.experiencia-stack-section--reverse .stack-text-left {
    padding-left: 5vw;
    padding-right: 0;
}

/* Separador sutil entre stack detalhes e os quartos */
#experiencia .experiencia-stack-section--detalhes-stack {
    padding-bottom: 2vh;
}

#experiencia .experiencia-stack-section--detalhes-stack + .experiencia-stack-section--room {
    margin-top: 6vh;
    padding-top: 4vh;
    border-top: 1px solid rgba(19, 40, 62, 0.1);
}

/* Stack detalhes heading */
.stack-detalhes-heading {
    font-family: var(--cp-font-heading) !important;
    font-size: clamp(1.5rem, 2.8vw, 2.4rem) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: var(--ds-primary) !important;
    margin: 0 !important;
    letter-spacing: -0.02em !important;
    opacity: 1 !important;
}

.stack-detalhes-heading em {
    font-style: italic !important;
    color: var(--ds-terracotta) !important;
    opacity: 1 !important;
}

.stack-detalhes-heading span {
    display: block;
    margin-bottom: 0.35em;
}

.stack-detalhes-heading span:last-child {
    margin-bottom: 0;
}

/* Cormorant pair — boost heading weight (Cormorant Garamond reads light at low weights) */
.font-pair-cormorant h1,
.font-pair-cormorant h2,
.font-pair-cormorant h3,
.font-pair-cormorant h4,
.font-pair-cormorant .cp-heading,
.font-pair-cormorant .ds-heading,
.font-pair-cormorant [class*="__title"],
.font-pair-cormorant [class*="__heading"],
.font-pair-cormorant [class*="-heading"],
.font-pair-cormorant [class*="-title"] {
    font-weight: 700 !important;
}