/* Berger BI v2 — company (#about, #technologies, #careers). Owned by the company redesign; every rule is scoped to
   these sections. Tokens come from base.css. No glass, no card-in-card, two radii, hairlines only. */

/* ------------------------------------------------------------------ shared */
#dc-root [data-v2c] { color: var(--v2-ink); }
/* Heebo glyphs overshoot the 1.14 line box by ~.16em (page-wide, base.css): pad it back so nothing overflows */
#dc-root [data-v2c] h2 { max-width: 22ch; text-wrap: balance; padding-bottom: .18em; margin-bottom: -.18em !important; }
#dc-root [data-v2c-arrow], #dc-root [data-v2c-rail-arrow] { flex: none; display: block; }
html[lang="he"] #dc-root [data-v2c-arrow], html[lang="he"] #dc-root [data-v2c-rail-arrow] { transform: scaleX(-1); }

/* ------------------------------------------------------------------ about */
#dc-root #about { background: transparent; }
#dc-root [data-v2c-about] {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  grid-template-areas: "head fig" "body fig";
  grid-template-rows: auto 1fr;
  column-gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
#dc-root [data-v2c-about-head] { grid-area: head; display: flow-root; padding-bottom: 8px; }
#dc-root [data-v2c-about-body] { grid-area: body; }
#dc-root [data-v2c-about-body] { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--v2-line); }
#dc-root [data-v2c-about-body] p { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.7; color: var(--v2-muted); text-wrap: pretty; }
#dc-root [data-v2c-about-body] p + p { margin-top: 14px; }

/* the photo slot: a treated plate, not a "team" claim (no caption, the alt says it is illustrative). Stock is cropped
   to a detail, turned monochrome, washed into the palette and given a fine print screen so it reads as texture.
   One switch on the <img>: data-about-photo="stock" (now) · "real" (lighter treatment, full frame) · "off" (no photo:
   the heading and the text share the row, as in careers; the lazy image is never requested). */
#dc-root [data-v2c-about-fig] { grid-area: fig; margin: 6px 0 0; min-width: 0; }
#dc-root [data-v2c-plate] {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5;
  border-radius: var(--v2-r-card); background: var(--v2-bg-2);
  box-shadow: inset 0 0 0 1px var(--v2-line);
}
#dc-root [data-v2c-plate] img[data-about-photo] {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover;
}
#dc-root [data-v2c-plate] img[data-about-photo="stock"] {
  /* crop to a detail with layout (not transform: keeps it paintable in every capture path) */
  inset: auto; left: -13%; top: -29%; width: 132%; height: 132%; object-position: 50% 50%;
  filter: grayscale(1) contrast(.92) brightness(1.18) !important;
}
#dc-root [data-v2c-plate] [data-about-tint] {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--v2-navy) !important; mix-blend-mode: color !important; opacity: .72;
}
#dc-root [data-v2c-plate] [data-v2c-screen] {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(238, 241, 245, .0) 55%, rgba(238, 241, 245, .38) 100%),
    radial-gradient(circle at 50% 50%, rgba(11, 22, 38, .28) 0 .7px, transparent 1.05px) 0 0 / 3px 3px;
  mix-blend-mode: multiply;
}
#dc-root [data-v2c-plate] img[data-about-photo="real"] { filter: grayscale(.2) contrast(1.02) !important; }
#dc-root [data-v2c-plate]:has(img[data-about-photo="real"]) [data-about-tint] { opacity: .18; mix-blend-mode: multiply !important; }
#dc-root [data-v2c-plate]:has(img[data-about-photo="real"]) [data-v2c-screen] { display: none; }
#dc-root [data-v2c-plate][data-v2c-failed] img, #dc-root [data-v2c-plate][data-v2c-failed] [data-v2c-screen] { display: none; }
#dc-root [data-v2c-plate][data-v2c-failed] [data-about-tint] { opacity: .06; mix-blend-mode: normal !important; }
#dc-root [data-v2c-about]:has(img[data-about-photo="off"]) {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head body"; grid-template-rows: none;
}
#dc-root [data-v2c-about]:has(img[data-about-photo="off"]) [data-v2c-about-fig] { display: none; }
#dc-root [data-v2c-about]:has(img[data-about-photo="off"]) [data-v2c-about-body] { margin-top: 0; padding-top: 0; border-top: 0; }
#dc-root #about:has(img[data-about-photo="off"]) [data-v2c-vision] { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

/* vision: a quiet statement across the full width, unsigned (no signer is known) */
#dc-root [data-v2c-vision] {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: clamp(40px, 6vw, 88px);
  margin-top: 88px; padding-top: 32px; border-top: 1px solid var(--v2-line-2);
}
#dc-root [data-v2c-vision-label] { font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--v2-muted); padding-top: 4px; }
#dc-root [data-v2c-vision-body] { margin: 0; max-width: 44ch; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.5; font-weight: 500; letter-spacing: -.005em; color: var(--v2-ink); text-wrap: pretty; }
html[lang="en"] #dc-root [data-v2c-vision-body] { max-width: 48ch; }

@media (max-width: 899px) {
  #dc-root [data-v2c-about], #dc-root [data-v2c-about]:has(img[data-about-photo="off"]) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "fig" "body"; grid-template-rows: none; }
  #dc-root [data-v2c-about]:has(img[data-about-photo="off"]) [data-v2c-about-body] { margin-top: 24px; }
  #dc-root [data-v2c-about-fig] { margin-top: 32px; }
  #dc-root [data-v2c-plate] { aspect-ratio: 16 / 9; }
  #dc-root [data-v2c-plate] img[data-about-photo="stock"] { left: -24%; top: -44%; width: 156%; height: 156%; }
  #dc-root [data-v2c-about-body] { margin-top: 28px; padding-top: 0; border-top: 0; }
  #dc-root [data-v2c-vision] { grid-template-columns: minmax(0, 1fr); row-gap: 12px; margin-top: 64px; padding-top: 28px; }
  #dc-root [data-v2c-vision-label] { padding-top: 0; }
}
@media (max-width: 639px) {
  #dc-root [data-v2c-about-fig] { margin-top: 28px; }
  #dc-root [data-v2c-plate] { aspect-ratio: 16 / 9; }
  #dc-root [data-v2c-vision] { margin-top: 56px; }
}

/* ------------------------------------------------------------------ technologies */
#dc-root #technologies { background: var(--v2-surface); border-top: 1px solid var(--v2-line); border-bottom: 1px solid var(--v2-line); }
#dc-root [data-v2c-sub] { margin: 16px 0 0; max-width: 56ch; text-wrap: balance; font-size: 17px; line-height: 1.6; color: var(--v2-muted); }

/* five columns read along the data flow (right to left in Hebrew); lists align through subgrid */
#dc-root [data-v2c-stack] {
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto;
}
#dc-root [data-v2c-grp] {
  display: grid; grid-template-rows: subgrid; grid-row: span 2; min-width: 0;
  padding: 0 20px; border-inline-start: 1px solid var(--v2-line);
}
#dc-root [data-v2c-grp]:first-child { padding-inline-start: 0; border-inline-start: 0; }
#dc-root [data-v2c-grp]:last-child { padding-inline-end: 0; }
#dc-root [data-v2c-rail] { display: flex; align-items: center; gap: 10px; height: 20px; color: var(--v2-soft); }
#dc-root [data-v2c-idx] { font-family: var(--v2-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--v2-navy); direction: ltr; unicode-bidi: isolate; }
#dc-root [data-v2c-rail-line] { flex: 1; height: 1px; background: var(--v2-line-2); margin-inline-end: -8px; }
#dc-root [data-v2c-rail-arrow] { color: var(--v2-soft); }
#dc-root [data-v2c-grp]:last-child [data-v2c-rail-line], #dc-root [data-v2c-grp]:last-child [data-v2c-rail-arrow] { display: none; }
#dc-root [data-v2c-grp-name] { margin: 18px 0 0; font-size: 18px; line-height: 1.35; font-weight: 600; color: var(--v2-ink); }
#dc-root [data-v2c-grp-desc] { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--v2-muted); }
#dc-root [data-v2c-tools] { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--v2-line-2); align-self: start; }
#dc-root [data-v2c-tool] {
  display: flex; align-items: center; gap: 12px; min-height: 48px; min-width: 0;
  border-bottom: 1px solid var(--v2-line);
}
/* each tool's mark in its brand colour, in a small white round badge (hairline + a breath of shadow so it still reads
   as an object on the white band) */
#dc-root [data-v2c-logo] {
  flex: none; width: 32px; height: 32px; box-sizing: border-box; display: grid; place-items: center;
  background: var(--v2-surface); border: 1px solid var(--v2-line); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(11, 22, 38, .06);
}
#dc-root [data-v2c-logo] img { display: block; width: 18px; height: 18px; object-fit: contain; }
#dc-root [data-v2c-tool-name] { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--v2-ink); min-width: 0; }

#dc-root [data-v2c-more] { margin: 40px 0 0; font-size: 16px; line-height: 1.6; color: var(--v2-muted); }
#dc-root [data-v2c-link] { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--v2-navy); }
#dc-root [data-v2c-link] [data-v2c-arrow] { transition: transform 200ms var(--v2-ease); }
@media (hover: hover) and (pointer: fine) {
  #dc-root [data-v2c-link]:hover { color: var(--v2-ink); }
  #dc-root [data-v2c-link]:hover [data-v2c-arrow] { transform: translateX(3px); }
  html[lang="he"] #dc-root [data-v2c-link]:hover [data-v2c-arrow] { transform: scaleX(-1) translateX(3px); }
}

/* under 1100px the columns become rows: group on the start side, its tools beside it */
@media (max-width: 1099px) {
  #dc-root [data-v2c-stack] { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; margin-top: 40px; border-bottom: 1px solid var(--v2-line-2); }
  #dc-root [data-v2c-grp], #dc-root [data-v2c-grp]:first-child, #dc-root [data-v2c-grp]:last-child {
    grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 40px;
    padding: 28px 0; border-inline-start: 0; border-top: 1px solid var(--v2-line-2);
  }
  #dc-root [data-v2c-rail-line], #dc-root [data-v2c-rail-arrow] { display: none; }
  #dc-root [data-v2c-grp-name] { margin-top: 10px; }
  #dc-root [data-v2c-tools] { margin: 0; border-top: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); column-gap: 24px; }
  #dc-root [data-v2c-tool] { min-height: 46px; }
}
@media (max-width: 699px) {
  /* phone: each group is its name, its purpose and a wrapped run of tools (not one hairline row per tool) */
  #dc-root [data-v2c-stack] { margin-top: 32px; }
  #dc-root [data-v2c-grp], #dc-root [data-v2c-grp]:first-child, #dc-root [data-v2c-grp]:last-child { grid-template-columns: minmax(0, 1fr); padding: 22px 0 24px; }
  #dc-root [data-v2c-grp-name] { margin-top: 0; font-size: 17px; }
  #dc-root [data-v2c-grp-desc] { margin-top: 4px; }
  #dc-root [data-v2c-tools] { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px 22px; }
  #dc-root [data-v2c-tool] { gap: 8px; min-height: 28px; border-bottom: 0; }
  #dc-root [data-v2c-tool-name] { font-size: 14px; white-space: nowrap; }
  #dc-root [data-v2c-logo] { width: 28px; height: 28px; }
  #dc-root [data-v2c-logo] img { width: 16px; height: 16px; }
  #dc-root [data-v2c-more] { margin-top: 28px; }
}

/* ------------------------------------------------------------------ careers */
#dc-root #careers { padding: var(--v2-sec-y) 0; background: transparent; }
#dc-root [data-v2c-careers] {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 72px); align-items: baseline;
}
#dc-root [data-v2c-careers-head] h2 { margin-bottom: 0 !important; }
#dc-root [data-v2c-careers-body] p { margin: 0; max-width: 54ch; font-size: 16px; line-height: 1.7; color: var(--v2-muted); text-wrap: pretty; }
#dc-root [data-v2c-careers-actions] { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
/* the button (secondary) and the address (text link) take their look from system.css */
@media (max-width: 899px) {
  #dc-root [data-v2c-careers] { grid-template-columns: minmax(0, 1fr); row-gap: 20px; align-items: start; }
}
@media (max-width: 639px) {
  #dc-root [data-v2c-btn] { width: 100%; justify-content: center; }
  #dc-root [data-v2c-careers-actions] { gap: 4px; }
}

/* ------------------------------------------------------------------ motion off */
@media (prefers-reduced-motion: reduce) {
  #dc-root [data-v2c] *, #dc-root [data-v2c] *::before, #dc-root [data-v2c] *::after { transition: none !important; animation: none !important; }
}
html.a11y-no-motion #dc-root [data-v2c] *, html.a11y-no-motion #dc-root [data-v2c] *::before, html.a11y-no-motion #dc-root [data-v2c] *::after { transition: none !important; animation: none !important; }