/* ──────────────────────────────────────────────────────────────
   אנגלית מדוברת שימושית — עמוד נחיתה
   בנוי על מערכת העיצוב של peoples.org.il (FUP, אותם טוקנים),
   כדי שההטמעה בערכת הנושא תהיה החלפת מעטפת בלבד.
   ────────────────────────────────────────────────────────────── */

@font-face{font-family:"FUP";src:url("../fonts/fup-light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"FUP";src:url("../fonts/fup-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"FUP";src:url("../fonts/fup-medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"FUP";src:url("../fonts/fup-semibold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"FUP";src:url("../fonts/fup-bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"FUP";src:url("../fonts/fup-extrabold.woff2") format("woff2");font-weight:800;font-display:swap}

:root{
  --brand:#b5322c; --ocean:#1c5d8c; --ocean-dark:#143f5f;
  --teal:#0e8aa6; --teal-dark:#0a647a;
  --amber:#e0892e; --gold:#f2b441;
  --ink:#15212c; --paper:#fff; --mist:#f3f6f9; --line:#e5eaf0; --muted:#586875;
  --r-lg:1.25rem; --r-xl:1.75rem;
  --font:"FUP","Assistant","Heebo",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;direction:rtl;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3{margin:0;font-weight:800;line-height:1.12;letter-spacing:-.01em}
p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:1.5rem}
.section{padding-block:clamp(48px,7vw,88px)}
.section--mist{background:var(--mist);border-block:1px solid var(--line)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:700;border-radius:999px;padding:.95rem 2.25rem;border:0;cursor:pointer;
  font-family:inherit;font-size:1.05rem;transition:background-color .2s,transform .2s;
}
.btn--primary{background:var(--ocean);color:#fff;box-shadow:0 10px 26px rgba(28,93,140,.3)}
.btn--primary:hover{background:var(--ocean-dark)}
.btn--gold{background:var(--gold);color:var(--ink);box-shadow:0 10px 26px rgba(242,180,65,.4)}
.btn--gold:hover{background:var(--amber);color:#fff}
.btn--block{width:100%}

.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:700;color:var(--ocean)}
.eyebrow::before{content:"";width:2rem;height:1px;background:rgba(28,93,140,.5)}

/* ── bar ──────────────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.75rem}
.bar__brand{display:flex;align-items:center;gap:.9rem;min-width:0}
.bar__logo{height:46px;width:auto}
.bar__div{width:1px;height:38px;background:var(--line)}
.bar__org{height:50px;width:auto}
@media (max-width:760px){.bar__div,.bar__org{display:none}}
@media (max-width:420px){.bar__logo{height:38px}}
.bar__right{display:flex;align-items:center;gap:1rem}
@media (max-width:640px){.bar .btn{padding:.7rem 1.25rem;font-size:.95rem}}

/* ── hero ─────────────────────────────────────────────────── */
/* התמונה נבנתה עם שטח נקי בצד שמאל ומוטיב המותג בפינה —
   לכן הטקסט יושב בחצי השמאלי, והדמויות נשארות גלויות מימין. */
.hero{position:relative;overflow:hidden;background:#fdfaf4;border-bottom:1px solid var(--line)}

.hero__media{position:absolute;inset:0;display:block}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center}
/* רשת ביטחון לקריאוּת, גם אם החיתוך זז במסכים קיצוניים */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to left,rgba(253,250,244,0) 38%,rgba(253,250,244,.8) 62%,rgba(253,250,244,.97) 80%);
}

.hero__grid{position:relative;z-index:1;padding-block:clamp(40px,7vw,96px)}
/* העמודה נעצרת לפני הדמויות שבתמונה — ~45% הראשונים של הקובץ נקיים */
.hero__copy{max-width:32rem;margin-inline-start:auto}

.hero h1{margin-top:1rem;font-size:clamp(1.8rem,3.1vw,2.5rem);line-height:1.14;text-wrap:balance}
.hero__sub{margin-top:1.1rem;font-size:clamp(1rem,1.5vw,1.2rem);color:var(--muted)}
.hero__tags{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.75rem}
.hero__cta{margin-top:2rem}

.tag{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1.1rem;border-radius:999px;background:rgba(255,255,255,.9);border:1px solid var(--line);font-size:.95rem;font-weight:700;backdrop-filter:blur(4px)}
.tag .ico{color:var(--ocean)}
.tag--gold{background:var(--gold);border-color:var(--gold);box-shadow:0 6px 18px rgba(242,180,65,.4)}
.tag--gold .ico{color:var(--ink)}

@media (max-width:860px){
  /* התמונה הופכת לבאנר מעל הטקסט, ממוקדת בדמויות */
  .hero{display:flex;flex-direction:column}
  .hero__media{position:static;width:100%}
  .hero__media img{aspect-ratio:16/10;height:auto;object-position:78% center}
  .hero::after{display:none}
  .hero__grid{padding-block:2rem 2.5rem}
  .hero__copy{max-width:none;margin-inline-start:0}
}

.section--form{background:var(--mist);border-bottom:1px solid var(--line)}
.form__wrap{max-width:46rem}

/* ── form ─────────────────────────────────────────────────── */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(1.5rem,3vw,2.25rem);box-shadow:0 24px 60px rgba(21,33,44,.12)}
.form__head{text-align:center;padding-bottom:1.25rem;margin-bottom:1.5rem;border-bottom:1px solid var(--line)}
.form__head h2{font-size:1.4rem}
.form__head p{margin-top:.5rem;font-size:.95rem;color:var(--muted)}
.form__grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:560px){.form__grid{grid-template-columns:1fr 1fr}.form__grid .is-wide{grid-column:1 / -1}}
.field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.field label{font-size:.875rem;font-weight:700;color:var(--muted)}
.field label span{color:var(--brand)}
.field input{
  font:inherit;font-size:1rem;padding:.8rem 1rem;border:1px solid var(--line);border-radius:.75rem;
  background:var(--mist);color:var(--ink);transition:border-color .2s,background-color .2s,box-shadow .2s;
}
.field input:focus{outline:0;background:#fff;border-color:var(--ocean);box-shadow:0 0 0 3px rgba(28,93,140,.12)}
.field input::placeholder{color:#9aa7b4}
.form__foot{margin-top:1.5rem}
.form__note{margin-top:.9rem;font-size:.8rem;color:var(--muted);text-align:center}
.form__status{margin-top:.9rem;font-size:.9rem;font-weight:600;text-align:center}
.form__status.is-bad{color:var(--brand)}
.form button[disabled]{opacity:.65;cursor:wait}

/* מלכודת ספאם — מוסתרת בלי display:none, שבוטים לא יזהו אותה */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* מצב הצלחה */
.form__done{text-align:center;padding:clamp(1rem,3vw,2rem) 0}
.form__done-mark{width:4rem;height:4rem;margin-inline:auto;display:grid;place-items:center;border-radius:999px;background:rgba(14,138,166,.12);color:var(--teal-dark)}
.form__done h2{margin-top:1.25rem;font-size:1.5rem}
.form__done p{margin-top:.75rem;color:var(--muted)}
.form__done .btn{margin-top:1.5rem}

/* ── facts ────────────────────────────────────────────────── */
.facts{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:860px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.35rem}
.fact .ico{color:var(--ocean)}
.fact__k{margin-top:.75rem;font-size:.78rem;font-weight:700;color:var(--muted)}
.fact__v{margin-top:.2rem;font-weight:700;line-height:1.35}

/* ── about ────────────────────────────────────────────────── */
.heading{max-width:44rem}
.heading h2{margin-top:.6rem;font-size:clamp(1.6rem,3.2vw,2.4rem)}
.heading p{margin-top:1.1rem;color:var(--muted);font-size:1.05rem}

.cards2{margin-top:2.5rem;display:grid;gap:1.5rem}
@media (min-width:860px){.cards2{grid-template-columns:1fr 1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(1.5rem,3vw,2rem)}
.card h3{font-size:1.3rem;line-height:1.25}
.card h3::after{content:"";display:block;width:3rem;height:3px;border-radius:2px;background:var(--gold);margin-top:.9rem}
.card p{margin-top:1rem;color:var(--muted);line-height:1.85}

/* ── goals ────────────────────────────────────────────────── */
.goals{background:var(--ink);color:#fff;border-radius:var(--r-xl);padding:clamp(1.75rem,4vw,3rem)}
.goals h2{color:#fff;font-size:clamp(1.5rem,3vw,2.1rem)}
.goals>p{margin-top:1rem;color:rgba(255,255,255,.72);max-width:44rem}
.ticks{margin:2rem 0 0;padding:0;list-style:none;display:grid;gap:1rem}
@media (min-width:760px){.ticks{grid-template-columns:1fr 1fr;gap:1rem 2.5rem}}
.ticks li{display:flex;align-items:flex-start;gap:.85rem;line-height:1.6}
.ticks .ico{flex:none;width:1.6rem;height:1.6rem;margin-top:.15rem;display:grid;place-items:center;border-radius:999px;background:rgba(14,138,166,.25);color:#7fd3e6}

/* ── dates ────────────────────────────────────────────────── */
.dates{margin-top:2.25rem;display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:620px){.dates{grid-template-columns:repeat(3,1fr)}}
@media (min-width:980px){.dates{grid-template-columns:repeat(5,1fr)}}
.date{display:flex;align-items:center;gap:.75rem;background:#fff;border:1px solid var(--line);border-radius:.85rem;padding:.85rem}
.date__n{flex:none;width:2rem;height:2rem;display:grid;place-items:center;border-radius:999px;background:rgba(28,93,140,.1);color:var(--ocean);font-weight:700;font-size:.85rem}
.date__d{font-weight:700;font-variant-numeric:tabular-nums}
.dates__note{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.75rem 2rem;color:var(--muted);font-weight:600}
.dates__note span{display:inline-flex;align-items:center;gap:.5rem}
.dates__note .ico{color:var(--ocean)}

/* ── cta ──────────────────────────────────────────────────── */
.cta{color:#fff;text-align:center;background:linear-gradient(120deg,var(--ocean-dark) 0%,var(--teal-dark) 100%)}
.cta h2{color:#fff;font-size:clamp(1.6rem,3.4vw,2.4rem);max-width:36rem;margin-inline:auto}
.cta p{margin-top:1.1rem;color:rgba(255,255,255,.8);max-width:34rem;margin-inline:auto}
.cta .btn{margin-top:2rem}

/* ── footer ───────────────────────────────────────────────── */
.foot{background:var(--ink);color:rgba(255,255,255,.65);padding-block:2.5rem;font-size:.9rem}
.foot__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.foot__brand{display:flex;align-items:center;gap:1rem}
.foot__logo{height:44px;width:auto}
/* הלוגו של ההסתדרות צבעוני על לבן — כרטיס בהיר שומר עליו קריא על רקע כהה */
.foot__org{display:grid;place-items:center;padding:.4rem .55rem;background:#fff;border-radius:.6rem}
.foot__org img{height:40px;width:auto}
.foot a:hover{color:#fff}
.foot__meta{display:flex;flex-direction:column;gap:.3rem;align-items:flex-start}
.foot__credit{color:rgba(255,255,255,.5);font-size:.82rem}
.foot__credit strong{font-weight:700;color:rgba(255,255,255,.72);unicode-bidi:isolate}
.foot__credit:hover strong{color:#fff}
@media (max-width:640px){.foot__in{flex-direction:column;align-items:flex-start}}

.ico{flex:none}

/* ── map ──────────────────────────────────────────────────── */
.map{margin-top:2.5rem;display:grid;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:0 18px 44px rgba(21,33,44,.08)}
@media (min-width:900px){.map{grid-template-columns:.85fr 1.15fr}}

.map__info{padding:clamp(1.5rem,3vw,2.25rem);display:flex;flex-direction:column;justify-content:center}
.map__info h3{margin-top:.75rem;font-size:1.6rem}
.map__addr{margin-top:.4rem;color:var(--muted);font-size:1.05rem}
.map__links{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.75rem}
.map__link{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1.15rem;border-radius:999px;background:var(--mist);border:1px solid var(--line);font-size:.9rem;font-weight:700;transition:border-color .2s,color .2s,background-color .2s}
.map__link:hover{background:#fff;border-color:var(--ocean);color:var(--ocean)}
.map__link .ico{color:var(--ocean)}

.map__frame{position:relative;min-height:280px;background:var(--mist)}
.map__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media (max-width:899px){
  .map__frame{min-height:0}
  .map__frame iframe{position:static;aspect-ratio:16/10;height:auto}
}