/* ==========================================================================
   Kidysport — desktop artboard (Figma 450:572, 1920 × 10822)

   The design is a flat, absolutely-positioned artboard, so it is rebuilt as
   one. `--u` is a single design pixel: 1px at 1920 and wider, proportional
   below, which keeps every coordinate, gap and overlap exactly as drawn.
   Mobile (Figma 457:6) lives in mobile.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* The design unit. Every coordinate on the artboard is `calc(N * var(--u))`,
   so this one length decides how wide the column is — and it is only centred
   if it comes from the width the document can actually use. That turns on the
   scrollbar: a `vw` that counts a gutter the content cannot occupy builds the
   column a scrollbar too wide, and a box wider than the screen, centred, is
   what reads as "everything has slid sideways".

   The `overflow-y: scroll` below is what settles it. With the root's overflow
   not `auto`, viewport units resolve against a viewport whose scrollbars are
   taken to exist, so `100vw` is already the usable width. `--sbw` stays 0px
   for that case; js/unit.js measures the two against each other and fills it
   in only where they disagree. */
:root {
  --sbw: 0px;
  --vwc: calc(100vw - var(--sbw));
  --u: min(1px, calc(var(--vwc) / 1920));
}

/* The unit above is what makes the centring land; these two are the belt to
   that braces. The scrollbar is forced on so its width cannot change between a
   short page and a tall one, which would re-measure `--sbw` mid-session, and
   any stray overflow is clipped rather than scrolled, so nothing can be
   dragged off centre. `clip` on the inline axis rather than `hidden` so that
   axis never becomes a scroll container of its own. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; overflow-y: scroll; }
body { overflow-x: clip; }


body {
  margin: 0;
  background: var(--white);
  color: var(--gray);
  font-family: var(--font-body);
  overflow-x: clip;
}

img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3 { margin: 0; font-weight: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; }

.page {
  position: relative;
  width: calc(1920 * var(--u));
  height: calc(10822 * var(--u));
  margin-inline: auto;
  overflow: clip;                  /* contains the full-bleed art; clip does not
                                      create a scroll container, so the sticky
                                      header still works */
}

.s { position: absolute; left: 0; width: calc(1920 * var(--u)); }
.s > * { position: absolute; }

/* full-bleed art: Figma draws these wider than the artboard */
.bleed {
  left: 50%;
  transform: translateX(-50%);
  width: max(var(--vwc), calc(1920 * var(--u)));
  object-fit: cover;
  z-index: 0;
}

/* ---------------------------------------------------------------- type -- */
.t-h1, .t-h1b {
  font-family: var(--font-head);
  font-weight: 700;
  font-variation-settings: 'wdth' 100;
  font-size: calc(80 * var(--u));
  line-height: calc(86 * var(--u));
}
.t-h1b { font-size: calc(40 * var(--u)); line-height: calc(86 * var(--u)); }
.t-h2  { font-size: calc(40 * var(--u)); line-height: calc(38 * var(--u)); color: var(--gray); }
.t-h2b { font-family: var(--font-head); font-weight: 700; font-variation-settings: 'wdth' 100;
         font-size: calc(40 * var(--u)); line-height: calc(86 * var(--u)); }
.t-body{ font-size: calc(22 * var(--u)); line-height: calc(38 * var(--u)); color: var(--gray); }

.c-orange { color: var(--orange); }
.c-teal   { color: var(--teal); }

/* Figma text frames centre their content vertically. */
.s > .t-h1, .s > .t-h1b, .s > .t-h2, .s > .t-body,
.s > p, .s > h1, .s > h2, .s > h3 {
  display: flex; flex-direction: column; justify-content: center;
}

/* ------------------------------------------------------------ surfaces -- */
.glass {
  --r: calc(30 * var(--u));
  background: var(--glass);
  border: calc(2 * var(--u)) solid var(--white);
  -webkit-backdrop-filter: blur(calc(10 * var(--u)));
  backdrop-filter: blur(calc(10 * var(--u)));
  border-radius: var(--r);
  z-index: 1;
}
/* A backdrop filter is clipped to the border box rather than to the rounded
   one, so over a photograph the corners fill in with blurred white and the card
   reads as a square with four white notches. Clipping the element to the same
   rounded rect is what actually rounds it. Only the cards that are nothing but
   a backdrop, since a clip would cut the content out of the ones that hold any. */
.glass:empty { clip-path: inset(0 round var(--r)); }

.vline  { width: 1px; background: rgba(0,0,0,.12); z-index: 2; }
.hline  { height: 1px; background: rgba(0,0,0,.12); z-index: 2; }

/* -------------------------------------------------------------- button -- */
.btn {
  display: flex; align-items: center; justify-content: center;
  height: calc(67 * var(--u));
  border-radius: calc(30 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: calc(38 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) calc(40 * var(--u)) calc(20 * var(--u)) rgba(0,0,0,.05);
  z-index: 4;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
}
.btn:hover { transform: translateY(calc(-2 * var(--u))); filter: brightness(1.03); }
.btn--orange  { background: var(--orange); color: var(--white); }
.btn--outline {
  background: var(--glass); color: var(--teal);
  border: calc(2 * var(--u)) solid var(--teal);
  -webkit-backdrop-filter: blur(calc(10 * var(--u)));
  backdrop-filter: blur(calc(10 * var(--u)));
}

/* ==========================  HERO  (0 – 1081)  ========================== */
.hero { top: 0; height: calc(1081 * var(--u)); }
.hero__bg     { top: 0; height: calc(1081 * var(--u)); }
.hero__vector { left: calc(779 * var(--u)); top: calc(187 * var(--u)); width: calc(1152 * var(--u)); height: calc(680 * var(--u)); z-index: 1; }
.hero__bird   { left: calc(810.5 * var(--u)); top: calc(185 * var(--u)); width: calc(81.5 * var(--u)); z-index: 3; }

/* header */
.hdr        { left: calc(110 * var(--u)); top: calc(21 * var(--u)); width: calc(1700 * var(--u)); height: calc(111 * var(--u));
              box-shadow: 0 calc(4 * var(--u)) calc(40 * var(--u)) calc(20 * var(--u)) rgba(0,0,0,.05); z-index: 10; }
.hdr__logo  { left: calc(132 * var(--u)); top: calc(38 * var(--u)); width: calc(139 * var(--u)); height: calc(77 * var(--u)); z-index: 12; }
.hdr__logo { overflow: hidden; }
.hdr__logo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.hdr__nav   { left: 0; top: calc(55 * var(--u)); width: calc(1920 * var(--u)); height: calc(50 * var(--u)); z-index: 12; }
.nav-i {
  position: absolute; top: 0; height: calc(50 * var(--u));
  display: flex; align-items: center; justify-content: center;
  font-size: calc(22 * var(--u)); line-height: calc(38 * var(--u));
  color: var(--ink); transition: color .18s ease;
}
.nav-i:hover, .nav-i.is-active { color: var(--orange); }
.nav-i--contact { left: calc(465 * var(--u));  width: calc(117 * var(--u)); }
.nav-i--rec     { left: calc(632 * var(--u));  width: calc(90 * var(--u)); }
.nav-i--faq     { left: calc(772 * var(--u));  width: calc(156 * var(--u)); }
.nav-i--what    { left: calc(978 * var(--u));  width: calc(170 * var(--u)); }
.nav-i--about   { left: calc(1198 * var(--u)); width: calc(67 * var(--u)); }
.nav-i--home    { left: calc(1315 * var(--u)); width: calc(90 * var(--u)); }

.hdr__cta {
  left: calc(1558 * var(--u)); top: calc(43 * var(--u));
  width: calc(224 * var(--u)); height: calc(67 * var(--u));
  background: var(--teal); color: var(--white);
  border-radius: calc(30 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) calc(40 * var(--u)) calc(20 * var(--u)) rgba(0,0,0,.05);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(22 * var(--u)); line-height: calc(38 * var(--u));
  z-index: 12;
}
/* only the label — this must not catch .btn__inner / .btn__blobs */
.hdr__cta > .btn__label {
  position: absolute;
  left: calc(53 * var(--u));      /* Figma 1611 within the 1558 button */
  top: calc(15 * var(--u));       /* Figma 58 within the 43 button  */
  width: calc(155.206 * var(--u));
  height: calc(37 * var(--u));
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.hdr__phone { left: calc(1585.93 * var(--u)); top: calc(61.23 * var(--u)); width: calc(31.86 * var(--u)); z-index: 13; }
.hdr__burger, .m-menu { display: none; }

/* hero copy */
.hero__t1  { left: calc(378 * var(--u)); top: calc(223 * var(--u)); width: calc(533 * var(--u)); height: calc(100 * var(--u)); text-align: right; z-index: 3; }
.hero__t2  { left: calc(378 * var(--u)); top: calc(303 * var(--u)); width: calc(533 * var(--u)); height: calc(100 * var(--u)); text-align: right; z-index: 3; }
.hero__sub { left: calc(292 * var(--u)); top: calc(402 * var(--u)); width: calc(619 * var(--u)); height: calc(50 * var(--u));  text-align: right; z-index: 3; }
.hero__body{ left: calc(110 * var(--u)); top: calc(458 * var(--u)); width: calc(801 * var(--u)); height: calc(208 * var(--u)); text-align: right; z-index: 3; }
.hero__btn1{ left: calc(368 * var(--u)); top: calc(672 * var(--u)); width: calc(267 * var(--u)); }
.hero__btn2{ left: calc(650 * var(--u)); top: calc(672 * var(--u)); width: calc(261 * var(--u)); }

/* The running clip replaces the boy and the ladder that used to stand here as
   two stills. It is rendered on this very artboard — 1920x1080, with the boy
   in its first frame at 1024,168, which is where the still had him — so it is
   laid in at the artboard's own origin and needs no fitting. It carries alpha,
   so the copy and the badge beside it read straight through. */
.hero__film { left: 0; top: 0; width: calc(1920 * var(--u)); height: calc(1080 * var(--u));
              z-index: 3; pointer-events: none; }

/* The second leg, laid in the same way. Its opening frame is a picture of
   this section's own boy, and lining the two up puts the box at 0,2 — so it
   too needs no fitting on this frame. */
.how__film { left: 0; top: calc(2 * var(--u)); width: calc(1920 * var(--u)); height: calc(1080 * var(--u));
             z-index: 3; pointer-events: none; }

.hero__badge    { left: calc(1572 * var(--u)); top: calc(352 * var(--u)); width: calc(238 * var(--u)); height: calc(238 * var(--u)); }
.hero__badge-ic { left: calc(1646 * var(--u)); top: calc(394 * var(--u)); width: calc(89 * var(--u)); z-index: 3; }
.hero__badge-t1 { left: calc(1640 * var(--u)); top: calc(471 * var(--u)); width: calc(101 * var(--u)); height: calc(50 * var(--u)); text-align: center; color: var(--orange); font-weight: 700; z-index: 3; }
.hero__badge-t2 { left: calc(1606 * var(--u)); top: calc(508 * var(--u)); width: calc(169 * var(--u)); height: calc(50 * var(--u)); text-align: center; z-index: 3; }

.hero__stats { left: calc(110 * var(--u)); top: calc(808 * var(--u)); width: calc(892 * var(--u)); height: calc(211 * var(--u)); }
.hero__ic1 { left: calc(204 * var(--u)); top: calc(831 * var(--u)); width: calc(109 * var(--u)); z-index: 3; }
.hero__ic2 { left: calc(502 * var(--u)); top: calc(831 * var(--u)); width: calc(108 * var(--u)); z-index: 3; }
.hero__ic3 { left: calc(790 * var(--u)); top: calc(831 * var(--u)); width: calc(109 * var(--u)); z-index: 3; }
.hero__st1, .hero__st2, .hero__st3 {
  top: calc(931 * var(--u)); width: calc(181 * var(--u)); height: calc(50 * var(--u));
  text-align: center; line-height: calc(28 * var(--u)); color: var(--ink); z-index: 3;
}
.hero__st1 { left: calc(168 * var(--u)); }
.hero__st2 { left: calc(465 * var(--u)); }
.hero__st3 { left: calc(754 * var(--u)); }
.hero__ln1 { left: calc(407 * var(--u)); top: calc(840 * var(--u)); height: calc(147 * var(--u)); }
.hero__ln2 { left: calc(704 * var(--u)); top: calc(840 * var(--u)); height: calc(147 * var(--u)); }

/* .wa is positioned with the persistent chrome at the end of this file */
.wa img { width: 100%; }

/* =====================  איך הטיפול עובד  (1081 – 2165)  ===================== */
.how { top: calc(1081 * var(--u)); height: calc(1084 * var(--u)); }
.how__bg   { top: 0; height: calc(1084 * var(--u)); }
.how__boy  { left: calc(538 * var(--u)); top: calc(36 * var(--u)); width: calc(485 * var(--u)); height: calc(1012 * var(--u)); z-index: 3; }
.how__card { left: calc(1092 * var(--u)); top: calc(166 * var(--u)); width: calc(718 * var(--u)); height: calc(752 * var(--u)); }
.how__t    { left: calc(1130 * var(--u)); top: calc(205 * var(--u)); width: calc(641 * var(--u)); height: calc(100 * var(--u)); text-align: right; z-index: 3; }
.how__sub  { left: calc(1152 * var(--u)); top: calc(304 * var(--u)); width: calc(619 * var(--u)); height: calc(50 * var(--u));  text-align: right; z-index: 3; }
.how__body { left: calc(1152 * var(--u)); top: calc(384 * var(--u)); width: calc(619 * var(--u)); height: calc(372 * var(--u)); text-align: right; z-index: 3; }
.how__btn  { left: calc(1510 * var(--u)); top: calc(776 * var(--u)); width: calc(261 * var(--u)); }

/* ==============  מה זה בעצם ספורט טיפולי  (2165 – 3249)  ============== */
.whatis { top: calc(2165 * var(--u)); height: calc(1084 * var(--u)); }
.whatis__bg   { top: 0; height: calc(1084 * var(--u)); }
.whatis__boy  { left: calc(1207 * var(--u)); top: calc(55 * var(--u)); width: calc(543 * var(--u)); height: calc(973 * var(--u)); z-index: 3; }

.whatis__t1   { left: calc(490 * var(--u)); top: calc(171 * var(--u)); width: calc(533 * var(--u)); height: calc(100 * var(--u)); text-align: right; z-index: 3; }
.whatis__t2   { left: calc(490 * var(--u)); top: calc(251 * var(--u)); width: calc(533 * var(--u)); height: calc(100 * var(--u)); text-align: right; z-index: 3; }
.whatis__body { left: calc(222 * var(--u)); top: calc(351 * var(--u)); width: calc(801 * var(--u)); height: calc(171 * var(--u)); text-align: right; z-index: 3; }

.fcd { width: calc(441 * var(--u)); height: calc(191 * var(--u));
       box-shadow: 0 0 calc(20 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.07); }
.fcd--a { left: calc(110 * var(--u)); top: calc(538 * var(--u)); }
.fcd--b { left: calc(582 * var(--u)); top: calc(543 * var(--u)); }
.fcd--c { left: calc(110 * var(--u)); top: calc(764 * var(--u)); }
.fcd--d { left: calc(582 * var(--u)); top: calc(769 * var(--u)); }

.fic { z-index: 3; }
.fic--a { left: calc(438 * var(--u)); top: calc(589 * var(--u)); width: calc(96 * var(--u)); }
.fic--b { left: calc(910 * var(--u)); top: calc(595 * var(--u)); width: calc(97 * var(--u)); }
.fic--c { left: calc(438 * var(--u)); top: calc(810 * var(--u)); width: calc(96 * var(--u)); }
.fic--d { left: calc(919 * var(--u)); top: calc(808 * var(--u)); width: calc(96 * var(--u)); }

.ftx { width: calc(279 * var(--u)); height: calc(134 * var(--u)); text-align: right;
       line-height: calc(28 * var(--u)); color: var(--ink); z-index: 3; }
.ftx strong { color: var(--teal); font-weight: 700; }
.ftx--a { left: calc(150 * var(--u)); top: calc(578 * var(--u)); }
.ftx--b { left: calc(627 * var(--u)); top: calc(578 * var(--u)); }
.ftx--c { left: calc(150 * var(--u)); top: calc(804 * var(--u)); }
.ftx--d { left: calc(627 * var(--u)); top: calc(804 * var(--u)); }

/* ===========  תוכנית אישית בקבוצה קטנה  (3249 – 4329)  =========== */
.plan { top: calc(3249 * var(--u)); height: calc(1080 * var(--u)); }
.plan__bg   { top: 0; height: calc(1081 * var(--u)); }
.plan__boy  { left: 0; top: calc(-6 * var(--u)); width: calc(890 * var(--u)); height: calc(942 * var(--u)); z-index: 3; }
.plan__card { left: calc(1092 * var(--u)); top: calc(132 * var(--u)); width: calc(718 * var(--u)); height: calc(752 * var(--u)); }
.plan__t    { left: calc(1195 * var(--u)); top: calc(170 * var(--u)); width: calc(533 * var(--u)); height: calc(181 * var(--u)); text-align: right; z-index: 3; }
.plan__list { left: calc(1207 * var(--u)); top: calc(384 * var(--u)); width: calc(533 * var(--u)); height: calc(331 * var(--u)); text-align: right; z-index: 3;
              display: flex; flex-direction: column; justify-content: center; }
.plan__list li { list-style: disc; margin-inline-start: calc(33 * var(--u)); }
.plan__list li + li { margin-top: calc(38 * var(--u)); }
.plan__btn  { left: calc(1461 * var(--u)); top: calc(748 * var(--u)); width: calc(267 * var(--u)); }

/* ============  למה דווקא טיפול בקבוצה?  (4329 – 5410)  ============ */
.why { top: calc(4329 * var(--u)); height: calc(1081 * var(--u)); }
.why__bg   { top: 0; height: calc(1081 * var(--u)); }
.why__t    { left: calc(454 * var(--u)); top: calc(70 * var(--u));  width: calc(1005 * var(--u)); height: calc(163 * var(--u)); text-align: center; z-index: 3; }
.why__body { left: calc(472 * var(--u)); top: calc(207 * var(--u)); width: calc(968 * var(--u));  height: calc(232 * var(--u)); text-align: center; z-index: 3; }

.why__bar { left: calc(339 * var(--u)); top: calc(456 * var(--u)); width: calc(1234 * var(--u)); height: calc(212 * var(--u));
            box-shadow: 0 0 calc(20 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.07); }
.why__ic1 { left: calc(419 * var(--u));  top: calc(476 * var(--u)); width: calc(130 * var(--u)); z-index: 3; }
.why__ic2 { left: calc(731 * var(--u));  top: calc(476 * var(--u)); width: calc(131 * var(--u)); z-index: 3; }
.why__ic3 { left: calc(1050 * var(--u)); top: calc(476 * var(--u)); width: calc(131 * var(--u)); z-index: 3; }
.why__ic4 { left: calc(1367 * var(--u)); top: calc(476 * var(--u)); width: calc(131 * var(--u)); z-index: 3; }
.why__t1, .why__t2, .why__t3, .why__t4 {
  top: calc(592 * var(--u)); height: calc(44 * var(--u)); text-align: center; z-index: 3;
}
.why__t1 { left: calc(381 * var(--u));  width: calc(200 * var(--u)); }
.why__t2 { left: calc(698 * var(--u));  width: calc(199 * var(--u)); }
.why__t3 { left: calc(1015 * var(--u)); width: calc(200 * var(--u)); }
.why__t4 { left: calc(1333 * var(--u)); width: calc(199 * var(--u)); }
.why__ln1 { left: calc(648 * var(--u));  top: calc(489 * var(--u)); height: calc(147 * var(--u)); }
.why__ln2 { left: calc(957 * var(--u));  top: calc(489 * var(--u)); height: calc(147 * var(--u)); }
.why__ln3 { left: calc(1266 * var(--u)); top: calc(489 * var(--u)); height: calc(147 * var(--u)); }


/* ==================  טובה טייכמאן  (5409 – 6435)  ================== */
.founder { top: calc(5409 * var(--u)); height: calc(1026 * var(--u)); }
.founder__bg { left: 50%; transform: translateX(-50%); top: 0;
               width: max(var(--vwc), calc(2077 * var(--u))); height: calc(1026 * var(--u));
               overflow: hidden; z-index: 0; }
.founder__bg img { position: absolute; left: -0.08%; top: 0; width: 166.1%; height: 189.08%; max-width: none; }

.founder__photo { left: calc(1023 * var(--u)); top: calc(116 * var(--u)); width: calc(752 * var(--u)); height: calc(757 * var(--u));
                  border-radius: 50%; overflow: hidden; z-index: 2;
                  box-shadow: calc(4 * var(--u)) calc(4 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)) rgba(255,255,255,.5); }
.founder__photo img { position: absolute; left: -5.69%; top: -3.32%; width: 114%; height: 105.09%; max-width: none; }

.founder__kicker { left: calc(398 * var(--u)); top: calc(243 * var(--u)); width: calc(326 * var(--u));  height: calc(65 * var(--u));  text-align: center; z-index: 3; }
.founder__t      { left: calc(58 * var(--u));  top: calc(263 * var(--u)); width: calc(1005 * var(--u)); height: calc(163 * var(--u)); text-align: center; z-index: 3; }
.founder__body   { left: calc(219 * var(--u)); top: calc(356 * var(--u)); width: calc(683 * var(--u));  height: calc(376 * var(--u)); text-align: center; z-index: 3; }
.founder__btn    { left: calc(356 * var(--u)); top: calc(732 * var(--u)); width: calc(410 * var(--u)); }

/* ====================  שאלות נפוצות  (6435 – 8826)  ==================== */
.faq { top: calc(6435 * var(--u)); height: calc(2391 * var(--u)); }
.faq__grad { left: 50%; transform: translateX(-50%); top: calc(664 * var(--u));
             width: max(var(--vwc), calc(2016 * var(--u))); height: calc(1727 * var(--u));
             background: linear-gradient(180deg, #f0f7fd 0%, #fbfbfd 50%, #edf6fd 100%); z-index: 0; }
.faq__hero { top: 0; height: calc(736 * var(--u)); z-index: 1; }
.faq__t    { left: calc(960 * var(--u));  top: calc(188 * var(--u)); width: calc(750 * var(--u)); height: calc(181 * var(--u)); text-align: right; z-index: 3; }
.faq__sub  { left: calc(1090 * var(--u)); top: calc(407 * var(--u)); width: calc(620 * var(--u)); height: calc(61 * var(--u));  text-align: right; z-index: 3; }
.faq__bird { left: calc(1039 * var(--u)); top: calc(468 * var(--u)); width: calc(81.5 * var(--u)); z-index: 3; }

.faq__list { left: calc(110 * var(--u)); top: calc(775 * var(--u)); width: calc(1700 * var(--u)); z-index: 3; }
.fq {
  background: var(--white);
  border-radius: calc(20 * var(--u));
  box-shadow: 0 calc(5 * var(--u)) calc(10 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.07);
  margin-bottom: calc(30 * var(--u));
  overflow: hidden;
}
.fq summary {
  position: relative; display: flex; align-items: center;
  height: calc(133 * var(--u));
  padding-inline-start: calc(45 * var(--u));   /* right in RTL — Figma 1765 */
  padding-inline-end: calc(170 * var(--u));    /* left  in RTL — clears the chevron */
  cursor: pointer; list-style: none;
}
.fq summary::-webkit-details-marker { display: none; }
.fq__q  { flex: 1; text-align: right; }
.fq__ic { position: absolute; left: calc(74 * var(--u)); top: calc(28 * var(--u)); width: calc(78.88 * var(--u)); }
.fq[open] .fq__ic { top: calc(31 * var(--u)); }
.fq .fq__ic--o { display: none; }
.fq[open] .fq__ic--o { display: block; }
.fq[open] .fq__ic--c { display: none; }
.fq[open] summary { height: calc(145 * var(--u)); }
.fq__a {
  background: var(--bg);
  border-radius: calc(20 * var(--u));
  margin: 0 calc(45 * var(--u)) calc(50 * var(--u));
  min-height: calc(153 * var(--u));        /* Figma inner panel */
  padding: calc(18 * var(--u)) calc(48 * var(--u)) 0;
  text-align: right;
}

/* ================  יש לכם שאלה נוספת?  (7751 – 8863)  ================ */
.moreq { top: calc(7751 * var(--u)); height: calc(1112 * var(--u)); }
.moreq__ellipse { left: calc(-12 * var(--u)); top: 0; width: calc(1256 * var(--u)); height: calc(1002 * var(--u)); z-index: 1; }
.moreq__photo   { left: calc(206 * var(--u)); top: calc(449 * var(--u)); width: calc(1550 * var(--u)); height: calc(482 * var(--u));
                  border-radius: calc(20 * var(--u)); overflow: hidden; z-index: 2; }
.moreq__photo img { position: absolute; left: -0.03%; top: -30.71%; width: 100.05%; height: 181.12%; max-width: none; }
.moreq__veil {
  position: absolute; inset: 0; border-radius: calc(20 * var(--u));
  background:
    radial-gradient(77.5% 24.1% at 50% 50%, rgba(255,255,255,1) 0%, rgba(235,235,235,.8) 54.3%, rgba(185,252,255,.2) 100%);
}
.moreq__photo::after {
  content: ''; position: absolute; inset: 0; border-radius: calc(20 * var(--u));
  background: rgba(255,255,255,.44); mix-blend-mode: lighten;
}
.moreq__boy  { left: calc(1153 * var(--u)); top: calc(238 * var(--u)); width: calc(491.886 * var(--u)); height: calc(874 * var(--u)); z-index: 4; }
.moreq__t    { left: calc(330 * var(--u)); top: calc(531 * var(--u)); width: calc(750 * var(--u)); height: calc(181 * var(--u)); text-align: right; z-index: 5; }
.moreq__sub  { left: calc(382 * var(--u)); top: calc(665 * var(--u)); width: calc(620 * var(--u)); height: calc(61 * var(--u));  text-align: right; z-index: 5; }
.moreq__btn1 { left: calc(735 * var(--u)); top: calc(732 * var(--u)); width: calc(267 * var(--u)); z-index: 5; }
.moreq__btn2 { left: calc(444 * var(--u)); top: calc(732 * var(--u)); width: calc(261 * var(--u)); z-index: 5; }
/* He lowers the hoop while you point at him — on the wide board, the only one
   with a pointer to ask with. */
.moreq__boy { display: block; }
/* The hoop coming down. The clip is cropped to his own ink, so the canvas is
   laid over the still at the size that ink comes out: 349 by 657 at (1193, 324),
   which is where the still puts him. Placed against the still's own box, which
   is what it sits inside. */
.moreq__hoop {
  position: absolute;
  left: calc(32.9 * var(--u)); top: calc(80 * var(--u));
  width: calc(362.8 * var(--u)); height: calc(673.4 * var(--u));
  display: none; pointer-events: none;
}
.moreq__boy.is-playing > .moreq__hoop { display: block; }
.moreq__boy.is-playing > img { opacity: 0; }
.moreq__boy > img { width: 100%; height: 100%; object-fit: contain; display: block; }


/* =====================  יצירת קשר  (8826 – 9773)  ===================== */
.contact { top: calc(8826 * var(--u)); height: calc(947 * var(--u)); }
.contact__bg { top: 0; height: calc(947 * var(--u)); }

.contact__panel  { left: calc(110 * var(--u)); top: calc(-11 * var(--u)); width: calc(718 * var(--u)); height: calc(880 * var(--u)); }
.contact__kicker { left: calc(212 * var(--u)); top: calc(54 * var(--u));  width: calc(533 * var(--u)); height: calc(49 * var(--u));  text-align: center; z-index: 3; }
.contact__t      { left: calc(181 * var(--u)); top: calc(53 * var(--u));  width: calc(595 * var(--u)); height: calc(181 * var(--u)); text-align: center; z-index: 3; }
.contact__lead   { left: calc(212 * var(--u)); top: calc(188 * var(--u)); width: calc(533 * var(--u)); height: calc(137 * var(--u)); text-align: center; z-index: 3; }

.contact__form { left: calc(158 * var(--u)); top: calc(355 * var(--u)); width: calc(618 * var(--u)); height: calc(466 * var(--u)); z-index: 2; }
.fld {
  position: absolute; display: flex; align-items: center;
  background: var(--white); border-radius: calc(10 * var(--u));
  box-shadow: 0 calc(5 * var(--u)) calc(10 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.07);
  padding-inline: calc(12 * var(--u)) calc(20 * var(--u));
}
.fld > .ico { position: relative; width: calc(34 * var(--u)); flex: none; order: 0; margin-inline-end: calc(12 * var(--u)); }
.fld input, .fld textarea {
  order: 1; flex: 1; border: 0; background: none; outline: none; width: 100%;
  font-family: var(--font-body);
  font-size: calc(22 * var(--u)); line-height: calc(38 * var(--u));
  color: var(--gray); text-align: right; resize: none;
}
.fld ::placeholder { color: var(--gray); opacity: 1; }
.fld--name  { left: calc(322 * var(--u)); top: calc(21 * var(--u));  width: calc(279 * var(--u)); height: calc(59 * var(--u)); }
.fld--phone { left: calc(13 * var(--u));  top: calc(21 * var(--u));  width: calc(279 * var(--u)); height: calc(59 * var(--u)); }
.fld--mail  { left: calc(13 * var(--u));  top: calc(100 * var(--u)); width: calc(588 * var(--u)); height: calc(59 * var(--u)); }
.fld--age   { left: calc(13 * var(--u));  top: calc(179 * var(--u)); width: calc(588 * var(--u)); height: calc(59 * var(--u)); }
.fld--about { left: calc(13 * var(--u));  top: calc(258 * var(--u)); width: calc(588 * var(--u)); height: calc(97 * var(--u)); align-items: flex-start; padding-block: calc(12 * var(--u)); }

.contact__submit { left: calc(335 * var(--u)); top: calc(732 * var(--u)); width: calc(267 * var(--u)); }

.contact__det   { left: calc(1314 * var(--u)); top: calc(436 * var(--u)); width: calc(444 * var(--u)); height: calc(398 * var(--u)); }
.contact__det-t { left: calc(1356 * var(--u)); top: calc(474 * var(--u)); width: calc(359 * var(--u)); height: calc(71 * var(--u)); text-align: center; z-index: 3; }
.contact__d1 { left: calc(1481 * var(--u)); top: calc(568 * var(--u)); width: calc(166 * var(--u)); height: calc(38 * var(--u)); text-align: right; z-index: 3; }
.contact__d2 { left: calc(1376 * var(--u)); top: calc(639 * var(--u)); width: calc(271 * var(--u)); height: calc(38 * var(--u)); text-align: right; z-index: 3; }
.contact__d3 { left: calc(1376 * var(--u)); top: calc(706 * var(--u)); width: calc(271 * var(--u)); height: calc(75 * var(--u)); text-align: right; z-index: 3; }
.contact__di1 { left: calc(1673 * var(--u)); top: calc(561 * var(--u)); width: calc(50 * var(--u)); z-index: 3; }
.contact__di2 { left: calc(1673 * var(--u)); top: calc(636 * var(--u)); width: calc(50 * var(--u)); z-index: 3; }
.contact__di3 { left: calc(1673 * var(--u)); top: calc(705 * var(--u)); width: calc(50 * var(--u)); z-index: 3; }

/* =======================  FOOTER  (9621 – 10822)  ======================= */
/* The boy leans out of the top of this block on purpose, so the footer has to
   sit above whatever section it overlaps. It cannot do that on its own z-index:
   `translate` further down makes .foot a stacking context, which traps the boy's
   own z-index inside it, and the whole footer then loses to anything outside
   that stacks higher — on מה אנחנו עושים that is the CTA's clip at 1, which
   sliced his head off at exactly the section boundary. 5 clears the clip while
   staying under the floating WhatsApp button (50) and the header (60). */
.foot { top: calc(9621 * var(--u)); height: calc(1201 * var(--u)); z-index: 5; }
/* The backdrop is its own rectangle in the frame and it does not begin where
   the footer begins: 450:573 places it at 9773 against a footer starting at
   9621, and the boy at 450:820 stands at 9673 — a hundred above it. That
   hundred is the whole point of the block; it is what makes him peek over the
   section above instead of standing in a band of his own. Start the backdrop
   at the footer's own top and he is swallowed by it.

   One rule for all six pages, deliberately: this drifted before because each
   sheet restated it and the home page had no modifier class to restate it on.
   The frame draws the same footer everywhere, so there is nothing to say per
   page. 959 is the rectangle's own height, which leaves the credit line at the
   bottom on plain ground exactly as the frame does. Mobile hides this element
   and pins a sticky backdrop instead, so these numbers are desktop-only. */
.foot__bg   { top: calc(152 * var(--u)); height: calc(959 * var(--u)); z-index: -1; }
.foot__bird { left: calc(776 * var(--u)); top: calc(195 * var(--u)); width: calc(81.5 * var(--u)); z-index: 3; }
.foot__t    { left: calc(694 * var(--u)); top: calc(231 * var(--u)); width: calc(533 * var(--u)); height: calc(100 * var(--u)); text-align: center; z-index: 3; }
.foot__boy  { left: calc(375 * var(--u)); top: calc(52 * var(--u));  width: calc(306 * var(--u)); height: calc(459 * var(--u)); z-index: 2; }

.fc { width: calc(398 * var(--u)); height: calc(398 * var(--u)); top: calc(403 * var(--u)); }
.fc--branch { left: calc(110 * var(--u));  width: calc(399 * var(--u)); }
.fc--info   { left: calc(544 * var(--u)); }
.fc--nav    { left: calc(977 * var(--u)); }
.fc--brand  { left: calc(1410 * var(--u)); width: calc(399 * var(--u)); }
.fc__t { top: calc(420 * var(--u)); width: calc(261 * var(--u)); height: calc(59 * var(--u)); text-align: center; z-index: 3; }
.fc__t--branch { left: calc(179 * var(--u)); }
.fc__t--info   { left: calc(612 * var(--u)); }
.fc__t--nav    { left: calc(1045 * var(--u)); }

.br { height: calc(38 * var(--u)); text-align: right; z-index: 3; }

/* Group 131 in the file: the five addresses fit a card the same height as its
   three siblings, so the rows sit 56 apart rather than 66 and all five run to
   the same right edge at 445. */
.br--a { left: calc(143 * var(--u)); top: calc(513 * var(--u)); width: calc(302 * var(--u)); }
.br--b { left: calc(143 * var(--u)); top: calc(569 * var(--u)); width: calc(302 * var(--u)); }
.br--c { left: calc(143 * var(--u)); top: calc(625 * var(--u)); width: calc(302 * var(--u)); }
.br--d { left: calc(143 * var(--u)); top: calc(681 * var(--u)); width: calc(302 * var(--u)); }
.br--e { left: calc(143 * var(--u)); top: calc(737 * var(--u)); width: calc(302 * var(--u)); }
.hline--b1 { left: calc(143 * var(--u)); top: calc(560 * var(--u)); width: calc(332 * var(--u)); }
.hline--b2 { left: calc(143 * var(--u)); top: calc(616 * var(--u)); width: calc(332 * var(--u)); }
.hline--b3 { left: calc(143 * var(--u)); top: calc(672 * var(--u)); width: calc(332 * var(--u)); }
.hline--b4 { left: calc(143 * var(--u)); top: calc(728 * var(--u)); width: calc(332 * var(--u)); }

.inf { text-align: right; z-index: 3; }
.inf--a { left: calc(681 * var(--u)); top: calc(513 * var(--u)); width: calc(166 * var(--u)); height: calc(38 * var(--u)); }
.inf--b { left: calc(576 * var(--u)); top: calc(587 * var(--u)); width: calc(271 * var(--u)); height: calc(38 * var(--u)); }
.inf--c { left: calc(576 * var(--u)); top: calc(664 * var(--u)); width: calc(271 * var(--u)); height: calc(75 * var(--u)); }
.ifi { width: calc(50 * var(--u)); z-index: 3; }
.ifi--a { left: calc(857 * var(--u)); top: calc(505 * var(--u)); }
.ifi--b { left: calc(857 * var(--u)); top: calc(580 * var(--u)); }
.ifi--c { left: calc(857 * var(--u)); top: calc(658 * var(--u)); }
.hline--i1 { left: calc(576 * var(--u)); top: calc(567 * var(--u)); width: calc(332 * var(--u)); }
.hline--i2 { left: calc(576 * var(--u)); top: calc(647 * var(--u)); width: calc(332 * var(--u)); }

.fn { height: calc(50 * var(--u)); text-align: center; color: var(--ink); z-index: 3;
      display: flex; align-items: center; justify-content: center; }
.fn:hover { color: var(--orange); }
.fn--a { left: calc(1206 * var(--u)); top: calc(487 * var(--u)); width: calc(90 * var(--u)); }
.fn--b { left: calc(1229 * var(--u)); top: calc(535 * var(--u)); width: calc(67 * var(--u)); }
.fn--c { left: calc(1126 * var(--u)); top: calc(583 * var(--u)); width: calc(170 * var(--u)); }
.fn--d { left: calc(1140 * var(--u)); top: calc(631 * var(--u)); width: calc(156 * var(--u)); }
.fn--e { left: calc(1206 * var(--u)); top: calc(679 * var(--u)); width: calc(90 * var(--u)); }
.fn--f { left: calc(1179 * var(--u)); top: calc(727 * var(--u)); width: calc(117 * var(--u)); }
.fv { left: calc(1300 * var(--u)); width: calc(6 * var(--u)); z-index: 3; }
.fv--a { top: calc(518 * var(--u)); }
.fv--b { top: calc(566 * var(--u)); }
.fv--c { top: calc(614 * var(--u)); }
.fv--d { top: calc(662 * var(--u)); }
.fv--e { top: calc(710 * var(--u)); }
.fv--f { top: calc(758 * var(--u)); }

.fc__logo { left: calc(1517 * var(--u)); top: calc(519 * var(--u)); width: calc(186 * var(--u)); height: calc(103 * var(--u)); object-fit: cover; object-position: top center; z-index: 3; }
.fc__tag  { left: calc(1431 * var(--u)); top: calc(612 * var(--u)); width: calc(357 * var(--u)); height: calc(124 * var(--u)); text-align: center; color: var(--ink); z-index: 3; }

.foot__bar   { left: calc(110 * var(--u)); top: calc(910 * var(--u)); width: calc(1699 * var(--u)); height: calc(119 * var(--u)); }
.foot__bar-t { left: calc(298 * var(--u)); top: calc(922 * var(--u)); width: calc(1325 * var(--u)); height: calc(100 * var(--u)); text-align: center; z-index: 3; }
.foot__credit{ left: calc(800 * var(--u)); top: calc(1143 * var(--u)); width: calc(321 * var(--u)); height: calc(37 * var(--u)); text-align: center; z-index: 3; }
/* The credit is a link out to Yudit's own site. At rest it has to read exactly
   as the frame draws it — same colour, no underline — so the anchor inherits
   rather than bringing its own; the underline is kept for hover and for
   keyboard focus, which is the only signal a link has that it is one. */
.foot__credit a { color: inherit; text-decoration: none; }
.foot__credit a:hover,
.foot__credit a:focus-visible { text-decoration: underline; }

/* =====================  the stills the clips land on  =====================
   The boy used to leap between the sections on a canvas of his own, shrinking
   and tilting through each gap. He does not any more: the two clips carry him
   from the hero to the ball, and where they leave him he stays. Each section
   simply shows its own pose again.

   Two of those poses are marks rather than pictures while a clip is running.
   The one in איך הטיפול עובד is where the first clip lands and the second one
   starts, so it is never drawn — both clips have a boy of their own there.
   The one in מה זה בעצם ספורט טיפולי is where the second lands, so it is held
   back until the clip reaches it and then shown, which is the same picture in
   the same place. Both stay visible without JS, and with reduced motion, where
   the clips hold their first frame. */
.js-clips .how__boy { visibility: hidden; }
.js-clips .whatis__boy { visibility: hidden; }

/* ------------------------------------------------- the swing, on hover ----
   The boy on the swing is a still until you point at him, and then he swings
   for as long as you stay. The clip carries this section's own backdrop as
   well as the boy, so it stands in for the whole picture rather than for the
   figure alone — which is why it sits where the backdrop sits and the cut-out
   steps aside underneath it.

   The cut-out fades rather than hiding: it is the thing being pointed at, and
   something with `visibility: hidden` stops taking the pointer, which would
   end the hover the instant it began and leave the swing flickering. */
.plan__film {
  left: 50%; transform: translateX(-50%);
  top: 0; width: max(var(--vwc), calc(1920 * var(--u)));
  height: calc(1081 * var(--u));
  z-index: 0; display: none; pointer-events: none;
}
/* This one is a plain loop, not a scrub, so it plays as a video rather than as
   a sequence of stills. Stills are what scrubbing needs — seeking a video on
   every scroll step stalls — but stepping stills for a loop means stepping
   them on a timer, and a timer that can afford the frames runs at a fraction
   of the clip's own rate. Thirty stills at eight a second is what read as
   stuttering. The browser plays the file at its own frame rate for free. */
.plan__film__v {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.plan.is-swinging .plan__film { display: block; }
.plan.is-swinging .plan__boy { opacity: 0; }
.plan__boy { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* --------------------------------------------------------------------------
   Single-line runs.
   Google Sans Flex ships no Hebrew glyphs, so Hebrew body copy resolves to the
   platform UI font. On Windows that is Segoe UI, which is what the Figma file
   rendered with — but it lands 1px over some frames, wrapping a line Figma
   keeps whole. These frames are one line in the design, so hold them to one.
   -------------------------------------------------------------------------- */
.hero__sub,
.how__sub,
.founder__kicker,
.faq__t span,
.contact__kicker { white-space: nowrap; }

/* Figma ships a taller crop of the contact backdrop for mobile; desktop hides it. */
.contact__bg-m { display: none; }

/* ==========================================================================
   Icons with a hover state

   Each icon ships as a pair: the resting art (teal) and a twin where one
   element is picked out in orange. Both layers are stacked and cross-faded,
   so the swap costs nothing at hover time and cannot flash an unloaded image.
   ========================================================================== */

/* No `position` here: inside a section .s > * already makes it absolute, which
   is the containing block .ico__on needs. Declaring it would tie on specificity
   with `.s > *` and win on source order, knocking every icon out of place. */
.ico { display: block; line-height: 0; --on: 0; }
.ico > img { width: 100%; height: auto; }
/* The two drawings are one switch, not a stack: as the coloured one arrives the
   plain one leaves. Fading the coloured art in over the resting art leaves both
   on screen at once, and since they are line work on transparency the teal
   shows through wherever the orange does not cover it exactly — the lines read
   doubled. `--on` is set by whatever triggers the icon, and both layers read it. */
.ico > img:not(.ico__on) { opacity: calc(1 - var(--on)); transition: opacity .18s ease; }
/* The twin has to land on the resting drawing exactly. Stretched to the box
   instead — `inset: 0` with a height — it takes the box's aspect while the
   drawing under it keeps its own, and on any board where the two differ the
   coloured art smears as it fades in. Pinned to the top-left at the same width,
   auto height, it is the same picture in the same place on every board. */
.ico > .ico__on {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: auto;
  opacity: var(--on);
  transition: opacity .18s ease;
}

/* the icon itself */
.ico:hover { --on: 1; }

/* the whole form row lights its icon */
.fld:hover > .ico,
.fld:focus-within > .ico { --on: 1; }

/* the four "מה זה בעצם" cards light the icon that belongs to them */
.fcd--a:hover ~ .fic--a,
.fcd--b:hover ~ .fic--b,
.fcd--c:hover ~ .fic--c,
.fcd--d:hover ~ .fic--d { --on: 1; }

/* the stat bars light every icon they contain */
.hero__stats:hover ~ .hero__ic1,
.hero__stats:hover ~ .hero__ic2,
.hero__stats:hover ~ .hero__ic3,
.why__bar:hover ~ .why__ic1,
.why__bar:hover ~ .why__ic2,
.why__bar:hover ~ .why__ic3,
.why__bar:hover ~ .why__ic4 { --on: 1; }

/* the contact / footer detail cards light their rows */
.contact__det:hover ~ .contact__di1,
.contact__det:hover ~ .contact__di2,
.contact__det:hover ~ .contact__di3,
.fc--info:hover ~ .ifi--a,
.fc--info:hover ~ .ifi--b,
.fc--info:hover ~ .ifi--c { --on: 1; }

/* the hero badge */
.hero__badge:hover ~ .hero__badge-ic { --on: 1; }

@media (prefers-reduced-motion: reduce) {
  .ico > img { transition: none; }
}

/* Touch screens have no hover; keep the resting art and skip the extra fetch. */
@media (hover: none) {
  .ico > .ico__on { display: none; }.ico > img:not(.ico__on) { --on: 1; }
}

/* ==========================================================================
   Persistent chrome

   The header and the WhatsApp button live outside .page so that no ancestor
   overflow or transform can trap them, and so they survive the whole scroll.
   Inside .site-hdr every child keeps the exact coordinate Figma gives it.
   ========================================================================== */

/* How far down the bar reaches: it starts at 21 and stands 111 tall, so 132 is
   its lower edge. Everything that has to clear the header measures off this,
   which is also why it is declared rather than repeated — the mobile bar is
   shorter and only has to change here. */
:root { --hdr-bottom: calc(132 * var(--u)); }

/* Landing on an anchor puts the target's top at the top of the window, which is
   underneath the bar. This lifts every such landing clear of it, for the browser's
   own hash navigation and for the smooth-scroll handler alike. */
html { scroll-padding-top: calc(var(--hdr-bottom) + 24 * var(--u)); }

.site-hdr {
  position: sticky;
  top: 0;
  height: 0;                       /* children are absolute; no layout box */
  z-index: 60;
}
.site-hdr > * { position: absolute; }

.wa {
  position: fixed;
  /* physically bottom-right, whatever the text direction */
  right: max(16px, calc(41 * var(--u)));
  bottom: max(16px, calc(41 * var(--u)));
  left: auto; top: auto;
  width: calc(108 * var(--u));
  z-index: 50;
}

/* mobile-only band that fills the gap under the hero (Figma 457:319) */
.hero__strip { display: none; }

/* Frame-specific copy: Figma writes some blocks differently per breakpoint. */
.on-mobile { display: none; }


/* ==========================================================================
   Button hover states  (Figma 952:268 and 952:330)

   Colour rules from the design:
     orange fill   -> teal fill
     teal fill     -> orange fill
     teal outline  -> teal fill, white label
     bare teal icon-> teal disc, white icon

   Motion: four circular blobs sit below the button and rise in sequence. An
   SVG gooey filter fuses them into a single liquid front, so the leading edge
   ripples instead of sweeping flat. Nothing is visible until hover, because
   the blobs park outside .btn__inner, which clips them.
   ========================================================================== */

/* No `position` here — the buttons are already absolutely placed by `.s > *`
   or `.site-hdr > *`. Declaring it would tie on specificity and win on source
   order, moving every button into normal flow. (Same trap as `.ico`.) */
.btn__label { position: relative; z-index: 2; transition: color .4s ease; }

.btn__inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;              /* parks the blobs out of sight at rest */
  border-radius: inherit;
  pointer-events: none;
}

/* separate container: Firefox breaks overflow clipping on the filtered node */
.btn__blobs { position: relative; display: block; height: 100%; filter: url("#goo"); }

.btn__blob {
  position: absolute;
  top: calc(2 * var(--u));
  width: 25%;
  height: 100%;
  border-radius: 100%;
  transform: translate3d(0, 150%, 0) scale(1.4);
  transition: transform .45s;
}
.btn__blob:nth-child(1) { left: 0;   transition-delay: 0s;    }
.btn__blob:nth-child(2) { left: 30%; transition-delay: .08s;  }
.btn__blob:nth-child(3) { left: 60%; transition-delay: .16s;  }
.btn__blob:nth-child(4) { left: 90%; transition-delay: .24s;  }

.btn:hover  .btn__blob, .btn:focus-visible  .btn__blob,
.hdr__cta:hover .btn__blob, .hdr__cta:focus-visible .btn__blob {
  transform: translateZ(0) scale(1.4);
}

/* colour pairs from Figma 952:268 */
.btn--orange  .btn__blob { background: var(--teal); }
.btn--teal    .btn__blob,
.hdr__cta     .btn__blob { background: var(--orange); }
.btn--outline .btn__blob { background: var(--teal); }

.btn--outline:hover .btn__label,
.btn--outline:focus-visible .btn__label { color: var(--white); }

/* the header CTA icon rides above the fill */
.hdr__phone { z-index: 14; }

/* the old lift would fight the fill */
.btn:hover { transform: none; filter: none; }

.goo-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
/* --------------------------------------------------------------------------
   Circular icon buttons: the disc grows from the centre (reference clip 2)
   -------------------------------------------------------------------------- */

/* FAQ chevrons — geometry taken straight from the Figma export:
   circle cx 51.4404 cy 46 r 39.4404/39 inside a 102.881 x 102 box. */
.fq__ic {
  position: absolute;
  left: calc(62 * var(--u));
  top: calc(21 * var(--u));
  width: calc(102.881 * var(--u));
  height: calc(102 * var(--u));
  overflow: visible;
  filter: drop-shadow(0 calc(5 * var(--u)) calc(5 * var(--u)) rgba(0,0,0,.07));
}
.fq[open] .fq__ic { top: calc(24 * var(--u)); }

.fq__disc { fill: var(--white); stroke: var(--teal); stroke-width: 1; }
.fq[open] .fq__disc { fill: var(--teal); stroke: none; }

.fq__fill {
  fill: var(--teal);
  transform-box: view-box;
  transform-origin: 51.4404px 46px;
  transform: scale(0);
  transition: transform .34s cubic-bezier(.34, 1.32, .64, 1);
}
.fq[open] .fq__fill { fill: var(--orange); }
.fq summary:hover .fq__fill,
.fq summary:focus-visible .fq__fill { transform: scale(1); }

.fq__chev {
  fill: none;
  stroke: var(--teal);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke .24s ease .08s;
}
.fq[open] .fq__chev { stroke: var(--white); }
.fq summary:hover .fq__chev { stroke: var(--white); }
.fq .fq__chev--up   { display: none; }
.fq[open] .fq__chev--up   { display: block; }
.fq[open] .fq__chev--down { display: none; }

/* Mobile hamburger — bare teal strokes at rest, teal disc on press/hover */
.hdr__burger { overflow: visible; }
.burger__disc {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(64 * var(--u)); height: calc(64 * var(--u));
  margin: calc(-32 * var(--u)) 0 0 calc(-32 * var(--u));
  border-radius: 50%;
  background: var(--teal);
  transform: scale(0);
  transition: transform .3s cubic-bezier(.34, 1.32, .64, 1);
  pointer-events: none;
}
.hdr__burger:hover .burger__disc,
.hdr__burger:focus-visible .burger__disc,
.hdr__burger[aria-expanded="true"] .burger__disc { transform: scale(1); }

.burger__ic { position: relative; width: 100%; height: auto; display: block; }
.burger__ic path {
  stroke: var(--teal);
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke .24s ease .06s;
}
.hdr__burger:hover .burger__ic path,
.hdr__burger:focus-visible .burger__ic path,
.hdr__burger[aria-expanded="true"] .burger__ic path { stroke: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .btn__blob, .fq__fill, .burger__disc { transition: none; }
}

/* ---- "רוצים לבדוק אם התהליך מתאים" -------------------------------------
   One block, drawn identically on מה אנחנו עושים and on המלצות, so it lives
   here rather than inside either page's sheet. The clip is the card itself,
   not the whole band: measured against the frame's art, its rounded card runs
   the full width of the frame and sits 48 down, while the card in the section
   sits at 40,78 and is 1841 wide. Scaling the one onto the other puts the clip
   at 40,4 by 1841x767 — the same 2.4 aspect, so nothing is cropped, and its
   white margin lands on the section's own white surround. */
.do-cta__bg  { left: 0; top: 0; width: calc(1920 * var(--u)); height: calc(768 * var(--u));
               object-fit: cover; z-index: 0; }
.do-cta__t   { left: calc(95 * var(--u)); top: calc(276 * var(--u));
               width: calc(1115 * var(--u)); height: calc(86 * var(--u));
               font-size: calc(60 * var(--u)); line-height: calc(86 * var(--u));
               text-align: right; z-index: 3; }
.do-cta__sub { left: calc(450 * var(--u)); top: calc(378 * var(--u));
               width: calc(800 * var(--u)); height: calc(38 * var(--u));
               font-size: calc(40 * var(--u)); line-height: calc(38 * var(--u));
               text-align: center; color: var(--ink); z-index: 3; }
.do-cta__btn { left: calc(134 * var(--u)); top: calc(474 * var(--u));
               width: calc(267 * var(--u)); height: calc(67 * var(--u));
               border-radius: calc(30 * var(--u));
               font-size: calc(22 * var(--u)); z-index: 3; }
.do-cta > .film, .rec-cta > .film { position: absolute; left: calc(40 * var(--u)); top: calc(4 * var(--u));
                  width: calc(1841 * var(--u)); height: calc(767 * var(--u)); z-index: 1; }

/* ---- clip stages -----------------------------------------------------------
   A numbered still sequence painted into a canvas, used as a backdrop on
   מה אנחנו עושים and on אודות. Where each one sits is a per-page decision; this
   is the part they all share. */
.film { overflow: hidden; }
.film__still, .film__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* the still is frame 0 — it covers the gap before the canvas has painted, and
   is what a reduced-motion or no-JS visitor keeps */
.film__canvas { opacity: 0; transition: opacity .2s linear; }
.film.is-live .film__canvas { opacity: 1; }
/* and the still steps aside once it has. It is only ever the poster for the
   moment before the first frame decodes. An opaque clip hides it by covering
   it, so this never mattered; the hero clip carries alpha, and frame 0 was
   showing through it for the whole run — a second boy, standing still where
   the animated one started, drifting apart from him as he ran. */
.film.is-live .film__still { opacity: 0; transition: opacity .2s linear; }

/* Mobile uses one pinned backdrop per region instead of stacking copies. */
.sticky-bg { display: none; }

/* Opening a FAQ answer has to push the rest of the page down and pull it back
   up on close. The artboard is absolutely placed, so JS reports the delta and
   everything below the list rides on it. */
.moreq, .contact, .foot { translate: 0 var(--faq-shift, 0px); }
.page { height: calc(10822 * var(--u) + var(--faq-shift, 0px)); }

.strength__bg { display: none; }   /* mobile frame only (457:344) */

/* The group section's kids are a clip that opens on two of them and plays the
   third in. It sits exactly on the section's own backdrop, so the still under
   it and the last frame line up. */
/* The children are a clip on transparency laid over the room, not the room
   itself: the frame has the boy rise over the icon bar, and a clip that carries
   its own background has to sit behind the bar, which cut his head off at the
   bar's edge. On alpha it takes z-index 3 like the still crops it replaces and
   passes in front, and the section keeps `.why__bg` as its backdrop.

   The box is solved rather than guessed: the three crops the frame uses were
   rebuilt, their transparent margins measured off, and the union of the ink
   came to 938.8x333.5 at 471.5,681.6. Sizing the clip so its opening frame —
   the two on the rope, before the third arrives — lands on that rect puts the
   whole group where the frame draws it. Its own height then falls at 336.5
   against a measured 333.5, which is the check that the clip and the stills
   are the same artwork. 950.7 wide against a 952-wide crop is 1:1. */
.why__film { position: absolute; left: calc(465.5 * var(--u)); top: calc(589.7 * var(--u));
             width: calc(950.7 * var(--u)); height: calc(434.4 * var(--u));
             transform: none; z-index: 3; }

/* ==========================================================================
   תודה על פנייתכם — the dialog both forms open when they are sent

   Fixed to the window rather than placed on the artboard: it belongs to the
   moment, not to a position on the page. It sits above the header (60) and the
   floating WhatsApp button (50) because while it is open nothing else is.
   ========================================================================== */
.thanks { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; }
.thanks[hidden] { display: none; }

.thanks__veil {
  position: absolute; inset: 0;
  background: rgba(10, 40, 55, .45);
  -webkit-backdrop-filter: blur(calc(4 * var(--u)));
  backdrop-filter: blur(calc(4 * var(--u)));
}

.thanks__card {
  position: relative;
  /* 920 wide in the design; held to the window on a small screen */
  width: min(calc(620 * var(--u)), 90vw);
  padding: calc(30 * var(--u)) calc(34 * var(--u)) calc(30 * var(--u));
  background: var(--white);
  border-radius: calc(30 * var(--u));
  box-shadow: 0 calc(20 * var(--u)) calc(60 * var(--u)) rgba(0,0,0,.18);
  text-align: center;
}

/* The illustration sits above the words and carries the card's proportions: the
   design's card is 920 across with the picture filling 660 of its height, so the
   block keeps that ratio at every width and the words always land where they do
   in the design. */
.thanks__art { display: block; width: 100%; margin-bottom: calc(10 * var(--u));
               pointer-events: none; }
.thanks__art--d { aspect-ratio: 920 / 660; }
.thanks__art--m { aspect-ratio: 622 / 1030; display: none; }

.thanks__t {
  margin: 0;
  font-family: var(--font-head); font-weight: 700;
  font-variation-settings: 'wdth' 100;
  font-size: calc(46 * var(--u)); line-height: calc(58 * var(--u));
}
.thanks__t > span { display: block; }

.thanks__bird { display: block; margin: calc(10 * var(--u)) auto 0; width: calc(44 * var(--u)); }

/* The close control is the one thing here that is not decoration, so it gets a
   real target size even though the mark inside it is small. */
.thanks__x {
  position: absolute; top: calc(18 * var(--u)); right: calc(18 * var(--u));
  /* above the illustration: on the error card the drawing is laid over the whole
     card and, coming later in the markup, it was taking the click meant for
     this — the cross looked dead. */
  z-index: 2;
  width: calc(46 * var(--u)); height: calc(46 * var(--u));
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--white);
  box-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.12);
  cursor: pointer;
}
.thanks__x svg { width: calc(20 * var(--u)); height: calc(20 * var(--u));
                 stroke: var(--teal); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.thanks__x:hover  { background: #f2fbfc; }
.thanks__x:focus-visible { outline: calc(3 * var(--u)) solid var(--orange); outline-offset: calc(2 * var(--u)); }

/* The page behind is held still by refusing the scroll input, not by switching
   the root's overflow. Every length on this site is derived from `100vw`, and
   taking the scrollbar away hands its width back to `100vw` — the entire layout
   behind the veil grows by the better part of a percent at the moment the
   dialog opens. Blocking the wheel, the touch drag and the scrolling keys keeps
   the page exactly where it was. See js/thanks.js. */

/* ---- הפניה לא נשלחה ------------------------------------------------------
   The thank-you stacks its picture over its words. This one does not: the wide
   design stands the boy beside the disc and sets the words to his right, level
   with his legs. So its parts are placed against the card and the card holds
   the design's own proportion, rather than growing to whatever the stack needs.
   The column version further down goes back to stacking, which is what its own
   design does. */
.thanks--err .thanks__card {
  width: min(calc(700 * var(--u)), 92vw);
  aspect-ratio: 1006 / 1018;
  padding: 0;
}
.thanks--err .thanks__art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; aspect-ratio: auto;
}
.thanks--err .thanks__t {
  position: absolute; right: 4%; top: 55%; width: 54%;
  text-align: right;
  font-size: calc(40 * var(--u)); line-height: calc(54 * var(--u));
}
.thanks--err .thanks__bird {
  position: absolute; left: 50%; bottom: 5%;
  translate: -50% 0; margin: 0;
}

/* ---- חסרים פרטים ---------------------------------------------------------
   The confirm step, shown when the required fields are in but one or more of
   the three optional ones is not. It is the "not sent" card with two changes:
   the disc asks instead of refusing, and the bird's place at the foot is taken
   by two of the site's own buttons. The card is taller than the drawing so that
   the row of buttons has clear white under the picture rather than sitting on
   the squiggle: the art keeps its own 1006/1018 proportion at 84.8% of a
   1006/1200 card, which leaves exactly the button's height plus its margin. */
.thanks--ask .thanks__card {
  width: min(calc(700 * var(--u)), 92vw);
  aspect-ratio: 1006 / 1200;
  padding: 0;
}
.thanks--ask .thanks__art {
  position: absolute; inset: 0 0 auto 0;
  width: 100%; height: 84.8%;
  margin: 0; aspect-ratio: auto;
}
.thanks--ask .thanks__t {
  position: absolute; right: 4%; top: 47%; width: 56%;
  text-align: right;
  font-size: calc(38 * var(--u)); line-height: calc(50 * var(--u));
}
/* the two buttons share the width the card gives them, so neither is the odd
   one out — the send is first, which in this direction puts it on the right */
.thanks__acts {
  position: absolute; left: 5%; right: 5%; bottom: 5.5%;
  display: flex; gap: calc(18 * var(--u));
}
/* .btn carries no position of its own — every other button on the site is
   absolutely placed by its section, so .btn__inner anchors to the button. These
   two sit in a flex row and are static, so without this the blobs anchored to
   .thanks__acts and the goo swept the whole strip instead of the button. */
.thanks__acts > .btn { position: relative; flex: 1 1 0; min-width: 0; }

/* The three fields that may be left blank carry no mark. Every other one is
   asked for and says so with a small orange star beside its label — and on the
   two choosers, whose label is the value's own text, beside that instead. */
.cf--req > label::after,
.cf--req .pick__value::after {
  content: '*';
  margin-inline-start: calc(3 * var(--u));
  color: var(--orange);
}