/* ==================================================================
   בשביל – קליניקות ומרחבים טיפוליים
   Tokens at the top are the seed of the shared design language
   (step 3: the reskin of the therapist area).
   Written mobile-first: base = phone, then min-width queries.
   ================================================================== */

/* Assistant (SIL OFL): self-hosted, the same files the therapist area uses */
@font-face {
  font-family: "Assistant"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/assistant-hebrew-wght-normal.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Assistant"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/assistant-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Color */
  --ink: #4F5143;          /* deep warm olive charcoal: main text        */
  --ink-2: #5F6153;        /* secondary text (5.7:1 on --bg)            */
  --ink-3: #6A6856;        /* meta / captions (5.1:1 on --bg)           */
  --bg: #F7F3EE;           /* warm ivory                                 */
  --bg-rgb: 247, 243, 238;
  --bg-2: #EFE8DF;         /* secondary warm                             */
  --paper: #FBF9F6;        /* raised surfaces                            */
  --sage: #C9CCB7;
  --sage-soft: #E3E4D8;
  --blush: #E5C0B5;
  --blush-soft: #F3E1DA;
  --terracotta: #C88F70;   /* accent: decorative only, never for text    */
  --terracotta-ink: #A8674A; /* terracotta that passes 3:1 for large text */
  --sand: #D8BE9A;
  --line: rgba(79, 81, 67, 0.14);
  --line-strong: rgba(79, 81, 67, 0.3);
  --btn: #4F5143;
  --btn-hover: #3E4034;
  --focus: #9A5F40;

  /* Type */
  --font: "Assistant", "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fs-xs: 0.875rem;
  --fs-sm: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
  --fs-h3: clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem);
  --fs-h2: clamp(1.875rem, 1.45rem + 1.6vw, 2.75rem);
  --fs-h1: clamp(2.25rem, 1.55rem + 2.4vw, 3.4rem);

  /* Shape & space */
  --r-img: 20px;
  --r-card: 18px;
  --r-btn: 12px;
  --wrap: 1280px;
  --gutter: clamp(18px, 4.5vw, 40px);
  --section: clamp(72px, 9vw, 136px);
  --header-h: 80px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (min-width: 1100px) { :root { --header-h: 96px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; font-family: var(--font); font-size: var(--fs-md); line-height: 1.7;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.menu-open { overflow: hidden; }
body { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: inherit; }
h1, h2, h3 { font-weight: 500; line-height: 1.2; text-wrap: balance; }
p { text-wrap: pretty; }
strong { font-weight: 600; color: var(--ink); }
[hidden] { display: none !important; }

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

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; inset-inline-start: 16px; top: -60px; z-index: 300;
  background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: var(--r-btn);
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* Eyebrow with the logo's terracotta dot */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink-3); margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--terracotta); flex: none; }
.lead { font-size: var(--fs-lg); font-weight: 300; line-height: 1.6; color: var(--ink-2); }
.text-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--terracotta); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.text-link:hover { text-decoration-thickness: 2.5px; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 500; color: var(--ink); text-decoration: none;
  border-bottom: 1.5px solid var(--terracotta); padding-bottom: 2px; align-self: flex-start;
}
.link-arrow svg { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.link-arrow:hover svg { transform: translateX(-4px); }

.section-head { margin-bottom: clamp(28px, 4vw, 52px); max-width: 680px; }
.section-head h2 { font-size: var(--fs-h2); font-weight: 400; }
.section-head__sub { margin-top: 12px; color: var(--ink-2); max-width: 52ch; }
.section-head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; }

/* Decorative logo shapes (the watercolor blobs from the logo) */
.deco { position: absolute; pointer-events: none; user-select: none; z-index: 0; }
.deco--shapes { width: clamp(170px, 24vw, 300px); height: auto; opacity: 0.55; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  font: 500 var(--fs-sm)/1.2 var(--font);
  border-radius: var(--r-btn); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--primary { background: var(--btn); color: var(--bg); }
.btn--primary:hover { background: var(--btn-hover); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(79, 81, 67, 0.04); }
.btn--light { background: var(--bg); color: var(--ink); }
.btn--light:hover { background: #fff; transform: translateY(-1px); }
/* Therapist login: always visible, clearly a button, but not louder than the lead CTA */
.btn--login { background: var(--sage-soft); color: var(--ink); border-color: rgba(79, 81, 67, 0.5); }
.btn--login:hover { background: var(--sage); border-color: var(--ink); }
.btn--lg { min-height: 54px; padding: 14px 26px; font-size: var(--fs-md); }
.btn:active { transform: none; }

/* ---------- Top bar (therapist login, mobile + tablet) ---------- */
.topbar { background: var(--sage-soft); color: var(--ink); font-size: 0.9375rem; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.topbar__link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-inline: 4px;
  font-weight: 600; text-decoration: underline; text-decoration-color: var(--terracotta);
  text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}
.topbar__link svg { width: 18px; height: 18px; }
@media (min-width: 1100px) { .topbar { display: none; } }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 100; background: var(--bg);
  border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease);
}
.header.is-scrolled { border-bottom-color: var(--line); }
.header__inner { height: var(--header-h); display: flex; align-items: center; gap: 8px; }
.header__logo { flex: none; display: block; border-radius: 6px; margin-inline-end: auto; }
.header__logo img { width: 212px; height: auto; }
.header__actions { display: flex; align-items: center; gap: 8px; }
.header__login { display: none; }
.header__wa { min-height: 44px; min-width: 44px; padding: 0; }
.header__wa svg { width: 22px; height: 22px; }
.header__wa-text { display: none; }

.menu-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none;
  background: none; border: 1.5px solid var(--line-strong); border-radius: var(--r-btn);
  cursor: pointer; color: var(--ink);
}
.menu-btn__bars, .menu-btn__bars::before, .menu-btn__bars::after {
  display: block; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform 0.25s var(--ease), background-color 0.2s;
}
.menu-btn__bars { position: relative; }
.menu-btn__bars::before, .menu-btn__bars::after { content: ""; position: absolute; inset-inline: 0; }
.menu-btn__bars::before { top: -6px; }
.menu-btn__bars::after { top: 6px; }
.menu-btn[aria-expanded="true"] .menu-btn__bars { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-btn__bars::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Mobile menu: full-screen sheet under the header */
.nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: var(--bg); padding: 8px var(--gutter) calc(32px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 24px; overflow-y: auto;
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s 0.25s;
}
.nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.nav ul a {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px;
  font-size: 1.3125rem; padding: 10px 0; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
}
.nav ul a[aria-current="page"] { font-weight: 600; }
.nav ul a[aria-current="page"]::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--terracotta); }
.nav__extra { display: grid; gap: 10px; }
.nav__ig { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; color: var(--ink); }
.nav__ig svg { width: 20px; height: 20px; }

@media (max-width: 359px) { .header__logo img { width: 184px; } .topbar__inner > span { font-size: 0.875rem; } }
@media (min-width: 380px) { .header__logo img { width: 224px; } }
@media (min-width: 700px) {
  .header__wa { padding: 8px 16px; }
  .header__wa-text { display: inline; }
}
@media (min-width: 1100px) {
  .header__inner { gap: 28px; }
  .header__logo { margin-inline-end: 0; }
  .header__logo img { width: 240px; }
  .menu-btn { display: none; }
  .nav {
    position: static; visibility: visible; opacity: 1; transform: none; transition: none;
    background: none; padding: 0; overflow: visible; flex-direction: row; margin-inline-start: auto;
  }
  .nav ul { display: flex; gap: clamp(18px, 2vw, 30px); }
  .nav ul a {
    position: relative; display: block; min-height: 0; padding: 8px 0; border: 0; font-size: var(--fs-sm);
    color: var(--ink-2);
  }
  .nav ul a::after, .nav ul a[aria-current="page"]::after {
    content: ""; position: absolute; inset-inline: 0; bottom: 2px; width: auto; height: 1.5px; border-radius: 0;
    background: var(--terracotta); transform: scaleX(0); transform-origin: right; transition: transform 0.3s var(--ease);
  }
  .nav ul a:hover { color: var(--ink); }
  .nav ul a:hover::after, .nav ul a[aria-current="page"]::after { transform: scaleX(1); }
  .nav ul a[aria-current="page"] { color: var(--ink); font-weight: 500; }
  .nav__extra { display: none; }
  .header__actions { margin-inline-start: clamp(8px, 1.5vw, 24px); gap: 10px; }
  .header__login { display: inline-flex; }
  .header__login, .header__wa { min-height: 46px; padding: 10px 18px; font-size: var(--fs-sm); }
}

/* ---------- Hero (home) ---------- */
.hero { position: relative; isolation: isolate; }
.hero__media { position: relative; height: 46svh; min-height: 280px; max-height: 460px; overflow: hidden; background: var(--bg-2); }
.hero__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1300ms ease-in-out; }
.hero__slide.is-active { opacity: 1; }
/* phone: anchor to the floor and trim the ceiling */
.hero__slide img { position: absolute; inset: auto 0 0 0; width: 100%; height: 118%; object-fit: cover; object-position: var(--pos-m, 50% 100%); }
.hero__fade {
  position: absolute; inset: auto 0 0 0; height: 34%; pointer-events: none;
  background: linear-gradient(to top, var(--bg) 0%, rgba(var(--bg-rgb), 0.9) 28%, rgba(var(--bg-rgb), 0) 100%);
}
.hero__pause {
  position: absolute; z-index: 3; inset-inline-end: 12px; top: 12px;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(var(--bg-rgb), 0.92); color: var(--ink); border: 1px solid var(--line);
  cursor: pointer;
}
.hero__pause svg { width: 16px; height: 16px; }
.hero__content { position: relative; z-index: 2; margin-top: -40px; padding-bottom: clamp(56px, 7vw, 96px); }
.hero__text { max-width: 600px; }
.hero h1 { margin-bottom: 16px; font-weight: 400; }
.hero h1 .eyebrow { display: flex; margin-bottom: 12px; color: var(--ink-2); font-weight: 600; }
.hero__title { display: block; font-size: var(--fs-h1); line-height: 1.12; }
.hero__title .line { display: block; }
.hero .lead { max-width: 38ch; margin-bottom: 26px; font-weight: 400; }
.hero__ctas { display: grid; gap: 10px; }
@media (min-width: 560px) { .hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; } }
@media (min-width: 900px) {
  .hero { min-height: min(calc(100svh - var(--header-h)), 800px); display: flex; align-items: center; }
  .hero__media { position: absolute; inset: 0; height: auto; max-height: none; }
  .hero__slide img { inset: 0; height: 100%; object-position: var(--pos-d, 30% 60%); }
  /* the photo runs full width and fades into the text side (right, RTL) */
  .hero__fade {
    inset: 0; height: auto;
    background: linear-gradient(to left,
      var(--bg) 0%, var(--bg) 32%,
      rgba(var(--bg-rgb), 0.93) 42%,
      rgba(var(--bg-rgb), 0.6) 54%,
      rgba(var(--bg-rgb), 0) 70%);
  }
  .hero__pause { top: auto; bottom: 20px; inset-inline-end: 20px; width: 44px; height: 44px; }
  .hero__content { margin-top: 0; padding-block: 72px; }
  .hero__text { max-width: 520px; }
}
@media (prefers-reduced-motion: reduce) { .hero__slide { transition: none; } }

/* ---------- Page head (inner pages) ---------- */
.page-head { position: relative; padding-top: clamp(20px, 4vw, 56px); padding-bottom: clamp(40px, 5vw, 72px); }
.page-head__inner { display: grid; gap: 24px; align-items: center; }
.page-head__text { position: relative; }
.page-head h1 { font-size: var(--fs-h1); font-weight: 400; line-height: 1.12; margin-bottom: 14px; max-width: 18ch; }
.page-head .lead { max-width: 46ch; }
.page-head__fig {
  order: -1; margin-inline: calc(var(--gutter) * -1); height: 34svh; min-height: 200px; max-height: 320px;
  overflow: hidden; position: relative;
}
.page-head__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.page-head__fig::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 30%;
  background: linear-gradient(to top, var(--bg), rgba(var(--bg-rgb), 0));
}
.page-head--plain .page-head__inner { padding-top: 12px; }
.room-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.room-jump a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px;
  border-radius: 999px; border: 1.5px solid var(--line-strong);
  font-size: var(--fs-sm); text-decoration: none; color: var(--ink); background: var(--paper);
  transition: background-color 0.2s, border-color 0.2s;
}
.room-jump a:hover { background: var(--bg-2); border-color: var(--ink); }
@media (min-width: 900px) {
  .page-head__inner { grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); }
  .page-head__fig { order: 0; margin: 0; height: clamp(360px, 34vw, 460px); max-height: none; border-radius: var(--r-img); }
  .page-head__fig::after { display: none; }
  /* the logo's dotted path, leading to the page title */
  .page-head__text { padding-top: 56px; }
  .page-head__text::before {
    content: ""; position: absolute; inset-inline-start: -8px; top: -12px; width: 86px; height: 83px;
    background: url("../img/brand/path.webp") no-repeat center / contain; transform: scaleX(-1); opacity: 0.9;
  }
  .page-head--plain .page-head__inner { grid-template-columns: 1fr; }
  .page-head--plain .page-head__text::before { display: none; }
}

/* ---------- Rooms strip (home) ---------- */
.rooms { padding-bottom: var(--section); }
.accordion {
  display: flex; gap: 12px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
.accordion::-webkit-scrollbar { display: none; }
.acc {
  position: relative; flex: 0 0 78%; aspect-ratio: 4 / 4.6; min-width: 0; overflow: hidden;
  border-radius: var(--r-img); background: var(--bg-2);
  scroll-snap-align: start; scroll-snap-stop: always;
}
.acc a { position: absolute; inset: 0; color: #fff; text-decoration: none; border-radius: inherit; }
.acc a:focus-visible { outline-offset: -4px; outline-color: #fff; outline-width: 3px; }
.acc img { position: absolute; inset: auto 0 0 0; width: 100%; height: 118%; object-fit: cover; object-position: 50% 100%; }
.acc__shade {
  position: absolute; inset: auto 0 0 0; height: 65%; pointer-events: none;
  background: linear-gradient(to top, rgba(46, 44, 36, 0.82) 0%, rgba(46, 44, 36, 0.6) 45%, rgba(46, 44, 36, 0) 100%);
}
.acc__label { position: absolute; inset-inline: 20px; bottom: 18px; display: grid; gap: 2px; }
.acc__name { font-size: 1.375rem; font-weight: 600; white-space: nowrap; }
.acc__line { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rooms__hint { margin-top: 12px; font-size: var(--fs-sm); color: var(--ink-3); }
@media (min-width: 900px) {
  .accordion { overflow: visible; margin: 0; padding: 0; height: clamp(460px, 40vw, 560px); gap: 10px; }
  .acc { flex: 1 1 0; aspect-ratio: auto; transition: flex-grow 700ms var(--ease); }
  .acc.is-active { flex-grow: 4.2; }
  .acc img { height: 122%; }
  .acc__line { opacity: 0; transform: translateY(6px); transition: opacity 400ms var(--ease) 150ms, transform 400ms var(--ease) 150ms; }
  .acc.is-active .acc__line { opacity: 1; transform: none; }
  .rooms__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .acc, .acc__line { transition: none !important; } }

/* ---------- Two ways ---------- */
.ways { position: relative; padding-block: var(--section); background: var(--bg-2); overflow: hidden; }
.ways > .wrap { position: relative; z-index: 1; }
.ways__deco { inset-inline-start: -60px; top: -30px; width: clamp(220px, 32vw, 420px); opacity: 0.4; }
.ways__grid { display: grid; gap: 14px; }
.way {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--paper); border-radius: var(--r-card); padding: clamp(24px, 3.5vw, 40px);
  border: 1px solid var(--line);
}
.way h3 { font-size: var(--fs-h3); font-weight: 600; }
.way__for { font-size: var(--fs-sm); color: var(--ink-3); font-weight: 500; }
.way > p:not(.way__for) { color: var(--ink-2); margin-top: 8px; margin-bottom: 14px; }
.way .link-arrow { margin-top: auto; }
@media (min-width: 800px) { .ways__grid { grid-template-columns: 1fr 1fr; gap: 20px; } }

/* ---------- Perks ---------- */
.perks { padding-block: var(--section); }
.perks__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.perks__grid li { padding: 16px 0 18px; border-top: 1px solid var(--line-strong); }
.perks__grid li::before {
  content: ""; display: block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--sage); margin-bottom: 10px;
}
.perks__grid li:nth-child(3n+2)::before { background: var(--blush); }
.perks__grid li:nth-child(3n)::before { background: var(--terracotta); }
.perks__grid h3 { font-size: 1rem; font-weight: 600; line-height: 1.35; margin-bottom: 4px; }
.perks__grid p { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.5; }
@media (min-width: 1000px) {
  .perks__grid { grid-template-columns: repeat(4, 1fr); column-gap: 36px; }
  .perks__grid li { padding: 24px 0 28px; }
  .perks__grid h3 { font-size: var(--fs-md); }
  .perks__grid p { font-size: var(--fs-sm); }
}

/* ---------- Where (home) ---------- */
.where { padding-block: 0 var(--section); }
.where__inner { display: grid; gap: 28px; align-items: center; }
.where__fig { overflow: hidden; border-radius: var(--r-img); aspect-ratio: 16 / 11; }
.where__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.where h2 { font-size: var(--fs-h2); font-weight: 400; margin-bottom: 14px; }
.where__address { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem); font-weight: 400; line-height: 1.4; margin-bottom: 10px; }
.where__text > p { color: var(--ink-2); max-width: 44ch; margin-bottom: 18px; }
.where__text { display: flex; flex-direction: column; }
@media (min-width: 900px) {
  .where__inner { grid-template-columns: 7fr 5fr; gap: clamp(48px, 6vw, 112px); }
  .where__fig { aspect-ratio: 4 / 4.2; max-height: 540px; }
}

/* ---------- Therapists strip ---------- */
.members { background: var(--sage-soft); padding-block: clamp(32px, 4vw, 48px); border-block: 1px solid var(--line); }
.members__inner { display: grid; gap: 18px; align-items: center; }
.members h2 { font-size: var(--fs-h3); font-weight: 600; margin-bottom: 4px; }
.members p { color: var(--ink-2); max-width: 50ch; }
.members .btn { justify-self: start; background: var(--paper); }
.members .btn:hover { background: #fff; }
@media (min-width: 800px) { .members__inner { grid-template-columns: 1fr auto; gap: 40px; } }

/* ---------- Final CTA ---------- */
.final { position: relative; isolation: isolate; overflow: hidden; }
.final__media { position: relative; height: 56vw; min-height: 220px; max-height: 420px; }
.final__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 65%; }
.final__card { position: relative; background: var(--bg); padding: 28px 0 var(--section); }
.final h2 { font-size: var(--fs-h2); font-weight: 400; margin-bottom: 10px; max-width: 18ch; }
.final p { color: var(--ink-2); margin-bottom: 22px; }
.final__ctas { display: grid; }
@media (min-width: 560px) { .final__ctas { display: flex; } }
@media (min-width: 900px) {
  .final { padding-block: clamp(96px, 12vw, 170px); }
  .final__media { position: absolute; inset: 0; height: auto; max-height: none; z-index: -1; }
  .final__card { max-width: 540px; border-radius: var(--r-card); padding: clamp(32px, 4vw, 52px); background: rgba(var(--bg-rgb), 0.97); }
  .final__card::before {
    content: ""; position: absolute; inset-inline-end: -34px; top: -40px; width: 96px; height: 93px;
    background: url("../img/brand/path.webp") no-repeat center / contain; transform: scaleX(-1);
  }
}

/* ---------- Showcase (clinics page) ---------- */
.showcase { padding-block: clamp(16px, 3vw, 40px) var(--section); }
.showcase__list { display: grid; gap: clamp(64px, 8vw, 112px); }
.room { display: grid; gap: 18px; align-items: start; }
.room > * { min-width: 0; }
.room__title { font-size: var(--fs-h2); font-weight: 400; margin-bottom: 10px; line-height: 1.15; }
.room__title:focus { outline: none; }
.room__sub { display: block; font-size: var(--fs-md); font-weight: 400; color: var(--ink-3); margin-top: 6px; }
.room__desc { color: var(--ink-2); max-width: 42ch; }
.room__features { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.room__features li { font-size: var(--fs-xs); color: var(--ink); padding: 6px 12px; border-radius: 999px; background: var(--bg-2); }
.room__cta { margin-top: 18px; }
.room__cta svg { width: 18px; height: 18px; }
.room--nophoto { padding: clamp(24px, 4vw, 44px); border-radius: var(--r-card); background: var(--bg-2); }
.room--nophoto .room__title { font-size: var(--fs-h3); }
@media (min-width: 900px) {
  .room { grid-template-columns: 8fr 4fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
  .room .room__media { order: -1; }
  .room--flip { grid-template-columns: 4fr 8fr; }
  .room--flip .room__media { order: 0; }
  .room--nophoto { grid-template-columns: 1fr; }
}

/* Carousel */
.car { position: relative; }
.car__track {
  display: flex; gap: 10px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
.car__track::-webkit-scrollbar { display: none; }
.car__track:focus-visible { outline-offset: -3px; }
.car__slide {
  flex: 0 0 86%; aspect-ratio: 4 / 3.2; scroll-snap-align: start; scroll-snap-stop: always;
  overflow: hidden; border-radius: var(--r-card); background: var(--bg-2);
}
.car__slide.is-portrait { flex-basis: 60%; aspect-ratio: 60 / 68.8; } /* same height as the landscape slides */
.car__slide img { width: 100%; height: 100%; object-fit: cover; }
.car__bar { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.car__btn {
  width: 48px; height: 48px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--paper); border: 1.5px solid var(--line-strong); color: var(--ink);
  cursor: pointer; transition: background-color 0.2s, border-color 0.2s, opacity 0.2s;
}
.car__btn svg { width: 20px; height: 20px; }
.car__btn[data-dir="-1"] svg { transform: scaleX(-1); }
.car__btn:hover:not([aria-disabled="true"]) { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.car__btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.car__count { min-width: 3.5em; text-align: center; font-size: var(--fs-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .car__track { margin: 0; padding: 0; scroll-padding-inline: 0; border-radius: var(--r-img); gap: 12px; }
  .car__slide { flex-basis: 76%; aspect-ratio: 3 / 2; border-radius: var(--r-img); }
  .car__slide.is-portrait { flex-basis: calc(76% * 4 / 9); aspect-ratio: 2 / 3; }
  .car__track:has(.car__slide:only-child) .car__slide { flex-basis: 100%; }
}

/* ---------- Common areas (clinics page) ---------- */
.common { padding-block: var(--section); background: var(--bg-2); }
.common__grid { display: grid; gap: 12px; }
.common__grid figure { position: relative; overflow: hidden; border-radius: var(--r-card); aspect-ratio: 4 / 3; }
.common__grid img { width: 100%; height: 100%; object-fit: cover; }
.common__grid figcaption {
  position: absolute; inset-inline-start: 12px; bottom: 12px;
  background: rgba(var(--bg-rgb), 0.95); color: var(--ink); font-size: var(--fs-xs); font-weight: 600;
  padding: 5px 12px; border-radius: 999px;
}
.common__ig { margin-top: 24px; }
.common__ig svg { width: 20px; height: 20px; }
@media (min-width: 900px) {
  .common__grid { grid-template-columns: 7fr 4fr; gap: 14px; }
  .common__grid figure { aspect-ratio: auto; height: clamp(300px, 30vw, 420px); border-radius: var(--r-img); }
  .common__grid figure:nth-child(3) { order: 4; }
}

/* ---------- CTA band (inner pages) ---------- */
.cta-band { position: relative; padding-block: var(--section); overflow: hidden; }
.cta-band--tight { padding-top: 0; }
.cta-band__deco { inset-inline-start: -70px; bottom: -40px; width: clamp(240px, 30vw, 400px); opacity: 0.4; }
.cta-band__inner {
  position: relative; z-index: 1; display: grid; gap: 20px; align-items: center;
  padding: clamp(26px, 4vw, 52px); border-radius: var(--r-card);
  background: rgba(251, 249, 246, 0.9); border: 1px solid var(--line);
}
.cta-band h2 { font-size: var(--fs-h2); font-weight: 400; margin-bottom: 8px; }
.cta-band p { color: var(--ink-2); max-width: 46ch; }
.cta-band .btn { justify-self: stretch; }
@media (min-width: 560px) { .cta-band .btn { justify-self: start; } }
@media (min-width: 800px) { .cta-band__inner { grid-template-columns: 1fr auto; gap: 40px; } }

/* ---------- Rent page ---------- */
.plan { padding-block: clamp(24px, 4vw, 56px) var(--section); }
.plan--alt { background: var(--bg-2); padding-top: var(--section); }
.plan__inner { display: grid; gap: 32px; align-items: center; }
.plan h2 { font-size: var(--fs-h2); font-weight: 400; margin-bottom: 14px; margin-top: 4px; }
.plan .lead { margin-bottom: 22px; max-width: 44ch; font-weight: 400; }
.plan__points { display: grid; gap: 12px; }
.plan__points li { position: relative; padding-inline-start: 22px; color: var(--ink-2); max-width: 52ch; }
.plan__points li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.6em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--terracotta);
}
.plan__note { margin-top: 20px; font-size: var(--fs-sm); color: var(--ink-3); max-width: 52ch; }
.plan__cta { margin-top: 22px; }
.plan__cta svg, .plan__actions .link-arrow svg { width: 18px; height: 18px; }
.plan__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 24px; }
.plan__fig { overflow: hidden; border-radius: var(--r-img); aspect-ratio: 4 / 3.4; }
.plan__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
@media (min-width: 900px) {
  .plan__inner { grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 96px); }
  .plan__fig { aspect-ratio: 4 / 4.6; max-height: 600px; }
}

.week { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(16px, 3vw, 36px); }
.week__cap { font-size: var(--fs-sm); font-weight: 600; margin-bottom: 14px; }
.week__cap span { font-weight: 400; color: var(--ink-3); }
.week__table { width: calc(100% + 8px); margin: -4px; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.week__table th, .week__table td { text-align: center; font-weight: 400; }
.week__table thead th { font-size: var(--fs-sm); color: var(--ink-3); }
.week__table thead th:first-child { width: 27%; }
.week__table tbody th { text-align: start; font-size: 0.9375rem; line-height: 1.3; padding-inline-end: 2px; }
.week__table tbody th small { display: block; font-size: 0.75rem; color: var(--ink-3); }
.week__table td { height: 56px; border-radius: 10px; font-size: 0.8125rem; color: var(--ink-3); background: var(--bg-2); line-height: 1.2; padding: 2px; }
.week__table td.is-yours { background: var(--ink); color: var(--bg); font-weight: 600; }
.week__table td.is-closed { background: transparent; border: 1.5px dashed var(--line-strong); }
.week__note { margin-top: 14px; font-size: var(--fs-sm); color: var(--ink-2); }
@media (max-width: 379px) { .week__table td { font-size: 0.6875rem; height: 50px; } }

/* Steps */
.how { padding-block: var(--section); }
.steps { display: grid; }
.steps li {
  position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 10px;
  padding-block: 18px; border-bottom: 1px solid var(--line);
}
.steps li:first-child { border-top: 1px solid var(--line); }
.steps__num {
  grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--terracotta); color: var(--ink); font-size: 1rem; font-weight: 600; margin-top: 2px;
}
.steps h3 { font-size: var(--fs-h3); margin-bottom: 4px; }
.steps p { color: var(--ink-2); max-width: 34ch; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 40px; }
  .steps li { display: block; padding: 0; border: 0 !important; }
  .steps__num { width: 44px; height: 44px; font-size: 1.125rem; margin-bottom: 18px; background: var(--bg); position: relative; z-index: 1; }
  /* dotted path between the steps, as in the logo */
  .steps li:not(:last-child)::after {
    content: ""; position: absolute; top: 21px; inset-inline-start: 56px; inset-inline-end: -28px;
    border-top: 2.5px dotted rgba(79, 81, 67, 0.45);
  }
  .steps li:last-child .steps__num { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
}

/* ---------- FAQ page ---------- */
.faq { padding-bottom: var(--section); }
.faq__inner { display: grid; gap: clamp(40px, 5vw, 64px); }
.faq__group { max-width: 860px; scroll-margin-top: calc(var(--header-h) + 16px); }
.faq__h { font-size: var(--fs-h3); font-weight: 600; margin-bottom: 8px; }
.faq__list { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  min-height: 56px; padding-block: 14px; font-size: var(--fs-md); font-weight: 500; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--btn-hover); }
.faq__a { padding-bottom: 22px; color: var(--ink-2); max-width: 64ch; }

/* ---------- Contact page ---------- */
.visit__address { font-size: clamp(1.375rem, 1.2rem + 1vw, 1.875rem); font-weight: 400; line-height: 1.35; margin-bottom: 8px; }
.visit__links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.visit__links .btn--primary { grid-column: 1 / -1; }
@media (min-width: 560px) { .visit__links { display: flex; flex-wrap: wrap; } }
.visit { padding-bottom: var(--section); }
.visit__h { font-size: var(--fs-h3); font-weight: 600; margin-bottom: 8px; }
.visit__facts { display: grid; border-top: 1px solid var(--line-strong); }
.visit__facts div { padding-block: 16px; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.visit__facts dt { font-weight: 600; }
.visit__facts dd { color: var(--ink-2); }
@media (min-width: 800px) {
  .visit__facts { grid-template-columns: repeat(4, 1fr); column-gap: 28px; border-top: 0; }
  .visit__facts div { border-top: 1px solid var(--line-strong); border-bottom: 0; }
}

.reach { position: relative; padding-block: var(--section); background: var(--bg-2); overflow: hidden; }
.reach > .wrap { position: relative; z-index: 1; }
.reach__deco { inset-inline-start: -60px; bottom: -40px; width: clamp(220px, 30vw, 380px); opacity: 0.4; }
.reach__grid { display: grid; gap: 12px; }
.reach__card {
  display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; align-items: center;
  padding: 16px 18px; border-radius: var(--r-card); background: var(--paper); border: 1px solid var(--line);
  text-decoration: none; min-height: 84px; transition: border-color 0.2s, transform 0.2s var(--ease);
}
.reach__card:hover { border-color: var(--ink); transform: translateY(-2px); }
.reach__icon { grid-row: span 3; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--sage-soft); color: var(--ink); }
.reach__icon svg { width: 22px; height: 22px; }
.reach__card--main { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.reach__card--main .reach__icon { background: var(--bg); }
.reach__card--main:focus-visible { outline-color: var(--ink); }
.reach__label { font-weight: 600; }
.reach__value { font-size: var(--fs-sm); justify-self: start; }
.reach__hint { font-size: var(--fs-xs); }
@media (min-width: 700px) { .reach__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) {
  .reach__grid { grid-template-columns: repeat(4, 1fr); }
  .reach__card { grid-template-columns: 1fr; row-gap: 4px; align-items: start; }
  .reach__icon { grid-row: auto; margin-bottom: 10px; }
}

/* ---------- Prose (accessibility statement) ---------- */
.prose { padding-bottom: var(--section); }
.prose__inner { max-width: 760px; }
.prose h2 { font-size: var(--fs-h3); font-weight: 600; margin: 36px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul { display: grid; gap: 8px; margin-block: 10px; }
.prose ul li { position: relative; padding-inline-start: 20px; }
.prose ul li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.65em; width: 7px; height: 7px; border-radius: 50%; background: var(--terracotta); }
.prose__contact { display: grid; gap: 6px; margin-block: 14px; }
.prose__contact div { display: flex; flex-wrap: wrap; gap: 0 10px; }
.prose__contact dd { min-width: 0; overflow-wrap: anywhere; }
.prose__contact dt { font-weight: 600; min-width: 6.5em; }
.prose__date { margin-top: 32px; font-size: var(--fs-sm); color: var(--ink-3) !important; }

/* ---------- Footer ---------- */
.footer { position: relative; overflow: hidden; background: var(--bg-2); padding-block: 48px 24px; font-size: var(--fs-sm); color: var(--ink-2); }
.footer__shapes { position: absolute; inset-inline-start: -60px; top: -50px; width: 240px; opacity: 0.35; pointer-events: none; }
.footer__inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 32px 20px; }
.footer__brand { grid-column: 1 / -1; }
.footer__brand img { width: 150px; }
.footer__h { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.footer ul { display: grid; }
.footer ul a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; }
.footer ul a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--terracotta); text-underline-offset: 4px; }
.footer__contact { grid-column: 1 / -1; }
.footer__contact svg { width: 20px; height: 20px; color: var(--ink); flex: none; }
.footer__therapists p { margin-bottom: 12px; max-width: 30ch; }
.footer__bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-3); }
.footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; color: var(--ink-2); }
.footer__legal { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; }

@media (min-width: 700px) {
  .footer__inner { grid-template-columns: 1fr 1fr 1fr; }
  .footer__contact { grid-column: auto; }
}
@media (min-width: 1100px) {
  .footer__inner { grid-template-columns: 1.1fr 0.8fr 1.4fr 1fr; }
  .footer__brand { grid-column: auto; }
  .footer__brand img { width: 200px; }
}

/* ---------- Mobile sticky CTA ---------- */
.sticky-cta {
  position: fixed; z-index: 90; inset-inline: 0; bottom: 0;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(var(--bg-rgb), 1) 62%, rgba(var(--bg-rgb), 0));
  transform: translateY(110%); transition: transform 0.35s var(--ease);
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta .btn { width: 100%; min-height: 52px; }
body.menu-open .sticky-cta { transform: translateY(110%); }
@media (max-width: 899px) {
  html { scroll-padding-bottom: 96px; }
  .footer { padding-bottom: 104px; }
}
@media (min-width: 900px) { .sticky-cta { display: none !important; } }
@media (max-height: 500px) { .header { position: relative; } }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .nav, .sticky-cta { transition: none; }
  .btn:hover, .reach__card:hover { transform: none; }
}

/* ================= v3: fewer words, clearer pages ================= */
/* Two-ways teaser cards are links */
.way { text-decoration: none; color: inherit; gap: 4px; transition: border-color 0.2s, transform 0.2s var(--ease); }
.way:hover { border-color: var(--ink); transform: translateY(-2px); }
.way h3 { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.way h3::after { content: "←"; font-weight: 400; color: var(--terracotta-ink); }
.way > p { color: var(--ink-2); }

/* Perks: short labels only */
.perks__grid li { font-size: 1rem; font-weight: 600; line-height: 1.35; }
@media (min-width: 1000px) { .perks__grid li { font-size: var(--fs-md); } }

/* FAQ on the home page */
.faq { padding-block: 0 var(--section); scroll-margin-top: calc(var(--header-h) + 16px); }
.faq__title { font-size: var(--fs-h2); font-weight: 400; margin-bottom: 16px; }
@media (min-width: 900px) {
  .faq__inner { grid-template-columns: 4fr 8fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
}

/* Plain page heads (no photo) */
.page-head--plain { padding-bottom: clamp(24px, 3vw, 40px); }

/* Rent: side-by-side comparison */
.compare { padding-bottom: clamp(48px, 6vw, 88px); }
.compare__grid { display: grid; gap: 14px; }
.option {
  display: flex; flex-direction: column; gap: 6px; padding: clamp(22px, 3.5vw, 36px);
  border-radius: var(--r-card); background: var(--paper); border: 1px solid var(--line);
}
.option:nth-child(2) { background: var(--bg-2); }
.option__for {
  align-self: flex-start; font-size: var(--fs-xs); font-weight: 600; padding: 4px 12px; border-radius: 999px;
  background: var(--sage-soft);
}
.option:nth-child(2) .option__for { background: var(--blush-soft); }
.option h2 { font-size: var(--fs-h2); font-weight: 400; margin-block: 4px 10px; }
.option__rows { display: grid; margin-bottom: 22px; border-top: 1px solid var(--line-strong); }
.option__rows div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.option__rows dt { font-weight: 600; font-size: var(--fs-sm); }
.option__rows dd { color: var(--ink-2); font-size: var(--fs-sm); }
.option .btn { margin-top: auto; }
.compare__note { margin-top: 16px; font-size: var(--fs-sm); color: var(--ink-3); }
@media (min-width: 800px) { .compare__grid { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (max-width: 379px) { .option__rows div { grid-template-columns: 1fr; gap: 0; } }

/* Steps: titles only */
.steps li { align-items: center; }
.steps h3 { margin: 0; }
.how { padding-top: 0; }

/* Community */
.community { padding-block: var(--section); }
.community__inner { display: grid; gap: 24px; }
.community h2 { font-size: var(--fs-h2); font-weight: 400; margin-bottom: 10px; }
.community__text p { color: var(--ink-2); max-width: 40ch; }
.community__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.community__list li {
  padding: 18px 16px; border-radius: var(--r-card); background: var(--paper); border: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.community__list li::before {
  content: ""; display: block; width: 30px; height: 30px; border-radius: 50%; margin-bottom: 12px;
  background: var(--sage); opacity: 0.8;
}
.community__list li:nth-child(2)::before { background: var(--blush); }
.community__list li:nth-child(3)::before { background: var(--terracotta); opacity: 0.7; }
.community__list li:nth-child(4)::before { background: var(--sand); }
.community__list h3 { font-size: 1rem; font-weight: 600; line-height: 1.3; margin-bottom: 4px; }
.community__list p { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.5; }
@media (min-width: 900px) {
  .community__inner { grid-template-columns: 4fr 8fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
  .community__list { gap: 16px; }
  .community__list li { padding: 24px; }
  .community__list h3 { font-size: var(--fs-md); }
}
.perks { padding-top: 0; }

/* Footer v3: calm on mobile */
.footer__address a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
.footer__address a:hover { text-decoration: underline; text-decoration-color: var(--terracotta); }
@media (max-width: 699px) {
  .footer { padding-block: 36px 96px; text-align: center; }
  .footer__shapes { display: none; }
  .footer__inner { grid-template-columns: 1fr; gap: 18px; justify-items: center; }
  .footer__brand img { width: 120px; margin-inline: auto; }
  .footer__pages, .footer__h { display: none; }
  .footer__contact { display: flex; gap: 12px; justify-content: center; }
  .footer__contact a {
    width: 48px; height: 48px; min-height: 48px; justify-content: center; border-radius: 50%;
    background: var(--paper); border: 1px solid var(--line);
  }
  .footer__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .footer__address { margin-top: 6px; }
  .footer__bottom { justify-content: center; margin-top: 20px; }
}

/* Perks v4: one photo, one calm list */
.perks { padding-block: var(--section); }
.perks__inner { display: grid; gap: 24px; align-items: center; }
.perks__fig { overflow: hidden; border-radius: var(--r-img); aspect-ratio: 16 / 9; }
.perks__fig img { width: 100%; height: 100%; object-fit: cover; }
.perks h2 { font-size: var(--fs-h2); font-weight: 400; margin-bottom: 14px; }
.perks__list li {
  display: flex; align-items: center; gap: 14px; padding-block: 13px;
  border-bottom: 1px solid var(--line); font-size: var(--fs-md);
}
.perks__list li:first-child { border-top: 1px solid var(--line-strong); }
.perks__list li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--terracotta); }
@media (min-width: 900px) {
  .perks__inner { grid-template-columns: 5fr 6fr; gap: clamp(48px, 6vw, 96px); }
  .perks__fig { aspect-ratio: 4 / 4.2; }
}

/* WhatsApp + Instagram bubbles, always together */
.social { display: inline-flex; gap: 10px; vertical-align: middle; }
.social__b {
  width: 48px; height: 48px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--line-strong);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.social__b svg { width: 22px; height: 22px; }
.social__b:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.nav__extra .social { justify-content: center; margin-top: 6px; }
.common__ig { display: flex; align-items: center; gap: 14px; margin-top: 24px; font-weight: 500; }
.reach .section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }

/* Footer contact: bubbles on every size */
.footer__contact { display: flex; flex-wrap: wrap; gap: 10px; }
.footer__contact a {
  width: 48px; height: 48px; min-height: 48px; justify-content: center; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line);
}
.footer__contact a:hover { background: var(--ink); color: var(--bg); text-decoration: none; }
.footer__contact a:hover svg { color: var(--bg); }
.footer__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.footer__address { margin-top: 8px; }

/* Mobile header: menu on the right (RTL start), logo next to it, WhatsApp on the left */
@media (max-width: 1099px) {
  .header__actions { display: contents; }
  .menu-btn { order: -1; }
  .header__logo { margin-inline-end: auto; }
}
@media (max-width: 359px) { .header__logo img { width: 172px; } }

.footer ul.footer__contact { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 699px) {
  .footer ul.footer__contact { justify-content: center; }
  .footer__reach { order: 1; }
  .footer__therapists { order: 2; }
}
/* community v2: light rows, no cards */
.community__list { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line-strong); }
.community__list li {
  display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; padding: 14px 0;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none;
}
.community__list li::before { width: 14px; height: 14px; margin: 5px 0 0; grid-row: span 2; }
.community__list h3 { margin: 0; }
@media (min-width: 700px) {
  .community__list { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .community__list li { padding: 18px 0; }
}
@media (min-width: 900px) { .perks__fig { order: 2; } }
@media (max-width: 599px) { .reach__deco { display: none; } }

/* ================= v4: clearer offer, tighter rhythm ================= */
:root { --section: clamp(52px, 6.5vw, 96px); }

/* Facts strip under the hero */
.facts { background: var(--bg-2); border-block: 1px solid var(--line); }
.facts__list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding-block: 6px;
}
.facts__list li { padding: 12px 4px; font-size: 0.9375rem; color: var(--ink-2); line-height: 1.35; }
.facts__list strong { color: var(--ink); font-weight: 600; }
.facts__list li strong:first-child { font-size: 1.125rem; }
@media (min-width: 800px) {
  .facts__list { grid-template-columns: repeat(4, auto); justify-content: space-between; padding-block: 10px; }
  .facts__list li { padding: 10px 0; font-size: var(--fs-sm); }
}
.hero { } /* hero bottom padding tighter now that the strip follows */
.hero__content { padding-bottom: clamp(36px, 5vw, 64px); }

/* Offer */
.offer { padding-block: var(--section); }
.offer__title { font-size: var(--fs-h2); font-weight: 400; margin-bottom: 20px; }
.offer__grid { display: grid; gap: 12px; }
.plan-card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: clamp(20px, 3vw, 32px); border-radius: var(--r-card);
  background: var(--ink); color: var(--bg); text-decoration: none; overflow: hidden;
  transition: transform 0.2s var(--ease);
}
.plan-card--alt { background: var(--sage-soft); color: var(--ink); }
.plan-card:hover { transform: translateY(-2px); }
.plan-card__tag { font-size: var(--fs-xs); font-weight: 600; opacity: 0.85; }
.plan-card h3 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem); font-weight: 400; line-height: 1.15; }
.plan-card p { font-size: var(--fs-sm); opacity: 0.92; max-width: 34ch; }
.plan-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 600; font-size: var(--fs-sm); }
.plan-card__more svg { width: 18px; height: 18px; }
.plan-card::after {
  content: ""; position: absolute; inset-inline-end: -40px; bottom: -50px; width: 170px; height: 150px;
  background: url("../img/brand/shapes.webp") no-repeat center / contain; opacity: 0.22; pointer-events: none;
}
.plan-card--alt::after { opacity: 0.45; }
.plan-card:focus-visible { outline-offset: 4px; }
@media (min-width: 700px) { .offer__grid { grid-template-columns: 1fr 1fr; gap: 16px; } }

.offer__incl { margin-top: 20px; padding: clamp(18px, 3vw, 28px); border-radius: var(--r-card); background: var(--paper); border: 1px solid var(--line); }
.offer__incl-h { font-weight: 600; margin-bottom: 14px; }

/* Amenity grid – like a listing site: icon + label */
.amen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.amen li { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; line-height: 1.3; }
.amen svg {
  flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px;
  background: var(--bg-2); color: var(--ink);
}
@media (min-width: 700px) { .amen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .amen { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.amen--room { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
.amen--room svg { width: 34px; height: 34px; padding: 7px; border-radius: 10px; }
@media (min-width: 700px) { .amen--room { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.amen--compact { grid-template-columns: 1fr; margin-top: 14px; }

/* Rooms: tighter */
.rooms { padding-bottom: var(--section); }

/* Community as a dark olive band */
.community { position: relative; overflow: hidden; background: var(--ink); color: var(--bg); padding-block: clamp(44px, 6vw, 80px); }
.community__shapes { position: absolute; inset-inline-start: -40px; bottom: -60px; width: clamp(200px, 26vw, 340px); opacity: 0.18; pointer-events: none; }
.community__inner { position: relative; display: grid; gap: 22px; align-items: center; }
.community h2 { font-size: var(--fs-h2); font-weight: 400; margin-bottom: 10px; color: var(--bg); }
.community__text p { color: rgba(var(--bg-rgb), 0.88); max-width: 44ch; }
.community__list { display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
.community__list li {
  display: block; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(var(--bg-rgb), 0.35);
  background: none; font-size: var(--fs-sm); color: var(--bg); grid-template-columns: none;
}
.community__list li::before { display: none; }
.community :focus-visible { outline-color: var(--bg); }
@media (min-width: 900px) { .community__inner { grid-template-columns: 6fr 5fr; gap: 64px; } }

/* FAQ on home: tighter */
.faq { padding-block: var(--section); }

/* Final CTA two buttons */
.final__ctas { gap: 10px; }

/* ---------- Contact page ---------- */
.contact { padding-bottom: var(--section); }
.contact__grid { display: grid; gap: 36px; align-items: start; }
@media (min-width: 960px) { .contact__grid { grid-template-columns: 7fr 5fr; gap: clamp(40px, 5vw, 72px); } }
.quick { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; }
.quick__b {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 76px; padding: 10px 12px; border-radius: var(--r-card); text-decoration: none;
  background: var(--paper); border: 1px solid var(--line-strong); color: var(--ink); font-weight: 600; font-size: var(--fs-sm);
  transition: border-color 0.2s, background-color 0.2s;
}
.quick__b svg { width: 24px; height: 24px; }
.quick__b:hover { border-color: var(--ink); }
.quick__b--wa { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.quick__b--wa:hover { background: var(--btn-hover); }
.quick__b--ig { width: 64px; }
.contact__nums { margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-3); }

.lead-form { margin-top: 28px; padding: clamp(20px, 3vw, 32px); border-radius: var(--r-card); background: var(--paper); border: 1px solid var(--line); display: grid; gap: 14px; }
.lead-form__h { font-size: var(--fs-h3); font-weight: 600; margin-bottom: 2px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field-row { display: grid; gap: 14px; }
@media (min-width: 600px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field label { font-size: var(--fs-sm); font-weight: 600; }
.field__opt { font-weight: 400; color: var(--ink-3); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--line-strong); background: #fff; color: var(--ink);
  font: 400 1rem/1.4 var(--font);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input[dir="ltr"] { text-align: right; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
.field [aria-invalid="true"] { border-color: #A0412A; }
.field__err { color: #A0412A; font-size: var(--fs-sm); font-weight: 600; }
.field--hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-form { position: relative; }
.lead-form__privacy { font-size: var(--fs-xs); color: var(--ink-3); }
.lead-form .btn { justify-self: stretch; }
@media (min-width: 600px) { .lead-form .btn { justify-self: start; min-width: 180px; } }
.lead-form__status:empty { display: none; }
.lead-form__status { font-weight: 600; }
.lead-form__status.is-ok { color: #3E6B3A; }
.lead-form__status.is-err { color: #A0412A; }

.contact__place-h { font-size: var(--fs-h3); font-weight: 600; margin-bottom: 6px; }
.contact__address { font-size: var(--fs-md); line-height: 1.5; margin-bottom: 14px; }
.map { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3; background: var(--bg-2); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.contact__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
@media (min-width: 960px) { .contact__place { position: sticky; top: calc(var(--header-h) + 20px); } }
@media (min-width: 900px) { .page-head--plain .page-head__text { padding-top: 8px; } }

/* ================= v5 ================= */
/* Softer section colors: warm tints instead of dark / light green */
.plan-card { background: var(--blush-soft); color: var(--ink); }
.plan-card--alt { background: #EFE4D3; color: var(--ink); }
.plan-card::after { display: none; }
.plan-card__tag { color: var(--ink-2); opacity: 1; }
.plan-card p { opacity: 1; color: var(--ink-2); }
.plan-card__more { color: var(--ink); }
.plan-card { border: 1px solid rgba(79, 81, 67, 0.12); }
.plan-card:hover { border-color: var(--ink); }

.community { background: var(--bg-2); color: var(--ink); border-block: 1px solid var(--line); }
.community h2 { color: var(--ink); }
.community__text p { color: var(--ink-2); }
.community__list li { color: var(--ink); border-color: var(--line-strong); background: var(--paper); }
.community :focus-visible { outline-color: var(--focus); }
.community__shapes { opacity: 0.5; inset-inline-start: -70px; bottom: -80px; }
@media (max-width: 899px) { .community__shapes { display: none; } }

/* FAQ: centered, title above */
.faq__inner { grid-template-columns: 1fr !important; max-width: 760px; margin-inline: auto; gap: 16px; }
.faq__title { text-align: center; margin-bottom: 8px; }

/* Clinics: rooms closer together */
.showcase__list { gap: clamp(40px, 5vw, 64px); }

/* Contact: compact actions + small form */
.contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.contact__actions .social .social__b--wa { display: none; } /* WhatsApp already the main button here */
.lead-form { margin-top: 24px; padding: 18px; gap: 12px; }
.lead-form__h { font-size: var(--fs-md); }
.lead-form__row { display: grid; gap: 10px; }
@media (min-width: 600px) { .lead-form__row { grid-template-columns: 1fr 1fr 1fr; } }
.field input, .field select { min-height: 46px; padding: 10px 12px; }
.field label { font-size: 0.9375rem; }
.lead-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.lead-form__foot .btn { min-width: 140px; }
@media (max-width: 599px) { .lead-form__foot .btn { width: 100%; } }
.contact__grid { align-items: start; }

/* Rent: options collapse on phones */
.option__toggle { display: none; }
@media (max-width: 799px) {
  .option { gap: 4px; }
  .option h2 { margin-block: 2px 0; font-size: 1.75rem; }
  .option__sum { color: var(--ink-2); }
  .option__toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    min-height: 48px; margin-top: 8px; padding: 10px 14px; border-radius: 12px;
    background: rgba(79, 81, 67, 0.06); border: 1px solid var(--line-strong);
    font: 600 var(--fs-sm)/1 var(--font); color: var(--ink); cursor: pointer;
  }
  .option__chev { width: 10px; height: 10px; border-inline-start: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.25s var(--ease); margin-top: -4px; }
  .option.is-open .option__chev { transform: rotate(-135deg); margin-top: 4px; }
  .option__body { display: none; margin-top: 12px; }
  .option.is-open .option__body { display: flex; flex-direction: column; }
}
@media (min-width: 800px) {
  .option__body { display: flex; flex-direction: column; flex: 1; }
  .option__sum { display: none; }
}

/* ================= v6 ================= */
/* Tighter home rhythm */
:root { --section: clamp(40px, 5vw, 72px); }
.page-index .offer { padding-top: clamp(32px, 4vw, 56px); }
.page-index .rooms { padding-bottom: var(--section); }
.page-index .faq { padding-block: var(--section); }
.page-index .final { }

/* Community: photo + six items */
.community { background: var(--bg-2); padding-block: var(--section); }
.community__inner { display: grid; gap: 22px; align-items: center; }
.community__fig { overflow: hidden; border-radius: var(--r-img); aspect-ratio: 16 / 10; }
.community__fig img { width: 100%; height: 100%; object-fit: cover; }
.community__text p { margin-bottom: 16px; }
.community__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; flex-wrap: nowrap; }
.community__list li {
  display: flex; align-items: center; gap: 10px; padding: 0; border: 0; border-radius: 0;
  background: none; font-size: 0.9375rem; line-height: 1.3; color: var(--ink);
}
.community__list svg { flex: none; width: 38px; height: 38px; padding: 8px; border-radius: 12px; background: var(--paper); color: var(--ink); }
@media (min-width: 900px) {
  .community__inner { grid-template-columns: 5fr 6fr; gap: clamp(40px, 5vw, 72px); }
  .community__fig { aspect-ratio: 4 / 3.4; order: 2; }
  .community__list { gap: 14px 20px; }
}

/* Contact – two balanced columns (form card | details) */
.contact__grid { display: grid; gap: 20px; align-items: stretch; }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
.contact__info { display: flex; flex-direction: column; gap: 14px; }
.info-list { display: grid; gap: 4px; }
.info-list a, .info-list__row {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0;
  text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line);
}
.info-list a:hover strong { text-decoration: underline; text-decoration-color: var(--terracotta); text-underline-offset: 3px; }
.info-list__i { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); }
.info-list__i svg { width: 20px; height: 20px; }
.info-list__t { display: grid; line-height: 1.35; }
.info-list strong { font-weight: 600; }
.info-list__t span { color: var(--ink-2); font-size: var(--fs-sm); justify-self: start; }
.contact__info .map { flex: 1; min-height: 220px; aspect-ratio: auto; }
.contact__nav { margin-top: 0; }

.contact__card {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(18px, 3vw, 28px); border-radius: var(--r-card);
  background: #fff; border: 1px solid var(--line);
}
.contact__card .lead-form { margin: 0; padding: 0; border: 0; background: none; gap: 12px; }
.contact__card .lead-form__h { font-size: var(--fs-md); font-weight: 600; }
.btn--block { width: 100%; }
.contact__card .btn { min-height: 48px; border-radius: 12px; }
.contact__card .field input, .contact__card .field select { background: var(--bg); border-color: var(--line-strong); border-width: 1px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: var(--fs-xs); }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.contact__card .lead-form__privacy { text-align: center; }

/* About */
.about-hero { padding-block: clamp(20px, 4vw, 56px) var(--section); }
.about-hero__inner { display: grid; gap: 22px; align-items: center; }
.about-hero h1 { font-size: var(--fs-h1); font-weight: 400; line-height: 1.12; margin-bottom: 14px; max-width: 16ch; }
.about-hero .lead { max-width: 46ch; }
.about-hero__fig { overflow: hidden; border-radius: var(--r-img); aspect-ratio: 4 / 3; order: -1; }
.about-hero__fig img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .about-hero__inner { grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); }
  .about-hero__fig { order: 0; aspect-ratio: 4 / 3.4; }
}
.values { background: var(--bg-2); padding-block: var(--section); }
.values__title { font-size: var(--fs-h2); font-weight: 400; margin-bottom: 20px; }
.values__grid { display: grid; gap: 12px; }
.values__grid li { padding: 20px; border-radius: var(--r-card); background: var(--paper); border: 1px solid var(--line); }
.values__grid svg { width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: var(--bg-2); margin-bottom: 12px; }
.values__grid h3 { font-size: var(--fs-md); font-weight: 600; margin-bottom: 4px; }
.values__grid p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
@media (min-width: 640px) { .values__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .values__grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.about-quote { padding-block: var(--section); }
.about-quote__inner { position: relative; max-width: 760px; text-align: center; }
.about-quote p { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); font-weight: 300; line-height: 1.4; }
.about-quote__path { width: 70px; margin: 0 auto 14px; transform: scaleX(-1); }

/* Nav with six items: a little tighter on desktop */
@media (min-width: 1100px) and (max-width: 1279px) { .nav ul { gap: 16px; } .header__inner { gap: 18px; } .header__logo img { width: 210px; } }

/* ================= v7 ================= */
/* Inner page heads: closer to the header, calmer */
.page-head { padding-top: clamp(14px, 2.2vw, 28px); padding-bottom: clamp(18px, 2.5vw, 32px); }
.page-head--plain { padding-bottom: clamp(16px, 2.5vw, 28px); }
.page-head h1 { font-size: clamp(1.875rem, 1.45rem + 1.5vw, 2.625rem); margin-bottom: 6px; }
.page-head .lead { font-size: var(--fs-md); }
.page-head .room-jump { margin-top: 14px; }
@media (min-width: 900px) {
  .page-head__text, .page-head--plain .page-head__text { padding-top: 0; }
  .page-head__text::before { display: none; }
}
.page-head .eyebrow { display: none; }

/* About: editorial photo strip instead of a photo "bubble" */
.strip { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 6px; height: clamp(200px, 32vw, 420px); margin-bottom: var(--section); }
.strip img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 599px) { .strip { grid-template-columns: 3fr 2fr; } .strip img:nth-child(3) { display: none; } }
.values { background: none; padding-block: 0 var(--section); }
.values__inner { display: grid; gap: 16px; }
.values__title { font-size: var(--fs-h2); font-weight: 400; margin: 0; }
.values__list { display: grid; }
.values__list div { padding-block: 16px; border-top: 1px solid var(--line-strong); }
.values__list dt { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); font-weight: 600; }
.values__list dt::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--terracotta); }
.values__list dd { color: var(--ink-2); margin-inline-start: 18px; }
@media (min-width: 800px) {
  .values__inner { grid-template-columns: 4fr 8fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
  .values__list { grid-template-columns: 1fr 1fr; column-gap: 40px; }
}
.closing { background: var(--bg-2); padding-block: var(--section); }
.closing__inner { max-width: 680px; text-align: center; }
.closing__path { width: 64px; margin: 0 auto 10px; transform: scaleX(-1); }
.closing__quote { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); font-weight: 300; line-height: 1.4; margin-bottom: 22px; }
.closing__ctas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@media (max-width: 559px) { .closing__ctas .btn { flex: 1 1 100%; } }

/* Contact: balanced; mobile order = details, form card, map */
.contact__card { gap: 14px; }
.contact__card .field input, .contact__card .field select { background: #fff; border: 1.5px solid #7E8072; }
.contact__card .field [aria-invalid="true"] { border-color: #A0412A; border-width: 2px; }
.lead-form__status { outline: none; }
.lead-form__status:empty { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.btn[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.map:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.info-list__t span + span { font-size: var(--fs-xs); }
@media (max-width: 899px) {
  .contact__grid { display: flex; flex-direction: column; }
  .contact__info { display: contents; }
  .info-list { order: 1; }
  .contact__card { order: 2; }
  .contact__info .map { order: 3; min-height: 180px; flex: none; height: 200px; }
  .contact__nav { order: 4; }
}

/* Rent: closing CTA */
.how__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; }
.steps h3 .text-link { font-weight: inherit; }

/* a11y fixes */
.acc a:focus-visible { outline: none; }
.acc a:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px var(--ink); }
.steps li:last-child .steps__num { background: #9A5F40; border-color: #9A5F40; color: #fff; }
.hero__pause { width: 44px; height: 44px; }
.faq .text-link, .how__cta .text-link { display: inline-block; padding-block: 10px; margin-block: -10px; }
.menu-btn, .header__logo { position: relative; z-index: 2; }

/* Slimmer sticky bar */
.sticky-cta { padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom)); }
.sticky-cta .btn { min-height: 48px; }
@media (max-height: 500px) { .sticky-cta { display: none !important; } }
@media (max-width: 699px) {
  .room-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .room-jump::-webkit-scrollbar { display: none; }
  .room-jump a { flex: none; }
}
.page-head__inner > * { min-width: 0; }

/* v8: about – robust strip (Safari-safe) + icon cards back */
.strip { display: flex; gap: 6px; height: clamp(200px, 30vw, 400px); overflow: hidden; }
.strip__cell { position: relative; flex: 2 1 0; min-width: 0; min-height: 0; overflow: hidden; }
.strip__cell:nth-child(2) { flex: 1 1 0; }
.strip__cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 599px) { .strip__cell:nth-child(3) { display: none; } .strip__cell:nth-child(2) { flex: 1.3 1 0; } }
.values { background: var(--bg-2); padding-block: var(--section); }
.values__title { margin-bottom: 18px; }
.values__grid { display: grid; gap: 12px; }
.values__grid li { padding: 20px; border-radius: var(--r-card); background: var(--paper); border: 1px solid var(--line); }
.values__grid svg { width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: var(--bg-2); margin-bottom: 12px; }
.values__grid h3 { font-size: var(--fs-md); font-weight: 600; margin-bottom: 4px; }
.values__grid p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
@media (min-width: 640px) { .values__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .values__grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.closing { background: var(--bg); }

/* v8: rent options – the whole card expands (mobile + desktop) */
.option { position: relative; padding: 0; gap: 0; overflow: hidden; transition: box-shadow 0.3s var(--ease), border-color 0.3s; }
.option__head { position: relative; padding: clamp(20px, 3vw, 30px); padding-inline-end: 64px; display: grid; gap: 4px; }
.option__for { justify-self: start; }
.option__title { font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.125rem); font-weight: 400; margin: 2px 0 0; line-height: 1.2; }
.option__btn { all: unset; cursor: pointer; }
.option__btn::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card) var(--r-card) 0 0; }
.option__btn:focus-visible::after { outline: 2px solid var(--focus); outline-offset: -4px; }
.option__sum { color: var(--ink-2); display: block !important; }
.option__chev {
  position: absolute; inset-inline-end: 20px; top: 50%; width: 36px; height: 36px; margin-top: -18px;
  border-radius: 50%; background: rgba(79, 81, 67, 0.07); pointer-events: none;
  transition: transform 0.35s var(--ease), background-color 0.2s;
}
.option__chev::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; top: -3px;
  border-inline-start: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg);
}
.option:hover .option__chev { background: rgba(79, 81, 67, 0.14); }
.option.is-open .option__chev { transform: rotate(180deg); }
.option__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.4s var(--ease); }
.option.is-ready:not(.is-open) .option__body { grid-template-rows: 0fr; }
.option__inner { min-height: 0; overflow: hidden; padding-inline: clamp(20px, 3vw, 30px); display: flex; flex-direction: column; }
.option.is-open .option__inner { padding-bottom: clamp(20px, 3vw, 30px); }
.option__inner .option__rows { margin-top: 0; }
.option.is-ready:not(.is-open) .option__inner { visibility: hidden; transition: visibility 0s 0.4s; }
.option.is-open { border-color: var(--line-strong); }
.option__toggle { display: none !important; }
.compare__grid { align-items: start; }
@media (prefers-reduced-motion: reduce) { .option__body, .option__chev { transition: none; } }
.option.is-ready .option__chev { transition: transform 0.35s var(--ease), background-color 0.2s; } .option__chev { transition: none; }
.option .option__chev { border: 0; width: 36px; height: 36px; margin: -18px 0 0; transform: none; }
.option.is-open .option__chev { transform: rotate(180deg); margin-top: -18px; }
.option .option__chev::before { border: 0; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }

/* v9: about head + story */
.about-head { padding-block: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 36px); text-align: center; }
.about-head__inner { max-width: 760px; }
.about-head h1 { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); font-weight: 400; line-height: 1.2; margin: 0 auto 14px; max-width: 15ch; }
.about-head .lead { max-width: 44ch; margin-inline: auto; }
.story { padding-bottom: var(--section); }
.story__inner { display: grid; gap: 28px; align-items: center; max-width: 1040px; }
.story__text p { font-size: var(--fs-md); color: var(--ink-2); line-height: 1.8; }
.story__text p + p { margin-top: 14px; }
.story__fig { position: relative; justify-self: center; width: min(78%, 360px); }
.story__img { position: relative; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 200px 200px 24px 24px; }
.story__shapes { position: absolute; width: 70%; inset-inline-start: -22%; bottom: -10%; opacity: 0.7; }
@media (min-width: 900px) {
  .story__inner { grid-template-columns: 7fr 5fr; gap: clamp(48px, 6vw, 96px); }
  .story__text p { font-size: var(--fs-lg); }
}

/* v9: footer page links in columns (desktop) */
@media (min-width: 700px) {
  .footer__pages ul { display: grid; grid-template-columns: repeat(2, auto); column-gap: 28px; justify-content: start; }
}
/* v9: rent closing CTA – centered, with room above */
.how__cta { flex-direction: column; justify-content: center; margin-top: clamp(32px, 4vw, 52px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line); text-align: center; gap: 12px; }

/* v10: about story = heading + text + large arch photo */
.story { padding-block: clamp(20px, 3vw, 44px) var(--section); }
.story__inner { max-width: none; gap: 24px; }
.story h1 { font-size: clamp(2rem, 1.5rem + 1.8vw, 3.1rem); font-weight: 400; line-height: 1.15; margin-bottom: 14px; max-width: 14ch; }
.story__lead { font-size: var(--fs-lg) !important; color: var(--ink) !important; margin-bottom: 18px; max-width: 40ch; }
.story__text p:not(.story__lead) { max-width: 52ch; }
.story__fig { width: min(92%, 420px); }
.story__img { border-radius: 260px 260px 24px 24px; aspect-ratio: 3 / 4; }
.story__shapes { width: 62%; inset-inline-start: -18%; bottom: -8%; }
@media (min-width: 900px) {
  .story__inner { grid-template-columns: 6fr 5fr; gap: clamp(48px, 6vw, 96px); }
  .story__fig { width: 100%; max-width: 480px; justify-self: end; }
  .story__img { max-height: calc(100svh - var(--header-h) - 60px); }
}

/* ================= v10 ================= */
/* Hero: a little less photo on phones */
@media (max-width: 899px) {
  .hero__media { height: 38svh; min-height: 240px; max-height: 360px; }
  .hero__content { margin-top: -28px; }
}

/* Plan cards (home) and plan tabs (rent): one family.
   Same paper surface; each plan owns one logo colour as a soft blob. */
.plan-card, .plans__tab {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line);
}
.plan-card::before, .plans__tab::before {
  content: ""; position: absolute; z-index: -1; width: 150px; height: 130px;
  inset-inline-start: -36px; top: -44px; border-radius: 58% 42% 55% 45% / 52% 60% 40% 48%;
  opacity: 0.55; transition: transform 0.4s var(--ease);
}
.plan-card--session::before, .plans__tab--session::before { background: var(--sage); }
.plan-card--card::before, .plans__tab--card::before { background: var(--blush); }
.plan-card:hover::before { transform: scale(1.08); }
.plan-card::after { display: none; }
.plan-card__tag { color: var(--ink-2); }
.plan-card p { color: var(--ink-2); }
.plan-card__more { color: var(--ink); border-bottom: 1.5px solid var(--terracotta); align-self: flex-start; padding-bottom: 2px; }

/* "In every room": compact on phones (3 per row, icon above label) */
@media (max-width: 699px) {
  .offer__incl .amen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
  .offer__incl .amen li { flex-direction: column; text-align: center; gap: 6px; font-size: 0.8125rem; line-height: 1.25; }
  .offer__incl .amen svg { width: 36px; height: 36px; padding: 8px; }
  .offer__incl { padding: 16px 12px; }
  .offer__incl-h { text-align: center; }
}

/* Room strip labels: small "חדר" + a large numeral */
.acc__label { gap: 0; }
.acc__num { display: flex; align-items: baseline; gap: 6px; font-weight: 300; font-size: 2.5rem; line-height: 1; }
.acc__num small { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.02em; }
@media (min-width: 900px) {
  .acc:not(.is-active) .acc__num { font-size: 2rem; }
  .acc:not(.is-active) .acc__num small { display: none; }
}

/* Community photo: centred crop */
.community__fig img { object-position: 50% 50%; }
@media (max-width: 899px) { .community__fig { aspect-ratio: 4 / 3; } }

/* Clinics on phones: no chip row, no arrow bar – swipe with a quiet counter on the photo */
@media (max-width: 899px) {
  .page-clinics .room-jump { display: none; }
  .car__bar { position: absolute; top: 12px; inset-inline-end: calc(var(--gutter) + 12px); margin: 0; pointer-events: none; }
  .car__btn { display: none; }
  .car__count {
    min-width: 0; padding: 3px 10px; border-radius: 999px; font-size: 0.8125rem;
    background: rgba(var(--bg-rgb), 0.9); color: var(--ink);
  }
}
.common__ig { display: none; }

/* Rent: centred head, one line */
.page-head--center { text-align: center; }
.page-head--center h1, .page-head--center .lead { margin-inline: auto; }
.page-head--center .page-head__inner { grid-template-columns: 1fr !important; }

/* Rent: plans side by side; the chosen one opens its details below */
.plans { padding-bottom: clamp(40px, 5vw, 64px); }
.plans .wrap { max-width: 880px; }
.plans__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plans__tab {
  display: grid; gap: 2px; justify-items: start; text-align: start; cursor: pointer;
  padding: 18px 16px 16px; border-radius: var(--r-card); font: inherit;
  transition: border-color 0.2s, transform 0.25s var(--ease), box-shadow 0.25s;
}
.plans__for { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.plans__name { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.2; }
.plans__sum { font-size: 0.875rem; color: var(--ink-2); }
.plans__tab[aria-selected="true"] { border: 2px solid var(--ink); box-shadow: 0 10px 24px -18px rgba(79, 81, 67, 0.6); }
.plans__tab[aria-selected="true"]::before { opacity: 0.8; transform: scale(1.15); }
.plans__tab[aria-selected="false"] { opacity: 0.85; }
.plans__tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.plans__panel {
  margin-top: 10px; padding: clamp(18px, 3vw, 28px); border-radius: var(--r-card);
  background: var(--paper); border: 1px solid var(--line-strong); display: grid; gap: 14px;
}
.plans.is-ready .plans__panel { animation: plansIn 0.35s var(--ease); }
@keyframes plansIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.plans__intro { font-size: var(--fs-md); }
.plans__panel .option__rows { margin: 0; }
.plans__panel .btn { justify-self: start; }
@media (max-width: 559px) { .plans__panel .btn { justify-self: stretch; } }
.plans .compare__note { margin-top: 12px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .plans.is-ready .plans__panel { animation: none; } }

/* Steps as a path, like the dotted line in the logo */
.how__title { font-size: var(--fs-h2); font-weight: 400; text-align: center; margin-bottom: 28px; }
.page-rent .how .wrap { max-width: 880px; }
.steps li::after { display: none !important; }
@media (max-width: 899px) {
  .steps { position: relative; padding-inline-start: 4px; }
  .steps li { border: 0 !important; padding-block: 14px; position: relative; }
  .steps li:not(:last-child)::before {
    content: ""; position: absolute; inset-inline-start: 17px; top: 50px; bottom: -14px;
    border-inline-start: 2.5px dotted rgba(79, 81, 67, 0.45);
  }
  .steps__num { background: var(--bg); position: relative; z-index: 1; }
}
@media (min-width: 900px) {
  .steps { position: relative; }
  .steps::before {
    content: ""; position: absolute; inset-inline: 8%; top: 4px; height: 36px; z-index: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 36' preserveAspectRatio='none'%3E%3Cpath d='M0 18 C 75 -6, 125 42, 200 18 S 325 -6, 400 18 S 525 42, 600 18' fill='none' stroke='%234F5143' stroke-opacity='.45' stroke-width='2.5' stroke-dasharray='1 7' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  }
  .steps li { text-align: center; position: relative; z-index: 1; }
  .steps__num { margin-inline: auto; }
}

/* About: one-line title on phones */
@media (max-width: 599px) { .story h1 { font-size: 1.875rem; max-width: none; } }
@media (max-width: 899px) { .car__bar { inset-inline-end: auto; inset-inline-start: calc(var(--gutter) + 12px); } }
.plan-card::before, .plans__tab::before { width: 110px; height: 96px; inset-inline-start: -30px; top: -34px; opacity: 0.45; }
.plans__tab[aria-selected="true"]::before { opacity: 0.6; transform: none; }
.plan-card:hover::before { transform: scale(1.06); }

/* ================= v11: expert colour + layout pass ================= */
/* Plans: soft watercolour wash under the border; sage stays the "login" colour */
.plan-card::before, .plans__tab::before { content: none; }
.plan-card--session, .plans__tab--session {
  background: radial-gradient(150px 115px at calc(100% - 8px) 0, rgba(229, 192, 181, 0.55), rgba(229, 192, 181, 0) 70%), var(--paper);
}
.plan-card--card, .plans__tab--card {
  background: radial-gradient(150px 115px at calc(100% - 8px) 0, rgba(216, 190, 154, 0.5), rgba(216, 190, 154, 0) 70%), var(--paper);
}
.plans__tab[aria-selected="false"] { opacity: 1; border: 1px solid var(--line-strong); }
.option__rows dd span { display: block; }

/* Steps */
@media (max-width: 899px) { .page-rent .steps { width: fit-content; margin-inline: auto; } }
.steps li:last-child .steps__num { background: var(--blush); border-color: var(--terracotta); color: var(--ink); }
@media (min-width: 900px) { .steps::before { inset-inline: calc((100% - 120px) / 8); } }

/* Clinics: photos lead */
.room .room__media { order: -1; }
@media (min-width: 900px) { .room--flip .room__media { order: 0; } }
@media (max-width: 899px) { .car__count { font-size: 0.875rem; padding: 4px 12px; font-weight: 600; } }

/* Amenities on phones: two columns, icon inline */
@media (max-width: 699px) {
  .offer__incl .amen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .offer__incl .amen li { flex-direction: row; text-align: start; font-size: 0.875rem; gap: 8px; }
  .offer__incl .amen svg { width: 32px; height: 32px; padding: 7px; flex: none; }
  .offer__incl-h { text-align: start; }
}

/* Facts strip: value over label */
.facts__list li { display: grid; gap: 2px; }
.facts__list li strong { font-size: 1.125rem; font-weight: 600; }
.facts__list li span { font-size: 0.8125rem; color: var(--ink-3); }

/* Home section rhythm: ivory / warm alternation */
.page-index .rooms { background: var(--bg-2); padding-top: var(--section); }
.page-index .community { background: var(--bg); border-block: 0; }
.community__list li svg { background: var(--bg-2); }
.page-index .faq { background: var(--bg-2); padding-top: var(--section); }

/* Login: one treatment everywhere */
.btn--login { background: var(--sage-soft); border: 1px solid var(--ink); }
.btn--login:hover { background: var(--sage); }
.how__cta .btn--login { font-size: var(--fs-sm); }

/* About */
@media (max-width: 899px) {
  .story__shapes { display: none; }
  .story__fig { width: min(80%, 320px); }
  .story__img { aspect-ratio: 4 / 4.6; }
}
@media (min-width: 900px) {
  .story h1 { max-width: none; }
  .story__shapes { inset-inline-start: auto; inset-inline-end: -14%; bottom: -6%; }
}
.plan-card--session, .plans__tab--session { background: radial-gradient(230px 170px at calc(100% - 6px) 0, rgba(229, 192, 181, 0.8), rgba(229, 192, 181, 0) 72%), var(--paper); }
.plan-card--card, .plans__tab--card { background: radial-gradient(230px 170px at calc(100% - 6px) 0, rgba(216, 190, 154, 0.75), rgba(216, 190, 154, 0) 72%), var(--paper); }

/* ================= v12 ================= */
/* Plan cards + rent tabs: one full, even colour per plan (no half-wash) */
.plan-card--session, .plans__tab--session { background: #F2DFD7; border-color: rgba(168, 103, 74, 0.28); }
.plan-card--card, .plans__tab--card { background: #EFE3D1; border-color: rgba(140, 110, 70, 0.3); }
.plan-card:hover { border-color: var(--ink); }

/* Rent: clearly a choice – hint, radio dot, bigger tabs, the open one points at its details */
.plans__hint { text-align: center; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); margin-bottom: 12px; }
.plans__tabs { gap: 12px; }
.plans__tab {
  position: relative; overflow: visible; min-height: 132px; align-content: start;
  padding: 18px 18px 18px; gap: 4px; box-shadow: none;
}
.plans__radio {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper);
  display: grid; place-items: center; margin-bottom: 6px; transition: background-color 0.2s;
}
.plans__radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); transform: scale(0); transition: transform 0.2s var(--ease); }
.plans__tab[aria-selected="true"] .plans__radio { background: var(--ink); }
.plans__tab[aria-selected="true"] .plans__radio::after { transform: scale(1); }
.plans__name { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); }
.plans__for, .plans__sum { font-size: 0.875rem; }
.plans__tab[aria-selected="true"] { border: 2px solid var(--ink); box-shadow: 0 12px 26px -20px rgba(79, 81, 67, 0.7); }
.plans__tab[aria-selected="false"] { border: 1px solid transparent; }
.plans__tab[aria-selected="false"]:hover { border-color: var(--ink); }
/* little notch linking the chosen tab to its details */
.plans__tab[aria-selected="true"]::after {
  content: ""; position: absolute; bottom: -9px; inset-inline-start: 28px; width: 16px; height: 16px;
  background: inherit; border: 2px solid var(--ink); border-top: 0; border-inline-start: 0;
  transform: rotate(45deg); background: var(--paper); z-index: 2;
}
.plans__panel { margin-top: 16px; border: 1px solid var(--line-strong); }
.plans__panel--session { border-top: 3px solid #D9A898; }
.plans__panel--card { border-top: 3px solid var(--sand); }
@media (max-width: 559px) {
  .plans__tab { min-height: 148px; padding: 16px 14px; }
  .plans__name { font-size: 1.375rem; }
}

/* Steps: an uneven dotted path, 1 → 4, ending in the logo's dot and watercolours */
.steps-wrap { position: relative; }
.steps__path { position: absolute; pointer-events: none; overflow: visible; }
.steps__path path { fill: none; stroke: #4F5143; stroke-opacity: 0.55; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.1 8; vector-effect: non-scaling-stroke; }
.steps li::before { content: none !important; }
.steps::before { content: none !important; }
.steps__num { position: relative; z-index: 1; background: var(--bg); }
.steps__end .steps__num { background: var(--terracotta); border-color: var(--terracotta); color: var(--ink); font-weight: 700; isolation: isolate; }
.steps__end .steps__num b { position: relative; z-index: 2; font-weight: 700; }
.steps__blob { position: absolute; z-index: -1; border-radius: 55% 45% 52% 48% / 48% 56% 44% 52%; pointer-events: none; }
.steps__blob--a { width: 150%; height: 140%; background: rgba(229, 192, 181, 0.55); inset-inline-end: 40%; top: 45%; }
.steps__blob--b { width: 170%; height: 155%; background: rgba(201, 204, 183, 0.6); inset-inline-end: 95%; top: 90%; border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%; }
.steps__blob--c { width: 120%; height: 115%; background: rgba(200, 143, 112, 0.28); inset-inline-end: -10%; top: 105%; }
.steps__end .steps__num { overflow: visible; }
.steps__end .steps__num::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--terracotta); z-index: 1; }
@media (max-width: 899px) {
  .page-rent .steps { width: auto; margin: 0; }
  .page-rent .steps-wrap { width: fit-content; margin-inline: auto; padding-inline-end: 56px; }
  .steps__path--wide { display: none; }
  .steps__path--tall { inset-inline-start: 0; top: 0; width: 60px; height: 100%; }
  .steps li { padding-block: 16px; align-items: center; }
  .steps__num { margin-top: 0; }
  .steps__blob--b, .steps__blob--c { display: none; }
  .steps__blob--a { width: 190%; height: 180%; inset-inline-end: -120%; top: -40%; }
}
@media (min-width: 900px) {
  .steps__path--tall { display: none; }
  .steps { gap: 0; }
  .steps li { padding-inline: 12px; }
  .steps__num { width: 48px; height: 48px; font-size: 1.1875rem; }
  .steps__path--wide { inset-inline: 0; top: -20px; width: 100%; height: 120px; }
}

/* Clinics: no chip row anywhere; desktop gallery shows one view at a time with quiet overlay controls */
.room-jump { display: none; }
@media (min-width: 900px) {
  .car__track { gap: 0; }
  .car__slide { flex-basis: 100%; aspect-ratio: 3 / 2; border-radius: 0; }
  .car__slide.is-portrait { flex-basis: 50%; aspect-ratio: auto; }
  .car__track:has(.car__slide.is-portrait) .car__slide.is-portrait + .car__slide.is-portrait { border-inline-start: 6px solid var(--bg); }
  .car__bar { display: contents; }
  .car__count {
    position: absolute; top: 14px; inset-inline-start: 14px; min-width: 0; padding: 4px 12px;
    border-radius: 999px; background: rgba(var(--bg-rgb), 0.92); color: var(--ink);
    font-size: 0.875rem; font-weight: 600; pointer-events: none;
  }
  .car__btn {
    position: absolute; top: 50%; translate: 0 -50%; width: 46px; height: 46px;
    background: rgba(var(--bg-rgb), 0.9); border: 0; box-shadow: 0 6px 18px -8px rgba(40, 40, 30, 0.45);
    opacity: 0; transition: opacity 0.25s, background-color 0.2s;
  }
  .car__btn[data-dir="-1"] { inset-inline-start: 14px; }
  .car__btn[data-dir="1"] { inset-inline-end: 14px; }
  .car:hover .car__btn, .car:focus-within .car__btn { opacity: 1; }
  .car__btn[aria-disabled="true"] { opacity: 0 !important; pointer-events: none; }
  .car__btn:hover:not([aria-disabled="true"]) { background: var(--paper); color: var(--ink); }
}
@media (min-width: 900px) and (hover: none) { .car__btn { opacity: 1; } }

/* About: founder credit */
.story__founder { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-2); }
/* v12b fixes */
.plans__tab[aria-selected="true"]::after {
  inset-inline-start: auto; right: 30px; border: 0; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  background: inherit; bottom: -9.5px;
}
.plans__tab--card[aria-selected="true"]::after { right: auto; left: 30px; }
.steps__blob--a { width: 140%; height: 125%; top: -40%; inset-inline-end: -100%; }
.steps__blob--b { width: 175%; height: 130%; top: -5%; inset-inline-end: -165%; }
.steps__blob--c { width: 95%; height: 95%; top: -70%; inset-inline-end: -55%; background: rgba(200, 143, 112, 0.25); }
@media (max-width: 899px) {
  .page-rent .steps-wrap { padding-inline-end: 0; }
  .steps li { padding-block: 20px; }
  .steps__blob--b, .steps__blob--c { display: block; }
  .steps__blob--a { width: 150%; height: 140%; top: -45%; inset-inline-end: auto; inset-inline-start: -70%; }
  .steps__blob--b { width: 160%; height: 125%; top: 30%; inset-inline-end: auto; inset-inline-start: -95%; }
  .steps__blob--c { width: 90%; height: 90%; top: 55%; inset-inline-end: auto; inset-inline-start: -10%; }
}
@media (min-width: 900px) { .car__btn { opacity: 0.9; } .car:hover .car__btn { opacity: 1; } }
.story__founder a { white-space: nowrap; }

/* v13: step 4 = "מתחילים לטפל בשביל" – the path runs into the logo itself */
.steps__end .steps__logo { display: block; position: relative; }
.steps__sym { position: absolute; max-width: none; height: auto; pointer-events: none; }
.steps__wm { display: block; height: 1.35em; width: auto; margin-top: 6px; }
@media (min-width: 900px) {
  .steps-wrap { margin-top: 96px; }
  .steps__end .steps__logo { height: 48px; margin-bottom: 18px; }
  .steps__sym--ltr { display: none; }
  /* mirrored symbol: its path starts at (226,214)/259 → at 150px wide that is (131,124) */
  .steps__sym--rtl { width: 150px; left: calc(50% - 131px); top: -100px; }
  .steps__wm { margin-inline: auto; }
}
@media (max-width: 899px) {
  .page-rent .steps-wrap { padding-inline-start: 96px; padding-inline-end: 0; }
  .steps { position: relative; }
  .steps li { min-height: 64px; padding-block: 0; align-items: center; }
  .steps__end { min-height: 112px !important; padding-top: 44px !important; align-items: start !important; }
  .steps__end .steps__logo { grid-row: span 2; }
  .steps__sym--rtl { display: none; }
  /* symbol path starts at (33,214)/259 → at 110px wide (14,91); start sits at ol-right +4px, y 262 */
  .steps__sym--ltr { width: 110px; right: -100px; top: 127px; position: absolute; }
  .steps__path--tall { inset-inline-start: auto; right: -40px; top: 0; width: 100px; height: 300px; }
  .steps__end .steps__sym--ltr { top: auto; }
}
@media (max-width: 899px) {
  .steps__end, .steps__end .steps__logo { position: static; }
  .steps__end .steps__sym--ltr { top: 171px; }
  .steps__path--tall { right: 56px; }
}
@media (max-width: 899px) {
  .steps__end { position: relative; }
  .steps__end .steps__sym--ltr { top: -21px; right: -104px; }
  .steps__num { grid-row: auto; }
  .steps__end .steps__logo { grid-row: auto; }
}
.steps__wm { height: 1.2em; }

/* v14: step 4 = the logo – watercolour blobs, the path crosses them and ends in the terracotta dot "4" */
.steps__sym, .steps__logo { display: none !important; }
.steps__blobs { position: absolute; z-index: 0; pointer-events: none; max-width: none; height: auto; }
.steps__path { z-index: 1; }
.steps { position: relative; z-index: 2; }
.steps li { position: relative; }
.steps__num { position: relative; z-index: 2; }
.steps h3 { position: relative; z-index: 2; }
.steps__num--dot { background: var(--terracotta) !important; border-color: var(--terracotta) !important; color: var(--ink) !important; font-weight: 700; }
.steps__end { position: relative; }
.steps__wm { height: 1.15em; margin-top: 8px; opacity: 0.92; }
@media (min-width: 900px) {
  .steps-wrap { margin-top: 0; }
  .steps__blobs { width: 190px; left: calc(12.5% - 39px); top: -9px; }
  .steps__wm { margin-inline: auto; }
  .how__cta { margin-top: 64px; }
}
@media (max-width: 899px) {
  .steps__end { min-height: 112px !important; padding-top: 0 !important; align-items: start !important; }
  .steps__end .steps__num { margin-top: 15px; }
  .steps__end h3 { padding-top: 12px; }
  .steps__blobs { width: 150px; right: -2px; top: 198px; }
}
/* v14b: unmirrored logo blobs hang down-left from the "4" dot, exactly as in the logo */
.steps__end .steps__num::before { content: none !important; }
.how { overflow: hidden; }
@media (min-width: 900px) {
  .steps__blobs { width: 250px; left: calc(12.5% - 199px); top: -19px; opacity: 0.9; }
  .steps__end h3 { padding-top: 4px; }
}
@media (max-width: 899px) {
  .steps__blobs { width: 180px; right: calc(117px - 37px); top: 186px; left: auto; opacity: 0.9; }
}
@media (max-width: 899px) {
  .steps__end h3 { padding-top: 17px; }
  .steps__end { min-height: 150px !important; }
}
@media (min-width: 900px) { .how__cta { margin-top: 84px; } }
@media (max-width: 899px) {
  .page-rent .steps-wrap { padding-inline-start: 0; }
  .steps__path--tall { right: -40px; }
  .steps__blobs { right: -16px; }
}
/* v15: smaller blobs (same art), a longer, more winding last stretch 3 → 4 */
@media (min-width: 900px) {
  .steps { grid-template-columns: 1fr 1fr 1fr 1.25fr; }
  .steps__blobs { width: 210px; left: calc(14.706% - 167px); top: -12px; }
}
@media (max-width: 899px) {
  .steps__end { margin-top: 26px; }
  .steps__blobs { width: 150px; right: -10px; top: 224px; }
}
@media (max-width: 899px) { .steps__end { min-height: 132px !important; } }
/* v16: blobs sit higher and to the right of the "4" dot, so the last stretch of the path runs across them (as in the logo) */
@media (min-width: 900px) {
  .steps__blobs { width: 210px; left: calc(14.706% - 30px); top: -58px; right: auto; }
}
@media (max-width: 899px) {
  .steps__blobs { width: 150px; right: -112px; top: 146px; }
}
@media (max-width: 359px) { .steps__blobs { width: 124px; right: -88px; top: 156px; } }
@media (min-width: 900px) { .steps__blobs { left: calc(14.706% - 46px); top: -66px; width: 200px; } }
@media (max-width: 899px) {
  .steps__blobs { width: 136px; right: -96px; top: 150px; }
  .steps__end { min-height: 100px !important; }
}
@media (max-width: 359px) { .steps__blobs { width: 120px; right: -80px; top: 156px; } }
/* v17: the blob mass is centred on the "4" and begins halfway between 3 and 4 */
.steps__blobs { transform: translate(-51%, -55%); right: auto !important; }
@media (min-width: 900px) {
  /* col 4 centre = 14.706% ; 3→4 centre distance = 26.47% of the row */
  .steps__blobs { width: 26.47%; left: 14.706%; top: 24px; }
}
@media (max-width: 899px) {
  .steps__end { margin-top: 40px; }
  /* column centre sits 21px in from the list's right edge; "4" centre at 264px */
  .steps__blobs { width: 124px; left: calc(100% - 21px); top: 264px; }
}
@media (max-width: 359px) { .steps__blobs { width: 112px; top: 264px; } }
@media (min-width: 900px) { .steps__end h3 { padding-top: 0; } .steps__end .steps__wm { margin-top: 0; } }
@media (min-width: 900px) { .page-rent .how__title { margin-bottom: 64px; } }

/* ================= v19: clinics – room mosaic under the title ================= */
.mosaic-wrap { padding-bottom: clamp(28px, 4vw, 48px); }
.page-clinics .page-head { padding-bottom: clamp(14px, 2vw, 22px); }
.mosaic {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "r5 r5" "r4 r2" "r1 r3" "r6 r6";
}
.mosaic__item--r1 { grid-area: r1; } .mosaic__item--r2 { grid-area: r2; } .mosaic__item--r3 { grid-area: r3; }
.mosaic__item--r4 { grid-area: r4; } .mosaic__item--r5 { grid-area: r5; } .mosaic__item--r6 { grid-area: r6; }
.mosaic__item a {
  position: relative; display: block; height: 100%; overflow: hidden; border-radius: var(--r-card);
  background: var(--bg-2); color: #fff; text-decoration: none; isolation: isolate;
}
.mosaic__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.mosaic__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(40, 40, 32, 0.62), rgba(40, 40, 32, 0.12) 52%, rgba(40, 40, 32, 0) 70%); }
.mosaic__label { position: absolute; inset-inline: 14px; bottom: 12px; display: grid; gap: 2px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25); }
.mosaic__name { font-size: 1.1875rem; font-weight: 600; line-height: 1.15; }
.mosaic__line { font-size: 0.875rem; line-height: 1.3; opacity: 0.95; }
.mosaic__item--big .mosaic__name { font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem); }
.mosaic__item a:hover img { transform: scale(1.04); }
.mosaic__item a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* phones: room 5 full width, then two columns */
.mosaic__item--r5 a { aspect-ratio: 3 / 2; }
.mosaic__item--r4 a, .mosaic__item--r2 a { aspect-ratio: 4 / 5; }
.mosaic__item--r1 a, .mosaic__item--r3 a { aspect-ratio: 1 / 1; }
.mosaic__item--r6 a { aspect-ratio: 2 / 1; }
@media (max-width: 599px) {
  .mosaic__item--small .mosaic__line, .mosaic__item--r4 .mosaic__line, .mosaic__item--r2 .mosaic__line { font-size: 0.8125rem; }
  .mosaic__label { inset-inline: 12px; bottom: 10px; }
}
/* desktop: three staggered columns – big, small, big */
@media (min-width: 900px) {
  .mosaic {
    grid-template-columns: 1.15fr 1fr 1.15fr; grid-auto-rows: clamp(118px, 11vw, 168px); gap: 12px;
    grid-template-areas: "r5 r3 r2" "r5 r4 r2" "r1 r4 r6";
  }
  .mosaic__item a { aspect-ratio: auto !important; }
  .mosaic__label { inset-inline: 18px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { .mosaic__item img { transition: none; } .mosaic__item a:hover img { transform: none; } }
@media (max-width: 899px) { .mosaic__item--r6 a { aspect-ratio: 5 / 2; } }

/* v19b: clinics – one calm wide photo under the title (instead of the mosaic) */
.clinics-banner { padding-bottom: clamp(36px, 5vw, 64px); }
.clinics-banner__fig { position: relative; margin: 0; border-radius: var(--r-img); overflow: hidden; background: var(--bg-2); }
.clinics-banner__fig img { display: block; width: 100%; height: clamp(300px, 58vh, 560px); object-fit: cover; object-position: 50% 62%; }
.clinics-banner__tag {
  position: absolute; bottom: 14px; inset-inline-start: 14px; padding: 6px 14px; border-radius: 999px;
  background: rgba(var(--bg-rgb), 0.92); color: var(--ink); font-weight: 600; font-size: 0.9375rem; text-decoration: none;
}
.clinics-banner__tag:hover { background: var(--paper); }
.clinics-banner__tag:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 899px) { .clinics-banner__fig img { height: auto; aspect-ratio: 4 / 4.4; object-position: 42% 60%; } }
@media (max-width: 899px) { .clinics-banner__fig img { aspect-ratio: 4 / 5; } }

/* v19c: clinics – intro text beside one beautiful room (replaces the banner) */
.clinics-banner { display: none; }
.clinics-intro { padding-bottom: clamp(40px, 5vw, 72px); }
.clinics-intro__inner { display: grid; gap: 22px; align-items: center; }
.clinics-intro__text h1 { font-size: var(--fs-h1); font-weight: 400; line-height: 1.12; margin-bottom: 14px; }
.clinics-intro__text .lead { max-width: 40ch; margin-bottom: 12px; color: var(--ink); }
.clinics-intro__text p:not(.lead) { color: var(--ink-2); max-width: 46ch; }
.clinics-intro__cta { margin-top: 18px; }
.clinics-intro__cta svg { width: 18px; height: 18px; }
.clinics-intro__fig { position: relative; margin: 0; border-radius: var(--r-img); overflow: hidden; background: var(--bg-2); }
.clinics-intro__fig img { display: block; width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; object-position: 45% 60%; }
.clinics-intro__tag {
  position: absolute; bottom: 14px; inset-inline-start: 14px; padding: 6px 14px; border-radius: 999px;
  background: rgba(var(--bg-rgb), 0.92); color: var(--ink); font-weight: 600; font-size: 0.9375rem; text-decoration: none;
}
.clinics-intro__tag:hover { background: var(--paper); }
.clinics-intro__tag:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (min-width: 900px) {
  .clinics-intro__inner { grid-template-columns: 5fr 7fr; gap: clamp(40px, 5vw, 80px); }
  .clinics-intro__fig img { aspect-ratio: auto; height: clamp(380px, 36vw, 500px); }
}
@media (max-width: 899px) { .clinics-intro__cta { display: none; } .clinics-intro__inner { gap: 18px; } }

/* v19d: clinics – the rooms strip picks the room shown below it */
.clinics-intro { padding-bottom: clamp(18px, 2.5vw, 28px); }
.clinics-intro__text { max-width: 640px; }
.rooms-picker { padding-bottom: clamp(28px, 4vw, 48px); }
.acc--portrait img { height: 100% !important; object-position: 50% 58%; }
.accordion--picker .acc a[aria-current="true"]::before {
  content: ""; position: absolute; z-index: 2; inset-inline: 0; bottom: 0; height: 5px; background: var(--terracotta);
}
.showcase.is-picked { padding-top: 0; }
.showcase.is-picked .showcase__list { gap: 0; }
.showcase.is-picked .room { animation: roomIn 0.4s var(--ease); }
@keyframes roomIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .showcase.is-picked .room--flip { grid-template-columns: 8fr 4fr; }
  .showcase.is-picked .room--flip .room__media { order: -1; }
}
@media (prefers-reduced-motion: reduce) { .showcase.is-picked .room { animation: none; } }
@media (max-width: 899px) { .acc { scroll-snap-align: center; } }
@media (max-width: 899px) { .accordion--picker .acc { aspect-ratio: 1 / 1.05; } }

/* v19e: clinics picker – no hover expansion, a calm hover cue; the chosen room opens as a panel right under the strip */
@media (min-width: 900px) {
  .accordion--picker { height: clamp(380px, 32vw, 440px); }
  .accordion--picker .acc a { cursor: pointer; }
  .accordion--picker .acc:not(.is-active) img { transition: transform 0.5s var(--ease); }
  .accordion--picker .acc:not(.is-active):hover img { transform: scale(1.04); }
  .accordion--picker .acc:not(.is-active):hover .acc__shade { opacity: 0.85; }
  .showcase.is-picked .room { align-items: start; gap: clamp(32px, 4vw, 56px); }
  .showcase.is-picked .room__text { padding-top: 8px; }
  .showcase.is-picked .car__slide { aspect-ratio: 16 / 10; }
}
.showcase.is-picked .room__title { font-size: var(--fs-h2); }
.rooms-picker { padding-bottom: clamp(24px, 3vw, 36px); }

/* v19f: clinics – compact intro; the strip steps back once a room is chosen */
.clinics-intro__text { max-width: none; }
.clinics-intro__text h1 { margin-bottom: 10px; }
.clinics-intro__copy p { margin: 0; }
.clinics-intro__copy .lead { margin-bottom: 4px; }
@media (min-width: 1000px) {
  .clinics-intro__copy p { white-space: nowrap; }
  .clinics-intro__copy .lead, .clinics-intro__copy p:not(.lead) { font-size: var(--fs-md); color: var(--ink-2); max-width: none; }
}
@media (min-width: 900px) {
  .accordion--picker { transition: height 0.5s var(--ease); }
  .accordion--picker.is-compact { height: 200px; }
  .accordion--picker.is-compact .acc.is-active { flex-grow: 3.2; }
  .accordion--picker.is-compact .acc img { height: 100%; object-position: 50% 62%; }
  .accordion--picker.is-compact .acc--portrait img { object-position: 50% 62%; }
}
@media (max-width: 899px) {
  .accordion--picker .acc { transition: aspect-ratio 0.4s var(--ease); }
  .accordion--picker.is-compact .acc { aspect-ratio: 16 / 10; }
}
.accordion--picker.no-anim, .accordion--picker.no-anim .acc { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .accordion--picker, .accordion--picker .acc { transition: none !important; } }

/* v19g: phones – after a room is chosen the strip becomes a slim row: all six rooms on screen */
@media (max-width: 899px) {
  .accordion--picker.is-compact {
    overflow: visible; margin: 0; padding: 0; gap: 6px; scroll-snap-type: none;
  }
  .accordion--picker.is-compact .acc {
    flex: 1 1 0; aspect-ratio: auto !important; height: 64px; border-radius: 12px; transition: none;
  }
  .accordion--picker.is-compact .acc img { height: 100% !important; object-position: 50% 60%; }
  .accordion--picker.is-compact .acc__shade { height: 100%; background: rgba(46, 44, 36, 0.45); }
  .accordion--picker.is-compact .acc__label { inset: 0; display: grid; place-items: center; }
  .accordion--picker.is-compact .acc__line, .accordion--picker.is-compact .acc__num small { display: none; }
  .accordion--picker.is-compact .acc__num { font-size: 1.5rem; font-weight: 500; }
  .accordion--picker.is-compact .acc a[aria-current="true"]::before { height: 4px; }
  .accordion--picker.is-compact .acc:has(a[aria-current="true"]) .acc__shade { background: rgba(46, 44, 36, 0.2); }
  .accordion--picker.is-compact .acc:has(a[aria-current="true"]) { box-shadow: 0 0 0 2px var(--terracotta); }
}
.showcase.is-picked:not(:has(.room:not([hidden]))) { display: none; }
.clinics-intro__care { margin-top: 4px !important; color: var(--ink) !important; font-weight: 600; }

/* v19c: clinics – "מה עוד כלול" band (building-wide services) */
.included { padding-block: 0 clamp(36px, 5vw, 64px); }
.included__box { padding: clamp(18px, 3vw, 28px); border-radius: var(--r-card); background: var(--paper); border: 1px solid var(--line); }
.included__h { font-size: var(--fs-md); font-weight: 600; margin-bottom: 14px; }
.included__care span { font-weight: 600; }
.included__care svg { background: var(--blush-soft) !important; }
@media (min-width: 1000px) { .included__list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* v19h: phones – make it obvious each room card opens */
.acc__more, .rooms-picker__hint { display: none; }
@media (max-width: 899px) {
  .accordion--picker .acc__more {
    position: absolute; top: 14px; inset-inline-start: 14px; display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px; background: rgba(var(--bg-rgb), 0.92); color: var(--ink);
    font-size: 0.875rem; font-weight: 600; box-shadow: 0 4px 12px -6px rgba(40, 40, 30, 0.4);
  }
  .accordion--picker .acc__more svg { width: 16px; height: 16px; }
  .accordion--picker.is-compact .acc__more { display: none; }
  .rooms-picker__hint { display: block; margin-top: 10px; font-size: var(--fs-xs); color: var(--ink-3); text-align: center; }
  .accordion--picker.is-compact + .rooms-picker__hint { display: none; }
}

/* v20: about on phones – the photo right under the title, not after all the text */
@media (max-width: 899px) {
  .story__inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .story__text { display: contents; }
  .story h1 { order: 1; margin-bottom: 16px; }
  .story__fig { order: 2; width: 100%; max-width: 460px; align-self: center; margin: 0 0 22px; }
  .story__img { aspect-ratio: 4 / 3.3; border-radius: 180px 180px 22px 22px; object-position: 50% 60%; }
  .story__text > :not(h1) { order: 3; }
  .story__text p + p { margin-top: 14px; }
}

/* v20: smoother room strip – photos keep their scale while a tile widens (they reveal instead of zooming) */
@media (min-width: 900px) {
  .accordion .acc { transition: flex-grow 650ms cubic-bezier(0.4, 0, 0.2, 1); }
  .accordion .acc img {
    inset: auto auto 0 50%; transform: translateX(-50%); width: max(100%, 600px); max-width: none;
  }
  .accordion--picker.is-compact .acc img, .accordion--picker .acc img { transition: height 0.5s var(--ease); }
}
@media (prefers-reduced-motion: reduce) { .accordion .acc { transition: none; } }
.showcase.is-picked .room { animation: roomIn 0.45s cubic-bezier(0.4, 0, 0.2, 1); }

/* v20b: about on phones – a full-bleed photo that fades into the page, the title rising out of the fade */
@media (max-width: 899px) {
  .page-about .story { padding-top: 0; }
  .story__fig { order: 0; width: auto; max-width: none; align-self: stretch; margin: 0 calc(var(--gutter) * -1) 0; }
  .story__img {
    display: block; width: 100%; height: 58svh; min-height: 320px; max-height: 520px; aspect-ratio: auto;
    border-radius: 0; object-position: 50% 62%;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, 0.55) 74%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, 0.55) 74%, transparent 100%);
  }
  .story h1 { order: 1; position: relative; z-index: 1; margin-top: -64px; margin-bottom: 14px; }
  .story__text > :not(h1) { order: 2; }
}
@media (max-width: 899px) {
  .story__img { height: 50svh; min-height: 300px; max-height: 460px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, rgba(0,0,0,.5) 70%, transparent 96%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 45%, rgba(0,0,0,.5) 70%, transparent 96%); }
  .story h1 { margin-top: -54px; text-shadow: 0 0 18px rgba(var(--bg-rgb), 0.9), 0 0 4px rgba(var(--bg-rgb), 0.9); }
  .story__lead { margin-bottom: 14px !important; }
}

/* v20c: about on phones – the photo stays pinned while the story scrolls over it on a soft ivory veil */
@media (max-width: 899px) {
  .story__inner { display: flex; flex-direction: column; }
  .story__fig {
    order: 0; position: sticky; top: var(--sticky-top, 0px); z-index: 0;
    margin: 0 calc(var(--gutter) * -1); align-self: stretch; width: auto; max-width: none;
  }
  .story__img {
    height: 62svh; min-height: 340px; max-height: 560px; border-radius: 0; object-position: 50% 62%;
    -webkit-mask-image: none; mask-image: none;
  }
  .story__text {
    display: block; order: 1; position: relative; z-index: 1;
    margin: -120px calc(var(--gutter) * -1) 0; padding: 70px var(--gutter) 28px;
    background: linear-gradient(to bottom, rgba(var(--bg-rgb), 0) 0, rgba(var(--bg-rgb), 0.86) 70px, rgba(var(--bg-rgb), 0.9) 100%);
  }
  .story h1 { margin-top: 0; text-shadow: none; }
}
@media (max-width: 899px) { .story__fig { top: 81px; } .story__img { height: calc(100svh - 81px - 120px); max-height: 600px; } }
@media (max-width: 899px) { .story__img { -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); } }
/* about: shorter H1 fits one line on phones */
@media (max-width: 599px) { .story h1 { font-size: 2rem; } }

/* no jump on load: on phones the rooms strip stays invisible until it is centred on the open room
   (falls back to visible after 1.2s if scripts don't run) */
@keyframes accShow { to { opacity: 1; } }
@media (max-width: 899px) {
  .js .accordion:not(.is-ready) { opacity: 0; animation: accShow 0s 1.2s forwards; }
}

/* about: Shani's photo shown whole (from afar), landscape with a soft arch */

@media (max-width: 899px) {
  /* the whole room, from afar: the photo keeps its own shape instead of a tall crop */
  .story__img.story__img--wide { height: auto; min-height: 0; max-height: none; aspect-ratio: 16 / 9; border-radius: 0; object-position: 50% 78%; }
  .story__fig:has(.story__img--wide) { width: auto; max-width: none; }
  .story__fig:has(.story__img--wide) + .story__text, .story__text:has(~ .story__fig .story__img--wide) { margin-top: -48px; padding-top: 44px; }
}

/* about on desktop: side by side — the whole photo of Shani on the left (no crop, no zoom),
   fading toward the right, and the story on the right overlapping the faded part of it.
   Phones keep their own layout. */
@media (min-width: 900px) {
  .page-about .story:has(.story__img--wide) { padding-top: clamp(28px, 3.5vw, 56px); }
  .story__inner:has(.story__img--wide) { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 0; align-items: center; }
  .story__inner:has(.story__img--wide) .story__fig { grid-column: 5 / 13; grid-row: 1; order: 0; position: relative; width: 100%; max-width: none; margin: 0; justify-self: stretch; z-index: 0; }
  .story__inner:has(.story__img--wide) .story__shapes { display: none; }
  .story__img.story__img--wide {
    display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; max-height: none;
    object-fit: cover; object-position: 50% 50%; border-radius: var(--r-img) 0 0 var(--r-img);
    -webkit-mask-image: linear-gradient(to right, #000 66%, rgba(0, 0, 0, 0.4) 82%, transparent 100%);
            mask-image: linear-gradient(to right, #000 66%, rgba(0, 0, 0, 0.4) 82%, transparent 100%);
  }
  .story__inner:has(.story__img--wide) .story__text { grid-column: 1 / 6; grid-row: 1; order: 0; position: relative; z-index: 1; max-width: none; padding: 0; margin: 0; }
  .story__inner:has(.story__img--wide) .story__text h1,
  .story__inner:has(.story__img--wide) .story__lead,
  .story__inner:has(.story__img--wide) .story__text > p { max-width: none; }
}