/* ERRA site layer on top of the verbatim Webflow CSS (webflow.css). */
:root {
  --primary-brand-color: #0050c9;
  --drawer-width: 720px;
}
@media (max-width: 991px) { :root { --drawer-width: 100vw; } }

/* --- Head custom code (from Webflow settings) --- */
.w-richtext ul, .w-richtext ol { direction: rtl; list-style-position: inside; padding: 0; margin: 0 0 1em; text-align: right; }
.w-richtext li { text-align: inherit; margin: .25em 0; }

.no-scroll { overflow: hidden; }
.contact-us-popup { position: fixed; inset: 0; z-index: 2147483647; display: block; pointer-events: none; }
.contact-us-popup .contact-us-l-wrap { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .28s ease; z-index: 1; }
.contact-us-popup .contact-us-r-wrap { position: absolute; top: 0; right: 0; height: 100vh; width: var(--drawer-width, 720px); max-width: 92vw; background: #fff; transform: translateX(100%); transition: transform .36s cubic-bezier(.2,.8,.2,1); box-shadow: -24px 0 48px rgba(0,0,0,.12); overflow: auto; z-index: 3; pointer-events: auto; }
.contact-us-popup.is-open { pointer-events: auto; }
.contact-us-popup.is-open .contact-us-l-wrap { opacity: 1; }
.contact-us-popup.is-open .contact-us-r-wrap { transform: translateX(0); }
.drawer-close, [data-close-contact], [data-close] { z-index: 5 !important; pointer-events: auto !important; }

/* --- scroll reveal (static/js/reveal.js): slide-in preset of IX2 = 100px up, 1000ms outQuart --- */
.reveal-ready [data-reveal] { opacity: 0; transform: translate3d(0, 100px, 0); }
.reveal-ready [data-reveal].is-revealed {
  opacity: 1; transform: none;
  transition: opacity 1s cubic-bezier(.165, .84, .44, 1), transform 1s cubic-bezier(.165, .84, .44, 1);
}
@media (prefers-reduced-motion: reduce) { .reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* Mobile menu button: hamburger -> X while open (IX2 navbar open/close) */
.nav_menu-button.w--open .menu-icon, .menu-button-3.w--open .menu-icon { display: none; }
.nav_menu-button.w--open .close-button { display: block; }

/* Lenis (smooth scroll) base rules, kept from the live page embed */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* Direction model. The Webflow CSS was authored on an LTR canvas: the page
   (nav, grids, sliders) is laid out LTR and Hebrew blocks opt in with the .heb
   class (direction: rtl). The document itself is declared RTL for browsers, screen
   readers and search engines (<html lang="he" dir="rtl">), and body restores the
   LTR canvas so the existing classes behave exactly as on the live site. */
body.body { direction: ltr; }

/* === D === lead forms + cookie consent */
.w-form-done, .w-form-fail { display: none; }
.cf-turnstile-box { margin: 12px 0; min-height: 0; }
.cookie-consent { position: fixed; z-index: 2147483000; inset-inline: 16px; bottom: 16px; max-width: 920px; margin-inline: auto; direction: rtl; text-align: right;
  background: #fff; color: #1a1a2e; border-radius: 16px; box-shadow: 0 12px 48px rgba(0,0,0,.22); padding: 18px 22px; font-family: var(--font-family, Arimo, sans-serif); font-size: 15px; line-height: 1.5; }
.cookie-consent[hidden], .cookie-consent__settings[hidden] { display: none; }
.cookie-consent__main { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cookie-consent__text { flex: 1 1 360px; }
.cookie-consent__text p { margin: 4px 0 0; }
.cookie-consent__title { font-size: 17px; }
.cookie-consent a { color: var(--primary-brand-color, #0050c9); text-decoration: underline; }
.cookie-consent__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-consent__btn { cursor: pointer; border: 1px solid var(--primary-brand-color, #0050c9); background: #fff; color: var(--primary-brand-color, #0050c9); border-radius: 999px; padding: 9px 22px; font: inherit; font-weight: 600; transition: background .2s, color .2s; }
.cookie-consent__btn:hover { background: #eef3fc; }
.cookie-consent__btn--primary { background: var(--primary-brand-color, #0050c9); color: #fff; }
.cookie-consent__btn--primary:hover { background: #003f9f; }
.cookie-consent__btn--link { border-color: transparent; text-decoration: underline; padding-inline: 10px; }
.cookie-consent__btn:focus-visible { outline: 3px solid #177fab; outline-offset: 2px; }
.cookie-consent__settings { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e4e7ee; display: grid; gap: 10px; }
.cookie-consent__row { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.cookie-consent__row input { margin-top: 4px; accent-color: var(--primary-brand-color, #0050c9); }
.cookie-consent__settings .cookie-consent__btn { justify-self: start; }
@media (max-width: 767px) { .cookie-consent { inset-inline: 8px; bottom: 8px; padding: 14px 16px; max-height: 80vh; overflow: auto; } .cookie-consent__actions { width: 100%; } .cookie-consent__btn--primary { flex: 1; } }

/* === A === home + projects (stage A) */
.splide__slide[hidden] { display: none !important; }
.erra-lightbox { position: fixed; inset: 0; z-index: 2147483000; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; }
.erra-lightbox__frame { width: min(92vw, 420px); aspect-ratio: 9 / 16; max-height: 90vh; }
.erra-lightbox__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.erra-lightbox__close { position: absolute; top: 16px; right: 20px; background: none; border: 0; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }
.lightbox-link { cursor: pointer; }
@keyframes slide { 0% { transform: translateX(calc(0% + 30px)); } 100% { transform: translateX(-100%); } }
.project-animate1 { animation: slide 45s infinite linear; }
/* Webflow per-element (#w-node-*) grid placement, restated by class */
.hero-wrap > .hero-video-wrapper { justify-self: center; }
.hero-wrap > .hero-text-content-wrapper { align-self: center; }
.hero1 > .div-block-37 { grid-area: 1 / 2 / 2 / 3; }
.hero1 > .div-block-38 { grid-area: 2 / 2 / 3 / 3; }
.flex-block-4 > img { place-self: stretch center; }
.frame-points.copop > div:not(.div-block-511) { align-self: center; }
.frame-points.copop > .extra { justify-self: center; }
.div-block-511 > img { justify-self: center; }
.grid-7 > .div-block-520.gedera { grid-area: 1 / 2 / 2 / 3; align-self: auto; }
/* Team card hover (Webflow IX2 on live, timings sampled from the live page):
   second photo ~250ms, overlay ~300ms, bio fades in (100ms) while sliding up 70px (300ms).
   Also on keyboard focus and on tap (.is-active, set by home.js). */
.about-us-photo-hover-slider2 { opacity: 0; transition: opacity .25s ease-out; }
.about-us-photo-slider2 .overlay { opacity: 0; transition: opacity .3s ease-in-out; }
.about-us-photo-slider2 .small-paragraph {
  opacity: 0; transform: translate3d(0, 70px, 0);
  transition: opacity .1s ease-out, transform .3s cubic-bezier(.4, 0, .2, 1);
}
.about-us-photo-slider2:hover .about-us-photo-hover-slider2, .about-us-photo-slider2:focus-within .about-us-photo-hover-slider2,
.about-us-photo-slider2.is-active .about-us-photo-hover-slider2,
.about-us-photo-slider2:hover .overlay, .about-us-photo-slider2:focus-within .overlay, .about-us-photo-slider2.is-active .overlay { opacity: 1; }
.about-us-photo-slider2:hover .small-paragraph, .about-us-photo-slider2:focus-within .small-paragraph,
.about-us-photo-slider2.is-active .small-paragraph { opacity: 1; transform: none; }
.about-us-photo-slider2:focus-within, .about-us-photo-slider2.is-active { opacity: 1; }
.about-us-photo-slider2:focus-visible { outline: 2px solid #0050c9; outline-offset: -2px; }
/* === /A === */

/* === B === */
.policy-text-box > .policy-paragraph { padding-bottom: 10px; }
.policy-paragraph p { margin: 0; }
/* === /B === */

/* === 1:1 hover parity (Webflow IX2 hover interactions measured on the live site) === */
/* a-6 / a-98: social icons -> brand blue in 150ms, label white */
.hero-social-icons-wrap, .hero-social-icons-wrap-2 { transition: background-color .15s ease-in-out, opacity .3s ease-out; }
.link-social-hero:hover .hero-social-icons-wrap, .link-social-hero:hover .hero-social-icons-wrap-2 { background-color: #0050c9; opacity: 1; }
.link-social-hero:hover .text-lang-nav { color: #fff; transition: color .15s ease-in-out; }
/* a-67: blog / career card -> round arrow button blue, arrow swap, photo 0.8 */
.blog-card .blog-image-card, .career-card .blog-image-card { transition: opacity .5s; }
.blog-card .image-cover, .career-card .image-cover { transition: opacity .5s; }
.blog-card:hover .slider-button.mobile.blog, .career-card:hover .slider-button.mobile.blog { background-color: #0050c9; color: #fff; transition: background-color 0s, color .5s; }
.blog-card:hover .arrow-black, .career-card:hover .arrow-black { display: none; }
.blog-card:hover .arrow-white, .career-card:hover .arrow-white { display: block; }
.blog-card:hover .blog-image-card, .career-card:hover .blog-image-card { opacity: .8; }
.blog-card:hover .image-cover, .career-card:hover .image-cover { opacity: 1; }
/* a-41: testimonial card -> photo zoom 1.1 (outExpo, 500ms), quote 0.8 -> 1 */
.slider-tall .slider-tall_photo { transition: transform .5s; }
.slider-tall .quote-feedback { opacity: .8; transition: opacity .5s; }
.slider-tall:hover .slider-tall_photo { transform: scale(1.1); transition: transform .5s cubic-bezier(.19, 1, .22, 1); }
.slider-tall:hover .quote-feedback { opacity: 1; }
/* a-77: nav link nudge */
.nav_link { transition: transform .5s cubic-bezier(.165, .84, .44, 1); }
.nav_link:hover { transform: translateX(2px); }

/* === fix: home "Projects section" CTA form (.cta-2) ===
   Webflow gave the submit button margin-top:40px, so on desktop it sat 40px below the
   name/phone fields (same on the live site). Align it with the fields; keep the gap on
   mobile where the fields stack. */
@media (min-width: 768px) {
  .formblock3 .form .button.wight-200 {
    margin-top: 0;
    align-self: flex-start;
  }
}

/* === EN-B === */
/* English legal text sits in Webflow's rtl `.heb` section (live en.erra.co.il still has Hebrew there). */
html[lang="en"] .policy-text,
html[lang="en"] .policy-text * { direction: ltr; text-align: left; }
/* English labels are longer than the Hebrew ones: keep the footer link row on one line (incl. the JS "Cookie Settings" link). */
html[lang="en"] .footer-links,
html[lang="en"] .footer-links * { white-space: nowrap; }
/* === /EN-B === */