/* ==========================================================================
   MAUSAÏC — Holiday Escapes
   Pixel-perfect vw build from "Mausaic Website V0" (1920px artboard)
   1 design px = calc(var(--u)) = 100vw / 1920
   ========================================================================== */

@font-face { font-family: 'Montserrat'; src: url('../assets/fonts/Montserrat-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../assets/fonts/Montserrat-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../assets/fonts/Montserrat-SemiBold.otf') format('opentype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../assets/fonts/Montserrat-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }

:root {
  --u: calc(100vw / 1920);
  --maroon: #b04a4c;
  --darkred: #981b23;
  --terra: #c15c42;
  --orange: #d77e44;
  --gold: #dba658;
  --salmon: #e4856e;
  --lightorange: #ec8e5b;
  --grey: #676767;
  --wash: rgba(215, 126, 68, .1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: clip; }
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  font-family: 'Montserrat', sans-serif;
  color: var(--grey);
  background: #fff;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }

.section-title {
  font-size: calc(var(--u) * 72);
  font-weight: 700;
  color: var(--grey);
  text-align: center;
  line-height: calc(var(--u) * 86);
}

/* ---------- shared buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--u) * 40);
  font-weight: 700;
  transition: transform .35s cubic-bezier(.22,.9,.36,1), box-shadow .35s, background-color .35s, color .35s;
}
.btn:hover { transform: translateY(calc(var(--u) * -3)); box-shadow: 0 calc(var(--u)*14) calc(var(--u)*30) rgba(80,30,20,.25); }
.btn:active { transform: translateY(0) scale(.98); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  height: 100vh;
  max-height: 56vw;
  overflow: hidden;
  z-index: 5;
}
.hero__photo {
  position: absolute;
  top: calc(var(--u) * -52.25);
  left: 0;
  width: 100vw;
  height: calc(var(--u) * 1190);
  object-fit: cover;
  clip-path: inset(calc(var(--u) * 52.25) 0 calc(var(--u) * 5.2) 0);
  animation: heroZoom 2.8s cubic-bezier(.16,.84,.44,1) both;
  transform-origin: 50% 30%;
}
@keyframes heroZoom { from { transform: scale(1.07); } to { transform: scale(1); } }

.hero__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--u) * 960.2);
  width: calc(var(--u) * 960);
  padding-top: calc(var(--u) * 111.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  background: url('../assets/img/hero-panel.png') center / cover no-repeat;
  animation: panelIn 1.4s cubic-bezier(.16,.84,.44,1) .25s both;
}
@keyframes panelIn { from { opacity: 0; transform: translateX(calc(var(--u)*80)); } to { opacity: 1; transform: none; } }
.hero__panel-bg { display: none; }

.hero__brand { width: calc(var(--u) * 360.3); animation: fadeUp 1.2s cubic-bezier(.16,.84,.44,1) .8s both; }
.hero__logo { width: 100%; }
.hero__tagline {
  margin-top: calc(var(--u) * 17);
  text-align: center;
  color: #fff;
  font-size: calc(var(--u) * 22.02);
  letter-spacing: calc(var(--u) * 8.3);
  text-indent: calc(var(--u) * 8.3);
  white-space: nowrap;
}

.hero__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 26);
  width: 100%;
  margin-top: calc(var(--u) * 110);
}
.btn--white {
  width: calc(var(--u) * 299);
  height: calc(var(--u) * 70);
  background: #fff;
  color: var(--maroon);
  font-size: calc(var(--u) * 25);
  animation: fadeUp 1s cubic-bezier(.16,.84,.44,1) 1.15s both;
}
.btn--gold {
  width: calc(var(--u) * 238);
  height: calc(var(--u) * 76);
  background: var(--gold);
  color: #fff;
  font-size: calc(var(--u) * 25);
  gap: calc(var(--u) * 10);
  animation: fadeUp 1s cubic-bezier(.16,.84,.44,1) 1.3s both;
}
.btn--gold:hover { background: #c99544; }
.btn__icon { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(calc(var(--u)*35)); } to { opacity: 1; transform: none; } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(calc(var(--u)*-25)); } to { opacity: 1; transform: none; } }

/* ---------- nav ---------- */
.nav {
  position: absolute;
  left: 0;
  width: 100vw;
  height: calc(var(--u) * 111.3);
  background: #fff;
  z-index: 4;
}
.nav__reserver {
  position: absolute;
  left: calc(var(--u) * 184.2);
  top: calc(var(--u) * 20.8);
  width: calc(var(--u) * 195);
  height: calc(var(--u) * 70);
  background: var(--maroon);
  color: #fff;
  font-size: calc(var(--u) * 25);
  animation: fadeDown .9s cubic-bezier(.16,.84,.44,1) .55s both;
}
.nav__reserver:hover { background: #9a3d3f; }
.nav__links a {
  position: absolute;
  top: calc(var(--u) * 34);
  font-size: calc(var(--u) * 25);
  font-weight: 700;
  color: var(--maroon);
  line-height: calc(var(--u) * 31);
  animation: fadeDown .8s cubic-bezier(.16,.84,.44,1) both;
  transition: color .3s;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: calc(var(--u) * -6);
  width: 100%; height: calc(var(--u) * 3);
  border-radius: calc(var(--u) * 2);
  background: var(--maroon);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.22,.9,.36,1);
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a:nth-child(1) { left: calc(var(--u) * 606.2); animation-delay: .6s; }
.nav__links a:nth-child(2) { left: calc(var(--u) * 773.2); animation-delay: .7s; }
.nav__links a:nth-child(3) { left: calc(var(--u) * 954.2); animation-delay: .8s; }
.nav__links a:nth-child(4) { left: calc(var(--u) * 1052.2); animation-delay: .9s; }
.nav__links a:nth-child(5) { left: calc(var(--u) * 1209.2); animation-delay: 1s; }
/* English labels are wider — respace the links on the EN page */
html[lang="en"] .nav__links a:nth-child(1) { left: calc(var(--u) * 570); }
html[lang="en"] .nav__links a:nth-child(2) { left: calc(var(--u) * 830); }
html[lang="en"] .nav__links a:nth-child(3) { left: calc(var(--u) * 1000); }
html[lang="en"] .nav__links a:nth-child(4) { left: calc(var(--u) * 1160); }
html[lang="en"] .nav__links a:nth-child(5) { left: calc(var(--u) * 1350); }
.nav__lang {
  position: absolute;
  left: calc(var(--u) * 1648.2);
  top: calc(var(--u) * 16.7);
  width: calc(var(--u) * 69);
  height: calc(var(--u) * 69);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--maroon);
  color: #fff;
  font-size: calc(var(--u) * 25);
  font-weight: 700;
  animation: fadeDown .9s cubic-bezier(.16,.84,.44,1) 1.1s both;
  transition: transform .3s, background-color .3s;
}
.nav__lang:hover { transform: scale(1.08); background: #9a3d3f; }

/* ==========================================================================
   LISTINGS — Nos hébergements
   ========================================================================== */
.listings {
  position: relative;
  z-index: 1;
  background-image: url('../assets/svg/palm-wash-listings.svg?r=3');
  background-repeat: no-repeat;
  background-size: calc(var(--u) * 2362) calc(var(--u) * 4325);
  background-position: calc(var(--u) * -369.8) calc(var(--u) * -284.4);
  padding-bottom: calc(var(--u) * 268);
}
.listings__wash { display: none; }
.listings__title { padding-top: calc(var(--u) * 130.8); }
.listings__intro {
  margin-top: calc(var(--u) * 71);
  text-align: center;
  font-size: calc(var(--u) * 30);
  line-height: calc(var(--u) * 40);
}

/* chips */
.chips {
  margin-top: calc(var(--u) * 172.6);
  margin-left: calc(var(--u) * 587.1);
  display: flex;
  gap: calc(var(--u) * 20.4);
  height: calc(var(--u) * 55.6);
}
.chip {
  height: 100%;
  border-radius: calc(var(--u) * 27.8);
  color: #fff;
  font-size: calc(var(--u) * 21.37);
  font-weight: 700;
  padding: 0;
  transition: transform .3s cubic-bezier(.22,.9,.36,1), box-shadow .3s, filter .3s, opacity .3s;
}
.chip:hover { transform: translateY(calc(var(--u) * -3)); box-shadow: 0 calc(var(--u)*10) calc(var(--u)*22) rgba(80,30,20,.28); }
.chip.chip--inactive { opacity: .38; filter: saturate(.55); }
.chip--salmon { width: calc(var(--u) * 179.6); background: var(--salmon); }
.chip--gold   { width: calc(var(--u) * 187.9); background: var(--gold); }
.chip--terra  { width: calc(var(--u) * 169.4); background: var(--terra); }
.chip--maroon { width: calc(var(--u) * 179.6); background: var(--maroon); }

/* accents */
.listing[data-accent="darkred"]     { --acc: var(--darkred);     --bar: var(--darkred); }
.listing[data-accent="gold"]        { --acc: var(--gold);        --bar: var(--gold); }
.listing[data-accent="orange"]      { --acc: var(--orange);      --bar: var(--terra); }
.listing[data-accent="terra"]       { --acc: var(--terra);       --bar: var(--terra); }
.listing[data-accent="salmon"]      { --acc: var(--salmon);      --bar: var(--salmon); }
.listing[data-accent="lightorange"] { --acc: var(--lightorange); --bar: var(--lightorange); }
.listing[data-accent="grey"]        { --acc: var(--grey);        --bar: var(--grey); }

/* card frame */
.listing {
  position: relative;
  /* cards are inset 15vw on each side; --u is rescaled so the fixed-unit
     layout inside keeps its original proportions at the 70vw width */
  --u: calc(70vw / 1753);
  width: 70vw;
  margin-left: 15vw;
  margin-top: calc(var(--u) * 48);
  background: #fff;
  border-radius: calc(var(--u) * 30);
  transition: transform .4s cubic-bezier(.22,.9,.36,1), box-shadow .4s;
}
.listing:first-of-type { margin-top: calc(var(--u) * 73.8); }
.listing:hover { box-shadow: 0 calc(var(--u)*18) calc(var(--u)*44) rgba(90,40,25,.13); }
.listing:not(.listing--open):hover { transform: translateY(calc(var(--u) * -4)); }
.listing.listing--hidden { display: none; }

/* head */
.listing__head {
  position: relative;
  height: calc(var(--u) * 189);
  cursor: pointer;
  outline: none;
}
.listing__bar {
  position: absolute;
  left: calc(var(--u) * 61.5);
  top: calc(var(--u) * 41);
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 106);
  border-radius: calc(var(--u) * 4.5);
  background: var(--bar);
}
.listing__num {
  position: absolute;
  left: calc(var(--u) * 113);
  top: calc(var(--u) * 54);
  width: calc(var(--u) * 80);
  height: calc(var(--u) * 80);
  border-radius: 50%;
  background: var(--acc);
  color: #fff;
  font-size: calc(var(--u) * 36);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.listing__titleblock {
  position: absolute;
  left: calc(var(--u) * 229);
  top: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.listing__name { font-size: calc(var(--u) * 33); font-weight: 600; color: var(--grey); line-height: calc(var(--u) * 41); }
.listing__meta { display: flex; gap: calc(var(--u) * 36); margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 25); color: var(--grey); transition: opacity .4s cubic-bezier(.22,.9,.36,1); }
.listing--open .listing__meta { opacity: 0; visibility: hidden; }
.listing__meta span { display: inline-flex; align-items: center; gap: calc(var(--u) * 12); }
.listing__meta img { height: calc(var(--u) * 31); width: auto; }
.listing__meta img[src*="icon-pin"] { height: calc(var(--u) * 34); }
.listing__meta img[src*="icon-bed"] { height: calc(var(--u) * 23); }
.listing__meta img[src*="icon-people"] { height: calc(var(--u) * 28.4); }

.listing__price-block { position: absolute; right: calc(var(--u) * 134); top: calc(var(--u) * 63); text-align: right; }
.listing__price { display: block; font-size: calc(var(--u) * 36); font-weight: 700; color: var(--acc); line-height: calc(var(--u) * 44); }
.listing__night { display: block; font-size: calc(var(--u) * 25); color: var(--grey); }
.listing__chevron {
  position: absolute;
  right: calc(var(--u) * 44);
  top: calc(var(--u) * 87);
  width: calc(var(--u) * 38);
  color: var(--grey);
  transition: transform .5s cubic-bezier(.22,.9,.36,1);
}
.listing__chevron svg { width: 100%; display: block; }
.listing--open .listing__chevron { transform: rotate(180deg); }
.listing:first-of-type.listing--open .listing__chevron { transform: none; }
.listing:first-of-type:not(.listing--open) .listing__chevron { transform: rotate(180deg); }

/* body */
.listing__body {
  position: relative;
  max-height: 0;
  overflow: hidden;
  transition: max-height .7s cubic-bezier(.6,.05,.28,.99);
}
.listing--open .listing__body { max-height: calc(var(--u) * 960); }

/* card 1 detail */
/* height follows the info column; min-height covers the absolute gallery */
.listing__detail {
  position: relative;
  min-height: calc(var(--u) * 860);
  padding: calc(var(--u) * 20) 0 calc(var(--u) * 25);
}
.listing__photo {
  position: absolute;
  left: calc(var(--u) * 42.5);
  top: calc(var(--u) * 20);
  width: calc(var(--u) * 951.7);
  height: calc(var(--u) * 547.8);
  object-fit: cover;
  border-radius: calc(var(--u) * 24);
}
.listing__thumbs img {
  position: absolute;
  left: calc(var(--u) * var(--tx));
  top: calc(var(--u) * var(--ty));
  width: calc(var(--u) * var(--tw));
  height: calc(var(--u) * var(--th));
  object-fit: cover;
  border-radius: calc(var(--u) * 18);
  transition: transform .35s cubic-bezier(.22,.9,.36,1), box-shadow .35s;
  cursor: pointer;
}
.listing__thumbs img:hover { transform: scale(1.05); box-shadow: 0 calc(var(--u)*12) calc(var(--u)*28) rgba(60,30,20,.3); z-index: 2; }
.listing__info {
  margin-left: calc(var(--u) * 1022);
  width: calc(var(--u) * 668);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.listing__desc {
  font-size: calc(var(--u) * 25);
  line-height: calc(var(--u) * 30);
  color: var(--grey);
}
.listing__features { margin-top: calc(var(--u) * 40); list-style: none; }
.listing__features li {
  position: relative;
  height: calc(var(--u) * 51);
  margin-bottom: calc(var(--u) * 21.5);
  padding-left: calc(var(--u) * 71);
  display: flex;
  align-items: center;
  font-size: calc(var(--u) * 25);
  color: var(--grey);
}
.listing__features img { position: absolute; left: 0; top: 0; width: calc(var(--u) * 51); height: calc(var(--u) * 51); }
.listing__pricing { margin-top: calc(var(--u) * 16); display: flex; align-items: baseline; gap: calc(var(--u) * 15); }
.listing__pricing strong { font-size: calc(var(--u) * 36); font-weight: 700; color: var(--acc); }
.listing__pricing span { font-size: calc(var(--u) * 25); color: var(--grey); }
.listing__sep {
  margin-top: calc(var(--u) * 22);
  width: 100%;
  border: none;
  border-top: calc(var(--u) * 1) solid var(--grey);
}
.listing .btn--outline,
.listing .btn--solid {
  margin-top: calc(var(--u) * 22);
  width: 100%;
  height: calc(var(--u) * 68);
  flex: none;
  border-radius: calc(var(--u) * 34);
  font-size: calc(var(--u) * 30);
}
.btn--outline { background: #fff; border: calc(var(--u) * 2.5) solid var(--maroon); color: var(--maroon); }
.btn--outline:hover { background: var(--maroon); color: #fff; }
.btn--solid { background: var(--maroon); color: #fff; }
.btn--solid:hover { background: #9a3d3f; }
.listing__pdf {
  margin-top: calc(var(--u) * 30);
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  font-size: calc(var(--u) * 25);
  font-weight: 700;
  color: var(--maroon);
  transition: transform .3s;
}
.listing__pdf:hover { transform: translateX(calc(var(--u) * 4)); }
.listing__pdf svg { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }


/* ==========================================================================
   WHY — Pourquoi choisir Mausaïc
   ========================================================================== */
.why { position: relative; background: #fff; }
.why__brush {
  position: absolute;
  top: calc(var(--u) * -82);
  left: calc(var(--u) * -525.8);
  width: calc(var(--u) * 2661);
  height: calc(var(--u) * 144);
  pointer-events: none;
  z-index: 2;
}
.why__texture {
  position: absolute;
  top: calc(var(--u) * -10);
  left: 0;
  width: calc(var(--u) * 1920);
  height: calc(var(--u) * 4122);
  pointer-events: none;
  z-index: 0;
}
.why__title { position: relative; z-index: 1; padding-top: calc(var(--u) * 65); line-height: calc(var(--u) * 67); }
.why__grid {
  position: relative;
  z-index: 1;
  margin: calc(var(--u) * 102) 0 0 calc(var(--u) * 247.2);
  display: grid;
  grid-template-columns: calc(var(--u) * 684) calc(var(--u) * 684);
  grid-auto-rows: calc(var(--u) * 511);
  column-gap: calc(var(--u) * 39);
  row-gap: calc(var(--u) * 36);
  padding-bottom: 0;
}
.why-card {
  border-radius: calc(var(--u) * 30);
  color: #fff;
  text-align: center;
  padding: calc(var(--u) * 36) calc(var(--u) * 25.5) 0;
  transition: transform .45s cubic-bezier(.22,.9,.36,1), box-shadow .45s;
}
.why-card:hover { transform: translateY(calc(var(--u) * -8)); box-shadow: 0 calc(var(--u)*24) calc(var(--u)*50) rgba(70,30,20,.28); }
.why-card--gold { background: var(--gold); }
.why-card--salmon { background: var(--salmon); }
.why-card--terra { background: var(--terra); padding-top: calc(var(--u) * 30); }
.why-card--maroon { background: var(--maroon); padding-top: calc(var(--u) * 30); }
.why-card__icon { height: calc(var(--u) * 116); margin: 0 auto; }
.why-card__icon--bell { height: calc(var(--u) * 79); margin-top: calc(var(--u) * 19); margin-bottom: calc(var(--u) * 18); }
.why-card__icon--lock { height: calc(var(--u) * 91.5); margin-top: calc(var(--u) * -4.2); }
.why-card__icon--heart { height: calc(var(--u) * 98); margin-top: calc(var(--u) * -4.2); }
.why-card__icon--lock, .why-card__icon--heart { display: block; margin-left: auto; margin-right: auto; width: auto; }

/* looping icon animations, one flavour per card */
/* palm-leaf sway and bell tap live inside their SVG files */
.why-card__icon--lock { transform-origin: 50% 100%; animation: iconBounce 4s ease-in-out infinite; }
.why-card__icon--heart { transform-origin: 50% 55%; animation: iconBeat 3.2s ease-in-out infinite; }
@keyframes iconBounce {
  0%, 24%, 100% { transform: translateY(0); }
  6% { transform: translateY(calc(var(--u) * -12)); }
  13% { transform: translateY(0); }
  18% { transform: translateY(calc(var(--u) * -5)); }
}
@keyframes iconBeat {
  0%, 32%, 100% { transform: scale(1); }
  8% { transform: scale(1.13); }
  16% { transform: scale(1); }
  24% { transform: scale(1.1); }
}
.why-card h3 { margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 32.38); font-weight: 700; }
.why-card p { margin-top: calc(var(--u) * 24); font-size: calc(var(--u) * 30.22); line-height: calc(var(--u) * 38.6); font-weight: 400; }
.why-card--terra h3, .why-card--maroon h3 { margin-top: calc(var(--u) * 18); }

/* ==========================================================================
   REVIEWS — Avis clients
   ========================================================================== */
.reviews { position: relative; padding-bottom: calc(var(--u) * 213); }
.reviews__title { position: relative; z-index: 1; padding-top: calc(var(--u) * 373); }
.reviews__wrap {
  position: relative;
  z-index: 1;
  /* carousel is inset 15vw on each side; --u is rescaled so the fixed-unit
     layout inside keeps its original proportions at the 70vw width */
  --u: calc(70vw / 1920);
  width: 70vw;
  margin-left: 15vw;
  margin-top: calc(var(--u) * 156);
  height: calc(var(--u) * 676);
}
/* sliding viewport: spans the two original card positions, clips the track;
   padded vertically so card hover lift and shadows aren't cut off */
.reviews__viewport {
  position: absolute;
  left: calc(var(--u) * 170.2);
  top: calc(var(--u) * -60);
  width: calc(var(--u) * 1561);
  height: calc(100% + var(--u) * 120);
  overflow: hidden;
}
.reviews__track {
  display: flex;
  gap: calc(var(--u) * 55);
  height: 100%;
  padding: calc(var(--u) * 60) 0;
}
.review-card {
  position: relative;
  flex: 0 0 calc(var(--u) * 753);
  height: calc(var(--u) * 676);
  background: #fff;
  border-radius: calc(var(--u) * 30);
  box-shadow: 0 calc(var(--u)*10) calc(var(--u)*34) rgba(90,50,30,.10);
  transition: transform .45s cubic-bezier(.22,.9,.36,1), box-shadow .45s;
}
.review-card:hover { transform: translateY(calc(var(--u) * -7)); box-shadow: 0 calc(var(--u)*24) calc(var(--u)*52) rgba(90,50,30,.18); }
.review-card__top { position: absolute; left: calc(var(--u) * 75); top: calc(var(--u) * 100); right: calc(var(--u) * 60); display: flex; align-items: center; justify-content: space-between; }
.review-card__stars { color: #fbb040; font-size: calc(var(--u) * 34); letter-spacing: calc(var(--u) * 6); }
.review-card__brand { width: calc(var(--u) * 178); height: auto; }
.review-card__text {
  position: absolute;
  left: calc(var(--u) * 73);
  top: calc(var(--u) * 216);
  width: calc(var(--u) * 610);
  font-size: calc(var(--u) * 30);
  font-style: italic;
  line-height: calc(var(--u) * 40);
  color: var(--grey);
}
.review-card hr {
  position: absolute;
  left: calc(var(--u) * 75);
  top: calc(var(--u) * 459);
  width: calc(var(--u) * 603);
  border: none;
  border-top: calc(var(--u) * 1) solid #b9b9b9;
}
.review-card__who { position: absolute; left: calc(var(--u) * 75); top: calc(var(--u) * 481); display: flex; }
.review-card__avatar { width: calc(var(--u) * 144.6); height: calc(var(--u) * 144.6); border-radius: 50%; object-fit: cover; }
.review-card__who div { margin-left: calc(var(--u) * 38); display: flex; flex-direction: column; }
.review-card__who strong { font-size: calc(var(--u) * 28); font-weight: 600; color: #1c1c1c; line-height: calc(var(--u) * 36); }
.review-card__who span { font-size: calc(var(--u) * 25); color: var(--grey); line-height: calc(var(--u) * 32); }
.review-card__who em { margin-top: calc(var(--u) * 6); font-style: normal; font-size: calc(var(--u) * 25); color: var(--maroon); line-height: calc(var(--u) * 31); }

.carousel-arrow {
  position: absolute;
  width: calc(var(--u) * 82);
  height: calc(var(--u) * 82);
  border-radius: 50%;
  background: var(--maroon);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform .3s cubic-bezier(.22,.9,.36,1), background-color .3s;
}
.carousel-arrow:hover { transform: scale(1.12); background: #9a3d3f; }
.carousel-arrow:active { transform: scale(.95); }
.carousel-arrow svg { width: calc(var(--u) * 34); height: calc(var(--u) * 34); }
.carousel-arrow.nudge { animation: nudge .5s cubic-bezier(.22,.9,.36,1); }
@keyframes nudge { 0%{transform:scale(1)} 40%{transform:scale(1.2)} 100%{transform:scale(1)} }
.reviews__prev { left: calc(var(--u) * 49.2); top: calc(var(--u) * 285); }
.reviews__next { left: calc(var(--u) * 1769.2); top: calc(var(--u) * 285); }

/* ==========================================================================
   ACTIVITIES
   ========================================================================== */
.activities { position: relative; background: #fff; height: calc(var(--u) * 1080); }
.activities__brush {
  position: absolute;
  top: calc(var(--u) * -92);
  left: calc(var(--u) * -512.8);
  width: calc(var(--u) * 2831);
  height: calc(var(--u) * 153);
  pointer-events: none;
  z-index: 2;
}
.activities__title { padding-top: calc(var(--u) * 103); }
.activities__intro {
  margin-top: calc(var(--u) * 34);
  text-align: center;
  font-size: calc(var(--u) * 30);
  line-height: calc(var(--u) * 40);
}
.activities__wrap { position: relative; margin-top: calc(var(--u) * 60); }
.activities__viewport {
  margin-left: calc(var(--u) * 228.3);
  width: calc(var(--u) * 1447);
  overflow: hidden;
  border-radius: calc(var(--u) * 30);
}
.activities__track { display: flex; gap: calc(var(--u) * 60); }
.activity-card {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: calc(var(--u) * 584.9);
  border-radius: calc(var(--u) * 30);
  overflow: hidden;
}
.activity-card__photo { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22,.9,.36,1); }
.activity-card::after {
  content: '';
  position: absolute;
  left: 0; right: 40%; bottom: 0;
  height: 55%;
  background: linear-gradient(to top right, rgba(20,12,8,.55), rgba(20,12,8,0) 65%);
  pointer-events: none;
}
.activity-card figcaption { z-index: 1; }
.activity-card:hover .activity-card__photo { transform: scale(1.045); }
.activity-card figcaption {
  position: absolute;
  left: calc(var(--u) * 46);
  bottom: calc(var(--u) * 34);
  width: calc(var(--u) * 640);
  color: #fff;
  font-size: calc(var(--u) * 22);
  line-height: calc(var(--u) * 31);
  text-shadow: 0 calc(var(--u)*2) calc(var(--u)*14) rgba(0,0,0,.65);
}
.activity-card figcaption strong { display: block; font-size: calc(var(--u) * 24); margin-bottom: calc(var(--u) * 4); }
.activities__prev { left: calc(var(--u) * 92.2); top: calc(var(--u) * 240); }
.activities__next { left: calc(var(--u) * 1746.2); top: calc(var(--u) * 240); }

/* ==========================================================================
   STORY — Notre histoire
   ========================================================================== */
/* opaque equivalent of var(--wash) on white, so the why-section palm
   texture bleeding down can't tint the top of this section */
.story { position: relative; background: #fbf2ec; height: calc(var(--u) * 1558); }
.story__brush {
  position: absolute;
  top: calc(var(--u) * -7);
  left: calc(var(--u) * -506.8);
  width: calc(var(--u) * 2831);
  height: calc(var(--u) * 153);
  pointer-events: none;
  z-index: 2;
}
.story__title { padding-top: calc(var(--u) * 208); }
.story__text {
  margin-top: calc(var(--u) * 63);
  text-align: center;
  font-size: calc(var(--u) * 30);
  line-height: calc(var(--u) * 40);
  color: var(--grey);
}
.story__text p + p { margin-top: calc(var(--u) * 40); }
.story__fronds {
  position: absolute;
  left: calc(var(--u) * 643.4);
  top: calc(var(--u) * 1151);
  width: calc(var(--u) * 632);
  height: calc(var(--u) * 328);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { position: relative; height: calc(var(--u) * 607.7); background: #fff; }
.footer__brush {
  position: absolute;
  top: calc(var(--u) * -59);
  left: calc(var(--u) * -391.8);
  width: calc(var(--u) * 2661);
  height: calc(var(--u) * 161);
  z-index: 1;
  pointer-events: none;
}
.footer__jagged {
  position: absolute;
  top: calc(var(--u) * 77);
  left: calc(var(--u) * -180.8);
  width: calc(var(--u) * 2218);
  height: calc(var(--u) * 531);
  z-index: 1;
  pointer-events: none;
}
.footer::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--u) * 160);
  bottom: 0;
  background: var(--maroon);
  z-index: 0;
}
.footer__inner { position: relative; z-index: 2; height: 100%; }
.footer__heading {
  position: absolute;
  left: 0; width: 100%;
  top: calc(var(--u) * 135);
  text-align: center;
  color: #fff;
  font-size: calc(var(--u) * 30);
  font-weight: 700;
  letter-spacing: calc(var(--u) * 5.5);
}
.footer__cols { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.footer__col { position: absolute; display: flex; }
.footer__col:nth-child(1) { left: calc(var(--u) * 305.2); top: calc(var(--u) * 252); }
.footer__col:nth-child(2) { left: calc(var(--u) * 696.2); top: calc(var(--u) * 252); }
.footer__col:nth-child(3) { left: calc(var(--u) * 1187.2); top: calc(var(--u) * 252); }
.footer__circ {
  width: calc(var(--u) * 69);
  height: calc(var(--u) * 69);
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: transform .3s cubic-bezier(.22,.9,.36,1);
}
.footer__col:hover .footer__circ { transform: scale(1.12); }
.footer__circ svg { width: calc(var(--u) * 34); height: calc(var(--u) * 34); }
.footer__col-txt { margin-left: calc(var(--u) * 19); display: flex; flex-direction: column; }
.footer__col-txt strong { color: var(--gold); font-size: calc(var(--u) * 30); font-weight: 700; letter-spacing: calc(var(--u) * 4); line-height: calc(var(--u) * 36); }
.footer__col-txt span { color: #fff; font-size: calc(var(--u) * 30); line-height: calc(var(--u) * 38); }
.footer__line {
  position: absolute;
  left: calc(var(--u) * 101.2);
  top: calc(var(--u) * 437);
  width: calc(var(--u) * 1716);
  border: none;
  border-top: calc(var(--u) * 2) solid rgba(255,255,255,.9);
}
.footer__bottom { position: absolute; left: 0; width: 100%; top: calc(var(--u) * 470); }
.footer__socials { position: absolute; left: calc(var(--u) * 90.2); top: calc(var(--u) * 3); width: calc(var(--u) * 304); height: calc(var(--u) * 53); }
.footer__socials-strip { width: 100%; height: 100%; }
.footer__socials a { position: absolute; top: 0; height: 100%; width: 20%; transition: transform .3s cubic-bezier(.22,.9,.36,1); }
.footer__socials a:nth-of-type(1) { left: 0; }
.footer__socials a:nth-of-type(2) { left: 20%; }
.footer__socials a:nth-of-type(3) { left: 40%; }
.footer__socials a:nth-of-type(4) { left: 60%; }
.footer__socials a:nth-of-type(5) { left: 80%; }
.footer__socials a:hover { transform: translateY(calc(var(--u) * -3)); }
.footer__copy {
  position: absolute;
  right: calc(var(--u) * 103);
  top: calc(var(--u) * 14);
  color: #fff;
  font-size: calc(var(--u) * 30);
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(calc(var(--u) * 45));
  transition: opacity .9s cubic-bezier(.22,.9,.36,1), transform .9s cubic-bezier(.22,.9,.36,1);
  transition-delay: var(--rd, 0s);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
.hero [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}