/* ===========================================================
   בר-אל — מרכז ריפוי וצמיחה
   "אור שקט / Quiet Light" — evergreen-sanctuary psychology UI
   Hebrew RTL · dark atmospheric hero+footer, warm readable body
   =========================================================== */

/* ---- Web fonts: Assistant (headings/titles) + Heebo (body, nav, buttons, labels) —
   both self-hosted locally from the client-supplied kits (assets/fonts/Assistant,
   assets/fonts/Heebo). Every earlier local family (Hillel CLM, Gan CLM, Frank Ruhl
   Libre Local, Assistant SemiBold Local) and the Google-Fonts Assistant/Frank Ruhl
   Libre link are retired — this is the one type system for the whole site now. ---- */
@font-face {
  font-family: "Assistant";
  src: url("fonts/Assistant/Assistant-Regular.woff2") format("woff2"), url("fonts/Assistant/Assistant-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Assistant ships no Medium cut. Without this, every heading set at 500 silently fell
   back to the thin Regular (400) — the "not bold" look. 500 now uses the SemiBold file. */
@font-face {
  font-family: "Assistant";
  src: url("fonts/Assistant/Assistant-SemiBold.woff2") format("woff2"), url("fonts/Assistant/Assistant-SemiBold.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Assistant";
  src: url("fonts/Assistant/Assistant-SemiBold.woff2") format("woff2"), url("fonts/Assistant/Assistant-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Assistant";
  src: url("fonts/Assistant/Assistant-Bold.woff2") format("woff2"), url("fonts/Assistant/Assistant-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Assistant";
  src: url("fonts/Assistant/Assistant-ExtraBold.woff2") format("woff2"), url("fonts/Assistant/Assistant-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Heebo";
  src: url("fonts/Heebo/Heebo-Regular.woff2") format("woff2"), url("fonts/Heebo/Heebo-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Heebo";
  src: url("fonts/Heebo/Heebo-Medium.woff2") format("woff2"), url("fonts/Heebo/Heebo-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Heebo";
  src: url("fonts/Heebo/Heebo-Bold.woff2") format("woff2"), url("fonts/Heebo/Heebo-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     PASS 8 (current) — a clean, exact 6-colour system, given in full by the client. Every
     earlier pass's gold accent and pastel mist/mint/rose bands are retired; nothing on the
     page uses a colour outside this list. Each section gets one of the four backgrounds
     below so the page reads as an alternating sequence of real colour, and white is pulled
     back to cards/forms/inner content only.
       #173B2B  deep green    (headings, primary buttons, hero, contact, packages, footer)
       #C9D8CC  sage green    (Rooms / Team backgrounds, with white cards on top)
       #F7F3EA  cream         (About background, the site's own base/body colour)
       #EAD8D2  soft powder pink (FAQ background — the "good to know" section)
       #4A4038  dark brown    (all body text)
       #FFFFFF  white         (cards, form fields, inner content layers only)
     Everything below is derived from those six, plus AA-safe darkenings where a colour has
     to carry small text or a border it otherwise couldn't — verified against these exact
     backgrounds before committing to the derived shades.
     ============================================================ */
  --page-bg:      #FFFFFF;   /* true white — cards, forms, inner content layers */
  --body-bg:      #F7F3EA;   /* cream — the site's own base colour */
  --page-bg-alt:  #EAD8D2;   /* soft powder pink — FAQ section base */
  --surface:      #FFFFFF;   /* clean white surface base (cards/chips ride on this) */
  --surface-alt:  #DCC6BC;   /* deeper pink-tan — FAQ's far corner, general "deep block" */
  --sage-band:    #C9D8CC;   /* sage green — Rooms/Team backgrounds */
  --sage-deep:    #AFC2B2;   /* deeper sage — Team section's far edge */
  --terracotta:   #F7F3EA;   /* About's own band is cream itself — no separate clay colour now */
  --warm-sand:    #EAD8D2;   /* small panels — same soft pink family */

  /* ---- Ink — main text is dark brown, headings in deep green ---- */
  --text:      #4A4038;
  --heading:   #173B2B;
  --muted:     #7A6F63;      /* muted body copy — dark brown, lightened; AA on every band */
  --line:      rgba(23,59,43,.15);   /* soft hairline — no hard lines anywhere */

  /* ---- "Page fold" seam. Replaces the straight 1px hairline between bands: a cream
     crescent hugging the top edge with a wide curved ink fall beneath it, so each band
     reads as a sheet of paper laid over the next instead of a butt-jointed rectangle.
     Alpha-only on purpose — one definition sits correctly over white, cream, sage, pink
     and the dark green band alike. Prepended to each band's own gradient. ---- */
  /* Four-layer fold: a bright crest, a whisper of deep-green in the crease, a soft shade
     beneath, and a long ambient falloff. A single hairline says "divider"; a graded fold
     says the bands are sheets of paper laid over one another, which is the section-
     transition equivalent of the layered shadow ramp below. */
  --seam:
    radial-gradient(140% 40px at 50% 0%, rgba(255,255,255,.95) 0 72%, rgba(255,255,255,0) 73%),
    radial-gradient(120% 3px  at 50% 0%, rgba(23,59,43,.18) 0 60%, rgba(23,59,43,0) 61%),
    radial-gradient(150% 120px at 50% 0%, rgba(23,59,43,.060) 0 54%, rgba(23,59,43,0) 55%),
    radial-gradient(180% 260px at 50% 0%, rgba(23,59,43,.030) 0 60%, rgba(23,59,43,0) 61%);
  --line-soft: rgba(23,59,43,.18);   /* thin deep-green section-separator hairline */

  /* ---- Accents ---- */
  --accent:      #173B2B;   /* deep green — headings, primary buttons */
  --accent-deep: #4A4038;   /* main text tone, for deepest fills */
  --text-emphasis: #0F2A1E;   /* one step past deep green, for the rare paragraph that needs
     to read as visibly darker than plain body copy, not just heavier. */
  --accent-mid:  #1F4A37;   /* primary button hover — one step lighter than deep green */
  /* ---- Button greens. Deep green (#173B2B) stays INK — headings, borders, small type —
     but it read near-black as a large button fill. Controls run on a mid forest instead:
     lighter and more inviting, still 6.29:1 against white text (AA at any size). ---- */
  --btn-green:       #2F6B4F;
  --btn-green-hover: #377C5B;
  --btn-green-deep:  #26583F;   /* the low stop of the booking CTA's gradient */
  --secondary:   #799184;   /* mid-tone green derived from deep-green/sage — icons, soft highlights */
  --secondary-deep: #5C6E63; /* same green, deep enough to carry white button text (AA) */
  --accent-text: #35543F;   /* readable deep-green for small labels/roles/numerals */
  --accent-soft: #DCE6DA;   /* light sage wash surface (icon chips, soft buttons, pills) */
  --warm:        #173B2B;   /* underline accents & CTA touches — deep green stands in for the
     retired gold; every "premium accent" on the page now reads as this one strong colour. */
  --warm-deep:   #0F2A1E;
  --warm-line:   #173B2B;
  --warm-glow:   #EAD8D2;   /* soft-pink lift — the booking CTA gradient's top stop */
  --warm-core:   #F1E4DD;   /* soft pink glow for the large background blocks */
  --lavender:    #AEB9D2;

  /* ---- Legacy --violet-* token names. The palette defines no violet, so the secondary
     "pop" role these carried (eyebrow chips, focus ring, selection) runs on the
     sage/green side of the palette. Names kept so nothing downstream breaks. ---- */
  --violet:      #35543F;
  --violet-deep: #173B2B;
  --violet-soft: #DCE6DA;

  /* ---- Dark hero / footer — the deep green end of the same palette ---- */
  --hero-bg:      #173B2B;
  --hero-deep:    #0F2A1E;
  --hero-mid:     #1F4A37;
  --hero-gradient: radial-gradient(120% 100% at 50% 30%, #1F4A37 0%, #173B2B 46%, #0F2A1E 100%);
  --hero-text:    #F7F3EA;
  --hero-muted:   rgba(247,243,234,.82);
  --hero-line:    rgba(247,243,234,.16);
  --footer-bg:    #24573F;   /* the site's single dark anchor, softened off near-black */
  --footer-text:  #F7F3EA;
  --footer-muted: rgba(247,243,234,.74);
  --footer-div:   #799184;

  /* ---- Glass ---- */
  --glass-dark:        rgba(247,243,234,.12);
  --glass-dark-hover:  rgba(247,243,234,.20);
  --glass-dark-border: rgba(247,243,234,.26);
  --glass-light:       rgba(201,216,204,.82);   /* header pill — sage-green translucent wash */
  --glass-light-border: rgba(23,59,43,.2);      /* deep-green header border */
  --glass-highlight:   rgba(255,255,255,.22);

  /* ---- Depth — flattened toward a bright "gallery" register: content surfaces are
     flat with hairline borders; true elevation is reserved for the floating nav and
     the dark media plates. No black shadows anywhere — every stop is tinted with the
     deep-green ink (23,59,43) at low (well under 10%) opacity; black on a white/cream
     surface goes grey and muddy. */
  --shadow-sm:
      0 1px 1px rgba(23,59,43,.030),
      0 2px 4px rgba(23,59,43,.024),
      0 4px 8px rgba(23,59,43,.018);
  --shadow-card: 0 12px 30px -8px rgba(23,59,43,.12);
  --shadow-card-hover:
      0 1px 2px rgba(23,59,43,.034),
      0 3px 6px rgba(23,59,43,.028),
      0 8px 16px rgba(23,59,43,.024),
      0 16px 34px -8px rgba(23,59,43,.040),
      0 34px 64px -20px rgba(23,59,43,.08);
  --shadow-lift:
      0 1px 2px rgba(23,59,43,.030),
      0 3px 6px rgba(23,59,43,.026),
      0 7px 14px rgba(23,59,43,.022),
      0 14px 30px -8px rgba(23,59,43,.036),
      0 30px 58px -20px rgba(23,59,43,.08);
  /* the framed print sits heaviest — a hung object, so it gets a longer, lower cast */
  --shadow-frame:
      0 1px 2px rgba(23,59,43,.034),
      0 4px 8px rgba(23,59,43,.028),
      0 10px 20px rgba(23,59,43,.024),
      0 20px 40px -10px rgba(23,59,43,.044),
      0 42px 78px -24px rgba(23,59,43,.08);
  --shadow-btn:  0 2px 4px rgba(23,59,43,.06), 0 8px 20px -8px rgba(23,59,43,.08);
  --nav-shadow:  0 1px 2px rgba(23,59,43,.04), 0 6px 18px rgba(23,59,43,.05), 0 16px 44px rgba(23,59,43,.07);

  /* ---- Museum mat tokens (gallery frames, portraits, media plates) ---- */
  --mat-board:  linear-gradient(158deg, #FFFFFF 0%, #EAD8D2 46%, #C9D8CC 100%);
  --mat-fillet: rgba(23,59,43,.42);   /* the thin deep-green line a framer sets at the aperture */
  --mat-edge:   rgba(23,59,43,.14);
  --hairline:    #E4DDD3;                               /* light warm border — non-card hairlines (chips, inputs, faq) */
  --card-border: rgba(23,59,43,.15);                   /* general-card border — a whisper of deep green, not grey */
  --hairline-accent: rgba(121,145,132,.60);            /* green-tinted hairline for badges/pills */
  --hairline-violet: rgba(121,145,132,.60);            /* legacy name — same green hairline */

  /* ---- Card & Surface — the brief's explicit white: cards, forms and inner content
     layers are the ONE place white is allowed to be dominant on this page. ---- */
  --card-bg:       #FFFFFF;
  --card-bg-hover: #FFFFFF;

  /* ---- Canonical palette names, aliased onto the tokens above ---- */
  --primary:         #173B2B;
  --bg-body:         var(--body-bg);
  --bg-surface:      var(--page-bg-alt);
  --bg-surface-deep: var(--surface-alt);
  --text-main:       var(--text);
  --border-light:    var(--hairline);
  --shadow-soft:     var(--shadow-card);
  --radius-card:     14px;  /* pass 6's exact card radius — cards only, not the sitewide --radius */

  /* ---- Type — Assistant carries every heading/title role, Heebo carries everything
     else (body copy, nav, buttons, labels). The earlier local font-name aliases are
     retired; every selector that used them now points straight at the head or body
     token per its actual role (see the type/text systems below). ---- */
  --font-head: "Assistant", "Segoe UI", system-ui, sans-serif;
  --font-body: "Heebo", "Segoe UI", system-ui, sans-serif;
  --tracking-display: -.02em;    /* tighten large editorial serif */
  --tracking-tight:   -.012em;   /* subtle tightening at heading sizes */

  /* ---- Hebrew Type System (site-wide tokens). Title/highlight role uses Assistant
     (the heading font token); body role uses Heebo (the body font token). Applied
     to About only for now. ---- */
  /* Page title retuned for Assistant SemiBold (see .type-page-title). A grotesk at 600 has
     more optical presence than the bold geometric face this replaced, so the size ceiling
     comes DOWN (3.4→3rem) rather than up — that is what makes it read softer instead of
     shoutier. Not lower than 3rem, though: the sibling section h2s render ~50px, so a 44px
     About heading stopped reading as "softer" and started reading as a mistake. 48px keeps
     it a touch quieter than its siblings while staying in the same optical family.
     Leading opens 1.18→1.28 because Hebrew descenders (ך ל) in a sans need the air, and the
     looser line ties the heading to the 1.85-leaded body below it. */
  --type-page-title-size:    clamp(1.8rem, 3.8vw, 2.7rem);
  --type-page-title-leading: 1.3;
  /* A HAIR of positive tracking. The .eyebrow note below warns against open tracking on
     Hebrew, and that stands at .07em+ on a small label — but at 48px display size .01em is
     ~0.5px per letter, which loosens the letter rhythm just enough to read as air rather
     than as density. This is where "less bold" comes from without touching the weight. */
  --type-page-title-tracking: .01em;
  --type-page-title-weight:  700;    /* Assistant Bold — main-heading weight, per the type spec */
  --type-section-title-size: clamp(1.1rem, 1.9vw, 1.25rem);
  --type-section-title-weight: 600;  /* Assistant SemiBold — secondary-heading weight */
  --type-body-size:    1.0625rem;   /* ~17px — comfortable Hebrew long-form reading size */
  --type-body-weight:  400;
  --type-body-leading: 1.85;
  --type-body-gap:     1.4rem;      /* elegant inter-paragraph rhythm */
  --type-highlight-weight: 700;
  --type-label-size:     .8rem;
  --type-label-tracking: .07em;
  --type-button-size:   1rem;
  --type-button-tracking: -.005em;

  /* ---- Hebrew Type System v2 — the PERMANENT, go-forward system (site-wide tokens
     for all future pages). Body + subtle inline emphasis = Heebo. Titles, section
     headings, premium labels, and important highlights = Assistant. Distinct from
     the .type-* tokens above, which stay frozen to the existing About page only. ---- */
  --text-title-size:    clamp(1.95rem, 4.1vw, 3.05rem);
  --text-title-leading: 1.24;
  --text-title-weight:  700;      /* Assistant Bold — main-heading weight */
  --text-subtitle-size: clamp(1.1rem, 1.9vw, 1.25rem);
  --text-subtitle-weight: 600;    /* Assistant SemiBold — secondary-heading weight */
  --text-body-size:    1.0625rem;
  --text-body-leading: 1.85;
  --text-body-gap:     1.4rem;
  --text-emphasis-weight:  500;   /* Heebo Medium — subtle inline emphasis */
  --text-highlight-weight: 700;   /* Heebo Bold — important highlights / short emphasized text */
  --text-label-size:     .8rem;
  --text-label-tracking: .06em;
  --text-label-weight:   600;     /* Heebo — label weight, per the type spec's 500–600 range */

  /* ---- Rhythm ---- */
  --radius-sm:   12px;   /* inputs */
  --radius:      16px;   /* cards, images, media/story plates, nav — the system default */
  --radius-lg:   20px;   /* the two large containers only: hero plate, contact panels (clinic-soft) */
  --radius-pill: 999px;  /* buttons & badges only */
  --container:   1180px;
  --measure:     34rem;
  --header-h:    78px;

  /* ---- Vertical rhythm — one scale for the whole page, so section padding, heads,
     card padding and action gaps all land on the same steps instead of ad-hoc values. ---- */
  --sp-1:  .5rem;    /* icon↔label, chip internals */
  --sp-2:  .75rem;   /* gap between stacked action controls */
  --sp-3:  1.15rem;  /* list rows, form fields */
  --sp-4:  1.75rem;  /* block↔block inside a card/panel */
  --sp-5:  2.5rem;   /* group separations */
  --section-pad: clamp(4rem, 7.4vw, 6.5rem);      /* every .section, top & bottom */
  --head-gap:    clamp(2.25rem, 4.4vw, 3.25rem);  /* .section-head → content */
  --card-pad:    clamp(1.5rem, 2.2vw, 1.85rem);   /* the shared card inset */
  --panel-pad:   clamp(1.6rem, 2.9vw, 2.35rem);   /* the two large contact containers */
}

/* ----------------------- Reset ----------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* NOTE: no overflow-x here. `overflow-x: clip` on the root makes it a non-scroll container,
   which leaves a CSS scroll-driven timeline — scroll(root block) — permanently inert at 0%,
   so the reading-progress hairline and the return-to-top pill never advanced. Horizontal
   overflow is already contained by `overflow-x: hidden` on body below, and every decorative
   layer that could bleed sits inside a section that declares its own `overflow: clip`. */
html { scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }/* Native smooth scrolling is the NO-JS fallback only (html.js is set in <head> whenever
   scripting + motion are available). It must not be live alongside the scripts: ScrollTrigger
   reads scroll-behavior once at init — before main.js runs — caches "smooth", and then writes
   it back as an INLINE style after each of its own scroll operations. That defeated main.js's
   inline `auto`, so every window.scrollTo() in the nav tween and every scroll-park in the
   rooms gallery got re-animated by the browser on top of our own easing → the jank and the
   double-scroll feel. scroll-padding-top above stays for find-in-page and :target. */
html:not(.js) { scroll-behavior: smooth; }
body {
  margin: 0;
  /* A slow, fixed two-tone wash instead of one flat tint — sage and rose, the same pair
     that carries the rest of the page, so any sliver of body that peeks between sections
     still reads as this site's colour, not a blank gap. */
  background: radial-gradient(120% 90% at 15% 0%, var(--sage-band) 0%, rgba(201,216,204,0) 55%),
              radial-gradient(120% 90% at 100% 100%, var(--page-bg-alt) 0%, rgba(234,216,210,0) 55%),
              var(--body-bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.125rem;         /* 18px */
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { font-family: var(--font-head); color: var(--heading); margin: 0; font-weight: 700; line-height: 1.2; letter-spacing: var(--tracking-tight); }
h3,h4 { font-weight: 600; }   /* secondary headings — one step lighter than h1/h2 */
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--accent); color: var(--page-bg); }

/* ----------------------- Motif ----------------------- */
/* Icon colour per the brief: sage, not forest — forest stays reserved for headings/buttons. */
.koru { width: 1em; height: 1em; display: inline-block; color: var(--secondary); }
.ripple { width: 1em; height: 1em; display: inline-block; color: var(--secondary); }

/* ----------------------- Layout ----------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.container.narrow { max-width: 720px; }

.section { padding-block: var(--section-pad); }   /* one rhythm step for every band */

/* Visual rhythm — alternating warm sand blocks over the soft background, each closed with
   a soft hairline separator instead of a hard rule. Backgrounds only; no layout is touched. */
.section-alt {
  background: var(--seam), linear-gradient(180deg, var(--page-bg-alt) 0%, var(--surface-alt) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.section-sage {
  background: var(--seam), linear-gradient(180deg, var(--sage-band) 0%, var(--sage-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}

/* Per-section blocks. Colour only — section order, markup and layout are untouched; these
   ID rules give each band its tone from the exact 6-colour palette, alternating so no two
   neighbours share a surface: about → cream · rooms → sage green · team → sage green
   (deeper edge) · faq → soft powder pink · contact → dark green (see the CONTACT block
   below) · packages/footer/hero → dark green. White is reserved for cards only. */
#faq {
  position: relative; overflow: clip;
  background: var(--seam), linear-gradient(180deg, var(--page-bg-alt) 0%, var(--surface-alt) 100%);
}
/* FAQ used to be the one band with no colour glow at all — flat cream reading as empty
   next to Team/Contact/About's warm-lit corners. Same two-blob language, sage leading this
   time (gold already anchors the section-head ornament right above it). */
#faq::before, #faq::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
}
#faq::before {
  inset-inline-start: -12%; inset-block-start: -20%; width: 50%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--sage-band) 0%, rgba(201,216,204,0) 72%); opacity: .95;
}
#faq::after {
  inset-inline-end: -12%; inset-block-end: -16%; width: 46%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--warm-core) 0%, rgba(235,217,180,0) 70%); opacity: .7;
}
#faq > .container { position: relative; z-index: 1; }

/* Designed warm background BLOCKS — large soft colour glows that fill the airy sections so
   content never floats in empty space. Content always rides above (z-index 1). */
#team, #contact { position: relative; overflow: clip; }
#team::before, #contact::before,
#team::after, #contact::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
}
/* Bigger and a touch stronger than before — the glows are what stop these wide bands from
   reading as bare expanses behind the content. */
#team::before, #contact::before {
  inset-inline-end: -12%; inset-block-start: -18%; width: 56%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--warm-core) 0%, rgba(235,217,180,0) 70%); opacity: .88;
}
#team::after, #contact::after {
  inset-inline-start: -14%; inset-block-end: -18%; width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--sage-band) 0%, rgba(201,216,204,0) 72%); opacity: 1;
}
/* #team now sits ON the sage band, so its lower glow leads with warmth instead of adding
   green to green. */
#team::after { background: radial-gradient(circle, var(--warm-core) 0%, rgba(235,217,180,0) 72%); opacity: .6; }
#team > .container, #contact > .container { position: relative; z-index: 1; }

.section-head { text-align: center; max-width: 640px; margin: 0 auto var(--head-gap); }
.section-head h2 { margin-top: var(--sp-2); }
.section-head > p { margin-top: var(--sp-2); }
/* §6 Decorative Line — a small warm-gold rule under each section head. Gold at the centre
   fading to sage at both ends, so it reads as a deliberate flourish rather than a divider. */
/* Two-part ornament: a single gold pip flanked by hairlines that taper away into nothing.
   Reads as a typographic mark rather than a rule, and gold appears here at pip scale only. */
.section-head::after {
  content: ""; display: block; width: 148px; height: 8px; margin: var(--sp-3) auto 0;
  background:
    radial-gradient(circle at 50% 50%, var(--warm) 0 3px, rgba(23,59,43,0) 3.6px),
    linear-gradient(to right,
      rgba(121,145,132,0) 0%, rgba(121,145,132,.5) 20%, rgba(23,59,43,.8) 42%,
      rgba(23,59,43,0) 43%, rgba(23,59,43,0) 57%,
      rgba(23,59,43,.8) 58%, rgba(121,145,132,.5) 80%, rgba(121,145,132,0) 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% 1.5px;
  background-position: center center, center center;
}

/* ---- Editorial heading voice — Assistant Bold at main-heading weight (700) carries real
   presence against the warm bands. Tighter leading + text-wrap:balance make a multi-line
   title rag like set type instead of breaking wherever the box happens to end. ---- */
h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 700; line-height: 1.16;
  letter-spacing: var(--tracking-display); text-wrap: balance;
}
h3 { font-size: 1.32rem; line-height: 1.34; letter-spacing: var(--tracking-tight); text-wrap: balance; }

.lead { font-size: 1.3125rem; font-weight: 400; line-height: 1.68; color: var(--text); max-width: var(--measure); text-wrap: pretty; }
.serif-statement { font-family: var(--font-head); font-weight: 400; font-size: clamp(1.65rem, 3.4vw, 2.5rem); line-height: 1.26; letter-spacing: var(--tracking-tight); color: var(--heading); margin: .6rem 0 1.4rem; text-wrap: balance; }
/* body copy: let the engine avoid orphans/rivers wherever it can */
p, .faq-a p, .card p { text-wrap: pretty; }

/* ===========================================================
   TYPE SYSTEM — reusable Hebrew typography roles (site-wide).
   Opt-in utility classes; applying them anywhere is a class-attribute
   change only and never fights the plain h2/h3/p defaults above.
   =========================================================== */
/* font-synthesis: none keeps the browser from faux-bolding this title if a weight file
   ever fails to resolve, which is what makes a heading render as smeared fake bold. */
.type-page-title {
  font-family: var(--font-head);
  /* --accent-text, not --heading. Perceived boldness is stroke weight AND ink contrast; at
     8.56:1 the near-black forest was doing as much of the "heavy" as the weight was. The
     softer forest-sage keeps AA comfortably and shares the eyebrow's tone, so badge and
     title read as one tonal family with hierarchy carried by size instead of by darkness. */
  font-weight: var(--type-page-title-weight); color: var(--accent-text); margin: 0;
  font-size: var(--type-page-title-size); line-height: var(--type-page-title-leading);
  letter-spacing: var(--type-page-title-tracking);
  font-synthesis: none; -webkit-font-synthesis: none;
  /* balances any multi-word title so it never breaks to a lone trailing word */
  text-wrap: balance;
}
.type-section-title {
  font-family: var(--font-head); font-weight: var(--type-section-title-weight); color: var(--heading); margin: 0;
  font-size: var(--type-section-title-size); line-height: 1.3;
}
.type-body, .type-body > p {
  font-family: var(--font-body); font-weight: var(--type-body-weight);
  font-size: var(--type-body-size); line-height: var(--type-body-leading); color: var(--text);
}
.type-body > p + p { margin-block-start: var(--type-body-gap); }
.type-highlight {
  font-family: var(--font-body); font-weight: var(--type-highlight-weight); color: var(--accent-deep);
  /* §6 Highlight Background — soft sage wash behind important words */
  background: linear-gradient(120deg, rgba(121,145,132,.20) 0%, rgba(121,145,132,.20) 100%);
  padding: .04em .3em; border-radius: 5px;
}
.type-label {
  font-family: var(--font-body); font-size: var(--type-label-size); font-weight: 600;
  letter-spacing: var(--type-label-tracking); color: var(--accent-text);
}
.type-button {
  font-family: var(--font-body); font-size: var(--type-button-size); font-weight: 600;
  letter-spacing: var(--type-button-tracking);
}

/* ===========================================================
   TYPE SYSTEM v2 — the PERMANENT typography system, for the Packages
   page now and every future page going forward. Body/emphasis = Heebo;
   titles/headings/labels/highlights = Assistant.
   =========================================================== */
.text-title {
  font-family: var(--font-head); font-weight: var(--text-title-weight); color: var(--heading); margin: 0;
  font-size: var(--text-title-size); line-height: var(--text-title-leading);
}
.text-subtitle {
  font-family: var(--font-head); font-weight: var(--text-subtitle-weight); color: var(--heading); margin: 0;
  font-size: var(--text-subtitle-size); line-height: 1.3;
}
.text-body, .text-body > p {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--text-body-size); line-height: var(--text-body-leading); color: var(--text);
}
.text-body > p + p { margin-block-start: var(--text-body-gap); }
.text-emphasis { font-family: var(--font-body); font-weight: var(--text-emphasis-weight); }
.text-highlight {
  font-family: var(--font-body); font-weight: var(--text-highlight-weight); color: var(--accent-deep);
  /* §6 Highlight Background — soft sage wash behind important words */
  background: linear-gradient(120deg, rgba(121,145,132,.20) 0%, rgba(121,145,132,.20) 100%);
  padding: .04em .3em; border-radius: 5px;
}
.text-label {
  font-family: var(--font-body); font-size: var(--text-label-size); font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-tracking); color: var(--accent-text);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-body); font-size: .79rem; font-weight: 700;
  /* .12em was too open for Hebrew letterforms — .07em still reads as a tracked-out label
     without pulling the words apart */
  letter-spacing: .07em; color: var(--violet);
  padding: .42rem .95rem .42rem .78rem;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--violet-soft) 100%);
  border: 1px solid var(--hairline-violet);
  border-radius: var(--radius-pill);
  /* soft inner top light + tight contact shadow, so the chip reads as a small object */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), var(--shadow-sm);
}
.eyebrow .koru-eyebrow { width: 1.15em; height: 1.15em; color: var(--violet); }
.eyebrow-on-dark {
  color: #F7F3EA;
  background: rgba(249,249,247,.11);
  border-color: rgba(121,145,132,.46);
}
.eyebrow-on-dark .koru-eyebrow { color: var(--footer-div); }

/* ----------------------- Buttons ----------------------- */
/* ---- One shared geometry for every tier: same height, radius, border width, focus ring
   and hover feedback. Only fill/weight change between tiers, so hierarchy is read from
   COLOUR WEIGHT and never from an accidental size difference. ---- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1.2;
  padding: .8rem 1.6rem; min-height: 48px;
  border-radius: var(--radius-pill); border: 1.5px solid transparent;
  cursor: pointer; transition: transform .22s cubic-bezier(.22,.61,.28,1), background .22s ease, box-shadow .26s ease, color .22s ease, border-color .22s ease, filter .22s ease;
  white-space: nowrap; text-align: center;
}
/* One slow diagonal light sweep on hover — the site's only "shine", and faint enough that it
   reads as light moving over a surface rather than a gimmick. Sweeps right→left for RTL.
   z-index:-1 keeps it above the fill and below the label. */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.30) 50%, transparent 62%);
  transform: translateX(115%);
  transition: transform .7s cubic-bezier(.22,.61,.28,1);
}
.btn:hover::after { transform: translateX(-115%); }
.btn-sm { padding: .55rem 1.15rem; min-height: 42px; font-size: .95rem; }
.btn-lg { padding: .95rem 2.1rem; min-height: 54px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* tactile press: settles back down and gives a hair of compression */
.btn:active { transform: translateY(0) scale(.978); transition-duration: .08s; }
.btn-ico { flex: none; width: 1.15em; height: 1.15em; }   /* leading glyph, optical size */

/* TIER 2 · Primary CTA — mid forest, white text. Deep green stays ink; as a large fill it
   read near-black, so controls sit a few steps lighter (6.29:1 with white — AA at any size)
   and lift lighter still on hover. Used for in-context primaries (form submit). */
.btn-primary {
  background: var(--btn-green);
  color: #FFFFFF;
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover {
  background: var(--btn-green-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -8px rgba(23,59,43,.16);
}

/* TIER 3 · Secondary CTA — transparent fill, 2px sage border, forest text; hover fills solid
   sage with white text. Deliberately unfilled/low-weight so navigation, WhatsApp inquiry and
   phone never compete with booking.
   Hover fill is --secondary-deep, not raw --secondary: white text on #799184 measures only
   2.5:1 (fails WCAG AA), while the deepened sage clears 4.87:1 — same sage family, readable. */
.btn-outline { background: transparent; color: var(--heading); border: 2px solid var(--secondary); }
.btn-outline:hover { background: var(--secondary-deep); color: #FFFFFF; border-color: var(--secondary-deep); transform: translateY(-1px); }

.btn-soft { background: var(--accent-soft); color: var(--accent-text); border-color: var(--hairline-accent); }
.btn-soft:hover { background: var(--secondary-deep); color: #FFFFFF; border-color: var(--secondary-deep); transform: translateY(-1px); }

/* (.btn-glass — the hero's glass secondary — was removed with that button: the hero now
   carries the single gold booking CTA and nothing else used the class.) */

/* TIER 1 · booking CTA — the heaviest, most "pressable" control on the page, and the only
   one at this weight. Same mid-forest family as .btn-primary so the controls read as one
   system, just a stop lighter at the top and a stop deeper at the bottom for dimension. */
.btn-book {
  background: linear-gradient(150deg, var(--btn-green-hover) 0%, var(--btn-green) 55%, var(--btn-green-deep) 100%);
  color: #FFFFFF; font-weight: 700; letter-spacing: .005em; border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 0 0 1px rgba(255,255,255,.18),
              0 12px 30px -10px rgba(23,59,43,.48), 0 2px 6px rgba(23,59,43,.14);
}
.btn-book:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(255,255,255,.28),
              0 18px 38px -10px rgba(23,59,43,.85), 0 3px 8px rgba(23,59,43,.18);
  filter: brightness(1.04) saturate(1.04);
}
.btn-book:focus-visible { outline-color: var(--accent-deep); }

.btn-ghost-link {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--hero-text); font-weight: 500; font-size: 1.02rem;
  padding: .5rem .25rem; opacity: .9;
}
.btn-ghost-link span { transition: transform .2s ease; }
.btn-ghost-link:hover { opacity: 1; }
.btn-ghost-link:hover span { transform: translateX(-4px); }

/* ===========================================================
   HEADER
   =========================================================== */
/* Floating pill nav (DESIGN.md signature, adapted): a centered, elevated bar that does
   NOT span full width. The header strip is click-through — only the pill captures pointer
   events, so the hero beneath stays fully interactive through the side gutters. */
.site-header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  padding: clamp(.7rem, 1.9vw, 1.3rem) clamp(.9rem, 3vw, 1.5rem) 0;
  pointer-events: none;
}
.header-inner {
  pointer-events: auto; position: relative;
  /* gap only has to separate brand↔nav↔actions; each cluster owns its internal rhythm */
  display: flex; align-items: center; gap: clamp(.7rem, 1.4vw, 1.15rem);
  /* 1180 (was 1080): the actions cluster now carries phone + two pills, and the extra
     100px is what keeps the desktop bar on ONE line without shrinking the nav type. */
  max-width: 1180px; min-height: 64px;
  margin-inline: auto; padding-inline: clamp(.8rem, 1.8vw, 1.25rem);
  border-radius: var(--radius);
  background: var(--glass-light);                 /* §3 Header — creamy translucent + blur */
  border: 1px solid var(--glass-light-border);
  /* two-stop lift: inner top highlight + a hairline warm floor, so the pill reads as a
     formed cream surface rather than a flat translucent rectangle */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.58),
              inset 0 -1px 0 rgba(23,59,43,.10),
              var(--nav-shadow);
  /* a light 10px blur — the large blur+saturate this used before re-filtered everything
     under the fixed header on every scroll frame and was a main source of scroll stutter */
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* Once scrolled off the hero, the pill firms up for contrast over the bright content */
.site-header:not([data-over-hero="true"]) .header-inner {
  background: rgba(221,229,224,.94);
  border-color: rgba(23,59,43,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7),
              inset 0 -1px 0 rgba(23,59,43,.12),
              0 10px 30px -14px rgba(23,59,43,.30);
}

/* Brand */
.brand { display: inline-flex; align-items: center; gap: .65rem; }
.brand-mark {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none;
  border-radius: 50%; background: var(--surface); border: 1px solid var(--accent-soft);
  box-shadow: var(--shadow-sm); color: var(--accent);
}
.brand-mark .koru { width: 26px; height: 26px; }
.brand-logo { height: 50px; width: auto; display: block; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.12; }
.brand-name { font-family: var(--font-head); font-size: 1.45rem; font-weight: 700; color: var(--heading); }
.brand-sub { font-size: .68rem; font-weight: 600; letter-spacing: .1em; color: var(--accent-text); }

/* Nav (dark text throughout — header floats over bone paper above the plate) */
/* Centered nav group (DESIGN.md floating-pill pattern), pipe-separated like the reference. */
.nav {
  /* in-flow, auto-centered in the space between the brand (right) and the CTA/phone (left) */
  margin-inline: auto; width: max-content;
  display: flex; align-items: center; flex-wrap: nowrap; gap: .1rem;
}
/* Each link is its own soft pill target. The pipe dividers were removed: with a wash-on-hover
   the separators became visual noise, and dropping them is what "cleaner alignment" buys. */
.nav a {
  position: relative; padding: .48rem .72rem; border-radius: var(--radius-pill);
  font-size: .96rem; font-weight: 500; color: var(--text); white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
/* §3 Header — 2px underline. Sage on hover, gold when this is the current page, so the
   active state is a different accent from the hover state instead of the same bar twice. */
.nav a::after {
  content: ""; position: absolute; inset-inline: .72rem; bottom: .22rem; height: 2px;
  background: var(--secondary); border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform .25s ease, background-color .25s ease;
}
.nav a:hover { color: var(--accent); background: rgba(121,145,132,.15); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--accent); font-weight: 600; background: rgba(121,145,132,.20); }
/* --warm-line, not --warm: the active underline is a state indicator, so it owes 3:1 against
   the sage wash it sits on. Plain gold measures 1.83 there; this measures 3.71. */
.nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--warm-line); }

/* ---- Header action cluster: phone · יצירת קשר · לתיאום תור --------------------------
   The two pills share ALL geometry here (height, radius, type size, padding, press) and
   differ only in fill, so they read as a matched pair with a clear primary. Tiers follow
   the button system at the top of this file: gold = booking, sage = everything else. */
.header-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding-inline: 1.05rem;
  font-size: .94rem; font-weight: 600; white-space: nowrap;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  transition: background .22s ease, color .22s ease, border-color .22s ease,
              transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.header-cta:active { transform: translateY(0) scale(.978); transition-duration: .08s; }

/* SECONDARY · יצירת קשר — Tier 3 sage, unfilled. Was a solid forest fill, which put it at
   Tier 2 and made it compete with booking; the tier comments upstream call for exactly this. */
/* The sage wash reads only 1.11:1 against the glass pill, so the BORDER is what makes this
   button identifiable as a control — which puts it under WCAG 1.4.11. --hairline-accent only
   reaches 1.49:1; opaque --secondary-deep measures 3.89:1. */
.header-cta-ghost {
  background: rgba(121,145,132,.16); color: var(--accent-text);
  border-color: var(--secondary-deep);
}
.header-cta-ghost:hover {
  background: var(--secondary-deep); color: #FFFFFF; border-color: var(--secondary-deep);
  transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(107,122,92,.52);
}

/* PRIMARY · לתיאום תור — Tier 1 gold, same gradient family as the hero .btn-book so the
   booking action is visually identical wherever it appears. Shadows are scaled down for
   pill size: the hero's wide glow would smear against the glass at 40px tall. */
.header-cta-book {
  background: linear-gradient(150deg, var(--btn-green-hover) 0%, var(--btn-green) 55%, var(--btn-green-deep) 100%);
  color: #FFFFFF; font-weight: 700; letter-spacing: .005em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.40), inset 0 0 0 1px rgba(255,255,255,.16),
              0 8px 20px -9px rgba(23,59,43,.46), 0 1px 4px rgba(23,59,43,.12);
}
.header-cta-book:hover {
  transform: translateY(-1px); filter: brightness(1.05) saturate(1.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.50), inset 0 0 0 1px rgba(255,255,255,.24),
              0 12px 26px -9px rgba(23,59,43,.56), 0 2px 6px rgba(23,59,43,.14);
}
.header-cta-book:focus-visible { outline-color: var(--accent-deep); }

/* Phone — quietest item in the cluster; a link, not a button, so no fill at rest. */
.header-phone {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 40px; padding-inline: .55rem; border-radius: var(--radius-pill);
  font-size: .91rem; font-weight: 600; color: var(--accent-text); white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
.header-phone:hover { color: var(--accent); background: rgba(121,145,132,.14); }
.header-phone-icon { width: 1.05em; height: 1.05em; flex: none; }

.header-actions { display: flex; align-items: center; gap: .45rem; }
.icon-btn {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--heading);
  cursor: pointer; transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.icon-btn:hover { transform: translateY(-1px); }

/* Hamburger */
.nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s ease, opacity .2s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset-block: 0; inset-inline-start: 0; width: min(86vw, 360px);
  background: var(--surface); box-shadow: var(--shadow-lift);
  padding: calc(var(--header-h) + 1.5rem) 1.5rem 2rem;
  display: flex; flex-direction: column; gap: 1rem;
  transform: translateX(105%); transition: transform .34s cubic-bezier(.4,0,.2,1); z-index: 200;
  /* The parked drawer is only moved off-screen by a transform, so its eight links stayed in
     the tab order while the container was aria-hidden — tabbing through the header dropped
     focus into an invisible panel. visibility:hidden takes it out of both the tab order and
     hit-testing; it is delayed so it applies only after the close transition has finished. */
  visibility: hidden;
  transition: transform .34s cubic-bezier(.4,0,.2,1), visibility 0s linear .34s;
}
.mobile-nav nav { display: flex; flex-direction: column; gap: .2rem; }
.mobile-nav.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .34s cubic-bezier(.4,0,.2,1), visibility 0s;
}
.mobile-nav a { padding: .85rem 1rem; font-size: 1.15rem; font-weight: 500; color: var(--heading); border-radius: 12px; }
.mobile-nav a:hover { background: var(--accent-soft); color: var(--accent-text); }
/* Current section — the same sage wash the desktop pill uses, at drawer scale. Marked with
   background + weight + colour only: box-shadow has no logical-property form, so an inset
   edge bar would sit on the wrong side of the row in this RTL layout. */
.mobile-nav nav > a[aria-current="page"] {
  color: var(--accent-text); font-weight: 600; background: rgba(121,145,132,.20);
}
/* the drawer's action block mirrors the desktop cluster's order and tiers */
.mobile-nav .mobile-actions {
  display: flex; flex-direction: column; gap: .5rem;
  margin-block-start: .9rem; padding-block-start: .9rem; border-top: 1px solid var(--hairline);
}
.mobile-nav .mobile-phone {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font-size: 1.02rem; font-weight: 600; color: var(--accent-text);
}
.mobile-nav .mobile-phone .header-phone-icon { width: 1.1em; height: 1.1em; }
/* full-width taps, ≥48px, matching the desktop fills */
.mobile-nav .mobile-cta {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; font-weight: 600; text-align: center; border: 1px solid transparent;
  border-radius: var(--radius-pill);
}
.mobile-nav .mobile-cta-ghost {
  background: rgba(121,145,132,.16); color: var(--accent-text); border-color: var(--secondary-deep);
}
.mobile-nav .mobile-cta-ghost:hover {
  background: var(--secondary-deep); color: #FFFFFF; border-color: var(--secondary-deep);
}
.mobile-nav .mobile-cta-book {
  background: linear-gradient(150deg, var(--btn-green-hover) 0%, var(--btn-green) 55%, var(--btn-green-deep) 100%);
  color: #FFFFFF; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.40), 0 8px 20px -10px rgba(23,59,43,.46);
}
.mobile-nav .mobile-cta-book:hover { filter: brightness(1.05) saturate(1.03); }
.mobile-nav-backdrop { position: fixed; inset: 0; background: rgba(23,59,43,.46); opacity: 0; visibility: hidden; transition: opacity .3s ease; z-index: 150; }
.mobile-nav-backdrop.open { opacity: 1; visibility: visible; }

/* ===========================================================
   HERO — dark evergreen gallery plate on bone paper
   =========================================================== */
/* Hero — a soft radial sand field framing the media plate, so the plate reads as a layered
   object on warm paper rather than a block dropped on white. */
.hero {
  padding: calc(var(--header-h) + clamp(14px,3vw,28px)) clamp(12px,3vw,28px) clamp(2rem,4vw,3.5rem);
  background: radial-gradient(120% 90% at 50% 0%, var(--sage-band) 0%, var(--body-bg) 72%);
}
.hero-plate {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--hero-gradient); color: var(--hero-text);
  min-height: min(60vh, 540px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(2.75rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4rem);
  box-shadow: inset 0 0 120px rgba(23,59,43,.14), var(--shadow-lift);
}
.hero-plate::after { /* soft inner ring */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 130px rgba(23,59,43,.14), inset 0 0 0 1px rgba(249,249,247,.08);
}

/* Background video (drone footage) — beneath the scrim and content */
.hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  border-radius: inherit; pointer-events: none;
  background: var(--hero-deep);            /* holds the tone before the first frame paints → no flash/shift */
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 32%, rgba(18,48,43,.34) 0%, rgba(11,33,28,.62) 72%, rgba(11,33,28,.80) 100%),
    linear-gradient(180deg, rgba(11,33,28,.30) 0%, rgba(11,33,28,.18) 42%, rgba(11,33,28,.56) 100%);
}

/* Ethereal background (film grain kept; decorative blobs hidden while footage is the backdrop) */
.hero-bg { position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden; }
/* grain too: a blend-mode overlay on top of playing video re-composites every frame */
.hero-plate .frond, .hero-plate .bokeh, .hero-plate .grain { display: none; }

/* Reduced motion: no video — fall back to the static evergreen gradient + botanical atmosphere */
@media (prefers-reduced-motion: reduce) {
  .hero-video, .hero-scrim { display: none; }
  .hero-plate .frond, .hero-plate .bokeh, .hero-plate .grain { display: block; }
}
.frond {
  position: absolute; border-radius: 50% 50% 50% 12%;
  background: radial-gradient(circle at 35% 35%, rgba(121,145,132,.36), rgba(23,59,43,0) 62%);
  filter: blur(26px); opacity: .8;
}
.frond-1 { width: 46%; height: 80%; inset-inline-end: -6%; top: -14%; transform: rotate(18deg); }
.frond-2 { width: 40%; height: 70%; inset-inline-start: -8%; bottom: -18%; transform: rotate(-24deg);
  background: radial-gradient(circle at 60% 40%, rgba(23,59,43,.28), rgba(23,59,43,0) 60%); }
.bokeh { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(235,217,180,.58), rgba(235,217,180,0) 70%); filter: blur(3px); }
.bokeh-1 { width: 90px; height: 90px; top: 22%; inset-inline-start: 16%; opacity: .5; }
.bokeh-2 { width: 54px; height: 54px; top: 62%; inset-inline-end: 24%; opacity: .45; }
.bokeh-3 { width: 130px; height: 130px; bottom: 8%; inset-inline-start: 40%; opacity: .28; }
.grain {
  position: absolute; inset: 0; opacity: .04; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-inner { position: relative; z-index: 2; text-align: center; max-width: 780px; }
.hero-inner::before { /* radial scrim for text legibility */
  content: ""; position: absolute; inset: -12% -18%; z-index: -1;
  background: radial-gradient(60% 60% at 50% 46%, rgba(11,33,28,.55), rgba(11,33,28,0) 72%);
}
.eyebrow-on-dark { justify-content: center; margin-bottom: 1.25rem; }

.hero-title {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.95rem, 4vw, 3.2rem); line-height: 1.14; letter-spacing: -.012em;
  color: var(--hero-text); text-wrap: balance;
  /* lifts the letterforms off the footage without a heavy slab of shadow */
  text-shadow: 0 1px 2px rgba(27,44,35,.34), 0 8px 28px rgba(27,44,35,.28);
}
/* Cream warming into pale gold down the line — only where the browser can clip paint to the
   glyphs, and only when motion/contrast prefs don't ask for plain text. The `color` above
   stays the fallback, so no engine can leave this invisible. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  @media (prefers-contrast: no-preference) {
    .hero-title {
      background: linear-gradient(172deg, #FFFFFF 0%, var(--hero-text) 46%, #EAD8D2 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      /* text-shadow can't paint through clipped text — move the lift to a drop-shadow */
      text-shadow: none;
      filter: drop-shadow(0 2px 3px rgba(27,44,35,.42)) drop-shadow(0 10px 30px rgba(27,44,35,.3));
    }
  }
}
.hero-line2 { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .12em; }

/* Signature breathing orb */
.orb {
  position: relative; display: inline-block; width: clamp(64px, 9vw, 88px); height: clamp(64px, 9vw, 88px);
  border-radius: 50%; vertical-align: -.16em; margin: 0 .12em;
  animation: breathe 7s ease-in-out infinite;
}
.orb-core {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 42% 36%, rgba(243,214,160,.95), rgba(233,169,78,.55) 40%, rgba(47,126,110,.9) 74%, #13463C 100%);
  box-shadow: 0 0 26px rgba(233,169,78,.35);
}
.orb-koru { position: absolute; inset: 22%; width: 56%; height: 56%; color: #EAD8D2; opacity: .92; }
.orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(233,169,78,.5); box-shadow: 0 0 24px rgba(233,169,78,.22); }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }

.hero-sub { color: var(--hero-muted); font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 400; line-height: 1.7; max-width: 48ch; margin: 1.25rem auto 0; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.4rem; margin-top: 2.25rem; }

/* First-paint entrance — the one moment on the page that is guaranteed to be seen by
   every visitor, so it carries the whole site's "quiet, considered" motion signature in
   miniature: title, then subtitle, then the CTA row, each settling in a beat after the
   last. Pure CSS (no scroll trigger needed, this is always in view on load) and gated on
   `.js` exactly like every other reveal on the site, so a no-JS visitor never sees a
   flash of hidden content. */
@keyframes hero-settle {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.js .hero-title, .js .hero-sub, .js .hero-cta, .js .hero-card {
  opacity: 0;
  animation: hero-settle .85s cubic-bezier(.22,.61,.28,1) both;
}
.js .hero-title { animation-delay: 80ms; }
.js .hero-sub   { animation-delay: 220ms; }
.js .hero-cta   { animation-delay: 360ms; }
.js .hero-card  { animation-delay: 500ms; }
@media (prefers-reduced-motion: reduce) {
  .js .hero-title, .js .hero-sub, .js .hero-cta, .js .hero-card {
    opacity: 1 !important; animation: none !important; transform: none !important;
  }
}

/* Floating glass card */
.hero-card {
  position: absolute; z-index: 3; inset-inline-start: clamp(1.5rem, 4vw, 3rem); bottom: clamp(1.5rem, 4vw, 2.5rem);
  display: flex; align-items: center; gap: .9rem; max-width: 340px;
  padding: .85rem 1rem; border-radius: var(--radius);
  background: var(--glass-dark); border: 1px solid var(--glass-dark-border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 10px 30px rgba(11,33,28,.35), 0 0 26px rgba(47,126,110,.18);
}
.hero-card-mark { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: rgba(159,212,196,.18); color: #BFE4D8; }
.hero-card-mark .ripple { width: 22px; height: 22px; }
.hero-card-body { display: flex; flex-direction: column; line-height: 1.35; }
.hero-card-body strong { color: var(--hero-text); font-size: .98rem; font-weight: 600; }
.hero-card-body span { color: var(--hero-muted); font-size: .82rem; }
.hero-card-btn { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: #EAD8D2; color: var(--hero-deep); font-size: 1.2rem; transition: transform .2s ease; }
.hero-card-btn:hover { transform: translateX(-3px); }

/* ===========================================================
   RIPPLE DIVIDER
   =========================================================== */
.ripple-divider { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.ripple-divider::before, .ripple-divider::after {
  content: ""; height: 1px; width: min(30%, 240px);
  background: linear-gradient(to var(--_d, right), transparent, var(--accent-soft));
}
.ripple-divider::before { background: linear-gradient(to left, transparent, var(--line)); }
.ripple-divider::after { background: linear-gradient(to right, transparent, var(--line)); }
.ripple-divider .ripple { width: 30px; height: 30px; color: var(--accent); opacity: .8; }
.assurance .ripple-divider { margin-bottom: 2.5rem; }
.divider-on-dark::before { background: linear-gradient(to left, transparent, rgba(121,145,132,.58)); }
.divider-on-dark::after { background: linear-gradient(to right, transparent, rgba(121,145,132,.58)); }
.divider-on-dark .ripple { color: var(--footer-div); }

/* ===========================================================
   ASSURANCE
   =========================================================== */
.assurance { background: linear-gradient(180deg, var(--body-bg) 0%, var(--page-bg-alt) 55%, var(--surface-alt) 100%); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding-block: clamp(2.5rem, 5vw, 3.5rem); text-align: center; }
.assurance-line { font-family: var(--font-head); font-size: clamp(1.2rem, 2.4vw, 1.6rem); color: var(--heading); max-width: 40ch; margin-inline: auto; }
.assurance-chips { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem .85rem; }
.assurance-chips li { display: inline-flex; align-items: center; gap: .5rem; font-size: .98rem; font-weight: 500; color: var(--text);
  background: var(--card-bg); border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  padding: .5rem 1.05rem; box-shadow: var(--shadow-sm); transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.assurance-chips li:hover { border-color: var(--hairline-accent); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.koru-bullet { width: 1.05em; height: 1.05em; color: var(--secondary); flex: none; }

/* ===========================================================
   ABOUT
   =========================================================== */
.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.about-copy .lead { color: var(--text); }
.about-media { position: relative; }
.about-photo {
  aspect-ratio: 5/6; border-radius: var(--radius);
  background: linear-gradient(155deg, #FFFFFF 0%, #EAD8D2 45%, #799184 100%);
  border: 1px solid var(--hairline);
}
.about-watermark { position: absolute; inset-inline-end: -14px; top: -18px; color: var(--accent); opacity: .12; }
.about-watermark .koru { width: 120px; height: 120px; }

/* ===========================================================
   CARDS (shared)
   =========================================================== */
.cards { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
/* Card styling: a whisper of misty mint bleeding down from the top edge (not flat white) —
   enough for the card to read as a lit, considered surface rather than a blank box, subtle
   gold-tinted border, 14px radius, and one soft forest shadow. */
.card {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--sage-band) 130%);
  border: 1px solid var(--card-border); border-radius: var(--radius-card);
  padding: var(--card-pad);
  box-shadow: var(--shadow-card);
  transition: background .25s ease, border-color .25s ease, transform .3s cubic-bezier(.22,.61,.28,1), box-shadow .3s ease;
}
/* A hairline of gold along the top edge, fading out at both ends. One pixel, no colour block —
   it catches the eye as craft rather than decoration, and it is the detail that most separates
   a bespoke card from a Bootstrap one. Sits above the fill, under the content. */
.card::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 12%;
  height: 1px; border-radius: 1px; pointer-events: none;
  background: linear-gradient(to right,
    rgba(23,59,43,0) 0%, rgba(23,59,43,.40) 28%, rgba(23,59,43,.55) 50%,
    rgba(23,59,43,.40) 72%, rgba(23,59,43,0) 100%);
  opacity: .75; transition: opacity .3s ease, inset-inline .3s ease;
}
.card:hover { border-color: var(--hairline-accent); background: linear-gradient(180deg, #FFFFFF 0%, var(--warm-core) 145%); transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), var(--shadow-card-hover); }
.card:hover::before { opacity: 1; inset-inline: 4%; }
.card h3 { margin-bottom: var(--sp-1); }
.card p { color: var(--muted); font-size: 1rem; }

/* Team */
.team-grid { grid-template-columns: repeat(3, 1fr); }
.team-card { text-align: center; }
/* Portrait medallion — double ring (cream inner, gold hairline outer) over the sage-warm
   gradient, on the same shadow ramp as the frames. The gold ring is the through-line that
   ties portraits, cards and the gallery aperture into one family of detailing. */
.portrait {
  display: block; width: 112px; height: 112px; margin: 0 auto 1.15rem;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--page-bg-alt) 0%, var(--surface-alt) 45%, var(--secondary) 100%);
  box-shadow:
    inset 0 0 0 4px #FFFFFF,
    0 0 0 1px rgba(23,59,43,.50),
    0 0 0 2px rgba(255,255,255,.55),
    0 0 0 3px var(--mat-edge),
    0 2px 4px rgba(23,59,43,.030),
    0 8px 16px rgba(23,59,43,.026),
    0 18px 34px -10px rgba(23,59,43,.14);
  transition: transform .35s cubic-bezier(.22,.61,.28,1), box-shadow .35s ease;
}
.team-card:hover .portrait { transform: translateY(-2px) scale(1.02); }
.team-card .role { display: block; color: var(--accent-text); font-weight: 500; font-size: .95rem; margin-bottom: .6rem; }

/* ===========================================================
   FAQ
   =========================================================== */
/* §2 Dividers — soft 1px hairlines in place of hard rules */
.faq { border-top: 1px solid var(--line-soft); }
.faq-item { border-bottom: 1px solid var(--hairline); transition: background .22s ease; }
/* an open row gets a whisper of warm cream, so the expanded answer reads as one block */
.faq-item[open] { background: linear-gradient(180deg, rgba(253,249,238,.72), rgba(253,249,238,0)); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: var(--sp-3) var(--sp-2);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 56px;   /* comfortable tap target for the whole row */
  font-family: var(--font-head); font-size: clamp(1.08rem, 1.6vw, 1.2rem); font-weight: 600;
  line-height: 1.4; color: var(--heading);
  border-radius: var(--radius-sm); transition: color .2s ease, padding .25s ease;
}
.faq-item summary:hover { color: var(--accent-mid); padding-inline-start: calc(var(--sp-2) + 4px); }
.faq-item[open] summary { color: var(--accent-mid); }
.faq-item summary::-webkit-details-marker { display: none; }
/* the chevron sits in its own soft sage chip — a clearer affordance than a bare glyph */
.faq-chev {
  display: grid; place-items: center; width: 28px; height: 28px; flex: none;
  border-radius: 50%; background: linear-gradient(160deg, #FFFFFF 0%, var(--accent-soft) 100%);
  border: 1px solid rgba(23,59,43,.35); box-shadow: var(--shadow-sm);
  color: var(--accent-text); font-size: .95rem; line-height: 1;
  transition: transform .25s ease, background .25s ease, color .25s ease;
  transform: rotate(-90deg);
}
.faq-item summary:hover .faq-chev { background: linear-gradient(160deg, #FFFFFF 0%, var(--warm-core) 100%); color: var(--accent); border-color: rgba(23,59,43,.55); }
.faq-item[open] .faq-chev { transform: rotate(90deg); }
.faq-a { padding: 0 var(--sp-2) var(--sp-4); }
.faq-a p { color: var(--text); max-width: var(--measure); font-size: 1.02rem; line-height: 1.8; }

/* ===========================================================
   CONTACT
   =========================================================== */
/* Contact Area — the sage-green band, the same green the Rooms carousel sits on, so the
   two "come and see us" moments share one surface. The white/cream card on top is what
   keeps the section readable and warm; the band itself no longer goes dark. */
#contact {
  background: var(--seam), linear-gradient(180deg, var(--sage-band) 0%, #D7E2D9 100%);
}
#contact::before { background: radial-gradient(circle, var(--warm-core) 0%, rgba(241,228,221,0) 70%); opacity: .75; }
#contact::after  { background: radial-gradient(circle, #FFFFFF 0%, rgba(255,255,255,0) 70%); opacity: .5; }
/* Deep-green ink now the band is light — 8.36:1 on sage, the same voice as every other
   light section's heading, so Contact stops being the one odd band out. */
#contact .section-head h2 {
  color: var(--heading);
  font-size: clamp(1.95rem, 3.8vw, 2.9rem); line-height: 1.12; letter-spacing: -.018em;
  max-width: 26ch; margin-inline: auto;
}
/* Head → card: one composed centred column. --head-gap (up to 3.25rem) was tuned for a
   two-column row; with a single card, and now that the heading is a direct question that the
   three actions answer, the pair reads as one unit pulled two steps closer. */
#contact .section-head { position: relative; margin-bottom: var(--sp-4); }
/* a wide, very soft pink pool behind the question — it lifts the heading off the dark green
   and carries the eye down toward the card's three actions. Centred with logical insets +
   auto margins, so RTL needs no special case. */
#contact .section-head::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset-inline: 0; inset-block-start: -8%;
  inline-size: min(38rem, 100%); block-size: 130%; margin-inline: auto;
  background: radial-gradient(58% 52% at 50% 42%,
    rgba(255,255,255,.50) 0%, rgba(255,255,255,.18) 46%, rgba(255,255,255,0) 72%);
}
#contact .section-head::after { opacity: 1; }

/* One centred column at exactly the 640px / 40rem measure of .section-head above it, so the
   head's gold rule and the card share the same edges instead of the card drifting off-axis. */
.contact-grid { display: grid; grid-template-columns: min(100%, 40rem); justify-content: center; }

/* ---- .field / .form-note below are SHARED: packages.html's .pkg-form lead form uses them.
   They stay here even though #contact no longer has a form of its own. ---- */
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: .95rem; font-weight: 600; color: var(--heading); }
.field .optional { color: var(--muted); font-weight: 400; }
/* Input fields — warm sand-tinted inset, deep forest green border on focus */
.field input, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--text);
  padding: .85rem 1rem; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--page-bg);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: #5F6B5C; }
.field input:focus, .field textarea:focus { outline: none; background: #FFFFFF; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(121,145,132,.38); }
.form-note { font-size: .88rem; color: var(--muted); text-align: center; margin-top: .3rem; }

/* ---- The one contact card. Four clearly separated groups, top to bottom:
     1. head    → title + live open/closed status
     2. intro   → one short reassurance line
     3. facts   → phone / email / address / hours, as one inset cream list
     4. actions → Google Maps + Waze paired on one row, WhatsApp inquiry full-width beneath
   Then the accessibility note closes the card.
   Nothing here books — booking stays on the לתיאום תור CTA.
   On the sage band the card no longer needs a halo to lift off a dark field; it needs the
   opposite — a slightly firmer edge and a grounded cast, so a light card on a light band
   still reads as a raised object rather than a pale patch. */
.contact-panel {
  position: relative;
  background: linear-gradient(160deg, #FFFFFF 0%, #F7F3EA 100%);
  border: 1px solid rgba(23,59,43,.18); border-radius: var(--radius-lg);
  padding: var(--panel-pad);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    var(--shadow-lift);
}
/* the same gold crest the cards carry, so the one large panel on the dark contact band is
   detailed to the same standard as the small surfaces elsewhere */
.contact-panel::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 14%;
  height: 1px; border-radius: 1px; pointer-events: none;
  background: linear-gradient(to right,
    rgba(23,59,43,0) 0%, rgba(23,59,43,.45) 30%, rgba(23,59,43,.62) 50%,
    rgba(23,59,43,.45) 70%, rgba(23,59,43,0) 100%);
}
.contact-panel h3 { margin: 0; }
/* 2 · intro — targeted via .panel-head + p, NOT .contact-panel > p: the old descendant
   selector also outranked .access-note (0-1-1 beats 0-1-0), which is why the closing note
   was rendering at body size in --text instead of its intended small muted tone. */
.panel-head + p { color: var(--text); font-size: 1.0625rem; max-width: var(--measure); }

/* 1 · head — the live status pill is now the card's sole opener (the old "דיסקרטי, רגוע,
   קרוב" title was removed), so it's centred and given real presence instead of reading as
   a leftover fragment from a two-part header. */
.panel-head {
  display: flex; justify-content: center;
  margin-bottom: var(--sp-3);
}
.panel-head h3 { font-size: clamp(1.4rem, 2.2vw, 1.6rem); }

/* live status pill — presentational only (no href, no handler); [data-state] drives colour */
.status-pill {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body); font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  padding: .55rem .95rem .55rem .8rem; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--hairline); color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), var(--shadow-sm);
}
/* The dot carries the whole signal, so it gets real presence: the state colour as its fill
   (via currentColor, which the halo and ripple then inherit), a 1px forest rim so its edge
   stays legible (≥3:1) against the warm pill fills that #22C55E / #EF4444 alone would not
   clear, and a soft matching halo band. Layout is untouched — rim + halo are box-shadow
   spreads and the ripple is a pseudo-element. */
/* Reads as a lit indicator rather than a flat blob: a bright core, a tight forest containment
   ring so the light green does not dissolve into the sage band behind it (it measured 1.88:1
   there — fine for WCAG, since the pill states its status in text and this dot is aria-hidden,
   but visually mushy), then a soft halo in the dot's own colour. */
.status-dot {
  position: relative; flex: none; width: .6rem; height: .6rem; border-radius: 50%;
  color: var(--muted);
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.72) 0 22%, currentColor 60%);
  box-shadow:
    0 0 0 1px rgba(23,59,43,.42),
    0 0 0 3.5px rgba(255,255,255,.42),
    0 0 7px 1px currentColor,
    0 1px 2px rgba(23,59,43,.20);
}
/* the slow breath — ring opacity/scale only, never the dot's own size */
.status-dot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid currentColor; opacity: 0;
}
@keyframes status-ripple {
  0%, 62% { transform: scale(1);    opacity: .5; }   /* mostly at rest — a breath, not a beacon */
  100%    { transform: scale(1.5);  opacity: 0; }
}
/* open → green; closed → red. Pill fill, border and label colours stay exactly as they were. */
.status-pill[data-state="open"] { background: var(--sage-band); border-color: var(--secondary); color: var(--accent-deep); }
.status-pill[data-state="open"] .status-dot { color: #22C55E; box-shadow: 0 0 0 1px rgba(23,59,43,.30), 0 0 0 4px rgba(34,197,94,.30); }
.status-pill[data-state="closed"] { background: var(--page-bg-alt); border-color: rgba(23,59,43,.55); color: var(--text); }
.status-pill[data-state="closed"] .status-dot { color: #EF4444; box-shadow: 0 0 0 1px rgba(23,59,43,.30), 0 0 0 4px rgba(239,68,68,.28); }
/* only a resolved state breathes; the "בודקים זמינות…" placeholder stays still */
.status-pill[data-state="open"] .status-dot::after,
.status-pill[data-state="closed"] .status-dot::after { animation: status-ripple 3.8s ease-out infinite; }

/* 3 · facts — one inset cream list so the details read as a single grouped block.
   Kept a single column on purpose: the three-line hours row wants the full measure, and one
   uninterrupted list with hairline separators stays calmer than a split 2×2 grid. */
.contact-list {
  list-style: none; margin: var(--sp-4) 0 0; padding: var(--sp-1) var(--sp-3);
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.7); border: 1px solid var(--hairline); border-radius: var(--radius);
}
/* wider card → a deeper inset, so the list reads proportionate instead of edge-hugging */
@media (min-width: 821px) { .contact-list { padding-inline: var(--sp-4); } }
.contact-list li { display: flex; align-items: center; gap: var(--sp-2); padding-block: var(--sp-2); font-size: 1.02rem; color: var(--text); }
.contact-list li + li { border-top: 1px solid var(--line-soft); }
.contact-list li.is-stacked { align-items: flex-start; }        /* the three-line hours row */
.ci {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--accent-soft) 100%);
  border: 1px solid var(--hairline-accent); color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}
/* the whole row lights up on hover, so the icon chip reads as part of one tappable line */
.contact-list li:hover .ci { background: linear-gradient(180deg, var(--accent-soft) 0%, var(--sage-deep) 100%); border-color: var(--secondary); transform: translateY(-1px); }
/* WhatsApp entry — same chip language as every other contact icon, just carrying its own
   brand-adjacent green so it reads as "this one opens WhatsApp" at a glance. */
.ci-whatsapp { background: linear-gradient(180deg, #E7F5EA 0%, #CFEAD6 100%); border-color: rgba(37,140,73,.35); color: #1F7A45; }
.contact-list li:hover .ci-whatsapp { background: linear-gradient(180deg, #DCF0E1 0%, #C2E4CB 100%); border-color: #1F7A45; }
.contact-list li.is-stacked .ci { margin-block-start: .1rem; }
.contact-link { display: inline-flex; align-items: center; min-height: 34px; color: var(--text); text-decoration-color: transparent; text-underline-offset: .25em; transition: color .2s ease, text-decoration-color .2s ease; }
.contact-link:hover { color: var(--accent); text-decoration: underline; text-decoration-color: var(--secondary); }
/* touch: the phone + address entries are real tap targets, so give them a full 44px on
   small screens without disturbing the desktop list rhythm */
@media (max-width: 820px) { .contact-link { min-height: 44px; } }
.hours-list { display: grid; gap: .18rem; }
.hours-row { font-size: .96rem; line-height: 1.5; color: var(--text); }

/* 4 · actions — ONE group of three captionless tier-3 controls: the two navigation routes
   pair up on the first row, the WhatsApp conversation owns the row beneath.
   Wrapping flexbox rather than a grid + breakpoint on purpose. Every .btn is
   white-space:nowrap, so each control's automatic minimum size IS its one-line label width;
   a flex line therefore only keeps the two routes side by side while both labels genuinely
   fit, and folds them into a clean full-width stack the moment they don't — at any viewport,
   any font fallback, any text-zoom level. No label can wrap, truncate or push the panel
   wider than its 40rem measure, so there is nothing to scroll horizontally at 375px.
   The paired row's tighter column gap + the wider row gap under it keep "how to get here"
   reading as a pair and the WhatsApp control as its own beat, without any extra wrapper. */
.panel-actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-2);
  margin-block-start: var(--sp-4); padding-block-start: var(--sp-4);
  border-top: 1px solid var(--hairline-accent);
}
/* 16rem basis: the two routes only share a row once the panel can give each of them a
   comfortable ~17rem half (roughly a 616px viewport and up) — below that the line breaks and
   they stack full width, rather than pairing into two pills the labels barely clear.
   Padding trimmed from the global 1.6rem for the same reason: it buys the longest label
   (ניווט באמצעות גוגל מפות) real breathing room inside a half-row pill. */
.panel-actions > .btn { flex: 1 1 16rem; padding-inline: var(--sp-3); }
/* the WhatsApp control keeps its full-width row — visually the anchor of the group */
.panel-actions > .btn-block { flex-basis: 100%; }
/* closing note — centred under the action group, so the card settles */
.access-note { font-size: .88rem; color: var(--muted); text-align: center; margin-block-start: var(--sp-4); }

/* Tier-3 buttons on the sage panel: a sage-tinted outline would vanish into the panel, so
   the outline variant takes the cream surface and the soft variant takes the deep sage fill
   (white-on-#5C6E63 clears AA). Both stay clearly subordinate to the gold booking CTA. */
#contact .contact-panel .btn-outline { background: var(--surface); color: var(--accent-text); border-color: var(--secondary); }
#contact .contact-panel .btn-outline:hover { background: var(--secondary-deep); color: #FFFFFF; border-color: var(--secondary-deep); }
#contact .contact-panel .btn-soft { background: var(--secondary-deep); color: #FFFFFF; border-color: var(--secondary-deep); }
#contact .contact-panel .btn-soft:hover { background: var(--accent); border-color: var(--accent); }

/* ===========================================================
   WHATSAPP INQUIRY SHEET — native <dialog>, RTL
   The dialog box itself is the full-viewport scrim area (padding = the click-to-close
   gutter, which is also what keeps the sheet off the screen edges at 375px); the visible
   card is .wa-sheet. Top layer, so #contact's overflow:clip can never crop it.
   Inside: name → reason (styled radios) → conditional room step (same radio pattern,
   revealed only for the two rental reasons) → question → one forest-green send action.
   =========================================================== */
.wa-dialog {
  position: fixed; inset: 0; margin: 0; border: 0; background: transparent;
  /* width/height must be stated explicitly. A <dialog> carries a UA `width: fit-content`,
     which leaves `inset: 0` over-constrained — and the RTL resolution of that drops the
     inline-start inset, so the box collapsed to its content width and hugged the right edge,
     taking the "centred" sheet with it. Sizing it to the viewport lets the flex centring
     below actually centre. */
  width: 100%; height: 100%;
  max-width: none; max-height: none; padding: 1rem;
  overflow: hidden;   /* the sheet scrolls, not the scrim */
}
.wa-dialog[open] { display: flex; align-items: center; justify-content: center; }
.wa-dialog::backdrop { background: rgba(23,59,43,.58); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

.wa-sheet {
  width: min(100%, 26rem);
  max-height: calc(100vh - 2rem);    /* fallback first … */
  max-height: calc(100dvh - 2rem);   /* … then dvh, so an open keyboard can't clip the sheet */
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--card-bg); border: 1px solid var(--hairline-accent); border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 4vw, 1.6rem);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 24px 60px -18px rgba(23,59,43,.45);
}
.wa-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
/* ---- The sheet's title is the premium moment of this card, so it is treated as editorial
   type rather than a UI label: the site's serif at 500, a scale that sits deliberately
   between a label and a section h2, tightened leading + tracking, and balanced wrapping.
   Under it, the page's own two-part ornament — a single gold pip flanked by hairlines that
   taper into nothing — at sheet scale. Gold appears at pip scale only, never as a rule or a
   fill, which is what keeps this clinical-premium instead of loud. ---- */
.wa-sheet-title {
  font-family: var(--font-head); font-size: clamp(1.45rem, 5.2vw, 1.7rem);
  font-weight: 500; line-height: 1.2; letter-spacing: var(--tracking-tight);
  color: var(--heading); margin: 0; text-wrap: balance;
}
.wa-sheet-title::after {
  content: ""; display: block; width: 104px; height: 7px; margin-block-start: .7rem;
  background:
    radial-gradient(circle at 50% 50%, var(--warm) 0 2.6px, rgba(23,59,43,0) 3.2px),
    linear-gradient(to right,
      rgba(121,145,132,0) 0%, rgba(121,145,132,.5) 22%, rgba(23,59,43,.8) 41%,
      rgba(23,59,43,0) 42%, rgba(23,59,43,0) 58%,
      rgba(23,59,43,.8) 59%, rgba(121,145,132,.5) 78%, rgba(121,145,132,0) 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% 1.5px;
  background-position: center center, center center;
}
.wa-close {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  margin-block-start: -.4rem; margin-inline-end: -.4rem;
  border: 1px solid var(--hairline); border-radius: 50%; background: var(--surface);
  color: var(--heading); cursor: pointer; transition: background .2s ease, border-color .2s ease;
}
.wa-close:hover { background: var(--accent-soft); border-color: var(--hairline-accent); }
.wa-sheet-note { margin-block-start: var(--sp-2); font-size: .95rem; line-height: 1.6; color: var(--muted); }

/* ---- the inquiry form. One scrollable sheet: name → reason → (room, only when it
   applies) → question, all in view at once, the sheet itself scrolling if it must. ---- */
.wa-form { display: flex; flex-direction: column; gap: var(--sp-3); margin-block-start: var(--sp-4); }
.wa-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
/* The conditional room step is toggled with the `hidden` attribute so it leaves the tab
   order and the a11y tree when it does not apply — and this rule is what makes that stick:
   an author `display:flex` beats the UA stylesheet's [hidden]{display:none} regardless of
   specificity, which would otherwise leave a "hidden" step still focusable. */
.wa-field[hidden] { display: none; }
/* Appearance: a short grow + fade so the step arrives instead of snapping in. Only content
   BELOW it moves, and the sheet is never scrolled programmatically, so nothing lurches.
   main.js removes the class once the animation is done, so no max-height is left behind. */
.wa-field-room.is-revealing {
  overflow: hidden;   /* fallback first … */
  overflow: clip;     /* … then clip, which cannot create a scroll container */
  animation: waRoomIn .3s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes waRoomIn {
  from { opacity: 0; max-height: 0; transform: translateY(-6px); }
  to   { opacity: 1; max-height: 28rem; transform: translateY(0); }
}
.wa-label { font-family: var(--font-body); font-size: .95rem; font-weight: 700; color: var(--heading); }

.wa-input {
  width: 100%; min-height: 48px; padding: .7rem 1rem;
  font-family: var(--font-body); font-size: 1rem; line-height: 1.5; color: var(--text);
  background: var(--page-bg); border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.wa-input::placeholder { color: var(--muted); opacity: 1; }   /* AA on the sand input fill */
.wa-textarea { min-height: 96px; resize: vertical; }
.wa-input:focus { outline: none; background: #FFFFFF; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(121,145,132,.45); }
.wa-input[aria-invalid="true"] { border-color: var(--warm-deep); }
.wa-input[aria-invalid="true"]:focus { border-color: var(--warm-deep); box-shadow: 0 0 0 3px rgba(107,78,24,.22); }

/* ---- reason: real radios (visually hidden, still focusable) behind card-style labels ---- */
.wa-choices { display: grid; gap: var(--sp-2); margin-block-start: .15rem; }
.wa-choice { position: relative; display: block; cursor: pointer; }
.wa-choice-input {
  position: absolute; inset-block-start: 50%; inset-inline-start: 1.1rem;
  width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none;
}
.wa-choice-box {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 52px; padding: .7rem .95rem;          /* comfortable tap target, wraps if long */
  background: var(--surface); border: 2px solid var(--hairline-accent); border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1.35;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
/* the radio affordance itself: empty sage ring → filled cream disc with a check */
.wa-choice-mark {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px;
  border: 2px solid var(--secondary-deep); border-radius: 50%;
  color: transparent; transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.wa-choice-mark svg { width: 13px; height: 13px; }
.wa-choice:hover .wa-choice-box { background: var(--accent-soft); border-color: var(--secondary); }
/* SELECTED — deep sage fill + forest edge + a real check glyph, so the state never rests on
   colour alone. White on #5C6E63 clears AA, same pairing the panel's soft buttons use. */
.wa-choice-input:checked + .wa-choice-box {
  background: var(--secondary-deep); border-color: var(--accent-deep); color: #FFFFFF;
}
.wa-choice-input:checked + .wa-choice-box .wa-choice-mark {
  background: #FFFFFF; border-color: #FFFFFF; color: var(--accent-deep);
}
.wa-choice-input:focus-visible + .wa-choice-box { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- inline errors. Empty = absent (no reserved gap, no reflow surprises); main.js only
   ever writes/clears .textContent. Gold-deep + a "!" badge, so it reads as a correction
   rather than an alarm, and never signals by colour alone. ---- */
.wa-error {
  display: flex; align-items: flex-start; gap: .35rem;
  font-size: .85rem; line-height: 1.45; font-weight: 600; color: var(--warm-deep);
}
.wa-error:empty { display: none; }
.wa-error::before {
  content: "!"; flex: none; display: inline-grid; place-items: center;
  width: 1.15em; height: 1.15em; margin-block-start: .14em;
  border-radius: 50%; background: var(--warm-deep); color: var(--surface);
  font-size: .8em; font-weight: 700; line-height: 1;
}

/* the sheet's primary action — heaviest element in the card, and deliberately forest green:
   gold at this weight stays reserved for booking. */
.wa-submit { margin-block-start: var(--sp-1); min-height: 52px; font-size: 1.05rem; }
/* .btn-primary's hover picks up a whisper of gold on the edge; here it stays sage, so this
   action never reads as a relative of the gold booking CTA. */
.wa-submit:hover { border-color: var(--secondary); }

/* ===========================================================
   FOOTER — evergreen band
   =========================================================== */
.site-footer { position: relative; background: var(--footer-bg); color: var(--footer-text); padding-top: clamp(3rem, 5vw, 4rem); }
/* Tri-tone closing band (DESIGN.md section stripe, recolored to the clinic palette).
   Used exactly once, as the page's closing edge — never as inline decoration. */
.site-footer::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(to right,
    var(--warm) 0 34%, var(--secondary) 34% 67%, var(--accent-mid) 67% 100%);
}
.site-footer .ripple-divider { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
/* packages.html only: its footer has just brand + contact (no nav column), so the shared
   3-track desktop grid above would leave one track empty. Two even tracks instead. */
@media (min-width: 821px) {
  .footer-two-col .footer-inner { grid-template-columns: 1fr 1fr; }
}
.brand-mark-dark { background: rgba(121,145,132,.16); border-color: rgba(121,145,132,.38); color: #F7F3EA; }
/* Brand block: the real logo leads, centred, with the wordmark set tight underneath it —
   one quiet signature instead of an icon + name + tagline spread down the column. */
.footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.footer-brand .brand-name { color: var(--footer-text); font-size: 1.5rem; line-height: 1.2; }
.footer-brand .brand-sub { color: var(--footer-div); display: block; margin: .1rem 0 0; }
.footer-brand .brand-mark { margin-bottom: .8rem; }
/* The logo's ink is near-black with a gold wreath — illegible as-is on the dark forest band.
   Rather than boxing it on a light card (a hard, cropped shape that reads as UI chrome, not
   mark), it is recoloured to a single soft cream silhouette: brightness(0) flattens every
   opaque pixel to black regardless of its original hue, invert(1) then flips that to white,
   and the slightly reduced opacity keeps it a shade quieter than the pure-white body copy. */
.footer-logo {
  height: 58px; width: auto; display: block; margin-bottom: .9rem;
  filter: brightness(0) invert(1); opacity: .92;
}
/* column titles get the sage rule the section heads have, at footer scale */
.footer-col h4 { position: relative; font-family: var(--font-body); font-size: .92rem; letter-spacing: .06em; color: var(--footer-text); margin-bottom: var(--sp-3); padding-bottom: var(--sp-1); }
.footer-col h4::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; width: 26px; height: 2px; border-radius: 2px; background: var(--warm); opacity: .8; }
/* comfortable link rows — a real tap target, with a sage underline on hover */
.footer-col a {
  display: flex; align-items: center; min-height: 40px; width: fit-content;   /* flex, not inline-flex — one link per line */
  color: var(--footer-muted); text-underline-offset: .3em; text-decoration-color: transparent;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.footer-col a:hover { color: #F7F3EA; text-decoration: underline; text-decoration-color: var(--footer-div); }
/* touch: full 44px rows on phones, where these are thumbed rather than clicked */
@media (max-width: 820px) { .footer-col a { min-height: 44px; } }
/* Legal column: a single link replacing the old nav list, so it gets no h4 rule and instead
   sits as a quiet outlined pill, vertically centred against the taller contact column beside it. */
.footer-col-legal { display: flex; align-items: center; justify-content: flex-start; }
.footer-legal-link {
  display: inline-flex; align-items: center; min-height: 40px; width: fit-content;
  padding: .5rem 1.1rem; border-radius: 999px; border: 1px solid var(--hairline-accent-dark, rgba(121,145,132,.4));
  color: var(--footer-text); text-decoration: none !important;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.footer-legal-link:hover { background: rgba(121,145,132,.14); border-color: var(--footer-div); color: #F7F3EA; }
.footer-bottom { display: flex; justify-content: center; padding: var(--sp-4) 0 var(--sp-5); border-top: 1px solid rgba(121,145,132,.26); }
/* Single centred legal line: plain text segments and small text links, separated by a
   quiet "|" glyph. One row on desktop; wraps and re-centres on phones without breaking mid-word. */
.footer-legal-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .35rem .65rem; max-width: 100%; text-align: center;
  color: rgba(249,249,247,.64); font-size: .85rem;
}
.footer-legal-row a {
  color: inherit; text-decoration-color: transparent; text-underline-offset: .25em;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.footer-legal-row a:hover { color: #F7F3EA; text-decoration: underline; text-decoration-color: var(--footer-div); }
.footer-legal-row .footer-sep { color: rgba(249,249,247,.32); }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
/* Header step-down. The desktop bar must never wrap, so the actions cluster sheds weight in
   one step before the whole thing collapses to the drawer:
     ≥1140px   brand · nav · phone+number · יצירת קשר · לתיאום תור
     1100-1139 phone drops to icon-only (frees ~96px — the number is the widest soft item)
     ≤1099px   drawer
   Breakpoints are measured, not guessed. The row needs a fixed ~1000px with the number and
   ~904px without it; the pill's inner width is min(1180, vw − header padding). So the full
   layout technically still fits at 1100 (37px slack) — 1140 is used instead to keep ~77px of
   headroom, because a wider Hebrew font fallback would otherwise overflow a nowrap row and
   that reads as horizontal scroll rather than a wrap. */
@media (max-width: 1139px) {
  .header-phone-num { display: none; }
  .header-phone { padding-inline: .35rem; }
}
@media (max-width: 1099px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
  /* all three action items live in the drawer below this width */
  .header-cta, .header-phone { display: none; }
}
@media (max-width: 1024px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-media { order: -1; max-width: 460px; margin-inline: auto; }
  .team-grid, .articles-grid { grid-template-columns: 1fr; }
  /* .contact-grid needs no override — min(100%, 40rem) already collapses to the container */
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  body { font-size: 1.0625rem; }
  .brand-logo { height: 42px; }
  .hero { padding-inline: 12px; }
  .hero-plate { min-height: 54vh; padding: 3rem 1.3rem 3.25rem; }
  .orb { width: 56px; height: 56px; }
  .pillars { grid-template-columns: 1fr; }
  /* single-child flex row: the column switch + width:100% is what makes the one booking
     CTA go full-width here; there is no sibling left for the row gap to apply to. */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .btn-ghost-link { justify-content: center; }
  .hero-card { position: static; margin: 2rem auto 0; max-width: none; }
  .assurance-chips { gap: .75rem 1.25rem; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }

  /* Contact panel on small phones: buy back horizontal room for the fact rows so the
     three-line hours and the address never crowd the viewport edge. */
  .contact-list { padding-inline: var(--sp-2); }
  .contact-list li { gap: var(--sp-1); }
  .ci { width: 36px; height: 36px; border-radius: 10px; }
  .panel-head h3 { font-size: 1.25rem; }
  /* full-width single column down here, so buy back a little more room for the longest
     navigation label rather than relying on the 1.15rem desktop inset */
  .panel-actions > .btn { padding-inline: var(--sp-2); }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .orb { animation: none !important; }
  .btn, .card, .nav a::after, .read-link span, .faq-chev,
  .wa-choice-box, .wa-choice-mark, .wa-input, .contact-link { transition: none !important; }
  /* the conditional room step still appears/disappears — it just does it instantly */
  .wa-field-room.is-revealing { animation: none !important; }
  /* the status dot keeps its colour + static halo; only the breathing ring stops */
  .status-dot::after { animation: none !important; }
  .btn::after { display: none; }          /* the light sweep is motion for its own sake here */
  /* ---- atmosphere layer: keep the paper grain (it is texture, not motion), drop everything
     that moves. The ambient glow drift is pinned to its rest frame rather than removed, the
     pointer spotlight and both scroll-driven controls are switched off entirely. ---- */
  #team::before, #contact::before, .about-me::before, .packages::before, #faq::before,
  #team::after, #contact::after, .about-me::after, .packages::after, #faq::after {
    animation: none !important; transform: none !important; will-change: auto !important;
  }
  .card::after { display: none !important; }
  .read-progress, .to-top { display: none !important; }
}

/* ===========================================================
   ROOMS · AUTO-ADVANCING IMAGE CAROUSEL
   Image-led and edge-to-edge: one large photo spans almost the full viewport width (breaking
   out of the standard .container), its room name + description sitting directly over the
   photo on a bottom scrim. Base CSS (before JS marks the section `.is-ready`) is a safe
   STATIC stacked list — every room fully visible, no motion, works with no JS at all.
   assets/main.js (initRoomsCarousel) then turns it into an absolutely-stacked crossfading
   carousel: auto-advance every 3s, prev/next arrows, dots. No GSAP/ScrollTrigger involved —
   this section no longer touches page scroll in any way.

   THE FRAME OWNS THE CROP. Unlike the previous scroll-gallery (which never cropped, because
   its aperture held a MIX of photo ratios), every photo here is ~4:3 and the frame uses
   object-fit: cover — a deliberate departure. A "never crop, always contain" print-mount
   is what produced the cream mat/letterbox bars the redesign was asked to remove; a
   full-bleed cover-fit photo is what an image-led hospitality-style carousel actually looks
   like, and object-fit: cover crops to fill without ever distorting/stretching the photo.

   NO NARROW FRAME — an earlier pass kept a 1px hairline border + a height cap that, on
   wide/short screens, shrank the photo well under the section's own width, reading as a
   small bordered card. This pass drops the border entirely (the shadow alone is enough
   separation from the page) and breaks the `.rooms-frame` itself out of `.container` with
   the classic 100vw/-50vw technique — body already carries `overflow-x: hidden` (see the
   root rules above), so the breakout cannot introduce a horizontal scrollbar. The heading
   and dots stay inside `.container` so they keep reading as part of the normal text column
   while the photo goes wide.

   BANNER, NOT PORTRAIT — the frame's height is set directly with a clamped `block-size`
   rather than an `aspect-ratio`. An aspect-ratio ties height to the frame's own width, and
   once that width is near edge-to-edge, the same ratio produces a much taller photo than it
   would inside a normal container — reading as stretched/vertical rather than a wide banner.
   A direct height keeps the strip low and calm at every breakpoint independent of how wide
   the frame happens to be. ---- */
/* Clinic Rooms — carousel logic/layout untouched; only the section background around it
   changes, to the sage-green band per the exact palette (Rooms reads as a "services" band). */
.rooms {
  background: var(--seam), #C9D8CC;
}

/* ---- BASE (no-JS / no-motion): a plain stacked list of edge-to-edge photos, each with its
   own caption sitting on it — this is what stays visible if assets/main.js never runs. ---- */
.rooms-frame {
  position: relative;
  inline-size: 100vw;
  margin-inline-start: calc(50% - 50vw);
  margin-block: clamp(1.5rem, 4vw, 2.5rem);
}
.rooms-stage { display: flex; flex-direction: column; gap: clamp(1.25rem, 3vw, 1.9rem); }
/* Every room photo on disk is pre-composed panoramic, ~3:1 (2172×724), for this carousel.
   The dark background here is just a safety net: it never flashes plain white/cream before
   the photo has painted. */
.rooms-slide {
  position: relative; isolation: isolate; overflow: clip;
  aspect-ratio: 2172 / 724;
  background: #14251d;
  box-shadow: var(--shadow-lift);
}
/* No blurred backdrop layer any more — the real photo below is object-fit: cover, so it
   always fills the frame on its own with no margin left to fill. The markup still carries
   a .rooms-slide-bg <img> (kept so nothing else has to change), it just never renders. */
.rooms-slide-bg { display: none; }
/* THE REAL PHOTO — cover, never contain: the frame is always fully filled, cropped rather
   than letterboxed when the frame's aspect ratio doesn't exactly match the photo's own.
   object-position stays centered so the room's own centre (not an edge) is what survives
   any crop, at every frame width. */
.rooms-slide-img {
  position: absolute; inset: 0; z-index: 1;
  display: block; inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: center;
}
/* The scrim — a dedicated layer above the photo and below the caption, so the darkening
   never depends on how bright any individual photo happens to be. The caption sits
   bottom + inline-end (right, in this RTL layout), so the scrim is darkest at that corner
   and fades away toward the opposite one — a soft wash under the text rather than a solid
   panel, so it never reads as a separate box laid over the photo. Forest ink, not plain
   black — it stays a warm shadow rather than a generic dark overlay. */
.rooms-slide::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to top,   rgba(15,26,20,.55) 0%, rgba(15,26,20,0) 55%),
    linear-gradient(to left,  rgba(15,26,20,.72) 0%, rgba(15,26,20,0) 60%);
}
/* ---- CAPTION — room info ON the image, bottom-anchored, RTL by logical properties. Same
   light-on-dark voice already proven over the hero's video (--hero-text/--hero-muted + the
   hero's own text-shadow recipe), reused verbatim for consistency rather than inventing a
   second "text on photo" treatment. Sits over the scrim regardless of where the real photo's
   contain-fitted edges land, so it never depends on — or covers — the room itself.
   Sized down from the original cinematic-banner scale: the frame is now a short 300-480px
   band (see .rooms.is-ready .rooms-frame), so a large title would eat a big share of the
   photo's own visible height instead of just sitting quietly along its bottom edge. ---- */
.rooms-caption {
  position: absolute; z-index: 3;
  inset-inline: 0; inset-block-end: 0;
  padding-inline: clamp(1.1rem, 3.5vw, 2.5rem);
  padding-block-end: clamp(.9rem, 2.6vw, 1.5rem);
  padding-block-start: clamp(1.5rem, 5vw, 2.5rem);
  max-inline-size: 40ch;
}
.rooms-caption-title {
  margin: 0;
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.1rem, 2.2vw, 1.55rem);
  line-height: 1.16; letter-spacing: -.008em;
  color: var(--hero-text);
  text-shadow: 0 1px 2px rgba(27,44,35,.34), 0 8px 28px rgba(27,44,35,.28);
  text-wrap: balance;
}
.rooms-caption-desc {
  margin: .35rem 0 0;
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(.82rem, .9vw, .92rem); line-height: 1.5;
  color: var(--hero-muted);
  text-wrap: pretty;
}

/* ---- Controls: hidden and inert until JS confirms the carousel is wired, per the site's
   safe-fallback philosophy — a control that does nothing should not be visible or focusable. */
.rooms-arrow, .rooms-dots {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s ease;
}
.rooms.is-ready .rooms-arrow, .rooms.is-ready .rooms-dots {
  opacity: 1; visibility: visible; pointer-events: auto;
}
/* Prev/next — same solid-forest circular button already used for .to-top, reused verbatim
   for one consistent "floating control over content" language site-wide. Sits inset from the
   FRAME's own edges (not the section's), vertically centred on the photo.
   RTL mapping: this site's own convention (see .btn-ghost-link's hover nudge) is that
   "forward" points left, so next/prev mirror that — prev (back) on the right/inline-start,
   next (forward) on the left/inline-end, with chevrons pointing the same way as their side. */
.rooms-arrow {
  position: absolute; z-index: 3;
  inset-block-start: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  inline-size: 48px; block-size: 48px; border-radius: 50%;
  background: linear-gradient(180deg, var(--btn-green-hover) 0%, var(--btn-green) 60%, var(--btn-green-deep) 100%);
  color: #FFFFFF;
  border: 1px solid rgba(23,59,43,.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 8px 22px -8px rgba(23,59,43,.40);
  cursor: pointer;
}
.rooms-arrow svg { inline-size: 22px; block-size: 22px; }
.rooms-arrow-prev { inset-inline-start: clamp(.65rem, 2.5vw, 1.2rem); }
.rooms-arrow-next { inset-inline-end: clamp(.65rem, 2.5vw, 1.2rem); }
.rooms-arrow:hover {
  filter: brightness(1.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 12px 28px -8px rgba(23,59,43,.62);
}
.rooms-arrow-prev:hover { transform: translateY(-50%) scale(1.05); }
.rooms-arrow-next:hover { transform: translateY(-50%) scale(1.05); }
.rooms-arrow:active { transition-duration: .08s; }
.rooms-arrow-prev:active { transform: translateY(-50%) scale(.96); }
.rooms-arrow-next:active { transform: translateY(-50%) scale(.96); }

/* Dots — one per room, a 44px tap target around a small sage pip so the hit area meets the
   touch-target minimum while the visible mark stays quiet. Gold + a slight scale marks the
   active room; there is no numeral anywhere in this control. */
.rooms-dots {
  display: flex; align-items: center; justify-content: center;
  gap: .1rem; margin-block-start: 1.3rem;
}
.rooms-dot {
  position: relative; flex: none;
  inline-size: 44px; block-size: 44px;
  display: grid; place-items: center;
  border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
}
.rooms-dot::before {
  content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%;
  background: var(--secondary); opacity: .55;
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}
.rooms-dot:hover::before { opacity: .85; }
.rooms-dot.is-active::before { background: var(--warm); opacity: 1; transform: scale(1.2); }

/* ---- Once JS has wired the carousel: absolutely stack the slides inside one shared frame
   and let only the active one show. The frame — not each slide — now owns the aperture
   (height, radius, border, shadow), matching the "one mount, many crossfading prints"
   principle already used successfully elsewhere on this page.

   HEIGHT IS A FIXED, DELIBERATELY SHORT BAND — a full-ratio-of-100vw frame reads as
   cinematic on paper but in practice swallows the whole viewport on common desktop widths,
   which is the "feels fullscreen" complaint this replaces. The frame's WIDTH stays exactly
   as before (full-bleed 100vw, unchanged); only the block-size is clamped short. The photos
   on disk are panoramic, ~3:1 (2172×724), so the vw coefficient below (100/3 ≈ 33.34vw) is
   chosen to track that same ratio at 100vw — height scales with width close to the photo's
   own ratio, keeping the object-fit: cover crop (see .rooms-slide-img) light at ordinary
   viewport widths; the min/max clamp bounds only kick in at the very narrow/very wide
   extremes, where cover crops a little more off the photo's long edge rather than ever
   leaving a gap. ---- */
.rooms.is-ready .rooms-frame {
  block-size: clamp(230px, 33.34vw, 320px);
  overflow: clip;
  box-shadow: var(--shadow-lift);
  border-block: 1px solid rgba(23,59,43,.3);
}
@media (min-width: 821px) {
  .rooms.is-ready .rooms-frame { block-size: clamp(360px, 33.34vw, 480px); }
}
.rooms.is-ready .rooms-stage { position: absolute; inset: 0; display: block; }
.rooms.is-ready .rooms-slide {
  position: absolute; inset: 0;
  aspect-ratio: auto;                              /* the frame owns the ratio now */
  border-radius: 0; border: 0; box-shadow: none;   /* the frame owns the chrome now */
  opacity: 0;
  transition: opacity .5s ease;
}
.rooms.is-ready .rooms-slide.is-active { opacity: 1; z-index: 1; }
/* Reduced motion: an instant cut instead of a crossfade — matches the same "opacity:1,
   transform:none, transition:none" pattern the rest of the site already uses. Autoplay
   itself is never started under reduced motion (see assets/main.js); this only covers the
   manual arrow/dot navigation that stays available. */
@media (prefers-reduced-motion: reduce) {
  .rooms.is-ready .rooms-slide { transition: none; }
}

/* ---- STAGE — the photos now sit in an inset, rounded viewport floating on the sage band,
   instead of a hard-edged full-bleed strip. Height is exactly the clamp above; only the
   width is inset. The STAGE clips (radius + crossfade), the FRAME stays unclipped so the
   arrows can sit centred on its edges. A faint cream glow behind the frame lifts it off the
   band without adding any hard line. ---- */
.rooms.is-ready .rooms-frame {
  --rooms-gutter: 64px;
  --rooms-radius: 22px;
  inline-size: min(calc(100% - 2 * var(--rooms-gutter)), 1280px);
  margin-inline: auto;
  overflow: visible;
  box-shadow: none; border-block: 0;
  isolation: isolate;
}
.rooms.is-ready .rooms-frame::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset-block: -34px; inset-inline: -8%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(251,249,245,.34) 0%, rgba(251,249,245,0) 72%);
}
.rooms.is-ready .rooms-stage {
  border-radius: var(--rooms-radius);
  overflow: hidden;
  background: #14251d;
  box-shadow: 0 14px 34px -6px rgba(31,58,44,.16), 0 2px 6px rgba(31,58,44,.06);
  transform: translateZ(0);          /* keeps the rounded clip crisp during the crossfade */
}
/* 1px cream ring above the photos — a finished edge where photo meets band */
.rooms.is-ready .rooms-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(251,249,245,.38);
}
.rooms.is-ready .rooms-slide { margin: 0; }   /* drop the UA <figure> margin: photos fill the stage */
.rooms.is-ready .rooms-arrow-prev { inset-inline-start: -24px; }
.rooms.is-ready .rooms-arrow-next { inset-inline-end: -24px; }
.rooms.is-ready .rooms-arrow { z-index: 6; box-shadow: 0 6px 16px rgba(31,58,44,.22), inset 0 1px 0 rgba(255,255,255,.18); }
@media (max-width: 1199px) { .rooms.is-ready .rooms-frame { --rooms-gutter: 32px; } }
@media (max-width: 820px) {
  .rooms.is-ready .rooms-frame { --rooms-gutter: 20px; --rooms-radius: 16px; }
  .rooms.is-ready .rooms-frame::before { inset-block: -20px; }
  .rooms.is-ready .rooms-arrow { inline-size: 40px; block-size: 40px; }
  .rooms.is-ready .rooms-arrow svg { inline-size: 18px; block-size: 18px; }
  .rooms.is-ready .rooms-arrow-prev { inset-inline-start: -14px; }
  .rooms.is-ready .rooms-arrow-next { inset-inline-end: -14px; }
}
@media (max-width: 480px) {
  .rooms.is-ready .rooms-frame { --rooms-gutter: 16px; }
  .rooms.is-ready .rooms-arrow-prev { inset-inline-start: -10px; }
  .rooms.is-ready .rooms-arrow-next { inset-inline-end: -10px; }
}

/* ---- SPLIT SLIDE (waiting room) — the two original photos side by side, 50/50. Cover-fit
   on desktop (a light crop only, the photos themselves are untouched); a 1px cream hairline
   marks the seam. The full-image scrim is switched off: the shadow sits behind the caption
   text only. ---- */
.rooms-split {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  aspect-ratio: 2172 / 724;               /* no-JS stacked list: same banner ratio as the rest */
  background: #334C3E;
}
.rooms.is-ready .rooms-split { position: absolute; inset: 0; aspect-ratio: auto; }
.rooms-split::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 50%;
  inline-size: 1px; transform: translateX(-50%);
  background: rgba(251,249,245,.6);
  pointer-events: none;
}
.rooms-split-img {
  display: block; inline-size: 100%; block-size: 100%; min-block-size: 0;
  object-fit: cover; object-position: 50% 55%;
}
.rooms-split-img--b { object-position: 50% 62%; }
.rooms-slide--split::before { content: none; }
.rooms-slide--split .rooms-caption { isolation: isolate; }
.rooms-slide--split .rooms-caption::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -30% -6% -12% -30%;
  background: radial-gradient(ellipse 70% 70% at 88% 78%, rgba(15,30,22,.46) 0%, rgba(15,30,22,.22) 45%, rgba(15,30,22,0) 72%);
}
.rooms-slide--split .rooms-caption-title,
.rooms-slide--split .rooms-caption-desc {
  text-shadow: 0 1px 3px rgba(15,30,22,.7), 0 3px 12px rgba(15,30,22,.4);
}
.rooms-slide--split .rooms-caption-desc { color: #FBF9F5; }
/* Mobile: the frame is a shallow band, so a cover crop of each half would slice the room
   into narrow slivers. Instead each photo is shown WHOLE (contain, full 4:3 composition) on
   a muted forest matte, with the caption on the matte underneath — nothing is cut off.
   Only on narrow phones: at tablet widths each half is already close to 4:3 and cover fits. */
@media (max-width: 520px) {
  .rooms.is-ready .rooms-split { inset-block-end: 64px; align-items: center; }
  .rooms.is-ready .rooms-slide--split { background: #334C3E; }
  .rooms.is-ready .rooms-split-img { object-fit: contain; object-position: 50% 50%; block-size: auto; aspect-ratio: 4 / 3; }
  .rooms.is-ready .rooms-split::after { inset-block: 12%; background: rgba(251,249,245,.35); }
  .rooms.is-ready .rooms-slide--split .rooms-caption { padding-inline: 16px; padding-block: 0 .85rem; }
  .rooms.is-ready .rooms-slide--split .rooms-caption::before { content: none; }
  .rooms.is-ready .rooms-slide--split .rooms-caption-title { font-size: 1.15rem; }
  .rooms.is-ready .rooms-slide--split .rooms-caption-desc { font-size: .82rem; margin-top: .15rem; }
}

/* ===========================================================
   SCROLL REVEAL — subtle fade + small slide-up, gentle stagger.
   Hidden state applies ONLY under html.js (set in <head> when
   motion is allowed) — so reduced-motion users never see it,
   and there is no flash if JS is off.
   =========================================================== */
.js .section-head,
.js .about-media, .js .about-card,
.js .rooms-frame,
.js .assurance-line, .js .assurance-chips,
.js .pillar, .js .article-card, .js .team-card,
.js .contact-panel,
.js .faq, .js .footer-inner,
.js .pkg-group, .js .pkg-info,
.js .legal-toc, .js .legal-section {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s ease, transform .5s cubic-bezier(.22,.61,.28,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .is-visible { opacity: 1; transform: none; }

/* Safety: never animate/hide under reduced motion, even if html.js is present */
@media (prefers-reduced-motion: reduce) {
  .js .section-head, .js .about-media, .js .about-card,
  .js .rooms-frame,
  .js .assurance-line, .js .assurance-chips,
  .js .pillar, .js .team-card, .js .article-card,
  .js .contact-panel, .js .faq, .js .footer-inner,
  .js .pkg-group, .js .pkg-info,
  .js .legal-toc, .js .legal-section {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ===========================================================
   ABOUT · מי אני? (owner bio)
   Reuses .about-grid/.about-media/.about-card (reveal-wired); all rules are
   scoped under .about-me so they override the legacy About block by specificity.
   Mobile-first: base = stacked, min-width:821px = two columns.
   =========================================================== */
/* section: warm cream backdrop + soft decorative blocks so it never reads as bare white */
/* About Area — sand band with large soft warm blocks, so the bio never floats on white */
.about-me { position: relative; overflow: clip; background: var(--seam), linear-gradient(165deg, var(--body-bg) 0%, var(--terracotta) 100%); }

/* Title breathing room, scoped to About so no other .section-head shifts. The shared rule
   sets margin-top: --sp-2 (.75rem), which was tuned for the tighter serif heads; the
   semibold grotesk needs more air above it to stop the badge and title reading as one
   clotted block. --sp-3 (1.15rem) separates them without opening a gap. */
.about-me .section-head h2 { margin-top: var(--sp-3); }
.about-me::before, .about-me::after {
  content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
}
.about-me::before {
  inset-inline-start: -8%; inset-block-start: -12%; width: 46%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--warm-core) 0%, rgba(235,217,180,0) 70%); opacity: .65;
}
.about-me::after {
  inset-inline-end: -10%; inset-block-end: -14%; width: 52%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--sage-band) 0%, rgba(201,216,204,0) 72%); opacity: .9;
}
.about-me .container { position: relative; z-index: 1; }

.about-me .about-grid {
  display: grid; grid-template-columns: 1fr; align-items: start;
  gap: clamp(1.75rem, 5vw, 2.75rem);
}

/* media: framed photo + a canvas-design art panel peeking out behind its top corner */
.about-me .about-media { position: relative; width: min(100%, 30rem); margin-inline: auto; }
.about-me .about-portrait {
  position: relative; z-index: 1; aspect-ratio: 4 / 5; margin: 0;
  border-radius: 18px; border: 1px solid var(--mat-edge);
  /* framed like the gallery prints: gilt fillet, cream reveal, forest hairline, then the
     frame shadow ramp. The portrait and the room photos now read as one hung set. */
  box-shadow:
    inset 0 0 0 1px var(--mat-fillet),
    inset 0 0 0 2px rgba(255,255,255,.50),
    var(--shadow-frame);
  /* layered: real photo (if present) → art panel → warm gradient base, so the card
     always reads as a designed warm surface even before a photo is dropped in */
  background-image: url("about-lilach.jpg"), url("about-art.png"),
    linear-gradient(155deg, var(--warm-core) 0%, var(--accent-soft) 55%, var(--surface) 100%);
  background-size: cover, cover, cover;
  background-position: center top, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
.about-me .about-art-panel {
  position: absolute; z-index: 0; inset-block-start: -1.15rem; inset-inline-start: -1.15rem;
  width: 55%; aspect-ratio: 4 / 5; border-radius: var(--radius); opacity: .9;
  background: url("about-art.png") center / cover no-repeat; border: 1px solid var(--hairline);
}

/* ---- THE NAME — a real heading opening the intro card, so it reads as one designed
   unit paired with the photo (not a stray paragraph beside it). ---- */
.about-me .about-name {
  font-family: var(--font-head); font-weight: 700; color: var(--heading);
  font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.15;
  margin: 0 0 1.1rem;
}
/* THE LEAD — the opening sentence, and only ever the opening sentence. Emphasis lives in
   the TEXT, not a container: a richer ink (the deepest forest tone in the palette, one
   step past the plain heading colour) and a touch more weight than the body paragraph
   below it, with slightly wider leading so neither reads as cramped. */
.about-me .about-lead {
  font-family: var(--font-body);           /* Heebo */
  font-weight: 500;                        /* one step above the 400 body weight below it */
  font-size: 1.19rem;                      /* ~19px against the 17.6px body */
  line-height: 1.85;
  color: var(--text-emphasis);
  letter-spacing: .003em;                  /* a hair of openness at the heavier weight/colour */
}

/* ---- BIO DETAIL — a card grid instead of one long scrolling column. Each named
   sub-section (community, credentials, practice, the book) is its own card, so the
   section reads as organized, feature-card content rather than stacked blog copy;
   2 columns on desktop keeps it compact, single column on mobile. ---- */
.about-me .about-sections {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  margin-block-start: clamp(2.25rem, 5vw, 3.25rem);
}
.about-me .about-card {
  background: var(--card-bg); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 3.2vw, 2.1rem);
  font-family: var(--font-body); font-weight: 400;
  font-size: 1.0625rem; line-height: 1.8; color: var(--text);
  transition: transform .25s cubic-bezier(.22,.61,.28,1), box-shadow .25s ease;
}
.about-me .about-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.about-me .about-card bdi { font-weight: 500; unicode-bidi: isolate; }
.about-me .about-card > p + p { margin-block-start: 1.2rem; }
/* icon chip (reuses .ci, the contact-list icon language) + heading, on one row, so each
   card opens with a small emblem instead of reading as a plain text excerpt */
.about-me .about-card-head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.1rem; }
.about-me .about-card-icon { flex: none; }
/* the intro card's second heading (community/team) sits below her name + opening lines
   in the same card — a hairline + top space marks it as its own part without a second
   full card border, so the merged card still reads as one connected unit. */
.about-me .about-card-head--sub {
  margin-top: 1.9rem; padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
}
/* A short sage underline — the site's "elegant underline" move — under each heading,
   without competing with the page's own centred h2 ornament above the whole section. */
.about-me .about-card h3 {
  display: inline-block;
  font-size: clamp(1.1rem, 2vw, 1.24rem); line-height: 1.3;
  margin: 0;
  padding-bottom: .3rem;
  border-bottom: 2px solid var(--secondary);
}
/* the lecture title nested under "the book" card — one step quieter than the h3 above
   it (no underline), so it reads as a detail inside that section, not a new one */
.about-me .about-card h4 {
  font-size: 1.02rem; line-height: 1.4;
  color: var(--accent-text);
  margin: 1.3rem 0 .55rem;
}
.about-me .about-card > p.about-links {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-block-start: 1.4rem;
}
/* THE SIGNATURE CARD — her personal story is the one emotional highlight in this grid,
   so it's the one place that gets a warm wash instead of flat white, per "spend the
   boldness in one place." Everything else in the grid stays quiet by comparison. */
.about-me .about-card--story {
  background: linear-gradient(155deg, #FFFFFF 0%, var(--page-bg-alt) 130%);
}

@media (min-width: 821px) {
  .about-me .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
  .about-me .about-media { width: auto; margin-inline: 0; }
  .about-me .about-sections { grid-template-columns: repeat(2, 1fr); }
  /* the book/lecture card carries the most content (and the two link buttons), so it
     spans the full row instead of forcing a tall, lopsided pair with its neighbour */
  .about-me .about-card--story { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .about-me .about-art-panel { display: none; }   /* clean stack on small screens */
}

/* ===========================================================
   PACKAGES · החבילות שלנו — pricing/room-rental page
   Mobile-first: base = stacked, min-width:821px = image + cards side-by-side.
   Uses the .text-* type system (Heebo body/emphasis, Assistant titles).
   =========================================================== */
/* The pricing band runs sage→cream, matching Rooms and Contact. It used to be a solid
   forest stage; between it, Contact and the footer the site carried three near-black
   blocks and read heavy. Price cards already bring their own tier colours, so the band
   underneath is better as a light, calm field than as a competing dark one. */
.packages {
  position: relative; overflow: clip;
  background: linear-gradient(180deg, var(--sage-band) 0%, var(--body-bg) 78%);
}
.packages::before, .packages::after {
  content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
}
.packages::before {
  inset-inline-end: -9%; inset-block-start: -10%; width: 46%; aspect-ratio: 1;
  background: radial-gradient(circle, #FFFFFF 0%, rgba(255,255,255,0) 72%); opacity: .55;
}
.packages::after {
  inset-inline-start: -10%; inset-block-end: -12%; width: 52%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--warm-core) 0%, rgba(241,228,221,0) 70%); opacity: .8;
}
.packages .container { position: relative; z-index: 1; }
.packages .section-head h2 { color: var(--heading); }
.packages-intro { max-width: 44rem; margin-inline: auto; text-align: center; color: var(--text); }

/* ---- PRICE MENU — three rental rhythms (fixed weekly shift / flexible hours / workshop)
   instead of six identical cards. No tier is emphasised: every panel shares one surface,
   one type scale and one price treatment, so the visitor compares options, not badges.
   Desktop: each panel is [intro | price list]; mobile: the intro stacks above its list. ---- */
.pkg-menu {
  display: grid; gap: clamp(1rem, 2.4vw, 1.4rem);
  max-width: 60rem; margin: clamp(2rem, 5vw, 3rem) auto 0;
}
.pkg-group {
  --tint: var(--sage-band); --tint-deep: var(--sage-deep);
  display: grid; grid-template-columns: 1fr; overflow: hidden;
  background: #FFFFFF; border: 1px solid var(--card-border); border-radius: 20px;
  box-shadow: 0 10px 30px -12px rgba(23,59,43,.14);
  transition: box-shadow .3s ease, transform .3s cubic-bezier(.22,.61,.28,1);
}
.pkg-group:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(23,59,43,.2); }
/* each rhythm gets its own palette wash, so the page has colour without any single option
   being singled out — all three are equally "dressed" */
.pkg-group--sage  { --tint: #DCE6DA; --tint-deep: #C9D8CC; }
.pkg-group--rose  { --tint: #F3E6E1; --tint-deep: #EAD8D2; }
.pkg-group--cream { --tint: #FAF6EE; --tint-deep: #F1E8D8; }

/* the intro side of the panel — a tinted block, not empty white */
.pkg-group-head {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: .95rem; align-items: center; align-content: start;
  padding: clamp(1.3rem, 3vw, 1.9rem) clamp(1.3rem, 3.4vw, 2rem);
  background: linear-gradient(160deg, var(--tint) 0%, var(--tint-deep) 100%);
}
.pkg-group-title, .pkg-group-lede, .pkg-group-tag { grid-column: 2; }
/* THE SIGNATURE — a small open doorway (the product is a room you walk into), drawn once in
   sage and repeated identically on every panel, set in a white chip on the tinted block. */
.pkg-arch-chip {
  grid-column: 1; grid-row: 1 / span 3; align-self: start;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
  background: #FFFFFF; border: 1px solid rgba(23,59,43,.14);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 6px 14px -8px rgba(23,59,43,.35);
}
.pkg-arch {
  width: 22px; height: 32px;
  fill: none; stroke: var(--accent-mid); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.pkg-group-title {
  font-family: var(--font-head); font-weight: 700; color: var(--heading);
  font-size: clamp(1.3rem, 2.4vw, 1.55rem); line-height: 1.2; margin: 0;
}
.pkg-group-lede { margin: .35rem 0 0; font-size: .95rem; line-height: 1.6; color: var(--text); }
.pkg-group-tag {
  justify-self: start; margin-top: .8rem;
  font-family: var(--font-body); font-weight: 500; font-size: .8rem; letter-spacing: .02em;
  color: var(--accent-mid); background: rgba(255,255,255,.72);
  border: 1px solid rgba(23,59,43,.14); border-radius: var(--radius-pill);
  padding: .3rem .8rem;
}

.pkg-rows { list-style: none; margin: 0; padding: clamp(.6rem, 2vw, 1rem) clamp(.8rem, 2.4vw, 1.4rem); }
.pkg-row {
  display: grid; grid-template-columns: minmax(0, auto) minmax(1.5rem, 1fr) auto; align-items: center; gap: .9rem;
  padding: .95rem clamp(.6rem, 1.6vw, 1rem); border-radius: 14px;
  transition: background-color .2s ease;
}
.pkg-row + .pkg-row { border-top: 1px solid rgba(23,59,43,.07); }
.pkg-row:hover { background: color-mix(in srgb, var(--tint) 45%, #FFFFFF); }
/* dotted leader — the classic price-list line that carries the eye from the option to its price */
.pkg-leader { align-self: center; height: 0; border-bottom: 2px dotted rgba(121,145,132,.45); transform: translateY(.35rem); }
.pkg-row-name {
  font-family: var(--font-head); font-weight: 700; color: var(--heading);
  font-size: 1.12rem; line-height: 1.3; margin: 0; letter-spacing: 0;
}
.pkg-row-detail { margin: .2rem 0 0; font-size: .92rem; line-height: 1.5; color: var(--muted); }
/* price block sits at the row's far (left) edge: amount + ₪ kept together in an LTR <bdi>,
   the unit ("לחודש") as a quiet line beneath — the number is what the eye scans for. */
.pkg-row-price {
  display: flex; flex-direction: column; align-items: flex-end; margin: 0; text-align: end;
  color: var(--heading); line-height: 1;
}
.pkg-amount {
  font-family: var(--font-head); font-weight: 800; font-size: clamp(1.75rem, 3.2vw, 2.1rem);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pkg-cur { font-size: .58em; font-weight: 700; color: var(--secondary-deep); margin-inline-start: .15em; }
.pkg-unit { margin-top: .35rem; font-size: .8rem; font-weight: 500; color: var(--muted); }
/* VAT note under the flexible-hours prices — a whisper, not a label: smaller, lighter,
   slightly tracked, with a hairline above it so it reads as a footnote to the number. */
.pkg-unit--vat {
  margin-top: .45rem; padding-top: .3rem;
  font-size: .72rem; font-weight: 400; letter-spacing: .02em; white-space: nowrap;
  color: color-mix(in srgb, var(--muted) 82%, transparent);
  border-top: 1px solid rgba(23,59,43,.12);
}

@media (min-width: 761px) {
  .pkg-group { grid-template-columns: 17rem minmax(0, 1fr); }
  .pkg-rows { align-self: center; }
}

/* ---- shared call to action — one pair of buttons for the whole page instead of six ---- */
.pkg-cta {
  display: flex; flex-direction: column; align-items: center; gap: .9rem; text-align: center;
  padding: clamp(1.4rem, 3vw, 1.9rem) 1.25rem;
  border-radius: 20px; background: linear-gradient(165deg, #FFFFFF 0%, var(--sage-band) 140%);
  border: 1px solid var(--card-border);
}
.pkg-cta-text { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; color: var(--heading); }
.pkg-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

/* ---- notes + reference image row ---- */
/* single "טוב לדעת" card, centred on the same measure as the notes it holds — recoloured off
   the plain cream .card default to the same warm sand the pricing cards now use, so it reads
   as part of the same set instead of falling back to the paler shared card style. */
.pkg-info {
  margin-top: clamp(2rem, 4.5vw, 3rem);
  display: grid; grid-template-columns: min(100%, 60rem); justify-content: center;
  gap: clamp(1rem, 2.4vw, 1.4rem); align-items: start;
}
/* "טוב לדעת" — recomposed as a small titled panel (icon badge + heading + gold rule)
   sitting above a two-column fact list, so it reads as a considered reference card
   rather than a leftover afterthought below the pricing grid. */
.pkg-notes-card {
  padding: clamp(1.9rem, 3.2vw, 2.5rem) clamp(1.8rem, 3vw, 2.5rem);
  background: linear-gradient(165deg, #FFFFFF 0%, var(--page-bg-alt) 150%);
  border: 1px solid var(--card-border); border-radius: 20px;
  box-shadow: 0 6px 24px rgba(23,59,43,.05);
}
/* A small icon medallion sits inline before the heading — a self-contained CSS badge
   (no markup change needed) instead of a separate gold rule underneath. */
.pkg-notes-card h3 {
  display: flex; align-items: center; gap: .65rem; margin: 0 0 1.2rem;
}
.pkg-notes-card h3::before {
  content: ""; flex: none; width: 2.15rem; height: 2.15rem; border-radius: 50%;
  background-color: var(--warm-core);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C5831' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 60%;
  border: 1px solid rgba(23,59,43,.4);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.9), var(--shadow-sm);
}
.pkg-notes-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .75rem 1.5rem;
}
@media (min-width: 640px) {
  .pkg-notes-list { grid-template-columns: 1fr 1fr; }
}
.pkg-notes-list li {
  position: relative; padding-inline-start: 1.85rem; font-size: .95rem; color: var(--text); line-height: 1.55;
}
/* A small sage check-medallion replaces the plain bullet — same "confirmed detail" reading
   as a checklist, at the scale of a bullet rather than a full icon. */
.pkg-notes-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .1em;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background-color: var(--secondary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 13 10 18 19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 58%;
  box-shadow: 0 2px 6px -2px rgba(23,59,43,.3);
}
.pkg-note-key { font-weight: 700; color: var(--warm-deep); }
.pkg-parking {
  display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0 0; padding: .95rem 1.2rem;
  border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--warm-core) 0%, #FBF0D8 100%);
  border: 1px solid rgba(23,59,43,.35);
  color: var(--heading); font-size: .95rem; line-height: 1.4; box-shadow: var(--shadow-sm);
}
/* .pkg-parking-icon is the <svg> itself (no wrapper element) — sized as a padded box so the
   background circle reads as a small medallion around the glyph. */
.pkg-parking-icon {
  flex: none; width: 2rem; height: 2rem; padding: .4rem; box-sizing: border-box;
  border-radius: 50%; background: rgba(255,255,255,.55); color: var(--warm-deep);
}
.pkg-parking strong { font-weight: 700; color: var(--warm-deep); }

/* ---- lead form ---- */
/* Sage-tinted, matching the pricing tier's cooler surface, so notes (gold) and lead (sage)
   visually pair as the section's two "supporting" plates around the pricing grid. */
.pkg-lead {
  margin: clamp(2rem, 5vw, 3rem) auto 0; max-width: 34rem;
  background: linear-gradient(165deg, var(--sage-band) 0%, #FFFFFF 68%);
  border: 1px solid rgba(121,145,132,.42); border-radius: var(--radius-lg);
  padding: clamp(1.7rem, 3vw, 2.35rem); box-shadow: var(--shadow-card);
}
.pkg-lead-head { text-align: center; margin-bottom: 1.25rem; }
.pkg-lead-head h3 { margin: 0 0 .35rem; }
.pkg-lead-head p { margin: 0; color: var(--muted); font-size: .95rem; }
.pkg-form { display: flex; flex-direction: column; gap: 1rem; }



/* ===========================================================
   ATMOSPHERE LAYER
   Five additions that share one idea: the page is a warm printed sheet with light
   moving over it. Nothing here changes a layout property, and every motion piece is
   switched off in the reduced-motion block at the end of this file.
   =========================================================== */

/* 1 · (removed) PAPER GRAIN and 2 · (removed) AMBIENT DRIFT — a fixed full-screen noise
   filter layered over the whole page, plus ten large glow blobs animating forever. At
   5% opacity and over 47-61s cycles neither was visible to a visitor, but both kept the
   GPU compositing on every scroll frame, which is what made scrolling stutter. The glow
   blobs stay as static decoration. */

/* 3 · POINTER SPOTLIGHT — a soft warm light that follows the cursor across a card. The
   position comes from --px/--py, written by one throttled listener in main.js; the
   gradient is painted by a pseudo-element that only fades in on hover, so a card at rest
   is byte-identical to before. --edge-start carries "the reading edge" because gradient
   directions have no logical-property equivalent in RTL.
   .rooms-slide is deliberately NOT a .card — the carousel photos stay untouched. */
:root { --edge-start: right; }
.card { position: relative; isolation: isolate; }
.card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(22rem circle at var(--px, 50%) var(--py, 0%),
              rgba(23,59,43,.16), rgba(23,59,43,.05) 42%, rgba(23,59,43,0) 68%);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover::after { opacity: 1; }
}

/* 4 · (removed) DROP CAP — the About lead used to open with a floated gradient ::first-letter.
   It read as an ornament dropped onto a professional bio rather than as part of it, so the whole
   rule and its @supports fallback are gone and the paragraph is back in plain flow. Nothing else
   depended on it: no text-indent, no hanging-punctuation and no float clearing existed to serve
   it. The lead's own size/weight step lives with the rest of the About type, further up. */

/* 5 · SCROLL-DRIVEN CHROME — a reading-progress hairline and a return-to-top pill, both
   driven entirely by a scroll timeline. No JS, no scroll listener, nothing to throttle;
   browsers without scroll-driven animations simply never show either element (the
   @supports gate), which is a clean absence rather than a broken control. */
.read-progress, .to-top { display: none; }
@supports (animation-timeline: scroll()) {
  .read-progress {
    display: block; position: fixed; inset-block-start: 0; inset-inline: 0; height: 2px;
    z-index: 120; pointer-events: none; transform-origin: var(--edge-start) center;
    background: linear-gradient(to left, var(--secondary), var(--warm) 62%, var(--warm-glow));
    scale: 0 1;
    animation: read-progress linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes read-progress { from { scale: 0 1; } to { scale: 1 1; } }

  .to-top {
    display: grid; place-items: center;
    position: fixed; inset-block-end: clamp(1rem, 3vw, 1.6rem); inset-inline-start: clamp(1rem, 3vw, 1.6rem);
    z-index: 110; width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(180deg, var(--btn-green-hover) 0%, var(--btn-green) 60%, var(--btn-green-deep) 100%);
    color: #FFFFFF; border: 1px solid rgba(23,59,43,.30);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 8px 22px -8px rgba(23,59,43,.40);
    transition: transform .22s cubic-bezier(.22,.61,.28,1), box-shadow .26s ease;
    /* fades in over the first screen of scrolling, then stays */
    opacity: 0; visibility: hidden;
    animation: to-top-in linear both;
    animation-timeline: scroll(root block);
    animation-range: 60vh 130vh;
  }
  @keyframes to-top-in {
    from { opacity: 0; visibility: hidden; transform: translateY(8px) scale(.9); }
    to   { opacity: 1; visibility: visible; transform: none; }
  }
  .to-top:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 12px 28px -8px rgba(23,59,43,.62); }
  .to-top svg { width: 20px; height: 20px; }
}

/* ===========================================================
   LEGAL DOCUMENT PAGE (תקנון) — a long numbered agreement rendered as clickable
   in-page sections. Built entirely from existing tokens (card, hairline, accent,
   warm) so it reads as this site's own page, not an imported document. narrow
   container (already used by accessibility.html) keeps Hebrew line length readable.
   =========================================================== */
.legal-meta {
  color: var(--muted); font-size: .92rem; line-height: 1.7;
  margin: -.4rem 0 1.75rem; text-align: center;
}
.legal-doc-title {
  text-align: center; margin: 0 0 2rem;
  font-family: var(--font-head); font-weight: 700; color: var(--heading);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
}
/* Table of contents — a small card of anchor links, same surface language as every
   other card on the site, so it reads as a designed component rather than a raw list. */
.legal-toc {
  margin: 0 0 clamp(2.25rem, 4vw, 3rem);
}
.legal-toc h3 {
  margin: 0 0 1rem; font-size: 1.05rem;
  display: flex; align-items: center; gap: .55rem;
}
.legal-toc h3::before {
  content: ""; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background-color: var(--accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A5245' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='20' y2='6'/%3E%3Cline x1='8' y1='12' x2='20' y2='12'/%3E%3Cline x1='8' y1='18' x2='20' y2='18'/%3E%3Cline x1='4' y1='6' x2='4' y2='6'/%3E%3Cline x1='4' y1='12' x2='4' y2='12'/%3E%3Cline x1='4' y1='18' x2='4' y2='18'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 58%;
  border: 1px solid rgba(23,59,43,.35);
}
.legal-toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.legal-toc-list a {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .8rem; border-radius: var(--radius-sm);
  color: var(--text); font-weight: 500; font-size: .98rem;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.legal-toc-list a::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--secondary);
}
.legal-toc-list a:hover {
  background: var(--accent-soft); color: var(--accent); transform: translateX(-2px);
}
html[dir="rtl"] .legal-toc-list a:hover { transform: translateX(2px); }
/* Numbered sections — h3 headings double as scroll anchors (scroll-margin clears the
   fixed floating header so :target/anchor jumps never land under it). */
.legal-section {
  margin: 0 0 clamp(2.25rem, 4vw, 3rem);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.legal-section:last-of-type { margin-bottom: 0; }
.legal-section h3 {
  font-size: 1.28rem; margin: 0 0 1rem;
  padding-bottom: .7rem; border-bottom: 1px solid var(--line-soft);
}
/* Custom counters instead of the browser default — a small gold-ringed numeral chip per
   item, matching the pip/medallion language used for icons everywhere else on the site. */
.legal-list {
  list-style: none; margin: 0; padding: 0; counter-reset: legal-item;
  display: grid; gap: .9rem;
}
.legal-list > li {
  counter-increment: legal-item;
  position: relative; padding-inline-start: 2.35rem;
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.8; color: var(--text);
}
.legal-list > li::before {
  content: counter(legal-item);
  position: absolute; inset-inline-start: 0; inset-block-start: .1em;
  width: 1.65rem; height: 1.65rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-body); font-size: .82rem; font-weight: 700;
  color: var(--accent-text); background: var(--accent-soft);
  border: 1px solid rgba(23,59,43,.4);
}
/* A definition/consent aside — the same warm-cream note treatment already used for the
   packages page's parking note, reused here for the two short standalone paragraphs
   (the "ססיה קבועה" definition and the final consent line). */
.legal-note {
  margin-top: 1.1rem; padding: .95rem 1.2rem;
  border-radius: var(--radius-sm); background: var(--warm-core);
  border: 1px solid rgba(23,59,43,.35);
  color: var(--heading); font-size: .98rem; line-height: 1.6;
}
.legal-note strong { color: var(--warm-deep); }
/* Renter details — the signed form fields at the foot of the printed agreement, kept as
   plain labelled blanks (not live inputs): this is a published copy of a paper contract,
   not a signing flow. */
.legal-fields {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
.legal-field { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.legal-field-label { font-weight: 600; color: var(--heading); flex: none; }
.legal-field-blank {
  flex: 1 1 8rem; min-width: 6rem; border-bottom: 1px solid var(--hairline);
  min-height: 1.4em;
}
@media (min-width: 620px) {
  .legal-fields { grid-template-columns: 1fr 1fr; }
}

/* NagishLi accessibility widget — the real 16px/16px offset + z-index now live in the
   plugin's own positions.BL string (assets/vendor/nagishli/nagishli.js), since it writes
   inline `inset`/`position` with !important that no external stylesheet rule can outrank.
   This is just a defensive fallback matching those same values. */
#NagishLiBar {
  left: 16px !important;
  right: auto !important;
  bottom: 16px !important;
  z-index: 999999 !important;
}

/* ===========================================================
   ACCESSIBILITY BUTTON — custom trigger for the existing NagishLi widget
   Round blue button with the accessibility symbol and a small white check badge,
   bottom-left on every screen size. NagishLi's own collapsed strip is hidden only
   once main.js has confirmed the widget loaded (html.nl-custom-ready).
   =========================================================== */
.a11y-fab {
  --fab: 60px;
  position: fixed; left: 16px; bottom: 16px; z-index: 999998;
  display: grid; place-items: center;
  width: var(--fab); height: var(--fab); padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  color: #FFFFFF;
  background: radial-gradient(circle at 35% 30%, #5AA6DE 0%, #3A8DD0 55%, #2F7DBF 100%);
  box-shadow: 0 8px 22px -6px rgba(31,94,150,.55), 0 2px 6px rgba(31,94,150,.25), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.a11y-fab[hidden] { display: none; }
.a11y-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 28px -6px rgba(31,94,150,.6), 0 3px 8px rgba(31,94,150,.28), inset 0 1px 0 rgba(255,255,255,.25); }
.a11y-fab:active { transform: scale(.96); }
.a11y-fab:focus-visible { outline: 3px solid #173B2B; outline-offset: 3px; }
.a11y-fab-icon { width: 62%; height: 62%; }
.a11y-fab-badge {
  position: absolute; top: -3px; right: -5px;
  display: grid; place-items: center;
  width: 42%; height: 42%; border-radius: 50%;
  background: #FFFFFF; color: #3A8DD0;
  box-shadow: 0 2px 6px rgba(31,94,150,.3);
}
.a11y-fab-badge svg { width: 72%; height: 72%; }

/* tablet / mobile: a touch smaller, still a comfortable 48px+ tap target */
@media (max-width: 1024px) { .a11y-fab { --fab: 56px; } }
@media (max-width: 560px)  { .a11y-fab { --fab: 52px; left: 12px; bottom: 12px; } }

/* hide NagishLi's original collapsed strip — only after the new button is wired */
html.nl-custom-ready:not(.nl-open) #NagishLiBarStrip { visibility: hidden; pointer-events: none; }
/* NagishLi writes an inline visibility:visible on its "move" arrows, so hide descendants too */
html.nl-custom-ready:not(.nl-open) #NagishLiBarStrip * { visibility: hidden !important; pointer-events: none !important; }
/* the (now empty) bar box itself sits above the button — let clicks fall through to it */
html.nl-custom-ready:not(.nl-open) #NagishLiBar { pointer-events: none; }
/* while the menu is open, lift NagishLi's panel so it sits above the new button,
   which stays visible and closes it */
html.nl-custom-ready #NagishLiBar { transition: transform .2s ease; }
html.nl-custom-ready.nl-open #NagishLiBar { transform: translateY(calc(-1 * (60px + 12px))); }
@media (max-width: 1024px) { html.nl-custom-ready.nl-open #NagishLiBar { transform: translateY(calc(-1 * (56px + 12px))); } }
@media (max-width: 560px)  { html.nl-custom-ready.nl-open #NagishLiBar { transform: translateY(calc(-1 * (52px + 10px))); } }
@media (prefers-reduced-motion: reduce) { .a11y-fab, html.nl-custom-ready #NagishLiBar { transition: none; } }

/* Accessibility statement (uses the .legal-* layout of takanon.html) — owner placeholders
   and in-text links */
.legal-section mark { background: #FFF1B8; color: var(--text); padding: .05em .3em; border-radius: 4px; }
.legal-section a { color: var(--accent-mid); text-decoration: underline; text-underline-offset: .2em; }
.legal-section > p + p, .legal-section > p + .legal-list, .legal-section > .legal-list + p { margin-top: .9rem; }

/* ===========================================================
   ACCESSIBILITY MENU THEME — NagishLi's panel restyled to match the new button:
   light blue + white, soft rounded panel. Colours/shape only; every NagishLi option,
   label and behaviour is untouched. Selectors mirror NagishLi's own (which are all
   !important) with an extra html class so these win on specificity.
   =========================================================== */
html.nl-custom-ready nagishli#NagishLiTag > #NagishLiBar {
  --nl-blue: #3A8DD0; --nl-blue-deep: #1F5E96; --nl-sky: #EAF4FC; --nl-line: #DCEAF6;
  filter: drop-shadow(0 14px 30px rgba(31,94,150,.22)) drop-shadow(0 2px 6px rgba(31,94,150,.14));
}
/* header — same blue gradient as the round button */
html.nl-custom-ready nagishli#NagishLiTag > #NagishLiBar > #NagishLiBarStrip {
  background: linear-gradient(135deg, #5AA6DE 0%, #3A8DD0 60%, #2F7DBF 100%) !important;
  color: #FFFFFF !important; text-shadow: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25) !important;
  border-radius: 16px 16px 0 0 !important;
  font-family: var(--font-body) !important; font-weight: 700 !important;
}
/* header icons (logo, collapse-all, move arrows) turn white on the blue header */
html.nl-custom-ready nagishli#NagishLiTag > #NagishLiBar > #NagishLiBarStrip #NagishLiLogo,
html.nl-custom-ready nagishli#NagishLiTag > #NagishLiBar > #NagishLiBarStrip #NagishLiToggleMenus,
html.nl-custom-ready nagishli#NagishLiTag > #NagishLiBar > #NagishLiBarStrip #NagishLiMove > span {
  filter: brightness(0) invert(1);
}
html.nl-custom-ready nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus {
  background: #FFFFFF !important;
  border-radius: 0 0 16px 16px !important;
  scrollbar-color: #3A8DD0 #EAF4FC !important;
}
/* section rows — white with deep-blue titles and a hairline between them */
html.nl-custom-ready nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus > .nl-dropdown > .nl-dropdown-toggle {
  background: #FFFFFF !important; color: #1F5E96 !important; text-shadow: none !important;
  box-shadow: inset 0 -1px 0 #DCEAF6 !important;
  font-family: var(--font-body) !important; font-weight: 500 !important;
  transition: background-color .15s ease;
}
html.nl-custom-ready nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus > .nl-dropdown > .nl-dropdown-toggle:hover {
  background: #F2F8FE !important;
}
html.nl-custom-ready nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus > .nl-dropdown > .nl-dropdown-toggle.open {
  background: #EAF4FC !important; color: #174E80 !important;
  box-shadow: inset 4px 0 0 #3A8DD0, inset 0 -1px 0 #DCEAF6 !important;
}
html.nl-custom-ready nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus > .nl-dropdown > .nl-dropdown-toggle .nl-dropdown-title,
html.nl-custom-ready nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus > .nl-dropdown > .nl-dropdown-toggle .nl-dropdown-arrow {
  color: inherit !important; text-shadow: none !important;
}
html.nl-custom-ready nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus > .nl-dropdown > .nl-dropdown-toggle .nl-dropdown-arrow { color: #3A8DD0 !important; }
/* options inside an open section — pale sky tint */
html.nl-custom-ready nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus > .nl-dropdown > .nl-dropdown-menu > li > div,
html.nl-custom-ready nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus > .nl-dropdown:last-child > .nl-dropdown-menu > li:last-child > div {
  background: #F7FBFF !important; color: #2E4A63 !important; text-shadow: none !important;
  border-color: #EAF4FC !important;
  box-shadow: inset 0 -1px 0 #E4EEF7 !important;
  font-family: var(--font-body) !important;
}
html.nl-custom-ready nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus > .nl-dropdown > .nl-dropdown-menu > li > div:hover {
  background: #E6F2FC !important; color: #1F5E96 !important;
}
html.nl-custom-ready nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus > .nl-dropdown > .nl-dropdown-menu > li.not-clickable > div:hover {
  background: #F7FBFF !important;
}
/* the section chevrons are white sprite images — tint them to the panel blue */
html.nl-custom-ready nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus > .nl-dropdown > .nl-dropdown-toggle .nl-dropdown-arrow {
  filter: brightness(0) saturate(100%) invert(47%) sepia(62%) saturate(640%) hue-rotate(174deg) brightness(92%);
}
/* never let the lifted panel run off the top of a short screen — it scrolls inside instead */
html.nl-custom-ready.nl-open nagishli#NagishLiTag > #NagishLiBar > #NagishLiMenus {
  max-height: calc(100vh - 160px) !important; max-height: calc(100dvh - 160px) !important;
}

/* ===========================================================
   PAGE TRANSITIONS — between index / packages / takanon / accessibility.
   Native cross-document View Transitions (no library). PERFORMANCE RULE: only opacity and
   transform are animated — both run on the GPU compositor, so the animation stays smooth
   even while the incoming page is still busy on the main thread (fonts, the accessibility
   plugin). clip-path / filter animations were tried and dropped: they repaint every frame
   on the main thread and stuttered badly during the page load.
   The floating navbar stays put (its own named group, same place on every page) while the
   page underneath glides: the old page lifts away and fades, the new one settles up into
   place. Browsers without support get a light fade from assets/main.js. Reduced motion:
   no animation at all.
   =========================================================== */
@view-transition { navigation: auto; }

.site-header { view-transition-name: site-header; }

::view-transition-old(root) {
  animation: pt-out .24s cubic-bezier(.4,0,1,1) both;
}
::view-transition-new(root) {
  animation: pt-in .46s cubic-bezier(.22,.61,.28,1) .06s both;
}
::view-transition-group(site-header) { animation-duration: .36s; animation-timing-function: cubic-bezier(.22,.61,.28,1); }
::view-transition-old(site-header), ::view-transition-new(site-header) { animation-duration: .2s; }

@keyframes pt-out {
  to { opacity: 0; transform: translate3d(0,-12px,0); }
}
@keyframes pt-in {
  from { opacity: 0; transform: translate3d(0,22px,0); }
  to   { opacity: 1; transform: none; }
}

/* The custom accessibility button appears only once NagishLi is wired (see main.js); fade
   it in rather than letting it pop, so arriving on a page never shows a sudden flash. */
.a11y-fab:not([hidden]) { animation: fab-in .35s ease both; }
@keyframes fab-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

/* Fallback (no View Transitions): assets/main.js adds .pt-leaving just before navigating */
html.pt-leaving body {
  opacity: 0; transform: translate3d(0,-8px,0);
  transition: opacity .22s ease, transform .24s ease;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html.pt-leaving body { transition: none; }
  .a11y-fab:not([hidden]) { animation: none; }
}

/* ===========================================================
   ABOUT · therapy invitation (under the portrait) + shared card finish
   The invitation is a regular .about-card (same surface, icon chip and underlined heading
   as its neighbours), so it belongs to the grid instead of shouting over it. Its content
   is structured, not decorated: topic chips, three numbered steps (a real sequence), and
   the page's booking-tier button.
   =========================================================== */
/* Shared finish for every About card: a soft sage hairline along the top edge that
   warms on hover — one quiet, consistent detail tying the whole block together. */
.about-me .about-card { position: relative; overflow: hidden; }
.about-me .about-card::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg, rgba(121,145,132,0) 0%, rgba(121,145,132,.55) 50%, rgba(121,145,132,0) 100%);
  opacity: .7; transition: opacity .3s ease;
}
.about-me .about-card:hover::before { opacity: 1; }
.about-me .about-card-icon { transition: transform .3s cubic-bezier(.22,.61,.28,1); }
.about-me .about-card:hover .about-card-icon { transform: translateY(-1px) scale(1.04); }

.about-me .invite-card { margin-block-start: clamp(1.1rem, 2.4vw, 1.5rem); }
.about-me .invite-card .about-card-head { margin-bottom: .7rem; }
.about-me .invite-lead { margin: 0; color: var(--text); line-height: 1.7; }
.about-me .invite-btn { margin-block-start: 1.1rem; white-space: normal; text-wrap: balance; }

/* Symmetry: on desktop the photo + invitation column stretches to the intro card's height,
   the photo absorbing the difference, so both columns start and end on the same lines. */
@media (min-width: 821px) {
  .about-me .about-grid { align-items: stretch; }
  .about-me .about-media { display: flex; flex-direction: column; }
  .about-me .about-portrait { flex: 1 1 auto; aspect-ratio: auto; min-height: 340px; }
}

/* ===========================================================
   ABOUT · "נשואה לפשע" — the book cover in the story card
   Floated to the card's top-left (inline-end in RTL), so the opening paragraphs wrap down
   its right side and the rest of the story returns to full width below it. Styled as a
   physical book: a spine shading on its binding edge and a soft cast shadow.
   =========================================================== */
.about-me .story-book {
  float: left;                                /* = inline-end in this RTL page */
  width: clamp(118px, 22%, 196px);
  margin: .2rem clamp(1.1rem, 3vw, 2.1rem) 1rem 0;  /* physical order: the gap is on the RIGHT, the text side */
  position: relative; border-radius: 4px 8px 8px 4px;
  box-shadow: 0 1px 2px rgba(15,42,30,.25), 0 14px 30px -10px rgba(15,42,30,.55), 0 30px 50px -30px rgba(15,42,30,.45);
  transform: rotate(-1.5deg);
  transition: transform .35s cubic-bezier(.22,.61,.28,1), box-shadow .35s ease;
}
.about-me .story-book img { display: block; width: 100%; height: auto; border-radius: inherit; }
/* spine: a darker band + a thin highlight on the binding (right) edge */
.about-me .story-book::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(270deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.08) 3.5%, rgba(255,255,255,.14) 5%, rgba(255,255,255,0) 9%);
}
.about-me .about-card--story:hover .story-book { transform: rotate(0deg) translateY(-3px); }
.about-me .about-card--story::after { content: ""; display: block; clear: both; }
@media (max-width: 560px) {
  .about-me .story-book { width: 34%; margin-right: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .about-me .story-book, .about-me .about-card--story:hover .story-book { transform: none; transition: none; }
}

/* "להרצאות הקרובות" — the card's one filled action, set apart from the two outline links:
   forest gradient, a ticket glyph, and an arrow that nudges forward (left, in RTL) on hover. */
.btn-lecture {
  padding: .6rem 1.35rem; min-height: 44px; font-size: .98rem; font-weight: 700;
  background: linear-gradient(150deg, var(--btn-green-hover) 0%, var(--btn-green) 55%, var(--btn-green-deep) 100%);
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 3px rgba(47,107,79,.12), 0 10px 22px -10px rgba(23,59,43,.55);
}
.btn-lecture:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 5px rgba(47,107,79,.16), 0 16px 30px -10px rgba(23,59,43,.65);
}
.btn-lecture .btn-arrow { width: 1em; height: 1em; flex: none; transition: transform .25s cubic-bezier(.22,.61,.28,1); }
.btn-lecture:hover .btn-arrow { transform: translateX(-3px); }
@media (prefers-reduced-motion: reduce) { .btn-lecture:hover, .btn-lecture:hover .btn-arrow { transform: none; } }

/* ===========================================================
   Intake sheet — a touch wider than the inquiry sheet (it asks more), and compact chip
   grids for the yes/no and age-range answers, reusing the same styled-radio pattern.
   =========================================================== */
.intake-sheet { width: min(100%, 31rem); }
.wa-chips { grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); gap: .5rem; }
.wa-chips--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 16rem; }
.wa-chip .wa-choice-box {
  min-height: 46px; padding: .5rem .7rem; justify-content: center; gap: .45rem;
  font-size: .95rem; white-space: nowrap;
}
.wa-chip .wa-choice-mark { width: 18px; height: 18px; }
.wa-chip .wa-choice-mark svg { width: 11px; height: 11px; }
.wa-chip .wa-choice-text { unicode-bidi: plaintext; }

/* ===========================================================
   ABOUT · colour identities for the cards
   Each card carries one tint from the site's own palette — sage, powder rose, warm cream —
   laid out as a checkerboard so no two neighbours share a colour:
     row 1: invitation (sage)  |  intro (cream)
     row 2: practice   (rose)  |  training (sage)
     row 3: the book story (cream → rose)
   The tint drives everything inside the card via two variables: a soft wash across the
   surface, the border, the top hairline, the icon chip and the heading underline.
   =========================================================== */
.about-me .about-card { --tint: #DCE6DA; --tint-deep: #5C6E63; --tint-ink: #35543F; }
.about-me .invite-card,
.about-me .about-card--training { --tint: #D5E2D6; --tint-deep: #56705F; --tint-ink: #2F5140; }
.about-me .about-card--intro,
.about-me .about-card--story    { --tint: #F1E6D2; --tint-deep: #9A7B4A; --tint-ink: #6E5530; }
.about-me .about-card--practice { --tint: #EFDCD5; --tint-deep: #9C6B5E; --tint-ink: #7A4B40; }

.about-me .about-card {
  background:
    radial-gradient(130% 80% at 100% 0%, color-mix(in srgb, var(--tint) 95%, transparent) 0%, transparent 65%),
    linear-gradient(170deg, color-mix(in srgb, var(--tint) 18%, #FFFFFF) 0%, color-mix(in srgb, var(--tint) 30%, #FFFFFF) 45%, color-mix(in srgb, var(--tint) 78%, #FFFFFF) 100%);
  border-color: color-mix(in srgb, var(--tint-deep) 30%, transparent);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 10px 30px -14px color-mix(in srgb, var(--tint-deep) 38%, transparent), 0 2px 6px rgba(23,59,43,.04);
}
.about-me .about-card:hover {
  box-shadow: inset 0 1px 0 #FFFFFF, 0 20px 40px -16px color-mix(in srgb, var(--tint-deep) 48%, transparent), 0 3px 8px rgba(23,59,43,.05);
}
/* the story card keeps its own warm-to-rose wash, now tied to the same system */
.about-me .about-card--story {
  background:
    radial-gradient(90% 90% at 0% 0%, rgba(239,220,213,.95) 0%, transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--tint) 25%, #FFFFFF) 0%, color-mix(in srgb, var(--tint) 85%, #FFFFFF) 100%);
}
.about-me .about-card::before {
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--tint-deep) 50%, transparent 100%);
  opacity: .65;
}
.about-me .about-card:hover::before { opacity: .8; }

/* icon chip: filled with the card's deep tint, glyph in white */
.about-me .about-card .about-card-icon {
  background: linear-gradient(160deg, color-mix(in srgb, var(--tint-deep) 82%, #FFFFFF) 0%, var(--tint-deep) 100%);
  border-color: transparent; color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 14px -6px color-mix(in srgb, var(--tint-deep) 70%, transparent);
}
.about-me .about-card h3 { color: var(--heading); border-bottom-color: color-mix(in srgb, var(--tint-deep) 70%, transparent); }
.about-me .about-card h4 { color: var(--tint-ink); }
.about-me .about-card .about-name { border-bottom-color: color-mix(in srgb, var(--tint-deep) 70%, transparent); }
.about-me .about-card-head--sub { border-top-color: color-mix(in srgb, var(--tint-deep) 20%, transparent); }

/* ===========================================================
   ROOMS CAROUSEL · wide panoramic stage (overrides the stage block above)
   Every photo on disk is a 1916×821 panorama (≈2.33:1). The frame now takes that exact
   ratio and runs almost edge to edge, so each photo is shown whole — object-fit: cover
   only ever trims a sliver when the max-height cap applies on very wide/short screens.
   Transition: a slow crossfade plus a gentle settle (the incoming photo eases from 104%
   to 100% while it is on screen) — transform/opacity only, so it stays on the compositor.
   Mobile: the photo keeps its full panorama at the top and the caption moves onto a
   forest band beneath it, instead of cropping the room down to a portrait.
   =========================================================== */
.rooms.is-ready .rooms-frame {
  --rooms-gutter: clamp(12px, 2.4vw, 36px);
  --rooms-radius: 22px;
  inline-size: min(calc(100% - 2 * var(--rooms-gutter)), 1680px);
  block-size: auto;
  aspect-ratio: 1916 / 821;
  max-block-size: 80vh;
}
.rooms.is-ready .rooms-slide { transition: opacity .9s cubic-bezier(.4,0,.2,1); background: #14251d; }
.rooms.is-ready .rooms-slide-img {
  transform: scale(1.04);
  transition: transform 3.8s cubic-bezier(.22,.61,.28,1);
  will-change: transform;
}
.rooms.is-ready .rooms-slide.is-active .rooms-slide-img { transform: scale(1); }
/* arrows sit just inside the frame edge now that it is nearly full width */
.rooms.is-ready .rooms-arrow-prev { inset-inline-start: clamp(10px, 1.6vw, 22px); }
.rooms.is-ready .rooms-arrow-next { inset-inline-end: clamp(10px, 1.6vw, 22px); }
.rooms.is-ready .rooms-arrow {
  background: rgba(20,51,38,.72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(251,249,245,.28);
}
.rooms.is-ready .rooms-arrow:hover { background: rgba(31,74,55,.9); }
/* caption: a touch larger on the bigger stage, still anchored bottom-right */
@media (min-width: 821px) {
  .rooms.is-ready .rooms-caption { padding-inline: clamp(1.4rem, 3vw, 2.8rem); padding-block-end: clamp(1.1rem, 2.4vw, 2rem); }
  .rooms.is-ready .rooms-caption-title { font-size: clamp(1.3rem, 2vw, 1.8rem); }
  .rooms.is-ready .rooms-caption-desc { font-size: clamp(.9rem, 1vw, 1.02rem); }
}
@media (max-width: 820px) {
  .rooms.is-ready .rooms-frame { --rooms-radius: 16px; }
  .rooms.is-ready .rooms-arrow { inline-size: 40px; block-size: 40px; }
}
@media (max-width: 640px) {
  .rooms.is-ready .rooms-frame {
    --cap-h: 5.4rem;
    aspect-ratio: auto; max-block-size: none;
    block-size: calc((100vw - 2 * var(--rooms-gutter)) * 821 / 1916 + var(--cap-h));
  }
  .rooms.is-ready .rooms-slide { background: linear-gradient(180deg, #1B4332 0%, #143326 100%); }
  .rooms.is-ready .rooms-slide::before { content: none; }
  .rooms.is-ready .rooms-slide-img { inset-block-end: var(--cap-h); block-size: auto; height: calc(100% - var(--cap-h)); }
  .rooms.is-ready .rooms-caption {
    inset-block-end: 0; block-size: var(--cap-h); max-inline-size: none;
    display: flex; flex-direction: column; justify-content: center;
    padding: .55rem 1rem;
  }
  .rooms.is-ready .rooms-caption-title { font-size: 1.05rem; text-shadow: none; }
  .rooms.is-ready .rooms-caption-desc { font-size: .8rem; margin-top: .15rem; text-shadow: none; }
  /* arrows centred on the photo, not on photo + caption band */
  .rooms.is-ready .rooms-arrow { inline-size: 36px; block-size: 36px; inset-block-start: calc((100% - var(--cap-h)) / 2); }
  .rooms.is-ready .rooms-arrow svg { inline-size: 16px; block-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .rooms.is-ready .rooms-slide-img, .rooms.is-ready .rooms-slide.is-active .rooms-slide-img { transform: none; transition: none; }
}

/* Rooms stage · sized to the page's own content column (--container minus its gutters) so
   the carousel lines up with the headings and cards around it instead of running edge to
   edge. Same panoramic ratio, just a calmer scale; capped at 68vh on short screens. */
.rooms.is-ready .rooms-frame {
  --rooms-gutter: clamp(1.25rem, 4vw, 2.5rem);
  inline-size: min(calc(100% - 2 * var(--rooms-gutter)), calc(var(--container) - 5rem));
  max-block-size: 68vh;
}
@media (max-width: 640px) {
  .rooms.is-ready .rooms-frame { --rooms-gutter: 1rem; max-block-size: none; }
}

/* Rooms carousel · smoothness pass
   - arrows: no backdrop-filter (a blur over a crossfading, scaling photo is re-rendered every
     frame — the main source of the stutter); a solid translucent fill looks the same.
   - only the ENTERING photo animates its settle; the leaving photo keeps its scale until it has
     fully faded, then resets instantly while invisible — no two photos animating at once.
   - will-change only on the active slide, not on all eight layers. */
.rooms.is-ready .rooms-arrow { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20,51,38,.78); }
.rooms.is-ready .rooms-slide-img { will-change: auto; transition: transform 0s linear .95s; }
.rooms.is-ready .rooms-slide.is-active .rooms-slide-img {
  will-change: transform;
  transition: transform 3.8s cubic-bezier(.22,.61,.28,1) 0s;
}
.rooms.is-ready .rooms-slide { will-change: opacity; backface-visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .rooms.is-ready .rooms-slide-img, .rooms.is-ready .rooms-slide.is-active .rooms-slide-img { transition: none; transform: none; }
}

/* Packages intro · the VAT / professional-use note on its own quiet line under the lede:
   smaller, muted, framed by two short sage hairlines so it reads as a footnote, not body. */
.packages-intro .lede-note {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  margin-top: .75rem;
  font-size: .9rem; font-weight: 500; letter-spacing: .01em; color: var(--muted);
}
.packages-intro .lede-note::before, .packages-intro .lede-note::after {
  content: ""; flex: none; width: 26px; height: 1px;
  background: linear-gradient(90deg, rgba(121,145,132,0), rgba(121,145,132,.8));
}
.packages-intro .lede-note::after { transform: scaleX(-1); }

/* ===========================================================
   ABOUT · the 3D book ("נשואה לפשע")
   Pure CSS 3D, transform/opacity only (compositor), no library. Hover — or a tap on touch
   screens (main.js toggles .is-open) — swings the cover open on its RIGHT-hand spine, the
   way a Hebrew book opens, while three leaves fan behind it in a short stagger and reveal
   a title page. Closed, the book sits with a slight tilt and a physical spine shading.
   Reduced motion: the book simply stays closed.
   =========================================================== */
.about-me .story-book {
  box-shadow: none; transform: none; border-radius: 0;
  transition: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.about-me .story-book::after { content: none; }
.about-me .about-card--story:hover .story-book { transform: none; }

.about-me .book3d {
  position: relative; perspective: 1500px; perspective-origin: 70% 40%;
  transform: rotate(-1.5deg);
  transition: transform .7s cubic-bezier(.22,.61,.28,1);
}
.about-me .book-cover {
  position: relative; z-index: 4;
  transform-origin: right center; transform-style: preserve-3d;
  border-radius: 3px 7px 7px 3px;
  box-shadow: 0 1px 2px rgba(15,42,30,.25), 0 14px 30px -10px rgba(15,42,30,.55), 0 30px 50px -30px rgba(15,42,30,.45);
  transition: transform 1s cubic-bezier(.3,.7,.2,1), box-shadow 1s ease;
  will-change: transform;
}
.about-me .book-cover img { display: block; width: 100%; height: auto; border-radius: inherit; backface-visibility: hidden; }
/* spine shading on the binding (right) edge + a soft sheen that slides across on open */
.about-me .book-cover::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(270deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.1) 3.5%, rgba(255,255,255,.16) 5%, rgba(255,255,255,0) 9%),
    linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.18) 48%, rgba(255,255,255,0) 62%);
  background-size: 100% 100%, 250% 100%;
  background-position: 0 0, 120% 0;
  transition: background-position 1s ease;
}
/* the leaves: cream sheets hinged on the same spine, a hair smaller than the cover */
.about-me .book-leaf, .about-me .book-page {
  position: absolute; inset: 2% 1.5% 2% 3%;
  border-radius: 2px 5px 5px 2px;
  background: linear-gradient(90deg, #EFE7D6 0%, #FBF8F1 12%, #FFFDF8 100%);
  transform-origin: right center;
}
.about-me .book-leaf {
  z-index: 3; box-shadow: inset 8px 0 14px -10px rgba(74,64,56,.35);
  transition: transform .95s cubic-bezier(.3,.7,.2,1);
}
.about-me .book-leaf--2 { z-index: 2; }
.about-me .book-leaf--3 { z-index: 1; }
/* the title page underneath everything */
.about-me .book-page {
  z-index: 0; inset: 2% 1.5% 2% 3%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  padding: 12% 10%; text-align: center;
  box-shadow: inset -10px 0 18px -12px rgba(74,64,56,.4), 0 10px 24px -12px rgba(15,42,30,.45);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(122,111,99,.05) 17px 18px),
    linear-gradient(90deg, #EFE7D6 0%, #FBF8F1 12%, #FFFDF8 100%);
}
.about-me .book-page-orn { width: 28px; height: 1px; background: #9A7B4A; opacity: .7; margin-bottom: .3rem; }
.about-me .book-page-title { font-family: var(--font-head); font-weight: 800; font-size: clamp(.95rem, 1.6vw, 1.2rem); color: #3A2A22; line-height: 1.1; }
.about-me .book-page-sub { font-size: clamp(.62rem, .9vw, .72rem); line-height: 1.35; color: #7A6F63; }
.about-me .book-page-author { margin-top: .5rem; font-size: clamp(.62rem, .9vw, .72rem); font-weight: 600; letter-spacing: .04em; color: #9A6B5E; }

/* OPEN — hover on devices that can hover, or .is-open from a tap */
@media (hover: hover) and (pointer: fine) {
  .about-me .story-book:not(.is-flipped) .book-flip:hover .book3d { transform: rotate(0deg) translateY(-4px); }
  .about-me .story-book:not(.is-flipped) .book-flip:hover .book-cover { transform: rotateY(86deg); box-shadow: 0 30px 50px -24px rgba(15,42,30,.55); }
  .about-me .story-book:not(.is-flipped) .book-flip:hover .book-cover::after { background-position: 0 0, -40% 0; }
  .about-me .story-book:not(.is-flipped) .book-flip:hover .book-leaf--1 { transform: rotateY(80deg); transition-delay: .08s; }
  .about-me .story-book:not(.is-flipped) .book-flip:hover .book-leaf--2 { transform: rotateY(82deg); transition-delay: .14s; }
  .about-me .story-book:not(.is-flipped) .book-flip:hover .book-leaf--3 { transform: rotateY(84deg); transition-delay: .2s; }
}
.about-me .story-book.is-open .book3d { transform: rotate(0deg) translateY(-4px); }
.about-me .story-book.is-open .book-cover { transform: rotateY(86deg); box-shadow: 0 30px 50px -24px rgba(15,42,30,.55); }
.about-me .story-book.is-open .book-leaf--1 { transform: rotateY(80deg); transition-delay: .08s; }
.about-me .story-book.is-open .book-leaf--2 { transform: rotateY(82deg); transition-delay: .14s; }
.about-me .story-book.is-open .book-leaf--3 { transform: rotateY(84deg); transition-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  .about-me .book3d, .about-me .book-cover, .about-me .book-leaf { transition: none !important; }
  .about-me .story-book:not(.is-flipped) .book-flip:hover .book-cover, .about-me .story-book.is-open .book-cover,
  .about-me .story-book:not(.is-flipped) .book-flip:hover .book-leaf, .about-me .story-book.is-open .book-leaf { transform: none !important; }
}

/* ===========================================================
   CONTACT CARD · tile layout (intro + accessibility lines removed)
   Status pill → contact tiles → actions. Phone and email share a row, the address runs
   full width, and the hours become a three-column strip (day over time) instead of a
   stacked list — so the card is balanced without any filler copy.
   =========================================================== */
#contact .panel-head { margin-bottom: 1.1rem; }
#contact .contact-list {
  margin: 0; padding: 0; background: none; border: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem;
}
#contact .contact-list li {
  padding: .75rem .9rem; gap: .75rem; min-width: 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF9F4 100%);
  border: 1px solid rgba(23,59,43,.10); border-radius: 16px;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 6px 16px -12px rgba(23,59,43,.35);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.22,.61,.28,1);
}
#contact .contact-list li + li { border-top: 1px solid rgba(23,59,43,.10); }
#contact .contact-list li:hover {
  border-color: rgba(47,107,79,.30); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 12px 24px -14px rgba(23,59,43,.45);
}
#contact .contact-list li:nth-child(3) { grid-column: 1 / -1; }            /* address */
#contact .contact-list li.is-stacked { grid-column: 1 / -1; align-items: center; } /* hours */
#contact .contact-link { min-width: 0; overflow-wrap: anywhere; }

#contact .hours-list {
  flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem;
}
#contact .hours-row {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .45rem .3rem; border-radius: 12px; text-align: center;
  background: var(--accent-soft);
}
#contact .hours-day { font-size: .8rem; font-weight: 600; color: var(--accent-text); }
#contact .hours-time { font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--heading); font-variant-numeric: tabular-nums; }

#contact .panel-actions { margin-block-start: 1.3rem; padding-block-start: 1.3rem; }

@media (max-width: 560px) {
  #contact .contact-list { grid-template-columns: 1fr; }
  #contact .contact-list li.is-stacked { align-items: flex-start; }
  #contact .hours-list { grid-template-columns: 1fr; gap: .35rem; }
  #contact .hours-row { flex-direction: row; justify-content: space-between; padding: .4rem .7rem; }
}
@media (prefers-reduced-motion: reduce) { #contact .contact-list li:hover { transform: none; } }

/* ===========================================================
   MOBILE PASS
   =========================================================== */
/* 1 · header: keep the booking pill visible next to the burger once the full nav folds */
@media (max-width: 1099px) {
  .header-actions .header-cta-book { display: inline-flex; min-height: 40px; padding-inline: .95rem; font-size: .9rem; }
  .header-actions { gap: .5rem; }
}
@media (max-width: 380px) {
  .header-actions .header-cta-book { padding-inline: .7rem; font-size: .84rem; }
  .brand-sub { display: none; }
}

/* 2 · carousel arrows: a real 42px thumb target on phones */
@media (max-width: 640px) {
  .rooms.is-ready .rooms-arrow { inline-size: 42px; block-size: 42px; }
  .rooms.is-ready .rooms-arrow svg { inline-size: 18px; block-size: 18px; }
}

/* 3 · footer on phones: centred columns, roomy legal links, clearance for the fixed buttons */
@media (max-width: 820px) {
  .site-footer .footer-col { text-align: center; align-items: center; }
  .site-footer .footer-col h4::after { inset-inline-start: 50%; transform: translateX(50%); }
  .footer-legal-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .1rem .35rem; line-height: 1.4; }
  .footer-legal-row a { display: inline-flex; align-items: center; min-height: 40px; padding-inline: .35rem; }
  .footer-bottom { padding-bottom: 5.5rem; }
}

/* 4 · long About cards fold on phones behind "להמשך קריאה" (main.js adds the classes) */
.about-me .about-card.is-folded { max-height: 25rem; }
.about-me .about-card.is-folded::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 9rem; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, color-mix(in srgb, var(--tint, #F1E6D2) 70%, #FFFFFF) 72%);
}
.about-me .card-more {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  margin: 1rem auto 0; min-height: 44px; padding: .5rem 1.2rem;
  border: 1.5px solid color-mix(in srgb, var(--tint-deep, #5C6E63) 55%, transparent); border-radius: var(--radius-pill);
  background: #FFFFFF; color: var(--heading); font: 600 .95rem var(--font-body); cursor: pointer;
  box-shadow: 0 6px 16px -10px rgba(23,59,43,.45);
}
.about-me .card-more svg { width: 16px; height: 16px; transition: transform .25s ease; }
.about-me .card-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.about-me .about-card.is-folded .card-more {
  position: absolute; z-index: 2; inset-inline: 0; inset-block-end: 1.1rem; width: max-content;
}
@media (max-width: 820px) {
  .site-footer .footer-col a { justify-content: center; width: 100%; }
  /* the "|" separators land at line starts once the legal row wraps — drop them and let
     the gap + a soft dot do the separating */
  .footer-legal-row .footer-sep { display: none; }
  .footer-legal-row > * + *::before { content: "·"; margin-inline-end: .45rem; opacity: .55; }
  .footer-legal-row > span, .footer-legal-row > a { display: inline-flex; align-items: center; min-height: 36px; }
}
/* phone numbers never break at their hyphens */
bdi[dir="ltr"], a[href^="tel:"] { white-space: nowrap; }

/* ===========================================================
   THE CLINIC · קליניקת בר-אל והקהילה למטפלים (its own section, above "מי אני")
   Lead statement → two value cards → the founder's vision as a signed pull quote.
   =========================================================== */
.clinic-intro {
  position: relative; overflow: clip;
  background: var(--seam), linear-gradient(180deg, #F2F6F1 0%, #F8F6F0 100%);
}
.clinic-intro::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
  inset-block-start: -18%; inset-inline-end: -12%; width: 48%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(201,216,204,.75) 0%, rgba(201,216,204,0) 70%);
}
.clinic-intro > .container { position: relative; z-index: 1; }
.clinic-intro .section-head { max-width: 46rem; }
.clinic-lead {
  margin: 1.1rem auto 0; max-width: 40ch;
  font-family: var(--font-head); font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.6;
  color: var(--text-emphasis); text-wrap: balance;
}
.clinic-values {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem);
  max-width: 64rem; margin: clamp(2rem, 4vw, 2.75rem) auto 0;
}
.clinic-value {
  position: relative; overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: linear-gradient(170deg, #FFFFFF 0%, #FBFAF6 100%);
  border: 1px solid rgba(23,59,43,.09); border-radius: 22px;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 18px 38px -24px rgba(23,59,43,.35);
  transition: transform .3s cubic-bezier(.22,.61,.28,1), box-shadow .3s ease;
}
.clinic-value::after {       /* soft sage corner glow */
  content: ""; position: absolute; inset-block-start: -40%; inset-inline-start: -30%; width: 70%; aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(circle, rgba(201,216,204,.55), rgba(201,216,204,0) 70%); pointer-events: none;
}
.clinic-value:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 #FFFFFF, 0 24px 44px -24px rgba(23,59,43,.45); }
.clinic-value-ico {
  position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px;
  background: linear-gradient(160deg, #3F7A5E 0%, #2F6B4F 55%, #26583F 100%); color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 20px -10px rgba(38,88,63,.7);
}
.clinic-value-ico svg { width: 24px; height: 24px; }
.clinic-value h3 { position: relative; z-index: 1; margin: 1.1rem 0 .55rem; font-size: clamp(1.15rem, 2vw, 1.3rem); color: var(--heading); }
.clinic-value p { position: relative; z-index: 1; margin: 0; font-size: 1.02rem; line-height: 1.8; color: var(--text); }

.clinic-quote {
  position: relative; max-width: 50rem; margin: clamp(2rem, 4vw, 3rem) auto 0; padding: clamp(1.6rem, 3.5vw, 2.4rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  background: linear-gradient(160deg, #24543F 0%, #1B4332 60%, #143326 100%);
  border-radius: 24px; color: #F3EEE3;
  box-shadow: 0 26px 50px -28px rgba(15,42,30,.7);
}
.clinic-quote-mark { width: 40px; height: 30px; color: #D9C08A; opacity: .9; }
.clinic-quote blockquote { margin: .6rem 0 0; }
.clinic-quote blockquote p {
  margin: 0; font-family: var(--font-head); font-weight: 600; font-size: clamp(1.1rem, 2.1vw, 1.4rem); line-height: 1.65;
  color: #FFFFFF; text-wrap: balance;
}
.clinic-quote figcaption {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1rem;
  font-size: .9rem; font-weight: 600; letter-spacing: .04em; color: #D9C08A;
}
.clinic-quote figcaption::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
@media (max-width: 720px) { .clinic-values { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .clinic-value:hover { transform: none; } }

/* ===========================================================
   ABOUT · the profile card — portrait + name + opening + invitation in ONE card
   =========================================================== */
.about-me .about-profile {
  --tint: #F1E6D2; --tint-deep: #9A7B4A; --tint-ink: #6E5530;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  padding: 0; max-width: 64rem; margin-inline: auto;
}
.about-me .about-profile:hover { transform: none; }
.about-me .about-profile-media { position: relative; min-height: 100%; }
.about-me .about-profile .about-portrait {
  position: absolute; inset: 0; aspect-ratio: auto; width: 100%; height: 100%;
  border: 0; border-radius: 0; box-shadow: none; margin: 0;
  background-position: center 20%, center, center;
}
.about-me .about-profile-body { padding: clamp(1.6rem, 3.5vw, 2.6rem); display: flex; flex-direction: column; }
.about-me .about-profile-eyebrow {
  align-self: flex-start; padding: .25rem .8rem; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--tint) 80%, #FFFFFF); border: 1px solid color-mix(in srgb, var(--tint-deep) 30%, transparent);
  color: var(--tint-ink); font-size: .8rem; font-weight: 600; letter-spacing: .06em;
}
.about-me .about-profile .about-name { margin: .8rem 0 .6rem; font-size: clamp(1.7rem, 3.2vw, 2.2rem); border: 0; padding: 0; }
.about-me .about-profile .about-lead { margin: 0; }
.about-me .about-profile-text { margin: .9rem 0 0; color: var(--text); line-height: 1.85; }
.about-me .about-profile-invite {
  margin-top: auto; padding: 1.2rem 1.3rem 1.3rem;
  margin-block-start: clamp(1.4rem, 3vw, 2rem);
  background: linear-gradient(160deg, #F2F7F2 0%, #E6EFE7 100%);
  border: 1px solid rgba(47,107,79,.18); border-radius: 18px;
}
.about-me .about-profile-invite .about-card-head { margin-bottom: .45rem; }
.about-me .about-profile-invite .about-card-icon {
  background: linear-gradient(160deg, #3F7A5E 0%, #26583F 100%); color: #FFFFFF; border-color: transparent;
}
.about-me .about-profile-invite h3 { border-bottom-color: rgba(47,107,79,.5); }
.about-me .about-profile-invite .invite-btn { margin-block-start: .9rem; }
@media (max-width: 820px) {
  .about-me .about-profile { grid-template-columns: 1fr; }
  .about-me .about-profile-media { min-height: 0; aspect-ratio: 4 / 4.4; max-height: 440px; }
}

/* ---- remaining detail cards: a stronger opening line, calmer body, so they read as
   designed cards rather than blog posts ---- */
.about-me .about-sections { max-width: 64rem; margin-inline: auto; }
.about-me .about-sections .about-card > p:first-of-type {
  font-size: 1.12rem; line-height: 1.75; font-weight: 500; color: var(--text-emphasis);
}
.about-me .about-sections .about-card > p { max-width: 62ch; }
.about-me .about-sections .about-card > p + p { margin-block-start: 1rem; }

/* Header type: the navigation now speaks in the heading face (Assistant) instead of the body
   face — rounder, lighter strokes, a touch of tracking — so the menu reads as refined labels
   rather than bold body text. Same face on the header pills and the mobile drawer. */
.nav a {
  font-family: var(--font-head); font-weight: 600; font-size: 1.04rem; letter-spacing: .012em;
  color: #3E4A42;
}
.nav a[aria-current="page"] { font-weight: 700; color: var(--accent); }
.header-cta { font-family: var(--font-head); font-weight: 700; font-size: .98rem; letter-spacing: .01em; }
.mobile-nav nav > a { font-family: var(--font-head); font-weight: 600; letter-spacing: .012em; }
.mobile-nav nav > a[aria-current="page"] { font-weight: 700; }
.mobile-nav .mobile-cta { font-family: var(--font-head); font-weight: 700; }

/* ===========================================================
   THE CLINIC · scroll sequence (assets/clinic-scroll.js)
   Desktop: the two value cards + the vision quote sit side by side as three equal cards,
   so the whole section fits one screen and can be pinned while the cards drop in, one per
   scroll step. Phones / short screens: normal flow, each card drops in as it's reached.
   =========================================================== */
@media (min-width: 1024px) {
  .clinic-stage {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem);
    max-width: 72rem; margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0; align-items: stretch;
  }
  .clinic-stage .clinic-values { display: contents; }
  .clinic-stage .clinic-quote {
    margin: 0; max-width: none; display: flex; flex-direction: column; justify-content: center;
    padding: clamp(1.5rem, 2.6vw, 2rem);
  }
  .clinic-stage .clinic-quote blockquote p { font-size: clamp(1.02rem, 1.35vw, 1.18rem); }
}
.clinic-steps { display: none; }

/* pinned mode — compact padding so heading + three cards fit the viewport */
.clinic-intro.is-pinned {
  min-height: 100vh; min-height: 100svh;
  padding-block: calc(var(--header-h, 72px) + 1.25rem) 1.5rem;
  display: flex; flex-direction: column; justify-content: center;
}
.clinic-intro.is-pinned .clinic-steps {
  display: flex; justify-content: center; gap: .55rem; margin-top: 1.4rem;
}
.clinic-intro.is-pinned .clinic-steps span {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(23,59,43,.18);
  transition: width .35s cubic-bezier(.22,.61,.28,1), background-color .35s ease;
}
.clinic-intro.is-pinned .clinic-steps span.is-on { width: 26px; border-radius: 6px; background: #2F6B4F; }
.clinic-value, .clinic-quote { will-change: auto; }
/* pinned mode · a slightly tighter rhythm so heading + three cards fit a 768px laptop screen */
.clinic-intro.is-pinned { padding-block: calc(var(--header-h, 78px) + .9rem) 1rem; }
.clinic-intro.is-pinned .section-head h2 { margin-top: .5rem; }
.clinic-intro.is-pinned .clinic-lead { margin-top: .6rem; font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.5; }
.clinic-intro.is-pinned .clinic-stage { margin-top: 1.4rem; max-width: 76rem; }
.clinic-intro.is-pinned .clinic-value { padding: 1.3rem 1.4rem 1.4rem; }
.clinic-intro.is-pinned .clinic-value-ico { width: 42px; height: 42px; border-radius: 13px; }
.clinic-intro.is-pinned .clinic-value h3 { margin: .8rem 0 .4rem; font-size: 1.15rem; }
.clinic-intro.is-pinned .clinic-value p { font-size: .96rem; line-height: 1.7; }
.clinic-intro.is-pinned .clinic-quote { padding: 1.4rem 1.5rem; }
.clinic-intro.is-pinned .clinic-steps { margin-top: 1rem; }

/* ===========================================================
   THE CLINIC · colour pass + service tags (wave entrance lives in clinic-scroll.js)
   =========================================================== */
.clinic-intro {
  background:
    var(--seam),
    radial-gradient(60% 55% at 88% 12%, rgba(201,216,204,.85) 0%, rgba(201,216,204,0) 70%),
    radial-gradient(55% 60% at 8% 85%, rgba(234,216,210,.75) 0%, rgba(234,216,210,0) 70%),
    linear-gradient(180deg, #F1F5EF 0%, #F8F3EE 100%);
}
.clinic-intro::before { display: none; }

/* service tags under the lead — one soft colour each */
.clinic-tags {
  list-style: none; margin: 1.15rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
}
.clinic-tags li {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .38rem .95rem; border-radius: var(--radius-pill);
  font-family: var(--font-head); font-weight: 700; font-size: .92rem; letter-spacing: .01em;
  background: #FFFFFF; border: 1px solid rgba(23,59,43,.12); color: var(--heading);
  box-shadow: 0 6px 14px -10px rgba(23,59,43,.45);
}
.clinic-tags li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #5E8C72; }
.clinic-tags li:nth-child(2)::before { background: #B98272; }
.clinic-tags li:nth-child(3)::before { background: #C5A059; }
.clinic-tags li:nth-child(4)::before { background: #8A9FB0; }

/* tinted value cards: sage and rose, each with a matching top band + icon */
.clinic-value { --c-tint: #DCE8DE; --c-deep: #2F6B4F; --c-deep2: #26583F; }
.clinic-value--rose { --c-tint: #F2E0DA; --c-deep: #A56E60; --c-deep2: #8C5A4D; }
.clinic-value {
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--c-tint) 95%, transparent) 0%, transparent 62%),
    linear-gradient(170deg, #FFFFFF 10%, color-mix(in srgb, var(--c-tint) 55%, #FFFFFF) 100%);
  border-color: color-mix(in srgb, var(--c-deep) 22%, transparent);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 20px 40px -26px color-mix(in srgb, var(--c-deep) 70%, transparent);
}
.clinic-value::after { display: none; }
.clinic-value::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px;
  background: linear-gradient(90deg, transparent, var(--c-deep), transparent); opacity: .7;
}
.clinic-value .clinic-value-ico {
  background: linear-gradient(160deg, color-mix(in srgb, var(--c-deep) 80%, #FFFFFF) 0%, var(--c-deep) 55%, var(--c-deep2) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 20px -10px color-mix(in srgb, var(--c-deep) 80%, transparent);
}
.clinic-value h3 { color: color-mix(in srgb, var(--c-deep2) 45%, var(--heading)); }
.clinic-value:hover { box-shadow: inset 0 1px 0 #FFFFFF, 0 26px 46px -24px color-mix(in srgb, var(--c-deep) 80%, transparent); }

/* the quote card: forest with a warm gold glow in its corner */
.clinic-quote {
  background:
    radial-gradient(80% 70% at 0% 100%, rgba(197,160,89,.22) 0%, rgba(197,160,89,0) 65%),
    linear-gradient(160deg, #24543F 0%, #1B4332 60%, #143326 100%);
}
/* the story card's link row is a <p> too — keep it out of the 62ch text measure so the
   three buttons stay on one line, "להרצאות הקרובות" at the far (left) end */
.about-me .about-sections .about-card > p.about-links { max-width: none; align-items: center; }

/* ===========================================================
   HEADINGS — Rubik (Google Fonts / OFL, self-hosted Hebrew+Latin subset of the variable font)
   Headings only: titles 700, card titles 600, evergreen ink. Running text, nav, forms and
   buttons are back on the site's original faces (Heebo for text and buttons, Assistant for
   nav/UI) with the original button design, per the client.
   =========================================================== */
@font-face {
  font-family: "Rubik"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url("fonts/Rubik/Rubik-HebLatin-VF.woff2") format("woff2-variations"),
       url("fonts/Rubik/Rubik-HebLatin-VF.woff2") format("woff2"),
       url("fonts/Rubik/Rubik-VariableFont_wght.ttf") format("truetype");
}
:root {
  --font-display: "Rubik", "Segoe UI", Arial, sans-serif;   /* headings only; body = Heebo, UI = Assistant (the originals) */
  --ink-title: #1D5A41;
  --ink-title-deep: #173B2B;
}
html { font-synthesis: none; -webkit-font-synthesis: none; }

/* ---- headings: Rubik Bold, evergreen ---- */
h1, h2, h3, h4,
.hero-title, .type-page-title, .type-section-title, .text-title, .text-subtitle,
.wa-sheet-title, .rooms-caption-title, .about-me .about-name, .about-me .book-page-title,
.clinic-quote blockquote p, .legal-doc-title, .pkg-group-title {
  font-family: var(--font-display);
  letter-spacing: 0;
  text-wrap: balance;
}
h2, .text-title, .type-page-title, .type-section-title,
.section-head h2, #contact .section-head h2 {
  font-weight: 700;
  font-size: clamp(2rem, 1.6rem + 1.8vw, 3.05rem);
  line-height: 1.16;
  letter-spacing: -.012em;
  color: var(--ink-title);
  -webkit-text-fill-color: currentColor; background: none;
}
/* section titles: deep forest melting into evergreen, only where text clipping works */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  @media (prefers-contrast: no-preference) {
    .section-head h2, .text-title, .type-page-title {
      background: linear-gradient(180deg, var(--ink-title-deep) 0%, var(--ink-title) 78%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: var(--ink-title);
      padding-block: .04em;   /* keep ל and final letters inside the painted box */
    }
  }
}
h3 { font-weight: 600; font-size: clamp(1.28rem, 1.18rem + .45vw, 1.5rem); line-height: 1.32; color: var(--ink-title); }
h4 { font-weight: 600; color: var(--ink-title); }

/* hero: big, bold, white, lifted off the footage */
.hero-title {
  font-weight: 700; letter-spacing: -.015em;
  font-size: clamp(2.35rem, 1.7rem + 3vw, 4rem); line-height: 1.12;
  color: #FFFFFF; background: none; -webkit-text-fill-color: currentColor; filter: none;
  text-shadow: 0 1px 2px rgba(11,33,28,.45), 0 10px 32px rgba(11,33,28,.38);
}

/* card / panel titles */
.about-me .about-card h3, .clinic-value h3, .invite-card h3, .pkg-group-title,
.legal-section h2, .legal-section h3, .contact-panel h3 {
  font-family: var(--font-display); font-weight: 600; color: var(--ink-title); letter-spacing: -.005em;
}
.about-me .about-card h3, .clinic-value h3, .invite-card h3, .pkg-group-title {
  font-size: clamp(1.3rem, 1.2rem + .45vw, 1.55rem); line-height: 1.3;
}
.legal-section h2 { font-size: clamp(1.45rem, 1.3rem + .6vw, 1.8rem); font-weight: 700; }
.legal-section h3 { font-size: clamp(1.18rem, 1.1rem + .3vw, 1.32rem); }
.about-me .about-name { font-weight: 700; font-size: clamp(1.9rem, 1.6rem + 1.2vw, 2.4rem); line-height: 1.15; color: var(--ink-title); letter-spacing: -.012em; }
.rooms-caption-title { font-weight: 700; font-size: clamp(1.45rem, 1.3rem + .8vw, 1.95rem); line-height: 1.2; }
.clinic-quote blockquote p { font-weight: 500; font-size: clamp(1.18rem, 1.08rem + .5vw, 1.4rem); line-height: 1.6; color: #FFFFFF; }
.wa-sheet-title { font-weight: 700; font-size: clamp(1.55rem, 1.35rem + 1.2vw, 1.95rem); line-height: 1.2; color: var(--ink-title); }


/* ===========================================================
   HERO WORDMARK — a stacked lockup in the "מרכז חיבורים" manner: the name set heavy and
   tight on top, a one-line description underneath justified to exactly the name's width,
   both flush in one block. White on the footage; the description a soft sage-cream.
   =========================================================== */
.hero-mark {
  --mark: clamp(2.55rem, 1.35rem + 5.2vw, 5.6rem);
  display: inline-flex; flex-direction: column; align-items: stretch;
  gap: calc(var(--mark) * .1);
  margin-inline: auto; max-width: 100%;
  font-size: var(--mark); line-height: 1;
}
.hero-mark-name {
  display: block; white-space: nowrap;
  font-family: var(--font-display); font-weight: 800;
  font-size: 1em; line-height: .98; letter-spacing: -.028em;
  color: #FFFFFF;
}
.hero-mark-tag {
  display: block; width: 0; min-width: 100%; white-space: nowrap;
  font-family: var(--font-display); font-weight: 500;
  font-size: .298em; line-height: 1.2; letter-spacing: 0;
  text-align: justify; text-align-last: justify;
  color: #DDEBE0;
  text-shadow: 0 1px 2px rgba(11,33,28,.5), 0 6px 18px rgba(11,33,28,.35);
}
/* phones: let the lockup fill the plate's width so the description stays readable (≈14px) */
@media (max-width: 600px) {
  .hero-mark { --mark: clamp(2.3rem, 15.6vw - .8rem, 3.4rem); }
}


/* About: the intro sentence is now the profile heading — Rubik Bold, sized for a sentence */
.about-me .about-profile .about-name--intro {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.45rem, 1.25rem + .9vw, 1.9rem); line-height: 1.3; letter-spacing: -.01em;
  color: var(--ink-title); margin: .8rem 0 .9rem; text-wrap: balance;
}

/* ===========================================================
   POINTER INTERACTIONS (no cursor follower, no blend modes / backdrop filters — kept cheap to
   paint so scrolling stays smooth). assets/interactions.js adds .fx-on on <html> — desktop, fine pointer,
   motion allowed). Everything moves on the independent translate / rotate / scale properties,
   so existing hover lifts, reveal animations and GSAP tweens keep working underneath.
   =========================================================== */

/* 2 · magnetic buttons + ripple */
.fx-on .fx-magnet { translate: var(--mag-x, 0px) var(--mag-y, 0px); transition-property: transform, background, box-shadow, color, border-color, filter, translate; transition-duration: .22s, .22s, .26s, .22s, .22s, .22s, .35s; }
.fx-on .fx-magnet:hover { transition-duration: .22s, .22s, .26s, .22s, .22s, .22s, .12s; }
.fx-on .header-cta { position: relative; overflow: hidden; isolation: isolate; }
.fx-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 45%, rgba(255,255,255,0) 70%);
  scale: 0; opacity: 1; animation: fx-ripple .75s cubic-bezier(.22,.61,.28,1) forwards;
}
.btn-outline .fx-ripple, .header-cta-ghost .fx-ripple { background: radial-gradient(circle, rgba(47,107,79,.35) 0%, rgba(47,107,79,.1) 45%, rgba(47,107,79,0) 70%); }
@keyframes fx-ripple { to { scale: 1; opacity: 0; } }

/* 3 · tilt + sheen */
.fx-on .fx-tilt { rotate: var(--tilt, none); transition: rotate .6s cubic-bezier(.22,.61,.28,1), box-shadow .35s ease, transform .35s ease; }
.fx-on .fx-tilt.is-tilting { transition: rotate .12s linear, box-shadow .35s ease, transform .35s ease; box-shadow: 0 26px 50px -24px rgba(23,59,43,.35), 0 6px 16px -8px rgba(23,59,43,.18); }
.fx-sheen {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.26), rgba(255,255,255,0) 45%);
  opacity: 0; transition: opacity .4s ease;
}
.clinic-quote .fx-sheen { background: radial-gradient(380px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.10), rgba(255,255,255,0) 50%); }
.fx-tilt.is-tilting .fx-sheen { opacity: 1; }
/* card icons answer the hover: a small springy pop */
.fx-on .fx-tilt :is(.clinic-value-ico, .about-card-icon, .clinic-quote-mark) { transition: scale .45s cubic-bezier(.34,1.56,.64,1), rotate .45s cubic-bezier(.34,1.56,.64,1); }
.fx-on .fx-tilt.is-tilting :is(.clinic-value-ico, .about-card-icon) { scale: 1.12; rotate: -8deg; }
.fx-on .fx-tilt.is-tilting .clinic-quote-mark { scale: 1.15; rotate: 6deg; }

/* 5 · portrait pan */
.fx-pan img { scale: 1.06; transition: translate .5s cubic-bezier(.22,.61,.28,1), scale .6s ease; }
.fx-pan:hover img { scale: 1.09; }

/* 6 · small springs: chips jump, the logo sways, FAQ chevrons nudge */
.fx-on :is(.clinic-tags li, .pkg-group-tag, .eyebrow, .status-pill) { transition: translate .4s cubic-bezier(.34,1.56,.64,1), scale .4s cubic-bezier(.34,1.56,.64,1); }
.fx-on :is(.clinic-tags li, .pkg-group-tag, .eyebrow, .status-pill):hover { translate: 0 -4px; scale: 1.06; }
.fx-on .brand:hover .brand-logo, .fx-on .footer-brand:hover img { animation: fx-sway .9s cubic-bezier(.36,.07,.19,.97); }
@keyframes fx-sway { 0%,100% { rotate: 0deg; } 25% { rotate: -10deg; scale: 1.06; } 55% { rotate: 7deg; } 80% { rotate: -3deg; } }
.fx-on .faq-item summary .faq-chev { transition: translate .3s cubic-bezier(.34,1.56,.64,1); }
.fx-on .faq-item summary:hover .faq-chev { translate: -4px 0; }
.fx-on .contact-link { transition: translate .3s cubic-bezier(.34,1.56,.64,1); }
.fx-on .contact-link:hover { translate: -5px 0; }

/* performance: the grain overlay sat on the playing hero video with mix-blend-mode, forcing a
   blended re-composite of every video frame while being invisible (4% opacity) over the footage */
.hero-plate:has(.hero-video) .grain { display: none; }

/* ===========================================================
   BOOK — turn it over. Clicking the book (or the pill under it) spins the whole book half a
   turn on its vertical axis to show the back cover; clicking again turns it back. The front's
   hover "opening" still works while the front faces out, and is suspended while flipped.
   =========================================================== */
.about-me .story-book { perspective: 1400px; }
.about-me .book-flip {
  position: relative; transform-style: preserve-3d; cursor: pointer;
  transition: transform .9s cubic-bezier(.45,.05,.2,1);
}
.about-me .book-flip > .book3d { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.about-me .book-back {
  position: absolute; inset: 0; transform: rotateY(180deg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 7px 3px 3px 7px; overflow: hidden; background: #0B0B0B;
  box-shadow: 0 1px 2px rgba(15,42,30,.25), 0 14px 30px -10px rgba(15,42,30,.55), 0 30px 50px -30px rgba(15,42,30,.45);
}
.about-me .book-back img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* spine shading on the back sits on the left edge (the binding, seen from behind) */
.about-me .book-back::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.1) 3.5%, rgba(255,255,255,.12) 5%, rgba(255,255,255,0) 9%);
}
.about-me .story-book.is-flipped .book-flip { transform: rotateY(180deg); }
.about-me .story-book.is-flipped .book-cover,
.about-me .story-book.is-flipped .book-leaf { transform: none !important; transition-delay: 0s !important; }

/* the "turn it over" pill under the book */
.about-me .book-flip-btn {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  width: 100%; margin-top: .85rem; min-height: 40px; padding: .45rem .8rem;
  font-family: var(--font-head); font-weight: 700; font-size: .88rem; line-height: 1.2;
  color: var(--heading); background: rgba(255,255,255,.72);
  border: 1.5px solid rgba(47,107,79,.45); border-radius: var(--radius-pill);
  box-shadow: 0 6px 16px -10px rgba(23,59,43,.4); cursor: pointer;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.about-me .book-flip-btn svg { width: 1.05em; height: 1.05em; flex: none; transition: transform .6s cubic-bezier(.45,.05,.2,1); }
.about-me .book-flip-btn:hover { background: #2F6B4F; color: #FFFFFF; border-color: #2F6B4F; transform: translateY(-1px); }
.about-me .book-flip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.about-me .story-book.is-flipped .book-flip-btn svg { transform: rotate(-180deg); }
@media (prefers-reduced-motion: reduce) {
  .about-me .book-flip, .about-me .book-flip-btn svg { transition: none; }
}
/* phones: the book is narrow (a third of the card), so the pill becomes a compact two-line tag */
@media (max-width: 640px) {
  .about-me .book-flip-btn { font-size: .8rem; padding: .4rem .5rem; border-radius: 12px; gap: .3rem; min-height: 44px; margin-top: .7rem; }
  .about-me .book-flip-btn svg { display: none; }
}

/* Crisp back cover: once the turn has finished, the book leaves 3D entirely — front hidden,
   back shown flat with no transform — so the browser paints the text at full sharpness
   instead of a resampled 3D layer. (JS adds .is-back after the flip, and removes it first
   when turning back.) */
.about-me .story-book.is-back .book-flip { transform: none; transition: none; transform-style: flat; }
.about-me .story-book.is-back .book-flip > .book3d { visibility: hidden; }
.about-me .story-book.is-back .book-back { transform: none; }
.about-me .book-back img { image-rendering: auto; }

/* "לרכישה" — a quiet link on the title page, only seen once the cover swings open */
.about-me .book-page-buy {
  margin-top: .7rem; display: inline-flex; align-items: center; gap: .15em;
  padding: .18rem .7rem; border-radius: 999px;
  font-family: var(--font-head); font-weight: 700; font-size: clamp(.66rem, .9vw, .76rem); line-height: 1.4;
  color: #8A5D50; text-decoration: none;
  border: 1px solid rgba(154,107,94,.45); background: rgba(255,253,248,.6);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.about-me .book-page-buy:hover { background: #9A6B5E; color: #FFFDF8; border-color: #9A6B5E; }
.about-me .book-page-buy:focus-visible { outline: 2px solid #9A6B5E; outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the book, a little larger (desktop ~236px, phones 40% of the card) so the back cover reads */
.about-me .story-book { width: clamp(132px, 25%, 236px); }
@media (max-width: 640px) { .about-me .story-book { width: 40%; } }

/* ===========================================================
   MOBILE POLISH (≤640px) — readable small print, comfortable tap targets, and a book that
   works by touch: a tap opens the cover (title page + "לרכישה"), the pill turns it over.
   =========================================================== */
@media (max-width: 640px) {
  /* small labels up to a readable 13.5px+ */
  .eyebrow, .about-profile-eyebrow, .pkg-group-tag, .pkg-unit, .hours-day,
  .rooms-caption-desc { font-size: .86rem; }
  .brand-sub { font-size: .72rem; }

  /* footer legal row: each link a full 44px touch target */
  .footer-legal-row a, .footer-legal-row bdi a { display: inline-flex; align-items: center; min-height: 44px; }

  /* the open book's title page, sized for a phone-width book */
  .about-me .book-page { padding: 10% 8%; gap: .3rem; }
  .about-me .book-page-title { font-size: 1.05rem; }
  .about-me .book-page-author { font-size: .76rem; }
  .about-me .book-page-buy {
    position: relative; font-size: .8rem; padding: .3rem .85rem; margin-top: .55rem;
  }
  /* invisible 44px hit area around the small "לרכישה" pill */
  .about-me .book-page-buy::after { content: ""; position: absolute; inset: -10px -8px; }
  .about-me .book-flip-btn { font-size: .86rem; }

  /* taps: no grey flash, no 300ms delay on the book and pills */
  .about-me .book-flip, .about-me .book-flip-btn, .about-me .book-page-buy { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
}
@media (max-width: 360px) {
  .about-me .book-flip-btn { font-size: .8rem; }
}
@media (max-width: 640px) {
  .rooms.is-ready .rooms-caption-desc, .rooms.is-ready .rooms-slide--split .rooms-caption-desc { font-size: .86rem; }
  #contact .hours-day { font-size: .86rem; }
  .about-me .about-profile-eyebrow { font-size: .86rem; }
}
/* clinic intro lead: two lines on desktop (a wider measure, balanced rag) */
@media (min-width: 900px) {
  .clinic-intro .section-head { max-width: 56rem; }
  .clinic-lead { max-width: 64ch; }
}