/* ═══════════════════════════════════════════════════════════════════════════════════════════
   FOLO GROUP
   ───────────────────────────────────────────────────────────────────────────────────────────
   ⚠️ כל הקובץ כתוב במאפיינים לוגיים (inline-start / margin-block / padding-inline). זו הסיבה
   שעברית RTL ואנגלית LTR חולקות גיליון סגנון אחד בלי אף כלל [dir=…] נפרד. ברגע שמחליפים
   מאפיין לוגי ב-left/right, אחת משתי השפות נשברת בלי שרואים את זה.

   ⚠️ אין letter-spacing על טקסט עברי. אף פעם. עברית לא מתפרקת לאותיות.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── הפונטים. משתנים, מתארחים אצלנו, מחולקים לעברית וללטינית לפי unicode-range ─────────── */

/* ⛔ Frank Ruhl Libre (הסריף) ירד — החלטת אופיר 03/10/2026: אין סריף באף אתר.
   הכותרות, הלוגו הטקסטואלי והניווט עברו ל-Rubik במשקל 500–600. הגוף נשאר Assistant.
   ⚠️ שני הקבצים האלה הם variable 400..700 — אל תוסיף להם font-weight קבוע. */
@font-face { font-family: "Rubik"; src: url("../fonts/rubik-hebrew.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Rubik"; src: url("../fonts/rubik-latin.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Asst"; src: url("../fonts/asst-hebrew.woff2") format("woff2");
  font-weight: 200 800; font-display: swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; }
@font-face { font-family: "Asst"; src: url("../fonts/asst-latin.woff2") format("woff2");
  font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2122; }
/* ⛔ IBM Plex Mono (Plex) ירד — כלל קבוע מאופיר 05/10/2026: אין מונוספייס באף אתר.
   הקובץ היה לטינית-בלבד, ולכן כל תוית עברית על .mono נפלה ל-Courier של המערכת.
   כל התוויות עברו ל-Rubik. ⬛ אל תחזיר משפחת מונוספייס לקובץ הזה. */

/* ── הצבעים.
   ⛔ החלטת אופיר 03/10/2026, אחרי צפייה באתר החי: **רקע לבן נקי**. הקרם ירד.
      ראו docs/sites-program/DESIGN-SYSTEM.md סעיף 0.1.
   ⚠️ מה שבוטל ולמה לא להחזיר: --paper היה #f4f0e8 ו---paper-2 היה #eae4d8, שניהם נגזרו
      מדגימת הגוונים של הסרטונים. הנימוק הזה עדיין נכון לגבי ה-accent, אבל **לא** לגבי הרקע:
      אופיר ראה את התוצאה על המסך והחליט לבן. אפס קרם/בז'/שנהב בשום אזור, כולל "משטח מוגבה".
   ⚠️ משטח מוגבה נעשה מעכשיו בקו #E5E5E5, לא בגוון חם.
   ⚠️ --paper משמש גם כצבע טקסט על רקע כהה (skip-link, נגן, רצועת slate, כפתור טופס) —
      לבן הוא הערך הנכון שם ממילא, ולכן טוקן אחד ממשיך לשרת את שני התפקידים. ── */

:root {
  --ink:        #1a1a1a;   /* ⛔ לא #17120e: השחור החם נשר עם הקרם */
  --ink-2:      #454545;   /* טקסט משני. 9.0:1 על לבן */
  --ink-3:      #595959;   /* מטא. ⚠️ לא בהיר מזה: על לבן #595959 הוא 7.0:1, ו-#6b5d52
                              הקודם כויל על נייר חם. זה הצבע של כל תוויות המונו באתר. */
  --paper:      #ffffff;
  --paper-2:    #ffffff;   /* ⚠️ משטח מוגבה = אותו לבן + גבול --rule. לא גוון. */
  --accent:     #b4471a;   /* מגוון 20° של העבודות — נשאר, זה צבע פעולה ולא רקע */
  --accent-ink: #8d3712;   /* אותו גוון, כהה מספיק לטקסט על לבן (5.9:1) */
  --slate:      #2b4654;
  --wm-accent:  #1a1a1a;   /* הדגש בלוגו "GROUP". ⛔ היה --accent-ink החום; אופיר ביקש
                              שחור או גוון מאופק אחד. ראו qa/wordmark/ להשוואה. */
  --rule:       #e5e5e5;
  --rule-soft:  #ededed;

  --measure: 64ch;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --step: clamp(3rem, 7vw, 6rem);   /* מרווח בין מקטעים */
}

/* ── איפוס ──────────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Asst, system-ui, sans-serif;
  font-size: clamp(1.0625rem, 0.55vw + 0.95rem, 1.1875rem);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: Rubik, Assistant, system-ui, sans-serif; font-weight: 600;
  line-height: 1.14; margin: 0; text-wrap: balance; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* ⚠️ letter-spacing רק על לטינית, אף פעם לא על גוף עברי */
.mono {
  font-family: Rubik, Assistant, system-ui, sans-serif;
  font-size: 0.75rem; line-height: 1.5; color: var(--ink-3);
  font-weight: 400;
}
:root[lang="en"] .mono { letter-spacing: 0.02em; text-transform: uppercase; }

a { color: inherit; text-decoration: none; }
.prose a, a.u {
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color .15s;   /* התנועה היחידה בקישור. בכוונה. */
}
.prose a:hover, a.u:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip {
  position: absolute; inset-block-start: -100vh; inset-inline-start: 0; z-index: 99;
  background: var(--ink); color: var(--paper); padding: .75rem 1.25rem;
}
.skip:focus { inset-block-start: 0; }

/* ── הפריסה ─────────────────────────────────────────────────────────────────────────────── */

.wrap { max-width: 78rem; margin-inline: auto; padding-inline: var(--gut); }
.prose { max-width: var(--measure); }
.rule { border: 0; border-block-start: 1px solid var(--rule); margin: 0; }

/* ── המסטהד ─────────────────────────────────────────────────────────────────────────────── */

.mast { border-block-end: 1px solid var(--ink); }
.mast-in {
  display: flex; align-items: baseline; gap: 1.5rem;
  padding-block: 1.1rem;
}
.word { font-family: Rubik, Assistant, sans-serif; font-weight: 600; font-size: 1.2rem; line-height: 1;
  white-space: nowrap; }
.word span { color: var(--wm-accent); }
.mast nav { margin-inline-start: auto; }
.mast nav ul { display: flex; gap: clamp(.9rem, 2vw, 1.75rem); list-style: none; margin: 0; padding: 0;
  flex-wrap: wrap; }
.mast nav a { font-size: .95rem; padding-block: .2rem; border-block-end: 1px solid transparent; }
.mast nav a:hover { border-block-end-color: var(--accent); }
.mast nav a[aria-current="page"] { border-block-end-color: var(--ink); }
.lang { font-family: Rubik, Assistant, system-ui, sans-serif; font-size: .75rem; border: 1px solid var(--rule);
  padding: .3rem .6rem; }
.lang:hover { border-color: var(--ink); }

/* התפריט בנייד: details, בלי ג'אווהסקריפט */
/* ⚠️ בלי ג'אווהסקריפט התפריט פתוח, לא נעלם. הכפתור מוסתר כברירת מחדל ומופיע רק אחרי
   ש-`html` קיבל את המחלקה `js`. אתר שהתוכן שלו נעלם כשהסקריפט לא נטען הוא אתר שבור. */
.mburg { display: none; }
@media (max-width: 54rem) {
  .mast-in { flex-wrap: wrap; gap: .75rem 1rem; }
  html.js .mburg { display: block; margin-inline-start: auto; }
  .mburg { font-family: Rubik, Assistant, system-ui, sans-serif; font-size: .75rem; cursor: pointer; color: inherit;
    background: none; border: 1px solid var(--rule); padding: .35rem .65rem; }
  .mburg[aria-expanded="true"] { border-color: var(--ink); }
  .mast nav { margin-inline-start: 0; flex-basis: 100%; }
  html.js .mast nav { display: none; }
  html.js .mast.open nav { display: block; }
  .mast nav ul { flex-direction: column; gap: 0; padding-block-end: .5rem; }
  .mast nav a { display: block; padding-block: .6rem; border-block-end: 1px solid var(--rule-soft); }
}

/* ── ראש עמוד ───────────────────────────────────────────────────────────────────────────── */

.phead { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.75rem, 4vw, 3rem); }
.phead .mono { margin-block-end: 1.1rem; }
/* ⛔ החלטת אופיר 03/10: מחשב 48–56px · נייד 30–34px. היה clamp(2.1rem,5.2vw,3.6rem) =
   33.6–57.6px. ⚠️ 3.5rem=56px הוא התקרה, 1.9rem=30.4px הרצפה — אל תעלה אותם.
   ⚠️ 26ch (ולא 18ch) הוא מה שמאפשר שתי שורות במחשב בלי אף <br>. הקטנת המידה חזרה
   ל-18ch מחזירה את הכותרת לשלוש ושבע שורות. */
.phead h1 { font-size: clamp(1.9rem, 4.6vw, 3.5rem); max-width: 26ch; font-weight: 600; }
.phead .lead { margin-block-start: 1.5rem; max-width: 52ch; font-size: 1.1em; color: var(--ink-2); }

/* ⚠️ בלי זה חצי מרוחב המסך בדסקטופ נשאר ריק לצד הכותרת. העמודה בשוליים היא לוח המודעות
   של העמוד — מי הקבוצה ואיפה אנחנו נמצאים בה — ולא קישוט. */
.phead-grid { display: grid; gap: 1.5rem; }
@media (min-width: 60rem) {
  /* ⚠️ לא `1fr`: עמודה גמישה נמתחת על כל הרוחב בעוד הכותרת עצמה מוגבלת ל-18ch, והתוצאה היא
     פער ריק של 20rem באמצע שנראה כמו תקלה. רוחב קבוע מצמיד את הערת השוליים לכותרת, והשוליים
     הנותרים הם שוליים של עמוד — אותם שוליים בכל מקטע. */
  /* ⚠️ 46rem ולא 34rem: ב-56px הכותרת צריכה ~46rem כדי להיכנס לשתי שורות. בעמודה של
     34rem אותה כותרת יורדת לשלוש. */
  .phead-grid { grid-template-columns: minmax(0, 46rem) 14rem; gap: 3rem; align-items: start;
    justify-content: start; }
  .pmeta { padding-block-start: .4rem; border-inline-start: 1px solid var(--rule);
    padding-inline-start: 1.5rem; }
}
/* בנייד העמודה יושבת מתחת לכותרת ובלי הקו האנכי, ולכן היא צריכה קו משלה — אחרת היא
   נקראת כהמשך של הפסקה ולא כמידע על העמוד. */
@media (max-width: 59.99rem) {
  .pmeta { border-block-start: 1px solid var(--rule); padding-block-start: 1.1rem; }
}
.pmeta dl { margin: 0; display: grid; gap: .9rem; }
.pmeta dt { font-family: Rubik, Assistant, system-ui, sans-serif; font-size: .7rem; color: var(--ink-3); }
:root[lang="en"] .pmeta dt { letter-spacing: .02em; text-transform: uppercase; }
.pmeta dd { margin: .15rem 0 0; font-size: .92rem; color: var(--ink-2); line-height: 1.5; }
.pmeta dd b { font-weight: 600; color: var(--ink); }

/* ── מקטע ───────────────────────────────────────────────────────────────────────────────── */

section { padding-block: var(--step); border-block-start: 1px solid var(--rule); }
section:first-of-type { border-block-start: 0; padding-block-start: clamp(1rem, 2.5vw, 2.25rem); }
.shead { display: grid; gap: .6rem; margin-block-end: 2rem; }
.shead h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 500; max-width: 22ch; }

/* ── פתיח: משפט ראשון גדול, והמשך בשתי עמודות ─────────────────────────────────────────── */

.open > p:first-child { font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1.5;
  max-width: 46ch; color: var(--ink); margin-block-end: 2rem; }
.open .body { max-width: var(--measure); }
@media (min-width: 60rem) {
  .open .body { max-width: none; columns: 2; column-gap: 3.5rem; }
  .open .body p { break-inside: avoid; }
}

/* ── עמודות טקסט רץ (במקום כרטיסים מרחפים) ──────────────────────────────────────────────── */

.cols { display: grid; gap: 2.5rem; }
@media (min-width: 52rem) {
  .cols { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .cols > * { padding-inline: 2rem; border-inline-start: 1px solid var(--rule); }
  .cols > *:first-child { padding-inline-start: 0; border-inline-start: 0; }
  .cols > *:last-child { padding-inline-end: 0; }
}
.col h3 { font-size: 1.3rem; font-weight: 600; margin-block-end: .3rem; }
.col .mono { margin-block-end: .9rem; }
.col p { color: var(--ink-2); font-size: .97em; }

/* ── העבודות. פסיפס שמכבד את יחס הצדדים המקורי של כל סרטון ─────────────────────────────── */

/* ⚠️ הרוחבים כאן אינם שרירותיים. 16:9 ו-9:16 באותה שורה יוצאים באותו גובה בדיוק רק ביחס
   אחד: 1.778 : 0.5625, כלומר 75.96% : 24.04% מהשורה. זה מה שמונע את הפסיפס המשונן, וזה גם
   מה שמאפשר להציג כל סרטון ביחס הצדדים שבו הוא צולם בלי לחתוך ממנו פריים. */
.films { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.film { margin: 0; flex: 0 0 auto; width: 100%; }
@media (min-width: 46rem) {
  .films { gap: 1.5rem; }
  .film.wide { width: calc((100% - 1.5rem) * 0.7596); }
  .film.tall { width: calc((100% - 1.5rem) * 0.2404); }
}
.film .frame {
  position: relative; background: var(--ink); overflow: hidden;
  border: 1px solid var(--ink);
}
.film.wide .frame { aspect-ratio: 16 / 9; }
.film.tall .frame { aspect-ratio: 9 / 16; }
.film video, .film img { width: 100%; height: 100%; object-fit: cover; }
.film video { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; }
.film video.on { opacity: 1; }
.film .play {
  position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer;
  background: none; border: 0; padding: 0; color: var(--paper);
  display: flex; align-items: flex-end; justify-content: flex-start;
}
.film .play span {
  font-family: Rubik, Assistant, system-ui, sans-serif; font-size: .68rem; letter-spacing: 0;
  background: rgba(23,18,14,.72); padding: .3rem .55rem; margin: .7rem;
  transition: background .15s;
}
.film .play:hover span, .film .play:focus-visible span { background: var(--accent); }
.film .play:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.film figcaption { padding-block-start: .7rem; display: grid; gap: .25rem; }
.film figcaption b { font-weight: 600; font-size: 1rem; }
.film figcaption span { color: var(--ink-3); font-size: .9rem; line-height: 1.45; }

/* ── אתרים שבנינו ───────────────────────────────────────────────────────────────────────── */

.sites { display: grid; gap: var(--step); }
.site { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 52rem) { .site { grid-template-columns: 1.35fr 1fr; gap: 2.5rem; } }
.site .shot { border: 1px solid var(--rule); background: var(--paper-2); }
.site h3 { font-size: 1.5rem; font-weight: 600; }
.site .mono { margin-block: .4rem .9rem; }
.site p { color: var(--ink-2); }

/* ── רשימות ─────────────────────────────────────────────────────────────────────────────── */

.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.plain li { padding-inline-start: 1.4rem; position: relative; color: var(--ink-2); }
.plain li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .62em;
  width: .45rem; height: 1px; background: var(--accent);
}

/* שלבים ממוספרים — מספר במונו, בלי עיגולים ובלי אייקונים */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.steps li { display: grid; gap: .35rem 1.5rem; padding-block: 1.4rem;
  border-block-start: 1px solid var(--rule-soft); }
.steps li:first-child { border-block-start: 0; padding-block-start: 0; }
@media (min-width: 46rem) { .steps li { grid-template-columns: 4rem 1fr; } }
.steps b { font-weight: 600; font-size: 1.1rem; font-family: Rubik, Assistant, sans-serif; }
.steps p { color: var(--ink-2); margin: 0; }
.steps .n { font-family: Rubik, Assistant, system-ui, sans-serif; font-size: .75rem; color: var(--accent-ink);
  padding-block-start: .45em; }

/* טבלת עובדות — הצד המדוד */
.facts { width: 100%; border-collapse: collapse; font-size: .97em; }
.facts th, .facts td { text-align: start; padding: .8rem 0; border-block-end: 1px solid var(--rule-soft);
  vertical-align: top; }
.facts th { font-weight: 600; width: 34%; padding-inline-end: 1.5rem; }
.facts td { color: var(--ink-2); }

/* ── סימון חוסר ואישור. מוצג, לא מוסתר ─────────────────────────────────────────────────── */

.flag {
  font-family: Rubik, Assistant, system-ui, sans-serif; font-size: .7rem; color: var(--slate);
  border: 1px dashed var(--slate); padding: .15rem .45rem; display: inline-block;
  white-space: nowrap;
}
:root[lang="en"] .flag { letter-spacing: .02em; text-transform: uppercase; }
.gap {
  border: 1px dashed var(--rule); background: var(--paper-2);
  padding: 1.25rem 1.4rem; color: var(--ink-2); display: grid; gap: .5rem;
}
.gap .mono { color: var(--slate); }
.draft-bar {
  background: var(--slate); color: var(--paper); padding: .8rem 0; font-size: .9rem;
}
.draft-bar b { font-weight: 600; }

/* ── קישור הצעד הבא. טקסט עם קו, לא כפתור מרחף ─────────────────────────────────────────── */

.next { display: inline-block; font-size: 1.05rem; font-weight: 600;
  border-block-end: 2px solid var(--accent); padding-block-end: .15rem; }
.next:hover { color: var(--accent-ink); }
.next::after { content: " \2192"; font-weight: 400; }
:root[dir="rtl"] .next::after { content: " \2190"; }

/* ── פוטר ───────────────────────────────────────────────────────────────────────────────── */

footer { border-block-start: 1px solid var(--ink); margin-block-start: var(--step);
  padding-block: 2.5rem 3rem; }
.fgrid { display: grid; gap: 2rem; }
/* ⚠️ חמש עמודות מ-03/10: נוספה עמודת יצירת קשר. ב-46rem חמש עמודות נדחסות, ולכן
   יש מדרגה אמצעית של שתיים-שלוש לפני שנפתחות כולן. */
/* ⚠️ במדרגת שלוש העמודות עמודת המותג היא 209px, ושורת הפעילויות נשברה בה לשתי
   שורות של 15 תווים — טור שאי אפשר לקרוא, שנתפס ב-narrow-text ב-768 בלבד.
   במדרגה הזאת היא נפרשת על כל הרוחב; בחמש העמודות (64rem) היא כבר רחבה דיה. */
/* ⚠️ שתיים ולא שלוש במדרגת הביניים. עם שלוש, עמודת המותג פרושה על כל השורה
   ואז נותרו ארבע עמודות לשלושה חריצים — עמודת יצירת הקשר נפלה לשורה משל עצמה
   ושני שלישים מהשורה נשארו ריקים. נקרא כמו תקלה, ונתפס רק בפתיחת צילום ב-1024
   אחרי ש-narrow-text כבר החזירה ירוק. עם שתיים הרשת מתמלאת: מותג · (עמודים |
   שירותים) · (משפטי | יצירת קשר). */
@media (min-width: 46rem) { .fgrid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .fgrid > :first-child { grid-column: 1 / -1; } }
@media (min-width: 75rem) { .fgrid > :first-child { grid-column: auto; } }
/* ⚠️ 75rem ולא 64rem. בחמש עמודות, עמודת המותג היא 1.4fr — 199px ב-1024 ו-217px
   ב-1100, ושורת הפעילויות נשברה בה לשתי שורות של 15 תווים. נמדד חי: הטור נקרא
   מ-1200 ומעלה, ומתחת לכך עדיף שלוש עמודות עם המותג פרוש על כל הרוחב. */
@media (min-width: 75rem) { .fgrid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr; gap: 2.5rem; } }
.fhours { margin-block-start: .75rem; font-size: .8rem; color: var(--ink-3); line-height: 1.6; }
.fgrid h2 { font-size: .8rem; font-family: Rubik, Assistant, system-ui, sans-serif; font-weight: 400; color: var(--ink-3);
  margin-block-end: .9rem; }
:root[lang="en"] .fgrid h2 { letter-spacing: .02em; text-transform: uppercase; }
.fgrid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .95rem; }
.fgrid a:hover { color: var(--accent-ink); }
/* ⚠️ שורת הישות יושבת לצד שורת הקבוצה ולא מתחתיה: שתי שורות mono זו מתחת לזו בתחתית
   הפוטר נקראות כמו הערת שוליים כפולה. ב-flex עם wrap הן מתפצלות בנייד מעצמן. */
/* ⚠️ **רצועת אתרי הקבוצה (C4b).** היא יושבת בין הרשת לשורת הישות, ולא בתוך `.fgrid`,
   ולכן אינה יורשת את `.fgrid a:hover` וצריכה hover משל עצמה. */
.ffamily { margin-block-start: 2.5rem; padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--rule); }
.ffamily .mono { margin-block-end: .75rem; }
.ffamilylist { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; }
/* ⚠️ מטרה 44px לנגיעה בנייד, כמו ברצועה המקבילה ב-CIN.IL. */
.ffamilylink { display: inline-flex; align-items: center; min-block-size: 44px;
  font-size: 1.05rem; font-weight: 500; line-height: 1; text-decoration: none; }
a.ffamilylink { color: var(--ink-2); }
a.ffamilylink:hover, a.ffamilylink:focus-visible { color: var(--accent-ink); }
.ffamilylink.is-current { color: var(--ink); cursor: default; }

.flegal { color: var(--ink-3); }
/* ⚠️ אין כאן יותר `border-block-start`: מ-04/10 הרצועה שמעל כבר מציירת את הקו,
   ושני קווים במרחק שורה אחת נקראים כמו תקלה. גם `margin` קוצר בהתאם. */
.fnote { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  margin-block-start: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── הטופס ──────────────────────────────────────────────────────────────────────────────── */

.form { max-width: 34rem; display: grid; gap: 1.1rem; }
.form label { display: grid; gap: .35rem; }
.form label span { font-size: .92rem; color: var(--ink-2); }
.form input, .form select, .form textarea {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule);
  padding: .65rem .75rem; width: 100%;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent);
}
.form textarea { resize: vertical; }
.form button {
  font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  padding: .75rem 1.5rem; justify-self: start;
}
.form button:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.formnote { max-width: 44ch; }

/* ── משפטי: טקסט ארוך, כותרות ביניים ─────────────────────────────────────────────────────── */

.legal { max-width: var(--measure); }
.legal h2 { font-size: 1.3rem; font-weight: 600; margin-block: 2.25rem .75rem; }
.legal h2:first-child { margin-block-start: 0; }
.legal ul { padding-inline-start: 1.2rem; color: var(--ink-2); display: grid; gap: .5rem;
  margin-block: 0 1.1em; }
.legal p { color: var(--ink-2); }

/* סרטון שננעל בקליק. הכיתוב מתחלף במקום להיעלם, כדי שתהיה תשובה ללחיצה. */
.film .play[aria-pressed="true"] span { opacity: 1; background: var(--accent); }

/* ── הודעת המדידה ─────────────────────────────────────────────────────────
   ⚠️ מופיעה **רק** כשמוגדר FOLO_GROUP_GA4_ID בזמן הבנייה (ראו build/build.py).
   היום אין מזהה, ולכן האלמנט כלל אינו נכתב והכללים האלה אינם פוגשים דבר. */
.ganote{position:fixed;inset-inline:0;bottom:0;z-index:60;display:flex;gap:12px;align-items:flex-start;
	padding:12px 20px;background:#111;color:#fff;font-size:14px;line-height:1.5}
.ganote p{margin:0;max-width:72ch}
.ganote a{color:#fff;text-decoration:underline}
.ganote button{flex:0 0 auto;background:none;border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:0 4px}

/* ── כפתור הסאונד על סרטון. פורט מ-folo-ads.com (05/10/2026) ───────────────────────────────
   ⚠️ שני אתרי הקבוצה חייבים לדבר אותה שפת וידאו, ולכן המבנה, האייקונים והמידות זהים
      למקור ב-S3 (folo-landing-page/index.html): rgba(10,10,15,.6), רדיוס 999px, 44×44.
   ⛔ שני דברים מהמקור **לא** פורטו, כי הם סותרים כללים שאופיר קבע לאתר הזה:
      `backdrop-filter: blur(6px)` (זכוכית) ו-`linear-gradient` על הכיתוב (גרדיאנט).
      הרקע האטום מחליף אותם ונותן ניגודיות טובה יותר ממילא. אל תחזיר אותם.
   ⚠️ 44×44 הוא יעד המגע המינימלי. אל תקטין "כדי שיהיה עדין" — באצבע זה מפספס. */
.film .frame, .pa-reel .frame { position: relative; }
.snd {
  position: absolute; inset-block-start: 12px; inset-inline-start: 12px;
  inline-size: 44px; block-size: 44px; display: grid; place-items: center;
  background: rgba(10,10,15,.6); border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px; padding: 0; color: #e7e7e7; cursor: pointer;
  transition: color .18s, background .18s; z-index: 2;
}
.snd:hover, .snd:focus-visible { color: #fff; background: rgba(10,10,15,.88); }
.snd:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.snd svg { inline-size: 22px; block-size: 22px; display: block; fill: none;
  stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.snd .on { display: none; }
.snd[aria-pressed="true"] { color: #fff; }
.snd[aria-pressed="true"] .on { display: block; }
.snd[aria-pressed="true"] .off { display: none; }
/* ⚠️ כפתור הניגון פורש על כל המסגרת. בלי זה כפתור הסאונד יושב מתחתיו ולא נלחץ. */
.film .play { z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   תצוגה א׳ — מוזגה לעמוד הבית החי ב-05/10/2026 אחרי שאופיר בחר בה מול תצוגה ב׳.
   מה שנכנס: טקסט גוף ב-#111 במקום האפורים, קווים מודגשים, פס דיו מלא בראש האתר
   עם הלוגו בלבן, מסך ראשון עם הריל, ורצועת העבודות מתחתיו.
   ⚠️ /preview-b/ עדיין חי, noindex ובלי קישור. הוא תלוי ב-preview-shared.css ו-preview-b.css,
      ולכן אסור למחוק אותם. ⛔ אל תפרסם אותו ואל תקשר אליו.
   ⚠️ פס הדיו חל על כל העמודים בכוונה — ראש אתר הוא רכיב גלובלי, לא קישוט של עמוד אחד.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════════════════════
   משותף לשתי התצוגות. נטען אחרי group.css, ומתקן את מה שאופיר קרא לו "חיוור".
   ⚠️ אין כאן גרדיאנט, אין זכוכית, אין פינות מעוגלות צפות, אין צל, אין אייקון גנרי.
      אלה כללים של אופיר ולא העדפה — מי שמוסיף אחד מהם שובר את הבריף.
   ⚠️ הרקע נשאר לבן. החלטת 03/10 לא מבוטלת כאן, רק הטקסט מתכהה והצבע נכנס בבלוקים מלאים.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ⛔ גוף הטקסט ב-#111 ובמשקל 400 לפחות. ה---ink-2/--ink-3 האפורים היו הסיבה
   שהעמוד נקרא דהוי. ⚠️ זה דורס את group.css בכוונה, בתוך .pv בלבד. */
body, .prose, .body, .pv p, .pv li, .pv dd, .facts td {
  color: #111; font-weight: 400;
}
.mono { color: #333; font-weight: 500; letter-spacing: 0; }
.lead, .pa-lead, .pb-lead { color: #111; font-weight: 400; }
.fhours, .flegal { color: #333; }

/* הקווים האפורים הדקים — מתעבים לקו קריא אחד */
html { --rule: #d4d4d4; --rule-soft: #dcdcdc; }

/* ⚠️ אין letter-spacing על עברית בשום מצב. העמודים האלה עברית-בלבד. */
* { letter-spacing: 0; }



/* ═══════════════════════════════════════════════════════════════════════════════════════════
   תצוגה א׳ — "צילום אמיתי".
   המסך הראשון: כותרת בשתי שורות + הריל של פולו רץ לידה. מתחת, רצועת העבודות האמיתיות.
   ⚠️ הסרטון הוא התוכן כאן, לא עיטור. הוא לא נכנס לתוך מסגרת מעוגלת ולא מקבל צל.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* פס דיו מלא עם הלוגו בלבן */
.mast { background: #1a1a1a; border-block-end: 0; }
.mast .word,
.mast nav a,
.mast .mburg { color: #fff; }
.mast .word span { color: #fff; }
.mast nav a:hover { border-block-end-color: #fff; }
.mast .mburg { border-color: #595959; }

.pa-hero { padding-block: clamp(2rem, 5vw, 3.5rem) 0; }
.pa-hero-in { display: grid; gap: clamp(1.5rem, 4vw, 2.75rem); align-items: center; }
@media (min-width: 60rem) {
  /* ⚠️ הסרטון רחב מהטקסט בכוונה: הוא הטענה של העמוד הזה. */
  .pa-hero-in { grid-template-columns: 0.85fr 1.15fr; }
}
/* כותרת בשתי שורות לכל היותר בדסקטופ. ⚠️ balance ולא pretty: pretty השאיר מילה בודדת. */
.pa-hero-txt h1 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.12; text-wrap: balance; }
.pa-lead { font-size: clamp(1.02rem, 1.6vw, 1.18rem); line-height: 1.6; margin-block-start: 1rem;
  max-inline-size: 38ch; }
.pa-act { margin-block-start: 1.4rem; }

.pa-reel { margin: 0; }
.pa-reel .frame { position: relative; overflow: hidden; background: #1a1a1a; }
.pa-reel .frame img,
.pa-reel .frame video { display: block; inline-size: 100%; block-size: auto; }
/* ⚠️ הסרטון יושב מעל הפוסטר ונחשף רק כשהוא באמת מנגן (.on). בלי זה נראה ריבוע שחור
   בזמן הטעינה, וזה בדיוק מה שניסינו להימנע ממנו. */
.pa-reel .frame video { position: absolute; inset: 0; block-size: 100%; object-fit: cover;
  opacity: 0; transition: opacity .25s; }
.pa-reel .frame video.on { opacity: 1; }
.pa-reel figcaption { margin-block-start: .6rem; font-size: .9rem; color: #333; }

.pa-strip-sec { padding-block: clamp(2.5rem, 6vw, 4rem); }
/* הרצועה: גלילה אופקית בנייד, חמישה בדסקטופ. ⚠️ overflow-x כאן ולא על body. */
.pa-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 78%;
  gap: 1rem; overflow-x: auto; overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory; padding-block-end: .75rem; }
.pa-strip > * { scroll-snap-align: start; }
@media (min-width: 60rem) {
  .pa-strip { grid-auto-columns: 1fr; overflow-x: visible; }
}
.pa-more { margin-block-start: 2rem; }

/* ── תיקוני סבב 1 (05/10/2026, אחרי צילום) ──────────────────────────────────────────────── */

/* ⚠️ הכותרת יצאה בשלוש שורות ב-1440. הבריף אומר שתיים לכל היותר. עמודת הטקסט
   מתרחבת והמידה נעצרת ב-2.6rem — זה הצירוף שנותן שתי שורות על 47 התווים האלה.
   ⛔ אל תגדיל את font-size בלי למדוד מחדש; זה חוזר מיד לשלוש. */
@media (min-width: 60rem) {
  .pa-hero-in { grid-template-columns: 1fr 1fr; }
}
.pa-hero-txt h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.pa-lead { max-inline-size: 44ch; }

/* ⚠️ ברצועה כל הפוסטרים הם פריטי שורה אחת ברוחב שווה. בלי זה הם יורשים מ-group.css
   את `.film.wide { width: 75.96% }` ו-`.film.tall { width: 24.04% }`, שחושבו לפסיפס
   ולא לרצועה — והתוצאה הייתה חמש תמונות זעירות בגדלים שונים. */
.pa-strip .film { width: 100%; }
.pa-strip .film .frame { aspect-ratio: 4 / 5; }
.pa-strip .film figcaption b { font-size: .98rem; }
.pa-strip .film figcaption span { display: none; }   /* הערת הסרטון חוזרת בעמוד העבודות */


/* ⚠️ 05/10/2026, אחרי המיזוג — מחליף השפה נעלם בתוך פס הדיו: הכלל שמכהה את טקסט
   הגוף ל-#111 תפס גם אותו, והוא קיבל #111 על רקע #1a1a1a, יחס 1.08:1.
   בתצוגה א׳ זה לא התגלה כי שלד התצוגה כלל לא הציג מחליף שפה.
   ⛔ כל צאצא חדש של .mast חייב להיות מוכרז כאן במפורש — ההורשה לא תעשה זאת. */
.mast .lang { color: #fff; border-color: rgba(255,255,255,.45); }
.mast .lang:hover, .mast .lang:focus-visible { border-color: #fff; background: rgba(255,255,255,.08); }