/* Kit "motion": the designed inner pages (theme.json "kit": "motion"). The FINISHED state of every page; motion.js only
   animates towards it. Reads the theme's tokens: --dark (ink chapters), --bg, --surface, --soft, --ink (headings on paper),
   --text, --muted, --line, --brand/--accent, --font-display/--font-body, --display-weight. A theme.css tunes it with the
   --mx-* tokens below. Bar: Saporta Penn Chen (Niv 2026-11-09). */
:root{
  --mx-bg-ink:var(--dark);--mx-on-ink:#fff;--mx-muted-ink:rgba(255,255,255,.7);--mx-line-ink:rgba(255,255,255,.16);
  --mx-kicker:var(--accent);--mx-kicker-ink:color-mix(in srgb,var(--accent) 72%,#fff);
  --mx-ease:cubic-bezier(.19,1,.22,1);--mx-card:var(--surface);--mx-prose:18px;--mx-title-max:16ch
}
/* masked words (headings that rise) */
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em;padding-inline:.03em}
.wi{display:inline-block}
.mx-motion .mx-ph .mx-title .wi{transform:translateY(115%)}
.mx-motion .mx-ph .mx-crumbs,.mx-motion .mx-ph .mx-kicker,.mx-motion .mx-ph .mx-ph__row,.mx-motion .mx-ph .mx-meta,.mx-motion .mx-ph__media{opacity:0}

/* shared pieces */
.mx-kicker{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:600 15px/1.2 var(--font-body);letter-spacing:.03em;color:var(--mx-kicker)}
.mx-kicker::before{content:"";flex:none;width:28px;height:1px;background:currentColor}
.mx-tlink{display:inline-flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;color:inherit}
.mx-tlink span{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .5s var(--mx-ease)}
.mx-tlink:hover span{background-size:0 1px;background-position:100% 100%}
[dir=rtl] .mx-tlink:hover span{background-position:0 100%}

/* header dropdowns: a designed panel. The group's name is a kicker linking to its page; the items are a numbered index,
   in two columns from 5 items. No grey pill on the open trigger: a hairline grows under it. The panel hangs from the
   trigger's start edge, so the first menu never runs off the screen. */
.sx-nav__top{position:relative}
.sx-nav__top:hover,.sx-nav__item.open .sx-nav__top{background:none}
.sx-nav__top::after{content:"";position:absolute;inset-inline:12px;bottom:3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--mx-ease)}
[dir=rtl] .sx-nav__top::after{transform-origin:right}
.sx-nav__item:hover .sx-nav__top::after,.sx-nav__item.open .sx-nav__top::after,.sx-nav__top:focus-visible::after{transform:scaleX(1)}
.sx-nav__menu{left:auto;inset-inline-start:0;transform:translateY(10px);min-width:300px;padding:20px 12px 12px;gap:0 6px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 36px 70px -36px rgba(7,26,46,.45),0 2px 6px -2px rgba(7,26,46,.08);counter-reset:mx;transition:opacity .25s,transform .4s var(--mx-ease),visibility 0s .25s}
.sx-nav__item:hover .sx-nav__menu,.sx-nav__item.open .sx-nav__menu,.sx-nav__item:focus-within .sx-nav__menu{transform:translateY(0)}
/* menus near the end of the nav hang from their end edge instead (Simon's "אודות" ran 9px off the screen) */
.sx-nav__item:nth-last-child(-n+2) .sx-nav__menu{inset-inline-start:auto;inset-inline-end:0}
/* 5+ items: two columns that read down, 01–04 then 05–08 */
.sx-nav__menu:has(> a:nth-of-type(6)){display:block;columns:2 230px;column-gap:6px;width:max-content;max-width:min(660px,92vw)}
.sx-nav__menu:has(> a:nth-of-type(6)) a{break-inside:avoid}
.sx-nav__menu a.h{grid-column:1/-1;column-span:all;display:flex;align-items:center;gap:12px;margin:0 0 6px;padding:0 12px 14px;border-bottom:1px solid var(--line);border-radius:0;font:600 13.5px/1.2 var(--font-body);letter-spacing:.03em;color:var(--mx-kicker)}
.sx-nav__menu a.h::before{content:"";flex:none;width:22px;height:1px;background:currentColor}
.sx-nav__menu a.h:hover{background:none;color:var(--ink)}
.sx-nav__menu a:not(.h){counter-increment:mx;display:flex;align-items:baseline;gap:12px;padding:11px 12px;border-radius:10px;font-size:15.5px;font-weight:500;line-height:1.35;color:var(--ink);transition:background .2s,color .2s}
.sx-nav__menu a:not(.h)::before{content:counter(mx,decimal-leading-zero);flex:none;width:18px;font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;transition:color .2s}
.sx-nav__menu a:not(.h):hover{background:var(--soft);color:var(--ink)}
.sx-nav__menu a:not(.h):hover::before{color:var(--accent)}

/* page hero: ink, the title, then the page's own wide photo in a frame */
.mx-ph{background:var(--mx-bg-ink);color:var(--mx-on-ink);padding:clamp(40px,6vw,92px) 0 0;overflow:hidden}
.mx-ph--plain{padding-bottom:clamp(56px,7vw,104px)}
.mx-crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--mx-muted-ink);margin:0 0 clamp(28px,4vw,52px)}
.mx-crumbs a{color:inherit;text-decoration:none}.mx-crumbs a:hover{color:var(--mx-on-ink)}
.mx-crumbs span[aria-hidden]{opacity:.45}
.mx-ph .mx-kicker{color:var(--mx-kicker-ink)}
.mx-title{font-size:clamp(42px,6vw,94px);line-height:1.03;color:var(--mx-on-ink);margin:0;max-width:var(--mx-title-max);text-wrap:balance}
.mx-title--long{font-size:clamp(32px,4.2vw,64px);max-width:26ch;line-height:1.08}
.mx-ph__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 64px;align-items:end;margin-top:clamp(22px,3vw,40px)}
.mx-lead{margin:0;max-width:58ch;font-size:clamp(18px,1.4vw,21px);line-height:1.6;color:var(--mx-muted-ink)}
.mx-acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.mx-ph .mx-tlink{color:var(--mx-on-ink)}
.mx-meta{margin:22px 0 0;font-size:15px;color:var(--mx-muted-ink)}
.mx-ph__media{margin-top:clamp(40px,5vw,76px)}
.mx-frame{position:relative;overflow:hidden;aspect-ratio:21/8;background:color-mix(in srgb,var(--mx-bg-ink) 80%,#fff)}
.mx-frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}

/* body: prose with a side column */
.mx-body{background:var(--bg);padding:clamp(56px,7vw,112px) 0}
.mx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:clamp(40px,6vw,104px);align-items:start}
.mx-prose{min-width:0;font-size:var(--mx-prose);line-height:1.75;color:var(--text)}
.mx-part{padding:0 0 clamp(40px,5vw,64px);margin:0 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.mx-part:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.mx-prose h2{font-size:clamp(28px,2.9vw,44px);line-height:1.12;margin:0 0 26px;max-width:24ch;color:var(--ink)}
.mx-prose h3{font-size:clamp(20px,1.55vw,24px);margin:34px 0 10px;line-height:1.28;color:var(--ink);letter-spacing:0}
.mx-prose p{max-width:68ch}
.mx-prose .sx-prose a:not(.sx-btn){color:var(--ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 70%,transparent);text-decoration-thickness:1px;text-underline-offset:4px}
.mx-prose .sx-prose a:not(.sx-btn):hover{color:var(--accent)}
/* runs of internal links read as an index, not as a wall of outlined boxes */
.mx-prose .sx-ctas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;margin:26px 0 30px;align-items:stretch}
.mx-prose .sx-ctas .sx-btn{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:0;padding:14px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;box-shadow:none;color:var(--ink);font:600 16.5px/1.35 var(--font-body);text-align:start;white-space:normal;transform:none}
.mx-prose .sx-ctas .sx-btn::after{content:"\2192";flex:none;color:var(--accent);transition:transform .35s var(--mx-ease)}
[dir=rtl] .mx-prose .sx-ctas .sx-btn::after{content:"\2190"}
.mx-prose .sx-ctas .sx-btn:hover{background:none;color:var(--accent)}
.mx-prose .sx-ctas .sx-btn:hover::after{transform:translateX(5px)}
[dir=rtl] .mx-prose .sx-ctas .sx-btn:hover::after{transform:translateX(-5px)}
.mx-prose .sx-checks{grid-template-columns:1fr;gap:0;margin:22px 0 28px}
.mx-prose .sx-checks li{padding:14px 0;padding-inline-start:34px;border-bottom:0;border-top:1px solid var(--line)}
.mx-prose .sx-checks li::before{top:23px;width:12px;height:7px;border-width:0 0 2px 2px}
.mx-prose ul:not(.sx-checks){padding-inline-start:1.2em}
.mx-prose ul:not(.sx-checks) li{margin:.35em 0}
.mx-prose .sx-cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 32px;margin:24px 0}
.mx-prose .sx-card{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:20px 0 10px;box-shadow:none}
.mx-prose .sx-card h3{margin:0 0 8px;font-size:20px}
.mx-prose .sx-card h3 a{text-decoration:none;color:var(--ink)}
.mx-prose .sx-card h3 a:hover{color:var(--accent)}
.mx-prose .sx-card p{font-size:16px;line-height:1.6;color:var(--muted)}
/* the photos open from a mask with a 1.25 → 1 scale (motion.js): clip-path doesn't stop a scaled image from widening
   the page, so the box clips it (a phone article scrolled sideways while a photo settled) */
.mx-prose .sx-figure{margin:34px 0;overflow:clip}
.mx-prose .sx-photos{overflow:clip}
.mx-prose .sx-figure img{width:auto;max-width:100%;max-height:560px;border-radius:8px}
.mx-prose .sx-photos{gap:12px}
.mx-prose .sx-photos img{border-radius:8px}
.mx-prose .sx-quote{margin:30px 0;padding:6px 0;padding-inline-start:26px;border:0;border-inline-start:2px solid var(--accent);background:none;border-radius:0;font:500 clamp(21px,1.8vw,27px)/1.5 var(--font-display);color:var(--ink)}
.mx-prose .sx-team{gap:28px}
/* person cards keep their own link styles: the prose underline made every line of a card look like a separate link */
.mx-prose .sx-prose .sx-person--card a:not(.sx-btn){text-decoration:none;color:inherit}
.mx-prose .sx-prose .sx-person--card .sx-person__more{color:var(--accent)}
.mx-prose .sx-team--cards{gap:44px 28px}

/* side column */
.mx-side{position:sticky;top:calc(var(--hdr-h) + 28px);display:grid;gap:18px}
.mx-sidecard{background:var(--mx-card);border:1px solid var(--line);border-radius:16px;padding:24px 26px}
.mx-sidecard h2{font:700 17px/1.3 var(--font-body);letter-spacing:0;margin:0 0 10px;color:var(--ink)}
.mx-sidelist ol{list-style:none;margin:0;padding:0}
.mx-sidelist a{display:flex;gap:14px;align-items:baseline;padding:11px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--text);font-size:15.5px;line-height:1.4;transition:color .2s}
.mx-sidelist li:first-child a{border-top:0}
.mx-sidelist .n{flex:none;width:22px;font-size:12.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.mx-sidelist a:hover,.mx-sidelist a[aria-current]{color:var(--ink)}
.mx-sidelist a[aria-current]{font-weight:700}
.mx-sidelist a[aria-current] .n{color:var(--accent)}
.mx-sidecontact{background:var(--mx-bg-ink);color:var(--mx-on-ink);border-color:transparent;display:grid;gap:10px;justify-items:start}
.mx-sidek{font-size:13.5px;color:var(--mx-muted-ink)}
.mx-sidephone{font:var(--display-weight) 32px/1.05 var(--font-display);color:#fff;text-decoration:none;margin:-4px 0 2px}
.mx-sidecontact .mx-tlink{font-size:15.5px;font-weight:500;color:var(--mx-muted-ink)}
.mx-sidecontact .sx-btn{margin-top:10px}

/* the closing section on every page */
/* closing section: the invitation + the ways to reach them on one side, the form card on the other, both from the top
   (a full-width title over a low form left half the section empty and taller than a laptop screen, Niv 2026-11-09) */
.mx-finale{position:relative;overflow:hidden;background:var(--mx-bg-ink);color:var(--mx-on-ink);padding:clamp(72px,8vw,124px) 0}
.mx-finale__photo{position:absolute;inset:-12% 0;z-index:0}
.mx-finale__photo img{width:100%;height:100%;object-fit:cover;opacity:.2;filter:grayscale(.35)}
.mx-finale__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--mx-bg-ink) 0%,color-mix(in srgb,var(--mx-bg-ink) 58%,transparent) 32%,color-mix(in srgb,var(--mx-bg-ink) 58%,transparent) 68%,var(--mx-bg-ink) 100%)}
.mx-finale__in{position:relative;z-index:1}
.mx-finale .mx-kicker{color:var(--mx-kicker-ink)}
.mx-finale__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,104px);align-items:center}
.mx-finale__grid--solo{grid-template-columns:minmax(0,1fr)}
.mx-finale__title{font-size:clamp(40px,4.6vw,74px);line-height:1.04;color:#fff;margin:0;max-width:14ch}
.mx-finale__sub{margin:20px 0 0;max-width:46ch;font-size:clamp(17px,1.3vw,20px);line-height:1.6;color:var(--mx-muted-ink);text-wrap:pretty}
.mx-finale__details{margin-top:clamp(30px,3.4vw,48px);padding-top:clamp(26px,3vw,40px);border-top:1px solid var(--mx-line-ink)}
.mx-finale__phone{display:inline-block;font:var(--display-weight) clamp(38px,3.8vw,62px)/1 var(--font-display);color:#fff;text-decoration:none}
.mx-finale__mail{display:table;margin-top:16px;font-size:19px;color:#fff}
.mx-finale__addr{margin:16px 0 0;color:var(--mx-muted-ink);text-wrap:balance}
.mx-finale__addr a{color:inherit;text-decoration:none}.mx-finale__addr a:hover{color:#fff}
.mx-finale .sx-social{margin-top:22px}
.mx-finale .sx-social a{color:#fff}
.mx-finale .sx-form{position:relative;background:color-mix(in srgb,var(--mx-bg-ink) 74%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:clamp(24px,2.8vw,40px);color:#fff;box-shadow:0 40px 90px -40px rgba(0,0,0,.6)}
.mx-finale .sx-form h3{color:#fff}
.mx-finale .sx-fgrid{gap:16px 14px}
.mx-finale .sx-fld label,.mx-finale .sx-fld legend{color:var(--mx-muted-ink);font-weight:600;font-size:14px}
.mx-finale .sx-fld input,.mx-finale .sx-fld select,.mx-finale .sx-fld textarea{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:12px;color:#fff;padding:13px 16px}
.mx-finale .sx-fld textarea{min-height:112px}
.mx-finale .sx-fld input:hover,.mx-finale .sx-fld select:hover,.mx-finale .sx-fld textarea:hover{border-color:rgba(255,255,255,.3)}
.mx-finale .sx-fld input:focus,.mx-finale .sx-fld select:focus,.mx-finale .sx-fld textarea:focus{border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.09);box-shadow:none}
.mx-finale .sx-fld select option{color:#111}
.mx-finale .sx-form__foot{margin-top:22px}
.mx-finale .sx-muted,.mx-finale .sx-form__done p{color:var(--mx-muted-ink)}
.mx-finale .sx-muted a{color:#fff}
.mx-finale .sx-form__msg{color:#FFB4A8}
.mx-finale .sx-fld fieldset label{color:var(--mx-muted-ink)}

/* the page's own form (rare) keeps the shared look */
.mx-page .sx-formsec{background:var(--soft)}

@media (max-width:980px){
  .mx-grid{grid-template-columns:minmax(0,1fr)}
  .mx-side{position:static;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .mx-finale__grid{grid-template-columns:minmax(0,1fr);align-items:start}
}
@media (max-width:720px){
  .mx-ph__row{grid-template-columns:minmax(0,1fr)}
  .mx-frame{aspect-ratio:4/3}
  .mx-frame img{transform:scale(1.04)}
  .mx-prose{--mx-prose:17px}
  .mx-prose .sx-ctas{grid-template-columns:minmax(0,1fr)}
  .mx-side{grid-template-columns:minmax(0,1fr)}
  /* on a phone the closing section follows right after: no second contact card, no 20-name list to scroll past */
  .mx-sidecontact,.mx-sidelist--long{display:none}
  .mx-finale__phone{font-size:42px}
}
@media (prefers-reduced-motion:reduce){.mx-frame img{transform:none}}