/* ============================================================
   home-elementor.css — bridge layer for the Elementor-built
   homepage (page slug: home-elementor).

   The native sections (Who, Approach, Process, Why) are real
   Elementor containers + widgets. Elementor's flexbox container
   engine would otherwise fight the home.css grid layouts, so we
   re-assert those layouts here. Scoped to .omri-elementor-home
   so the original + ACF homepages are untouched. Loaded last.
   ============================================================ */

/* Let home.css own the boxed width; don't let Elementor add gaps to .wrap */
.omri-elementor-home .wrap{--gap:0px;gap:0 !important;max-width:var(--wrap,1280px);}
/* Exception: the peek strip's .wrap.pk-in wants a real gap between dot and label. */
.omri-elementor-home .proj-peek .pk-in{gap:28px !important;}

/* ---- Grid layouts (Elementor containers default to flex) ---- */
.omri-elementor-home .who-grid{display:flex !important;flex-direction:row !important;justify-content:space-between !important;align-items:center !important;gap:clamp(36px,5vw,84px) !important;}
.omri-elementor-home .who-copy{flex:0 0 50% !important;max-width:50% !important;}
.omri-elementor-home .who-photo{flex:0 0 260px !important;width:260px !important;}
.omri-elementor-home .appr-grid{display:grid !important;grid-template-columns:1.05fr .95fr !important;gap:clamp(34px,5vw,80px) !important;align-items:center !important;}
.omri-elementor-home .proc-grid{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) !important;gap:clamp(40px,6vw,96px) !important;align-items:start !important;}
.omri-elementor-home .why-grid{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:34px !important;}
.omri-elementor-home .proc-step{display:grid !important;grid-template-columns:auto 1fr !important;gap:clamp(18px,2.2vw,28px) !important;align-items:start !important;}

/* ---- Flex/stack groups: neutralize Elementor container gap, let home.css margins space children ---- */
.omri-elementor-home .who-copy,
.omri-elementor-home .appr-copy,
.omri-elementor-home .why-in,
.omri-elementor-home .proc-copy{display:block !important;gap:0 !important;}
.omri-elementor-home .proc{display:flex !important;flex-direction:column !important;gap:clamp(28px,3.4vw,44px) !important;}
.omri-elementor-home .why-item{display:block !important;gap:0 !important;}
.omri-elementor-home .who-sig{display:flex !important;flex-direction:row !important;align-items:baseline !important;gap:14px !important;}

/* Elementor wraps each widget in .elementor-widget > .elementor-widget-container.
   Kill the default per-widget bottom spacing so home.css descendant margins win. */
.omri-elementor-home .who-copy .elementor-widget,
.omri-elementor-home .appr-copy .elementor-widget,
.omri-elementor-home .why-item .elementor-widget,
.omri-elementor-home .proc-copy .elementor-widget{margin-block:0 !important;}

/* Headings/text: inherit color from the design's descendant rules, not Elementor defaults */
.omri-elementor-home .elementor-heading-title{color:inherit;font:inherit;letter-spacing:inherit;}
.omri-elementor-home .who-copy .elementor-widget-container > p:last-child,
.omri-elementor-home .appr-copy .elementor-widget-container > p:last-child{margin-bottom:0;}

/* Image widget inside .who-photo must fill the circle */
.omri-elementor-home .who-photo .elementor-widget,
.omri-elementor-home .who-photo .elementor-widget-container,
.omri-elementor-home .who-photo figure,
.omri-elementor-home .who-photo .elementor-image{position:absolute;inset:0;height:100%;width:100%;margin:0;}
.omri-elementor-home .who-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;}

/* xpro-heading: strip its wrapper spacing so it sits like the native h2/h3 */
.omri-elementor-home .xpro-elementor-heading,
.omri-elementor-home .xpro-heading-wrapper{margin:0 !important;}

/* Sections whose original markup had inline padding-top:0 */
.omri-elementor-home .pt0{padding-top:0 !important;}

/* Process step 4 kept a longer reveal delay in the original */
.omri-elementor-home .in .pd4{transition-delay:.7s;}

/* Process steps — each `.proc-step.fade` is observed individually and
   flipped to `.in` when it enters the viewport, so the timeline reveals
   step-by-step as the visitor scrolls. The parent `.proc-grid` also gets
   `.in` from the general reveal observer, which would otherwise trigger
   the site-wide `.in .fade { opacity:1 }` rule for every child step at
   once — the first override below keeps the steps hidden while only the
   ancestor is `.in`, so only the per-step observer flips them. */
.omri-elementor-home .in .proc-step.fade{
  opacity:0;
  transform:translateY(24px);
}
.omri-elementor-home .proc-step.fade.in,
.omri-elementor-home .in .proc-step.fade.in{
  opacity:1;
  transform:translateY(0);
  transition-delay:0s;
}

/* .proc-dot as a widget wrapper: keep the 52px disc + centered svg */
.omri-elementor-home .proc-dot{width:52px;height:52px;flex-shrink:0;}
.omri-elementor-home .proc-dot .elementor-widget-container{display:flex;align-items:center;justify-content:center;height:100%;}
/* Center the vertical timeline line on the dots. Elementor gives both .proc and
   .proc-step a default 10px padding, so the dot's center sits 20px further right
   than the home.css baseline assumes — shift the line to match. */
.omri-elementor-home .proc::before{inset-inline-start:45px;}

/* .why container must keep its green panel padding over Elementor defaults */
.omri-elementor-home .why{padding:clamp(38px,5vw,74px) !important;}
.omri-elementor-home .why-in{position:relative;z-index:1;}

/* xpro-heading (Approach lead): match .appr-lead scale/leading, green center word */
.omri-elementor-home .appr-lead .xpro-heading-text,
.omri-elementor-home .appr-lead-x .xpro-heading-title{font:inherit;}

/* ================================================================
   Fixes for the all-widget page (`home-widgets`) where Elementor's
   widget/container wrappers were interfering with the site's
   scroll-driven layout maths.
   ================================================================ */

/* HERO — the .hero-bg + .hero-wm backdrops are absolutely positioned;
   they must position relative to .hero, not the widget wrapper. */
.omri-elementor-home .hero > .elementor-widget-html,
.omri-elementor-home .hero > .elementor-widget-html > .elementor-widget-container{
	display: contents;
}
/* .hero must be the positioning context. */
.omri-elementor-home .hero{ position: relative; }

/* HERO-FOOT — original: <p class="hero-sub"> + <a class="swap"> as direct
   flex children spread space-between. In widget-land the direct children are
   Elementor widget wrappers, which default to auto width — that pushes the
   button to the far right. Constrain widths so the visual layout matches. */
.omri-elementor-home .hero-foot{ align-items: flex-end; }
.omri-elementor-home .hero-foot > .elementor-widget{
	flex: 0 1 auto !important;
	width: auto !important;
}
.omri-elementor-home .hero-foot > .elementor-widget-text-editor{ max-width: 42ch; }
.omri-elementor-home .hero-foot .elementor-widget-container{ padding: 0; }
/* Align the sub-copy with the heading, which is pulled -120px on desktop.
   Mobile drops the pull on the heading, so we drop it here too. */
@media (min-width: 768px){
	.omri-elementor-home .hero-foot > .elementor-widget-text-editor{ margin-left: -120px; }
}

/* SERVICES — the scroll-pin math reads .svc-scroll.getBoundingClientRect().
   Any parent flex/padding recomputed each frame causes visible jitter.
   Make the widget wrappers around .svc-scroll behave as plain blocks. */
.omri-elementor-home .elementor-widget-omri-services-scroll,
.omri-elementor-home .elementor-widget-omri-services-scroll > .elementor-widget-container{
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100%;
}

/* WORK STACK — same story for the shortcode-rendered work stack. */
.omri-elementor-home .elementor-widget-shortcode,
.omri-elementor-home .elementor-widget-shortcode > .elementor-widget-container{
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100%;
}
/* Sticky-based pinning (browser native) — don't add `contain: paint` on the
   scroll sections OR any ancestor. `contain: paint` establishes an isolation
   context that clips sticky descendants. Same story for `isolation: isolate`,
   `overflow: hidden/clip/auto/scroll`, and `transform` on ancestors. */
/* The orbit spins every scroll frame. Do NOT contain: paint here — the bead
   sits on the ring edge (top:0; translateY(-50%)) so half of it lives outside
   the circle box at every angle. contain:paint would clip it at top/bottom. */
.omri-elementor-home .svc-circle{ contain: layout; overflow: visible; }
.omri-elementor-home .svc-circle .orbit{ will-change: transform; }
.omri-elementor-home .svc-circle .bead{
	will-change: transform;
	backface-visibility: hidden;
	transform: translate(-50%,-50%) translateZ(0);
}
/* Item swaps use filter: blur() which is repaint-heavy. Promote each item
   to its own layer so a filter change doesn't re-paint the whole slot. */
.omri-elementor-home .svc-item{
	will-change: opacity, filter, transform;
	backface-visibility: hidden;
}
/* Prevent horizontal scrollbar toggling — that changes viewport width mid-scroll,
   which shifts everything and shows up as a shake. */
.omri-elementor-home{ overflow-x: clip; }
html:has(.omri-elementor-home){ overflow-x: clip; }

/* Ancestors of the sticky sections must NOT create a stacking / containing
   context that traps sticky. Explicitly clear anything Elementor might add. */
.omri-elementor-home #work,
.omri-elementor-home #services,
.omri-elementor-home .elementor-widget-omri-services-scroll,
.omri-elementor-home .elementor-widget-omri-services-scroll > .elementor-widget-container,
.omri-elementor-home .elementor-widget-shortcode,
.omri-elementor-home .elementor-widget-shortcode > .elementor-widget-container,
.omri-elementor-home .e-con-full:has(> .elementor-widget-shortcode),
.omri-elementor-home .e-con-full:has(> .elementor-widget-omri-services-scroll){
	transform: none !important;
	contain: none !important;
	isolation: auto !important;
	overflow: visible !important;
}

/* PRICING / FAQ widgets — also full-block for consistency and to avoid
   Elementor flex sizing quirks. Guard against Elementor's per-device
   visibility classes so the editor's Hide toggles keep working. */
.omri-elementor-home .elementor-widget-omri-pricing-table:not([class*="elementor-hidden-"]),
.omri-elementor-home .elementor-widget-omri-pricing-table > .elementor-widget-container,
.omri-elementor-home .elementor-widget-omri-faq:not([class*="elementor-hidden-"]),
.omri-elementor-home .elementor-widget-omri-faq > .elementor-widget-container{
	display: block !important;
	padding: 0 !important;
	width: 100%;
}

/* The bare "shell" containers that only hold one section widget should
   let it stretch full-width — no flex quirks. Same visibility guard. */
.omri-elementor-home > .elementor > .e-con:not([class*="elementor-hidden-"]):has(> .elementor-widget-omri-services-scroll),
.omri-elementor-home > .elementor > .e-con:not([class*="elementor-hidden-"]):has(> .elementor-widget-shortcode),
.omri-elementor-home > .elementor > .e-con:not([class*="elementor-hidden-"]):has(> .elementor-widget-omri-pricing-table),
.omri-elementor-home > .elementor > .e-con:not([class*="elementor-hidden-"]):has(> .elementor-widget-omri-faq){
	display: block !important;
	padding: 0 !important;
}

/* CTA (final Ready-to-get-to-work) — break out of the boxed Elementor container
   so the dark background reaches the viewport edges. Elementor caps every .e-con
   at max-width:1280px, so we also nuke that cap on this section specifically. */
.omri-elementor-home .cta{
	width:100vw !important;
	max-width:none !important;
	margin-inline:calc(50% - 50vw) !important;
}

/* Mobile collapse (mirror home.css breakpoints) */
@media(max-width:820px){
  .omri-elementor-home .who-grid{flex-direction:column !important;padding-inline:16px !important;}
  .omri-elementor-home .who-grid > .who-copy{flex-basis:auto !important;align-self:stretch !important;width:100% !important;max-width:100% !important;}
  .omri-elementor-home .appr-grid,
  .omri-elementor-home .proc-grid,
  .omri-elementor-home .why-grid{grid-template-columns:1fr !important;}
  /* Mobile dot is 46px (23px radius); keep line centered under it. */
  .omri-elementor-home .proc::before{inset-inline-start:42px;}
}


/* ============================================================
   HE "How it works" (איך זה עובד) — page 349 process section.
   On the Hebrew page this section is a flex row-reverse .wrap holding
   .proc (steps) + .sec-head.wide (masked headline). By default the
   headline is capped at 34ch (~325px), which crams the big Aran title,
   orphans its orange accent dot onto its own line, and leaves the two
   columns touching with no gap. Widen the headline column, add space
   between the columns, and center the pair. Desktop only — the mobile
   breakpoint (<=820px) stacks the Elementor container on its own.
   ============================================================ */
@media (min-width:821px){
  .omri-elementor-home.is-he .wrap:has(> .proc){
    gap:clamp(48px,5vw,72px) !important;
    justify-content:center !important;
  }
  .omri-elementor-home.is-he .wrap:has(> .proc) > .sec-head.wide{
    flex:0 1 440px !important;
    max-width:440px !important;
  }
  .omri-elementor-home.is-he .wrap:has(> .proc) > .proc{
    flex:0 1 580px !important;
    max-width:580px !important;
  }
}


/* ============================================================
   FAQ section (#faq) padding + box — match the section above it.
   The FAQ container was full-width (max-width:100%) with hand-set
   percentage padding, so it neither aligned with the boxed content
   sections nor matched the .beat band above it. Box it to the site
   width and give it the same 72/64 padding (same clamps as .beat
   vertical + .wrap horizontal) so its content lines up exactly.
   ============================================================ */
.omri-elementor-home #faq{
  max-width:var(--wrap,1280px) !important;
  margin-inline:auto !important;
  padding-block:clamp(40px,5vw,80px) !important;
  padding-inline:clamp(20px,5vw,64px) !important;
}


/* ============================================================
   Selected-work cards (.proj-title) — Hebrew Aran weights.
   The two-line card titles defaulted to Aran 300 (line 1, .lt) and
   Aran 900 (line 2, .hv.gld from .proto.is-he .stack .hv). Set them
   to the lighter Aran 400 / bolder Aran 500 pairing used elsewhere.
   Colour on line 2 (.gld gold) is untouched — weight only.
   ============================================================ */
.proto.is-he .proj-title .lt{ font-family:var(--aran) !important; font-weight:400 !important; }
.proto.is-he .proj-title .hv{ font-family:var(--aran) !important; font-weight:500 !important; }


/* ============================================================
   Work end-card line (.work-next h3) — keep on one line in Hebrew.
   The default max-width:16ch (home.css) fits the English line but
   wraps the longer Hebrew "האתר הבא כאן יכול להיות שלך." onto two.
   ~20ch holds it on a single line and stays responsive (ch scales
   with the clamped font, so it still fits down to mobile).
   ============================================================ */
.proto.is-he .work-next h3{ max-width:20ch !important; }


/* ============================================================
   Hero headline (EN) — don't clip the long line on the right.
   The hero content wrapper is capped (max-width:1280 + 64px padding),
   which leaves the headline box ~3px too narrow for the longest
   no-wrap line ("Designed To Work For Your Business."), so its last
   glyph + accent dot were cut off at wide viewports. Size the box to
   the line (max-content) instead: the headline's LEFT position is
   unchanged, nothing else moves, and it can't overflow (the line is
   always a fraction of the viewport). Excluded below 601px, where the
   hero lines wrap (home.css) and there's nothing to clip.
   ============================================================ */
@media (min-width:601px){
  .proto:not(.is-he) .hero .elementor-widget-container:has(> h1.hero-title){
    width: max-content !important;
    max-width: none !important;
    padding-right: 6px !important;
  }
}