/* ==========================================================================
   Kidysport — mobile artboard (Figma 457:6, 402 × 11983)

   Same technique as the desktop sheet: `--u` is one design pixel of the 402
   frame. It is capped at 1.25 so that on a tablet the phone layout sits as a
   ~500px column on full-bleed art rather than being blown up — Figma has no
   tablet frame, so this is the one judgement call in the build.
   ========================================================================== */

@media (max-width: 1199px) {

  :root { --u: min(1.25px, calc(var(--vwc) / 402)); }

  /* The desktop sheet holds these to one line; at 60px on a 402 frame they must
     wrap, or the FAQ heading runs 126px past the screen. */
  .faq__t span, .hero__sub, .how__sub, .founder__kicker, .contact__kicker { white-space: normal; }

  .on-desktop { display: none; }
  .on-mobile  { display: block; }

  .page {
    width: calc(402 * var(--u));
    height: calc(11564 * var(--u) + var(--faq-shift, 0px));
  }
  .s { width: calc(402 * var(--u)); }

  .bleed { width: max(var(--vwc), calc(402 * var(--u))); }

  /* --- type: מובייל styles ------------------------------------------- */
  .t-h1  { font-size: calc(60 * var(--u)); line-height: calc(60 * var(--u)); }
  .t-h1b { font-size: calc(40 * var(--u)); line-height: calc(60 * var(--u)); }
  .t-h2  { font-size: calc(22 * var(--u)); line-height: calc(30 * var(--u)); }
  .t-h2b { font-size: calc(22 * var(--u)); line-height: calc(30 * var(--u)); }
  .t-body{ font-size: calc(18 * var(--u)); line-height: calc(22 * var(--u)); }

  .glass { border-width: calc(1.577 * var(--u)); --r: calc(23.65 * var(--u));
           -webkit-backdrop-filter: blur(calc(7.883 * var(--u))); backdrop-filter: blur(calc(7.883 * var(--u))); }

  /* A phone or a tablet has no pointer to hover with, so every icon rests in
     its own plain teal here and the coloured twin is never even fetched — the
     same thing `@media (hover: none)` does on a touch screen, but keyed to the
     board rather than to what the browser claims about the pointer. */
  .ico > .ico__on { display: none; }
  .ico > img:not(.ico__on) { opacity: 1; transition: none; }
  .btn { height: calc(44.718 * var(--u)); border-radius: calc(20.023 * var(--u));
         font-size: calc(18 * var(--u)); line-height: calc(22 * var(--u));
         box-shadow: 0 calc(2.67 * var(--u)) calc(26.697 * var(--u)) calc(13.349 * var(--u)) rgba(0,0,0,.05); }
  .btn--outline { border-width: calc(1.335 * var(--u)); }

  /* ============================ HERO (0 – 1054) ============================ */
  .hero { top: 0; height: calc(1054 * var(--u)); }
  .hero__bg { top: calc(-27 * var(--u)); height: calc(1081 * var(--u)); }
  .hero__vector { left: calc(-112 * var(--u)); top: calc(563 * var(--u)); width: calc(633 * var(--u)); height: calc(373 * var(--u)); }
  .hero__bird { left: calc(282 * var(--u)); top: calc(125 * var(--u)); width: calc(55 * var(--u)); }

  .hero__strip {
    display: block;
    left: calc(-23 * var(--u)); top: calc(1037 * var(--u));
    width: calc(448 * var(--u)); height: calc(135 * var(--u));
    overflow: hidden; z-index: 0;
  }
  .hero__strip img {
    position: absolute; max-width: none;
    left: -305.78%; top: -700.74%; width: 428.97%; height: 800.74%;
  }

  /* 21 + 86: the bar is shorter here, so everything measuring off it follows */
  :root { --hdr-bottom: calc(107 * var(--u)); }

  .hdr { left: calc(29 * var(--u)); top: calc(21 * var(--u)); width: calc(345 * var(--u)); height: calc(86 * var(--u));
         border-radius: calc(30 * var(--u)); }
  .hdr__logo { left: calc(45 * var(--u)); top: calc(35 * var(--u)); width: calc(103 * var(--u)); height: calc(57 * var(--u)); }
  .hdr__nav, .hdr__cta, .hdr__phone { display: none; }
  .hdr__burger { display: block; left: calc(304 * var(--u)); top: calc(52 * var(--u));
                 width: calc(39 * var(--u)); height: calc(24 * var(--u)); padding: 0; z-index: 12; cursor: pointer; }
  .hdr__burger img { width: 100%; }

  .m-menu {
    display: block; left: calc(29 * var(--u)); top: calc(115 * var(--u)); width: calc(345 * var(--u));
    background: var(--glass); border: calc(1.577 * var(--u)) solid var(--white);
    -webkit-backdrop-filter: blur(calc(7.883 * var(--u))); backdrop-filter: blur(calc(7.883 * var(--u)));
    border-radius: calc(23.65 * var(--u)); padding: calc(8 * var(--u)) calc(18 * var(--u)); z-index: 11;
  }
  .m-menu[hidden] { display: none; }
  .m-menu a { display: block; padding: calc(10 * var(--u)) 0; font-size: calc(18 * var(--u)); color: var(--ink); text-align: right; }
  .m-menu a + a { border-top: 1px solid rgba(0,0,0,.08); }

  .hero__t1  { left: calc(29 * var(--u)); top: calc(141 * var(--u)); width: calc(345 * var(--u)); height: calc(100 * var(--u)); }
  .hero__t2  { left: calc(29 * var(--u)); top: calc(192 * var(--u)); width: calc(345 * var(--u)); height: calc(100 * var(--u)); font-size: calc(50 * var(--u)); line-height: calc(86 * var(--u)); }
  .hero__sub { left: calc(29 * var(--u)); top: calc(259 * var(--u)); width: calc(345 * var(--u)); height: calc(50 * var(--u)); white-space: normal; }
  .hero__body{ left: calc(42 * var(--u)); top: calc(309 * var(--u)); width: calc(332 * var(--u)); height: calc(188 * var(--u)); }
  .hero__btn1{ left: calc(11.58 * var(--u)); top: calc(505 * var(--u)); width: calc(178.206 * var(--u)); }
  .hero__btn2{ left: calc(199.8 * var(--u)); top: calc(505 * var(--u)); width: calc(174.201 * var(--u)); }

  /* The clip is composed across the desktop artboard: the boy covers 1088 of
     its 1920 units on his way over the ladder. On a 402 column that whole
     path has to fit, or he runs off the edge halfway through the scrub and
     the closing pose — the one that hands over to the next section — is cut.
     So the box is scaled to fit his travel, which leaves him smaller here
     than the still was, and placed so his first frame keeps the still's top. */
  .hero__film { left: calc(-180 * var(--u)); top: calc(494 * var(--u));
                width: calc(667 * var(--u)); height: calc(375 * var(--u)); }

  /* Second leg. Sized so its boy matches this frame's own, and placed so its
     opening frame lands on the still it starts from. The camera travels much
     further inside this clip than the column does between the two sections,
     so the pin carries most of the difference here. */
  .how__film { left: calc(-259 * var(--u)); top: calc(442 * var(--u));
               width: calc(1008 * var(--u)); height: calc(567 * var(--u)); }
  /* Through `.s > ` for the same reason as the about tail: these carry type
     classes, and main.css lays `.s > .t-body` out as a flex column, which
     outranks a bare class. They were only invisible because the page clips. */
  .s > .hero__badge, .s > .hero__badge-ic,
  .s > .hero__badge-t1, .s > .hero__badge-t2 { display: none; }

  .hero__stats { left: calc(18 * var(--u)); top: calc(1047 * var(--u)); width: calc(366 * var(--u)); height: calc(95 * var(--u));
                 border-radius: calc(12.309 * var(--u)); border-width: calc(0.821 * var(--u));
                 -webkit-backdrop-filter: blur(calc(4.103 * var(--u))); backdrop-filter: blur(calc(4.103 * var(--u))); }
  .hero__ic1 { left: calc(58 * var(--u));  top: calc(1051 * var(--u)); width: calc(46 * var(--u)); }
  .hero__ic2 { left: calc(178 * var(--u)); top: calc(1051 * var(--u)); width: calc(45 * var(--u)); }
  .hero__ic3 { left: calc(298 * var(--u)); top: calc(1051 * var(--u)); width: calc(46 * var(--u)); }
  .hero__st1 { left: calc(26 * var(--u));  top: calc(1090 * var(--u)); width: calc(110 * var(--u)); height: calc(44 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); }
  .hero__st2 { left: calc(156 * var(--u)); top: calc(1087 * var(--u)); width: calc(90 * var(--u));  height: calc(48 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); }
  .hero__st3 { left: calc(251 * var(--u)); top: calc(1088 * var(--u)); width: calc(140 * var(--u)); height: calc(48 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); }
  .hero__ln1 { left: calc(137.86 * var(--u)); top: calc(1060.13 * var(--u)); height: calc(60.32 * var(--u)); }
  .hero__ln2 { left: calc(259.73 * var(--u)); top: calc(1060.13 * var(--u)); height: calc(60.32 * var(--u)); }


  .wa {
    width: calc(78 * var(--u));
    right: max(14px, calc(28 * var(--u)));
    bottom: max(14px, calc(28 * var(--u)));
  }

  /* ====================== איך הטיפול עובד (1150 – 2234) ====================== */
  .how { top: calc(1150 * var(--u)); height: calc(1084 * var(--u)); }
  .how__bg  { top: 0; height: calc(1084 * var(--u)); }
  .how__boy { left: calc(23 * var(--u)); top: calc(460 * var(--u)); width: calc(252 * var(--u)); height: calc(526 * var(--u)); }
  .how__card{ left: calc(28 * var(--u)); top: calc(52 * var(--u)); width: calc(347 * var(--u)); height: calc(429 * var(--u));
              border-radius: calc(30 * var(--u)); border-width: calc(2 * var(--u)); }
  .how__t   { left: calc(50 * var(--u)); top: calc(65 * var(--u));  width: calc(298 * var(--u)); height: calc(150 * var(--u)); }
  .how__sub { left: calc(91 * var(--u)); top: calc(208 * var(--u)); width: calc(257 * var(--u)); height: calc(50 * var(--u)); white-space: normal; }
  .how__body{ left: calc(72 * var(--u)); top: calc(258 * var(--u)); width: calc(276 * var(--u)); height: calc(188 * var(--u)); }
  .how__btn { left: calc(114 * var(--u)); top: calc(508 * var(--u)); width: calc(261 * var(--u)); height: calc(67 * var(--u));
              border-radius: calc(30 * var(--u)); font-size: calc(22 * var(--u)); }

  /* ================ מה זה בעצם ספורט טיפולי (2165 – 3249) ================ */
  .whatis { top: calc(2165 * var(--u)); height: calc(1084 * var(--u)); }
  .whatis__bg   { top: 0; height: calc(1084 * var(--u)); }
  .strength__bg { display: block; top: calc(873 * var(--u)); height: calc(778 * var(--u)); }
  .whatis__boy  { left: calc(96 * var(--u)); top: calc(337 * var(--u)); width: calc(297 * var(--u)); height: calc(532 * var(--u)); }
  .whatis__t1   { left: calc(23 * var(--u)); top: calc(59 * var(--u));  width: calc(352 * var(--u)); height: calc(60 * var(--u)); }
  .whatis__t2   { left: calc(23 * var(--u)); top: calc(119 * var(--u)); width: calc(352 * var(--u)); height: calc(60 * var(--u)); }
  .whatis__body { left: calc(28 * var(--u)); top: calc(169 * var(--u)); width: calc(347 * var(--u)); height: calc(171 * var(--u)); }

  /* the four strength cards get their own band on mobile (Figma 3249 – 4333) */
  .fcd { width: calc(347.655 * var(--u)); height: calc(150.572 * var(--u));
         box-shadow: 0 0 calc(15.767 * var(--u)) calc(2.365 * var(--u)) rgba(0,0,0,.07); }
  .fcd--b { left: calc(27.09 * var(--u)); top: calc(918 * var(--u)); }   /* מוטורי  */
  .fcd--d { left: calc(27.09 * var(--u)); top: calc(1096 * var(--u)); }   /* התנהגותי */
  .fcd--a { left: calc(23 * var(--u));    top: calc(1274 * var(--u)); }   /* רגשי    */
  .fcd--c { left: calc(23 * var(--u));    top: calc(1452 * var(--u)); }   /* חברתי   */

  .fic--b { left: calc(286 * var(--u)); top: calc(952 * var(--u)); width: calc(82 * var(--u)); }
  .fic--d { left: calc(286 * var(--u)); top: calc(1131 * var(--u)); width: calc(81 * var(--u)); }
  .fic--a { left: calc(286 * var(--u)); top: calc(1309 * var(--u)); width: calc(81 * var(--u)); }
  .fic--c { left: calc(286 * var(--u)); top: calc(1487 * var(--u)); width: calc(81 * var(--u)); }

  .ftx { width: calc(219.945 * var(--u)); height: calc(105.637 * var(--u));
         font-size: calc(17.343 * var(--u)); line-height: calc(22 * var(--u)); }
  .ftx--b { left: calc(62.57 * var(--u)); top: calc(945.53 * var(--u)); }
  .ftx--d { left: calc(62.57 * var(--u)); top: calc(1123.70 * var(--u)); }
  .ftx--a { left: calc(54.53 * var(--u)); top: calc(1305.53 * var(--u)); }
  .ftx--c { left: calc(54.53 * var(--u)); top: calc(1483.70 * var(--u)); }

  /* ================= תוכנית אישית בקבוצה קטנה (4325 – 5215) ================= */
  .plan { top: calc(3816 * var(--u)); height: calc(890 * var(--u)); }
  .plan__bg  { top: 0; height: calc(890 * var(--u)); }
  /* He swings the whole time here — there is no hover on a phone to ask for
     it. The clip is a full 16:9 render of this scene, so it cannot cover a
     402x890 section by stretching across it: sized that way it shows a narrow
     strip of the middle and the boy falls outside it. Instead the clip is laid
     out so its boy comes out at exactly the size the still has (733x775) and
     the frame around him still reaches past all four edges, with the box
     clipping what hangs over. He ends up 62 up from where the still sits,
     which is as low as a frame that covers the top can put him. */
  .plan { --bleed-swing: calc((max(var(--vwc), calc(402 * var(--u))) - 402 * var(--u)) / 2); }
  .plan__film {
    left: calc(0px - var(--bleed-swing)); transform: none; top: 0;
    width: max(var(--vwc), calc(402 * var(--u)));
    height: calc(890 * var(--u));
    overflow: hidden;
  }
  /* Down 30%, about the boy's own centre so he stays where he was — see the
     tablet sheet, which takes him down by half for the same reason. */
  .plan__film__v {
    inset: auto;
    left: calc(-188.8 * var(--u) + var(--bleed-swing)); top: calc(266.8 * var(--u));
    width: calc(1106.9 * var(--u)); height: calc(623.2 * var(--u));
  }
  .plan__boy { left: calc(-426 * var(--u)); top: calc(57 * var(--u)); width: calc(733 * var(--u)); height: calc(775 * var(--u)); }
  .plan__card{ left: calc(11 * var(--u)); top: calc(35 * var(--u)); width: calc(377 * var(--u)); height: calc(410 * var(--u)); }
  .plan__t   { left: calc(23 * var(--u)); top: calc(60 * var(--u));  width: calc(352 * var(--u)); height: calc(100 * var(--u)); }
  .plan__list{ left: calc(28 * var(--u)); top: calc(175 * var(--u)); width: calc(347 * var(--u)); height: calc(270 * var(--u)); }
  .plan__list li + li { margin-top: calc(22 * var(--u)); }
  .plan__list li { margin-inline-start: calc(20 * var(--u)); }
  .plan__btn { left: calc(193 * var(--u)); top: calc(485 * var(--u)); width: calc(178.206 * var(--u)); }

  /* ================== למה דווקא טיפול בקבוצה? (5215 – 6093) ================== */
  .why { top: calc(4706 * var(--u)); height: calc(878 * var(--u)); }
  .why__bg   { top: 0; height: calc(878 * var(--u)); }
  .why__t    { left: calc(25 * var(--u)); top: calc(35 * var(--u));  width: calc(352 * var(--u)); height: calc(182 * var(--u)); }
  .why__body { left: calc(28 * var(--u)); top: calc(221 * var(--u)); width: calc(347 * var(--u)); height: calc(203 * var(--u)); }

  .why__bar { left: calc(23 * var(--u)); top: calc(434 * var(--u)); width: calc(348 * var(--u)); height: calc(226 * var(--u));
              box-shadow: 0 0 calc(15.767 * var(--u)) calc(2.365 * var(--u)) rgba(0,0,0,.07); }
  .why__ic3 { left: calc(74 * var(--u));  top: calc(439 * var(--u)); width: calc(80 * var(--u)); }
  .why__ic4 { left: calc(239 * var(--u)); top: calc(439 * var(--u)); width: calc(81 * var(--u)); }
  .why__ic1 { left: calc(77 * var(--u));  top: calc(547 * var(--u)); width: calc(81 * var(--u)); }
  .why__ic2 { left: calc(248 * var(--u)); top: calc(548 * var(--u)); width: calc(81 * var(--u)); }
  .why__t3  { left: calc(59 * var(--u));  top: calc(504 * var(--u)); width: calc(121 * var(--u)); height: calc(29 * var(--u)); }
  .why__t4  { left: calc(225 * var(--u)); top: calc(504 * var(--u)); width: calc(120 * var(--u)); height: calc(29 * var(--u)); }
  .why__t1  { left: calc(59 * var(--u));  top: calc(615 * var(--u)); width: calc(121 * var(--u)); height: calc(29 * var(--u)); }
  .why__t2  { left: calc(225 * var(--u)); top: calc(615 * var(--u)); width: calc(120 * var(--u)); height: calc(29 * var(--u)); }
  .why__ln1 { left: calc(201 * var(--u)); top: calc(467 * var(--u)); height: calc(163 * var(--u)); }
  .why__ln2 { left: calc(182 * var(--u)); top: calc(547 * var(--u)); width: calc(124 * var(--u)); height: 1px; }
  .why__ln3 { left: calc(350 * var(--u)); top: calc(547 * var(--u)); width: calc(124 * var(--u)); height: 1px; }

  /* Same solve as the desktop sheet, against the mobile frame's own crops:
     their ink lands at -17.7,688.3 and measures 436.4x155.1, so the clip is
     sized to drop its opening frame onto that. */
  .why__film { left: calc(-20.5 * var(--u)); top: calc(645.6 * var(--u));
               width: calc(441.9 * var(--u)); height: calc(201.9 * var(--u));
               transform: none; }

  /* ======================= טובה טייכמאן (5986 – 7012) ======================= */
  .founder { top: calc(5477 * var(--u)); height: calc(1026 * var(--u)); }
  .founder__bg { top: 0; width: max(var(--vwc), calc(507 * var(--u))); height: calc(1026 * var(--u)); }
  .founder__photo { left: calc(21 * var(--u)); top: calc(150 * var(--u)); width: calc(361 * var(--u)); height: calc(363 * var(--u));
                    border-radius: 50%; }
  .founder__kicker { left: calc(38 * var(--u)); top: calc(534 * var(--u)); width: calc(326 * var(--u)); height: calc(45 * var(--u)); white-space: normal; }
  .founder__t      { left: calc(22 * var(--u)); top: calc(521 * var(--u)); width: calc(358 * var(--u)); height: calc(163 * var(--u)); }
  .founder__body   { left: calc(26 * var(--u)); top: calc(634 * var(--u)); width: calc(350 * var(--u)); height: calc(227 * var(--u)); }
  .founder__btn    { left: calc(38 * var(--u)); top: calc(893 * var(--u)); width: calc(326 * var(--u)); height: calc(67 * var(--u));
                     border-radius: calc(30 * var(--u)); font-size: calc(18 * var(--u)); }

  /* ========================= שאלות נפוצות (7012 – 8300) ========================= */
  .faq { top: calc(6503 * var(--u)); height: calc(1288 * var(--u)); }
  .faq__grad { top: calc(367 * var(--u)); width: max(var(--vwc), calc(478 * var(--u))); height: calc(1462 * var(--u)); }
  .faq__hero { top: calc(148 * var(--u)); left: calc(-51 * var(--u)); transform: none;
               width: calc(732 * var(--u)); height: calc(276 * var(--u)); }
  .faq__t    { left: calc(21 * var(--u));  top: calc(21 * var(--u));  width: calc(360 * var(--u)); height: calc(181 * var(--u)); }
  .faq__sub  { left: calc(168 * var(--u)); top: calc(213 * var(--u)); width: calc(213 * var(--u)); height: calc(174 * var(--u)); }
  .faq__bird { left: calc(152 * var(--u)); top: calc(233 * var(--u)); width: calc(49 * var(--u)); }

  .faq__list { left: calc(22 * var(--u)); top: calc(455 * var(--u)); width: calc(358 * var(--u)); }
  .fq { border-radius: calc(20 * var(--u)); margin-bottom: calc(24 * var(--u));
        box-shadow: 0 calc(5 * var(--u)) calc(10 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.07); }
  .fq summary { height: calc(133 * var(--u));
                 padding-inline-start: calc(26 * var(--u));    /* right in RTL, Figma 332 */
                 padding-inline-end: calc(102 * var(--u)); }   /* left, clears the disc */
  /* mobile disc is 54.99 across; the svg box is 1.3042x that (shadow bleed) */
  .fq__ic { left: calc(17.64 * var(--u)); top: calc(33.13 * var(--u));
            width: calc(71.72 * var(--u)); height: calc(71.1 * var(--u)); }
  .fq[open] .fq__ic { top: calc(33.13 * var(--u)); }
  .fq__q  { font-size: calc(22 * var(--u)); line-height: calc(30 * var(--u)); }
  .fq[open] summary { height: calc(145 * var(--u)); }
  .fq__a { margin: 0 calc(9 * var(--u)) calc(20 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)); border-radius: calc(20 * var(--u)); }

  /* ===================== יש לכם שאלה נוספת? (8300 – 8840) ===================== */
  .moreq { top: calc(7791 * var(--u)); height: calc(540 * var(--u)); }
  .moreq__ellipse { left: calc(29 * var(--u)); top: calc(481 * var(--u)); width: calc(226 * var(--u)); height: calc(361 * var(--u)); }
  .moreq__photo   { left: calc(13 * var(--u)); top: calc(68 * var(--u)); width: calc(377 * var(--u)); height: calc(420 * var(--u));
                    border-radius: calc(20 * var(--u)); }
  .moreq__photo img { left: -120.34%; top: -1.12%; width: 237.51%; height: 120.41%; }
  .moreq__boy  { left: calc(200 * var(--u)); top: calc(9 * var(--u));   width: calc(239 * var(--u)); height: calc(424.66 * var(--u)); }
  .moreq__t    { left: 0;                    top: calc(57 * var(--u));  width: calc(220 * var(--u)); height: calc(228 * var(--u)); }
  .moreq__sub  { left: calc(16 * var(--u));  top: calc(274 * var(--u)); width: calc(217 * var(--u)); height: calc(90 * var(--u)); }
  .moreq__btn1 { left: calc(199.5 * var(--u)); top: calc(389 * var(--u)); width: calc(180.32 * var(--u)); height: calc(45.25 * var(--u)); }
  .moreq__btn2 { left: calc(13 * var(--u));    top: calc(389 * var(--u)); width: calc(176.27 * var(--u)); height: calc(45.25 * var(--u)); }

  /* ========================== יצירת קשר (8831 – 10521) ========================== */
  .contact { top: calc(8322 * var(--u)); height: calc(1390 * var(--u)); }
  .contact__bg { display: none; }
  .contact__bg-m { display: block; top: 0; width: max(var(--vwc), calc(985 * var(--u))); height: calc(845 * var(--u)); }

  .contact__panel  { left: calc(15 * var(--u)); top: calc(23 * var(--u)); width: calc(370 * var(--u)); height: calc(760 * var(--u)); }
  .contact__kicker { left: calc(63 * var(--u)); top: calc(56 * var(--u));  width: calc(275 * var(--u)); height: calc(25 * var(--u)); white-space: normal; }
  .contact__t      { left: calc(47 * var(--u)); top: calc(96 * var(--u));  width: calc(307 * var(--u)); height: calc(93 * var(--u)); }
  .contact__lead   { left: calc(63 * var(--u)); top: calc(219 * var(--u)); width: calc(275 * var(--u)); height: calc(71 * var(--u)); }

  .contact__form { left: calc(41 * var(--u)); top: calc(305 * var(--u)); width: calc(319 * var(--u)); height: calc(441 * var(--u));
                   background: none; border: 0; box-shadow: none;
                   -webkit-backdrop-filter: none; backdrop-filter: none; }
  .fld { border-radius: calc(10 * var(--u)); padding-inline: calc(12 * var(--u)); }
  .fld > .ico { width: calc(31 * var(--u)); margin-inline-end: calc(8 * var(--u)); }
  .fld input, .fld textarea { font-size: calc(18 * var(--u)); line-height: calc(22 * var(--u)); }
  .fld--name  { left: calc(7 * var(--u)); top: calc(22 * var(--u));  width: calc(303.35 * var(--u)); height: calc(49.14 * var(--u)); }
  .fld--phone { left: calc(7 * var(--u)); top: calc(86 * var(--u));  width: calc(303.35 * var(--u)); height: calc(49.14 * var(--u)); }
  .fld--mail  { left: calc(7 * var(--u)); top: calc(150 * var(--u)); width: calc(303.35 * var(--u)); height: calc(49.14 * var(--u)); }
  .fld--age   { left: calc(7 * var(--u)); top: calc(214 * var(--u)); width: calc(303.35 * var(--u)); height: calc(49.14 * var(--u)); }
  .fld--about { left: calc(7 * var(--u)); top: calc(278 * var(--u)); width: calc(303.35 * var(--u)); height: calc(80.79 * var(--u)); }
  .contact__submit { left: calc(97 * var(--u)); top: calc(683 * var(--u)); width: calc(207 * var(--u)); height: calc(43 * var(--u)); }

  .contact__det   { left: calc(19 * var(--u)); top: calc(894 * var(--u)); width: calc(365 * var(--u)); height: calc(344 * var(--u)); }
  .contact__det-t { left: calc(22 * var(--u)); top: calc(914 * var(--u)); width: calc(359 * var(--u)); height: calc(71 * var(--u)); }
  .contact__d1 { left: calc(110 * var(--u)); top: calc(989 * var(--u));  width: calc(166 * var(--u)); height: calc(38 * var(--u)); }
  .contact__d2 { left: calc(5 * var(--u));   top: calc(1055 * var(--u)); width: calc(271 * var(--u)); height: calc(38 * var(--u)); }
  .contact__d3 { left: calc(5 * var(--u));   top: calc(1121 * var(--u)); width: calc(271 * var(--u)); height: calc(75 * var(--u)); }
  .contact__di1 { left: calc(290 * var(--u)); top: calc(979 * var(--u));  width: calc(50 * var(--u)); }
  .contact__di2 { left: calc(290 * var(--u)); top: calc(1054 * var(--u)); width: calc(50 * var(--u)); }
  .contact__di3 { left: calc(290 * var(--u)); top: calc(1132 * var(--u)); width: calc(50 * var(--u)); }

  /* ============================ FOOTER (10521 – 12373) ============================ */
  .foot { top: calc(9712 * var(--u)); height: calc(1852 * var(--u)); }
  .foot__bg   { top: 0; width: max(var(--vwc), calc(467 * var(--u))); height: calc(919 * var(--u)); }
  .foot__bird { left: calc(41 * var(--u)); top: calc(22 * var(--u)); width: calc(81.5 * var(--u)); }
  .foot__t    { left: calc(20 * var(--u)); top: calc(55 * var(--u)); width: calc(363 * var(--u)); height: calc(100 * var(--u)); }
  .foot__boy  { left: calc(-32 * var(--u)); top: calc(552 * var(--u)); width: calc(256 * var(--u)); height: calc(384 * var(--u)); }

  /* brand card */
  .fc--brand { left: calc(41 * var(--u)); top: calc(149 * var(--u)); width: calc(321 * var(--u)); height: calc(274 * var(--u)); }
  .fc__logo  { left: calc(109 * var(--u)); top: calc(189 * var(--u)); width: calc(186 * var(--u)); }
  .fc__tag   { left: calc(91 * var(--u));  top: calc(283 * var(--u)); width: calc(222 * var(--u)); height: calc(124 * var(--u)); }

  /* ניווט */
  .fc--nav    { left: calc(41 * var(--u)); top: calc(458 * var(--u)); width: calc(321 * var(--u)); height: calc(320 * var(--u)); }
  .fc__t--nav { left: calc(71 * var(--u)); top: calc(467 * var(--u)); width: calc(261 * var(--u)); height: calc(59 * var(--u)); }
  .fn { height: calc(50 * var(--u)); }
  .fn--a { left: calc(232 * var(--u)); top: calc(519 * var(--u)); width: calc(90 * var(--u)); }
  .fn--b { left: calc(255 * var(--u)); top: calc(559 * var(--u)); width: calc(67 * var(--u)); }
  .fn--c { left: calc(152 * var(--u)); top: calc(599 * var(--u)); width: calc(170 * var(--u)); }
  .fn--d { left: calc(166 * var(--u)); top: calc(639 * var(--u)); width: calc(156 * var(--u)); }
  .fn--e { left: calc(232 * var(--u)); top: calc(679 * var(--u)); width: calc(90 * var(--u)); }
  .fn--f { left: calc(205 * var(--u)); top: calc(719 * var(--u)); width: calc(117 * var(--u)); }
  .fv { left: calc(326 * var(--u)); width: calc(6 * var(--u)); }
  .fv--a { top: calc(550 * var(--u)); }
  .fv--b { top: calc(590 * var(--u)); }
  .fv--c { top: calc(630 * var(--u)); }
  .fv--d { top: calc(670 * var(--u)); }
  .fv--e { top: calc(710 * var(--u)); }
  .fv--f { top: calc(750 * var(--u)); }

  /* פרטי קשר */
  .fc--info    { left: calc(41 * var(--u)); top: calc(855 * var(--u)); width: calc(321 * var(--u)); height: calc(320 * var(--u)); }
  .fc__t--info { left: calc(71 * var(--u)); top: calc(868 * var(--u)); width: calc(261 * var(--u)); height: calc(59 * var(--u)); }
  .inf--a { left: calc(107 * var(--u)); top: calc(949 * var(--u));  width: calc(166 * var(--u)); height: calc(38 * var(--u)); }
  .inf--b { left: calc(91 * var(--u));  top: calc(1001 * var(--u)); width: calc(182 * var(--u)); height: calc(38 * var(--u)); }
  .inf--c { left: calc(88 * var(--u));  top: calc(1053 * var(--u)); width: calc(185 * var(--u)); height: calc(75 * var(--u)); }
  .ifi { width: calc(53 * var(--u)); }
  .ifi--a { left: calc(281 * var(--u)); top: calc(944 * var(--u)); }
  .ifi--b { left: calc(281 * var(--u)); top: calc(998 * var(--u)); }
  .ifi--c { left: calc(282 * var(--u)); top: calc(1061 * var(--u)); }
  .hline--i1 { left: calc(88 * var(--u)); top: calc(992 * var(--u));  width: calc(226 * var(--u)); }
  .hline--i2 { left: calc(88 * var(--u)); top: calc(1053 * var(--u)); width: calc(226 * var(--u)); }

  /* סניפים */
  .fc--branch    { left: calc(41 * var(--u)); top: calc(1210 * var(--u)); width: calc(321 * var(--u)); height: calc(372 * var(--u)); }
  .fc__t--branch { left: calc(77 * var(--u)); top: calc(1231 * var(--u)); width: calc(261 * var(--u)); height: calc(59 * var(--u)); }
  .br--a { left: calc(56 * var(--u));  top: calc(1300 * var(--u)); width: calc(271 * var(--u)); height: calc(38 * var(--u)); }
  .br--b { left: calc(56 * var(--u));  top: calc(1358 * var(--u)); width: calc(271 * var(--u)); height: calc(38 * var(--u)); }
  .br--c { left: calc(56 * var(--u));  top: calc(1416 * var(--u)); width: calc(271 * var(--u)); height: calc(38 * var(--u)); }
  .br--d { left: calc(56 * var(--u));  top: calc(1474 * var(--u)); width: calc(271 * var(--u)); height: calc(38 * var(--u)); }
  .hline--b1 { left: calc(77 * var(--u)); top: calc(1348 * var(--u)); width: calc(250 * var(--u)); }
  .hline--b2 { left: calc(77 * var(--u)); top: calc(1406 * var(--u)); width: calc(250 * var(--u)); }
  .br--e { left: calc(56 * var(--u)); top: calc(1532 * var(--u)); width: calc(271 * var(--u)); height: calc(38 * var(--u)); }
  .hline--b3 { left: calc(77 * var(--u)); top: calc(1464 * var(--u)); width: calc(250 * var(--u)); }
  .hline--b4 { left: calc(77 * var(--u)); top: calc(1522 * var(--u)); width: calc(250 * var(--u)); }

  .foot__bar   { left: calc(29 * var(--u)); top: calc(1608 * var(--u)); width: calc(350 * var(--u)); height: calc(119 * var(--u));
                 border-radius: calc(30 * var(--u)); border-width: calc(2 * var(--u)); }
  .foot__bar-t { left: calc(64 * var(--u)); top: calc(1620 * var(--u)); width: calc(274 * var(--u)); height: calc(100 * var(--u)); }
  .foot__credit{ left: calc(41 * var(--u)); top: calc(1800 * var(--u)); width: calc(321 * var(--u)); height: calc(37 * var(--u)); }
}

@media (max-width: 1199px) {
  /* One backdrop per region, pinned while its section scrolls past — the
     Figma frame stacks a second copy of the art instead, but a sticky layer
     gives the same picture without a seam (and survives iOS, which ignores
     background-attachment: fixed). */
  .contact__bg-m, .foot__bg { display: none; }

  .s > .sticky-bg {
    display: block;
    position: sticky;
    top: 0;
    left: 0;
    /* the width of the screen, not of the column: on the phone those are the
       same number, but on a tablet the column is narrower than the window and
       a backdrop drawn to the column leaves the screen bare either side of it.
       Negative margins rather than a transform, which would stop `sticky`
       from pinning. */
    width: max(var(--vwc), 100%);
    margin-left: calc((100% - max(var(--vwc), 100%)) / 2);
    margin-right: calc((100% - max(var(--vwc), 100%)) / 2);
    height: 100vh;
    overflow: hidden;
    z-index: 0;
  }
  .sticky-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* =================  רוצים לבדוק אם התהליך מתאים  (980:178)  ==============
     The one section with its own mobile frame, drawn the same on
     מה אנחנו עושים and on המלצות. It is an artboard, not a stack: the frame
     places the boy between the lead and the button, which is what the flow
     version was missing — it dropped him and left the gap where he belongs.
     The card and the band under it are the frame's two rectangles, both wider
     than the column, so they are drawn on the section rather than added as
     elements. */
  /* `top: auto` matters: the section keeps the desktop artboard's `top`, and
     turning it relative without clearing that turns a placement into an
     offset — it was being pushed some 8000 units down the page, out past the
     footer, with the gap left standing where it belongs. */
  .page--do .do-cta, .page--rec .rec-cta {
    display: block; position: relative;
    top: auto;
    width: calc(402 * var(--u)); height: calc(1131 * var(--u));
    padding: 0; overflow: hidden;
  }
  .page--do .do-cta > *, .page--rec .rec-cta > * { position: absolute; }
  .page--do .do-cta > .do-cta__bg, .page--rec .rec-cta > .do-cta__bg { display: none; }

  /* the card (-32,-58 548x524) and the band beneath it (516x166 at 965) */
  .page--do .do-cta::before, .page--rec .rec-cta::before,
  .page--do .do-cta::after, .page--rec .rec-cta::after {
    content: ''; position: absolute; z-index: 0;
  }
  .page--do .do-cta::before, .page--rec .rec-cta::before {
    left: calc(-32 * var(--u)); top: calc(-58 * var(--u));
    width: calc(548 * var(--u)); height: calc(524 * var(--u));
    background: #f0f6fd;
  }
  .page--do .do-cta::after, .page--rec .rec-cta::after {
    left: 50%; transform: translateX(-50%); top: calc(965 * var(--u));
    width: calc(516 * var(--u)); height: calc(166 * var(--u));
    background: #f5f7fc;
  }

  /* The clip is a wide strip the frame slides left so only the boy shows, and
     it sits under the copy: the lead's last line overlaps its top edge. */
  .page--do .do-cta > .film, .page--rec .rec-cta > .film {
    left: calc(-1051 * var(--u)); top: calc(455 * var(--u));
    width: calc(1641 * var(--u)); height: calc(512 * var(--u));
    transform: none; z-index: 1;
  }
  .page--do .do-cta > .film > .film__still, .page--do .do-cta > .film > .film__canvas,
  .page--rec .rec-cta > .film > .film__still, .page--rec .rec-cta > .film > .film__canvas {
    inset: auto; left: 0; top: -14.48%; width: 100%; height: 128.17%;
  }

  .page--do .do-cta__t, .page--rec .do-cta__t { left: calc(30 * var(--u)); top: calc(162 * var(--u));
                 width: calc(343 * var(--u)); height: calc(240 * var(--u));
                 font-size: calc(60 * var(--u)); line-height: calc(60 * var(--u));
                 text-align: center; z-index: 3; }
  .page--do .do-cta__sub, .page--rec .do-cta__sub { left: calc(39 * var(--u)); top: calc(414 * var(--u));
                 width: calc(324 * var(--u)); height: calc(60 * var(--u));
                 font-size: calc(22 * var(--u)); line-height: calc(30 * var(--u));
                 text-align: center; z-index: 3; }
  /* the do page brings its heading up: the bar above it now sits close, and the
     stretch between the two read as a hole. The rec page keeps the frame's. */
  .page--do .do-cta__t   { top: calc(110 * var(--u)); }
  .page--do .do-cta__sub { top: calc(362 * var(--u)); }
  .page--do .do-cta__btn, .page--rec .do-cta__btn { left: calc(57 * var(--u)); top: calc(1003 * var(--u));
                 width: calc(267 * var(--u)); height: calc(67 * var(--u));
                 margin: 0; border-radius: calc(30 * var(--u));
                 font-size: calc(22 * var(--u)); line-height: calc(38 * var(--u));
                 z-index: 3; }

  /* ===================  תודה על פניתכם — the column  =================== */
  /* The wide drawing gives way to the tall one: the column stacks the boy over
     the disc, which is a different arrangement rather than the same one at a
     different size. The card follows the design's own proportions here. */
  /* no pointer here, so the hoop clip never runs and the still stays put */
  .moreq__boy.is-playing > .moreq__hoop, .moreq__hoop { display: none; }
  .moreq__boy.is-playing > img { opacity: 1; }

  .thanks__art--d { display: none; }
  .thanks__art--m { display: block; }

  .thanks__card {
    width: min(calc(560 * var(--u)), 90vw);
    padding: calc(26 * var(--u)) calc(26 * var(--u)) calc(28 * var(--u));
    border-radius: calc(26 * var(--u));
  }
  /* half the size: at 38 the words took the card and left the boy no room */
  .thanks__t { font-size: calc(19 * var(--u)); line-height: calc(25 * var(--u)); }
  .thanks__bird { width: calc(40 * var(--u)); margin-top: calc(12 * var(--u)); }
  .thanks__x { width: calc(42 * var(--u)); height: calc(42 * var(--u));
               top: calc(16 * var(--u)); right: calc(16 * var(--u)); }

  /* ---- הפניה לא נשלחה, in the column -----------------------------------
     Here the design does stack: boy and disc together at the top, the words
     centred beneath them. The picture takes the share of the card its own
     drawing occupies, and the words sit under it. */
  .thanks--err .thanks__card { width: min(calc(560 * var(--u)), 90vw); aspect-ratio: 735 / 1570; }
  .thanks--err .thanks__art  { inset: 0 0 auto 0; height: 62.4%; }
  .thanks--err .thanks__t    { right: 0; left: 0; width: auto; top: 66%;
                               text-align: center;
                               font-size: calc(19 * var(--u)); line-height: calc(25 * var(--u)); }
  .thanks--err .thanks__bird { bottom: 6%; }

  /* ---- חסרים פרטים, in the column --------------------------------------
     The stacked drawing again, and the two buttons go one above the other:
     side by side they had about 160px each here, which "חזרה לטופס" does not
     fit at this size. The card is taller to hold them. */
  .thanks--ask .thanks__card { width: min(calc(560 * var(--u)), 90vw); aspect-ratio: 735 / 1582; }
  .thanks--ask .thanks__art  { inset: 0 0 auto 0; height: 61.9%; }
  .thanks--ask .thanks__t    { right: 0; left: 0; width: auto; top: 64%;
                               text-align: center;
                               font-size: calc(19 * var(--u)); line-height: calc(25 * var(--u)); }
  .thanks__acts              { left: 8%; right: 8%; bottom: 5%;
                               flex-direction: column; gap: calc(12 * var(--u)); }
  /* stacked, each button keeps its own height — the row rule shares the box out
     between them and left both about 25px tall */
  .thanks__acts > .btn       { flex: 0 0 auto; }
}