/* ==========================================================================
   sd-wp.css — the bridge between Elementor's markup and the ported 4.1 CSS (assets/css/sketch/*.css).
   Loaded last. Owner: the foundation (phase 1); phase-2 pages put their own rules in assets/css/pages/<key>.css.

   HOW IT WORKS (details: wp/COMPONENTS.md)
   - Every generated element carries the SAME classes as the sketch markup, so the sketch CSS applies.
     container -> "sdc …"   widget -> "sdw …"   (Elementor puts widget classes on its wrapper <div>)
   - .sdc  : Elementor's container padding / gap / width variables -> 0 / auto (the sketch classes set the real values).
   - .sdw  : the widget's inner .elementor-widget-container disappears (display:contents); a Heading's inner
             <h2>/<p>/<span> inherits the type set by the sketch class on the wrapper (.h2, .lead, .eyebrow …).
   - .sdx  : the whole widget wrapper disappears (display:contents): the inner element IS the sketch element —
             used for shortcodes / decorative HTML, and for headings / texts the sketch styles by tag (".t-contact h2").
   - .sdh  : headings h1-h4 get the sketch's default heading type (weight 700, tight leading).
   - Buttons: sd-btn.css (generated) = the sketch's .btn rules on the inner <a>; icons = sd-icons.css (ie-/ib-).
   ========================================================================== */

/* ---------- 0 · tokens for WordPress ---------- */
:root { --font: 'birzia', 'Google Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; }
body.sd-site { margin: 0; overflow-x: clip; }
html { overflow-x: clip; }

/* accessibility helpers Hello's reset used to provide */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; word-wrap: normal !important; }
.skip-link.screen-reader-text:focus { z-index: 100000; top: 10px; right: 10px; clip: auto; width: auto; height: auto; padding: 10px 16px; margin: 0; border-radius: 12px; background: var(--navy); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }

/* the content sits above the cursor light (html.dk) */
.elementor-location-header, [data-elementor-type="wp-page"], [data-elementor-type="wp-post"], [data-elementor-type="single-post"],
[data-elementor-type="archive"], [data-elementor-type="error-404"], .elementor-location-footer { position: relative; z-index: 1; }
.elementor-location-header { z-index: 100; }
.admin-bar .hdr { top: 32px; }
@media (max-width: 782px) { .admin-bar .hdr { top: 46px; } }

/* show only on desktop / only on phones (the sketch renders some parts per size) */
@media (max-width: 820px) { .sd-only-d { display: none !important; } }
@media (min-width: 821px) { .sd-only-m { display: none !important; } }

/* ---------- 0b · the shared runtime CSS of the sketches (assets/sd.js LOGO_CSS): logo / mark layers, reveal, lightbox ---------- */
.sd-logo { position: relative; display: inline-block; height: 32px; aspect-ratio: var(--sd-logo-aspect, 3.728); flex: none; vertical-align: middle; }
.sd-mark { position: relative; display: inline-block; height: 32px; aspect-ratio: var(--sd-mark-aspect, .885); flex: none; vertical-align: middle; }
.sd-logo > i, .sd-mark > i { position: absolute; inset: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: background-color .35s cubic-bezier(.23, 1, .32, 1); }
.sd-logo__text { background: var(--logo-text, #fff); }
.sd-logo__arrow, .sd-mark__arrow { background: var(--logo-arrow, var(--logo-text, #fff)); }
.sd-logo__square, .sd-mark__square { background: var(--logo-square, #39F4CC); }
html.sd-js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.23, 1, .32, 1), transform .8s cubic-bezier(.23, 1, .32, 1); transition-delay: var(--d, 0ms); }
html.sd-js [data-reveal].in { opacity: 1; transform: none; }
.sd-lb { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; background: rgba(6, 8, 12, .92); opacity: 0; transition: opacity .28s ease; direction: rtl; }
.sd-lb.open { opacity: 1; }
.sd-lb img { max-width: min(92vw, 1600px); max-height: 84vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); user-select: none; }
.sd-lb figcaption { position: absolute; bottom: 3vh; left: 0; right: 0; text-align: center; color: #fff; font: 500 15px/1.4 var(--font, system-ui); }
.sd-lb button { all: unset; cursor: pointer; position: absolute; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sd-lb button svg { width: 22px; height: 22px; }
.sd-lb .x { top: 18px; left: 18px; } .sd-lb .p { right: 18px; top: 50%; margin-top: -25px; } .sd-lb .n { left: 18px; top: 50%; margin-top: -25px; }
@media (prefers-reduced-motion: reduce) { html.sd-js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---------- 1 · Elementor resets for the generated elements ---------- */
.e-con.sdc {
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px; --width: auto;
  --widgets-spacing: 0px; --widgets-spacing-row: 0px; --widgets-spacing-column: 0px;
  --container-widget-width: auto; --flex-wrap-mobile: initial;
}
a.e-con.sdc { color: inherit; text-decoration: none; }
.sdw > .elementor-widget-container { display: contents; }
.elementor-widget.sdx, .sdx > .elementor-widget-container, .sdx .elementor-shortcode { display: contents; }
/* a heading / text box: the inner element takes its type from the sketch class on the wrapper */
.sdw:not(.sdx) > .elementor-widget-container > .elementor-heading-title {
  font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; text-transform: inherit; text-wrap: inherit; margin: 0; padding: 0;
}
:where(.sdh) { font-weight: 700; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
/* a heading that IS the sketch element (.sdx): the sketch rules by tag apply; Elementor's leading 1 -> the sketch's */
:where(.sdx) .elementor-heading-title:where(h1, h2, h3, h4) { line-height: 1.1; }
:where(.sdx) .elementor-heading-title:where(p, span, div) { line-height: inherit; }
.sdw .elementor-heading-title a { color: inherit; text-decoration: none; }
:where(.sdw.elementor-widget-text-editor) p { margin: 0; }
/* zero specificity (round 4b): it used to beat the sketch's .lead colour (leads showed full white / navy instead of ink-2) */
:where(.sdw.elementor-widget-text-editor:not(.sdx)) { color: inherit; }
.sdw.elementor-widget-image img { display: block; }
.sdw.elementor-widget-html, .sdw.elementor-widget-shortcode { min-width: 0; }

/* ---------- 2 · buttons + icons (beyond sd-btn.css) ---------- */
.sdb .elementor-button-wrapper, .sdb .elementor-button-content-wrapper { display: contents; }
.sdb .elementor-button { font-family: inherit; line-height: 1; text-decoration: none; fill: currentColor; }
.sdb .elementor-button-text { flex: 0 1 auto; }
@media (hover: hover) and (pointer: fine) {
  .sdb.go .elementor-button:hover .elementor-button-text::after { transform: translateX(-4px); }
  .sdb.ext .elementor-button:hover .elementor-button-text::after { transform: translate(-2px, -2px); }
  .link-go.ie-arrowLeft:hover .elementor-heading-title::after, a:hover > .link-go.ie-arrowLeft .elementor-heading-title::after,
  a.svc-card:hover .link-go .elementor-heading-title::after { transform: translateX(-4px); }
}
.t-contact .sdb .elementor-button-text { flex: 1; justify-content: space-between; }
.link-go { --ic: 18px; --ic-gap: 6px; }
.link-go .elementor-heading-title { display: inline-flex; align-items: center; gap: 6px; }
.chip.ib-heart { --ic: 16px; --ic-gap: 6px; }

/* eyebrow: the logo mark (mint square + arrow) drawn before the line */
.eyebrow .elementor-heading-title { position: relative; display: inline-flex; align-items: center; gap: 9px; }
.eyebrow .elementor-heading-title::before { content: ""; flex: none; height: 17px; aspect-ratio: var(--sd-mark-aspect, .885); background: var(--eb-sq, var(--mint));
  -webkit-mask: var(--sd-mark-sq) 0 0 / 100% 100% no-repeat; mask: var(--sd-mark-sq) 0 0 / 100% 100% no-repeat; }
.eyebrow .elementor-heading-title::after { content: ""; position: absolute; inset-inline-start: 0; top: 50%; height: 17px; aspect-ratio: var(--sd-mark-aspect, .885); transform: translateY(-50%);
  background: var(--eb-ar, var(--navy)); -webkit-mask: var(--sd-mark-ar) 0 0 / 100% 100% no-repeat; mask: var(--sd-mark-ar) 0 0 / 100% 100% no-repeat; }
.panel-navy .eyebrow, [data-tone="dark"] .eyebrow, :is(html.dk, .navy-sec) .eyebrow { --eb-ar: #fff; }
:is(html.dk, .navy-sec) .is-light .eyebrow { --eb-ar: var(--navy); }
.panel-mint .eyebrow { --eb-sq: #fff; }

/* ---------- 3 · header (Theme Builder) ---------- */
.hdr-logo .sd-logo, .hdr-logo { flex: none; }
.hdr-nav .elementor-menu-toggle, .hdr-nav .elementor-nav-menu--dropdown, .sheet-nav .elementor-menu-toggle, .sheet-nav .elementor-nav-menu--dropdown { display: none !important; }
.hdr-nav .elementor-nav-menu--main, .sheet-nav .elementor-nav-menu--main { display: block; }
.hdr-nav ul.elementor-nav-menu { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; flex-wrap: nowrap; }
.hdr-nav ul.elementor-nav-menu > li { display: block; margin: 0; }
.hdr-nav .elementor-nav-menu a.elementor-item {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; margin: 0;
  border-radius: 999px; font-size: 15px; font-weight: 500; line-height: 1; color: rgba(0, 18, 43, .6); white-space: nowrap; background: transparent;
  transition: color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.hdr-nav .elementor-nav-menu a.elementor-item:is([aria-current="page"], .elementor-item-active) { color: var(--navy); font-weight: 600; }
.hdr-nav .elementor-nav-menu a.elementor-item::before, .hdr-nav .elementor-nav-menu a.elementor-item::after { display: none; }
.hdr-nav .elementor-nav-menu a.elementor-item:is([aria-current="page"], .elementor-item-active)::before { content: ""; display: block; position: static; inset: auto; opacity: 1 !important; transform: none; width: 6px; height: 6px; border-radius: 2px; background: var(--mint); }
@media (hover: hover) and (pointer: fine) { .hdr-nav .elementor-nav-menu a.elementor-item:not([aria-current="page"]):hover { color: var(--navy); } }
.hdr.on-dark .hdr-nav .elementor-nav-menu a.elementor-item { color: rgba(255, 255, 255, .66); }
.hdr.on-dark .hdr-nav .elementor-nav-menu a.elementor-item:is([aria-current="page"], .elementor-item-active) { color: #fff; }
@media (hover: hover) and (pointer: fine) { .hdr.on-dark .hdr-nav .elementor-nav-menu a.elementor-item:not([aria-current="page"]):hover { color: #fff; } }
@media (max-width: 1120px) { .hdr-nav { display: none !important; } }
.hdr-btn.menu { border: 0; padding: 0; }
.hdr-btn.menu:hover, .hdr-btn.menu:focus { background: transparent; }

/* the phone menu sheet */
.sheet[hidden] { display: none; }
.elementor-editor-active .elementor-edit-area-active .sheet { display: block; position: relative; inset: auto; z-index: 1; opacity: 1; min-height: 400px; }   /* editing the header itself: the menu sheet sits in the page, editable */
.sheet-x { cursor: pointer; }
.sheet-nav ul.elementor-nav-menu { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.sheet-nav ul.elementor-nav-menu > li { display: block; margin: 0; }
.sheet-nav .elementor-nav-menu a.elementor-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 4px 10px; margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08); border-radius: 0; background: none;
  font-size: 27px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: #fff;
  opacity: 0; transform: translateY(12px); transition: opacity .4s var(--ease), transform .4s var(--ease); transition-delay: calc(var(--i, 0) * 35ms + 60ms);
}
.sheet-nav .elementor-nav-menu a.elementor-item::before { display: none; }
.sheet-nav .elementor-nav-menu a.elementor-item::after { content: ""; display: block; position: static; inset: auto; transform: none; width: 22px; height: 22px; flex: none; opacity: .5 !important; background: currentColor;
  -webkit-mask: var(--sd-ic-chevronLeft) center / contain no-repeat; mask: var(--sd-ic-chevronLeft) center / contain no-repeat; }
.sheet.open .sheet-nav .elementor-nav-menu a.elementor-item, .elementor-editor-active .sheet-nav .elementor-nav-menu a.elementor-item { opacity: 1; transform: none; }
.sheet-nav .elementor-nav-menu a.elementor-item:is([aria-current="page"], .elementor-item-active) { color: var(--mint); }
.sheet-nav .elementor-nav-menu a.elementor-item:is([aria-current="page"], .elementor-item-active)::after { opacity: 1 !important; }
.sheet .sdb .elementor-button { display: flex; }

/* ---------- 4 · home ---------- */
/* hero: the runway (shortcode) sits next to the Elementor text; the sketch used ">" selectors */
.hx4 .tex.over { z-index: 2; }
.hx4 .tex.over .o2, .hx4 .tex.over .o3 { display: none !important; }
.hx4 .tex.over .g1 { right: -18%; top: -30%; }
/* phones show all 6 columns (smaller tiles, see §11) */
.hx-h1 .elementor-heading-title { text-wrap: balance; }

/* bento */
.bento .t-review { min-width: 0; }
@media (max-width: 820px) { .bento .t-review { display: none; } }
.svc-mini :is(b, strong) { display: block; font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.svc-mini > a { display: flex; flex-direction: column; gap: 14px; }
.t-live .top :is(b, strong) { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.t-live .scene { flex: 1; }
.t-stat .k > .elementor-widget-heading { min-width: 0; }

/* "עבודות נבחרות": the intro moves into the track on desktop (sd-site.js) */
.fx.sd-intro-in .fx-introwrap { display: none; }
.fx-introwrap .fx-intro { width: auto; }
.fx .fx-intro .sdb { align-self: flex-start; }

/* "מה אני עושה" */
.svc4 > .svc-li { min-width: 0; }
.svc-card .svc-t { display: block; }
@media (max-width: 820px) {
  .svc-card > .elementor-widget-text-editor, .svc-card > .chips, .svc-card > .link-go { grid-column: 1 / -1; }
}

/* "נעים מאוד" */
.intro-txt .elementor-widget-container > p, .intro-txt > p { margin: 0; }
.intro-sig { align-self: center; width: auto; }
.intro-sig :is(b, strong) { display: block; font-size: 16px; line-height: 1.25; color: inherit; }
.intro-navy .intro-sig :is(b, strong) { color: #fff; }
.intro-sig small { display: block; font-size: 13.5px; }
.intro-sig .pav img { margin: 0; }

/* reviews */
.rv .rv-more { margin-top: 8px; }

/* contact: the social box (sketch: ul > li > a) */
.cx-light .cform .tex { display: none; }
.csoc .csoc-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.csoc .csoc-a { display: flex; align-items: center; gap: 12px; height: 54px; padding-inline: 8px 16px; border-radius: 18px; background: var(--light); font-size: 15.5px; font-weight: 500; transition: background-color .2s var(--ease), color .2s var(--ease); }
.csoc .csoc-a i, .csoc-tel i { width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.csoc .csoc-a i .sd-i, .csoc-tel i .sd-i { width: 18px; height: 18px; }
.csoc .csoc-a .o { width: 16px; height: 16px; margin-inline-start: auto; opacity: .45; }
@media (hover: hover) and (pointer: fine) { .csoc .csoc-a:hover { background: var(--navy); color: #fff; } .csoc .csoc-a:hover i { background: rgba(255, 255, 255, .14); } }
.cx-light .cwide.cx-navy .csoc .csoc-list { margin-top: auto; }
.csoc-tel i { background: var(--light); }
.csoc-tel small { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.2; }
.csoc-tel bdi { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.csoc-wa i { width: 42px; height: 42px; border-radius: 50%; background: var(--navy); color: var(--mint); display: grid; place-items: center; flex: none; }
.csoc-wa i .sd-i { width: 22px; height: 22px; }
.csoc-wa :is(b, strong) { display: flex; align-items: center; gap: 8px; font-size: 15.5px; line-height: 1.25; white-space: nowrap; }
.csoc-wa small { display: block; font-size: 13px; line-height: 1.35; color: rgba(0, 18, 43, .78); margin-top: 2px; }
/* the navy glass boxes: the sketch's dark tokens on light glass */
.cx-navy .csoc .csoc-a { background: rgba(255, 255, 255, .07); color: #fff; }
.cx-navy .csoc .csoc-a i, .cx-navy .csoc-tel i { background: rgba(255, 255, 255, .1); }
@media (hover: hover) and (pointer: fine) { .cx-navy .csoc .csoc-a:hover { background: #fff; color: var(--navy); } .cx-navy .csoc .csoc-a:hover i { background: var(--light); } }
@media (max-width: 820px) {
  .csoc .csoc-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .csoc .csoc-a { flex-direction: column; justify-content: center; height: 88px; padding: 10px 6px; gap: 6px; font-size: 13.5px; text-align: center; }
  .csoc .csoc-a .o { display: none; }
}

/* ---------- 5 · the contact form (Elementor Pro form styled as the sketch .form-wide) ---------- */
:is(.form-wide, .form-lead) .elementor-form { margin: 0; }
:is(.form-wide, .form-lead) .elementor-form-fields-wrapper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 14px; margin: 0 !important; }
:is(.form-wide, .form-lead) .elementor-form-fields-wrapper > .elementor-field-group { width: auto !important; max-width: none; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 7px; }
:is(.form-wide, .form-lead) .elementor-form-fields-wrapper.elementor-labels-above .elementor-field-group > *, :is(.form-wide, .form-lead) .elementor-form-fields-wrapper .elementor-field-group > * { flex: none; }
:is(.form-wide, .form-lead) .elementor-field-type-textarea, :is(.form-wide, .form-lead) .elementor-field-type-radio { grid-column: 1 / -1; }
:is(.form-wide, .form-lead) .elementor-field-type-acceptance { grid-column: 1 / 3; align-self: center; padding-top: 4px !important; }
:is(.form-wide, .form-lead) .elementor-field-type-submit { grid-column: 3; align-self: center; align-items: flex-end !important; padding-top: 4px !important; }
:is(.form-wide, .form-lead) .elementor-field-type-honeypot { display: none !important; }
:is(.form-wide, .form-lead) .elementor-field-label { margin: 0; padding: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink); }
:is(.form-wide, .form-lead) .elementor-field-group .elementor-field-textual {
  width: 100%; min-height: 0; border: 0; border-radius: 16px; background: var(--light); color: var(--ink);
  padding: 0 16px; height: 54px; font-family: inherit; font-size: 16px; line-height: 1.4;
  box-shadow: inset 0 0 0 1px rgba(0, 18, 43, .06); transition: box-shadow .2s var(--ease), background-color .2s var(--ease);
}
:is(.form-wide, .form-lead) .elementor-field-group textarea.elementor-field-textual { height: 118px; padding-block: 14px; resize: vertical; }
:is(.form-wide, .form-lead) .elementor-field-group .elementor-field-textual::placeholder { color: rgba(0, 18, 43, .5); }
:is(.form-wide, .form-lead) .elementor-field-group .elementor-field-textual:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 2px var(--navy), 0 0 0 5px var(--mint-tint); }
:is(.form-wide, .form-lead) .elementor-field-group input[type="tel"], :is(.form-wide, .form-lead) .elementor-field-group input[type="email"] { direction: ltr; text-align: right; }
/* topics (radio) as pills */
:is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-subgroup { display: flex; flex-wrap: wrap; gap: 8px; }
:is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-label { margin-bottom: 2px; }
:is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option { position: relative; display: inline-flex; margin: 0; padding: 0; }
:is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
:is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option label {
  display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 18px; margin: 0; border-radius: 999px; cursor: pointer;
  font-size: 15px; font-weight: 500; line-height: 1; color: var(--ink); background: var(--light); box-shadow: inset 0 0 0 1px rgba(0, 18, 43, .06);
  transition: background-color .2s var(--ease), box-shadow .2s var(--ease);
}
:is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option label::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: rgba(0, 18, 43, .2); transition: background-color .2s var(--ease); }
:is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option input:checked + label { background: var(--mint); color: var(--navy); box-shadow: none; font-weight: 600; }
:is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option input:checked + label::before { background: var(--navy); }
:is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option input:focus-visible + label { outline: 2.5px solid var(--navy); outline-offset: 2px; }
/* consent */
:is(.form-wide, .form-lead) .elementor-field-type-acceptance .elementor-field-subgroup { display: block; }
:is(.form-wide, .form-lead) .elementor-field-type-acceptance .elementor-field-option { display: flex; align-items: flex-start; gap: 11px; margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
:is(.form-wide, .form-lead) .elementor-field-type-acceptance input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; flex: none; border-radius: 7px; cursor: pointer;
  background: var(--light); box-shadow: inset 0 0 0 1.5px var(--line-2); display: grid; place-items: center; transition: background-color .2s var(--ease), box-shadow .2s var(--ease);
}
:is(.form-wide, .form-lead) .elementor-field-type-acceptance input[type="checkbox"]::after { content: ""; width: 11px; height: 6px; border: solid var(--mint); border-width: 0 0 2.4px 2.4px; transform: translateY(-1.5px) rotate(-45deg); opacity: 0; transition: opacity .15s var(--ease); }
:is(.form-wide, .form-lead) .elementor-field-type-acceptance input[type="checkbox"]:checked { background: var(--navy); box-shadow: none; }
:is(.form-wide, .form-lead) .elementor-field-type-acceptance input[type="checkbox"]:checked::after { opacity: 1; }
:is(.form-wide, .form-lead) .elementor-field-type-acceptance label { margin: 0; cursor: pointer; }
:is(.form-wide, .form-lead) .elementor-field-type-acceptance label a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* the submit = .btn.btn-mint (wide) */
:is(.form-wide, .form-lead) .elementor-field-type-submit .elementor-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: auto; min-width: 230px; height: 56px; padding: 0 26px;
  border: 0; border-radius: 999px; font-family: inherit; font-size: 16.5px; font-weight: 600; line-height: 1; cursor: pointer;
  background: var(--mint); color: var(--navy);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 2px rgba(0, 18, 43, .12), 0 10px 22px -12px rgba(0, 18, 43, .45);
  transition: transform .16s var(--ease), background-color .2s var(--ease), box-shadow .25s var(--ease);
}
:is(.form-wide, .form-lead) .elementor-field-type-submit .elementor-button-content-wrapper { display: contents; }
:is(.form-wide, .form-lead).go .elementor-field-type-submit .elementor-button-text { display: inline-flex; align-items: center; gap: 10px; }
:is(.form-wide, .form-lead) .elementor-field-type-submit .elementor-button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { :is(.form-wide, .form-lead) .elementor-field-type-submit .elementor-button:hover { background: color-mix(in srgb, var(--mint) 82%, #fff); } .form-wide.go .elementor-button:hover .elementor-button-text::after { transform: translateX(-4px); } }
:is(.form-wide, .form-lead) .elementor-message { margin-top: 14px; font-size: 15px; font-weight: 600; }
:is(.form-wide, .form-lead) .elementor-message.elementor-message-success { color: var(--mint); }
/* navy boxes (the home contact) */
.navy-sec :is(.form-wide, .form-lead) .elementor-field-group .elementor-field-textual { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.navy-sec :is(.form-wide, .form-lead) .elementor-field-group .elementor-field-textual::placeholder { color: rgba(255, 255, 255, .55); }
.navy-sec :is(.form-wide, .form-lead) .elementor-field-group .elementor-field-textual:focus { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 2px var(--mint), 0 0 0 5px rgba(57, 244, 204, .14); }
.navy-sec :is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option label { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: #fff; }
.navy-sec :is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option label::before { background: rgba(255, 255, 255, .3); }
.navy-sec :is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option input:checked + label { background: var(--mint); color: var(--navy); }
.navy-sec :is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option input:checked + label::before { background: var(--navy); }
.navy-sec :is(.form-wide, .form-lead) .elementor-field-type-acceptance .elementor-field-option { color: rgba(255, 255, 255, .78); }
.navy-sec :is(.form-wide, .form-lead) .elementor-field-type-acceptance input[type="checkbox"] { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.navy-sec :is(.form-wide, .form-lead) .elementor-field-type-acceptance input[type="checkbox"]::after { border-color: var(--navy); }
.navy-sec :is(.form-wide, .form-lead) .elementor-field-type-acceptance input[type="checkbox"]:checked { background: var(--mint); }
.navy-sec :is(.form-wide, .form-lead) .elementor-field-type-submit .elementor-button { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 2px rgba(0, 0, 0, .2), 0 12px 32px -12px rgba(57, 244, 204, .6); }
@media (max-width: 820px) {
  :is(.form-wide, .form-lead) .elementor-form-fields-wrapper { grid-template-columns: minmax(0, 1fr); }
  :is(.form-wide, .form-lead) .elementor-field-type-acceptance, :is(.form-wide, .form-lead) .elementor-field-type-submit { grid-column: 1 / -1; }
  :is(.form-wide, .form-lead) .elementor-field-type-submit { align-items: stretch !important; }
  :is(.form-wide, .form-lead) .elementor-field-type-submit .elementor-button { width: 100%; min-width: 0; }
}

/* ---------- 6 · footer (Theme Builder) ---------- */
.ftr-groups .elementor-icon-list-items { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; }
.ftr-groups .elementor-icon-list-items .elementor-icon-list-item { display: block; margin: 0; padding: 0; }
.ftr-groups .elementor-icon-list-items .elementor-icon-list-item > a { display: inline-block; padding: 5px 0; font-size: 14.5px; line-height: inherit; color: var(--on-navy-2); transition: color .2s var(--ease); }
.ftr-groups .elementor-icon-list-icon { display: none; }
.ftr-groups .elementor-icon-list-text { color: inherit; padding: 0; }
@media (hover: hover) and (pointer: fine) { .ftr-groups .elementor-icon-list-item > a:hover { color: #fff; } }
.ftr-brand > .elementor-widget-text-editor p, .ftr-brand > p { margin-top: 18px; color: var(--on-navy-2); font-size: 16px; max-width: 34ch; }
.ftr-contact > a { display: inline-flex; }
.ftr-badges .chip { display: inline-flex; align-items: center; gap: 6px; }
.ftr-badges .chip .elementor-heading-title { color: var(--mint); }
.ftr-legal .elementor-heading-title a { color: var(--on-navy-2); }
@media (hover: hover) and (pointer: fine) { .ftr-legal .elementor-heading-title a:hover { color: #fff; } }
.ftr-bottom > p, .ftr-bottom .elementor-widget-text-editor p { margin: 0; }
.wa-host { position: static; }

/* ---------- 7 · the short lead form ("רוצים גם?" panel, sketch .form = 2 columns) ---------- */
.elementor-widget.form { display: block; }   /* the sketch .form grid is the Elementor fields wrapper here, not the widget */
.form-lead .elementor-form-fields-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-lead .elementor-field-type-acceptance, .form-lead .elementor-field-type-submit { grid-column: 1 / -1; }
.form-lead .elementor-field-type-submit { align-items: stretch !important; }
.form-lead .elementor-field-type-submit .elementor-button { width: 100%; min-width: 0; height: 56px; }
.form-lead textarea.elementor-field-textual { height: 116px !important; }
@media (max-width: 820px) { .form-lead .elementor-form-fields-wrapper { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
/* the CTA panel on light pages = the sketch's light form card; on navy pages the dark tokens apply */
html.dk .form-card :is(.form-wide, .form-lead) .elementor-field-group .elementor-field-textual { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
html.dk .form-card :is(.form-wide, .form-lead) .elementor-field-group .elementor-field-textual::placeholder { color: rgba(255, 255, 255, .42); }
html.dk .form-card :is(.form-wide, .form-lead) .elementor-field-type-acceptance .elementor-field-option { color: var(--ink-2); }
html.dk .form-card :is(.form-wide, .form-lead) .elementor-field-type-acceptance input[type="checkbox"] { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
html.dk .form-card :is(.form-wide, .form-lead) .elementor-field-type-acceptance input[type="checkbox"]::after { border-color: var(--navy); }
html.dk .form-card :is(.form-wide, .form-lead) .elementor-field-type-acceptance input[type="checkbox"]:checked { background: var(--mint); }

/* ---------- 8 · shared inner-page pieces (phase 2) ---------- */
/* glass button (sketch .btn.btn-glass.glass-dark), e.g. "תצוגה מלאה" */
.sdb--glass .elementor-button { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .05) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 10px 18px -12px rgba(255, 255, 255, .25), 0 12px 30px -12px rgba(0, 0, 0, .45); }
@media (hover: hover) and (pointer: fine) { .sdb--glass .elementor-button:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(57, 244, 204, .4), 0 12px 30px -12px rgba(0, 0, 0, .5); } }
.ph .k-h1 .elementor-heading-title, .k-h1.elementor-heading-title { text-wrap: balance; }
.cta .cta-txt { min-width: 0; }
.cta .aur { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* ---------- 9 · Shimon's fix round 26/10 ---------- */
/* containers: no CSS transform transition (scroll-driven transforms - the pinned gallery, the card stack - must follow at once) */
.e-con.sdc { --e-con-transform-transition-duration: 0s; }
.fx.e-con, .fx .e-con, .fx-rail, .fx-track { transition: none !important; }
.fx-track, .fx-rail { will-change: transform; }

/* every device mockup: a BLACK bezel between the screen and the silver body (body / buttons stay silver) */
.mk-phone .mk-body { background: #0a0b0d; box-shadow: inset 0 0 0 .35cqw var(--mk-edge), inset 0 0 0 1.25cqw var(--mk-frame), var(--mk-shadow); }
.mk-laptop .mk-lid { background: #0a0b0d; box-shadow: inset 0 0 0 .16cqw var(--mk-edge), inset 0 0 0 .5cqw var(--mk-frame); }

/* hero: the website tiles are pre-rendered images (generator/render_tiles.js) */
.wt.wt-i { padding: 0; }
.wt-i.wt-sq { aspect-ratio: 1; }
.wt-i.wt-tall { aspect-ratio: .8; }
.wt-i img, .wt-c img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) {
  /* phones: the runway mirrored (tiles travel up toward the right), the headline a bit lower.
     Round 4b: smaller tiles - 6 columns, about 3¼ tiles across with the partial one on the RIGHT edge; the white fade
     under the buttons lower and much softer (a long eased mask, no visible line where the white stops). */
  .hx4 .hx4-plane { transform: rotateX(46deg) rotateZ(30deg); grid-template-columns: repeat(6, minmax(0, 1fr)); width: 175%; left: -42%; gap: 10px; }
  .hx4 .trk > * { margin-bottom: 10px; }
  .hx4 > .hx-txt { padding-top: 62px; }
  .hx4 .hx4-scene { margin-top: 26px; height: 380px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 9%, rgba(0, 0, 0, .06) 16%, rgba(0, 0, 0, .2) 24%, rgba(0, 0, 0, .42) 32%, rgba(0, 0, 0, .66) 40%, rgba(0, 0, 0, .86) 48%, #000 57%);
    mask-image: linear-gradient(180deg, transparent 0, transparent 9%, rgba(0, 0, 0, .06) 16%, rgba(0, 0, 0, .2) 24%, rgba(0, 0, 0, .42) 32%, rgba(0, 0, 0, .66) 40%, rgba(0, 0, 0, .86) 48%, #000 57%); }
}

/* "נעים מאוד": the marked phrase bold; phones: less air under the byline */
.intro-navy .intro-txt .mkw .w { font-weight: 700; }
@media (max-width: 820px) { .intro-navy { padding-bottom: 34px; } }

/* posters: the phone's shadow is no longer cut by the media box (the box reaches the bottom, the fade does the rest) */
.pst-web .pm { bottom: 0; -webkit-mask-image: linear-gradient(180deg, #000 44%, rgba(0, 0, 0, .55) 56%, transparent 72%); mask-image: linear-gradient(180deg, #000 44%, rgba(0, 0, 0, .55) 56%, transparent 72%); }
@media (max-width: 820px) {
  /* phones: shadows painted by the device body (box-shadow), no filter repaints while the rail scrolls */
  .pst .pm .mk-phone, .pst .pm .mk-browser { filter: none !important; }
  .pst .pm .mk-phone .mk-body { box-shadow: inset 0 0 0 .35cqw var(--mk-edge), inset 0 0 0 1.25cqw var(--mk-frame), 0 6cqw 8cqw -3cqw rgba(0, 0, 0, .45); }
  .fx-c { transform: translateZ(0); }
}

/* home contact: the big line centred, one marker over "עומד להתחיל!" */
.cx-light .cx-big { text-align: center; }
.cx-light .cx-big.elementor-widget { margin-inline: auto; }
.cx-light .cx-big .hl { padding: 0 .1em; }
.cx-light .cx-big .hl .wi { color: var(--navy); }
/* both boxes: the solid deep navy of the reviews panel / footer */
.cx-light .cwide.cx-navy .tile { background: var(--navy); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 34px 70px -34px rgba(0, 18, 43, .6); }
/* fields: white, navy text, grey placeholder */
.cx-navy :is(.form-wide, .form-lead) .elementor-field-group .elementor-field-textual { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.cx-navy :is(.form-wide, .form-lead) .elementor-field-group .elementor-field-textual::placeholder { color: rgba(0, 18, 43, .45); }
.cx-navy :is(.form-wide, .form-lead) .elementor-field-group .elementor-field-textual:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--mint), 0 0 0 5px rgba(57, 244, 204, .18); }
/* topics: subtle navy; the chosen one darker with a mint border, white text, mint dot */
.cx-navy .form-wide .elementor-field-type-radio .elementor-field-option label { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.cx-navy .form-wide .elementor-field-type-radio .elementor-field-option label::before { background: rgba(255, 255, 255, .35); }
.cx-navy .form-wide .elementor-field-type-radio .elementor-field-option input:checked + label { background: #000A1A; color: #fff; font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--mint); }
.cx-navy .form-wide .elementor-field-type-radio .elementor-field-option input:checked + label::before { background: var(--mint); }
/* "זמינים 24/6 בוואטסאפ": dark navy, mint border, white text, mint icon */
.cx-light .cwide.cx-navy .csoc-wa { background: #000A1A; color: #fff; box-shadow: inset 0 0 0 1.5px var(--mint), 0 12px 24px -14px rgba(0, 0, 0, .5); }
.cx-navy .csoc-wa i { background: rgba(57, 244, 204, .12); color: var(--mint); }
.cx-navy .csoc-wa small { color: rgba(255, 255, 255, .72); }
.cx-navy .csoc-wa .live, .cx-navy .csoc-wa .live::after { background: var(--mint); }

/* ---------- 10 · fix round 26/10 (2): first paint, reveals, CTA panels, page titles ---------- */
/* header: never animate into its first state */
html.sd-noanim .hdr-bar, html.sd-noanim .hdr .sd-logo > i, html.sd-noanim .hdr-nav a { transition: none !important; }

/* card reveals (data-pop): hidden from the first paint, then a calm ease-out with a short travel - no overshoot */
html.sd-js [data-pop]:not(.in) { opacity: 0; transform: translate3d(0, 22px, 0); }
html.sd-js [data-pop]:not(.sd-done) { transition: opacity .75s cubic-bezier(.22, .61, .36, 1) var(--d, 0ms), transform .75s cubic-bezier(.22, .61, .36, 1) var(--d, 0ms) !important; }
html.dk .pgrid > li.enter, .pgrid > li.enter { animation: sd-rise .55s cubic-bezier(.22, .61, .36, 1) both; animation-delay: var(--d, 0ms); }
@keyframes sd-rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
/* page titles: invisible until their letters / words are split, then they assemble (no flash of the plain title) */
html.sd-js :is(.k-h1, .w-h1) .elementor-heading-title:not(.sd-k) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.sd-js [data-pop]:not(.in) { opacity: 1; transform: none; }
  html.sd-js :is(.k-h1, .w-h1) .elementor-heading-title:not(.sd-k) { opacity: 1; }
}

/* "רוצים גם?" panels (all pages): the logo mark on every panel (desktop), the form box solid deep navy, white fields */
html.dk .panel-aurora .cta-mark { display: block; }
html.dk .panel-aurora .cta-mark .sd-mark { --logo-square: rgba(57, 244, 204, .16); --logo-arrow: rgba(255, 255, 255, .1); }
@media (max-width: 820px) { html.dk .panel-aurora .cta-mark { display: none; } }
html body .cta .form-card { background: #000A1A; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 60px -30px rgba(0, 0, 0, .65); }
html body .cta .form-card :is(.form-wide, .form-lead) .elementor-field-group .elementor-field-textual { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
html body .cta .form-card :is(.form-wide, .form-lead) .elementor-field-group .elementor-field-textual::placeholder { color: rgba(0, 18, 43, .45); }
html body .cta .form-card :is(.form-wide, .form-lead) .elementor-field-group .elementor-field-textual:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--mint), 0 0 0 5px rgba(57, 244, 204, .18); }
html body .cta .form-card .elementor-field-label { color: #fff; }
html body .cta .form-card .form-wide .elementor-field-type-radio .elementor-field-option label { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
html body .cta .form-card .form-wide .elementor-field-type-radio .elementor-field-option input:checked + label { background: #00122B; color: #fff; box-shadow: inset 0 0 0 1.5px var(--mint); }
html body .cta .form-card .form-wide .elementor-field-type-radio .elementor-field-option input:checked + label::before { background: var(--mint); }

/* inner-page titles: desktop / tablet ~35% smaller (Shimon 26/10); phones keep the sketch sizes. The home hero is not touched. */
@media (min-width: 821px) {
  html.dk .ph h1, html.dk .ph .k-h1 .elementor-heading-title, .ph h1 { font-size: clamp(48px, 5.85vw, 96px); }          /* was clamp(56px, 9vw, 148px): 1440 -> 130 -> 84px */
  html.dk .w-h1 { font-size: clamp(34px, 3.38vw, 54px); }                                                                 /* web work: 75 -> 49px */
  html.dk .bh-txt .w-h1 { font-size: clamp(30px, 2.86vw, 44px); }                                                         /* brand work: 63 -> 41px */
  html body .sv-grid .bh-txt h1.elementor-heading-title, html body .bh-txt h1.elementor-heading-title { font-size: clamp(34px, 3.5vw, 55px); }   /* service pages: 78 -> 50px */
  html body .post-tx h1.elementor-heading-title, html body .post-tx h1 { font-size: clamp(30px, 2.86vw, 43px); }           /* articles: 63 -> 41px */
  html body .p2-404 h1.elementor-heading-title { font-size: clamp(26px, 2.73vw, 38px) !important; }                        /* 404: 58 -> 38px */
}
/* inside the Elementor editor everything stays visible (re-rendered elements never get the reveal classes) */
.elementor-editor-active [data-pop], .elementor-editor-active [data-reveal] { opacity: 1 !important; transform: none !important; }
.elementor-editor-active :is(.k-h1, .w-h1) .elementor-heading-title { opacity: 1 !important; }

/* ---------- 11 · Shimon's fix round 26/10 (b) ---------- */
/* "עבודות נבחרות", phones: the end card ("48 פרויקטים בתיק העבודות") as tall as the poster cards */
@media (max-width: 820px) {
  .fx .fx-track { align-items: stretch; }
  .fx .fx-end { aspect-ratio: auto; height: auto; }
}

/* "מה אני עושה", phones: stacked cards (the reviews-page mechanic, sd-site.js svcStack): each card sticks under the header,
   the next one slides up over it, the covered ones scale down / darken a little */
@media (max-width: 820px) {
  .svc4.svc-stack { gap: 14px; }
  .svc4.svc-stack > * { position: sticky; z-index: 1; }
  .svc4.svc-stack > * > .svc-card { position: relative; transform-origin: 50% 0; will-change: transform; transition: none !important;
    box-shadow: 0 -16px 36px -22px rgba(0, 18, 43, .38), var(--sh-1); }
  .svc4.svc-stack > * > .svc-card::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none;
    background: rgba(0, 18, 43, var(--dim, 0)); opacity: 1; mix-blend-mode: normal; }
}

/* "להקפיץ את העסק שלך מעל כולם": one line, the last line of the statement, bold (home intro: the marked phrase;
   elsewhere sd-site.js liftPhrase wraps it in .sd-lift after a line break) */
.intro-navy .intro-txt .mkw { display: block; width: fit-content; margin-inline: auto; white-space: nowrap; }   /* (display:table drops the spaces) */
.sd-lift { white-space: nowrap; font-weight: 700; }
@media (max-width: 820px) {
  .intro-navy .intro-txt .mkw { font-size: min(1em, 5.5vw); }     /* 328px at 21.5px: fits 340-430px phones */
  .sd-lift { font-size: min(1em, 5.4vw); }
}

/* home contact + "רוצים גם?" forms: the chosen topic and the WhatsApp card in a LIGHTER, clearly blue navy (not black),
   mint border, white text. The form boxes stay the navy of the reviews section / footer (#00122B). */
.cx-navy .form-wide .elementor-field-type-radio .elementor-field-option input:checked + label,
html body .cta .form-card .form-wide .elementor-field-type-radio .elementor-field-option input:checked + label { background: #0F3A70; color: #fff; box-shadow: inset 0 0 0 1.5px var(--mint); }
.cx-light .cwide.cx-navy .csoc-wa { background: linear-gradient(165deg, #14477F 0%, #0D3466 100%); color: #fff; box-shadow: inset 0 0 0 1.5px var(--mint), 0 12px 24px -14px rgba(0, 0, 0, .45); }
.cx-navy .csoc-wa i { background: rgba(57, 244, 204, .16); }
.cx-navy .csoc-wa small { color: rgba(255, 255, 255, .8); }

/* "עבודות נבחרות", desktop: the pin is CSS sticky (sd-site.js sets --fx-run = the horizontal run). overflow:clip (not hidden)
   so the sticky child sticks to the viewport; no position:fixed toggle -> no layout shift at the pin start / end */
.fx.is-pin { overflow: clip !important; height: calc(max(100vh, 640px) + var(--fx-run, 0px)); }
.fx.is-pin .fx-pin { position: sticky; top: 0; }

/* phones: where the sketch lets a row of buttons grow (.btn { flex: 1 1 auto }) the Elementor button fills its grown widget
   (the work-page head showed two small centred pills instead of two full-width buttons) */
@media (max-width: 820px) {
  :is(.wh-acts, .bh-txt .acts, .svc-txt .acts, .t-intro .acts, .show-cap .acts, .cta-direct) .sdb .elementor-button { width: 100%; justify-content: center; }
}

/* work / brand pages, phones: the post's own <br> inside the description is dropped (one flowing paragraph, as in the
   sketch); generator/pages/work.py keeps a space before it */
@media (max-width: 820px) { .facts .tile p br, .bh-txt .desc p br { display: none; } }
/* "תאימות מלאה למובייל" (work pages, phones): the sketch's margins collapse (.sh 18px / rail 30px -> 30px); Elementor's flex
   containers do not collapse them, so the head drops its own margin there */
@media (max-width: 820px) { html.dk .mob-sec .sh.e-con, .mob-sec .sh.e-con { margin-bottom: 0; } }

/* hero runway (round 4c, the flicker): paused until every hero image is decoded (sd-site.js heroReady) */
.hx4.hx-wait .trk { animation-play-state: paused; }

/* ---------- 12 · Shimon's round 26/10 (d) ---------- */
/* BLUE GLASS - one definition, used by the floating WhatsApp button (phones) and the accessibility tab (OneTap) */
:root {
  --sd-glass-blue-bg: linear-gradient(160deg, rgba(23, 76, 138, .74) 0%, rgba(4, 30, 66, .82) 100%);
  --sd-glass-blue-blur: blur(14px) saturate(1.6);
  --sd-glass-blue-edge: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 0 0 1px rgba(255, 255, 255, .14);
  --sd-glass-blue-shadow: 0 5px 12px -5px rgba(0, 18, 43, .42);          /* small + soft: reaches 12px down, never past the viewport edge */
}
.sd-glass-blue { color: #fff; background: var(--sd-glass-blue-bg); -webkit-backdrop-filter: var(--sd-glass-blue-blur); backdrop-filter: var(--sd-glass-blue-blur); box-shadow: var(--sd-glass-blue-edge), var(--sd-glass-blue-shadow); }

/* floating WhatsApp: desktop pill = its circle navy blue with a WHITE glyph; phones = the round blue-glass button, white glyph */
@media (min-width: 821px) {
  html body .wa i { background: linear-gradient(160deg, #14477F 0%, #0D3466 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 4px 10px -4px rgba(0, 18, 43, .45); }
}
@media (max-width: 820px) {
  html body .wa.glass, html.dk body .wa.glass { color: #fff; background: var(--sd-glass-blue-bg); -webkit-backdrop-filter: var(--sd-glass-blue-blur); backdrop-filter: var(--sd-glass-blue-blur); box-shadow: var(--sd-glass-blue-edge), var(--sd-glass-blue-shadow); }
  html body .wa i { background: transparent; color: #fff; box-shadow: none; }
}

/* ACCESSIBILITY (OneTap): the trigger restyled as the Kassland / spa tab - glued to the LEFT edge, 45x45 at top 160px
   (tablet 150px), phones 34x34 at top 130px, rounded on the inner side, in the same blue glass, white icon. The panel keeps
   its own UI (accent = the site navy, onetap_settings.color). Under the header (100) and the menu sheet (300). */
html body .onetap-container-toggle .onetap-toggle {
  left: 0 !important; right: auto !important; top: 160px !important; bottom: auto !important; margin: 0 !important; z-index: 95 !important;
  width: 45px !important; height: 45px !important; padding: 0 !important; border: 0 !important; border-radius: 0 10px 10px 0 !important;
  display: grid !important; place-items: center; overflow: hidden;
  background: var(--sd-glass-blue-bg) !important; -webkit-backdrop-filter: var(--sd-glass-blue-blur); backdrop-filter: var(--sd-glass-blue-blur);
  box-shadow: var(--sd-glass-blue-edge), var(--sd-glass-blue-shadow) !important; transition: width .2s ease !important;
}
html body .onetap-container-toggle .onetap-toggle img, html body .onetap-container-toggle .onetap-toggle img.design-size1 {
  width: 27px !important; height: 27px !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; transform: none !important;
}
html body .onetap-container-toggle .onetap-toggle:focus-visible { outline: 2.5px solid var(--mint) !important; outline-offset: 2px; border-radius: 0 10px 10px 0 !important; }
@media (hover: hover) and (pointer: fine) { html body .onetap-container-toggle .onetap-toggle:hover { width: 50px !important; } }
@media (max-width: 1024px) { html body .onetap-container-toggle .onetap-toggle { top: 150px !important; } }
@media (max-width: 767px) {
  html body .onetap-container-toggle .onetap-toggle { top: 130px !important; width: 34px !important; height: 34px !important; border-radius: 0 8px 8px 0 !important; }
  html body .onetap-container-toggle .onetap-toggle img, html body .onetap-container-toggle .onetap-toggle img.design-size1 { width: 21px !important; height: 21px !important; }
}

/* "במה אפשר לעזור?" (every form): simple radios like the live site - a small round box + the label, no pill frame */
html body :is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-subgroup { display: flex; flex-wrap: wrap; gap: 12px 22px; }
html body :is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option { position: relative; display: inline-flex; align-items: center; margin: 0; padding: 0; }
html body :is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option label,
html body :is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option input:checked + label {
  display: inline-flex; align-items: center; gap: 9px; height: auto !important; padding: 0 !important; margin: 0; border-radius: 0 !important; cursor: pointer;
  background: none !important; box-shadow: none !important; font-size: 15.5px; font-weight: 500; line-height: 1.3; color: var(--ink); white-space: nowrap;
}
html body :is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option label::before {
  content: ""; flex: none; width: 17px; height: 17px; border-radius: 50%; background: transparent !important;
  box-shadow: inset 0 0 0 1.5px rgba(0, 18, 43, .4); transition: box-shadow .2s var(--ease), background-color .2s var(--ease);
}
html body :is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option input:checked + label { font-weight: 600; }
html body :is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option input:checked + label::before { background: radial-gradient(circle, var(--navy) 0 4.5px, transparent 5px) !important; box-shadow: inset 0 0 0 1.5px var(--navy); }
html body :is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option input:focus-visible + label { outline: 2px solid var(--mint); outline-offset: 4px; border-radius: 6px; }
/* on navy (home contact, contact page, "רוצים גם?") */
html body :is(.navy-sec, .cx-navy, .cta, .cx-page) :is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option label { color: #fff !important; }
html body :is(.navy-sec, .cx-navy, .cta, .cx-page) :is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option label::before { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
html body :is(.navy-sec, .cx-navy, .cta, .cx-page) :is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option input:checked + label { color: #fff !important; }
html body :is(.navy-sec, .cx-navy, .cta, .cx-page) :is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option input:checked + label::before { background: radial-gradient(circle, var(--mint) 0 4.5px, transparent 5px) !important; box-shadow: inset 0 0 0 1.5px var(--mint); }
@media (max-width: 820px) {
  /* phones: two compact rows. The 5 topics cannot make 3 + 2 in their own order at 360-430px ("מערכת או אפליקציה" is too
     long for the first row), so the two long ones form row 1 and בניית אתר · אתר מכירות · נושא אחר row 2 ("other" stays last) */
  /* 27/10: the topics are in Shimon's order (row 1: מערכות ואפליקציות · מיתוג וקריאייטיב, row 2: בניית אתר · קידום אתר ·
     נושא אחר) - a zero-height full-width flex item forces the break after the 2nd option */
  html body :is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-subgroup { gap: 0 10px; }
  html body :is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option { flex: 0 0 auto; margin-block: 5px; order: 3; }
  html body :is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-subgroup > .elementor-field-option:nth-child(-n + 2) { order: 1; }
  html body :is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-subgroup::after { content: ""; order: 2; flex: 0 0 100%; height: 0; }
  html body :is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option label,
  html body :is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option input:checked + label { font-size: 13.5px; gap: 6px; }
  html body :is(.form-wide, .form-lead) .elementor-field-type-radio .elementor-field-option label::before { width: 15px; height: 15px; }
}

/* home contact + contact page side box: the "זמינים 24/6 בוואטסאפ" row looks exactly like the social rows above it (same
   background, no border, nothing changes on hover); the social / phone / WhatsApp icons are WHITE */
html body :is(.cx-light .cwide.cx-navy, .cx-page, .cwide) .csoc .csoc-wa { background: rgba(255, 255, 255, .07); color: #fff; border-radius: 18px; box-shadow: none; padding: 8px 16px 8px 8px; margin-top: 0; transform: none; transition: none; }
html body :is(.cx-light .cwide.cx-navy, .cx-page, .cwide) .csoc .csoc-wa:hover, html body :is(.cx-light .cwide.cx-navy, .cx-page, .cwide) .csoc .csoc-wa:focus-visible { background: rgba(255, 255, 255, .07); color: #fff; box-shadow: none; transform: none; }
html body :is(.cx-light .cwide.cx-navy, .cx-page, .cwide) .csoc .csoc-wa i { width: 38px; height: 38px; background: rgba(255, 255, 255, .1); color: #fff; box-shadow: none; }
html body :is(.cx-light .cwide.cx-navy, .cx-page, .cwide) .csoc .csoc-wa i .sd-i { width: 18px; height: 18px; }
html body :is(.cx-light .cwide.cx-navy, .cx-page, .cwide) .csoc .csoc-wa small { color: rgba(255, 255, 255, .72); }
html body .csoc .csoc-wa .live, html body .csoc .csoc-wa .live::after { background: var(--mint); }
html body :is(.cx-light .cwide.cx-navy, .cx-page, .cwide) .csoc :is(.csoc-a, .csoc-tel) i { color: #fff; }
html.dk body .cx-page .csoc .csoc-a i, html.dk body .cx-page .csoc-tel i { color: #fff; }
html body .cx-light .cwide.cx-navy .csoc-tel, html body .cx-page .csoc-tel { margin-top: 0; margin-bottom: 0; }
html body .cx-light .cwide.cx-navy .csoc-wa.elementor-element, html body .cx-page .csoc-wa.elementor-element { margin-top: 0; }

/* footer: WhatsApp / phone / e-mail all in the same normal style (the phone was mint) */
html body .ftr-contact a:first-child i { background: rgba(255, 255, 255, .1); color: inherit; }
@media (hover: hover) and (pointer: fine) { html body .ftr-contact a:first-child:hover i { background: rgba(255, 255, 255, .18); } }
/* menu sheet: WhatsApp first and a touch stronger */
html body .sheet-contact a.is-wa { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(57, 244, 204, .55); }

/* "רוצים גם?" (every page): the form box = DARK GLASS - dark navy, some transparency, blur, a subtle light edge; white fields stay */
html body .cta .form-card { background: linear-gradient(170deg, rgba(0, 14, 34, .58) 0%, rgba(0, 10, 26, .66) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -30px rgba(0, 0, 0, .6); }

/* "המסע שלכם לעבר ההצלחה" / "עומד להתחיל!" - always these two lines (sd-site.js wraps line 1 in .cx-l1 + <br>) */
.cx-big .cx-l1, .cx-big .hl { white-space: nowrap; }
/* 27/10: phones - smaller, so the nowrap first line fits inside the page gutter. It was wider than its container (376 px in
   358 px at 390) and, being RTL, overflowed to the LEFT - hence "closer to the left edge". */
@media (max-width: 820px) { html body .cx-light .cx-big { font-size: min(40px, 7vw); max-width: 100%; } }

/* posters on phones: the desktop hover as a class (sd-site.js posterInView: the card entering the screen) - the phone pops
   up at once with a quick ease-out (~.45s); the arrow button keeps its idle look */
@media (max-width: 820px) {
  /* 27/10: a slower, softer rise (.85 s ease-out); the screen scrolls only after it (sd-site.js) */
  .pst-web .pm { transition: transform .85s cubic-bezier(.22, .61, .36, 1); }
  .pst .pm .mk-phone, .pst .pm .mk-browser, .pst .pm-cv .pm-front, .pst .pst-ghost { transition: transform .85s cubic-bezier(.22, .61, .36, 1); }
  .pst-web.is-h .pm { overflow: visible; -webkit-mask-image: none; mask-image: none; z-index: 4; }
  .pst.is-h .pm-ph .mk-phone { transform: translateY(-17%) rotate(-1deg); }
  .pst.is-h .pm-dv .mk-phone { transform: translateY(-9%) rotate(1deg) scale(1.03); }
  .pst.is-h .pm-dv .mk-browser { transform: rotate(-1deg) translateX(3%); }
  .pst.is-h .pm-cv .pm-front { transform: rotate(0) scale(1.03); }
  .pst.is-h .pst-ghost { transform: translateY(-3%); }
}

/* portfolio filter chips: sticky on desktop only - on phones they scroll away with the page like normal content */
@media (max-width: 820px) { body.sd-page-portfolio .filters { position: relative; top: auto; } }

/* floating WhatsApp: the shadow was large (0 12-14px 26-28px) on a button 14-22px from the viewport edge, so it ran past the
   edge and ended in a hard line. Now a small soft shadow that fits inside the offset (desktop 22px, phones 16px) */
html body .wa.glass, html.dk body .wa.glass, html body .navy-sec .wa.glass {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 1px rgba(0, 18, 43, .06), 0 5px 12px -5px rgba(0, 18, 43, .32); }
@media (hover: hover) and (pointer: fine) { html body .wa.glass:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 1px rgba(0, 18, 43, .06), 0 7px 14px -6px rgba(0, 18, 43, .36); } }
@media (max-width: 820px) {
  html body .wa, html body .wa.glass { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  html body .wa.glass, html.dk body .wa.glass, html body .navy-sec .wa.glass { box-shadow: var(--sd-glass-blue-edge), var(--sd-glass-blue-shadow); }
}
/* the accessibility tab touches the LEFT edge: its shadow falls only to the right / below, none on the edge side */
html body .onetap-container-toggle .onetap-toggle { box-shadow: var(--sd-glass-blue-edge), 6px 4px 12px -6px rgba(0, 18, 43, .4) !important; }

/* ---------- 13 · the H1 entrance flash (26/10) ----------
   Cause: the sketch's page-head fade (ph-in, .ph h1 / .wh h1) is a CSS animation, and an animation beats a normal declaration,
   so the PLAIN title faded in from the first paint; then the runtime split it into letters and GSAP started them from 0 ->
   "it's there, it goes, it comes back" (on a phone the deferred runtime is late, so the plain title was fully visible).
   Now: with JS the split titles never run ph-in; until they are split they stay hidden (from the first paint, html.sd-js is set
   by the inline head script); fallback: if the runtime has not split them after 2.6 s they fade in by CSS (and the runtime then
   splits them without animating them again). The word-fill texts (about, "נעים מאוד") start dim the same way. */
@keyframes sd-late-in { to { opacity: 1; } }
html.sd-js :is(.k-h1, .w-h1) .elementor-heading-title { animation: none !important; }
html.sd-js :is(.k-h1, .w-h1) .elementor-heading-title:not(.sd-k) { opacity: 0; animation: sd-late-in .5s ease 2.6s forwards !important; }
html.sd-js .fill:not(.sd-split) { opacity: .16; animation: sd-late-in .5s ease 2.6s forwards; }
@media (prefers-reduced-motion: reduce) {
  html.sd-js :is(.k-h1, .w-h1) .elementor-heading-title:not(.sd-k), html.sd-js .fill:not(.sd-split) { opacity: 1; animation: none !important; }
}
.elementor-editor-active .fill:not(.sd-split) { opacity: 1; animation: none; }

/* ---------- 15 · the logo colour rule (26/10) ----------
   LIGHT surface: the whole logo / mark navy (no mint). DARK navy surface: white + the mint square. CSS gives the right first
   paint for the known surfaces; sd-site.js logoSurfaces() detects the real surface of every other instance (cards, panels). */
.eyebrow { --eb-sq: var(--navy); --eb-ar: var(--navy); }
.panel-navy .eyebrow, [data-tone="dark"] .eyebrow, :is(html.dk, .navy-sec) .eyebrow, .ftr .eyebrow, .sheet .eyebrow { --eb-sq: var(--mint); --eb-ar: #fff; }
:is(html.dk, .navy-sec) .is-light .eyebrow, .panel-mint .eyebrow, html body .panel-mint .eyebrow { --eb-sq: var(--navy); --eb-ar: var(--navy); }
.hdr.on-dark .hdr-logo .sd-logo, html body .hdr.on-dark .hdr-logo .sd-logo { --logo-text: #fff; --logo-arrow: #fff; --logo-square: var(--mint); }
.hdr:not(.on-dark) .hdr-logo .sd-logo { --logo-text: var(--navy); --logo-arrow: var(--navy); --logo-square: var(--navy); }
/* the watermark mark of the mint "לקביעת שיחת ייעוץ" panels: navy, faint (it was white on mint) */
html body .panel-mint .cta-mark .sd-mark { --logo-square: rgba(0, 18, 43, .1); --logo-arrow: rgba(0, 18, 43, .08); }

/* ---------- 14 · "דוגמאות לאתרים ש…" inside old articles (templates 19055/19058/19061/19156 -> [sd_examples]) ---------- */
html body ul.sd-ex.sd-ex.sd-ex { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
html body ul.sd-ex.sd-ex.sd-ex > li { margin: 0; padding: 0; list-style: none; }
html body ul.sd-ex.sd-ex.sd-ex > li::before, html body ul.sd-ex.sd-ex.sd-ex > li::marker { content: none; display: none; }
.sd-ex-t { position: relative; display: block; aspect-ratio: 1; border-radius: 18px; overflow: hidden; isolation: isolate; text-decoration: none;
  background: var(--tint, #00122B); box-shadow: 0 1px 2px rgba(0, 18, 43, .06), 0 14px 28px -18px rgba(0, 18, 43, .45); }
.sd-ex-t img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; transition: transform .6s var(--ease); }
.sd-ex-t::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 12, 30, .55); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; }
.sd-ex-n { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 14px; text-align: center; color: #fff;
  font-size: clamp(19px, 1.7vw, 25px); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .sd-ex-t:hover::after { opacity: 1; }
  .sd-ex-t:hover .sd-ex-n { opacity: 1; transform: none; }
  .sd-ex-t:hover img { transform: scale(1.04); }
}
.sd-ex-t:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
.sd-ex-t:focus-visible::after { opacity: 1; }
.sd-ex-t:focus-visible .sd-ex-n { opacity: 1; transform: none; }
@media (max-width: 820px), (hover: none) {
  html body ul.sd-ex.sd-ex.sd-ex { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* phones: the name is shown statically, on a soft dark fade at the bottom */
  .sd-ex-t::after { opacity: 1; background: linear-gradient(180deg, rgba(0, 12, 30, 0) 42%, rgba(0, 12, 30, .74) 100%); }
  .sd-ex-n { opacity: 1; transform: none; place-items: end center; padding: 10px 10px 12px; font-size: 15px; }
}
/* the heading + the button of those templates, in the site's style */
.sd-examples .elementor-widget-heading .elementor-heading-title { font-family: inherit; font-size: clamp(24px, 2.3vw, 32px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--navy); }
.sd-examples .elementor-widget-button .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 26px;
  border-radius: 999px; background: var(--navy); color: #fff; font-family: inherit; font-size: 15.5px; font-weight: 600; text-shadow: none; box-shadow: 0 12px 24px -14px rgba(0, 18, 43, .55); }
.sd-examples .elementor-widget-button .elementor-button .elementor-button-text { color: #fff; }
@media (hover: hover) and (pointer: fine) { .sd-examples .elementor-widget-button .elementor-button:hover { background: var(--mint); color: var(--navy); } .sd-examples .elementor-widget-button .elementor-button:hover .elementor-button-text { color: var(--navy); } }
/* the dark-glass form box on the MINT CTA panel (articles): almost opaque navy - a see-through box over mint turned teal */
html body .panel-mint.cta .form-card, html body .panel-mint .form-card { background: linear-gradient(170deg, rgba(0, 18, 43, .94) 0%, rgba(0, 10, 26, .96) 100%); }

/* contact page (1614) form = the home form: white fields, navy text, grey placeholder */
html.dk body .cx-page .form-wide .elementor-field-group .elementor-field-textual { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
html.dk body .cx-page .form-wide .elementor-field-group .elementor-field-textual::placeholder { color: rgba(0, 18, 43, .45); }
html.dk body .cx-page .form-wide .elementor-field-group .elementor-field-textual:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--mint), 0 0 0 5px rgba(57, 244, 204, .18); }

/* 27/10: PHONES - the page titles are visible from the first paint (no hidden state, no letter animation, no wait);
   desktop keeps the letter entrance */
@media (max-width: 820px) {
  html.sd-js :is(.k-h1, .w-h1) .elementor-heading-title:not(.sd-k), html.sd-js :is(.k-h1, .w-h1) .elementor-heading-title { opacity: 1; animation: none !important; }
}

/* ---------- 16 · services restructure 27/10: the SEO icon (search + rising line), the same mask-icon system as sd-icons.css */
:root { --sd-ic-seo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4-4M7.6 12.6l2.1-2.1 1.7 1.7 2.9-2.9M12.6 9.3h1.7V11'/%3E%3C/svg%3E"); }
.ie-seo, .ib-seo { --ic-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4-4M7.6 12.6l2.1-2.1 1.7 1.7 2.9-2.9M12.6 9.3h1.7V11'/%3E%3C/svg%3E"); }
/* the SEO visual [sd_seo_vis]: a search bar, results (the first marked in mint) and a rising line - drawn, nothing scrolls */
.seo-vis { position: relative; display: block; width: 100%; max-width: 520px; margin-inline: auto; aspect-ratio: 5 / 4; container-type: inline-size; }
.seo-vis > * { position: absolute; display: block; }
.seo-bar { top: 4%; inset-inline: 6%; height: 13%; border-radius: 999px; background: #fff; display: flex !important; align-items: center; gap: 3cqw; padding: 0 4cqw;
  box-shadow: 0 2cqw 5cqw -2cqw rgba(0, 0, 0, .45); color: var(--navy); }
.seo-g { font-weight: 800; font-size: 5cqw; color: #4285F4; line-height: 1; }
.seo-q { flex: 1; font-size: 3.6cqw; font-weight: 600; white-space: nowrap; overflow: hidden; }
.seo-bar .sd-i { width: 4.6cqw; height: 4.6cqw; color: var(--navy); }
.seo-list { top: 22%; inset-inline: 6% 16%; display: flex !important; flex-direction: column; gap: 2.4cqw; }
.seo-res { position: relative; display: grid; grid-template-columns: 5cqw 1fr; grid-template-rows: auto auto auto auto; column-gap: 2.4cqw; row-gap: 1.3cqw; padding: 2.6cqw 3cqw;
  border-radius: 3cqw; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.seo-res i { display: block; border-radius: 99px; background: rgba(255, 255, 255, .22); height: 1.4cqw; }
.seo-res .seo-fav { grid-row: 1 / 3; width: 5cqw; height: 5cqw; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.seo-res .seo-url { width: 34%; height: 1.1cqw; background: rgba(255, 255, 255, .3); }
.seo-res .seo-l1 { width: var(--w1); height: 2cqw; background: rgba(255, 255, 255, .55); }
.seo-res .seo-l2 { grid-column: 1 / -1; width: var(--w2); }
.seo-res .seo-l3 { grid-column: 1 / -1; width: var(--w3); }
.seo-res.is-top { background: rgba(57, 244, 204, .1); box-shadow: inset 0 0 0 1.5px var(--mint), 0 2cqw 6cqw -2cqw rgba(57, 244, 204, .45); }
.seo-res.is-top .seo-fav { background: var(--mint); }
.seo-res.is-top .seo-l1 { background: var(--mint); }
.seo-pos { position: absolute; inset-inline-start: -2.6cqw; top: -2.4cqw; width: 6cqw; height: 6cqw; border-radius: 50%; display: grid; place-items: center;
  background: var(--mint); color: var(--navy); font-size: 3.2cqw; font-weight: 800; box-shadow: 0 1cqw 3cqw -1cqw rgba(0, 0, 0, .5); }
.seo-chart { bottom: 3%; inset-inline-end: 3%; width: 46%; aspect-ratio: 2 / 1; border-radius: 3cqw; padding: 2.5cqw; background: rgba(4, 25, 58, .92);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 3cqw 6cqw -3cqw rgba(0, 0, 0, .6); }
.seo-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.seo-dot { position: absolute; top: 14%; inset-inline-end: 4%; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 1.4cqw rgba(57, 244, 204, .22); }
html:not(.dk) .seo-vis .seo-res, .is-light .seo-vis .seo-res { background: rgba(0, 18, 43, .05); box-shadow: inset 0 0 0 1px rgba(0, 18, 43, .08); }
html:not(.dk) .seo-vis .seo-res i, .is-light .seo-vis .seo-res i { background: rgba(0, 18, 43, .14); }
.svc-vis-in .seo-vis { max-width: 460px; }
.seo-stage { display: grid; place-items: center; padding: clamp(18px, 3vw, 40px); }
@media (max-width: 820px) { .svc-vis-in .seo-vis { max-width: 300px; } }

/* the SEO page */
.seo-cols { display: flex; gap: clamp(24px, 4vw, 64px); align-items: flex-start; }
.seo-cols > * { flex: 1 1 0; min-width: 0; }
@media (max-width: 980px) { .seo-cols.e-con { flex-direction: column; } .seo-cols > * { width: 100%; } }
.seo-prose p + p, .seo-res-txt .lead-txt p + p { margin-top: 14px; }
.seo-prose p, .seo-res-txt p { font-size: 17px; line-height: 1.75; }
.seo-dl { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.seo-dl li { position: relative; padding: 12px 16px 12px 14px; padding-inline-start: 42px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(0, 18, 43, .05), 0 10px 22px -18px rgba(0, 18, 43, .35); font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.seo-dl li::before { content: ""; position: absolute; inset-inline-start: 14px; top: 16px; width: 16px; height: 16px; border-radius: 5px; background: var(--mint);
  -webkit-mask: var(--sd-ic-check) center / 13px no-repeat; mask: var(--sd-ic-check) center / 13px no-repeat; background-color: var(--navy); }
.seo-dl li b { color: var(--ink); }
.seo-report { position: relative; display: block; width: min(100%, 380px); margin-inline: auto; aspect-ratio: 3 / 4; container-type: inline-size; }
.seo-doc { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4cqw; padding: 8cqw 8cqw; border-radius: 5cqw; background: #fff; color: var(--navy);
  box-shadow: 0 1px 2px rgba(0, 18, 43, .08), 0 6cqw 12cqw -6cqw rgba(0, 18, 43, .45); transform: rotate(-3deg); z-index: 1; }
.seo-doc-back { transform: rotate(4deg) translate(-4cqw, 3cqw); background: var(--navy); z-index: 0; box-shadow: 0 6cqw 12cqw -6cqw rgba(0, 18, 43, .5); }
.seo-doc-top { display: flex; align-items: center; gap: 2.4cqw; font-weight: 700; font-size: 4cqw; }
.seo-doc-top .sd-mark { height: 6cqw; }
.seo-doc-k { font-size: 3.4cqw; font-weight: 600; color: rgba(0, 18, 43, .55); direction: ltr; text-align: right; }
.seo-doc-t { font-size: 8cqw; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.seo-doc-lines, .seo-doc-rows { display: grid; gap: 2.4cqw; }
.seo-doc-lines i { display: block; height: 2.2cqw; border-radius: 99px; background: rgba(0, 18, 43, .1); }
.seo-doc-lines i:nth-child(2) { width: 82%; } .seo-doc-lines i:nth-child(4) { width: 64%; }
.seo-doc-lines i.hl { background: var(--mint); width: 74%; }
.seo-doc-bars { display: flex; align-items: flex-end; gap: 2.4cqw; height: 20cqw; padding-top: 2cqw; border-bottom: 1px solid rgba(0, 18, 43, .12); }
.seo-doc-bars i { flex: 1; height: var(--h); border-radius: 1.6cqw 1.6cqw 0 0; background: rgba(0, 18, 43, .16); }
.seo-doc-bars i:last-child { background: var(--mint); }
.seo-doc-rows i { display: flex; justify-content: space-between; gap: 3cqw; padding: 2cqw 2.4cqw; border-radius: 2cqw; background: rgba(0, 18, 43, .05); }
.seo-doc-rows i.hl { background: rgba(57, 244, 204, .28); }
.seo-doc-rows b { display: block; height: 1.8cqw; width: 40%; border-radius: 99px; background: rgba(0, 18, 43, .22); }
.seo-doc-rows b + b { width: 16%; }
.seo-inc { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .seo-inc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .seo-inc { grid-template-columns: 1fr; } }
.seo-inc-c, .seo-why-c, .pkg { padding: clamp(22px, 2.4vw, 30px); gap: 12px; }
.seo-inc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.seo-inc-n { font-size: 14px; font-weight: 700; color: var(--ink-3); letter-spacing: .04em; }
.seo-inc-c h3, .seo-why-c h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.seo-inc-c p, .seo-inc-c li, .seo-why-c p { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.seo-inc-c p + p, .seo-inc-c ul + p { margin-top: 8px; }
.seo-inc-c .checks { margin: 6px 0 0; }
.pkgs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 980px; margin-inline: auto; }
@media (max-width: 820px) { .pkgs { grid-template-columns: 1fr; } }
.pkg-top { display: flex; align-items: baseline; gap: 10px; }
.pkg-k { font-size: 14px; font-weight: 600; color: var(--ink-3); }
.pkg h3 { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.02em; }
.pkg-sub { font-size: 16px; color: var(--ink-2); margin: 0; }
.pkg-plus { font-weight: 700; margin: 6px 0 0; }
.pkg .checks { margin: 8px 0 14px; }
.pkg .sdb { margin-top: auto; align-self: flex-start; }
html body .pkg.pkg-hl { background: linear-gradient(165deg, #0B2B55 0%, #04193A 100%); box-shadow: inset 0 0 0 1.5px var(--mint), 0 30px 60px -30px rgba(0, 0, 0, .6); color: #fff; }
.pkg.pkg-hl :is(h3, .pkg-plus, li) { color: #fff; }
.pkg.pkg-hl :is(.pkg-sub, .pkg-k) { color: rgba(255, 255, 255, .72); }
.seo-not-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .seo-not-list { grid-template-columns: 1fr; } }
.seo-not { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.seo-not p { font-size: 15.5px; line-height: 1.65; color: rgba(255, 255, 255, .78); }
.seo-not p b { display: block; color: #fff; font-size: 17px; margin-bottom: 4px; }
.seo-x { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #fff; }
.seo-x .sd-i { width: 18px; height: 18px; }
.seo-why { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .seo-why { grid-template-columns: 1fr; } }
.seo-kws { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.seo-kw .elementor-heading-title { display: inline-flex; padding: 8px 14px; border-radius: 999px; background: rgba(57, 244, 204, .12); color: var(--mint); font-size: 15px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(57, 244, 204, .35); }
.seo-note .elementor-heading-title { font-size: 13.5px; color: var(--ink-3); margin-top: 10px; }
/* FAQ: the Elementor accordion in the site style */
.sd-faq .elementor-accordion { display: grid; gap: 10px; max-width: 900px; margin: 0 auto; }
.sd-faq .elementor-accordion-item { border: 0 !important; border-radius: 20px; overflow: hidden; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
html:not(.dk) .sd-faq .elementor-accordion-item { background: #fff; box-shadow: 0 1px 2px rgba(0, 18, 43, .05), 0 12px 26px -20px rgba(0, 18, 43, .4); }
.sd-faq .elementor-tab-title { display: flex; align-items: center; gap: 12px; padding: 20px 22px !important; border: 0 !important; cursor: pointer; }
.sd-faq .elementor-tab-title a, .sd-faq .elementor-accordion-title { color: inherit !important; font-family: inherit; font-size: 18px; font-weight: 700; text-decoration: none; }
.sd-faq .elementor-accordion-icon { color: var(--mint) !important; }
.sd-faq .elementor-accordion-icon svg { fill: var(--mint); }
.sd-faq .elementor-tab-content { padding: 0 22px 20px !important; border: 0 !important; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
/* the websites page: online stores */
.store-inc { padding: clamp(20px, 2.4vw, 28px); margin-bottom: 22px; }
.store-inc .checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 22px; margin: 0; }
@media (max-width: 820px) { .store-inc .checks { grid-template-columns: 1fr 1fr; } }
.store-reads { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
.store-reads-k .elementor-heading-title { font-size: 15px; font-weight: 700; color: var(--ink-2); margin-inline-end: 4px; }
/* Stor'it: the two previous designs (Elementor video widgets, click-to-play image overlay) */
.vid-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 1100px; margin-inline: auto; }
@media (max-width: 820px) { .vid-grid { grid-template-columns: 1fr; gap: 26px; } }
.vid-i { gap: 12px; }
.sd-vid .elementor-wrapper, .sd-vid .elementor-custom-embed-image-overlay { border-radius: 22px; overflow: hidden; }
.sd-vid { border-radius: 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 24px 48px -26px rgba(0, 0, 0, .7); }
.sd-vid .elementor-custom-embed-play i, .sd-vid .elementor-custom-embed-play svg { color: #fff; fill: #fff; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .45)); }
.vid-cap .elementor-heading-title { text-align: center; font-size: 16px; font-weight: 700; }

/* SEO page fine-tuning */
@media (min-width: 981px) { .seo-way .seo-col-h { flex: 0 0 34%; } }
html body :is(.seo-inc-c, .pkg) .checks { display: grid; grid-template-columns: 1fr; gap: 8px; }
/* the "רוצים גם?" forms with topics (SEO page): the same two rows as the other forms, at every width (the box is narrow) */
html body .cta .form-lead .elementor-field-type-radio .elementor-field-subgroup { gap: 0 10px; }
html body .cta .form-lead .elementor-field-type-radio .elementor-field-option { flex: 0 0 auto; margin-block: 5px; order: 3; }
html body .cta .form-lead .elementor-field-type-radio .elementor-field-subgroup > .elementor-field-option:nth-child(-n + 2) { order: 1; }
html body .cta .form-lead .elementor-field-type-radio .elementor-field-subgroup::after { content: ""; order: 2; flex: 0 0 100%; height: 0; }
html body .cta .form-lead .elementor-field-type-radio .elementor-field-option label { font-size: 14px; gap: 7px; }
/* Stor'it videos: each video widget fills its column (it was sized to its content) */
html body .vid-grid > .vid-i { align-items: stretch; width: 100%; }
html body .vid-i > .elementor-widget-video { width: 100%; max-width: none; }
html body .vid-i .elementor-wrapper { width: 100%; aspect-ratio: 16 / 9; }
/* "מה אני לא עושה": as many columns as items */
html body .seo-not-list { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
html body .vid-grid { width: 100%; align-self: center; }

/* ==========================================================================
   17. Full-screen viewer, PREVIEW-ONLY sites (02/11, sd_preview_url): the live site in an iframe over the screenshots
   (sd-site.js liveFrames). The iframe is laid out at 1440 / 390 css px and scaled to the window / the phone screen.
   ========================================================================== */
.mkv-win { position: relative; }
.mkv-live { position: absolute; z-index: 3; overflow: hidden; direction: ltr; background: #fff; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.mkv-live.on { opacity: 1; pointer-events: auto; }
.mkv-win > .mkv-live { inset: 44px 0 0 0; }
.mkv-phone .mk-screen > .mkv-live { top: 12.4cqw; left: 0; right: 0; bottom: 0; background: var(--mk-page, #fff); }
.mkv-if { position: absolute; top: 0; left: 0; border: 0; display: block; transform-origin: 0 0; background: #fff; }

/* ==========================================================================
   18. Brand / graphic poster cards (Shimon 02/11): the cover as a full-width 1:1 square at the top of the 3:4 card (uncropped,
   edge to edge), the caption (type · year, name, tags) on the brand colour below it (render.php sd_poster: .pst-sq; text colour
   from sd_brand_ink via .pst-lt). Hover = the card's tilt + shadow only, the image never moves. Website posters unchanged.
   ========================================================================== */
.pst-cov { background: linear-gradient(180deg, var(--c) 60%, var(--c2) 100%); }
.pst-cov .pst-sq { position: absolute; z-index: 0; top: 0; inset-inline: 0; aspect-ratio: 1; display: block; overflow: hidden; }
.pst-cov .pst-sq img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.pst-cov .pst-cap { top: 100cqw; bottom: 0; justify-content: center; gap: .9cqw; padding: 2.2cqw 7cqw 2.2cqw 19cqw; }
.pst-cov .pst-n { font-size: max(15px, 6cqw); line-height: 1.16; padding-bottom: .06em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pst-cov .pst-k { font-size: max(11px, 3.4cqw); }
.pst-cov .pst-tags { flex-wrap: nowrap; overflow: hidden; margin-top: .3cqw; gap: 1.4cqw; }
.pst-cov .pst-tags i { font-size: max(10.5px, 3.1cqw); padding: 1.4cqw 2.4cqw; }
.pst-cov .pst-go { bottom: calc((33.334cqw - max(32px, 10cqw)) / 2); }
.pst-cov.is-h .pst-sq img, .pst-cov:hover .pst-sq img { transform: none; }

/* 19. Stor'it "העיצובים הקודמים" (03/11): the YouTube frame of B8VGfC5GZUc is a square video inside its 16:9 image (black side
   bars, content x 280-999 of 1280) -> zoomed to 177.8% so the frame fills edge to edge (the iMac stays in the middle) */
.sd-vid-zoom .elementor-custom-embed-image-overlay { background-size: 178% auto !important; background-position: center 46% !important; }
.sd-vid .elementor-custom-embed-image-overlay { background-size: cover; background-position: center; }

/* ==========================================================================
   20. Contact forms, home + contact page (Shimon 03/11): no heading inside the form box, the labels of the text fields are
   INSIDE the fields (placeholders; the <label> stays for screen readers, visually hidden), so the 3-field row sits closer to
   the message; the topic chips, the consent and the button are unchanged. The home headline above is much smaller. The
   contact page's side box is laid out as on home (logo on top, socials + 24/6 + phone at the bottom, the box = the form's height).
   ========================================================================== */
html body .cform .form-wide .elementor-field-group:is(.elementor-field-type-text, .elementor-field-type-tel, .elementor-field-type-email, .elementor-field-type-textarea) > .elementor-field-label {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
html body .cform .form-wide .elementor-field-group .elementor-field-textual::placeholder { opacity: 1; }
html body .cx-light .cx-big { font-size: clamp(28px, 3.4vw, 54px); line-height: 1.08; margin-bottom: clamp(22px, 2.6vw, 40px); }
@media (max-width: 820px) { html body .cx-light .cx-big { font-size: min(24px, 6vw); } }
html body .cx-page .cwide .csoc .csoc-list { margin-top: auto; }

/* 21. Rails you can grab with the mouse (03/11, sd-site.js dragRail): reviews + "אתרים שבניתי"; touch stays native */
@media (hover: hover) and (pointer: fine) {
  .rail.can-drag { cursor: grab; }
  .rail.can-drag.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
  .rail.can-drag.is-dragging * { cursor: grabbing !important; }
  .rail.can-drag img { -webkit-user-drag: none; user-select: none; }
}