/* ==========================================================================
   אומץ לחינוך | הרבעון הרביעי
   Brand tokens measured from q4israel.org.il.

   DESKTOP AND MOBILE ARE TWO EXPLICIT RESPONSIVE STATES.
   Every spacing value is a token in :root (Desktop) and is deliberately
   re-declared, smaller, inside the Mobile branch at the bottom of this file.
   That keeps "Mobile is tighter than Desktop" systematic and auditable
   instead of a per-section guess — and copy stays in ONE place in the HTML.
   ========================================================================== */

@font-face{font-family:"SimplerPro";src:url("../assets/fonts/simplerpro/SimplerPro_HLAR-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"SimplerPro";src:url("../assets/fonts/simplerpro/SimplerPro_HLAR-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"SimplerPro";src:url("../assets/fonts/simplerpro/SimplerPro_HLAR-Black.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Caravan";src:url("../assets/fonts/caravan/caravan-120-aaa.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  /* Brand */
  --blue:#042f5f;
  --blue-2:#0b2750;
  --blue-3:#143a6d;
  --cyan:#17c2eb;
  --orange:#f04e2d;
  --bg:#f2f2f8;
  --white:#fff;
  --body:#5b7899;
  --soft:#c9dcf0;
  --softer:#9fd8ec;

  --font:"SimplerPro","Arial Hebrew",system-ui,sans-serif;
  --display:"Caravan","SimplerPro",system-ui,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.3s;
  --radius:16px;
  --pill:999px;
  --shadow:0 14px 34px rgba(15,45,92,.10);
  --shadow-lg:0 22px 50px rgba(2,24,48,.32);

  /* ── DESKTOP SPACING SCALE ─────────────────────────── */
  --wrap:1100px;        /* narrower: the page felt stretched at 1180 */
  --wrap-pad:56px;      /* generous outer gutter so content sits framed */
  --sec-y:92px;          /* section top/bottom padding */
  --gap-title:26px;      /* heading → next element */
  --gap-lede:34px;       /* lede → next block */
  --gap-cards:22px;      /* between cards */
  --gap-block:40px;      /* between major blocks inside a section */
  --hero-y:84px;
  --acc-y:22px;          /* accordion trigger padding */
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{
  font-family:var(--font);
  background:var(--blue-2);
  color:var(--body);
  direction:rtl;
  font-size:18px;
  line-height:1.7;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input{font-family:inherit}
h1,h2,h3,p,ul,ol{margin:0}

/* Anything hidden takes ZERO space. No reserved height anywhere. */
.u-hidden{display:none!important}

/* Hidden from sight but still submitted / readable by assistive tech.
   Used for the form honeypot. Deliberately NOT `left:-9999px`: on an RTL
   page that offset extends the document and creates horizontal scroll. */
.u-visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}


/* ───────────────────────── layout ───────────────────────── */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--wrap-pad)}
.wrap--narrow{max-width:860px}   /* readable prose measure */
.wrap--mid{max-width:960px}

/* Tablet gutter tier. Sits between the Desktop 56px and the Mobile 22px so the
   container shrinks in steps instead of jumping straight to phone padding. */
@media (max-width:1024px){
  :root{--wrap-pad:32px}
}

.sec{padding:var(--sec-y) 0}
.sec--dark{background:linear-gradient(180deg,var(--blue-2),var(--blue-3))}
.sec--light{background:var(--bg);color:var(--blue)}

.sec__title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(28px,3.8vw,46px);
  line-height:1.05;
  color:var(--blue);
  margin-bottom:var(--gap-title);
}
.sec__title--on-dark{color:var(--white)}
.sec__title--tight{max-width:24ch}
.sec__lede{
  font-size:clamp(17px,2vw,20px);
  line-height:1.65;
  color:var(--body);
  margin-bottom:var(--gap-lede);
  max-width:62ch;
}
.sec__lede--on-dark{color:var(--soft)}

.lead-statement{
  font-size:clamp(20px,2.5vw,28px);
  line-height:1.45;
  font-weight:700;
  color:var(--white);
  margin-bottom:var(--gap-lede);
}
.hl{color:var(--cyan)}

/* ───────────────────────── buttons ───────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid transparent;border-radius:var(--pill);
  font-weight:900;font-size:17px;padding:15px 28px;cursor:pointer;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             filter var(--dur) var(--ease),background var(--dur) var(--ease);
  text-align:center;
}
.btn--primary{background:var(--cyan);color:var(--blue);border-color:var(--blue)}
.btn--primary:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 12px 28px rgba(23,194,235,.32)}
.btn--primary:active{transform:translateY(0)}
.btn--lg{font-size:18px;padding:17px 32px}
.btn--sm{font-size:15px;padding:11px 20px}
.btn--block{width:100%}
.arrow{transition:transform var(--dur) var(--ease)}
.btn:hover .arrow{transform:translateX(-5px)}   /* RTL: leads left */

/* ───────────────────────── header ───────────────────────── */
/* Only two elements: the logo and the campaign link. */
.hdr{
  position:sticky;top:0;z-index:50;
  background:rgba(4,47,95,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.hdr.is-scrolled{background:rgba(4,47,95,.95);box-shadow:0 6px 24px rgba(2,24,48,.3)}
.hdr__inner{
  max-width:var(--wrap);margin:0 auto;padding:12px var(--wrap-pad);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.hdr__brand img{height:34px;width:auto}
.hdr__link{
  color:var(--cyan);font-weight:700;font-size:15px;
  display:inline-flex;align-items:center;gap:8px;
  transition:opacity var(--dur) var(--ease);
}
.hdr__link:hover{opacity:.72}

/* ───────────────────────── hero ───────────────────────── */
.hero{position:relative;background:var(--blue);color:var(--white);overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 85% 0%,rgba(23,194,235,.16),transparent 60%);
}
/* No bottom padding: there were ~102px of empty blue between the hero photo and
   the white section below it. The photo's lower edge is a mask fade rather than
   a hard line, so with the padding gone it dissolves exactly where the white
   begins instead of ending early and leaving a dead band. */
.hero__inner{position:relative;z-index:1;padding-top:var(--hero-y);padding-bottom:0;display:flex;gap:40px;align-items:center}
/* Pins the photo's box to the section's bottom edge; the copy stays centred. */
.hero__media{align-self:flex-end}
/* Explicit basis on both children: with `flex:1 1 auto` the copy column ate
   the row and squeezed the media slot down to ~25%. */
/* 55% + 41% + the 40px gap ≈ 100%. Overshooting made flex shrink the copy
   column below the intended 55–60%. */
/* hero__inner has no bottom padding (see above), and on Desktop this column
   is taller than the media slot, so it — not the photo — sets the row's
   height. Without its own padding the CTA button lands flush against the
   section's bottom edge with zero breathing room. */
.hero__body{flex:0 1 55%;max-width:55%;min-width:0;padding-bottom:48px}
/* Reusable hero media slot — currently a photo, later the video. Sized by the
   slot, not by the asset, so swapping the contents needs no layout change. */
/* No rounded card, no visible edge: the photo dissolves into the blue.
   A radial mask fades every side to transparent, and `screen` blending lets
   the section colour come through the darker parts of the frame so the image
   reads as part of the background rather than a pasted rectangle. */
/* Mask only — no blend mode. `screen` was tried and would lighten this
   already-bright frame towards white over the dark blue, destroying the photo.
   The fade alone removes the edges and keeps the original colours. */
.hero__media{
  flex:0 0 41%;max-width:41%;margin:0;
  position:relative;
}
.hero__media img,.hero__media video{
  display:block;width:100%;height:400px;
  object-fit:cover;object-position:center 62%;
  -webkit-mask-image:radial-gradient(ellipse 72% 66% at 50% 52%,#000 42%,rgba(0,0,0,.55) 68%,transparent 88%);
          mask-image:radial-gradient(ellipse 72% 66% at 50% 52%,#000 42%,rgba(0,0,0,.55) 68%,transparent 88%);
}

.hero__address{font-weight:700;font-size:clamp(17px,2vw,20px);color:var(--softer);margin-bottom:14px}
.hero__title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(34px,5.4vw,68px);line-height:.95;
  color:var(--white);margin-bottom:24px;
}
.hero__title .r{display:inline-block}
.hero__mark{background:var(--cyan);color:var(--blue);padding:2px 14px 5px;border-radius:8px;margin-bottom:6px}
.hero__lede{font-size:clamp(16px,1.9vw,19px);line-height:1.65;color:#e2edf8;max-width:52ch;margin-bottom:12px}
.hero__sub{font-size:clamp(16px,1.9vw,19px);font-weight:700;line-height:1.55;color:var(--softer);max-width:52ch;margin-bottom:28px}


.statement{
  background:var(--white);border-radius:18px;padding:34px;
  box-shadow:0 18px 40px rgba(0,0,0,.18);margin-bottom:24px;
}
.statement p{font-weight:900;font-size:clamp(21px,3vw,32px);line-height:1.3;color:var(--blue)}
.statement b{color:var(--orange)}

/* ───────────────────────── accordions ───────────────────────── */
/* max-height is measured in JS into --panel-h. `0fr` grid tracks were tried
   first but resolve to max-content in an auto-height container, so they never
   collapse — which left dead space under every closed accordion. */
.acc{border-top:1px solid rgba(255,255,255,.22)}
.acc--card{border-top:0}
.sec--light .acc{border-top-color:rgba(4,47,95,.18)}

.acc__trigger{
  width:100%;background:none;border:0;padding:var(--acc-y) 0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  cursor:pointer;font-weight:900;font-size:18px;color:var(--white);
  text-align:right;transition:color var(--dur) var(--ease);
}
.sec--light .acc__trigger{color:var(--blue)}
.acc__trigger:hover{color:var(--cyan)}
.acc__icon{
  display:inline-block;font-size:26px;line-height:1;color:var(--cyan);
  transition:transform var(--dur) var(--ease);
}
[aria-expanded="true"] .acc__icon{transform:rotate(45deg)}

/* max-height is written directly by JS (panel.style.maxHeight). A previous
   attempt used max-height:var(--panel-h) here, but Chrome cannot interpolate a
   var() substitution inside a transitioning property, so it held the start
   value and the panel never opened. Keep the numeric value in JS. */
.acc__panel{
  overflow:hidden;max-height:0;opacity:0;
  transition:max-height .38s var(--ease),opacity .28s var(--ease);
}
.acc__panel.is-open{opacity:1}
.acc__body{display:flex;flex-direction:column;gap:14px;color:#dbe8f6;padding-bottom:26px}
.sec--light .acc__body{color:var(--body)}
.acc__body--card{color:var(--body);padding:0 34px 30px}

/* The classroom photo's veil is deliberately light in the middle so the
   photo reads (see .sec--bg-classroom::before) — but that same band is
   where this expanded text unfurls to, leaving it without enough contrast.
   Give the text its own solid backdrop instead of relying on the veil. */
.sec--bg-classroom .acc__body{
  background:rgba(4,47,95,.88);border-radius:14px;padding:18px 20px 24px;
}

/* The white "30 רפורמות" card IS the accordion trigger. */
.reform{
  width:100%;border:0;cursor:pointer;text-align:right;
  background:var(--white);border-radius:18px;
  padding:26px 30px;display:flex;align-items:center;gap:22px;
  box-shadow:var(--shadow);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.reform:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(2,24,48,.24)}
.reform__num{font-weight:900;font-size:clamp(52px,8vw,92px);line-height:.85;color:var(--cyan);flex:0 0 auto}
.reform__text{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-width:0}
.reform__head{font-weight:900;font-size:clamp(17px,2.2vw,21px);line-height:1.35;color:var(--blue)}
.reform__sub{font-size:clamp(14px,1.7vw,17px);font-weight:400;line-height:1.45;color:var(--body)}
.reform__icon{flex:0 0 auto}
.acc--card .acc__panel.is-open{margin-top:-10px}
.acc--card .acc__body--card{
  background:var(--white);border-radius:0 0 18px 18px;
  box-shadow:var(--shadow);padding-top:8px;
}

/* ─────────────── sections with a photographic background ─────────────── */
/* Shared shell. Each variant supplies its own image and focal point below. */
.sec--bg{
  position:relative;
  background-color:var(--blue-2);
  background-size:cover;
  background-repeat:no-repeat;
}
.sec--bg::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,47,95,.86),rgba(4,47,95,.74) 50%,rgba(4,47,95,.9));
}
.sec--bg__inner{position:relative;z-index:1}

/* Real classroom photograph (Flash 90), replacing the generated one. */
.sec--bg-classroom{
  background-image:url("../assets/images/campaign/bg-classroom-real-desktop.jpg");
  background-position:center 32%;
}
/* Deliberately lighter than the other background sections so the children and
   the raised hands actually read. Kept just dark enough behind the copy: the
   veil is heavier top and bottom, thinnest across the middle where the photo
   matters and no text sits. */
.sec--bg-classroom::before{
  background:linear-gradient(180deg,rgba(4,47,95,.72),rgba(4,47,95,.34) 46%,rgba(4,47,95,.8));
}

/* The shirt is NOT a section-wide background. Two earlier attempts failed:
   `cover` stretched this portrait crop to the section's full width, so only a
   thin slice showed and the slogan was cut; `auto 100%` then keyed the image
   off the section HEIGHT, which created a feedback loop — reserving a column
   made the copy taller, which made the section taller, which made the shirt
   wider again (it reached 1104px).
   So the photo now lives in its own bounded panel on the left, capped in
   pixels. Its width no longer depends on the section's height. */
.sec--bg-shirt{background-image:none}
.sec--bg-shirt::after{
  content:"";position:absolute;z-index:0;
  inset-block:0;left:0;
  width:min(44%,520px);
  background:url("../assets/images/campaign/bg-shirt-desktop.jpg") center 34% / cover no-repeat;
  /* Right edge dissolves into the blue instead of ending on a hard line. */
  -webkit-mask-image:linear-gradient(90deg,#000 62%,rgba(0,0,0,.5) 84%,transparent);
          mask-image:linear-gradient(90deg,#000 62%,rgba(0,0,0,.5) 84%,transparent);
}
/* Barely veils the photo on the left so the slogan reads clearly, and darkens
   towards the right where the copy sits. Gradient angles ignore RTL, so 90deg
   is left-to-right regardless of direction. */
.sec--bg-shirt::before{
  z-index:1;
  background:linear-gradient(90deg,rgba(4,47,95,.08),rgba(4,47,95,.42) 42%,rgba(4,47,95,.9) 68%);
}
/* Copy sits clear of the panel. `padding-inline-end` is the LEFT side in RTL. */
.sec--bg-shirt .sec--bg__inner{z-index:2;padding-inline-end:340px}
/* The below-copy photo is a Mobile-only fallback; the side panel covers Desktop. */
.courage-shirt{display:none}

/* ─────────────── data cards (exactly four) ───────────────────────── */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  /* Two explicit rows for the cards' subgrid to inherit: row 1 sizes to the
     tallest value block, row 2 to the tallest label. */
  grid-template-rows:auto auto;
  gap:var(--gap-cards);margin-bottom:var(--gap-block);
}
/* Each card spans both rows of .stats and inherits them via subgrid, so the
   value block is the SAME height in all four cards and every label starts on
   the same line. Without it the values wrapped to 1, 3, 1 and 2 lines and the
   labels began at 74px, 149px, 74px and 112px down their cards — a ragged row
   that was hard to read across. Browsers without subgrid fall back to the
   card's own auto rows, which is simply the old behaviour. */
.stat{
  grid-row:span 2;
  display:grid;grid-template-rows:subgrid;gap:10px;
  align-content:start;
  background:var(--white);border-radius:var(--radius);
  /* Tighter side padding: at 26px each side the content column was only 162px,
     which forced the headline onto an extra line. */
  padding:26px 18px;
  text-align:center;
  box-shadow:var(--shadow);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.stat:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(2,24,48,.2)}
/* Headline-scale, and centred. Three things were making these look wrong:
   the subgrid stretches every value box to the tallest one, so a short value
   like "כפול 2" sat at the TOP of a 119px box with dead space under it;
   start-aligned text made the different line counts read as ragged; and at 42px
   in a 162px-wide card even "#2 בצפיפות הכיתות" needed three lines.
   `align-self:center` puts short values in the middle of their reserved space,
   centring makes the varying line counts look deliberate, `balance` evens the
   line breaks, and the smaller cap fits more per line. Centring also matches the
   share-card image, where these same four facts are already centred. */
.stat__value{
  font-weight:900;font-size:clamp(24px,3vw,36px);line-height:1.15;color:var(--cyan);
  align-self:center;text-wrap:balance;
}
.stat__value--words{font-size:clamp(24px,3vw,36px);line-height:1.15}
.stat__label{
  font-weight:700;font-size:clamp(15px,1.7vw,18px);line-height:1.4;color:var(--blue);
  text-wrap:balance;
}

.share-cta{
  background:var(--white);border-radius:var(--radius);
  padding:24px 28px;display:flex;flex-wrap:wrap;align-items:center;
  gap:18px;justify-content:space-between;
}
.share-cta__text{font-size:clamp(16px,1.9vw,19px);font-weight:700;color:var(--blue);max-width:48ch}

/* ───────────────────────── three Israel wins ───────────────────────── */
/* Three across on BOTH Desktop and Mobile. Never stacked, so the section
   cannot become extremely long on a phone. */
.wins{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--gap-cards);margin-bottom:var(--gap-block);
}
.win{
  background:var(--white);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);min-width:0;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.win:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(2,24,48,.2)}
.win__media{height:148px;overflow:hidden;background:#f2f5fa}
.win__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.win:hover .win__media img{transform:scale(1.05)}
.win__body{padding:22px 24px}
.win__title{font-weight:900;font-size:clamp(16px,2.2vw,23px);line-height:1.2;color:var(--blue);margin-bottom:8px}
.win__text{font-size:clamp(13px,1.6vw,17px);line-height:1.5;color:var(--body)}

.israel{
  font-family:var(--display);font-weight:700;
  font-size:clamp(24px,3.6vw,44px);line-height:1.12;color:var(--white);
  margin-bottom:6px;
}
.israel__sub{font-size:clamp(16px,1.9vw,20px);color:var(--soft)}

/* ───────────────────────── five proposals ───────────────────────── */
.proposals{list-style:none}
.proposal{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;
  align-items:start;border-top:1px solid rgba(255,255,255,.22);
  padding:26px 0;
}
.proposal:last-child{border-bottom:1px solid rgba(255,255,255,.22)}
.proposal__num{font-weight:900;font-size:clamp(34px,5vw,58px);line-height:.9;color:var(--cyan);text-align:right}
.proposal__body h3{font-weight:900;font-size:clamp(18px,2.2vw,26px);line-height:1.3;color:var(--white);margin-bottom:8px}
.proposal__body p{font-size:clamp(15px,1.7vw,17px);line-height:1.6;color:var(--soft)}

/* ─────────────── people photo, bridge into campaign updates ─────────────── */
/* Deliberately small margin-bottom so it reads as the opening of the section
   rather than a separate band. */
.people{
  margin:0 0 20px;border-radius:var(--radius);overflow:hidden;
}
.people img{
  display:block;width:100%;height:340px;
  object-fit:cover;object-position:center 40%;
}

/* ─────────────── final CTA: crowd + flags background ─────────────── */
.sec--photo{
  position:relative;
  background-image:url("../assets/images/campaign/crowd-flags-desktop.jpg");
  background-size:cover;
  background-position:center bottom;
  background-repeat:no-repeat;
}
/* Dark blue veil. Strong enough for full contrast on the copy, light enough
   that the crowd and the flags stay clearly readable. No blur, no recolour. */
.sec--photo::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,47,95,.72),rgba(4,47,95,.58) 45%,rgba(4,47,95,.78));
  pointer-events:none;
}
.sec--photo__inner{position:relative;z-index:1}

/* Efficient, not cinematic: this section is tightened so the whole block lands
   in the 500–650px range rather than becoming a second hero. */
.sec--photo{padding-top:54px;padding-bottom:54px}
.sec--photo .signup__title{font-size:clamp(24px,3.4vw,42px);margin-bottom:18px}
.sec--photo .signup{padding:26px;margin-bottom:26px}
.sec--photo .signup__note{margin-bottom:16px}
/* One row of chips instead of two */
.sec--photo .names__list{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.sec--photo .names__title{margin-bottom:8px}

/* ───────────────────────── signup, the main conversion ───────────────────────── */
.signup__title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(26px,4.2vw,50px);line-height:1.08;
  margin-bottom:var(--gap-title);
}
.signup__title-light,.signup__title-dark{display:block}
.signup__title-light{color:var(--cyan)}
/* Campaign dark blue. This works because the heading sits inside the light
   panel — on the photo background behind it, this colour would be invisible. */
.signup__title-dark{color:var(--blue)}

.signup{
  background:var(--white);border-radius:20px;padding:32px;
  box-shadow:var(--shadow-lg);margin-bottom:var(--gap-block);
}
.signup__note{font-size:clamp(15px,1.8vw,17px);color:var(--body);margin-bottom:20px}
.signup__form{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:14px;font-weight:700;color:var(--blue)}
.field input{
  font-size:16px;padding:14px 18px;border-radius:var(--pill);
  border:1px solid #cfdae8;background:#f4f6fa;color:var(--blue);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.field input:focus{outline:0;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(23,194,235,.28)}
.signup__form .btn{grid-column:1/-1}
.consent{grid-column:1/-1;font-size:13px;line-height:1.6;color:var(--body)}
.consent a{text-decoration:underline}

.names__title{font-weight:900;font-size:clamp(18px,2.2vw,22px);color:var(--white);margin-bottom:10px}
.names__list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.names__list li{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:12px;padding:12px 16px;display:flex;gap:8px;align-items:baseline;
}
.names__name{font-weight:700;color:var(--white);font-size:15px}
.names__city{color:var(--softer);font-size:13px}

/* ───────────────────────── campaign feed ───────────────────────── */
.feed{
  background:var(--white);border-radius:18px;padding:4px 28px 18px;
  box-shadow:var(--shadow);margin-bottom:var(--gap-block);
}
.feed__item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;border-top:1px solid #e3eaf3;padding:18px 0}
.feed__date{font-weight:900;font-size:14px;color:#8aa3bf;white-space:nowrap}
.feed__date.is-now{color:var(--cyan)}
.feed__body p{color:var(--blue);font-size:16px;margin-bottom:8px}
.feed__tag{display:inline-block;background:#f4f6fa;border-radius:var(--pill);color:var(--body);font-weight:700;font-size:13px;padding:5px 13px}
/* "לפרטים ←" on a feed item. Text link rather than a button: the feed is a
   list of updates, and a row of buttons would compete with the section's real
   CTA. Underline on hover only, so a feed of many links stays calm. */
.feed__link{display:inline-block;color:var(--cyan);font-weight:700;font-size:15px}
.feed__link:hover{color:var(--blue);text-decoration:underline}
/* The shared .arrow nudges on hover; keep that behaviour inside feed links. */
.feed__link:hover .arrow{transform:translateX(-3px)}

/* ───────────────────── press coverage cards ───────────────────── */
/* Two articles, side by side on Desktop. The whole card is one <a>, so there is
   no nested link anywhere inside it. */
.press{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--gap-cards);margin-bottom:var(--gap-block);
  align-items:stretch;
}
.press__card{
  display:flex;flex-direction:column;align-items:flex-start;
  background:var(--white);border-radius:var(--radius);
  padding:26px 28px;box-shadow:var(--shadow);
  min-width:0;height:100%;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.press__card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(2,24,48,.2)}
/* Sized by height, not width: these are wordmarks with different aspect ratios,
   and matching their heights is what makes them look like a matched pair. Each
   keeps its own official colour, so neither is restyled here.
   The height is deliberately well below the title's font-size. A wordmark fills
   its full box height, while an .press__title glyph only reaches ~70% of its
   font-size — so matching the two numbers makes the logo read LARGER than the
   headline and fight it for attention. */
.press__logo{display:block;height:16px;width:auto;margin-bottom:16px}
/* Stands in for the wordmark when an outlet has no logo file, or when a pasted
   external logo URL stops resolving. Deliberately the same 16px box and 16px
   gap as .press__logo, so a card that falls back to text keeps its height and
   the pair stays aligned. */
.press__outlet{
  display:block;height:16px;line-height:16px;margin-bottom:16px;
  font-weight:900;font-size:15px;color:var(--blue);
}
/* No font-family override: card titles inherit SimplerPro at 900, matching
   .win__title. Caravan (--display) is reserved for section headings. */
.press__title{
  font-weight:900;
  font-size:21px;line-height:1.25;color:var(--blue);
  margin-bottom:10px;
}
.press__text{font-size:16px;line-height:1.6;color:var(--body);margin-bottom:18px}
/* margin-top:auto pins the CTA to the bottom, so both cards' links line up even
   when one summary runs a line longer than the other. */
.press__cta{margin-top:auto;color:var(--cyan);font-weight:700;font-size:15px}
.press__card:hover .press__cta{color:var(--blue)}
.press__card:hover .arrow{transform:translateX(-3px)}

/* ─────────── politicians' positions: one banner, no CTA ─────────── */
/* Same white surface, radius, shadow and type as the press cards above, so the
   two blocks read as one family. One panel, not two cards: this is a single
   banner and must not look like more article links. */
.voices{
  background:var(--white);border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px 28px;
  margin-bottom:var(--gap-block);
}
.voices__title{
  font-weight:900;font-size:21px;line-height:1.25;
  color:var(--blue);margin-bottom:20px;
}
.voices__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap-cards)}
.voice{margin:0;min-width:0}
/* <cite> is italic by default in every browser; these are names, not titles. */
.voice__name{
  display:block;font-style:normal;font-weight:900;
  font-size:16px;color:var(--blue);margin-bottom:8px;
}
.voice__quote{font-size:16px;line-height:1.6;color:var(--body)}

/* Share + follow tail. Integrated into the blue, not more white cards. */
.tail{display:flex;flex-wrap:wrap;align-items:center;gap:24px;justify-content:space-between}
.tail__share{display:flex;flex-wrap:wrap;align-items:center;gap:18px;flex:1 1 460px;min-width:0}
.tail__text{font-size:clamp(15px,1.8vw,18px);color:var(--soft);max-width:44ch;flex:1 1 240px}

.follow{display:flex;align-items:center;gap:14px}
.follow__label{font-weight:700;font-size:15px;color:var(--softer)}
.follow__list{list-style:none;display:flex;gap:10px}
.follow__list a{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.follow__list a:hover{background:var(--cyan);transform:translateY(-2px)}
.follow__list svg{width:20px;height:20px;fill:var(--white)}
.follow__list a:hover svg{fill:var(--blue)}

/* ───────────────────────── footer ───────────────────────── */
.ftr{background:var(--blue);color:var(--soft);padding:34px 0 96px}
.ftr__inner{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.ftr img{height:38px;width:auto}
.ftr__links{display:flex;flex-direction:column;gap:5px;font-size:15px;font-weight:700}
.ftr__links a{transition:opacity var(--dur) var(--ease)}
.ftr__links a:first-child{color:var(--white)}
.ftr__links a:last-child{color:var(--cyan)}
.ftr__links a:hover{opacity:.72}

/* ───────────────────────── sticky bar ───────────────────────── */
.sticky{
  position:fixed;inset-inline:14px;bottom:14px;z-index:55;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  background:rgba(4,47,95,.96);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);border-radius:var(--pill);
  padding:10px 16px;box-shadow:0 16px 40px rgba(2,24,48,.4);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.sticky[hidden]{display:flex}
.sticky.is-visible{opacity:1;transform:none;pointer-events:auto}
.sticky__text{color:var(--white);font-weight:700;font-size:15px}

/* ═════════════════════ SHARE: modal (Desktop) ═════════════════════ */
.sheet{position:fixed;inset:0;z-index:80;display:grid;place-items:center}
.sheet[hidden]{display:none}
.sheet__backdrop{position:absolute;inset:0;background:rgba(2,18,38,.72);backdrop-filter:blur(3px)}
.sheet__panel{
  position:relative;z-index:1;
  width:min(520px,calc(100vw - 32px));max-height:min(88vh,760px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  /* Tighter at the top than the sides: the duplicated lede line that used to
     sit under the title is gone, so the old 28px left a gap. */
  background:var(--white);border-radius:22px;padding:20px 28px 26px;
  box-shadow:0 30px 70px rgba(2,18,38,.5);
  animation:sheetIn .28s var(--ease);
}
@keyframes sheetIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.sheet__x{
  position:absolute;inset-inline-start:16px;top:14px;
  width:34px;height:34px;border:0;border-radius:50%;
  background:#f4f6fa;color:var(--blue);font-size:22px;line-height:1;cursor:pointer;
  transition:background var(--dur) var(--ease);
}
.sheet__x:hover{background:#e3ebf5}
/* The close button is absolutely positioned at inset-inline-start:16px, which in
   RTL is the TOP RIGHT — exactly where this title starts. Without reserved room
   the first words ran underneath it and were clipped on narrow iPhones. 52px
   clears the 34px button plus its 16px offset. */
.sheet__title{
  font-weight:900;font-size:24px;color:var(--blue);
  margin-bottom:16px;padding-inline-start:52px;
}

.sheet__preview{border-radius:14px;overflow:hidden;background:#f2f5fa;margin-bottom:18px}
.sheet__preview img{width:100%;height:auto}

/* Three destinations, one row. A 2-column grid left Instagram orphaned on a
   half-width row of its own. */
.sheet__actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.sbtn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  border:0;border-radius:var(--pill);cursor:pointer;
  font-weight:900;font-size:15px;padding:13px 16px;color:var(--white);
  transition:filter var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.sbtn:hover{filter:brightness(1.08);transform:translateY(-2px)}
.sbtn svg{width:19px;height:19px;fill:currentColor}
.sbtn--wa{background:#25d366;color:#04331a}
.sbtn--fb{background:#1877f2}
.sbtn--ig{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888)}
.sbtn--tt{background:#111}

.lbtn{
  background:#f4f6fa;border:1px solid #dbe4ef;border-radius:var(--pill);
  color:var(--blue);font-weight:700;font-size:14px;padding:10px 16px;cursor:pointer;
  transition:background var(--dur) var(--ease);
}
.lbtn:hover{background:#e3ebf5}
.sheet__hint{font-size:13px;line-height:1.5;color:var(--body);margin-top:10px;min-height:0}
.sheet__hint:empty{display:none}   /* no reserved height when there is no hint */

/* ───────────────────────── animation ───────────────────────── */
/* Every rule that HIDES content is scoped to `.js`, added to <html> by an
   inline script in the head. If JS is blocked or throws, the page renders
   fully visible instead of blank. */
.js [data-fade]{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-fade].is-visible{opacity:1;transform:none}
.js .r{opacity:0;transform:translateY(20px);animation:rise .8s var(--ease) forwards}
.r--1{animation-delay:.06s}
.r--2{animation-delay:.16s}
.r--3{animation-delay:.26s}
.r--4{animation-delay:.36s}
.r--5{animation-delay:.48s}
@keyframes rise{to{opacity:1;transform:none}}

/* Safety net: if JS ran but threw before the reveal sweep, un-hide after 3s
   rather than leaving a blank page. */
@keyframes failSafe{to{opacity:1;transform:none}}
.js [data-fade]:not(.is-visible){animation:failSafe .4s var(--ease) 3s forwards}

:where(a,button,input,[tabindex]):focus-visible{
  outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px;
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE BRANCH — an explicit second design state, not a scaled Desktop.
   Every spacing token is re-declared smaller. Layouts change where a
   Desktop arrangement would become too tall or too heavy on a phone.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:820px){
  :root{
    --wrap-pad:22px;
    --sec-y:42px;        /* was 92 */
    --gap-title:14px;    /* was 26 */
    --gap-lede:18px;     /* was 34 */
    --gap-cards:12px;    /* was 22 */
    --gap-block:22px;    /* was 40 */
    --hero-y:34px;       /* was 84 */
    --acc-y:16px;        /* was 22 */
  }
  body{font-size:16px;line-height:1.6}
  html{scroll-padding-top:56px}

  /* Header: a slim utility bar. No hamburger, no oversized logo. */
  .hdr__inner{padding:7px var(--wrap-pad)}
  .hdr__brand img{height:24px}
  .hdr__link{font-size:13px;gap:6px}

  /* Hero. Photo sits BELOW the copy (DOM order already does this) and is a
     short strip, so the first screen stays fast and compact. */
  .hero__inner{flex-direction:column;gap:16px;align-items:stretch}
  .hero__address{margin-bottom:8px}
  .hero__title{margin-bottom:14px}
  .hero__lede{margin-bottom:8px}
  .hero__sub{margin-bottom:18px}
  .btn--lg{width:100%;font-size:16px;padding:15px 22px}
  /* Both hero columns must drop their Desktop flex basis. Resetting only the
     media left the copy capped at max-width:55%, so on a 375px screen it was
     squeezed into a 182px strip on the right instead of filling the width. */
  .hero__body{flex:none;max-width:100%;padding-bottom:0}
  .hero__media{flex:none;max-width:100%;border-radius:14px}
  .hero__media img{height:200px;max-height:none;object-position:center 60%}


  /* Background sections: mobile-specific crops and focal points. */
  .sec--bg-classroom{
    background-image:url("../assets/images/campaign/bg-classroom-real-mobile.jpg");
    background-position:center 34%;
  }
  /* Copy stacks over the whole frame on a phone, so the veil has to carry more
     contrast than on Desktop — still the lightest of the three backgrounds. */
  .sec--bg-classroom::before{
    background:linear-gradient(180deg,rgba(4,47,95,.78),rgba(4,47,95,.5) 46%,rgba(4,47,95,.85));
  }
  /* No room beside the copy on a phone. The side panel is dropped, and rather
     than stretching it into a full-width backdrop — which put the copy directly
     over the slogan and read as broken — the photo moves BELOW the copy as its
     own image. So: no background photo, no veil, plain campaign blue. */
  .sec--bg-shirt::after{display:none}
  .sec--bg-shirt{background-image:none}
  .sec--bg-shirt::before{background:none}
  .sec--bg-shirt .sec--bg__inner{padding-inline-end:var(--wrap-pad)}
  .courage-shirt{
    display:block;margin:18px 0 0;
    border-radius:14px;overflow:hidden;
  }
  .courage-shirt img{display:block;width:100%;height:auto}

  /* People bridge: much shorter crop, focused on the foreground group. */
  .people{margin-bottom:14px;border-radius:14px}
  .people img{height:210px;object-position:center 45%}

  /* Final CTA: mobile-specific crop — crowd and flags only, no stage.
     Padding and internal gaps are cut further than Desktop so the photo
     block stays compact rather than turning into a second full screen. */
  .sec--photo{
    background-image:url("../assets/images/campaign/crowd-flags-mobile.jpg");
    background-position:center 68%;
    padding-top:30px;padding-bottom:30px;
  }
  .sec--photo .signup__title{font-size:clamp(22px,6.4vw,30px);margin-bottom:12px}
  .sec--photo .signup{padding:16px;margin-bottom:16px}
  .sec--photo .signup__note{margin-bottom:10px}
  .sec--photo .signup__form{gap:10px}
  /* Three chips per row instead of two, so the wall is two rows not three */
  .sec--photo .names__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .sec--photo .names__list li{padding:7px 8px;flex-direction:column;gap:0}
  .sec--photo .names__name{font-size:13px}
  .sec--photo .names__city{font-size:11px}
  .sec--photo::before{
    background:linear-gradient(180deg,rgba(4,47,95,.76),rgba(4,47,95,.66) 45%,rgba(4,47,95,.84));
  }

  .statement{padding:20px;border-radius:14px;margin-bottom:14px}

  /* Reform accordion card */
  .reform{padding:18px;gap:14px;border-radius:14px}
  .acc__body--card{padding:0 18px 20px}

  /* ONE column, not the 2×2 it used to be. In two columns each card had only a
     ~123px content strip, which is too narrow for a bigger heading — any size
     increase just bought more wrapping. It also caused the odd look: within a
     row, a one-line heading centred itself vertically while its two-line
     neighbour started at the top, so the headings did not line up even though
     the labels did. Full width fits every heading on ONE line, which aligns
     them all by construction and leaves room to set them noticeably larger. */
  .stats{grid-template-columns:1fr}
  .stat{padding:18px 20px;gap:8px;border-radius:12px}
  /* No min-height floor needed now: one line each means equal heights already. */
  .stat__value,.stat__value--words{font-size:clamp(22px,6.4vw,28px);line-height:1.2;min-height:0}
  .stat__label{font-size:15px;line-height:1.45}
  .share-cta{padding:18px;gap:14px;border-radius:14px}
  .share-cta .btn{width:100%}

  /* Three wins STAY side by side, never stacked, so this section cannot become
     extremely long on a phone. Each card is ~109px wide at 375px, so the type
     is held at a legible floor rather than shrunk to fit; the cards take a
     little more height instead. */
  .wins{gap:8px}
  .win{border-radius:11px}
  .win__media{height:66px}
  .win__body{padding:11px 9px}
  .win__title{font-size:14.5px;line-height:1.15;margin-bottom:5px}
  .win__text{font-size:12.5px;line-height:1.45}

  /* Proposals */
  .proposal{gap:12px;padding:18px 0}
  .proposal__num{font-size:30px}
  .proposal__body h3{font-size:17px;margin-bottom:6px}
  .proposal__body p{font-size:14.5px;line-height:1.55}

  /* Signup: compact, single column, no big empty panel */
  .signup{padding:18px;border-radius:16px}
  .signup__note{margin-bottom:14px}
  .signup__form{grid-template-columns:1fr;gap:12px}
  .names__list{grid-template-columns:1fr 1fr;gap:8px}
  .names__list li{padding:9px 12px}

  /* Feed + tail */
  .feed{padding:2px 16px 12px;border-radius:14px}
  .feed__item{gap:10px;padding:14px 0;grid-template-columns:1fr}
  .feed__date{font-size:13px}
  .feed__body p{font-size:15px}
  /* Press cards stack. The gap comes from --gap-cards, already 12px here, so
     only the card's own spacing needs tightening. */
  .press{grid-template-columns:1fr}
  .press__card{padding:18px 20px;border-radius:14px}
  .press__logo{height:14px;margin-bottom:11px}
  .press__outlet{height:14px;line-height:14px;margin-bottom:11px;font-size:14px}
  .press__title{font-size:18px;margin-bottom:8px}
  .press__text{font-size:15px;line-height:1.55;margin-bottom:12px}
  .press__cta{font-size:14px}
  /* Eisenkot then Smotrich, stacked. */
  .voices{padding:18px 20px;border-radius:14px}
  .voices__title{font-size:15px;margin-bottom:14px}
  .voices__grid{grid-template-columns:1fr;gap:16px}
  .voice__name{font-size:15px;margin-bottom:6px}
  .voice__quote{font-size:15px;line-height:1.55}
  .tail{gap:16px}
  .tail__share{flex:1 1 100%;gap:12px}
  .tail__text{flex:1 1 100%;max-width:none}
  .tail__share .btn{width:100%}
  .follow{flex:1 1 100%;justify-content:center;gap:12px}

  .ftr{padding:24px 0 88px}
  .ftr__inner{gap:14px}
  .ftr img{height:30px}

  .sticky{inset-inline:10px;bottom:10px;padding:8px 12px;gap:10px}
  .sticky__text{font-size:14px}

  /* SHARE becomes a bottom sheet, not a centered modal */
  .sheet{place-items:end stretch}
  .sheet__panel{
    width:100%;max-width:none;max-height:92vh;
    border-radius:22px 22px 0 0;padding:18px 18px 18px;
    animation:sheetUp .3s var(--ease);
  }
  @keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
  .sheet__title{font-size:21px;margin-bottom:12px}

  .sheet__preview{margin-bottom:14px}
  /* Two per row on a phone — three would squeeze "אינסטגרם" past legibility.
     The third spans the full width so nothing looks orphaned. */
  .sheet__actions{grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:10px}
  .sheet__actions .sbtn:last-child{grid-column:1/-1}
  .sbtn{font-size:14px;padding:12px 10px}
}

/* Very narrow phones. Type floors are held at 13.5px/12px so the three-across
   row stays readable; only padding and image height give way. */
@media (max-width:380px){
  .wins{gap:6px}
  .win__media{height:58px}
  .win__body{padding:9px 7px}
  .win__title{font-size:13.5px}
  .win__text{font-size:12px;line-height:1.4}
  /* Value size is left to the clamp, which already floors at 22px here — an
     extra override would only make the heading smaller on the narrowest phones,
     which is the opposite of what is wanted. */
  .stat{padding:16px}
  .stat__label{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  .js [data-fade],.js .r{opacity:1!important;transform:none!important}
}

/* ─────────────── photo credit ─────────────── */
/* Small, unobtrusive attribution for a licensed press photograph. Sits at the
   foot of the section it credits, inside the same centred content grid. */
/* Pinned to the bottom corner of the photo it credits, not left to the end of
   the prose — a credit that scrolls with the text column reads as body copy.
   Absolute against the section (`.sec--bg` is position:relative) and out of the
   flow, so it adds no height and cannot push the section taller.
   `inset-inline-end` is the LEFT corner here: the page is RTL, and that is the
   trailing edge where a credit belongs. The text-shadow is what keeps it legible
   over the bright part of the photo — raising the opacity alone was not enough
   where children's shirts are near-white. */
.photo-credit{
  position:absolute;z-index:2;
  inset-block-end:12px;
  inset-inline-end:18px;
  margin:0;
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:.01em;
  color:rgba(255,255,255,.95);
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  pointer-events:none;
}

/* ─────────────── full-plan text link ─────────────── */
/* A tasteful secondary link, deliberately not another large CTA button. */
.plan-link{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--cyan);font-weight:700;
  border-bottom:1px solid rgba(23,194,235,.45);
  padding-bottom:2px;
  transition:border-color var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.plan-link:hover{border-bottom-color:var(--cyan);opacity:.85}
.plan-link .arrow{font-size:15px}

@media (max-width:820px){
  /* Mobile section padding drops to 42px, so the credit tucks in tighter to stay
     clear of the copy above it. This has to live AFTER the base .photo-credit
     rule: same specificity, so source order decides, and the earlier mobile
     block was silently losing its offsets to the base declaration. */
  .photo-credit{inset-block-end:9px;inset-inline-end:14px;font-size:12px}
}