/* ============================================================
   ריטריט הלונג׳ביטי — page identity: "האי"
   Arrangement: cream/sand lead · palm-green slabs · sage accents ·
   gold only for luxury moments. Motif: nested contour rings.
   ============================================================ */

:root{
  --slab-bg: var(--palm);
  --accent: var(--sage);
  --accent-2: var(--mint);
}

/* gold moments */
.btn--gold{ background:var(--violet); color:#231d0c; }

/* LevitMono is a Latin face: its "1" reads as a flipped tick and its Hebrew
   falls back inconsistently, which is exactly what made the date line and the
   captions unreadable. The mono ROLE (spaced small caps) stays; the face
   becomes Assistant, as on the villa page. */
.mono, .sec-idx, .hf, .evt__cap, .intro__kick, .join__facts, .join__whats,
.place__band figcaption, .place__card figcaption, .place__mini figcaption{
  font-family:var(--sans); font-weight:700; letter-spacing:.08em; }

/* Yair + Maya, 1.9: an older, partly visually impaired audience. The chapter
   names and the small functional lines carry the information, so they read at
   body scale, not caption scale, and the sub-chapter headings stop shouting
   over the narrative. (The figcaption size lives on the .place rules below,
   which redeclare it and would otherwise win on order.) */
.sec-idx{ font-size:clamp(1rem,1.35vw,1.2rem); letter-spacing:.08em; }
.intro__kick{ font-size:clamp(.98rem,1.3vw,1.15rem) !important; letter-spacing:.1em !important; }
.sec-note{ font-size:clamp(1.1rem,1.6vw,1.3rem); }
.evt__cap{ font-size:clamp(.95rem,1.2vw,1.08rem); }

/* ---------- HERO — blue-hour villa ---------- */
.hero{ position:relative; min-height:100svh; overflow:hidden; isolation:isolate; color:var(--mist); }
.hero__bg{ position:absolute; inset:0; z-index:1; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; transform-origin:center; }
/* the living hero: the loop fades in over the still once it can actually play,
   so slow connections and reduced-motion visitors simply keep the photograph */
.hero__video{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.2s ease; }
.hero__video.on{ opacity:1; }
.hero__wash{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(270deg, rgba(18,28,24,.84) 0%, rgba(18,28,24,.56) 32%, rgba(18,28,24,.14) 64%, rgba(18,28,24,0) 100%),
    linear-gradient(12deg, rgba(18,28,24,.80) 0%, rgba(18,28,24,.34) 40%, rgba(18,28,24,.04) 70%),
    linear-gradient(180deg, rgba(18,28,24,.42) 0%, transparent 26%); }
.hero__rings{ position:absolute; z-index:3; inset-inline-start:clamp(-160px,-8vw,-60px); inset-block-end:-180px; width:min(56vw,760px); aspect-ratio:1; opacity:.5; pointer-events:none; color:rgba(203,170,93,.55); }
.hero__rings svg{ width:100%; height:100%; }
.hero__stage{ position:relative; z-index:4; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; padding-block-end:clamp(120px,16vh,180px); }
/* the identity line: what this is and where. It was 12px gold on open sky and
   nobody could read it; it is now the second-largest thing in the hero. */
.hero__kick{ font-family:var(--display); font-weight:900; font-size:clamp(1.15rem,2vw,1.7rem);
  letter-spacing:.02em; line-height:1.25; color:var(--gold2);
  margin-bottom:clamp(.9rem,1.8vw,1.4rem); opacity:0; transform:translateY(18px); }
.hero__kick .sep{ color:var(--mint); margin-inline:.35em; }
.hero__host{ margin-top:clamp(.9rem,1.8vw,1.4rem); font-size:clamp(1.05rem,1.5vw,1.35rem);
  font-weight:600; color:rgba(241,236,224,.92); opacity:0; transform:translateY(18px); }
.hero__host b{ font-weight:800; color:#FAF7EE; }
.hero__title{ font-family:var(--display); font-weight:900; font-size:clamp(3rem,9.5vw,7.6rem); line-height:.92; letter-spacing:-.02em; color:#FAF7EE; }
.hero__sub{ margin-top:clamp(1.1rem,2.2vw,1.7rem); max-width:44ch; font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.6; color:rgba(241,236,224,.88); opacity:0; transform:translateY(18px); }
.hero__cta{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-top:clamp(1.6rem,3vw,2.4rem); opacity:0; transform:translateY(18px); }
.hero__ctanote{ font-size:.95rem; color:rgba(241,236,224,.75); }
.hero__foot{ position:absolute; z-index:4; inset-block-end:clamp(26px,4vh,44px); inset-inline:0; display:flex; align-items:center; justify-content:center; gap:clamp(.9rem,2vw,1.6rem); flex-wrap:wrap; padding-inline:var(--pad); color:rgba(241,236,224,.92); }
.hf{ font-size:clamp(1rem,1.35vw,1.2rem); letter-spacing:.05em; }
.hf b{ font-weight:800; color:var(--gold2); }
.hdiv{ display:inline-block; flex:none; background:rgba(203,170,93,.65); }
.hdiv--dot{ width:7px; height:7px; border-radius:50%; }
.br-d{ display:block; }
@media (max-width:720px){
  .hero__stage{ align-items:stretch; }
  .hero__title{ font-size:clamp(2.7rem,13.5vw,4.2rem); }
  .hero__kick{ font-size:clamp(1.05rem,4.6vw,1.35rem); }
  .br-d{ display:none; }
  .hero__rings{ display:none; }
}
/* Short laptop windows: the hero stack grew past the fold and bisected the CTA
   row on the villa page. Same frame, same fix here, before it can happen. */
@media (min-width:721px) and (max-height:880px){
  .hero__stage{ padding-block-end:clamp(104px,13vh,150px); }
  .hero__title{ font-size:clamp(2.8rem,7.2vw,5.8rem); }
  .hero__host{ margin-top:clamp(.7rem,1.2vw,1rem); }
  .hero__sub{ margin-top:clamp(.9rem,1.6vw,1.3rem); }
  .hero__cta{ margin-top:clamp(1.1rem,2vw,1.7rem); }
}
@media (min-width:721px) and (max-height:740px){
  .hero__title{ font-size:clamp(2.5rem,5.8vw,4.6rem); }
  .hero__kick{ font-size:clamp(1.05rem,1.6vw,1.35rem); }
  .hero__sub{ font-size:clamp(.98rem,1.2vw,1.1rem); line-height:1.55; }
}

/* ---------- evt tweaks on palm slab ---------- */
.evt__v{ color:var(--mist); }

/* ---------- 01 · PLACE ---------- */
/* 02 · תזונה follows this chapter now, and it is light-on-light with no
   transition arc between them, so the deep arc clearance moved to .food */
.place{ padding-block:clamp(90px,12vw,170px) clamp(40px,6vw,80px); }
.place__band{ position:relative; margin-top:clamp(1rem,3vw,2rem); height:clamp(300px,52vw,620px); overflow:hidden; }
.place__band img{ width:100%; height:120%; object-fit:cover; }
.place__band figcaption, .place__card figcaption, .place__mini figcaption{
  position:absolute; inset-block-end:12px; inset-inline-start:14px; z-index:2;
  font-size:clamp(.9rem,1.1vw,1rem); letter-spacing:.06em; color:rgba(241,236,224,.92);
  background:rgba(24,32,28,.45); padding:.35em .8em; border-radius:100px; backdrop-filter:blur(6px); }
/* a sub-head inside a chapter: smaller than the chapter title, louder than body,
   so "חמש סוויטות" reads as a movement rather than a second chapter */
.subhead{ margin-top:clamp(2rem,4vw,3.4rem); }
.subhead h3{ font-family:var(--display); font-weight:800; font-size:clamp(1.6rem,3vw,2.6rem); letter-spacing:-.02em; margin-bottom:.7rem; }
.subhead p{ font-size:clamp(1.05rem,1.4vw,1.2rem); line-height:1.65; color:var(--ink2); max-width:52ch; }
.place .gal-row{ margin-top:clamp(1.2rem,2.4vw,2rem); }

/* ---------- 02 · NUTRITION (mosaic) ----------
   Yair: the food is local Thai cooking rebuilt on the health journey's
   nutritional values. Same mosaic grammar as the villa's experience grid,
   arranged in this page's palette: sand text cards, palm for the protocol. */
.food{ padding-block:clamp(60px,8vw,110px) clamp(150px,18vw,260px); }
.food__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.8rem,1.4vw,1.2rem); margin-top:clamp(1.8rem,3.5vw,3rem); }
.fcard{ position:relative; border-radius:var(--r); overflow:hidden; min-height:clamp(200px,24vw,320px); }
.fcard--wide{ grid-column:span 2; }
.fcard--img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fcard--img figcaption{ position:absolute; inset-inline:0; inset-block-end:0; z-index:2; padding:1rem 1.2rem;
  color:var(--mist); font-weight:700; font-size:clamp(.95rem,1.2vw,1.08rem); letter-spacing:.02em;
  background:linear-gradient(0deg, rgba(24,32,28,.82), transparent); }
.fcard--txt{ background:var(--sand); padding:clamp(1.3rem,2.2vw,2rem); display:flex; flex-direction:column; justify-content:flex-end; gap:.6rem; min-height:0; }
.fcard--txt h3{ font-family:var(--display); font-weight:800; font-size:clamp(1.2rem,1.9vw,1.6rem); letter-spacing:-.01em; }
.fcard--txt p{ font-size:clamp(1rem,1.25vw,1.1rem); line-height:1.55; color:var(--ink2); max-width:34ch; }
.fcard--palm{ background:var(--palm); }
.fcard--palm h3{ color:var(--mist); }
.fcard--palm p{ color:var(--mist2); }
@media (max-width:900px){ .food__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){
  .food__grid{ grid-template-columns:1fr; }
  .fcard--wide{ grid-column:auto; }
  .fcard--img{ min-height:230px; }
}

/* ---------- 03 · PROTOCOL (palm slab) ---------- */
.protocol .sec-head{ margin-bottom:clamp(2rem,4vw,3.4rem); }
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.8rem); }
.pillar{ background:var(--palm2); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; }
.pillar figure{ height:clamp(200px,22vw,300px); overflow:hidden; }
.pillar img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.pillar:hover img{ transform:scale(1.05); }
.pillar h3{ font-family:var(--display); font-weight:800; font-size:clamp(1.12rem,1.55vw,1.35rem); letter-spacing:-.01em; padding:1.2rem 1.3rem .5rem; }
.pillar p{ padding:0 1.3rem 1.5rem; font-size:clamp(1rem,1.2vw,1.08rem); line-height:1.6; color:var(--mist2); }
/* the learning layer. Yair, 1.9: the retreat is the health journey compressed
   into six days, and that was missing from the page. Four numbered rows, no
   photography, so the depth reads as substance rather than more atmosphere. */
.layers{ margin-top:clamp(2.2rem,4.5vw,3.6rem); border-block-start:1px solid rgba(241,236,224,.18); padding-block-start:clamp(1.6rem,3vw,2.6rem); }
.layers__lead{ font-size:clamp(1.05rem,1.4vw,1.2rem); color:var(--gold2); font-weight:700; margin-bottom:clamp(1.2rem,2.4vw,2rem); }
.layers__list{ list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.4rem,3vw,2.6rem) clamp(2rem,5vw,4.5rem); counter-reset:none; }
.layer{ display:flex; gap:clamp(.9rem,1.6vw,1.4rem); align-items:flex-start; }
.layer__n{ flex:none; font-family:var(--sans); font-weight:800; font-size:clamp(1rem,1.3vw,1.15rem); letter-spacing:.06em; color:var(--mint); padding-block-start:.28em; }
.layer h4{ font-family:var(--display); font-weight:800; font-size:clamp(1.2rem,1.8vw,1.5rem); letter-spacing:-.01em; margin-bottom:.5rem; }
.layer p{ font-size:clamp(1rem,1.3vw,1.1rem); line-height:1.6; color:var(--mist2); max-width:44ch; }
.layers__foot{ margin-top:clamp(1.6rem,3vw,2.4rem); font-family:var(--display); font-weight:800;
  font-size:clamp(1.3rem,2.4vw,2rem); letter-spacing:-.01em; color:#FAF7EE; }
@media (max-width:820px){ .pillars{ grid-template-columns:1fr; } .layers__list{ grid-template-columns:1fr; } }

/* ---------- 04 · MOMENTS ---------- */
.moments{ padding-block:clamp(90px,12vw,170px) 0; }
.moments .gal-row{ margin-top:clamp(.5rem,1.5vw,1rem); }

/* ---------- 05 · MAYA ---------- */
.host{ padding-block:clamp(90px,12vw,170px) clamp(30px,5vw,60px); }
.host__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.host__photo{ position:relative; }
.host__photo img{ position:relative; z-index:2; width:min(100%,440px); border-radius:var(--r); margin-inline:auto; }
.host__rings{ position:absolute; z-index:1; inset-inline-end:-14%; inset-block-start:-16%; width:76%; aspect-ratio:1; color:var(--sage); opacity:.35; }
.host__rings svg{ width:100%; height:100%; }
.host__txt p{ font-size:clamp(1.02rem,1.5vw,1.2rem); line-height:1.7; color:var(--ink2); max-width:52ch; margin-bottom:1.1rem; }
.host__txt .sec-head{ margin-bottom:clamp(1.4rem,2.6vw,2rem); }
.host__more a{ color:var(--sage); font-weight:600; text-decoration:underline; text-underline-offset:4px; }
@media (max-width:820px){ .host__grid{ grid-template-columns:1fr; } .host__photo img{ width:min(100%,340px); } }

/* ---------- 06 · WHAT'S INCLUDED (sand) ----------
   Its own chapter now, at the end, with the price at the top of it: the two
   questions a reader arrives with, answered in one place. */
.incl{ background:var(--sand); padding-block:clamp(80px,10vw,140px) clamp(150px,18vw,260px); }
.incl .sec-head{ margin-bottom:clamp(1.8rem,3.5vw,3rem); }
.price{ display:flex; flex-wrap:wrap; gap:clamp(1.2rem,3vw,2.6rem); justify-content:space-between;
  background:var(--paper); border:1px solid rgba(27,26,22,.12); border-radius:var(--r);
  padding:clamp(1.3rem,2.6vw,2.2rem); margin-bottom:clamp(1.2rem,2.4vw,2rem); }
.price__cell{ display:flex; flex-direction:column; gap:.35rem; min-width:180px; }
.price__cap{ font-weight:700; font-size:clamp(.95rem,1.2vw,1.08rem); letter-spacing:.1em; color:var(--sage); }
.price__v{ font-family:var(--display); font-weight:800; font-size:clamp(1.35rem,2.4vw,1.95rem); letter-spacing:-.01em; }
.price__cell--rate .price__v{ color:var(--violet); }
.price__cell--rate .price__cap{ font-family:var(--sans); letter-spacing:.06em; }
/* the caveat rides directly under the rates so nobody can skim past it */
.price__note{ margin-top:clamp(.9rem,1.6vw,1.3rem); font-size:clamp(1.02rem,1.3vw,1.15rem);
  line-height:1.6; color:var(--ink2); max-width:64ch; }
.price__s{ font-size:clamp(.98rem,1.25vw,1.1rem); color:var(--ink2); }

.incl__cols{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1rem,2.4vw,2rem); }
.incl__col{ background:var(--paper); border:1px solid rgba(27,26,22,.12); border-radius:var(--r); padding:clamp(1.4rem,2.6vw,2.2rem); }
.incl__col h3{ font-family:var(--display); font-weight:800; font-size:clamp(1.35rem,2.2vw,1.85rem);
  letter-spacing:-.01em; color:var(--ink); margin-bottom:clamp(1rem,1.8vw,1.4rem); }
.incl__col ul{ list-style:none; display:flex; flex-direction:column; gap:.85rem; }
.incl__col li{ position:relative; padding-inline-start:1.6em; font-size:clamp(1.05rem,1.35vw,1.18rem); line-height:1.55; }
.incl__col li::before{ content:""; position:absolute; inset-inline-start:0; top:.52em; width:10px; height:10px; border-radius:50%; background:var(--sage); }
.incl__col--not h3{ color:var(--ink2); }
.incl__col--not li{ color:var(--ink2); }
.incl__col--not li::before{ background:rgba(27,26,22,.22); }
@media (max-width:820px){ .incl__cols{ grid-template-columns:1fr; } }

/* ---------- 07 · JOIN (palm slab) ---------- */
.join__box{ border:1px solid rgba(203,170,93,.35); border-radius:var(--r); padding:clamp(1.8rem,4vw,3.2rem); text-align:center; display:flex; flex-direction:column; align-items:center; gap:1.2rem;
  background:radial-gradient(120% 160% at 50% 0%, rgba(203,170,93,.10), transparent 55%); }
.join__facts{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:center; color:var(--gold2); font-size:clamp(1.05rem,1.5vw,1.25rem); letter-spacing:.04em; }
.join__dot{ width:7px; height:7px; border-radius:50%; background:var(--mint); }
.join__note{ max-width:46ch; font-size:clamp(1.05rem,1.4vw,1.2rem); line-height:1.6; color:var(--mist2); }
.btn--xl{ font-size:clamp(1.1rem,1.6vw,1.3rem); padding:1.05em 2.2em; }

/* leaving details replaces the WhatsApp route: the form IS the conversion now,
   so it carries the gold button rather than sitting quietly under one. */
.rlead{ width:min(100%,520px); margin-top:clamp(.4rem,1vw,.8rem); }
.rlead__form{ display:flex; flex-direction:column; gap:clamp(.8rem,1.6vw,1.1rem); text-align:start; }
.rfield{ display:flex; flex-direction:column; gap:.4rem; }
.rfield label{ font-size:clamp(.98rem,1.2vw,1.08rem); font-weight:600; color:var(--mist); }
.rfield label b{ color:var(--gold2); }
.rfield label .opt{ font-weight:400; color:var(--mist2); font-size:.92em; }
.rfield input{ font-family:inherit; font-size:1.05rem; color:var(--mist); background:rgba(241,236,224,.06);
  border:1px solid rgba(241,236,224,.24); border-radius:14px; padding:.85em 1em; transition:border-color .25s, background .25s; }
.rfield input:focus{ outline:none; border-color:var(--gold2); background:rgba(241,236,224,.1); }
.rfield input.err{ border-color:#E4796B; }
.rlead__form .btn{ margin-top:.4rem; justify-content:center; }
/* family.css sizes EVERY span inside .btn as the 7px dot, so the label span
   needs its own reset or the words stack and spill out of the pill */
.rlead__form .btn .t{ width:auto; height:auto; border-radius:0; background:none; flex:0 1 auto; }
.rlead__err{ min-height:1.2em; font-size:.98rem; color:#E4796B; }
.rlead__done{ display:none; font-size:clamp(1.05rem,1.4vw,1.2rem); line-height:1.6; color:var(--mint); }
.rlead.sent .rlead__form{ display:none; }
.rlead.sent .rlead__done{ display:block; }
.rhp{ position:absolute; inset-inline-start:-9999px; width:1px; height:1px; opacity:0; }
.join__box{ align-items:center; }
.join__whats{ font-size:clamp(.92rem,1.1vw,1rem); letter-spacing:.08em; color:var(--mist2); }
/* stacked on a phone the separator dots dangle at the end of each line */
@media (max-width:640px){
  .join__facts{ flex-direction:column; gap:.45rem; }
  .join__dot{ display:none; }
}

/* footer arrangement on palm */
.foot{ --slab-bg: var(--palm); }

/* junction logic: arcs only where a light section precedes */
.slab--flush{ padding-block-start:0; }
.join .slab__curve{ background:var(--sand); }
.foot__curve{ display:none; }
.foot{ margin-top:0; }

/* bidi-safe numerals in RTL runs */
.num{ direction:ltr; unicode-bidi:isolate; }
/* LevitExt's numerals are display shapes: its "1" is a bare stem and its "7"
   reads as a ד, so a date set in it is a guess. Values whose whole job is to be
   read as data take the sans at the same weight. */
.val--data{ font-family:var(--sans); font-weight:800; letter-spacing:0; }