/* =============================================================================
   Motuvai — overwater lagoon resort
   One stylesheet, no build step, no framework.

   0. Tokens
   1. Reset and base
   2. Shared pieces — shell, section, heading, tag, button, field
   3. Navigation
   4. Hero
   5. Wellness — the bento
   6. Sessions — the numbered rows
   7. Rails — rooms and guest stories
   8. Questions
   9. Booking call — the drifting photo walls
  10. Footer
  11. Motion — reveals, parallax, reduced motion
  12. Breakpoints

   Everything that changes with the viewport is a token redeclared in part 12.
   No heading carries its own media query: change --h2-size and every h2 in the
   page follows.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   0. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* --- Ink ------------------------------------------------------------------
     One deep blue-green does all the work: text, buttons, footer, and every
     translucent grey in the page is that same ink at a lower alpha. Changing
     --ink-rgb restains the whole site.
     Contrast on white: ink 14.8:1, ink-64 4.7:1, both above AA.
     The three shades belong together — replacing one means replacing all
     three, or the hover state stops reading as "the same colour, pressed". */
  --ink-rgb: 11 43 51;
  --ink: rgb(var(--ink-rgb));
  --ink-strong: #051518;                    /* pressed / hover  */
  --ink-light: #9fc4c9;                     /* ink on a photograph */
  --ink-88: rgb(var(--ink-rgb) / 0.88);
  --ink-64: rgb(var(--ink-rgb) / 0.64);
  --ink-16: rgb(var(--ink-rgb) / 0.16);
  --ink-08: rgb(var(--ink-rgb) / 0.08);
  --ink-04: rgb(var(--ink-rgb) / 0.04);

  --paper: #fff;
  --paper-64: rgb(255 255 255 / 0.64);
  --paper-32: rgb(255 255 255 / 0.32);
  --paper-08: rgb(255 255 255 / 0.08);
  --deep: #071b20;                          /* footer plate */

  /* --- Type -----------------------------------------------------------------
     Inter is served as one variable file; `opsz` is what turns it into the
     display cut at large sizes, so the headings need no second font file. */
  --sans: "Inter", "Inter fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  /* La même police, mais la pile de repli calée sur son axe optique large :
     tout ce qui porte `opsz 32` doit l'utiliser, sinon le texte saute quand
     Inter arrive. */
  --sans-display: "Inter", "Inter display fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", "Plex Mono fallback", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --h0-size: 88px;
  --h0-line: 92px;
  --h0-track: -4px;
  --h2-size: 48px;
  --h2-line: 52px;
  --h2-track: -2px;
  --h3-size: 40px;
  --h3-line: 44px;
  --h3-track: -0.992px;
  --lead-size: 20px;
  --lead-line: 28px;
  --body-size: 16px;
  --body-line: 24px;
  --small-size: 14px;
  --small-line: 16px;
  --label-size: 12px;
  --label-line: 16px;
  --label-track: 1.008px;

  /* --- Space ---------------------------------------------------------------- */
  --gutter: 32px;                           /* page margin              */
  --gap: 16px;                              /* between tiles            */
  --pad-section: 80px;                      /* top and bottom of a part */
  --pad-card: 32px;
  --pad-plate: 16px;
  --stack: 32px;                            /* inside a card            */

  /* --- Shape ---------------------------------------------------------------- */
  --r-frame: 16px;
  --r-card: 12px;
  --r-plate: 8px;
  --r-pill: 32px;

  /* --- Motion ---------------------------------------------------------------
     Two curves, both taken from the original: `ease` for the reveals,
     out-circ for anything that scales or slides under the pointer. */
  --out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --reveal-time: 1000ms;
  --reveal-blur: 5px;
  --hover-time: 500ms;
}

/* -----------------------------------------------------------------------------
   1. Reset and base
   -------------------------------------------------------------------------- */

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

html {
  /* `clip`, not `hidden`: hidden would turn the root into a scroll container
     and break every sticky element further down the page. */
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-variation-settings: "opsz" 18;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
figure,
blockquote,
ol,
ul {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

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

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

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

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: var(--r-plate);
  background: var(--ink);
  color: var(--paper);
  transition: top 160ms ease;
}

.skip-link:focus {
  top: 16px;
}

/* -----------------------------------------------------------------------------
   2. Shared pieces
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: calc(1800px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--pad-section);
}

/* --- Headings --------------------------------------------------------------
   `tone-medium` is the second half of every two-tone title: the same words,
   one step lighter. It is the signature of the original layout. */

.h0,
.h2,
.h3,
.nav__brand,
.quote__mark,
.quote__text,
.foot__title,
.foot__word {
  font-family: var(--sans-display);
  font-variation-settings: "opsz" 32;
}

.h0,
.h2,
.h3 {
  font-weight: 400;
}

.h0 {
  font-size: var(--h0-size);
  line-height: var(--h0-line);
  letter-spacing: var(--h0-track);
}

.h2 {
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  letter-spacing: var(--h2-track);
}

.h3 {
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  letter-spacing: var(--h3-track);
}

.tone-medium {
  color: var(--ink-64);
}

.hero .tone-medium,
.room .tone-medium {
  color: var(--paper-64);
}

.lead {
  font-size: var(--lead-size);
  line-height: var(--lead-line);
}

/* --- Section header --------------------------------------------------------- */

.head {
  display: grid;
  gap: var(--gap);
  margin-bottom: 48px;
}

.head--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 332px);
  gap: 32px;
  align-items: end;
}

.head--center {
  justify-items: center;
  text-align: center;
}

.head__left {
  display: grid;
  gap: var(--gap);
  justify-items: start;
}

.head--center .head__left {
  justify-items: center;
}

.head__right {
  display: grid;
  gap: 24px;
  justify-items: start;
}

/* --- Tag — the small mono capsule ------------------------------------------- */

.tag,
.label {
  font-family: var(--mono);
  font-size: var(--label-size);
  line-height: var(--label-line);
  letter-spacing: var(--label-track);
  font-weight: 500;
  text-transform: uppercase;
}

.tag {
  display: inline-block;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  background: var(--ink-04);
  color: var(--ink-64);
}

.tag--light {
  background: var(--paper-08);
  color: var(--paper);
  backdrop-filter: blur(8px);
}

.tag--plain {
  padding: 0;
  background: none;
}

/* --- Button ----------------------------------------------------------------
   Three layers: the background, which shrinks a little when pressed; the
   label, which rolls up one character at a time; and the copy of the label
   that rolls up behind it. The rolling is set up by the script — without it
   the button is a plain, working button. */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--r-pill);
  font-size: var(--small-size);
  line-height: 20px;
  font-weight: 500;
  isolation: isolate;
  cursor: pointer;
}

.btn__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  transition: transform var(--hover-time) var(--out-circ), background-color 200ms ease;
}

.btn--dark .btn__bg {
  background: var(--ink);
}

.btn--dark {
  color: var(--paper);
}

.btn--soft .btn__bg {
  background: var(--ink-08);
}

.btn--light .btn__bg {
  background: var(--paper);
}

.btn--light {
  color: var(--ink);
  padding: 14px 20px;
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-weight: 400;
}

.btn:hover .btn__bg {
  transform: scale(0.95);
}

.btn--dark:hover .btn__bg {
  background: var(--ink-strong);
}

/* The label and its understudy live in a one-line-tall window. */
.btn__text {
  display: block;
  overflow: hidden;
  height: 1.4em;
  line-height: 1.4em;
}

.btn__roll {
  display: block;
}

.btn__char {
  display: inline-block;
  white-space: pre;
  transition: transform 635ms var(--out-circ);
  transition-delay: calc(var(--i, 0) * var(--stagger, 0ms));
}

.btn:hover .btn__char {
  transform: translateY(-1.4em);
}

/* --- Form field ------------------------------------------------------------- */

.label {
  display: block;
  color: var(--ink-64);
}

.hero .label {
  color: var(--paper-64);
}

.input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: var(--r-card);
  background: var(--paper-08);
  color: var(--paper);
  font: inherit;
  backdrop-filter: blur(12px);
  transition: border-color 200ms ease, background-color 200ms ease;
}

.input::placeholder {
  color: var(--paper-64);
}

.input:hover,
.input:focus {
  border-color: var(--paper-32);
  background: rgb(255 255 255 / 0.14);
}

/* The native date and select controls draw their own icons in a dark colour;
   these two rules are what keep them readable on the translucent field. */
.input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.64;
  cursor: pointer;
}

.input-select {
  position: relative;
  display: block;
}

.input-select select {
  appearance: none;
  padding-right: 40px;
}

.input-select option {
  color: var(--ink);
}

.input-select__chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  translate: 0 -50%;
  fill: none;
  stroke: var(--paper-64);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.rule {
  height: 1px;
  margin: 0 0 32px;
  border: 0;
  background: var(--ink-08);
}

/* -----------------------------------------------------------------------------
   3. Navigation
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 16px var(--gutter) 0;
  pointer-events: none;
}

.nav__pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 912px;
  padding: 16px 24px;
  border-radius: 0 0 var(--r-frame) var(--r-frame);
  background: var(--paper);
  box-shadow: 0 20px 20px var(--ink-04);
  pointer-events: auto;
}

/* The two concave corners that glue the pill to the top edge of the screen. */
.nav__corner {
  position: absolute;
  top: 8px;
  width: 16px;
  height: 16px;
  fill: var(--paper);
}

.nav__corner--left {
  right: 100%;
}

.nav__corner--right {
  left: 100%;
}

.nav__side {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1 1 0;
}

.nav__side--end {
  justify-content: flex-end;
}

.nav__brand {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: flex;
  align-items: flex-start;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.6px;
}

.nav__brand-tm {
  font-size: 0.5em;
  line-height: 1;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav__link,
.nav__quiet {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: opacity 300ms ease;
}

.nav__quiet {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* Hovering one link dims its siblings — the whole effect is these two rules. */
[data-nav-links]:hover .nav__link {
  opacity: 0.32;
}

[data-nav-links] .nav__link:hover,
[data-nav-links] .nav__link:focus-visible {
  opacity: 1;
}

.nav__chevron {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: rotate 300ms ease;
}

.nav__disclose[aria-expanded="true"] .nav__chevron {
  rotate: 180deg;
}

.nav__item--menu {
  position: relative;
}

html.js .nav__sub {
  display: none;
}

html.js .nav__disclose[aria-expanded="true"] + .nav__sub {
  display: grid;
}

.nav__sub {
  display: grid;
  gap: 4px;
  position: absolute;
  left: -16px;
  top: calc(100% + 18px);
  min-width: 190px;
  padding: 12px 16px;
  border-radius: var(--r-card);
  background: var(--paper);
  box-shadow: 0 20px 30px var(--ink-08);
}

.nav__sub a {
  display: block;
  padding: 4px 0;
  color: var(--ink-64);
  transition: color 200ms ease;
}

.nav__sub a:hover {
  color: var(--ink);
}

.nav__burger {
  display: none;
  align-items: center;
  gap: 8px;
}

.nav__burger-bars,
.nav__burger-bars::before,
.nav__burger-bars::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform 300ms var(--out-circ), opacity 200ms ease;
}

.nav__burger-bars {
  position: relative;
}

.nav__burger-bars::before,
.nav__burger-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav__burger-bars::before {
  top: -6px;
}

.nav__burger-bars::after {
  top: 6px;
}

.nav__burger[aria-expanded="true"] .nav__burger-bars {
  background: transparent;
}

.nav__burger[aria-expanded="true"] .nav__burger-bars::before {
  transform: translateY(6px) rotate(45deg);
}

.nav__burger[aria-expanded="true"] .nav__burger-bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

.nav__scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--ink-08);
  backdrop-filter: blur(2px);
}

/* -----------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-block: 24px;
}

.hero__frame {
  position: relative;
  display: flex;
  min-height: calc(100svh - 48px);
  border-radius: var(--r-frame);
  overflow: clip;
  isolation: isolate;
}

/* The photograph is a fifth taller than its frame: that surplus is exactly
   what the parallax slides through, so the frame is never uncovered. */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 120%;
  object-fit: cover;
}

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink-16);
}

.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  width: 100%;
  padding: 24px;
  color: var(--paper);
}

.hero__headline {
  display: grid;
  gap: var(--gap);
  max-width: 486px;
  margin-top: auto;
}

.hero__headline .lead {
  max-width: 420px;
}

/* --- The booking bar -------------------------------------------------------- */

.book {
  padding: 24px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--r-card);
  background: rgb(255 255 255 / 0.16);
  backdrop-filter: blur(8px);
}

.book__row {
  display: flex;
  align-items: flex-end;
  gap: 24px;
}

.book__field {
  flex: 1 1 0;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.book__field--action {
  flex: 0 0 auto;
}

.book__field sup {
  line-height: 0;
}

.book__note {
  margin-top: var(--gap);
  padding: 12px 16px;
  border-radius: var(--r-card);
  background: var(--paper-08);
  backdrop-filter: blur(12px);
}

/* -----------------------------------------------------------------------------
   5. Wellness — the bento
   -------------------------------------------------------------------------- */

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gap);
}

.tile {
  position: relative;
  border-radius: var(--r-card);
  overflow: clip;
  grid-column: span 2;
}

.tile--wide {
  grid-column: span 3;
}

.tile--card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--stack);
  min-height: 360px;
  padding: var(--pad-card);
  background: var(--ink-04);
}

.tile--wide.tile--card {
  min-height: 500px;
}

.tile--photo {
  display: flex;
  align-items: flex-end;
  padding: 24px;
  min-height: 320px;
}

.tile--wide.tile--photo {
  min-height: 500px;
}

.tile__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 12px;
  border-radius: var(--r-plate);
  background: var(--ink-04);
}

.tile__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tile__body {
  display: grid;
  gap: 8px;
}

.tile__heading {
  font-size: var(--lead-size);
  line-height: var(--lead-line);
  font-weight: 500;
}

.tile__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: clip;
}

.tile__media img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  transition: scale var(--hover-time) var(--out-circ);
}

.tile--photo:hover .tile__media img {
  scale: 1.1;
}

.tile__shade {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.16);
}

/* The glass plate that sits on a photograph. */
.tile__plate {
  width: 100%;
  max-width: 480px;
  padding: var(--pad-plate);
  border: 1px solid var(--paper-32);
  border-radius: var(--r-plate);
  background: var(--ink-16);
  backdrop-filter: blur(16px);
  color: var(--paper);
}

.tile__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}

.tile__title {
  display: block;
  font-weight: 500;
}

.tile__text {
  display: block;
  font-size: var(--small-size);
  line-height: var(--small-line);
}

.tile__arrow {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate 300ms var(--out-circ);
}

.tile__link:hover .tile__arrow {
  translate: 3px -3px;
}

/* --- The video tile --------------------------------------------------------- */

.tile--video .tile__plate {
  max-width: calc(100% - 52px);
}

.tile__play {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink-16);
  border: 1px solid var(--paper-32);
  backdrop-filter: blur(16px);
  color: var(--paper);
  transition: background-color 200ms ease;
}

.tile__play:hover {
  background: rgb(var(--ink-rgb) / 0.4);
}

.tile__play-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.tile__video {
  width: 100%;
  height: 120%;
  object-fit: cover;
}

/* -----------------------------------------------------------------------------
   6. Sessions — the numbered rows
   -------------------------------------------------------------------------- */

.rows {
  border-top: 1px solid var(--ink-08);
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1.43fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  padding-block: 24px;
  border-bottom: 1px solid var(--ink-08);
}

.row__left {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.row__media {
  justify-self: end;
  width: 100%;
  border-radius: var(--r-card);
  overflow: clip;
}

.row__media img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: scale var(--hover-time) var(--out-circ);
}

.row:hover .row__media img {
  scale: 1.1;
}

/* -----------------------------------------------------------------------------
   7. Rails — rooms and guest stories
   -------------------------------------------------------------------------- */

.rail {
  position: relative;
}

.rail__track {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-block: 4px;
}

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

.rail__slide {
  flex: 0 0 704px;
  max-width: 100%;
  scroll-snap-align: center;
}

/* The centre of the rail is where the sharp card is, so the rail is padded by
   half the leftover width: card centred, neighbours peeking on both sides. */
.rooms .rail__track {
  padding-inline: max(var(--gutter), calc(50vw - 352px));
}

.room {
  position: relative;
  height: 450px;
  border-radius: var(--r-frame);
  overflow: clip;
  color: var(--paper);
  transition: scale 600ms var(--out-circ), filter 600ms ease;
}

.room__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.room__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(var(--ink-rgb) / 0.72) 0%, rgb(var(--ink-rgb) / 0) 55%);
}

.room__tag {
  position: absolute;
  left: 32px;
  top: 32px;
}

.room__body {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 32px;
  display: grid;
  gap: var(--gap);
}

.room__name {
  font-size: var(--lead-size);
  line-height: var(--lead-line);
  font-weight: 400;
}

.room__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: var(--small-size);
  line-height: var(--small-line);
}

.room__specs li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.room__specs b {
  font-weight: 500;
}

.room__specs svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Set by the script on the cards away from the centre. Without the script
   every card stays sharp — which is a perfectly good carousel. */
.rooms .rail__slide.is-far .room {
  scale: 0.86;
  filter: blur(6px);
}

/* --- Arrows ----------------------------------------------------------------- */

.rail__arrow {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  transition: background-color 200ms ease, scale 200ms var(--out-circ);
}

.rail__arrow:hover {
  background: var(--ink-strong);
  scale: 1.06;
}

.rail__arrow[disabled] {
  opacity: 0.3;
  pointer-events: none;
}

.rail__arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rooms .rail__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  translate: 0 -50%;
}

.rail__arrow--prev {
  left: max(var(--gutter), calc(50vw - 377px));
}

.rail__arrow--next {
  right: max(var(--gutter), calc(50vw - 377px));
}

.rail__pair {
  position: absolute;
  left: 48px;
  bottom: 48px;
  z-index: 2;
  display: flex;
  gap: 12px;
}

.rail__arrow--flat {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 2px 10px var(--ink-08);
}

.rail__arrow--flat:hover {
  background: var(--ink-04);
}

/* --- Guest stories ---------------------------------------------------------- */

.rail--quotes .rail__slide {
  flex: 0 0 100%;
}

.quote {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 448px);
  gap: 48px;
  padding: 48px;
  border-radius: var(--r-frame);
  background: var(--ink-04);
}

.quote__body {
  display: grid;
  align-content: space-between;
  gap: 48px;
  padding-bottom: 74px;                     /* la rangee de fleches */
}

.quote__mark {
  font-size: 128px;
  line-height: 0.7;
  color: var(--ink-08);
}

.quote__text {
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  letter-spacing: var(--h2-track);
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.992px;
}

.quote__portrait {
  position: relative;
  border-radius: var(--r-card);
  overflow: clip;
  min-height: 475px;
}

.quote__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quote__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(var(--ink-rgb) / 0.6) 0%, rgb(var(--ink-rgb) / 0) 45%);
}

.quote__who {
  position: absolute;
  left: 24px;
  bottom: 24px;
  display: grid;
  color: var(--paper);
}

.quote__name {
  font-size: var(--lead-size);
  line-height: var(--lead-line);
}

.quote__role {
  color: var(--paper-64);
}

/* -----------------------------------------------------------------------------
   8. Questions
   -------------------------------------------------------------------------- */

.faq__list {
  display: grid;
  gap: var(--gap);
  max-width: 912px;
  margin-inline: auto;
}

.faq__item {
  border-radius: var(--r-plate);
  background: var(--ink-04);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: 20px;
  cursor: pointer;
  list-style: none;
  /* Chromium leaves <summary> in content-box whatever the reset says, and the
     two extra pixels of outline show up on the focus ring. */
  box-sizing: border-box;
}

.faq__q::-webkit-details-marker {
  display: none;
}

/* The plus that becomes a minus. Two bars, one of which folds away. */
.faq__sign {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  translate: -50% -50%;
  transition: rotate 300ms ease, opacity 200ms ease;
}

.faq__sign::after {
  rotate: 90deg;
}

.faq__item[open] .faq__sign::after {
  rotate: 0deg;
  opacity: 0;
}

.faq__a {
  padding: 0 20px 20px;
  color: var(--ink-64);
  max-width: 720px;
}

/* -----------------------------------------------------------------------------
   9. Booking call — the drifting photo walls
   -------------------------------------------------------------------------- */

.cta {
  padding-block: 32px;
}

.cta__frame {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 560px;
  border-radius: var(--r-frame);
  background: var(--ink-04);
  overflow: clip;
  isolation: isolate;
}

/* A still photograph of water, drifting slowly, in place of the original
   background film: same impression, no video decoder, no megabyte. */
.cta__water {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  filter: saturate(0.35) brightness(1.22);
  animation: drift 40s linear infinite alternate;
}

@keyframes drift {
  from {
    scale: 1.06;
    translate: -1.5% 0;
  }
  to {
    scale: 1.12;
    translate: 1.5% 0;
  }
}

.cta__marquee {
  position: absolute;
  top: 50%;
  z-index: -1;
  width: 200px;
  height: 840px;
  overflow: clip;
  translate: 0 -50%;
  rotate: 31deg;
}

.cta__marquee--left {
  left: 24px;
}

.cta__marquee--right {
  right: 24px;
}

/* Two identical strips stacked: sliding the belt by exactly half its height
   puts the second strip where the first started, so the loop has no seam. */
.cta__belt {
  display: grid;
  gap: 12px;
  will-change: transform;
}

.cta__strip {
  display: grid;
  gap: 12px;
}

.cta__strip img {
  width: 200px;
  height: 200px;
  border-radius: var(--r-card);
  object-fit: cover;
}

[data-marquee="up"] {
  animation: belt-up 25s linear infinite;
}

[data-marquee="down"] {
  animation: belt-down 25s linear infinite;
}

@keyframes belt-up {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}

@keyframes belt-down {
  from {
    transform: translateY(-50%);
  }
  to {
    transform: translateY(0);
  }
}

.cta__content {
  display: grid;
  justify-items: center;
  gap: var(--stack);
  width: min(400px, 100%);
  text-align: center;
}

.cta__headline {
  display: grid;
  justify-items: center;
  gap: 24px;
}

.cta__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--label-size);
  line-height: var(--label-line);
}

.cta__stars {
  letter-spacing: 2px;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* -----------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */

.foot {
  width: 100%;
  max-width: calc(1800px + 32px);
  margin-inline: auto;
  padding: 16px;
}

.foot__panel {
  position: relative;
  padding: 48px 32px;
  border-radius: var(--r-frame);
  /* 48 + grid + 96 + credits + 96 + word = the original's 862px at 1440. */
  background: var(--deep);
  color: var(--paper);
  overflow: clip;
}

.foot__palm {
  position: absolute;
  right: -64px;
  top: 24px;
  width: 380px;
  height: auto;
  opacity: 0.12;
  fill: var(--paper);
  scale: -1 1;
}

.foot__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 48px;
  min-height: 376px;
  padding-bottom: 96px;
}

.foot__title {
  max-width: 340px;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.992px;
  font-weight: 400;
}

.news {
  position: relative;
  display: grid;
  margin-top: 24px;
  max-width: 332px;
}

.news__input {
  width: 100%;
  padding: 14px 48px 14px 16px;
  border: 1px solid var(--paper-08);
  border-radius: var(--r-card);
  background: var(--paper-08);
  color: var(--paper);
  font: inherit;
  transition: border-color 200ms ease;
}

.news__input::placeholder {
  color: var(--paper-64);
}

.news__input:focus {
  border-color: var(--paper-32);
}

.news__send {
  position: absolute;
  right: 8px;
  top: 8px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-plate);
  color: var(--paper);
  transition: background-color 200ms ease;
}

.news__send:hover {
  background: var(--paper-08);
}

.news__send svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.news__note {
  margin-top: 12px;
  font-size: var(--small-size);
  line-height: var(--small-line);
  color: var(--paper-64);
}

.foot__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.foot__col ul {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.foot__col a {
  font-weight: 500;
  transition: filter var(--hover-time) ease, opacity 200ms ease;
}

.foot__col .tag--plain {
  color: var(--paper-64);
}

/* Hovering one entry blurs the rest of its column — the original's one real
   flourish down here, and it costs two rules. */
[data-foot-links]:hover a {
  filter: blur(7px);
}

[data-foot-links] a:hover,
[data-foot-links] a:focus-visible {
  filter: blur(0);
}

.foot__legal {
  position: relative;
  padding: 10px 0;
  margin-bottom: 96px;
  border-top: 1px solid var(--paper-08);
  font-size: var(--small-size);
  line-height: var(--small-line);
  color: var(--paper-64);
}

/* The name, oversized, cropped by the bottom edge of the panel. */
.foot__word {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: 25.1vw;
  line-height: 0.71;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--paper);
  white-space: nowrap;
}

.foot__word-tm {
  font-size: 0.32em;
  line-height: 1.1;
}

/* Progressive blur: three stacked panes, each blurrier than the last and each
   masked to start lower, so the word dissolves instead of stopping. */
.foot__blur {
  position: absolute;
  inset: auto 0 0;
  height: 128px;
  pointer-events: none;
}

.foot__blur span {
  position: absolute;
  inset: 0;
}

.foot__blur span:nth-child(1) {
  backdrop-filter: blur(2px);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 40%);
}

.foot__blur span:nth-child(2) {
  backdrop-filter: blur(6px);
  mask-image: linear-gradient(to bottom, transparent 35%, #000 70%);
}

.foot__blur span:nth-child(3) {
  backdrop-filter: blur(16px);
  mask-image: linear-gradient(to bottom, transparent 65%, #000 95%);
}

/* -----------------------------------------------------------------------------
   11. Motion
   -------------------------------------------------------------------------- */

/* Reveal — opacity and a 5px blur, exactly the original's. The hidden state
   only exists under `html.js`: no script, no hidden block. */
.js [data-reveal] {
  opacity: 0;
  filter: blur(var(--reveal-blur));
  transition: opacity var(--reveal-time) ease, filter var(--reveal-time) ease 200ms;
}

.js [data-reveal].is-in {
  opacity: 1;
  filter: blur(0);
}

.js .hero [data-reveal] {
  --reveal-time: 1400ms;
}

/* Parallax and the rows: the script writes --p from 0 to 1 as the block
   crosses the viewport, the stylesheet decides what to do with it. */
[data-parallax] {
  transform: translateY(calc((var(--p, 1) - 1) * 15%));
}

.js [data-row] {
  transform: translateY(calc((1 - var(--p, 1)) * -100px));
}

.js [data-row] .row__media {
  rotate: calc((1 - var(--p, 1)) * -3deg);
}

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

  /* Delays are movement spread over time: they go too. */
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1;
    filter: none;
  }

  [data-parallax],
  .js [data-row] {
    transform: none;
  }

  .js [data-row] .row__media {
    rotate: 0deg;
  }

  .cta__water {
    animation: none;
  }
}

/* -----------------------------------------------------------------------------
   12. Breakpoints
   Only tokens and layout change here. No heading has its own rule.
   -------------------------------------------------------------------------- */

/* --- Tablet: the bar collapses into a burger, the layout does not move ------ */
@media (max-width: 991px) {
  .nav__pill {
    border-radius: var(--r-frame);
    padding-block: 12px;
  }

  .nav__corner {
    display: none;
  }

  .nav__burger {
    display: inline-flex;
  }

  .nav__panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    display: grid;
    padding: 16px 24px 24px;
    border-radius: var(--r-frame);
    background: var(--paper);
    box-shadow: 0 20px 30px var(--ink-08);
    opacity: 0;
    visibility: hidden;
    translate: 0 -8px;
    transition: opacity 200ms ease, translate 300ms var(--out-circ), visibility 300ms;
  }

  .nav__panel.is-open {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
  }

  /* Without JavaScript the panel is simply always there, under the bar. */
  html:not(.js) .nav__panel {
    position: static;
    opacity: 1;
    visibility: visible;
    translate: 0;
    padding: 8px 0 0;
    box-shadow: none;
  }

  html:not(.js) .nav__burger {
    display: none;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .nav__link {
    padding: 8px 0;
    font-size: var(--lead-size);
    line-height: 28px;
  }

  .nav__item--menu {
    position: static;
  }

  .nav__sub {
    position: static;
    padding: 0 0 8px 16px;
    box-shadow: none;
  }

  .nav__quiet {
    display: none;
  }

  .book__row {
    flex-direction: column;
    align-items: stretch;
  }

  .book__field--action .btn {
    width: 100%;
    justify-content: center;
  }

  .foot__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Between 768 and 991 the original gives the hero a taller frame — the title
   sits low and the stacked form needs the room. Below 768 it goes back to
   hugging its content. */
@media (min-width: 768px) and (max-width: 991px) {
  .hero__headline {
    padding-top: 120px;
  }
}
/* --- Tablet and phone: two columns, the small type scale -------------------- */
@media (max-width: 767px) {
  :root {
    --h0-size: 56px;
    --h0-line: 64px;
    --h0-track: -2.992px;
    --h2-size: 36px;
    --h2-line: 40px;
    --h2-track: -1.504px;
    --h3-size: 32px;
    --h3-line: 36px;
    --h3-track: -0.496px;
    --lead-size: 18px;
    --lead-line: 24px;
    --body-line: 20px;
    --label-line: 12px;
    --label-track: 0.496px;

    --gutter: 16px;
    --gap: 12px;
    --pad-section: 48px;
    --pad-card: 24px;
    --pad-plate: 12px;
    --stack: 24px;
    --r-card: 8px;
  }

  .nav__pill {
    padding: 8px 20px;
    gap: 20px;
  }

  .nav__brand {
    font-size: 20px;
  }

  .head {
    margin-bottom: 32px;
  }

  .head--split {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  .head__right {
    max-width: 448px;
    gap: 12px;
  }

  /* --- Hero ---------------------------------------------------------------- */

  .hero {
    padding-block: 16px;
  }

  .hero__frame {
    min-height: 640px;
  }

  .hero__content {
    padding: 20px;
    gap: 32px;
  }

  .hero__headline {
    max-width: 332px;
  }

  .book {
    padding: 20px;
  }

  .book__row {
    gap: 20px;
  }

  /* --- Bento: two columns, one row height ---------------------------------- */

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

  .tile,
  .tile--wide {
    grid-column: span 1;
  }

  .tile:nth-child(-n + 2) {
    min-height: 384px;
  }

  .tile:nth-child(n + 3) {
    min-height: 272px;
  }

  .tile--photo {
    padding: 20px;
  }

  /* --- Sessions: one column, the photo keeps its height --------------------- */

  .row {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 20px;
    gap: 24px;
  }

  .row__left {
    grid-column: 1 / -1;
  }

  .row__media {
    order: 3;
  }

  /* --- Rails --------------------------------------------------------------- */

  .rail__track,
  .rail__pair {
    gap: 12px;
  }

  .rail__slide {
    flex: 0 0 min(560px, 88%);
  }

  .rooms .rail__track {
    padding-inline: max(var(--gutter), calc(50vw - min(280px, 44%)));
  }

  .room {
    height: 320px;
  }

  .room__tag,
  .room__body {
    left: 20px;
    right: 20px;
  }

  .room__tag {
    top: 20px;
    right: auto;
  }

  .room__body {
    bottom: 20px;
  }

  .room__specs {
    gap: 16px;
  }

  .rooms .rail__arrow {
    width: 40px;
    height: 40px;
  }

  .rail__arrow--prev {
    left: 8px;
  }

  .rail__arrow--next {
    right: 8px;
  }

  .quote {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding: 32px;
  }

  .quote__body {
    gap: 32px;
    padding-bottom: 62px;
  }

  .quote__text {
    font-size: 28px;
    line-height: 32px;
  }

  .quote__mark {
    font-size: 112px;
  }

  .quote__portrait {
    min-height: 320px;
  }

  .rail__pair {
    left: 32px;
    bottom: 32px;
  }

  /* --- Questions, call, footer --------------------------------------------- */

  .faq__q,
  .faq__a {
    padding: 16px;
  }

  .faq__a {
    padding-top: 0;
  }

  .cta {
    padding-block: 24px;
  }

  .cta__frame {
    min-height: 388px;
    padding-inline: 64px;
  }

  /* Les colonnes reculent hors du cadre : sur un telephone, la place du
     message passe avant celle du decor. */
  .cta__marquee {
    width: 112px;
    height: 620px;
  }

  .cta__strip img {
    width: 112px;
    height: 112px;
  }

  .cta__marquee--left {
    left: -56px;
  }

  .cta__marquee--right {
    right: -56px;
  }

  .cta__content {
    width: min(296px, 100%);
  }

  .foot__panel {
    padding: 32px 20px;
  }

  .foot__grid {
    gap: 32px;
    min-height: 0;
    padding-bottom: 48px;
  }

  .foot__legal {
    margin-bottom: 48px;
  }

  .foot__title {
    font-size: 28px;
    line-height: 32px;
  }

  .foot__cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
  }

  .foot__palm {
    width: 260px;
    right: -50px;
  }

  .foot__blur {
    height: 88px;
  }
}

/* --- Small phone: everything stacks ----------------------------------------- */
@media (max-width: 479px) {
  :root {
    --lead-size: 16px;
    --lead-line: 24px;
  }

  .bento {
    grid-template-columns: minmax(0, 1fr);
  }

  .tile:nth-child(n) {
    min-height: 288px;
  }

  .tile--photo {
    min-height: 320px;
  }

  .rail__slide {
    flex: 0 0 min(420px, 90%);
  }

  .rooms .rail__track {
    padding-inline: max(var(--gutter), calc(50vw - min(210px, 45%)));
  }

  .foot__grid {
    padding-bottom: 32px;
  }

  .foot__legal {
    margin-bottom: 32px;
  }

  .quote__portrait {
    min-height: 256px;
  }
}