/* ──────────────────────────────────────────────────────────────────────────
   Layer 3d — geometry, about page, MOBILE.

   Source frame: 21513:1686 "about — mobile", 390 × 8040.8486328125.
   Authority: reference/figma-geometry/about-mobile.xml (every node's x/y/w/h)
   plus reference/about-mobile/_README.md and sec-0*.md for colour, type,
   radius, flex and clipping.

   THE UNIT RULE
   ─────────────
   Breakpoint: `@media (max-width: 767px)`, the same one home-mobile.css opens,
   and this file is enqueued after it so it is the last word below 768px. The two
   units come from home-mobile.css and are not redefined here:

     --ok-scale = 100vw / 390        every GEOMETRIC length
     --ok-type  = max(1px, 100vw/390) every TYPOGRAPHIC length (floor 1px)

   assets/css/about.css carries no media query, so below 768px its 1920-base
   numbers are still in force against a 390 base. Every positioned box, every
   pinned text height and every font-size it sets is therefore restated here.
   about.css is never edited to fix the phone.

   THE 72px GAP
   ────────────
   The one structural difference from every other frame in this project: the
   mobile root is a COLUMN WITH A 72 GAP, not a stack of touching sections.
       1  hero       0        1006.4197
       2  story      1078.4197  976
       3  why        2126.4197 1089
       4  diff       3287.4197  796
       5  values     4155.4199  389
       6  people     4616.4199  716
       7  vision     5404.4199 1019
       8  take-part  6495.4199  477
          footer     7044.4199  996.4289  → 8040.8486
   Each section top is the previous bottom + 72. Several sections also carry a
   body frame TALLER than the section (values 444 in 389, people 740 in 716,
   take-part 540.54 in 477): the frame does not clip them, so the copy bleeds
   into the gap exactly as drawn, and the gap is what makes room for it.

   CLIPPING
   ────────
   overflow is set only where the matching node clips. Section 2's media clips
   its 594-tall ring inside a 440 box; section 3's does NOT and the identical
   ring overflows on purpose. Section 8 loses the clip home-mobile puts on
   .ok-take, because this frame does not set it and the deck's arrows sit below
   the section box.

   ASSETS
   ──────
   Four mobile exports are genuinely different artwork and are a second
   <img class="ok-img--mobile"> in the markup: cebe1.svg (the hero blob),
   7c46a.webp (the hero photo), 773d2.svg (the values swoosh) and 59f8e.svg
   (the vision illustration). The chevrons e3bdf.svg / 0301f.svg are the same
   glyph as the desktop df86e.svg in the same fraction of their box, so the
   desktop file is reused and resized, exactly as home-mobile.css does for every
   other arrow. 9ce29.webp and ffeaf.webp are the desktop photos; 90d20.webp and
   60aa0.webp come from the home page.
   ────────────────────────────────────────────────────────────────────────── */

/* Mobile-only elements, hidden until the breakpoint. Section 5 is a static grid
   on desktop and gains a pair of arrows only on the phone. */
.ok-ab-values__arrows {
  display: none;
}

/* The values grid gained a viewport wrapper so the mobile carousel has something
   to scroll inside. Above the breakpoint it is a zero-height static block: the
   grid inside it is absolutely positioned and still resolves against
   .ok-ab-values__frame, so the desktop geometry is untouched. */

@media (max-width: 767px) {

/* ═══ The frame's 72 gap ══════════════════════════════════════════════════ */
.ok-about .ok-section + .ok-section,
.ok-about .site-footer {
  margin-top: calc(72 * var(--ok-scale));
}

/* ═══ Text boxes the frame gives a height to ══════════════════════════════
   about.css pins a measured 1920 height on the nodes whose Figma box is taller
   than their copy. Those numbers are wrong here, so they are released and the
   mobile frame's own box becomes a FLOOR: if the panel copy grows past it the
   box grows, rather than clipping. */
.ok-ab-hero__text,
.ok-ab-story__text,
.ok-ab-why__text,
.ok-ab-why__closing,
.ok-ab-diff__text,
.ok-ab-vision__text,
.ok-ab-vision__closing,
.ok-ab-take__text {
  height: auto;
}

/* ═══ 1 · Hero — 21513:1687, 390 × 1006.4197 ═════════════════════════════
   The layout flips: the MEDIA is above the copy, where the desktop puts the copy
   to the right of it. The media box (21513:1689) starts at y 92, which is what
   clears the floating NAV BAR (21513:2026, 70.974 tall at y 12). */
.ok-ab-hero {
  height: calc(1006.419678 * var(--ok-scale));
}

/* 21513:1690 — the blob, media-relative -377.593 / 0.001. cebe1.svg is exactly
   750.926 × 331.338, so the image is the box and carries no transform. */
.ok-ab-hero__blob {
  left: calc(-377.592926 * var(--ok-scale));
  top: calc(92.000778 * var(--ok-scale));
  width: calc(750.925781 * var(--ok-scale));
  height: calc(331.338318 * var(--ok-scale));
}

/* 21513:1692 — media-relative 100.685 / 29.846. */
.ok-ab-hero__photo {
  left: calc(100.684837 * var(--ok-scale));
  top: calc(121.845642 * var(--ok-scale));
  width: calc(259.020630 * var(--ok-scale));
  height: calc(301.574036 * var(--ok-scale));
}

/* 21513:1695, inside body 21513:1688 (y 423.4196, padding 34 top / 20 sides). */
.ok-ab-hero__col {
  left: calc(20 * var(--ok-scale));
  top: calc(457.419647 * var(--ok-scale));
  width: calc(350 * var(--ok-scale));
  height: auto;
  gap: calc(25 * var(--ok-scale));
}

/* 21513:1696 */
.ok-ab-hero__stack {
  gap: calc(28 * var(--ok-scale));
}

/* 21513:1697 — 40 + 8 + 88. The browser lays the two lines out at 39.6 and
   87.12, so the box is 1.28 short of the frame without the floor. */
.ok-ab-hero__headings {
  width: 100%;
  min-height: calc(136 * var(--ok-scale));
}

/* 21513:1698 — w full on mobile, not the 596 box of the desktop frame. */
.ok-ab-hero__line-one-box {
  width: 100%;
  align-items: flex-start;
  justify-content: flex-end;
}

/* 21513:1699 — mobile/H2 36 / 1.1. */
.ok-ab-hero__line-one {
  font-size: calc(36 * var(--ok-type));
  line-height: 1.1;
}

/* 21513:1700 — mobile/H1 44 / 0.99 / 1.76. */
.ok-ab-hero__line-two {
  font-size: calc(44 * var(--ok-type));
  line-height: 0.99;
  letter-spacing: calc(1.76 * var(--ok-type));
}

/* 21513:1701 — 350 × 242, and the one body node on this page the frame gives a
   0.36 tracking rather than 0. */
.ok-ab-hero__text {
  width: 100%;
  min-height: calc(242 * var(--ok-scale));
  letter-spacing: calc(0.36 * var(--ok-type));
}

/* 21513:1702 — 307.5 × 54: padding 20 sides, icon 9.5, gap 16, label 242.
   This is the DESKTOP pill height, not the 44 the home frame draws, so the
   mobile pill of home-mobile.css is restored to 54 for this one button only —
   the footer and the nav bar keep theirs. */
.ok-ab-hero__cta {
  width: calc(307.5 * var(--ok-scale));
  height: calc(54 * var(--ok-scale));
  padding: 0 calc(20 * var(--ok-scale));
  gap: calc(16 * var(--ok-scale));
  font-size: calc(18 * var(--ok-type));
  letter-spacing: calc(0.9 * var(--ok-type));
}

/* 21513:1704 */
.ok-ab-hero__cta .ok-pill__label {
  width: calc(242 * var(--ok-scale));
  text-align: right;
}

/* ═══ 2 · סיפור ההקמה — 21513:1705, 390 × 976 at y=1078.4197 ══════════════
   The copy comes FIRST and the media below it, where the desktop puts them side
   by side. .ok-ab-story__bg stops being an inset-0 veil over the section and
   becomes the media box 21513:1707 — it is the node that clips, on both
   breakpoints, so the element keeps its job and only changes box. */
.ok-ab-story {
  height: calc(976 * var(--ok-scale));
}

/* 21513:1707 — 390 × 440 at y 536, clipsContent. */
.ok-ab-story__bg {
  inset: auto;
  left: 0;
  top: calc(536 * var(--ok-scale));
  width: 100%;
  height: calc(440 * var(--ok-scale));
}

/* 21513:1708 — 334 × 594 at 28 / 18.58, border 11.387, radius 48.394. It is 594
   tall inside a 440 box; the clip above is what cuts it, as drawn. */
.ok-ab-story__ring {
  left: calc(28 * var(--ok-scale));
  top: calc(18.580322 * var(--ok-scale));
  width: calc(334 * var(--ok-scale));
  height: calc(594 * var(--ok-scale));
  border-width: calc(11.387 * var(--ok-scale));
  border-radius: calc(48.394 * var(--ok-scale));
}

/* 21513:1709, inside body 21513:1706 (padding 48 top / 20 sides). */
.ok-ab-story__col {
  left: calc(20 * var(--ok-scale));
  top: calc(48 * var(--ok-scale));
  width: calc(350 * var(--ok-scale));
  gap: calc(16 * var(--ok-scale));
}

/* 21513:1710 — three lines of mobile/H2. */
.ok-ab-story__title {
  min-height: calc(120 * var(--ok-scale));
}

/* 21513:1711 */
.ok-ab-story__lead {
  width: 100%;
  min-height: calc(22 * var(--ok-scale));
}

/* 21513:1712 — five paragraphs, two of them blank. 264 is twelve lines of
   mobile/text; Polin wraps the same copy to thirteen at 350, so this is the
   frame's BOX and not a floor: the thirteenth line hangs 17 below it, nothing in
   this section clips, and the column keeps the frame's 486 bottom edge. */
.ok-ab-story__text {
  width: 100%;
  height: calc(264 * var(--ok-scale));
}

/* ═══ 3 · למה תינוקות ופעוטות — 21513:1717, 390 × 1089 at y=2126.4197 ═════
   The same copy-above-media flip as section 2, and the same ring — but this
   frame does NOT clip, so the ring runs 594 tall out of a 440 box and past the
   section. Do not add overflow here. */
.ok-ab-why {
  height: calc(1089 * var(--ok-scale));
}

/* 21513:1721, inside body 21513:1718 (16 / 16, then padding 48 top / 20 sides):
   16 + 20 = 36 from the left, 16 + 48 = 64 from the top. */
.ok-ab-why__col {
  left: calc(36 * var(--ok-scale));
  top: calc(64 * var(--ok-scale));
  width: calc(318 * var(--ok-scale));
  height: auto;
  align-items: flex-end;
  justify-content: flex-start;
}

/* 21513:1722 */
.ok-ab-why__stack {
  gap: calc(16 * var(--ok-scale));
}

/* 21513:1723 / 21513:1724 / 21513:1725 */
.ok-ab-why__title {
  min-height: calc(80 * var(--ok-scale));
}

.ok-ab-why__text {
  width: 100%;
  min-height: calc(132 * var(--ok-scale));
}

.ok-ab-why__closing {
  width: 100%;
  min-height: calc(66 * var(--ok-scale));
}

/* 21525:960 — media 21525:959 sits at y 438 and the ring at 19.839 inside it.
   Nothing clips it, so the ring is placed at the section coordinate the chain
   resolves to and left to overflow. */
.ok-ab-why__ring {
  left: calc(28 * var(--ok-scale));
  top: calc(457.839355 * var(--ok-scale));
  width: calc(334 * var(--ok-scale));
  height: calc(594 * var(--ok-scale));
  border-width: calc(11.387 * var(--ok-scale));
  border-radius: calc(48.394 * var(--ok-scale));
}

/* ═══ 4 · הבידול — 21513:1730, 390 × 796 at y=3287.4197 ═══════════════════
   The blue card goes FULL BLEED and loses its radius (21513:1736 is 390 wide
   with no corner radius, where the desktop card is 1362 at radius 40), and the
   circular photo moves from beside the card to ON it: 21513:1733 resolves to
   y 1.5 inside the section, so the circle overlaps the card's top edge. The
   ROTATE text ring (21513:1734) is in this frame but Figma exports neither
   geometry nor an asset for it, exactly as on desktop; it is left out. */
.ok-ab-diff {
  height: calc(796 * var(--ok-scale));
}

/* 21513:1736, inside body 21513:1731 (y 168, padding-top 48). */
.ok-ab-diff__card {
  left: 0;
  top: calc(216 * var(--ok-scale));
  width: 100%;
  height: calc(564 * var(--ok-scale));
  padding: 0;
  border-radius: 0;
}

/* 21513:1738 — 342 wide at 24 / 423.5 in the section, i.e. 24 / 207.5 inside
   the card. Frame 585 (21513:1737) and Frame 688 nest it; the chain resolves
   to 24 + 0 across and 216 + 116.5 + 91 down. */
.ok-ab-diff__card-inner {
  position: absolute;
  left: calc(24 * var(--ok-scale));
  top: calc(207.5 * var(--ok-scale));
  width: calc(342 * var(--ok-scale));
  display: block;
}

.ok-ab-diff__copy {
  width: 100%;
  gap: calc(30 * var(--ok-scale));
}

/* 21513:1739 / 21513:1740 */
.ok-ab-diff__title {
  width: 100%;
  min-height: calc(80 * var(--ok-scale));
}

.ok-ab-diff__text {
  min-height: calc(154 * var(--ok-scale));
}

/* 21513:1733 — 390 × 394 at 0 / 1.5 (24 − 24 across, 216 + 116.5 − 331 down). */
.ok-ab-diff__media {
  left: 0;
  top: calc(1.5 * var(--ok-scale));
  width: 100%;
  height: calc(394 * var(--ok-scale));
}

/* 21513:1735 — 299.502 square at 45.047 / 79.246, radius 339.572. The image
   crop is the desktop one: 150.12% tall / 100.15% wide at −0.07% / −41.38%. */
.ok-ab-diff__circle {
  left: calc(45.046875 * var(--ok-scale));
  top: calc(79.246094 * var(--ok-scale));
  width: calc(299.502441 * var(--ok-scale));
  height: calc(299.502441 * var(--ok-scale));
  border-radius: calc(339.572 * var(--ok-scale));
}

/* ═══ 5 · הערכים שלנו — 21513:1741, 390 × 389 at y=4155.4199 ══════════════
   THE BIG CHANGE. The desktop is a 3 × 2 static grid in a 904 box; the mobile
   frame draws the same six cards in a 370-wide scroll row (21513:1744) with a
   prev / next pair above it (21513:1787), so on mobile it IS a carousel, driven
   by assets/js/carousel.js — the same script the home page uses.

   The six instances in 21513:1744 sit at x −1276 … 109, each 261 wide with a 16
   gap, and the LAST one ends flush at 370: the row opens at its RIGHT edge with
   five cards off-screen to the left. That is a direction:rtl scroller, and the
   cards are pulled back to ltr by about.css so their own rows do not mirror.

   ORDER. The mobile sequence, right to left, is
     קהילה · אחריות · שקיפות · דיסקרטיות · רגישות · כבוד האדם
   which is the desktop grid read COLUMN BY COLUMN from its top-right card —
   the grid the render of 21495:1388 draws, with קהילה top-right. The panel
   holds them in the desktop grid's own DOM order (קהילה, שקיפות, רגישות,
   אחריות, דיסקרטיות, כבוד האדם), so `order` re-sequences them here rather than
   forking the field or reversing the markup. In an rtl row `order: k` is the
   k-th card from the right. */
.ok-ab-values {
  height: calc(389 * var(--ok-scale));
}

/* 21513:1742 body — 444 tall inside a 389 section, uncut, so it bleeds into the
   frame's 72 gap. No fill. */
.ok-ab-values__bg {
  height: calc(444 * var(--ok-scale));
}

/* 21526:964 — the header block, 350 × 112 at 20 / 48. */
.ok-ab-values__frame {
  left: calc(20 * var(--ok-scale));
  top: calc(48 * var(--ok-scale));
  width: calc(350 * var(--ok-scale));
  height: calc(112 * var(--ok-scale));
}

/* 21513:1743 — CENTERED on mobile, and 80 tall against a 112 block, so the
   arrows below it overlap its last 20px by design (margin-bottom −20). */
.ok-ab-values__title {
  left: 0;
  top: 0;
  width: 100%;
  min-height: calc(80 * var(--ok-scale));
  text-align: center;
}

/* 21513:1787 — 350 × 52 at y 60 of the header block, justify-between, so the
   two 52 circles land at x 0 and x 298. They are prev / next for the row below.
   The frame fills the right-hand one with ACCENT: that is this component's
   hover state in style.css, not a second skin. The LEFT arrow is `next`,
   because the row opens flush right and can only travel left — so `order`
   swaps the markup's prev-then-next pair and only the right-hand one is
   turned round. */
.ok-ab-values__arrows {
  position: absolute;
  left: 0;
  top: calc(60 * var(--ok-scale));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  height: calc(52 * var(--ok-scale));
}

.ok-ab-values__arrows [data-ok-carousel-next] {
  order: 1;
}

.ok-ab-values__arrows [data-ok-carousel-prev] {
  order: 2;
}

.ok-ab-values__arrows [data-ok-carousel-prev] img {
  transform: rotate(180deg);
}

/* 21513:1744 — 370 × 188 at 0 / 192 in the section. The wrapper lives inside
   .ok-ab-values__frame, which the frame places at 20 / 48, so the box is
   −20 / 144 against it. */
.ok-ab-values__viewport {
  position: absolute;
  left: calc(-20 * var(--ok-scale));
  top: calc(144 * var(--ok-scale));
  width: calc(370 * var(--ok-scale));
  height: calc(188 * var(--ok-scale));
}

.ok-ab-values__grid {
  position: static;
  left: auto;
  top: auto;
  width: 100%;
  height: 100%;
  direction: rtl;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: stretch;
  align-items: flex-start;
  justify-content: flex-start;
  gap: calc(16 * var(--ok-scale));
  overflow-x: auto; /* the scroller: a scroll-snap row has to clip to scroll */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.ok-ab-values__grid::-webkit-scrollbar {
  display: none;
}

.ok-ab-values__grid > .ok-ab-value:nth-child(1) { order: 1; } /* קהילה      */
.ok-ab-values__grid > .ok-ab-value:nth-child(2) { order: 3; } /* שקיפות     */
.ok-ab-values__grid > .ok-ab-value:nth-child(3) { order: 5; } /* רגישות     */
.ok-ab-values__grid > .ok-ab-value:nth-child(4) { order: 2; } /* אחריות     */
.ok-ab-values__grid > .ok-ab-value:nth-child(5) { order: 4; } /* דיסקרטיות  */
.ok-ab-values__grid > .ok-ab-value:nth-child(6) { order: 6; } /* כבוד האדם  */

/* The card is the desktop card unchanged — 261 × 188, radius 30, padding 20 —
   so only the snap edge is added. Its type is the DESKTOP type too (title 32,
   body 18 / 1.3 / 0.36), which is what the mobile frame reports, so the only
   change is the unit: --ok-type floors the size below a 390 viewport. */
.ok-ab-value {
  scroll-snap-align: start;
}

.ok-ab-value__title {
  font-size: calc(32 * var(--ok-type));
}

.ok-ab-value__text {
  font-size: calc(18 * var(--ok-type));
  line-height: 1.3;
  letter-spacing: calc(0.36 * var(--ok-type));
}

/* 21526:962 Vector 8 — a rotated node, so the frame's x (91.882) is the origin
   of the UNROTATED shape and the rendered box comes from the export: 13.14 /
   −89.664, a 362.551 × 299.275 box holding a 317.801 × 174.993 shape turned
   26.74deg. The bbox maths confirms the inner size:
     317.801·|cos 26.74| + 174.993·|sin 26.74| = 362.61
     317.801·|sin 26.74| + 174.993·|cos 26.74| = 299.31
   773d2.svg is 334.09 × 191.279, which is the same shape with its 16.29 stroke
   expanded; it is drawn at the inner size, the convention about.css already
   uses for the desktop swoosh. BEHIND the heading and the cards (z-index 0
   against the frame's 1), as the desktop render shows the stroke passing under
   the type. */
.ok-ab-values__swoosh {
  left: calc(13.14 * var(--ok-scale));
  top: calc(-89.663994 * var(--ok-scale));
  width: calc(362.551257 * var(--ok-scale));
  height: calc(299.274987 * var(--ok-scale));
}

.ok-ab-values__swoosh img {
  width: calc(317.801 * var(--ok-scale));
  height: calc(174.993 * var(--ok-scale));
  transform: rotate(26.74deg);
}

/* ═══ 6 · האנשים — 21513:1795, 390 × 716 at y=4616.4199 ═══════════════════
   The carousel stays, the cards shrink 450 → 280 and the heading centres. The
   track (21513:1802) holds the four cards at x −818 … 70 with a 16 gap, the
   last ending flush at 350: the same right-edge rtl scroller as section 5, and
   the frame's physical left-to-right order is דורון · דורון · ארז · ארז, the
   desktop order exactly — so `order` only reverses the markup so that child 4
   lands at the right-hand edge where the frame draws it. */
.ok-ab-people {
  height: calc(716 * var(--ok-scale));
}

/* 21513:1796 body — 740 tall inside a 716 section, uncut. No fill. */
.ok-ab-people__bg {
  height: calc(740 * var(--ok-scale));
}

/* 21526:965 — 350 × 178 at 20 / 48. */
.ok-ab-people__head {
  left: calc(20 * var(--ok-scale));
  top: calc(48 * var(--ok-scale));
  width: calc(350 * var(--ok-scale));
  height: calc(178 * var(--ok-scale));
}

/* 21513:1800 / 21513:1801 — the block is CENTERED on mobile where the desktop
   sets it right, and the gap is 32. */
.ok-ab-people__title {
  width: 100%;
  min-height: calc(80 * var(--ok-scale));
  text-align: center;
}

.ok-ab-people__text {
  left: 0;
  top: calc(112 * var(--ok-scale));
  width: 100%;
  min-height: calc(66 * var(--ok-scale));
  text-align: center;
}

/* 21513:1802 — 350 × 334 at 20 / 258. */
.ok-ab-people__viewport {
  left: calc(20 * var(--ok-scale));
  top: calc(258 * var(--ok-scale));
  width: calc(350 * var(--ok-scale));
  height: calc(334 * var(--ok-scale));
}

.ok-ab-people__track {
  direction: rtl;
  align-items: flex-start;
  justify-content: flex-start;
  gap: calc(16 * var(--ok-scale));
}

.ok-ab-people__track > .ok-ab-person:nth-child(1) { order: 4; }
.ok-ab-people__track > .ok-ab-person:nth-child(2) { order: 3; }
.ok-ab-people__track > .ok-ab-person:nth-child(3) { order: 2; }
.ok-ab-people__track > .ok-ab-person:nth-child(4) { order: 1; }

/* 21513:1803 — 280 × 334, radius 30, padding 24, gap 28. */
.ok-ab-person {
  width: calc(280 * var(--ok-scale));
  height: calc(334 * var(--ok-scale));
  padding: calc(24 * var(--ok-scale));
}

/* 21513:1804 — 232 × 157, radius 12, the same crop as the desktop card. */
.ok-ab-person__photo {
  width: calc(232 * var(--ok-scale));
  height: calc(157 * var(--ok-scale));
}

/* 21513:1805 / 21513:1815 — both Frame 43 and Frame 42 are 232 on mobile, so
   the desktop's narrow variant collapses into the one width here. */
.ok-ab-person__copy,
.ok-ab-person__copy--narrow {
  width: calc(232 * var(--ok-scale));
  gap: calc(12 * var(--ok-scale));
}

/* 21513:1806 — 18 / 1.3 where the desktop is 24 / 1.2. */
.ok-ab-person__name {
  min-height: calc(23 * var(--ok-scale));
  font-size: calc(18 * var(--ok-type));
  line-height: 1.3;
}

/* 21513:1807 */
.ok-ab-person__role {
  min-height: calc(66 * var(--ok-scale));
}

/* 21513:1823 — 350 × 52 at 20 / 624, justify-end with a 27 gap, which is what
   puts the circles at x 219 and x 318. Same prev / next reading as section 5:
   the left-hand arrow is `next`. */
.ok-ab-people__nav {
  left: calc(20 * var(--ok-scale));
  top: calc(624 * var(--ok-scale));
  width: calc(350 * var(--ok-scale));
  height: calc(52 * var(--ok-scale));
  align-items: flex-start;
  justify-content: flex-end;
  gap: calc(27 * var(--ok-scale));
}

.ok-ab-people__nav [data-ok-carousel-next] {
  order: 1;
}

.ok-ab-people__nav [data-ok-carousel-prev] {
  order: 2;
}

.ok-ab-people__nav [data-ok-carousel-prev] img {
  transform: rotate(180deg);
}

/* ═══ 7 · חזון — 21513:1831, 390 × 1019 at y=5404.4199 ════════════════════
   On desktop the decoration is a full-bleed 1920 × 920 background; on mobile it
   becomes one centred 261 × 666 illustration above the copy. Different asset
   (59f8e.svg, a flat export of Frame 729), different role — so the element
   keeps its name and changes box, and the markup carries both images. */
.ok-ab-vision {
  height: calc(1019 * var(--ok-scale));
}

/* 21526:1005 — 261 × 666 at 64.5 / 48. */
.ok-ab-vision__bg {
  left: calc(64.5 * var(--ok-scale));
  top: calc(48 * var(--ok-scale));
  width: calc(261 * var(--ok-scale));
  height: calc(666 * var(--ok-scale));
}

/* 21513:1833 — 350 at 20 / 746, gap 21, centred. */
.ok-ab-vision__col {
  left: calc(20 * var(--ok-scale));
  top: calc(746 * var(--ok-scale));
  width: calc(350 * var(--ok-scale));
  gap: calc(21 * var(--ok-scale));
}

/* 21513:1834 — two lines of mobile/H2. The desktop layer pins nowrap on this
   node to hold the frame's hand-broken lines at 70px; at 36px in a 350 box the
   copy wraps on its own and nowrap would run it off the page. */
.ok-ab-vision__title {
  width: 100%;
  min-height: calc(80 * var(--ok-scale));
  white-space: normal;
}

/* 21513:1835 / 21513:1836 — the closing line is 18 / 1.3 on mobile, not 24.
   110 is five lines and Polin wraps this copy to six, so the box is pinned
   rather than floored: without it the closing paragraph below drops 20 off the
   frame. The sixth line hangs into the 21 gap under the box, uncut. */
.ok-ab-vision__text {
  width: 100%;
  height: calc(110 * var(--ok-scale));
}

.ok-ab-vision__closing {
  width: 100%;
  min-height: calc(69 * var(--ok-scale));
  font-size: calc(18 * var(--ok-type));
  line-height: 1.3;
}

/* ═══ 8 · סיום - לקחת חלק — 21513:1837, 390 × 477 at y=6495.4199 ══════════
   The same deck as the home page's mobile take-part (21495:1258): two
   overlapping cards that a scroll-snap row cannot hold, so below the breakpoint
   home-mobile.css turns the carousel into a deck and assets/js/carousel.js
   moves an index. Everything about the card — the photo, the veil, the foot,
   the per-card action, the two type sizes — is that component, reused whole.

   WHAT THE FRAME REPORTS AND WHY IT IS NOT FOLLOWED. 21513:1860 is 182.807 ×
   220.539, which is the DESKTOP card (562 × 678) at 0.32528 on both axes, and
   its type is reported at 7.807 and 5.204 px. That is Figma drawing a
   scaled-down preview of the component, not a design intent: the type is
   scaled by 0.339 where the box is scaled by 0.6304, so the instance is not a
   uniform scale of anything. The deck is therefore the home page's mobile card
   (290 × 342) scaled to the frame's measured WIDTH — 182.807 / 290 = 0.630369
   for the front card and 137.509 / 290 = 0.474169 for the one behind — which
   lands both cards on the frame's x and its width exactly, and leaves the front
   card 4.9 shorter than the frame's 220.539. Reported, not papered over: at 390
   the card's description renders about 9.7px, legible-ish and well above the
   frame's 5.2, but this block wants redesigning at a mobile size. */
.ok-about .ok-take {
  height: calc(477 * var(--ok-scale));
  overflow: visible; /* this frame sets no clipsContent, unlike 21495:1258 */
}

/* about.css pins the stage at 98 / 87 for the desktop frame, and that beats
   home-mobile's 0 / 0 on specificity, so it has to be undone here or the whole
   deck sits 98 to the right of where the mobile frame draws it. */
.ok-about .ok-take__stage,
.ok-about .ok-take__viewport {
  left: 0;
  top: 0;
  width: 100%;
  height: calc(477 * var(--ok-scale));
}

/* 21513:1839 — 350 at 20 / 48, gap 30. */
.ok-ab-take__head {
  left: calc(20 * var(--ok-scale));
  top: calc(48 * var(--ok-scale));
  width: calc(350 * var(--ok-scale));
  height: auto;
  gap: calc(30 * var(--ok-scale));
}

/* 21513:1841 / 21513:1842 */
.ok-ab-take__title {
  min-height: calc(80 * var(--ok-scale));
}

.ok-ab-take__text {
  min-height: calc(66 * var(--ok-scale));
}

.ok-about .ok-take__card {
  transform-origin: left top;
}

/* 21513:1860 — 20 + 41.310 + 56.689 = 118.00 across, 256 down. */
.ok-about .ok-take__card.is-active {
  left: calc(118 * var(--ok-scale));
  top: calc(256 * var(--ok-scale));
  transform: scale(0.630369);
}

/* 21513:1849 — 20 + 41.310 − 0.311 = 61.00 across, 256 + 27.580 down, 25%. */
.ok-about .ok-take__card.is-peek {
  left: calc(61 * var(--ok-scale));
  top: calc(283.580078 * var(--ok-scale));
  transform: scale(0.474169);
  opacity: 0.25;
}

/* NOT IN THE FRAME. 21513:1837 draws no arrows — the home page's mobile frame
   draws a pair at 21495:1272 / 21495:1276, this one does not — and a deck with
   no control is a dead carousel. They are placed in the empty band the frame
   leaves between the deck's bottom edge (476.5) and the footer, with the 52 /
   27 geometry and the left-is-next reading of sections 5 and 6, and they carry
   no geometry claim against this frame. */
.ok-about .ok-take__stage .ok-arrow[data-ok-carousel-next] {
  left: calc(239 * var(--ok-scale));
  top: calc(490 * var(--ok-scale));
}

.ok-about .ok-take__stage .ok-arrow[data-ok-carousel-prev] {
  left: calc(318 * var(--ok-scale));
  top: calc(490 * var(--ok-scale));
}

.ok-about .ok-take__stage .ok-arrow--left img {
  transform: none;
}

.ok-about .ok-take__stage .ok-arrow--right img {
  transform: rotate(180deg);
}

}