:root{
  --w2g-ease:cubic-bezier(.16,1,.3,1);            /* arrival */
  --w2g-ease-io:cubic-bezier(.76,0,.24,1);         /* wipes, curtains */
  --w2g-blue:#006aff; --w2g-navy:#07132b; --w2g-deep:#04152f;
  --w2g-header:96px;
}
@media (max-width:1000px),(min-width:1001px) and (max-height:800px){:root{--w2g-header:80px}}

/* Lenis + Gal's `html{scroll-behavior:smooth}` fight each other → Lenis wins while it runs */
html.lenis,html.w2g-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}

/* ───────────────────────── (b) reveals (SplitText lines rise from a mask) ───────────────────────── */
.w2g-line-mask{padding-block:.1em;margin-block:-.1em}
.w2g-line{will-change:transform}

/* ───────────────────────── (c) custom cursor (desktop pointer only) ───────────────────────── */
.w2g-cursor{position:fixed;inset:0 auto auto 0;z-index:960;pointer-events:none;display:none} /* rtl-check: ignore — pointer coords are physical */
html.w2g-cursor-on .w2g-cursor{display:block}
.w2g-cursor-ring,.w2g-cursor-dot{position:fixed;left:0;top:0;width:0;height:0;will-change:transform} /* rtl-check: ignore */
.w2g-cursor-shape{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:grid;place-items:center; /* rtl-check: ignore */
  width:38px;height:38px;border-radius:999px;border:1.5px solid var(--w2g-blue);background:rgb(0 106 255 / 0);
  opacity:0;transition:width .42s var(--w2g-ease),height .42s var(--w2g-ease),background-color .3s,border-color .3s,opacity .3s}
.w2g-cursor-dot span{position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--w2g-blue); /* rtl-check: ignore */
  opacity:0;transition:opacity .2s,transform .3s var(--w2g-ease)}
.w2g-cursor.is-on .w2g-cursor-shape,.w2g-cursor.is-on .w2g-cursor-dot span{opacity:1}
.w2g-cursor.is-link .w2g-cursor-shape{width:62px;height:62px;background:rgb(0 106 255 / .08)}
.w2g-cursor.is-link .w2g-cursor-dot span{transform:scale(.6)}
.w2g-cursor-label{font:700 15px/1 Heebo,Arial,sans-serif;color:#fff;white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .3s var(--w2g-ease)}
.w2g-cursor.is-label .w2g-cursor-shape{width:var(--w2g-cur-w,84px);height:46px;background:var(--w2g-blue);border-color:var(--w2g-blue)}
.w2g-cursor.is-label .w2g-cursor-label{opacity:1;transform:none;transition-delay:.08s}
.w2g-cursor.is-label .w2g-cursor-dot span{opacity:0}
.w2g-cursor.is-dark .w2g-cursor-shape{border-color:#fff}
.w2g-cursor.is-dark .w2g-cursor-dot span{background:#fff}
.w2g-cursor.is-dark.is-link .w2g-cursor-shape{background:rgb(255 255 255 / .12)}
.w2g-cursor.is-dark.is-label .w2g-cursor-shape{background:#fff;border-color:#fff}
.w2g-cursor.is-dark.is-label .w2g-cursor-label{color:var(--w2g-blue)}
.w2g-cursor.is-hidden .w2g-cursor-shape,.w2g-cursor.is-hidden .w2g-cursor-dot span{opacity:0}
.w2g-cursor.is-down .w2g-cursor-shape{transform:translate(-50%,-50%) scale(.86)}
html.w2g-cursor-on body,html.w2g-cursor-on a,html.w2g-cursor-on button,html.w2g-cursor-on canvas,html.w2g-cursor-on label,html.w2g-cursor-on [role="tab"]{cursor:none}
html.w2g-cursor-on :is(input,textarea,select){cursor:auto}

/* ───────────────────────── (e) page transition: View Transitions + blue curtain ───────────────────────── */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.62s}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal}
::view-transition-old(root){z-index:2;animation:w2g-vt-lift .62s var(--w2g-ease-io) both}
::view-transition-new(root){z-index:1;animation:none}
@keyframes w2g-vt-lift{to{clip-path:inset(0 0 100% 0)}}
.w2g-curtain{position:fixed;inset:0;z-index:1001;background:var(--w2g-blue);pointer-events:none;visibility:hidden;clip-path:inset(100% 0 0 0)}
.w2g-curtain::after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(to top,rgb(255 255 255 / .12),transparent)}
html.w2g-leaving .w2g-curtain{visibility:visible;animation:w2g-cur-in .48s var(--w2g-ease-io) forwards}
@keyframes w2g-cur-in{to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation:none!important}
  html.w2g-leaving .w2g-curtain{animation:none;visibility:hidden}
}

/* ───────────────────────── (f) FAQ: the builder toggles [hidden]; we animate the height ───────────────────────── */
.w2g-faq-anim{overflow:hidden;will-change:height}
.faq-item h3 svg{transition:transform .45s var(--w2g-ease)!important}

/* ───────────────────────── (g) services: depth swap + mouse parallax (translate composes with Gal's transform) ── */
.service-art-stage .scroll-art{will-change:transform,translate}
.w2g-svc-ghost{pointer-events:none;z-index:5}

/* ───────────────────────── (i) mobile sticky WhatsApp CTA ───────────────────────── */
.w2g-sticky{display:none}
@media (max-width:1000px){
  html.w2g-js:not(.w2g-nofx) .w2g-sticky{display:block;position:fixed;inset-inline:14px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:85;
    transform:translate3d(0,150%,0);visibility:hidden;transition:transform .6s var(--w2g-ease),visibility 0s .6s}
  html.w2g-js .w2g-sticky.is-on{transform:none;visibility:visible;transition:transform .6s var(--w2g-ease),visibility 0s}
  .w2g-sticky .w2g-sticky-cta{display:flex;width:100%;min-height:58px;padding:12px 22px;font-size:18px;gap:12px;border-radius:20px;
    box-shadow:0 12px 30px rgb(0 106 255 / .36),0 2px 6px rgb(7 19 43 / .16)}
  .w2g-sticky .w2g-sticky-cta svg{width:26px;height:26px;flex:none}
  html.w2g-reduce .w2g-sticky{transition:none}
}

/* ───────────────────────── (h) section#film — the page OPENS with the film (Yanir 4.10 evening) ─────────────────────────
   LIVE IS THE DEFAULT (no class needed): the first paint is already the full-bleed first frame under Gal's header, the
   opening line and «גללו» — nothing moves when the scripts arrive (CLS 0). Static player (poster + <video controls>) for
   OS reduced-motion (media query, before any script), html.w2g-film-static (?reduce / no WebGL / ?nofx / failure) and
   no-JS (<noscript> inside film-section.html). */
.film-section{position:relative;isolation:isolate;background:var(--w2g-film-bg,#04152f);color:#fff}
.film-track{position:relative;height:320vh}
.film-stage{position:sticky;top:var(--w2g-header);height:calc(100vh - var(--w2g-header));height:calc(100svh - var(--w2g-header));overflow:hidden}   /* just under Gal's header — never behind it */
.film-frame{position:absolute;inset:0;margin:0;clip-path:inset(var(--fy,0px) var(--fx,0px) var(--fyb,0px) var(--fx,0px) round var(--fr,0px))}
.film-screen{position:absolute;inset:0;background:#04152f}
.film-media{position:absolute;inset:0}
.film-media picture{display:contents}
.film-poster,.film-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.film-poster{object-fit:cover;object-position:50% 45%}
.film-gl{opacity:0;transition:opacity .45s ease-out}
html.w2g-film-live .film-gl{opacity:1}
.film-video{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#04152f}
.film-shade{position:absolute;inset:0;pointer-events:none;opacity:var(--fs,.6);
  background:linear-gradient(to top,rgb(4 21 47 / .8) 0,rgb(4 21 47 / .3) 32%,transparent 58%),linear-gradient(to bottom,rgb(4 21 47 / .34),transparent 24%)}
.film-intro{position:absolute;inset:0;z-index:3;pointer-events:none;will-change:opacity,transform}
.film-open{position:absolute;inset-inline-start:max(56px,calc((100% - 1555px) / 2));bottom:clamp(64px,10vh,112px);margin:0;max-width:12em;font-size:clamp(40px,4.6vw,78px);font-weight:900;line-height:1.08;letter-spacing:-1.6px;color:#fff;text-shadow:0 2px 30px rgb(4 21 47 / .45)}
.film-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex; /* rtl-check: ignore — centred */flex-direction:column;align-items:center;gap:8px;
  font:700 14px/1 Heebo,Arial,sans-serif;color:#fff;text-shadow:0 1px 10px rgb(4 21 47 / .5)}
.film-cue i{display:block;width:2px;height:34px;border-radius:2px;background:linear-gradient(to bottom,transparent,#fff);transform-origin:50% 0;animation:w2g-cue 1.8s cubic-bezier(.65,0,.35,1) infinite}
@keyframes w2g-cue{0%{transform:scaleY(0);opacity:1}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1) translateY(12px);opacity:0}}
html.w2g-paused .film-cue i{animation:none}
.film-ai-label{position:absolute;z-index:4;top:calc(var(--fy,0px) + 14px);inset-inline-end:calc(var(--fx,0px) + 16px);
  font:600 13px/1 Heebo,Arial,sans-serif;color:#fff;background:rgb(4 21 47 / .58);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgb(255 255 255 / .24);padding:8px 12px;border-radius:999px;white-space:nowrap;pointer-events:none}
.film-rail{position:absolute;z-index:3;inset-inline-start:calc(var(--fx,0px) + max(56px,calc((100% - 1555px) / 2)));bottom:calc(var(--fyb,0px) + 26px);
  width:min(220px,30vw);height:2px;border-radius:2px;background:rgb(255 255 255 / .22);overflow:hidden}
.film-rail i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:right center}
[dir="ltr"] .film-rail i{transform-origin:left center}
.film-captions{position:absolute;z-index:3;margin:0;inset-inline-start:calc(var(--fx,0px) + max(56px,calc((100% - 1555px) / 2)));bottom:calc(var(--fyb,0px) + clamp(64px,10vh,112px));
  width:min(9.4em,calc(100% - 2 * var(--fx,0px) - 112px));height:2.4em;
  font-size:clamp(34px,3.6vw,60px);font-weight:900;line-height:1.1;letter-spacing:-1.4px;color:#fff;text-shadow:0 2px 28px rgb(4 21 47 / .42)}
.film-caption{display:block;position:absolute;inset-inline-start:0;bottom:0;width:100%;margin:0;font:inherit;color:inherit;opacity:0}
.film-sent{display:block}
.film-card{position:absolute;z-index:3;inset-inline-end:calc(var(--fx,0px) + max(56px,calc((100% - 1555px) / 2)));top:50%;
  width:228px;margin-top:-188px;padding:12px 11px 16px;text-align:center;color:var(--w2g-navy);border-radius:28px;
  background:rgb(255 255 255 / .78);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgb(255 255 255 / .74);box-shadow:0 30px 60px rgb(4 21 47 / .34),inset 0 1px 0 rgb(255 255 255 / .9);transform-origin:50% 0;visibility:hidden}
.film-card .enquiry-illustration{height:84px;background:rgb(241 251 252 / .82)}
.film-card .enquiry-illustration svg{width:72px;height:72px}
.film-card h3{font-size:23px;font-weight:900;margin:12px 0 0}
.film-card .person{font-size:21px;margin-top:6px}
.film-card .enquiry-actions{margin-top:14px}
.film-card .enquiry-actions>span{width:40px;height:40px}
.film-card .enquiry-actions svg{width:21px;height:21px}
.film-ping{position:absolute;inset:-1px;border-radius:28px;border:2px solid #18cfaf;opacity:0;pointer-events:none}
@media (max-width:1000px){
  .film-track{height:260vh}
  .film-open{inset-inline:20px;bottom:calc(64px + env(safe-area-inset-bottom));font-size:clamp(34px,9.6vw,46px);letter-spacing:-1px}
  .film-cue{bottom:calc(16px + env(safe-area-inset-bottom))}
  .film-captions{inset-inline-start:calc(var(--fx,0px) + 20px);bottom:calc(var(--fyb,0px) + 56px + env(safe-area-inset-bottom));width:calc(100% - 2 * var(--fx,0px) - 40px);
    font-size:clamp(28px,8vw,38px);letter-spacing:-.9px}
  .film-rail{inset-inline-start:calc(var(--fx,0px) + 20px);bottom:calc(var(--fyb,0px) + 24px + env(safe-area-inset-bottom));width:34vw}
  .film-card{top:calc(var(--fy,0px) + 54px);margin-top:0;inset-inline-end:auto;inset-inline-start:calc(var(--fx,0px) + 16px);width:176px;padding:9px 8px 12px;border-radius:24px}   /* phones: the label owns the other corner; the person is mid-frame */
  .film-card .enquiry-illustration{height:54px}
  .film-card .enquiry-illustration svg{width:46px;height:46px}
  .film-card h3{font-size:19px;margin-top:8px}
  .film-card .person{font-size:17px;margin-top:4px}
  .film-card .enquiry-detail{font-size:12.5px}
  .film-card .enquiry-actions{margin-top:10px;gap:8px}
  .film-card .enquiry-actions>span{width:32px;height:32px}
  .film-card .enquiry-actions svg{width:17px;height:17px}
  .film-ai-label{font-size:12px;padding:7px 10px;inset-inline-end:calc(var(--fx,0px) + 12px)}
}
/* static player — the same rules for: script-detected (html.w2g-film-static) and OS reduced motion (before any script).
   The poster <picture> stays the first paint; ▶ swaps in the plain <video controls> (no poster/src fetched before that). */
.film-play{display:none;position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;border:0;place-items:center; /* rtl-check: ignore — centred */
  color:#fff;background:var(--w2g-blue);box-shadow:0 14px 34px rgb(0 106 255 / .4);cursor:pointer;transition:transform .25s var(--w2g-ease),box-shadow .25s}
.film-play svg{margin-inline-start:4px}
.film-play:hover{transform:translate(-50%,-50%) scale(1.06)}
.film-play:focus-visible{outline:3px solid #7354ff;outline-offset:5px}
html.w2g-film-static .film-section{background:#fff;color:var(--w2g-navy)}
html.w2g-film-static .film-track{height:auto}
html.w2g-film-static .film-stage{position:relative;top:auto;height:auto;padding:clamp(56px,7vw,100px) 0;overflow:visible}
html.w2g-film-static .film-frame{position:relative;inset:auto;clip-path:none;width:min(1180px,calc(100% - 48px));margin:0 auto}
html.w2g-film-static .film-screen{position:relative;inset:auto;aspect-ratio:16/9;border-radius:34px;overflow:hidden;box-shadow:0 14px #e4e9ec,0 24px 50px #325b7818}
html.w2g-film-static :is(.film-gl,.film-shade,.film-card,.film-rail,.film-cue){display:none}
html.w2g-film-static .film-play:not([hidden]){display:grid}
html.w2g-film-static .film-screen.is-playing :is(.film-media,.film-play){display:none}
html.w2g-film-static .film-screen.is-playing .film-video{display:block}
html.w2g-film-static .film-intro{position:static;padding:0;margin:0 auto 24px;width:min(1180px,calc(100% - 48px));text-align:center;opacity:1!important;transform:none!important;visibility:visible!important}
html.w2g-film-static .film-open{position:static;color:var(--w2g-navy);text-shadow:none;font-size:clamp(28px,3vw,46px);max-width:none}
html.w2g-film-static .film-ai-label{top:14px;inset-inline-end:14px}
html.w2g-film-static .film-captions{position:static;width:auto;height:auto;margin:26px auto 0;max-width:40em;text-align:center;font-size:clamp(20px,2vw,28px);font-weight:800;line-height:1.3;letter-spacing:-.5px;color:inherit;text-shadow:none}
html.w2g-film-static .film-caption{position:static;display:inline;width:auto;opacity:1!important}
html.w2g-film-static .film-sent{display:inline}
html.w2g-film-static .film-caption+.film-caption::before{content:" "}
@media (prefers-reduced-motion:reduce){
html .film-section{background:#fff;color:var(--w2g-navy)}
html .film-track{height:auto}
html .film-stage{position:relative;top:auto;height:auto;padding:clamp(56px,7vw,100px) 0;overflow:visible}
html .film-frame{position:relative;inset:auto;clip-path:none;width:min(1180px,calc(100% - 48px));margin:0 auto}
html .film-screen{position:relative;inset:auto;aspect-ratio:16/9;border-radius:34px;overflow:hidden;box-shadow:0 14px #e4e9ec,0 24px 50px #325b7818}
html :is(.film-gl,.film-shade,.film-card,.film-rail,.film-cue){display:none}
html .film-play:not([hidden]){display:grid}
html .film-screen.is-playing :is(.film-media,.film-play){display:none}
html .film-screen.is-playing .film-video{display:block}
html .film-intro{position:static;padding:0;margin:0 auto 24px;width:min(1180px,calc(100% - 48px));text-align:center;opacity:1!important;transform:none!important;visibility:visible!important}
html .film-open{position:static;color:var(--w2g-navy);text-shadow:none;font-size:clamp(28px,3vw,46px);max-width:none}
html .film-ai-label{top:14px;inset-inline-end:14px}
html .film-captions{position:static;width:auto;height:auto;margin:26px auto 0;max-width:40em;text-align:center;font-size:clamp(20px,2vw,28px);font-weight:800;line-height:1.3;letter-spacing:-.5px;color:inherit;text-shadow:none}
html .film-caption{position:static;display:inline;width:auto;opacity:1!important}
html .film-sent{display:inline}
html .film-caption+.film-caption::before{content:" "}
}
@media (max-width:1000px){html.w2g-film-static .film-screen{aspect-ratio:4/5;border-radius:26px}}
@media (max-width:1000px) and (prefers-reduced-motion:reduce){html .film-screen{aspect-ratio:4/5;border-radius:26px}}

.film-ai-label.is-pinned{position:fixed;top:0;z-index:80;inset-inline-end:calc(var(--fx,0px) + 16px);transition:opacity .25s ease-out}
.film-ai-label.is-off{opacity:0}
@media (max-width:1000px){.film-ai-label.is-pinned{inset-inline-end:calc(var(--fx,0px) + 12px)}}
/* hand-off (Gal, 2026-10-14): the closed film flies out of its stage into the hero phone's screen (x-film.js flyUpdate).
   The frame stays in the stage, so it scrolls with the page like the phone; the section rises above #top meanwhile.
   z-index 10: over the phone (stage-box) and the hero's world (2-3), under Gal's copy (20) on phones, where the copy sits
   between the film and the phone; desktop's pinned #top is its own layer (3), so the film flies over all of it.
   The film is what you arrive inside, so the phone's navy portal stays off while the hand-off is on. */
html.w2g-film-fly .film-section{z-index:10}
html.w2g-film-fly .film-stage{overflow:visible}
html.w2g-film-fly .film-frame{pointer-events:none;will-change:transform,opacity}
/* phone to phone (Gal, 2026-10-15): the closed film is a phone - x-film.js draws its bezel here (a ring around the screen,
   the hero card's white border and shadow at that scale, --pk), carries it with the film's transform and fades it as it
   lands, so only the screen meets the hero screen. Not in the static / reduced player (it is never created there). */
.film-phone{position:absolute;inset:0;z-index:2;pointer-events:none;transform-origin:0 0;opacity:0}
.film-phone>i{position:absolute;left:0;top:0;box-sizing:border-box;border:13px solid #fff;border-radius:39px;
  box-shadow:0 calc(var(--pk,1) * 14px) 0 #e4e9ec,0 calc(var(--pk,1) * 24px) calc(var(--pk,1) * 50px) #325b7818}
html.w2g-film-static .film-phone{display:none}
html.w2g-film-handoff #top .website-photo::before{opacity:0}
/* the screen shows nothing of its own until the film has landed (x-film.js shotOff): opacity, so the copy stays in the
   a11y tree; !important over x-hero.js's inline opacity on the photo copy */
html.w2g-film-handoff #top .website-card.w2g-shot-off .website-photo{background:#04152f}
html.w2g-film-handoff #top .website-card.w2g-shot-off .website-photo::after{opacity:0!important}
html.w2g-film-handoff #top .website-card.w2g-shot-off .website-photo>:not(.w2g-corner){opacity:0!important}

/* ───────────────────────── "2" — HOVER_3D #2 (#two-gl) ───────────────────────── */
#how .partnership-art{position:relative}
.two-gl{position:absolute;top:0;left:-9%;width:118%;height:100%;z-index:1;display:block;touch-action:pan-y;opacity:0;transition:opacity .7s var(--w2g-ease); /* rtl-check: ignore — symmetric bleed */
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.w2g-two-live .two-gl{opacity:1}
.partnership-art .fallback{transition:opacity .6s var(--w2g-ease)}
.w2g-two-live .fallback{opacity:0}
.partnership-tag{will-change:translate}
html.w2g-reduce .two-gl,html.w2g-nowebgl .two-gl,html.w2g-fail-two .two-gl,html.w2g-nofx .two-gl{display:none}
html.w2g-fail-two .partnership-art .fallback{opacity:1}

/* ───────────────────────── works — HOVER_3D (#work-gl) ───────────────────────── */
.work-collage{position:relative}
.work-gl{position:absolute;top:-70px;left:-4%;width:108%;height:calc(100% + 140px);z-index:3;pointer-events:none;display:block} /* rtl-check: ignore — symmetric bleed */
.work-shot{position:relative}
.w2g-corner{position:absolute;width:1px;height:1px;pointer-events:none;visibility:hidden}
.w2g-corner.c0{left:-.5px;top:-.5px}.w2g-corner.c1{right:-.5px;top:-.5px}.w2g-corner.c2{left:-.5px;bottom:-.5px}.w2g-corner.c3{right:-.5px;bottom:-.5px} /* rtl-check: ignore — geometric corners */
.w2g-work-live .work-shot img{opacity:0}
.work-board{transform-style:preserve-3d}
html.w2g-reduce .work-gl,html.w2g-nowebgl .work-gl,html.w2g-fail-work .work-gl,html.w2g-nofx .work-gl{display:none}
html.w2g-fail-work .work-shot img{opacity:1}

/* ───────────────────────── (j) reduce: final static state; nofx: none of ours ───────────────────────── */
html.w2g-nofx .w2g-cursor,html.w2g-nofx .w2g-sticky,html.w2g-nofx .w2g-curtain{display:none!important}
@media (prefers-reduced-motion:reduce){
  .w2g-cursor{display:none!important}
  .w2g-sticky{transition:none!important}
}