.elementor-kit-4{--e-global-color-primary:#275F81;--e-global-color-secondary:#F5C9C7;--e-global-color-text:#1E4A64;--e-global-color-accent:#F0EFE9;--e-global-color-38e784c:#D7E4D7;--e-global-color-307a10a:#A9C4A9;--e-global-color-1820752:#EBF3F8;--e-global-color-95b37bb:#C1D9E8;--e-global-color-f30957b:#327AA6;--e-global-color-774d4f4:#FFFFFF;--e-global-color-fe34e1e:#FFFFFF;--e-global-color-f1b81ae:#675C5B;--e-global-color-124e4f5:#FBFAF9;--e-global-typography-primary-font-family:"COLBO";--e-global-typography-primary-font-size:100px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:80px;--e-global-typography-primary-letter-spacing:0.02em;--e-global-typography-secondary-font-family:"COLBO";--e-global-typography-secondary-font-size:60px;--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-line-height:80px;--e-global-typography-secondary-letter-spacing:0.3px;--e-global-typography-text-font-family:"Ezer Solid";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:0.3em;--e-global-typography-accent-font-family:"Ezer Solid";--e-global-typography-accent-font-size:18px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-line-height:0.4em;--e-global-typography-accent-letter-spacing:0.1px;--e-global-typography-d9ae324-font-family:"COLBO";--e-global-typography-d9ae324-font-size:24px;--e-global-typography-d9ae324-line-height:24px;--e-global-typography-6d5b11d-font-family:"COLBO";--e-global-typography-6d5b11d-font-size:28px;--e-global-typography-6d5b11d-line-height:28px;--e-global-typography-bb59911-font-family:"Ezer Solid";--e-global-typography-bb59911-font-size:14px;--e-global-typography-bb59911-line-height:16px;--e-global-typography-3ea9f1e-font-family:"Ezer Solid";--e-global-typography-3ea9f1e-font-size:20px;--e-global-typography-3ea9f1e-font-weight:400;--e-global-typography-3ea9f1e-line-height:24px;--e-global-typography-3ea9f1e-letter-spacing:0.4px;--e-global-typography-ce44d1c-font-family:"COLBO";--e-global-typography-ce44d1c-font-size:66px;--e-global-typography-ce44d1c-font-weight:400;--e-global-typography-ce44d1c-line-height:66px;--e-global-typography-ce44d1c-letter-spacing:-0.4px;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-4 button,.elementor-kit-4 input[type="button"],.elementor-kit-4 input[type="submit"],.elementor-kit-4 .elementor-button{background-color:#275F81;color:#FFFFFF;border-radius:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-kit-4 a{color:var( --e-global-color-primary );}.elementor-kit-4 a:hover{color:var( --e-global-color-text );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-4{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-4{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --Foundation-Blue:#275F81; --Brown:#675C5B; --Foundation-pink:#F5C9C7; --Foundation-beige:#F0EFE9; --Colbo:COLBO Regular; --Foundation-Blue-800:#1E4A64; --H2_57:Roboto; --Foundation-Green-100:#D7E4D7; --DUP_Foundation-Blue-800:#1E4A64; --DUP_Foundation-Blue:#275F81; --DUP_Foundation-Blue-8001:#1E4A64; --blue-foundation-700:#275F81; --light-background:#FBFAF9; --blue-was-black:#1E4A64; --white:#ffffff; }
/* Start custom CSS *//* מת"ש — site-wide custom CSS
   Paste into: Elementor → Site Settings → Custom CSS  (§4.4)
   This file is the version-controlled copy. Keep them in sync.
   RTL rule (§3.3): never left/right — logical properties only. */

/* ---------------------------------------------------------------
   Lists inside ACF WYSIWYG output (job descriptions, requirements)
   Real <ul>/<ol> — screen readers announce "list, N items".
   Never fake bullets with • characters in a text field.
   --------------------------------------------------------------- */
.mts-rich-text ul,
.mts-rich-text ol {
  padding-inline-start: 1.5em;   /* flips automatically in RTL */
  margin-block: 0 1.25em;
  list-style-position: outside;
}

.mts-rich-text ul { list-style-type: disc; }
.mts-rich-text ol { list-style-type: decimal; }

.mts-rich-text li {
  margin-block-end: 0.5em;
  line-height: 1.7;              /* Hebrew sits lower/denser than Latin (§3.2) */
}

.mts-rich-text li::marker {
  color: var(--e-global-color-primary, currentColor);
}

/* Nested lists keep the same logical indent */
.mts-rich-text li > ul,
.mts-rich-text li > ol {
  margin-block-start: 0.5em;
  padding-inline-start: 1.25em;
}

/* Bold inside a requirement line (e.g. "חובה") shouldn't shift the baseline */
.mts-rich-text strong { font-weight: 700; }

/* Latin/numeric runs inside Hebrew text — prevent bidi scrambling (§3.3).
   Wrap with <span dir="ltr"> or <bdi> in content; this is the safety net. */
.mts-rich-text [dir="ltr"] { unicode-bidi: isolate; }

/* ===============================================================
   === HEADER SCROLL STATE ===============================
   Desktop + tablet only (>=768px). Mobile has its own header.
   Paired with the JS in elementor-html-widget/mts-header-scroll-js.html,
   which lives in an HTML widget in the Footer template.
   Paste as raw CSS. Site Settings -> Custom CSS rejects markup tags,
   which is what the "must not contain" save error was about.
   =============================================================== */

:root{
  /* Defined once — both header templates share it, so the two skins cannot
     drift apart. Change the blue here and both follow. */
  --mts-hdr-solid-bg:   var(--e-global-color-primary, #275F81);
  --mts-hdr-solid-nav:  #F5F5F5;
  --mts-hdr-tile-bg:    #FBFAF9;
  --mts-hdr-tile-shadow: 0 0 20px rgba(0, 0, 0, .15);
  --mts-hdr-icon:       var(--e-global-color-text, #1E4A64);
  --mts-hdr-fade:       300ms;
  --mts-hdr-ease:       cubic-bezier(.4, 0, .2, 1);
}

/* ── 1. Positioning — deliberately NOT set here ──────────────────────────
   The bar already carries `position: fixed; top: 0` from the template you
   built, which is why the <header> wrapper measures 0px tall. Re-declaring
   it here would be redundant at best and a conflict at worst. Build the
   translucent template the same way and this keeps working untouched.

   Do NOT switch on Motion Effects → Sticky. Elementor's sticky clones the
   element and injects inline styles that fight everything below. It is the
   single most likely way to break this. Leave it off on both templates. */

/* ══ DESKTOP + TABLET ONLY — everything below is gated ═══════════════════
   Mobile (≤767px) gets a different header entirely, so this contributes
   nothing there rather than half-applying. The JS enforces the same cutoff,
   so the class never even lands; this is the belt to that pair of braces. */
@media (min-width: 768px){

/* ── 2. The fade ─────────────────────────────────────────────────────────
   Colour only. Nothing moves and nothing resizes — a header that changes
   size mid-scroll reflows the page under the reader's cursor. The tiles keep
   their footprint at rest and only fade their paint in, for the same
   reason. */
header.elementor-location-header .e-con,
header.elementor-location-header .elementor-item,
header.elementor-location-header .elementor-icon,
header.elementor-location-header .elementor-icon svg *,
header.elementor-location-header > .e-con > .e-con,
header.elementor-location-header .mts-header__tile{
  transition:
    background-color var(--mts-hdr-fade) var(--mts-hdr-ease),
    box-shadow       var(--mts-hdr-fade) var(--mts-hdr-ease),
    color            var(--mts-hdr-fade) var(--mts-hdr-ease),
    fill             var(--mts-hdr-fade) var(--mts-hdr-ease),
    stroke           var(--mts-hdr-fade) var(--mts-hdr-ease);
}

/* ── 3. The scrolled (blue) state ────────────────────────────────────────
   The blue goes on the BAR — the fixed direct child — not on <header>,
   which is 0px tall and would paint nothing. Nested containers are forced
   transparent so the base skin set in the editor (the translucent tint, or
   nothing) doesn't sit on top of the blue.

   !important is deliberate. Elementor generates
   `.elementor-11 .elementor-element.elementor-element-XXXX { ... }` — (0,3,0)
   and up, keyed to hashed element IDs that change whenever you rebuild a
   widget. Beating that on specificity would mean hardcoding IDs here that
   won't survive your next edit. This is a state override of a base style you
   set in the UI, which is what !important is for. */
header.elementor-location-header.is-scrolled > .e-con{
  background-color: var(--mts-hdr-solid-bg) !important;
  background-image: none !important;
  backdrop-filter: none !important;
}
/* The two tile containers are excluded above by :not(:has(...)) rather than
   being out-specified below. Both rules set background-color with !important,
   so relying on specificity order was fragile: template 11 nests the logo one
   level under the bar and template 1079 nests it two, and the tiles silently
   lost on 1079. Excluding them means the two rules can never fight. */
header.elementor-location-header.is-scrolled > .e-con .e-con:not(:has(> .elementor-widget-theme-site-logo)):not(:has(> .elementor-widget-icon)){
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
}

/* Nav links — #F5F5F5 per the design, not pure white */
header.elementor-location-header.is-scrolled .elementor-nav-menu .elementor-item,
header.elementor-location-header.is-scrolled .elementor-nav-menu .elementor-item:hover,
header.elementor-location-header.is-scrolled .elementor-nav-menu .elementor-item:focus,
header.elementor-location-header.is-scrolled .elementor-nav-menu .elementor-item.elementor-item-active{
  color: var(--mts-hdr-solid-nav) !important;
}
header.elementor-location-header.is-scrolled .e--pointer-underline .elementor-item:after,
header.elementor-location-header.is-scrolled .e--pointer-framed .elementor-item:before,
header.elementor-location-header.is-scrolled .e--pointer-framed .elementor-item:after{
  background-color: var(--mts-hdr-solid-nav) !important;
}

/* ── 4. The envelope ─────────────────────────────────────────────────────
   All three uploaded variants (contact_icon_mail_1/2/3) are the same 24×24
   path at `fill="none"` with only the stroke colour differing, so recolouring
   the stroke reproduces them exactly — no image swap, no second widget. This
   is why the video's logo-swap technique isn't needed here.

   Critically: never set `fill` blanket-wise. These icons carry fill="none",
   and CSS always outranks a presentation attribute, so `fill: #fff` turns the
   outlined envelope into a solid filled square. Only touch what the icon
   actually paints with. */
header.elementor-location-header.is-scrolled .elementor-icon{
  color: var(--mts-hdr-icon) !important;
}
header.elementor-location-header.is-scrolled .elementor-icon svg [stroke]:not([stroke="none"]){
  stroke: currentColor !important;
}
header.elementor-location-header.is-scrolled .elementor-icon svg [fill]:not([fill="none"]){
  fill: currentColor !important;
}

/* The burger is a filled eicon, so it takes colour the ordinary way. */
header.elementor-location-header.is-scrolled .elementor-menu-toggle{
  color: var(--mts-hdr-solid-nav) !important;
}
header.elementor-location-header.is-scrolled .elementor-menu-toggle svg:not([fill]){
  fill: currentColor !important;
}

/* ── 5. The tiles ────────────────────────────────────────────────────────
   The logo container and the mail-icon container both go #FBFAF9 in the blue
   state; the nav container does not.

   These are found STRUCTURALLY — "the container holding the logo", "the
   container holding the icon" — rather than by class. Both are Elementor V4
   atomic elements, which have no free-text CSS Classes field, so there is no
   class to add. Matching on what a container holds also survives a rebuild,
   which hardcoding the generated `e-3b4a7c7-befffe7` handle would not.

   Sizing stays yours — set it on the containers in Elementor. This only
   paints them, so the flip moves no pixels.

   DEPTH-AGNOSTIC on purpose: `> .e-con .e-con` (descendant), not
   `> .e-con > .e-con` (direct child). Header 1079 wraps its columns in an
   extra `.navo` element for the glass, so the tile containers sit one level
   deeper than in header 11. Matching any container that DIRECTLY holds the
   logo or icon works for both, and for whatever gets built next.

   Keeping the leading `> .e-con` is what carries the specificity to (0,5,1),
   beating the nested-container transparency rule above at (0,4,1). Drop it
   and the two tie, leaving this dependent on source order. The
   `.mts-header__tile` .elementor-kit-4s are a manual escape hatch for any container
   you'd rather tag explicitly. */
header.elementor-location-header > .e-con .e-con:has(> .elementor-widget-theme-site-logo),
header.elementor-location-header > .e-con .e-con:has(> .elementor-widget-icon),
.mts-header__tile{
  background-color: transparent;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0);
}
header.elementor-location-header.is-scrolled > .e-con .e-con:has(> .elementor-widget-theme-site-logo),
header.elementor-location-header.is-scrolled > .e-con .e-con:has(> .elementor-widget-icon),
header.elementor-location-header.is-scrolled .mts-header__tile,
header.elementor-location-header.is-scrolled > .e-con .e-con.mts-header__tile{
  background-color: var(--mts-hdr-tile-bg) !important;
  box-shadow: var(--mts-hdr-tile-shadow) !important;
}

/* The glass bar carries a white inner highlight and a drop shadow; neither
   belongs on the blue state (blue-header.svg puts the shadow on the tiles,
   not the bar). Declared before the tile rule above would lose to it, so it
   targets only the bar itself. */
header.elementor-location-header.is-scrolled > .e-con{
  box-shadow: none !important;
}

/* ── 6. Focus ring (§9) ──────────────────────────────────────────────────
   One treatment for all three backgrounds — a photo, a cream tint, and blue.
   The white ring carries it on the photo and the blue; the dark outer shadow
   is what makes it read against the cream. */
header.elementor-location-header a:focus-visible,
header.elementor-location-header [role="button"]:focus-visible,
header.elementor-location-header button:focus-visible{
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .55);
  border-radius: 2px;
}

} /* ══ end desktop + tablet gate ═════════════════════════════════════════ */

/* §9 — honour prefers-reduced-motion. The swap still happens, it just
   doesn't animate. Written as a combined query rather than nested inside the
   gate above, so it parses on older engines too. */
@media (min-width: 768px) and (prefers-reduced-motion: reduce){
  header.elementor-location-header *{ transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------
   Form placeholders — match the subject select's blue.
   Class doubled to reach (0,3,0): Elementor's own
   `.elementor .e-form-input-base::placeholder` is (0,2,0), so a
   single class loses on order. See PROJECT.md §4.4.
   --------------------------------------------------------------- */
.elementor .e-form-input-base.e-form-input-base::placeholder,
.elementor .e-form-textarea-base.e-form-textarea-base::placeholder {
  color: var(--Foundation-Blue-800, #1E4A64);
  opacity: 1;                      /* Firefox dims placeholders by default */
}

/* Reveal the product button on hover - home page split section */
@media (hover: hover) and (min-width: 1025px) {
  .hover-col .e-button-base {
    opacity: 0;
    transition: opacity .2s ease;
  }
  .hover-col:hover .e-button-base,
  .hover-col:focus-within .e-button-base {
    opacity: 1;
  }
}

.mts-btn-split .elementor-button{
  inline-size: 100%;
}

.mts-btn-split.mts-btn-split.mts-btn-split .elementor-button .elementor-button-content-wrapper{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  inline-size: 100%;
}

.mts-btn-split .elementor-button .elementor-button-text{
  order: 1;
  flex: 1 1 auto;
  text-align: start;
}

.mts-btn-split .elementor-button .elementor-button-icon{
  order: 2;
  flex: 0 0 auto;
}

.e-n-carousel.e-n-carousel > .swiper-wrapper {
  transition-timing-function: linear !important;
}

/* ---------------------------------------------------------------
   Real bold inside body paragraphs.
   The site's bold is a separate FAMILY ("Solid Bold"), registered at
   normal weight - there is no 700 cut of "Solid Regular". A bare
   <strong> asks for weight 700, finds no matching face, and gets the
   browser's synthesised faux bold, which smears Hebrew letterforms.
   Swap the family instead and hold the weight at 400 so nothing is
   synthesised on top of an already-bold face.
   Class doubled to (0,2,0) to beat Elementor's paragraph rules (§4.4).
   --------------------------------------------------------------- */
.e-paragraph-base.e-paragraph-base strong,
.e-paragraph-base.e-paragraph-base b {
  font-family: "Solid Bold", sans-serif;
  font-weight: 400;
}

/* Monochrome icons follow the button's text colour, hover included — that is
   the whole point of mts-btn-split, and 21 buttons across the site rely on it.

   .mts-icon-brand opts a single button out: with the class on, nothing here
   touches its SVG, so the file's own fills show through and the glyph colour
   becomes completely independent of the text colour. Use it for two-tone
   brand glyphs (the footer Instagram cards, §7.8) and pair it with an SVG
   that has NO white backing rects — a white rect is a [fill] too, and would
   otherwise be recoloured along with the glyph. */
.mts-btn-split:not(.mts-icon-brand) .elementor-button svg [fill]:not([fill="none"])   { fill: currentColor; }
.mts-btn-split:not(.mts-icon-brand) .elementor-button svg [stroke]:not([stroke="none"]) { stroke: currentColor; }

/* Icon size. Elementor ties a button icon to the text size
   (`.elementor-button-icon svg { width: 1em }`, 0,1,1) and gives no control for
   it, so this is the only lever. Scoped to .mts-icon-brand so the other 17
   mts-btn-split buttons keep tracking their own text size. */
.mts-btn-split.mts-icon-brand .elementor-button-icon svg {
	inline-size: 24px;
	block-size: 24px;
}

/* Hide the placeholder while the field has focus */
.elementor .e-form-input-base.e-form-input-base:focus::placeholder,
.elementor .e-form-textarea-base.e-form-textarea-base:focus::placeholder {
	color: transparent;
}

/* ---------------------------------------------------------------
   Anchor targets - clear the fixed header.

   The header bar is position:fixed (see section 1 above), so a
   #fragment jump parks the target underneath it.

   Why Elementor doesn't do this for us: Elementor 4.2.x ships an
   `anchor_scroll_margin` util that walks `.elementor-element.elementor-sticky`,
   reads each one's `sticky_anchor_link_offset` setting and writes
   `style.scrollMarginTop` onto the anchor targets in its range. Our bar is
   hand-rolled `position: fixed`, deliberately NOT Motion Effects -> Sticky
   (section 1), so that util finds no sticky element and applies nothing.
   Measured on the live site: every `.elementor-menu-anchor` computes
   `scroll-margin-top: 0px`. Hence this block.

   `scroll-padding` on the scrollport, not `scroll-margin` on the targets:
   one rule covers Menu Anchor widgets (`<div class="elementor-menu-anchor"
   id="...">`, which is NOT `.elementor-element[id]` - the id lands on the
   inner div, so the old element-scoped rule here never matched them),
   containers given a CSS ID, the Ally skip link, `:target`, and the
   load-time fragment jump on cross-page links like `/page/#anchor`.
   Nothing to remember when wiring a new anchor.

   Measured bar heights (2026-09-09, live):
     >=768px  outer fixed bar 90px
     <=767px  90px wrapper, but the painted white bar inside is 60px -
              60 is what actually covers content, so 60 is what we clear.
   Both + 16px of air. Retune if the header height changes.
   --------------------------------------------------------------- */

:root{
  --mts-anchor-offset: 106px;   /* 90 bar + 16 air */
}

@media (max-width: 767px){
  :root{ --mts-anchor-offset: 76px; }  /* 60 bar + 16 air */
}

html{
  scroll-padding-block-start: var(--mts-anchor-offset);
}

/* The kit already sets `scroll-behavior: smooth` on <html>, with no
   reduced-motion guard. A long animated scroll is a vestibular
   trigger - section 9 / WCAG 2.3.3. Jump instantly instead. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

/* ===============================================================
   === HEADER SLIDE-AWAY =========================================
   Hide the bar on scroll-down, bring it back on scroll-up, past the
   hero. Driven by `.is-hidden`, set by the footer JS snippet
   (elementor-html-widget/mts-header-scroll-js.html).

   This does NOT replace the blue `.is-scrolled` state above - it
   stacks on top of it, and here is why. The bar's base skin is fully
   transparent with WHITE nav links, because it is built to sit over
   the hero photo. Measured live 2026-09-09: the bar computes
   `background-color: rgba(0, 0, 0, 0)` and `.elementor-item` computes
   `rgb(255, 255, 255)`. A bar that slides back down over white page
   content wearing that skin is white-on-white - invisible. So past the
   hero it still needs the blue. Give the bar a solid base skin of its
   own and the colour state becomes optional.

   Nothing here is deleted when you switch behaviour: the JS `MODE`
   constant picks 'both' (default), 'slide' or 'color', and the colour
   rules above are untouched in every case. MODE = 'color' restores
   exactly the pre-2026-09-09 behaviour.

   Why the class is doubled to (0,3,1): the site currently ALSO carries a
   partial, divergent copy of the header block in Customizer -> Additional
   CSS (`<style id="wp-custom-css">`), which WordPress prints after
   Elementor's inline CSS. Its `header.elementor-location-header .e-con`
   transition rule ties this one on specificity and wins on order, which is
   exactly the breakage PROJECT.md 4.4 warns about. Doubling the class puts
   this out of its reach. Once that Customizer block is emptied (see the
   2026-09-09 log entry), the doubling can go.

   `transform`, not `inset-block-start` - the slide then runs on the
   compositor and never triggers layout on a fixed element.
   =============================================================== */

:root{
  --mts-hdr-slide: 280ms;
}

/* Both bars get this: the >=768px desktop skin and the <=767px mobile
   one. Whichever is not in play at a given width is display:none, so
   styling both is free and the slide follows whichever is on screen.
   Unlike the colour block above, this is deliberately NOT gated to
   >=768px - vertical space is scarcest on mobile, which is where the
   complaint started. */
header.elementor-location-header.elementor-location-header > .e-con{
  transition:
    transform        var(--mts-hdr-slide) var(--mts-hdr-ease),
    background-color var(--mts-hdr-fade)  var(--mts-hdr-ease),
    backdrop-filter  var(--mts-hdr-fade)  var(--mts-hdr-ease),
    box-shadow       var(--mts-hdr-fade)  var(--mts-hdr-ease),
    color            var(--mts-hdr-fade)  var(--mts-hdr-ease),
    fill             var(--mts-hdr-fade)  var(--mts-hdr-ease),
    stroke           var(--mts-hdr-fade)  var(--mts-hdr-ease);
}

/* -100% of the BAR's own height, so it clears itself at any breakpoint
   with no hardcoded 90/60 to keep in sync with the anchor offset. */
header.elementor-location-header.elementor-location-header.is-hidden > .e-con{
  transform: translateY(-100%);
}

/* A hidden bar must never hold invisible focus - tabbing into the nav
   has to bring it back (WCAG 2.4.7 / 2.4.11), and the same goes for an
   open menu toggle. The JS mirrors both of these so the class state
   stays honest, but this rule is the half that cannot fail. */
header.elementor-location-header.elementor-location-header:focus-within > .e-con,
header.elementor-location-header.elementor-location-header:has([aria-expanded="true"]) > .e-con{
  transform: none;
}

/* Reduced motion keeps the space saving but drops the animation - the
   bar cuts in and out instead of sliding. To opt out of hiding
   altogether for these users instead, add `transform: none` here. */
@media (prefers-reduced-motion: reduce){
  header.elementor-location-header.elementor-location-header > .e-con{ transition: none; }
}

/* ===============================================================
   === HERO FOLD - the cut belongs to the IMAGE, not the box =====

   The problem this replaces
   -------------------------
   The home hero used to carry the diagonal on the container:

     .elementor-element-e8a9c8e.e-con{
       height: var(--hero-h);          [1000 / 1140 / 720px per breakpoint]
       clip-path: polygon(... var(--hero-h) ...);
     }

   Clipping the container clips everything inside it, so the text had
   to be pushed above the diagonal by hand (padding-block-start:240px
   on desktop) and re-tuned at every breakpoint, because the cut line
   is a function of --hero-h and --hero-h had to be a fixed pixel
   number. Any Hebrew line that wrapped one line further pushed the
   text into the cut and got sliced. Hence the extra text container,
   and hence the CTA living in a separate parent container outside
   the hero entirely.

   The fix
   -------
   The container is never clipped. The diagonal is applied only to
   the layer that paints the photo. The text is then an ordinary
   child of the hero container in normal flow: plain padding, plain
   alignment, free to grow. Nothing about the text position depends
   on the fold geometry any more.

   Two cases, because it depends on whether a paint layer exists:

     A. A real image layer is present - Elementor background
        slideshow, background video, or an Image widget tagged
        .mts-fold-img. Clip that element. The photo is genuinely
        cut, so whatever sits behind the hero shows through.

     B. The photo is the container's own background-image, so there
        is no element to clip. ::after paints the wedge on top in a
        flat colour instead. Visually the same as long as the wedge
        colour matches the page behind it; it cannot reveal a
        gradient or the next section.

   Setup on the container (classic .e-con - Advanced → CSS Classes):
     1. add `mts-hero-fold`, plus `mts-hero-fold--solid` for case B
     2. DELETE the old `height` / `min-height` / `clip-path` rules
        from that container's own Custom CSS. They are emitted as
        `.elementor-5 .elementor-element.elementor-element-XXXX` -
        (0,4,0) - and cannot be out-specified from here (§4.4).
        Removing them is the migration; there is nothing to beat.
     3. set the height in the panel as Min Height. It is now a floor,
        not a fixed frame - the hero grows with its content.

   Per-breakpoint tuning is now the two shape variables only, and
   only where the design genuinely wants a different wedge. --hero-h,
   the fragile part, is gone: the shape is expressed as fractions of
   whatever height the hero ends up with.
   =============================================================== */

.mts-hero-fold{
  /* Both values port straight over from the old --hero-* pair.
     --mts-fold-cut  : how far UP the far edge the cut climbs, as a
                       fraction of the hero's height (0.5 = halfway).
     --mts-fold-keep : how much of the bottom edge the photo KEEPS,
                       measured from the near edge. It is the inverse of
                       the old --hero-x and reads backwards from what you
                       expect: 100% keeps the whole bottom edge and there
                       is no wedge at all, 0% runs the cut right out to
                       the far bottom corner (the widest wedge). The home
                       hero's 57.36% desktop / 30% tablet / 0% mobile is
                       therefore a wedge that gets WIDER as the screen
                       narrows, which is what the design does today. */
  --mts-fold-cut:  0.5;
  --mts-fold-keep: 50%;

  /* Case B only - must be opaque and must match whatever sits behind
     the hero, since it is paint, not a hole. */
  --mts-fold-fill: #FBFAF9;

  /* --mts-fold-bleed : how far every clip polygon overshoots the hero's
     BOTTOM edge. Never a design value - leave it alone.

     Why it exists: the hero's photo is the container's own
     background-image, and a background is painted to the border edge and
     pixel-snapped. The layers that hide it - the ::after wedge and
     Elementor's ::before overlay - are clip-path layers, and clip-path is
     rasterised as a PATH, with antialiasing, not snapped. A polygon whose
     bottom vertices sit exactly on `100%` therefore renders its last
     device-pixel row at partial coverage, and the un-clipped photo shows
     through it as a faint hairline along the whole bottom border.

     Pushing those vertices below the box moves the antialiased edge out of
     view; the hard, snapped `overflow` clip below trims the overshoot, so
     the last visible row is at full coverage and the seam is gone. 2px is
     enough for any dpr and stays clear of the diagonal's own edge, which
     is genuinely diagonal and SHOULD be antialiased. */
  --mts-fold-bleed: 2px;

  position: relative;   /* .e-con already sets this; stated for clarity */
  isolation: isolate;   /* keeps the z-index:-1 wedge inside this box
                           instead of sinking behind the page */

  /* The bleed above is only invisible because something clips it. .e-con
     already computes to overflow:hidden, but the fold must not depend on a
     panel setting nobody remembers is load-bearing - state it here. */
  overflow: clip;
}

/* ── The fold itself ─────────────────────────────────────────────────────
   clip-path polygon coordinates are PHYSICAL and do not mirror in RTL -
   this is the one place in this file where a left/right concept is
   unavoidable, and why there is a --mirror modifier rather than a logical
   property. Default wedge sits bottom-left, matching the approved design.

   Percentages resolve against the layer's own border box, and every layer
   below is inset:0 on the hero, so the geometry is identical whatever the
   hero's height turns out to be. That is what removes the fixed --hero-h. */
.mts-hero-fold > .elementor-background-slideshow,
.mts-hero-fold > .elementor-background-video-container,
.mts-hero-fold > .mts-fold-img,
.mts-hero-fold--solid:not(.mts-hero-fold--mirror)::before{
  /* The last two vertices are the bottom edge, dropped --mts-fold-bleed
     below the box. The diagonal's own endpoint stays at exactly 100%, so
     --mts-fold-keep still means what it says on the visible bottom edge:
     this is a skirt hanging off the shape, not a reshaping of it. */
  -webkit-clip-path: polygon(100% 0, 0 0,
    0 calc(var(--mts-fold-cut) * 100%),
    calc(100% - var(--mts-fold-keep)) 100%,
    calc(100% - var(--mts-fold-keep)) calc(100% + var(--mts-fold-bleed)),
    100% calc(100% + var(--mts-fold-bleed)));
  clip-path: polygon(100% 0, 0 0,
    0 calc(var(--mts-fold-cut) * 100%),
    calc(100% - var(--mts-fold-keep)) 100%,
    calc(100% - var(--mts-fold-keep)) calc(100% + var(--mts-fold-bleed)),
    100% calc(100% + var(--mts-fold-bleed)));
}

.mts-hero-fold--mirror > .elementor-background-slideshow,
.mts-hero-fold--mirror > .elementor-background-video-container,
.mts-hero-fold--mirror > .mts-fold-img,
.mts-hero-fold--solid.mts-hero-fold--mirror::before{
  -webkit-clip-path: polygon(0 0, 100% 0,
    100% calc(var(--mts-fold-cut) * 100%),
    var(--mts-fold-keep) 100%,
    var(--mts-fold-keep) calc(100% + var(--mts-fold-bleed)),
    0 calc(100% + var(--mts-fold-bleed)));
  clip-path: polygon(0 0, 100% 0,
    100% calc(var(--mts-fold-cut) * 100%),
    var(--mts-fold-keep) 100%,
    var(--mts-fold-keep) calc(100% + var(--mts-fold-bleed)),
    0 calc(100% + var(--mts-fold-bleed)));
}

/* ── Case A, Image-widget variant ────────────────────────────────────────
   Preferred over a CSS background for any hero that isn't a slideshow: a
   real <img> gets srcset, an alt attribute (§9) and `fetchpriority=high`
   with lazy-load switched off, which is what §10 asks for on the LCP
   image. A background-image can do none of that.

   Add an Image widget as the FIRST child of the hero and give it the
   `mts-fold-img` class. z-index:-1 lands it above the container's own
   background and below the text, so the text needs no z-index of its own. */
.mts-hero-fold > .mts-fold-img{
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
  pointer-events: none;
}

.mts-hero-fold > .mts-fold-img,
.mts-hero-fold > .mts-fold-img figure,
.mts-hero-fold > .mts-fold-img .elementor-widget-container{
  block-size: 100%;
}

.mts-hero-fold > .mts-fold-img img{
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--mts-fold-img-position, center);
  display: block;
}

/* ── Case B - wedge painted over a container background-image ────────────
   Only the triangle is drawn, so the photo underneath is untouched and,
   again, the container is never clipped.

   z-index:-1 paints above the hero's own background but below in-flow
   content (CSS paint order steps 2 and 4), which is exactly the slot we
   want. Elementor's ::before is already its background-overlay layer, so
   this deliberately uses ::after - do not move it to ::before.

   Not for slideshow heroes: .elementor-background-slideshow is positioned
   at z-index:0 and would paint over a -1 wedge. Those want case A. */
/* If the hero also uses Elementor's Background Overlay, that overlay lives on
   ::before at inset:0 with z-index:auto, so it paints ABOVE the z-index:-1 wedge
   below and tints it. On אהבה שניה the overlay is a black gradient at 50%, which
   turned the cream wedge grey. The two rules above therefore clip ::before to the
   PHOTO side using the same polygon as a real image layer, so the overlay stops at
   the fold and the wedge stays the flat --mts-fold-fill colour. Harmless when no
   overlay is set: Elementor leaves ::before at `content: none`. */
.mts-hero-fold--solid::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--mts-fold-fill);
  pointer-events: none;
  -webkit-clip-path: polygon(0 calc(var(--mts-fold-cut) * 100%),
    calc(100% - var(--mts-fold-keep)) 100%,
    calc(100% - var(--mts-fold-keep)) calc(100% + var(--mts-fold-bleed)),
    0 calc(100% + var(--mts-fold-bleed)));
  clip-path: polygon(0 calc(var(--mts-fold-cut) * 100%),
    calc(100% - var(--mts-fold-keep)) 100%,
    calc(100% - var(--mts-fold-keep)) calc(100% + var(--mts-fold-bleed)),
    0 calc(100% + var(--mts-fold-bleed)));
}

.mts-hero-fold--solid.mts-hero-fold--mirror::after{
  -webkit-clip-path: polygon(100% calc(var(--mts-fold-cut) * 100%),
    var(--mts-fold-keep) 100%,
    var(--mts-fold-keep) calc(100% + var(--mts-fold-bleed)),
    100% calc(100% + var(--mts-fold-bleed)));
  clip-path: polygon(100% calc(var(--mts-fold-cut) * 100%),
    var(--mts-fold-keep) 100%,
    var(--mts-fold-keep) calc(100% + var(--mts-fold-bleed)),
    100% calc(100% + var(--mts-fold-bleed)));
}

/* ── Home hero - the values already tuned on the old container ───────────
   Carried over unchanged from the --hero-* set so the fold lands exactly
   where it does today. --hero-h has no successor: the height is now a
   Min Height in the panel and the shape follows it.

   The text no longer has to dodge the cut, so the 240px padding-block-start
   that used to hold it above the diagonal can go; centre it, or give it
   whatever padding the design wants. Keep it clear of the wedge by eye -
   overlapping it is now only a legibility question, not a clipping one. */
#mts-home-hero{
  --mts-fold-cut:  0.495;
  --mts-fold-keep: 57.36%;
}

@media (max-width: 1024px){
  #mts-home-hero{
    --mts-fold-cut:  0.487;
    --mts-fold-keep: 30%;
  }
}

@media (max-width: 767px){
  /* keep:0% - the cut runs corner to corner, the widest of the three.
     Unchanged from the old --hero-x: 0%.

     The old rule also pinned mobile to height:720px. The diagonal's angle
     follows the hero's height, so if the mobile fold is meant to sit at a
     specific slope rather than track the viewport, set Min Height to 720px
     on the mobile breakpoint in the panel and it behaves as before. */
  #mts-home-hero{
    --mts-fold-cut:  0.5;
    --mts-fold-keep: 0%;
  }
}

/* -- Keeping the wedge a TRIANGLE: the CTA has to scale, not sit at a fixed size --
   The wedge is a triangle, so its width shrinks to nothing at the apex. The CTA
   block sits in it, bottom-aligned, and its height is content-driven: a narrower
   column wraps the Hebrew onto more lines, which makes the block TALLER, which
   pushes its top edge up into the part of the triangle that is still narrow.
   Measured before this fix: fine at 390/768/900/1024 and at 1600+, but overlapping
   the photo by 12-80px across the whole 1100-1440 band, worst at 1100.

   Worse, at 1100x600 the CTA's top edge landed ABOVE the apex entirely, where the
   wedge has zero width. No values of --mts-fold-cut / --mts-fold-keep can fix that:
   a triangle simply has no room up there. So this is not a tuning problem.

   Root cause is a units mismatch. The hero is min-height:100vh, so it SHRINKS with
   the window height, while the CTA's fixed-px text keeps a constant height. The
   block's share of the hero climbed 33% -> 42% -> 50% as the window got shorter,
   and past a point it outgrows any triangle.

   Fix: make the CTA scale with the section so the geometry is scale-invariant.
   If it fits once, it fits everywhere.

   On units, because this is the trap: `rem` is anchored to the root font size,
   which on this site is a fixed 16px, and `em` is relative to the parent. NEITHER
   knows anything about the section's size, so swapping px for rem changes nothing
   here. `cqi` is the unit that scales with the container, which is why the hero
   gets container-type below.

   `min()` of a width-driven and a height-driven measure means the type can never
   outgrow EITHER axis of the triangle, which is what removes the need for a
   separate height floor on the wedge maths. The clamp bounds stay in `rem` on
   purpose: pure viewport/container units do not respond to the reader's own
   font-size setting and fail WCAG 1.4.4 (section 9 is a hard requirement here).

   min-block-size stops the hero collapsing on short windows, which was the last
   failure mode left after the type was made fluid (900x620 and 1024x620).

   Verified across 21 width x height combinations from 360x640 to 2560x900:
   every one clears, minimum margin 15px. Re-run that sweep before changing any
   number below. Raising the 1.75cqi / 2.75vh coefficients makes the type bigger
   and eats the margin; 15px is the tightest case (360x640), so there is not much
   room to spend.

   No !important anywhere: `#id > .e-con:last-child .e-paragraph-base` is (1,2,0)
   and already beats Elementor's atomic paragraph rules (section 4.4).

   Targeted structurally as "the hero's last container" rather than by the hashed
   `.elementor-element-6ae8b17`, so it survives a rebuild of that widget. */
@media (min-width: 768px){

  #mts-home-hero{
    container-type: inline-size;          /* makes cqi below mean "of the hero" */
    min-block-size: max(100vh, 42rem);    /* floor: 100vh alone collapses too far */
  }

  #mts-home-hero > .e-con:last-child .e-paragraph-base,
  #mts-home-hero > .e-con:last-child p{
    font-size: clamp(1.05rem, min(1.75cqi, 2.75vh), 1.75rem);
  }

  #mts-home-hero > .e-con:last-child .e-button-base,
  #mts-home-hero > .e-con:last-child a{
    font-size: clamp(0.85rem, min(1.1cqi, 1.75vh), 1.05rem);
  }
}

/* -- אהבה שניה (page 605) and יוצרים מהלב (page 815) --------------------------
   Both are Case B: a plain `classic` background-image on the container, with no
   slideshow layer to clip, so both take `mts-hero-fold--solid`.

   They are duplicates of each other and share element ids (9a4a823 hero,
   41f14e48 text), so they are told apart only by the CSS ID set per page.

   Geometry ported verbatim from the --hero-* values that were on each element:
   cut .35 / .40 / .50 and keep 55% / 30% / 0%. Identical on both pages; only the
   SIDE differs, which is why יוצרים מהלב also carries --mirror. Verified against
   the old polygons: אהבה שניה's `calc(100% - 55%) H` is this rule's (45%, 100%),
   and יוצרים מהלב's `55% H` is the mirror rule's (55%, 100%). */
#mts-ahava-hero,
#mts-yotzrim-hero{
  --mts-fold-cut:  0.35;
  --mts-fold-keep: 55%;
}

@media (max-width: 1024px){
  #mts-ahava-hero,
  #mts-yotzrim-hero{
    --mts-fold-cut:  0.40;
    --mts-fold-keep: 30%;
  }
}

@media (max-width: 767px){
  #mts-ahava-hero,
  #mts-yotzrim-hero{
    --mts-fold-cut:  0.50;
    --mts-fold-keep: 0%;
  }
}

/* ---------------------------------------------------------------
   Rolling strip — "הפעילות שלנו" hero  (§4.4)
   Replaces the Nested Carousel (n-carousel) that used to sit here.

   Why it was rebuilt: Swiper ran at slidesPerView:3, so it wrote an
   inline width:400px onto every slide. The items are not 400px wide,
   so the slack left inside each slide became the gap — measured
   5px / 15px / 21px / 55px across the four items, and the images
   were squeezed to 162–210px instead of a consistent 210px.

   Marquee instead of carousel, for two reasons:
     • item widths are ours to control, so every gap is exactly --gap
     • one linear animation = constant speed. Swiper's autoplay
       (delay 100ms / speed 5000ms) moves one slide per transition,
       so unequal slide widths would make the strip surge and slow.

   LAYOUT (changed 2026-10-25 at the client's request): each item is a
   CENTRED COLUMN - image on top, caption under it - and every item is
   exactly as wide as the image. One fixed width for all items is what
   keeps the gaps even now, at every breakpoint, and it is also what lets
   the caption wrap: an item can no longer be widened by a long label.
   Images are 50% larger than the original 210x140 (25% on 2026-10-25,
   a further 20% the same day, both at the client's request).

   Requires the item set to be duplicated once — the -50% translate
   is what makes the loop seamless. Done by mts-activities-strip.html.
   --------------------------------------------------------------- */

#mts-activities-strip {
  --mts-strip-gap:      48px;   /* the ONE number controlling every gap */
  --mts-strip-duration: 25s;    /* lower = faster */
  --mts-strip-img-w:    315px;  /* every image, same size, always */
  --mts-strip-img-h:    210px;  /* 50% up from 210x140, ratio kept at 3:2 */
  --mts-strip-stack-gap: 14px;  /* image to caption */
  overflow: hidden;
}

/* NOTE: the spacing is a margin on each item, NOT `gap` on the track.
   With `gap`, N items carry N-1 gaps, so two copies of the set are not
   exactly twice one copy — translateX(-50%) then lands 2.5 gaps off and
   the loop visibly jumps. As a margin the spacing belongs to the item,
   so the two halves are identical and -50% is exact. */
#mts-activities-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  /* The track is itself a flex item inside the strip, so by default it
     gets shrunk back to the container width and max-content is ignored.
     Measured: 1280px instead of 4318px, which made translateX(-50%)
     move 640px instead of 2159px. This is what broke the loop. */
  flex: 0 0 auto;
  /* Elementor gives containers 10px inline padding. That padding is part
     of the element's width but not part of the item set, so -50% landed
     10px off. Zero it and the two halves match exactly. */
  padding-inline: 0;
  /* Images share one top line no matter what the captions do. The panel
     ships `end`, which bottom-aligns the items, so a caption that wrapped
     to a second line would push THAT item's image up out of line with the
     rest. At 768-1024 the longest label clears its box by about 3px, so
     this is a real possibility after any copy edit, not a hypothetical. */
  align-items: flex-start;
  animation: mts-strip-scroll var(--mts-strip-duration) linear infinite;
  will-change: transform;
}

/* POSITIVE 50%, because this site is RTL. `transform` has no logical
   equivalent (§3.3 can't help here), so the direction is hardcoded and
   this comment is the guard rail.
   In RTL the row is laid out from the right edge leftwards, so items 2..n
   sit to the LEFT of the origin. Translating negative pushes the whole
   track further left and off the screen — measured: the track lands at
   -5037..-719 while the visible window is 0..1440, i.e. completely empty.
   Positive brings the leftward content in: -719..3599, window fully
   covered. If this strip is ever reused on an LTR site, flip the sign. */
@keyframes mts-strip-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}

/* Pause: hover for mouse, focus-within for keyboard, data-paused for
   the button. WCAG 2.2.2 needs a real control — hover is not enough. */
#mts-activities-strip:hover        #mts-activities-track,
#mts-activities-strip:focus-within #mts-activities-track,
#mts-activities-strip[data-paused="true"] #mts-activities-track {
  animation-play-state: paused;
}

/* Each item: image above caption, both centred on the item's axis.
   `align-items: center` DOES override the Elementor panel's יישור פריטים
   (which ships `end`); that setting no longer has any effect here, and
   centring is the whole point of the layout, so it is deliberate.
   The item is exactly the image's width, which is what makes every gap
   measure exactly --mts-strip-gap between one image edge and the next.
   `padding-inline: 0` for the same reason the track needs it: Elementor
   gives every container 10px of inline padding, which would otherwise
   squeeze the image to 243px inside a 263px item. */
#mts-activities-track > * {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  inline-size: var(--mts-strip-img-w);
  padding-inline: 0;
  gap: var(--mts-strip-stack-gap);
  margin-inline-start: var(--mts-strip-gap);
}

/* The image: identical size on every item, and never shrinks.
   Uniform images are half of what makes the gaps look even — in the
   carousel they were being squeezed to 162/156/196/210.
   Works whether the image element is an <img> (V4 Image widget) or a
   Flexbox carrying a background-image. */
#mts-activities-track > * > :first-child {
  flex: 0 0 auto;
  inline-size: var(--mts-strip-img-w);
  block-size: var(--mts-strip-img-h);
  object-fit: cover;
}
#mts-activities-track > * > :first-child img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* The caption wraps now, because the item is the image's width and the
   labels are wider than that. `nowrap` here would push the item wider
   than its image and bring the uneven gaps straight back.

   `line-height: 1.35` is NOT cosmetic. The page inherits a computed
   `line-height: 4.8px` from an ancestor, so a 19px line box is 4.8px
   tall. Nobody saw it while the caption was a single nowrap line in a
   row, but stacked and wrapping it overlaps its own second line. Do not
   remove it without checking what the inherited value is.

   No two-line reserve here any more: at 315px every label fits on ONE
   line from 768 up (measured 165/290/312/199 at 768, 156/274/294/188 at
   1440, 165/289/310/198 at 1920), so a reserve would only hang 24px of
   dead space under every caption. The reserve moved into the mobile
   query, where the narrower item really does wrap two of the four.

   The slack is thin - 3.2px on the longest label at 768. If a label is
   ever lengthened it will wrap, and the cost is 27px of extra strip
   height on that item, nothing worse, because the track pins the images
   to one top line. Widen --mts-strip-img-w if that ever looks wrong. */
#mts-activities-track > * > p {
  flex: 0 0 auto;
  margin: 0;
  inline-size: 100%;
  text-align: center;
  line-height: 1.35;
  white-space: normal;
}

/* Mobile keeps the desktop behaviour; only the scale changes.

   At 204px the four captions come out 1 / 2 / 2 / 1 lines, so this is
   where the two-line reserve earns its keep: without it the two one-line
   items would stand 27px shorter than their neighbours. Desktop does not
   need it and does not get it.

   The peek is now 1.70 items, down from 2.02 at the previous 170px size.
   That is still most of a second item showing, which is all the peek has
   to do - tell the reader the strip keeps going. Below about 1.2 it stops
   reading as a strip, so treat that as the floor if the images grow again. */
@media (max-width: 767px) {
  #mts-activities-strip {
    --mts-strip-gap:      16px;
    --mts-strip-duration: 28s;
    --mts-strip-img-w:    204px;
    --mts-strip-img-h:    136px;
    --mts-strip-stack-gap: 10px;
  }
  #mts-activities-track > * > p {
    min-block-size: 2.7em;
  }
}

@media (prefers-reduced-motion: reduce) {
  #mts-activities-track { animation: none; }
}

/* ---------------------------------------------------------------
   "הפעילות שלנו" hero - spacing that answers to screen HEIGHT  (§4.4)

   Reported symptom: the hero is too long on a 13" laptop, and the
   Height field in the panel "does not work".

   Both halves have the same cause. The panel's Height is Min Height
   80vh, and min-height only decides anything when it is TALLER than
   the content. The content stack is a fixed 811px:

       200px  title top margin        (the h2's own Margin)
        80px  title
       200px  row gap                 (the container's Gap)
       291px  the rolling strip
        40px  bottom padding
       -----
       811px

   At 1920x1080, 80vh is 864px, so min-height wins and the hero is
   0.80 screens - the control works, which is why it looks right on a
   big monitor. At 1280x660, 80vh is only 528px, the content wins, and
   the hero is 809px: 1.23 screens. The Height field is inert below
   about 1011px of viewport height. Dragging it changes nothing.

   So the fix is not the height, it is the 440px of fixed spacing that
   does not know how tall the screen is. Both values now interpolate
   from their floor at a 660px-tall viewport to today's exact 200px at
   1080 and above, so **nothing changes on a 1080 screen or taller**.

   Measured: 1280x660  809 -> 574px  (1.23 -> 0.87 screens)
             1440x900  809 -> 720px  (0.90 -> 0.80)
             1920x1080 864 -> 864px  (unchanged)
             768x1024  819 -> 819px  (unchanged; min-height binds)
             375x812   unchanged, byte for byte

   **The two floors are different on purpose.** The gap can shrink to
   45px with no consequence. The title's top margin cannot: the header
   is a 90px `position: fixed` bar painted over this hero, so a margin
   that shrinks past it puts the page title underneath the menu. That
   is the exact failure the עלינו page hit on 2026-10-18. The floor is
   therefore tied to `--mts-anchor-offset` (the measured bar + 16px of
   air) rather than to a number typed here, so it follows the header if
   the header ever changes.

   SELECTOR: keyed to the strip's CSS ID through `:has()`, not to the
   hashed atomic class `.e-3e561a5`, because that class is reminted
   whenever the element is rebuilt in the editor. `#mts-activities-strip`
   is ours and survives. Specificity lands at (1,2,0) against
   Elementor's (0,2,0), so this wins regardless of source order - which
   matters, because Site Settings CSS prints BEFORE local-943 CSS.

   SCOPE: `min-width: 768px` is the exact complement of Elementor's own
   mobile file, which sets its own row-gap (120px) and bottom padding
   (24px) on this container. Mobile is left exactly as it was.
   --------------------------------------------------------------- */

@media (min-width: 768px) {
  .elementor .e-con:has(> #mts-activities-strip) {
    --mts-hero-air: calc(37vh - 199px);
    row-gap: clamp(45px, var(--mts-hero-air), 200px);
  }

  /* Floor = the fixed bar plus its air, never a bare number. */
  .elementor .e-con:has(> #mts-activities-strip) > h2 {
    margin-block-start: clamp(
      calc(var(--mts-anchor-offset, 106px) + 14px),
      var(--mts-hero-air),
      200px
    );
  }
}

/* ==========================================================================
   Contact form — matash   |   RTL
   PASTE TARGET:  Elementor -> Site Settings -> Custom CSS
                  (NOT the widget's own Custom CSS box)

   Why here, and why this scope:
   This widget's id has now changed four times —
       91d0693 -> 2e256ea -> 58ead33 -> 0f496ef
   — most recently when it was made a global element, and the per-widget
   Custom CSS was dropped along the way. Anything tied to a widget id, or
   stored on the widget itself, keeps getting lost.

   `.elementor-widget-form` is Elementor's own widget-type class. It never
   changes, it survives rebuilds, duplication and global re-saves, and this
   site has exactly one form widget — so it is safe and permanent.

   If a second form is ever added and should look different, add a class to
   this one (Advanced -> CSS Classes -> matash-contact-form) and change
   `.elementor-widget-form` to `.matash-contact-form` throughout.

   !important is required: Elementor generates the widget's own CSS behind a
   `.elementor-5 .elementor-element.elementor-element-<id>` prefix that is
   more specific than anything scoped by widget type.
   ========================================================================== */

.elementor-widget-form {
  --f-blue:        var(--e-global-color-primary, #2E5C7E);  /* text + hints + underline */
  --f-textarea-bg: #EDEBE5;                                  /* beige message box */
  --f-textarea-h:  160px;
}

/* --------------------------------------------------------------------------
   1. Hint text: blue instead of grey — and gone the moment you click in
   -------------------------------------------------------------------------- */
.elementor-widget-form .elementor-field-textual::placeholder {
  color: var(--f-blue) !important;
  opacity: 1;                         /* Firefox dims placeholders by default */
  transition: color .12s ease, opacity .12s ease;
}

/* older WebKit / Edge still read the prefixed forms */
.elementor-widget-form .elementor-field-textual::-webkit-input-placeholder { color: var(--f-blue) !important; opacity: 1; }
.elementor-widget-form .elementor-field-textual::-moz-placeholder          { color: var(--f-blue) !important; opacity: 1; }

/* the hint disappears on focus */
.elementor-widget-form .elementor-field-textual:focus::placeholder {
  color: transparent !important;
  opacity: 0;
}
.elementor-widget-form .elementor-field-textual:focus::-webkit-input-placeholder { color: transparent !important; opacity: 0; }
.elementor-widget-form .elementor-field-textual:focus::-moz-placeholder          { color: transparent !important; opacity: 0; }

/* the select's own text ("בחרו את נושא הפנייה*") is a real value, not a
   placeholder, so it needs colouring directly */
.elementor-widget-form .elementor-select-wrapper select,
.elementor-widget-form .elementor-select-wrapper select option {
  color: var(--f-blue) !important;
}

/* --------------------------------------------------------------------------
   2. No frame on the active field — underline only
   Kills the browser outline, Elementor's focus ring and any inherited
   box-shadow, so focus never draws a box.
   -------------------------------------------------------------------------- */
.elementor-widget-form .elementor-field-textual:focus,
.elementor-widget-form .elementor-field-textual:focus-visible,
.elementor-widget-form .elementor-select-wrapper select:focus,
.elementor-widget-form .elementor-select-wrapper select:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-left: 0 !important;
}

/* Focus still has to be visible to anyone using a keyboard — so instead of a
   frame, the underline doubles in weight. Purely the bottom edge, no box. */
.elementor-widget-form .elementor-field-textual:focus,
.elementor-widget-form .elementor-select-wrapper select:focus {
  border-bottom: 2px solid var(--f-blue) !important;
}

/* --------------------------------------------------------------------------
   3. Dropdown chevron
   Elementor renders the caret as a real DOM node, not a pseudo-element:
       <div class="select-caret-down-wrapper"><svg class="e-eicon-caret-down">
   That is why hiding `::before` did nothing — that pseudo-element is empty.
   So rather than hide the node and add a second icon, the node itself is
   restyled into the chevron: its SVG is dropped and the box is masked. One
   icon, and Elementor's own positioning is reused.
   -------------------------------------------------------------------------- */
.elementor-widget-form .select-caret-down-wrapper svg {
  display: none !important;
}

.elementor-widget-form .select-caret-down-wrapper {
  width: 14px !important;
  height: 9px !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  background-color: var(--f-blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* no second chevron */
.elementor-widget-form .elementor-select-wrapper::after,
.elementor-widget-form .elementor-select-wrapper::before {
  content: none !important;
}

.elementor-widget-form .elementor-select-wrapper {
  position: relative;
}

/* kill the native OS arrow as well */
.elementor-widget-form .elementor-select-wrapper select {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   3b. Text inset — 8px from the right edge (the side RTL text starts from)
   Physical properties on purpose: `padding-inline-start` did not take here.
   The select keeps a wider inset on the left so the text never runs under
   the chevron.
   -------------------------------------------------------------------------- */
.elementor-widget-form .elementor-field-group input.elementor-field,
.elementor-widget-form .elementor-field-group select.elementor-field,
.elementor-widget-form .elementor-field-group textarea.elementor-field,
.elementor-widget-form .elementor-select-wrapper select {
  padding-right: 8px !important;
}

.elementor-widget-form .elementor-field-group select.elementor-field,
.elementor-widget-form .elementor-select-wrapper select {
  padding-left: 32px !important;
}

/* --------------------------------------------------------------------------
   4. Beige message box — 160px on every breakpoint
   -------------------------------------------------------------------------- */
.elementor-widget-form .elementor-field-group textarea.elementor-field {
  height: var(--f-textarea-h) !important;
  min-height: var(--f-textarea-h) !important;
  padding: 16px 8px 16px 16px !important;   /* right edge matches the other fields */
  background-color: var(--f-textarea-bg) !important;
  border: 0 !important;
  border-radius: 0 !important;
  line-height: 1.6 !important;         /* see note 5 */
  resize: none;
}

.elementor-widget-form .elementor-field-group textarea.elementor-field:focus {
  outline: 0 !important;
  border: 0 !important;
}

/* Fallback — only if the beige refuses to show after publishing.
   Something on the site would then be overriding textarea backgrounds; an
   inset shadow paints the whole box and is not affected by background rules.
   Uncomment BOTH declarations and delete the `background-color` line above.

.elementor-widget-form .elementor-field-group textarea.elementor-field {
  box-shadow: inset 0 0 0 999px var(--f-textarea-bg) !important;
}
.elementor-widget-form .elementor-field-group textarea.elementor-field:focus {
  box-shadow: inset 0 0 0 999px var(--f-textarea-bg) !important;
}
*/

/* --------------------------------------------------------------------------
   5. Line height  ← still outstanding, and still a real bug
   Typography is set to 0.3em on the fields and 0.4em on the button. At 16px
   that is 4.8px / 6.4px — smaller than the text itself, which breaks vertical
   centring and clips Hebrew descenders (ק ן ך ף ץ).
   Best fixed in Elementor (Style → Typography → Line Height: 1.5 / 1).
   Delete this block once you do.
   -------------------------------------------------------------------------- */
.elementor-widget-form .elementor-field-group .elementor-field,
.elementor-widget-form .elementor-field-group .elementor-select-wrapper select {
  line-height: 1.5 !important;
}

.elementor-widget-form .elementor-button[type="submit"] {
  line-height: 1 !important;
}

/* --------------------------------------------------------------------------
   6. Transparent fields sit on a cream section, so Chrome's autofill would
      otherwise paint an opaque white block over them.
   -------------------------------------------------------------------------- */
.elementor-widget-form .elementor-field-textual:-webkit-autofill,
.elementor-widget-form .elementor-field-textual:-webkit-autofill:hover,
.elementor-widget-form .elementor-field-textual:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--f-blue);
  box-shadow: 0 0 0 1000px transparent inset !important;
  transition: background-color 9999s ease-out;
}

/* CTA: text stays top-right, button pinned bottom-centre */
.mts-cta-btn-bottom .elementor-cta__content{
  flex-direction: column;
  flex-wrap: nowrap;
}

.mts-cta-btn-bottom .elementor-cta__button-wrapper{
  margin-block-start: auto;
  text-align: center;
}

/* ---------------------------------------------------------------
   Phone fields - always flush to the reading edge, in every engine.

   The bug: `input[type="tel"]` has no `direction` of its own in the
   ATOMIC form widget, so it falls through to the UA stylesheet -
   and the engines disagree. Blink forces `direction: ltr` on tel
   inputs; WebKit does not. The field's own `text-align: end` then
   resolves against opposite directions: right in Chrome, left in
   Safari. Same CSS, two results.

   Elementor already solves this for the CLASSIC form widget -
   `widget-form-rtl.min.css` ships
   `.elementor-field-type-tel input { direction: inherit }` - which
   is why the contact-page phone field is unaffected. The atomic
   form widget has no equivalent. This is that missing rule.

   Pin BOTH properties and the engine stops being a variable.
   `end` rather than `right` because direction is pinned on the same
   element one line above, so `end` IS the right edge - no physical
   left/right anywhere, per section 3.3.

   Deliberately scoped to `.e-form-input-base` (the atomic form's
   input class, shared by all four popups and anything built after).
   A site-wide `input[type="tel"]` rule would also flip the CLASSIC
   field to ltr, and that one's placeholder is written `טלפון*` with
   the asterisk last - it renders on the left today only because the
   field is rtl. Leave it alone; it is already correct and immune.
   --------------------------------------------------------------- */

.elementor input[type="tel"].e-form-input-base{
  direction: ltr;
  text-align: end;
}

/* BEGIN mts-fluid-scale -- generated, do not edit by hand */
/* ==========================================================================
   FLUID TYPE + SPACING SCALE  -- GENERATED, DO NOT EDIT BY HAND
   Regenerate with:  python3 css/build-fluid-scale.py

   Every size below interpolates from a floor at 1025px up to its
   current value at 1920px. At 1920px and above nothing changes.

   Selectors are raised one specificity notch (last class duplicated)
   because Site Settings CSS is printed before the per-element CSS.

   Rules are emitted in SOURCE ORDER, not grouped by size. Two rules here
   can match the same element (its own style class and a shared global
   class), and the original cascade broke that tie by order. Regrouping
   flips the winner - it once turned a 247px top padding into 120px and
   pushed a page title under the fixed header.
   ========================================================================== */

@media (min-width: 1025px) {

  /* 24 -> 20px */
  .elementor-732 .elementor-element.elementor-element-a4ba76d .elementor-nav-menu .elementor-item.elementor-item.elementor-item.elementor-item { font-size: clamp(20px, 0.45vw + 15.42px, 24px); }

  /* 40 -> 30px */
  .elementor-1870 .elementor-element.elementor-element-43cf94f .elementor-heading-title.elementor-heading-title.elementor-heading-title.elementor-heading-title { font-size: clamp(30px, 1.12vw + 18.55px, 40px); }

  /* 48 -> 32px */
  .elementor-5 .elementor-element.elementor-element-79a89af.elementor-element-79a89af.elementor-element-79a89af.elementor-element-79a89af { font-size: clamp(32px, 1.79vw + 13.68px, 48px); }

  /* 191 -> 120px */
  .elementor-5 .elementor-element.elementor-element-d7d7743 .elementor-heading-title.elementor-heading-title.elementor-heading-title.elementor-heading-title { font-size: clamp(120px, 7.93vw + 38.69px, 191px); }

  /* 51 -> 34px */
  .elementor-5 .elementor-element.elementor-element-911d6c4.elementor-element-911d6c4.elementor-element-911d6c4.elementor-element-911d6c4 { font-size: clamp(34px, 1.9vw + 14.53px, 51px); }

  /* 200 -> 120px */
  .elementor-5 .elementor-element.elementor-element-23ca7cd .elementor-heading-title.elementor-heading-title.elementor-heading-title.elementor-heading-title { font-size: clamp(120px, 8.94vw + 28.38px, 200px); }

  /* 40 -> 30px */
  .elementor-5 .elementor-element.elementor-element-174060c .elementor-heading-title.elementor-heading-title.elementor-heading-title.elementor-heading-title { font-size: clamp(30px, 1.12vw + 18.55px, 40px); }

  /* 40 -> 30px */
  .elementor-5 .elementor-element.elementor-element-756f8c6 .elementor-heading-title.elementor-heading-title.elementor-heading-title.elementor-heading-title { font-size: clamp(30px, 1.12vw + 18.55px, 40px); }

  /* 40 -> 30px */
  .elementor-5 .elementor-element.elementor-element-6725b2f .elementor-heading-title.elementor-heading-title.elementor-heading-title.elementor-heading-title { font-size: clamp(30px, 1.12vw + 18.55px, 40px); }

  /* 40 -> 30px */
  .elementor-5 .elementor-element.elementor-element-30f940a .elementor-heading-title.elementor-heading-title.elementor-heading-title.elementor-heading-title { font-size: clamp(30px, 1.12vw + 18.55px, 40px); }

  /* 40 -> 30px */
  .elementor-5 .elementor-element.elementor-element-a93d359 .elementor-heading-title.elementor-heading-title.elementor-heading-title.elementor-heading-title { font-size: clamp(30px, 1.12vw + 18.55px, 40px); }

  /* 40 -> 30px */
  .elementor-5 .elementor-element.elementor-element-50cba8f .elementor-heading-title.elementor-heading-title.elementor-heading-title.elementor-heading-title { font-size: clamp(30px, 1.12vw + 18.55px, 40px); }

  /* 40 -> 30px */
  .elementor-5 .elementor-element.elementor-element-bb4b0e5 .elementor-heading-title.elementor-heading-title.elementor-heading-title.elementor-heading-title { font-size: clamp(30px, 1.12vw + 18.55px, 40px); }

  /* 40 -> 30px */
  .elementor-5 .elementor-element.elementor-element-3a3c83d .elementor-heading-title.elementor-heading-title.elementor-heading-title.elementor-heading-title { font-size: clamp(30px, 1.12vw + 18.55px, 40px); }

  /* 36 -> 28px */
  .elementor-5 .elementor-element.elementor-element-575c751 .elementor-cta__title.elementor-cta__title.elementor-cta__title.elementor-cta__title { font-size: clamp(28px, 0.89vw + 18.84px, 36px); }

  /* 24 -> 20px */
  .elementor-5 .elementor-element.elementor-element-575c751 .elementor-cta__description.elementor-cta__description.elementor-cta__description.elementor-cta__description { font-size: clamp(20px, 0.45vw + 15.42px, 24px); }

  /* 36 -> 28px */
  .elementor-5 .elementor-element.elementor-element-c630658 .elementor-cta__title.elementor-cta__title.elementor-cta__title.elementor-cta__title { font-size: clamp(28px, 0.89vw + 18.84px, 36px); }

  /* 24 -> 20px */
  .elementor-5 .elementor-element.elementor-element-c630658 .elementor-cta__description.elementor-cta__description.elementor-cta__description.elementor-cta__description { font-size: clamp(20px, 0.45vw + 15.42px, 24px); }

  /* 24 -> 20px */
  .elementor .e-4209e29-85c16a5.e-4209e29-85c16a5.e-4209e29-85c16a5.e-4209e29-85c16a5 { font-size: clamp(20px, 0.45vw + 15.42px, 24px); }

  /* 24 -> 20px */
  .elementor .e-c495c59-4d89a4b.e-c495c59-4d89a4b.e-c495c59-4d89a4b.e-c495c59-4d89a4b { font-size: clamp(20px, 0.45vw + 15.42px, 24px); }

  /* 20 -> 18px */
  .elementor .e-5ca324f-f0e9d6e.e-5ca324f-f0e9d6e.e-5ca324f-f0e9d6e.e-5ca324f-f0e9d6e { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 24 -> 20px */
  .elementor-11 .elementor-element.elementor-element-6d853ac .elementor-icon.elementor-icon.elementor-icon.elementor-icon { font-size: clamp(20px, 0.45vw + 15.42px, 24px); }

  /* 20 -> 18px */
  .elementor-50 .elementor-element.elementor-element-5842b7d .elementor-heading-title.elementor-heading-title.elementor-heading-title.elementor-heading-title { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 20 -> 18px */
  .elementor-50 .elementor-element.elementor-element-50605746 .elementor-heading-title.elementor-heading-title.elementor-heading-title.elementor-heading-title { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 20 -> 18px */
  .elementor-50 .elementor-element.elementor-element-b716f5d .elementor-heading-title.elementor-heading-title.elementor-heading-title.elementor-heading-title { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 272 -> 160px */
  .elementor-50 .elementor-element.elementor-element-191754e6 .elementor-heading-title.elementor-heading-title.elementor-heading-title.elementor-heading-title { font-size: clamp(10em, 12.51vw + 1.98em, 17em); }

  /* 66 -> 44px */
  .elementor-50 .elementor-element.elementor-element-11bb450 .elementor-heading-title.elementor-heading-title.elementor-heading-title.elementor-heading-title { font-size: clamp(44px, 2.46vw + 18.8px, 66px); }

  /* 20 -> 18px */
  .elementor-605 .elementor-element.elementor-element-42f3c6d .elementor-icon-box-title.elementor-icon-box-title.elementor-icon-box-title.elementor-icon-box-title,
  .elementor-605 .elementor-element.elementor-element-42f3c6d .elementor-icon-box-title.elementor-icon-box-title.elementor-icon-box-title.elementor-icon-box-title a { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 20 -> 18px */
  .elementor-605 .elementor-element.elementor-element-42f3c6d .elementor-icon-box-description.elementor-icon-box-description.elementor-icon-box-description.elementor-icon-box-description { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 20 -> 18px */
  .elementor-605 .elementor-element.elementor-element-233db7f .elementor-icon-box-title.elementor-icon-box-title.elementor-icon-box-title.elementor-icon-box-title,
  .elementor-605 .elementor-element.elementor-element-233db7f .elementor-icon-box-title.elementor-icon-box-title.elementor-icon-box-title.elementor-icon-box-title a { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 20 -> 18px */
  .elementor-605 .elementor-element.elementor-element-233db7f .elementor-icon-box-description.elementor-icon-box-description.elementor-icon-box-description.elementor-icon-box-description { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 20 -> 18px */
  .elementor .e-8a172af-4be2c2c.e-8a172af-4be2c2c.e-8a172af-4be2c2c.e-8a172af-4be2c2c { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 18 -> 17px */
  .elementor .e-de59f8d-321cb78.e-de59f8d-321cb78.e-de59f8d-321cb78.e-de59f8d-321cb78 { font-size: clamp(17px, 0.11vw + 15.85px, 18px); }

  /* 24 -> 20px */
  .elementor-1079 .elementor-element.elementor-element-430c0f8 .elementor-icon.elementor-icon.elementor-icon.elementor-icon { font-size: clamp(20px, 0.45vw + 15.42px, 24px); }

  /* 40 -> 30px */
  .elementor-1782 .elementor-element.elementor-element-43cf94f .elementor-heading-title.elementor-heading-title.elementor-heading-title.elementor-heading-title { font-size: clamp(30px, 1.12vw + 18.55px, 40px); }

  /* 40 -> 30px */
  .elementor-1867 .elementor-element.elementor-element-43cf94f .elementor-heading-title.elementor-heading-title.elementor-heading-title.elementor-heading-title { font-size: clamp(30px, 1.12vw + 18.55px, 40px); }

  /* 40 -> 30px */
  .elementor .h2-40.h2-40.h2-40 { font-size: clamp(30px, 1.12vw + 18.55px, 40px); }

  /* 20 -> 18px */
  .elementor .e-12df0f5-e2486b8.e-12df0f5-e2486b8.e-12df0f5-e2486b8.e-12df0f5-e2486b8 { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 20 -> 18px */
  .elementor .e-bed30ef-bd16aeb.e-bed30ef-bd16aeb.e-bed30ef-bd16aeb.e-bed30ef-bd16aeb { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 20 -> 18px */
  .elementor .e-4c312ed-e14a0a1.e-4c312ed-e14a0a1.e-4c312ed-e14a0a1.e-4c312ed-e14a0a1 { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 20 -> 18px */
  .elementor .e-1751cda-96b1532.e-1751cda-96b1532.e-1751cda-96b1532.e-1751cda-96b1532 { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 20 -> 18px */
  .elementor .e-d2ac587-4b49969.e-d2ac587-4b49969.e-d2ac587-4b49969.e-d2ac587-4b49969 { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 19 -> 18px */
  .elementor .e-78dfc43-ce27ad4.e-78dfc43-ce27ad4.e-78dfc43-ce27ad4.e-78dfc43-ce27ad4 { font-size: clamp(18px, 0.11vw + 16.85px, 19px); }

  /* 20 -> 18px */
  .elementor .e-43a47a3-219ab51.e-43a47a3-219ab51.e-43a47a3-219ab51.e-43a47a3-219ab51 { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 20 -> 18px */
  .elementor .e-0ebe0dd-915509b.e-0ebe0dd-915509b.e-0ebe0dd-915509b.e-0ebe0dd-915509b { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 20 -> 18px */
  .elementor .e-7e4185d-42ffb40.e-7e4185d-42ffb40.e-7e4185d-42ffb40.e-7e4185d-42ffb40 { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 20 -> 18px */
  .elementor .e-546b338-5851ce2.e-546b338-5851ce2.e-546b338-5851ce2.e-546b338-5851ce2 { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 20 -> 18px */
  .elementor .e-8db1e46-65bbfd6.e-8db1e46-65bbfd6.e-8db1e46-65bbfd6.e-8db1e46-65bbfd6 { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 20 -> 18px */
  .elementor .e-50c0f6c-ec46939.e-50c0f6c-ec46939.e-50c0f6c-ec46939.e-50c0f6c-ec46939 { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 20 -> 18px */
  .elementor .e-b082a8c-9d9eb8d.e-b082a8c-9d9eb8d.e-b082a8c-9d9eb8d.e-b082a8c-9d9eb8d { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 24 -> 20px */
  .elementor .e-e5ced30-9ce6db0.e-e5ced30-9ce6db0.e-e5ced30-9ce6db0.e-e5ced30-9ce6db0 { font-size: clamp(20px, 0.45vw + 15.42px, 24px); }

  /* 24 -> 20px */
  .elementor .e-60a687c-3c4f568.e-60a687c-3c4f568.e-60a687c-3c4f568.e-60a687c-3c4f568 { font-size: clamp(20px, 0.45vw + 15.42px, 24px); }

  /* 20 -> 18px */
  .elementor .e-1aa496a-9baf7de.e-1aa496a-9baf7de.e-1aa496a-9baf7de.e-1aa496a-9baf7de { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 20 -> 18px */
  .elementor .e-92bee67-230c0d1.e-92bee67-230c0d1.e-92bee67-230c0d1.e-92bee67-230c0d1 { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 20 -> 18px */
  .elementor .e-88dc1f0-7af92b8.e-88dc1f0-7af92b8.e-88dc1f0-7af92b8.e-88dc1f0-7af92b8 { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 20 -> 18px */
  .elementor .e-2642e6d-8fff0cb.e-2642e6d-8fff0cb.e-2642e6d-8fff0cb.e-2642e6d-8fff0cb { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 18 -> 17px */
  .elementor .e-54f9742-97e6e36.e-54f9742-97e6e36.e-54f9742-97e6e36.e-54f9742-97e6e36 { font-size: clamp(17px, 0.11vw + 15.85px, 18px); }

  /* 40 -> 30px */
  .elementor-2080 .elementor-element.elementor-element-43cf94f .elementor-heading-title.elementor-heading-title.elementor-heading-title.elementor-heading-title { font-size: clamp(30px, 1.12vw + 18.55px, 40px); }

  /* 100 -> 60px */
  .elementor .e-2473d481-4a78fda.e-2473d481-4a78fda.e-2473d481-4a78fda.e-2473d481-4a78fda { font-size: clamp(60px, 4.47vw + 14.19px, 100px); }

  /* 20 -> 18px */
  .elementor .e-9e4e73d-fe79bf3.e-9e4e73d-fe79bf3.e-9e4e73d-fe79bf3.e-9e4e73d-fe79bf3 { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 20 -> 18px */
  .elementor .e-48f837e-cd4f558.e-48f837e-cd4f558.e-48f837e-cd4f558.e-48f837e-cd4f558 { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 20 -> 18px */
  .elementor .e-4b5f9c2-8fe4b2b.e-4b5f9c2-8fe4b2b.e-4b5f9c2-8fe4b2b.e-4b5f9c2-8fe4b2b { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 20 -> 18px */
  .elementor .e-da3907a-ce0da61.e-da3907a-ce0da61.e-da3907a-ce0da61.e-da3907a-ce0da61 { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 18 -> 17px */
  .elementor .e-cf270b2-05f39bd.e-cf270b2-05f39bd.e-cf270b2-05f39bd.e-cf270b2-05f39bd { font-size: clamp(17px, 0.11vw + 15.85px, 18px); }

  /* 18 -> 17px */
  .elementor .e-bf4b2f7-4ec6d9d.e-bf4b2f7-4ec6d9d.e-bf4b2f7-4ec6d9d.e-bf4b2f7-4ec6d9d { font-size: clamp(17px, 0.11vw + 15.85px, 18px); }

  /* 32 -> 25px */
  .elementor .team-title.team-title.team-title { font-size: clamp(25px, 0.78vw + 16.98px, 32px); }

  /* 24 -> 20px */
  .elementor .inner-page-subtitle.inner-page-subtitle.inner-page-subtitle { font-size: clamp(20px, 0.45vw + 15.42px, 24px); }

  /* 100 -> 60px */
  .elementor .e-8acac41-710e3da.e-8acac41-710e3da.e-8acac41-710e3da.e-8acac41-710e3da { font-size: clamp(60px, 4.47vw + 14.19px, 100px); }

  /* 18 -> 17px */
  .elementor .e-16ea570-ad0920e.e-16ea570-ad0920e.e-16ea570-ad0920e.e-16ea570-ad0920e { font-size: clamp(17px, 0.11vw + 15.85px, 18px); }

  /* 18 -> 17px */
  .elementor .e-30f8f0a-d54e801.e-30f8f0a-d54e801.e-30f8f0a-d54e801.e-30f8f0a-d54e801 { font-size: clamp(17px, 0.11vw + 15.85px, 18px); }

  /* 40 -> 30px */
  .elementor-1873 .elementor-element.elementor-element-43cf94f .elementor-heading-title.elementor-heading-title.elementor-heading-title.elementor-heading-title { font-size: clamp(30px, 1.12vw + 18.55px, 40px); }

  /* 100 -> 60px */
  .elementor .h1-catalogue.h1-catalogue.h1-catalogue { font-size: clamp(60px, 4.47vw + 14.19px, 100px); }

  /* 40 -> 30px */
  .elementor .title-40.title-40.title-40 { font-size: clamp(30px, 1.12vw + 18.55px, 40px); }

  /* 20 -> 18px */
  .elementor .e-70236a7-c1b52e7.e-70236a7-c1b52e7.e-70236a7-c1b52e7.e-70236a7-c1b52e7 { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 18 -> 17px */
  .elementor .e-f1879d4-a1837c1.e-f1879d4-a1837c1.e-f1879d4-a1837c1.e-f1879d4-a1837c1 { font-size: clamp(17px, 0.11vw + 15.85px, 18px); }

  /* 18 -> 17px */
  .elementor .e-28d8444-ab3a9b5.e-28d8444-ab3a9b5.e-28d8444-ab3a9b5.e-28d8444-ab3a9b5 { font-size: clamp(17px, 0.11vw + 15.85px, 18px); }

  /* 20 -> 18px */
  .elementor .e-452e7be-ecb6d2c.e-452e7be-ecb6d2c.e-452e7be-ecb6d2c.e-452e7be-ecb6d2c { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 18 -> 17px */
  .elementor .e-8f130e8-98802c2.e-8f130e8-98802c2.e-8f130e8-98802c2.e-8f130e8-98802c2 { font-size: clamp(17px, 0.11vw + 15.85px, 18px); }

  /* 20 -> 18px */
  .elementor .e-7e0e004-2ebe4fd.e-7e0e004-2ebe4fd.e-7e0e004-2ebe4fd.e-7e0e004-2ebe4fd { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 20 -> 18px */
  .elementor .e-dbe1976-54121e4.e-dbe1976-54121e4.e-dbe1976-54121e4.e-dbe1976-54121e4 { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 20 -> 18px */
  .elementor .e-0234dec-b4519bf.e-0234dec-b4519bf.e-0234dec-b4519bf.e-0234dec-b4519bf { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 24 -> 20px */
  .elementor .e-4698e5d-55d48d9.e-4698e5d-55d48d9.e-4698e5d-55d48d9.e-4698e5d-55d48d9 { font-size: clamp(20px, 0.45vw + 15.42px, 24px); }

  /* 20 -> 18px */
  .elementor .e-e5b32a6-5bf97a9.e-e5b32a6-5bf97a9.e-e5b32a6-5bf97a9.e-e5b32a6-5bf97a9 { font-size: clamp(18px, 0.22vw + 15.71px, 20px); }

  /* 40 -> 30px */
  .elementor-1007 .elementor-element.elementor-element-e8caa69 .elementor-heading-title.elementor-heading-title.elementor-heading-title.elementor-heading-title { font-size: clamp(30px, 1.12vw + 18.55px, 40px); }

  /* 56 -> 38px */
  .elementor .h2.h2.h2 { font-size: clamp(38px, 2.01vw + 17.39px, 56px); }

  /* 40 -> 30px */
  .elementor-513 .elementor-element.elementor-element-0f1baca .elementor-heading-title.elementor-heading-title.elementor-heading-title.elementor-heading-title { font-size: clamp(30px, 1.12vw + 18.55px, 40px); }

  /* 40 -> 30px */
  .elementor-571 .elementor-element.elementor-element-20c5eca9 .elementor-heading-title.elementor-heading-title.elementor-heading-title.elementor-heading-title { font-size: clamp(30px, 1.12vw + 18.55px, 40px); }

  /* 19 -> 18px */
  .elementor-780 .elementor-element.elementor-element-ce2aaf2 .elementor-heading-title.elementor-heading-title.elementor-heading-title.elementor-heading-title { font-size: clamp(18px, 0.11vw + 16.85px, 19px); }

  /* ---- hand-written additions ---- */

  /* home hero CTA: lift the existing clamp floor 0.85rem -> 0.9375rem (15px) */
  #mts-home-hero > .e-con:last-child .e-button-base.e-button-base,
  #mts-home-hero > .e-con:last-child a.e-button-base {
    font-size: clamp(0.9375rem, min(1.1cqi, 1.75vh), 1.05rem);
  }
}

/* ---- accessibility floor (all breakpoints, IS 5568 / WCAG) ---- */

/* 12px raised */
#elementor-popup-modal-732 .dialog-close-button.dialog-close-button.dialog-close-button.dialog-close-button.dialog-close-button { font-size: 14px; }

/* 12px raised */
#elementor-popup-modal-732 .dialog-close-button.dialog-close-button.dialog-close-button.dialog-close-button.dialog-close-button i,
#elementor-popup-modal-732 .dialog-close-button.dialog-close-button.dialog-close-button.dialog-close-button.dialog-close-button svg { font-size: 14px; }

/* 12px raised */
.elementor .e-form-success-message-base.e-form-success-message-base { font-size: 14px; }

/* 12px raised */
.elementor .e-form-error-message-base.e-form-error-message-base { font-size: 14px; }

/* 14px raised */
.elementor .e-pagination-prev-base.e-pagination-prev-base { font-size: 15px; }

/* 14px raised */
.elementor .e-pagination-next-base.e-pagination-next-base { font-size: 15px; }

/* 12px raised */
.elementor .e-form-input-base.e-form-input-base { font-size: 14px; }

/* 14px raised */
.elementor .e-form-label-base.e-form-label-base { font-size: 15px; }

/* 12px raised */
.elementor .e-form-textarea-base.e-form-textarea-base { font-size: 14px; }

/* 12px raised */
.elementor .e-form-date-picker-base.e-form-date-picker-base { font-size: 14px; }

/* 12px raised */
.elementor .e-form-time-picker-base.e-form-time-picker-base { font-size: 14px; }

/* 12px raised */
.elementor .e-form-select-base.e-form-select-base { font-size: 14px; }

/* 12px raised */
.elementor .e-form-file-upload-base.e-form-file-upload-base { font-size: 14px; }

/* 14px raised */
.elementor-50 .elementor-element.elementor-element-f545a2d .elementor-nav-menu .elementor-item.elementor-item.elementor-item.elementor-item { font-size: 15px; }

/* 14px raised */
.elementor-50 .elementor-element.elementor-element-ec76a5e .elementor-nav-menu .elementor-item.elementor-item.elementor-item.elementor-item { font-size: 15px; }

/* 14px raised */
.elementor-50 .elementor-element.elementor-element-a7edd97 .elementor-nav-menu .elementor-item.elementor-item.elementor-item.elementor-item { font-size: 15px; }

/* 14px raised */
.elementor-50 .elementor-element.elementor-element-686ac81 .elementor-nav-menu .elementor-item.elementor-item.elementor-item.elementor-item { font-size: 15px; }

/* 14px raised */
.elementor-50 .elementor-element.elementor-element-9eced48 .elementor-nav-menu .elementor-item.elementor-item.elementor-item.elementor-item { font-size: 15px; }

/* 12px raised */
.elementor-50 .elementor-element.elementor-element-9af9adf.elementor-element-9af9adf.elementor-element-9af9adf.elementor-element-9af9adf { font-size: 14px; }

/* 14px raised */
.elementor .e-6bb9faf-1d64db5.e-6bb9faf-1d64db5.e-6bb9faf-1d64db5.e-6bb9faf-1d64db5 { font-size: 15px; }

/* END mts-fluid-scale */

/* BEGIN mts-legal -- legal / policy text pages */
/* מת"ש — Legal & policy text pages (הצהרת נגישות, מדיניות פרטיות, תקנון …)
   Hooks are the two widget classes the page sets (§4.4):
     .mts-legal__title  — the H1 Heading widget
     .mts-legal__body   — the Text Editor widget holding the whole document
   Widget-level, not container-level: on this build the flexbox container
   drops _css_classes, so it carries no hook of its own. The container still
   supplies the measure (boxed 820px) and the top clearance for the fixed
   90px header.
   RTL (§3.3): logical properties only — never left/right.
   Specificity (§4.4): Elementor's own rules are 0,2,0 and the kit's are
   0,1,1; everything below leads with .elementor to clear both. */

.elementor .mts-legal__title .elementor-heading-title {
	font-size: clamp(32px, 5vw, 56px);
	line-height: 1.15;
	text-align: start;
}

.elementor .mts-legal__title { margin-block-end: 0.5em; }

/* The kit's global "text" style is line-height 0.3em, which is set for
   display copy and makes a paragraph of body text overlap itself. */
.elementor .mts-legal__body {
	font-size: 18px;
	line-height: 1.85;
	text-align: start;
}

.elementor .mts-legal__body p,
.elementor .mts-legal__body li {
	line-height: 1.85;
}

.elementor .mts-legal__body p { margin-block-end: 1.1em; }

.elementor .mts-legal__body h2 {
	font-family: "COLBO", sans-serif;
	font-size: clamp(24px, 3vw, 30px);
	line-height: 1.3;
	color: var(--e-global-color-primary, #275F81);
	margin-block: 2em 0.7em;
	text-align: start;
}

.elementor .mts-legal__body > :first-child { margin-block-start: 0; }

.elementor .mts-legal__body ul {
	list-style-type: disc;
	padding-inline-start: 1.5em;
	margin-block: 0 1.4em;
}

.elementor .mts-legal__body li { margin-block-end: 0.5em; }
.elementor .mts-legal__body li::marker { color: var(--e-global-color-primary, #275F81); }

.elementor .mts-legal__body a {
	color: var(--e-global-color-primary, #275F81);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.elementor .mts-legal__body a:hover { text-decoration-thickness: 2px; }

/* Visible focus ring — IS 5568 / WCAG 2.4.7 (§9). */
.elementor .mts-legal__body a:focus-visible {
	outline: 2px solid var(--e-global-color-primary, #275F81);
	outline-offset: 3px;
	border-radius: 2px;
	text-decoration-thickness: 2px;
}

/* Latin and numeric runs inside Hebrew. The content wraps them in
   [dir="ltr"]; this isolates them so bidi cannot reorder the line (§3.3). */
.elementor .mts-legal__body [dir="ltr"] { unicode-bidi: isolate; }

/* Contact block: a real list for screen readers, no bullets on screen. */
.elementor .mts-legal__body .mts-legal__contact {
	list-style: none;
	padding-inline-start: 0;
}

.elementor .mts-legal__body .mts-legal__updated {
	margin-block-start: 2.5em;
	font-size: 16px;
	opacity: 0.75;
}

/* Phone widths: the boxed container's own inline padding collapses, so the
   text would otherwise run into the viewport edge. */
@media (max-width: 767px) {
	.elementor .mts-legal__title,
	.elementor .mts-legal__body { padding-inline: 20px; }
	.elementor .mts-legal__body { font-size: 17px; }
}
/* END mts-legal */

/* BEGIN mts-hero-crop -- where a hero photo gives up its pixels on short screens */

/* ---------------------------------------------------------------
   אהבה שניה (page 605) — keep the faces out of the header bar
   ---------------------------------------------------------------
   THE GEOMETRY, measured on the live page at 1280x660 (a 13" laptop):

     hero       min-height:110vh, so 726px tall, and its top edge sits at
                viewport -90: it tucks under the fixed 90px header bar,
                which is OPAQUE. The first row of photo a reader can
                actually see is therefore box-y 180, not box-y 0.
     photo      ahava-shniya-10.webp, 1920x1299 (ratio 1.478)
     cover      at 1280 wide that renders 1280x866 — 140px taller than
                the 726px box, so 140px has to be cropped off somewhere.
     heads      the top of the women's hair is 207px into the rendered
                photo (23.9% of its height). Measured, not estimated.

   `background-position: center center` split the 140px evenly, 70 top
   and 70 bottom. That lands the heads at viewport y = 207 - 70 - 90 =
   47 — INSIDE the header's 0-90 band — so the menu was painted straight
   over their hair and foreheads. That is the bug the client reported.

   Anchoring the Y axis to `top` sends all 140px to the bottom instead.
   The heads land at viewport 117, a clear 27px below the bar, and they
   stay at 117 on every screen short enough to crop at all: below that
   point cover is driven by the WIDTH, so the rendered height — and with
   it the head position — stops depending on the viewport height.

   Above vh ≈ 0.615 × vw (787px at 1280 wide, 1181px at 1920) cover is
   driven by the height instead, there is no vertical crop left, and this
   rule is inert. Verified at 1280x660, 1280x800, 1440x900, 1920x1080.

   WHAT IT COSTS: on the shortest screens the "אהבה שניה" sign painted on
   the counter is now cut by the hero's bottom edge. There is nothing else
   to give — the box is wider than the photo's ratio, 140px must come off
   one end or the other, and faces beat signage. The hero's own H1 already
   carries the same two words.

   WHY THE LONGHAND and not `background-position`: the mobile breakpoint
   sets `-405px 0px`, a hand-tuned horizontal pan of this same photo.
   Writing only the Y longhand leaves every breakpoint's X value untouched.
   Mobile's Y is already 0, so nothing below 768 changes at all.

   SPECIFICITY: Elementor emits the background on
   `.elementor-element-9a4a823:not(.elementor-motion-effects-element-type-background)`,
   which is (0,2,0). A CSS ID is (1,0,0) and wins regardless of source order
   (§4.4). The flip side: changing Background Position in the Elementor panel
   will now appear to do nothing on the Y axis. Change it here instead.

   NOT APPLIED TO יוצרים מהלב (page 815), which has the same symptom from a
   different cause: in that photo the taller man's head is already at the very
   top edge of the frame, so there is no headroom to move down into, and its
   desktop `background-size:100% auto` leaves an unpainted band on tall
   screens. It needs its own answer, not this one. */

#mts-ahava-hero{
  background-position-y: top;
}

/* END mts-hero-crop *//* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'COLBO';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://matash.co.il/wp-content/uploads/2026/08/COLBO-RegularExtended.woff2') format('woff2'),
		url('https://matash.co.il/wp-content/uploads/2026/08/COLBO-RegularExtended-1.woff') format('woff');
}
@font-face {
	font-family: 'COLBO';
	font-style: normal;
	font-weight: 900;
	font-display: auto;
	src: url('https://matash.co.il/wp-content/uploads/2026/08/COLBO-BoldExtended.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Ezer Solid';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://matash.co.il/wp-content/uploads/2026/08/EzerSolid-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Ezer Solid';
	font-style: normal;
	font-weight: bold;
	font-display: auto;
	src: url('https://matash.co.il/wp-content/uploads/2026/08/EzerSolid-Bold.woff') format('woff');
}
/* End Custom Fonts CSS */