.elementor-kit-6{--e-global-color-primary:#FE6F5E;--e-global-color-secondary:#FF7F50;--e-global-color-text:#3E2723;--e-global-color-accent:#ED5B2E;--e-global-color-cream:#FFFDF5;--e-global-color-creamlt:#FFFCEB;--e-global-color-peach:#FFF5F2;--e-global-color-bordersoft:#FFE6DF;--e-global-color-bordercream:#FFFDD0;--e-global-color-yellow:#FFCA32;--e-global-color-yellowsoft:#FFF1A1;--e-global-color-white:#FFFFFF;--e-global-color-inputbg:#F8FAFC;--e-global-color-inputborder:#F1F5F9;--e-global-color-placeholder:#94A3B8;--e-global-color-muted:#334155;--e-global-color-whatsapp:#25D366;--e-global-typography-primary-font-family:"Polin";--e-global-typography-primary-font-size:72px;--e-global-typography-primary-font-weight:500;--e-global-typography-primary-line-height:72px;--e-global-typography-secondary-font-family:"Polin";--e-global-typography-secondary-font-size:24px;--e-global-typography-secondary-font-weight:500;--e-global-typography-secondary-line-height:32px;--e-global-typography-text-font-family:"Polin";--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:300;--e-global-typography-text-line-height:29.2px;--e-global-typography-accent-font-family:"OHYaelLeibushor";--e-global-typography-accent-font-size:110px;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-line-height:60px;--e-global-typography-h2-font-family:"Polin";--e-global-typography-h2-font-size:60px;--e-global-typography-h2-font-weight:500;--e-global-typography-h2-line-height:60px;--e-global-typography-h3-font-family:"Polin";--e-global-typography-h3-font-size:30px;--e-global-typography-h3-font-weight:500;--e-global-typography-h3-line-height:36px;--e-global-typography-bodylg-font-family:"Polin";--e-global-typography-bodylg-font-size:20px;--e-global-typography-bodylg-font-weight:500;--e-global-typography-bodylg-line-height:28px;--e-global-typography-bodysm-font-family:"Polin";--e-global-typography-bodysm-font-size:16px;--e-global-typography-bodysm-font-weight:300;--e-global-typography-bodysm-line-height:24px;--e-global-typography-label-font-family:"Polin";--e-global-typography-label-font-size:16px;--e-global-typography-label-font-weight:500;--e-global-typography-label-line-height:20px;--e-global-typography-navlink-font-family:"Polin";--e-global-typography-navlink-font-size:18px;--e-global-typography-navlink-font-weight:500;--e-global-typography-navlink-line-height:28px;--e-global-typography-small-font-family:"Polin";--e-global-typography-small-font-size:14px;--e-global-typography-small-font-weight:300;--e-global-typography-small-line-height:20px;--e-global-typography-accentsm-font-family:"OHYaelLeibushor";--e-global-typography-accentsm-font-size:70px;--e-global-typography-accentsm-font-weight:400;--e-global-typography-accentsm-line-height:40px;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1300px;}.e-con{--container-max-width:1300px;}.elementor-widget:not(:last-child){margin-block-end:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --text-h1:clamp(34px, calc(24.78px + 2.46vw), 72px); --color-coral:#FE6F5E; --font-heading:Polin; --color-orange:#FF7F50; --color-coral-dark:#ED5B2E; --color-ink:#3E2723; --color-ink-soft:#6B4F49; --color-muted:#334155; --color-cream:#FFFDF5; --color-cream-light:#FFFCEB; --color-peach:#FFF5F2; --color-white:#FFFFFF; --color-border:#FFE6DF; --color-border-cream:#FFFDD0; --color-rule:#F3DED8; --color-yellow:#FFCA32; --color-yellow-soft:#FFF1A1; --color-input-bg:#F8FAFC; --color-input-border:#F1F5F9; --color-placeholder:#94A3B8; --color-whatsapp:#25D366; --font-body:Polin; --font-hand:OHYaelLeibushor; --space-4:4px; --space-8:8px; --space-12:12px; --space-16:16px; --space-24:24px; --space-32:32px; --space-48:48px; --space-64:64px; --space-96:96px; --space-128:128px; --space-section:clamp(48px, 5vw, 112px); --space-gutter:clamp(20px, 4vw, 48px); --size-content:1300px; --radius-sm:8px; --radius-card:20px; --radius-media:24px; --radius-pill:9999px; --text-h2:clamp(30px, calc(22.72px + 1.94vw), 60px); --text-h3:clamp(22px, calc(20.06px + 0.52vw), 30px); --text-h4:clamp(19px, calc(17.79px + 0.32vw), 24px); --text-lg:clamp(17px, calc(16.27px + 0.19vw), 20px); --text-body:clamp(16px, calc(15.51px + 0.13vw), 18px); --text-sm:clamp(15px, calc(14.76px + 0.06vw), 16px); --text-xs:clamp(13px, calc(12.76px + 0.06vw), 14px); --text-hand-lg:clamp(56px, calc(42.89px + 3.5vw), 110px); --text-hand-sm:clamp(40px, calc(32.72px + 1.94vw), 70px); --space-20:20px; --space-40:40px; --color-border-btn:#FFD0C3; --text-eyebrow:clamp(22px, calc(19.57px + 0.65vw), 32px); --text-chip:clamp(40px, calc(39.03px + 0.26vw), 44px); --radius-lg:48px; --space-80:80px; --space-section-lg:clamp(64px, 6.67vw, 128px); --color-ink-900:#171717; --color-ink-700:#404040; --color-peach-deep:#FFF2F0; --color-border-slate:#E2E8F0; --pad-104:clamp(48px, 5.42vw, 104px); --pad-112:clamp(56px, 5.83vw, 112px); --pad-165:clamp(72px, 8.59vw, 165px); --pad-138:clamp(64px, 7.19vw, 138px); --pad-127:clamp(56px, 6.61vw, 127px); }
/* Start custom CSS *//* ==== self-hosted faces, declared here so CSS classes can use them even on
       pages where no Elementor widget control references the family ==== */
@font-face{font-family:"OHYaelLeibushor";font-style:normal;font-weight:400;font-display:swap;
  src:url("https://dafna.digidev.co.il/wp-content/uploads/2026/08/OHYaelLeibushor2.0-Regular.woff2") format("woff2"),
      url("https://dafna.digidev.co.il/wp-content/uploads/2026/08/OHYaelLeibushor2.0-Regular.woff") format("woff");}
@font-face{font-family:"Polin";font-style:normal;font-weight:300;font-display:swap;
  src:url("https://dafna.digidev.co.il/wp-content/uploads/2026/08/Polin-Light.woff2") format("woff2"),
      url("https://dafna.digidev.co.il/wp-content/uploads/2026/08/Polin-Light.woff") format("woff");}
@font-face{font-family:"Polin";font-style:normal;font-weight:400;font-display:swap;
  src:url("https://dafna.digidev.co.il/wp-content/uploads/2026/08/Polin-Regular.woff2") format("woff2"),
      url("https://dafna.digidev.co.il/wp-content/uploads/2026/08/Polin-Regular.woff") format("woff");}
@font-face{font-family:"Polin";font-style:normal;font-weight:500;font-display:swap;
  src:url("https://dafna.digidev.co.il/wp-content/uploads/2026/08/Polin-Medium.woff2") format("woff2"),
      url("https://dafna.digidev.co.il/wp-content/uploads/2026/08/Polin-Medium.woff") format("woff");}
/* ============================================================
   DAFNA MONSHERI - DESIGN SYSTEM LAYER
   Phase 1. Do not hand-edit per widget; extend here.
   ============================================================ */

:root{
  /* ---- brand ---- */
  --dm-coral:        #FE6F5E;
  --dm-coral-dk:     #ED5B2E;
  --dm-accent:       #FF7F50;
  --dm-ink:          #3E2723;
  --dm-muted:        #334155;
  --dm-cream:        #FFFDF5;
  --dm-cream-lt:     #FFFCEB;
  --dm-peach:        #FFF5F2;
  --dm-border:       #FFE6DF;
  --dm-border-cream: #FFFDD0;
  --dm-yellow:       #FFCA32;
  --dm-yellow-soft:  #FFF1A1;
  --dm-whatsapp:     #25D366;

  /* ---- form ---- */
  --dm-input-bg:     rgba(248,250,252,.5);
  --dm-input-border: #F1F5F9;
  --dm-placeholder:  #94A3B8;

  /* ---- layout ---- */
  --dm-content:      1300px;
  --dm-gutter:       310px;

  /* ---- shadows (measured from Figma) ---- */
  --dm-sh-card:      0 1px 2px rgba(0,0,0,.05);
  --dm-sh-glow:      0 10px 40px -10px rgba(255,127,80,.10);
  --dm-sh-glow-md:   0 20px 50px -10px rgba(255,127,80,.25);
  --dm-sh-glow-lg:   0 20px 50px -10px rgba(255,127,80,.40);
  --dm-sh-btn:       4px 6px 7px rgba(0,0,0,.13);
  --dm-sh-btn-sm:    0 0 20px rgba(255,127,80,.20);
  --dm-sh-form:      0 20px 60px rgba(255,127,80,.08);

  /* ---- motion ---- */
  --dm-ease:         cubic-bezier(.22,.61,.36,1);
  --dm-dur:          .28s;
}

/* ============================================================
   ORGANIC ASYMMETRIC RADIUS
   Signature of this design. Ratio TL:TR:BR:BL = R : 2R : 2.125R : 1.625R
   Apply the class to the Elementor element's Advanced > CSS Classes.
   ============================================================ */
.dm-blob      { border-radius: calc(var(--dm-r) * 1) calc(var(--dm-r) * 2) calc(var(--dm-r) * 2.125) calc(var(--dm-r) * 1.625) !important; }
.dm-blob-56   { --dm-r: 22.4px; }
.dm-blob-64   { --dm-r: 25.6px; }
.dm-blob-80   { --dm-r: 32px;   }
.dm-blob-96   { --dm-r: 38.4px; }
.dm-blob-112  { --dm-r: 44.8px; }
.dm-blob-400  { --dm-r: 160px;  }
.dm-blob-500  { --dm-r: 200px;  }
.dm-blob-600  { --dm-r: 240px;  }
.dm-blob-800  { --dm-r: 320px;  }

/* ============================================================
   GLASS SURFACES
   ============================================================ */
.dm-glass        { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.dm-glass-header { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.dm-glass-soft   { backdrop-filter: blur(4px);  -webkit-backdrop-filter: blur(4px);  }

/* ============================================================
   RAINBOW RIBBON  (1920x16 divider above footer / testimonials)
   ============================================================ */
.dm-ribbon{
  height:16px; width:100%;
  background:linear-gradient(90deg,#FF866A 0%,#FFE16B 50%,#FF7F50 100%);
}

/* ============================================================
   INTERACTION STATES
   None were authored in Figma. Defined once, here, so the whole
   site behaves consistently.
   ============================================================ */

/* -- buttons -- */
.elementor-button{
  transition: transform var(--dm-dur) var(--dm-ease),
              box-shadow var(--dm-dur) var(--dm-ease),
              background-color var(--dm-dur) var(--dm-ease);
}
.elementor-button:hover{ transform: translateY(-2px); box-shadow: var(--dm-sh-glow-md); }
.elementor-button:active{ transform: translateY(0); }

/* -- cards (Figma "Rectangle 18 / Variant2" = coral border) -- */
.dm-card{
  transition: transform var(--dm-dur) var(--dm-ease),
              box-shadow var(--dm-dur) var(--dm-ease),
              border-color var(--dm-dur) var(--dm-ease);
}
.dm-card:hover{
  transform: translateY(-4px);
  border-color: var(--dm-coral) !important;
  box-shadow: var(--dm-sh-glow-md);
}

/* -- article rows (Figma "Article Row 1 / Variant2") -- */
.dm-article-row{ transition: border-color var(--dm-dur) var(--dm-ease), box-shadow var(--dm-dur) var(--dm-ease); }
.dm-article-row:hover{ border-color: var(--dm-coral) !important; border-width:2px !important; box-shadow: var(--dm-sh-glow); }
.dm-article-row:hover img{ filter: saturate(1.05); }

/* -- icons: SVGs are rewritten to currentColor so these inherit -- */
.dm-icon svg{ transition: color var(--dm-dur) var(--dm-ease), transform var(--dm-dur) var(--dm-ease); }
.dm-icon:hover svg{ transform: scale(1.06); }

/* ============================================================
   ACCESSIBILITY
   No focus states exist in the design. These are additive and
   must not be removed. Coral fails AA on white (2.9:1), so the
   focus ring uses the darker coral (#ED5B2E, 4.1:1).
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.elementor-button:focus-visible,
[tabindex]:focus-visible{
  outline: 3px solid var(--dm-coral-dk) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* minimum touch target on small screens */
@media (max-width:767px){
  .elementor-button,
  .dm-nav a,
  .dm-social a{ min-height:44px; min-width:44px; }
}

/* ============================================================
   FORM FIELDS  (matches Figma: bg #F8FAFC@50%, 2px #F1F5F9, r20/24)
   ============================================================ */
.elementor-field-group .elementor-field{
  background: var(--dm-input-bg) !important;
  border: 2px solid var(--dm-input-border) !important;
  border-radius: 20px !important;
  color: var(--dm-ink) !important;
  transition: border-color var(--dm-dur) var(--dm-ease), box-shadow var(--dm-dur) var(--dm-ease);
}
.elementor-field-group .elementor-field:focus{
  border-color: var(--dm-accent) !important;
  box-shadow: 0 0 0 4px rgba(255,127,80,.12) !important;
}
::placeholder{ color: var(--dm-placeholder) !important; opacity:1 !important; }

/* validation states (undesigned - defined here) */
.elementor-field-group.elementor-error .elementor-field{ border-color:#C03E32 !important; }
.elementor-message.elementor-message-danger{ color:#C03E32; }
.elementor-message.elementor-message-success{ color:#1F7A3D; }

/* ============================================================
   RTL SAFETY
   Classic Elementor emits physical padding in places. Logical
   properties keep the right edge anchored in Hebrew.
   ============================================================ */
.elementor-widget-text-editor,
.elementor-widget-heading{ text-align: start; }

/* ============================================================
   LEGACY - kept from the previous kit CSS
   ============================================================ */
.snap-to-screen img{ max-width:unset; position:relative; }
/* ==== handwritten accent inside a heading (OHYaelLeibushor) ==== */
.dm-accent{
  font-family:"OHYaelLeibushor", cursive;
  font-weight:400; font-size:70px; line-height:40px;
  color:var(--dm-coral); display:inline-block;
}
.dm-accent-lg{ font-size:110px; line-height:60px; }
.dm-accent-dk{ color:var(--dm-coral-dk); }
.dm-accent-ac{ color:var(--dm-accent); }
@media (max-width:1024px){
  .dm-accent{ font-size:52px; line-height:34px; }
  .dm-accent-lg{ font-size:76px; line-height:46px; }
}
@media (max-width:767px){
  .dm-accent{ font-size:40px; line-height:28px; }
  .dm-accent-lg{ font-size:54px; line-height:36px; }
}

/* ==== buttons: every label in this design is a single line ==== */
.elementor-button .elementor-button-text{ white-space:nowrap; }
.elementor-button{ flex-shrink:0; }
@media (max-width:480px){
  .elementor-button .elementor-button-text{ white-space:normal; }
}
/* the 128px organic badge used on thank-you / 404 / process steps */
.dm-badge-128{ flex:0 0 auto; }

/* ============================================================
   STICKY HEADER
   Base state and the scrolled state. Only background and shadow
   animate - never height, which jitters on iOS and causes CLS.
   ============================================================ */
.dm-header{
  transition: background-color .26s cubic-bezier(.32,.72,0,1),
              box-shadow      .26s cubic-bezier(.32,.72,0,1),
              border-color    .26s cubic-bezier(.32,.72,0,1);
  will-change: background-color, box-shadow;
}
.dm-header.elementor-sticky--effects{
  background-color: rgba(255,253,245,.96) !important;
  box-shadow: 0 4px 16px rgba(62,39,35,.08) !important;
  border-bottom-color: rgba(255,230,223,.9) !important;
}
/* the logo settles very slightly on scroll - motion without reflow */
.dm-header .dm-logo img{ transition: transform .26s cubic-bezier(.32,.72,0,1); }
.dm-header.elementor-sticky--effects .dm-logo img{ transform: scale(.94); }

/* ============================================================
   MOBILE / TABLET NAV - the "curtain" that drops from the header
   ============================================================ */
.dm-nav .elementor-nav-menu--dropdown{
  background-color: #FFFDF5 !important;
  border-bottom: 1px solid var(--dm-border);
  border-end-start-radius: 26px;
  border-end-end-radius: 34px;
  box-shadow: 0 12px 32px rgba(62,39,35,.10);
  padding: 8px 16px 24px !important;
  backdrop-filter: blur(12px);
}
.dm-nav .elementor-nav-menu--dropdown a.elementor-item{
  border-radius: 9999px;
  margin-block-end: 4px;
  transition: background-color .2s var(--dm-ease), color .2s var(--dm-ease);
}
.dm-nav .elementor-nav-menu--dropdown a.elementor-item:hover,
.dm-nav .elementor-nav-menu--dropdown a.elementor-item.highlighted{
  background-color: rgba(254,111,94,.06);
}
/* active page reads as a filled pill, not an underline - an underline
   is meaningless in a stacked list */
.dm-nav .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active{
  background-color: rgba(254,111,94,.10);
  color: var(--dm-coral-dk) !important;
}

/* --- the toggle: 44px target, brand colour, gentle morph --- */
.dm-nav .elementor-menu-toggle{
  width:44px; height:44px;
  border-radius:9999px;
  background: transparent !important;
  color: var(--dm-ink) !important;
  transition: background-color .2s var(--dm-ease);
}
.dm-nav .elementor-menu-toggle:hover{ background: rgba(254,111,94,.08) !important; }
.dm-nav .elementor-menu-toggle i{ transition: transform .3s cubic-bezier(.32,.72,0,1); }
.dm-nav .elementor-menu-toggle.elementor-active i{ transform: rotate(90deg); }

/* the header must sit above the curtain's shadow */
.dm-header{ z-index: 99; }

@media (max-width:1024px){
  .dm-nav .elementor-nav-menu--dropdown a.elementor-item{
    min-height:56px; display:flex; align-items:center;
    padding-inline:16px !important;
  }
}


/* ============================================================
   HAMBURGER - brand-drawn. Elementor renders the toggle as inline
   SVGs (e_font_icon_svg), not an icon font, so the open-SVG is
   repurposed as the middle bar and the toggle's pseudo-elements
   draw the outer two. Three 20x2 rounded bars, morphing to an X.
   ============================================================ */
.dm-nav .elementor-menu-toggle{
  position:relative;
  width:44px !important; height:44px !important;
  display:flex !important; align-items:center; justify-content:center;
  border-radius:9999px; border:0 !important;
  background:transparent !important; padding:0 !important;
  transition:background-color .2s var(--dm-ease);
}
.dm-nav .elementor-menu-toggle:hover{ background:rgba(254,111,94,.08) !important; }
.dm-nav .elementor-menu-toggle:focus-visible{
  outline:3px solid var(--dm-coral-dk) !important; outline-offset:2px;
}
/* the close glyph is never shown - the open one morphs instead */
.dm-nav .elementor-menu-toggle .elementor-menu-toggle__icon--close{ display:none !important; }

/* middle bar = the open SVG, with its paths hidden */
.dm-nav .elementor-menu-toggle .elementor-menu-toggle__icon--open{
  width:20px !important; height:2px !important;
  border-radius:9999px;
  background-color:var(--dm-ink);
  fill:transparent !important;
  transition:background-color .18s linear;
}
/* outer bars */
.dm-nav .elementor-menu-toggle::before,
.dm-nav .elementor-menu-toggle::after{
  content:''; position:absolute;
  inset-inline-start:12px;
  width:20px; height:2px;
  border-radius:9999px;
  background-color:var(--dm-ink);
  transition:transform .3s cubic-bezier(.32,.72,0,1);
}
.dm-nav .elementor-menu-toggle::before{ top:14px; }
.dm-nav .elementor-menu-toggle::after{  top:28px; }

/* open state */
.dm-nav .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--open{
  background-color:transparent;
}
.dm-nav .elementor-menu-toggle.elementor-active::before{
  transform:translateY(7px) rotate(45deg);
}
.dm-nav .elementor-menu-toggle.elementor-active::after{
  transform:translateY(-7px) rotate(-45deg);
}
@media (prefers-reduced-motion:reduce){
  .dm-nav .elementor-menu-toggle::before,
  .dm-nav .elementor-menu-toggle::after,
  .dm-nav .elementor-menu-toggle .elementor-menu-toggle__icon--open{ transition:none !important; }
}

/* ============================================================
   MOBILE ACTION BAR
   The header CTA is hidden below 768; conversion moves to a
   thumb-reachable bar that reveals after the hero has been read.
   ============================================================ */
.dm-mobile-bar{
  position:fixed !important;
  inset-inline:0; inset-block-end:0;
  z-index:80;
  padding-block-end:calc(10px + env(safe-area-inset-bottom)) !important;
  transform:translateY(110%);
  transition:transform .32s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.dm-mobile-bar.dm-bar-in{ transform:translateY(0); }
.dm-mobile-bar .dm-bar-primary{ flex:1 1 auto; min-width:0; }
.dm-mobile-bar .dm-bar-primary .elementor-button{
  width:100%; min-height:48px;
  display:flex; align-items:center; justify-content:center;
}
.dm-mobile-bar .dm-bar-primary .elementor-button:active{ transform:scale(.98); }
.dm-mobile-bar .dm-bar-wa{ flex:0 0 48px; }
.dm-mobile-bar .dm-bar-wa .elementor-icon{
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
}
/* the fixed bar must not sit on top of the last section's content */
@media (max-width:767px){ body{ padding-block-end:78px; } }
@media (prefers-reduced-motion:reduce){
  .dm-mobile-bar{ transition:none; transform:translateY(0); }
}

/* ============================================================
   FLEX-ROW CHILD SIZING
   Elementor gives every nested container width:100%, which forces
   a wrap inside any row. Rows that must stay side by side get this.
   ============================================================ */
.dm-row-tight{ flex-wrap:nowrap !important; }
.dm-row-tight > .e-con{ width:auto !important; }
.dm-row-tight > .e-con.dm-grow{ flex:1 1 auto !important; min-width:0; }

/* ============================================================
   FIXES
   1. The toggle rule above used display:flex !important, which
      beat Elementor's own display:none on desktop and leaked the
      hamburger onto wide screens. Scope it to the breakpoint.
   2. Search field styling - the widget's own controls did not
      take, so the field is styled here to match Figma
      (448x62, white, 2px #FFD5CC, r20).
   ============================================================ */
@media (min-width:1025px){
  .dm-nav .elementor-menu-toggle{ display:none !important; }
}
@media (max-width:1024px){
  .dm-nav .elementor-menu-toggle{ display:flex !important; }
}

.dm-search .elementor-search-form__container{
  background:#FFFFFF !important;
  border:2px solid #FFD5CC !important;
  border-radius:20px !important;
  min-height:62px !important;
  overflow:hidden;
  transition:border-color .2s var(--dm-ease), box-shadow .2s var(--dm-ease);
}
.dm-search .elementor-search-form__container:focus-within{
  border-color:var(--dm-accent) !important;
  box-shadow:0 0 0 4px rgba(255,127,80,.12);
}
.dm-search input[type="search"]{
  background:transparent !important;
  color:var(--dm-ink) !important;
  font-family:"Polin",sans-serif; font-weight:300; font-size:18px;
  padding-inline:20px !important;
}
.dm-search input[type="search"]::placeholder{ color:#9CA3AF !important; opacity:1; }
.dm-search button[type="submit"]{
  background:transparent !important;
  color:var(--dm-accent) !important;
  padding-inline:18px !important;
}

/* ============================================================
   ORGANIC ICON TILES
   Elementor's stacked-icon `shape` control forces border-radius:50%
   and ignores a square shape, so the signature asymmetric radius is
   applied here instead. Ratio R : 2R : 2.125R : 1.625R.
   ============================================================ */
.dm-tile-64 .elementor-icon{
  width:64px !important; height:64px !important;
  border-radius:25.6px 51.2px 54.4px 41.6px !important;
  display:flex; align-items:center; justify-content:center;
}
.dm-tile-56 .elementor-icon{
  width:56px !important; height:56px !important;
  border-radius:22.4px 44.8px 47.6px 36.4px !important;
  display:flex; align-items:center; justify-content:center;
}
.dm-tile-48 .elementor-icon{
  width:48px !important; height:48px !important;
  border-radius:19.2px 38.4px 40.8px 31.2px !important;
  display:flex; align-items:center; justify-content:center;
}
.dm-tile-112 .elementor-icon{
  width:112px !important; height:112px !important;
  border-radius:44.8px 89.6px 95.2px 72.8px !important;
  display:flex; align-items:center; justify-content:center;
}
.dm-social .elementor-icon{ border:2px solid var(--dm-border) !important; }

/* ============================================================
   FORM CHECKBOX / ACCEPTANCE
   Figma: 24x24, white, 2px #FFB09C, r6, coral check.
   ============================================================ */
.elementor-field-type-acceptance input[type="checkbox"],
.elementor-field-subgroup input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:24px !important; height:24px !important;
  flex:0 0 24px;
  background:#FFFFFF;
  border:2px solid #FFB09C !important;
  border-radius:6px !important;
  cursor:pointer; position:relative;
  transition:background-color .18s var(--dm-ease), border-color .18s var(--dm-ease);
  margin-inline-end:10px;
}
.elementor-field-type-acceptance input[type="checkbox"]:hover{ border-color:var(--dm-accent) !important; }
.elementor-field-type-acceptance input[type="checkbox"]:checked{
  background:var(--dm-coral); border-color:var(--dm-coral) !important;
}
.elementor-field-type-acceptance input[type="checkbox"]:checked::after{
  content:''; position:absolute; inset-block-start:3px; inset-inline-start:7px;
  width:5px; height:10px;
  border:solid #FFFFFF; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.elementor-field-type-acceptance .elementor-field-option{
  display:flex; align-items:flex-start; gap:0;
  background:rgba(255,253,245,.5);
  border:1px solid #FFFCEB;
  border-radius:20px;
  padding:15px 20px;
}
.elementor-field-type-acceptance label{
  font-family:"Polin",sans-serif; font-weight:500; font-size:16px;
  line-height:24px; color:var(--dm-ink); cursor:pointer;
}

/* Elementor's CSS-classes control silently drops class names containing
   digits, so the tile sizes use word suffixes. */
.dm-tile-xs .elementor-icon{ width:48px !important;  height:48px !important;
  border-radius:19.2px 38.4px 40.8px 31.2px !important; display:flex; align-items:center; justify-content:center; }
.dm-tile-sm .elementor-icon{ width:56px !important;  height:56px !important;
  border-radius:22.4px 44.8px 47.6px 36.4px !important; display:flex; align-items:center; justify-content:center; }
.dm-tile-md .elementor-icon{ width:64px !important;  height:64px !important;
  border-radius:25.6px 51.2px 54.4px 41.6px !important; display:flex; align-items:center; justify-content:center; }
.dm-tile-lg .elementor-icon{ width:112px !important; height:112px !important;
  border-radius:44.8px 89.6px 95.2px 72.8px !important; display:flex; align-items:center; justify-content:center; }
.dm-blob-xs{ border-radius:22.4px 44.8px 47.6px 36.4px !important; }
.dm-blob-sm{ border-radius:25.6px 51.2px 54.4px 41.6px !important; }
.dm-blob-md{ border-radius:44.8px 89.6px 95.2px 72.8px !important; }
.dm-blob-lg{ border-radius:200px 400px 425px 325px !important; }

/* ============================================================
   SERVICE CARD
   The 112px badge floats over the card's top edge; both carried
   z-index 2 so the later card won the paint order and clipped it.
   ============================================================ */
.dm-service-card{ position:relative; }
.dm-service-card .dm-badge{ z-index:3 !important; position:relative; }
.dm-service-card > .dm-card{ z-index:1 !important; position:relative; }
.dm-service-card > .dm-card:hover{ z-index:2 !important; }

/* the display accent has a line-height far below its font-size by design,
   so it must never be clipped by an ancestor */
.dm-accent{ overflow:visible; vertical-align:baseline; }
.dm-hero h1, .dm-hero h2{ overflow:visible; }

/* ============================================================
   FLEX-ROW CHILD SIZING v2
   A boxed container inserts an .e-con-inner between itself and
   its children, so every helper must address both depths.
   Elementor also gives nested containers width:100% + flex:1 0 auto,
   which cannot shrink - hence the explicit width:auto + min-width:0.
   ============================================================ */
.dm-row-tight,
.dm-row-tight > .e-con-inner{ flex-wrap:nowrap !important; }

.dm-row-tight > .dm-grow,
.dm-row-tight > .e-con-inner > .dm-grow{
  flex:1 1 auto !important;
  width:auto !important;
  min-width:0 !important;
}
/* plain (unflagged) children in a tight row size to their content */
.dm-row-tight > .e-con:not(.dm-grow):not([style*="width"]),
.dm-row-tight > .e-con-inner > .e-con:not(.dm-grow):not([style*="width"]){
  flex-shrink:0;
}

/* stacking utilities - Elementor's own flex_direction_tablet/_mobile
   controls are unreliable when written straight into _elementor_data */
@media (max-width:1024px){
  .dm-stack-tablet, .dm-stack-tablet > .e-con-inner{
    flex-direction:column !important; flex-wrap:wrap !important;
  }
  .dm-stack-tablet-rev, .dm-stack-tablet-rev > .e-con-inner{
    flex-direction:column-reverse !important; flex-wrap:wrap !important;
  }
  .dm-stack-tablet > .e-con, .dm-stack-tablet > .e-con-inner > .e-con,
  .dm-stack-tablet-rev > .e-con, .dm-stack-tablet-rev > .e-con-inner > .e-con{
    width:100% !important;
  }
}
@media (max-width:767px){
  .dm-stack-mobile, .dm-stack-mobile > .e-con-inner{
    flex-direction:column !important; flex-wrap:wrap !important;
  }
  .dm-stack-mobile > .e-con, .dm-stack-mobile > .e-con-inner > .e-con{
    width:100% !important;
  }
}

/* ============================================================
   ARTICLE BODY
   Styles everything the Post Content widget can emit, so the
   client writes a normal WordPress post and it comes out right.
   Figma: body Polin 300/16 lh33.4, in-article h2 500/28 lh36.4,
   blockquote 300/20 lh27.6.
   ============================================================ */
.dm-article-body{ color:var(--dm-ink); }
.dm-article-body p{
  font-family:"Polin",sans-serif; font-weight:300;
  font-size:16px; line-height:33.4px;
  margin-block-end:20px;
}
.dm-article-body h2{
  font-family:"Polin",sans-serif; font-weight:500;
  font-size:28px; line-height:36.4px; color:var(--dm-ink);
  margin-block:40px 16px;
}
.dm-article-body h3{
  font-family:"Polin",sans-serif; font-weight:500;
  font-size:22px; line-height:30px; color:var(--dm-ink);
  margin-block:32px 12px;
}
.dm-article-body ul,
.dm-article-body ol{
  font-family:"Polin",sans-serif; font-weight:300;
  font-size:16px; line-height:30.2px;
  padding-inline-start:0; padding-inline-end:24px;
  margin-block-end:24px;
}
.dm-article-body li{ margin-block-end:8px; }
.dm-article-body ul li::marker{ color:var(--dm-accent); }
.dm-article-body ol li::marker{ color:var(--dm-coral-dk); font-weight:500; }
.dm-article-body blockquote{
  font-family:"Polin",sans-serif; font-weight:300;
  font-size:20px; line-height:27.6px; color:var(--dm-ink);
  background:var(--dm-cream);
  border-inline-start:4px solid var(--dm-coral);
  border-radius:20px;
  margin:32px 0; padding:24px 28px;
}
.dm-article-body blockquote p:last-child{ margin-block-end:0; }
.dm-article-body strong{ font-weight:500; color:var(--dm-ink); }
.dm-article-body a{
  color:var(--dm-coral-dk); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
  transition:color .2s var(--dm-ease);
}
.dm-article-body a:hover{ color:var(--dm-coral); }
.dm-article-body img{ border-radius:24px; margin-block:24px; }
.dm-article-body > *:first-child{ margin-block-start:0; }

/* the subtitle under the H1 */
.dm-article-sub p{ margin:0; }


/* ============================================================
   ARTICLE CARD (vertical) - used in the sidebar and the
   three-across strip. Replaces the earlier hack that tried to
   squeeze the wide Article Row into those slots.
   ============================================================ */
.dm-article-card{ height:100%; }
.dm-article-card .dm-card-img img{
  width:100%; height:192px; object-fit:cover; display:block;
}
.dm-article-card .dm-card-excerpt p{ margin:0; }
.dm-article-card .dm-card-excerpt{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.dm-more-grid .elementor-grid{ align-items:stretch; }

/* sidebar related list: tighter, image shorter, no excerpt */
.dm-related-grid .dm-article-card .dm-card-img img{ height:120px; }
.dm-related-grid .dm-article-card .dm-card-excerpt{ display:none; }
.dm-related-grid .dm-article-card [class*="elementor-widget-container"]{ }
.dm-related-grid .dm-article-card .e-con:last-child{ padding:16px !important; }
.dm-related-grid .dm-article-card h3{ font-size:16px !important; line-height:23px !important; }

/* the sticky "ask" card must stop at the bottom of its column */
.dm-ask-card.elementor-sticky--active{ max-width:384px; }

/* ============================================================
   STACKING ORDER
   Elementor's sticky helper assigns its own z-index, which was
   letting the sidebar "ask" card paint over the sticky header.
   The header owns the top layer; anything else sticky sits under it.
   ============================================================ */
.dm-header{ z-index:999 !important; }
.dm-mobile-bar{ z-index:998 !important; }
.dm-ask-card,
.dm-ask-card.elementor-sticky--active,
.dm-ask-card.elementor-sticky--effects{ z-index:5 !important; }
/* any future sticky element inside page content stays below the header */
.elementor-location-single .elementor-sticky--active,
.elementor-location-archive .elementor-sticky--active{ z-index:5 !important; }

/* ============================================================
   CHECKBOX TICK
   Pseudo-elements do not render on <input> (it is a replaced
   element), so the earlier :checked::after tick never appeared.
   The mark is a background-image instead.
   ============================================================ */
.elementor-field-type-acceptance input[type="checkbox"]:checked,
.elementor-field-subgroup input[type="checkbox"]:checked{
  background-color:var(--dm-coral) !important;
  border-color:var(--dm-coral) !important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6.4'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:15px 15px !important;
}
.elementor-field-type-acceptance input[type="checkbox"]:focus-visible{
  outline:3px solid var(--dm-coral-dk) !important; outline-offset:2px;
}
/* the earlier tick rule is now inert; neutralise it explicitly */
.elementor-field-type-acceptance input[type="checkbox"]:checked::after{ content:none !important; }

/* The generic field-background rule must not claim checkboxes/radios. */
.elementor-field-group .elementor-field[type="checkbox"],
.elementor-field-group .elementor-field[type="radio"],
.elementor-field-type-acceptance input[type="checkbox"]{
  background-color:#FFFFFF !important;
  background-image:none;
  border:2px solid #FFB09C !important;
  border-radius:6px !important;
  width:24px !important; height:24px !important;
  min-height:0 !important; padding:0 !important;
}
.elementor-field-group .elementor-field[type="checkbox"]:checked,
.elementor-field-type-acceptance input[type="checkbox"]:checked{
  background-color:#FE6F5E !important;
  border-color:#FE6F5E !important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6.4'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:15px 15px !important;
}

/* ============================================================
   SIDEBAR RELATED CARD
   Hiding the excerpt's inner element still left its widget
   wrapper in the flow, which is where the gap between image and
   title came from. Hide the wrapper, and tighten the padding -
   a 28px inset is right for a 412px card, not for a 326px one.
   ============================================================ */
.dm-related-grid .elementor-widget-text-editor{ display:none !important; }
.dm-related-grid .dm-article-card > .e-con:last-child{
  padding:16px 18px 18px !important;
  gap:6px !important;
}
.dm-related-grid .dm-article-card h3{
  font-size:16px !important; line-height:23px !important;
}
.dm-related-grid .dm-article-card .dm-card-img img{ height:120px; }
.dm-related-grid .elementor-grid{ gap:16px !important; }


/* ============================================================
   SIDEBAR STICKY - corrected
   position:sticky can only travel inside its parent's box. The
   sidebar was align-self:flex-start, so it collapsed to content
   height and the card ended flush with its bottom: zero travel.
   Stretching the column to the row height gives the card the
   distance it needs, and it still releases at the column's end.
   ============================================================ */
.dm-article-side{
  align-self:stretch !important;
  position:relative;
}
.dm-ask-card{
  position:-webkit-sticky;
  position:sticky;
  top:117px;              /* 97px header + 20px breathing room */
  z-index:5;
}
@media (max-width:1024px){
  .dm-article-side{ align-self:auto !important; }
  .dm-ask-card{ position:static; top:auto; }
}

/* The sidebar shrinks the card image to 120px, so its container's
   192px min-height must come down with it or the difference shows
   up as dead space between the image and the title. */
.dm-related-grid .dm-article-card > .e-con:first-child{
  min-height:120px !important;
  height:120px !important;
}
.dm-related-grid .dm-article-card .dm-card-img,
.dm-related-grid .dm-article-card .dm-card-img .elementor-widget-container,
.dm-related-grid .dm-article-card .dm-card-img figure,
.dm-related-grid .dm-article-card .dm-card-img a{
  height:120px !important; display:block; line-height:0;
}
.dm-related-grid .dm-article-card .dm-card-img img{
  height:120px !important; width:100% !important; object-fit:cover; display:block;
}
/* same guard for the three-across strip at its own height */
.dm-more-grid .dm-article-card > .e-con:first-child{ min-height:192px !important; }
.dm-more-grid .dm-article-card .dm-card-img img{ height:192px !important; }

/* ============================================================
   OVERFLOW - the reason position:sticky was dead
   body carried overflow-x:hidden, which turns body into a scroll
   container; sticky children then resolve against that box instead
   of the viewport and never pin. `clip` suppresses the horizontal
   scrollbar without creating a scroll container, so sticky works.
   ============================================================ */
html, body{
  overflow-x:clip !important;
  overflow-y:visible !important;
}

/* ============================================================
   PLACEHOLDERS - full opacity
   Elementor ships three competing rules: 0.6 opacity on form
   fields, 0.6 on the search input, and its own grey on the base
   input classes. All of them are overridden here so a placeholder
   shows exactly the colour the design specifies.
   ============================================================ */
::placeholder,
::-webkit-input-placeholder,
:-ms-input-placeholder,
::-ms-input-placeholder,
.elementor-field-group .elementor-field-textual::placeholder,
.elementor-search-form__input::placeholder,
.elementor .e-form-input-base::placeholder,
.elementor .e-form-textarea-base::placeholder,
input::placeholder, textarea::placeholder, select::placeholder{
  opacity:1 !important;
  color:var(--dm-placeholder) !important;
}
/* the two search fields use a lighter grey, per the design */
.dm-search input[type="search"]::placeholder,
.dm-search-pill input[type="search"]::placeholder{
  color:#9CA3AF !important;
  opacity:1 !important;
}
/* the select's own "choose a subject" line is ink, not placeholder grey */
.elementor-field-group select.elementor-field{
  color:var(--dm-ink) !important; opacity:1 !important;
}

/* המלצות: הכרטיס נושא את הדירוג שלו, והכוכבים שמעבר לו נסגרים */
.dm-stars-4 .dm-star:nth-child(5),.dm-stars-3 .dm-star:nth-child(n+4),.dm-stars-2 .dm-star:nth-child(n+3),.dm-stars-1 .dm-star:nth-child(n+2){display:none!important}

/* =====================================================================
   GLOBAL ADDITIONS - appended to the Elementor kit custom_css (post 6).
   Everything here is a case where Elementor exposes no setting at all
   (REBUILD-BRIEF section 5, "code boundary"). Nothing here is per-page.
   This file is the source of truth; the kit holds a copy.
   ===================================================================== */

/* --- Split heading: the handwriting fragment inside a heading ---------
   Elementor strips class/style from inline tags and generates no CSS for
   text fragments, so <em> is the hook. Tokens only. Works on both the
   atomic (.heading-split global class) and classic (_css_classes) engines. */
/* line-height stays well under 1 so the oversized handwriting glyph does not
   inflate the heading's line box. In the original the fragment was a separate
   absolutely positioned heading, so it never affected the line at all. */
.heading-split em{font-family:var(--font-hand);color:var(--color-coral);
  font-size:var(--text-hand-lg);font-style:normal;line-height:.55em}
/* The size of a heading comes from its own class (heading-split = H1, t-h2, t-h3),
   so the <em> hook has to be listed for each of them rather than nested under one. */
/* font-weight is spelled out: <em> inherits the heading's 500, and the
   handwriting face ships a single 400 weight, so 500 asks the browser to
   synthesise one. The original headings were 400. */
.t-h2 em,.t-h2-orange em,.t-h3 em{font-family:var(--font-hand);color:var(--color-coral);
  font-style:normal;font-weight:400}
/* .1em, not .55em: a 110px inline box inflates the H2's line box to 82px even
   when its own line-height is 60px, because half-leading is measured from the
   glyph's own ascent. The original headings are exactly 60px tall, and the
   fragment there was a separate absolutely positioned element that never
   touched the line. Collapsing the line-height reproduces that: the glyph
   keeps its baseline and simply stops inflating the heading. */
.t-h2 em,.t-h2-orange em{font-size:var(--text-hand-lg);line-height:.1em}
.t-h3 em{line-height:.55em}
/* Two headings take the handwriting in orange rather than coral -- "לא חייבים
   להתמודד עם זה לבד" and "מילים ממי שכבר חווה". Measured on the original, not
   assumed. */
.t-h2-orange em{color:var(--color-orange)}
.t-h3 em{font-size:var(--text-hand-sm)}
.heading-split-sm em{font-size:var(--text-hand-sm);line-height:.6em}

/* --- Contact form -----------------------------------------------------
   Per-field icons, the custom select caret, the acceptance checkbox and the
   gradient submit have no Elementor controls. Applies to every form on the
   site by design, so it lives here rather than on one widget.
   !important is required: Elementor's own per-element field rules carry a
   higher specificity than any class-based .elementor-kit-6 can. */
.dm-form .elementor-field-group .elementor-field:not(.elementor-select-wrapper):not(textarea){
  height:62px;padding:16px 48px 17px 16px}
.dm-form textarea.elementor-field{height:94px;padding:16px 48px 17px 16px;resize:none}
.dm-form .elementor-field-group .elementor-select-wrapper select{height:58px;padding:16px 48px 17px 62px}

.dm-form .elementor-field-type-text .elementor-field,
.dm-form .elementor-field-type-tel .elementor-field,
.dm-form .elementor-field-type-email .elementor-field,
.dm-form .elementor-field-type-textarea .elementor-field{
  background-repeat:no-repeat!important}
.dm-form .elementor-field-type-text .elementor-field{
  background-image:url(/wp-content/uploads/2026/08/n70-5501.svg)!important;
  background-position:right 16px center!important;background-size:18px 20px!important}
.dm-form .elementor-field-type-tel .elementor-field{
  background-image:url(/wp-content/uploads/2026/08/n70-5509.png)!important;
  background-position:right 16px center!important;background-size:15px 20px!important}
.dm-form .elementor-field-type-email .elementor-field{
  background-image:url(/wp-content/uploads/2026/08/n70-5517.svg)!important;
  background-position:right 11px center!important;background-size:20px 20px!important}
.dm-form .elementor-field-type-textarea .elementor-field{
  background-image:url(/wp-content/uploads/2026/08/n70-5536.png)!important;
  background-position:right 16px top 23px!important;background-size:20px 20px!important}

.dm-form .elementor-field-type-select .select-caret-down-wrapper{display:none!important}
.dm-form .elementor-field-type-select .elementor-select-wrapper select{
  appearance:none!important;-webkit-appearance:none!important;
  background-image:url(/wp-content/uploads/2026/08/n70-5524.png),
                   url(/wp-content/uploads/2026/08/n70-5527.svg)!important;
  background-repeat:no-repeat,no-repeat!important;
  background-position:right 16px center,left 18px center!important;
  background-size:16px 16px,36px 36px!important}

.dm-form .elementor-field-type-acceptance .elementor-field-option{
  display:flex;align-items:center;gap:16px;width:100%;min-height:62px;padding:16px;
  border:1px solid var(--color-cream-light);border-radius:var(--radius-card);
  background:rgba(255,253,245,.5)}
.dm-form .elementor-field-type-acceptance input[type=checkbox]{
  flex:0 0 24px;width:24px;height:24px;border-radius:6px;background:var(--color-white);
  appearance:none;-webkit-appearance:none;border:1px solid var(--color-cream-light)}
.dm-form .elementor-field-type-acceptance input[type=checkbox]:checked{
  background:var(--color-coral);box-shadow:inset 0 0 0 2px var(--color-white)}
.dm-form .elementor-field-type-acceptance label{flex:1 1 auto;min-width:0;text-align:right;margin:0}

.dm-form .elementor-field-type-submit button{
  width:100%;height:68px;justify-content:center;
  background-image:linear-gradient(90deg,#FF594A 0%,var(--color-coral) 100%)!important}
.dm-form .elementor-button-content-wrapper{
  display:flex;align-items:center;gap:12px;flex-direction:row-reverse}
.dm-form .elementor-button-icon svg{width:20px;height:20px}

/* --- Two things the atomic class generator refuses to emit ----------------
   Both are stored on a global class and both come back out of the CSS
   generator as nothing at all, so the class is there and does nothing. */

/* u-span-all carries grid-column:1 / -1 in its stored props; the generator
   drops the declaration silently. The fifth treatment pill ("LICBT לנוער
   ומבוגרים") is a full-width row in the original, 557 wide against the 270 of
   the other four, so the span has to come from somewhere. */
.pill-grid>.u-span-all{grid-column:1/-1}

/* Same story for flex-grow. The three service cards are equal height but the
   third carries one line less of body copy, so its "לפרטים נוספים" sat 29px
   above the other two; the original pins all three with absolute positioning
   at the same y. Letting the body take up the slack does it in flow. The
   stored prop is `flex` on t-card-body and it comes out of the generator as
   nothing, so the declaration is written here instead. */
.elementor .card-cream>.t-card-body,
.elementor .card-cream-tl>.t-card-body,
.elementor .card-cream-br>.t-card-body{flex:1 1 auto}

/* The two text lines inside a pill sit flush in the original -- a 20px line
   box directly above a 24px one, no gap, which is what makes the pill 82 tall
   instead of 98. The shared .stack class carries gap:20px and is used in a
   dozen other places that do want it, and the class ceiling leaves no room for
   a gapless variant, so the exception is written against the two components
   that need it. */

/* --- The two contact buttons in the "לא חייבים" panel --------------------
   Both carry an icon in the original -- a paper plane on the filled button, a
   handset on the outlined one -- and the atomic e-button widget has no icon
   control at all, so the glyph can only arrive as a background image. The
   clearance that replaces the original's 12px flex gap is spelled out in px
   the same way cta-link's arrow already does it: 40 of button padding + 18 of
   icon + 12 of gap. Both widths come out at the original's 244.7 and 226.1.

   The handset is keyed to the href rather than to .btn-ghost, because that
   class is also worn by "לכל השירותים" on the about page, which has no icon. */
.elementor a.btn-cta-sm{
  padding-inline-start:70px;
  background-image:url(/wp-content/uploads/2026/08/btn-send.png);
  background-repeat:no-repeat;background-size:18px 28px;
  background-position:right 40px center}
.elementor a.btn-ghost[href^="tel:"]{
  padding-inline-end:70px;
  background-image:url(/wp-content/uploads/2026/08/btn-tel.png);
  background-repeat:no-repeat;background-size:18px 28px;
  background-position:left 40px center}

/* --- Pill inner stacks, specificity note ---------------------------------
   .elementor .stack{gap:20px} is (0,2,0); a bare .info-card>.stack ties it and
   loses on source order, so the override is written with .elementor in front. */
.elementor .info-card>.stack,.elementor .pill-card>.stack{gap:0}

/* --- The testimonial carousel needs room for its own shadow --------------
   Elementor's "arrows outside" setting insets the swiper by 30px a side and
   then clips it with overflow:hidden, so the cards lose 20px of width and
   their shadow is sliced off at the top and both edges. The original does the
   opposite: the swiper bleeds 30px past the column and carries 30px of padding,
   which leaves the viewport at the full 1300 (cards back to 417.3, as measured)
   and puts the clip 30px clear of the artwork. */
/* The width has to come with it: Elementor pins the swiper to
   calc(100% - 60px) from .elementor-element.elementor-arrows-position-outside,
   which is (0,3,0), so the negative margin alone just pushed the fixed-width
   box sideways instead of widening it. Matching that specificity and adding
   the 60 back puts the viewport at 1300 and the outer box at 1360, x=280 --
   the original's numbers. */
/* The bleed can never be wider than the gutter it bleeds into: at 375 the
   gutter is 20 and a flat 30 pushed the swiper to -10..385, which is the one
   thing widthcheck fails a page for. Capped against --space-gutter it stays
   30 from 1280 up and shrinks with the gutter below that. */
.elementor .elementor-element.dm-testimonial-carousel .swiper{
  --dm-bleed:min(44px, calc(var(--space-gutter) - 4px));
  width:calc(100% + var(--dm-bleed) * 2);
  margin-inline:calc(var(--dm-bleed) * -1);
  padding:var(--dm-bleed)}

/* --- ההירו של עמוד אודות ------------------------------------------------
   The section wears `hero-about` purely as a hook: everything below is either
   something the atomic controls cannot express (a three-stop gradient, two
   decorative layers that have to disappear on a phone) or a one-section
   override of a class that half a dozen other places share and want unchanged.
   Every value measured off the original at 1920, not eyeballed. */

/* The band is not flat cream -- it is a 101deg wash across all three warm
   tokens. background-color stays on .bg-cream underneath. */
.elementor .e-con.hero-about{
  background-image:
    url(/wp-content/uploads/2026/08/n70-5573.svg),
    url(/wp-content/uploads/2026/08/n70-5585.png),
    linear-gradient(101deg, var(--color-cream) 0%, var(--color-cream-light) 50%,
                    var(--color-peach) 100%);
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-size:64px 64px,473px 141px,auto;
  /* star: x960 of 1920 -> centred, 56 below the band top.
     paw: right edge 1853 of 1920 -> 67 in from the right, 553 down. */
  background-position:50% 56px, right 67px top 553px, 0 0;
}

/* The photo is right-aligned because panel-cols is a grid and panel-photo
   carries align-self, which in a grid is the block axis and does nothing here;
   the item simply starts at the inline start, which in RTL is the right. The
   original sits hard against the left edge of the column. */
.elementor .hero-about .panel-photo{justify-self:end}

/* One heading and one paragraph differ from the shared class only here:
   the standfirst is coral, not ink (t-h3 is also worn by ננה and מיני, which
   are ink in the original and must stay), and the body runs 16/26 against
   t-body's 18. */
.elementor .hero-about .t-h3{color:var(--color-coral-dark)}
.elementor .hero-about .t-body{font-size:16px;line-height:26px}

/* --- אודות: "הכלבים שהובילו אותי לדרך שלי" ------------------------------
   panel-cols is repeat(auto-fit, 1fr) -- two equal halves. The original is
   nowhere near equal: the copy column runs 311..1169 (858) and the photo
   composite 1189..1653 (464), a 20 gutter between them. Half and half made the
   photo far too big and squeezed the heading onto two lines. Same hook-class
   pattern as hero-about, because panel-cols, stack, t-h2 and t-body are all
   shared with places that are already right. */
.elementor .dogs-about .panel-cols{
  /* first column is the rightmost in RTL, and the photo is first in the DOM.
     32.5% of the 1300 grid = 422.5, leaving 857.5 for the copy. */
  grid-template-columns:minmax(0,32.5%) minmax(0,1fr);
  gap:20px;
  /* panel-cols is align-items:start, so the copy hung from the top of a much
     taller photo. In the original the two are centred against each other:
     the photo runs 951..1487 (centre 1219) and the text block, counting the
     handwritten fragment, 1057..1381 (centre 1219). */
  align-items:center}

/* 60/72 in the original, and once the column is 858 wide the whole line --
   "הכלבים שהובילו אותי" plus the handwritten "לדרך שלי", 759 together -- fits
   on one line as it does there. */
.elementor .dogs-about .t-h2{line-height:72px}

/* 64 between the heading block and the copy; the shared .stack carries 20. */
.elementor .dogs-about .stack{gap:64px}

/* 20/28 in the original against t-body's 18/29. */
.elementor .dogs-about .t-body{font-size:20px;line-height:28px}

/* --- אודות: "איך אני עובדת?" ---------------------------------------------
   Rebuilt against the original rather than adjusted: there the heading and the
   four paragraphs sit inside a white card 896 wide, 458 tall, radius 32, with
   a 128 block notched into its top-right corner -- and the chip sits *outside*
   it, on the band below. The build had no card at all and ran the copy the
   full 1300 of the grid. A container (card-work) now wraps the five, and the
   chip stayed where it was. Every number measured at 1920. */

/* the band: #FFF2F0, not the flatter --color-peach the build had */
.elementor .e-con.work-about{background-color:var(--color-peach-deep)}
/* card 1755..2213, chip 2277 -> 64 between them (sec-inner-lg carries 80) */
.elementor .work-about .sec-inner-lg{gap:64px}

.elementor .e-con.card-work{
  /* an atomic flexbox is born flex-direction:row, and swapping its classes
     dropped the local column the builder had set -- the heading and the four
     paragraphs came out side by side */
  display:flex;flex-direction:column;align-items:stretch;gap:24px;
  width:100%;max-width:896px;align-self:center;
  /* white at 80%, so the peach band reads faintly through it */
  background-color:rgba(255,255,255,.8);
  border:1px solid #FFE1DF;border-radius:32px;
  box-shadow:0px 20px 50px -10px rgba(255,127,80,0.4);
  /* h2 at 1804 against a card top of 1755; copy runs 561..1359 inside 512..1408 */
  padding:48px;
  /* the corner block, top-right, 128 square */
  background-image:url(/wp-content/uploads/2026/08/blob-work.png);
  background-repeat:no-repeat;background-size:128px 128px;
  background-position:right top}

/* 60/40 in the original, centred; the h2 sits 52 above the first paragraph
   while the paragraphs run 24 apart, so the extra 28 goes on the heading. */
.elementor .card-work .t-h2{line-height:40px;text-align:center;margin-block-end:28px}
.elementor .card-work .t-body{font-size:18px;line-height:28px}

/* the chip is white with an ink label at 18/28, not a small coral one */
.elementor .work-about .eyebrow-chip{
  background-color:var(--color-white);border-color:#FFE1DF;
  padding:13px 25px;gap:12px}
.elementor .work-about .eyebrow-chip p{
  font-size:18px;line-height:28px;color:var(--color-ink)}
.elementor .work-about .chip-icon{max-width:20px}
/* the chip is sized by its content in the original (331 wide, one line);
   eyebrow-chip caps it, which wrapped the bigger 18px label onto four lines */
.elementor .work-about .eyebrow-chip{
  width:auto;max-width:none;align-self:center;flex-wrap:nowrap}
.elementor .work-about .eyebrow-chip p{white-space:nowrap}
/* "איך אני עובדת?" is one Polin heading in the original -- no handwritten
   fragment. The build wraps "עובדת?" in <em>, which the shared .t-h2 em rule
   turns into 110px OHYaelLeibushor in coral. Inside this card the fragment
   inherits the heading instead; the markup and the words are untouched. */
.elementor .card-work .t-h2 em{
  font-family:inherit;font-size:inherit;line-height:inherit;
  color:inherit;font-weight:inherit}

/* The emphasised words run 500 against the paragraph's 300. <strong> comes out
   at 400 here because the atomic paragraph sets the weight on the element and
   the tag inherits it. */
.elementor .card-work .t-body strong{font-weight:500}

/* The coral rule at the start of each of the three list lines. It is not a
   border in the original -- nothing in that DOM carries one -- but the
   geometry says exactly where it belongs: the first paragraph runs 561..1359
   while the three list paragraphs run 558..1336, inset 23 from the same right
   edge. That 23 is the rule plus its gap. Reconstructed at 3 + 20. */
.elementor .card-work .t-body + .t-body{
  border-inline-start:3px solid var(--color-coral);
  padding-inline-start:16px}

/* --- אודות: "העקרונות שמנחים אותי" --------------------------------------
   The five principles are cards in the original -- 247x301, #FFFBED, radius 56,
   with the icon tile hanging 38 over the top edge, the same trick card-hang
   uses on the home page. The build had the icon, the heading and the copy
   loose on the band with no card at all. step-col is also worn by "הצוות על
   ארבע", so everything hangs off the section hook. Measured at 1920. */
.elementor .principles-about .card-grid-5{
  gap:17px;                     /* card pitch 264 against a 247 card */
  margin-block-start:38px;      /* give the hang its room back */
  /* the grid came in align-items:start, so each card stopped at its own copy
     -- 300/300/274/248/248 where the original has all five at 301 */
  align-items:stretch}

.elementor .principles-about .step-col{
  background-color:#FFFBED;
  border-radius:56px;
  box-shadow:3px 6px 22px 0px rgba(0,0,0,0.1);
  /* the icon sticks 38 above the card and 74 sits inside it, then 24 to the
     heading and 12 to the copy; 32 under the last line. Copy runs 199 wide
     inside 247, so 24 a side. */
  padding:0 24px 32px;
  gap:12px}

.elementor .principles-about .icon-tile{margin-block-start:-38px}
.elementor .principles-about .t-h4{
  font-size:20px;line-height:28px;margin-block-start:12px}
.elementor .principles-about .t-body-sm{
  font-size:16px;line-height:26px;font-weight:500}

/* --- אודות: "למי אני יכולה לעזור?" --------------------------------------
   Rebuilt from measurement. The original is a 384 copy column on the right and
   a 718 column of six slim rows on the left, 80 apart, 1182 centred in the
   grid. The build had two equal 638 halves and used pill-card -- the home
   page's 82-tall white treatment card with a 48 icon -- where the original has
   a 54-tall cream row with a 14 icon. pill-card is right on the home page, so
   every rule here hangs off the section hook. */
.elementor .helpwho-about .panel-cols{
  grid-template-columns:minmax(0,384px) minmax(0,718px);
  gap:80px;justify-content:center;align-items:start}

/* the six rows: 718x54, radius 24, cream, a 14x20 icon at the start edge */
.elementor .helpwho-about .pill-card{
  background-color:var(--color-cream);
  border-radius:24px;border:1px solid rgba(255,200,196,.6);
  /* 16 + 20 of line + 16 + the two borders = the original's 54 */
  padding:16px 21px;gap:12px}
.elementor .helpwho-about .pill-card .t-body-sm{
  font-size:16px;line-height:20px;font-weight:300}
.elementor .helpwho-about .icon-48{max-width:14px}

/* the rows sit 12 apart, the copy column 24 -- one .stack class, two rhythms */
.elementor .helpwho-about .stack:has(> .pill-card){gap:12px}
.elementor .helpwho-about .stack:not(:has(> .pill-card)){gap:24px}
/* and inside the copy column the steps are 52 and 32, not 24 */
.elementor .helpwho-about .t-body{margin-block-start:28px;font-size:18px;line-height:24px}
.elementor .helpwho-about .btn-primary{margin-block-start:8px}

/* 60/40, so it breaks into the original's two 40 lines at 384 wide */
.elementor .helpwho-about .t-h2{line-height:40px}

/* the chip is a soft peach wash with a deeper label, not the coral outline */
.elementor .helpwho-about .eyebrow-chip{
  background-color:rgba(255,200,196,.5);border:0;
  padding:8px 16px;gap:8px;
  width:auto;max-width:none;align-self:flex-start}
.elementor .helpwho-about .eyebrow-chip p{
  font-size:14px;line-height:20px;color:rgb(192,62,50)}
.elementor .helpwho-about .chip-icon{max-width:16px}

/* the button is small and squared off here: 179x44, radius 24, 14/20 */
.elementor .helpwho-about .btn-primary{
  font-size:14px;line-height:20px;padding:12px 33px;
  border-radius:24px;background-color:rgb(255,107,91);
  align-self:flex-start;box-shadow:none;width:auto;max-width:none}
/* the chip is sized to its label in the original, one line at 14/20 */
.elementor .helpwho-about .eyebrow-chip p{white-space:nowrap}

/* --- אודות: המפריד בין "איך אני עובדת" ל"העקרונות" ----------------------
   n70-5567.svg, 1920x120, the same kind of divider 927fc3a already gives the
   band above. In the original it is drawn inside the peach band at its foot,
   so the strip behind it carries the band's own colour and the wave shape is
   what reads as the cream below. A root section can in fact be reordered --
   move-element with an empty target_parent_id took it to index 4 -- so this
   did not need the workaround the brief warns about. */
.elementor .e-con.wave-work{
  background-color:var(--color-peach-deep);
  gap:0;padding:0}
.elementor .wave-work img{display:block;width:100%}

/* The two heading lines sat on top of each other: the shared .t-h2 em rule
   collapses the handwritten fragment to line-height .1em, which is right when
   the fragment shares a line with the words before it, and wrong here where
   the original gives "לעזור?" a line of its own. 40 is the original's. */
.elementor .helpwho-about .t-h2 em{line-height:40px}

/* --- אודות: "ההסמכות שלי" -----------------------------------------------
   In the original the heading and its standfirst are not a full-width block
   above the grid -- they are the top of the left column, sitting over the four
   cards, with the photograph alone on the right. 649bdc7 and a7bfcd5 moved
   into that column; the rest is measurement. */
.elementor .creds-about .panel-cols{
  /* first column is the rightmost in RTL and the photo is first in the DOM */
  grid-template-columns:minmax(0,530px) minmax(0,740px);
  gap:30px;align-items:start}

/* 60/60 and 20/32.5, both w500, and no handwriting on "שלי" -- the original
   sets the whole heading in Polin. The 50 inset matches its 637 box inside
   the 740 column. */
.elementor .creds-about .t-h2{line-height:60px;padding-inline:50px}
.elementor .creds-about .t-h2 em{
  font-family:inherit;font-size:inherit;line-height:inherit;
  color:inherit;font-weight:inherit}
.elementor .creds-about .t-body{
  font-size:20px;line-height:32.5px;font-weight:500;padding-inline:50px}

/* heading 24 to the standfirst, 48 from there to the first card, 24 between */
.elementor .creds-about .stack{gap:24px}
/* ...but the stack *inside* a card runs 8, not 24: the title sits 8 above its
   line of copy, which is what keeps the cards at the original's 146-154 */
.elementor .creds-about .pill-card .stack{gap:8px}
.elementor .creds-about .pill-card:first-of-type{margin-block-start:24px}

/* the cards: 740 wide, radius 32, cream border, a soft drop shadow, a 68 icon
   at the start edge and 24 to the text */
.elementor .creds-about .pill-card{
  border-radius:32px;
  border:1px solid var(--color-border-cream);
  box-shadow:3px 6px 22px 0px rgba(0,0,0,0.1);
  padding:32px;gap:24px;align-items:flex-start}
.elementor .creds-about .icon-48{max-width:68px}
.elementor .creds-about .t-h4{font-size:20px;line-height:28px}
.elementor .creds-about .t-body-sm{font-size:16px;line-height:26px;font-weight:500}

/* --- אודות: "הצוות על ארבע" ---------------------------------------------
   The band carries six decorations in the original: a soft blob bleeding off
   the top-right, a second bleeding off the bottom-left, and four small drawn
   icons. All measured, all rendered from the original's own CSS where they are
   shapes rather than files, and all dropped below 1024 -- they are placed
   against a 1920 canvas and land on the copy at any smaller width. */
.elementor .e-con.team-about{
  /* Only two of the four small icons belong here. The heart and the smiley are
     already baked into about-nana.png / about-mini.png, which carry the blob,
     the frame and the icon in one composite -- drawing them again doubled them.
     Both blobs sit flush to their own edge and bleed sideways only: pulling
     them past the top or the bottom had the section box slice them straight,
     which is what made them read as cut out rather than part of the page. */
  background-image:
    url(/wp-content/uploads/2026/08/blob-team-tr.png),
    url(/wp-content/uploads/2026/08/n70-5665.svg),
    url(/wp-content/uploads/2026/08/n70-5669.png),
    url(/wp-content/uploads/2026/08/blob-team-bl.png);
  background-repeat:no-repeat;
  background-size:346px 346px,78px 81px,63px 79px,388px 388px;
  background-position:
    right -115px top 0,
    right 128px top 307px,
    left 126px bottom 568px,
    left -139px bottom 0}

/* the standfirst is 20/28 across 858, not 18/29 across the whole grid */
.elementor .team-about .t-body{
  font-size:20px;line-height:28px;max-width:858px;align-self:center;text-align:center}

/* the chip is a deeper peach with a coral outline and an ink label */
.elementor .team-about .eyebrow-chip{
  background-color:rgb(255,232,227);border-color:rgb(255,143,120);
  width:auto;max-width:none;padding:9px 21px;gap:8px}
.elementor .team-about .eyebrow-chip p{
  font-size:14px;line-height:20px;color:var(--color-ink);white-space:nowrap}

/* the photograph is 296 square in the original, inside a 352 white shape,
   inside the 417 blob -- panel-photo's shared 570 made it burst the blob and
   stretched the whole band by ~360 */
.elementor .team-about .panel-photo{max-width:417px}

/* the two cards span 977 centred in the original (471..1448), not the full
   grid: 422 apiece with 138 between, which lands their x on the source's */
.elementor .team-about .panel-cols{
  grid-template-columns:repeat(2, minmax(0,422px));
  gap:138px;justify-content:center}

/* No blob behind the photograph: the composite already is the blob, the frame
   and the icon. 417 matches the blob the original draws. */
.elementor .team-about .step-col{gap:8px}
.elementor .team-about .t-h3{margin-block-start:36px}

/* 16/26 against t-body-sm's 16/29, and the column is 422 wide */
.elementor .team-about .t-body-sm{
  font-size:16px;line-height:26px;max-width:422px;align-self:center}
/* The opening sentence of each dog's copy is set heavier in the original. It is
   plain text followed by a <br>, with no element to hang a rule on, so the
   first rendered line -- which the <br> guarantees is exactly that sentence --
   carries the weight. */
.elementor .team-about .t-body-sm::first-line{font-weight:500}

/* --- אודות: "לפעמים כל מה שצריך" ----------------------------------------
   The closing band. Simple, so every number is the original's: a 564 peach
   band, a 48/72 heading boxed to 856, a 24/39 standfirst boxed to 764, and the
   two buttons 25 apart on one centred row. Measured at 1920. */
.elementor .e-con.closing-about{
  background-color:var(--color-peach-deep);
  /* heading 47 below the band top, buttons 106 above its foot */
  padding-block-start:47px;padding-block-end:106px}

/* 48/72 across 856 -- t-h2's 60 ran the line the full 1634 of the section */
.elementor .closing-about .t-h2{
  font-size:48px;line-height:72px;max-width:856px;align-self:center}
/* 24/39 across 764, against t-sub's 20/32.5 across 1172 */
.elementor .closing-about .t-sub{
  font-size:24px;line-height:39px;max-width:764px;align-self:center}

/* 32 from the heading to the standfirst, 48 from there to the buttons */
.elementor .closing-about .stack-center{gap:32px}
/* the original reads "לכל השירותים" first (rightmost in RTL) and puts the
   filled "בואו נדבר!" on the left; the build has them the other way round in
   the DOM, so the row is reversed rather than the elements moved */
.elementor .closing-about .pill-row{
  gap:25px;margin-block-start:16px;flex-direction:row-reverse}

/* the outline button has no border in the original, and its label is 20/28
   like its neighbour, not 18 -- which is what left it 194 wide against 219 */
.elementor .closing-about .btn-ghost{
  border:0;font-size:20px;line-height:28px;padding:21px 48px}

/* =====================================================================
   עמוד תודה רבה (3969) - נבנה מחדש מול המקור 2383
   The 100-class ceiling is full, so the page is scoped by its own post id and
   its containers carry readable element ids. Two things this cost me:
   atomic *widgets* get no elementor-element-<id> class at all (only containers
   do), so they are reached structurally; and .elementor .e-flexbox-base ties
   a two-class .elementor-kit-6 and loads later, so every container rule needs .e-con
   in front of it to win. Numbers measured off /thank-you/ at 1920.
   ===================================================================== */
.elementor-3969 .e-con.elementor-element-tyband1{
  background-color:var(--color-cream);
  /* 116, not 111: the original's cream band starts 5px below the page top */
  padding:116px var(--space-gutter) 140px;
  flex-direction:column;align-items:center;gap:0;
  background-image:
    url(/wp-content/uploads/2026/08/ty-blob-tr.png),
    url(/wp-content/uploads/2026/08/n70-7307.svg),
    url(/wp-content/uploads/2026/08/n70-7296.svg),
    url(/wp-content/uploads/2026/08/ty-deco-128.png),
    url(/wp-content/uploads/2026/08/n70-7299.svg),
    url(/wp-content/uploads/2026/08/n70-7308.png),
    url(/wp-content/uploads/2026/08/ty-blob-left.png);
  background-repeat:no-repeat;
  background-size:600px 600px,36px 36px,64px 64px,128px 128px,80px 80px,99px 99px,800px 800px;
  background-position:
    right -150px top -200px,
    right 210px top 54px,
    left 162px top 303px,
    left 469px top 519px,
    left 480px top 860px,
    left 1485px top 866px,
    left -298px top 418px}

.elementor-3969 .e-con.elementor-element-tyinner{
  width:100%;max-width:var(--size-content);
  flex-direction:column;align-items:center;gap:24px;padding:0}

/* the badge shadow is painted outside the box so it cannot push the heading
   down; baked into a padded PNG it would have added that padding to the flow */
.elementor-3969 .elementor-element-tyinner>img{
  width:132px;max-width:132px;
  filter:drop-shadow(0 10px 40px rgba(255,127,80,.35))}

.elementor-3969 .elementor-element-tyinner>h1{
  font-family:var(--font-heading);font-size:72px;line-height:72px;font-weight:500;
  color:var(--color-ink);margin:4px 0 0;text-align:center}

/* "פנייתך התקבלה בהצלחה" - 276x54 */
.elementor-3969 .e-con.elementor-element-typill1{
  /* the icon is on the right of the label in the original, and the DOM has
     the label first, so the row runs the other way */
  flex-direction:row-reverse;align-items:center;gap:8px;
  width:auto;padding:13px 25px;border-radius:9999px;
  background-color:rgba(255,255,255,.8);
  box-shadow:0 10px 40px -10px rgba(255,127,80,.1)}
.elementor-3969 .elementor-element-typill1>p{
  font-family:var(--font-body);font-size:18px;line-height:28px;font-weight:500;
  color:var(--color-coral-dark);margin:0;white-space:nowrap}
.elementor-3969 .elementor-element-typill1>img{width:20px;max-width:20px}

.elementor-3969 .elementor-element-tyinner>p{
  font-family:var(--font-body);font-size:24px;line-height:32px;font-weight:500;
    /* 800, not the original's 795: the first segment's natural width is 795.0 to
     the pixel, so at exactly 795 it wraps a third line on a sub-pixel. Five px
     wider renders the two lines the original shows. */
  color:var(--color-ink);width:800px;max-width:100%;text-align:center;margin:8px 0 0}

/* the card: 906x196 - icon at the start edge, then the copy, then the buttons */
.elementor-3969 .e-con.elementor-element-tycard1{
  flex-direction:row;align-items:center;gap:26px;
  width:100%;max-width:906px;padding:58px 55px 64px 26px;
  border-radius:56px;background-color:rgba(255,255,255,.9);
  box-shadow:0 20px 50px 0 rgba(255,127,80,.1)}
.elementor-3969 .elementor-element-tycard1>img{width:48px;max-width:48px}
.elementor-3969 .e-con.elementor-element-tyctxt{
  flex-direction:column;gap:8px;width:auto;padding:0;align-items:flex-start}
.elementor-3969 .elementor-element-tyctxt>h3{
  font-family:var(--font-heading);font-size:24px;line-height:32px;font-weight:500;
  color:var(--color-ink);margin:0;white-space:nowrap}
.elementor-3969 .elementor-element-tyctxt>p{
  font-family:var(--font-body);font-size:18px;line-height:28px;font-weight:500;
  color:var(--color-ink);margin:0;white-space:nowrap}

.elementor-3969 .e-con.elementor-element-tycbtn{
  flex-direction:row;align-items:center;gap:16px;width:auto;padding:0;
  margin-inline-end:auto}
.elementor-3969 .elementor-element-tycbtn>a,
.elementor-3969 .elementor-element-tybots>a{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-weight:500;text-decoration:none;
  border:0;border-radius:9999px;white-space:nowrap}
.elementor-3969 .elementor-element-tycbtn>a:first-child{
  /* icon on the leading (right) side, as on the panel buttons: the atomic
     e-button has no icon control, so it arrives as a background. The clearance
     goes on the *right* -- the shorthand is physical, and in RTL the label
     hugs the right, so putting it left ran the icon over the words. Widths
     come out at the original's 229 / 239 / 214. */
  font-size:20px;line-height:28px;color:var(--color-orange);
  background-color:var(--color-white);
  padding:18px 66px 18px 34px;
  background-image:url(/wp-content/uploads/2026/08/n70-7350.svg);
  background-repeat:no-repeat;background-size:24px 24px;
  background-position:right 34px center}
.elementor-3969 .elementor-element-tycbtn>a:last-child{
  font-size:20px;line-height:28px;color:var(--color-white);
  background-color:#25D366;
  padding:16px 65px 16px 32px;
  background-image:url(/wp-content/uploads/2026/08/n70-7344.svg);
  background-repeat:no-repeat;background-size:25px 25px;
  background-position:right 32px center;
  box-shadow:0 4px 6px rgba(0,0,0,.1)}

.elementor-3969 .e-con.elementor-element-tybots{
  flex-direction:row;align-items:center;justify-content:center;
  gap:24px;width:auto;padding:0;margin-block-start:65px}
.elementor-3969 .elementor-element-tybots>a:first-child{
  font-size:18px;line-height:28px;color:var(--color-ink);
  background-color:transparent;
  padding:12px 48px 12px 24px;
  background-image:url(/wp-content/uploads/2026/08/n70-7371.svg);
  background-repeat:no-repeat;background-size:16px 16px;
  background-position:right 24px center}
.elementor-3969 .elementor-element-tybots>a:last-child{
  font-size:18px;line-height:28px;color:var(--color-coral-dark);
  background-color:rgba(255,255,255,.5);padding:13px 33px}

/* =====================================================================
   עמוד צור קשר (3970) - נבנה מחדש מול המקור 2382
   Two columns: an 859 form card on the right, a 417 cream card carrying four
   contact rows on the left, 18 apart. The form widget itself is the original's,
   copied across, so the kit's .dm-form rules dress it unchanged.
   ===================================================================== */
.elementor-3970 .e-con.elementor-element-ctband{
  background-color:var(--color-cream);
  padding:160px var(--space-gutter) 162px;
  flex-direction:column;align-items:center;gap:0;
  background-image:
    url(/wp-content/uploads/2026/08/ts-circ-peachb.png),
    url(/wp-content/uploads/2026/08/n70-7137.svg),
    url(/wp-content/uploads/2026/08/n70-7043.svg),
    url(/wp-content/uploads/2026/08/n70-7051.svg),
    url(/wp-content/uploads/2026/08/n70-7046.svg),
    url(/wp-content/uploads/2026/08/n70-7055.png),
    url(/wp-content/uploads/2026/08/ty-blob-left.png);
  background-repeat:no-repeat;
  background-size:728px 728px,80px 80px,64px 64px,80px 80px,80px 80px,99px 99px,800px 800px;
  background-position:
    right -214px top -264px,
    right 270px top 120px,
    left 162px top 303px,
    left 465px top 327px,
    left 480px top 1182px,
    left 1378px top 954px,
    left -298px top 740px}

.elementor-3970 .e-con.elementor-element-ctcols{
  width:100%;max-width:var(--size-content);padding:0;
  display:grid;grid-template-columns:minmax(0,859px) minmax(0,417px);
  gap:18px;justify-content:center;align-items:start}

/* the form card - 859x1020, 60 of padding all round */
.elementor-3970 .e-con.elementor-element-ctfcard{
  flex-direction:column;gap:0;padding:60px;
  background-color:rgba(255,255,255,.9);border-radius:48px;
  box-shadow:0 20px 60px -10px rgba(255,127,80,.08);
  /* the coral stain lives INSIDE the card, tucked into its top-left corner and
     cut by the 48 radius. In the original it is a child of the card, which has
     overflow:clip, at inset -40/-40, blurred 20px at .2 opacity. As a section
     background it floated free underneath the card instead. */
  background-image:url(/wp-content/uploads/2026/08/ct-corner-coral.png);
  background-repeat:no-repeat;background-size:240px 240px;
  background-position:left -80px top -80px}
.elementor-3970 .elementor-element-ctfcard>h1{
  font-family:var(--font-heading);font-size:36px;line-height:40px;font-weight:500;
  color:var(--color-ink);margin:0 0 20px;text-align:start}
.elementor-3970 .elementor-element-ctfcard>h1 em{
  font-family:var(--font-hand);font-size:70px;line-height:40px;font-weight:400;
  font-style:normal;color:var(--color-coral)}

/* the cream card behind the four rows - 417x723, sitting 161 below the form */
.elementor-3970 .e-con.elementor-element-ctinfo{
  flex-direction:column;gap:32px;padding:50px;
  margin-block-start:161px;
  background-color:var(--color-cream);border-radius:48px;
  box-shadow:0 10px 40px -10px rgba(255,127,80,.1);
  /* same on the cream card, but its top-RIGHT corner: inset -80/-80, blur 32 at .5 */
  background-image:url(/wp-content/uploads/2026/08/ct-corner-peach.png);
  background-repeat:no-repeat;background-size:384px 384px;
  background-position:right -144px top -144px}

/* each row: 317 wide, the icon on the right, title and value stacked to its left */
.elementor-3970 .elementor-element-ctinfo>.e-con{
  flex-direction:row;align-items:center;gap:24px;
  padding:17px;border-radius:24px;
  background-color:rgba(255,255,255,.004);
  box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}
.elementor-3970 .elementor-element-ctinfo>.e-con>img{width:64px;max-width:64px}
/* the title+value stack inside a row. Scoped away from the social row: as
   ".elementor-element-ctinfo .e-con>.e-con" it also matched the icon row and,
   being one class more specific, beat that row's own rule and stacked the two
   marks vertically. */
.elementor-3970 .elementor-element-ctinfo>.e-con:not(.elementor-element-ctsoc)>.e-con{
  flex-direction:column;align-items:flex-start;gap:4px;padding:0;
  background:none;box-shadow:none;border-radius:0;flex:1}
.elementor-3970 .elementor-element-ctinfo h4{
  font-family:var(--font-body);font-size:18px;line-height:28px;font-weight:500;
  color:var(--color-ink);margin:0}
.elementor-3970 .elementor-element-ctinfo h4 a{color:inherit;text-decoration:none}
.elementor-3970 .elementor-element-ctinfo p{
  font-family:var(--font-body);font-size:16px;line-height:24px;font-weight:500;
  color:var(--color-ink);margin:0}
.elementor-3970 .elementor-element-ctinfo p a{color:inherit;text-decoration:none}
/* the phone number is the one value set larger and in coral, and the hours are
   the one set smaller. Addressed by row, not by id: an atomic widget carries no
   elementor-element-<id> class at all. */
.elementor-3970 .elementor-element-ctinfo>.e-con:nth-child(1) p{
  font-size:20px;line-height:28px;color:var(--color-coral-dark)}
.elementor-3970 .elementor-element-ctinfo>.e-con:nth-child(4) p{
  font-size:14px;line-height:20px}

/* "עקבו אחריי:" and the two social marks. The original leaves 77 above this
   row against the 32 between the four contact rows, which is what takes the
   cream card to its 723. */
.elementor-3970 .e-con.elementor-element-ctsoc{
  flex-direction:row;align-items:center;justify-content:space-between;
  gap:16px;padding:0;background:none;box-shadow:none;
  margin-block-start:35px}
.elementor-3970 .elementor-element-ctsoct{
  font-family:var(--font-body);font-size:16px;line-height:24px;font-weight:500;
  color:var(--color-ink);margin:0}
.elementor-3970 .e-con.elementor-element-ctsoci{
  flex-direction:row;align-items:center;gap:16px;width:auto;padding:0}
.elementor-3970 .elementor-element-ctsoci img{width:60px;max-width:60px}

/* =====================================================================
   עמוד המלצות (3973) - נבנה מחדש מול המקור 2911
   A white heading band, a cream band holding the loop-grid (the same loop
   template 2905 the home carousel uses), then the home page's own CTA band and
   contact block. Numbers measured off /testimonials/ at 1920.
   ===================================================================== */
.elementor-3973 .e-con.elementor-element-tshead{
  background-color:var(--color-white);
  padding:120px var(--space-gutter) 136px;
  flex-direction:column;align-items:center;gap:0;
  /* three soft shapes bleed off the sides and blend the white band into the
     cream one below; the original blurs each by 32px, so each asset is drawn
     on a canvas 128 larger and placed 64 back to keep the shape where it was */
  background-image:
    url(/wp-content/uploads/2026/08/n70-6471.svg),
    url(/wp-content/uploads/2026/08/ts-circ-pinkb.png),
    url(/wp-content/uploads/2026/08/ts-circ-pinkb.png),
    url(/wp-content/uploads/2026/08/ts-circ-peachb.png);
  background-repeat:no-repeat;
  background-size:29px 47px,728px 728px,728px 728px,728px 728px;
  background-position:
    left 443px top 104px,
    left -324px top -124px,
    right -304px top 112px,
    right -214px top 192px}
.elementor-3973 .e-con.elementor-element-tshinner{
  width:100%;max-width:var(--size-content);padding:0;
  flex-direction:column;align-items:center;gap:32px}

/* "המלצות" 72/72 with the handwritten "מהלב" beside it at 110 */
.elementor-3973 .elementor-element-tshinner>h1{
  font-family:var(--font-heading);font-size:72px;line-height:72px;font-weight:500;
  color:var(--color-ink);margin:0;text-align:center}
.elementor-3973 .elementor-element-tshinner>h1 em{
  font-family:var(--font-hand);font-size:110px;line-height:72px;font-weight:400;
  font-style:normal;color:var(--color-coral-dark)}

/* the standfirst is slate here, not ink, and 24/32 at weight 400 */
.elementor-3973 .elementor-element-tshinner>p{
  font-family:var(--font-body);font-size:24px;line-height:32px;font-weight:400;
  color:rgb(100,116,139);width:638px;max-width:100%;text-align:center;margin:0}

/* the cream band behind the grid */
.elementor-3973 .e-con.elementor-element-tsband{
  background-color:var(--color-cream);
  padding:191px var(--space-gutter) 191px;
  flex-direction:column;align-items:center;gap:0;
  background-image:
    url(/wp-content/uploads/2026/08/n70-6472.png),
    url(/wp-content/uploads/2026/08/n70-6397.svg),
    url(/wp-content/uploads/2026/08/ts-circ-yellowb.png);
  background-repeat:no-repeat;
  background-size:43px 49px,64px 64px,528px 528px;
  background-position:
    right 288px top 132px,
    left 162px top 303px,
    left -224px top 156px}
.elementor-3973 .e-con.elementor-element-tsbinner{
  width:100%;max-width:var(--size-content);padding:0;
  flex-direction:column;align-items:center;gap:0}

/* =====================================================================
   תבנית 404 (3980) - נבנתה מחדש מול המקור 2509
   One 896-wide card on a #FAF8F5 band. Left without display conditions on
   purpose; 2509 is still the live 404. Numbers measured off a missing URL
   at 1920, which is where the original renders.
   ===================================================================== */
.elementor-3980 .e-con.elementor-element-e4band{
  background-color:#FAF8F5;
  /* full-bleed, as it is when the template renders as the real 404; in the
     temporary preview page the template widget was boxing it to 992 */
  width:100%;max-width:none;
  padding:143px var(--space-gutter) 139px;
  flex-direction:column;align-items:center;gap:0;
  background-image:
    url(/wp-content/uploads/2026/08/n70-7204.svg),
    url(/wp-content/uploads/2026/08/n70-7212.svg),
    url(/wp-content/uploads/2026/08/n70-7216.png),
    url(/wp-content/uploads/2026/08/n70-7200.svg);
  background-repeat:no-repeat;
  background-size:64px 64px,69px 81px,79px 99px,1920px 256px;
  background-position:
    right 480px top 128px,
    left 465px top 369px,
    left 471px top 1225px,
    left 0 top 626px}

/* the card - 896 wide, radius 80 */
.elementor-3980 .e-con.elementor-element-e4card{
  width:100%;max-width:896px;padding:68px;
  flex-direction:column;align-items:center;gap:0;
  background-color:rgba(255,255,255,.9);border-radius:80px;
  box-shadow:0 12px 60px 0 rgba(255,107,79,.15)}

.elementor-3980 .elementor-element-e4card>img{width:760px;max-width:100%}
/* "404" - 128/128 at weight 300 */
/* atomic widgets carry no elementor-element-<id> class, so the two
   paragraphs inside the card are reached by their order */
.elementor-3980 .elementor-element-e4card>p:nth-of-type(1){
  font-family:var(--font-heading);font-size:128px;line-height:128px;font-weight:300;
  color:var(--color-ink);margin:12px 0 0;text-align:center}
.elementor-3980 .elementor-element-e4card>h1{
  font-family:var(--font-heading);font-size:48px;line-height:48px;font-weight:300;
  color:var(--color-ink);margin:32px 0 0;text-align:center}
.elementor-3980 .elementor-element-e4card>p:nth-of-type(2){
  font-family:var(--font-body);font-size:20px;line-height:32.5px;font-weight:300;
  color:rgb(151,118,105);width:548px;max-width:100%;text-align:center;margin:23px 0 0}

/* --- the search field ---------------------------------------------------
   The original's box is decorative -- a text-editor and an icon, nothing to
   type into. The client asked for a working one, so it is a real WordPress
   search form dressed to the same measurements: 448x62, radius 20, a 2px
   #FFD5CC outline, the mark on the leading edge. The button is first in the
   DOM so RTL puts it on the right without needing row-reverse. */
.elementor-3980 .e4-search{
  display:flex;flex-direction:row;align-items:center;gap:14px;
  width:448px;max-width:100%;margin:41px auto 0;
  padding:14px 16px;background:var(--color-white);
  border:2px solid #FFD5CC;border-radius:20px;
  box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}
.elementor-3980 .e4-search button{
  border:0;background:transparent;padding:0;cursor:pointer;
  display:flex;align-items:center;flex:0 0 auto}
.elementor-3980 .e4-search img{width:29px;height:29px;display:block}
.elementor-3980 .e4-search input{
  flex:1 1 auto;min-width:0;border:0;background:transparent;outline:none;
  font-family:var(--font-body);font-size:18px;line-height:30px;font-weight:300;
  color:var(--color-ink);text-align:start;
  /* the field's own box padding pushed the row to 73; the original is 62 */
  padding:0;height:30px;-webkit-appearance:none;appearance:none}
.elementor-3980 .e4-search input::-webkit-search-cancel-button{display:none}
.elementor-3980 .e4-search input::placeholder{color:rgb(156,163,175);opacity:1}

/* The site sets a deliberate accessibility ring --
     a:focus-visible, button:focus-visible, input:focus-visible, ...
       { outline:3px solid var(--dm-coral-dk) !important }
   -- which drew it around the field itself, inside the bordered box, so it read
   as a double border. The ring is not removed, it is moved onto the whole box.
   !important is required to answer an !important, and the kit already answers
   the identical case the same way for .elementor-search-form input:focus. */
.elementor-3980 .e4-search input:focus,
.elementor-3980 .e4-search input:focus-visible{
  outline:none!important;border:0;box-shadow:none;border-radius:0}
.elementor-3980 .e4-search:focus-within{
  outline:3px solid var(--dm-coral-dk);outline-offset:2px}
.elementor-3980 .e4-search button:focus-visible{outline-offset:2px;border-radius:8px}

.elementor-3980 .e-con.elementor-element-e4btns{
  flex-direction:row;align-items:center;justify-content:center;gap:25px;
  width:auto;padding:0;margin-block-start:48px}
.elementor-3980 .elementor-element-e4btns>a{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-size:20px;line-height:28px;font-weight:300;
  text-decoration:none;border:0;border-radius:9999px;white-space:nowrap}
.elementor-3980 .elementor-element-e4btns>a:first-child{
  /* 286 wide in the original: 40 of padding, a 24 mark, 26 of gap, the label */
  color:var(--color-white);background-color:#FF6B4F;
  padding:24px 90px 24px 40px;
  background-image:url(/wp-content/uploads/2026/08/n70-7248.svg);
  background-repeat:no-repeat;background-size:24px 24px;
  background-position:right 40px center}
.elementor-3980 .elementor-element-e4btns>a:last-child{
  /* same 2px #FFD5CC outline as the search box. Padding drops from 42/22 to
     40/20 so the button still measures the original's 201x72 with the border. */
  color:var(--color-ink);background-color:var(--color-white);
  border:2px solid #FFD5CC;padding:20px 40px}

.elementor-3980 .e-con.elementor-element-e4sugh{
  flex-direction:row;align-items:center;gap:12px;width:auto;padding:0;
  margin-block-start:76px}
.elementor-3980 .elementor-element-e4sugh>img{width:40px;max-width:40px}
.elementor-3980 .elementor-element-e4sugh>h3{
  font-family:var(--font-body);font-size:20px;line-height:28px;font-weight:300;
  color:rgb(151,118,105);margin:0;white-space:nowrap}

/* four suggestion cards, 172 apiece with 24 between, alternating warm greys */
.elementor-3980 .e-con.elementor-element-e4sugg{
  display:grid;grid-template-columns:repeat(4,172px);gap:24px;
  width:auto;padding:0;margin-block-start:39px;justify-content:center}
.elementor-3980 .elementor-element-e4sugg>.e-con{
  flex-direction:column;align-items:center;gap:14px;
  padding:26px 12px;border-radius:40px;
  box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}
.elementor-3980 .elementor-element-e4sugg>.e-con:nth-child(odd){background-color:#FFF5F3}
.elementor-3980 .elementor-element-e4sugg>.e-con:nth-child(even){background-color:#FAF8F5}
.elementor-3980 .elementor-element-e4sugg>.e-con>img{width:68px;max-width:68px}
.elementor-3980 .elementor-element-e4sugg p{
  font-family:var(--font-body);font-size:18px;line-height:28px;font-weight:500;
  color:var(--color-ink);margin:0;text-align:center;white-space:nowrap}
.elementor-3980 .elementor-element-e4sugg p a{color:inherit;text-decoration:none}

/* --- CTA copy: three lines, as the original -----------------------------
   The original sets white-space:nowrap on .t-cta-copy, so the client's two
   <br>s give exactly three lines and the middle one overflows its box. Without
   it the middle segment wraps and the block comes out four lines deep. The
   generator swallows a white-space prop on a global class (same family as
   grid-column and flex), so it is written here. The phone override lives in
   mobile.css, where nowrap would run straight off the screen. */
.elementor .t-cta-copy{white-space:nowrap}

/* =====================================================================
   עמוד מאמרים (3987) - נבנה מחדש מול המקור 2381
   איזור א: ההירו. באנד לבן בגובה 456 שנמדד על /articles/ ב-1920:
   120 למעלה, 168 של תוכן (72 כותרת + 32 מרווח + 64 שתי שורות), 168 למטה.
   ארבעת העיטורים הם אותה ערכה שהמלצות משתמשת בה, באותם מיקומים בדיוק -
   רק העצם יורדת מ-104 ל-224. כל כתם מטושטש 32px במקור, ולכן הנכס מצויר על
   בד גדול ב-128 ומוסט 64 אחורה כדי שהצורה תישאר במקום שבו היא צוירה.
   ===================================================================== */
.elementor-3987 .e-con.elementor-element-arhead{
  background-color:var(--color-white);
  /* 105, not 120: the original parks the two heading halves absolutely, so its
     h1 line box is exactly 72. Inline, the 110px handwriting grows the line box
     to 87 and the brown half renders 15 lower -- measured off the ink, not off
     the boxes. Taking the 15 back out of the top padding puts the words where
     they are drawn and leaves the band at its measured 456. */
  padding:105px var(--space-gutter) 168px;
  flex-direction:column;align-items:center;gap:0;
  background-image:
    url(/wp-content/uploads/2026/08/n70-6471.svg),
    url(/wp-content/uploads/2026/08/ts-circ-pinkb.png),
    url(/wp-content/uploads/2026/08/ts-circ-pinkb.png),
    url(/wp-content/uploads/2026/08/art-blob-peachb.png);
  background-repeat:no-repeat;
  background-size:29px 47px,728px 728px,728px 728px,728px 728px;
  background-position:
    left 443px top 224px,
    left -324px top -124px,
    right -304px top 112px,
    right -214px top 192px}
.elementor-3987 .e-con.elementor-element-arhinner{
  width:100%;max-width:var(--size-content);padding:0;
  flex-direction:column;align-items:center;gap:32px}

/* "מאמרים" 72/72 with the handwritten "ותובנות" beside it at 110 */
.elementor-3987 .elementor-element-arhinner>h1{
  font-family:var(--font-heading);font-size:72px;line-height:72px;font-weight:500;
  color:var(--color-ink);margin:0;text-align:center;
  /* the drawn gap between the two halves is 29px; one plain word space between
     these two faces measures 23 */
  word-spacing:6px}
.elementor-3987 .elementor-element-arhinner>h1 em{
  font-family:var(--font-hand);font-size:110px;line-height:72px;font-weight:400;
  font-style:normal;color:var(--color-coral-dark);
  /* the original lifts the handwriting 21 above the brown half and only 15 of
     that comes back with the padding; relative offset, so nothing reflows */
  position:relative;top:-6px}

/* The standfirst is the one thing on this page that is NOT centred at 1920:
   the original right-aligns it inside its 638 column, so both lines end flush
   at the same edge. (המלצות centres the same slot -- they differ, and each
   follows its own source.) The phone override is in mobile.css. */
.elementor-3987 .elementor-element-arhinner>p{
  font-family:var(--font-body);font-size:24px;line-height:32px;font-weight:400;
  color:rgb(100,116,139);width:638px;max-width:100%;text-align:right;margin:0}

/* --- מאמרים, איזור ב: שורת הסינון והחיפוש ------------------------------
   A 130-tall white strip under the hero: 40 of padding, a 49-tall row, 40
   again. The row is the 1300 content column, space-between -- the chips at the
   leading edge, the search box at the trailing one. */
.elementor-3987 .e-con.elementor-element-arfbar{
  background-color:var(--color-white);
  padding:40px var(--space-gutter);
  flex-direction:column;align-items:center;gap:0;
  border-bottom:1px solid var(--color-input-border);
  box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}
.elementor-3987 .e-con.elementor-element-arfinner{
  width:100%;max-width:var(--size-content);padding:0;
  flex-direction:row;align-items:center;justify-content:space-between;gap:0}

/* the chip rail */
.elementor-3987 .elementor-element-arfilt{
  width:731px;max-width:731px;flex:0 0 731px}
.elementor-3987 .elementor-element-arfilt .e-filter{gap:12px}
/* The terms come back in the taxonomy's own order; the drawing puts them in a
   different one, so each chip is placed by its slug. Same six values the
   original carries. */
.elementor-3987 .elementor-element-arfilt .e-filter-item[data-filter="__all"]{order:0}
.elementor-3987 .elementor-element-arfilt .e-filter-item[data-filter="dog-assisted-therapy"]{order:1}
.elementor-3987 .elementor-element-arfilt .e-filter-item[data-filter="licbt"]{order:2}
.elementor-3987 .elementor-element-arfilt .e-filter-item[data-filter="anxiety-boundaries"]{order:3}
.elementor-3987 .elementor-element-arfilt .e-filter-item[data-filter="children-teens"]{order:4}
.elementor-3987 .elementor-element-arfilt .e-filter-item[data-filter="dog-training"]{order:5}

/* The search box wears .dm-search, so the kit's DM layer already gives it the
   white ground, the 2px #FFD5CC outline and the 20px radius. That layer also
   sets min-height:62px !important, which is the header's search, not this one:
   here the box is 49 and the field inside it 45. Answering an !important needs
   an !important -- the exception the brief allows, and the same one the kit
   itself uses on .elementor-search-form's focus ring. */
.elementor-3987 .elementor-element-arsrch{
  width:320px;max-width:320px;flex:0 0 320px}
.elementor-3987 .elementor-element-arsrch .elementor-search-form__container{
  min-height:45px!important}
.elementor-3987 .elementor-element-arsrch input[type=search].elementor-search-form__input{
  height:45px!important;line-height:22px!important;
  padding:11px 44px 12px 16px!important;
  font-family:var(--font-body);font-size:14px;font-weight:400}
.elementor-3987 .elementor-element-arsrch .elementor-search-form__submit,
.elementor-3987 .elementor-element-arsrch .elementor-search-form__icon{
  height:45px!important;min-width:44px!important}

/* --- מאמרים, איזור ג: רשת המאמרים -------------------------------------
   The cream band the list sits on: rel-root 586 to 2444 off /articles/, so
   1858 tall, 61 above the grid and 99 below it. One column, seven rows of the
   2513 loop template, 28 between them, then numbered pagination.

   Nine background layers, all measured off the source and all positioned from
   the band's own top edge. The two soft shapes at the top are the same pink
   and peach that bleed down out of the hero -- the filter strip paints opaque
   white across the middle of them, exactly as the original's z-index 8 does,
   so each one is cut and resumed rather than drawn twice. Blurred shapes carry
   64px of margin on every side and are pulled back by the same 64. */
.elementor-3987 .e-con.elementor-element-argband{
  padding:61px var(--space-gutter) 99px;
  flex-direction:column;align-items:center;gap:0;
  background-image:
    url(/wp-content/uploads/2026/08/n70-6472.png),
    url(/wp-content/uploads/2026/08/n70-6397.svg),
    url(/wp-content/uploads/2026/08/n70-6405.svg),
    url(/wp-content/uploads/2026/08/n70-6409.png),
    url(/wp-content/uploads/2026/08/n70-6400.svg),
    url(/wp-content/uploads/2026/08/ts-circ-pinkb.png),
    url(/wp-content/uploads/2026/08/art-blob-peachb.png),
    url(/wp-content/uploads/2026/08/ts-circ-yellowb.png),
    url(/wp-content/uploads/2026/08/art-blob-yl800b.png),
    linear-gradient(116deg, var(--color-cream) 0%, var(--color-cream-light) 50%,
                    var(--color-peach) 100%);
  background-repeat:no-repeat;
  background-size:
    43px 49px, 64px 64px, 69px 81px, 79px 99px, 80px 80px,
    728px 728px, 728px 728px, 528px 528px, 928px 928px, auto;
  background-position:
    /* this one hangs off the page root in the original, not off the band */
    right 288px top 2px,
    left 162px top 173px,
    left 465px top 359px,
    right 463px top 1295px,
    left 480px top 1698px,
    right -304px top -474px,
    right -214px top -394px,
    left -224px top 26px,
    left -362px top 1192px,
    0 0}
.elementor-3987 .e-con.elementor-element-arginner{
  width:100%;max-width:var(--size-content);padding:0;
  flex-direction:column;align-items:center;gap:0}
.elementor-3987 .elementor-element-argrid1{width:100%}

/* --- שורת המאמר (לולאה 2513) נעשית נזילה --------------------------------
   The row card is drawn at 1300: a 417 image column beside a 793 text column,
   both in pixels, so the pair cannot shrink. Below about 1370 the card is wider
   than the column holding it and hangs 46px off each edge -- widthcheck counts
   66 cut elements at 1280. The template itself is left alone because the live
   /articles/ page still renders it; the fixed pair is made proportional here,
   which is also what the single-post related rows will need. */
/* Elementor writes the drawn pixel widths at `.elementor-2513
   .elementor-element.elementor-element-XXXXXXX`, three classes deep, and the
   photo carries `width:417px!important;max-width:none!important` of its own.
   Anything shorter than that loses, so each override adds `.e-con` to clear the
   specificity, and only the photo -- which answers an !important -- carries one.
   Proportions are the drawn ones: 417 of 1300 is 32.08%. */
/* the track first: `repeat(N, 1fr)` resolves to minmax(auto, 1fr), so a grid
   cell whose content is wider than the track simply widens the track and the
   whole row hangs off the page. min-width:0 is what lets the 1fr win. */
.elementor-loop-container.elementor-grid>.e-loop-item{min-width:0}
.elementor-2513 .e-con{min-width:0}
.elementor-2513 .e-con.elementor-element.elementor-element-4d6fd53{
  width:100%;max-width:100%}
/* Every width below keeps the drawn pixel value as its base and adds only a
   ceiling, so at 1300 the card measures exactly what it measures today and
   nothing about the 1920 render moves; the ceiling is what lets it narrow. */
.elementor-2513 .e-con.elementor-element.elementor-element-3129a52{
  width:417px;max-width:100%;flex:0 0 auto}
.elementor-2513 .elementor-element-0a2bf05 img{
  width:100%!important;max-width:100%!important}
.elementor-2513 .e-con.elementor-element.elementor-element-3bc5102{
  flex:1 1 auto;min-width:0}
/* The excerpt used to be a widget parked on position:absolute at a flat 793,
   inside a wrapper on position:relative that reserved 67px for it. Both are
   gone now -- it is an ordinary flow child -- so this rule no longer keys on
   `.elementor-absolute`. Its own custom_css still writes `width:793px!important`,
   which is why the override is still the brief's one allowed exception:
   an !important answering an !important. It also writes `flex:0 0 793px` --
   harmless while the widget was out of flow, but the moment it joined a
   column flex that 793 became a HEIGHT and every article row grew from 208
   to 940. The flex is reset here for the same reason and by the same rule. */
/* `.elementor-widget-text-editor` is carried so this rule outranks the
   element's own custom_css: two !important declarations of equal specificity
   are decided by load order, and the loop template's stylesheet is enqueued
   after the kit's. The `.elementor-absolute` in the old .elementor-kit-6 had been
   doing that job by accident. */
.elementor-2513 .elementor-element.elementor-element-6cde89b.elementor-widget-text-editor{
  width:100%!important;max-width:793px;flex:0 0 auto!important}
.elementor-2513 .e-con.elementor-element.elementor-element-75c5bae,
.elementor-2513 .e-con.elementor-element.elementor-element-d2188f9,
.elementor-2513 .e-con.elementor-element.elementor-element-845a5ae{
  width:793px;max-width:100%}

/* =====================================================================
   עמוד שירותים (4004) - נבנה מחדש מול המקור 2380
   הירו לבן בגובה 456, ואז באנד קרם בגובה 1938 ובו שבעה כרטיסי שירות
   ברשת של שלושה טורים. כל המידות נמדדו על /services/ ב-1920.
   שבעת הכרטיסים לא נושאים id משלהם - הם מעוצבים מבנית מתוך הרשת, וזו
   הדרך היחידה להלביש אותם כל עוד תקרת המחלקות הגלובליות מלאה.
   ===================================================================== */
.elementor-4004 .e-con.elementor-element-svhead{
  background-color:var(--color-white);
  /* 110, not 125: the inline handwriting grows the h1 line box and renders the
     brown half 15 lower, exactly as it does on the articles hero */
  padding:110px var(--space-gutter) 131px;
  flex-direction:column;align-items:center;gap:0;
  background-image:
    url(/wp-content/uploads/2026/08/n70-6294.svg),
    url(/wp-content/uploads/2026/08/art-blob-peachb.png);
  background-repeat:no-repeat;
  background-size:30px 48px,728px 728px;
  background-position:
    left 442px top 221px,
    right -214px top 192px}
.elementor-4004 .e-con.elementor-element-svhinner{
  width:100%;max-width:var(--size-content);padding:0;
  flex-direction:column;align-items:center;gap:24px}
.elementor-4004 .elementor-element-svhinner>h1{
  font-family:var(--font-heading);font-size:72px;line-height:72px;font-weight:500;
  color:var(--color-ink);margin:0;text-align:center;word-spacing:6px}
.elementor-4004 .elementor-element-svhinner>h1 em{
  font-family:var(--font-hand);font-size:110px;line-height:72px;font-weight:400;
  font-style:normal;color:var(--color-coral-dark);position:relative;top:-6px}
.elementor-4004 .elementor-element-svhinner>p{
  font-family:var(--font-body);font-size:24px;line-height:26px;font-weight:300;
  color:var(--color-ink);width:638px;max-width:100%;text-align:right;margin:0}

/* --- הבאנד של השירותים --- */
.elementor-4004 .e-con.elementor-element-svband{
  padding:132px var(--space-gutter) 110px;
  flex-direction:column;align-items:center;gap:0;
  background-image:
    url(/wp-content/uploads/2026/08/n70-6295.png),
    url(/wp-content/uploads/2026/08/n70-6045.svg),
    url(/wp-content/uploads/2026/08/n70-6053.svg),
    url(/wp-content/uploads/2026/08/n70-6057.png),
    url(/wp-content/uploads/2026/08/n70-6048.svg),
    url(/wp-content/uploads/2026/08/art-blob-peachb.png),
    url(/wp-content/uploads/2026/08/art-blob-yl800b.png),
    linear-gradient(116deg, var(--color-cream) 0%, var(--color-cream-light) 50%,
                    var(--color-peach) 100%);
  background-repeat:no-repeat;
  background-size:
    43px 49px, 64px 64px, 69px 80px, 79px 99px, 80px 80px,
    728px 728px, 928px 928px, auto;
  background-position:
    right 288px top 126px,
    left 162px top 303px,
    left 465px top 476px,
    right 463px top 1388px,
    left 480px top 1778px,
    right -214px top -264px,
    left -362px top 1272px,
    0 0}
.elementor-4004 .e-con.elementor-element-svbinner{
  width:100%;max-width:var(--size-content);padding:0;
  flex-direction:column;align-items:center;gap:0}
/* A grid rather than a wrapped row, for one reason: `grid-auto-rows:1fr` makes
   every row as tall as the tallest card in the whole grid, so all seven come
   out the same height the way they are drawn -- without anyone writing 509
   anywhere. */
.elementor-4004 .e-con.elementor-element-svgrid{
  width:100%;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;
  column-gap:24px;row-gap:86px}

/* --- הכרטיס --- */
.elementor-4004 .elementor-element-svgrid>.e-con{
  width:auto;max-width:100%;
  background-color:var(--color-white);
  border-radius:56px;
  box-shadow:rgba(0,0,0,.1) 3px 6px 22px 0;
  padding:98px 40px 8px;
  flex-direction:column;align-items:center;gap:0}
/* the badge hangs 39 above the card: pulled back through the top padding and
   then given the 25 that separates it from the title */
.elementor-4004 .elementor-element-svgrid>.e-con>img{
  width:112px;height:112px;flex:0 0 auto;margin:-137px 0 25px}
.elementor-4004 .elementor-element-svgrid>.e-con>h3{
  font-family:var(--font-heading);font-size:24px;line-height:32px;font-weight:500;
  color:var(--color-ink);margin:0;text-align:center;width:100%}
.elementor-4004 .elementor-element-svgrid>.e-con>h3 a{
  color:inherit;text-decoration:none}
/* The drawing starts the labelled blocks at the same offset in every card, so
   the standfirst gets a floor of its four drawn lines. Longer copy still grows
   -- this is a floor, not the locked height the original used. */
.elementor-4004 .elementor-element-svgrid>.e-con>p{
  font-family:var(--font-body);font-size:18px;line-height:29.2px;font-weight:300;
  color:var(--color-ink);margin:16px 0 0;text-align:center;width:100%;
  min-height:116.8px}

/* the two labelled blocks: the mark on the leading edge, the words beside it */
.elementor-4004 .elementor-element-svgrid>.e-con>.e-con{
  width:100%;padding:0;
  flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:12px}
.elementor-4004 .elementor-element-svgrid>.e-con>div:nth-of-type(1){margin-top:16px}
.elementor-4004 .elementor-element-svgrid>.e-con>div:nth-of-type(2){margin-top:12px}
.elementor-4004 .elementor-element-svgrid>.e-con>.e-con>img{
  flex:0 0 auto;margin:0}
.elementor-4004 .elementor-element-svgrid>.e-con>div:nth-of-type(1)>img{width:27px;height:28px}
.elementor-4004 .elementor-element-svgrid>.e-con>div:nth-of-type(2)>img{width:26px;height:28px}
.elementor-4004 .elementor-element-svgrid>.e-con>.e-con>.e-con{
  flex:1 1 auto;min-width:0;padding:0;
  flex-direction:column;align-items:stretch;gap:0}
.elementor-4004 .elementor-element-svgrid>.e-con>.e-con>.e-con>p{
  font-family:var(--font-body);font-size:16px;line-height:20px;
  color:var(--color-ink);margin:0;text-align:right}
.elementor-4004 .elementor-element-svgrid>.e-con>.e-con>.e-con>p:nth-of-type(1){font-weight:500}
.elementor-4004 .elementor-element-svgrid>.e-con>.e-con>.e-con>p:nth-of-type(2){font-weight:300}

/* the read-on line: the arrow is the original's own path, as a mask-free data
   URI, because an atomic button renders text and nothing else */
/* the read-on line sits straight under the second block, no gap -- the drawing
   leaves the six pixels of the line box to do that work */
.elementor-4004 .elementor-element-svgrid>.e-con>a{
  margin:0;align-self:center;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-size:14px;line-height:20px;font-weight:500;
  color:var(--color-coral);text-decoration:none;
  background:none;border:0;padding:0;
  /* the original carries the line inside a 29.2 paragraph, and those nine
     pixels are what brings the card to its drawn 509 */
  min-height:29.2px}
.elementor-4004 .elementor-element-svgrid>.e-con>a::after{
  content:"";width:11px;height:16px;flex:0 0 auto;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2011%2016'%3E%3Cpath%20fill='%23FE6F5E'%20d='M0.22%206.97a0.75%200.75%200%200%200%200%201.06l3.75%203.75a0.75%200.75%200%200%200%201.06-1.06L2.56%208.25h7.19a0.75%200.75%200%200%200%200-1.5H2.56l2.47-2.47a0.75%200.75%200%200%200-1.06-1.06z'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:transform .2s var(--dm-hv-ease)}
.elementor-4004 .elementor-element-svgrid>.e-con>a:hover::after{
  transform:translateX(-4px)}

/* =====================================================================
   תבנית עמוד מאמר (4006) - נבנתה מחדש מול המקור 2515
   כותרת, תמונה ראשית, גוף המאמר לצד סרגל צד, ואז "עוד מאמרים".
   כל הטקסט כאן הוא של הפוסט עצמו ומגיע דרך תגיות דינמיות, ולכן הווידג'טים
   הורמו מ-2515 כמו שהם ורק עץ הקונטיינרים נבנה מחדש.
   כרגע התנאי מכוון לפוסט 2428 בלבד - 2515 עדיין החי לכל השאר.
   ===================================================================== */
.elementor-4006 .e-con.elementor-element-arthead{
  background-color:var(--color-white);
  padding:165px var(--space-gutter) 104px;
  flex-direction:column;align-items:center;gap:0;
  background-image:url(/wp-content/uploads/2026/08/n70-6573.svg);
  background-repeat:no-repeat;background-size:26px 51px;
  background-position:left 444px top 284px}
.elementor-4006 .e-con.elementor-element-artinner{
  width:100%;max-width:var(--size-content);padding:0;
  flex-direction:column;align-items:center;gap:24px}
.elementor-4006 .elementor-element-artinner .elementor-widget-heading{width:100%}
.elementor-4006 .elementor-element-artinner h1{
  font-family:var(--font-heading);font-size:60px;line-height:60px;font-weight:500;
  color:var(--color-ink);margin:0;text-align:center;
  width:1188px;max-width:100%;margin-inline:auto}
.elementor-4006 .elementor-element-4e97f0d{width:100%;padding-bottom:16px}
.elementor-4006 .elementor-element-4e97f0d p{
  font-family:var(--font-body);font-size:24px;line-height:32px;font-weight:300;
  color:var(--color-ink);margin:0;text-align:center;
  width:920px;max-width:100%;margin-inline:auto}

/* --- the featured image --- */
.elementor-4006 .e-con.elementor-element-artimg{
  background-color:var(--color-white);
  padding:40px var(--space-gutter);
  flex-direction:column;align-items:center;gap:0;
  background-image:url(/wp-content/uploads/2026/08/n70-6574.png);
  background-repeat:no-repeat;background-size:42px 50px;
  background-position:right 289px top 281px}
.elementor-4006 .e-con.elementor-element-artimgin{
  width:100%;max-width:var(--size-content);padding:0;
  flex-direction:column;align-items:center;gap:0}
.elementor-4006 .elementor-element-654755f{width:100%;max-width:1256px}
.elementor-4006 .elementor-element-654755f img{
  width:100%;height:350px;object-fit:cover;border-radius:32px;display:block}

/* --- גוף המאמר לצד סרגל הצד --- */
.elementor-4006 .e-con.elementor-element-artbody{
  background-color:var(--color-white);
  padding:40px var(--space-gutter);
  flex-direction:column;align-items:center;gap:0}
.elementor-4006 .e-con.elementor-element-artbodyin{
  width:100%;max-width:var(--size-content);padding:0;
  flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:80px}
.elementor-4006 .e-con.elementor-element-artmain{
  width:836px;max-width:100%;flex:1 1 836px;min-width:0;padding:0;
  flex-direction:column;align-items:stretch;gap:48px}
.elementor-4006 .e-con.elementor-element-artside{
  width:384px;flex:0 0 384px;min-width:0;padding:0;
  flex-direction:column;align-items:stretch;gap:32px}

/* the post's own copy: the sizes the original renders it at */
.elementor-4006 .dm-article-body p{
  font-family:var(--font-body);font-size:16px;line-height:33.4px;font-weight:300;
  color:var(--color-ink);margin:0 0 20px}
.elementor-4006 .dm-article-body h2{
  font-family:var(--font-heading);font-size:28px;line-height:36.4px;font-weight:500;
  color:var(--color-ink);margin:40px 0 16px}
.elementor-4006 .dm-article-body h3{
  font-family:var(--font-heading);font-size:22px;line-height:30px;font-weight:500;
  color:var(--color-ink);margin:32px 0 12px}
.elementor-4006 .dm-article-body ul,
.elementor-4006 .dm-article-body ol{margin:0 0 24px;padding-inline-start:24px}
.elementor-4006 .dm-article-body li{
  font-family:var(--font-body);font-size:16px;line-height:30.2px;font-weight:300;
  color:var(--color-ink);margin:0 0 8px}
.elementor-4006 .dm-article-body strong{font-weight:500}
.elementor-4006 .dm-article-body img{max-width:100%;height:auto;border-radius:24px}

/* --- "עוד מאמרים שיעניינו אתכם" --- */
.elementor-4006 .e-con.elementor-element-artmore{
  background-color:var(--color-cream);
  padding:80px var(--space-gutter);
  flex-direction:column;align-items:center;gap:0}
.elementor-4006 .e-con.elementor-element-artmorein{
  width:100%;max-width:var(--size-content);padding:0;
  flex-direction:column;align-items:stretch;gap:40px}
.elementor-4006 .e-con.elementor-element-artmorehd{
  width:100%;padding:0;
  flex-direction:row;align-items:center;justify-content:space-between;gap:24px}
.elementor-4006 .elementor-element-artmorehd h2{
  font-family:var(--font-heading);font-size:30px;line-height:36px;font-weight:500;
  color:var(--color-ink);margin:0}
.elementor-4006 .elementor-element-30101f9 .elementor-button{
  background:none;padding:0;color:var(--color-coral)}
.elementor-4006 .elementor-element-30101f9 .elementor-button-text{
  font-family:var(--font-body);font-size:16px;line-height:24px;font-weight:500}

/* =====================================================================
   תבנית עמוד שירות (4007) - נבנתה מחדש מול המקור 2733
   אחד-עשר איזורים משלה, ואז ההמלצות, באנר ה-CTA ובלוק צור קשר. כל הטקסט
   כאן שייך לשירות שהתבנית מרנדרת ומגיע דרך תגית dm-svc-field, ולכן
   הווידג'טים הורמו מ-2733 כמו שהם - 64 קישורים דינמיים ששכתוב שלהם ביד
   היה שובר בשקט. הבאנדים סביבם חדשים.
   התנאי מכוון כרגע לעמוד 2386 בלבד; ששת עמודי השירות האחרים עדיין על 2733.
   ===================================================================== */

/* =====  תבנית עמוד שירות (4007) - רוחבים שלא יודעים להתכווץ  ============ */
/* ההרמה מ-2733 שמרה `width` בפיקסלים על 99 קונטיינרים - הרוחב שבו הם צוירו.
   ארבעה מהם הם עוטפים במלוא הרוחב שנכתבו כ-`width:1920px`, כלומר "החלון"
   מאוית כמספר; הם הופכים ל-100%. כל השאר הם קופסאות תוכן שהרוחב המצויר שלהן
   עדיין הבסיס הנכון ב-1920, אז הן שומרות עליו ומקבלות תקרה: max-width:100%
   נותן למסלול הרשת או לחלון צר יותר לנצח, ושום דבר לא זז ב-1920. */
.elementor-4007 .e-con.elementor-element-7287e09,
.elementor-4007 .e-con.elementor-element-23bf250,
.elementor-4007 .e-con.elementor-element-91b7a1c,
.elementor-4007 .e-con.elementor-element-3b1b57a{width:100%}
.elementor-4007 .elementor-element-41a68db{width:100%}

/* קונטיינרים בלבד. הכללת `img` כאן דרסה את `icon-tile-64` - האייקון של באנר
   ה-CTA הוא 64px מהמחלקה הגלובלית, וכלל ברוחב הזה ניצח אותה בספציפיות ותפח
   ל-1824. תמונות כבר מקבלות max-width מבסיס אלמנטור. */
.elementor-4007 .e-con[class*="elementor-element-"],
.elementor-4007 .elementor-widget[class*="elementor-element-"]{max-width:100%}

/* ⚠ הבלוק הזה חייב לשבת *לפני* הכללים הממוקדים שאחריו: `max-width:100%`
   שלו נושא אותה ספציפיות כמו `max-width:var(--size-content)` על שמונת
   קונטיינרי ה-`*in`, וכשהוא ישב בסוף הקובץ הוא ניצח ופתח את עמודת התוכן
   מ-1300 ל-1824 בחמישה באנדים. */

/* the eleven bands, and the eleven columns inside them. Listed by name rather
   than matched on a substring: `[class*="in"]` also catches svpgain and
   svpworkin's parent, and boxed a whole band to 1300 by accident. */
.elementor-4007 .e-con.elementor-element-svphero,
.elementor-4007 .e-con.elementor-element-svpwho,
.elementor-4007 .e-con.elementor-element-svpgal,
.elementor-4007 .e-con.elementor-element-svphelp,
.elementor-4007 .e-con.elementor-element-svpmeet,
.elementor-4007 .e-con.elementor-element-svpwork,
.elementor-4007 .e-con.elementor-element-svpgain,
.elementor-4007 .e-con.elementor-element-svpfaq,
.elementor-4007 .e-con.elementor-element-svptest,
.elementor-4007 .e-con.elementor-element-svpcta,
.elementor-4007 .e-con.elementor-element-svpcon{
  flex-direction:column;align-items:center;gap:0;width:100%;max-width:none}
.elementor-4007 .e-con.elementor-element-svpwhoin,
.elementor-4007 .e-con.elementor-element-svpwhoin,
.elementor-4007 .e-con.elementor-element-svphelpin,
.elementor-4007 .e-con.elementor-element-svpmeetin,
.elementor-4007 .e-con.elementor-element-svpworkin,
.elementor-4007 .e-con.elementor-element-svpgainin,
.elementor-4007 .e-con.elementor-element-svpfaqin,
.elementor-4007 .e-con.elementor-element-svptestin{
  width:100%;max-width:var(--size-content);padding:0;
  flex-direction:column;align-items:center;gap:0}

/* 1 - הבאנד הקרם: הירו, הכותרת ושלושת הכרטיסים */
.elementor-4007 .e-con.elementor-element-svphero{
  padding:144px var(--space-gutter) 216px;
  background-image:linear-gradient(116deg, var(--color-cream) 0%,
                   var(--color-cream-light) 50%, var(--color-peach) 100%)}
/* the hero band's column is 1347 rather than the usual 1300, because the row
   inside it is; the cards below stay at 1300 and centre themselves */
.elementor-4007 .e-con.elementor-element-svphin{
  width:100%;max-width:1347px;padding:0;
  flex-direction:column;align-items:center;gap:0}
.elementor-4007 .e-con.elementor-element-svpcards{max-width:var(--size-content)}
/* the hero row is 1347 across, not 1300: the two columns are drawn at 310 and
   971 and the second is 686 wide, so the pair runs past the content column */
.elementor-4007 .e-con.elementor-element-svphcols{
  width:100%;max-width:1347px;padding:0;
  flex-direction:row;align-items:flex-start;justify-content:space-between;gap:0}
.elementor-4007 .elementor-element-a8d494e{margin-top:172px}
.elementor-4007 .e-con.elementor-element-svpcards{margin-top:64px}
.elementor-4007 .e-con.elementor-element-4e3f3ea{
  width:661px;max-width:100%;flex:0 1 661px;padding:0}
.elementor-4007 .e-con.elementor-element-993cdad{
  width:686px;max-width:100%;flex:0 0 686px;padding:0;
  align-items:center;justify-content:center}
.elementor-4007 .e-con.elementor-element-svpcards{
  width:100%;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:1fr;column-gap:24px}
.elementor-4007 .elementor-element-svpcards>.e-con{
  padding:40px;background-color:var(--color-white);border-radius:32px;
  box-shadow:0 1px 2px 0 rgba(0,0,0,.05);border:1px solid var(--color-input-border);
  align-items:center;justify-content:center;gap:0}

/* 2 - הבאנד האפרסקי: שני גושי טקסט לצד הדיוקן */
.elementor-4007 .e-con.elementor-element-svpwho{
  padding:64px var(--space-gutter) 104px;
  background-color:var(--color-peach)}
.elementor-4007 .e-con.elementor-element-svpwhoin{
  flex-direction:row;align-items:flex-start;justify-content:space-between;gap:80px}
.elementor-4007 .e-con.elementor-element-svpwhotx{
  width:662px;max-width:100%;flex:1 1 662px;padding:0;gap:111px}
.elementor-4007 .e-con.elementor-element-0a932b6{
  width:377px;flex:0 0 377px;padding:0}

/* Two of the lifted blocks laid their children out by absolute placement and
   nothing else, so once that came off they stacked into a single column. Both
   are plainly grids in the drawing, and are restated as grids: six help cards
   at 417 across three columns, six outcome chips at 328. */
.elementor-4007 .elementor-element-cb25a76{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:24px;row-gap:23px;width:100%;max-width:var(--size-content)}
.elementor-4007 .elementor-element-d9fdf53{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:20px;row-gap:20px;width:100%;max-width:1024px}

/* The original laid twenty-five of these containers out as rows and said so
   only through absolute placement -- a split heading's two halves, a chip's
   mark beside its words, a step's badge beside its text. With the placement
   gone they each became a column and the page grew by a third. Found by
   comparing the measured x and y of every container's children, not by eye. */
.elementor-4007 .e-con.elementor-element-93e9e81,
.elementor-4007 .e-con.elementor-element-1e69d71,
.elementor-4007 .e-con.elementor-element-ca3d2c6,
.elementor-4007 .e-con.elementor-element-33e624f,
.elementor-4007 .e-con.elementor-element-6ff16c4,
.elementor-4007 .e-con.elementor-element-157ca6c,
.elementor-4007 .e-con.elementor-element-e355457,
.elementor-4007 .e-con.elementor-element-cd0da81,
.elementor-4007 .e-con.elementor-element-c6689bc,
.elementor-4007 .e-con.elementor-element-ac1ef7e,
.elementor-4007 .e-con.elementor-element-25d4ff0,
.elementor-4007 .e-con.elementor-element-b76c9ec,
.elementor-4007 .e-con.elementor-element-76e1264,
.elementor-4007 .e-con.elementor-element-499c897,
.elementor-4007 .e-con.elementor-element-4a3d86d,
.elementor-4007 .e-con.elementor-element-e94000d,
.elementor-4007 .e-con.elementor-element-4087028,
.elementor-4007 .e-con.elementor-element-86ee502,
.elementor-4007 .e-con.elementor-element-19fb1a3,
.elementor-4007 .e-con.elementor-element-e4e85b3,
.elementor-4007 .e-con.elementor-element-1d96629,
.elementor-4007 .e-con.elementor-element-351a76a,
.elementor-4007 .e-con.elementor-element-1c6c361,
.elementor-4007 .e-con.elementor-element-a68471d,
.elementor-4007 .e-con.elementor-element-2e31a23{
  flex-direction:row;align-items:center;justify-content:flex-start;
  flex-wrap:nowrap}
/* the five steps: the text column, then the numbered badge on the leading edge */
.elementor-4007 .elementor-element-f3a3512>.e-con{
  flex-direction:row;align-items:flex-start;justify-content:space-between;
  flex-wrap:nowrap;width:100%}
.elementor-4007 .elementor-element-f3a3512>.e-con>.e-con:first-child{
  flex:1 1 auto;min-width:0}

/* 3 - רצועת הגלריה */
.elementor-4007 .e-con.elementor-element-svpgal{padding:64px 0 104px}
.elementor-4007 .elementor-element-41a68db{width:100%}

/* 4-8 - האיזורים הפנימיים, כל אחד על הבאנד שלו */
.elementor-4007 .e-con.elementor-element-svphelp{
  padding:104px var(--space-gutter);background-color:var(--color-white)}
.elementor-4007 .e-con.elementor-element-svpmeet{
  padding:0 var(--space-gutter);background-color:var(--color-cream)}
.elementor-4007 .e-con.elementor-element-svpwork{
  padding:107px var(--space-gutter) 89px}
.elementor-4007 .e-con.elementor-element-svpworkin{
  flex-direction:row;align-items:flex-start;justify-content:space-between;gap:80px}
.elementor-4007 .e-con.elementor-element-3db3b0d{
  width:638px;max-width:100%;flex:1 1 638px;padding:0}
.elementor-4007 .e-con.elementor-element-31c362c{
  width:574px;max-width:100%;flex:0 0 574px;padding:0}

/* --- ההירו נעגן לעמודת התוכן, לא למרכז החלון ---------------------------
   שורת ההירו רחבה 1347: 661 לעמודת הטקסט ועוד 686 לתצלום, שגולש 47px מעבר
   לעמודת 1300 שכל שאר הבאנדים חיים בה. במקור הקצה השמאלי שלה יושב בדיוק על
   310 - הקצה של עמודת התוכן - ולא במרכז השוליים, ולכן כל ההירו היה 23px
   שמאלה. שוליים לוגיים שליליים מצמצמים את קופסת השוליים חזרה ל-1300, וכך
   המרכוז מיישר אותה לעמודה בעוד התצלום גולש ימינה. */
.elementor-4007 .e-con.elementor-element-svphin{
  width:100%;max-width:calc(var(--size-content) + 47px);
  margin-inline-start:-47px}

/* רווח המילה בכותרת מפוצלת. שני חצאי הכותרת הם שני אלמנטים, והרווח ביניהם
   הוא הרווח שהיה במקור בין המילים - 9 עד 24 לפי גודל הגופן. אחרי ההרמה הוא
   היה 0 בכולן, ושתי המילים נגעו. */
/* הכותרת "האם זה מוכר לכם?" ממורכזת על העמוד (960), לא על שורת ההירו -
   ושורת ההירו גולשת 47 ימינה, אז המרכז שלה הוא 983.5. שוליים לוגיים של 47
   מבטלים בדיוק את הגלישה ומחזירים את הכותרת למרכז העמוד. */
.elementor-4007 .e-con.elementor-element-a8d494e{margin-inline-start:47px}
.elementor-4007 .e-con.elementor-element-ca3d2c6{gap:9px}
.elementor-4007 .e-con.elementor-element-b76c9ec{gap:15px}
.elementor-4007 .e-con.elementor-element-157ca6c{gap:18px}
.elementor-4007 .e-con.elementor-element-33e624f{gap:24px}

/* --- ריפודי המרכוז של המקור, גם בדסקטופ --------------------------------
   המקור לא ידע לרכז: הוא הזיז אלמנטים בריפוד צדדי ענק. `8adcce7` נושא
   `0 310px` - ולכן רשת שישה הכרטיסים שאמורה לפרוש 1300 (310..1610 במקור)
   נחנקה ל-680. `91b7a1c` נושא `80px 384px` ולכן רשת השבבים שאמורה להיות
   1024 (448..1472) נחנקה ל-532 והכותרת נשברה. הריפוד יורד, והרוחב שכל בלוק
   באמת צריך נאמר עליו ישירות. */
.elementor-4007 .e-con.elementor-element-8adcce7,
.elementor-4007 .e-con.elementor-element-91b7a1c{padding-inline:0}
.elementor-4007 .e-con.elementor-element-960c37b{
  width:680px;max-width:100%;margin-inline:auto}
.elementor-4007 .e-con.elementor-element-b4e7e48{align-items:center}
.elementor-4007 .e-con.elementor-element-733b8ba{width:670px;max-width:100%}
.elementor-4007 .elementor-element-d9fdf53{margin-inline:auto}

/* --- חמש שורות כרטיס "מסגרת השירות" -------------------------------------
   כל שורה היא [אייקון][טקסט]; במקור האייקון תופס עמודה קבועה של 68 בקצה
   הימני (812..880) והטקסט נעצר ב-788. אחרי ההרמה רוחב האייקון נקבע לפי
   התמונה עצמה, ולכן קצה הטקסט קפץ בין 798 ל-817 משורה לשורה. עמודה קבועה
   ברשת מיישרת את כולן. */
.elementor-4007 .e-con.elementor-element-76e1264,
.elementor-4007 .e-con.elementor-element-499c897,
.elementor-4007 .e-con.elementor-element-4a3d86d,
.elementor-4007 .e-con.elementor-element-e94000d,
.elementor-4007 .e-con.elementor-element-4087028{
  display:grid;grid-template-columns:68px minmax(0,1fr);
  column-gap:24px;padding-inline:0;align-items:start}

/* ארבע שורות "מה קורה בטיפול": אותו סיפור, בלי עמודת אייקון קבועה - כאן
   הריפוד השמאלי (311 עד 588) הוא כל המיקום שהיה להן. */
.elementor-4007 .e-con.elementor-element-e355457,
.elementor-4007 .e-con.elementor-element-cd0da81,
.elementor-4007 .e-con.elementor-element-c6689bc,
.elementor-4007 .e-con.elementor-element-ac1ef7e{padding-inline:0}

/* --- כותרות מפוצלות, גלולות, וכרטיס מסגרת השירות ------------------------
   שלוש בעיות שנשארו מההרמה, כולן מאותו שורש: המקור מיקם אבסולוטית, ולכן שום
   קונטיינר לא נשא הוראת יישור.
   1. שורות הכותרת המפוצלת ממורכזות במקור (740..1187 סביב 960) ואחרי ההרמה
      נצמדו לימין. justify-content:center מחזיר אותן.
   2. שלוש "גלולות" נמתחו לרוחב ההורה - 661 במקום 300, 768 במקום 154, 574
      במקום 193 - כי אין להן רוחב משלהן. width:fit-content מחזיר אותן לגודל
      התוכן, וה-align-self קובע לאיזה צד.
   3. כרטיס "מסגרת השירות" הוא 502 רחב ויושב ב-378..880, כלומר מוזח 68px
      מהקצה השמאלי של עמודת התוכן; בשורת flex עם space-between הוא נצמד
      לקצה. flex-basis קבוע ושוליים לוגיים מחזירים אותו למקום. */
.elementor-4007 .e-con.elementor-element-ca3d2c6,
.elementor-4007 .e-con.elementor-element-157ca6c{justify-content:center}
.elementor-4007 .e-con.elementor-element-a68471d{margin-inline:auto}
.elementor-4007 .e-con.elementor-element-93e9e81,
.elementor-4007 .e-con.elementor-element-25d4ff0{width:fit-content}
.elementor-4007 .e-con.elementor-element-6ff16c4{width:fit-content;align-self:center}
.elementor-4007 .e-con.elementor-element-3db3b0d{
  flex:0 0 502px;width:502px;margin-inline-end:68px}

/* --- ארבעת שלבי "איך זה עובד" -------------------------------------------
   במקור כל שלב הוא: עיגול מספר 80x80 צמוד לקצה הימני של העמודה (1529..1609),
   וממנו שמאלה כותרת וגוף בטור, שנעצרים ב-1513. הכותרת והגוף היו אחיות של
   העיגול בשורה אחת, אז אחרי ההרמה הם התיישבו זה לצד זה. רשת של שתי עמודות
   מחזירה את הצורה: 80px לעיגול מימין, השאר לטקסט, והעיגול פורש על שתי השורות.
   הקו המחבר (2fdc5c3) הוא ילד חמישי של העוטף; במקום להציב אותו אבסולוטית הוא
   נכנס לאותה רשת ופורש על כל ארבע השורות. */
.elementor-4007 .e-con.elementor-element-7d0c0a0,
.elementor-4007 .e-con.elementor-element-a9f301d,
.elementor-4007 .e-con.elementor-element-12ded6b,
.elementor-4007 .e-con.elementor-element-a367c21{
  display:grid;grid-template-columns:80px minmax(0,1fr);
  column-gap:16px;padding:0;align-items:start}
.elementor-4007 .elementor-element-7d0c0a0>*:nth-child(1),
.elementor-4007 .elementor-element-a9f301d>*:nth-child(1),
.elementor-4007 .elementor-element-12ded6b>*:nth-child(1),
.elementor-4007 .elementor-element-a367c21>*:nth-child(1){grid-area:1/2}
.elementor-4007 .elementor-element-7d0c0a0>*:nth-child(2),
.elementor-4007 .elementor-element-a9f301d>*:nth-child(2),
.elementor-4007 .elementor-element-12ded6b>*:nth-child(2),
.elementor-4007 .elementor-element-a367c21>*:nth-child(2){grid-area:2/2}
.elementor-4007 .elementor-element-7d0c0a0>*:nth-child(3),
.elementor-4007 .elementor-element-a9f301d>*:nth-child(3),
.elementor-4007 .elementor-element-12ded6b>*:nth-child(3),
.elementor-4007 .elementor-element-a367c21>*:nth-child(3){grid-area:1/1/3/2}

/* העיגול: ריבוע דרך aspect-ratio, לא דרך גובה נעול. */
.elementor-4007 .e-con.elementor-element-6a53c9b,
.elementor-4007 .e-con.elementor-element-5b30020,
.elementor-4007 .e-con.elementor-element-529575d,
.elementor-4007 .e-con.elementor-element-8ee0688{
  width:80px;aspect-ratio:1;padding:0;
  align-items:center;justify-content:center;flex-direction:row}

.elementor-4007 .e-con.elementor-element-f3a3512{
  display:grid;grid-template-columns:minmax(0,1fr);row-gap:48px;padding-top:24px}
.elementor-4007 .elementor-element-f3a3512>*:nth-child(1){grid-area:1/1}
.elementor-4007 .elementor-element-f3a3512>*:nth-child(2){grid-area:2/1}
.elementor-4007 .elementor-element-f3a3512>*:nth-child(3){grid-area:3/1}
.elementor-4007 .elementor-element-f3a3512>*:nth-child(4){grid-area:4/1}
.elementor-4007 .elementor-element-f3a3512>*:nth-child(5){
  grid-area:1/1/5/2;width:3px;justify-self:start;margin-inline-start:41px;
  align-self:stretch;
  margin-block:40px;border-radius:9999px}
.elementor-4007 .e-con.elementor-element-svpgain{
  padding:89px var(--space-gutter);background-color:var(--color-white)}
.elementor-4007 .e-con.elementor-element-svpfaq{
  padding:142px var(--space-gutter) 85px;background-color:var(--color-cream)}

/* 9-11 - ההמלצות, ה-CTA ובלוק צור קשר */
.elementor-4007 .e-con.elementor-element-svptest{
  padding:138px var(--space-gutter) 101px;background-color:var(--color-cream-light)}
.elementor-4007 .e-con.elementor-element-svptestin{gap:80px}
.elementor-4007 .e-con.elementor-element-svpcta{
  padding:0;background-color:var(--color-peach)}
.elementor-4007 .elementor-element-80e4a7f{width:100%}
.elementor-4007 .e-con.elementor-element-svpcon{padding:0}
.elementor-4007 .elementor-element-26ad8c7{width:100%}

/* --- appearance recovered from 2733's per-element custom_css ---
    Only the properties that describe how a thing looks. The organic
    radii here are what make the portraits blobs rather than squares. */
.elementor-4007 .elementor-element-c88ebaf{line-height:0}
.elementor-4007 .elementor-element-ba1fb20{overflow:clip}
.elementor-4007 .elementor-element-c8c7aff{border-radius:166.42px 242.07px 257.2px 216.35px}
.elementor-4007 .elementor-element-c8c7aff{overflow:clip}
.elementor-4007 .elementor-element-054813a{line-height:0}
.elementor-4007 .elementor-element-054813a img{object-fit:cover}
.elementor-4007 .elementor-element-f7de8bf{border-radius:123.94px 218.9px 210.92px 166.35px}
.elementor-4007 .elementor-element-f7de8bf{overflow:clip}
.elementor-4007 .elementor-element-a04ce4b{line-height:0}
.elementor-4007 .elementor-element-a04ce4b img{object-fit:cover}
.elementor-4007 .elementor-element-dd01af3{border-radius:123.94px 218.9px 210.92px 166.35px}
.elementor-4007 .elementor-element-dd01af3{transform:rotate(-6deg); transform-origin:center center}
.elementor-4007 .elementor-element-dd01af3{opacity:0.9}
.elementor-4007 .elementor-element-2a539af{background-image:linear-gradient(51deg, #FFB09C 0%, #FFF1A1 100%)}
.elementor-4007 .elementor-element-2a539af{border-radius:136.33px 240.78px 232.01px 182.98px}
.elementor-4007 .elementor-element-2a539af{transform:rotate(6deg); transform-origin:center center}
.elementor-4007 .elementor-element-2a539af{opacity:0.8}
.elementor-4007 .elementor-element-94ee9f0{line-height:0}
.elementor-4007 .elementor-element-8e8198b{border-radius:32px 46.55px 49.45px 41.6px}
.elementor-4007 .elementor-element-fe6337d{line-height:0}
.elementor-4007 .elementor-element-7287e09{overflow:clip}
.elementor-4007 .elementor-element-a5482f7{line-height:0}
.elementor-4007 .elementor-element-22e58f3{line-height:0}
.elementor-4007 .elementor-element-1198d6e{line-height:0}
.elementor-4007 .elementor-element-ca8de42{line-height:0}
.elementor-4007 .elementor-element-af33275{line-height:0}
.elementor-4007 .elementor-element-acd2412{line-height:0}
.elementor-4007 .elementor-element-23bf250{overflow:clip}
.elementor-4007 .elementor-element-9e7a699{line-height:0}
.elementor-4007 .elementor-element-5b18364{line-height:0}
.elementor-4007 .elementor-element-3d3918d{line-height:0}
.elementor-4007 .elementor-element-7e24e8b{line-height:0}
.elementor-4007 .elementor-element-ac001b5{line-height:0}
.elementor-4007 .elementor-element-387e3dc{line-height:0}
.elementor-4007 .elementor-element-6a53c9b{border-radius:26.67px 38.79px 41.21px 34.67px}
.elementor-4007 .elementor-element-5b30020{border-radius:26.67px 38.79px 41.21px 34.67px}
.elementor-4007 .elementor-element-529575d{border-radius:26.67px 38.79px 41.21px 34.67px}
.elementor-4007 .elementor-element-8ee0688{border-radius:26.67px 38.79px 41.21px 34.67px}
.elementor-4007 .elementor-element-2fdc5c3{background-image:linear-gradient(180deg, #FFD0C3 0%, #FFFDD0 100%)}
.elementor-4007 .elementor-element-3db3b0d{overflow:clip}
.elementor-4007 .elementor-element-dd33723{line-height:0}
.elementor-4007 .elementor-element-3d32ff8{line-height:0}
.elementor-4007 .elementor-element-4da80e8{line-height:0}
.elementor-4007 .elementor-element-6dc257f{line-height:0}
.elementor-4007 .elementor-element-e924577{border-radius:21.33px 31.03px 32.97px 27.73px}
.elementor-4007 .elementor-element-2def69b{line-height:0}
.elementor-4007 .elementor-element-3858c37{line-height:0}
.elementor-4007 .elementor-element-0d8545e{line-height:0}
.elementor-4007 .elementor-element-b05055b{line-height:0}
.elementor-4007 .elementor-element-f1aa5d1{line-height:0}
.elementor-4007 .elementor-element-5b64095{line-height:0}
.elementor-4007 .elementor-element-112de4b{line-height:0}
.elementor-4007 .elementor-element-5dfc932{overflow:clip}
.elementor-4007 .elementor-element-d64134a{overflow:clip}
.elementor-4007 .elementor-element-b636095{overflow:clip}
.elementor-4007 .elementor-element-80c627b{overflow:clip}
.elementor-4007 .elementor-element-40850c8{overflow:clip}
.elementor-4007 .elementor-element-dmt707799 .swiper-pagination-bullet{opacity:1}
.elementor-4007 .elementor-element-dmt707799 .swiper-pagination-bullet-active{border-radius:4px}
.elementor-4007 .elementor-element-dmt707799 .swiper-pagination{transform:none; text-align:center}
.elementor-4007 .elementor-element-dmt707799 .swiper-pagination-bullets{transform:none; text-align:center}
.elementor-4007 .elementor-element-d297b70{line-height:0}
/* 62 rules recovered */

/* (the temporary 404 preview page 3981 and its three rules were removed on
   21.08 -- the 404 template 3980 is live on singular/not_found404.) */

/* =====  תבנית תוצאות חיפוש (2522)  ===================================== */
/* סרט ההפרדה היה min_height:16 - גובה נעול על קונטיינר ריק. ריפוד אנכי
   נותן בדיוק את אותם 16 בלי לנעול גובה. */
.elementor-2522 .e-con.elementor-element-daa30f9{padding-block:8px}

/* שלושת הכתמים של העמוד הזה הם קונטיינרים ריקים על position:absolute שגודלם
   נקבע ב-`height` - פקד שאין לקונטיינר של אלמנטור (הוא משתמש ב-min_height) -
   ולכן הם רונדרו תמיד בגובה 0 ומעולם לא נראו. הקונטיינרים המתים הוסרו מהמסמך.
   ניסיתי להחזיר אותם כשכבות רקע ועצרתי: הצורות במקור חדות-קצה בלי blur, בעוד
   שפת הכתמים בכל שאר האתר היא עיגולים מטושטשים - כלומר זו החלטת עיצוב ולא
   שחזור. ההצעה המוכנה שמורה ב-docs/search-ornaments.css. */

/* =====  עמוד הבית (3304) - תיקון 21.08  ================================ */
/* המחלקה `sec-svc` כותבת `padding-block-start: var(--space-section-lg)` אבל
   `padding-block-end: 0` - בלי ריפוד תחתון בכלל. הכפתור "לכל השירותים" הוא
   האלמנט האחרון בבאנד, ולכן הקצה התחתון שלו נגע בדיוק בקו שבו הלבן הופך
   לקרם ונראה מודבק למפריד.
   הריפוד התחתון מקבל את **אותו טוקן** של העליון, ולא מספר קבוע: הטוקן כבר
   יורד מ-128 ל-64 בטלפון, וערך קשיח היה משאיר תחתון כפול מהעליון במובייל.
   `sec-svc` בשימוש פעם אחת בלבד, בעמוד הזה; התיקון ממוקד לעמוד כדי לא לגעת
   במחלקה גלובלית ולסכן וריאנט hover (מלכודת MCP #1). */
.elementor-3304 .e-con.elementor-element-77fbcaa{
  padding-block-end:var(--space-section-lg)}

/* ==== סבב הסקירה של 26.08 ============================================== */

/* --- עימוד רשימת המאמרים -----------------------------------------------
   `.elementor-pagination` הגיע בלי שום עיצוב: שני מספרים אפורים בגודל 14px,
   רוחב 6 ו-8 פיקסלים, בלי מצב פעיל ובלי שטח לחיצה. במובייל זה יעד מגע של
   8x17. גלולות 44x44 הן גם הסטנדרט הנגיש (44 הוא המינימום המומלץ) וגם
   שפת הכפתורים של האתר. */
.elementor-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-block-start: 32px;
}
.elementor-pagination .page-numbers {
  min-width: 44px;
  height: 44px;
  padding-inline: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-family: var(--font-heading), sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-ink);
  background: #fff;
  border: 1px solid rgba(254, 111, 94, .28);
  text-decoration: none;
}
.elementor-pagination .page-numbers.current {
  background: var(--color-coral);
  border-color: var(--color-coral);
}
/* הצבע לבדו נמצא בשליטת חוק של אלמנטור בספציפיות גבוהה שנטען אחרי הקיט
   (#475569 - אפור צפחה שאינו מהפלטה). שלוש חזרות על אותה מחלקה מעלות את
   הספציפיות בלי `!important` ובלי לגעת בחוק שלו. נמדד: המספר הפעיל היה
   נשאר כהה על רקע אלמוג, כלומר ניגודיות גרועה. */
body .elementor-widget-loop-grid .elementor-pagination
  .page-numbers.page-numbers.page-numbers:not(.dots) {
  color: var(--color-ink);
}
body .elementor-widget-loop-grid .elementor-pagination
  .page-numbers.page-numbers.page-numbers.current:not(.dots) {
  color: #fff;
}

/* --- שדה הבחירה בעמוד "צור קשר" ----------------------------------------
   הטופס בעמוד 3970 נבנה בלי המחלקה `dm-form`, ולכן כל בלוק הטפסים שלמעלה
   לא חל עליו. התוצאה: שדות הטקסט 70px גובה ועוטף הבחירה 76 - שישה פיקסלים
   שבולטים בערימה. שאר המידות (רוחב, רדיוס, מסגרת, רקע) כן תואמות, ולכן
   מספיק להשוות את הגובה. */
.elementor-3970 .elementor-field-group .elementor-select-wrapper {
  height: 70px;
}
.elementor-3970 .elementor-field-group .elementor-select-wrapper select {
  height: 100%;
}

/* --- יישור הצ'קמארק ברשימות ---------------------------------------------
   `align-items:center` הציב את הסימן באמצע הפריט. בפריט בן שורה אחת זה
   נכון, בפריט בן שתיים הוא צף בין השורות. `flex-start` מחזיר אותו לשורה
   הראשונה, ו-3px מיישרים אותו אופטית לגובה האות ולא לראש תיבת השורה. */
.elementor-icon-list-items .elementor-icon-list-item {
  align-items: flex-start;
}
.elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-icon {
  margin-block-start: 3px;
}

/* --- אייקון החיפוש בתבנית תוצאות החיפוש ---------------------------------
   הכפתור נושא צבע אלמוג, אבל ה-`fill` של ה-SVG שבתוכו לבן - ולכן על רקע
   השדה הלבן הוא בלתי נראה לגמרי. בעמוד 404, שבו אותו ווידג'ט יושב על רקע
   אחר, האייקון כן נראה, ולכן זה לא נתפס עד שצילמתי את עמוד החיפוש.
   `currentColor` קושר את המילוי לצבע הכפתור במקום לערך קשיח. */
.elementor-search-form__submit {
  color: var(--color-coral);
}
.elementor-search-form__submit svg {
  fill: currentColor;
}

/* ==== סבב הסקירה של 26.08 (ערב) - תיקונים כלל-רוחביים ==================== */

/* שדה האישור בטפסים: קבוצת השדה היא flex, ולכן ה-subgroup התכווץ לרוחב
   התוכן (163px) והתווית נשברה לארבע שורות ליד ריק. */
.elementor-field-type-acceptance .elementor-field-subgroup { width: 100%; }
.dm-form .elementor-field-type-acceptance label { flex: 1 1 0; min-width: 0; }

/* תבנית שירות: שתי בועות הקישוט שליד תמונת הכלבה צפות בלי הקשר בכל רוחב,
   ובדסקטופ הן מותחות את עמודת התמונה 217px מתחת לטקסט ופוערות חור ורוד.
   הלקוחה סימנה אותן במובייל; הסרתי בכל הרוחבים. */
.elementor-4007 .elementor-element-7bfc947,
.elementor-4007 .elementor-element-8e8198b { display: none; }

/* מקצב הסקשן של הסיפור בדסקטופ תוקן במקור (חוקי svpwho/svpgal למעלה):
   171->104 לסקשן, 110->64 לגלריה. הסקשנים אטומיים ולא קוראים לוריאבלים. */

/* ==== 26.08 לילה - הערות חיות של הלקוח (כל הרוחבים) ==================== */

/* שבירת השורה בכותרת ההירו של הבית חיה רק בטלפון; בכל רוחב אחר ה-br כבוי */
.dm-br-m { display: none; }

/* תיבות הוואטסאפ והטלפון בבלוק הקשר: האייקון לפני הטקסטים (ימין ב-RTL),
   בשורה אחת ממורכזת, עם ריווח פנימי כך שהאייקון לא נדבק לדופן */
.elementor-2429 .elementor-element.elementor-element-6e92842,
.elementor-2429 .elementor-element.elementor-element-7e94e89 {
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 22px;
}
.elementor-2429 .elementor-element.elementor-element-c9d4016,
.elementor-2429 .elementor-element.elementor-element-161e56b { order: -1; }
.elementor-2429 .elementor-element.elementor-element-f6be011,
.elementor-2429 .elementor-element.elementor-element-bcb313b { width: auto; flex: 0 1 auto; }

/* ==== 27.08 - סבב הדסקטופ של הלקוח ==================================== */

/* 1. כרטיסי "האם זה מוכר לכם" - שורות לא באותו גובה.
   השורש: הכרטיס הוא row עם align-items:center, אז תוכן בגובה שונה
   (כותרת שנשברת לשתי שורות ב-1280 מול כותרת בשורה אחת) ממורכז אנכית
   וכל כרטיס מתחיל בגובה אחר. flex-start מיישר את כולם לראש הכרטיס. */
.elementor-4007 .e-con.elementor-element-svpc1,
.elementor-4007 .e-con.elementor-element-svpc2,
.elementor-4007 .e-con.elementor-element-svpc3 { align-items: flex-start; }

/* 2. "מסגרת השירות" - לכותרת ולאייקונים היו 4px בלבד עד דופן המסגרת,
   והפינה העגולה חתכה את האות הראשונה. המיכל נושא overflow:clip, ולכן
   כל מה שגלש נעלם. ריפוד אמיתי במקום. */
.elementor-4007 .e-con.elementor-element.elementor-element-3db3b0d {
  padding-inline: 28px;
}

/* 3. "איך זה עובד" - הקו האנכי מצויר אחרי השלבים ב-DOM, שניהם
   position:relative עם z-index:auto, ולכן הקו נצבע מעל עיגולי המספרים
   ועובר דרכם. העיגולים כבר לבנים; מספיק להרים את השלבים שכבה אחת. */
.elementor-4007 .e-con.elementor-element.elementor-element-7d0c0a0,
.elementor-4007 .e-con.elementor-element.elementor-element-a9f301d,
.elementor-4007 .e-con.elementor-element.elementor-element-12ded6b,
.elementor-4007 .e-con.elementor-element.elementor-element-a367c21 { z-index: 1; }

/* 4. באנר "מוכנים לצעד הראשון" - הכפתור התכווץ ל-151px בעוד ה-<a> עצמו
   רוחבו 189px, אז הוא גלש שמאלה מהקופסה שלו והתיישב על דופן הבאנר.
   flex-shrink:0 מחזיר לו את הרוחב הטבעי; השכן שלצידו מתכווץ במקומו. */
.elementor-4006 .elementor-element.elementor-element-57e4861 { flex-shrink: 0; }

/* 5. "שאלות נפוצות" - הזוג היחיד שקיבל line-height 60px וגאפ 0, בעוד
   "באילו קשיים ניתן לטפל?" ו"מה קורה באילוף" קיבלו 72px ו-18/24.
   כתב היד בגודל 110px נדחס לתיבה של 60 ונפל הרבה מתחת לשותף שלו.
   אותו מקצב כמו האחים שלו. (במובייל חוקי ה-!important של השכבה גוברים.) */
.elementor-4007 .e-con.elementor-element.elementor-element-a68471d { gap: 18px; }
.elementor-4007 .elementor-element-cf77058 .elementor-widget-container,
.elementor-4007 .elementor-element-cf77058 .elementor-widget-container > *,
.elementor-4007 .elementor-element-7b9d54f .elementor-widget-container,
.elementor-4007 .elementor-element-7b9d54f .elementor-widget-container > * {
  line-height: 72px;
}

/* 6. האייקון החמישי ב"מסגרת השירות" נמדד 64x28 מול 68x71 של אחיו -
   הוא מיכל עם צורת בלוב, לא ווידג'ט תמונה, והגובה שלו קרס. אותה קופסה
   כמו השאר בכל הרוחבים (הכלל המקביל ב-mobile.css נשאר לטלפון). */
.elementor-4007 .e-con.elementor-element.elementor-element-491c023,
.elementor-4007 .e-con.elementor-element.elementor-element-e924577 {
  width: 68px;
  flex: 0 0 68px;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
}

/* 7. הבלוק הסוגר בעמוד שירות (80e4a7f) נושא `--padding-left/right:576px`
   מהתמלול - מספר שנכון רק ב-1920 בדיוק. נמדד: העמודה יוצאת 768px ב-1920
   (התכנון), אבל 288px ב-1440 ו-**128px ב-1280** - רצועת טקסט עם מילה
   יתומה בשורה. max() נותן בכל רוחב את אותם 768 ממורכזים, וב-1920 הוא
   מחזיר בדיוק 576 כמו היום.
   השובר min-width:1025px הוא בכוונה: מתחתיו שכבת המובייל כבר פותרת את
   זה (20px ריפוד, עמודה מלאה), ואסור שהתיקון הזה יגע בטלפון או בטאבלט.
   זהו האלמנט היחיד מתוך תשעה בעלי ריפוד קבוע 200px+ שעדיין נושא אותו;
   השאר כבר מנוטרלים ע"י חוקי הפריסה של הקיט (נבדק ב-1280/1440/1920). */
@media (min-width: 1025px) {
  .elementor-4007 .e-con.elementor-element.elementor-element-80e4a7f {
    padding-inline: max(70px, calc((100% - 768px) / 2));
  }
}

/* ==== 04.09: סבב ההערות של הלקוחה והמעצבת (כל הרוחבים) ================
   מסמך "הערות לאתר.docx". כל חוק נושא את מספר ההערה מהמסמך (D=דסקטופ,
   M=מובייל). מה שנוגע לטלפון בלבד יושב ב-mobile.css. */

/* --- הבית ---------------------------------------------------------------- */
/* D1 "למה LICBT": התוכן היה ממורכז אנכית בכרטיסים שווי גובה, אז כרטיס עם
   כותרת של שתי שורות התחיל גבוה יותר. הכל לראש הכרטיס. */
.elementor-3304 .e-con.elementor-element.elementor-element-dc042ab > .e-con { justify-content: flex-start; }

/* D4 סדר "שירותים נוספים": אילוף כלבים, פנסיון ביתי, קורס דיגיטלי */
.elementor-3304 .e-con.elementor-element.elementor-element-2e7c582 { order: 1; }
.elementor-3304 .e-con.elementor-element.elementor-element-b8705aa { order: 2; }
.elementor-3304 .e-con.elementor-element.elementor-element-df29104 { order: 3; }

/* D7 ההמלצות: הכרטיסים, מתחתיהם הנקודות, ומתחתיהן שני החיצים זה לצד זה
   (במקום על הכרטיסים). החיצים והנקודות הם אחים של .swiper בתוך עטיפת
   הווידג'ט, לכן הרשת יושבת על העטיפה. מקום לצל מעל הכרטיסים דרך ריפוד
   שלילי-חיובי על .swiper (overflow:hidden שלו היה חותך אותו). */
.elementor .elementor-element.dm-testimonial-carousel > .elementor-widget-container {
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  grid-template-rows: auto auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 20px;
}
.elementor .elementor-element.dm-testimonial-carousel > .elementor-widget-container > .swiper {
  grid-column: 1 / -1;
  grid-row: 1;
  display: block;
  /* room for the card shadow on both sides of the overflow:hidden box */
  padding-top: 36px;
  margin-top: -36px;
  padding-bottom: 64px;
  margin-bottom: -44px;
}
.elementor .elementor-element.dm-testimonial-carousel > .elementor-widget-container > .swiper-pagination {
  grid-column: 1 / -1;
  grid-row: 2;
  position: static;
  width: auto;
  margin: 0;
}
.elementor .elementor-element.dm-testimonial-carousel > .elementor-widget-container > .elementor-swiper-button {
  position: static;
  transform: none;
  grid-row: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  color: var(--color-coral);
  box-shadow: 0 6px 18px rgba(62, 39, 35, .08);
  font-size: 18px;
}
/* RTL: column 1 is the right edge, so "next" sits right of centre and "prev" left of it */
.elementor .elementor-element.dm-testimonial-carousel > .elementor-widget-container > .elementor-swiper-button-next { grid-column: 2; }
.elementor .elementor-element.dm-testimonial-carousel > .elementor-widget-container > .elementor-swiper-button-prev { grid-column: 3; }
/* D7ב הקופסה הגוללת של הציטוט נמשכת עד דופן הכרטיס, כך שהגלגלת יושבת צמוד לשמאל */
@media (min-width: 1025px) {
  .elementor-2905 .elementor-element.elementor-element-08fba78 {
    width: calc(100% + 28px);
    max-width: none;
    margin-inline-end: -28px;
    padding-inline-end: 28px;
  }
}


/* D8 תפריט השירותים הנפתח בסרגל העליון */
.elementor-2405 .elementor-nav-menu--main .sub-menu {
  background: var(--color-cream);
  border: 1px solid rgba(254,111,94,.16);
  border-radius: 18px;
  padding: 10px 8px;
  box-shadow: 0 14px 34px rgba(62,39,35,.12);
  min-width: 250px;
}
.elementor-2405 .elementor-nav-menu--main .sub-menu a {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 17px;
  line-height: 1.3;
}

/* G2 (בוטל 07.09): שורת התיאור ליד הלוגו הוחלפה בלוגו עם סלוגן. נשאר רק
   הכלל שהתפריט לא מתכווץ. */
.elementor-2405 .e-con > .elementor-element.elementor-element-9646fb6 { flex-shrink: 0; width: auto; }

/* D3 + M הפס הצבעוני שבין בלוק הקשר לפוטר: דק */
.elementor-3180 .elementor-element.elementor-element-9d09d8a { --min-height: 6px; min-height: 6px; height: 6px; }

/* --- אודות --------------------------------------------------------------- */
/* D-A1 יותר אוויר בין תמונת הכלבים לטקסט */
.elementor-3775 .e-con.elementor-element.elementor-element-e63e24a { gap: 72px; }
/* D-A2 הקו המקווקו יושב על התפר בין הסקשנים, לא מעליו.
   27.09 (סבב 3): הגרסה של 04.09 (margin-bottom:-32px) לא עבדה. לרצועה יש רקע
   קרם ו-z-index 1, אז החפיפה צבעה קרם על ראש הסקשן הורוד והתפר נשאר מתחת
   לקו; בטלפון החפיפה (32px) הייתה גדולה מהגל (16px) והקו נעלם מתחת לורוד.
   עכשיו גובה הרצועה הוא חצי מגובה הגל (1922x81), הגל גולש ממנה חצי למטה
   ומצויר מעל הסקשן הורוד, והתפר עובר באמצע הקו בכל רוחב. */
.elementor-3775 .e-con.elementor-element.elementor-element-927fc3a {
  aspect-ratio: 1922 / 40.5;
  min-height: 0;
  margin-bottom: 0;
  overflow: visible;
  position: relative;
  z-index: 1;
}
.elementor-3775 .e-con.elementor-element.elementor-element-927fc3a > [data-id="76179d0"] { flex-shrink: 0; }
/* D-A3 הגל שמעל "העקרונות": לבן */
/* 23.09: התמונה האטומית נושאת רק data-id, ולכן החוק של 04.09 לא הגיע אליה */
.elementor-3775 [data-id="8d64972"] { filter: brightness(0) invert(1); }
/* D-A6 + M-A6 הטקסט הרץ של הצוות על ארבע: לימין */
.elementor-3775 .e-con.elementor-element.elementor-element-34d0699 p { text-align: start; }

/* --- צור קשר ------------------------------------------------------------- */
/* D-C1 תיבת הטופס ותיבת פרטי הקשר מתחילות באותו קו */
.elementor-3970 .e-con.elementor-element.elementor-element-ctcols { align-items: start; }
.elementor-3970 .e-con.elementor-element.elementor-element-ctinfo { margin-top: 0; }
/* D-C4 שני מלבנים סביב "בחרו נושא": ה-select הפנימי מוותר על המסגרת שלו,
   העוטף הוא השדה הנראה */
.elementor-field-type-select .elementor-select-wrapper select {
  border: 0;
  box-shadow: none;
  background-color: transparent;
}
/* D-C2/3, G-M2/3: כרטיסי הוואטסאפ והטלפון בבלוק הקשר: הקישור עבר לילדים
   (אייקון ושתי שורות הטקסט); הטקסט לא מקבל עיצוב קישור */
.elementor-2429 .elementor-element-6e92842, .elementor-2429 .elementor-element-7e94e89 { cursor: pointer; }
.elementor-2429 .elementor-element-6e92842 .elementor-widget-text-editor a,
.elementor-2429 .elementor-element-7e94e89 .elementor-widget-text-editor a {
  color: inherit;
  text-decoration: none;
  background: none;
}
.elementor-2429 .elementor-element-6e92842 .elementor-widget-text-editor a::after,
.elementor-2429 .elementor-element-7e94e89 .elementor-widget-text-editor a::after { content: none; }
/* D-H2 "מוכנים להתחיל לעבוד יחד" מתיישר לראש כרטיס הטופס, לא למרכזו */
.elementor-2429 .elementor-element.elementor-element-1b40c22 { --align-items: flex-start; align-items: flex-start; }
/* 23.09 P007: קווי הבסיס של "מוכנים להתחיל" ו"השאירו פרטים" על קו אחד (נמדד: 15px הפרש) */
.elementor-2429 .elementor-element.elementor-element-97ba7fc { --padding-top: 29px; padding-top: 29px; }
/* 27.09 (סבב 3, שלישי ברצף): "ונקשקש" גדל ליחס של כותרת עמוד צור קשר (70 מול
   36). line-height 0 שומר על תיבת השורה, כך שהיישור מול "מוכנים להתחיל" לא זז. */
.elementor-2429 .elementor-element-d2e9b1e em { font-size: 1.94em; line-height: 0; }
/* D-H2 האייקונים בשדות באותו קו: שדה המייל ישב 5px פנימה מהאחרים */
.dm-form .elementor-field-type-email .elementor-field { background-position: right 16px center !important; }
/* M-C2 הקובייה שהופכת כחולה בנגיעה: הדגשת המגע של הדפדפן */
a, button, .e-button-base, .elementor-button { -webkit-tap-highlight-color: transparent; }

/* --- עמוד שירות ---------------------------------------------------------- */
/* D-S1 כותרת הדף לרוחב: הווידג'ט נשא רוחב שרטוט של 338px */
.elementor-4007 .elementor-element.elementor-element-35278e5 { width: 100%; max-width: none; }
.elementor-4007 .elementor-element.elementor-element-93e9e81 { width: fit-content; justify-content: center; }
/* D-S2 רווח בין הכותרת לטקסט בכרטיסי "האם זה מוכר לכם" */
.elementor-4007 .e-con.elementor-element.elementor-element-cb4aa86,
.elementor-4007 .e-con.elementor-element.elementor-element-2da5abe,
.elementor-4007 .e-con.elementor-element.elementor-element-d12c5f6 { gap: 12px; }
/* D-S3 + D-S4 האות ל של "לטפל?" נחתכה והזוהר של הכרטיסים נחתך בצדדים:
   overflow:clip של המיכל (חוק פריסה ישן שלי) */
.elementor-4007 .elementor-element-7287e09 { overflow: visible; }
/* D-S7 "נפוצות" עולה מעט: ראו בבלוק 27.09 (margin-top לא מזיז פריט שמיושר
   לפי קו בסיס, ולכן החוק של 04.09 הוסר) */
/* D-S7 שאלה נפוצה: הטקסט לימין, החץ בשמאל, כל הרוחב */
.dm-faq .elementor-button-content-wrapper { width: 100%; }
.dm-faq .elementor-button-text { flex: 1 1 auto; text-align: right; }
/* D-S5 הרווח בין "באילו קשיים" ל"מה קורה בטיפול" */
.elementor-4007 .e-con.elementor-element-svphelp { padding-bottom: 40px; }
/* D-S6 הסיפור: שני גושי הטקסט אחד מתחת לשני, עמודה אחת ליד התמונה */
.elementor-4007 .e-con.elementor-element-svpwhotx { flex-direction: column; gap: 32px; width: 620px; max-width: 100%; flex: 0 1 620px; }
.elementor-4007 .elementor-element-322672c, .elementor-4007 .elementor-element-e4fe33c { width: 100%; }
/* D-S8 "למידע נוסף" מגלגל אל מתחת לסרגל הדביק, לא מאחוריו */
#dm-svc-more { scroll-margin-top: 120px; }
/* D-S10 "מסגרת השירות": נשימה מעל ומתחת לתוכן */
.elementor-4007 .e-con.elementor-element.elementor-element-3db3b0d { padding: 36px 28px 40px; }
/* D-S11 "מה תוכלו להשיג": הטקסט קיבל רוחב שרטוט ונשבר מוקדם */
.elementor-4007 .elementor-element-d9fdf53 > .e-con > .e-con { flex: 1 1 auto; width: auto; min-width: 0; }

/* --- דף המלצות ----------------------------------------------------------- */
/* D-R1 הרווח בין הפתיח להמלצות */
.elementor-3973 .e-con.elementor-element-tshead { padding-bottom: 56px; }
.elementor-3973 .e-con.elementor-element-tsband { padding-top: 56px; }

/* --- דף שירותים ---------------------------------------------------------- */
/* D-L1 כל הכרטיס לחיץ: קישור הכותרת נמתח על פני הכרטיס (שכבת מצביע בלבד,
   בלי השפעה על הפריסה); הכפתור נשאר מעליו */
.elementor-4004 .e-con.elementor-element-svgrid > .e-con,
.elementor-3304 .e-con.elementor-element-f2af17a > .e-con { position: relative; }
.elementor-4004 .e-con.elementor-element-svgrid > .e-con > .e-heading-base a::after,
.elementor-3304 .e-con.elementor-element-f2af17a > .e-con > .e-heading-base a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.elementor-4004 .e-con.elementor-element-svgrid > .e-con .e-button-base,
.elementor-3304 .e-con.elementor-element-f2af17a > .e-con .e-button-base { position: relative; z-index: 1; }
/* D-L2 רווח בין "לפרטים נוספים" לטקסט ולדופן הכרטיס */
.elementor-4004 .e-con.elementor-element-svgrid > .e-con .e-button-base { margin-top: 24px; }
.elementor-4004 .e-con.elementor-element-svgrid > .e-con { padding-bottom: 36px; }

/* --- עמוד מאמרים --------------------------------------------------------- */
/* D-B1 הרווח בין הפתיח לסרגל הסינון */
.elementor-3987 .e-con.elementor-element-arhead { padding-bottom: 40px; }
.elementor-3987 .e-con.elementor-element-arfbar { padding-top: 24px; }
/* D-B3 כותרת ארוכה: נשברת מאוזן ולא נחתכת (הלולאה נשאה white-space:nowrap) */
.elementor-2513 .elementor-element.elementor-element-adc4e82.elementor-widget { white-space: normal; }
.elementor-2513 .elementor-element.elementor-element-adc4e82 .elementor-heading-title { text-wrap: balance; }

/* --- עמוד מאמר ----------------------------------------------------------- */
/* D-P1 + M-P2 "מאמרים קשורים": האייקון והכותרת בשורה אחת, בכל רוחב.
   המיכל נשא ‎--padding-left:181px‎ מהשרטוט שהצר את התוכן ל-96px. */
.elementor-4006 .e-con.elementor-element.elementor-element-43d42ce { padding-inline: 0; }
.elementor-4006 .elementor-element-43d42ce > div {
  width: 100%;
  max-width: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
.elementor-4006 .elementor-element-43d42ce .elementor-widget-heading { width: auto; }
.elementor-4006 .elementor-element-43d42ce h3 { white-space: nowrap; text-align: start; }
/* D-P6 חותמת הכפה בבאנר: אייקון וקטורי נקי בתוך ריבוע מעוגל */
.elementor-4006 .elementor-element.elementor-element-3c9956f.dm-cta-paw {
  background: rgba(255,255,255,.22);
  border-radius: 28px;
  padding: 30px;
  box-sizing: border-box;
}
.elementor-4006 .elementor-element.elementor-element-3c9956f.dm-cta-paw img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
/* D-P7 "עוד מאמרים": כרטיסים באותו גובה, "קרא עוד" צמוד לתחתית */
.elementor-4006 .dm-more-grid .elementor-loop-container { align-items: stretch; }
.elementor-4006 .dm-more-grid .e-loop-item,
.elementor-2519 .elementor-element.elementor-element-b8040e0 { height: 100%; }
.elementor-2519 .elementor-element.elementor-element-d47246a { flex: 1 1 auto; display: flex; flex-direction: column; }
.elementor-2519 .elementor-element.elementor-element-d47246a > :last-child { margin-top: auto; }

/* --- תבנית חיפוש --------------------------------------------------------- */
/* D-P5 פס כתום ריק מעל בלוק הסיום, וטקסט שנדחס לעמודה של 190px */
.elementor-2522 .elementor-element.elementor-element-daa30f9 { display: none; }
@media (min-width: 1025px) {
  .elementor-2467 .e-con.elementor-element.elementor-element-a514e44 {
    --padding-left: max(70px, calc((100% - 768px) / 2));
    --padding-right: max(70px, calc((100% - 768px) / 2));
  }
}

/* ==== 05.09: לפי ייצוא הפיגמה של דוד ==================================== */

/* D5 "למה טיפול בעזרת כלבים": שלוש צורות הרקע הוחלפו בקבצים בכיוון של
   העיצוב (הצהובה: קשת בפינה השמאלית העליונה, האפרסק: קשת בפינה הימנית
   התחתונה, הקרם: כיפה במרכז התחתון). הקבצים ב-2x, לכן גודל הרקע נקוב. */
.elementor .card-corner-yellow { background-size: 128px 128px; background-position: 0% 0%; }
.elementor .card-corner-peach { background-size: 128px 128px; background-position: 100% 100%; }
.elementor .card-corner-cream { background-size: 244px 67px; background-position: 50% 100%; }

/* GR-3 עמודי השירותים והמאמרים: הרקע החם עם הבלובים הרכים מהעיצוב (webp
   של 12KB) על שורש העמוד; הסקשנים העליונים משחררים את הלבן ואת שכבות
   הבלובים שלי, שהיו קירוב לאותו רקע. */
.elementor.elementor-4004,
.elementor.elementor-3987 {
  background: #fff url("https://dafna.digidev.co.il/wp-content/uploads/2026/09/services-bg.webp?v=4") center top / 100% auto no-repeat;
}
.elementor-4004 .e-con.elementor-element.elementor-element-svhead,
.elementor-4004 .e-con.elementor-element.elementor-element-svband,
.elementor-3987 .e-con.elementor-element.elementor-element-arhead,
.elementor-3987 .e-con.elementor-element.elementor-element-arfbar,
.elementor-3987 .e-con.elementor-element.elementor-element-argband {
  background: transparent;
}
@media (max-width: 1024px) {
  .elementor.elementor-4004,
  .elementor.elementor-3987 { background-size: 1024px auto; }
}

/* M-H6 תג "+10 שנות ניסיון" כאלמנט חי: יושב על התמונה דרך חפיפה ברשת
   (התמונה והתג באותו תא), בלי position:absolute. עד שתגיע תמונה בלי התג
   הצרוב, התג החי מכסה אותו בדיוק. הטקסט ניתן לעריכה באלמנטור. */
.elementor-3304 .e-con.elementor-element.elementor-element-28a7b9d {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
}
.elementor-3304 .elementor-element-28a7b9d > [data-id="484c03b"] { grid-area: 1 / 1; }
.elementor-3304 .e-con.elementor-element.elementor-element-dmbadge1 {
  grid-area: 1 / 1;
  align-self: start;
  justify-self: end;
  z-index: 1;
  width: fit-content;
  margin-block-start: 7px;
  margin-inline-end: 44px;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 15px 15px 15px 20px;
  border-radius: 20px;
  background: var(--color-orange);
  color: var(--color-white);
  box-shadow: 0 8px 20px rgba(62, 39, 35, .16);
}
.elementor-3304 .elementor-element-dmbadge1 > [data-id="dmbadgei"] { width: auto; height: 30px; flex: 0 0 auto; }
.elementor-3304 .e-con.elementor-element.elementor-element-dmbadget {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 0;
}
.elementor-3304 .elementor-element-dmbadget > [data-id="dmbadgp1"],
.elementor-3304 .elementor-element-dmbadget > [data-id="dmbadgp2"] {
  color: var(--color-white);
  font-family: var(--font-heading), sans-serif;
  margin: 0;
  white-space: nowrap;
}
.elementor-3304 .elementor-element-dmbadget > [data-id="dmbadgp1"] { font-size: 16px; font-weight: 700; line-height: 1.1; }
.elementor-3304 .elementor-element-dmbadget > [data-id="dmbadgp2"] { font-size: 13px; font-weight: 400; line-height: 1.2; opacity: .92; }

/* ==== 07.09: לוגו עם סלוגן בהדר + תמונת הכלבות באודות ===================== */
/* הלוגו הוא SVG חתוך (build/out/logo/logo-full-color.svg); הגדלים נקובים כי
   ל-SVG אין גודל טבעי שימושי. */
.elementor-2405 .elementor-element.elementor-element-bf75c69 img { width: 210px; height: auto; }
/* 07.09 עדכון: הלוגו עם הסלוגן רק בהדר; ההירו והפוטר חזרו ללוגו הקודם */
@media (max-width: 1024px) {
  .elementor-2405 .elementor-element.elementor-element-bf75c69 img { width: 176px; }
}
@media (max-width: 767px) {
  .elementor-2405 .elementor-element.elementor-element-bf75c69 img { width: 150px; }
}

/* ==== 23.09: סבב 2.0, קובץ ההערות השני ==================================== */

/* P004 "למה LICBT": הכרטיס האמצעי הורם 16px בעיצוב. הלקוחה רוצה את שלושתם
   על קו אחד. */
.elementor-3304 .e-con.elementor-element.elementor-element-dc042ab > .e-con { margin-top: 0; margin-bottom: 0; }

/* P007 + P018 אייקוני השדות בטופס: המרכזים על קו אחד. לכל אייקון רוחב אחר
   (15 עד 20px), ולכן ההיסט מהקצה נגזר מהרוחב: מרכז 26px מהקצה בטופס הכללי
   ו-30px בטופס של עמוד צור קשר. אייקון ההערות קטוע בקובץ המקורי עצמו (הבועה
   חתוכה בייצוא), ולכן הוא מצויר כאן מחדש. */
.dm-form .elementor-field-type-text .elementor-field{background-position:right 17px center!important}
.dm-form .elementor-field-type-tel .elementor-field{background-position:right 18.5px center!important}
.dm-form .elementor-field-type-email .elementor-field{background-position:right 16px center!important}
.dm-form .elementor-field-type-select .elementor-select-wrapper select{background-position:right 18px center,left 18px center!important}
.dm-form .elementor-field-type-textarea .elementor-field{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 2.4c-4.4 0-7.9 2.9-7.9 6.5 0 1.9 1 3.6 2.5 4.8l-.9 3.5 3.8-1.9c.8.2 1.6.3 2.5.3 4.4 0 7.9-2.9 7.9-6.6S14.4 2.4 10 2.4z' fill='none' stroke='%23FE6F5E' stroke-width='1.7' stroke-linejoin='round'/><circle cx='6.6' cy='9' r='1.15' fill='%23FE6F5E'/><circle cx='10' cy='9' r='1.15' fill='%23FE6F5E'/><circle cx='13.4' cy='9' r='1.15' fill='%23FE6F5E'/></svg>")!important;
  background-position:right 16px top 21px!important;background-size:20px 20px!important}
.elementor-3970 .elementor-element.elementor-element-ctform1 .elementor-field-group.elementor-field-type-tel .elementor-field{
  background-position:right 2.5px top 50%!important}
.elementor-3970 .elementor-element.elementor-element-ctform1 .elementor-field-group.elementor-field-type-textarea .elementor-field{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 2.4c-4.4 0-7.9 2.9-7.9 6.5 0 1.9 1 3.6 2.5 4.8l-.9 3.5 3.8-1.9c.8.2 1.6.3 2.5.3 4.4 0 7.9-2.9 7.9-6.6S14.4 2.4 10 2.4z' fill='none' stroke='%23FFB09C' stroke-width='1.7' stroke-linejoin='round'/><circle cx='6.6' cy='9' r='1.15' fill='%23FFB09C'/><circle cx='10' cy='9' r='1.15' fill='%23FFB09C'/><circle cx='13.4' cy='9' r='1.15' fill='%23FFB09C'/></svg>")!important;
  background-position:right 20px top 23px!important;background-size:20px 20px!important}

/* P010 ההמלצות: השכנים שמחוץ לתצוגה שקופים (הסקריפט בפוטר מסמן את
   הגלויים), ולכן השוליים הרחבים שנותנים לצל מקום לא חושפים פס של כרטיס. */
.dm-testimonial-carousel .swiper.dm-vis .swiper-slide { transition: opacity .35s ease; }
.dm-testimonial-carousel .swiper.dm-vis .swiper-slide:not(.swiper-slide-visible) { opacity: 0; }

/* P011 + P037 + P061 החץ של "לפרטים נוספים" בעמוד השירותים זז 4px בריחוף
   בתוך קופסה חתוכה, ולכן הקצה שלו נחתך. הקופסה פתוחה (אין בה ברק). */
.elementor-4004 .elementor-element-svgrid>.e-con>a { overflow: visible; }

/* P024 כותרת עמוד השירות "לאורך": מיכל ריק לצדה (ba1fb20) לקח 192px מהשורה
   ודחס את הכותרת ל-338px */
.elementor-4007 .e-con.elementor-element.elementor-element-ba1fb20 { display: none; }

/* P026 + P029 + P075 זוגות הכותרות בעמוד השירות: הגופן הרגיל וכתב היד על קו
   בסיס אחד, כך ש"מוכר לכם?" ו"נפוצות" לא צונחים מתחת לשותף */
.elementor-4007 .e-con.elementor-element:has(> .dm-script) { align-items: baseline; }

/* P036 עמוד השירותים: פחות אוויר בין הפתיח לכרטיסים */
.elementor-4004 .e-con.elementor-element.elementor-element-svhead { padding-bottom: 72px; }
.elementor-4004 .e-con.elementor-element.elementor-element-svband { padding-top: 88px; }

/* P042 זכוכית המגדלת בחיפוש: ה-SVG נושא מילוי לבן משלו ולכן נעלם על הרקע
   הלבן. הצבע של הכפתור כבר כתום. */
.dm-search .elementor-search-form__submit svg { fill: currentColor; }

/* P045 שורות המאמרים: התמונה ממלאת את כל גובה הכרטיס */
.elementor-2513 .elementor-element.elementor-element-0a2bf05 { align-self: stretch; display: flex; }
.elementor-2513 .elementor-element.elementor-element-0a2bf05 > .elementor-widget-container { display: flex; flex: 1 1 auto; }
.elementor-2513 .elementor-element.elementor-element-0a2bf05 img { height: auto; min-height: 100%; flex: 1 1 auto; object-fit: cover; }

/* P046 כל כרטיס מאמר לחיץ כולו. הקישור של "לקריאה" נמתח על הכרטיס (החריג
   המתועד של position:absolute: שכבת לחיצה שקופה, כמו בכרטיסי השירותים). */
.elementor-2513.e-loop-item { position: relative; }
.elementor-2513 .elementor-element-c37908a .elementor-button { position: static; }
.elementor-2513 .elementor-element-c37908a .elementor-button::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* P050 כפתור "קביעת שיחה" בבאנר המאמר: האייקון מימין והטקסט משמאל.
   27.09: עבר להגדרה של הכפתור עצמו (icon_align=row). החוק שהיה כאן הפסיד
   ל-CSS של אלמנטור (אותה ספציפיות, נטען אחרי הקיט) ולא השפיע אף פעם. */

/* P014 תמונת הכלבות באודות: הקומפוזיציה של עדי (1971x1289, רוחב עיצובי 657) */
/* השורה היא רשת עם עמודת תמונה של 32.5%, שנבנתה לתמונה לאורך. הקומפוזיציה
   לרוחב מקבלת עמודה ברוחב העיצובי שלה, עד חצי מהשורה. מתחת ל-1025 הרשת
   יורדת לעמודה אחת והחוק לא חל. הגלובלית panel-photo (570) נטענת אחרי הקיט,
   ולכן הסלקטור של התמונה נושא את השורה. */
@media (min-width: 1025px) {
  .elementor-3775 .e-con.elementor-element.elementor-element-e63e24a { grid-template-columns: minmax(0, min(657px, 50%)) minmax(0, 1fr); }
}
.elementor-3775 .elementor-element-e63e24a > [data-id="60d01ef"] { width: 100%; max-width: 657px; height: auto; }

/* P084 + P087 נגיעה בטלפון: שום דבר לא נצבע בהבהוב, גם לא מהורה */
html { -webkit-tap-highlight-color: transparent; }
/* P046 כל כרטיס מאמר לחיץ כולו: שורות המאמרים, "עוד מאמרים" ו"מאמרים
   קשורים". הקישור היחיד בכרטיס נמתח עליו כשכבה שקופה. המיכלים והווידג'טים שבתוך
   הכרטיס משחררים את ה-position שאלמנטור נותן להם, כדי שהשכבה תתפוס את הכרטיס כולו
   ולא רק את העמודה שלה. נבדק שאין בכרטיסים האלה ילדים ממוקמים או שכבות רקע. */
.elementor-2513.e-loop-item, .elementor-2519.e-loop-item, .elementor-2617.e-loop-item { position: relative; }
.elementor-2513.e-loop-item .elementor-element, .elementor-2519.e-loop-item .elementor-element, .elementor-2617.e-loop-item .elementor-element { position: static; }
/* will-change:transform (של ההרמה בריחוף) הופך את הכפתור עצמו למיכל של
   השכבה, ולכן הוא מבוטל בכפתורי הכרטיסים האלה */
.elementor-2519 .elementor-widget-button .elementor-button { position: static; will-change: auto; }
.elementor-2513 .elementor-element-c37908a .elementor-button { will-change: auto; }
.elementor-2519 .elementor-widget-button .elementor-button::after,
.elementor-2617 .elementor-heading-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* P103 כפתור וואטסאפ צף במחשב. בטלפון ובטאבלט הסרגל התחתון עושה את זה.
   position:fixed הוא מהות הרכיב, כמו הסרגל עצמו. */
.elementor-2405 .e-con.elementor-element.dm-wa-float { position: fixed; left: 24px; bottom: 24px; width: auto; z-index: 70; padding: 0; }
.elementor-2405 .dm-wa-float .elementor-icon { font-size: 26px; padding: 17px; background-color: var(--color-coral); color: var(--color-white); box-shadow: 0 10px 24px rgba(254, 111, 94, .35); }
.elementor-2405 .dm-wa-float .elementor-icon svg { fill: currentColor; }
@media (max-width: 1024px) { .elementor-2405 .e-con.elementor-element.dm-wa-float { display: none; } }

/* P103 הכפתור בסרגל התחתון מוביל לוואטסאפ ונושא את הסמל בלבן */
.dm-mobile-bar .elementor-button .elementor-button-icon svg { fill: currentColor; width: 18px; height: 18px; }

/* P091 שורת המיקום בעמוד הפנסיון לחיצה כולה. הקישור מגיע מהשדה
   dm_svc_loc_url, ובעמודים בלי השדה אין קישור ואין שכבה. */
.elementor-4007 .e-con.elementor-element.elementor-element-e94000d { position: relative; }
.elementor-4007 .elementor-element-e94000d .elementor-element { position: static; }
.elementor-4007 .elementor-element-e6dacdd .elementor-heading-title a { color: inherit; }
.elementor-4007 .elementor-element-e6dacdd .elementor-heading-title a::after { content: ""; position: absolute; inset: 0; }

/* P014 "לדרך שלי" נשבר באמצע כשהעמודה צרה: כתב היד נשאר יחד */
.elementor-3775 [data-id="2aae8a2"] em { white-space: nowrap; }

/* ==== 23.09: ביקורות גוגל (Trustindex) בעמוד ההמלצות ======================== */
/* כותרת בסגנון כותרות האתר (t-h2), ומתחתיה הווידג'ט. חוקי הכרטיס של
   Trustindex נושאים !important, ולכן גם הדריסה. הכוכבים והלוגו של גוגל
   נשארים בצבעים של גוגל: הם הסימן שהביקורות אמיתיות. */
/* המרווח של הכותרת: המחלקות הגלובליות של הכותרת מאפסות margin ונטענות אחרי הקיט */
.elementor-3973 .elementor-element-tsbinner > [data-id="dmgrevh"] { margin-top: 120px; margin-bottom: 40px; }
.elementor-3973 .elementor-element.dm-google-reviews { width: 100%; }
.elementor-3973 .dm-google-reviews .ti-widget,
.elementor-3973 .dm-google-reviews .ti-widget * { font-family: var(--font-body), sans-serif !important; }
.elementor-3973 .dm-google-reviews .ti-widget.ti-goog .ti-review-item > .ti-inner {
  background-color: var(--color-white) !important;
  border-radius: 32px !important;
  padding: 28px !important;
}
.elementor-3973 .dm-google-reviews .ti-widget.ti-goog .ti-widget-container .ti-name { color: var(--color-ink); font-weight: 500; font-size: 17px; }
.elementor-3973 .dm-google-reviews .ti-widget.ti-goog .ti-widget-container .ti-date { color: rgb(100, 116, 139); }
/* גודל הטקסט נשאר של הווידג'ט (15/21.75, ארבע שורות ב-87px): "קרא עוד" נשען עליו */
.elementor-3973 .dm-google-reviews .ti-widget.ti-goog .ti-review-content { color: var(--color-ink); }
.elementor-3973 .dm-google-reviews .ti-widget.ti-goog .ti-read-more span { color: var(--color-coral); opacity: 1; font-weight: 500; }
@media (max-width: 767px) {
  .elementor-3973 .elementor-element-tsbinner > [data-id="dmgrevh"] { margin-top: 64px; margin-bottom: 24px; }
  .elementor-3973 .dm-google-reviews .ti-widget.ti-goog .ti-review-item > .ti-inner { padding: 24px !important; }
}

/* ==== 27.09: סבב 3.0 (קובץ ההערות של עדי ודפנה מ-24.09) ======================= */

/* R3 אודות: "ננה" ו"מיני" באותו קו. הקומפוזיציה של ננה (עם תג הלב) גבוהה
   ב-16px מזו של מיני, והשם שלה ירד בהתאם. שתי התמונות מקבלות את היחס של ננה;
   התמונה של מיני יושבת בראש התיבה, בלי חיתוך ובלי מתיחה (contain). */
@media (min-width: 768px) {
  .elementor-3775 .e-con [data-id="a94a6be"],
  .elementor-3775 .e-con [data-id="5162ddb"] {
    aspect-ratio: 417 / 438;
    height: auto;
    object-fit: contain;
    object-position: top center;
  }
}

/* R3 עמוד שירות: כתב היד בזוגות הכותרות עולה מעט מעל קו הבסיס של השותף.
   הזוגות מיושרים לפי קו בסיס (23.09) והאותיות יושבות עליו (נמדד: 1-5px
   מתחתיו), אבל גוף האות הקצר והזנבות שיורדים מתחת לקו נראים נמוכים. מורם
   0.05em, ו"נפוצות" (שני זנבות ארוכים, הבקשה המפורשת) 0.1em. */
.elementor-4007 .e-con.elementor-element:has(> .dm-script) > .dm-script .elementor-heading-title,
.elementor-4007 .e-con.elementor-element:has(> .dm-script) > .dm-script p { position: relative; top: -0.05em; }
.elementor-4007 .e-con.elementor-element.elementor-element-a68471d > .dm-script p { top: -0.1em; }
/* זוג שהטקסט שלו יושב ישר בווידג'ט, בלי p ("מה קורה בטיפול") */
.elementor-4007 .e-con.elementor-element:has(> .dm-script) > .dm-script.elementor-widget-text-editor > .elementor-widget-container:not(:has(p)) { position: relative; top: -0.05em; }

/* R3 מאמרים: התמונה בשורת המאמר ממלאת את כל גובה הכרטיס (סבב 2 P045). הכרטיס
   מיישר את העמודות שלו לראש, ולכן עמודת התמונה נשארה 206px בכרטיס של 214
   ונשאר פס מתחתיה; החוק של 23.09 מתח את התמונה לרוחב ולא לגובה. העמודה נמתחת
   עכשיו לגובה הכרטיס, והתמונה ממלאת אותה בלי להשפיע על הגובה (height:0 עם
   min-height:100%), כך שהטקסט הוא שקובע את גובה הכרטיס. רק בשורה של הדסקטופ:
   מתחת ל-1025 הכרטיס נערם והתמונה בגובה משלה. */
@media (min-width: 1025px) {
  .elementor-2513 .e-con.elementor-element.elementor-element-3129a52 { align-self: stretch; }
  .elementor-2513 .e-con .elementor-element.elementor-element-0a2bf05 { flex: 1 1 0; min-height: 0; }
  .elementor-2513 .e-con .elementor-element.elementor-element-0a2bf05 img { height: 0; min-height: 100%; }
}

/* R3 בית: הטקסט בגלולות הלבנות במרכז (סבב 1 P121, סבב 2 P057). כתב היד מצייר
   את האותיות נמוך בשורה שלו: הדיו ישב 9-12px מתחת למרכז הגלולה בכל רוחב, ו-5px
   ימינה בשתיים הראשונות (3px שמאלה בשלישית, לפי צורת האות האחרונה). רק הטקסט
   זז: הריפוד התחתון גדל ב-0.5em (הטקסט עולה 0.25em), והריפוד בצד הנגדי קטן
   כדי להזיז אותו לצד (הקטנה ולא הגדלה: ב-1024 ריפוד נוסף שבר את הגלולה
   הראשונה לשתי שורות). גובה הגלולה קבוע (min-height) ולא משתנה. */
/* ב-1024 הגלולה הראשונה נשברת לשתי שורות (כך גם לפני הסבב), ו"במקום" נשאר
   לבד בשורה: שבירה מאוזנת */
.elementor-3304 .e-con.elementor-element-f6ea896 > p.stat-chip { padding-bottom: calc(16px + 0.5em); text-wrap: balance; }
.elementor-3304 .e-con.elementor-element-f6ea896 > [data-id="a3a4a13"],
.elementor-3304 .e-con.elementor-element-f6ea896 > [data-id="cc3cc4f"] { padding-left: calc(24px - 0.26em); }
.elementor-3304 .e-con.elementor-element-f6ea896 > [data-id="1ffa178"] { padding-right: calc(24px - 0.16em); }

/* ==== 29.09: סבב 4.0 ======================================================= */
/* R4 ריצות הטקסט של תבנית השירות. הממיר כתב לכל ריצה בטקסט את המשקל שלה מהעיצוב
   (custom_css של הווידג'ט בתבנית הישנה 2733), והמשקלים אבדו כשהתבנית נבנתה מחדש
   ב-20.08: בפתיח ובגוש השני כל הטקסט יצא 500, ובגוש הראשון הכותרת יצאה 300.
   לפי 2733: שורת הפתיחה של כל טקסט 500, הגוף 300. הגוש השני (כולו 500) הוא
   בדיוק זה שלא מצויר באייפון (עדי, 29.09: "רווח מעל הגלריה" בכל עמודי השירות). */
.elementor-4007 .elementor-element-0129ae5 .dm-r0129ae51,
.elementor-4007 .elementor-element-e4fe33c .dm-re4fe33c1 { font-weight: 300; }
.elementor-4007 .elementor-element-322672c .dm-r322672c0 { font-weight: 500; }

/* R3 פוטר: "פותח ב(לב) ע״י דיגימה בניית אתרים" (בקשת דוד, 27.09). הלב הוא אייקון
   הלב של האתר (heart.svg, currentColor) בתוך הטקסט, בכתום של המותג ובגובה האות */
.elementor-3180 .dm-heart {
  display: inline-block;
  width: 0.95em;
  height: 0.83em;
  margin-inline: 0.04em 0.05em;
  vertical-align: -0.08em;
  color: var(--color-coral);
}








/* ==== DM HOVER LAYER: START ==== */
/* Interaction states for a site whose artwork has none.
 *
 * Adi drew no hover states, so every rule here is an addition rather than a
 * transcription. It is written once, globally, against STRUCTURE rather than
 * against page ids -- the converter gives elements a hash for a class, so
 * anything keyed to a page would die at the next rebuild. The hooks it leans
 * on are the ones that survive: .elementor-button, .e-loop-item, .dm-art (the
 * converter's own class on every exported shape), .dm-card-cta, .dm-faq-item,
 * and the .dm-hv* classes the grouping script adds at runtime.
 *
 * Three rules this layer obeys, learned the hard way on this site:
 *
 *  1. NO transform on a container that holds absolutely placed children.
 *     A transform makes the element a containing block, and every ornament
 *     positioned against an ancestor jumps. Transforms here go on leaves only:
 *     buttons, <img>, and the loop item, which the theme builder owns.
 *  2. NOTHING may change layout. Only colour, shadow, filter, outline and
 *     transform. No width, height, margin, padding, border-width or font-size,
 *     so a hover can never reflow the page under the cursor.
 *  3. The shapes are organic blobs exported as transparent PNGs, so a box
 *     shadow would draw a rectangle around a rounded shape. filter:drop-shadow
 *     follows the alpha silhouette instead, which is why it is used on art.
 */

:root{
  --dm-hv-coral:#FE6F5E;
  --dm-hv-coral-deep:#ED5B2E;
  --dm-hv-ink:#3E2723;
  /* out-quad: quick to leave, slow to settle. Reads as "responsive" rather
     than "animated", which is what a professional site wants. */
  --dm-hv-ease:cubic-bezier(.22,.61,.36,1);
  --dm-hv-fast:.18s;
  --dm-hv-base:.24s;
  --dm-hv-slow:.36s;
}

/* ---------------------------------------------------------------- buttons */
/* `.e-button-base` is the ATOMIC button. Every page rebuilt in Elementor 4
   uses it, and this whole layer was written against the classic
   `.elementor-button` only -- which is why the hover lived on the header and
   the contact form (classic widgets) and nowhere else on the site. */
.elementor-button,
.e-button-base{
  transition:background-color var(--dm-hv-base) var(--dm-hv-ease),
             box-shadow var(--dm-hv-slow) var(--dm-hv-ease),
             transform var(--dm-hv-base) var(--dm-hv-ease),
             color var(--dm-hv-base) var(--dm-hv-ease);
  will-change:transform;
}
.elementor-button:focus-visible,
.e-button-base:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(254,111,94,.34);
}
@media (hover:hover){:where(html:not(.dm-touch)) .elementor-button:hover,
:where(html:not(.dm-touch)) .e-button-base:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(254,111,94,.34);
}}
.elementor-button:active,
.e-button-base:active{
  transform:translateY(0);
  box-shadow:0 4px 10px rgba(254,111,94,.28);
  transition-duration:var(--dm-hv-fast);
}
/* The arrow travels the way it points. In RTL that is towards the start of
   the line, which is left. */
.elementor-button .elementor-button-icon svg,
.elementor-button .elementor-button-icon img,
.e-button-base svg,
.e-button-base img{
  transition:transform var(--dm-hv-base) var(--dm-hv-ease);
}
@media (hover:hover){:where(html:not(.dm-touch)) .elementor-button:hover .elementor-button-icon svg,
:where(html:not(.dm-touch)) .elementor-button:hover .elementor-button-icon img,
:where(html:not(.dm-touch)) .e-button-base:hover svg,
:where(html:not(.dm-touch)) .e-button-base:hover img{
  transform:translateX(-5px);
}}

/* A ghost button is drawn as an outline on cream. It fills instead of lifting
   into a shadow it has no colour for. */
@media (hover:hover){:where(html:not(.dm-touch)) .elementor-button:not([style*="background"]):hover,
:where(html:not(.dm-touch)) .e-button-base.btn-ghost:hover,
:where(html:not(.dm-touch)) .e-button-base.btn-secondary:hover{
  box-shadow:0 10px 24px rgba(62,39,35,.14);
}}

/* --------------------------------------------------------- the card groups */
/* Built at runtime by the grouping script: in this artwork a card is not one
   element but three absolutely placed siblings -- the blob that paints the
   surface, the icon tile above it, and the frame holding the words. CSS
   cannot reach sideways across them, so the script marks all three and this
   styles the marks. See dm-site-content.php. */
/* The members are SIBLINGS, not nested, so the state class goes on each of
   them rather than on a wrapper there is no room to add. */

/* The surface. This one is a real container -- white, 56px of radius and a
   soft shadow -- so it can be lit directly rather than through its pixels.
   The ring is an OUTLINE, not a border: a border has width and would push the
   card's box outwards by 2px under the cursor. An outline is drawn outside
   the layout entirely and still follows the corner radius. */
/* An outline is painted OVER the element's own children, which is the one
   thing it does differently from a border -- and the service badge hangs
   above the card's top edge on a negative margin, so the ring was drawn
   straight across it. The badge gets its own layer above the ring.
   `z-index:0` on the card first, so the badge is sealed inside the card's
   stacking context and can never climb over the fixed header (z-index 999).
   Layer only -- no geometry -- so rule 2 at the top of this file still holds. */
.dm-hv-surface{z-index:0;}
.dm-hv-surface>img{position:relative;z-index:1;}
.elementor-4004 .elementor-element-svgrid>.e-con{z-index:0;}
.elementor-4004 .elementor-element-svgrid>.e-con>img{position:relative;z-index:1;}

.dm-hv-surface{
  transition:box-shadow var(--dm-hv-slow) var(--dm-hv-ease),
             outline-color var(--dm-hv-base) var(--dm-hv-ease);
  outline:2px solid transparent;
  outline-offset:-2px;
}
/* The hover shadow has to be strictly STRONGER than the resting one, in the
   same colour family. Several of these cards are drawn with a coral shadow
   already (0 20px 50px -10px rgba(255,127,80,.4)); a hover rule that replaced
   it with a soft brown made the card look flatter under the cursor than it did
   at rest, which reads as "the hover is broken" -- and is what it was reported
   as on "למי זה מיועד". box-shadow does not compose across rules: the winning
   rule replaces it outright, so this has to out-weigh anything underneath. */
@media (hover:hover){:where(html:not(.dm-touch)) .dm-hv-surface.is-hover{
  box-shadow:0 26px 56px -8px rgba(254,111,94,.45)!important;
}}
/* a card that leads somewhere is also ringed; one that does not just rises */
@media (hover:hover){:where(html:not(.dm-touch)) .dm-hv-surface.is-hover.dm-hv-linked{
  box-shadow:0 26px 56px -8px rgba(254,111,94,.5)!important;
  outline-color:rgba(254,111,94,.6);
}}

/* the icon tile is an exported shape, so it is the pixels that answer */
.dm-hv-icon img{
  transition:transform var(--dm-hv-slow) var(--dm-hv-ease),
             filter var(--dm-hv-slow) var(--dm-hv-ease);
  will-change:transform,filter;
}
@media (hover:hover){:where(html:not(.dm-touch)) .dm-hv-icon.is-hover img{
  transform:scale(1.09) rotate(-4deg);
  /* drop-shadow follows the blob's own outline; a box shadow would draw a
     rectangle around a round tile */
  filter:drop-shadow(0 10px 16px rgba(254,111,94,.34));
}}
/* the words lean in too, so the whole card reads as one object */
.dm-hv-body .elementor-heading-title,
.dm-hv-body h2,.dm-hv-body h3,.dm-hv-body h4{
  transition:color var(--dm-hv-base) var(--dm-hv-ease);
}
@media (hover:hover){:where(html:not(.dm-touch)) .dm-hv-body.is-hover.dm-hv-linked .elementor-heading-title,
:where(html:not(.dm-touch)) .dm-hv-body.is-hover.dm-hv-linked h2,
:where(html:not(.dm-touch)) .dm-hv-body.is-hover.dm-hv-linked h3{
  color:var(--dm-hv-coral)!important;
}}
/* a card that leads somewhere says so under the cursor */
.dm-hv-linked{cursor:pointer;}

/* --------------------------------------------------- the "read on" links */
/* .dm-card-cta already carries its own rules from the converter; this adds the
   part that belongs to the whole card rather than to the line of text. */
@media (hover:hover){:where(html:not(.dm-touch)) .dm-hv-body.is-hover .dm-card-cta{text-decoration:underline;}}
@media (hover:hover){:where(html:not(.dm-touch)) .dm-hv-body.is-hover .dm-cta-arrow{transform:translateX(-4px);}}

/* ------------------------------------------------------------ loop items */
/* Article rows, article cards, sidebar items and testimonials. These the
   theme builder owns as one element each, so they can lift as a whole. */
/* The shadow is a FILTER, not a box-shadow. A loop item carries no radius of
   its own -- the rounded face is a child -- so box-shadow drew a hard
   rectangle around a rounded card and the corners appeared to be lost.
   drop-shadow follows what is actually painted, corners included.
   27.09: the LIFT moved from the item to its card (the item's first container).
   The item is what :hover listens to; when it moved up 4px itself, a pointer
   resting on the card's bottom edge was left outside, the hover dropped, the
   card came back under the pointer and the cycle repeated (Safari: 8 flips in
   90 frames). The item now stays put and only the face lifts. The shadow stays
   on the item, so it still follows the lifted face. */
.e-loop-item{
  transition:filter var(--dm-hv-slow) var(--dm-hv-ease);
}
.e-loop-item > .e-con{
  transition:transform var(--dm-hv-slow) var(--dm-hv-ease);
}
@media (hover:hover){:where(html:not(.dm-touch)) .e-loop-item:hover{
  filter:drop-shadow(0 14px 22px rgba(62,39,35,.16));
}}
@media (hover:hover){:where(html:not(.dm-touch)) .e-loop-item:hover > .e-con{
  transform:translateY(-4px);
}}
@media (hover:hover){:where(html:not(.dm-touch)) .e-loop-item:hover .elementor-heading-title{color:var(--dm-hv-coral)!important;}}
.e-loop-item .elementor-widget-image img,
.e-loop-item .dm-art img{
  transition:transform var(--dm-hv-slow) var(--dm-hv-ease);
}
@media (hover:hover){:where(html:not(.dm-touch)) .e-loop-item:hover .elementor-widget-image img{transform:scale(1.045);}}
/* the thumbnail grows inside its own frame instead of pushing past it */
.e-loop-item .elementor-widget-image{overflow:clip;}

/* ------------------------------------------------------------------ links */
/* ⚠️ A link takes the colour of the words around it.
   The converter puts an anchor straight into the markup for text inside a Link
   frame, because a text editor has no link control to set a colour on. With
   nothing declared, the THEME's default won -- #CC3366, a magenta that appears
   nowhere in this brand -- and it was showing on the footer's quick nav and on
   the contact details, on every page of the site. Inheriting is what the
   drawing shows: the link is the same ink as its paragraph, and only the hover
   colours it. */
.elementor-widget-text-editor a:not(.elementor-button):not(.dm-card-cta),
.elementor-widget-heading a:not(.elementor-button),
.elementor-widget-icon-list a{
  color:inherit;
}

/* An underline that grows from where the line starts. In RTL that is the
   right edge, so the transform origin is flipped from the usual. */
.elementor-nav-menu a,
.elementor-widget-text-editor a,
.dm-hv-underline{
  position:relative;
  transition:color var(--dm-hv-base) var(--dm-hv-ease);
}
.elementor-nav-menu a::after,
.elementor-widget-text-editor a::after{
  content:"";position:absolute;inset-inline-start:0;bottom:-2px;
  width:100%;height:2px;background:currentColor;border-radius:2px;
  transform:scaleX(0);transform-origin:right center;
  transition:transform var(--dm-hv-base) var(--dm-hv-ease);
  pointer-events:none;
}
.elementor-nav-menu a:focus-visible::after{transform:scaleX(1);}
@media (hover:hover){:where(html:not(.dm-touch)) .elementor-nav-menu a:hover::after,
:where(html:not(.dm-touch)) .elementor-widget-text-editor a:hover::after{transform:scaleX(1);}}
@media (hover:hover){:where(html:not(.dm-touch)) .elementor-nav-menu a:hover,
:where(html:not(.dm-touch)) .elementor-widget-text-editor a:hover{color:var(--dm-hv-coral);}}
/* the active item is already a filled coral pill; it needs no second signal */
.elementor-nav-menu .current-menu-item a::after,
.elementor-nav-menu .elementor-item-active::after{display:none;}

/* ---------------------------------------------------------- social icons */
/* A link whose whole content is one exported glyph. */
.dm-art a,
a .dm-art img,
.elementor-widget-image a img{
  transition:transform var(--dm-hv-base) var(--dm-hv-ease),
             filter var(--dm-hv-slow) var(--dm-hv-ease);
}
@media (hover:hover){:where(html:not(.dm-touch)) .elementor-widget-image a:hover img{
  transform:translateY(-3px) scale(1.06);
  filter:drop-shadow(0 8px 14px rgba(254,111,94,.4));
}}

/* ------------------------------------------------------ the FAQ accordion */
/* The chevron and the open state come from service_page.py; this is the row
   itself answering the cursor. */
.dm-faq .elementor-button{
  transition:background-color var(--dm-hv-base) var(--dm-hv-ease);
}
@media (hover:hover){:where(html:not(.dm-touch)) .dm-faq .elementor-button:hover{
  background-color:rgba(254,111,94,.07)!important;
  /* a question is a control, not a call to action: it must not lift */
  transform:none;
  box-shadow:none;
}}
.dm-faq .dm-faq-item{transition:background-color var(--dm-hv-base) var(--dm-hv-ease);}

/* ------------------------------------------------------------- the forms */
.elementor-field-group .elementor-field,
.elementor-field-group select.elementor-field{
  transition:border-color var(--dm-hv-base) var(--dm-hv-ease),
             box-shadow var(--dm-hv-base) var(--dm-hv-ease),
             background-color var(--dm-hv-base) var(--dm-hv-ease);
}
@media (hover:hover){:where(html:not(.dm-touch)) .elementor-field-group .elementor-field:hover{
  border-color:rgba(254,111,94,.55)!important;
}}
.elementor-field-group .elementor-field:focus{
  border-color:var(--dm-hv-coral)!important;
  box-shadow:0 0 0 3px rgba(254,111,94,.18)!important;
  outline:none;
}

/* ------------------------------------------------- keyboard, and only it */
/* :focus-visible never fires for a mouse, so this costs the design nothing
   and gives a keyboard the position the mouse gets for free. The deeper
   coral is used because the light one is 2.71:1 on cream and simply cannot
   be seen against it. */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible,
[role="button"]:focus-visible,
select:focus-visible,textarea:focus-visible,
input:not([type="search"]):focus-visible{
  outline:3px solid var(--dm-hv-coral-deep)!important;
  outline-offset:3px!important;
  border-radius:6px;
}
/* ⚠️ The search field is not the box you can see. Elementor paints the rounded
   pill on the FORM CONTAINER and leaves the input inside it borderless, so a
   focus ring on the input drew a second, square-cornered box inside the pill --
   reported as "an unnecessary internal division" as soon as you typed. The ring
   goes on the pill, and the input keeps none of its own. */
.elementor-search-form input:focus,
.elementor-search-form input:focus-visible{outline:none!important;box-shadow:none!important;}
.elementor-search-form__container:focus-within{
  border-color:var(--dm-hv-coral)!important;
  box-shadow:0 0 0 3px rgba(254,111,94,.20)!important;
}

/* ------------------------------------------------------- reduced motion */
/* Everything above degrades to colour and shadow. Nothing moves. */
/* ------------------------------------- what still had no hover at all ----
   Found by hovering each interactive element and diffing its computed style,
   not by reading the CSS: everything below reported an empty change set.
   All of it obeys rule 2 at the top -- colour, filter and transform only. */

/* The eight photos in the service strip. The <li> already clips at a 24px
   radius and the image is object-fit:cover, so a scale grows into the frame
   instead of pushing it. */
.dm-gal-item img{
  transition:transform var(--dm-hv-slow) var(--dm-hv-ease),
             filter var(--dm-hv-base) var(--dm-hv-ease);
}
@media (hover:hover){:where(html:not(.dm-touch)) .dm-gal-item:hover img{transform:scale(1.05);filter:saturate(1.06);}}

/* The testimonial carousel's arrows and dots.
   NO transform on the arrow: Elementor centres it with `translateY(-50%)`, and
   any transform of ours REPLACES that rather than adding to it -- the arrow
   would jump 11px the moment the cursor arrived. Measured, not assumed.
   Colour only, and the class doubled so it outranks Elementor's own rule. */
.elementor-swiper-button{
  transition:color var(--dm-hv-base) var(--dm-hv-ease);
}
@media (hover:hover){:where(html:not(.dm-touch)) .elementor-swiper-button.elementor-swiper-button-prev:hover,
:where(html:not(.dm-touch)) .elementor-swiper-button.elementor-swiper-button-next:hover{
  color:var(--dm-hv-coral-deep);
}}
.elementor-swiper-button svg{transition:fill var(--dm-hv-base) var(--dm-hv-ease);}
/* The visible colour is the svg's `fill`, and the carousel widget writes it in
   its own per-element custom_css at (0,4,1). This chain is (0,5,1) so it wins
   outright rather than depending on which stylesheet loads last. */
@media (hover:hover){:where(html:not(.dm-touch)) .elementor-element.elementor-element-2276713
  .elementor-swiper-button.elementor-swiper-button-prev:hover svg,
:where(html:not(.dm-touch)) .elementor-element.elementor-element-2276713
  .elementor-swiper-button.elementor-swiper-button-next:hover svg{
  fill:var(--dm-hv-coral-deep);
}}

.swiper-pagination-bullet{
  transition:background-color var(--dm-hv-base) var(--dm-hv-ease),
             transform var(--dm-hv-base) var(--dm-hv-ease);
}
@media (hover:hover){:where(html:not(.dm-touch)) .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover{
  background:var(--dm-hv-coral);transform:scale(1.35);
}}

/* The magnifier in the article search field. */
.elementor-search-form__submit{
  transition:color var(--dm-hv-base) var(--dm-hv-ease),
             transform var(--dm-hv-base) var(--dm-hv-ease);
}
@media (hover:hover){:where(html:not(.dm-touch)) .elementor-search-form__submit:hover{
  color:var(--dm-hv-coral-deep);transform:scale(1.08);
}}

/* The footer's social icons already changed colour; they gain the same 2px
   lift every other control on the site has. */
.elementor-social-icon{
  transition:transform var(--dm-hv-base) var(--dm-hv-ease),
             color var(--dm-hv-base) var(--dm-hv-ease);
}
@media (hover:hover){:where(html:not(.dm-touch)) .elementor-social-icon:hover{transform:translateY(-2px);}}

@media(prefers-reduced-motion:reduce){
  @media (hover:hover){:where(html:not(.dm-touch)) .dm-gal-item:hover img,
:where(html:not(.dm-touch)) .swiper-pagination-bullet:hover,
:where(html:not(.dm-touch)) .elementor-search-form__submit:hover,
:where(html:not(.dm-touch)) .elementor-social-icon:hover{transform:none!important;}}
}

@media(prefers-reduced-motion:reduce){
  .elementor-button,
  .elementor-button .elementor-button-icon svg,
  .elementor-button .elementor-button-icon img,
  .dm-hv-icon img,
  .e-loop-item,.e-loop-item > .e-con,.e-loop-item .elementor-widget-image img,
  .elementor-widget-image a img,
  .elementor-nav-menu a::after,
  .elementor-widget-text-editor a::after{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
  }
  .elementor-button:focus-visible{
    transform:none!important;
  }
@media (hover:hover){:where(html:not(.dm-touch)) .elementor-button:hover,
:where(html:not(.dm-touch)) .e-loop-item:hover,
:where(html:not(.dm-touch)) .e-loop-item:hover > .e-con,
:where(html:not(.dm-touch)) .dm-hv-icon.is-hover img,
:where(html:not(.dm-touch)) .elementor-widget-image a:hover img,
:where(html:not(.dm-touch)) .elementor-button:hover .elementor-button-icon svg,
:where(html:not(.dm-touch)) .elementor-button:hover .elementor-button-icon img,
:where(html:not(.dm-touch)) .dm-hv-body.is-hover .dm-cta-arrow{
    transform:none!important;
  }}
  @media (hover:hover){:where(html:not(.dm-touch)) .elementor-nav-menu a:hover::after,
:where(html:not(.dm-touch)) .elementor-widget-text-editor a:hover::after{transform:scaleX(1)!important;}}
}

/* ------------------------------------------------------------ the phone */
/* A touch screen has no hover: the state latches on tap and stays until the
   next one, which reads as a stuck card. Everything reactive is switched off
   below the tablet breakpoint; :active and :focus-visible still answer. */
@media(hover:none),(pointer:coarse){
  .elementor-button:hover,
  .e-loop-item:hover,
  .e-loop-item:hover > .e-con,
  .dm-hv-icon.is-hover img,
  .elementor-widget-image a:hover img,
  .elementor-button:hover .elementor-button-icon svg{
    transform:none!important;
    filter:none!important;
    box-shadow:none!important;
  }
  .elementor-nav-menu a::after,
  .elementor-widget-text-editor a::after{display:none;}
}

/* ---- pagination -------------------------------------------------------
   The one target the reaction sweep found dead: the numbers under the article
   and testimonial grids reacted 0 of 1. They are a control a reader has to aim
   at, and nothing under the cursor said so. */
.elementor-pagination .page-numbers:not(.current) {
  transition: background-color .2s ease, color .2s ease;
}
.elementor-pagination .page-numbers:not(.current):focus-visible{
  background: #FFE6DF;
  color: #3E2723;
}
@media (hover:hover){:where(html:not(.dm-touch)) .elementor-pagination .page-numbers:not(.current):hover{
  background: #FFE6DF;
  color: #3E2723;
}}
.elementor-pagination .page-numbers.current {
  transition: box-shadow .2s ease;
}
@media (hover:hover){:where(html:not(.dm-touch)) .elementor-pagination .page-numbers.current:hover{
  box-shadow: 0 0 0 4px rgba(255, 107, 91, .25);
}}

/* ------------------------------------------------------------- the shine */
/* One pass of light across a filled button. The sheen is this layer's own
   absolute child, so it travels with the button's transform, and the clip is
   the button's radius. inline coordinates, so RTL sweeps right to left the
   way the eye reads. */
.elementor-button,
.e-button-base{position:relative;overflow:hidden;}
.elementor-button::before,
.e-button-base::before{
  content:"";position:absolute;top:0;bottom:0;width:46%;
  inset-inline-start:-65%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-18deg);
  transition:inset-inline-start .6s var(--dm-hv-ease);
  pointer-events:none;
}
.elementor-button:focus-visible::before,
.e-button-base:focus-visible::before{inset-inline-start:130%;}
@media (hover:hover){:where(html:not(.dm-touch)) .elementor-button:hover::before,
:where(html:not(.dm-touch)) .e-button-base:hover::before{inset-inline-start:130%;}}
/* a control, not a call to action: the FAQ rows keep their quiet hover */
.dm-faq .elementor-button::before{content:none;}

/* Same reasoning for the read-more inside an article row, plus a bug the shine
   causes there. That button has no fill, so the sweep reads as a white smear
   across the words rather than light on a surface -- and the overflow:hidden
   the sweep needs is what clips the arrow: the icon sits flush against the
   button's leading edge, so the 5px of travel above takes the arrowhead
   straight out of the box and leaves a stub behind. No fill, no sweep, no clip,
   and the arrow travels whole. */
.e-loop-item .elementor-button::before{content:none;}
/* The clip itself stays. Turning it off was the obvious fix and it costs two
   pixels a row: overflow:hidden on an inline-block puts its baseline at the
   bottom margin edge, so removing it shortens every line box the button sits in
   and the list comes up 14 short of the drawing. The arrow gets its runway
   inside the box instead -- six pixels of padding on the content wrapper's
   leading edge, which is where the icon sits once the template reverses the
   row. Measured: card stays 214, the button box stays 64.2, and the arrow ends
   its travel 1px inside the clip. */
.e-loop-item .elementor-button .elementor-button-content-wrapper{
  padding-inline-end:6px;
}

/* the filled face brightens a touch as it lifts, so the light reads as real */
@media (hover:hover){:where(html:not(.dm-touch)) .elementor-button:hover{filter:brightness(1.04) saturate(1.05);}}
@media (hover:hover){:where(html:not(.dm-touch)) .dm-faq .elementor-button:hover{filter:none;}}
/* 27.09: a button that carries a card-wide link (its ::after stretched over the
   whole card) must not take a filter either. A filter makes the button the
   containing block of its own ::after, so on hover the overlay shrank to the
   button, the pointer fell onto the photo, the hover dropped, the overlay grew
   back, and the cursor flickered between hand and arrow on every frame
   (article rows 2513 and article cards 2519). */
@media (hover:hover){:where(html:not(.dm-touch)) .elementor-2513 .elementor-element-c37908a .elementor-button:hover,
:where(html:not(.dm-touch)) .elementor-2519 .elementor-widget-button .elementor-button:hover{filter:none;}}

/* ------------------------------------------------- the icon tiles at rest */
/* The runtime groups already turn the tile under the cursor; this gives the
   plain exported icons the same life when they are the hover target
   themselves (footer contact glyphs, the badge icons). */
.dm-art{transition:filter var(--dm-hv-slow) var(--dm-hv-ease);}
@media (hover:hover){:where(html:not(.dm-touch)) a:hover > .dm-art,
:where(html:not(.dm-touch)) a:hover .dm-art{filter:drop-shadow(0 8px 14px rgba(254,111,94,.35));}}

@media(prefers-reduced-motion:reduce){
  .elementor-button::before,
  .e-button-base::before{display:none;}
  @media (hover:hover){:where(html:not(.dm-touch)) .elementor-button:hover,
:where(html:not(.dm-touch)) .e-button-base:hover{filter:none;}}
}
@media(hover:none),(pointer:coarse){
  .elementor-button::before,
  .e-button-base::before{display:none;}
}

/* ------------------------------------------------- the service photo strip */
/* Figma draws this as eight 417x350 frames in a row 3504px wide inside a
   1920px one. That is a carousel drawn as a still: it overflowed its frame and
   never moved. Scroll-snap rather than a slider library -- the row already is
   a row, so the browser carries it, it drags on touch for free, and it does
   not depend on Elementor's Swiper being on the page. */
.dm-gal{position:relative;width:100%;}
.dm-gal-track{
  display:flex;gap:24px;margin:0;padding:0 0 6px;list-style:none;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;
}
.dm-gal-track::-webkit-scrollbar{display:none}
.dm-gal-track:focus-visible{outline:3px solid var(--dm-hv-coral-deep);outline-offset:4px;border-radius:24px}
.dm-gal-item{
  flex:0 0 417px;max-width:78vw;scroll-snap-align:center;
  border-radius:24px;overflow:hidden;
}
.dm-gal-item img{
  display:block;width:100%;height:350px;object-fit:cover;
  transition:transform var(--dm-hv-slow) var(--dm-hv-ease);
}
@media (hover:hover){:where(html:not(.dm-touch)) .dm-gal-item:hover img{transform:scale(1.04)}}

/* The arrows sit outside the pictures and float over the band. They are the
   same coral disc the rest of the site uses for a control. */
.dm-gal-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;
  background:#fff;color:var(--dm-hv-coral);
  box-shadow:0 8px 22px rgba(62,39,35,.18);
  display:flex;align-items:center;justify-content:center;
  transition:background-color var(--dm-hv-base) var(--dm-hv-ease),
             color var(--dm-hv-base) var(--dm-hv-ease),
             box-shadow var(--dm-hv-base) var(--dm-hv-ease);
}
@media (hover:hover){:where(html:not(.dm-touch)) .dm-gal-nav:hover{background:var(--dm-hv-coral);color:#fff;box-shadow:0 12px 26px rgba(254,111,94,.4)}}
.dm-gal-nav:focus-visible{outline:3px solid var(--dm-hv-coral-deep);outline-offset:3px}
.dm-gal-nav[disabled]{opacity:.35;cursor:default;box-shadow:none}
.dm-gal-prev{right:8px}
.dm-gal-next{left:8px}
@media(max-width:767px){
  .dm-gal-item{flex-basis:78vw}
  .dm-gal-item img{height:250px}
  .dm-gal-nav{display:none}     /* a thumb drags it; the discs only cover it */
}
@media(prefers-reduced-motion:reduce){
  .dm-gal-track{scroll-behavior:auto}
  .dm-gal-item img{transition:none}
  @media (hover:hover){:where(html:not(.dm-touch)) .dm-gal-item:hover img{transform:none}}
}

/* --- עימוד -------------------------------------------------------------
   נוסף בסבב הסקירה של 26.08, יחד עם הגלולות עצמן ב-global-additions. */
.elementor-pagination a.page-numbers {
  transition: background-color var(--dm-hv-base) var(--dm-hv-ease),
              color var(--dm-hv-base) var(--dm-hv-ease),
              transform var(--dm-hv-base) var(--dm-hv-ease);
}
.elementor-pagination a.page-numbers:focus-visible{
  background: var(--dm-hv-coral);
  border-color: var(--dm-hv-coral);
  color: #fff;
  transform: translateY(-2px);
}
@media (hover:hover){:where(html:not(.dm-touch)) .elementor-pagination a.page-numbers:hover{
  background: var(--dm-hv-coral);
  border-color: var(--dm-hv-coral);
  color: #fff;
  transform: translateY(-2px);
}}


/* ---------------------------------------------- 04.09: link-style buttons */
/* "לקריאה", "קרא עוד", "לכל המאמרים", "כל המאמרים", "לפרטים נוספים" are
   drawn as bare coral text with an arrow. The shared button hover lifted
   them into a soft shadow that read as a white box around the word (the
   client: "מלבן מוזר מסביב למילה"). A text link answers with colour and
   the arrow only. */
@media (hover:hover){
  :where(html:not(.dm-touch)) .elementor-2513 .elementor-element-c37908a .elementor-button:hover,
  :where(html:not(.dm-touch)) .elementor-2519 .elementor-widget-button .elementor-button:hover,
  :where(html:not(.dm-touch)) .elementor-4006 .elementor-element-f63a4d8 .elementor-button:hover,
  :where(html:not(.dm-touch)) .elementor-4006 .elementor-element-30101f9 .elementor-button:hover,
  :where(html:not(.dm-touch)) .elementor-2522 .elementor-widget-button .elementor-button:hover,
  :where(html:not(.dm-touch)) .cta-link.e-button-base:hover,
  :where(html:not(.dm-touch)) .elementor-4004 .elementor-element-svgrid .e-button-base:hover{
    transform:none;
    box-shadow:none;
    background-color:transparent;
    color:var(--dm-hv-coral);
  }
  :where(html:not(.dm-touch)) .elementor-2513 .elementor-element-c37908a .elementor-button:hover::before,
  :where(html:not(.dm-touch)) .elementor-2519 .elementor-widget-button .elementor-button:hover::before,
  :where(html:not(.dm-touch)) .elementor-4006 .elementor-element-f63a4d8 .elementor-button:hover::before,
  :where(html:not(.dm-touch)) .elementor-4006 .elementor-element-30101f9 .elementor-button:hover::before,
  :where(html:not(.dm-touch)) .cta-link.e-button-base:hover::before,
  :where(html:not(.dm-touch)) .elementor-4004 .elementor-element-svgrid .e-button-base:hover::before{content:none;}
  :where(html:not(.dm-touch)) .elementor-4006 .elementor-element-f63a4d8 .elementor-button,
  :where(html:not(.dm-touch)) .elementor-4006 .elementor-element-30101f9 .elementor-button{overflow:visible;}

  /* the FAQ row: the whole item answers the cursor, not only the question bar */
  :where(html:not(.dm-touch)) .dm-faq .elementor-button:hover{background-color:transparent!important;}
  :where(html:not(.dm-touch)) .dm-faq .dm-faq-item:hover{background-color:rgba(254,111,94,.07);}
}

/* 23.09: the floating WhatsApp button answers the cursor like the other filled buttons */
@media (hover:hover){:where(html:not(.dm-touch)) .elementor-2405 .dm-wa-float .elementor-icon:hover{background-color:var(--color-coral-dark);transform:translateY(-2px);}}
.elementor-2405 .dm-wa-float .elementor-icon{transition:background-color .2s ease,transform .2s ease;}

/* ==== DM HOVER LAYER: END ==== */

/* ==== DM MOBILE LAYER: START ==== */
/* Phone and tablet, written against structure rather than against element ids,
   so a rebuild from Figma cannot take it with it. The converter already lays
   the transcription out as one fluid column below 1024px; this is the reading
   layer on top of it - what a page needs to be read on a small screen that the
   drawing, which exists only at 1920, never had to say.

   Everything here is scoped to <=1024px. The desktop transcription is not
   touched. */

@media (max-width: 1024px) {

  /* ---- headings and the copy under them --------------------------------
     The artwork right-aligns almost everything, which is correct beside a
     photograph at 1920 and reads as a ragged left edge once the same words are
     the full width of a phone. Centred, a heading and its standfirst read as
     one block. */
  .elementor-widget-heading .elementor-heading-title,
  .elementor-widget-heading,
  h1, h2, h3 {
    text-align: center !important;
  }

  /* the standfirst under a heading, and any lead paragraph in a hero */
  [data-elementor-type="wp-page"] .elementor-widget-text-editor,
  [data-elementor-type="single-page"] .elementor-widget-text-editor,
  [data-elementor-type="single"] .elementor-widget-text-editor,
  [data-elementor-type="archive"] .elementor-widget-text-editor,
  [data-elementor-type="error-404"] .elementor-widget-text-editor,
  [data-elementor-type="footer"] .elementor-widget-text-editor,
  [data-elementor-type="footer"] .elementor-widget-text-editor p {
    text-align: center !important;
  }

  /* The handwriting face runs small: at the pixel size that equalises the
     split headings it reads as a footnote next to its own Polin half. Scaled
     by what it looks like, not by what it measures. */
  /* sizing lives in the converter's drawn-size clamp (a flat vw here blew
     the 32px pill sentences up to 58). This is only the seam: the accent
     hugs the heading it belongs to instead of floating a gap below it. */
  body [data-elementor-type] .elementor-element.dm-script,
  body [data-elementor-type] .elementor-element.dm-script .elementor-heading-title,
  body [data-elementor-type] .elementor-element.dm-script p {
    line-height: 1.15 !important;
  }
  .elementor-widget-heading + .elementor-element.dm-script,
  .elementor-widget-text-editor + .elementor-element.dm-script {
    margin-top: -14px !important;
  }

  /* ---- cards read as one centred object -------------------------------
     The icon tile was drawn at the card's top-right corner; stacked on a
     phone that corner is just "off to the side". */
  .dm-hv-surface {
    align-items: center !important;
  }
  /* static and first, not absolutely parked on the title: the tile was
     drawn at the card's top corner, and on a phone that corner is the first
     line of words */
  /* only the runtime-marked icon tile is an icon: it is the ONE thing the
     grouping script promoted for being a small square picture. Every other
     picture in a card is exported art -- and the 416x547 background swirl in
     the "למי זה מיועד" cards is exactly that: hoisting it as an icon opened
     517px of white at the top of all three. */
  .dm-hv-surface > .dm-hv-icon {
    position: static !important;
    inset: auto !important;
    order: -1;
    align-self: center !important;
    margin: 0 auto 10px !important;
  }
  .dm-hv-surface > .dm-art:not(.dm-hv-icon) {
    position: absolute !important;
    order: 0;
    pointer-events: none;
  }

  /* ---- a card grows to its words, never past them ---------------------
     Step cards, service cards, "why" cards: the transcription locks each one
     to the height it was drawn at. In the desktop grid that keeps three
     cards level; stacked one above the other on a phone it is only dead air
     under the last line -- 318px of it under the LICBT steps, and the entire
     470px "gap" before שירותים נוספים was that plus the section's own
     bottom padding. */
  /* Simply: on a phone no container in the column keeps a drawn height.
     A locked height is a desktop device -- it keeps three cards level in a
     row. In a single column it is only dead air under the last line: 96px
     under every step card, 222px under the LICBT section, 517px inside the
     "למי זה מיועד" cards. Absolutely placed boxes are the ornaments and the
     backdrops; those keep their drawn size, or a badge collapses onto its
     paw. Everything in the flow grows to its words and stops. */
  /* section rhythm on a phone: 128px of padding on the way out of one
     section plus 128px on the way into the next, plus a card's own bottom
     padding, stacked to a 422px hole between "למה LICBT" and "שירותים
     נוספים". A drawn section padding is 1920 rhythm; on 375 it is capped. */
  /* :not(.e-atomic-element) -- this cap was written for the converted build,
     where the inner wrapper carried the section's drawn padding. In the
     atomic rebuild the padding lives on the section itself (sec-104,
     sec-lg, ...) as a clamp that already shrinks on a phone, and the inner
     wrapper is padding:0. Applied to both, every section paid twice: 48 or
     64 of its own plus 56 top and 56 bottom here, which is where the large
     empty bands between areas came from. */
  /* ...and the same for a loop item. These rules reached the testimonial card
     on a page only because the page .elementor-kit-6 is a descendant .elementor-kit-6 and the
     loop is nested inside it. On a theme template the document type is
     `single-page`, so the card lost 56px of padding a row and came out 176px
     shorter than the identical card on the approved home page. Rooting the
     rules at the loop item itself makes it render the same wherever it sits. */
  [data-elementor-type="wp-page"] > .e-con > .e-con:not(.e-atomic-element):not(.elementor-2519 *):not(.elementor-2617 *):not(.elementor-2905 *):not(.elementor-2513 *),
  [data-elementor-type="wp-page"] .e-con.e-parent > .e-con:not(.e-atomic-element):not(.elementor-2519 *):not(.elementor-2617 *):not(.elementor-2905 *):not(.elementor-2513 *),
  [data-elementor-type="loop-item"]:not(.elementor-2519):not(.elementor-2617):not(.elementor-2905):not(.elementor-2513) .e-con.e-parent > .e-con:not(.e-atomic-element) {
    padding-top: min(var(--dm-pt, 128px), 56px) !important;
    padding-bottom: min(var(--dm-pb, 128px), 56px) !important;
  }
  /* These two were written for page content and left unrooted, so they also
     reached the header bar: 32px of bottom padding under a 49px row inside a
     68px bar pushed the logo and the burger to the top of it, and the
     min-height reset took the bar's 68 away as well. Rooting them at the page
     and the footer -- the two trees they were meant for -- leaves the header
     to its own Elementor settings. */
  [data-elementor-type="wp-page"] .e-con.e-child[style*="padding"]:not(.elementor-2519 *):not(.elementor-2617 *):not(.elementor-2905 *):not(.elementor-2513 *),
  [data-elementor-type="wp-page"] .e-con.e-child:not(.elementor-2519 *):not(.elementor-2617 *):not(.elementor-2905 *):not(.elementor-2513 *),
  [data-elementor-type="loop-item"]:not(.elementor-2519):not(.elementor-2617):not(.elementor-2905):not(.elementor-2513) .e-con.e-child[style*="padding"],
  [data-elementor-type="loop-item"]:not(.elementor-2519):not(.elementor-2617):not(.elementor-2905):not(.elementor-2513) .e-con.e-child,
  [data-elementor-type="footer"] .e-con.e-child[style*="padding"],
  [data-elementor-type="footer"] .e-con.e-child {
    padding-bottom: min(96px, 32px) !important;
  }
  [data-elementor-type="wp-page"] .e-con.e-child:has(> .e-con.e-child):not(.elementor-2519 *):not(.elementor-2617 *):not(.elementor-2905 *):not(.elementor-2513 *),
  [data-elementor-type="loop-item"]:not(.elementor-2519):not(.elementor-2617):not(.elementor-2905):not(.elementor-2513) .e-con.e-child:has(> .e-con.e-child),
  [data-elementor-type="footer"] .e-con.e-child:has(> .e-con.e-child) {
    padding-bottom: 0 !important;
  }

  [data-elementor-type="wp-page"] .e-con:not(.elementor-absolute):not(.swiper-slide):not(.elementor-2519 *):not(.elementor-2617 *):not(.elementor-2905 *):not(.elementor-2513 *),
  [data-elementor-type="loop-item"]:not(.elementor-2519):not(.elementor-2617):not(.elementor-2905):not(.elementor-2513) .e-con:not(.elementor-absolute):not(.swiper-slide),
  [data-elementor-type="footer"] .e-con:not(.elementor-absolute):not(.swiper-slide) {
    height: auto !important;
    --height: auto !important;
    min-height: 0 !important;
    --min-height: 0 !important;
  }
  .dm-hv-surface .elementor-widget-heading .elementor-heading-title,
  .dm-hv-surface .elementor-widget-text-editor:not(:has(li)) {
    text-align: center !important;
  }

  /* a translucent background blob may carry a higher paint index than the
     button that joined the column beside it; a control never sits under a
     veil */
  /* a background veil is an absolutely placed container with nothing in it;
     the drawing's paint index put several of them above the column's own
     content, which is how a coral button rendered washed pink */
  /* not by the elementor-absolute class: the converter positions these bands
     through its own CSS and never writes that class. Anything that holds no
     widget paints nothing a reader needs; on a static box z-index is inert,
     so sweeping every empty container is safe. */
  [data-elementor-type] .e-con:not(:has(.elementor-widget)) {
    z-index: 0 !important;
  }

  .elementor-widget-button,
  a.dm-card-cta {
    position: relative;
    /* the veils carry the drawing's own paint indexes, which run past 40 on
       the home page; 5 lost to one of them and the button stayed washed */
    z-index: 60 !important;
  }

  /* the reader's own words, centred like everything else on a phone */
  .e-loop-item:not(.elementor-2519):not(.elementor-2617):not(.elementor-2905):not(.elementor-2513) .elementor-widget-text-editor,
  .e-loop-item:not(.elementor-2519):not(.elementor-2617):not(.elementor-2905):not(.elementor-2513) .elementor-widget-text-editor p {
    text-align: center !important;
  }

  /* the closing credit rows: three short lines that inherited a display gap */
  [data-elementor-type="footer"] .e-con {
    gap: 14px !important;
    --gap: 14px !important;
  }

  /* a carousel slide's card sits centred in its slide, not against one edge */
  .swiper-slide > .e-con,
  .swiper-slide .e-loop-item {
    margin-inline: auto !important;
  }

  /* ...but not running text inside an article, a card or a list: a centred
     paragraph of body copy is harder to read than a ragged one, and a centred
     bullet list loses the column its markers stand in. */
  .elementor-widget-theme-post-content,
  .elementor-widget-theme-post-content *,
  .dm-faq .elementor-widget-text-editor,
  .elementor-widget-text-editor ul,
  .elementor-widget-text-editor ol,
  .elementor-widget-icon-list .elementor-icon-list-item {
    text-align: start !important;
  }

  /* ---- line height ------------------------------------------------------
     A line height measured for a 72px display face is a chasm under a 40px
     one. Floor it in ems so it tracks whatever size the clamp lands on, and
     cap the run-on values the transcription carries down from the artwork. */
  .elementor-widget-heading .elementor-heading-title {
    line-height: 1.18 !important;
  }
  .elementor-widget-text-editor,
  .elementor-widget-text-editor p {
    line-height: 1.65 !important;
  }

  /* ---- nothing leaves the screen ---------------------------------------
     A belt to the converter's braces: any box that still carries a drawn pixel
     width is held to the viewport, and a picture inside it scales rather than
     sticking out. */
  /* stated with the widget's own width rule's specificity and after it in
     the cascade, or the exported display headline kept its drawn 551px and
     ran off the right edge of the phone */
  .elementor-widget img,
  .elementor-widget-image img,
  .e-loop-item img,
  body [data-elementor-type] .elementor-element.elementor-widget .elementor-widget-container img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* the carousel is the one row that is meant to be wider than the screen -
     it scrolls. Everything else is not. */
  .e-con > .elementor-widget:not(.elementor-widget-shortcode),
  .e-con-inner > .elementor-widget:not(.elementor-widget-shortcode) {
    max-width: 100% !important;
  }

  /* ---- the atomic rebuild on a phone -----------------------------------
     Five places where a layout that is right in a 1920 row reads wrong once
     the same boxes are a single column. All measured on the phone, not
     guessed. */

  /* "למי זה מיועד": the icon tile hangs 38px above its card, which is clear
     air when the three cards sit side by side and lands on the card above
     once they stack. The row gap has to clear the hang. */
  .elementor .card-grid-3:has(> .card-hang) { gap: 72px; }

  /* "למה טיפול בעזרת כלבים" and "למה LICBT": the cards are align-items:
     flex-start, so in RTL the icon and the body copy hug the right edge while
     the heading is centred -- three different edges in one card. Centred, the
     card reads as one column. text-align cascades to .t-body, which sets none
     of its own. */
  .elementor .e-con.card-corner-peach, .elementor .e-con.card-corner-cream,
  .elementor .e-con.card-corner-yellow, .elementor .e-con.card-sm,
  .elementor .e-con.card-sm-raised {
    align-items: center;
    text-align: center;
  }

  /* "לא חייבים להתמודד עם זה לבד": the white panel carries 80px of padding a
     side, which is right against a 1300 column and leaves 184px of usable
     width on a 390 phone. */
  .elementor .e-con.panel-white { padding: 14px; }

  /* The contact block's two cards ("שלחו הודעה" / "התקשרו עכשיו") keep their
     1920 right-hugging alignment, so icon and text sit against the right edge
     of a centred card -- the card is a wrapping row, so the icon lands on a
     second line where space-between parks it at the start edge.
     Element ids rather than structure: this block is the
     one piece of the page that is still a classic template, and it has no
     classes of its own to hang this on. */
  .elementor .elementor-2429 .elementor-element-6e92842,
  .elementor .elementor-2429 .elementor-element-7e94e89 { justify-content: center; }
  .elementor .elementor-2429 .elementor-element-6e92842 > *,
  .elementor .elementor-2429 .elementor-element-7e94e89 > * { align-self: center; }
  .elementor .elementor-2429 .elementor-element-f6be011,
  .elementor .elementor-2429 .elementor-element-bcb313b {
    align-items: center;
    text-align: center;
  }

  /* ---- אודות: עיטורי ההירו יורדים במסך קטן ------------------------------
     הכוכב וכף הרגל הם עיטור רוחב-מלא שנמדד ל-1920; בטאבלט ובמובייל הם נוחתים
     על הטקסט. הגרדיאנט נשאר -- הוא הרקע עצמו, לא עיטור. */
  .elementor .e-con.hero-about{
    background-image:
      linear-gradient(101deg, var(--color-cream) 0%, var(--color-cream-light) 50%,
                      var(--color-peach) 100%);
    background-position: 0 0;
    background-size: auto;
  }

  /* ---- אודות: "הכלבים שהובילו אותי" חוזר לטור אחד ----------------------
     הכלל בדסקטופ מחליף את auto-fit של panel-cols בשני טורים קבועים 32.5%/1fr,
     ומאבד את הקריסה לטור אחד. במובייל התמונה הייתה יוצאת 122px. */
  .elementor .dogs-about .panel-cols{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .elementor .dogs-about .stack{ gap: 24px; }
  .elementor .dogs-about .t-h2{ line-height: 1.14; }

  /* אודות: כרטיס "איך אני עובדת" -- 48 ריפוד נכון מול 896, לא מול 350 */
  .elementor .e-con.card-work{ padding: 20px; }

  /* ---- אודות: "ההסמכות שלי" בטלפון ------------------------------------
     הכללים בדסקטופ קובעים שני טורים ו-50 הזחה לכותרת, ששניהם לא נכנסים ב-375
     -- הכותרת יצאה ל--60 והכרטיסים חתכו את הטקסט. */
  .elementor .creds-about .panel-cols{ grid-template-columns: 1fr; gap: 24px; }
  .elementor .creds-about .t-h2,
  .elementor .creds-about .t-body{ padding-inline: 0; }
  .elementor .creds-about .pill-card{ padding: 20px; gap: 16px; }
  .elementor .creds-about .icon-48{ max-width: 48px; }

  /* ---- אודות: עיטורי "הצוות על ארבע" יורדים מתחת לטאבלט -----------------
     שני הבלובים וארבעת האייקונים ממוקמים מול קנבס 1920; בכל רוחב קטן יותר הם
     נוחתים על הטקסט. */
  .elementor .e-con.team-about{ background-image: none; }


  /* ---- עמוד תודה רבה (3969) בטאבלט ובטלפון ------------------------------
     The desktop build is one nowrap row inside a fixed 906 card, which is
     right at 1920 and overflows everything below 1024. */
  .elementor-3969 .e-con.elementor-element-tyband1{
    padding: 64px var(--space-gutter) 72px;
    background-image: none;
  }
  .elementor-3969 .elementor-element-tyinner > h1{ font-size: 48px; line-height: 56px; }
  .elementor-3969 .elementor-element-tyinner > p{ width: 100%; font-size: 20px; line-height: 30px; }
  .elementor-3969 .elementor-element-typill1 > p{ white-space: normal; }

  .elementor-3969 .e-con.elementor-element-tycard1{
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px;
    gap: 16px;
  }
  .elementor-3969 .e-con.elementor-element-tyctxt{ align-items: center; }
  .elementor-3969 .elementor-element-tyctxt > h3,
  .elementor-3969 .elementor-element-tyctxt > p{ white-space: normal; text-align: center; }
  .elementor-3969 .e-con.elementor-element-tycbtn{
    flex-wrap: wrap; justify-content: center; margin-inline-end: 0; width: 100%;
  }
  .elementor-3969 .elementor-element-tycbtn > a{ padding-inline: 28px; }
  .elementor-3969 .e-con.elementor-element-tybots{
    flex-wrap: wrap; justify-content: center; margin-block-start: 32px; width: 100%;
  }

  /* ---- עמוד צור קשר (3970) בטאבלט ובטלפון ------------------------------
     Two fixed columns and a 417 card with 50 of padding; at 375 that left the
     contact rows about 147px for an email address. */
  .elementor-3970 .e-con.elementor-element-ctband{
    padding: 64px var(--space-gutter) 72px;
    background-image: none;
  }
  .elementor-3970 .e-con.elementor-element-ctcols{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .elementor-3970 .e-con.elementor-element-ctfcard{ padding: 28px 20px; }
  .elementor-3970 .e-con.elementor-element-ctinfo{
    margin-block-start: 0;
    padding: 24px 20px;
    gap: 20px;
  }
  .elementor-3970 .elementor-element-ctinfo>.e-con{ padding: 14px; gap: 14px; }
  .elementor-3970 .elementor-element-ctinfo>.e-con>img{ width: 48px; max-width: 48px; }
  .elementor-3970 .elementor-element-ctinfo p,
  .elementor-3970 .elementor-element-ctinfo h4{ word-break: break-word; }
  .elementor-3970 .elementor-element-ctfcard>h1{ font-size: 30px; line-height: 36px; }
  .elementor-3970 .elementor-element-ctfcard>h1 em{ font-size: 52px; }

  /* ---- תבנית 404 (3980) בטאבלט ובטלפון --------------------------------
     A fixed four-column grid of 172s and two nowrap buttons; both overflow
     below 1024. */
  .elementor-3980 .e-con.elementor-element-e4band{
    padding: 64px var(--space-gutter) 72px;
    background-image: none;
  }
  .elementor-3980 .e-con.elementor-element-e4card{
    padding: 32px 20px;
    border-radius: 40px;
  }
  .elementor-3980 .elementor-element-e4card > p:nth-of-type(1){
    font-size: 80px; line-height: 84px;
  }
  .elementor-3980 .elementor-element-e4card > h1{ font-size: 32px; line-height: 38px; }
  .elementor-3980 .elementor-element-e4card > p:nth-of-type(2){ width: 100%; }
  .elementor-3980 .e-con.elementor-element-e4srch{ width: 100%; }
  .elementor-3980 .e-con.elementor-element-e4btns{
    flex-wrap: wrap; justify-content: center; width: 100%; gap: 16px;
  }
  .elementor-3980 .elementor-element-e4btns > a:first-child{ padding-inline: 70px 28px; }
  .elementor-3980 .elementor-element-e4btns > a:last-child{ padding-inline: 28px; }
  .elementor-3980 .e-con.elementor-element-e4sugh{ margin-block-start: 44px; }
  .elementor-3980 .elementor-element-e4sugh > h3{ white-space: normal; text-align: center; }
  .elementor-3980 .e-con.elementor-element-e4sugg{
    grid-template-columns: repeat(2, minmax(0, 172px));
    gap: 16px;
  }
  .elementor-3980 .elementor-element-e4sugg p{ white-space: normal; }

  /* t-cta-copy is nowrap at 1920, so the client's two <br>s give exactly the
     three lines the original shows; on a phone that would run off the screen. */
  .elementor .t-cta-copy{ white-space: normal; }

  /* ---- touch targets ----------------------------------------------------
     44px is the smallest thing a thumb can be asked to hit. */
  .elementor-button,
  .elementor-pagination .page-numbers,
  .elementor-nav-menu a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* ---- עמוד מאמרים (3987) --------------------------------------------
     The atomic pages carry no .elementor-widget-text-editor for the rules at
     the top of this layer to catch, so the standfirst is centred by name. At
     1920 it is right-aligned inside a 638 column; once that column is the
     width of the screen, a ragged left edge is just a ragged edge. */
  /* The original scales both display faces below 1024 -- min(72px,12vw) and
     min(110px,17vw) -- and floors the line heights in ems so they track
     whatever size the min lands on. Those rules are written against the
     classic widget classes, which an atomic page does not carry, so the same
     numbers are restated here by name. 3969 and 3980 already do this; 3973 is
     the one rebuilt page still sitting at a flat 72 on a phone. */
  .elementor-3987 .elementor-element-arhinner>h1{
    font-size:min(72px,12vw);line-height:1.18}
  .elementor-3987 .elementor-element-arhinner>h1 em{
    font-size:min(110px,17vw);line-height:1.18;top:0}
  .elementor-3987 .elementor-element-arhinner>p{
    width:100%;text-align:center;line-height:1.65}
  /* The ornaments are drawn at 1920. Left at their drawn pixel size they stop
     being corner glows on a phone and wash the whole band pink. The original
     scales each to 31.2% of the band below 1024 (and the bone to 1.5%); the
     assets carry 64px of blur margin on every side, so 31.2% of the shape is
     38vw of the file. Positions follow in vw for the same reason. */
  /* ---- מאמרים, שורת הסינון והחיפוש ------------------------------------
     space-between on a row whose first child has grown to the full width
     pushes the second one straight off the screen. Below 1024 the original
     stacks them: the chip rail wraps to two rows at 768 and three at 375, and
     the search box sits under it at the full column width. */
  .elementor-3987 .e-con.elementor-element-arfinner{
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:24px}
  .elementor-3987 .elementor-element-arfilt,
  .elementor-3987 .elementor-element-arsrch{
    width:100%;max-width:100%;flex:0 0 auto}
  .elementor-3987 .e-con.elementor-element-arfbar{
    padding-top:32px;padding-bottom:32px}

  .elementor-3987 .e-con.elementor-element-arhead{
    padding-top:96px;padding-bottom:104px;
    background-size:1.5vw 2.43vw,38vw 38vw,38vw 38vw,38vw 38vw;
    background-position:
      left 23.1% top 96px,
      left -17vw top -8vw,
      right -16vw top 6vw,
      right -11vw top 10vw}

  /* ---- עמוד שירותים (4004) --------------------------------------------
     The original's card grid is absolutely placed and simply falls out of its
     band below 1024 -- the band measures 56 tall there and the cards float
     free -- so there is nothing to transcribe. One column, as the rest of this
     layer reads, with each card held at its drawn 417 and centred. Rows go
     back to auto: equal-height rows are right beside each other and wrong
     stacked, where a short card would carry the tallest one's empty space. */
  .elementor-4004 .e-con.elementor-element-svgrid{
    grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;row-gap:78px}
  .elementor-4004 .elementor-element-svgrid>.e-con{
    max-width:417px;justify-self:center}
  .elementor-4004 .e-con.elementor-element-svband{
    padding-top:112px;padding-bottom:88px;
    background-size:
      43px 49px, 64px 64px, 69px 80px, 79px 99px, 80px 80px,
      38vw 38vw, 48vw 48vw, auto}
  .elementor-4004 .e-con.elementor-element-svhead{
    padding-top:96px;padding-bottom:104px;
    background-size:1.6vw 2.5vw,38vw 38vw}
  .elementor-4004 .elementor-element-svhinner>h1{
    font-size:min(72px,12vw);line-height:1.18}
  .elementor-4004 .elementor-element-svhinner>h1 em{
    font-size:min(110px,17vw);line-height:1.18;top:0}
  .elementor-4004 .elementor-element-svhinner>p{
    width:100%;text-align:center;line-height:1.65}

  /* ---- תבנית עמוד מאמר (4006) ------------------------------------------
     The 384 sidebar and the 836 body cannot sit side by side on a phone, so
     they stack -- the article first, its cards under it. The featured image
     keeps its drawn proportion instead of its drawn 350. */
  .elementor-4006 .e-con.elementor-element-artbodyin{
    flex-direction:column;align-items:stretch;gap:48px}
  .elementor-4006 .e-con.elementor-element-artmain,
  .elementor-4006 .e-con.elementor-element-artside{
    width:100%;flex:0 0 auto}
  .elementor-4006 .elementor-element-654755f img{
    height:auto;aspect-ratio:1256/350}
  .elementor-4006 .e-con.elementor-element-arthead{
    padding-top:96px;padding-bottom:56px}
  .elementor-4006 .elementor-element-artinner h1{
    font-size:min(60px,9vw);line-height:1.18;width:100%}
  .elementor-4006 .elementor-element-4e97f0d p{width:100%}
  .elementor-4006 .e-con.elementor-element-artmorehd{
    flex-direction:column;align-items:flex-start;gap:12px}
  .elementor-4006 .elementor-element-artmorehd h2{font-size:min(30px,6.6vw)}

  /* --- תבנית עמוד שירות (4007) ------------------------------------------
     כל שורה שהורמה מ-2733 נושאת רוחב מצויר בפיקסלים על שני ילדיה. כשסכומם
     גדול מהחלון, flex מכווץ אותם עד שעמודת טקסט הופכת לרצועה של 21px ומילה
     נשברת לאות בשורה. `flex-wrap:wrap` מוריד את הילד השני לשורה חדשה במקום
     לכווץ אותו - פתרון כללי אחד במקום ארבעים תיקונים פר-אלמנט. */
  .elementor-4007 .e-con[class*="elementor-element-"]{flex-wrap:wrap}

  /* תשעה קונטיינרים נושאים ריפוד צדדי שהוא מנגנון המרכוז של המקור: 310 משני
     הצדדים, או הזחה חד-צדדית של 128 עד 588 שדוחפת תוכן ימינה ב-RTL. ב-768
     הריפוד הזה גדול מהחלון עצמו ומשאיר עמודת תוכן של 87px - ו-min-width:auto
     של פריט flex נותן לו לנצח את max-width. הוא יורד כאן; המרווח לשוליים בא
     מריפוד הסקשן, בדיוק כמו בשאר העמודים. */
  .elementor-4007 .e-con.elementor-element-542759b,
  .elementor-4007 .e-con.elementor-element-8adcce7,
  .elementor-4007 .e-con.elementor-element-e355457,
  .elementor-4007 .e-con.elementor-element-cd0da81,
  .elementor-4007 .e-con.elementor-element-c6689bc,
  .elementor-4007 .e-con.elementor-element-ac1ef7e,
  .elementor-4007 .e-con.elementor-element-76e1264,
  .elementor-4007 .e-con.elementor-element-499c897,
  .elementor-4007 .e-con.elementor-element-91b7a1c,
  .elementor-4007 .e-con.elementor-element-993cdad,
  .elementor-4007 .e-con.elementor-element-75c0c81,
  .elementor-4007 .e-con.elementor-element-3b1b57a{padding-inline:0}

  /* הגלישה של 47px ופיצויה בכותרת הם גיאומטריה של עמודת 1300 בלבד; מתחת
     לזה הם דוחפים את ההירו ואת הכותרת אל מחוץ למסך. */
  .elementor-4007 .e-con.elementor-element-svphin{
    max-width:100%;margin-inline-start:0}
  .elementor-4007 .e-con.elementor-element-a8d494e{margin-inline-start:0}

  /* `75c0c81` מיישר את ילדיו למרכז, כלומר הם לא נמתחים - ובדסקטופ זה לא
     הפריע כי התוכן עצמו היה רחב. ב-375 הם התכווצו ל-143px ושורת הכותרת
     "מה קורה בטיפול" נשברה לשתי שורות של מילה. רוחב מלא מחזיר אותן. */
  .elementor-4007 .e-con.elementor-element-b9c2d41,
  .elementor-4007 .e-con.elementor-element-9fd9469,
  .elementor-4007 .e-con.elementor-element-21bdd90,
  .elementor-4007 .e-con.elementor-element-2642018,
  .elementor-4007 .e-con.elementor-element-e7047bd{width:100%}

  /* ההירו: עמודת הטקסט קבועה ב-661 ו-`542759b` שבתוכה ב-638, ולכן ה-h1
     נשבר לשתי שורות כבר ב-768 בעוד שבמקור הוא שורה אחת עד 375. רוחב מלא
     לעמודה, ואותה נוסחת גופן שכבר משמשת את 3987 ו-4004:
     min(72px,12vw) - 72 בטאבלט, 45 בטלפון, בדיוק כמו במקור. */
  /* `width` alone is not enough: the columns also carry `flex:0 1 661px`,
     and in a flex row the basis decides. Both are reset. */
  .elementor-4007 .e-con.elementor-element-993cdad,
  .elementor-4007 .e-con.elementor-element-4e3f3ea,
  .elementor-4007 .e-con.elementor-element-fa94f79,
  .elementor-4007 .e-con.elementor-element-542759b,
  .elementor-4007 .e-con.elementor-element-a537520,
  .elementor-4007 .e-con.elementor-element-1e69d71{width:100%;flex:0 0 100%}
  /* `.elementor-widget` is carried so this outranks the typography rule
     Elementor generates for the widget itself. */
  .elementor-4007 .elementor-element.elementor-element-35278e5.elementor-widget
    .elementor-heading-title{
    font-size:min(72px,12vw);line-height:1.14;text-align:center}
  .elementor-4007 .elementor-element.elementor-element-35278e5.elementor-widget{
    width:100%;max-width:100%}

  /* שתי עמודות "איך זה עובד" נשארו על ה-basis של הדסקטופ (574 ו-502) גם
     ב-768, אז הן נערמו אבל לא התרחבו - וכרטיס "מסגרת השירות" ישב 204px
     מהקצה השמאלי עם ההזחה של 68 שנועדה לדסקטופ. רוחב מלא לשתיהן. */
  .elementor-4007 .e-con.elementor-element-31c362c,
  .elementor-4007 .e-con.elementor-element-3db3b0d{
    width:100%;flex:0 0 100%;margin-inline-end:0}

  /* כל כותרות המקטע ב-4007 נשארו בגודל הדסקטופ בטלפון - 60px לחצי הרגיל
     ו-110px לחצי בכתב יד - בעוד שהמקור יורד ל-45 ול-63.75. אלה בדיוק
     min(60px,12vw) ו-min(110px,17vw) ב-375, ואותה נוסחה שכבר משמשת את
     3987 ו-4004. בטאבלט הערך לא משתנה.
     גם ה-container עצמו וגם ילדיו: בחלק מהווידג'טים הטקסט יושב ישירות
     ב-.elementor-widget-container בלי `<p>` משלו. */
  .elementor-4007 .elementor-element.elementor-element-74ceb56.elementor-widget
    .elementor-widget-container,
  .elementor-4007 .elementor-element.elementor-element-74ceb56.elementor-widget
    .elementor-widget-container > *,
  .elementor-4007 .elementor-element.elementor-element-57ba81f.elementor-widget
    .elementor-widget-container,
  .elementor-4007 .elementor-element.elementor-element-57ba81f.elementor-widget
    .elementor-widget-container > *,
  .elementor-4007 .elementor-element.elementor-element-99be5d8.elementor-widget
    .elementor-widget-container,
  .elementor-4007 .elementor-element.elementor-element-99be5d8.elementor-widget
    .elementor-widget-container > *,
  .elementor-4007 .elementor-element.elementor-element-6a3cd27.elementor-widget
    .elementor-widget-container,
  .elementor-4007 .elementor-element.elementor-element-6a3cd27.elementor-widget
    .elementor-widget-container > *,
  .elementor-4007 .elementor-element.elementor-element-cf77058.elementor-widget
    .elementor-widget-container,
  .elementor-4007 .elementor-element.elementor-element-cf77058.elementor-widget
    .elementor-widget-container > *,
  .elementor-4007 .elementor-element.elementor-element-e0998f5.elementor-widget
    .elementor-widget-container,
  .elementor-4007 .elementor-element.elementor-element-e0998f5.elementor-widget
    .elementor-widget-container > *{font-size:min(60px,12vw)}
  .elementor-4007 .elementor-element.elementor-element-72ad73b.elementor-widget
    .elementor-widget-container,
  .elementor-4007 .elementor-element.elementor-element-72ad73b.elementor-widget
    .elementor-widget-container > *,
  .elementor-4007 .elementor-element.elementor-element-5a0e017.elementor-widget
    .elementor-widget-container,
  .elementor-4007 .elementor-element.elementor-element-5a0e017.elementor-widget
    .elementor-widget-container > *,
  .elementor-4007 .elementor-element.elementor-element-72e2a9b.elementor-widget
    .elementor-widget-container,
  .elementor-4007 .elementor-element.elementor-element-72e2a9b.elementor-widget
    .elementor-widget-container > *,
  .elementor-4007 .elementor-element.elementor-element-f6c8252.elementor-widget
    .elementor-widget-container,
  .elementor-4007 .elementor-element.elementor-element-f6c8252.elementor-widget
    .elementor-widget-container > *,
  .elementor-4007 .elementor-element.elementor-element-7b9d54f.elementor-widget
    .elementor-widget-container,
  .elementor-4007 .elementor-element.elementor-element-7b9d54f.elementor-widget
    .elementor-widget-container > *{font-size:min(110px,17vw)}

  /* מרכוז במובייל, כמו בכל שאר העמודים. במקור כל שורת כותרת מפוצלת נשברת
     לשתי שורות ממורכזות ב-375 (`איך זה` 126..249, `עובד?` 144..231 - שתיהן
     סביב 187.5); אחרי ההרמה הן נשארו שורה אחת שנמתחת מקצה לקצה. הגלולות
     והכפתורים ממורכזים באותה הזדמנות. */
  .elementor-4007 .e-con.elementor-element-ca3d2c6,
  .elementor-4007 .e-con.elementor-element-b76c9ec,
  .elementor-4007 .e-con.elementor-element-157ca6c,
  .elementor-4007 .e-con.elementor-element-33e624f,
  .elementor-4007 .e-con.elementor-element-a68471d,
  .elementor-4007 .e-con.elementor-element-1e69d71{
    justify-content:center;align-items:center;text-align:center}
  .elementor-4007 .e-con.elementor-element-93e9e81,
  .elementor-4007 .e-con.elementor-element-25d4ff0,
  .elementor-4007 .e-con.elementor-element-6ff16c4{align-self:center}

  /* שלוש הרשתות יורדות משלוש עמודות לשתיים; בטלפון (למטה) לאחת.
     שלושת כרטיסי "האם זה מוכר לכם" נערמים במקור ב-375 לרוחב מלא
     (20..355), אז הם מתנהגים כאן כמו כל רשת אחרת. */
  .elementor-4007 .elementor-element-cb25a76,
  .elementor-4007 .elementor-element-d9fdf53,
  .elementor-4007 .e-con.elementor-element-svpcards{
    grid-template-columns:repeat(2,minmax(0,1fr));max-width:100%}


  /* ==== גל 1 · 25.08 - ארבעה שורשים משותפים =========================== */

  /* --- 1. כפתור שכווץ לרוחב תוכנו --------------------------------------
     כל ארבעת הכפתורים נושאים כבר `elementor-align-center`, ובכל זאת יושבים
     בקצה. המחלקה מיישרת את הטקסט *בתוך* התיבה, והתיבה עצמה רחבה 70px בלבד
     (`elementor-widget__width-initial`) ומוצבת ע"י ההורה שלה, שהוא flex עם
     `align-items:flex-start` - כלומר ימין ב-RTL. מה שצריך לזוז זו התיבה,
     ולכן `align-self`. `margin-inline` מכסה את המקרה שבו ההורה אינו flex,
     ולא עושה דבר כשהוא כן. הכרטיס ערוך לעמודה כבר ב-1024 (נמדד: dir=column,
     942x626), ולכן זה חי בשובר של 1024 ולא של 767. */
  .elementor-2513 .elementor-element.elementor-element-c37908a {
    align-self: center;
  }
  /* שלושת כפתורי תבנית המאמר חזרו, בלי `margin-inline:auto`. הוא - ולא
     `align-self` - היה מה שהוציא אותם מ-stretch והכווץ אותם ל-16px. נוסה
     ב-`trial.py` על העמוד החי לפני הדחיפה: שלושתם ב-187 ו-188 ב-375,
     הרוחב (113 · 74 · 107) וההורים לא זזו. ב-768 השניים הראשונים ב-384,
     והשלישי ב-567 - שהוא המרכז של העמודה שלו ברשת בת שתי העמודות. */
  .elementor-4006 .elementor-element.elementor-element-30101f9,
  .elementor-4006 .elementor-element.elementor-element-7eba113,
  .elementor-4006 .elementor-element.elementor-element-f63a4d8 {
    align-self: center;
  }

  /* ==== גל 2 · 25.08 - נקודתי ========================================= */

  /* --- AR1 · התגיות בעמוד מאמרים ---------------------------------------
     שורת הסינון היא flex עם `wrap` ו-`justify-content:flex-start`. במרכוז
     כל שורה מתמרכזת בנפרד, וזה מה שמבוקש - לא פריט בודד במרכז המסך. */
  .elementor-3987 .elementor-element-arfilt .e-filter {
    justify-content: center;
  }

  /* --- AB3 · הריווח בין תיבות העקרונות ----------------------------------
     האייקון עגול 112px ויושב על גבול התיבה, כלומר בולט 56px מעליה. הרווח
     היה 17px, ולכן הוא טיפס על התיבה שמעליו ונחתך בעיגול הפינות שלה.
     72px נותנים לו את 56 שלו ועוד אוויר. `--grid-row-gap` ולא `row-gap`
     לבדו: מיכל רשת של אלמנטור קורא את המשתנה, וחוק על `row-gap` בלבד
     נבלע בלי להשפיע (נוסה - הגובה לא זז). */
  .elementor-3775 .elementor-element.elementor-element-469d901 {
    --grid-row-gap: 72px;
    row-gap: 72px;
  }

  /* --- A7 · הבאנר "מוכנים לצעד הראשון" ----------------------------------
     האייקון ישב ב-144 והכפתור ב-220, על מסך שמרכזו 187. שורש: המיכלים
     הפנימיים הם `.e-con-inner` בכיוון `row`, ובשורה המיקום האופקי הוא
     `justify-content` - לא `align-items`, שהוא הציר המשני. זו הייתה הטעות
     בניסיון הראשון. נמדד: אייקון 144 -> 188, כפתור 220 -> 187. */
  .elementor-4006 .elementor-element-9e652a8 > .e-con-inner,
  .elementor-4006 .elementor-element-8804289 > .e-con-inner,
  .elementor-4006 .elementor-element-d34f867 > .e-con-inner,
  .elementor-4006 .elementor-element-b0c524d > .e-con-inner {
    justify-content: center;
    align-items: center;
  }
  .elementor-4006 .elementor-element.elementor-element-e2da424 > .e-con-inner {
    align-items: center;
  }

  /* --- A8 · שורת "מאמרים קשורים" -----------------------------------------
     התמונה הייתה 64x34 בתוך תיבה בגובה 146, כלומר בול זעיר שצף בחלל.
     עמודת התמונה עולה ל-88, התמונה ממלאת אותה בריבוע עם `object-fit:cover`,
     ועמודת הכותרת מקבלת `flex:1 1 auto` עם `min-width:0` כדי שתתפוס את
     היתר במקום להתכווץ ל-20px. שלושת ה-`!important` כאן מבטלים
     `max-width:100%!important` ו-`height:auto!important` שכבר קיימים
     בשכבה הזו על כל תמונה בפריט לולאה - זה החריג היחיד שהברִיף מתיר. */
  .elementor-2617 .elementor-element.elementor-element-e9248c0 {
    gap: 12px;
    --align-items: center;
  }
  .elementor-2617 .elementor-element.elementor-element-5cb3013 {
    flex: 0 0 88px;
    width: 88px;
    max-width: 88px;
  }
  .elementor-2617 .elementor-element.elementor-element-f4009f2 {
    width: 88px;
    max-width: 88px !important;
  }
  .elementor-2617 .elementor-element.elementor-element-f4009f2
    .elementor-widget-container {
    width: 88px;
  }
  /* הסלקטור הארוך אינו קישוט: בשכבה הזו כבר יושב
     `body [data-elementor-type] .elementor-element.elementor-widget
      .elementor-widget-container img{max-width:100%!important;height:auto!important}`
     בספציפיות (0,4,2). חוק קצר יותר - אפילו עם `!important` - מפסיד לו,
     וזה בדיוק מה שקרה בניסיון הראשון: הרדיוס נתפס והמידות לא. */
  body [data-elementor-type] .elementor-2617
    .elementor-element.elementor-element-f4009f2.elementor-widget
    .elementor-widget-container img {
    width: 88px !important;
    height: 88px !important;
    max-width: 88px !important;
    object-fit: cover;
    border-radius: 12px;
    display: block;
  }
  .elementor-2617 .elementor-element.elementor-element-77c480e {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* --- A8 המשך · הריפוד שירש כל מיכל בפריט לולאה -------------------------
     שתי העמודות בשורה קיבלו 56px ריפוד אנכי מהחוק הגורף של פריטי הלולאה
     שבתחילת השכבה, ולכן שורה עם תמונה בגובה 88 יצאה 200. הסלקטור נצמד
     ל-`[data-elementor-type="loop-item"]` **בלי רווח** לפני `.elementor-2617`:
     שני התארים יושבים על אותו אלמנט, וגרסה עם רווח מחפשת צאצא ולא מוצאת
     דבר - זה מה שקרה בניסיון הראשון. נמדד: 200 -> 88. */
  [data-elementor-type="loop-item"].elementor-2617
    .e-con.elementor-element.elementor-element-5cb3013,
  [data-elementor-type="loop-item"].elementor-2617
    .e-con.elementor-element.elementor-element-77c480e {
    padding-block: 0 !important;
  }

  /* --- S4 · הצ'קמארקים ב"התהליך המלא" -----------------------------------
     אותו שורש כמו S8: ה-`flex-wrap:wrap` הגורף שבר כל שורה לשתיים, והסימן
     נשאר לבדו מעל הטקסט. נמדד: שורה 80 -> 59, שורה ארוכה 109 -> 59,
     והבלוק כולו 450 -> 281. `flex-start` ולא `center` - הסימן צריך לשבת
     על שורת הטקסט הראשונה, לא באמצע פסקה בת שתי שורות. */
  .elementor-4007 .elementor-element.elementor-element-2642018 > .e-con {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 10px;
  }
  .elementor-4007 .elementor-element.elementor-element-2642018 > .e-con > * {
    min-width: 0;
  }

  /* --- S7 · המידע במסגרת השירות -----------------------------------------
     ארבעה מהתגים הם תמונה מוכנה 68x71, והחמישי בנוי מ-CSS: מיכל עגול עם
     אייקון 24px בתוכו. במובייל הוא איבד גובה ונמעך ל-68x28 - גלולה שטוחה
     בשורה של עיגולים. `aspect-ratio` מחזיר לו את הריבוע.
       שיניתי כאן את ההחלטה שרשמתי מראש: תכננתי לפרק את שלוש השורות לערימה
     אנכית, ואחרי שצילמתי ראיתי ששורת אייקון-תווית-ערך קריאה לגמרי ב-375.
     הפגם היחיד היה התג המעוך. פירוק הפריסה היה שינוי עיצוב שלא ביקשו. */
  .elementor-4007 .elementor-element.elementor-element-e924577 {
    width: 68px;
    aspect-ratio: 1;
    align-items: center;
    justify-content: center;
  }

  /* --- S3 · המרווחים העצומים בין האזורים --------------------------------
     זה השורש, לא סימפטום. שכבת המובייל תוחמת ריפוד סקשנים תחת
     `[data-elementor-type="wp-page"]` בלבד. עמוד שירות נטען כ-`single-page`
     ועמוד מאמר כ-`single-post`, ולכן שתי התבניות מעולם לא קיבלו את התקרה
     ונשארו עם ערכי הדסקטופ: 144/216 בהירו, 110/104 בגלריה, 142/85 בשאלות -
     מול 64/64 אחידים בכל עמוד רגיל.
       `min(var(--padding-top, 0px), 64px)` ולא ערך קבוע: הוא קורא את המשתנה
     שאלמנטור עצמו כותב, אז סקשן שכבר צנוע נשאר כפי שהוא ורק החורגים נחתכים.
     נמדד ב-375: הירו 2754->2414 · מי מתאים 1718->1503 · גלריה 466->272 ·
     שאלות 1452->1245. ב-768 אותו כיוון. הכותרת `.elementor` בסלקטור אינה
     קישוט - בלעדיה זה תיקו מול חוק אלמנטור, והקובץ שלו נטען אחרי הקיט. */
  .elementor.elementor-4007 > .e-con.elementor-element,
  .elementor.elementor-4006 > .e-con.elementor-element {
    padding-top: min(var(--padding-top, 0px), 44px);
    padding-bottom: min(var(--padding-bottom, 0px), 44px);
  }

  /* --- S1 · כותרות התיבות ב"האם זה מוכר לכם" ----------------------------
     אותו דפוס של הכפתורים: הכותרת נושאת `text-align:center` אבל התיבה שלה
     מכווצת לרוחב הטקסט ומוצבת בהתחלה. `align-self` מזיז את התיבה.
     `97da978` כבר תופסת את מלוא הרוחב ולכן אינה ברשימה. */
  .elementor-4007 .elementor-element.elementor-element-2580349,
  .elementor-4007 .elementor-element.elementor-element-0d51bdf {
    align-self: center;
  }

  /* --- S9 · כותרות השאלות הנפוצות ---------------------------------------
     השאלה היא כפתור, לא כותרת. הטקסט כבר צמוד לימין; מה שנראה לא מיושר
     הוא השורה השנייה, שהתמרכזה מתחת לראשונה. */
  .elementor-4007 .dm-faq-item .elementor-button-text {
    text-align: start;
  }

  /* --- S8 · האייקונים ב"מה תוכלו להשיג" ---------------------------------
     `flex-wrap:wrap` הגורף של 4007 שבר כל כרטיס לשתי שורות: הצ'קמארק
     לבדו למעלה, הטקסט מתחתיו, והכרטיס נמתח ל-132px עם חלל ריק.
     `nowrap` מחזיר אותם לשורה אחת; `min-width:0` מרשה לטקסט להתכווץ במקום
     לדחוף. נמדד: כרטיס 132->83 · הרשת 914->676 · הסקשן 1405->1008. */
  .elementor-4007 .elementor-element-d9fdf53 > .e-con {
    flex-wrap: nowrap;
    align-items: center;
  }
  .elementor-4007 .elementor-element-d9fdf53 > .e-con > * {
    min-width: 0;
  }

  /* --- S6 · הכותרת במסגרת השירות ----------------------------------------
     `align-items:flex-start` הצמיד את הכותרת לימין, אל תוך רדיוס הפינה,
     ושם היא נחתכה. מרכוז ועוד 24px ריפוד אנכי. */
  .elementor-4007 .elementor-element.elementor-element-5df2435 {
    align-items: center;
    padding-block: 24px;
  }

  /* --- 2. עיגול הפינות בכרטיס המאמר ------------------------------------
     ההנחה הראשונה שלי הייתה שהתמונות איבדו רדיוס במובייל. הן לא: אף תמונה
     באתר לא נושאת רדיוס בעצמה - הוא תמיד על המיכל, עם overflow:clip. בכרטיס
     המאמר הכרטיס עצמו כן מעוגל (28px, clip) אבל התמונה יושבת 55px פנימה
     ממנו, ולכן החיתוך לא נוגע בה והיא נשארת מלבן חד. ווידג'ט התמונה כבר
     `overflow:clip`, אז רדיוס עליו לבדו מעגל את התמונה. */
  .elementor-2513 .elementor-element.elementor-element-0a2bf05 {
    border-radius: 20px;
  }

  /* --- 3. תקרה לשלוש כותרות ---------------------------------------------
     `min()` ולא clamp גלובלי: מעל ~700px ה-min בוחר בערך הקבוע, כך שהחוק
     מת מעצמו בטאבלט ובדסקטופ ואינו נוגע במה שכבר אושר.
       אודות  48px  ->  7.6vw  = 28.5px ב-375 (היה חמש שורות, 360px גובה)
       מאמר   60px  ->  9vw    = 33.8px ב-375 (היה חמש שורות, 342px גובה)
       שירות  60px  ->  8.5vw  = 31.9px ב-375 (היה 45px, שתי שורות מקצה לקצה)
     ב-4007 החוק הקיים מכסה שלוש כותרות יחד, אבל שתיים מהן הן חצי-מילה
     בצמד עם חצי בכתב-יד ("איך זה"/"עובד?"). הן קצרות ולא נשברות, והקטנתן
     הייתה שוברת את הצמד. רק `e0998f5` הוא משפט שלם שעומד לבדו, ולכן רק הוא
     מקבל תקרה נמוכה יותר. */
  .elementor-3775 .e-con.elementor-element-8623c8b h2.t-h2 {
    font-size: min(48px, 7.6vw);
    line-height: 1.28;
  }
  .elementor-4006 .elementor-element.elementor-element-d01a43d.elementor-widget
    .elementor-heading-title {
    font-size: min(30px, 8vw);
    line-height: 1.18;
  }
  .elementor-4007 .elementor-element.elementor-element-e0998f5.elementor-widget
    .elementor-widget-container,
  .elementor-4007 .elementor-element.elementor-element-e0998f5.elementor-widget
    .elementor-widget-container > * {
    font-size: min(60px, 8.5vw);
  }

  /* --- 4. עיגול ראשי התיבות בלולאת ההמלצות ------------------------------
     בדסקטופ העיגול הוא 64x64 עם 16px ריפוד למעלה ולמטה. במובייל הוא נמדד
     39x85 ב-375 ו-26x85 ב-768 - קפסולה מתוחה, ולכן ראשי התיבות והתיאור
     שלצידם נראים כאילו אינם על אותו קו.
       הרוחב: התיבה היא פריט flex בלי בסיס, אז היא נכווצת עם השורה.
       הגובה: החוק הגורף שלי `[data-elementor-type="loop-item"] .e-con.e-child`
       מוסיף 32px ריפוד תחתון לכל מיכל בפריט לולאה - כולל עיגול אווטאר.
     זה החוק שלי ולכן זו האחריות שלי. `!important` כאן הוא החריג היחיד
     שהברִיף מתיר: ביטול חוק שנושא `!important` בעצמו. */
  .elementor-2905 .elementor-element.elementor-element-8cbfcc3 {
    flex: 0 0 64px;
    padding-block-end: 16px !important;
  }
  .elementor-2905 .elementor-element.elementor-element-755ce1f {
    padding-block-end: 0 !important;
  }


  /* ==== סבב 26.08 ערב - ממצאי הסריקה העצמאית השנייה ==================== */

  /* --- הלולאות המודרניות (2519/2617/2905) הוחרגו מחוקי הגורף למעלה.
     מה שנשאר להן כאן הוא נקודתי. --- */

  /* כרטיס מאמר (2519): רצועת התמונה נושאת min-height:192 מהדסקטופ; ב-375
     התמונה נמוכה יותר והфрейм מציץ מתחתיה. הפינות: הכרטיס עגול 28 אבל
     הרצועה לא - התמונה הדביקה פינות ישרות לפינה העגולה. */
  /* 26.08 לילה - בקשת הלקוח: כותרות ותקצירים של כרטיסי מאמרים ממורכזים */
  .elementor-2519 .elementor-element.elementor-element-29d7c71 .elementor-heading-title,
  .elementor-2519 .elementor-element.elementor-element-29d7c71 .elementor-widget-container,
  .elementor-2519 .elementor-element.elementor-element-7ae2eff .elementor-widget-container,
  .elementor-2519 .elementor-element.elementor-element-7ae2eff .elementor-widget-container p {
    text-align: start !important;
  }
  .elementor-2519 .elementor-element.elementor-element-baa1e20 {
    --min-height: 0px;
    min-height: 0;
    border-radius: 27px 27px 0 0;
  }

  /* שורות המאמרים ב-/articles/ (2513): אותה מחלה - 56px של החוק הגורף מעל
     ומתחת לתמונה ומעל הטקסט, וכותרת/תקציר שמורכזו בכוח. הוחרגה מהגורף;
     אלה הערכים הנקודתיים שנשארים. */
  .elementor-2513 .elementor-element.elementor-element-4d6fd53 {
    --min-height: 0px;
    min-height: 0;
  }
  .elementor-2513 .elementor-element.elementor-element-adc4e82 .elementor-heading-title,
  .elementor-2513 .elementor-element.elementor-element-adc4e82 h2,
  .elementor-2513 .elementor-element.elementor-element-6cde89b .elementor-widget-container,
  .elementor-2513 .elementor-element.elementor-element-6cde89b .elementor-widget-container p,
  .elementor-2513 .elementor-element.elementor-element-6cde89b {
    text-align: start !important;
  }

  /* המלצות (2905): קופסת הציטוט שורטטה בפיגמה 335x145 קבועים והטקסט נגלל
     בתוכה. בעמודה אחת במובייל זה קוטע ציטוט באמצע מילה. הגבהים האלה
     נכתבים ב-CSS של הלולאה עם !important - הביטול חייב לשאת אותו גם
     (החריג שהבריף מתיר: שבירת חוק שנושא !important בעצמו). */
  .elementor-2905 .elementor-element.elementor-element-9978306.e-con,
  .elementor-2905 .elementor-element.elementor-element-08fba78.e-con,
  .elementor-2905 .elementor-element.elementor-element-080106d.e-con,
  .elementor-2905 .elementor-element.elementor-element-1930f28.e-con {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .elementor-2905 .elementor-element.elementor-element-08fba78.e-con {
    overflow: visible;
    /* הקיבוע האמיתי: flex-basis 145 בציר העמודה. auto - או שהציטוט לא גדל. */
    flex: 0 0 auto !important;
  }
  .elementor-2905 .elementor-element.elementor-element-4c56f5c.elementor-widget { height: auto !important; }
  /* ריפודי המיקום מהדסקטופ (323px/270px שמאלה) לא שייכים לעמודה אחת */
  .elementor-2905 .elementor-element.elementor-element-080106d.e-con,
  .elementor-2905 .elementor-element.elementor-element-1930f28.e-con {
    --padding-left: 0px;
    justify-content: center;
  }
  /* גובה אחיד לשקופיות כמו בדסקטופ: הכרטיס ממלא את השקף, העודף נאסף
     בין הציטוט לחתימה, והחתימה מוצמדת לתחתית. בלי זה כרטיס קצר משאיר
     בור שמנת בגובה הציטוט הארוך ביותר מתחתיו. */
  .dm-testimonial-carousel .swiper-slide .e-loop-item,
  .dm-testimonial-carousel .swiper-slide .elementor-2905 { height: 100%; }
  .elementor-2905 .elementor-element.elementor-element-9978306.e-con { height: auto !important; }
  .dm-testimonial-carousel .swiper-wrapper { align-items: flex-start; }
  .elementor-3973 .elementor-loop-container { align-items: start; }
  .elementor-2905 .elementor-element.elementor-element-1930f28.e-con { margin-block-start: 0; }

  /* תבנית מאמר (4006): חותמת הכפה בבאנר הסיום נשארה בגודל הדסקטופ -
     168px על באנר של 335. */
  .elementor-4006 .elementor-element.elementor-element-3c9956f { width: 80px; }

  /* "מאמרים קשורים": שורת האייקון והכותרת התקפלה כי העוטף התכווץ לרוחב
     האייקון; הכותרת ירדה שורה ונשברה לשתיים. */
  /* 04.09: השורה של האייקון והכותרת מוגדרת בקיט לכל הרוחבים */
  .elementor-4006 .elementor-element-43d42ce h3 {
    white-space: nowrap;
  }
  .elementor-4006 .elementor-element-43d42ce h3 { text-align: start !important; }
  /* השורש האמיתי: המיכל נושא ‎--padding-left:181px‎ מהשרטוט (מיקום־ימין
     בדסקטופ) שמצמק את התוכן ל-96px. במובייל אין לו מקום. */
  .elementor-4006 .e-con.elementor-element.elementor-element-43d42ce {
    padding-inline: 0;
  }

  /* כותרת מאמר קשור קצרה ישבה בראש התיבה במקום מול מרכז התמונה */
  .elementor-2617 .elementor-element.elementor-element-77c480e,
  .elementor-2617 .elementor-element.elementor-element-50d8909 { justify-content: center; }

  /* תבנית שירות (4007): גלולת הקטגוריה בהירו - העוטף הפנימי הוא e-con-full
     (רוחב 100%), ובשורה עוטפת הוא ירד שורה: אייקון למעלה, טקסט למטה,
     גלולה בגובה 84. */
  .elementor-4007 .elementor-element.elementor-element-93e9e81 {
    flex-wrap: nowrap;
    align-self: center;
  }
  .elementor-4007 .elementor-element.elementor-element-49b436b {
    width: auto;
    flex: 0 1 auto;
  }

  /* סיפור השירות: gap 111px בין שני בלוקי הטקסט הוא מקצב הדסקטופ */
  .elementor-4007 .e-con.elementor-element-svpwhotx { gap: 40px; }
  /* margin-top:172px של הדסקטופ בין ההירו ל"האם זה מוכר" */
  .elementor-4007 .elementor-element.elementor-element-a8d494e { margin-top: 56px; }

  /* טקסט רץ בתוך כרטיסים ורשימות ב-4007: חוק המרכוז הגורף תפס גם אותו.
     כותרות סקשן נשארות ממורכזות; גוף רב-שורות חוזר ליישור התחלה. */
  .elementor-4007 .elementor-element-e7047bd .elementor-widget-text-editor,
  .elementor-4007 .elementor-element-e7047bd .elementor-widget-text-editor p,
  .elementor-4007 .elementor-element-d9fdf53 .elementor-widget .elementor-widget-container,
  .elementor-4007 .elementor-element-d9fdf53 .elementor-widget .elementor-widget-container > * {
    text-align: start !important;
  }
  /* 26.08 לילה - בקשת הלקוח: הפסקאות בעמודי שירות ממורכזות */
  .elementor-4007 .elementor-element-svpcards .elementor-widget-text-editor,
  .elementor-4007 .elementor-element-svpcards .elementor-widget-text-editor p {
    text-align: center !important;
  }
  .elementor-4007 .elementor-element-322672c .elementor-widget-container,
  .elementor-4007 .elementor-element-322672c .elementor-widget-container p,
  .elementor-4007 .elementor-element-e4fe33c .elementor-widget-container,
  .elementor-4007 .elementor-element-e4fe33c .elementor-widget-container p {
    text-align: start !important;
  }

  /* 27.08 - בטווח הטאבלט הכרטיסים יושבים 2-בשורה ברשת שכל שורותיה שוות
     גובה. החוק הגורף שלי `.dm-hv-surface{align-items:center!important}`
     ממרכז את תוכן הכרטיס אנכית, ולכן כותרת שנשברת לשתי שורות מזיזה את כל
     הכרטיס שלה ביחס לשכנו - בדיוק "השורות לא באותו גובה" שדווח בדסקטופ.
     `!important` כאן הוא החריג המותר: ביטול חוק שנושא `!important` בעצמו.
     בטלפון (עמודה אחת) המרכוז חוזר, בשובר של 767. */
  .elementor-4007 .e-con.elementor-element-svpc1.dm-hv-surface,
  .elementor-4007 .e-con.elementor-element-svpc2.dm-hv-surface,
  .elementor-4007 .e-con.elementor-element-svpc3.dm-hv-surface {
    align-items: flex-start !important;
  }

  /* 26.08 לילה - ההמלצות ממורכזות (בקשת הלקוח, גלובאלי) */
  .elementor-2905 .elementor-element.elementor-element-4c56f5c,
  .elementor-2905 .elementor-element.elementor-element-4c56f5c .elementor-widget-container,
  .elementor-2905 .elementor-element.elementor-element-4c56f5c p {
    text-align: start !important;
  }

  /* פוטר: 56px לשורת ניווט אחת (44 מגע + 12 שוליים). היעד 44+2. החוק של
     אלמנטור נושא 6 מחלקות - כאן 6 מחלקות + שני תגים כדי לנצח בקביעות. */
  [data-elementor-type="footer"] .elementor-element.elementor-element-0c79590.dm-footer-nav .elementor-nav-menu--main ul.elementor-nav-menu > li.menu-item:not(:last-child) {
    margin-bottom: 2px;
  }


  /* ==== 04.09: סבב ההערות של הלקוחה והמעצבת (טאבלט וטלפון) ============= */

  /* D-P6 חותמת הכפה בבאנר המאמר: ריבוע מעוגל קטן יותר */
  .elementor-4006 .elementor-element.elementor-element-3c9956f.dm-cta-paw {
    width: 80px;
    height: 80px;
    padding: 18px;
    border-radius: 20px;
  }

  /* G-M1 מילות כתב היד בכותרות המפוצלות קטנות מדי: השותף מעט גדול יותר,
     כתב היד גדול ממנו בבירור */
  /* 27.09: גם זוג שהטקסט שלו יושב ישר בווידג'ט, בלי p ("מה קורה בטיפול", שדה
     דינמי); עד עכשיו הוא נשאר בגודל הדסקטופ (60/110) בטלפון */
  .elementor-4007 .e-con:has(> .dm-script) > .elementor-widget:not(.dm-script) h2,
  .elementor-4007 .e-con:has(> .dm-script) > .elementor-widget:not(.dm-script) p,
  .elementor-4007 .e-con:has(> .dm-script) > .elementor-widget-text-editor:not(.dm-script) > .elementor-widget-container:not(:has(p)) {
    font-size: min(32px, 8.5vw) !important;
  }
  .elementor-4007 .e-con:has(> .dm-script) > .dm-script h2,
  .elementor-4007 .e-con:has(> .dm-script) > .dm-script p,
  .elementor-4007 .e-con:has(> .dm-script) > .dm-script.elementor-widget-text-editor > .elementor-widget-container:not(:has(p)) {
    font-size: min(58px, 15.5vw) !important;
  }


  /* 04.09 (טאבלט וטלפון): התגית מעל התמונה, התמונה של הסיפור מעל הטקסט */
  /* M-S2 התגית מעל התמונה, עם רווח: העמודה הטקסטואלית משחררת את ילדיה אל
     ההירו, והתגית מקבלת את המקום הראשון */
  .elementor-4007 .e-con.elementor-element.elementor-element-svphcols {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .elementor-4007 .e-con.elementor-element.elementor-element-4e3f3ea { display: contents; }
  .elementor-4007 .e-con.elementor-element.elementor-element-4e3f3ea > * { order: 3; width: 100%; }
  .elementor-4007 .e-con.elementor-element.elementor-element-93e9e81 { order: 1; width: fit-content; margin-bottom: 4px; }
  .elementor-4007 .e-con.elementor-element.elementor-element-993cdad { order: 2; }
  /* M-S3 הסיפור: התמונה מעל הטקסט, הטקסט לימין */
  .elementor-4007 .e-con.elementor-element.elementor-element-svpwhoin { flex-direction: column; }
  .elementor-4007 .e-con.elementor-element.elementor-element-0a932b6 { order: -1; }

  /* ==== 23.09: סבב 2.0 (טאבלט וטלפון) ================================= */
  /* P083 הפס מעל הפוטר: 6px. החוק הגורף של הגבהים נושא !important ולכן גם
     הביטול, ו-:not(#dm) מעלה את הספציפיות מעליו. */
  .elementor-3180 .e-con.elementor-element.elementor-element-9d09d8a:not(#dm) {
    height: 6px !important;
    min-height: 6px !important;
    padding-block: 0 !important;
  }

}

/* Phone only: the display faces need a harder cap than the tablet does. */
@media (max-width: 767px) {
  /* --- A1 · יחס תמונת ההירו של המאמר ------------------------------------
     היחס הוא `1256 / 350` - הבאנר הרחב של הדסקטופ. ב-375 הוא הופך את
     התמונה לרצועה בגובה 93px. `1200/630` הוא היחס של קובץ המקור עצמו
     (og), אז אין חיתוך מעבר למה ש-`object-fit:cover` עושה ממילא. נמדד:
     93 -> 176. ב-768 הרצועה עדיין 197px וקריאה כבאנר, ולכן זה טלפון בלבד. */
  .elementor-4006 .elementor-element.elementor-element-654755f img {
    aspect-ratio: 1200 / 630;
  }

  /* --- S5 · "איך זה עובד" - המספר מעל ההסבר ------------------------------
     היה: רשת בת שתי עמודות, עיגול המספר בעמודה הימנית וקו אנכי בן 3px
     שחוצה את כל ארבעת השלבים. ב-375 העיגול נחתך בקצה המסך והקו עבר דרכו.
     הלקוח ביקש את המספר מעל ההסבר, כל הסבר עם המספר שלו, בלי הקו.
       העמודה בת 64px נשארת כדי שהעיגול יישאר עיגול - בעמודה אחת הוא
     מתכווץ לרוחב הספרה (נמדד: 8x48). הכותרת והפסקה פורשות על שתי העמודות
     בשורות 2 ו-3, ולכן מקבלות את מלוא ה-335. נמדד: כותרת 239 -> 335,
     עיגול 64x64, הקו נעלם. האזור גדל ב-110px - זה המחיר של שורה נוספת. */
  .elementor-4007 .elementor-element.elementor-element-2fdc5c3 {
    display: none;
  }
  /* 04.09: פריסת הצעדים בטלפון הוגדרה מחדש בהמשך הבלוק (M-S6) */

  /* --- חצי הקרוסלה בלולאת ההמלצות ----------------------------------------
     החצים ממוקמים אבסולוטית ב-22x22 על x=20 ו-x=333, כלומר בדיוק על שני
     קצות הכרטיס שרוחבו 335 - הם יושבים על גבי הציטוט. בדסקטופ יש להם
     שוליים לשבת בהם, בטלפון אין. הנקודות מתחת לכרטיס נשארות, וגם ההחלקה,
     אז לא הולכת שום דרך ניווט.
       `!important` כאן הוא ההגנה היחידה: ה-`display` של החצים נקבע מחוץ
     למפל ה-CSS (נבדק - חוק בלי `!important` באותה ספציפיות לא מזיז אותם). */
  .dm-testimonial-carousel .elementor-swiper-button {
    display: none !important;
  }

  /* --- S2 · שתי בועות הקישוט - ההסתרה עברה לשכבת הקיט (כל הרוחבים):
     בדסקטופ הן פוערות חור ורוד של 200px+ מתחת לסיפור. ראו global-additions. */

  /* --- AB4 + AB5 · שני האזורים שנשארו בשתי עמודות ------------------------
     "למי אני יכולה לעזור" ו"הצוות על ארבע" הן רשתות שלא ירדו לעמודה אחת
     בטלפון. התוצאה נמדדה: עמודות ברוחב 128px ו-99px, כלומר מילה אחת בשורה,
     ושתי כותרות שנשפכות. ב-768 שתי הרשתות עדיין עובדות יפה בשתי עמודות
     (איחודן שם דווקא מגדיל את האזור מ-584 ל-797 ומ-1018 ל-1914), ולכן זה
     טלפון בלבד. נמדד ב-375: 1432 -> 1110 ו-3208 -> 3007, והכרטיסים ירדו
     מ-194 ל-74 גובה. */
  .elementor-3775 .elementor-element.elementor-element-616b94d,
  .elementor-3775 .elementor-element.elementor-element-34d0699 {
    --grid-columns: 1;
    grid-template-columns: minmax(0, 1fr);
  }

  /* --- AB1 · התמונה עוברת מתחת לכותרת ------------------------------------
     זה נראה כמו שינוי מבנה במסמך אלמנטור, והוא לא חייב להיות: שני הילדים
     הם פריטי רשת, ו-`order` מזיז אותם בלי לגעת במסמך. סדר ה-DOM נשאר,
     כלומר גם אין סיכון לקופי. נמדד: גוש הטקסט עלה מ-y=1662 ל-y=1182. */
  .elementor-3775 .elementor-element-e63e24a > *:first-child {
    order: 1;
  }

  /* --- AB2 · השורה של "הכלבים שהובילו אותי לדרך שלי" ---------------------
     החצי בכתב-יד הוא `<em>` בתוך הכותרת, והוא נשבר באמצע: "לדרך" נשאר
     בשורה הראשונה ו"שלי" ירד לבדו. כבלוק הוא יורד כולו לשורה משלו - בדיוק
     הירידה אחרי המילה "אותי" שביקש הלקוח. `line-height` חוזר ל-1.05 כי
     ה-`em` נושא `.1em` כדי לא לנפח את שורת הכותרת כשהוא inline, וכבלוק
     הערך הזה היה מוחק לו את הגובה. `align-self:stretch` על הכותרת עצמה -
     בלעדיו היא מתכווצת לרוחב התוכן וזזה מהמרכז (נמדד: 335 -> 276). */
  .elementor-3775 .elementor-element-a1fae57 h2.t-h2 {
    align-self: stretch;
  }
  .elementor-3775 .elementor-element-a1fae57 h2.t-h2 em {
    display: block;
    line-height: 1.05;
  }

  /* --- H1 · ההיסט של התיבה האמצעית --------------------------------------
     `margin-top:-16px` ו-`margin-bottom:16px` הם היסט מכוון: בדסקטופ
     ובטאבלט שלוש התיבות זו לצד זו והאמצעית יורדת מעט. כשהן נערמות זה
     הופך לרווח 8px מעליה מול 39px מתחתיה - בדיוק מה שדווח. מתאפס רק
     בטלפון, כי ב-768 הרשת עדיין בת שתי עמודות וההיסט עדיין נכון. */
  .elementor-3304 .elementor-element.elementor-element-4de2108 {
    margin-block: 0;
  }

  /* --- H2 · פריטי "לא חייבים להתמודד עם זה לבד" -------------------------
     כל שורה היא flex-row: אייקון 48px בימין וגוש טקסט לצידו, מיושר
     להתחלה. בטלפון היא נערמת - האייקון למעלה, הכותרת והתיאור מתחתיו,
     הכל במרכז. ב-768 השורות עדיין בשתי עמודות ונשארות כפי שהן. */
  .elementor-3304 .elementor-element-0f25119 > .e-con {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .elementor-3304 .elementor-element-0f25119 > .e-con > .e-con {
    align-items: center;
    text-align: center;
  }

  .elementor-4007 .elementor-element-cb25a76,
  .elementor-4007 .elementor-element-d9fdf53,
  .elementor-4007 .e-con.elementor-element-svpcards{
    grid-template-columns:minmax(0,1fr);row-gap:24px}

  .elementor-widget-heading .elementor-heading-title {
    line-height: 1.14 !important;
  }
  .elementor-3987 .elementor-element-arhinner>h1,
  .elementor-3987 .elementor-element-arhinner>h1 em{
    line-height: 1.14;
  }
  .elementor-4004 .elementor-element-svhinner>h1,
  .elementor-4004 .elementor-element-svhinner>h1 em{
    line-height: 1.14;
  }

  /* ---- the footer standfirst's hard break ------------------------------
     The client's copy carries a <br> after "שינוי", which is a deliberate
     two-line shape at 1920 where the paragraph is 372 wide. On a phone the
     paragraph is the full 350 and the same break lands mid-thought, leaving
     the first line short and the word stranded. The <br> stays in the markup
     -- the copy is the client's and removing the tag would be a rewrite --
     it just stops forcing a break at this width, and the paragraph wraps on
     its own. */
  .elementor-location-footer .elementor-widget-text-editor br {
    display: none;
  }

  /* ==== סבב 26.08 ערב - 767 ומטה ======================================= */

  /* "באילו קשיים ניתן לעזור": שש תיבות של שורת טקסט אחת, כל אחת 266px
     גובה עם 85px ריפוד תחתון - מסך שלם לתיבה. במובייל הן הופכות לשורות:
     אייקון 48 מימין, תווית לצידו. */
  .elementor-4007 .elementor-element-cb25a76 > .e-con.e-child {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    --padding-top: 18px;
    --padding-bottom: 18px;
    padding-top: 18px;
    padding-bottom: 18px;
    padding-inline: 22px;
    border-radius: 24px;
    min-height: 0;
  }
  .elementor-4007 .elementor-element-cb25a76 > .e-con.e-child .dm-art {
    width: 48px;
    flex: 0 0 48px;
  }
  .elementor-4007 .elementor-element-cb25a76 > .e-con.e-child .dm-art img {
    width: 48px !important;
    height: 48px !important;
  }
  .elementor-4007 .elementor-element-cb25a76 > .e-con.e-child > .e-con {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    align-items: flex-start;
  }
  .elementor-4007 .elementor-element-cb25a76 > .e-con.e-child h3 {
    text-align: start !important;
  }

  /* ==== 26.08 לילה - סבב הערות חי של הלקוח ============================= */

  /* עמוד הבית: רווח בין כפתור ההירו לתמונה */
  .elementor-3304 .hero-photo { margin-top: 28px; }
  /* שבירת השורה בכותרת "מחזירים ביטחון," - ה-br חי רק בטלפון */
  .dm-br-m { display: inline; }
  /* "לא חייבים להתמודד" - הכותרת והטקסטים למרכז */
  .elementor-3304 .elementor-element-09add6b h2 { align-self: center; text-align: center; }
  .elementor-3304 .elementor-element-09add6b p { text-align: center; }

  /* אודות: כותרת וכותרת משנית למרכז */
  .elementor-3775 .elementor-element-c2365cd h1,
  .elementor-3775 .elementor-element-c2365cd h2 { align-self: center; text-align: center; }
  /* כל הפסקאות למרכז - מלבד בלוק הסיפור "יש ילדים" שנשאר לימין */
  .elementor-3775 .elementor-element-0358ce2 p,
  .elementor-3775 .elementor-element-83f754b p,
  .elementor-3775 .elementor-element-a446731 p,
  .elementor-3775 .elementor-element-a7284e6 p { text-align: center; }
  /* "למי אני יכולה לעזור" - הכל למרכז כולל הכפתור */
  .elementor-3775 .e-con.elementor-element.elementor-element-97f1c3d { align-items: center; }
  .elementor-3775 .e-con.elementor-element.elementor-element-97f1c3d > * { align-self: center; }
  .elementor-3775 .e-con.elementor-element.elementor-element-97f1c3d .e-con { align-items: center; }
  .elementor-3775 .elementor-element-97f1c3d h2 { text-align: center; }
  /* "ההסמכות שלי" - כותרת למרכז; בתיבות אייקון מעל, הכל ממורכז */
  .elementor-3775 .e-con.elementor-element.elementor-element-8b386a2 > h2 { align-self: center; text-align: center; }
  .elementor-3775 .e-con.elementor-element.elementor-element-4cb60e7,
  .elementor-3775 .e-con.elementor-element.elementor-element-4d50106,
  .elementor-3775 .e-con.elementor-element.elementor-element-275fb4d,
  .elementor-3775 .e-con.elementor-element.elementor-element-7523cb2 {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
  }
  /* אייקון התיבה: בשרטוט הוא תג בפינה; כאן מעל הטקסט, במרכז */
  .elementor-3775 .elementor-element-4cb60e7 > img,
  .elementor-3775 .elementor-element-4d50106 > img,
  .elementor-3775 .elementor-element-275fb4d > img,
  .elementor-3775 .elementor-element-7523cb2 > img,
  .elementor-3775 .elementor-element-4cb60e7 .e-image-base,
  .elementor-3775 .elementor-element-4d50106 .e-image-base,
  .elementor-3775 .elementor-element-275fb4d .e-image-base,
  .elementor-3775 .elementor-element-7523cb2 .e-image-base {
    position: static !important;
    align-self: center !important;
    margin: 0 !important;
    transform: none !important;
  }
  .elementor-3775 .elementor-element-4cb60e7 h3, .elementor-3775 .elementor-element-4cb60e7 p,
  .elementor-3775 .elementor-element-4d50106 h3, .elementor-3775 .elementor-element-4d50106 p,
  .elementor-3775 .elementor-element-275fb4d h3, .elementor-3775 .elementor-element-275fb4d p,
  .elementor-3775 .elementor-element-7523cb2 h3, .elementor-3775 .elementor-element-7523cb2 p {
    text-align: center;
  }

  /* תבנית מאמר: כותרת משנית קטנה יותר וממורכזת */
  .elementor-4006 .elementor-element.elementor-element-4e97f0d.elementor-widget .elementor-widget-container,
  .elementor-4006 .elementor-element.elementor-element-4e97f0d.elementor-widget .elementor-widget-container > * {
    font-size: 19px !important;
    line-height: 1.55 !important;
    text-align: center !important;
  }
  /* "מוכנים לצעד הראשון" - התיאור ממורכז */
  .elementor-4006 .elementor-element-d34f867 p { text-align: center !important; }
  /* מאמרים קשורים - כותרות לימין גם כשנשברת שורה */
  .elementor-2617 .elementor-element.elementor-element-b3d7f4c .elementor-heading-title,
  .elementor-2617 .elementor-element.elementor-element-b3d7f4c .elementor-heading-title a,
  .elementor-2617 .elementor-element.elementor-element-b3d7f4c h3 {
    text-align: start !important;
  }
  .elementor-2617 .elementor-element.elementor-element-50d8909 { align-items: flex-start; }

  /* עמוד המלצות: הכותרת נכנסת בשורה אחת, המשני קטן יותר */
  .elementor-3973 .elementor-element-tshead h1 {
    font-size: min(38px, 10vw) !important;
    line-height: 1.15 !important;
  }
  .elementor-3973 .elementor-element-tshead h1 em {
    display: inline;
    font-size: 1.2em !important;
    line-height: 1 !important;
  }
  .elementor-3973 .elementor-element-tshead p {
    font-size: 18px !important;
    line-height: 1.55 !important;
  }

  /* בטלפון הכרטיסים בעמודה אחת - המרכוז של dm-hv-surface חוזר כשהיה. */
  .elementor-4007 .e-con.elementor-element-svpc1.dm-hv-surface,
  .elementor-4007 .e-con.elementor-element-svpc2.dm-hv-surface,
  .elementor-4007 .e-con.elementor-element-svpc3.dm-hv-surface {
    align-items: center !important;
  }


  /* ==== 04.09: סבב ההערות של הלקוחה והמעצבת (טלפון) ==================== */

  /* --- הבית --- */
  /* M-H1 הקו המקווקו שמתחת לתמונה של דפנה: גדול יותר */
  /* 23.09: הגל מצויר מחדש בבלוק של סבב 2.0 בהמשך */
  /* M-H2 הטקסט בתוך שלוש הגלולות הלבנות: במרכז */
  .elementor-3304 .elementor-element-f6ea896 p { text-align: center; }
  /* M-H3 יותר אוויר בין הגל ל"למה טיפול בעזרת כלבים", פחות בין הטקסט לכרטיסים */
  .elementor-3304 .e-con.elementor-element.elementor-element-2c039b2 { padding-top: 64px; }
  .elementor-3304 .e-con.elementor-element.elementor-element-6dc0b4f { gap: 24px; }
  /* M-H4 "איך זה עובד": קו מקווקו באלכסון לאורך כל הסקשן, הבלובים מפוזרים,
     הכתום נמוך יותר.
     27.09 (סבב 3: "קצת גלי מידי"): אלכסון אחד מהפינה העליונה לתחתונה עם
     גליות עדינה. הסטייה מהקו הישר היא 6-9% מהרוחב (כ-25px בטלפון), לעומת
     עד 45% בגרסה של 23.09. */
  .elementor-3304 .e-con.elementor-element.elementor-element-1b02b79 {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M86 1C80 21 67 37 50 50S20 79 14 99' fill='none' stroke='%23FFD0C3' stroke-width='3' stroke-dasharray='10 9' vector-effect='non-scaling-stroke' stroke-linecap='round'/></svg>");
    background-size: 100% 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
  }
  .elementor-3304 .e-con.elementor-element.elementor-element-23a016c {
    background-position: 50% 0%, calc(100% + 170px) 62%, -150px 22%;
  }
  /* M-H6 תג שנות הניסיון צרוב בתוך תמונת "מי אני" (about-photo-blob.png);
     אי אפשר להגדיל אותו ב-CSS. פתוח לשאלה. */
  /* M-H7 אוויר בין הכרטיס הלבן ל"שיחת ייעוץ ראשונה", ופחות בין הכותרת להמלצות */
  .elementor-3304 [data-id="812ce65"] { margin-top: 20px; }
  .elementor-3304 .e-con.elementor-element.elementor-element-8b4ea10,
  .elementor-3775 .e-con.elementor-element.elementor-element-8b4ea10,
  .elementor-4007 .e-con.elementor-element.elementor-element-8b4ea10,
  .elementor-3987 .e-con.elementor-element.elementor-element-8b4ea10 { gap: 28px; }

  /* --- אודות --- */
  /* M-A5 התיבות הצהובות "למי אני יכולה לעזור": טקסט לימין; הכותרת והפסקה
     שמעליהן נשארות במרכז */
  .elementor-3775 .elementor-element-5ac48f0 p { text-align: start; }
  .elementor-3775 .elementor-element-97f1c3d p { text-align: center; }
  /* M-A1 הטקסט שמתחת ל"הכלבים שהובילו אותי לדרך שלי": לימין */
  .elementor-3775 .elementor-element-a1fae57 p { text-align: start; }
  /* the atomic headings carry no element-id class, only data-id */
  .elementor-3775 .e-con.elementor-element.elementor-element-f81762c h3[data-id="76374f4"],
  .elementor-3775 .e-con.elementor-element.elementor-element-f81762c h3[data-id="8e9431c"] {
    text-align: start;
    align-self: flex-start;
  }
  /* M-A3 הרווח בין הכותרות בתוך הדף: אחיד */
  .elementor-3775 .e-con.elementor-element.elementor-element-f81762c,
  .elementor-3775 .e-con.elementor-element.elementor-element-97f1c3d,
  .elementor-3775 .e-con.elementor-element.elementor-element-87b78b6 { gap: 16px; }
  .elementor-3775 .e-con.elementor-element.elementor-element-34d0699,
  .elementor-3775 .e-con.elementor-element.elementor-element-5ac48f0 { margin-top: 20px; }

  /* --- כותרות העמודים: אותו גודל בכל עמוד, כתב היד באותו קו --- */
  /* 23.09: כותרות אטומיות נושאות רק data-id; בגרסה של 04.09 החוק הגיע רק להמלצות */
  .elementor-3775 [data-id="557b098"],
  .elementor-4004 [data-id="svh1"],
  .elementor-3987 [data-id="arh1"],
  .elementor-3973 .elementor-element-tshead h1 {
    font-size: 40px !important;
    line-height: 1.15 !important;
  }
  .elementor-3775 [data-id="557b098"] em,
  .elementor-4004 [data-id="svh1"] em,
  .elementor-3987 [data-id="arh1"] em,
  .elementor-3973 .elementor-element-tshead h1 em {
    /* 27.09 (סבב 3: "תובנות קטנה מידי"): 1.25 הפך ל-1.5, היחס של הדסקטופ
       (110 מול 72 בכל ארבע הכותרות). line-height 0.8 שומר על גובה השורה. */
    font-size: 1.5em !important;
    line-height: 0.8 !important;
    display: inline;
    position: static !important;
    top: auto !important;
    vertical-align: baseline;
  }
  .elementor-3775 [data-id="a5c7265"],
  .elementor-4004 [data-id="svlead"],
  .elementor-3987 [data-id="arlead"],
  .elementor-3973 .elementor-element-tshead p {
    font-size: 18px !important;
    line-height: 1.5 !important;
  }

  /* --- דף המלצות: פחות רווח בין הפתיח להמלצות --- */
  .elementor-3973 .e-con.elementor-element-tshead { padding-bottom: 24px; }
  .elementor-3973 .e-con.elementor-element-tsband { padding-top: 24px; }

  /* --- עמוד שירות --- */
  /* M-S4 יותר אוויר בין הגלריה ל"באילו קשיים" */
  .elementor-4007 .e-con.elementor-element-svphelp { padding-top: 56px; }
  /* M-S6 "איך זה עובד": המספרים בימין על קו אחד, הטקסט משמאלם ומיושר לימין */
  .elementor-4007 .e-con.elementor-element.elementor-element-f3a3512 {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-rows: repeat(4, auto);
    column-gap: 18px;
    row-gap: 40px;
  }
  .elementor-4007 .e-con.elementor-element.elementor-element-f3a3512::before {
    content: "";
    position: static;
    top: auto;
    left: auto;
    height: auto;
    opacity: 1;
    border: 0;
    mix-blend-mode: normal;
    transition: none;
    grid-column: 1;
    grid-row: 1 / -1;
    justify-self: center;
    width: 3px;
    margin-block: 40px;
    border-radius: 3px;
    background: linear-gradient(180deg, #FFD0C3 0%, #FFE9A8 100%);
  }
  .elementor-4007 .e-con.elementor-element.elementor-element-7d0c0a0,
  .elementor-4007 .e-con.elementor-element.elementor-element-a9f301d,
  .elementor-4007 .e-con.elementor-element.elementor-element-12ded6b,
  .elementor-4007 .e-con.elementor-element.elementor-element-a367c21 {
    grid-column: 1 / -1;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 8px;
    justify-items: start;
  }
  .elementor-4007 .e-con.elementor-element.elementor-element-7d0c0a0 { grid-row: 1; }
  .elementor-4007 .e-con.elementor-element.elementor-element-a9f301d { grid-row: 2; }
  .elementor-4007 .e-con.elementor-element.elementor-element-12ded6b { grid-row: 3; }
  .elementor-4007 .e-con.elementor-element.elementor-element-a367c21 { grid-row: 4; }
  .elementor-4007 .e-con.elementor-element.elementor-element-7d0c0a0 > *:nth-child(3),
  .elementor-4007 .e-con.elementor-element.elementor-element-a9f301d > *:nth-child(3),
  .elementor-4007 .e-con.elementor-element.elementor-element-12ded6b > *:nth-child(3),
  .elementor-4007 .e-con.elementor-element.elementor-element-a367c21 > *:nth-child(3) {
    grid-area: 1 / 1 / 3 / 2;
    width: 64px;
    aspect-ratio: 1;
    align-self: start;
    justify-self: center;
  }
  .elementor-4007 .e-con.elementor-element.elementor-element-7d0c0a0 > *:nth-child(1),
  .elementor-4007 .e-con.elementor-element.elementor-element-a9f301d > *:nth-child(1),
  .elementor-4007 .e-con.elementor-element.elementor-element-12ded6b > *:nth-child(1),
  .elementor-4007 .e-con.elementor-element.elementor-element-a367c21 > *:nth-child(1) {
    grid-area: 1 / 2 / 2 / 3;
    width: 100%;
    text-align: start !important;
  }
  .elementor-4007 .e-con.elementor-element.elementor-element-7d0c0a0 > *:nth-child(2),
  .elementor-4007 .e-con.elementor-element.elementor-element-a9f301d > *:nth-child(2),
  .elementor-4007 .e-con.elementor-element.elementor-element-12ded6b > *:nth-child(2),
  .elementor-4007 .e-con.elementor-element.elementor-element-a367c21 > *:nth-child(2) {
    grid-area: 2 / 2 / 3 / 3;
    width: 100%;
    text-align: start !important;
  }
  .elementor-4007 .e-con.elementor-element.elementor-element-7d0c0a0 .elementor-widget-container,
  .elementor-4007 .e-con.elementor-element.elementor-element-a9f301d .elementor-widget-container,
  .elementor-4007 .e-con.elementor-element.elementor-element-12ded6b .elementor-widget-container,
  .elementor-4007 .e-con.elementor-element.elementor-element-a367c21 .elementor-widget-container,
  .elementor-4007 .e-con.elementor-element.elementor-element-7d0c0a0 .elementor-widget-container > *,
  .elementor-4007 .e-con.elementor-element.elementor-element-a9f301d .elementor-widget-container > *,
  .elementor-4007 .e-con.elementor-element.elementor-element-12ded6b .elementor-widget-container > *,
  .elementor-4007 .e-con.elementor-element.elementor-element-a367c21 .elementor-widget-container > *,
  .elementor-4007 .e-con.elementor-element.elementor-element-7d0c0a0 .e-con,
  .elementor-4007 .e-con.elementor-element.elementor-element-a9f301d .e-con,
  .elementor-4007 .e-con.elementor-element.elementor-element-12ded6b .e-con,
  .elementor-4007 .e-con.elementor-element.elementor-element-a367c21 .e-con {
    text-align: start !important;
    align-items: flex-start;
  }

  /* --- עמוד מאמרים: פחות רווח בין הפתיח לסרגל הסינון --- */
  .elementor-3987 .e-con.elementor-element-arhead { padding-bottom: 20px; }

  /* --- עמוד מאמר --- */
  /* M-P1 רווח בין הכפתור לטקסט שמעליו בבאנר */
  .elementor-4006 .elementor-element.elementor-element-57e4861 { margin-top: 20px; }
  /* M-P4 אוויר לפני "עוד מאמרים" */
  .elementor-4006 .e-con.elementor-element-artmore { padding-top: 56px; }


  /* ==== 23.09: סבב 2.0 (טלפון) ======================================== */

  /* P056 הקו המקווקו מתחת לתמונה של דפנה: גלי. החיתוך של 04.09 השאיר רק את
     החלק השטוח; הקו מצויר עכשיו מאותו מסלול של העיצוב, נמתח לרוחב המסך,
     והמקפים נשארים בעובי שלהם */
  .elementor-3304 .e-con.elementor-element.elementor-element-1f37345 {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1922 81' preserveAspectRatio='none'><path d='M0.8 40.2C480.9 168.2 1441.1 -87.9 1921.2 40.2' fill='none' stroke='%23FFD0C3' stroke-width='3' stroke-dasharray='10 8' vector-effect='non-scaling-stroke'/></svg>");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  /* החוק הגורף של הגבהים מאפס min-height עם !important, ולכן גם כאן */
  .elementor-3304 .e-con.elementor-element.elementor-element-1f37345:not(#dm) { min-height: 52px !important; }
  .elementor-3304 .e-con.elementor-element.elementor-element-1f37345 img { display: none; }

  /* P065 ההסמכות: כותרת בשורה אחת תופסת את כל רוחב הכרטיס, כמו אחיותיה */
  .elementor-3775 .e-con.elementor-element.elementor-element-8b386a2 h3 { align-self: stretch; text-align: center; }
  /* P067 רווח בין "העקרונות שמנחים אותי" לכרטיס הראשון */
  .elementor-3775 .e-con.elementor-element.elementor-element-469d901 { margin-top: 64px; }
  /* P068 הטקסט שמתחת ל"הצוות על ארבע": לימין */
  .elementor-3775 .e-con.elementor-element.elementor-element-f81762c > [data-id="084cc8d"] { text-align: start; }

  /* P071 + P073 + P075 + P077 זוגות הכותרות בעמוד השירות: זה לצד זה במרכז,
     על קו בסיס אחד, ונשברים לשתי שורות רק כשאין מקום */
  .elementor-4007 .e-con.elementor-element:has(> .dm-script) {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 0;
  }
  .elementor-4007 .e-con.elementor-element:has(> .dm-script) > .elementor-widget {
    width: auto;
    max-width: 100%;
    flex: 0 1 auto;
  }

  /* P073 אוויר בין הגלריה ל"באילו קשיים" (תקרת הריפוד של הטלפון איפסה אותו) */
  .elementor.elementor-4007 > .e-con.elementor-element.elementor-element-svphelp { padding-top: 48px; }
  /* P074 פחות אוויר בין "באילו קשיים" ל"מה עושים בליווי": 128px של הדסקטופ
     בתחתית הפאנל ובראש הסקשן הבא */
  .elementor-4007 .e-con.elementor-element.elementor-element-7287e09 { --padding-bottom: 40px; padding-bottom: 40px; }
  .elementor-4007 .e-con.elementor-element.elementor-element-23bf250 { --padding-top: 40px; padding-top: 40px; }

  /* P076 "מסגרת השירות": הכותרות והטקסטים לימין. חוקי המרכוז הגורפים נושאים
     !important ולכן גם החריג. */
  .elementor-4007 .elementor-element-9d3896e .elementor-widget-heading .elementor-heading-title,
  .elementor-4007 .elementor-element-9d3896e .elementor-widget-text-editor,
  .elementor-4007 .elementor-element-9d3896e .elementor-widget-text-editor p {
    text-align: start !important;
  }
  /* 27.09 (סבב 3: "האייקון ברח קצת למעלה"): החוק הזה תפס גם את ריבוע המתנה
     (491c023 > e924577) והצמיד את האייקון לראש הריבוע. הריבועים מוחרגים. */
  .elementor-4007 .elementor-element-9d3896e .e-con .e-con:not(.elementor-element-491c023):not(.elementor-element-e924577) { align-items: flex-start; }


  /* P142 (סבב 1) "מאמרים ותובנות": האותיות של "ותובנות" בכתב היד יושבות נמוך
     מקו הבסיס של השותף; מורם יחסית לגודל הגופן */
  .elementor-3987 [data-id="arh1"] em { position: relative !important; top: -0.12em !important; }

  /* P080 שורות המאמרים: גם "לקריאה" לימין, כמו הכותרת והתקציר */
  .elementor-2513 .elementor-element.elementor-element-c37908a { align-self: flex-start; }
  .elementor-2513 .elementor-element.elementor-element-c37908a .elementor-button-wrapper { text-align: start; }
  .elementor-2513 .elementor-element.elementor-element-c37908a .elementor-button { width: auto; }

  /* ==== 27.09: סבב 3.0 (טלפון) ==== */
  /* R3 פתיח אודות: התמונה של דפנה מיד אחרי הכותרת הכתומה, ושאר הטקסט אחריה.
     עמודת הטקסט (e7eabaa) נפתחת ב-display:contents, כך ששלושת האלמנטים שלה
     והתמונה נסדרים באותה רשת (ddd168a) לפי order. */
  .elementor-3775 .e-con.elementor-element.elementor-element-ddd168a { row-gap: 20px; }
  .elementor-3775 .e-con.elementor-element.elementor-element-e7eabaa { display: contents; }
  .elementor-3775 [data-id="557b098"] { order: 1; }
  .elementor-3775 [data-id="a5c7265"] { order: 2; }
  .elementor-3775 [data-id="11c0c71"] { order: 3; }
  .elementor-3775 [data-id="bbb24e3"] { order: 4; }
  /* R3 הקו המקווקו מעל "איך אני עובדת?": בגובה 32px בחיתוך מהמרכז (במקום
     הקטנה ל-16px, קו של פחות מפיקסל). הרצועה היא החצי העליון שלו, כמו בדסקטופ.
     החוק הגורף של הגבהים (height:auto !important, ספציפיות 0,8,0) מחייב
     :not(#dm) ו-!important. */
  .elementor-3775 .e-con.elementor-element.elementor-element-927fc3a:not(#dm) { aspect-ratio: auto; height: 16px !important; --height: 16px !important; }
  .elementor-3775 .e-con.elementor-element.elementor-element-927fc3a > [data-id="76179d0"] { height: 32px; width: 100%; object-fit: cover; }
}

@media (max-width: 1024px) {
  /* R3 הרצועה של הקו באודות נראית לחוק הגורף כ"מיכל ריק" (התמונה האטומית אינה
     .elementor-widget) ומקבלת z-index:0 !important, ואז הסקשן הורוד מצויר מעל
     חצי הקו. הספציפיות כאן (0,4,0) גוברת על (0,3,0) של החוק הגורף. */
  .elementor-3775 .e-con.elementor-element.elementor-element-927fc3a { z-index: 1 !important; }

  /* R4 (29.09) "רווח מעל הגלריה" בכל עמודי השירות באייפון (iOS 26.7): שני
     מיכלים עמודתיים עם flex-wrap:wrap (החוק הגורף של 4007 בשורה ~510) ובסיס flex
     בפיקסלים שנכתב לדסקטופ (620 ו-377 רוחב). מתחת ל-1025 ההורה עמודתי, והבסיס
     הופך לגובה. iOS 26 מחשב גובה מינימום של עמודה גולשת לפי הפריט הגבוה ולא לפי
     הסכום, אז המיכל נשאר בגובה הבסיס והגוש השני של הסיפור גלש לעמודה חדשה מחוץ
     למסך (x=-373 במכשיר של עדי, דרך ?dmdiag=1). בסיס אוטומטי ובלי גלישה. */
  .elementor-4007 .e-con.elementor-element.elementor-element-svpwhotx,
  .elementor-4007 .e-con.elementor-element.elementor-element-0a932b6 { flex: 0 0 auto; flex-wrap: nowrap; }
}
/* ==== DM MOBILE LAYER: END ==== */

/* ==== DM LEGAL LAYER: START ==== */
/* The three legal pages are plain WordPress content, not a Figma
   transcription, so they arrive with none of the site's measurements: the
   `elementor_header_footer` template prints post_content straight into <body>,
   at the full 1920 and in the browser's own font. Everything the transcribed
   pages get from the artwork has to be said here instead.

   The measure is 768px because that is the site's own reading column: every
   paragraph on every transcribed page is drawn 768 wide inside the 1300px
   grid. A legal page is nothing but paragraphs, so it takes the same one. */

.dm-legal {
  --dm-ink: #3E2723;
  --dm-ink-soft: #6B4F49;
  --dm-coral: #FF6B5B;
  --dm-rule: #F3DED8;

  max-width: 768px;
  margin-inline: auto;
  padding: 88px 24px 120px;
  font-family: Polin, sans-serif;
  color: var(--dm-ink);
  font-size: 18px;
  line-height: 1.85;
  text-align: start;
}


/* ---- the page's own name ----------------------------------------------
   Stated rather than inherited: left to the theme it came out in whatever the
   browser's h1 happens to be. A step above the clause headings and no more:
   this is a document, and its title is a label, not a hero. */
.dm-legal h1.dm-legal-title {
  font-family: Polin, sans-serif;
  font-size: 42px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--dm-ink);
  margin: 0 0 .35em;
}
.dm-legal h1.dm-legal-title + h2 { margin-top: 1.6em; }
/* one mark of the brand, so the page belongs to the site it sits in */
.dm-legal h1.dm-legal-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: var(--dm-coral);
  margin-top: .5em;
}

/* ---- headings ---------------------------------------------------------
   A step below the display scale the artwork uses for a hero: this is a
   document to be read, not a page to be landed on. */
.dm-legal h2 {
  font-family: Polin, sans-serif;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--dm-ink);
  margin: 2.6em 0 .7em;
  padding-bottom: .45em;
  border-bottom: 1px solid var(--dm-rule);
}
.dm-legal h2:first-child { margin-top: 0; }

.dm-legal h3 {
  font-family: Polin, sans-serif;
  font-size: 21px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--dm-ink);
  margin: 1.9em 0 .5em;
}

.dm-legal p { margin: 0 0 1.15em; }
.dm-legal p:last-child { margin-bottom: 0; }

/* ---- lists ------------------------------------------------------------
   The markers sit outside the measure so the text keeps one clean edge. */
.dm-legal ul,
.dm-legal ol { margin: 0 0 1.4em; padding-inline-start: 1.4em; }
.dm-legal li { margin-bottom: .55em; }
.dm-legal li::marker { color: var(--dm-coral); }

.dm-legal strong { font-weight: 600; }
.dm-legal a { color: var(--dm-coral); text-decoration: underline; text-underline-offset: 3px; }
.dm-legal a:hover { color: var(--dm-ink); }

/* ---- the gaps the client still has to fill ----------------------------
   Published with the client's own decisions missing: a cancellation window, a
   database registration number, an accessibility coordinator's name. Those are
   marked in the text rather than invented, and this is what stops anyone
   walking past one. It disappears on its own when the last marker is filled,
   because nothing else uses the class. */
.dm-legal mark.dm-todo {
  display: inline;
  background: #FFF3B0;
  color: #6B4E00;
  box-shadow: 0 0 0 1px #E0BE4A inset;
  border-radius: 4px;
  padding: 1px 8px;
  font-weight: 600;
  text-decoration: none;
}
.dm-legal mark.dm-todo::before { content: "✎ "; }

/* ---- phone and tablet -------------------------------------------------- */
@media (max-width: 1024px) {
  .dm-legal { padding: 56px 20px 80px; font-size: 17px; line-height: 1.8; }
  .dm-legal h1.dm-legal-title { font-size: 32px; }
  .dm-legal h2 { font-size: 25px; margin-top: 2.1em; }
  .dm-legal h3 { font-size: 19px; }
  /* the site-wide phone layer centres every heading, which is right for a hero
     and wrong for a numbered clause in a contract */
  .dm-legal h2, .dm-legal h3, .dm-legal p, .dm-legal li {
    text-align: start !important;
  }
}
/* ==== DM LEGAL LAYER: END ==== *//* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Polin';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://dafna.digidev.co.il/wp-content/uploads/2026/08/Polin-Regular.eot');
	src: url('https://dafna.digidev.co.il/wp-content/uploads/2026/08/Polin-Regular.eot?#iefix') format('embedded-opentype'),
		url('https://dafna.digidev.co.il/wp-content/uploads/2026/08/Polin-Regular.woff2') format('woff2'),
		url('https://dafna.digidev.co.il/wp-content/uploads/2026/08/Polin-Regular.woff') format('woff'),
		url('https://dafna.digidev.co.il/wp-content/uploads/2026/08/Polin-Regular.ttf') format('truetype'),
		url('https://dafna.digidev.co.il/wp-content/uploads/2026/08/Polin-Regular.svg#Polin') format('svg');
}
@font-face {
	font-family: 'Polin';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://dafna.digidev.co.il/wp-content/uploads/2026/08/Polin-Medium.woff2') format('woff2'),
		url('https://dafna.digidev.co.il/wp-content/uploads/2026/08/Polin-Medium.woff') format('woff');
}
@font-face {
	font-family: 'Polin';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://dafna.digidev.co.il/wp-content/uploads/2026/08/Polin-Light.woff2') format('woff2'),
		url('https://dafna.digidev.co.il/wp-content/uploads/2026/08/Polin-Light.woff') format('woff'),
		url('https://dafna.digidev.co.il/wp-content/uploads/2026/08/Polin-Light.ttf') format('truetype');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'OHYaelLeibushor';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://dafna.digidev.co.il/wp-content/uploads/2026/08/OHYaelLeibushor2.0-Regular.woff2') format('woff2'),
		url('https://dafna.digidev.co.il/wp-content/uploads/2026/08/OHYaelLeibushor2.0-Regular.woff') format('woff');
}
/* End Custom Fonts CSS */