:root {
  /* The page has one look. Declaring dark support (here and in the media query
     at the bottom of this block) is what stops phone browsers such as Samsung
     Internet from applying their own forced dark conversion. */
  color-scheme: light dark;
  --shell: #fbf7f1;
  --sand: #f3e8da;
  --aqua: #d6ebe8;
  --pool: #58aeb0;
  --lagoon: #1a5661;
  --deep: #154047;
  --clay: #b0826a;
  --clay-dark: #8b6250;
  --ink: #2b3a3d;
  --ink-soft: #55676a;
  --line: rgba(15, 70, 80, .16);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Intentionally the same palette as above: this is the page's "dark theme". */
@media (prefers-color-scheme: dark) {
  :root {
    --shell: #fbf7f1;
    --sand: #f3e8da;
    --aqua: #d6ebe8;
    --pool: #58aeb0;
    --lagoon: #1a5661;
    --deep: #154047;
    --clay: #b0826a;
    --clay-dark: #8b6250;
    --ink: #2b3a3d;
    --ink-soft: #55676a;
    --line: rgba(15, 70, 80, .16);
  }
  html, body { background: #fbf7f1; color: #2b3a3d; }
}

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

html { scroll-behavior: smooth; scroll-padding-top: 24px; background: var(--shell); }

body {
  margin: 0;
  font-family: "Heebo", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--shell);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }

h1 { font-size: clamp(2.2rem, 5.2vw, 3.7rem); font-weight: 300; line-height: 1.15; }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 300; line-height: 1.2; margin-bottom: 1.4rem; }
h3 { font-size: 1.2rem; font-weight: 500; line-height: 1.35; margin-bottom: .35rem; }

.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }
.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section--shell { background: var(--shell); }
.section--sand { background: var(--sand); }
.section--aqua { background: linear-gradient(180deg, var(--aqua), #e6f2ee); }
.section--clay { background: var(--clay-dark); color: #fff7ef; }
.section--deep { background: var(--deep); color: #eef7f6; }
/* a one-line note between two sections */
.section--notice { padding: 20px 0; background: var(--aqua); color: var(--lagoon); text-align: center; font-size: 1.05rem; }
.section--notice b { font-weight: 600; }
.notice__mark { margin-inline-end: .35em; color: var(--clay-dark); font-size: 1.5em; font-weight: 600; line-height: 0; vertical-align: -.22em; }
.lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 46ch; margin-bottom: 2.4rem; }
.lead--wide { max-width: 62ch; }
.lead--tight { margin-bottom: 1rem; }
.lead--flush { margin-bottom: 0; }
.lead--close { color: var(--lagoon); font-weight: 500; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .8em 1.6em;
  font: 500 .95rem/1.3 "Heebo", sans-serif; letter-spacing: .04em;
  color: #fff; background: var(--lagoon);
  border: 1px solid transparent; border-radius: 0;
  text-decoration: none; cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.btn:hover { background: var(--deep); }
.btn:focus-visible, .link:focus-visible, summary:focus-visible, .fab:focus-visible { outline: 3px solid var(--pool); outline-offset: 3px; }
.btn--clay { background: var(--clay-dark); }
.btn--clay:hover { background: #74503f; }
.btn--light { background: #fff7ef; color: var(--deep); }
.btn--light:hover { background: #fff; }
.btn--ghost { background: transparent; border-color: rgba(255, 247, 239, .6); color: #fff7ef; }
.btn--ghost:hover { background: rgba(255, 247, 239, .12); }
.btn--below { margin-top: 2.4rem; }

.link { color: var(--lagoon); font-weight: 600; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.link:hover { color: var(--pool); }

.draft {
  display: inline-block; vertical-align: middle;
  margin-inline-start: .4em; padding: .1em .65em;
  font-size: .68rem; font-weight: 500; letter-spacing: .02em; line-height: 1.7;
  color: currentColor; border: 1px dashed currentColor; opacity: .7;
}

/* ---------- hero ---------- */
.hero { background: var(--deep); color: #fff; text-align: center; }
.hero__media { background: var(--deep); }
.hero__media video { display: block; width: 100%; height: auto; max-height: 82svh; aspect-ratio: 16 / 9; object-fit: cover; }
.hero__text { background: var(--deep); padding-block: clamp(36px, 6vw, 64px) clamp(48px, 7vw, 80px); }
.eyebrow { font-size: .8rem; font-weight: 400; letter-spacing: .28em; color: var(--clay-dark); margin-bottom: 1rem; }
.hero .eyebrow { color: rgba(255, 255, 255, .85); }
.slogan { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: clamp(1.25rem, 2.4vw, 1.6rem); color: rgba(255, 255, 255, .9); margin-top: 1.1rem; direction: ltr; }
.hero__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 2.4rem; }
.hero .btn { background: transparent; border-color: rgba(255, 255, 255, .7); }
.hero .btn:hover { background: #fff; color: var(--deep); }
.hero .btn--light { background: #fff7ef; color: var(--deep); border-color: transparent; }
/* landing page: a clean line with Adi's name above the film */
.hero__text--name { background: var(--shell); color: var(--deep); padding-block: clamp(40px, 6vw, 72px); }
.hero__text--name h1 { font-size: clamp(2.8rem, 7vw, 4.6rem); font-weight: 300; line-height: 1.05; }
.hero__sub { margin-top: .5rem; font-size: clamp(1.2rem, 2.6vw, 1.7rem); font-weight: 300; color: var(--clay-dark); }
/* the band under the film carries the slogan */
.hero__band { display: grid; place-items: center; min-height: clamp(64px, 9vw, 120px); padding: 18px 20px; background: var(--sand); }
.hero__band .slogan { margin: 0; color: var(--deep); font-size: clamp(1.35rem, 3.4vw, 2.2rem); font-weight: 500; line-height: 1.2; }
/* the booking page has no film, so its heading block stands alone */
.hero--plain .hero__text { padding-top: clamp(64px, 10vw, 120px); }

/* ---------- about ---------- */
.split--about { align-items: center; }
/* her trainings: two lines of names with thin clay separators, no boxes */
.training { margin-top: 2.2rem; max-width: 34rem; }
.training h3 { margin-bottom: .6rem; }
/* each line stays whole; on a narrow phone the text gets a little smaller instead of wrapping */
.training p { color: var(--lagoon); font-size: clamp(.82rem, 4.1vw, 1.02rem); line-height: 1.9; white-space: nowrap; }
.training .sep { margin-inline: .6em; color: var(--clay); }
/* "more about Adi": a small outlined toggle that opens a few more paragraphs */
.more { margin-top: 1.8rem; max-width: 34rem; }
.more summary { display: inline-flex; align-items: center; gap: .7em; padding: .55em 1.3em; border: 1px solid var(--lagoon); color: var(--lagoon); font-size: .95rem; font-weight: 500; cursor: pointer; list-style: none; transition: background .25s, color .25s; }
.more summary::-webkit-details-marker { display: none; }
.more summary:hover { background: var(--lagoon); color: #fff; }
.more summary::after { content: ""; width: 7px; height: 7px; border-inline-start: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.more[open] summary::after { transform: translateY(2px) rotate(225deg); }
.more__close, .more[open] .more__open { display: none; }
.more[open] .more__close { display: inline; }
.more__body { padding-top: 1.2rem; color: var(--ink-soft); }
/* her studies: the year in a narrow column, then what she studied */
.cv > li { display: grid; grid-template-columns: 3.4em 1fr; gap: .8em; padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .98rem; line-height: 1.5; }
.cv ul li + li { margin-top: .35rem; }
/* a small soft dot before each study */
.cv ul li { position: relative; padding-inline-start: 1.05em; }
.cv ul li::before { content: ""; position: absolute; inset-inline-start: .15em; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: var(--clay); opacity: .55; }
/* on a phone the year stands on its own line, with its studies under it */
@media (max-width: 560px) { .cv > li { grid-template-columns: 1fr; gap: .25em; padding: .9rem 0; } }
/* when the list opens, the years come in one after another, like the rest of the page */
.more[open] .cv > li { animation: rise-in .8s var(--ease) both; animation-delay: calc(var(--d, 0) * 110ms + 60ms); }
@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } }
.cv__year { color: var(--clay-dark); font-weight: 600; font-variant-numeric: tabular-nums; }
/* the line under her name sits close to it */
.role { margin: -.9rem 0 1.4rem; color: var(--clay-dark); font-weight: 500; letter-spacing: .02em; }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.card {
  grid-column: span 2;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); overflow: hidden;
}
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--ease); }
.card:hover img { transform: scale(1.03); }
.card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.card__body p { color: var(--ink-soft); font-size: 1rem; }
.card .link { margin-top: auto; padding-top: .6rem; }
.card--wide { grid-column: span 3; flex-direction: row; }
.card--wide img { width: 42%; aspect-ratio: auto; }
.card--wide .card__body { justify-content: center; }
.card--wide .link { margin-top: .4rem; }

/* horizontal gallery; the auto margins center it while it still fits on one row */
.praise { text-align: center; }
.reviews { position: relative; display: flex; gap: 22px; padding-bottom: 10px; overflow-x: auto; scroll-snap-type: x mandatory; }
.reviews { scrollbar-width: none; }
.reviews::-webkit-scrollbar { display: none; }
.review { flex: 0 0 min(460px, 86%); scroll-snap-align: center; padding: 34px 32px; background: #fff; border: 1px solid var(--line); text-align: center; }
.review:first-child { margin-inline-start: auto; }
.review:last-child { margin-inline-end: auto; }
.review { display: flex; flex-direction: column; justify-content: center; }
/* long reviews are cut to a few lines; main.js adds a button that opens the full text */
.review p { font-size: 1.1rem; font-weight: 300; line-height: 1.6; color: var(--lagoon); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; }
.review.is-open p, .fd .review p { display: block; }
.review__more { align-self: center; margin-top: .8rem; padding: 0; border: 0; background: none; font: 500 .9rem/1.4 "Heebo", sans-serif; color: var(--clay-dark); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.review__more:focus-visible { outline: 3px solid var(--pool); outline-offset: 3px; }
.review cite { display: block; margin-top: 1rem; font-style: normal; font-size: .85rem; color: var(--clay-dark); letter-spacing: .06em; }
.rating { margin-top: 1.6rem; text-align: center; }
.rating a { display: inline-flex; align-items: center; gap: .6em; padding: .45em 1.1em; border: 1px solid var(--line); background: #fff; color: var(--lagoon); font-weight: 500; font-size: .95rem; text-decoration: none; transition: border-color .25s; }
.rating a:hover { border-color: var(--pool); }
.rating a:focus-visible { outline: 3px solid var(--pool); outline-offset: 3px; }
.rating__stars { color: #d9a441; letter-spacing: .08em; }

/* ---------- closing: the water photo with Arjana's words in the open water above the hand ---------- */
.section--closing {
  display: flex; align-items: flex-start; min-height: clamp(460px, 86svh, 820px); padding-top: clamp(72px, 14svh, 150px);
  color: #fff; text-align: center;
  background: linear-gradient(180deg, rgba(21, 64, 71, .5), rgba(21, 64, 71, .12) 58%, rgba(21, 64, 71, .25)), var(--deep) url("../assets/img/hero-water.jpg") 58% center / cover;
}
.closing__quote p { max-width: 21em; margin-inline: auto; font: italic 500 clamp(1.6rem, 4vw, 2.8rem)/1.25 "Cormorant Garamond", serif; text-shadow: 0 1px 22px rgba(21, 64, 71, .55); }
.closing__quote cite { display: block; margin-top: 1rem; font: 500 .95rem/1 "Cormorant Garamond", serif; font-style: normal; letter-spacing: .28em; text-transform: uppercase; text-shadow: 0 1px 14px rgba(21, 64, 71, .6); }

/* ---------- guidelines (photo bg) ---------- */
.section--photo { color: #f4fbfa; background: linear-gradient(180deg, rgba(21, 64, 71, .78), rgba(26, 86, 97, .9)), url("../assets/img/water-hand.jpg") center / cover; background-attachment: scroll, fixed; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.trio__item { display: flex; gap: 16px; align-items: flex-start; }
.trio__item p { color: rgba(244, 251, 250, .82); }
.ico { flex: none; width: 46px; height: 46px; display: grid; place-items: center; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); }
svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ico svg { width: 24px; height: 24px; }

/* ---------- photo strip ---------- */
/* four small photos to a row (two and a bit on a phone, so the next one peeks in) */
.strip { display: flex; gap: 14px; margin-top: clamp(40px, 6vw, 72px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip img { flex: 0 0 calc((100% - 42px) / 4); min-width: 0; aspect-ratio: 4 / 5; object-fit: cover; scroll-snap-align: start; }

/* ---------- benefits of water ---------- */
.why { text-align: center; }
.orbit { position: relative; width: min(600px, 100%); aspect-ratio: 1; margin: 2.4rem auto 0; }
.orbit::before { content: ""; position: absolute; inset: 14%; border: 2px dotted rgba(26, 86, 97, .28); border-radius: 50%; }
.orbit__core, .orbit li { position: absolute; display: grid; place-items: center; padding: 0 .5em; border-radius: 50%; line-height: 1.25; text-wrap: balance; }
.orbit__core { inset: 34%; background: var(--deep); color: #fff; font-size: clamp(1rem, 3.4vw, 1.55rem); font-weight: 300; box-shadow: 0 26px 50px -22px rgba(21, 64, 71, .6); }
.orbit li { left: calc(var(--x) - 14%); top: calc(var(--y) - 14%); width: 28%; height: 28%; background: #fff; color: var(--lagoon); font-size: clamp(.82rem, 2.7vw, 1.15rem); box-shadow: 0 20px 44px -20px rgba(26, 86, 97, .4); }

/* ---------- duo ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 80px); }
.duo p, .ticks { color: var(--ink-soft); }
.duo--3 { grid-template-columns: repeat(3, 1fr); }
.h3--gap { margin-top: 1.1rem; }
.ticks { display: grid; gap: .3rem; }
.ticks li { display: flex; gap: .6em; align-items: baseline; }
.ticks li::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--pool); transform: translateY(-1px); }

/* ---------- directions ---------- */
.section--clay p { color: rgba(255, 247, 239, .86); }
.mapcard { margin-top: 22px; max-width: 720px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 18px 22px; background: rgba(255, 247, 239, .12); border: 1px solid rgba(255, 247, 239, .25); }
.mapcard__text { display: grid; line-height: 1.5; }
.mapcard__src { font-size: .8rem; opacity: .65; }
.mapcard__text span:last-child { opacity: .7; font-size: .95rem; }
.mapcard__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.note { margin-top: 26px; opacity: .8; }

/* ---------- split (payment / faq) ---------- */
.split { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.split--faq { grid-template-columns: 1.2fr .8fr; align-items: center; }
.split__media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.section--aqua .split__media { position: sticky; top: 32px; }

.bar { border-inline-start: 2px solid var(--lagoon); padding: 4px 22px 6px; margin-bottom: 26px; }
.bar p { color: var(--ink-soft); }
.bar__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.prices { margin: .5rem 0 .8rem; }
.prices li { display: flex; justify-content: space-between; gap: 16px; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.prices b { color: var(--lagoon); font-weight: 600; white-space: nowrap; }
.fine { font-size: .95rem; }

/* ---------- gift voucher ---------- */
.gift { text-align: center; }
.gift .lead { margin-inline: auto; }
.vouchers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 820px; margin: 0 auto 2.4rem; }
.vouchers img { width: 100%; border: 1px solid var(--line); }

/* ---------- timeline ---------- */
.timeline { position: relative; display: grid; gap: 34px; max-width: 860px; margin-top: 2rem; }
.timeline::before { content: ""; position: absolute; top: 6px; bottom: 6px; inset-inline-start: 50%; width: 1.5px; background: var(--line); }
.timeline li { position: relative; width: 50%; padding-inline-end: 48px; }
.timeline li:nth-child(even) { margin-inline-start: 50%; padding-inline: 48px 0; }
.timeline p { color: var(--ink-soft); }
.timeline__ico { position: absolute; top: 0; inset-inline-end: -20px; width: 40px; height: 40px; display: grid; place-items: center; background: var(--sand); color: var(--lagoon); border: 1px solid var(--line); }
.timeline li:nth-child(even) .timeline__ico { inset-inline: -20px auto; }
.timeline__ico svg { width: 22px; height: 22px; }
.h2--second { margin-top: clamp(56px, 8vw, 96px); }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.option { padding: 24px 26px; background: var(--sand); border: 1px solid var(--line); }
.option p { color: var(--ink-soft); }

/* ---------- faq ---------- */
.faq { display: grid; gap: 4px; margin-bottom: 2rem; }
.faq details { border-bottom: 1px solid rgba(238, 247, 246, .18); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 0; font-weight: 500; font-size: 1.1rem; display: flex; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: ""; flex: none; width: 9px; height: 9px; border-inline-start: 2px solid var(--pool); border-bottom: 2px solid var(--pool); transform: rotate(45deg); transition: transform .3s var(--ease); }
.faq details[open] summary::before { transform: rotate(-45deg); }
.faq details p { padding: 0 21px 18px; color: rgba(238, 247, 246, .8); animation: open .45s var(--ease); }
@keyframes open { from { opacity: 0; transform: translateY(-6px); } }
.signoff { font-size: 1.15rem; margin-bottom: 1.4rem; }
.signoff span { font-size: .95rem; opacity: .75; }
.section--photo .note { margin-top: 2.2rem; }

/* ---------- instagram ---------- */
.insta { text-align: center; }
.insta__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 2.4rem; }
.insta__grid a { display: block; overflow: hidden; }
.insta__grid a:focus-visible { outline: 3px solid var(--pool); outline-offset: 3px; }
.insta__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 1.2s var(--ease); }
.insta__grid a:hover img { transform: scale(1.04); }

/* ---------- footer ---------- */
.footer { background: var(--shell); text-align: center; padding: clamp(56px, 8vw, 96px) 0 110px; color: var(--ink-soft); }
.logo { width: 92px; height: 92px; color: var(--clay); stroke-width: 1.1; margin-inline: auto; }
.footer__name { margin-top: 14px; font-size: 1.5rem; font-weight: 300; letter-spacing: .42em; color: var(--lagoon); padding-inline-start: .42em; }
.footer__tag { letter-spacing: .12em; font-size: .95rem; }
.footer__links { margin-top: 18px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.footer__links a { color: var(--lagoon); text-underline-offset: 4px; }
.footer__links--more { margin-top: 8px; font-size: .92rem; }
.footer__legend { margin-top: 28px; font-size: .82rem; opacity: .8; }

/* ---------- floating whatsapp ---------- */
.fab { position: fixed; inset: auto auto 22px 22px; z-index: 20; width: 56px; height: 56px; display: grid; place-items: center; color: #fff; background: #1fa855; box-shadow: 0 14px 28px -12px rgba(21, 64, 71, .7); transition: transform .3s var(--ease); }
.fab:hover { transform: scale(1.05); }
.fab svg { width: 30px; height: 30px; fill: currentColor; stroke: none; }

/* ---------- toast ---------- */
.toast { position: fixed; inset: auto 0 28px 0; margin-inline: auto; width: fit-content; z-index: 30; padding: .7em 1.4em; background: var(--deep); color: #fff; font-size: .95rem; box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .6); animation: toast 2.4s var(--ease) both; }
@keyframes toast { 0% { opacity: 0; transform: translateY(12px); } 12%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(12px); } }

/* ---------- forced-dark guard (html.fd, set when the browser force-darkens the page) ----------
   Forced dark recolors everything CSS paints; only <canvas> pixels survive. main.js draws
   each block onto canvases laid over it: .fdshot is the still layer (the block without its
   animated elements), .fdpiece is one animated element, which replays the entrance motion.
   The real elements underneath are kept at rest so they can be measured and rendered. */
.fd .reveal, .fd .load { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
.fd .faq details p, .fd .more[open] .cv > li { animation: none; }
/* the renderer reads this arrow mid-turn if it is still transitioning when a question is tapped */
.fd .faq summary::before { transition: none; }
/* each circle is cut out as its own piece, which would crop a soft shadow into a square */
.fd :is(.orbit__core, .orbit li) { box-shadow: none; }
.fd .orbit li { border: 1px solid var(--line); }
.fd :is(.hero__text, .section, .footer) { position: relative; }
.fd-still .reveal, .fd-still .load { visibility: hidden !important; }
/* the renderer does not know a closed <details> hides its answer, so say it outright */
.fd details:not([open]) > :not(summary) { display: none !important; }
.fdshot { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.fdpiece { position: absolute; z-index: 6; pointer-events: none; opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 130ms); }
.fdpiece--load { transform: translateY(26px); transition-duration: 1s; transition-delay: calc(var(--d, 0) * 140ms + 120ms); }
.fdpiece.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fdpiece { opacity: 1; transform: none; transition: none; } }

/* ---------- motion: load + scroll reveal ---------- */
.js .load { opacity: 0; transform: translateY(26px); animation: rise 1s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 140ms + 120ms); }
@keyframes rise { to { opacity: 1; transform: none; } }

.js .reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 130ms); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .load, .js .reveal { opacity: 1; transform: none; animation: none; transition: none; }
  .more[open] .cv > li { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .split, .split--faq { grid-template-columns: 1fr; }
  .card, .card--wide { grid-column: span 6; }
  .trio, .duo, .duo--3, .options, .vouchers { grid-template-columns: 1fr; }
  .insta__grid { grid-template-columns: repeat(3, 1fr); }
  .section--photo { background-attachment: scroll; }
  .section--aqua .split__media { position: static; }
  .split__media img { aspect-ratio: 4 / 3; }
  .split--faq .split__media { order: -1; }
  .timeline::before { inset-inline-start: 20px; }
  .timeline li, .timeline li:nth-child(even) { width: 100%; margin: 0; padding-inline: 58px 0; }
  .timeline__ico, .timeline li:nth-child(even) .timeline__ico { inset-inline: 0 auto; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .strip { gap: 10px; }
  .strip img { flex-basis: 42%; }
  .card--wide { flex-direction: column; }
  .card--wide img { width: 100%; aspect-ratio: 4 / 3; }
  .btn { width: 100%; }
  .hero__nav .btn, .mapcard__actions .btn { width: 100%; }
  .mapcard__actions { width: 100%; }
}

/* ---------- treatment tiles + full-screen detail ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.tile { position: relative; display: block; padding: 0; border: 0; background: var(--sand); overflow: hidden; aspect-ratio: 4 / 5; cursor: pointer; font: inherit; color: #fff7ef; text-align: start; }
.tile :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tile:hover :is(img, video) { transform: scale(1.04); }
/* the tiles come up one after another, a little slower than the usual stagger */
.js .tiles .reveal { transition-delay: calc(var(--d, 0) * 220ms); }
.hint { margin: -.8rem 0 1.4rem; font-size: .95rem; color: var(--clay-dark); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 35, 40, .55), rgba(10, 35, 40, 0) 45%); }
.tile__title { position: absolute; z-index: 1; inset-inline: 7%; bottom: 7%; font-size: clamp(1.25rem, 3.2vw, 2rem); font-weight: 300; line-height: 1.2; }
.tile:focus-visible { outline: 3px solid var(--pool); outline-offset: 3px; }
.cards--single { margin-top: 14px; }
.cards--single .card { grid-column: 1 / -1; }

.zoom { position: fixed; inset: 0; z-index: 100; background: var(--deep); color: #fff7ef; overflow: hidden; }
.zoom[hidden] { display: none; }
.zoom { touch-action: pan-y; }
.zoom__slides { position: absolute; inset: 0; }
.zoom__slides :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--ease); }
.zoom__slides .is-on { opacity: 1; }
.zoom__dots { position: absolute; z-index: 3; top: 30px; inset-inline: 0; display: flex; justify-content: center; gap: 8px; pointer-events: none; }
.zoom__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 247, 239, .45); transition: background .4s, transform .4s; }
.zoom__dots i.is-on { background: #fff7ef; transform: scale(1.3); }
.zoom::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(10, 35, 40, .88), rgba(10, 35, 40, .25) 60%, rgba(10, 35, 40, .1)); }
.zoom__text { position: absolute; z-index: 2; inset-inline: 0; bottom: 0; max-width: 680px; padding: 0 clamp(24px, 6vw, 72px) clamp(36px, 7vh, 72px); display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease) .25s, transform .6s var(--ease) .25s; }
.zoom__text h3 { font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 300; line-height: 1.15; }
.zoom__text p { font-size: clamp(1.02rem, 2.4vw, 1.2rem); line-height: 1.7; font-weight: 300; }
.zoom__text .btn { margin-top: .4rem; }
/* a long text scrolls inside the dialog, clear of the close button and the dots */
.zoom__text { max-height: calc(100% - 84px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.zoom__text::-webkit-scrollbar { display: none; }
.zoom__text .rest:not([hidden]) { display: flex; flex-direction: column; gap: 1rem; }
.zoom__text .opt b:first-child { display: block; font-weight: 500; }
.zoom__text .opt__price { display: block; margin-top: .2rem; font-weight: 500; }
.nowrap { white-space: nowrap; }
.zoom__text .facts { font-size: .95rem; color: rgba(255, 247, 239, .85); }
.zoom__text .facts .sep { margin-inline: .5em; opacity: .7; }
.zoom__more { padding: 0; border: 0; background: none; font: 500 1rem/1.4 "Heebo", sans-serif; color: #fff7ef; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
/* with the whole text open, the photo dims behind it */
.zoom::before { transition: background-color .5s; }
.zoom.is-reading::before { background-color: rgba(10, 35, 40, .5); }
.zoom__more:focus-visible { outline: 3px solid var(--pool); outline-offset: 3px; }
.zoom.is-open .zoom__text { opacity: 1; transform: none; }
.zoom__close { position: absolute; z-index: 3; top: 16px; right: 16px; width: 48px; height: 48px; border: 1px solid rgba(255, 247, 239, .6); border-radius: 50%; background: rgba(10, 35, 40, .35); color: #fff7ef; font-size: 2rem; line-height: 1; cursor: pointer; }
.zoom__close:hover { background: rgba(10, 35, 40, .6); }
.zoom__close:focus-visible { outline: 3px solid var(--pool); outline-offset: 3px; }
.zoom { transition: clip-path .55s var(--ease); }
@media (prefers-reduced-motion: reduce) { .zoom, .zoom__text { transition: none; } }
@media (max-width: 520px) { .tiles { gap: 10px; } .cards--single { margin-top: 10px; } }
@media (min-width: 900px) { .tile { aspect-ratio: 1 / 1; } }
@media (min-width: 900px) { .cards--single .card { flex-direction: row; } .cards--single .card img { width: 42%; aspect-ratio: auto; } .cards--single .card__body { justify-content: center; } }