/* ==================================================================
   ELI · 2026-09-22 — עמוד המעבדה (גרסה נקייה)

   בלי משיחת מכחול. ארבע קופסאות ברשת 2×2, ובין כל שתי
   קופסאות שכנות עוברת רצועת אזהרה שמחברת אותן.

   הרשת היא 3×3: שני טורי תוכן עם טור רווח ביניהם, ושתי
   שורות תוכן עם שורת רווח ביניהן. הרצועות הן פריטי גריד
   אמיתיים בתאי הרווח — ולכן הן נוגעות בדיוק בקצה של כל
   קופסה, בלי חישובי אחוזים שנשברים כשהטקסט משנה אורך.
   ================================================================== */

.labx{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#FFFFFF;
  padding-block-end:clamp(48px, 6vw, 88px);
}

/* משיחת המכחול הוסרה */
.labx__brushwrap{ display:none; }

/* ------------------------------------------------------------------
   הכותרת
   ------------------------------------------------------------------ */

.labx__head{
  position:relative;
  z-index:2;
  padding-block:clamp(40px, 5.6vw, 84px) clamp(30px, 4vw, 54px);
  text-align:center;
}

.labx__rule{
  display:block;
  inline-size:64px;
  block-size:4px;
  margin:0 auto clamp(16px, 2vw, 24px);
  background:var(--c-orange, #F14B1C);
}

.labx__title{
  margin:0;
  font-family:var(--font-display, 'Karantina', sans-serif);
  font-weight:700;
  font-size:clamp(3rem, 8vw, 6rem);
  line-height:.9;
  letter-spacing:0;
  color:var(--c-ink, #0A0A0A);
  text-shadow:none;
}

.labx__lead{
  margin:clamp(12px, 1.6vw, 20px) auto 0;
  max-inline-size:56ch;
  font-size:clamp(1rem, 1.25vw, 1.14rem);
  line-height:1.7;
  font-weight:var(--w-regular, 400);
  color:var(--c-graphite, #2B2B2B);
  text-shadow:none;
}

/* ------------------------------------------------------------------
   הקופסאות והרצועות המחברות
   ------------------------------------------------------------------ */

.labx-boxes{
  --ico:78px;
  --gap:clamp(44px, 5vw, 76px);   /* אורך הרצועה המחברת */
  --tape:clamp(16px, 1.7vw, 24px); /* עובי הרצועה */

  position:relative;
  z-index:2;
  padding-block:clamp(8px, 1.4vw, 18px);
}

.labx-boxes__pane{ display:contents; }
.labx-boxes__hazard,
.labx-boxes__strip{ display:none; }

.labx-boxes__grid{
  max-inline-size:1000px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0, 1fr) var(--gap) minmax(0, 1fr);
  grid-template-rows:auto var(--gap) auto;
  gap:0;
  list-style:none;
  padding:0;
}

.labx-box--1{ grid-area:1 / 1; }
.labx-box--2{ grid-area:1 / 3; }
.labx-box--3{ grid-area:3 / 1; }
.labx-box--4{ grid-area:3 / 3; }

/* a: בין 1 ל-2 · b: בין 3 ל-4 · c: בין 1 ל-3 · d: בין 2 ל-4 */
.labx-link--a{ grid-area:1 / 2; }
.labx-link--b{ grid-area:3 / 2; }
.labx-link--c{ grid-area:2 / 1; }
.labx-link--d{ grid-area:2 / 3; }

.labx-link{
  display:grid;
  place-items:center;
  pointer-events:none;
}

.labx-tape{
  display:block;
  overflow:hidden;
  background-image:repeating-linear-gradient(
    -45deg,
    var(--c-orange, #F14B1C) 0 12px,
    #0E0E10 12px 24px
  );
}

/* רצועות אופקיות — מחברות שתי קופסאות באותה שורה */
.labx-link--a .labx-tape,
.labx-link--b .labx-tape{
  inline-size:100%;
  block-size:var(--tape);
  background-size:33.9px 100%;
  animation:labx-tape-h 1.1s linear infinite;
}

/* רצועות אנכיות — מחברות שתי קופסאות באותו טור */
.labx-link--c .labx-tape,
.labx-link--d .labx-tape{
  inline-size:var(--tape);
  block-size:100%;
  background-size:100% 33.9px;
  animation:labx-tape-v 1.1s linear infinite;
}

@keyframes labx-tape-h{ to{ background-position:33.9px 0; } }
@keyframes labx-tape-v{ to{ background-position:0 33.9px; } }

/* ---------- הקופסאות ---------- */

.labx-box{
  background:#FFFFFF;
  border:1px solid var(--c-hairline, #E6E6E6);
  padding:clamp(26px, 3vw, 40px) clamp(22px, 2.6vw, 34px);
  text-align:center;
  --cut:16px;
  clip-path:polygon(
    var(--cut) 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%,
    0 var(--cut)
  );
  transition:transform .4s cubic-bezier(.2,.7,.3,1), border-color .3s ease;
}
.labx-box:hover{
  transform:translateY(-4px);
  border-color:rgba(241,75,28,.45);
}

.labx-box__icon{
  display:grid;
  place-items:center;
  inline-size:var(--ico);
  block-size:var(--ico);
  margin-inline:auto;
  margin-block-end:clamp(14px, 1.6vw, 20px);
  border-radius:50%;
  background:var(--c-plate, #F6F2EC);
  color:var(--c-orange, #F14B1C);
}

.labx-ico{ inline-size:38px; block-size:38px; }

.labx-box__title{
  margin:0 0 8px;
  font-size:clamp(1.1rem, 1.6vw, 1.34rem);
  font-weight:var(--w-black, 900);
  letter-spacing:-.02em;
  color:var(--c-ink, #0A0A0A);
}

.labx-box__text{
  margin:0 auto;
  max-inline-size:44ch;
  font-size:.94rem;
  line-height:1.68;
  color:var(--c-graphite, #2B2B2B);
}

/* ---------- נייד: טור אחד, שלוש רצועות מחברות ---------- */

@media (max-width:760px){

  .labx-boxes{ --gap:clamp(34px, 9vw, 52px); --tape:clamp(14px, 4vw, 20px); }

  .labx-boxes__grid{
    max-inline-size:520px;
    grid-template-columns:minmax(0, 1fr);
    grid-template-rows:auto var(--gap) auto var(--gap) auto var(--gap) auto;
  }

  .labx-box--1{ grid-area:1 / 1; }
  .labx-box--2{ grid-area:3 / 1; }
  .labx-box--3{ grid-area:5 / 1; }
  .labx-box--4{ grid-area:7 / 1; }

  .labx-link--a{ grid-area:2 / 1; }
  .labx-link--c{ grid-area:4 / 1; }
  .labx-link--d{ grid-area:6 / 1; }
  .labx-link--b{ display:none; }

  /* בעמודה אחת כל הרצועות אנכיות */
  .labx-link--a .labx-tape{
    inline-size:var(--tape);
    block-size:100%;
    background-size:100% 33.9px;
    animation-name:labx-tape-v;
  }

  .labx-box{ --cut:13px; }
}

@media (prefers-reduced-motion: reduce){
  .labx-tape{ animation:none !important; }
  .labx-box:hover{ transform:none; }
}


/* ==================================================================
   באנר "צד לצד" — שיבוצי עמוד הבית
   ================================================================== */

.bx-split{
  --split-ink:var(--c-ink, #0A0A0A);
  --split-dim:#5A5551;

  padding-block:clamp(44px, 5.6vw, 88px);
  background:#FFFFFF;
  color:var(--split-ink);
  overflow:hidden;
}

.bx-split--plate{ background:var(--c-plate, #F6F2EC); }

.bx-split--dark{
  --split-ink:#F4F2F0;
  --split-dim:rgba(244,242,240,.66);
  background:#141416;
}

.bx-split__inner{
  direction:ltr;
  display:grid;
  grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr);
  align-items:center;
  gap:clamp(26px, 4vw, 64px);
}

.bx-split__text{ direction:rtl; text-align:right; order:1; }
.bx-split__media{ order:2; }
.bx-split--flip .bx-split__text{ order:2; }
.bx-split--flip .bx-split__media{ order:1; }

.bx-split__eyebrow{
  margin:0 0 clamp(10px, 1.2vw, 16px);
  font-size:.82rem;
  font-weight:var(--w-bold, 700);
  letter-spacing:.04em;
  color:var(--split-dim);
}

.bx-split__title{
  margin:0;
  font-size:clamp(1.9rem, 3.8vw, 3.2rem);
  font-weight:var(--w-black, 900);
  line-height:1.04;
  letter-spacing:-.03em;
  text-wrap:balance;
  color:var(--split-ink);
}

.bx-split__sub{
  margin:clamp(6px, .8vw, 10px) 0 0;
  font-size:clamp(1.25rem, 2.3vw, 1.9rem);
  font-weight:var(--w-black, 900);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--c-orange, #F14B1C);
}

.bx-split__body{
  margin:clamp(14px, 1.8vw, 22px) 0 0;
  max-inline-size:46ch;
  font-size:clamp(.95rem, 1.15vw, 1.06rem);
  line-height:1.72;
  color:var(--split-dim);
}

.bx-split__actions{
  margin-block-start:clamp(20px, 2.4vw, 30px);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.bx-split__btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 26px;
  font-size:.98rem;
  font-weight:var(--w-black, 900);
  text-decoration:none;
  clip-path:var(--cut-shape);
  --cut:12px;
  transition:background .22s ease, color .22s ease, transform .25s cubic-bezier(.2,.7,.3,1);
}
.bx-split__btn svg{ inline-size:15px; block-size:15px; }

.bx-split__btn--primary{ background:var(--c-orange, #F14B1C); color:#FFFFFF; }
.bx-split__btn--primary:hover,
.bx-split__btn--primary:focus-visible{
  background:var(--c-orange-deep, #C93A0F);
  transform:translateY(-2px);
}

.bx-split__btn--ghost{
  background:transparent;
  color:var(--split-ink);
  box-shadow:inset 0 0 0 2px var(--split-ink);
}
.bx-split__btn--ghost:hover,
.bx-split__btn--ghost:focus-visible{
  background:var(--split-ink);
  color:#FFFFFF;
  transform:translateY(-2px);
}
.bx-split--dark .bx-split__btn--ghost:hover{ color:#141416; }

.bx-split__media{
  position:relative;
  margin:0;
  overflow:hidden;
  aspect-ratio:16 / 10;
  background:var(--c-plate, #F6F2EC);
  clip-path:var(--cut-media-shape);
  --cut-media:20px;
}
.bx-split--dark .bx-split__media{ background:#1E1E21; }

.bx-split__asset{
  position:absolute;
  inset:0;
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
  display:block;
}

@media (max-width:860px){
  .bx-split__inner,
  .bx-split--flip .bx-split__inner{
    grid-template-columns:minmax(0, 1fr);
    gap:clamp(22px, 5vw, 32px);
  }
  .bx-split__media,
  .bx-split--flip .bx-split__media{ order:1; aspect-ratio:4 / 3; }
  .bx-split__text,
  .bx-split--flip .bx-split__text{ order:2; }
  .bx-split__body{ max-inline-size:none; }
  .bx-split__btn{ flex:1 1 auto; justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  .bx-split__btn:hover,
  .bx-split__btn:focus-visible{ transform:none; }
}


/* ==================================================================
   שני האייקונים הגדולים — קבצי SVG עצמאיים

   הם רחבים במקום ריבועיים, ולכן הרוחב אוטומטי והגובה קובע.
   האנימציה יושבת בתוך הקובץ עצמו ולכן פועלת גם דרך img.
   ================================================================== */

.labx-ico--img{
  inline-size:auto;
  block-size:clamp(50px, 5.2vw, 70px);
  max-inline-size:100%;
  object-fit:contain;
  display:block;
  margin-inline:auto;
}

.labx-ico--vehicles{ block-size:clamp(42px, 4.4vw, 58px); }