{"id":389,"date":"2026-07-30T06:48:01","date_gmt":"2026-07-30T06:48:01","guid":{"rendered":"https:\/\/raaforetz.co.il\/?page_id=389"},"modified":"2026-07-30T09:25:00","modified_gmt":"2026-07-30T09:25:00","slug":"%d7%a1%d7%95%d7%9c%d7%9d-%d7%9c%d7%a2%d7%9c%d7%99%d7%99%d7%aa-%d7%92%d7%92","status":"publish","type":"page","link":"https:\/\/raaforetz.co.il\/?page_id=389","title":{"rendered":"\u05e1\u05d5\u05dc\u05dd \u05dc\u05e2\u05dc\u05d9\u05d9\u05ea \u05d2\u05d2"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"389\" class=\"elementor elementor-389\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b000d44 e-con-full e-flex e-con e-parent\" data-id=\"b000d44\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1257e28 elementor-widget elementor-widget-html\" data-id=\"1257e28\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* =========================================================\r\n   Main Stylesheet\r\n   Design tokens derived from brand logo:\r\n   forest #0F5A3A \u00b7 lime #D6DE24 \u00b7 cream #F6F3EA\r\n   ========================================================= *\/\r\n\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Suez+One&family=Assistant:wght@300;400;500;600;700;800&display=swap');\r\n\r\n:root{\r\n  --forest: #0F5A3A;\r\n  --forest-deep: #082C1D;\r\n  --forest-mid: #12603D;\r\n  --lime: #D6DE24;\r\n  --lime-soft: #E9EE8F;\r\n  --cream: #F6F3EA;\r\n  --ink: #16231C;\r\n  --sand: #B9AE93;\r\n  --white: #FFFFFF;\r\n\r\n  --shadow-soft: 0 20px 50px rgba(8,44,29,.18);\r\n  --shadow-card: 0 12px 30px rgba(8,44,29,.22);\r\n  --ease: cubic-bezier(.22,.61,.36,1);\r\n  --container: 1240px;\r\n}\r\n\r\n*,*::before,*::after{ box-sizing:border-box; }\r\nhtml{ scroll-behavior:smooth; }\r\nhtml,body{ margin:0; padding:0; }\r\nbody{\r\n  direction: rtl;\r\n  font-family:'Assistant', sans-serif;\r\n  color:var(--ink);\r\n  background:var(--cream);\r\n  line-height:1.6;\r\n  font-size:17px;\r\n  overflow-x:hidden;\r\n}\r\nimg{ max-width:100%; display:block; }\r\na{ color:inherit; text-decoration:none; }\r\nul{ list-style:none; margin:0; padding:0; }\r\nh1,h2,h3,h4{ margin:0; font-weight:700; }\r\np{ margin:0; }\r\nbutton{ font-family:inherit; cursor:pointer; }\r\n\r\n.display{\r\n  font-family:'Suez One', serif;\r\n  font-weight:400;\r\n  letter-spacing:.2px;\r\n}\r\n\r\n.container{\r\n  width:100%;\r\n  max-width:var(--container);\r\n  margin-inline:auto;\r\n  padding-inline:28px;\r\n}\r\n\r\n\/* Reduced motion respect *\/\r\n@media (prefers-reduced-motion: reduce){\r\n  html{ scroll-behavior:auto; }\r\n  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }\r\n}\r\n\r\n\/* Visible keyboard focus *\/\r\na:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{\r\n  outline:3px solid var(--lime);\r\n  outline-offset:3px;\r\n  border-radius:4px;\r\n}\r\n\r\n\/* =========================================================\r\n   SIGNATURE ELEMENT \u2014 sun-through-pergola light slats\r\n   Diagonal moving bars used in every hero, evokes the\r\n   dappled light a pergola casts. Restrained opacity.\r\n   ========================================================= *\/\r\n.slat-layer{\r\n  position:absolute; inset:0;\r\n  pointer-events:none;\r\n  overflow:hidden;\r\n  z-index:2;\r\n  mix-blend-mode:soft-light;\r\n}\r\n.slat-layer::before{\r\n  content:\"\";\r\n  position:absolute;\r\n  top:-20%; left:-30%;\r\n  width:180%; height:160%;\r\n  background:repeating-linear-gradient(\r\n    72deg,\r\n    rgba(255,255,255,0) 0px,\r\n    rgba(255,255,255,0) 46px,\r\n    rgba(255,255,255,.55) 52px,\r\n    rgba(255,255,255,0) 64px\r\n  );\r\n  animation: slat-drift 22s linear infinite;\r\n  will-change: transform;\r\n}\r\n@keyframes slat-drift{\r\n  0%{ transform: translate3d(0,0,0); }\r\n  100%{ transform: translate3d(-120px,60px,0); }\r\n}\r\n\r\n.slat-divider{\r\n  height:34px;\r\n  width:100%;\r\n  background:repeating-linear-gradient(\r\n    115deg,\r\n    var(--lime) 0px, var(--lime) 3px,\r\n    transparent 3px, transparent 26px\r\n  );\r\n  opacity:.55;\r\n}\r\n.slat-divider.on-forest{ opacity:.28; }\r\n\r\n\/* =========================================================\r\n   HEADER \/ NAV\r\n   ========================================================= *\/\r\n.site-header{\r\n  position:fixed; inset-inline:0; top:0;\r\n  z-index:100;\r\n  padding:14px 0;\r\n  transition: background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);\r\n}\r\n.site-header .container{\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  gap:20px;\r\n}\r\n.site-header.solid{\r\n  background:var(--forest);\r\n  box-shadow:0 8px 24px rgba(8,44,29,.25);\r\n  padding:8px 0;\r\n}\r\n\r\n.brand{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:12px;\r\n}\r\n.brand img{\r\n  height:54px;\r\n  width:auto;\r\n  border-radius:10px;\r\n  transition:height .35s var(--ease);\r\n}\r\n.site-header.solid .brand img{ height:42px; }\r\n.brand-name{\r\n  color:var(--white);\r\n  font-family:'Suez One', serif;\r\n  font-size:1.05rem;\r\n  line-height:1.15;\r\n  display:flex;\r\n  flex-direction:column;\r\n}\r\n.brand-name small{\r\n  font-family:'Assistant', sans-serif;\r\n  font-weight:400;\r\n  font-size:.68rem;\r\n  color:var(--lime-soft);\r\n  letter-spacing:.5px;\r\n}\r\n\r\n.main-nav ul{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:6px;\r\n}\r\n.main-nav a{\r\n  color:var(--white);\r\n  font-weight:600;\r\n  font-size:.96rem;\r\n  padding:10px 14px;\r\n  position:relative;\r\n  display:inline-block;\r\n}\r\n.main-nav a::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  right:14px; left:14px; bottom:6px;\r\n  height:2px;\r\n  background:var(--lime);\r\n  transform:scaleX(0);\r\n  transform-origin:center;\r\n  transition:transform .3s var(--ease);\r\n}\r\n.main-nav a:hover::after,\r\n.main-nav a.active::after{ transform:scaleX(1); }\r\n.main-nav a.active{ color:var(--lime); }\r\n\r\n.has-dropdown{ position:relative; }\r\n.dropdown{\r\n  position:absolute;\r\n  top:calc(100% + 8px);\r\n  right:0;\r\n  background:var(--white);\r\n  border-radius:14px;\r\n  box-shadow:var(--shadow-card);\r\n  min-width:200px;\r\n  padding:8px;\r\n  opacity:0;\r\n  visibility:hidden;\r\n  transform:translateY(8px);\r\n  transition:all .25s var(--ease);\r\n}\r\n.has-dropdown:hover .dropdown,\r\n.has-dropdown:focus-within .dropdown{\r\n  opacity:1; visibility:visible; transform:translateY(0);\r\n}\r\n.dropdown a{\r\n  color:var(--ink);\r\n  display:block;\r\n  padding:10px 14px;\r\n  border-radius:8px;\r\n  font-size:.9rem;\r\n}\r\n.dropdown a::after{ display:none; }\r\n.dropdown a:hover{ background:var(--cream); color:var(--forest); }\r\n\r\n.nav-cta{\r\n  background:var(--lime);\r\n  color:var(--forest-deep) !important;\r\n  border-radius:30px;\r\n  padding:10px 22px !important;\r\n  font-weight:700;\r\n}\r\n.nav-cta::after{ display:none; }\r\n.nav-cta:hover{ filter:brightness(1.08); }\r\n\r\n.burger{\r\n  display:none;\r\n  width:44px; height:44px;\r\n  border:none; background:transparent;\r\n  position:relative;\r\n  flex-shrink:0;\r\n}\r\n.burger span{\r\n  position:absolute; right:8px; left:8px;\r\n  height:2px; background:var(--white);\r\n  transition:all .3s var(--ease);\r\n}\r\n.burger span:nth-child(1){ top:16px; }\r\n.burger span:nth-child(2){ top:22px; }\r\n.burger span:nth-child(3){ top:28px; }\r\n.burger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }\r\n.burger.open span:nth-child(2){ opacity:0; }\r\n.burger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }\r\n\r\n\/* =========================================================\r\n   HERO\r\n   ========================================================= *\/\r\n.hero{\r\n  position:relative;\r\n  min-height: clamp(560px, 92vh, 940px);\r\n  display:flex;\r\n  align-items:flex-end;\r\n  overflow:hidden;\r\n  color:var(--white);\r\n  isolation:isolate;\r\n}\r\n.hero.hero--tall{ min-height: clamp(560px, 92vh, 940px); }\r\n.hero.hero--short{ min-height: clamp(440px, 70vh, 720px); }\r\n.hero-media{\r\n  position:absolute; inset:0;\r\n  z-index:0;\r\n}\r\n.hero-media img{\r\n  width:100%; height:100%;\r\n  object-fit:cover;\r\n  transform:scale(1.06);\r\n  animation: hero-settle 1.6s var(--ease) forwards;\r\n}\r\n@keyframes hero-settle{\r\n  from{ transform:scale(1.14); }\r\n  to{ transform:scale(1.06); }\r\n}\r\n.hero-scrim{\r\n  position:absolute; inset:0;\r\n  background:\r\n    linear-gradient(180deg, rgba(8,44,29,.35) 0%, rgba(8,44,29,.25) 35%, rgba(8,44,29,.88) 100%),\r\n    linear-gradient(90deg, rgba(8,44,29,.55) 0%, rgba(8,44,29,0) 55%);\r\n  z-index:1;\r\n  pointer-events:none;\r\n}\r\n.hero-content{\r\n  position:relative;\r\n  z-index:3;\r\n  width:100%;\r\n  max-width:100%;\r\n  padding:0 0 74px;\r\n}\r\n.eyebrow{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:10px;\r\n  color:var(--lime);\r\n  font-weight:700;\r\n  font-size:.9rem;\r\n  letter-spacing:.5px;\r\n  margin-bottom:16px;\r\n  max-width:100%;\r\n}\r\n.eyebrow::before{\r\n  content:\"\";\r\n  width:26px; height:2px;\r\n  background:var(--lime);\r\n  display:inline-block;\r\n  flex-shrink:0;\r\n}\r\n.hero h1{\r\n  font-family:'Suez One', serif;\r\n  font-size:clamp(2.4rem, 5.4vw, 4.6rem);\r\n  line-height:1.08;\r\n  max-width:min(16ch, 100%);\r\n  margin-bottom:20px;\r\n  text-shadow:0 6px 30px rgba(0,0,0,.25);\r\n  overflow-wrap:break-word;\r\n  word-break:break-word;\r\n}\r\n.hero-sub{\r\n  max-width:min(52ch, 100%);\r\n  font-size:1.14rem;\r\n  color:rgba(255,255,255,.92);\r\n  margin-bottom:32px;\r\n  overflow-wrap:break-word;\r\n}\r\n.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; max-width:100%; }\r\n\r\n.btn{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:10px;\r\n  padding:15px 30px;\r\n  border-radius:40px;\r\n  font-weight:700;\r\n  font-size:1rem;\r\n  border:2px solid transparent;\r\n  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);\r\n}\r\n.btn:hover{ transform:translateY(-3px); }\r\n.btn-lime{ background:var(--lime); color:var(--forest-deep); }\r\n.btn-lime:hover{ background:var(--lime-soft); }\r\n.btn-ghost{ border-color:rgba(255,255,255,.55); color:var(--white); }\r\n.btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:var(--white); }\r\n.btn-forest{ background:var(--forest); color:var(--white); }\r\n.btn-forest:hover{ background:var(--forest-mid); }\r\n\r\n.scroll-cue{\r\n  position:absolute; bottom:26px; left:50%;\r\n  transform:translateX(-50%);\r\n  z-index:3;\r\n  color:var(--white);\r\n  opacity:.75;\r\n  display:flex; flex-direction:column; align-items:center; gap:8px;\r\n  font-size:.75rem; letter-spacing:.5px;\r\n}\r\n.scroll-cue .line{\r\n  width:1px; height:34px;\r\n  background:linear-gradient(var(--lime), transparent);\r\n  animation: scroll-cue-move 1.8s ease-in-out infinite;\r\n}\r\n@keyframes scroll-cue-move{\r\n  0%,100%{ transform:scaleY(1); opacity:1; }\r\n  50%{ transform:scaleY(.5); opacity:.4; }\r\n}\r\n\r\n.hero-hotspots-layer{\r\n  position:absolute; inset:0;\r\n  z-index:5;\r\n  pointer-events:none;\r\n}\r\n.hero-hotspot{\r\n  position:absolute;\r\n  z-index:4;\r\n  transform:translate(-50%,-50%);\r\n  cursor:pointer;\r\n  pointer-events:auto;\r\n  -webkit-tap-highlight-color:transparent;\r\n}\r\n.hero-hotspot .dot{\r\n  display:block;\r\n  width:16px; height:16px;\r\n  border-radius:50%;\r\n  background:var(--lime);\r\n  border:2px solid rgba(255,255,255,.9);\r\n  animation: hotspot-pulse 2.2s ease-out infinite;\r\n  transition: background .25s var(--ease);\r\n}\r\n@keyframes hotspot-pulse{\r\n  0%{ box-shadow:0 0 0 0 rgba(214,222,36,.55); }\r\n  70%{ box-shadow:0 0 0 18px rgba(214,222,36,0); }\r\n  100%{ box-shadow:0 0 0 0 rgba(214,222,36,0); }\r\n}\r\n.hero-hotspot .tip{\r\n  position:absolute;\r\n  bottom:calc(100% + 14px);\r\n  right:50%;\r\n  transform:translateX(50%) translateY(8px);\r\n  color:var(--white);\r\n  padding:0;\r\n  font-size:1rem;\r\n  font-weight:800;\r\n  white-space:nowrap;\r\n  text-shadow:0 2px 10px rgba(0,0,0,.65), 0 0 2px rgba(0,0,0,.5);\r\n  opacity:0;\r\n  pointer-events:none;\r\n  transition:opacity .28s var(--ease), transform .28s var(--ease);\r\n}\r\n.hero-hotspot:hover .tip,\r\n.hero-hotspot:focus-visible .tip,\r\n.hero-hotspot.show .tip{\r\n  opacity:1;\r\n  transform:translateX(50%) translateY(0);\r\n}\r\n.hero-hotspot:hover .dot,\r\n.hero-hotspot.show .dot{ background:var(--lime-soft); }\r\n@media (max-width:560px){\r\n  .hero-hotspot .dot{ width:14px; height:14px; }\r\n  .hero-hotspot .tip{ font-size:.9rem; }\r\n}\r\n\r\n\/* =========================================================\r\n   SECTIONS \/ GENERIC\r\n   ========================================================= *\/\r\nsection{ position:relative; }\r\n.section-pad{ padding:80px 0; }\r\n.section-pad-sm{ padding:52px 0; }\r\n.section-head{\r\n  max-width:640px;\r\n  margin-bottom:52px;\r\n}\r\n.section-head .eyebrow{ color:var(--forest-mid); }\r\n.section-head.on-dark .eyebrow{ color:var(--lime); }\r\n.section-head h2{\r\n  font-family:'Suez One', serif;\r\n  font-size:clamp(1.9rem, 3.4vw, 2.7rem);\r\n  line-height:1.15;\r\n  color:var(--forest-deep);\r\n}\r\n.section-head.on-dark h2{ color:var(--white); }\r\n.section-head p{\r\n  margin-top:16px;\r\n  color:#4a554d;\r\n  font-size:1.05rem;\r\n}\r\n.section-head.on-dark p{ color:rgba(255,255,255,.82); }\r\n.section-head.center{ margin-inline:auto; text-align:center; }\r\n\r\n.bg-forest{ background:var(--forest); color:var(--white); }\r\n.bg-forest-deep{ background:var(--forest-deep); color:var(--white); }\r\n.bg-cream{ background:var(--cream); }\r\n.bg-white{ background:var(--white); }\r\n\r\n\/* Scroll reveal \u2014 content is visible by default (progressive enhancement).\r\n   Only hidden if JS actually ran and tagged <html class=\"js\">; if any script\r\n   on the page fails, content simply skips the fade-in instead of vanishing. *\/\r\n.js .reveal{\r\n  opacity:0;\r\n  transform:translateY(28px);\r\n  transition:opacity .8s var(--ease), transform .8s var(--ease);\r\n}\r\n.reveal.is-visible{ opacity:1; transform:translateY(0); }\r\n.reveal-stagger > *{ transition-delay: calc(var(--i, 0) * 90ms); }\r\n\r\n\/* =========================================================\r\n   INTRO STRIP\r\n   ========================================================= *\/\r\n.intro-strip{\r\n  display:grid;\r\n  grid-template-columns:1.1fr 1fr;\r\n  gap:60px;\r\n  align-items:center;\r\n}\r\n.intro-strip .mark{\r\n  font-family:'Suez One', serif;\r\n  font-size:5.5rem;\r\n  color:var(--lime);\r\n  line-height:.8;\r\n  opacity:.9;\r\n}\r\n.intro-strip h2{\r\n  font-family:'Suez One', serif;\r\n  font-size:clamp(1.6rem, 3vw, 2.2rem);\r\n  color:var(--forest-deep);\r\n  line-height:1.3;\r\n  margin-bottom:18px;\r\n}\r\n.intro-strip p{ color:#455049; font-size:1.05rem; }\r\n\r\n\/* =========================================================\r\n   CATEGORY GRID (bento)\r\n   ========================================================= *\/\r\n.cat-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(6,1fr);\r\n  grid-auto-rows:190px;\r\n  gap:20px;\r\n}\r\n.cat-card{\r\n  position:relative;\r\n  border-radius:22px;\r\n  overflow:hidden;\r\n  color:var(--white);\r\n  display:flex; align-items:flex-end;\r\n  box-shadow:var(--shadow-card);\r\n}\r\n.cat-card:nth-child(1){ grid-column:span 3; grid-row:span 3; }\r\n.cat-card:nth-child(2){ grid-column:span 3; grid-row:span 3; }\r\n.cat-card:nth-child(3){ grid-column:span 2; grid-row:span 2; }\r\n.cat-card:nth-child(4){ grid-column:span 2; grid-row:span 2; }\r\n.cat-card:nth-child(5){ grid-column:span 2; grid-row:span 2; }\r\n\r\n.cat-card img{\r\n  position:absolute; inset:0;\r\n  width:100%; height:100%;\r\n  object-fit:cover;\r\n  transition:transform .7s var(--ease), filter .7s var(--ease);\r\n}\r\n.cat-card::before{\r\n  content:\"\";\r\n  position:absolute; inset:0;\r\n  background:linear-gradient(180deg, rgba(8,44,29,0) 30%, rgba(8,44,29,.92) 100%);\r\n  z-index:1;\r\n  transition:background .4s var(--ease);\r\n}\r\n.cat-card:hover img{ transform:scale(1.09); filter:brightness(.92); }\r\n.cat-card-body{\r\n  position:relative; z-index:2;\r\n  padding:24px;\r\n  width:100%;\r\n}\r\n.cat-card-icon{\r\n  width:38px; height:38px;\r\n  margin-bottom:10px;\r\n  color:var(--lime);\r\n}\r\n.cat-card h3{\r\n  font-family:'Suez One', serif;\r\n  font-size:1.3rem;\r\n  margin-bottom:6px;\r\n}\r\n.cat-card .cat-underline{\r\n  display:block;\r\n  height:2px; width:34px;\r\n  background:var(--lime);\r\n  margin-bottom:10px;\r\n  transition:width .4s var(--ease);\r\n}\r\n.cat-card:hover .cat-underline{ width:64px; }\r\n.cat-card p{\r\n  font-size:.88rem;\r\n  color:rgba(255,255,255,.85);\r\n  max-width:36ch;\r\n}\r\n.cat-card .arrow{\r\n  position:absolute; top:22px; left:22px; z-index:2;\r\n  width:40px; height:40px;\r\n  border-radius:50%;\r\n  background:rgba(255,255,255,.15);\r\n  backdrop-filter:blur(6px);\r\n  display:flex; align-items:center; justify-content:center;\r\n  transition:transform .4s var(--ease), background .4s var(--ease);\r\n}\r\n.cat-card:hover .arrow{ transform:translate(-6px,-6px); background:var(--lime); color:var(--forest-deep); }\r\n\r\n\/* =========================================================\r\n   WHY-US FEATURES\r\n   ========================================================= *\/\r\n.features-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(4,1fr);\r\n  gap:28px;\r\n}\r\n.feature{\r\n  padding:30px 24px;\r\n  border-radius:18px;\r\n  background:rgba(255,255,255,.05);\r\n  border:1px solid rgba(255,255,255,.12);\r\n  transition:transform .4s var(--ease), background .4s var(--ease);\r\n}\r\n.feature:hover{ transform:translateY(-6px); background:rgba(255,255,255,.09); }\r\n.feature .ico{\r\n  width:46px; height:46px;\r\n  color:var(--lime);\r\n  margin-bottom:18px;\r\n}\r\n.feature h3{\r\n  font-size:1.08rem;\r\n  margin-bottom:8px;\r\n  color:var(--white);\r\n}\r\n.feature p{ color:rgba(255,255,255,.75); font-size:.92rem; }\r\n\r\n\/* =========================================================\r\n   GALLERY\r\n   ========================================================= *\/\r\n.gallery-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(6,1fr);\r\n  gap:18px;\r\n}\r\n.gallery-item{\r\n  position:relative;\r\n  border-radius:18px;\r\n  overflow:hidden;\r\n  cursor:pointer;\r\n  grid-column:span 2;\r\n  aspect-ratio:4\/3.2;\r\n  box-shadow:var(--shadow-card);\r\n}\r\n.gallery-item.tall{ grid-row:span 2; aspect-ratio:auto; }\r\n.gallery-item img{\r\n  width:100%; height:100%; object-fit:cover;\r\n  transition:transform .6s var(--ease);\r\n}\r\n.gallery-item:hover img{ transform:scale(1.08); }\r\n.gallery-item::after{\r\n  content:\"\";\r\n  position:absolute; inset:0;\r\n  background:linear-gradient(180deg, rgba(8,44,29,0) 55%, rgba(8,44,29,.65) 100%);\r\n  opacity:0; transition:opacity .4s var(--ease);\r\n}\r\n.gallery-item:hover::after{ opacity:1; }\r\n\r\n\/* Lightbox *\/\r\n.lightbox{\r\n  position:fixed; inset:0; z-index:300;\r\n  background:rgba(8,20,14,.92);\r\n  display:flex; align-items:center; justify-content:center;\r\n  opacity:0; visibility:hidden;\r\n  transition:opacity .35s var(--ease);\r\n  padding:40px;\r\n}\r\n.lightbox.open{ opacity:1; visibility:visible; }\r\n.lightbox img{\r\n  max-width:min(1100px,92vw);\r\n  max-height:86vh;\r\n  border-radius:14px;\r\n  box-shadow:0 30px 80px rgba(0,0,0,.5);\r\n}\r\n.lightbox-close{\r\n  position:absolute; top:26px; left:32px;\r\n  width:46px; height:46px;\r\n  border-radius:50%;\r\n  background:rgba(255,255,255,.1);\r\n  border:1px solid rgba(255,255,255,.3);\r\n  color:var(--white);\r\n  font-size:1.3rem;\r\n}\r\n.lightbox-close:hover{ background:var(--lime); color:var(--forest-deep); }\r\n\r\n\/* =========================================================\r\n   PRODUCT PAGE: feature bullets + text block\r\n   ========================================================= *\/\r\n.two-col{\r\n  display:grid;\r\n  grid-template-columns:1fr 1fr;\r\n  gap:64px;\r\n  align-items:start;\r\n}\r\n.bullet-list{ margin-top:26px; display:flex; flex-direction:column; gap:20px; }\r\n.bullet{\r\n  display:flex; gap:16px; align-items:flex-start;\r\n}\r\n.bullet .num{\r\n  flex-shrink:0;\r\n  width:40px; height:40px;\r\n  border-radius:50%;\r\n  background:var(--forest);\r\n  color:var(--lime);\r\n  display:flex; align-items:center; justify-content:center;\r\n}\r\n.bullet .num svg{ width:20px; height:20px; }\r\n.bullet h4{ font-size:1.05rem; margin-bottom:4px; color:var(--forest-deep); }\r\n.bullet p{ color:#4a554d; font-size:.95rem; }\r\n\r\n.stat-row{\r\n  display:flex;\r\n  gap:40px;\r\n  margin-top:36px;\r\n  flex-wrap:wrap;\r\n}\r\n.stat b{\r\n  font-family:'Suez One', serif;\r\n  font-size:2.2rem;\r\n  color:var(--forest);\r\n  display:block;\r\n}\r\n.stat span{ font-size:.85rem; color:#5c665f; }\r\n\r\n.side-image{\r\n  position:relative;\r\n  border-radius:24px;\r\n  overflow:hidden;\r\n  box-shadow:var(--shadow-soft);\r\n}\r\n.side-image img{ width:100%; height:100%; object-fit:cover; }\r\n.side-image .chip{\r\n  position:absolute; bottom:20px; right:20px;\r\n  background:var(--white);\r\n  color:var(--forest-deep);\r\n  padding:12px 20px;\r\n  border-radius:14px;\r\n  font-weight:700;\r\n  font-size:.9rem;\r\n  box-shadow:var(--shadow-card);\r\n  display:flex; align-items:center; gap:10px;\r\n}\r\n.side-image .chip svg{ width:22px; height:22px; color:var(--lime-dark, #7a8000); }\r\n\r\n\/* =========================================================\r\n   CTA BANNER\r\n   ========================================================= *\/\r\n.cta-banner{\r\n  border-radius:28px;\r\n  background:var(--lime);\r\n  padding:64px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  gap:40px;\r\n  flex-wrap:wrap;\r\n  position:relative;\r\n  overflow:hidden;\r\n}\r\n.cta-banner::before{\r\n  content:\"\";\r\n  position:absolute; inset:0;\r\n  background:repeating-linear-gradient(115deg, rgba(8,44,29,.06) 0 3px, transparent 3px 30px);\r\n}\r\n.cta-banner-text{ position:relative; z-index:1; max-width:520px; }\r\n.cta-banner h2{\r\n  font-family:'Suez One', serif;\r\n  font-size:clamp(1.7rem,3vw,2.3rem);\r\n  color:var(--forest-deep);\r\n  margin-bottom:12px;\r\n}\r\n.cta-banner p{ color:#33421f; font-size:1.02rem; }\r\n.cta-banner-actions{ position:relative; z-index:1; display:flex; gap:14px; flex-wrap:wrap; }\r\n\r\n\/* =========================================================\r\n   CONTACT SECTION\r\n   ========================================================= *\/\r\n.contact-grid{\r\n  display:grid;\r\n  grid-template-columns:.9fr 1.1fr;\r\n  gap:60px;\r\n}\r\n.contact-info-item{\r\n  display:flex; gap:16px; align-items:flex-start;\r\n  margin-bottom:24px;\r\n}\r\n.contact-info-item .ico{\r\n  width:44px; height:44px;\r\n  border-radius:50%;\r\n  background:rgba(255,255,255,.08);\r\n  display:flex; align-items:center; justify-content:center;\r\n  color:var(--lime);\r\n  flex-shrink:0;\r\n}\r\n.contact-info-item h4{ color:var(--white); font-size:1rem; margin-bottom:2px; }\r\n.contact-info-item p, .contact-info-item a{ color:rgba(255,255,255,.75); font-size:.94rem; }\r\n\r\n.form-card{\r\n  background:var(--white);\r\n  border-radius:24px;\r\n  padding:40px;\r\n  box-shadow:var(--shadow-soft);\r\n}\r\n.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }\r\n.field{ margin-bottom:18px; }\r\n.field label{\r\n  display:block; font-size:.86rem; font-weight:700;\r\n  margin-bottom:8px; color:var(--forest-deep);\r\n}\r\n.field input, .field textarea, .field select{\r\n  width:100%;\r\n  border:1.5px solid #E3E0D3;\r\n  background:var(--cream);\r\n  border-radius:12px;\r\n  padding:13px 16px;\r\n  font-family:inherit;\r\n  font-size:.96rem;\r\n  color:var(--ink);\r\n  transition:border-color .25s var(--ease), background .25s var(--ease);\r\n}\r\n.field input:focus, .field textarea:focus, .field select:focus{\r\n  border-color:var(--forest);\r\n  background:var(--white);\r\n  outline:none;\r\n}\r\n.field textarea{ resize:vertical; min-height:110px; }\r\n.form-note{ font-size:.82rem; color:#8a8f86; margin-top:14px; }\r\n.form-success{\r\n  display:none;\r\n  background:var(--forest);\r\n  color:var(--white);\r\n  padding:16px 20px;\r\n  border-radius:12px;\r\n  margin-top:16px;\r\n  font-weight:600;\r\n}\r\n.form-success.show{ display:block; }\r\n\r\n\/* =========================================================\r\n   FOOTER\r\n   ========================================================= *\/\r\n.site-footer{ padding-top:70px; }\r\n.footer-top{\r\n  display:grid;\r\n  grid-template-columns:1.4fr 1fr 1fr 1fr;\r\n  gap:40px;\r\n  padding-bottom:50px;\r\n  border-bottom:1px solid rgba(255,255,255,.12);\r\n}\r\n.footer-brand p{ color:rgba(255,255,255,.7); margin-top:18px; font-size:.92rem; max-width:32ch; }\r\n.footer-col h4{ color:var(--lime); font-size:.95rem; margin-bottom:18px; }\r\n.footer-col ul{ display:flex; flex-direction:column; gap:12px; }\r\n.footer-col a{ color:rgba(255,255,255,.78); font-size:.92rem; transition:color .25s; }\r\n.footer-col a:hover{ color:var(--lime); }\r\n.footer-bottom{\r\n  display:flex; justify-content:space-between; align-items:center;\r\n  padding:26px 0; flex-wrap:wrap; gap:12px;\r\n  color:rgba(255,255,255,.5); font-size:.82rem;\r\n}\r\n.socials{ display:flex; gap:10px; }\r\n.socials a{\r\n  width:38px; height:38px; border-radius:50%;\r\n  background:rgba(255,255,255,.08);\r\n  display:flex; align-items:center; justify-content:center;\r\n  color:var(--white);\r\n  transition:background .25s, color .25s;\r\n}\r\n.socials a:hover{ background:var(--lime); color:var(--forest-deep); }\r\n\r\n\/* WhatsApp floating button *\/\r\n.wa-float{\r\n  position:fixed; bottom:26px; left:26px; z-index:90;\r\n  width:60px; height:60px;\r\n  border-radius:50%;\r\n  background:#25D366;\r\n  display:flex; align-items:center; justify-content:center;\r\n  box-shadow:0 12px 28px rgba(0,0,0,.28);\r\n  color:var(--white);\r\n  animation: wa-pulse 2.6s ease-in-out infinite;\r\n}\r\n.wa-float svg{ width:30px; height:30px; }\r\n@keyframes wa-pulse{\r\n  0%,100%{ box-shadow:0 12px 28px rgba(0,0,0,.28), 0 0 0 0 rgba(37,211,102,.5); }\r\n  50%{ box-shadow:0 12px 28px rgba(0,0,0,.28), 0 0 0 12px rgba(37,211,102,0); }\r\n}\r\n\r\n\/* =========================================================\r\n   RESPONSIVE\r\n   ========================================================= *\/\r\n@media (max-width:1080px){\r\n  .intro-strip{ grid-template-columns:1fr; gap:24px; }\r\n  .features-grid{ grid-template-columns:repeat(2,1fr); }\r\n  .two-col{ grid-template-columns:1fr; gap:36px; }\r\n  .contact-grid{ grid-template-columns:1fr; }\r\n  .footer-top{ grid-template-columns:1fr 1fr; row-gap:36px; }\r\n  .cat-grid{ grid-auto-rows:170px; }\r\n}\r\n\r\n@media (max-width:860px){\r\n  .main-nav{\r\n    position:fixed; inset-inline:0; top:0;\r\n    height:100vh;\r\n    background:var(--forest-deep);\r\n    display:flex; align-items:center; justify-content:center;\r\n    transform:translateY(-100%);\r\n    transition:transform .4s var(--ease);\r\n    z-index:99;\r\n  }\r\n  .main-nav.open{ transform:translateY(0); }\r\n  .main-nav ul{ flex-direction:column; gap:8px; text-align:center; }\r\n  .main-nav a{ font-size:1.3rem; padding:14px 20px; }\r\n  .dropdown{\r\n    position:static; opacity:1; visibility:visible; transform:none;\r\n    background:transparent; box-shadow:none; text-align:center;\r\n    display:none;\r\n  }\r\n  .has-dropdown.open .dropdown{ display:block; }\r\n  .burger{ display:block; }\r\n  .nav-cta{ margin-top:10px; }\r\n\r\n  .cat-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:220px; }\r\n  .cat-card{ grid-column:span 2 !important; grid-row:span 1 !important; }\r\n  .gallery-grid{ grid-template-columns:1fr 1fr; }\r\n  .gallery-item{ grid-column:span 1; }\r\n  .form-row{ grid-template-columns:1fr; }\r\n  .cta-banner{ padding:40px 28px; }\r\n  .footer-top{ grid-template-columns:1fr; }\r\n}\r\n\r\n@media (max-width:560px){\r\n  body{ font-size:16px; }\r\n  .section-pad{ padding:70px 0; }\r\n  .features-grid{ grid-template-columns:1fr; }\r\n\r\n  .hero-content{ padding-bottom:40px; }\r\n  .eyebrow{ font-size:.78rem; margin-bottom:10px; }\r\n  .hero h1{ font-size:1.7rem; line-height:1.22; margin-bottom:12px; max-width:100%; }\r\n  .hero-sub{\r\n    font-size:.95rem;\r\n    line-height:1.5;\r\n    margin-bottom:20px;\r\n    max-width:100%;\r\n    display:-webkit-box;\r\n    -webkit-line-clamp:3;\r\n    -webkit-box-orient:vertical;\r\n    overflow:hidden;\r\n  }\r\n  .hero-actions{ flex-direction:column; align-items:stretch; gap:10px; }\r\n  .btn{ justify-content:center; padding:12px 22px; font-size:.92rem; }\r\n}\r\n\r\n<\/style>\r\n<style>\r\n.hero.no-photo{\r\n  background: radial-gradient(circle at 25% 20%, rgba(214,222,36,.14), transparent 55%), linear-gradient(150deg, var(--forest) 0%, var(--forest-deep) 70%);\r\n}\r\n.hero.no-photo .bg-icon{\r\n  position:absolute;\r\n  left:50%; top:50%;\r\n  width:min(70vw, 900px);\r\n  transform:translate(-50%,-50%);\r\n  color:rgba(255,255,255,.05);\r\n  z-index:0;\r\n  pointer-events:none;\r\n}\r\n.rotating-headline{\r\n  position:relative;\r\n  min-height:2.3em;\r\n  margin-bottom:20px;\r\n}\r\n.rot-item{\r\n  font-family:'Suez One', serif;\r\n  font-size:clamp(2.2rem, 4.6vw, 3.8rem);\r\n  line-height:1.12;\r\n  max-width:min(20ch, 100%);\r\n  margin:0 auto;\r\n  color:var(--white);\r\n  text-shadow:0 6px 30px rgba(0,0,0,.3);\r\n  position:absolute;\r\n  inset-inline:0;\r\n  top:0;\r\n  text-align:center;\r\n  opacity:0;\r\n  transform:translateY(14px);\r\n  transition:opacity .7s var(--ease), transform .7s var(--ease);\r\n  pointer-events:none;\r\n}\r\n.rot-item.active{\r\n  position:relative;\r\n  opacity:1;\r\n  transform:translateY(0);\r\n  pointer-events:auto;\r\n}\r\n.hero-content{ text-align:center; }\r\n.eyebrow{ justify-content:center; }\r\n.hero-sub{ margin-inline:auto; }\r\n.hero-actions{ justify-content:center; }\r\n<\/style>\r\n<style>\r\n.split-hero{\r\n  position:relative;\r\n  background: radial-gradient(circle at 20% 15%, rgba(214,222,36,.14), transparent 55%), linear-gradient(150deg, var(--forest) 0%, var(--forest-deep) 70%);\r\n  padding:90px 0;\r\n  overflow:hidden;\r\n}\r\n.split-hero .container{\r\n  display:grid;\r\n  grid-template-columns: 1.15fr .85fr;\r\n  gap:50px;\r\n  align-items:center;\r\n}\r\n.split-hero .hero-content{ text-align:right; padding:0; }\r\n.split-hero .eyebrow{ justify-content:flex-start; }\r\n.split-hero .hero-sub{ margin-inline:0; }\r\n.split-hero .hero-actions{ justify-content:flex-start; }\r\n.split-hero .rotating-headline{ min-height:3.6em; }\r\n.split-hero .rot-item{\r\n  position:absolute; inset-inline:0; top:0;\r\n  text-align:right;\r\n  margin:0;\r\n  max-width:100%;\r\n  font-size:clamp(1.6rem, 3vw, 2.5rem);\r\n  line-height:1.2;\r\n}\r\n.circle-image-wrap{\r\n  position:relative;\r\n  display:flex;\r\n  justify-content:center;\r\n}\r\n.circle-image-wrap::before{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:-10%;\r\n  background:radial-gradient(circle, rgba(214,222,36,.22), transparent 65%);\r\n  z-index:0;\r\n}\r\n.circle-image-wrap img{\r\n  position:relative; z-index:1;\r\n  width:100%; max-width:440px;\r\n  border-radius:50%;\r\n  filter:drop-shadow(0 25px 55px rgba(0,0,0,.4));\r\n}\r\n@media (max-width:900px){\r\n  .split-hero .container{ grid-template-columns:1fr; text-align:center; }\r\n  .split-hero .hero-content{ text-align:center; }\r\n  .split-hero .eyebrow{ justify-content:center; }\r\n  .split-hero .hero-sub{ margin-inline:auto; }\r\n  .split-hero .hero-actions{ justify-content:center; }\r\n  .split-hero .rot-item{ text-align:center; }\r\n  .circle-image-wrap{ order:-1; margin-bottom:10px; }\r\n  .circle-image-wrap img{ max-width:280px; }\r\n}\r\n<\/style>\r\n<section class=\"split-hero\">\r\n    <div class=\"container\">\r\n      <div class=\"hero-content\">\r\n        <span class=\"eyebrow\">\u05d2\u05d9\u05e9\u05d4 \u05d1\u05d8\u05d5\u05d7\u05d4 \u05d5\u05e0\u05d5\u05d7\u05d4 \u05dc\u05db\u05dc \u05e2\u05dc\u05d9\u05d9\u05ea \u05d2\u05d2<\/span>\r\n        <div class=\"rotating-headline\"><h1 class=\"rot-item active\">\u05e1\u05d5\u05dc\u05dd \u05de\u05ea\u05e7\u05e4\u05dc \u2014 \u05e0\u05e2\u05dc\u05dd \u05dc\u05d2\u05de\u05e8\u05d9 \u05db\u05e9\u05d4\u05d5\u05d0 \u05e1\u05d2\u05d5\u05e8<\/h1><h1 class=\"rot-item\">\u05de\u05d3\u05e8\u05d2\u05d5\u05ea \u05de\u05ea\u05e7\u05e4\u05dc\u05d5\u05ea \u05d2\u05dc\u05e8\u05d9\u05d4 \u2014 \u05d2\u05dd \u05dc\u05e4\u05ea\u05d7\u05d9\u05dd \u05e7\u05d8\u05e0\u05d9\u05dd<\/h1><h1 class=\"rot-item\">\u05de\u05d1\u05e0\u05d4 \u05e4\u05dc\u05d3\u05d4 \u05de\u05d2\u05d5\u05dc\u05d5\u05d5\u05df \u2014 \u05e2\u05de\u05d9\u05d3 \u05dc\u05e9\u05e0\u05d9\u05dd \u05e8\u05d1\u05d5\u05ea<\/h1><h1 class=\"rot-item\">\u05d1\u05d3\u05d5\u05e7 \u05dc\u05e2\u05d5\u05de\u05e1 \u05d2\u05d1\u05d5\u05d4 \u2014 \u05d1\u05d8\u05d9\u05d7\u05d5\u05ea \u05ea\u05d7\u05d9\u05dc\u05d4<\/h1><\/div>\r\n        <p class=\"hero-sub\">\u05e9\u05dc\u05d1\u05d9\u05dd \u05e8\u05d7\u05d1\u05d9\u05dd, \u05e0\u05e2\u05d9\u05dc\u05d4 \u05d1\u05d8\u05d5\u05d7\u05d4 \u05d5\u05de\u05e0\u05d2\u05e0\u05d5\u05df \u05e7\u05e4\u05d9\u05e6\u05d9\u05dd \u05dc\u05e4\u05ea\u05d9\u05d7\u05d4 \u05e0\u05d5\u05d7\u05d4 \u2014 \u05db\u05dc \u05e1\u05d5\u05dc\u05dd \u05e2\u05d5\u05de\u05d3 \u05d1\u05ea\u05e7\u05e0\u05d9 \u05d4\u05d1\u05d8\u05d9\u05d7\u05d5\u05ea \u05d4\u05de\u05d7\u05de\u05d9\u05e8\u05d9\u05dd \u05d1\u05d9\u05d5\u05ea\u05e8.<\/p>\r\n        <div class=\"hero-actions\">\r\n          <a href=\"#contact\" class=\"btn btn-lime\">\u05e7\u05d1\u05dc\u05d5 \u05d4\u05e6\u05e2\u05ea \u05de\u05d7\u05d9\u05e8<\/a>\r\n          <a href=\"https:\/\/wa.me\/972500000000\" class=\"btn btn-ghost\" target=\"_blank\" rel=\"noopener\">\u05d3\u05d1\u05e8\u05d5 \u05d0\u05d9\u05ea\u05e0\u05d5 \u05d1\u05d5\u05d5\u05d0\u05d8\u05e1\u05d0\u05e4<\/a>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"circle-image-wrap\">\r\n        <img decoding=\"async\" src=\"https:\/\/raaforetz.co.il\/wp-content\/uploads\/2026\/07\/magnific_tftYhZZmZJ.png\" alt=\"\u05d2\u05d9\u05e9\u05d4 \u05d1\u05d8\u05d5\u05d7\u05d4 \u05d5\u05e0\u05d5\u05d7\u05d4 \u05dc\u05db\u05dc \u05e2\u05dc\u05d9\u05d9\u05ea \u05d2\u05d2\">\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n<script>document.documentElement.className += ' js';<\/script>\r\n<script>\/\/ shared interactions\r\n\/\/ Each feature below runs in its own try\/catch: a bug or missing element in\r\n\/\/ one feature must never be able to block the others from running.\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n\r\n  const safe = (label, fn) => {\r\n    try { fn(); } catch (err) { console.error('[site]', label, err); }\r\n  };\r\n\r\n  \/* ---------- Sticky header (skipped entirely if no header is present) ---------- *\/\r\n  safe('sticky-header', () => {\r\n    const header = document.querySelector('.site-header');\r\n    if (!header) return;\r\n    const onScroll = () => {\r\n      if (window.scrollY > 40) header.classList.add('solid');\r\n      else header.classList.remove('solid');\r\n    };\r\n    onScroll();\r\n    window.addEventListener('scroll', onScroll, { passive: true });\r\n  });\r\n\r\n  \/* ---------- Mobile nav ---------- *\/\r\n  safe('mobile-nav', () => {\r\n    const burger = document.querySelector('.burger');\r\n    const mainNav = document.querySelector('.main-nav');\r\n    if (!burger || !mainNav) return;\r\n    burger.addEventListener('click', () => {\r\n      burger.classList.toggle('open');\r\n      mainNav.classList.toggle('open');\r\n      document.body.style.overflow = mainNav.classList.contains('open') ? 'hidden' : '';\r\n    });\r\n    mainNav.querySelectorAll('a').forEach(a => a.addEventListener('click', () => {\r\n      if (window.innerWidth <= 860) {\r\n        burger.classList.remove('open');\r\n        mainNav.classList.remove('open');\r\n        document.body.style.overflow = '';\r\n      }\r\n    }));\r\n    document.querySelectorAll('.has-dropdown > a').forEach(link => {\r\n      link.addEventListener('click', (e) => {\r\n        if (window.innerWidth <= 860) {\r\n          e.preventDefault();\r\n          link.parentElement.classList.toggle('open');\r\n        }\r\n      });\r\n    });\r\n  });\r\n\r\n  \/* ---------- Scroll reveal ---------- *\/\r\n  safe('scroll-reveal', () => {\r\n    const revealEls = document.querySelectorAll('.reveal');\r\n    if ('IntersectionObserver' in window) {\r\n      const io = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n          if (entry.isIntersecting) {\r\n            entry.target.classList.add('is-visible');\r\n            io.unobserve(entry.target);\r\n          }\r\n        });\r\n      }, { threshold: .14, rootMargin: '0px 0px -60px 0px' });\r\n      revealEls.forEach(el => io.observe(el));\r\n    } else {\r\n      revealEls.forEach(el => el.classList.add('is-visible'));\r\n    }\r\n  });\r\n\r\n  \/* ---------- Stagger index for grouped reveals ---------- *\/\r\n  safe('reveal-stagger', () => {\r\n    document.querySelectorAll('.reveal-stagger').forEach(group => {\r\n      Array.from(group.children).forEach((child, i) => child.style.setProperty('--i', i));\r\n    });\r\n  });\r\n\r\n  \/* ---------- Hero slat parallax on pointer move ---------- *\/\r\n  safe('hero-parallax', () => {\r\n    document.querySelectorAll('.hero').forEach(hero => {\r\n      const slat = hero.querySelector('.slat-layer');\r\n      if (!slat) return;\r\n      hero.addEventListener('mousemove', (e) => {\r\n        const r = hero.getBoundingClientRect();\r\n        const x = (e.clientX - r.left) \/ r.width - .5;\r\n        const y = (e.clientY - r.top) \/ r.height - .5;\r\n        slat.style.transform = `translate3d(${x * 14}px, ${y * 10}px, 0)`;\r\n      });\r\n      hero.addEventListener('mouseleave', () => { slat.style.transform = ''; });\r\n    });\r\n  });\r\n\r\n  \/* ---------- Hero hotspots (tap support for touch devices) ---------- *\/\r\n  safe('hero-hotspots', () => {\r\n    document.querySelectorAll('.hero-hotspot').forEach(spot => {\r\n      spot.addEventListener('click', (e) => {\r\n        e.stopPropagation();\r\n        const wasOpen = spot.classList.contains('show');\r\n        document.querySelectorAll('.hero-hotspot.show').forEach(s => s.classList.remove('show'));\r\n        if (!wasOpen) spot.classList.add('show');\r\n      });\r\n    });\r\n    document.addEventListener('click', () => {\r\n      document.querySelectorAll('.hero-hotspot.show').forEach(s => s.classList.remove('show'));\r\n    });\r\n  });\r\n\r\n  \/* ---------- Lightbox ---------- *\/\r\n  safe('lightbox', () => {\r\n    const lightbox = document.querySelector('.lightbox');\r\n    if (!lightbox) return;\r\n    const lbImg = lightbox.querySelector('img');\r\n    document.querySelectorAll('[data-lightbox]').forEach(item => {\r\n      item.addEventListener('click', () => {\r\n        const src = item.getAttribute('data-lightbox');\r\n        lbImg.setAttribute('src', src);\r\n        lightbox.classList.add('open');\r\n      });\r\n    });\r\n    lightbox.addEventListener('click', (e) => {\r\n      if (e.target === lightbox || e.target.closest('.lightbox-close')) {\r\n        lightbox.classList.remove('open');\r\n      }\r\n    });\r\n    document.addEventListener('keydown', (e) => {\r\n      if (e.key === 'Escape') lightbox.classList.remove('open');\r\n    });\r\n  });\r\n\r\n  \/* ---------- Contact form (sends to FormSubmit.co) ---------- *\/\r\n  safe('contact-form', () => {\r\n    const form = document.querySelector('.contact-form');\r\n    if (!form) return;\r\n    form.addEventListener('submit', async (e) => {\r\n      e.preventDefault();\r\n      const success = form.parentElement.querySelector('.form-success');\r\n      const submitBtn = form.querySelector('button[type=\"submit\"]');\r\n      const originalLabel = submitBtn ? submitBtn.textContent : '';\r\n      if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = '\u05e9\u05d5\u05dc\u05d7...'; }\r\n      try {\r\n        const res = await fetch(form.action, {\r\n          method: 'POST',\r\n          headers: { 'Accept': 'application\/json' },\r\n          body: new FormData(form)\r\n        });\r\n        if (!res.ok) throw new Error('submit failed');\r\n        if (success) {\r\n          success.classList.add('show');\r\n          success.style.background = 'var(--forest)';\r\n          success.textContent = '\u05ea\u05d5\u05d3\u05d4! \u05d4\u05e4\u05e0\u05d9\u05d9\u05d4 \u05e0\u05e9\u05dc\u05d7\u05d4, \u05e0\u05d9\u05e6\u05d5\u05e8 \u05d0\u05d9\u05ea\u05da \u05e7\u05e9\u05e8 \u05d1\u05d4\u05e7\u05d3\u05dd.';\r\n        }\r\n        form.reset();\r\n      } catch (err) {\r\n        if (success) {\r\n          success.classList.add('show');\r\n          success.style.background = '#b3401f';\r\n          success.textContent = '\u05de\u05e9\u05d4\u05d5 \u05d4\u05e9\u05ea\u05d1\u05e9 \u05d1\u05e9\u05dc\u05d9\u05d7\u05d4. \u05d0\u05e4\u05e9\u05e8 \u05dc\u05e0\u05e1\u05d5\u05ea \u05e9\u05d5\u05d1, \u05d0\u05d5 \u05dc\u05d9\u05e6\u05d5\u05e8 \u05e7\u05e9\u05e8 \u05d1\u05d8\u05dc\u05e4\u05d5\u05df\/\u05d5\u05d5\u05d0\u05d8\u05e1\u05d0\u05e4.';\r\n        }\r\n      } finally {\r\n        if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = originalLabel; }\r\n      }\r\n    });\r\n  });\r\n\r\n});\r\n<\/script>\r\n<script>\r\n(function(){\r\n  var items = document.querySelectorAll('.rot-item');\r\n  if(!items.length) return;\r\n  var i = 0;\r\n  setInterval(function(){\r\n    items[i].classList.remove('active');\r\n    i = (i + 1) % items.length;\r\n    items[i].classList.add('active');\r\n  }, 3200);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a03aef0 e-con-full e-flex e-con e-parent\" data-id=\"a03aef0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-41f918d elementor-widget elementor-widget-html\" data-id=\"41f918d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* =========================================================\r\n   Main Stylesheet\r\n   Design tokens derived from brand logo:\r\n   forest #0F5A3A \u00b7 lime #D6DE24 \u00b7 cream #F6F3EA\r\n   ========================================================= *\/\r\n\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Suez+One&family=Assistant:wght@300;400;500;600;700;800&display=swap');\r\n\r\n:root{\r\n  --forest: #0F5A3A;\r\n  --forest-deep: #082C1D;\r\n  --forest-mid: #12603D;\r\n  --lime: #D6DE24;\r\n  --lime-soft: #E9EE8F;\r\n  --cream: #F6F3EA;\r\n  --ink: #16231C;\r\n  --sand: #B9AE93;\r\n  --white: #FFFFFF;\r\n\r\n  --shadow-soft: 0 20px 50px rgba(8,44,29,.18);\r\n  --shadow-card: 0 12px 30px rgba(8,44,29,.22);\r\n  --ease: cubic-bezier(.22,.61,.36,1);\r\n  --container: 1240px;\r\n}\r\n\r\n*,*::before,*::after{ box-sizing:border-box; }\r\nhtml{ scroll-behavior:smooth; }\r\nhtml,body{ margin:0; padding:0; }\r\nbody{\r\n  direction: rtl;\r\n  font-family:'Assistant', sans-serif;\r\n  color:var(--ink);\r\n  background:var(--cream);\r\n  line-height:1.6;\r\n  font-size:17px;\r\n  overflow-x:hidden;\r\n}\r\nimg{ max-width:100%; display:block; }\r\na{ color:inherit; text-decoration:none; }\r\nul{ list-style:none; margin:0; padding:0; }\r\nh1,h2,h3,h4{ margin:0; font-weight:700; }\r\np{ margin:0; }\r\nbutton{ font-family:inherit; cursor:pointer; }\r\n\r\n.display{\r\n  font-family:'Suez One', serif;\r\n  font-weight:400;\r\n  letter-spacing:.2px;\r\n}\r\n\r\n.container{\r\n  width:100%;\r\n  max-width:var(--container);\r\n  margin-inline:auto;\r\n  padding-inline:28px;\r\n}\r\n\r\n\/* Reduced motion respect *\/\r\n@media (prefers-reduced-motion: reduce){\r\n  html{ scroll-behavior:auto; }\r\n  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }\r\n}\r\n\r\n\/* Visible keyboard focus *\/\r\na:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{\r\n  outline:3px solid var(--lime);\r\n  outline-offset:3px;\r\n  border-radius:4px;\r\n}\r\n\r\n\/* =========================================================\r\n   SIGNATURE ELEMENT \u2014 sun-through-pergola light slats\r\n   Diagonal moving bars used in every hero, evokes the\r\n   dappled light a pergola casts. Restrained opacity.\r\n   ========================================================= *\/\r\n.slat-layer{\r\n  position:absolute; inset:0;\r\n  pointer-events:none;\r\n  overflow:hidden;\r\n  z-index:2;\r\n  mix-blend-mode:soft-light;\r\n}\r\n.slat-layer::before{\r\n  content:\"\";\r\n  position:absolute;\r\n  top:-20%; left:-30%;\r\n  width:180%; height:160%;\r\n  background:repeating-linear-gradient(\r\n    72deg,\r\n    rgba(255,255,255,0) 0px,\r\n    rgba(255,255,255,0) 46px,\r\n    rgba(255,255,255,.55) 52px,\r\n    rgba(255,255,255,0) 64px\r\n  );\r\n  animation: slat-drift 22s linear infinite;\r\n  will-change: transform;\r\n}\r\n@keyframes slat-drift{\r\n  0%{ transform: translate3d(0,0,0); }\r\n  100%{ transform: translate3d(-120px,60px,0); }\r\n}\r\n\r\n.slat-divider{\r\n  height:34px;\r\n  width:100%;\r\n  background:repeating-linear-gradient(\r\n    115deg,\r\n    var(--lime) 0px, var(--lime) 3px,\r\n    transparent 3px, transparent 26px\r\n  );\r\n  opacity:.55;\r\n}\r\n.slat-divider.on-forest{ opacity:.28; }\r\n\r\n\/* =========================================================\r\n   HEADER \/ NAV\r\n   ========================================================= *\/\r\n.site-header{\r\n  position:fixed; inset-inline:0; top:0;\r\n  z-index:100;\r\n  padding:14px 0;\r\n  transition: background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);\r\n}\r\n.site-header .container{\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  gap:20px;\r\n}\r\n.site-header.solid{\r\n  background:var(--forest);\r\n  box-shadow:0 8px 24px rgba(8,44,29,.25);\r\n  padding:8px 0;\r\n}\r\n\r\n.brand{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:12px;\r\n}\r\n.brand img{\r\n  height:54px;\r\n  width:auto;\r\n  border-radius:10px;\r\n  transition:height .35s var(--ease);\r\n}\r\n.site-header.solid .brand img{ height:42px; }\r\n.brand-name{\r\n  color:var(--white);\r\n  font-family:'Suez One', serif;\r\n  font-size:1.05rem;\r\n  line-height:1.15;\r\n  display:flex;\r\n  flex-direction:column;\r\n}\r\n.brand-name small{\r\n  font-family:'Assistant', sans-serif;\r\n  font-weight:400;\r\n  font-size:.68rem;\r\n  color:var(--lime-soft);\r\n  letter-spacing:.5px;\r\n}\r\n\r\n.main-nav ul{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:6px;\r\n}\r\n.main-nav a{\r\n  color:var(--white);\r\n  font-weight:600;\r\n  font-size:.96rem;\r\n  padding:10px 14px;\r\n  position:relative;\r\n  display:inline-block;\r\n}\r\n.main-nav a::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  right:14px; left:14px; bottom:6px;\r\n  height:2px;\r\n  background:var(--lime);\r\n  transform:scaleX(0);\r\n  transform-origin:center;\r\n  transition:transform .3s var(--ease);\r\n}\r\n.main-nav a:hover::after,\r\n.main-nav a.active::after{ transform:scaleX(1); }\r\n.main-nav a.active{ color:var(--lime); }\r\n\r\n.has-dropdown{ position:relative; }\r\n.dropdown{\r\n  position:absolute;\r\n  top:calc(100% + 8px);\r\n  right:0;\r\n  background:var(--white);\r\n  border-radius:14px;\r\n  box-shadow:var(--shadow-card);\r\n  min-width:200px;\r\n  padding:8px;\r\n  opacity:0;\r\n  visibility:hidden;\r\n  transform:translateY(8px);\r\n  transition:all .25s var(--ease);\r\n}\r\n.has-dropdown:hover .dropdown,\r\n.has-dropdown:focus-within .dropdown{\r\n  opacity:1; visibility:visible; transform:translateY(0);\r\n}\r\n.dropdown a{\r\n  color:var(--ink);\r\n  display:block;\r\n  padding:10px 14px;\r\n  border-radius:8px;\r\n  font-size:.9rem;\r\n}\r\n.dropdown a::after{ display:none; }\r\n.dropdown a:hover{ background:var(--cream); color:var(--forest); }\r\n\r\n.nav-cta{\r\n  background:var(--lime);\r\n  color:var(--forest-deep) !important;\r\n  border-radius:30px;\r\n  padding:10px 22px !important;\r\n  font-weight:700;\r\n}\r\n.nav-cta::after{ display:none; }\r\n.nav-cta:hover{ filter:brightness(1.08); }\r\n\r\n.burger{\r\n  display:none;\r\n  width:44px; height:44px;\r\n  border:none; background:transparent;\r\n  position:relative;\r\n  flex-shrink:0;\r\n}\r\n.burger span{\r\n  position:absolute; right:8px; left:8px;\r\n  height:2px; background:var(--white);\r\n  transition:all .3s var(--ease);\r\n}\r\n.burger span:nth-child(1){ top:16px; }\r\n.burger span:nth-child(2){ top:22px; }\r\n.burger span:nth-child(3){ top:28px; }\r\n.burger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }\r\n.burger.open span:nth-child(2){ opacity:0; }\r\n.burger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }\r\n\r\n\/* =========================================================\r\n   HERO\r\n   ========================================================= *\/\r\n.hero{\r\n  position:relative;\r\n  min-height: clamp(560px, 92vh, 940px);\r\n  display:flex;\r\n  align-items:flex-end;\r\n  overflow:hidden;\r\n  color:var(--white);\r\n  isolation:isolate;\r\n}\r\n.hero.hero--tall{ min-height: clamp(560px, 92vh, 940px); }\r\n.hero.hero--short{ min-height: clamp(440px, 70vh, 720px); }\r\n.hero-media{\r\n  position:absolute; inset:0;\r\n  z-index:0;\r\n}\r\n.hero-media img{\r\n  width:100%; height:100%;\r\n  object-fit:cover;\r\n  transform:scale(1.06);\r\n  animation: hero-settle 1.6s var(--ease) forwards;\r\n}\r\n@keyframes hero-settle{\r\n  from{ transform:scale(1.14); }\r\n  to{ transform:scale(1.06); }\r\n}\r\n.hero-scrim{\r\n  position:absolute; inset:0;\r\n  background:\r\n    linear-gradient(180deg, rgba(8,44,29,.35) 0%, rgba(8,44,29,.25) 35%, rgba(8,44,29,.88) 100%),\r\n    linear-gradient(90deg, rgba(8,44,29,.55) 0%, rgba(8,44,29,0) 55%);\r\n  z-index:1;\r\n  pointer-events:none;\r\n}\r\n.hero-content{\r\n  position:relative;\r\n  z-index:3;\r\n  width:100%;\r\n  max-width:100%;\r\n  padding:0 0 74px;\r\n}\r\n.eyebrow{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:10px;\r\n  color:var(--lime);\r\n  font-weight:700;\r\n  font-size:.9rem;\r\n  letter-spacing:.5px;\r\n  margin-bottom:16px;\r\n  max-width:100%;\r\n}\r\n.eyebrow::before{\r\n  content:\"\";\r\n  width:26px; height:2px;\r\n  background:var(--lime);\r\n  display:inline-block;\r\n  flex-shrink:0;\r\n}\r\n.hero h1{\r\n  font-family:'Suez One', serif;\r\n  font-size:clamp(2.4rem, 5.4vw, 4.6rem);\r\n  line-height:1.08;\r\n  max-width:min(16ch, 100%);\r\n  margin-bottom:20px;\r\n  text-shadow:0 6px 30px rgba(0,0,0,.25);\r\n  overflow-wrap:break-word;\r\n  word-break:break-word;\r\n}\r\n.hero-sub{\r\n  max-width:min(52ch, 100%);\r\n  font-size:1.14rem;\r\n  color:rgba(255,255,255,.92);\r\n  margin-bottom:32px;\r\n  overflow-wrap:break-word;\r\n}\r\n.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; max-width:100%; }\r\n\r\n.btn{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:10px;\r\n  padding:15px 30px;\r\n  border-radius:40px;\r\n  font-weight:700;\r\n  font-size:1rem;\r\n  border:2px solid transparent;\r\n  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);\r\n}\r\n.btn:hover{ transform:translateY(-3px); }\r\n.btn-lime{ background:var(--lime); color:var(--forest-deep); }\r\n.btn-lime:hover{ background:var(--lime-soft); }\r\n.btn-ghost{ border-color:rgba(255,255,255,.55); color:var(--white); }\r\n.btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:var(--white); }\r\n.btn-forest{ background:var(--forest); color:var(--white); }\r\n.btn-forest:hover{ background:var(--forest-mid); }\r\n\r\n.scroll-cue{\r\n  position:absolute; bottom:26px; left:50%;\r\n  transform:translateX(-50%);\r\n  z-index:3;\r\n  color:var(--white);\r\n  opacity:.75;\r\n  display:flex; flex-direction:column; align-items:center; gap:8px;\r\n  font-size:.75rem; letter-spacing:.5px;\r\n}\r\n.scroll-cue .line{\r\n  width:1px; height:34px;\r\n  background:linear-gradient(var(--lime), transparent);\r\n  animation: scroll-cue-move 1.8s ease-in-out infinite;\r\n}\r\n@keyframes scroll-cue-move{\r\n  0%,100%{ transform:scaleY(1); opacity:1; }\r\n  50%{ transform:scaleY(.5); opacity:.4; }\r\n}\r\n\r\n.hero-hotspots-layer{\r\n  position:absolute; inset:0;\r\n  z-index:5;\r\n  pointer-events:none;\r\n}\r\n.hero-hotspot{\r\n  position:absolute;\r\n  z-index:4;\r\n  transform:translate(-50%,-50%);\r\n  cursor:pointer;\r\n  pointer-events:auto;\r\n  -webkit-tap-highlight-color:transparent;\r\n}\r\n.hero-hotspot .dot{\r\n  display:block;\r\n  width:16px; height:16px;\r\n  border-radius:50%;\r\n  background:var(--lime);\r\n  border:2px solid rgba(255,255,255,.9);\r\n  animation: hotspot-pulse 2.2s ease-out infinite;\r\n  transition: background .25s var(--ease);\r\n}\r\n@keyframes hotspot-pulse{\r\n  0%{ box-shadow:0 0 0 0 rgba(214,222,36,.55); }\r\n  70%{ box-shadow:0 0 0 18px rgba(214,222,36,0); }\r\n  100%{ box-shadow:0 0 0 0 rgba(214,222,36,0); }\r\n}\r\n.hero-hotspot .tip{\r\n  position:absolute;\r\n  bottom:calc(100% + 14px);\r\n  right:50%;\r\n  transform:translateX(50%) translateY(8px);\r\n  color:var(--white);\r\n  padding:0;\r\n  font-size:1rem;\r\n  font-weight:800;\r\n  white-space:nowrap;\r\n  text-shadow:0 2px 10px rgba(0,0,0,.65), 0 0 2px rgba(0,0,0,.5);\r\n  opacity:0;\r\n  pointer-events:none;\r\n  transition:opacity .28s var(--ease), transform .28s var(--ease);\r\n}\r\n.hero-hotspot:hover .tip,\r\n.hero-hotspot:focus-visible .tip,\r\n.hero-hotspot.show .tip{\r\n  opacity:1;\r\n  transform:translateX(50%) translateY(0);\r\n}\r\n.hero-hotspot:hover .dot,\r\n.hero-hotspot.show .dot{ background:var(--lime-soft); }\r\n@media (max-width:560px){\r\n  .hero-hotspot .dot{ width:14px; height:14px; }\r\n  .hero-hotspot .tip{ font-size:.9rem; }\r\n}\r\n\r\n\/* =========================================================\r\n   SECTIONS \/ GENERIC\r\n   ========================================================= *\/\r\nsection{ position:relative; }\r\n.section-pad{ padding:80px 0; }\r\n.section-pad-sm{ padding:52px 0; }\r\n.section-head{\r\n  max-width:640px;\r\n  margin-bottom:52px;\r\n}\r\n.section-head .eyebrow{ color:var(--forest-mid); }\r\n.section-head.on-dark .eyebrow{ color:var(--lime); }\r\n.section-head h2{\r\n  font-family:'Suez One', serif;\r\n  font-size:clamp(1.9rem, 3.4vw, 2.7rem);\r\n  line-height:1.15;\r\n  color:var(--forest-deep);\r\n}\r\n.section-head.on-dark h2{ color:var(--white); }\r\n.section-head p{\r\n  margin-top:16px;\r\n  color:#4a554d;\r\n  font-size:1.05rem;\r\n}\r\n.section-head.on-dark p{ color:rgba(255,255,255,.82); }\r\n.section-head.center{ margin-inline:auto; text-align:center; }\r\n\r\n.bg-forest{ background:var(--forest); color:var(--white); }\r\n.bg-forest-deep{ background:var(--forest-deep); color:var(--white); }\r\n.bg-cream{ background:var(--cream); }\r\n.bg-white{ background:var(--white); }\r\n\r\n\/* Scroll reveal \u2014 content is visible by default (progressive enhancement).\r\n   Only hidden if JS actually ran and tagged <html class=\"js\">; if any script\r\n   on the page fails, content simply skips the fade-in instead of vanishing. *\/\r\n.js .reveal{\r\n  opacity:0;\r\n  transform:translateY(28px);\r\n  transition:opacity .8s var(--ease), transform .8s var(--ease);\r\n}\r\n.reveal.is-visible{ opacity:1; transform:translateY(0); }\r\n.reveal-stagger > *{ transition-delay: calc(var(--i, 0) * 90ms); }\r\n\r\n\/* =========================================================\r\n   INTRO STRIP\r\n   ========================================================= *\/\r\n.intro-strip{\r\n  display:grid;\r\n  grid-template-columns:1.1fr 1fr;\r\n  gap:60px;\r\n  align-items:center;\r\n}\r\n.intro-strip .mark{\r\n  font-family:'Suez One', serif;\r\n  font-size:5.5rem;\r\n  color:var(--lime);\r\n  line-height:.8;\r\n  opacity:.9;\r\n}\r\n.intro-strip h2{\r\n  font-family:'Suez One', serif;\r\n  font-size:clamp(1.6rem, 3vw, 2.2rem);\r\n  color:var(--forest-deep);\r\n  line-height:1.3;\r\n  margin-bottom:18px;\r\n}\r\n.intro-strip p{ color:#455049; font-size:1.05rem; }\r\n\r\n\/* =========================================================\r\n   CATEGORY GRID (bento)\r\n   ========================================================= *\/\r\n.cat-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(6,1fr);\r\n  grid-auto-rows:190px;\r\n  gap:20px;\r\n}\r\n.cat-card{\r\n  position:relative;\r\n  border-radius:22px;\r\n  overflow:hidden;\r\n  color:var(--white);\r\n  display:flex; align-items:flex-end;\r\n  box-shadow:var(--shadow-card);\r\n}\r\n.cat-card:nth-child(1){ grid-column:span 3; grid-row:span 3; }\r\n.cat-card:nth-child(2){ grid-column:span 3; grid-row:span 3; }\r\n.cat-card:nth-child(3){ grid-column:span 2; grid-row:span 2; }\r\n.cat-card:nth-child(4){ grid-column:span 2; grid-row:span 2; }\r\n.cat-card:nth-child(5){ grid-column:span 2; grid-row:span 2; }\r\n\r\n.cat-card img{\r\n  position:absolute; inset:0;\r\n  width:100%; height:100%;\r\n  object-fit:cover;\r\n  transition:transform .7s var(--ease), filter .7s var(--ease);\r\n}\r\n.cat-card::before{\r\n  content:\"\";\r\n  position:absolute; inset:0;\r\n  background:linear-gradient(180deg, rgba(8,44,29,0) 30%, rgba(8,44,29,.92) 100%);\r\n  z-index:1;\r\n  transition:background .4s var(--ease);\r\n}\r\n.cat-card:hover img{ transform:scale(1.09); filter:brightness(.92); }\r\n.cat-card-body{\r\n  position:relative; z-index:2;\r\n  padding:24px;\r\n  width:100%;\r\n}\r\n.cat-card-icon{\r\n  width:38px; height:38px;\r\n  margin-bottom:10px;\r\n  color:var(--lime);\r\n}\r\n.cat-card h3{\r\n  font-family:'Suez One', serif;\r\n  font-size:1.3rem;\r\n  margin-bottom:6px;\r\n}\r\n.cat-card .cat-underline{\r\n  display:block;\r\n  height:2px; width:34px;\r\n  background:var(--lime);\r\n  margin-bottom:10px;\r\n  transition:width .4s var(--ease);\r\n}\r\n.cat-card:hover .cat-underline{ width:64px; }\r\n.cat-card p{\r\n  font-size:.88rem;\r\n  color:rgba(255,255,255,.85);\r\n  max-width:36ch;\r\n}\r\n.cat-card .arrow{\r\n  position:absolute; top:22px; left:22px; z-index:2;\r\n  width:40px; height:40px;\r\n  border-radius:50%;\r\n  background:rgba(255,255,255,.15);\r\n  backdrop-filter:blur(6px);\r\n  display:flex; align-items:center; justify-content:center;\r\n  transition:transform .4s var(--ease), background .4s var(--ease);\r\n}\r\n.cat-card:hover .arrow{ transform:translate(-6px,-6px); background:var(--lime); color:var(--forest-deep); }\r\n\r\n\/* =========================================================\r\n   WHY-US FEATURES\r\n   ========================================================= *\/\r\n.features-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(4,1fr);\r\n  gap:28px;\r\n}\r\n.feature{\r\n  padding:30px 24px;\r\n  border-radius:18px;\r\n  background:rgba(255,255,255,.05);\r\n  border:1px solid rgba(255,255,255,.12);\r\n  transition:transform .4s var(--ease), background .4s var(--ease);\r\n}\r\n.feature:hover{ transform:translateY(-6px); background:rgba(255,255,255,.09); }\r\n.feature .ico{\r\n  width:46px; height:46px;\r\n  color:var(--lime);\r\n  margin-bottom:18px;\r\n}\r\n.feature h3{\r\n  font-size:1.08rem;\r\n  margin-bottom:8px;\r\n  color:var(--white);\r\n}\r\n.feature p{ color:rgba(255,255,255,.75); font-size:.92rem; }\r\n\r\n\/* =========================================================\r\n   GALLERY\r\n   ========================================================= *\/\r\n.gallery-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(6,1fr);\r\n  gap:18px;\r\n}\r\n.gallery-item{\r\n  position:relative;\r\n  border-radius:18px;\r\n  overflow:hidden;\r\n  cursor:pointer;\r\n  grid-column:span 2;\r\n  aspect-ratio:4\/3.2;\r\n  box-shadow:var(--shadow-card);\r\n}\r\n.gallery-item.tall{ grid-row:span 2; aspect-ratio:auto; }\r\n.gallery-item img{\r\n  width:100%; height:100%; object-fit:cover;\r\n  transition:transform .6s var(--ease);\r\n}\r\n.gallery-item:hover img{ transform:scale(1.08); }\r\n.gallery-item::after{\r\n  content:\"\";\r\n  position:absolute; inset:0;\r\n  background:linear-gradient(180deg, rgba(8,44,29,0) 55%, rgba(8,44,29,.65) 100%);\r\n  opacity:0; transition:opacity .4s var(--ease);\r\n}\r\n.gallery-item:hover::after{ opacity:1; }\r\n\r\n\/* Lightbox *\/\r\n.lightbox{\r\n  position:fixed; inset:0; z-index:300;\r\n  background:rgba(8,20,14,.92);\r\n  display:flex; align-items:center; justify-content:center;\r\n  opacity:0; visibility:hidden;\r\n  transition:opacity .35s var(--ease);\r\n  padding:40px;\r\n}\r\n.lightbox.open{ opacity:1; visibility:visible; }\r\n.lightbox img{\r\n  max-width:min(1100px,92vw);\r\n  max-height:86vh;\r\n  border-radius:14px;\r\n  box-shadow:0 30px 80px rgba(0,0,0,.5);\r\n}\r\n.lightbox-close{\r\n  position:absolute; top:26px; left:32px;\r\n  width:46px; height:46px;\r\n  border-radius:50%;\r\n  background:rgba(255,255,255,.1);\r\n  border:1px solid rgba(255,255,255,.3);\r\n  color:var(--white);\r\n  font-size:1.3rem;\r\n}\r\n.lightbox-close:hover{ background:var(--lime); color:var(--forest-deep); }\r\n\r\n\/* =========================================================\r\n   PRODUCT PAGE: feature bullets + text block\r\n   ========================================================= *\/\r\n.two-col{\r\n  display:grid;\r\n  grid-template-columns:1fr 1fr;\r\n  gap:64px;\r\n  align-items:start;\r\n}\r\n.bullet-list{ margin-top:26px; display:flex; flex-direction:column; gap:20px; }\r\n.bullet{\r\n  display:flex; gap:16px; align-items:flex-start;\r\n}\r\n.bullet .num{\r\n  flex-shrink:0;\r\n  width:40px; height:40px;\r\n  border-radius:50%;\r\n  background:var(--forest);\r\n  color:var(--lime);\r\n  display:flex; align-items:center; justify-content:center;\r\n}\r\n.bullet .num svg{ width:20px; height:20px; }\r\n.bullet h4{ font-size:1.05rem; margin-bottom:4px; color:var(--forest-deep); }\r\n.bullet p{ color:#4a554d; font-size:.95rem; }\r\n\r\n.stat-row{\r\n  display:flex;\r\n  gap:40px;\r\n  margin-top:36px;\r\n  flex-wrap:wrap;\r\n}\r\n.stat b{\r\n  font-family:'Suez One', serif;\r\n  font-size:2.2rem;\r\n  color:var(--forest);\r\n  display:block;\r\n}\r\n.stat span{ font-size:.85rem; color:#5c665f; }\r\n\r\n.side-image{\r\n  position:relative;\r\n  border-radius:24px;\r\n  overflow:hidden;\r\n  box-shadow:var(--shadow-soft);\r\n}\r\n.side-image img{ width:100%; height:100%; object-fit:cover; }\r\n.side-image .chip{\r\n  position:absolute; bottom:20px; right:20px;\r\n  background:var(--white);\r\n  color:var(--forest-deep);\r\n  padding:12px 20px;\r\n  border-radius:14px;\r\n  font-weight:700;\r\n  font-size:.9rem;\r\n  box-shadow:var(--shadow-card);\r\n  display:flex; align-items:center; gap:10px;\r\n}\r\n.side-image .chip svg{ width:22px; height:22px; color:var(--lime-dark, #7a8000); }\r\n\r\n\/* =========================================================\r\n   CTA BANNER\r\n   ========================================================= *\/\r\n.cta-banner{\r\n  border-radius:28px;\r\n  background:var(--lime);\r\n  padding:64px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  gap:40px;\r\n  flex-wrap:wrap;\r\n  position:relative;\r\n  overflow:hidden;\r\n}\r\n.cta-banner::before{\r\n  content:\"\";\r\n  position:absolute; inset:0;\r\n  background:repeating-linear-gradient(115deg, rgba(8,44,29,.06) 0 3px, transparent 3px 30px);\r\n}\r\n.cta-banner-text{ position:relative; z-index:1; max-width:520px; }\r\n.cta-banner h2{\r\n  font-family:'Suez One', serif;\r\n  font-size:clamp(1.7rem,3vw,2.3rem);\r\n  color:var(--forest-deep);\r\n  margin-bottom:12px;\r\n}\r\n.cta-banner p{ color:#33421f; font-size:1.02rem; }\r\n.cta-banner-actions{ position:relative; z-index:1; display:flex; gap:14px; flex-wrap:wrap; }\r\n\r\n\/* =========================================================\r\n   CONTACT SECTION\r\n   ========================================================= *\/\r\n.contact-grid{\r\n  display:grid;\r\n  grid-template-columns:.9fr 1.1fr;\r\n  gap:60px;\r\n}\r\n.contact-info-item{\r\n  display:flex; gap:16px; align-items:flex-start;\r\n  margin-bottom:24px;\r\n}\r\n.contact-info-item .ico{\r\n  width:44px; height:44px;\r\n  border-radius:50%;\r\n  background:rgba(255,255,255,.08);\r\n  display:flex; align-items:center; justify-content:center;\r\n  color:var(--lime);\r\n  flex-shrink:0;\r\n}\r\n.contact-info-item h4{ color:var(--white); font-size:1rem; margin-bottom:2px; }\r\n.contact-info-item p, .contact-info-item a{ color:rgba(255,255,255,.75); font-size:.94rem; }\r\n\r\n.form-card{\r\n  background:var(--white);\r\n  border-radius:24px;\r\n  padding:40px;\r\n  box-shadow:var(--shadow-soft);\r\n}\r\n.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }\r\n.field{ margin-bottom:18px; }\r\n.field label{\r\n  display:block; font-size:.86rem; font-weight:700;\r\n  margin-bottom:8px; color:var(--forest-deep);\r\n}\r\n.field input, .field textarea, .field select{\r\n  width:100%;\r\n  border:1.5px solid #E3E0D3;\r\n  background:var(--cream);\r\n  border-radius:12px;\r\n  padding:13px 16px;\r\n  font-family:inherit;\r\n  font-size:.96rem;\r\n  color:var(--ink);\r\n  transition:border-color .25s var(--ease), background .25s var(--ease);\r\n}\r\n.field input:focus, .field textarea:focus, .field select:focus{\r\n  border-color:var(--forest);\r\n  background:var(--white);\r\n  outline:none;\r\n}\r\n.field textarea{ resize:vertical; min-height:110px; }\r\n.form-note{ font-size:.82rem; color:#8a8f86; margin-top:14px; }\r\n.form-success{\r\n  display:none;\r\n  background:var(--forest);\r\n  color:var(--white);\r\n  padding:16px 20px;\r\n  border-radius:12px;\r\n  margin-top:16px;\r\n  font-weight:600;\r\n}\r\n.form-success.show{ display:block; }\r\n\r\n\/* =========================================================\r\n   FOOTER\r\n   ========================================================= *\/\r\n.site-footer{ padding-top:70px; }\r\n.footer-top{\r\n  display:grid;\r\n  grid-template-columns:1.4fr 1fr 1fr 1fr;\r\n  gap:40px;\r\n  padding-bottom:50px;\r\n  border-bottom:1px solid rgba(255,255,255,.12);\r\n}\r\n.footer-brand p{ color:rgba(255,255,255,.7); margin-top:18px; font-size:.92rem; max-width:32ch; }\r\n.footer-col h4{ color:var(--lime); font-size:.95rem; margin-bottom:18px; }\r\n.footer-col ul{ display:flex; flex-direction:column; gap:12px; }\r\n.footer-col a{ color:rgba(255,255,255,.78); font-size:.92rem; transition:color .25s; }\r\n.footer-col a:hover{ color:var(--lime); }\r\n.footer-bottom{\r\n  display:flex; justify-content:space-between; align-items:center;\r\n  padding:26px 0; flex-wrap:wrap; gap:12px;\r\n  color:rgba(255,255,255,.5); font-size:.82rem;\r\n}\r\n.socials{ display:flex; gap:10px; }\r\n.socials a{\r\n  width:38px; height:38px; border-radius:50%;\r\n  background:rgba(255,255,255,.08);\r\n  display:flex; align-items:center; justify-content:center;\r\n  color:var(--white);\r\n  transition:background .25s, color .25s;\r\n}\r\n.socials a:hover{ background:var(--lime); color:var(--forest-deep); }\r\n\r\n\/* WhatsApp floating button *\/\r\n.wa-float{\r\n  position:fixed; bottom:26px; left:26px; z-index:90;\r\n  width:60px; height:60px;\r\n  border-radius:50%;\r\n  background:#25D366;\r\n  display:flex; align-items:center; justify-content:center;\r\n  box-shadow:0 12px 28px rgba(0,0,0,.28);\r\n  color:var(--white);\r\n  animation: wa-pulse 2.6s ease-in-out infinite;\r\n}\r\n.wa-float svg{ width:30px; height:30px; }\r\n@keyframes wa-pulse{\r\n  0%,100%{ box-shadow:0 12px 28px rgba(0,0,0,.28), 0 0 0 0 rgba(37,211,102,.5); }\r\n  50%{ box-shadow:0 12px 28px rgba(0,0,0,.28), 0 0 0 12px rgba(37,211,102,0); }\r\n}\r\n\r\n\/* =========================================================\r\n   RESPONSIVE\r\n   ========================================================= *\/\r\n@media (max-width:1080px){\r\n  .intro-strip{ grid-template-columns:1fr; gap:24px; }\r\n  .features-grid{ grid-template-columns:repeat(2,1fr); }\r\n  .two-col{ grid-template-columns:1fr; gap:36px; }\r\n  .contact-grid{ grid-template-columns:1fr; }\r\n  .footer-top{ grid-template-columns:1fr 1fr; row-gap:36px; }\r\n  .cat-grid{ grid-auto-rows:170px; }\r\n}\r\n\r\n@media (max-width:860px){\r\n  .main-nav{\r\n    position:fixed; inset-inline:0; top:0;\r\n    height:100vh;\r\n    background:var(--forest-deep);\r\n    display:flex; align-items:center; justify-content:center;\r\n    transform:translateY(-100%);\r\n    transition:transform .4s var(--ease);\r\n    z-index:99;\r\n  }\r\n  .main-nav.open{ transform:translateY(0); }\r\n  .main-nav ul{ flex-direction:column; gap:8px; text-align:center; }\r\n  .main-nav a{ font-size:1.3rem; padding:14px 20px; }\r\n  .dropdown{\r\n    position:static; opacity:1; visibility:visible; transform:none;\r\n    background:transparent; box-shadow:none; text-align:center;\r\n    display:none;\r\n  }\r\n  .has-dropdown.open .dropdown{ display:block; }\r\n  .burger{ display:block; }\r\n  .nav-cta{ margin-top:10px; }\r\n\r\n  .cat-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:220px; }\r\n  .cat-card{ grid-column:span 2 !important; grid-row:span 1 !important; }\r\n  .gallery-grid{ grid-template-columns:1fr 1fr; }\r\n  .gallery-item{ grid-column:span 1; }\r\n  .form-row{ grid-template-columns:1fr; }\r\n  .cta-banner{ padding:40px 28px; }\r\n  .footer-top{ grid-template-columns:1fr; }\r\n}\r\n\r\n@media (max-width:560px){\r\n  body{ font-size:16px; }\r\n  .section-pad{ padding:70px 0; }\r\n  .features-grid{ grid-template-columns:1fr; }\r\n\r\n  .hero-content{ padding-bottom:40px; }\r\n  .eyebrow{ font-size:.78rem; margin-bottom:10px; }\r\n  .hero h1{ font-size:1.7rem; line-height:1.22; margin-bottom:12px; max-width:100%; }\r\n  .hero-sub{\r\n    font-size:.95rem;\r\n    line-height:1.5;\r\n    margin-bottom:20px;\r\n    max-width:100%;\r\n    display:-webkit-box;\r\n    -webkit-line-clamp:3;\r\n    -webkit-box-orient:vertical;\r\n    overflow:hidden;\r\n  }\r\n  .hero-actions{ flex-direction:column; align-items:stretch; gap:10px; }\r\n  .btn{ justify-content:center; padding:12px 22px; font-size:.92rem; }\r\n}\r\n\r\n<\/style>\r\n<style>\r\n.info-banner{\r\n  position:relative;\r\n  background:var(--forest-deep);\r\n  overflow:hidden;\r\n  padding:90px 0;\r\n}\r\n.info-banner::before{\r\n  content:\"\";\r\n  position:absolute;\r\n  width:620px; height:620px;\r\n  border-radius:50%;\r\n  background:radial-gradient(circle, rgba(214,222,36,.20), transparent 70%);\r\n  top:-260px; right:-180px;\r\n  z-index:0;\r\n  pointer-events:none;\r\n}\r\n.info-banner::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset-inline:0; bottom:0;\r\n  height:34px;\r\n  background:repeating-linear-gradient(115deg, var(--lime) 0 3px, transparent 3px 26px);\r\n  opacity:.22;\r\n}\r\n.info-banner .container{ position:relative; z-index:1; }\r\n.info-squares{\r\n  display:grid;\r\n  grid-template-columns:repeat(4,1fr);\r\n  gap:22px;\r\n  margin-top:46px;\r\n}\r\n.info-square{\r\n  background:rgba(255,255,255,.06);\r\n  border:1px solid rgba(255,255,255,.14);\r\n  border-radius:20px;\r\n  padding:28px 26px;\r\n  aspect-ratio:1\/1;\r\n  display:flex;\r\n  flex-direction:column;\r\n  transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);\r\n}\r\n.info-square:hover{ transform:translateY(-6px); background:rgba(255,255,255,.1); border-color:rgba(214,222,36,.4); }\r\n.info-square .ico{ width:42px; height:42px; color:var(--lime); margin-bottom:16px; flex-shrink:0; }\r\n.info-square h3{ color:var(--white); font-size:1.02rem; margin-bottom:10px; line-height:1.3; }\r\n.info-square p{ color:rgba(255,255,255,.75); font-size:.88rem; line-height:1.55; }\r\n\r\n@media (max-width:1080px){\r\n  .info-squares{ grid-template-columns:1fr 1fr; }\r\n  .info-square{ aspect-ratio:auto; min-height:220px; }\r\n}\r\n@media (max-width:560px){\r\n  .info-squares{ grid-template-columns:1fr; gap:16px; }\r\n  .info-banner{ padding:60px 0; }\r\n}\r\n<\/style>\r\n<section class=\"info-banner\">\r\n    <div class=\"container\">\r\n      <div class=\"section-head on-dark reveal center\" style=\"margin-inline:auto;text-align:center;\">\r\n        <span class=\"eyebrow\">\u05dc\u05d3\u05e2\u05ea \u05dc\u05d1\u05d7\u05d5\u05e8 \u05e0\u05db\u05d5\u05df<\/span>\r\n        <h2>\u05de\u05d4 \u05d7\u05e9\u05d5\u05d1 \u05dc\u05d3\u05e2\u05ea \u05dc\u05e4\u05e0\u05d9 \u05e9\u05d1\u05d5\u05d7\u05e8\u05d9\u05dd \u05e1\u05d5\u05dc\u05dd \u05dc\u05e2\u05dc\u05d9\u05d9\u05ea \u05d2\u05d2<\/h2>\r\n        <p>\u05e1\u05d5\u05dc\u05dd \u05de\u05ea\u05e7\u05e4\u05dc, \u05de\u05d3\u05e8\u05d2\u05d5\u05ea \u05d2\u05dc\u05e8\u05d9\u05d4 \u05d0\u05d5 \u05d3\u05d2\u05dd \u05dc\u05e4\u05ea\u05d7 \u05e7\u05d8\u05df \u2014 \u05d4\u05e0\u05d4 \u05db\u05de\u05d4 \u05e0\u05e7\u05d5\u05d3\u05d5\u05ea \u05de\u05e4\u05ea\u05d7 \u05dc\u05d1\u05d7\u05d9\u05e8\u05d4 \u05e0\u05db\u05d5\u05e0\u05d4.<\/p>\r\n      <\/div>\r\n      <div class=\"info-squares reveal-stagger\">\r\n        <div class=\"info-square reveal\">\r\n      <span class=\"ico\"><svg viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n<path d=\"M14 4V44M34 4V44\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\"\/>\r\n<path d=\"M14 12H34M14 20H34M14 28H34M14 36H34\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\"\/>\r\n<\/svg><\/span>\r\n      <h3>\u05de\u05ea\u05e7\u05e4\u05dc \u05d5\u05e0\u05e2\u05dc\u05dd \u05dc\u05d2\u05de\u05e8\u05d9<\/h3>\r\n      <p>\u05db\u05e9\u05d4\u05e1\u05d5\u05dc\u05dd \u05e1\u05d2\u05d5\u05e8 \u05d4\u05d5\u05d0 \u05de\u05e9\u05ea\u05dc\u05d1 \u05d1\u05ea\u05e7\u05e8\u05d4 \u05d5\u05dc\u05d0 \u05ea\u05d5\u05e4\u05e1 \u05de\u05e7\u05d5\u05dd \u05d0\u05d5 \u05de\u05e4\u05e8\u05d9\u05e2 \u05dc\u05de\u05e2\u05d1\u05e8 \u05d1\u05d1\u05d9\u05ea.<\/p>\r\n    <\/div><div class=\"info-square reveal\">\r\n      <span class=\"ico\"><svg viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n<path d=\"M24 6L38 12V22C38 31 32.6 38.3 24 42C15.4 38.3 10 31 10 22V12L24 6Z\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linejoin=\"round\"\/>\r\n<path d=\"M17 23L22 28L32 18\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n<\/svg><\/span>\r\n      <h3>\u05d1\u05d8\u05d9\u05d7\u05d5\u05ea \u05d1\u05e9\u05dc\u05d1\u05d9\u05dd \u05e8\u05d7\u05d1\u05d9\u05dd<\/h3>\r\n      <p>\u05e9\u05dc\u05d1\u05d9\u05dd \u05d1\u05e8\u05d5\u05d7\u05d1 \u05e0\u05d5\u05d7 \u05d5\u05de\u05e2\u05e7\u05d4 \u05d0\u05d7\u05d9\u05d6\u05d4, \u05dc\u05d9\u05e8\u05d9\u05d3\u05d4 \u05d5\u05e2\u05dc\u05d9\u05d9\u05d4 \u05d9\u05e6\u05d9\u05d1\u05d4 \u05d5\u05d1\u05d8\u05d5\u05d7\u05d4 \u05dc\u05db\u05dc \u05d4\u05d2\u05d9\u05dc.<\/p>\r\n    <\/div><div class=\"info-square reveal\">\r\n      <span class=\"ico\"><svg viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n<path d=\"M24 5L40 11V22C40 32 33.5 39.7 24 43C14.5 39.7 8 32 8 22V11L24 5Z\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linejoin=\"round\"\/>\r\n<path d=\"M24 15V24L29.5 27.5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n<\/svg><\/span>\r\n      <h3>\u05e2\u05de\u05d9\u05d3\u05d5\u05ea \u05dc\u05d0\u05d5\u05e8\u05da \u05e9\u05e0\u05d9\u05dd<\/h3>\r\n      <p>\u05de\u05d1\u05e0\u05d4 \u05de\u05e4\u05dc\u05d3\u05d4 \u05de\u05d2\u05d5\u05dc\u05d5\u05d5\u05e0\u05ea \u05e9\u05dc\u05d0 \u05de\u05d7\u05dc\u05d9\u05d3 \u05d5\u05e9\u05d5\u05de\u05e8 \u05e2\u05dc \u05ea\u05e4\u05e7\u05d5\u05d3 \u05d7\u05dc\u05e7 \u05dc\u05d0\u05d5\u05e8\u05da \u05d6\u05de\u05df \u05e8\u05d1.<\/p>\r\n    <\/div><div class=\"info-square reveal\">\r\n      <span class=\"ico\"><svg viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n<circle cx=\"24\" cy=\"24\" r=\"17\" stroke=\"currentColor\" stroke-width=\"2.2\"\/>\r\n<path d=\"M24 15V24L30 28\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n<\/svg><\/span>\r\n      <h3>\u05de\u05ea\u05d0\u05d9\u05dd \u05d2\u05dd \u05dc\u05e4\u05ea\u05d7\u05d9\u05dd \u05e7\u05d8\u05e0\u05d9\u05dd<\/h3>\r\n      <p>\u05d3\u05d2\u05de\u05d9 \u05d2\u05dc\u05e8\u05d9\u05d4 \u05d5\u05e1\u05d5\u05dc\u05de\u05d5\u05ea \u05de\u05ea\u05e7\u05e4\u05dc\u05d9\u05dd \u05de\u05d9\u05d5\u05d7\u05d3\u05d9\u05dd \u05dc\u05d7\u05dc\u05dc\u05d9\u05dd \u05e2\u05dd \u05de\u05d2\u05d1\u05dc\u05d5\u05ea \u05d2\u05d5\u05d1\u05d4 \u05d0\u05d5 \u05e4\u05ea\u05d7 \u05e6\u05e8.<\/p>\r\n    <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n<script>document.documentElement.className += ' js';<\/script>\r\n<script>\/\/ shared interactions\r\n\/\/ Each feature below runs in its own try\/catch: a bug or missing element in\r\n\/\/ one feature must never be able to block the others from running.\r\n\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n\r\n  const safe = (label, fn) => {\r\n    try { fn(); } catch (err) { console.error('[site]', label, err); }\r\n  };\r\n\r\n  \/* ---------- Sticky header (skipped entirely if no header is present) ---------- *\/\r\n  safe('sticky-header', () => {\r\n    const header = document.querySelector('.site-header');\r\n    if (!header) return;\r\n    const onScroll = () => {\r\n      if (window.scrollY > 40) header.classList.add('solid');\r\n      else header.classList.remove('solid');\r\n    };\r\n    onScroll();\r\n    window.addEventListener('scroll', onScroll, { passive: true });\r\n  });\r\n\r\n  \/* ---------- Mobile nav ---------- *\/\r\n  safe('mobile-nav', () => {\r\n    const burger = document.querySelector('.burger');\r\n    const mainNav = document.querySelector('.main-nav');\r\n    if (!burger || !mainNav) return;\r\n    burger.addEventListener('click', () => {\r\n      burger.classList.toggle('open');\r\n      mainNav.classList.toggle('open');\r\n      document.body.style.overflow = mainNav.classList.contains('open') ? 'hidden' : '';\r\n    });\r\n    mainNav.querySelectorAll('a').forEach(a => a.addEventListener('click', () => {\r\n      if (window.innerWidth <= 860) {\r\n        burger.classList.remove('open');\r\n        mainNav.classList.remove('open');\r\n        document.body.style.overflow = '';\r\n      }\r\n    }));\r\n    document.querySelectorAll('.has-dropdown > a').forEach(link => {\r\n      link.addEventListener('click', (e) => {\r\n        if (window.innerWidth <= 860) {\r\n          e.preventDefault();\r\n          link.parentElement.classList.toggle('open');\r\n        }\r\n      });\r\n    });\r\n  });\r\n\r\n  \/* ---------- Scroll reveal ---------- *\/\r\n  safe('scroll-reveal', () => {\r\n    const revealEls = document.querySelectorAll('.reveal');\r\n    if ('IntersectionObserver' in window) {\r\n      const io = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n          if (entry.isIntersecting) {\r\n            entry.target.classList.add('is-visible');\r\n            io.unobserve(entry.target);\r\n          }\r\n        });\r\n      }, { threshold: .14, rootMargin: '0px 0px -60px 0px' });\r\n      revealEls.forEach(el => io.observe(el));\r\n    } else {\r\n      revealEls.forEach(el => el.classList.add('is-visible'));\r\n    }\r\n  });\r\n\r\n  \/* ---------- Stagger index for grouped reveals ---------- *\/\r\n  safe('reveal-stagger', () => {\r\n    document.querySelectorAll('.reveal-stagger').forEach(group => {\r\n      Array.from(group.children).forEach((child, i) => child.style.setProperty('--i', i));\r\n    });\r\n  });\r\n\r\n  \/* ---------- Hero slat parallax on pointer move ---------- *\/\r\n  safe('hero-parallax', () => {\r\n    document.querySelectorAll('.hero').forEach(hero => {\r\n      const slat = hero.querySelector('.slat-layer');\r\n      if (!slat) return;\r\n      hero.addEventListener('mousemove', (e) => {\r\n        const r = hero.getBoundingClientRect();\r\n        const x = (e.clientX - r.left) \/ r.width - .5;\r\n        const y = (e.clientY - r.top) \/ r.height - .5;\r\n        slat.style.transform = `translate3d(${x * 14}px, ${y * 10}px, 0)`;\r\n      });\r\n      hero.addEventListener('mouseleave', () => { slat.style.transform = ''; });\r\n    });\r\n  });\r\n\r\n  \/* ---------- Hero hotspots (tap support for touch devices) ---------- *\/\r\n  safe('hero-hotspots', () => {\r\n    document.querySelectorAll('.hero-hotspot').forEach(spot => {\r\n      spot.addEventListener('click', (e) => {\r\n        e.stopPropagation();\r\n        const wasOpen = spot.classList.contains('show');\r\n        document.querySelectorAll('.hero-hotspot.show').forEach(s => s.classList.remove('show'));\r\n        if (!wasOpen) spot.classList.add('show');\r\n      });\r\n    });\r\n    document.addEventListener('click', () => {\r\n      document.querySelectorAll('.hero-hotspot.show').forEach(s => s.classList.remove('show'));\r\n    });\r\n  });\r\n\r\n  \/* ---------- Lightbox ---------- *\/\r\n  safe('lightbox', () => {\r\n    const lightbox = document.querySelector('.lightbox');\r\n    if (!lightbox) return;\r\n    const lbImg = lightbox.querySelector('img');\r\n    document.querySelectorAll('[data-lightbox]').forEach(item => {\r\n      item.addEventListener('click', () => {\r\n        const src = item.getAttribute('data-lightbox');\r\n        lbImg.setAttribute('src', src);\r\n        lightbox.classList.add('open');\r\n      });\r\n    });\r\n    lightbox.addEventListener('click', (e) => {\r\n      if (e.target === lightbox || e.target.closest('.lightbox-close')) {\r\n        lightbox.classList.remove('open');\r\n      }\r\n    });\r\n    document.addEventListener('keydown', (e) => {\r\n      if (e.key === 'Escape') lightbox.classList.remove('open');\r\n    });\r\n  });\r\n\r\n  \/* ---------- Contact form (sends to FormSubmit.co) ---------- *\/\r\n  safe('contact-form', () => {\r\n    const form = document.querySelector('.contact-form');\r\n    if (!form) return;\r\n    form.addEventListener('submit', async (e) => {\r\n      e.preventDefault();\r\n      const success = form.parentElement.querySelector('.form-success');\r\n      const submitBtn = form.querySelector('button[type=\"submit\"]');\r\n      const originalLabel = submitBtn ? submitBtn.textContent : '';\r\n      if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = '\u05e9\u05d5\u05dc\u05d7...'; }\r\n      try {\r\n        const res = await fetch(form.action, {\r\n          method: 'POST',\r\n          headers: { 'Accept': 'application\/json' },\r\n          body: new FormData(form)\r\n        });\r\n        if (!res.ok) throw new Error('submit failed');\r\n        if (success) {\r\n          success.classList.add('show');\r\n          success.style.background = 'var(--forest)';\r\n          success.textContent = '\u05ea\u05d5\u05d3\u05d4! \u05d4\u05e4\u05e0\u05d9\u05d9\u05d4 \u05e0\u05e9\u05dc\u05d7\u05d4, \u05e0\u05d9\u05e6\u05d5\u05e8 \u05d0\u05d9\u05ea\u05da \u05e7\u05e9\u05e8 \u05d1\u05d4\u05e7\u05d3\u05dd.';\r\n        }\r\n        form.reset();\r\n      } catch (err) {\r\n        if (success) {\r\n          success.classList.add('show');\r\n          success.style.background = '#b3401f';\r\n          success.textContent = '\u05de\u05e9\u05d4\u05d5 \u05d4\u05e9\u05ea\u05d1\u05e9 \u05d1\u05e9\u05dc\u05d9\u05d7\u05d4. \u05d0\u05e4\u05e9\u05e8 \u05dc\u05e0\u05e1\u05d5\u05ea \u05e9\u05d5\u05d1, \u05d0\u05d5 \u05dc\u05d9\u05e6\u05d5\u05e8 \u05e7\u05e9\u05e8 \u05d1\u05d8\u05dc\u05e4\u05d5\u05df\/\u05d5\u05d5\u05d0\u05d8\u05e1\u05d0\u05e4.';\r\n        }\r\n      } finally {\r\n        if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = originalLabel; }\r\n      }\r\n    });\r\n  });\r\n\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u05d2\u05d9\u05e9\u05d4 \u05d1\u05d8\u05d5\u05d7\u05d4 \u05d5\u05e0\u05d5\u05d7\u05d4 \u05dc\u05db\u05dc \u05e2\u05dc\u05d9\u05d9\u05ea \u05d2\u05d2 \u05e1\u05d5\u05dc\u05dd \u05de\u05ea\u05e7\u05e4\u05dc \u2014 \u05e0\u05e2\u05dc\u05dd \u05dc\u05d2\u05de\u05e8\u05d9 \u05db\u05e9\u05d4\u05d5\u05d0 \u05e1\u05d2\u05d5\u05e8 \u05de\u05d3\u05e8\u05d2\u05d5\u05ea \u05de\u05ea\u05e7\u05e4\u05dc\u05d5\u05ea \u05d2\u05dc\u05e8\u05d9\u05d4 \u2014 \u05d2\u05dd \u05dc\u05e4\u05ea\u05d7\u05d9\u05dd \u05e7\u05d8\u05e0\u05d9\u05dd \u05de\u05d1\u05e0\u05d4 \u05e4\u05dc\u05d3\u05d4 \u05de\u05d2\u05d5\u05dc\u05d5\u05d5\u05df \u2014 \u05e2\u05de\u05d9\u05d3 \u05dc\u05e9\u05e0\u05d9\u05dd \u05e8\u05d1\u05d5\u05ea \u05d1\u05d3\u05d5\u05e7 \u05dc\u05e2\u05d5\u05de\u05e1 \u05d2\u05d1\u05d5\u05d4 \u2014 \u05d1\u05d8\u05d9\u05d7\u05d5\u05ea \u05ea\u05d7\u05d9\u05dc\u05d4 \u05e9\u05dc\u05d1\u05d9\u05dd \u05e8\u05d7\u05d1\u05d9\u05dd, \u05e0\u05e2\u05d9\u05dc\u05d4 \u05d1\u05d8\u05d5\u05d7\u05d4 \u05d5\u05de\u05e0\u05d2\u05e0\u05d5\u05df \u05e7\u05e4\u05d9\u05e6\u05d9\u05dd \u05dc\u05e4\u05ea\u05d9\u05d7\u05d4 \u05e0\u05d5\u05d7\u05d4 \u2014 \u05db\u05dc \u05e1\u05d5\u05dc\u05dd \u05e2\u05d5\u05de\u05d3 \u05d1\u05ea\u05e7\u05e0\u05d9 \u05d4\u05d1\u05d8\u05d9\u05d7\u05d5\u05ea \u05d4\u05de\u05d7\u05de\u05d9\u05e8\u05d9\u05dd \u05d1\u05d9\u05d5\u05ea\u05e8. \u05e7\u05d1\u05dc\u05d5 \u05d4\u05e6\u05e2\u05ea \u05de\u05d7\u05d9\u05e8 \u05d3\u05d1\u05e8\u05d5 \u05d0\u05d9\u05ea\u05e0\u05d5 \u05d1\u05d5\u05d5\u05d0\u05d8\u05e1\u05d0\u05e4 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-389","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/raaforetz.co.il\/index.php?rest_route=\/wp\/v2\/pages\/389","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/raaforetz.co.il\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/raaforetz.co.il\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/raaforetz.co.il\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/raaforetz.co.il\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=389"}],"version-history":[{"count":7,"href":"https:\/\/raaforetz.co.il\/index.php?rest_route=\/wp\/v2\/pages\/389\/revisions"}],"predecessor-version":[{"id":406,"href":"https:\/\/raaforetz.co.il\/index.php?rest_route=\/wp\/v2\/pages\/389\/revisions\/406"}],"wp:attachment":[{"href":"https:\/\/raaforetz.co.il\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}