/* =========================================================
   Design tokens
   ========================================================= */
:root {
  --ivory: #FBF8F4;
  --lavender-50: #F5F1FB;
  --lilac-100: #F1EAF9;
  --lilac-300: #C9B3E3;
  --smoky-purple: #8B7AA1;
  /* A slightly deeper reading of smoky-purple, kept only for real body text/
     links on light backgrounds. --smoky-purple itself is 3.68:1 on --ivory -
     fine as a graphical/icon color (WCAG's 3:1 non-text minimum), but not
     enough for actual text, which needs 4.5:1. This variant measures 4.8:1
     on --ivory, so it satisfies the WCAG 2.0 AA / ת"י 5568 contrast level
     the accessibility statement declares, while staying visually close to
     the original tone. --smoky-purple itself is untouched, so icons,
     borders, and anything already using it stay exactly as they were. */
  --smoky-purple-text: #78678F;
  --deep-purple: #4A3B66;
  --deep-purple-2: #3A2E52;
  --rose-warm: #E9C9C2;
  --beige-warm: #EFE2D6;

  --text-dark: #362D46;
  --text-muted: #6B6079;
  --text-on-dark: #F5F1FB;

  --font-heading: 'Frank Ruhl Libre', serif;
  --font-body: 'Rubik', sans-serif;

  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  --shadow-soft: 0 12px 40px rgba(74, 59, 102, 0.10);
  --shadow-soft-lg: 0 24px 60px rgba(74, 59, 102, 0.16);

  --container-width: 1160px;
  --transition-soft: 0.35s cubic-bezier(0.22, 1, 0.36, 1);

}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--ivory);
  line-height: 1.75;
  font-weight: 400;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--deep-purple);
  line-height: 1.28;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 500; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-bottom: 20px; }
h3 { font-size: 1.25rem; margin-bottom: 10px; font-weight: 600; font-family: var(--font-body); }

.center { text-align: center; }
.light { color: var(--text-on-dark) !important; }
.mobile-break { display: none; }

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--smoky-purple-text); /* accessible variant - see note near :root */
  margin-bottom: 14px;
}
.eyebrow-light { color: var(--lilac-300); }

.section-lead {
  color: var(--text-muted);
  max-width: 620px;
  margin: -6px auto 8px;
  font-size: 1.02rem;
}

.skip-link {
  position: absolute;
  right: -999px;
  top: 0;
  background: var(--deep-purple);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 0 10px;
  z-index: 999;
}
.skip-link:focus { right: 0; }

/* =========================================================
   Scroll reveal
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-block;
  padding: 15px 34px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  text-decoration: none;
  font-size: 1rem;
  transition: transform var(--transition-soft), box-shadow var(--transition-soft), background var(--transition-soft);
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}
.btn-primary {
  background: var(--deep-purple);
  color: #fff;
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { background: var(--deep-purple-2); transform: translateY(-3px); box-shadow: var(--shadow-soft-lg); }
.btn-ghost {
  background: transparent;
  color: var(--deep-purple);
  border: 1.5px solid var(--lilac-300);
}
.btn-ghost:hover { background: rgba(201, 179, 227, 0.25); border-color: var(--smoky-purple); }
.btn-full { width: 100%; }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Background is mostly-opaque on its own (0.94), with only a light blur
     layered on top - not a fully transparent glass effect that depends on
     the blur to read correctly. A sticky header's backdrop-filter has to be
     recomputed continuously as content scrolls underneath it, which is a
     known source of scroll jank on phones; keeping the blur radius small
     (6px, was 10px) and the base background already legible without it
     keeps the frosted look while cutting that per-frame cost roughly in
     half. -webkit- prefix added for Safari/iOS support. */
  background: rgba(251, 248, 244, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(139, 122, 161, 0.15);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 18px;
  padding-bottom: 18px;
}
.logo {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--deep-purple);
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-decoration: none;
}
.logo-sub {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.main-nav { display: flex; align-items: center; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
}
.nav-links a {
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 500;
  font-size: 0.94rem;
  position: relative;
  padding-bottom: 4px;
}
.nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: var(--smoky-purple);
  transition: width var(--transition-soft);
}
.nav-links a:not(.nav-cta):hover::after { width: 100%; }
.nav-cta {
  background: var(--deep-purple);
  color: #fff !important;
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-cta:hover { background: var(--deep-purple-2); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--deep-purple);
  display: block;
  transition: var(--transition-soft);
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  padding: 80px 0 40px;
  background: linear-gradient(180deg, var(--lavender-50) 0%, var(--lilac-100) 100%);
  overflow: hidden;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
  min-height: 60vh;
}
.hero-copy { max-width: 560px; position: relative; z-index: 2; }
.hero-text {
  color: var(--text-muted);
  font-size: 1.1rem;
  margin: 22px 0 34px;
  max-width: 480px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-visual {
  position: relative;
  z-index: 2;
  height: 420px;
}
.hero-visual-frame {
  position: absolute;
  inset: 10%;
  border-radius: 46% 54% 60% 40% / 50% 45% 55% 50%;
  background: linear-gradient(160deg, rgba(255,255,255,0.5), rgba(233, 201, 194, 0.35));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255,255,255,0.6);
  animation: float-frame 8s ease-in-out infinite;
}
@keyframes float-frame {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(2deg); }
}

.blob-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.blob {
  position: absolute;
  width: 46vw;
  max-width: 620px;
  min-width: 320px;
}
.blob-a { top: -8%; left: -6%; opacity: 0.55; animation: drift-a 14s ease-in-out infinite; }
.blob-b { bottom: -14%; right: -8%; width: 40vw; opacity: 0.7; animation: drift-b 16s ease-in-out infinite; }
.blob-c { top: 12%; right: 6%; width: 34vw; opacity: 0.5; animation: drift-a 20s ease-in-out infinite reverse; }

@keyframes drift-a {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(10px, -16px) scale(1.03); }
}
@keyframes drift-b {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-14px, 10px) scale(1.04); }
}

.wave-divider {
  display: block;
  width: 100%;
  height: 80px;
  position: relative;
  z-index: 1;
  margin-top: -2px;
}

/* =========================================================
   Why section
   ========================================================= */
.why {
  position: relative;
  padding: 100px 0 20px;
  background: var(--lilac-100);
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 48px;
}
.why-card {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  transition: transform var(--transition-soft), box-shadow var(--transition-soft), background var(--transition-soft);
}
.why-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  background: rgba(255,255,255,0.85);
}
.why-icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
  color: var(--smoky-purple);
  margin-bottom: 16px;
}
.why-icon svg { width: 100%; height: 100%; }
.why-card p { color: var(--text-muted); font-size: 0.95rem; }

.why-grid-4 { grid-template-columns: repeat(4, 1fr); max-width: 1120px; margin-inline: auto; margin-top: 48px; }

/* =========================================================
   About
   ========================================================= */
.about { padding: 110px 0; background: var(--ivory); position: relative; }
.about-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
}
.about-image { position: relative; width: 100%; aspect-ratio: 4/5; }
.about-image::before {
  content: "";
  position: absolute;
  inset: -6% -12% 12% 12%;
  border-radius: 48% 52% 60% 40% / 55% 45% 55% 45%;
  background: linear-gradient(135deg, var(--lilac-300), var(--beige-warm));
  opacity: 0.55;
  z-index: 0;
}
.about-image-shape {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: 42% 58% 63% 37% / 48% 42% 58% 52%;
  background: linear-gradient(150deg, var(--lilac-300), var(--smoky-purple));
  box-shadow: var(--shadow-soft-lg);
}
.about-image-shape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-text p { color: var(--text-muted); margin-bottom: 16px; }
.about-nickname {
  font-family: 'Frank Ruhl Libre', serif;
  font-style: italic;
  /* Accessible variant, at full opacity (was smoky-purple at 0.85 opacity,
     which measured only 2.9:1 on the ivory background - well under the
     4.5:1 AA text minimum). This keeps the same soft, secondary feel
     without the contrast hit. */
  color: var(--smoky-purple-text);
  margin-top: -6px;
}
.about-facts {
  list-style: none;
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.about-facts li {
  padding-right: 26px;
  position: relative;
  color: var(--text-dark);
}
.about-facts li::before {
  content: "";
  position: absolute;
  right: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--smoky-purple);
}

/* =========================================================
   Baking as therapy (signature section)
   ========================================================= */
.baking {
  position: relative;
  padding: 110px 0;
  background: var(--beige-warm);
  overflow: hidden;
}
.flour-texture {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(139, 122, 161, 0.18) 1.5px, transparent 1.5px),
    radial-gradient(rgba(139, 122, 161, 0.12) 1.5px, transparent 1.5px);
  background-size: 46px 46px, 70px 70px;
  background-position: 0 0, 23px 23px;
  opacity: 0.5;
}
.baking-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.baking-visual { position: relative; width: 100%; aspect-ratio: 4/5; }
/* Two real photos at matching scale, in the same organic-mask treatment
   already used for the About portrait (.about-image-shape) — same shape
   language as the rest of the site. The clinic photo sits behind, full
   size, offset diagonally so it reads as a real second photo rather than
   a small badge; the treatment photo sits in front, same size, offset
   the other way so both are clearly visible. */
.baking-shape {
  position: absolute;
  overflow: hidden;
  background: var(--lilac-300);
  cursor: pointer;
  transition: inset 0.6s var(--transition-soft), box-shadow 0.6s var(--transition-soft),
    border-radius 0.6s var(--transition-soft), transform 0.35s var(--transition-soft);
}
.baking-shape img { width: 100%; height: 100%; object-fit: cover; display: block; }
.baking-shape:focus-visible {
  outline: 2px solid var(--deep-purple);
  outline-offset: 6px;
}

/* The two roles below are toggled between the two photo elements on click
   (see initBakingSwap in script.js), so either photo can hold either role —
   the swap animates smoothly because inset/box-shadow/border-radius are
   transitioned above rather than snapping instantly. */
.baking-shape-back {
  inset: 0 20% 20% 0;
  z-index: 0;
  border-radius: 52% 48% 46% 54% / 50% 55% 45% 50%;
  box-shadow: var(--shadow-soft);
}
.baking-shape-front {
  inset: 20% 0 0 20%;
  z-index: 1;
  border-radius: 58% 42% 45% 55% / 55% 48% 52% 45%;
  box-shadow: var(--shadow-soft-lg);
}
/* Whichever photo currently sits behind rises slightly on hover/focus, as an
   invitation to click it forward. */
.baking-shape-back:hover,
.baking-shape-back:focus-visible {
  transform: translateY(-4%);
  box-shadow: var(--shadow-soft-lg);
}
.baking-text p { color: var(--text-muted); margin-bottom: 16px; }

/* =========================================================
   Family support
   ========================================================= */
.family { padding: 100px 0 20px; background: var(--ivory); }
.family-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 44px;
}
.family-quote {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--deep-purple);
  font-size: 1.05rem;
  margin-bottom: 14px !important;
}

/* =========================================================
   Tree of Life — lives entirely inside the About section. It
   grows (trunk → branches → leaves) as the user scrolls through
   About, finishes well before the section ends, then stays frozen
   for the rest of the scroll within the section. Positioned
   absolutely within .about's own box (its nearest positioned
   ancestor) and clipped to that box, so it can never visually
   bleed into the section above or below it.
   ========================================================= */
.tree-of-life {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 3;
  overflow: hidden; /* hard clip: nothing can render outside the About section's box */
}

.tree-svg {
  height: min(84%, 620px);
  width: auto;
  max-width: min(58vw, 360px);
}

.tree-roots path {
  fill: none;
  stroke: var(--smoky-purple);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.28;
}

.tree-trunk {
  fill: none;
  stroke: var(--deep-purple);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.42;
}

.tree-branch {
  fill: none;
  stroke: var(--smoky-purple);
  stroke-linecap: round;
  opacity: 0.36;
}
.tree-branch[data-thickness="thick"] { stroke-width: 3.4; }
.tree-branch[data-thickness="mid"] { stroke-width: 2.6; }
.tree-branch[data-thickness="thin"] { stroke-width: 1.9; }

.tree-leaf {
  opacity: 0;
  fill-opacity: 0.55;
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .tree-trunk, .tree-branch { stroke-dashoffset: 0 !important; }
  .tree-leaf { opacity: 0.7 !important; transform: scale(1) !important; }
}

@media (max-width: 720px) {
  .tree-svg { max-width: min(66vw, 260px); }
}

/* =========================================================
   Process
   ========================================================= */
.process { padding: 100px 0 60px; background: var(--lavender-50); }
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.process-step {
  background: var(--ivory);
  border-radius: var(--radius-md);
  padding: 34px 26px;
  box-shadow: var(--shadow-soft);
  position: relative;
  transition: transform var(--transition-soft);
}
.process-step:hover { transform: translateY(-6px); }
.process-num {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--lilac-300);
  margin-bottom: 14px;
}
.process-step p { color: var(--text-muted); font-size: 0.93rem; }

/* =========================================================
   Services
   ========================================================= */
.services { padding: 90px 0 100px; background: var(--ivory); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 44px;
}
.service-card {
  padding: 30px 30px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--lilac-100), var(--ivory));
  border: 1px solid rgba(139, 122, 161, 0.15);
  transition: transform var(--transition-soft), box-shadow var(--transition-soft);
}
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.service-card p { color: var(--text-muted); font-size: 0.95rem; }

.services-grid-6 { grid-template-columns: repeat(3, 1fr); }
.service-card-baking {
  background: linear-gradient(135deg, var(--beige-warm), var(--lilac-100));
  border-color: rgba(139, 122, 161, 0.25);
  /* Odd card count (7): let this closing, differently-styled card take
     the full row on its own instead of sitting alone in one column. */
  grid-column: 1 / -1;
}
.service-card-baking a {
  color: var(--deep-purple);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--smoky-purple);
}
.service-card-baking a:hover { color: var(--deep-purple-2); }

/* =========================================================
   Testimonials — "wall of moments": real WhatsApp screenshots
   pinned in an asymmetric collage, not a grid of quote cards.
   One large hero + five supporting pieces, gentle overlaps and
   tilts, soft connecting lines, and a staggered scroll-in build
   so the "conversation" assembles gradually and then settles.
   ========================================================= */
.testimonials { position: relative; padding: 100px 0 130px; background: var(--lilac-100); overflow: hidden; }
.testimonials-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 1.05rem;
  margin: 12px auto 0;
  max-width: 480px;
}
/* A small, quiet line-art heart beside the subtitle - same soft, hand-drawn
   register as the site's other inline SVG flourishes (butterfly, blobs),
   not a filled emoji-style icon. */
.subtitle-heart {
  width: 15px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: var(--smoky-purple);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.55;
  transform: translateY(-1px);
}

.testimonials-wall {
  --wall-sage: #C7D8BB;
  --wall-yellow: #F3DA8E;
  --wall-peach: #F1C7A2;
  --wall-pink: #EACAD1;
  position: relative;
  margin-top: 64px;
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

/* Each column stacks its own photos independently (plain flex-column flow,
   no shared grid row-tracks) — so one column's height never depends on a
   neighboring column's, and a shorter column simply ends where its own
   content ends instead of leaving a gap sized to match a taller neighbor. */
.wall-col { display: flex; flex-direction: column; gap: 30px; flex: 1; min-width: 0; }
.wall-col-1 { flex: 1.15; }
.wall-col-2 { flex: 0.85; margin-top: 38px; }
.wall-col-3 { flex: 0.85; }

.wall-connectors { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.wall-line { fill: none; stroke: var(--smoky-purple); stroke-width: 1.5; stroke-dasharray: 3 7; stroke-linecap: round; opacity: 0.28; }
.wall-dot { fill: var(--smoky-purple); opacity: 0.3; }

.wall-item {
  position: relative;
  z-index: 1;
  margin: 0;
  background: var(--ivory);
  padding: 10px 10px 14px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translateY(26px) rotate(var(--r, 0deg)) scale(0.97);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.wall-item img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius-md) - 8px); }

.testimonials-wall.in-view .wall-item { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)) scale(1); }
.testimonials-wall.in-view .wall-item:hover {
  transform: translateY(-4px) rotate(0deg) scale(1.015);
  box-shadow: var(--shadow-soft-lg);
  z-index: 4;
  transition: transform var(--transition-soft), box-shadow var(--transition-soft);
}

/* Staggered build order, left to right across the whole wall (not per
   column) so the "conversation" assembles as one continuous sequence. */
.wall-hero { transition-delay: 0s; }
.wall-voice { transition-delay: 0.1s; }
.wall-parent { transition-delay: 0.2s; }
.wall-self { transition-delay: 0.3s; }
.wall-school { transition-delay: 0.4s; }
.wall-sticky { transition-delay: 0.5s; }

.wall-hero { --r: -1.4deg; }
.wall-voice { --r: 1.6deg; }
.wall-parent { --r: -1.8deg; }
.wall-self { --r: 1deg; }
.wall-school { --r: -1deg; }
.wall-sticky { --r: 0.6deg; }

.wall-tag {
  position: absolute;
  top: -14px;
  right: 18px;
  transform: rotate(-3deg);
  background: var(--lilac-300);
  color: var(--deep-purple);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 16px rgba(74,59,102,0.14);
  z-index: 3;
  white-space: nowrap;
}
.wall-tag-sage { background: var(--wall-sage); }
.wall-tag-yellow { background: var(--wall-yellow); right: auto; left: 18px; transform: rotate(2.5deg); }
.wall-tag-peach { background: var(--wall-peach); }
.wall-tag-pink { background: var(--wall-pink); right: auto; left: 18px; transform: rotate(2deg); }
.wall-tag-lilac { background: var(--lilac-300); }

/* =========================================================
   Site-wide butterfly
   A single small, quiet decorative flourish that travels the
   whole document — not scoped to any one section — from the hero
   down to the lead-capture form at the very end of the page. Its
   document-relative position is set entirely by JS via `transform`
   (never top/left - see script.js for why), in step with overall
   scroll position, so it can never be "ahead" or "behind" of where
   the visitor actually is on the page. It hugs the left
   edge of the site throughout the flight (the quiet margin beside
   the copy, not the text itself), drifting gently rather than
   moving in a straight line, and only curves in toward the "איך
   אפשר לעזור" message field on its final approach. It performs a
   gentle, single half-spin while still gliding in — finished before
   it actually touches down, so landing itself is just a quiet settle,
   not a snap-and-spin. It then freezes there permanently (script.js
   stops updating it) until the page is reloaded. Purely ambient —
   sits below the sticky header, above ordinary section content.
   ========================================================= */
.butterfly-fly {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  will-change: transform, opacity;
  /* top/left stay fixed at 0 forever - all actual movement happens through
     `transform` (translate3d + rotate) in script.js, never by writing new
     top/left values. top/left are layout properties: changing them every
     animation frame would force the browser to re-run layout for the whole
     page on every frame, which is exactly what read as a janky, vibrating
     flight. `transform` is compositor-only, so it stays smooth regardless
     of how much else is happening on the page.
     Deliberately NO CSS transition on transform either: position must
     always be a direct, immediate function of scroll position (smoothed in
     JS instead - see the follow/lerp logic in script.js). A CSS transition
     here would leave it still animating for a moment after the visitor's
     scroll input has already stopped, which reads as the butterfly
     autonomously "launching" itself the rest of the way - exactly the
     effect to avoid. */
}
.bf-wing { fill: var(--lilac-300); opacity: 0.75; }
.bf-antenna { stroke: var(--smoky-purple); stroke-width: 1; stroke-linecap: round; opacity: 0.6; }
.bf-body { fill: var(--smoky-purple); opacity: 0.55; }
.butterfly-wings { transform-origin: 30px 27px; animation: bf-flutter 0.9s ease-in-out infinite; }
/* Once landed there is no more movement at all - wings stop flapping and
   hold their current pose, like folding still on touch-down, rather than
   just flapping slower. */
.butterfly-fly.is-landed .butterfly-wings { animation-play-state: paused; }

@keyframes bf-flutter {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.76); }
}

@media (prefers-reduced-motion: reduce) {
  .wall-item { opacity: 1 !important; transform: rotate(var(--r, 0deg)) !important; transition: none !important; }
  .butterfly-fly { display: none !important; }
}

/* =========================================================
   FAQ
   ========================================================= */
.faq { padding: 100px 0; background: var(--ivory); }
.faq-list {
  max-width: 780px;
  margin: 44px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--lavender-50);
  border-radius: var(--radius-md);
  padding: 20px 26px;
  border: 1px solid rgba(139, 122, 161, 0.12);
}
.faq-item summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--deep-purple);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--smoky-purple);
  margin-right: 12px;
  transition: transform var(--transition-soft);
}
.faq-item[open] summary::after { content: "+"; transform: rotate(45deg); }
.faq-item p { color: var(--text-muted); margin-top: 14px; }

/* =========================================================
   Final CTA
   ========================================================= */
.final-cta {
  position: relative;
  padding: 110px 0;
  background: linear-gradient(160deg, var(--deep-purple) 0%, var(--deep-purple-2) 100%);
  overflow: hidden;
}
.blob-field-dark { opacity: 0.7; }
.final-cta-inner { position: relative; z-index: 2; max-width: 620px; margin: 0 auto; }
.final-cta-text { color: rgba(245, 241, 251, 0.8); margin: 16px auto 36px; max-width: 460px; }

.contact-form {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 34px;
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row-full { grid-column: 1 / -1; }
.form-row label { font-size: 0.85rem; font-weight: 500; color: var(--text-on-dark); }
.form-row input, .form-row textarea {
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: rgba(255,255,255,0.08);
  color: #fff;
  resize: vertical;
}
.form-row input::placeholder, .form-row textarea::placeholder { color: rgba(255,255,255,0.5); }
.form-row input:focus, .form-row textarea:focus {
  outline: none;
  border-color: var(--lilac-300);
  background: rgba(255,255,255,0.14);
}
.contact-form button { grid-column: 1 / -1; }
.form-status { grid-column: 1 / -1; font-size: 0.9rem; color: var(--lilac-300); min-height: 1.2em; text-align: center; }
.form-status a { color: #fff; text-decoration: underline; font-weight: 600; }
.form-status a:hover { color: var(--lilac-300); }
/* Honeypot spam trap: kept in the tab/layout flow (not display:none, which
   spam bots increasingly detect and skip) but positioned off-screen and
   hidden from assistive tech, so real visitors never see or reach it. */
.form-honey {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.contact-alt { margin-top: 26px; color: rgba(245, 241, 251, 0.75); font-size: 0.95rem; }
.contact-alt a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Social badges: quiet outlined circles in the same restrained line-art
   register as the rest of the site's illustrations (butterfly, subtitle
   heart) rather than solid brand-colored icons. */
.social-links {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}
.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(245, 241, 251, 0.32);
  transition: var(--transition-soft);
}
.social-link:hover,
.social-link:focus-visible {
  border-color: rgba(245, 241, 251, 0.7);
  transform: translateY(-3px);
  outline: none;
}
.social-link svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: rgba(245, 241, 251, 0.85);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.social-link svg .social-glyph {
  fill: rgba(245, 241, 251, 0.85);
  stroke: none;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--ivory); padding: 40px 0; border-top: 1px solid rgba(139,122,161,0.15); }
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}
.footer-logo { font-family: var(--font-heading); color: var(--deep-purple); font-size: 1.1rem; }
.footer-links { list-style: none; display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; }
.footer-links a:hover { color: var(--deep-purple); }
.footer-copy { color: var(--text-muted); font-size: 0.85rem; width: 100%; text-align: center; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1000px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid-4 { grid-template-columns: repeat(2, 1fr); max-width: 620px; }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: 1fr; }
  .services-grid-6 { grid-template-columns: repeat(2, 1fr); }
  .family-grid { grid-template-columns: 1fr; }
  .testimonials-wall { flex-direction: column; gap: 26px; }
  .wall-col { margin-top: 0 !important; width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; }
  .wall-connectors { display: none; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { height: 300px; order: -1; }
  .baking-inner { grid-template-columns: 1fr; }
  .baking-visual { max-width: 320px; margin: 0 auto; order: -1; }
}

@media (max-width: 860px) {
  .about-inner { grid-template-columns: 1fr; }
  .about-image { max-width: 320px; margin: 0 auto; }
  .mobile-break { display: block; }

  /* On this single-column layout the About section becomes much taller
     than on desktop (photo, then paragraphs, then the facts list, all
     stacked). The tree of life is normally centered on the *whole*
     section (see .tree-of-life below) - fine on desktop, where it simply
     drifts into the gap beside the photo (see initTreeOfLife in
     script.js), but here that would land it across the running text
     instead. So on mobile/tablet it's repositioned to sit behind the
     paragraph/list text specifically (not the photo above it), and made
     soft and low-contrast - dimmed further and slightly blurred - so it
     reads as a faint, pleasant watermark rather than competing with the
     text for attention. .about-inner is lifted onto its own stacking
     context above it so every line of text still paints crisp and fully
     legible on top. */
  .about-inner { position: relative; z-index: 4; }
  .tree-of-life { align-items: flex-start; padding-top: 575px; }
  .tree-svg { height: 650px; opacity: 0.3; filter: blur(1.5px); }
}

@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background: var(--ivory);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px;
    gap: 18px;
    border-bottom: 1px solid rgba(139,122,161,0.15);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-cta { width: 100%; text-align: center; }
  .why-grid { grid-template-columns: 1fr; }
  .why-grid-4 { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .services-grid-6 { grid-template-columns: 1fr; }
  .family-grid { grid-template-columns: 1fr; }
  .testimonials-wall { gap: 22px; }
  .wall-col { gap: 22px; max-width: 320px; }
  .contact-form { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-links { justify-content: center; }
}

/* On narrow phones the header title ("סמדר צברי - טיפול התנהגותי ואימון
   רגשי") is long enough, next to the hamburger button, that it wraps onto
   a second line at the default 1.5rem size. Scaling it down on small
   screens keeps it on one line; clamp() lets it ease back up toward the
   normal size as soon as there's room (matches the same clamp() pattern
   already used for h1/h2 above), so nothing needs to jump abruptly at the
   breakpoint edge. Only the main title line shrinks - the small subtitle
   underneath already fits on one line at its own (much smaller) size. */
@media (max-width: 480px) {
  /* Floor raised to 1rem (16px) - the usual minimum for comfortably
     readable body-level text - rather than letting it shrink further on
     the narrowest phones. Still fits on one line down to ~360px-wide
     screens (checked directly); only extremely narrow devices below that
     (rare in practice) may wrap again, which is an acceptable trade-off
     against text that's too small to read comfortably. */
  .logo { font-size: clamp(1rem, 3.6vw + 0.16rem, 1.5rem); }
}

/* =========================================================
   Legal pages (accessibility statement, privacy policy) -
   simple readable prose pages, reusing the site's existing
   header/footer and typography rather than a separate design.
   ========================================================= */
.legal-page { padding: 80px 0 100px; background: var(--ivory); min-height: 55vh; }
.legal-page .container { max-width: 760px; }
.legal-page h1 { margin-bottom: 6px; }
.legal-updated { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 40px; }
.legal-page h2 { font-size: 1.25rem; margin-top: 36px; margin-bottom: 12px; }
.legal-page p { color: var(--text-dark); margin-bottom: 14px; }
.legal-page ul { padding-inline-start: 22px; margin-bottom: 14px; }
.legal-page li { color: var(--text-dark); margin-bottom: 8px; }
.legal-page a { color: var(--smoky-purple-text); } /* accessible variant - these are links inside the accessibility statement itself */
.legal-page .back-home {
  display: inline-block;
  margin-top: 30px;
  color: var(--deep-purple);
  font-weight: 600;
  text-decoration: none;
}
.legal-page .back-home:hover { text-decoration: underline; }