/* People Leads 2026 - about page. Values are comp px x var(--u) (see css.css):
base = Mobile-05 (1024 canvas),@media (min-width:1024px) = Desktop "אודות" (1920 canvas). */
/* ===== hero:the shared .page-hero,with this page's photo framing ===== */
.page-hero--about .page-hero__bg img { left:calc(-16.6 * var(--u));
top:calc(-6.6 * var(--u));
width:calc(1057.2 * var(--u))
}
/* ===== story:text,then the devices mockup ===== */
.story { padding-top:calc(52.1 * var(--u))
}
.story__text { padding-inline:calc(40 * var(--u)) calc(29.8 * var(--u));
color:var(--navy);
font-size:max(15px,calc(46 * var(--u)));
line-height:1.3957;
text-align:justify
}
.story__head { padding:0;
text-align:start
}
.story__head .h2 { margin-top:calc(18 * var(--u))
}
.story__text p { margin-top:calc(64.2 * var(--u))
}
.story__head + p { margin-top:calc(28.7 * var(--u))
}
/* above the metrics' hex ground,which starts behind the mockup */
.story__media { position:relative;
z-index:1;
width:calc(991.1 * var(--u));
margin:calc(76.2 * var(--u)) auto 0
}
/* ===== metrics:four grey discs on the hex ground ===== */
.metrics { isolation:isolate;
padding:calc(79.8 * var(--u)) 0 calc(248 * var(--u))
}
.metrics__list { display:grid;
grid-template-columns:repeat(2,calc(471 * var(--u)));
gap:calc(2.8 * var(--u)) calc(3.4 * var(--u));
justify-content:center
}
.metrics__list::before { content:"";
position:absolute;
z-index:-1;
left:calc(-15.4 * var(--u));
top:calc(-600.1 * var(--u));
width:calc(1054.7 * var(--u));
height:calc(1874 * var(--u));
background:url(../../../design/default/css/../files/img/abt-hex-mobile.webp) 0 0 / 100% 100% no-repeat;
pointer-events:none
}
.metric { --k:1.6988;
position:relative;
display:flex;
flex-direction:column;
align-items:center;
aspect-ratio:1;
padding-top:calc(168.1 * var(--u));
border-radius:50%;
background:#e6e6e6;
color:var(--navy);
text-align:center
}
/* icons differ in height;
the comp centres each on one line */
.metric__icon { position:absolute;
left:50%;
top:calc((111.2 - var(--h) * var(--k) / 2) * var(--u));
width:auto;
height:calc(var(--h) * var(--k) * var(--u));
translate:-50% 0
}
.metric__num { direction:ltr;
font-size:calc(101.93 * var(--u));
font-weight:700;
line-height:1.2
}
.metric__num small { font-size:.6667em
}
.metric__label { margin-top:calc(-1.7 * var(--u));
font-size:max(12px,calc(40.77 * var(--u)));
line-height:1.2
}
/* ===== video band ===== */
.video-band { position:relative;
height:calc(687.5 * var(--u));
overflow:hidden;
background:#013
}
/* the comp's photo is 16.7 wider than the band and runs 7.9 under the faq block;
cover keeps wider tablets filled */
.video-band__img img { position:absolute;
left:calc(-8.3 * var(--u));
top:0;
width:calc(100% + 16.7 * var(--u));
max-width:none;
height:calc(695.4 * var(--u));
object-fit:cover;
object-position:50% 0
}
.video-band__play { left:calc(50% - 75.54 * var(--u));
top:calc(50% - 75.54 * var(--u));
width:calc(151.08 * var(--u));
aspect-ratio:1
}
.video-band__play::before,.video-band__play::after { width:100%
}
.video-band__play img { width:100%
}
.video-band__play:focus-visible { outline:3px solid var(--orange);
outline-offset:4px
}
/* ===== navy block:why-us card,FAQ,portrait ===== */
.faq { margin-bottom:calc(23.9 * var(--u));
padding-top:calc(95.3 * var(--u));
background:#013;
color:#fff
}
.faq__wrap { display:flex;
flex-direction:column
}
/* paddings net of the outline,which the comp centres on the card edge */
.why { margin-inline:calc(39.3 * var(--u));
padding:calc(40.3 * var(--u)) calc(57.6 * var(--u)) calc(49.5 * var(--u));
border:max(1px,calc(2.22 * var(--u))) solid #fff;
border-radius:calc(64.64 * var(--u))
}
.why__title { margin-inline-start:calc(8.9 * var(--u));
font-size:calc(81.91 * var(--u));
font-weight:700;
line-height:1.2
}
.why__list { display:flex;
flex-direction:column;
gap:calc(65 * var(--u));
margin-top:calc(75.3 * var(--u));
font-size:max(15px,calc(46 * var(--u)));
line-height:1.2
}
.why__list li { display:flex;
align-items:center;
gap:calc(35.4 * var(--u))
}
.why__list li::before { content:"";
flex:none;
width:calc(69.5 * var(--u));
height:calc(69.5 * var(--u));
background:url(../../../design/default/css/../files/icons/check.svg) 0 0 / 100% 100% no-repeat
}
.faq__title { margin-top:calc(82.7 * var(--u));
padding-inline:calc(38 * var(--u));
font-size:calc(77.95 * var(--u));
font-weight:700;
line-height:1.2
}
.faq__list { display:flex;
flex-direction:column;
gap:calc(12.8 * var(--u));
margin:calc(34.4 * var(--u)) calc(39.3 * var(--u)) 0
}
.faq-item { overflow:hidden;
border-radius:calc(25 * var(--u));
background:#fff;
color:var(--navy);
interpolate-size:allow-keywords
}
.faq-item::details-content { block-size:0;
overflow:clip;
transition:block-size .4s cubic-bezier(.2,.7,.2,1),content-visibility .4s allow-discrete
}
.faq-item[open]::details-content { block-size:auto
}
/* the question row:bullet disc (start),question,plus (end;
turns to a cross when open) */
.faq-item__q { display:flex;
align-items:flex-start;
padding:calc(31 * var(--u)) calc(51.9 * var(--u)) calc(38.7 * var(--u)) calc(42.4 * var(--u));
font-size:max(15px,calc(46 * var(--u)));
line-height:1.2;
list-style:none;
cursor:pointer;
transition:color .25s
}
.faq-item__q::-webkit-details-marker { display:none
}
.faq-item__q::before { content:"";
flex:none;
position:relative;
top:calc(3.8 * var(--u));
width:calc(52.2 * var(--u));
height:calc(52.2 * var(--u));
margin-left:calc(30.6 * var(--u));
background:url(../../../design/default/css/../files/icons/faq-q.svg) 0 0 / 100% 100% no-repeat
}
.faq-item__q::after { content:"";
flex:none;
width:calc(22.6 * var(--u));
height:calc(22.6 * var(--u));
margin:calc(18.7 * var(--u)) auto 0 0;
padding-inline-start:calc(57.5 * var(--u));
background:url(../../../design/default/css/../files/icons/faq-plus.svg) 0 0 / calc(22.6 * var(--u)) no-repeat;
box-sizing:content-box;
transition:rotate .3s;
transform-origin:calc(11.3 * var(--u)) 50%
}
.faq-item__q:hover { color:var(--orange)
}
.faq-item__q:focus-visible { outline:3px solid var(--orange);
outline-offset:-5px;
border-radius:calc(25 * var(--u))
}
.faq-item[open] .faq-item__q { padding-bottom:0
}
.faq-item[open] .faq-item__q::after { rotate:45deg
}
.faq-item__a { padding:0 calc(134.7 * var(--u)) calc(49.7 * var(--u)) calc(122.5 * var(--u));
font-size:max(15px,calc(46 * var(--u)));
line-height:1.2;
text-align:justify
}
.faq__figure { margin-top:calc(97.5 * var(--u))
}
.faq__photo { width:calc(687.9 * var(--u));
margin-inline-start:calc(159.4 * var(--u))
}
@media (min-width:1024px) {
.page-hero--about .page-hero__bg img { left:calc(-8.3 * var(--u));
top:calc(-4.4 * var(--u));
width:calc(1936.5 * var(--u));
height:calc(1001 * var(--u))
}
.page-hero--about .page-hero__text { padding-top:calc(312.9 * var(--u))
}
.page-hero--about .page-hero__lead { display:none
}
.page-hero--about .crumbs { margin-top:calc(187.3 * var(--u))
}
.story { padding:calc(92.4 * var(--u)) 0 calc(10 * var(--u))
}
/* 572 not the comp's 552:the comp squeezes lines by hand (scale .976-1.06);
572 gives the same breaks */
.story__text { width:calc(572 * var(--u));
margin-inline-start:calc(360 * var(--u));
padding:0;
font-size:max(16px,calc(30 * var(--u)));
line-height:1.4267
}
.story__head .h2 { margin-top:calc(20.8 * var(--u))
}
.story__text p { margin-top:calc(42.8 * var(--u))
}
.story__head + p { margin-top:calc(24.7 * var(--u))
}
.story__media { position:absolute;
left:calc(24.8 * var(--u));
top:calc(57.4 * var(--u));
width:calc(927.8 * var(--u));
margin:0
}
.metrics { padding:calc(142.6 * var(--u)) 0 calc(167.7 * var(--u))
}
.metrics__list { grid-template-columns:repeat(4,calc(277.26 * var(--u)));
gap:calc(1.97 * var(--u))
}
.metrics__list::before { left:calc(-8.3 * var(--u));
top:calc(-142.6 * var(--u));
width:calc(1936.5 * var(--u));
height:calc(647.6 * var(--u));
background-image:url(../../../design/default/css/../files/img/abt-hex-desktop.webp)
}
.metric { --k:1;
padding-top:calc(98.9 * var(--u))
}
.metric__icon { top:calc((65.4 - var(--h) / 2) * var(--u))
}
.metric__num { font-size:calc(60 * var(--u))
}
.metric__label { margin-top:calc(-1.1 * var(--u));
font-size:max(12px,calc(24 * var(--u)))
}
.video-band { height:calc(753.4 * var(--u))
}
/* the comp trims 6 of the 8px the cover scale leaves on the sides from the left */
.video-band__img img { left:0;
width:100%;
height:100%;
object-position:73% 0
}
.video-band__play { left:calc(50% - 54.8 * var(--u));
top:calc(50% - 54.8 * var(--u));
width:calc(109.6 * var(--u))
}
/* three columns:why-us card | empty frame + portrait | FAQ */
.faq { min-height:calc(908.1 * var(--u));
margin-bottom:calc(123 * var(--u));
padding:0
}
.faq__wrap { display:grid;
grid-template-columns:calc(473.2 * var(--u)) calc(52.9 * var(--u)) calc(473.2 * var(--u)) calc(44.9 * var(--u)) calc(671.4 * var(--u));
align-items:start;
min-height:inherit;
padding-inline:calc(129.5 * var(--u)) calc(74.9 * var(--u))
}
.why { grid-column:1;
grid-row:1;
height:calc(370.7 * var(--u));
margin:calc(83.3 * var(--u)) 0 0;
padding:calc(20.1 * var(--u)) calc(28.8 * var(--u)) 0;
border-width:max(1px,calc(1.11 * var(--u)));
border-radius:calc(32.35 * var(--u))
}
.why__title { margin-inline-start:calc(4.6 * var(--u));
font-size:calc(41 * var(--u))
}
.why__list { gap:calc(31.3 * var(--u));
margin-top:calc(37.05 * var(--u));
font-size:max(16px,calc(30 * var(--u)))
}
.why__list li { gap:calc(17.8 * var(--u));
line-height:calc(36 * var(--u))
}
.why__list li::before { width:calc(34.8 * var(--u));
height:calc(34.8 * var(--u))
}
.faq__main { grid-column:5;
grid-row:1;
padding:calc(95.4 * var(--u)) 0 calc(102.1 * var(--u))
}
.faq__title { margin:0;
padding:0;
font-size:calc(55 * var(--u));
line-height:1.26
}
.faq__list { gap:calc(5.55 * var(--u));
margin:calc(23.8 * var(--u)) 0 0
}
.faq-item { border-radius:calc(18.5 * var(--u))
}
.faq-item__q { padding:calc(23.9 * var(--u)) calc(38.8 * var(--u)) calc(27.4 * var(--u)) calc(32.1 * var(--u));
font-size:max(16px,calc(30 * var(--u)));
line-height:1.2267
}
.faq-item__q::before { top:calc(.7 * var(--u));
width:calc(36.8 * var(--u));
height:calc(36.8 * var(--u));
margin-left:calc(49.7 * var(--u))
}
.faq-item__q::after { width:calc(15.9 * var(--u));
height:calc(15.9 * var(--u));
margin-top:calc(11.2 * var(--u));
padding-inline-start:calc(12.9 * var(--u));
background-size:calc(15.9 * var(--u));
transform-origin:calc(7.95 * var(--u)) 50%
}
.faq-item__q:focus-visible { border-radius:calc(18.5 * var(--u))
}
/* 494 wide,not the comp's 485:its lines are scaled by hand (1.03);
494 gives the same breaks */
.faq-item__a { padding:0 calc(125.3 * var(--u)) calc(22.5 * var(--u)) calc(52.1 * var(--u));
font-size:max(16px,calc(30 * var(--u)));
line-height:1.2267
}
/* the portrait stands on the block's bottom edge,over the frame and the card's corner */
.faq__figure { position:relative;
grid-column:3;
grid-row:1;
align-self:stretch;
margin:0
}
.faq__figure::before { content:"";
position:absolute;
inset:calc(83.3 * var(--u)) 0 auto;
height:calc(370.7 * var(--u));
border:max(1px,calc(1.11 * var(--u))) solid #fff;
border-radius:calc(32.35 * var(--u))
}
.faq__photo { position:absolute;
left:calc(152.8 * var(--u));
bottom:0;
width:calc(606.1 * var(--u));
max-width:none;
margin:0
}
}
/* Hero side bands where the viewport outgrows the canvas (see services.css). Generated from this
page's hero images;
regenerate if they change (from build/):
python3 -I ../tools/edgebands.py files/img/abt-hero-mobile.webp -6.6 1057.2 1703           (tablet)
python3 -I ../tools/edgebands.py files/img/abt-hero-desktop.webp -4.4 1936.5 972 0.05 1001 (>1920:the comp stretches it to 1001) */
@media (min-width:640px) and (max-width:1023px) { .page-hero--about { background:linear-gradient(#031838 calc(0.0 * var(--u)),#021837 calc(77.5 * var(--u)),#021736 calc(162.8 * var(--u)),#011636 calc(246.9 * var(--u)),#011736 calc(332.2 * var(--u)),#011636 calc(416.3 * var(--u)),#011533 calc(501.6 * var(--u)),#041937 calc(585.7 * var(--u)),#081a36 calc(671.0 * var(--u)),#071933 calc(755.1 * var(--u)),#021227 calc(840.4 * var(--u)),#020d1f calc(925.7 * var(--u)),#1e2633 calc(1009.8 * var(--u)),#292c36 calc(1095.1 * var(--u)),#525a68 calc(1179.1 * var(--u)),#212b39 calc(1264.4 * var(--u)),#768191 calc(1348.5 * var(--u)),#576578 calc(1433.8 * var(--u)),#38485f calc(1517.9 * var(--u)),#37475f calc(1544.4 * var(--u)),#fff calc(1544.4 * var(--u))) 0 0 / 50% 100% no-repeat,linear-gradient(#011a3a calc(0.0 * var(--u)),#011839 calc(77.5 * var(--u)),#021837 calc(162.8 * var(--u)),#021636 calc(246.9 * var(--u)),#011533 calc(332.2 * var(--u)),#011533 calc(416.3 * var(--u)),#011533 calc(501.6 * var(--u)),#011634 calc(585.7 * var(--u)),#011736 calc(671.0 * var(--u)),#001532 calc(755.1 * var(--u)),#011533 calc(840.4 * var(--u)),#011635 calc(925.7 * var(--u)),#061731 calc(1009.8 * var(--u)),#10192a calc(1095.1 * var(--u)),#232733 calc(1179.1 * var(--u)),#10192d calc(1264.4 * var(--u)),#06172f calc(1348.5 * var(--u)),#031632 calc(1433.8 * var(--u)),#122640 calc(1517.9 * var(--u)),#1f324a calc(1554.0 * var(--u)),#fff calc(1554.0 * var(--u))) 100% 0 / 50% 100% no-repeat,#fff
} }
@media (min-width:1921px) { .page-hero--about { background:linear-gradient(#031938 calc(0.0 * var(--u)),#031939 calc(45.1 * var(--u)),#041a3a calc(95.7 * var(--u)),#041a3a calc(145.2 * var(--u)),#041b3a calc(195.8 * var(--u)),#041b3a calc(245.3 * var(--u)),#051c3b calc(295.9 * var(--u)),#051a39 calc(345.4 * var(--u)),#051938 calc(396.0 * var(--u)),#091b37 calc(445.5 * var(--u)),#061932 calc(496.1 * var(--u)),#273951 calc(545.6 * var(--u)),#182a40 calc(596.2 * var(--u)),#374a61 calc(645.7 * var(--u)),#3b4e65 calc(696.3 * var(--u)),#3f5068 calc(745.8 * var(--u)),#405168 calc(796.4 * var(--u)),#3c4e66 calc(845.9 * var(--u)),#3e5066 calc(886.6 * var(--u)),#fff calc(886.6 * var(--u))) 0 0 / 50% 100% no-repeat,linear-gradient(#011632 calc(0.0 * var(--u)),#011633 calc(45.1 * var(--u)),#011532 calc(95.7 * var(--u)),#011533 calc(145.2 * var(--u)),#021634 calc(195.8 * var(--u)),#021634 calc(245.3 * var(--u)),#021634 calc(295.9 * var(--u)),#021634 calc(345.4 * var(--u)),#021634 calc(396.0 * var(--u)),#011533 calc(445.5 * var(--u)),#021634 calc(496.1 * var(--u)),#021634 calc(545.6 * var(--u)),#021634 calc(596.2 * var(--u)),#021734 calc(645.7 * var(--u)),#051936 calc(696.3 * var(--u)),#0e233e calc(745.8 * var(--u)),#071b38 calc(796.4 * var(--u)),#021734 calc(845.9 * var(--u)),#112540 calc(896.5 * var(--u)),#152843 calc(918.5 * var(--u)),#fff calc(918.5 * var(--u))) 100% 0 / 50% 100% no-repeat,#fff
} }
/* past 1920 the hex would end in a hard line at the wrap edge:fade its outer columns out instead */
@media (min-width:1921px) { .metrics__list::before { -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)
} }