/* Israel Canada, the menu and the share popover (27.10; v3 brand 28.10; v4, Ori: the menu inverted, white). Loaded by the homepage and the legal pages; each block keeps
   its own breakpoints here (notebooks, short screens, phones under 1024), as the components are new.
   Menu: assets/js/menu.js. Share: assets/js/share.js. */

/* ═════════════ The menu ═════════════ */
html.menu-open { overflow: hidden; }
.menu {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: hidden;
}
.menu::backdrop { background: transparent; }
.menu[open] { display: block; }

/* The ground: the preloader's 12 columns, falling in a skyline and lifting back out. v4: white; no lines between the
   columns (the client, 1.11) */
.menu__slices { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, 1fr); }
.menu__slices span {
  width: calc(100% + 1px); background: #fff;
  transform: translateY(-101%);
  transition: transform 700ms cubic-bezier(.7, 0, .2, 1) var(--d);
}
.menu.is-open .menu__slices span { transform: none; }
.menu.is-closing .menu__slices span { transform: translateY(-101%); transition-delay: calc(var(--d) + 140ms); }

.menu__frame {
  position: relative; height: 100%;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 40px var(--edge);
}
.menu.is-closing .menu__frame { opacity: 0; transition: opacity 200ms var(--ease-exit); }

/* the parts rise in once the ink is down (the last column lands at 868ms) */
.menu .m-in { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-standard), transform 900ms var(--ease-out); transition-delay: calc(660ms + var(--i, 0) * 60ms); }
.menu.is-open .m-in { opacity: 1; transform: none; }

/* Bar: where the hero's is, the close button where the menu button was */
.menu__bar { position: relative; height: 48px; display: flex; align-items: center; justify-content: space-between; }
.menu__close { width: 48px; height: 48px; border: 1px solid var(--sky); color: var(--ink); background: #fff; }
.menu__close .i { transition: transform var(--d-morph) var(--ease-out); }
.menu__close:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.menu__close:hover .i { transform: rotate(90deg); }
.menu__logo { position: absolute; left: 50%; top: 50%; translate: -50% -50%; color: var(--ink); }
.menu__logo svg { width: 200px; height: 21.02px; overflow: visible; }
.menu__logo .menu__mark { display: none; width: 26px; height: 24px; } /* the I+C mark: phones under 360, as the header's */
.menu__actions { display: flex; align-items: center; gap: 8px; }

/* Body: the regions and links on the start side, the stage on the end side */
.menu__body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 112px; align-items: center;
  width: 100%; max-width: var(--content); margin-inline: auto; padding-block: 40px;
  min-height: 0;
}
.menu__nav { min-width: 0; }
.menu__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; color: var(--ink); font-weight: 700; }
.menu__eyebrow::before { content: ''; flex: none; width: 32px; height: 10px; background: var(--red); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 800ms var(--ease-out) 760ms; } /* the site's eyebrow: a red bar that draws out as the menu opens */
.menu.is-open .menu__eyebrow::before { transform: none; }

.menu__areas { border-top: 1px solid var(--sky); }
.menu__areas li { border-bottom: 1px solid var(--sky); }
.marea {
  display: grid; grid-template-columns: minmax(0, 1fr) 32px; align-items: center; gap: 16px; /* no index numbers (Ori, 27.10) */
  padding-block: 26px; transition: opacity var(--d-slow) var(--ease-standard);
}
.marea__thumb { display: none; }
.marea__text { display: block; transition: transform var(--d-morph) var(--ease-out); }
.marea__name { display: block; overflow: hidden; padding-bottom: 4px; margin-bottom: -4px; }
.marea__name > span { display: inline-block; font-weight: 400; font-size: 60px; line-height: 72px; letter-spacing: -.01em; transform: translateY(105%); transition: transform 1000ms var(--ease-out) calc(700ms + var(--i) * 80ms); }
.marea__sub { display: block; margin-top: 4px; color: var(--muted-fg); opacity: 0; transition: opacity 700ms var(--ease-standard) calc(860ms + var(--i) * 80ms), color var(--d-base) var(--ease-standard); }
.marea__arrow { color: var(--accent); opacity: 0; transform: translateX(12px); transition: opacity var(--d-slow) var(--ease-standard), transform var(--d-morph) var(--ease-out); }
.menu.is-open .marea__name > span { transform: none; }
.menu.is-open .marea__sub { opacity: 1; }
/* pointing at one: it steps forward, the others fall back */
.menu__areas:has(.marea:hover) .marea:not(:hover) { opacity: .36; }
.marea:hover .marea__text, .marea:focus-visible .marea__text { transform: translateX(-16px); }
.marea:hover .marea__arrow, .marea:focus-visible .marea__arrow { opacity: 1; transform: none; }
.marea:hover .marea__sub { color: var(--ink); }
.marea:focus-visible { outline-offset: -2px; }

.menu__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.mlink {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding-inline: 18px 20px; border-radius: 9999px;
  border: 1px solid var(--sky); background: #fff; font-weight: 500; font-size: 16px; line-height: 24px;
  transition: background-color var(--d-base) var(--ease-standard), color var(--d-base) var(--ease-standard), border-color var(--d-base) var(--ease-standard);
}
.mlink .i { color: var(--red); }
.mlink__latin { font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: .2em; margin-left: -.2em; }
.mlink:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* The stage: the region's picture and film, its projects over it */
.menu__stage {
  position: relative; height: min(66vh, 680px); overflow: hidden; background: #0d0d0d; /* square corners (Ori, 1.11) */
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1200ms var(--ease-out) 680ms;
}
.menu.is-open .menu__stage { clip-path: inset(0 0 0 0); }
.mstage { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 600ms var(--ease-standard), visibility 0s linear 600ms; }
.mstage.is-on { opacity: 1; visibility: visible; z-index: 1; transition-delay: 0s; }
.mstage__media { position: absolute; inset: 0; }
.mstage__media img, .mstage__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mstage__media img { transform: scale(1.08); transition: transform 1600ms var(--ease-out); }
.mstage.is-on .mstage__media img { transform: none; }
.mstage__media video { opacity: 0; transition: opacity 700ms var(--ease-standard); }
.mstage.is-playing .mstage__media video { opacity: 1; }
.mstage::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .5) 38%, rgba(0, 0, 0, 0) 68%); }
.mstage__body { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; padding: 32px; }
.mstage__title { margin-bottom: 12px; color: rgba(255, 255, 255, .72); }
.mstage__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.mstage__list li { opacity: 0; transform: translateY(10px); transition: opacity 500ms var(--ease-standard), transform 700ms var(--ease-out); }
.menu.is-open .mstage.is-on .mstage__list li { opacity: 1; transform: none; transition-delay: calc(240ms + var(--j) * 45ms); }
.menu.is-opening .mstage.is-on .mstage__list li { transition-delay: calc(1000ms + var(--j) * 45ms); } /* the first region waits for the stage */
.mstage__list a { display: flex; align-items: center; gap: 10px; min-height: 40px; color: #fff; }
.mstage__name { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 6px; text-decoration-thickness: 1px; transition: text-decoration-color var(--d-base) var(--ease-standard); }
.mstage__list a:hover .mstage__name, .mstage__list a:focus-visible .mstage__name { text-decoration-color: var(--accent); }
.mstage__list a:hover .tag .i { transform: rotate(90deg) scale(1.15); }
.mstage__cta { margin-top: 20px; }
.mstage__cta .i { transition: transform var(--d-slow) var(--ease-out); }
.mstage__cta:hover .i { transform: translateX(-4px); }

/* Foot: the phone, the guide, the legal pages */
.menu__foot { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 24px; border-top: 1px solid var(--sky); }
.menu__contact { display: flex; align-items: center; gap: 24px; color: var(--muted-fg); }
.menu__contact .t-body-s { display: inline-flex; align-items: center; gap: 8px; }
.menu__phone { font-size: 44px; line-height: 52px; color: var(--ink); transition: color var(--d-base) var(--ease-standard); }
.menu__phone:hover { color: var(--accent); }
.menu__ask { gap: 10px; padding-inline: 6px 20px; }
.menu__legal { display: flex; gap: 24px; }
.menu__legal a { color: var(--muted-fg); transition: color var(--d-base) var(--ease-standard); }
.menu__legal a:hover { color: var(--ink); }

@media (max-width: 1599px) {
  .menu__body { gap: 72px; padding-inline: 0; }
  .marea__name > span { font-size: 48px; line-height: 60px; }
  .menu__stage { height: min(62vh, 600px); }
}
@media (max-width: 1279px) {
  .marea { grid-template-columns: minmax(0, 1fr) 28px; }
  .marea__name > span { font-size: 40px; line-height: 52px; }
  .menu__body { gap: 48px; }
  .mstage__body { padding: 24px; }
  .menu__ask .t-label-l { display: none; }
  .menu__ask { padding: 0; width: 48px; }
}
@media (max-height: 820px) and (min-width: 1024px) {
  .menu__frame { padding-block: 24px; }
  .menu__body { padding-block: 24px; }
  .marea { padding-block: 16px; }
  .marea__name > span { font-size: 44px; line-height: 52px; }
  .menu__links { margin-top: 24px; }
  .menu__stage { height: min(58vh, 520px); }
  .mstage__list a { min-height: 34px; }
  .menu__phone { font-size: 36px; line-height: 36px; }
}

/* Phones and tablets: one column that scrolls, each region with its picture; no stage */
@media (max-width: 1023px) {
  .menu__frame { padding: 14px var(--edge) calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
  .menu__bar { height: 44px; flex: none; }
  .menu__close { width: 40px; height: 40px; }
  /* the logo beside the close button, as the header's beside the menu button: the centre is too narrow with
     WhatsApp and "קביעת פגישה" on the other side (v4) */
  .menu__logo { position: static; translate: none; margin-inline: 12px auto; }
  .menu__logo svg { width: 120px; height: 12.61px; }
  .menu__actions .round { width: 40px; height: 40px; }
  .menu__actions .pill--meet { height: 40px; padding-inline: 13px; font-size: 15px; }
  .menu__body { display: block; padding-block: 28px 24px; flex: 1 0 auto; }
  .menu__stage { display: none; }
  .menu__eyebrow { margin-bottom: 8px; }
  .marea { grid-template-columns: 72px minmax(0, 1fr) 24px; gap: 16px; padding-block: 14px; }
  .marea__thumb { display: block; width: 72px; height: 72px; border-radius: 12px; object-fit: cover; opacity: 0; transform: scale(.9); transition: opacity 600ms var(--ease-standard) calc(700ms + var(--i) * 80ms), transform 900ms var(--ease-out) calc(700ms + var(--i) * 80ms); }
  .menu.is-open .marea__thumb { opacity: 1; transform: none; }
  .marea__name > span { font-size: 24px; line-height: 32px; }
  .marea__sub { font-size: 13px; line-height: 18px; }
  .marea__arrow { opacity: 1; transform: none; --s: 20; }
  .marea:hover .marea__text { transform: none; }
  .menu__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; }
  .mlink { justify-content: flex-start; width: 100%; white-space: nowrap; } /* an even grid; a name never breaks inside its pill */
  .menu__foot { flex-direction: column; align-items: stretch; gap: 16px; flex: none; }
  .menu__contact { justify-content: space-between; }
  .menu__phone { font-size: 36px; line-height: 36px; }
  .menu__ask { justify-content: center; width: 100%; padding: 0 20px 0 6px; height: 48px; }
  .menu__ask .t-label-l { display: inline; }
  .menu__legal { justify-content: center; gap: 20px; }
}
/* small phones: the pills tighten so "מפת הפרויקטים" keeps its line, and stack below 340; the bar's logo shrinks as
   the header's, and under 360 becomes the I+C mark */
@media (max-width: 389px) {
  .mlink { gap: 8px; padding-inline: 14px 16px; font-size: 15px; }
  .menu__logo { margin-inline-start: 10px; }
  .menu__logo svg { width: 104px; height: 10.93px; }
  .menu__actions { gap: 6px; }
}
@media (max-width: 359px) {
  .menu__logo .menu__word { display: none; }
  .menu__logo .menu__mark { display: block; }
}
@media (max-width: 339px) {
  .menu__links { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .menu__slices span, .menu .m-in, .marea__name > span, .marea__sub, .marea__thumb, .menu__stage, .mstage__list li { transition-duration: 1ms !important; transition-delay: 0s !important; }
}

/* ═════════════ Share popover ═════════════ */
.share { position: fixed; inset: 0; z-index: 210; pointer-events: none; }
.share[hidden] { display: none; }
.share__scrim { display: none; }
.share__card {
  position: fixed; width: 368px; pointer-events: auto;
  padding: 20px; border-radius: 24px; background: #fff; color: var(--ink);
  box-shadow: var(--depth-4), 0 0 0 1px rgba(25, 25, 25, .06);
  opacity: 0; transform: translateY(-6px) scale(.96);
  transition: opacity 220ms var(--ease-standard), transform 420ms var(--ease-out);
}
.share.is-open .share__card { opacity: 1; transform: none; }
.share.is-closing .share__card { transition-duration: 180ms, 240ms; }
.share__head { display: flex; align-items: center; gap: 12px; }
.share__thumb { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; flex: none; background: var(--muted); }
.share__id { flex: 1; min-width: 0; }
.share__name { color: var(--muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share__x { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none; align-self: flex-start; color: var(--muted-fg); transition: background-color var(--d-base) var(--ease-standard), color var(--d-base) var(--ease-standard); }
.share__x:hover { background: var(--secondary-hover); color: var(--ink); }
.share__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 16px; }
.share__grid li { opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--ease-standard), transform 500ms var(--ease-out); }
.share.is-open .share__grid li { opacity: 1; transform: none; transition-delay: calc(60ms + var(--i) * 30ms); }
.share__btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px 10px; border-radius: 16px; color: var(--ink); transition: background-color var(--d-base) var(--ease-standard); }
.share__btn:hover { background: var(--muted); }
.share__disc { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--muted); color: var(--ink); transition: background-color var(--d-base) var(--ease-standard), color var(--d-base) var(--ease-standard), transform var(--d-morph) var(--ease-out); }
.share__btn:hover .share__disc, .share__btn:focus-visible .share__disc { color: #fff; transform: translateY(-2px); background: var(--brand, var(--ink)); }
.share__btn--whatsapp { --brand: var(--wa); }
.share__btn--facebook { --brand: #1877f2; }
.share__btn--x-logo { --brand: #000; }
.share__btn--linkedin { --brand: #0a66c2; }
.share__btn--telegram { --brand: #229ed9; }
.share__btn--mail { --brand: var(--accent-strong); }
.share__link { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 6px 6px 6px 6px; padding-inline-start: 16px; border-radius: 9999px; background: var(--muted); }
.share__url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-fg); text-align: left; }
.share__copy { flex: none; height: 36px; padding-inline: 12px 14px; gap: 6px; background: var(--ink); color: #fff; }
.share__copy:hover { background: #000; }
.share__copy.is-done { background: var(--success); }
.share__more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; margin-top: 8px; border-radius: 9999px; color: var(--ink); transition: background-color var(--d-base) var(--ease-standard); }
.share__more:hover { background: var(--muted); }
.share__more[hidden] { display: none; }

@media (max-width: 1023px) {
  .share { pointer-events: auto; }
  .share__scrim { display: block; position: absolute; inset: 0; background: rgba(0, 0, 0, .4); opacity: 0; transition: opacity 260ms var(--ease-standard); }
  .share.is-open .share__scrim { opacity: 1; }
  .share__card { inset: auto 0 0 0; width: auto; border-radius: 24px 24px 0 0; padding: 20px var(--edge) calc(16px + env(safe-area-inset-bottom)); transform: translateY(100%); opacity: 1; transition: transform 460ms var(--ease-out); }
  .share.is-open .share__card { transform: none; }
  .share.is-closing .share__card { transition-duration: 260ms; }
}
/* tablets and phones on their side: the sheet keeps a card's width, its six services on one row */
@media (min-width: 640px) and (max-width: 1023px) {
  .share__card { inset-inline: max(0px, calc((100% - 560px) / 2)); }
  .share__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .share__card, .share__grid li, .share__scrim { transition-duration: 1ms !important; transition-delay: 0s !important; }
}

/* The privacy policy, linked from the consent line in the lead forms */
.check__link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--input); transition: text-decoration-color var(--d-base) var(--ease-standard); }
.check__link:hover { text-decoration-color: currentColor; }