/* ==========================================================================
   אדוות הריפוי — clean rebuild
   Palette: mint #38A168 | teal #037892 | coral #EE6868 | bone #F2F2F0
            navy #0D2352 | green #4AA81E | headline gradient #0496AC→#5A9329
   (mint/teal/coral/cyan darkened from the original Elementor values
    #80D3A6/#0388A6/#F28D8D/#05D3F2 for readable contrast on light backgrounds)
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Disacordia";
  src: url("fonts/Discordia-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Disacordia";
  src: url("fonts/Discordia-Bold.woff2") format("woff2");
  font-weight: 700 900;
  font-display: swap;
}
@font-face {
  font-family: "Monopol";
  src: url("fonts/FtMonopol-Hair.woff2") format("woff2");
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: "Monopol";
  src: url("fonts/FtMonopol-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Monopol";
  src: url("fonts/FtMonopol-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ---------- Base ---------- */
:root {
  --mint: #38A168;
  --teal: #037892;       /* darkened from #0388A6: 4.5:1+ on the bone/white backgrounds */
  --coral: #EE6868;      /* darkened from #F28D8D: 3:1+ on the card gradient */
  --bone: #F2F2F0;
  --navy: #0D2352;
  --green: #4AA81E;
  --green-text: #3B8518; /* darkened from #4AA81E for small text on white */
  /* cyan stop darkened from #05D3F2: 3:1+ where the gradient meets light bg */
  --headline-grad: radial-gradient(at top left, #04A8C4 0%, #5A9329 100%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Monopol", sans-serif;
  font-size: 18px;
  color: var(--teal);
  background: var(--bone);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

/* ---------- Layout primitives ---------- */
.section {
  position: relative;
  overflow: hidden;
}

.container {
  position: relative;
  z-index: 2;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 20px;
}
.container.narrow { max-width: 800px; }

.overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Parallax background layer (mirrors Elementor's motion-effects layer) */
.pbg {
  position: absolute;
  z-index: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  will-change: transform;
  pointer-events: none;
}
[data-parallax="y"] > .pbg {
  left: 0;
  right: 0;
  /*top: -25%;
  height: 150%; /* 25% overhang each side — the JS shifts at most 20% */
  top: -50%;
  height: 200%;
}
[data-parallax="x"] > .pbg {
  top: 0;
  bottom: 0;
  left: -20%;
  width: 140%;
}

.rich p { margin: 1em 0 2em; }
.rich p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  min-height: 88vh;
  display: flex;
  align-items: center;
  background-color: var(--bone); /* matches the overlay's bottom stop, so no hard edge can show */
}
.hero .pbg {
  background-image: url("img/hero-bg.jpg");
  top: -40%;     /* biased up: the original shows the lower band of the photo */
  height: 165%;  /* keeps 25% overhang below despite the bias */
}
.hero-overlay {
  background-image: linear-gradient(180deg, #FFFFFF1A 50%, #F2F2F0 100%);
}
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 800px;
}
.hero-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 360px;
  max-width: 90%;
  padding: 10px;
  margin-top: 60px;
  background-color: transparent;
  border-radius: 20px;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
  transition: background 0.3s, box-shadow 0.3s;
}
.hero-card:hover {
  background-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
}
.hero-title {
  margin: 0;
  font-family: "Disacordia", sans-serif;
  font-size: 90px;
  font-weight: 900;
  line-height: 1.1;
  color: #FFFFFF;
  /* tight shadow for edge contrast on light photo areas + the original soft one */
  text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.6), 0px 10px 30px #000000;
}
.wave { display: block; object-fit: contain; }
.wave-lg {
  width: 70px;
  height: 70px;
  margin: -12px;
  /* white glyph over a bright photo — shadow gives it an edge */
  filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.55));
}
.profile {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  margin: -60px 0px 0; /* hangs out over the card's top edge */
  background: rgba(255,255,255,0.60);
  box-shadow:
    0 0 0 6.5px rgba(255, 255, 255, 0.12),
    0 0 0 6px rgba(255,255,255,0.60);
}
.hero-name {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-name .name,
.hero-name .role {
  padding: 10px;
  font-size: 18px;
  line-height: 1.1;
  color: #FFFFFF;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.55), 0px 3px 10px rgba(0, 0, 0, 0.65);
}
.hero-name .name {
  font-weight: 700;
  position: relative;
  padding-left: 11px; /* space for the divider */
}
.hero-name .name::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;       /* clear the profile picture overlap */
  bottom: 6px;
  width: 1px;
  background: #FFFFFF;
}
.hero-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}
.hero-nav-link {
  display: inline-block;
  margin: 0 6px 12px;
  padding: 6px 20px;
  font-size: 16px;
  font-weight: 500;
  color: #befff4;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
  text-decoration: none;
  border: 1px solid #FFFFFF87;
  border-radius: 40px;
  transition: 0.3s;
}
.hero-nav-link:hover {
  background-color: #FFFFFF30;
  border-color: #FFFFFF;
}
.chevron {
  margin-top: 25px;
  color: #FFFFFF;
  filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.55));
  animation: hang 1.5s ease-in-out infinite alternate;
}
@keyframes hang {
  from { transform: translateY(0); }
  to   { transform: translateY(12px); }
}

/* ==========================================================================
   Intro video
   ========================================================================== */
.intro-video {
  background: var(--bone);
  padding: 10px 0 0;
  text-align: center;
}
.intro-video-player {
  display: block;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  border: 0.1px solid var(--teal);
  border-radius: 40px;
  background-color: #000;
}

/* ==========================================================================
   Intro
   ========================================================================== */
.intro {
  background: var(--bone);
  padding: 5px 0 20px;
}
.intro-text {
  text-align: center;
  font-size: 22px;
  color: var(--teal);
  text-shadow: 0px 3px 10px rgba(3, 136, 166, 0.32);
}

/* ==========================================================================
   Water-properties cards
   ========================================================================== */
.cards-section {
  background-color: #010C18;
  padding: 10px 0 340px;
}
.cards-section .pbg { background-image: url("img/lotus-bg.jpg"); }
.cards-overlay {
  background-image: linear-gradient(180deg, #F2F2F0 0%, #FFFFFF7A 100%);
}
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 460px));
  justify-content: center;
  gap: 60px 40px;
  padding-top: 60px; /* room for the overhanging icons */
}
.card {
  padding: 20px;
  text-align: center;
  background-image: linear-gradient(0deg, #FFFFFFD1 0%, #FFFFFF45 100%);
  border-radius: 50px;
  box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  transition: 0.3s;
}
.card:hover {
  transform: scale(1.05);
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1);
}
.card-icon {
  display: block;
  width: 100px;
  height: 100px;
  padding: 15px;
  margin: -60px auto 15px;
  background: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.3);
}
.card-icon img {
  height: 70px;
  width: 70px;
}
.card h3 {
  margin: 0 0 7px;
  font-family: "Disacordia", sans-serif;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--coral);
  text-shadow: 0px 3px 10px rgba(242, 141, 141, 0.37);
}
.card p {
  margin: 0;
  font-size: 18px;
  color: var(--teal);
}

/* Shape divider (wave) at the bottom of the cards section */
.shape-bottom {
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(137% + 1.3px);
  z-index: 1;
  line-height: 0;
  pointer-events: none;
}
.shape-bottom svg {
  display: block;
  width: 100%;
  height: 307px;
  fill: var(--bone);
}

/* ==========================================================================
   Split (two-column) sections
   ========================================================================== */
.split {
  background: var(--bone);
  padding: 70px 0;
}
.split .container { max-width: 1400px; }
.split.watsu {
  background: linear-gradient(180deg, #F2F2F0 0%, #F8FBFC 100%);
}
.two-col {
  display: grid;
  grid-template-columns: 2fr 3.4fr; /* text / image — image dominant */
  gap: 90px;
  align-items: center;
}
.two-col.reverse { grid-template-columns: 3.4fr 2fr; }
/* bleed the blob toward the outer edge, away from the text */
.two-col .col-img { margin-inline-end: -80px; }         /* image in left column (RTL) */
.two-col.reverse .col-img { margin-inline-start: -80px; margin-inline-end: 0; } /* image in right column */
.headline {
  margin: 0;
  text-align: center;
  font-family: "Disacordia", sans-serif;
  font-size: 40px;
  font-weight: 900;
  line-height: 1.1;
  background-image: var(--headline-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0px 30px 90px rgba(102, 242, 233, 0.56));
}
.headline-en {
  display: block;
  margin-top: 8px;
  text-align: center;
}
.wave-sm { width: 100px; height: 100px; margin: -20px 0; }
/* orig: split headlines/text are start-aligned (right in RTL), 32px */
.split .headline, .split .headline-en { text-align: start; }
.split .headline { font-size: 46px; }
.side-text {
  font-size: 20px;
  color: var(--teal);
  text-shadow: 0px 3px 10px rgba(3, 136, 166, 0.32);
}
.side-text p { margin: 0; } /* no gaps between lines in the text block */
.split.solo { text-align: center; }
.split.solo .container { max-width: 800px; }
.split.solo .headline,
.split.solo .headline-en { text-align: center; }
.split.solo .wave-sm { margin-inline: auto; }
.split.solo .side-text { margin-top: 15px; }
.split.solo .side-text p { margin: 0 0 0.6em; }
.split.solo .side-text p:last-child { margin-bottom: 0; }
.blob-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2; /* orig blobs render 658x440 */
  object-fit: cover;
  -webkit-mask-image: url("img/blob.svg");
  -webkit-mask-size: contain;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("img/blob.svg");
  mask-size: contain;
  mask-position: center center;
  mask-repeat: no-repeat;
}
/* Mask lives on this fixed wrapper so the photo inside can be panned
   with a transform without moving the blob cutout itself. */
.blob-mask {
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3 / 2;
  -webkit-mask-image: url("img/blob.svg");
  -webkit-mask-size: contain;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("img/blob.svg");
  mask-size: contain;
  mask-position: center center;
  mask-repeat: no-repeat;
}
.blob-mask-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.girl-pool-mask .blob-mask-img {
  transform: scale(1.3) translate(15%, 11%);
}

/* ==========================================================================
   Blog gallery (home page teaser)
   ========================================================================== */
.blog-gallery {
  background: var(--bone);
  padding: 60px 0 50px;
  text-align: center;
}
.gallery-head { margin-bottom: 35px; }
.gallery-carousel {
  position: relative;
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: 60px;
}
.gallery-track-wrap {
  overflow: hidden;
  padding: 30px 0;
  margin: -30px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%);
}
.gallery-track {
  display: flex;
  gap: 26px;
  width: max-content;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 1.2s ease-in-out;
}
.gallery-track.dragging {
  cursor: grabbing;
  transition: none;
}
.gallery-track,
.gallery-item,
.gallery-item img {
  -webkit-user-drag: none;
}
@media (prefers-reduced-motion: reduce) {
  .gallery-track { transition: none; }
}
.gallery-nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--teal);
  background-color: #FFFFFF;
  border: 2px solid var(--teal);
  border-radius: 50%;
  box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: 0.3s;
}
.gallery-nav:hover {
  color: #FFFFFF;
  background-color: var(--teal);
}
.gallery-nav:disabled {
  opacity: 0.35;
  pointer-events: none;
}
.gallery-prev { right: 0; }
.gallery-next { left: 0; }
.gallery-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  width: 220px;
  background-color: #FFFFFF;
  border-radius: 24px;
  box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  transition: transform 0.3s;
}
.gallery-item:hover,
.gallery-item:focus-visible { transform: scale(1.08); }
.gallery-item img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 24px 24px 0 0;
}
.gallery-caption {
  padding: 10px 14px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--teal);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 0 0 24px 24px;
}
.gallery-more {
  margin: 35px 0 0;
  font-size: 18px;
}
.gallery-more a {
  color: var(--mint);
  font-weight: 700;
  text-decoration: none;
}
.gallery-more a:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .gallery-carousel { padding-inline: 46px; }
  .gallery-nav { width: 36px; height: 36px; }
  .gallery-item { width: 150px; }
  .gallery-item img { height: 150px; }
  .gallery-caption { padding: 8px 10px; font-size: 12px; }
  .gallery-track { gap: 16px; }
}

/* ==========================================================================
   Gift coupon section
   ========================================================================== */
.coupon {
  background-color: #F8FBFC;
  padding: 7% 0 3%;
  text-align: center;
}
.coupon .pbg {
  inset: 400px 0 0;
  background-image: url("img/lotus-bg.jpg");
  transform: scaleX(-1); /* mirrored version of the cards-section background */
  /* fades the photo in from nothing, so its top edge never reads as a hard line */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 220px);
          mask-image: linear-gradient(180deg, transparent 0, #000 220px);
}
.coupon-overlay {
  background-image: linear-gradient(180deg, #F8FBFC 0%, #F8FBFCA6 18%, #F8FBFC59 55%, #F8FBFC 100%);
}
.coupon-title { margin: 0 0 10px; }
.coupon .wave-sm { margin-inline: auto; }
.coupon-img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  margin: 35px auto 0;
  border-radius: 14px;
  box-shadow: 0 3px 8px rgba(26, 104, 122, 0.25);
}

/* ==========================================================================
   Genesis (quote) section
   ========================================================================== */
.genesis {
  background-color: #F8FBFC;
  padding: 10% 0;
  text-align: center;
}
.genesis .pbg { background-image: url("img/blue-stain-bg.jpg"); }
.genesis-overlay {
  background-image: radial-gradient(at center center, #F8FBFC52 0%, #FAFBFD 70%);
}
.wave-xl {
  width: 150px;
  height: 150px;
  margin-inline: auto;
}
.wave-xl.flip { transform: rotate(180deg); }
.genesis-quote {
  font-size: 40px;
  line-height: 1.5;
  text-align: center;
  margin: 0;
}
.genesis-src {
  margin: -10px 0 25px;
  font-size: 18px;
  font-weight: 100;
  line-height: 1.1;
  color: #2D5F0E;
}
.genesis-text {
  margin: 0 10% 1em;
  font-size: 18px;
  line-height: 1.2;
  color: var(--teal);
  text-shadow: 0px 3px 9px rgba(26, 104, 122, 0.35);
}

/* ==========================================================================
   CTA section
   ========================================================================== */
.cta {
  background-color: #CFF4F7;
  min-height: 75vh;
  padding: 40px 0 120px;
  display: flex;
  align-items: center;
  text-align: center;
}
.cta .pbg { background-image: url("img/water-texture-bg.jpg"); }
.cta-overlay {
  /* Opens on #FAFBFD, the same fill as the contact section above, so the two
     sections meet on one colour instead of on the seam between two different
     photographs. Clears by 14%, well before the CTA's own text. */
  background-image: linear-gradient(180deg,
    #FAFBFD 0%,
    #FAFBFDB3 6%,
    #59C2FF00 14%,
    #CFF4F7 100%);
}
.cta-small {
  margin: 0 0 10px;
  font-family: "Disacordia", sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--navy);
}
.cta-big {
  margin: 0 0 10px;
  font-family: "Disacordia", sans-serif;
  font-size: 40px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--navy);
}
.cta-note {
  margin: 0;
  font-size: 18px;
  color: var(--navy);
}

/* ---------- Flip box ---------- */
.flip-box {
  position: relative;
  width: 300px;
  height: 250px;
  margin: 20px auto 0;
  perspective: 1000px;
  cursor: pointer;
  outline: none;
}
.flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.6s ease;
}
.flip-front {
  background-image: radial-gradient(at center center, #7CFF3E8A 0%, #4AA81E00 50%);
  transform: rotateY(0deg);
}
.flip-back {
  background-image: radial-gradient(at center center, #FFFFFF 0%, #FFFFFF00 46%);
  transform: rotateY(180deg);
}
.flip-box:hover .flip-front,
.flip-box:focus .flip-front,
.flip-box:focus-within .flip-front { transform: rotateY(-180deg); }
.flip-box:hover .flip-back,
.flip-box:focus .flip-back,
.flip-box:focus-within .flip-back { transform: rotateY(0deg); }

.flip-icon {
  line-height: 0;
  padding: 25px;
  color: #FFFFFF;
  background-color: var(--green);
  border-radius: 50%;
}
.flip-back h3 {
  margin: 0 0 5px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--green);
}
.flip-phone {
  margin-bottom: 25px;
  font-size: 18px;
  color: var(--green-text);
  direction: ltr;
}
.flip-btn {
  display: inline-block;
  padding: 10px 30px;
  font-size: 18px;
  color: #FFFFFF;
  text-decoration: none;
  background-color: var(--green);
  border: 2px solid var(--green);
  border-radius: 10px;
  transition: 0.3s;
}
.flip-btn:hover {
  background-color: #FFFFFF;
  color: var(--green);
}

/* ==========================================================================
   Top nav link (index <-> blog)
   ========================================================================== */
.top-nav {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 100;
  padding: 10px 20px;
  font-size: 14px;
  color: var(--teal);
  background-color: #FFFFFFD1;
  border-radius: 999px;
  box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  text-decoration: none;
  transition: 0.3s;
}
.top-nav:hover {
  background-color: #FFFFFF;
  color: var(--mint);
}

/* ==========================================================================
   Blog
   ========================================================================== */
.blog-hero {
  padding: 90px 0 20px;
  text-align: center;
  background: var(--bone);
}
.blog-title {
  display: inline-block;
  font-size: 60px;
}
.blog-sub {
  margin: 15px 0 0;
  font-size: 20px;
  color: var(--teal);
}
.blog-list {
  background: var(--bone);
  padding: 40px 0 100px;
}
.post-card {
  display: block;
  scroll-margin-top: 30px;
  margin-bottom: 60px;
  overflow: hidden;
  background-image: linear-gradient(0deg, #FFFFFFD1 0%, #FFFFFF45 100%);
  border-radius: 30px;
  box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.15);
}
.post-card:last-child { margin-bottom: 0; }
.post-img {
  display: block;
  width: 100%;
}
.post-body {
  padding: 30px 30px 10px;
  font-size: 18px;
  color: var(--teal);
}
.post-body p { margin: 0 0 0.9em; }
.post-link {
  color: var(--mint);
  font-weight: 700;
  text-decoration: none;
}
.post-link:hover { text-decoration: underline; }

@media (max-width: 767px) {
  .top-nav { top: 12px; left: 12px; padding: 8px 16px; font-size: 13px; }
  .blog-hero { padding: 70px 0 10px; }
  .blog-title { font-size: 38px; }
  .blog-sub { font-size: 17px; }
  .post-body { padding: 20px 20px 5px; }
}

/* ==========================================================================
   Reviews (testimonials)
   ========================================================================== */
.review-list {
  background: var(--bone);
  padding: 40px 0 100px;
}
.review-card {
  position: relative;
  margin-bottom: 40px;
  padding: 35px 30px 30px;
  background-image: linear-gradient(0deg, #FFFFFFD1 0%, #FFFFFF45 100%);
  border-radius: 30px;
  box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.15);
}
.review-card:last-child { margin-bottom: 0; }
.review-mark {
  display: block;
  margin-bottom: 5px;
  font-family: "Disacordia", sans-serif;
  font-size: 50px;
  font-weight: 900;
  line-height: 1;
  color: var(--coral);
}
.review-card p {
  margin: 0 0 0.9em;
  font-size: 18px;
  color: var(--teal);
}
.review-card p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  .review-card { padding: 28px 20px 22px; }
}

/* ==========================================================================
   Locations
   ========================================================================== */
.location-list {
  background: var(--bone);
  padding: 40px 0 100px;
}
.location-card {
  margin-bottom: 50px;
  overflow: hidden;
  background-image: linear-gradient(0deg, #FFFFFFD1 0%, #FFFFFF45 100%);
  border-radius: 30px;
  box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.15);
}
.location-card:last-child { margin-bottom: 0; }
.location-photos {
  display: flex;
  flex-direction: column;
}
.location-photos img {
  display: block;
  width: 100%;
  height: auto;
}
.location-body {
  padding: 25px 30px 30px;
}
.location-name {
  margin: 0;
  font-family: "Disacordia", sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: var(--coral);
}

.location-footnote {
  margin: 10px 0 0;
  text-align: center;
  font-size: 15px;
  color: var(--teal);
}

@media (max-width: 767px) {
  .location-body { padding: 20px 20px 25px; }
  .location-name { font-size: 24px; }
}

/* ==========================================================================
   Videos
   ========================================================================== */
.video-list {
  background: var(--bone);
  padding: 40px 0 100px;
}
.video-card {
  margin-bottom: 40px;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
}
.video-card:last-child { margin-bottom: 0; }
.video-card-player {
  display: block;
  width: 100%;
  background-color: #000;
}

/* ==========================================================================
   Persistent contact buttons
   ========================================================================== */
.contact-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.contact-btn {
  pointer-events: auto;
  display: flex;
  padding: 10px;
  color: #FFFFFF;
  background-image: radial-gradient(at center center, #00000054 0%, #00000000 60%);
}
.contact-btn svg {
  width: 44px;  /* 22px glyph + 11px padding all round */
  height: 44px;
  padding: 11px;
  background: var(--green);
  border-radius: 50%;
  transition: 0.3s;
}
.contact-btn:hover {
  color: var(--green);
}
.contact-btn:hover svg {
  background: #FFFFFF;
}

/* ==========================================================================
   Entrance animations
   ========================================================================== */
.anim { opacity: 0; }
.anim.in { animation: 1.25s ease both; }
.anim.in[data-anim="fadeIn"]      { animation-name: fadeIn; }
.anim.in[data-anim="fadeInUp"]    { animation-name: fadeInUp; }
.anim.in[data-anim="fadeInDown"]  { animation-name: fadeInDown; }
.anim.in[data-anim="fadeInRight"] { animation-name: fadeInRight; }
.anim.in[data-anim="fadeInLeft"]  { animation-name: fadeInLeft; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-50px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim { opacity: 1; }
  .anim.in { animation: none; }
  .chevron { animation: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .profile { width: 75px; height: 75px; }
  .hero-name .name,
  .hero-name .role { padding: 5px; }

  .intro-text { font-size: 18px; }

  .cards { grid-template-columns: 1fr; gap: 80px; }
  .cards-section { padding-bottom: 180px; }
  .shape-bottom svg { height: 120px; }

  .split { padding: 40px 0; }
  .two-col, .two-col.reverse { grid-template-columns: 1fr; }
  .two-col .col-img, .two-col.reverse .col-img { order: -1; margin-inline: 0; } /* image above text, like the original */
  .headline, .split .headline { font-size: 30px; text-align: center; }
  .headline-en, .split .headline-en { text-align: center; }
  .side-text { text-align: center; }
  .wave-sm { margin-inline: auto; }

  .genesis-quote { font-size: 30px; }
  .genesis-src { font-size: 14px; }
  .genesis-text { margin-inline: 0; }

  .cta-note { margin-top: 20px; }

  .contact-btn { padding: 5px; }
}

/* ==========================================================================
   Contact form
   ========================================================================== */
.contact-form-section {
  /* #FAFBFD, not pure white: that is the colour the genesis section above
     settles to (its overlay ends on #FAFBFD from 70% out). Pure #fff is
     close enough to look intentional but different enough to draw a line
     along the boundary between the two sections. */
  background-color: #FAFBFD;
  padding-block: 70px;
}

/* Pinned to the section and carries the mask. Because it never moves, the
   fade always finishes inside the visible band no matter how far the image
   layer inside it travels. A radial fade has no edge to see at all — the
   water simply dissolves into the surrounding colour. */
.contact-form-section .pbg-mask {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Deliberately off-centre and wider than tall:
       - centre sits low (82%), so the heading at the top of the section is
         beyond the mask's reach and the water there falls away to nothing;
       - horizontal radius 88% carries the water fully out to the left and
         right edges, where it should be strongest;
       - vertical radius 62% is short enough that the top of the section is
         past the end of the gradient, so nothing can meet that edge.
     Bottom, left and right stay dense; the top clears.

     A second mask layer fades the last slice of the section out entirely.
     Without it the water is still dense where it meets the CTA, and two
     different photographs butt together on a hard line. The two layers
     intersect, so the water stays heavy at the bottom and only lets go in
     the final few percent. */
  -webkit-mask-image:
    radial-gradient(ellipse 88% 62% at 50% 82%,
      #000 0%, #000 52%, #000000E0 68%, #00000080 84%, #00000000 100%),
    linear-gradient(180deg, #000 0%, #000 84%, #00000073 94%, #00000000 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    radial-gradient(ellipse 88% 62% at 50% 82%,
      #000 0%, #000 52%, #000000E0 68%, #00000080 84%, #00000000 100%),
    linear-gradient(180deg, #000 0%, #000 84%, #00000073 94%, #00000000 100%);
          mask-composite: intersect;
}

/* The travelling layer. 160% tall with 30% hanging off each end, so the
   parallax translate — up to 20% of the section height — always has image
   to move into and never exposes an edge. The [data-parallax="y"] > .pbg
   rule does not reach this one, since it now sits inside the mask wrapper,
   so the geometry is set here. */
.contact-form-section .pbg {
  background-image: url("img/water-form-bg.jpg");
  left: 0;
  right: 0;
  top: -30%;
  height: 160%;
}

/* A circular pool of light behind the form, so the heading and the white
   card stay readable without washing the water out. Radial only — any
   linear component here would put back the horizontal lines the mask
   above exists to remove. */
/* Sits high, over the heading, where the water is now thinnest anyway — it
   only has to keep the title crisp. The form below is on a white card and
   needs no help, so the lift stops well before the dense lower water. */
.contact-form-overlay {
  background-image:
    radial-gradient(ellipse 70% 46% at 50% 16%,
      #FFFFFF73 0%,
      #FFFFFF40 45%,
      #FFFFFF00 100%);
}

.cform { margin-top: 26px; text-align: right; }

.cform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}

.cform-wide { grid-column: 1 / -1; }

.cform-field span {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  color: var(--navy);
}

.cform-field span b { color: var(--coral); }

.cform-field input,
.cform-field select,
.cform-field textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 17px;
  color: var(--navy);
  background: #fff;
  border: 1.5px solid #cfe3e5;
  border-radius: 10px;
}

.cform-field textarea { resize: vertical; }

.cform-field input:focus,
.cform-field select:focus,
.cform-field textarea:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  border-color: var(--teal);
}

/* Off-screen rather than display:none — some bots skip hidden fields, but
   fill anything they can reach in the DOM. */
.cform-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cform-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.cform-btn {
  font-family: inherit;
  font-size: 18px;
  padding: 13px 42px;
  color: #fff;
  background-color: var(--teal);
  border: 2px solid var(--teal);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.cform-btn:hover:not(:disabled) {
  background-color: transparent;
  color: var(--teal);
}

.cform-btn:disabled { opacity: .55; cursor: default; }

.cform-status { margin: 0; font-size: 16px; }
.cform-status.ok  { color: var(--green-text); }
.cform-status.err { color: var(--coral); }

@media (max-width: 600px) {
  .contact-form-section { padding-block: 50px; }
  .cform-btn { width: 100%; }
}

/* The form sits in a raised frame so it reads as a distinct thing to fill in
   rather than another band of page content. */
.cform-frame {
  margin-top: 26px;
  padding: 34px 32px;
  background: #fff;
  border: 1px solid #cfe3e5;
  border-radius: 18px;
  box-shadow: 0 6px 28px rgba(5, 69, 75, .10);
}

.cform-frame .cform { margin-top: 0; }

@media (max-width: 600px) {
  .cform-frame { padding: 24px 18px; border-radius: 14px; }
}