/* ──────────────────────────────────────────────────────────────────────────
   Layer 3 — geometry, about page. DESKTOP ONLY.

   Source frame: 21495:1311 "about", 1920×7481.
   Authority: reference/figma-geometry/about-desktop.xml (every node's x/y/w/h)
   plus reference/about/sec-0*.md for colour, type, radius and flex.

   Every length is a number read off that frame, written as
   calc(N * var(--ok-scale)); --ok-scale is 100vw/1920, so a figure is always
   figma_px / 1920 * 100vw. No clamp(), no raw px for anything that scales.

   Section tops come out of normal flow, because each section is exactly its
   frame height:
     0 · 920 · 1840 · 2760 · 3623 · 4482 · 5382 · 6136, footer at 6988, end 7481.

   Clipping: overflow is set only where the matching Figma frame clips. Both
   green rings are 974 tall inside a 920 section — section 2's BG clips it,
   section 3 does NOT, and that overflow is the design.

   MOBILE: not built here. 21513:1686 (390×8040.85) is assets/css/about-mobile.css,
   which is enqueued after this file and restates every box it positions inside
   `@media (max-width: 767px)` against the 390 base. Nothing in this file is
   inside a media query, and it is never edited to fix the phone: when the
   mobile layout is wrong, about-mobile.css is the file that changes.
   ────────────────────────────────────────────────────────────────────────── */

/* A card inside a track has to keep physical direction, exactly as the home
   page's cards do: `direction` is inherited and mirrors a card's internal rows.
   The people track below is already ltr, so this is belt and braces — but it is
   the rule that holds if the track is ever made rtl. */
.ok-ab-value,
.ok-ab-person {
  direction: ltr;
}

/* ═══ 1 · Hero — 21495:1340, 1920×920 at y=0 ══════════════════════════════ */
.ok-ab-hero {
  height: calc(920 * var(--ok-scale));
}

/* 21495:1353 — the photo, a Subtract already exported to its silhouette. */
.ok-ab-hero__photo {
  position: absolute;
  left: calc(164 * var(--ok-scale));
  top: calc(81 * var(--ok-scale));
  width: calc(700 * var(--ok-scale));
  height: calc(815 * var(--ok-scale));
}

/* 21495:1351 — the green blob behind the photo. The exported SVG is
   2029.37×895.438, which is this box exactly, so it carries no transform. */
.ok-ab-hero__blob {
  position: absolute;
  left: calc(-1128.539 * var(--ok-scale));
  top: calc(0.343 * var(--ok-scale));
  width: calc(2029.369 * var(--ok-scale));
  height: calc(895.438 * var(--ok-scale));
  pointer-events: none;
}

.ok-ab-hero__col {
  position: absolute;
  left: calc(1017 * var(--ok-scale));
  top: calc(249 * var(--ok-scale));
  width: calc(806 * var(--ok-scale));
  height: calc(436 * var(--ok-scale));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(56 * var(--ok-scale));
}

.ok-ab-hero__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(28 * var(--ok-scale));
  width: 100%;
}

/* 21495:1343 is 814 wide inside an 806 column: it reaches 8px further left. */
.ok-ab-hero__headings {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(8 * var(--ok-scale));
  width: calc(814 * var(--ok-scale));
}

.ok-ab-hero__line-one-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(596 * var(--ok-scale));
}

.ok-ab-hero__line-one {
  width: 100%;
  font-size: calc(70 * var(--ok-scale));
  line-height: 1;
  text-align: right;
  color: var(--ok-ink);
}

/* 21495:1346 — 84 BOLD on ACCENT, tracking 3.36, line-height 0.99 → 83 tall. */
.ok-ab-hero__line-two {
  margin: 0;
  width: 100%;
  font-size: calc(84 * var(--ok-scale));
  font-weight: 700;
  line-height: 0.99;
  letter-spacing: calc(3.36 * var(--ok-scale));
  text-align: right;
  color: var(--ok-accent);
}

/* 21495:1347 — the frame gives this box an explicit 137; its copy is a bold
   paragraph, a blank line and a regular paragraph, so without the height the
   column collapses and the CTA under it rides up. */
.ok-ab-hero__text {
  width: calc(655 * var(--ok-scale));
  height: calc(137 * var(--ok-scale));
  color: var(--ok-ink);
}

/* ═══ 2 · סיפור ההקמה — 21495:1356, 1920×920 at y=920 ═════════════════════ */
.ok-ab-story {
  height: calc(920 * var(--ok-scale));
}

/* 21495:1357 BG has clipsContent, which is what cuts the ring at the section's
   bottom edge. */
.ok-ab-story__bg {
  position: absolute;
  inset: 0;
  overflow: clip;
}

/* 21495:1359 — not an image: a 16px stroke in accent 3, radius 68. The box is
   548×974 outside the stroke, which is what box-sizing: border-box gives. */
.ok-ab-story__ring {
  position: absolute;
  left: calc(223 * var(--ok-scale));
  top: calc(162 * var(--ok-scale));
  width: calc(548 * var(--ok-scale));
  height: calc(974 * var(--ok-scale));
  border: calc(16 * var(--ok-scale)) solid var(--ok-accent-3);
  border-radius: calc(68 * var(--ok-scale));
}

.ok-ab-story__col {
  position: absolute;
  left: calc(895 * var(--ok-scale));
  top: calc(295 * var(--ok-scale));
  width: calc(930 * var(--ok-scale));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(30 * var(--ok-scale));
}

.ok-ab-story__title {
  width: 100%;
  color: var(--ok-ink);
}

.ok-ab-story__lead {
  width: calc(712 * var(--ok-scale));
  font-weight: 700;
  color: var(--ok-ink);
}

.ok-ab-story__text {
  width: calc(675 * var(--ok-scale));
  height: calc(184 * var(--ok-scale));
  color: var(--ok-ink);
}

/* ═══ 3 · למה תינוקות ופעוטות — 21495:1368, 1920×920 at y=1840 ════════════ */
.ok-ab-why {
  height: calc(920 * var(--ok-scale));
  background: var(--ok-light);
}

.ok-ab-why__col {
  position: absolute;
  left: calc(1111 * var(--ok-scale));
  top: calc(218 * var(--ok-scale));
  width: calc(716 * var(--ok-scale));
  height: calc(311 * var(--ok-scale));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ok-ab-why__stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(28 * var(--ok-scale));
  width: 100%;
}

.ok-ab-why__title {
  width: 100%;
  color: var(--ok-ink);
}

.ok-ab-why__text {
  width: calc(702 * var(--ok-scale));
  height: calc(69 * var(--ok-scale));
  color: var(--ok-ink);
}

.ok-ab-why__closing {
  width: calc(538 * var(--ok-scale));
  height: calc(46 * var(--ok-scale));
  font-weight: 700;
  color: var(--ok-ink);
}

/* 21495:1378 — the same ring as section 2, but this section does NOT clip, so
   it deliberately runs 216px past the section's bottom edge. Do not add
   overflow here. */
.ok-ab-why__ring {
  position: absolute;
  left: calc(223 * var(--ok-scale));
  top: calc(162 * var(--ok-scale));
  width: calc(548 * var(--ok-scale));
  height: calc(974 * var(--ok-scale));
  border: calc(16 * var(--ok-scale)) solid var(--ok-accent-3);
  border-radius: calc(68 * var(--ok-scale));
}

/* ═══ 4 · הבידול — 21495:1379, 1920×863 at y=2760 ═════════════════════════ */
.ok-ab-diff {
  height: calc(863 * var(--ok-scale));
  background: var(--ok-light);
}

/* 21495:1380 — padding 80, items-end, justify-center. That is what puts
   21495:1381 at 507 / 217.5 inside the card. */
.ok-ab-diff__card {
  position: absolute;
  left: calc(457 * var(--ok-scale));
  top: calc(83 * var(--ok-scale));
  width: calc(1362 * var(--ok-scale));
  height: calc(697 * var(--ok-scale));
  padding: calc(80 * var(--ok-scale));
  border-radius: calc(40 * var(--ok-scale));
  background: var(--ok-accent);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.ok-ab-diff__card-inner {
  width: calc(775 * var(--ok-scale));
  display: flex;
  justify-content: flex-end;
}

.ok-ab-diff__copy {
  width: calc(685 * var(--ok-scale));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(30 * var(--ok-scale));
}

.ok-ab-diff__title {
  width: calc(664 * var(--ok-scale));
  color: var(--ok-light);
}

/* On ACCENT the emphasised run is white, not ACCENT. */
.ok-ab-diff__title strong {
  color: var(--ok-light);
}

.ok-ab-diff__text {
  width: 100%;
  height: calc(92 * var(--ok-scale));
  color: var(--ok-light);
}

/* 21495:1385 — the circular photo group. 21495:1386 ROTATE, the text ring that
   belongs in this box, is NOT in the file: Figma exports neither geometry nor an
   asset for it, exactly as on the home page. It is left out, not approximated. */
.ok-ab-diff__media {
  position: absolute;
  left: calc(119 * var(--ok-scale));
  top: calc(75.318 * var(--ok-scale));
  width: calc(661 * var(--ok-scale));
  height: calc(720.364 * var(--ok-scale));
}

.ok-ab-diff__circle {
  position: absolute;
  left: calc(98.382 * var(--ok-scale));
  top: calc(101.807 * var(--ok-scale));
  width: calc(507.618 * var(--ok-scale));
  height: calc(507.618 * var(--ok-scale));
  border-radius: calc(575.531 * var(--ok-scale));
  overflow: clip; /* the circle is the node's own mask */
}

.ok-ab-diff__circle img {
  position: absolute;
  left: -0.07%;
  top: -41.38%;
  width: 100.15%;
  height: 150.12%;
}

/* ═══ 5 · הערכים שלנו — 21495:1388, 1920×859 at y=3623 ════════════════════ */
.ok-ab-values {
  height: calc(859 * var(--ok-scale));
}

/* 21495:1389 BG is 920 tall inside an 859 section and carries no fill. */
.ok-ab-values__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(920 * var(--ok-scale));
}

.ok-ab-values__frame {
  z-index: 1;
  position: absolute;
  left: calc(98 * var(--ok-scale));
  top: calc(104 * var(--ok-scale));
  width: calc(1726 * var(--ok-scale));
  height: calc(782 * var(--ok-scale));
}

.ok-ab-values__title {
  position: absolute;
  left: calc(392 * var(--ok-scale));
  top: calc(120 * var(--ok-scale));
  width: calc(942 * var(--ok-scale));
  text-align: center;
  color: var(--ok-ink);
}

/* 21495:1392 — flex wrap, gap 32, justify-center: 3 × 261 + 2 × 32 = 847 in a
   904 box, so the row starts at 28.5, which is the frame's x for the first card. */
.ok-ab-values__grid {
  position: absolute;
  left: calc(411 * var(--ok-scale));
  top: calc(240 * var(--ok-scale));
  width: calc(904 * var(--ok-scale));
  height: calc(408 * var(--ok-scale));
  display: flex;
  /* row-reverse, not rtl: the frame fills the grid right to left (קהילה is the
     top-RIGHT card in the render, 21495:1388), but direction is inherited and
     would mirror each card's own rows — the bug already fixed in home.css.
     Reversing the row gets the frame's order and leaves the cards alone. */
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  gap: calc(32 * var(--ok-scale));
}

/* Instance of Frame 574 (21032:2788), 261×188. */
.ok-ab-value {
  position: relative;
  flex: 0 0 auto;
  width: calc(261 * var(--ok-scale));
  height: calc(188 * var(--ok-scale));
  padding: calc(20 * var(--ok-scale));
  border-radius: calc(30 * var(--ok-scale));
  background: rgba(213, 214, 230, 0.2);
  overflow: clip; /* clipsContent on the component */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: calc(21 * var(--ok-scale));
}

/* The frame gives this block padding-block 40 and a height of 193 inside a card
   whose content box is 148. Those three numbers cannot all be true, and the
   Figma RENDER of 21495:1388 settles it: every card shows its title and all of
   its body text, uncut. The 40 is an auto-layout artefact that Figma does not
   itself draw, so honouring it as CSS padding clips the title off the top —
   measured at -12 before this rule, with 32.4px lost. The card's own padding
   of 20 is the real inset; the copy centres in what is left. */
.ok-ab-value__copy {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: calc(10 * var(--ok-scale));
}

.ok-ab-value__title {
  width: 100%;
  font-size: calc(32 * var(--ok-scale));
  font-weight: 700;
  line-height: 1.15;
  text-align: right;
  color: var(--ok-accent);
}

.ok-ab-value__text {
  width: 100%;
  color: var(--ok-ink);
}

/* 21495:1399 Vector 17. A rotated + Y-flipped node: the frame's x for one of
   those is the origin of the UNROTATED shape (1437.33 here, which would hang off
   the right edge), so the rendered box comes from the export — left 282.65, the
   same y, a 1378.131×1072.356 box holding a 1210.846×742.272 shape turned
   162.48deg and flipped. The bbox maths confirms the inner size:
   1210.846·|cos| + 742.272·|sin| = 1378.10 and 1210.846·|sin| + 742.272·|cos|
   = 1072.20. Last child in the XML, but the Figma render shows it BEHIND the
   heading and the cards — the stroke passes under the type, uncut. Measured
   against the render of 21495:1388, not against child order. */
.ok-ab-values__swoosh {
  position: absolute;
  z-index: 0;
  left: calc(282.65 * var(--ok-scale));
  top: calc(-173.13 * var(--ok-scale));
  width: calc(1378.131 * var(--ok-scale));
  height: calc(1072.356 * var(--ok-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ok-ab-values__swoosh img {
  flex: none;
  width: calc(1210.846 * var(--ok-scale));
  height: calc(742.272 * var(--ok-scale));
  transform: rotate(162.48deg) scaleY(-1);
}

/* ═══ 6 · האנשים — 21495:1400, 1920×900 at y=4482 ═════════════════════════ */
.ok-ab-people {
  height: calc(900 * var(--ok-scale));
}

/* 21495:1401 BG, 920 tall inside a 900 section, no fill. */
.ok-ab-people__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(920 * var(--ok-scale));
}

/* 21544:1462 — the heading block. The frame nests it four frames deep with
   negative offsets that cancel out (653 − 266 + 280 + 0 − 14 = 653); the two
   text nodes are placed here at the coordinates that chain resolves to. */
.ok-ab-people__head {
  position: absolute;
  left: calc(653 * var(--ok-scale));
  top: calc(16 * var(--ok-scale));
  width: calc(614 * var(--ok-scale));
  height: calc(256 * var(--ok-scale));
}

.ok-ab-people__title {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(614 * var(--ok-scale));
  color: var(--ok-ink);
}

.ok-ab-people__text {
  position: absolute;
  left: calc(14 * var(--ok-scale));
  top: calc(172 * var(--ok-scale));
  width: calc(586 * var(--ok-scale));
  color: var(--ok-ink);
}

/* 21544:1463 — the track. It starts 92px off the left edge of the viewport and
   ends at 1870, which is the frame: four 450 cards with a 54 gap come to 1962.
   This is the carousel viewport; the scroller inside it is the track, and
   assets/js/carousel.js drives it from the two arrows below. It stays ltr, so
   DOM order is the frame's physical left-to-right order and scrollLeft 0 puts
   the cards at 0 / 504 / 1008 / 1512 exactly as drawn. */
.ok-ab-people__viewport {
  position: absolute;
  left: calc(-92 * var(--ok-scale));
  top: calc(272 * var(--ok-scale));
  width: calc(1962 * var(--ok-scale));
  height: calc(446 * var(--ok-scale));
}

.ok-ab-people__track {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: calc(54 * var(--ok-scale));
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

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

/* 21495:1422 — 450×446, radius 30, fill ACCENT, padding 48, gap 28, items-end.
   The copy block ends at 402 and the frame's bottom padding is therefore 44, not
   48; the card clips in Figma, so the 4px is cut there and here alike. */
.ok-ab-person {
  position: relative;
  flex: 0 0 auto;
  width: calc(450 * var(--ok-scale));
  height: calc(446 * var(--ok-scale));
  padding: calc(48 * var(--ok-scale));
  border-radius: calc(30 * var(--ok-scale));
  background: var(--ok-accent);
  overflow: clip; /* clipsContent on the card */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(28 * var(--ok-scale));
  scroll-snap-align: start;
}

.ok-ab-person__photo {
  position: relative;
  flex: 0 0 auto;
  width: calc(354 * var(--ok-scale));
  height: calc(239 * var(--ok-scale));
  border-radius: calc(12 * var(--ok-scale));
  overflow: clip; /* clipsContent on 21495:1423 */
}

.ok-ab-person__photo img {
  position: absolute;
  left: -51.19%;
  top: -43.51%;
  width: 151.81%;
  height: 337.24%;
}

.ok-ab-person__copy {
  width: calc(354 * var(--ok-scale));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(12 * var(--ok-scale));
  color: var(--ok-light);
}

/* Cards 3 and 4 use Frame 42 (344) where cards 1 and 2 use Frame 43 (354). */
.ok-ab-person__copy--narrow {
  width: calc(344 * var(--ok-scale));
}

.ok-ab-person__name {
  width: 100%;
  font-size: calc(24 * var(--ok-scale));
  line-height: 1.2;
  text-align: right;
  color: var(--ok-light);
}

.ok-ab-person__role {
  width: 100%;
  color: var(--ok-light);
}

/* 21495:1427 — 194 wide, 70 tall: 70 + 54 + 70, the two round arrows of the
   carousel with the same 54 gap the track uses. The second CTA the frame draws
   at (194, 70) is the ACCENT state of that one component, which is its hover and
   focus here, not a third button. */
.ok-ab-people__nav {
  position: absolute;
  left: calc(863 * var(--ok-scale));
  top: calc(770 * var(--ok-scale));
  width: calc(194 * var(--ok-scale));
  height: calc(70 * var(--ok-scale));
  display: flex;
  align-items: center;
  gap: calc(54 * var(--ok-scale));
}

/* ═══ 7 · חזון — 21495:1434, 1920×754 at y=5382 ═══════════════════════════ */
.ok-ab-vision {
  height: calc(754 * var(--ok-scale));
}

/* 21495:1435 BG — one exported SVG that already holds every scattered vector
   (21495:1436 … 21526:1003). 1920×920 inside a 754 section; nothing is painted
   below 670, so the box does not bleed visibly and the frame does not clip. */
.ok-ab-vision__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(1920 * var(--ok-scale));
  height: calc(920 * var(--ok-scale));
  pointer-events: none;
}

.ok-ab-vision__col {
  position: absolute;
  left: calc(628 * var(--ok-scale));
  top: calc(202 * var(--ok-scale));
  width: calc(665 * var(--ok-scale));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(21 * var(--ok-scale));
}

/* 21495:1447 — 614 wide, 140 tall, i.e. two lines, and the frame breaks them by
   hand (the copy carries the <br>). The first line needs 619.9px here where Figma
   fits it in 614: the site ships Polin as "Talent FS", and the substitute runs
   about 1% wide at 70px. Without nowrap that one line wraps and the heading
   becomes three lines, which moves the two paragraphs under it by a whole 70px
   line. nowrap keeps the frame's two lines and lets the line hang 3px past each
   side of a box that does not clip — the same remedy .ok-impact__year and
   .ok-take__card-title already use on the home page. */
.ok-ab-vision__title {
  width: calc(614 * var(--ok-scale));
  text-align: center;
  white-space: nowrap;
  color: var(--ok-ink);
}

.ok-ab-vision__text {
  width: calc(664 * var(--ok-scale));
  height: calc(69 * var(--ok-scale));
  text-align: center;
  color: var(--ok-ink);
}

.ok-ab-vision__closing {
  width: calc(540 * var(--ok-scale));
  height: calc(58 * var(--ok-scale));
  font-size: calc(24 * var(--ok-scale));
  line-height: 1.2;
  letter-spacing: normal;
  text-align: center;
  color: var(--ok-ink);
}

/* ═══ 8 · סיום - לקחת חלק — 21495:1450, 1920×852 at y=6136 ════════════════
   The same section as the home page's take-part: same Frame 616 / Frame 689 /
   Frame 615 / card / carousel, built once in template-parts/home/take-part.php
   and assets/css/home.css. Only three numbers and the heading block differ, so
   only those are written here, scoped to the about page so the home page keeps
   the geometry it was measured with.
     section height   805 → 852
     stage            left 100 / top 63 → left 98 / top 87
                      (Frame 616 x=98 inside a BG that starts at y=0.223)
     heading          a 455 title at right 241 / top 323  →  a 483 block at
                      left 1339 / top 289 holding a title and a paragraph. */
.ok-about .ok-take {
  height: calc(852 * var(--ok-scale));
}

.ok-about .ok-take__stage {
  left: calc(98 * var(--ok-scale));
  top: calc(87 * var(--ok-scale));
}

/* 21495:1484 — 483×216: title 140, gap 30, paragraph 46. */
.ok-ab-take__head {
  position: absolute;
  left: calc(1339 * var(--ok-scale));
  top: calc(289 * var(--ok-scale));
  width: calc(483 * var(--ok-scale));
  height: calc(216 * var(--ok-scale));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(30 * var(--ok-scale));
}

.ok-ab-take__title {
  width: 100%;
  color: var(--ok-ink);
}

.ok-ab-take__text {
  width: 100%;
  height: calc(46 * var(--ok-scale));
  color: var(--ok-ink);
}