/* מוסדות המייש"ר בכל הפלטפורמות — /platforms
 *
 * A hand-written rebuild of the old site's Elementor page (post 2124). Every
 * number here was measured off the live page at 1440x1000; the comments name
 * where a value comes from when it is not obvious.
 *
 * The original is an Elementor *canvas* template: it carries its own header and
 * its own credit bar and never loads the site chrome, so this stylesheet owns
 * the whole document.
 *
 * Breakpoints, matching Elementor's: the desktop rules apply from 768px up
 * (the page declares no tablet layout at all), the phone layout below that.
 * The only thing that changes at 1024 is the nav, which collapses to a burger,
 * and background-attachment, which stops being `fixed`.
 */

/* ---------------------------------------------------------------- fonts --- */
/* "דנידין" at weight 900 resolves to almoni-black on the original too — the two
   families point at the same file — so one family covers the whole page. */
@font-face { font-family: almoni; font-style: normal; font-weight: 300; font-display: swap;
  src: url(/v2/assets/fonts/almoni-light-aaa-1.woff2) format('woff2'); }
@font-face { font-family: almoni; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/v2/assets/fonts/almoni-medium-aaa-1.woff2) format('woff2'); }
@font-face { font-family: almoni; font-style: normal; font-weight: 800; font-display: swap;
  src: url(/v2/assets/fonts/almoni-bold-aaa-1.woff2) format('woff2'); }
@font-face { font-family: almoni; font-style: normal; font-weight: 900; font-display: swap;
  src: url(/v2/assets/fonts/almoni-black-aaa-1.woff2) format('woff2'); }

/* --------------------------------------------------------------- tokens --- */
:root {
  --dark:  #3C0F11;   /* e-global-color-88b23a9 */
  --red:   #881811;   /* e-global-color-4f6bbc6 */
  --cream: #FFF5E7;   /* e-global-color-f5a0223 */
  --sand:  #F5D5A6;   /* e-global-color-df7973d */
  --gold:  #E9BF7B;   /* e-global-color-7a9c588 */
  --btn:   linear-gradient(120deg, #881811 0%, #3C0F11 100%);
  --btn-h: linear-gradient(120deg, #3C0F11 0%, #881811 100%);
}

/* ---------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }
/* The entrance animations slide blocks in from translate3d(-100%,0,0). In an RTL
   document that overflow is in the scrollable direction, so unclipped the page
   really does grow — it measured 1736px here — and the reader sees the layout
   shove sideways with the cream page ground showing through.
   The original clips on the root, but this header is a real `position: sticky`
   and an overflow on the root would stop it sticking, so the clip goes on the
   content instead: `clip` on the inline axis only, which keeps the blocks that
   deliberately hang out vertically (the Rav, the shopfronts, the robot). */
html { scroll-behavior: smooth; }
.pf { overflow-x: clip; overflow-y: visible; }
body {
  margin: 0;
  direction: rtl;
  background: var(--cream);
  font-family: almoni, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--dark);
  overflow-x: clip;
}
img { max-width: 100%; height: auto; border: 0; display: block; }
a { text-decoration: none; color: inherit; }
p { margin: 0 0 16px; }

/* Every heading on this page is an Elementor heading widget: one em of leading,
   almoni-black, dark. Individual blocks override size/weight/colour. */
.pf h1, .pf h2, .pf h3 {
  margin: 0;
  font-family: almoni, sans-serif;
  font-weight: 900;
  line-height: 1em;
  color: var(--dark);
}
.pf h3 { line-height: 1.2; }

/* The rule under every button on the page, from the site-wide Elementor kit. */
.pf-btn {
  display: inline-block;
  padding: 12px 48px;
  border: 0;
  border-radius: 8px;
  background-color: transparent;
  background-image: var(--btn);
  font-family: almoni, sans-serif;
  font-size: 20px;
  font-weight: 900;
  line-height: .8em;
  color: var(--sand);
  text-align: center;
  cursor: pointer;
  transition: background-image .3s, color .3s, transform .2s;
}
.pf-btn:hover, .pf-btn:focus { background-image: var(--btn-h); color: var(--sand); transform: translateY(-2px); }
/* the cream pill used for most calls to action */
.pf-btn--cream { background-image: linear-gradient(180deg, var(--cream) 0%, var(--cream) 100%); color: var(--dark); border-radius: 20px; }
.pf-btn--cream:hover, .pf-btn--cream:focus { background-image: var(--btn-h); color: var(--sand); }

/* A section's tinted overlay. Elementor paints it as a ::before that covers the
   padding box and sits under everything positioned after it in the DOM. */
.pf-sec { position: relative; }
.pf-sec > * { position: relative; z-index: 1; }
.pf-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
}

/* The hairline rule that sits under most headings (Elementor's divider). */
.pf-rule { display: flex; padding: 2px 0; }
.pf-rule > span { display: block; border-top: 1px solid currentColor; }

/* ================================================================= header = */
/* Fixed from the first paint; after 150px of scroll it gains a translucent
   ground and a blur, which is the original's `sticky_effects_offset`. */
.pf-hdr {
  position: sticky;
  top: 0;
  z-index: 99;
  margin-top: -90px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 65px;
  padding: 20px 100px;
  transition: background-color .3s;
}
.pf-hdr.is-stuck { background-color: #3C0F11cc; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.pf-hdr-logo { width: 7%; max-width: 7%; flex: 0 0 auto; }
.pf-hdr-logo img { width: 100%; }

.pf-nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; margin: 0; padding: 0; list-style: none; }
.pf-nav a {
  display: flex;
  align-items: center;
  padding: 13px 10px;
  font-size: 18px;
  font-weight: 500;
  line-height: 20px;
  color: var(--cream);
  transition: color .3s;
}
.pf-nav a:hover, .pf-nav a.is-current { color: var(--gold); }

/* The burger and its dropdown only exist from the tablet breakpoint down;
   above it the menu is the horizontal list. */
.pf-burger, .pf-drop { display: none; }
.pf-hdr-cta { flex: 0 0 auto; font-size: 1vw; font-weight: 500; }

/* ============================================================ hero + two = */
/* One Elementor container carries the hero, the pidyon block and the tikkun
   block, which is why the candle photograph runs behind all three. */
.pf-top {
  padding: 130px 100px 0;
  margin-top: -7px;
  background-image: linear-gradient(0deg, var(--dark) 0%, var(--red) 100%);
}
.pf-top::before {
  background-color: var(--dark);
  background-image: url(/uploads/2023/07/burning-candles.webp);
  background-position: bottom center;
  background-size: cover;
  opacity: .34;
}

.pf-hero { display: flex; flex-direction: column; gap: 20px; }
.pf-hero-title { padding-left: 0; padding-right: 0; }
.pf-hero h1 { padding-right: 150px; font-size: 120px; line-height: 100px; color: var(--cream); }
.pf-hero-sub { padding-right: 150px; padding-bottom: 10px; }
.pf-hero-sub h2 { font-size: 30px; font-weight: 600; color: var(--cream); }
.pf-hero-rule { padding-right: 150px; color: var(--cream); }
.pf-hero-rule .pf-rule > span { width: 42%; }
.pf-hero-lead { padding-right: 150px; }
.pf-hero-lead h2 { font-size: 30px; font-weight: 200; color: var(--cream); }

/* The Rav is pulled up out of his own box and over the heading above him. */
.pf-hero-rav { text-align: left; }
.pf-hero-rav .in { margin: -26% 0 0 8%; line-height: 0; }
.pf-hero-rav img { width: 29%; display: inline-block; }

/* ------------------------------------------------------------- the tiles - */
.pf-tiles {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  gap: 20px;
  min-height: 200px;
  margin-top: -127px;
  padding: 2%;
  border-radius: 50px;
  background: var(--cream);
}
.pf-tile { position: relative; display: block; width: 23%; border-radius: 20px; overflow: hidden; transition: transform .2s; }
.pf-tile:hover { transform: translateY(-3px); }
.pf-tile .bg { position: absolute; inset: 0; z-index: 1; background-size: cover; background-position: 50% 50%; transition: transform 1.5s; }
.pf-tile:hover .bg { transform: scale(1.1); }
.pf-tile .veil { position: absolute; inset: 0; z-index: 2; background-color: #3C0F11BA; transition: background-color 1.5s; }
.pf-tile:hover .veil { background-color: #3C0F1180; }
.pf-tile h2 {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  font-family: almoni, sans-serif;
  font-size: 2vw;
  font-weight: 600;
  color: #fff;
  text-align: center;
  transition: transform .3s;
}
.pf-tile:hover h2 { transform: scale(1.1); }

/* --------------------------------------------------- pidyon / tikkun rows */
.pf-rows { display: flex; flex-direction: column; gap: 20px; }
.pf-row { display: flex; flex-flow: row wrap; align-items: center; padding: 200px 0; }

.pf-col-wide  { display: flex; flex-direction: column; justify-content: center; gap: 20px; width: 60%; }
.pf-col-text  { display: flex; flex-direction: column; justify-content: center; gap: 20px; width: 40%; }

#pidion { padding-bottom: 200px; }
#pidion .pic { padding-right: 70px; }
#pidion .pic img { width: 100%; max-width: 100%; height: 64vh; object-fit: cover; object-position: center; opacity: .85; border-radius: 50px; }
.pf h2.pf-quote { width: 42%; font-size: 40px; font-weight: 900; color: #FFFEFD; }

.pf-pidyon-text { padding: 0 100px 200px 0; }
.pf-pidyon-text h2.big { font-size: 80px; line-height: 100px; color: var(--cream); }
.pf-pidyon-text .pf-rule { color: var(--cream); }
.pf-pidyon-text .pf-rule > span { width: 46%; }
.pf-pidyon-text .body { font-size: 30px; font-weight: 400; color: var(--cream); }
.pf-pidyon-text .body b { font-weight: 700; }

/* Elementor wraps these two buttons in a boxed container with its own padding;
   the buttons then shrink to share the line, which is why they wrap. */
.pf-btnrow { padding: 0 10px; }
.pf-btnrow .in { display: flex; flex-direction: row; gap: 20px; padding: 10px 0; max-width: min(100%, 1140px); }
.pf-bw { min-width: 0; }
.pf-bw .pf-btn { display: block; width: 100%; }
.pf-btnrow .pf-btn { font-size: 20px; font-weight: 800; }

#tikoon { overflow: hidden; }
#tikoon .kicker { font-size: 30px; font-weight: 400; color: var(--cream); }
#tikoon h2.big { font-size: 80px; color: var(--cream); }
#tikoon .pf-rule { color: var(--cream); }
#tikoon .pf-rule > span { width: 50%; }
#tikoon .body { font-size: 30px; font-weight: 400; color: var(--cream); }
#tikoon .body b { font-weight: 700; }
.pf-btnrow2 { display: flex; flex-direction: row; gap: 20px; }
.pf-btnrow2 .pf-btn { font-size: 20px; font-weight: 800; }

.pf-col-candles { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; width: 60%; align-self: center; }
.pf-col-candles .pic { width: 100%; padding-left: 50px; }
.pf-col-candles .pic img { width: 100%; max-width: 100%; height: 64vh; object-fit: cover; object-position: center; opacity: .61; border-radius: 50px; }

/* ================================================================ אתרים = */
#website {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  min-height: 100vh;
  padding: 100px 150px;
}
.pf-head { display: flex; flex-direction: column; justify-content: center; gap: 20px; width: 100%; padding: 10px; }
#website .pf-head { margin-bottom: 150px; }
#website .pf-head > h2:first-child { font-size: 80px; text-align: center; }
#website .pf-head .pf-rule { color: var(--dark); text-align: center; }
#website .pf-head .pf-rule > span { width: 50%; margin: 0 auto; }
#website .pf-head .lead { padding: 0 400px; text-align: center; font-size: 30px; font-weight: 400; }
#website .pf-head .lead b { font-weight: 700; }

.pf-site {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 48%;
  padding-bottom: 50px;
  border-radius: 100px;
  background: var(--sand);
  transition: transform .2s;
}
.pf-site:hover { transform: translateY(-3px); }
.pf-site--a { margin-left: 2%; }
.pf-site--b { margin-right: 2%; }
.pf-site .shot { text-align: center; }
.pf-site .shot .in { margin-top: -200px; line-height: 0; }
.pf-site .shot img { width: 56%; display: inline-block; }
.pf-site h2 { font-size: 30px; text-align: center; }
.pf-site .go { font-family: almoni, sans-serif; font-size: 30px; font-weight: 500; line-height: 1em; text-align: center; color: var(--dark); }

/* ================================================================ ערוצים = */
#reshet {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  min-height: 100vh;
  padding: 100px;
  background-image: url(/uploads/2023/07/abstract-background-with-low-poly-design.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
#reshet::before { background-color: #000; opacity: .51; }
#reshet .pf-head { margin-bottom: 100px; }
#reshet .pf-head > h2:first-child { font-size: 80px; line-height: 100px; color: var(--cream); text-align: center; }
#reshet .pf-head .pf-rule { color: var(--cream); }
#reshet .pf-head .pf-rule > span { width: 50%; margin: 0 auto; }
#reshet .pf-head .lead { padding: 0 100px; text-align: center; font-size: 30px; font-weight: 400; color: var(--cream); }
#reshet .pf-head .lead b { font-weight: 700; }

.pf-chan {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: flex-start;
  width: 33.33%;
  padding: 0 5%;
}
.pf-chan--ruled { border-left: 1px solid var(--cream); }
.pf-chan h2.name { padding: 0 100px; font-family: almoni, sans-serif; font-size: 30px; font-weight: 900; color: var(--cream); text-align: center; }
.pf-chan:last-child h2.name { font-weight: 700; }
/* The link shrink-wraps the picture, so a square logo gets a 210px box and a
   wide one gets the full column — which is what decides the 68% inside it. */
.pf-chan .logo { display: flex; justify-content: center; padding: 19px; border-radius: 50px; background: var(--cream); }
.pf-chan .logo a { display: block; width: auto; transform-style: preserve-3d; }
.pf-chan .logo img { width: 68%; height: 210px; object-fit: contain; object-position: center; margin: 0 auto; }
.pf-chan .note { font-family: almoni, sans-serif; font-size: 20px; font-weight: 400; color: var(--cream); text-align: center; }
.pf-chan .note b { font-weight: 700; }
.pf-chan .pf-rule { color: var(--cream); }
.pf-chan .pf-rule > span { width: 50%; margin: 0 auto; }
.pf-chan .spacer { height: 69px; }
.pf-chan .spacer--sm { height: 18px; }
.pf-chan .act { text-align: center; }
.pf-chan .act .pf-btn { font-size: 30px; font-weight: 500; }
.pf-chan .act .pf-btn--ghost { color: var(--cream); }
.pf-chan .act .pf-btn--ghost:hover { color: var(--cream); }

/* ============================================================== שאלות = */
#question {
  padding: 0 100px;
  background-color: var(--dark);
}
#question::before { background-color: #000; opacity: .51; }
#question .inner {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  min-height: 100vh;
  max-width: 1383px;
  margin: 0 auto;
  padding: 150px 0;
}
#question .pf-head > h2:first-child { font-size: 80px; color: var(--cream); text-align: center; }
#question .pf-head .pf-rule { color: var(--cream); }
#question .pf-head .pf-rule > span { width: 39%; margin: 0 auto; }
#question .pf-head .lead { padding: 0 100px; text-align: center; font-size: 30px; font-weight: 400; color: var(--cream); }
#question .pf-head .lead b { font-weight: 700; }

.pf-ask { display: flex; flex-direction: column; gap: 20px; width: 50%; padding-left: 100px; border-left: 1px solid var(--cream); }
.pf-ask .kicker { padding: 0 100px; font-family: almoni, sans-serif; font-size: 20px; font-weight: 400; color: var(--cream); text-align: center; }
.pf-ask h2 { padding: 0 100px; font-size: 60px; color: var(--cream); text-align: center; }
.pf-ways .in { display: flex; flex-direction: row; justify-content: space-evenly; gap: 20px; max-width: min(100%, 1140px); }
/* The four boxes shrink when the column is narrower than 4x100 + gaps, and
   the round icons keep their size and overlap — as they do on the original. */
.pf-way { display: flex; flex-direction: column; gap: 15px; width: 100px; min-width: 0; }
.pf-way .ico {
  display: flex; align-items: center; justify-content: center;
  width: 100px; height: 100px; padding: 25px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--dark);
  font-size: 50px;
  transition: background-color .3s, transform .2s;
}
.pf-way:hover .ico { background: var(--sand); transform: translateY(-2px); }
.pf-way h3 { margin: 8px 0 16px; font-family: almoni, sans-serif; font-size: 30px; font-weight: 400; color: var(--cream); text-align: center; }

.pf-form-col { display: flex; flex-direction: column; gap: 20px; width: 50%; padding-right: 100px; }
.pf-form-col h2 { padding: 0 100px; font-size: 30px; color: var(--cream); text-align: center; }

/* The form grid is Elementor's: half-width fields on one row, 30px gutters
   pulled back out of the wrapper. */
.pf-form .fields { display: flex; flex-wrap: wrap; margin: 0 -15px -30px; }
.pf-form .f { display: flex; align-items: center; padding: 0 15px; margin-bottom: 30px; }
.pf-form .f-50 { width: 50%; }
.pf-form .f-100 { width: 100%; }
.pf-form input, .pf-form textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: 5px;
  background: var(--sand);
  font-family: almoni, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--dark);
  direction: rtl;
}
.pf-form textarea { padding: 5px 14px; resize: vertical; }
.pf-form input::placeholder, .pf-form textarea::placeholder { color: #7a5c3a; }
/* Cream on cream: this is the original's own colour for the submit label, which
   only reads because the kit paints the dark gradient over the cream ground. */
.pf-form button { width: 100%; min-height: 40px; padding: 12px 48px; border-radius: 5px; background-color: var(--cream); color: #FBF7E2; font-size: 20px; font-weight: 900; line-height: 16px; }
.pf-form .say { margin-top: 10px; font-size: 18px; color: var(--cream); }
.pf-form .say:empty { display: none; }

/* =============================================================== עלונים = */
#folder {
  display: flex;
  flex-flow: row wrap;
  min-height: 100vh;
  padding: 100px;
  background-color: var(--dark);
  background-image: url(/uploads/2023/08/%D7%A8%D7%A7%D7%A2-%D7%A9%D7%91%D7%AA.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
#folder::before { background-color: #000; opacity: 0; }
.pf-folder { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; width: 100%; }
.pf-folder h2 { width: fit-content; max-width: 100%; font-size: 80px; text-align: center; }
.pf-folder .pf-rule { width: 100%; color: var(--dark); justify-content: flex-start; }
.pf-folder .pf-rule > span { width: 62%; }
.pf-folder .body { width: 100%; padding-left: 100px; font-size: 30px; font-weight: 400; text-align: start; }
.pf-folder .act .pf-btn { background-color: var(--dark); border-radius: 20px; font-size: 20px; font-weight: 800; color: var(--cream); }

/* ============================================================= פרנס יום = */
#parnas {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  min-height: 100vh;
  padding: 100px;
  background-color: var(--dark);
  background-image: url(/uploads/2023/07/%D7%A8%D7%A9%D7%AA-%D7%94%D7%9B%D7%95%D7%9C%D7%9C%D7%99%D7%9D-1.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
#parnas::before { background-color: #000; opacity: .58; }
.pf-parnas { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; width: 100%; }
.pf-parnas h2 { width: fit-content; max-width: 100%; font-size: 80px; color: var(--cream); text-align: center; }
.pf-parnas .pf-rule { width: 100%; color: var(--cream); }
.pf-parnas .pf-rule > span { width: 62%; margin: 0 auto; }
.pf-parnas .body { width: 100%; font-size: 30px; font-weight: 400; color: var(--cream); text-align: center; }
.pf-parnas .body b { font-weight: 700; }
.pf-parnas .pf-btn { font-size: 20px; font-weight: 800; border-radius: 20px; }

/* ================================================================== בוט = */
.pf-botsec { padding: 0 100px; background-color: var(--dark); }
.pf-botsec .inner { display: flex; flex-direction: row; min-height: 57vh; max-width: 1417px; margin: 0 auto; padding: 150px 0 100px; }
.pf-bot {
  display: flex; flex-direction: column; gap: 20px;
  width: 100%; min-height: 282px;
  padding: 20px 50px 20px 20px;
  border-radius: 50px;
  background: var(--sand);
  transition: transform .2s;
}
.pf-bot:hover { transform: translateY(-2px); }
.pf-bot h2 { font-size: 80px; }
.pf-bot .body { font-size: 30px; font-weight: 500; }
.pf-bot .body b { font-weight: 700; }
.pf-bot .pic { text-align: left; }
.pf-bot .pic .in { margin: -473px 0 0 50px; line-height: 0; }
.pf-bot .pic img { width: 31%; display: inline-block; }

/* ============================================================ יצירת קשר = */
#contant { background-color: var(--dark); }
#contant .inner { display: flex; flex-direction: row; max-width: 850px; margin: 0 auto; }
.pf-card { display: flex; flex-direction: column; gap: 20px; width: 50%; padding: 0 20px 0 50px; }
.pf-card .ico-wrap { position: relative; z-index: 2; height: 113px; text-align: center; }
.pf-card .ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 106px; height: 106px; padding: 25px;
  border: 3px solid var(--sand);
  border-radius: 50%;
  background: var(--dark);
  color: var(--sand);
  font-size: 50px;
  transition: transform .2s, color .3s, border-color .3s;
}
.pf-card:hover .ico { transform: translateY(-2px); }
.pf-card .body-wrap { display: flow-root; padding-bottom: 73px; }
.pf-card .clip { margin-top: -73px; border-radius: 50px; overflow: hidden; }
.pf-card .body-wrap .body { margin-bottom: -73px; }
.pf-card .body {
  padding: 60px 0 100px;
  background: var(--sand);
  text-align: center;
}
.pf-card .body h2 { margin-bottom: 15px; font-size: 30px; font-weight: 900; color: var(--dark); }
.pf-card .body p { margin: 0; font-family: almoni, sans-serif; font-size: 1em; font-weight: 400; color: var(--dark); }

/* ============================================= mobile action bar + credit = */
.pf-mbar { display: none; }

.pf-credit { padding-left: 0; padding-right: 72px; background: #000; }
.pf-credit .inner { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 20px; min-height: 24px; max-width: min(100%, 1140px); margin: 0 auto; }
.pf-credit h2 { flex: 0 0 auto; font-family: almoni, sans-serif; font-size: 20px; font-weight: 600; color: var(--cream); }
.pf-credit .logo { width: 300px; line-height: 0; }
.pf-credit .logo img { width: 67%; margin-left: auto; }

/* ============================================================ the icons  = */
.pf-ico { width: 1em; height: 1em; display: block; fill: currentColor; }
/* the email "way" is a button because it opens a dialog rather than navigating */
.pf-way { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; text-align: inherit; }

/* ========================================================== animations   = */
/* animate.css keyframes, the ones Elementor ships, played once when the block
   first scrolls into view. Without JS nothing is ever hidden. */
@keyframes pfFadeIn      { from { opacity: 0 } to { opacity: 1 } }
@keyframes pfFadeInDown  { from { opacity: 0; transform: translate3d(0,-100%,0) } to { opacity: 1; transform: none } }
@keyframes pfFadeInLeft  { from { opacity: 0; transform: translate3d(-100%,0,0) } to { opacity: 1; transform: none } }
@keyframes pfFadeInRight { from { opacity: 0; transform: translate3d(100%,0,0) } to { opacity: 1; transform: none } }
html.js [data-anim]:not(.ran) { visibility: hidden; }
[data-anim].ran { animation-duration: 1.25s; animation-fill-mode: both; }
[data-anim="fadeIn"].ran      { animation-name: pfFadeIn }
[data-anim="fadeInDown"].ran  { animation-name: pfFadeInDown }
[data-anim="fadeInLeft"].ran  { animation-name: pfFadeInLeft }
[data-anim="fadeInRight"].ran { animation-name: pfFadeInRight }
[data-anim].slow.ran { animation-duration: 2s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-anim] { visibility: visible !important; }
  [data-anim].ran { animation: none !important; }
}

/* ========================================================= parallax bands = */
/* The original pins these two backgrounds to the viewport on real desktops
   only — below 1025 a fixed background is a scrolling-performance trap and
   iOS ignores it outright. */
@media (min-width: 1025px) {
  #folder, #parnas { background-attachment: fixed; }
}

/* ============================================================ burger nav = */
/* Elementor's menu is set to "dropdown on tablet", i.e. 1024 and down. */
@media (max-width: 1024px) {
  .pf-nav > ul { display: none; }
  .pf-burger {
    display: block;
    margin: 0 auto;
    padding: 5.5px;
    border: 0;
    border-radius: 3px;
    background: var(--cream);
    color: var(--dark);
    line-height: 0;
    cursor: pointer;
  }
  .pf-burger svg { width: 22px; height: 22px; fill: currentColor; }
  .pf-nav { position: static; }
  .pf-drop {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 19px;
    background: var(--cream);
    display: none;
  }
  .pf-hdr.is-open .pf-drop { display: block; }
  .pf-drop ul { margin: 0; padding: 0; list-style: none; }
  .pf-drop a {
    display: block;
    padding: 10px 20px;
    font-size: 2vw;
    font-weight: 500;
    color: var(--dark);
    transition: background-color .2s;
  }
  .pf-drop a:hover { background: var(--gold); }
}

/* ================================================================= phone = */
@media (max-width: 767px) {
  /* the kit sets every heading to 0.8em of leading below 768 */
  .pf h2 { line-height: .8em; }

  .pf-hdr { min-height: 60px; padding: 20px; flex-wrap: nowrap; margin-top: -24px; }
  .pf-hdr-logo { width: 73px; max-width: 73px; }
  .pf-hdr-cta { display: none; }
  .pf-burger { border-radius: 5px; }
  .pf-burger svg { width: 19px; height: 19px; }
  .pf-drop a { font-size: 20px; }

  .pf-top { padding: 100px 20px; margin-top: -69px; }
  .pf-top::before { background-position: center left; }
  .pf-hero h1 { padding-right: 0; font-size: 40px; line-height: 1.2em; }
  .pf-hero-sub { padding: 0 0 0 22px; }
  .pf-hero-sub h2 { font-size: 20px; }
  .pf-hero-rule { padding-right: 0; }
  .pf-hero-rule .pf-rule { text-align: right; }
  .pf-hero-rule .pf-rule > span { width: 77%; margin: 0 0 0 auto; }
  .pf-hero-lead { padding: 0 0 0 133px; }
  .pf-hero-lead h2 { font-size: 20px; }
  .pf-hero-rav .in { margin: -172px 0 0 0; }
  .pf-hero-rav img { width: 49%; }

  .pf-tiles { gap: 4%; margin-top: -50px; padding: 3%; border-radius: 20px; }
  .pf-tile { width: 48%; margin-bottom: 1.92%; }
  .pf-tile:nth-last-child(-n+2) { margin-bottom: 0; }
  .pf-tile h2 { min-height: 60px; font-size: 20px; }

  .pf-row { padding: 0; }
  .pf-col-wide, .pf-col-text, .pf-col-candles { width: 100%; }
  #pidion { margin-top: 50px; padding: 0; }
  #pidion .pic { padding-right: 0; }
  #pidion .pic img, .pf-col-candles .pic img { height: 32vh; }
  .pf h2.pf-quote { width: 100%; font-size: 28px; text-align: center; }
  .pf-pidyon-text { margin-bottom: 50px; padding: 0; }
  .pf-pidyon-text h2.big { font-size: 40px; line-height: 1.2em; text-align: center; }
  .pf-pidyon-text .pf-rule { justify-content: center; }
  .pf-pidyon-text .pf-rule > span { margin: 0 auto; }
  .pf-pidyon-text .body { font-size: 20px; text-align: center; }
  #tikoon { order: 2; align-items: center; }
  #tikoon .kicker { margin: 13px; font-size: 20px; text-align: center; }
  #tikoon h2.big { font-size: 40px; line-height: 1.2em; text-align: center; }
  #tikoon .pf-rule { justify-content: center; }
  #tikoon .pf-rule > span { margin: 0 auto; }
  #tikoon .body { font-size: 19px; text-align: center; }
  #tikoon .body.b2 { font-size: 20px; }
  .pf-btnrow2 { justify-content: center; align-self: center; flex-wrap: wrap; }
  .pf-col-candles { order: 1; align-items: center; }
  .pf-col-candles .pic { padding-left: 0; text-align: center; }

  #website { padding: 50px 20px; }
  #website .pf-head > h2:first-child { font-size: 40px; }
  #website .pf-head .lead { margin: 0; padding: 0; font-size: 20px; }
  .pf-btnrow .in { flex-wrap: wrap; }
  .pf-site { width: 100%; border-radius: 50px; padding: 0 20px 50px; }
  .pf-site--b { margin: 38% 0 0 0; }
  .pf-site .shot .in { margin-top: -100px; }
  .pf-site .shot img { width: 79%; }
  .pf-site .go { font-size: 20px; line-height: .8em; }

  #reshet { padding: 0; }
  #reshet .pf-head { margin-bottom: 50px; padding: 50px 20px 20px; }
  #reshet .pf-head > h2:first-child { font-size: 40px; line-height: 1.2em; }
  #reshet .pf-head .lead { padding: 0; font-size: 20px; }
  .pf-chan { width: 100%; padding: 20px; }
  .pf-chan h2.name { padding: 0; }
  .pf-chan--neon { position: relative; }
  .pf-chan--neon::before {
    content: ""; position: absolute; inset: 0; z-index: 0; opacity: .47;
    background-image: url(/uploads/2023/07/abstract-gradient-neon-lights-e1692882323193.webp);
    background-position: center; background-size: cover; background-repeat: no-repeat;
  }
  .pf-chan--neon > * { position: relative; z-index: 1; }
  .pf-chan .spacer, .pf-chan .spacer--sm { height: 0; }

  #question { padding: 0 20px; }
  #question .inner { padding: 20px 0; }
  #question .pf-head > h2:first-child { font-size: 40px; }
  #question .pf-head .lead { padding: 0; font-size: 20px; }
  .pf-ask { width: 100%; margin-top: 20px; padding: 0; border: 0; }
  .pf-ask .kicker, .pf-ask h2 { padding: 0; }
  .pf-ask h2:not(.kicker) { margin-top: -22px; font-size: 30px; }
  .pf-way .ico { width: 56px; height: 56px; padding: 14px; font-size: 28px; }
  .pf-way { width: auto; min-width: 56px; }
  .pf-way h3 { font-size: 20px; }
  .pf-form .f-50 { width: 100%; }
  .pf-form-col { width: 100%; margin: 50px 0; padding: 0; }
  .pf-form-col h2 { padding: 0; font-size: 40px; }

  #folder { padding: 0; }
  .pf-folder { justify-content: flex-start; align-items: center; padding: 50px 20px 20px; }
  .pf-folder h2 { font-size: 40px; }
  .pf-folder .pf-rule { justify-content: center; }
  .pf-folder .pf-rule > span { margin: 0 auto; }
  .pf-folder .body { padding-left: 0; font-size: 20px; text-align: center; }
  .pf-folder .act { align-self: center; }

  #parnas { padding: 0; }
  .pf-parnas { padding: 20px; }
  .pf-parnas h2 { font-size: 40px; }
  .pf-parnas .body { font-size: 20px; }

  .pf-botsec { padding: 0 20px; }
  .pf-botsec .inner { padding: 100px 0 20px; }
  .pf-bot { padding: 20px; }
  .pf-bot h2 { order: 2; font-size: 40px; text-align: center; align-self: center; }
  .pf-bot .body { order: 3; font-size: 20px; text-align: center; }
  .pf-bot .pic { order: 1; text-align: center; }
  .pf-bot .pic .in { margin: -82px 0 0 0; }
  .pf-bot .pic img { width: 47%; }

  #contant .inner { flex-wrap: wrap; }
  .pf-card { width: 100%; padding: 20px; }
  .pf-card + .pf-card { margin: -50px 0; }

  /* The bar the original pins to the bottom of a phone screen. */
  .pf-mbar {
    position: sticky; bottom: 0; z-index: 98;
    display: flex; flex-direction: row; align-items: center;
    padding: 10px 0 5px;
    background: var(--sand);
  }
  .pf-mbar > * { width: 33%; display: flex; align-items: center; }
  .pf-mbar .c1 { justify-content: flex-start; padding-right: 20px; }
  .pf-mbar .c2 { justify-content: center; padding: 0 20px; }
  .pf-mbar .c3 { justify-content: flex-end; padding-left: 20px; }
  .pf-mbar .wa { margin-top: 4px; height: 27px; color: #000; font-size: 20px; }
  .pf-mbar .c2 a { width: 100%; }
  .pf-mbar .c2 img { width: 27%; margin: 0 auto; }
  .pf-mbar .c3 img { width: 20%; margin-inline-start: auto; }

  .pf-credit { padding-right: 0; }
  .pf-credit .inner { flex-wrap: nowrap; max-width: 100%; }
  .pf-credit h2 { width: 153px; max-width: 153px; font-size: 16px; text-align: left; }
  .pf-credit .logo { padding-left: 10px; }
  .pf-credit .logo img { width: 100%; }
}