/* ===== About page (Figma 4952:3070 desktop / 4984:13759 mobile) ===== */

.hdr.hdr--solid { background:#fff; box-shadow:0 2px 18px rgba(0,0,0,.07); }

.abt {
  background:#f6f6f6;
  direction:rtl;
  padding-top:calc(100vw * 137 / 1920);
}

/* ---------- HERO (5277:3740 / 5277:3743) ---------- */
.abt-hero {
  position:relative;
  margin-bottom:calc(100vw * 93 / 1920);
}

/* photo + gradients */
.abt-hero__visual {
  position:relative;
  height:calc(100vw * 617 / 1920);
  overflow:hidden;
  background:#000;
}
.abt-hero__img { position:absolute; inset:0; z-index:0; }
.abt-hero__img img {
  position:absolute; left:0; width:100%; max-width:none;
}
.abt-hero__img--desk {
  height:122.2%; top:-22.17%; object-fit:cover;
}
.abt-hero__img--mob { display:none; }

.abt-hero__shade { position:absolute; inset:0; z-index:1; pointer-events:none; }
/* Figma 4952:5202 — bottom-to-top darken (depth + white-card transition) */
.abt-hero__shade--main {
  background:linear-gradient(to top, #000 0.25%, rgba(0,0,0,0) 42.95%);
}
/* Figma 4952:5205 — left edge fade to black (369px) */
.abt-hero__shade--left {
  width:calc(100vw * 369 / 1920);
  background:linear-gradient(to left, rgba(0,0,0,0) 0%, #000 100%);
}
/* Figma 4952:5206 — right text zone darken (holds near-black behind H1) */
.abt-hero__shade--right {
  left:calc(100vw * 600 / 1920); right:0;
  background:linear-gradient(to left, #000 0%, #000 22%, rgba(0,0,0,0) 100%);
}

.abt__crumb {
  position:absolute; z-index:5; top:calc(100vw * 20 / 1920);
  right:calc(100vw * 312 / 1920);
  display:flex; align-items:center; gap:8px;
  font-size:calc(100vw * 16 / 1920); color:#fff;
}
.abt__crumb a { display:flex; align-items:center; gap:6px; color:#fff; }
.abt__crumb-home { width:calc(100vw * 16 / 1920); height:calc(100vw * 16 / 1920); display:block; filter:brightness(0) invert(1); opacity:.95; }
.abt__crumb-cur { font-weight:700; }

/* title — right side over image (Figma center at y=196 from image top) */
.abt-hero__h1 {
  position:absolute; z-index:4;
  right:calc(100vw * 312 / 1920);
  top:calc(100vw * 196 / 1920);
  transform:translateY(-50%);
  width:calc(100vw * 580 / 1920);
  font-size:calc(100vw * 62 / 1920); line-height:calc(100vw * 72 / 1920);
  font-weight:400; color:#fff; text-align:right; margin:0;
}
.abt-hero__h1-line { display:block; }
.abt-hero__h1-set--mob { display:none; }

/* stats — desktop: over image; mobile: in dark band */
.abt-hero__stats-band { display:none; }

.abt-hero__stats {
  list-style:none; margin:0; padding:0;
}
.abt-hero__stats--desk {
  position:absolute; z-index:4;
  right:calc(100vw * 334 / 1920);
  top:calc(100vw * 299 / 1920);
  width:calc(100vw * 496 / 1920);
  /* RTL column: flex-start = right edge → stats hug the right, under the H1 */
  display:flex; flex-direction:column; align-items:flex-start; gap:calc(100vw * 6 / 1920);
}
.abt-hero__stats--mob { display:none; }

.abt-hero__stat {
  display:flex; flex-direction:row-reverse; align-items:center; gap:calc(100vw * 15 / 1920);
  font-size:calc(100vw * 23 / 1920); line-height:calc(100vw * 24 / 1920); color:#fff;
  padding:calc(100vw * 6 / 1920) calc(100vw * 10 / 1920);
}
.abt-hero__stat b { font-weight:700; }
.abt-hero__stat i {
  flex:0 0 calc(100vw * 8 / 1920); width:calc(100vw * 8 / 1920); height:calc(100vw * 8 / 1920);
  background:#b58d41; transform:rotate(45deg);
}

/* white intro card overlapping image bottom */
.abt-hero__intro {
  position:relative; z-index:6;
  width:calc(100vw * 1376 / 1920); margin:calc(100vw * -87 / 1920) auto 0;
  min-height:calc(100vw * 179 / 1920);
  background:#fff; box-shadow:0 0 30px rgba(0,0,0,.1);
  padding:calc(100vw * 28 / 1920) calc(100vw * 40 / 1920);
  text-align:center;
}
.abt-hero__marker {
  position:absolute; left:50%; transform:translateX(-50%);
  top:calc(100vw * -93 / 1920);
  width:calc(100vw * 16 / 1920); height:calc(100vw * 93 / 1920);
  display:block; object-fit:contain;
}
.abt-hero__intro p {
  font-size:calc(100vw * 23 / 1920); line-height:calc(100vw * 33 / 1920);
  font-weight:600; color:#030a11; max-width:calc(100vw * 1296 / 1920); margin:0 auto;
}

/* ---------- SPLIT BLOCKS (נעים להכיר + אודות המשרד) ---------- */
.abt-block {
  width:calc(100vw * 1296 / 1920); margin:0 auto calc(100vw * 70 / 1920);
}
.abt-split {
  display:flex; background:#fff; min-height:calc(100vw * 627 / 1920);
  box-shadow:0 8px 30px rgba(0,0,0,.06);
}
.abt-split__media {
  flex:0 0 calc(100vw * 649 / 1920); position:relative; overflow:hidden;
}
.abt-split__media img {
  width:100%; height:100%; object-fit:cover;
}
.abt-split--lior .abt-split__media img { object-position:center bottom; }
.abt-split--office .abt-split__media img { object-position:center 25%; }
.abt-split__text {
  flex:1 1 auto; padding:calc(100vw * 45 / 1920) calc(100vw * 53 / 1920);
  display:flex; flex-direction:column; justify-content:flex-start;
}
.abt-split__gold {
  font-size:calc(100vw * 42 / 1920); line-height:calc(100vw * 48 / 1920);
  color:#b58d41; margin-bottom:calc(100vw * 4 / 1920);
}
.abt-split__title {
  font-size:calc(100vw * 42 / 1920); line-height:calc(100vw * 48 / 1920);
  font-weight:400; color:#000; margin-bottom:calc(100vw * 22 / 1920);
}
.abt-split__title--solo {
  font-size:calc(100vw * 42 / 1920); line-height:calc(100vw * 48 / 1920);
  font-weight:400; color:#000; margin-bottom:calc(100vw * 22 / 1920);
}
.abt-split__body {
  font-size:calc(100vw * 21 / 1920); line-height:calc(100vw * 32 / 1920);
  color:#151515; text-align:right;
}
.abt-split__body p + p { margin-top:calc(100vw * 15 / 1920); }
.abt-split--office .abt-split__body { font-size:calc(100vw * 20 / 1920); line-height:calc(100vw * 28 / 1920); }
.abt-split--office .abt-split__body p + p { margin-top:calc(100vw * 12 / 1920); }

/* photo on visual left (נעים להכיר): text first in RTL = right, media second = left */
.abt-split--lior { flex-direction:row; }
.abt-split--lior .abt-split__media { order:2; }
.abt-split--lior .abt-split__text { order:1; }

/* photo on visual right (אודות המשרד): media first in RTL = right */
.abt-split--office { flex-direction:row; }

/* ---------- WHY US ---------- */
.abt-why {
  width:calc(100vw * 1296 / 1920); margin:0 auto calc(100vw * 80 / 1920);
}
.abt-why__title {
  font-size:calc(100vw * 42 / 1920); font-weight:400; color:#000;
  text-align:center; margin-bottom:calc(100vw * 36 / 1920);
}
.abt-why__grid {
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:calc(100vw * 16 / 1920);
}
.abt-why__card {
  background:#fff; box-shadow:0 8px 30px rgba(0,0,0,.06);
  min-height:calc(100vw * 378 / 1920);
  padding:calc(100vw * 20 / 1920) calc(100vw * 16 / 1920) calc(100vw * 24 / 1920);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.abt-why__icon {
  width:calc(100vw * 100 / 1920); height:calc(100vw * 100 / 1920);
  object-fit:contain; margin-bottom:calc(100vw * 12 / 1920);
}
.abt-why__card h3 {
  font-size:calc(100vw * 26 / 1920); font-weight:600; color:#000;
  margin-bottom:calc(100vw * 12 / 1920); line-height:1.25;
}
.abt-why__card h3.long { font-size:calc(100vw * 22 / 1920); }
.abt-why__card p {
  font-size:calc(100vw * 20 / 1920); line-height:calc(100vw * 28 / 1920); color:#000;
}

/* ============ MOBILE (5277:3743) ============ */
@media (max-width: 1024px) {
  .abt { padding-top:72px; padding-bottom:76px; }

  .abt-hero {
    margin-bottom:28px;
    display:flex; flex-direction:column;
    min-height:0;
  }

  /* visual = photo (top band) + dark zone below where H1 sits (Figma 5277:3743) */
  .abt-hero__visual { height:auto; flex:none; background:#0d0d0d; }
  .abt-hero__img--desk { display:none; }
  /* crop empty right wall + max zoom that still keeps all 5 people, centred */
  .abt-hero__img { position:relative; inset:auto; width:100%; aspect-ratio:5 / 3; height:auto; }
  .abt-hero__img--mob {
    display:block; position:absolute; inset:0;
    width:100%; height:100%; left:0; top:0;
    object-fit:cover; object-position:9% center;
  }
  .abt-hero__shade--left,
  .abt-hero__shade--right { display:none; }
  /* dark zone under the photo + soft fade into the photo bottom */
  .abt-hero__shade--main {
    background:linear-gradient(to top, #0d0d0d 0%, #0d0d0d 40%, rgba(13,13,13,0) 58%);
  }

  .abt__crumb { top:10px; right:16px; font-size:14px; }
  .abt__crumb-home { width:14px; height:14px; display:block; }

  /* title — right-aligned on the dark zone below the photo (Figma 4984:14506) */
  .abt-hero__h1-set--desk { display:none; }
  .abt-hero__h1-set--mob { display:block; }
  .abt-hero__h1 {
    position:relative;
    left:auto; right:auto;
    top:auto; bottom:auto;
    transform:none;
    width:100%; max-width:100%;
    margin:0; padding:6px 18px 4px;
    text-align:center;
    font-size:30px; line-height:1.18;
  }
  /* fixed two-line break, matching Figma ("…עו״ד" / "ליאור זקר") */
  .abt-hero__h1-set--mob .abt-hero__h1-line { display:block; }

  .abt-hero__stats--desk { display:none; }

  .abt-hero__stats-band {
    display:block; background:#0d0d0d;
    margin-top:0; padding:4px 18px 36px;
    position:relative; z-index:3;
  }
  .abt-hero__stats--mob {
    display:flex; flex-direction:column; align-items:stretch;
    gap:14px; width:100%;
  }
  /* ltr row so diamond lands on the right; text wraps inside, right-aligned */
  .abt-hero__stat {
    position:relative; width:100%;
    direction:ltr; flex-direction:row; align-items:flex-start;
    font-size:22px; line-height:26px; gap:13px; padding:0;
  }
  .abt-hero__stat span { flex:1; min-width:0; direction:rtl; text-align:right; }
  .abt-hero__stat i {
    flex:0 0 8px; width:8px; height:8px; margin-top:8px;
  }

  .abt-hero__intro {
    width:auto; margin:0 14px; min-height:0;
    padding:28px 18px 32px;
    box-shadow:0 0 30px rgba(0,0,0,.1);
  }
  .abt-hero__marker { top:-36px; width:16px; height:36px; }
  .abt-hero__intro p { font-size:21px; line-height:32px; font-weight:600; max-width:312px; }

  .abt-block { width:auto; margin:0 14px 28px; }
  .abt-split {
    flex-direction:column; min-height:0;
    box-shadow:0 4px 20px rgba(0,0,0,.06);
  }
  .abt-split--lior .abt-split__media,
  .abt-split--office .abt-split__media { flex:none; height:330px; }
  .abt-split--lior .abt-split__text,
  .abt-split--office .abt-split__text { padding:26px 20px 30px; }
  /* נעים להכיר — text first, image below (Figma 4984:14523) */
  .abt-split--lior .abt-split__text { order:1; }
  .abt-split--lior .abt-split__media { order:2; }
  .abt-split--lior .abt-split__media img { object-position:center; }
  /* אודות המשרד — image first, text below (Figma 4984:14556) */
  .abt-split--office .abt-split__media { order:1; }
  .abt-split--office .abt-split__text { order:2; }
  .abt-split--office .abt-split__media img { object-position:center top; }

  /* mobile type scale — matches Figma mobile (36 / 21·32) */
  .abt-split__gold { font-size:36px; line-height:40px; text-align:center; }
  .abt-split__title { font-size:36px; line-height:40px; text-align:center; margin-bottom:18px; }
  .abt-split__title--solo { font-size:36px; line-height:40px; text-align:center; margin-bottom:18px; }
  .abt-split__body { font-size:21px; line-height:32px; text-align:center; }
  .abt-split__body p + p { margin-top:14px; }
  .abt-split--office .abt-split__body { font-size:21px; line-height:32px; text-align:center; }

  .abt-why { width:auto; margin:0 14px 32px; padding-top:8px; }
  .abt-why__title { font-size:38px; margin-bottom:24px; }
  .abt-why__grid { grid-template-columns:1fr; gap:14px; }
  .abt-why__card {
    min-height:0; flex-direction:row; align-items:flex-start;
    text-align:right; gap:16px; padding:20px 18px;
  }
  .abt-why__icon {
    width:66px; height:66px; flex:0 0 66px; margin:0;
  }
  /* incl. .long override — Figma mobile card title 26px */
  .abt-why__card h3,
  .abt-why__card h3.long { font-size:26px; margin-bottom:8px; line-height:1.25; }
  .abt-why__card p { font-size:19px; line-height:28px; }
  .abt-why__card-tx { flex:1; min-width:0; }
}