/* כח התערבות — one colour: the brand blue (#22396f), from near-black to pale.
   Gold appears only on calls to action. RTL-first; LTR mirrors via logical properties. */
:root {
  --blue-950: #081029;
  --blue-900: #0d1f4d;
  --blue-800: #162f68;
  --blue-700: #22396f;   /* the logo blue */
  --blue-600: #2f4d92;
  --blue-500: #4667ad;
  --blue-100: #dfe6f4;
  --blue-050: #eef2fa;
  --gold: #e8b93c;
  --gold-2: #f7d675;
  --paper: #f5f7fc;
  --white: #ffffff;
  --ink: #101c3a;
  --ink-soft: #46567c;
  --sans: "Heebo", "Segoe UI", Arial, sans-serif;
  --wrap: 1180px;
  --r: 12px;
  --shadow: 0 18px 46px rgba(8, 16, 41, .16);
}

* { box-sizing: border-box; }
html { scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--blue-600); text-underline-offset: 3px; }
h1, h2, h3, h4 { line-height: 1.14; margin: 0 0 .4em; font-weight: 800; letter-spacing: -.015em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.skip { position: absolute; inset-inline-start: -999px; top: 0; background: var(--gold); color: var(--blue-950); padding: .6rem 1.1rem; z-index: 100; }
.skip:focus { inset-inline-start: 1rem; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.muted { color: var(--ink-soft); max-width: 62ch; }
/* Every section is dark unless it says light, so the light-on-dark colour is
   the default and .sec-light takes it back. It used to list sec-deep and
   sec-dark only, which left plain .sec — מי אנחנו — grey on navy at 1.76:1. */
.sec .muted { color: rgba(255,255,255,.78); }
.sec-light .muted { color: var(--ink-soft); }

/* Buttons */
.btn {
  display: inline-block; padding: .78rem 1.5rem; border-radius: 999px; font-weight: 700; font-size: 1rem;
  text-decoration: none; border: 2px solid transparent; cursor: pointer; font-family: var(--sans);
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-sm { padding: .45rem 1.15rem; font-size: .93rem; }
.btn-gold { background: var(--gold); color: var(--blue-950); }
.btn-gold:hover { background: var(--gold-2); }
/* Most of the page is deep blue, so the outline button is light by default
   and flips to blue only on the light sections. */
.btn-line { background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.btn-line:hover { background: var(--white); color: var(--blue-800); border-color: var(--white); }
.sec-light .btn-line { color: var(--blue-700); border-color: var(--blue-500); }
.sec-light .btn-line:hover { background: var(--blue-700); color: var(--white); border-color: var(--blue-700); }

/* Header — light bar so the navy-and-gold logo reads */
.top { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--blue-100); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--blue-800); }
.brand .mark { width: 56px; height: 44px; object-fit: contain; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.08; }
.brand-text strong { font-size: 1.3rem; font-weight: 900; }
.brand-text small { font-size: .76rem; color: var(--ink-soft); letter-spacing: .03em; }
.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.3rem; }
.nav a { color: var(--blue-800); text-decoration: none; font-size: .98rem; font-weight: 500; white-space: nowrap; }
.nav a:hover { color: var(--blue-600); }
.nav-extra { display: flex; align-items: center; gap: 1rem; }
.lang { font-weight: 700; }
.menu-btn { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; }
.menu-btn span { display: block; width: 24px; height: 2px; background: var(--blue-800); margin: 5px 0; transition: transform .2s, opacity .2s; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hero: headline + the news window side by side */
.hero {
  position: relative; overflow: hidden; color: var(--white);
  background: linear-gradient(155deg, var(--blue-900) 0%, var(--blue-700) 60%, var(--blue-800) 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(900px 380px at 82% -10%, rgba(232,185,60,.16), transparent 65%);
}
.hero-in { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "copy news" "cta news"; gap: 0 3rem; align-items: start; padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 4.5rem); }
.hero-copy { grid-area: copy; }
.hero .news { grid-area: news; }
.hero-cta { grid-area: cta; }
.kicker { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--gold); margin-bottom: .7rem; }
.hero h1 { font-size: clamp(2.8rem, 6vw, 4.6rem); font-weight: 900; margin-bottom: .25em; }
.hero-lead { font-size: clamp(1.15rem, 2vw, 1.45rem); color: rgba(255,255,255,.92); max-width: 22ch; font-weight: 500; }
.hero-cta { display: flex; flex-direction: column; gap: .8rem; margin-top: 2rem; max-width: 32rem; align-self: start; }
.cta { display: block; padding: 1rem 1.4rem; border-radius: var(--r); text-decoration: none; transition: transform .15s, background .15s; }
.cta:hover { transform: translateY(-2px); }
.cta strong { display: block; font-size: 1.1rem; font-weight: 800; }
.cta span { display: block; font-size: .9rem; opacity: .85; margin-top: .15rem; line-height: 1.5; }
.cta-gold { background: var(--gold); color: var(--blue-950); }
.cta-gold:hover { background: var(--gold-2); }
.cta-line { border: 2px solid rgba(255,255,255,.45); color: var(--white); }
.cta-line:hover { background: rgba(255,255,255,.1); border-color: var(--white); }

/* News window */
.news { background: var(--white); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; color: var(--ink); }
.news-head { background: var(--blue-800); color: var(--white); font-weight: 800; padding: .8rem 1.3rem; display: flex; align-items: center; gap: .6rem; font-size: 1.02rem; letter-spacing: .01em; }
.live { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(232,185,60,.7); animation: pulse 2.4s infinite; flex: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(232,185,60,0); } 100% { box-shadow: 0 0 0 0 rgba(232,185,60,0); } }
.news-stage { padding: 1.3rem 1.3rem .4rem; }
.news-item { display: none; }
.news-item.is-open { display: block; }
.news-meta { display: flex; align-items: center; gap: .7rem; font-size: .85rem; color: var(--ink-soft); margin-bottom: .35rem; }
.news-tag { background: var(--blue-050); color: var(--blue-700); font-weight: 700; padding: .12rem .6rem; border-radius: 999px; }
.news-item h3 { font-size: 1.3rem; color: var(--blue-800); margin-bottom: .6rem; }
.news-item p { margin: 0; color: var(--ink-soft); font-size: .99rem; }
.news-media { margin: 0 0 .8rem; border-radius: 10px; overflow: hidden; background: var(--blue-900); }
.news-media img, .news-media .vplay { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.news-link { display: inline-block; margin-top: .7rem; font-weight: 700; }
.news-empty { padding: 1.5rem; color: var(--ink-soft); margin: 0; }
.news-count { margin-inline-start: auto; font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.news-count b { color: var(--gold-2); font-weight: 800; }
.news-nav { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem .7rem; border-top: 1px solid var(--blue-100); }
.news-arrow { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--blue-100); background: var(--white); color: var(--blue-700); border-radius: 50%; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.news-arrow svg { width: 20px; height: 20px; }
/* the chevron art points left; mirror whichever button means "forward"
   in the current reading direction, not both of them */
.news-next svg { transform: scaleX(-1); }
[dir="rtl"] .news-arrow svg { transform: scaleX(-1); }
[dir="rtl"] .news-next svg { transform: none; }
.news-arrow:hover { background: var(--blue-700); color: var(--white); border-color: var(--blue-700); }
.news-next { margin-inline-start: auto; }
.news-dots { display: flex; gap: .45rem; align-items: center; justify-content: center; flex: 1; }
.news-dot { width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.news-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-100); transition: background .2s, transform .2s; }
.news-dot:hover::before { background: var(--blue-500); }
.news-dot.is-on::before { background: var(--gold); transform: scale(1.35); }
.news-item { animation: newsIn .32s ease both; }
.news-all { display: block; border-top: 1px solid var(--blue-100); padding: .85rem 1.3rem; font-weight: 700; font-size: .92rem; color: var(--blue-700); text-decoration: none; text-align: center; background: var(--blue-050); transition: background .15s; }
.news-all:hover { background: var(--blue-100); }
.news-all b { font-variant-numeric: tabular-nums; margin-inline-start: .35rem; background: var(--blue-700); color: var(--white); border-radius: 999px; padding: .1rem .5rem; font-size: .82rem; }
@keyframes newsIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Video facade */
.vplay { position: relative; display: block; width: 100%; aspect-ratio: 16/9; border: 0; padding: 0; cursor: pointer;
  background-color: var(--blue-900); background-size: cover; background-position: center; }
.vplay-btn { position: absolute; inset: 0; margin: auto; width: 68px; height: 48px; border-radius: 12px; background: rgba(8,16,41,.72); transition: background .15s; }
.vplay-btn::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
[dir="rtl"] .vplay-btn::after { transform: scaleX(1); }
.vplay:hover .vplay-btn { background: #c00; }
.vplay iframe, iframe.vplay { width: 100%; aspect-ratio: 16/9; border: 0; display: block; }

/* Sections */
.sec { padding: clamp(3.2rem, 7vw, 5.5rem) 0; background: var(--blue-800); color: var(--white); }
.sec h2, .sec h3, .sec h4 { color: var(--white); }
.sec-light { background: var(--paper); color: var(--ink); }
.sec-light h2, .sec-light h3, .sec-light h4 { color: var(--blue-800); }
.sec-deep { background: var(--blue-950); }
.intro { font-size: 1.12rem; max-width: 64ch; color: rgba(255,255,255,.82); margin-bottom: 2.2rem; }
.sec-light .intro { color: var(--ink-soft); }
.sec a:not(.btn):not(.cta):not(.news-link) { color: var(--gold-2); }
.sec-light a:not(.btn):not(.cta) { color: var(--blue-600); }
.sub { font-size: 1.6rem; margin: 3rem 0 .8rem; padding-top: 1.6rem; border-top: 2px solid rgba(255,255,255,.16); }
.sec-light .sub { border-top-color: var(--blue-100); }

.motto { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; color: var(--gold); max-width: 24ch; margin: 0 0 1.4rem; line-height: 1.25; }
.manifesto { max-width: 70ch; }
.manifesto p { color: rgba(255,255,255,.86); font-size: 1.06rem; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin: 2.4rem 0 0; padding-top: 1.6rem; border-top: 2px solid rgba(255,255,255,.16); }
.fact-n { display: block; font-size: 2rem; font-weight: 900; color: var(--gold); line-height: 1.1; }
.fact-t { font-size: .93rem; color: rgba(255,255,255,.75); }

.what { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; counter-reset: what; }
.what li { counter-increment: what; padding-top: .9rem; border-top: 2px solid var(--gold); }
.what li::before { content: counter(what, decimal-leading-zero); color: var(--gold); font-weight: 800; font-size: .9rem; letter-spacing: .1em; }
.what h4 { margin: .3rem 0 .35rem; }
.what p { margin: 0; color: rgba(255,255,255,.78); font-size: .97rem; }

.areas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 1.6rem; }
.area { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r); padding: 1.2rem; }
.area h4 { margin-bottom: .1rem; }
.area-lead { display: block; color: var(--gold); font-weight: 700; font-size: .92rem; margin-bottom: .6rem; }
.area p { margin: 0; color: rgba(255,255,255,.76); font-size: .94rem; }

.wins { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.wins li { background: rgba(255,255,255,.07); border-radius: var(--r); padding: 1.3rem 1.4rem; border-inline-start: 4px solid var(--gold); }
.wins h4 { margin-bottom: .35rem; }
.wins p { margin: 0; color: rgba(255,255,255,.78); font-size: .96rem; }

/* People */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.person { background: var(--white); border-radius: var(--r); padding: 1.7rem; border: 1px solid var(--blue-100); box-shadow: 0 2px 10px rgba(8,16,41,.05); }
.avatar { width: 120px; height: 120px; border-radius: 50%; background: var(--blue-800); color: var(--gold); display: grid; place-items: center; font-size: 2.4rem; font-weight: 800; margin-bottom: 1rem; }
.avatar.photo { display: block; object-fit: cover; border: 4px solid var(--white); box-shadow: 0 0 0 3px var(--blue-100); }
.person h3 { margin-bottom: .1rem; color: var(--blue-800); }
.role { color: var(--blue-600); font-weight: 700; font-size: .95rem; margin-bottom: .7rem; }
.bio { margin: 0; color: var(--ink-soft); font-size: .97rem; }

.crew { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.2rem; }
.crew li { text-align: center; }
.crew-img { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; border: 4px solid rgba(255,255,255,.9); box-shadow: 0 0 0 3px rgba(232,185,60,.55); margin-bottom: .7rem; display: block; margin-inline: auto; }
.crew strong { display: block; font-size: 1.04rem; font-weight: 700; line-height: 1.25; }
.crew span { display: block; color: var(--gold); font-weight: 600; font-size: .87rem; margin-top: .15rem; }
.staff { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .7rem; }
.staff li { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: .45rem 1.1rem; display: flex; gap: .5rem; align-items: baseline; }
.staff strong { font-weight: 700; }
.staff span { color: rgba(255,255,255,.7); font-size: .9rem; }

/* Gallery */
.feature-video { max-width: 880px; margin: 0 0 2.4rem; }
.feature-video .vplay { border-radius: var(--r); box-shadow: var(--shadow); }
.feature-cap { margin: .8rem 0 0; color: rgba(255,255,255,.8); font-size: .96rem; }
.feature-cap a { color: var(--gold); font-weight: 700; text-decoration: none; margin-inline-start: .5rem; }
.sec-more { margin-top: 1.8rem; }
.shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.shot { margin: 0; background: rgba(255,255,255,.07); border-radius: 10px; overflow: hidden; }
/* the width/height attributes on the <img> are there so the browser can
   reserve the space before the picture loads, but they also fix the used
   height at 360px and beat aspect-ratio; height:auto hands it back */
.shot img, .shot .vplay { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.shot figcaption { padding: .6rem .8rem .8rem; font-size: .88rem; color: rgba(255,255,255,.78); }

/* Position papers — a shelf of A4 covers, each opening its PDF.
   Three across, as Adam asked; two once the screen is too narrow for three
   sheets to stay legible. */
.papers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem 1.5rem; margin-bottom: 1.4rem; }
.paper { display: grid; gap: .45rem; align-content: start; text-decoration: none; color: inherit; }
.paper-sheet { position: relative; display: block; aspect-ratio: 210 / 297; max-width: 100%; background: var(--white); border: 1px solid var(--blue-100); border-radius: 6px; overflow: hidden; box-shadow: 0 6px 18px rgba(13,31,77,.10); transition: transform .16s, box-shadow .16s; }
.paper:hover .paper-sheet, .paper:focus-visible .paper-sheet { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(13,31,77,.18); }
.paper-sheet img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the corner tag says what opens before it is clicked, which a bare thumbnail
   of a document does not */
.paper-sheet::after { content: "PDF"; position: absolute; inset-block-start: 0; inset-inline-end: 0; background: var(--blue-800); color: var(--gold); font-size: .68rem; font-weight: 800; letter-spacing: .06em; padding: .2rem .45rem; border-end-start-radius: 6px; }
.paper-blank { display: grid; place-items: center; height: 100%; padding: 1.3rem; text-align: center; font-weight: 700; line-height: 1.4; color: var(--blue-700); background: repeating-linear-gradient(transparent, transparent 1.5rem, var(--blue-050) 1.5rem, var(--blue-050) calc(1.5rem + 1px)); }
.paper-name { font-weight: 800; line-height: 1.35; }
.paper:hover .paper-name { text-decoration: underline; }
.paper-date { font-size: .86rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.papers + .news-all { border: 1px solid var(--blue-100); border-radius: var(--r); }
@media (max-width: 720px) {
  .papers { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 1rem; }
  .paper-name { font-size: .95rem; }
}

.papers-empty { background: var(--white); border: 2px dashed var(--blue-100); border-radius: var(--r); padding: 2.2rem; max-width: 44rem; }
.papers-empty h3 { margin-bottom: .4rem; }
.papers-empty p { color: var(--ink-soft); }

/* Actions */
.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.action { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r); padding: 1.5rem; display: flex; flex-direction: column; }
.action .num { color: var(--gold); font-weight: 800; font-size: .92rem; letter-spacing: .12em; }
.action h3 { margin: .2rem 0 .4rem; font-size: 1.2rem; }
.action p { color: rgba(255,255,255,.78); flex: 1; font-size: .96rem; }
.action .btn { align-self: flex-start; }
.action-primary { grid-column: span 3; background: var(--gold); border-color: var(--gold); display: grid; grid-template-columns: auto 1fr auto; gap: .4rem 2rem; align-items: center; color: var(--blue-950); }
.action-primary .num { color: rgba(8,16,41,.6); font-size: 2rem; grid-row: span 2; }
.action-primary h3 { color: var(--blue-950); font-size: 1.7rem; margin: 0; }
.action-primary p { color: rgba(8,16,41,.82); margin: 0; }
.action-primary .btn { grid-column: 3; grid-row: 1 / span 2; background: var(--blue-900); color: var(--white); }
.action-primary .btn:hover { background: var(--blue-950); }

.tool { margin-top: 2.2rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r); padding: 1.6rem; }
.tool-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.letter { white-space: pre-wrap; font-family: var(--sans); font-size: .98rem; line-height: 1.75; background: rgba(8,16,41,.35); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 1.2rem; margin: 0 0 1rem; color: rgba(255,255,255,.9); overflow-x: auto; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.contact-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r); padding: 1.5rem; display: flex; flex-direction: column; }
.contact-card h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.contact-card p { color: rgba(255,255,255,.75); font-size: .94rem; flex: 1; }
.contact-card .btn { align-self: flex-start; }

/* Footer */
.foot { background: var(--blue-950); color: rgba(255,255,255,.8); padding: 3.5rem 0 1.5rem; }
.foot-in { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2.5rem; }
.foot h3 { color: var(--gold); font-size: 1.02rem; }
.foot a { color: var(--white); }
.foot .brand { color: var(--white); margin-bottom: 1rem; }
.foot .brand-text small { color: rgba(255,255,255,.6); }
.foot-brand p { color: rgba(255,255,255,.7); max-width: 42ch; }
.foot-links { list-style: none; padding: 0; margin: 0; }
.foot-links li { margin-bottom: .45rem; }
.foot-social { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; gap: .6rem; }
.foot-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.82); transition: background .15s, color .15s, border-color .15s; }
.foot-social a:hover { background: var(--gold); color: var(--blue-950); border-color: var(--gold); }
.foot-social svg { width: 20px; height: 20px; }
.foot-contact { margin-top: 1rem; font-size: .95rem; }
.rights { text-align: center; margin: 2.5rem 0 0; font-size: .85rem; color: rgba(255,255,255,.5); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* Responsive */
@media (max-width: 1080px) {
  .hero-in { grid-template-columns: 1fr; grid-template-areas: "copy" "news" "cta"; gap: 2.2rem; }
  .hero-lead { max-width: none; }
  .hero-cta { flex-direction: row; max-width: none; }
  .hero-cta .cta { flex: 1; }
  .areas { grid-template-columns: repeat(3, 1fr); }
  .crew { grid-template-columns: repeat(3, 1fr); }
  .shots { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .what, .team, .actions { grid-template-columns: repeat(2, 1fr); }
  .action-primary { grid-column: span 2; }
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; inset-inline: 0; top: 72px; background: var(--white); flex-direction: column; align-items: stretch; padding: 1rem 1.25rem 1.5rem; gap: 1rem; border-bottom: 1px solid var(--blue-100); box-shadow: var(--shadow); }
  .nav.open { display: flex; }
  .nav ul { flex-direction: column; gap: .1rem; }
  .nav a { display: block; padding: .6rem 0; font-size: 1.06rem; border-bottom: 1px solid var(--blue-050); }
  .nav-extra { justify-content: space-between; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  /* touch targets: footer and utility links were 24px tall */
  .foot-links a, .foot-contact a, .feature-cap a { display: inline-block; padding: .62rem 0; }
  /* the visible dot stays small; the button around it meets the touch minimum */
  .news-dot { width: 34px; height: 44px; }
  .foot-links li { margin-bottom: 0; }
  .menu-btn { width: 44px; height: 44px; display: grid; place-items: center; }
  .hero-in { padding-top: 1.6rem; }
  .hero h1 { font-size: clamp(2.4rem, 12vw, 3rem); }
  .news-media img, .news-media .vplay { aspect-ratio: 4/3; }
  .arch-item { padding: 1.1rem 1rem 1.2rem; }
  .arch-head { font-size: 1.25rem; }
  .hero-cta { flex-direction: column; }
  .facts { grid-template-columns: 1fr; gap: .9rem; }
  .fact { display: flex; align-items: baseline; gap: .7rem; }
  .fact-n { font-size: 1.5rem; }
  .what, .team, .actions, .areas, .wins, .contact-grid, .foot-in { grid-template-columns: 1fr; }
  /* a whole gallery one picture per row is a very long phone scroll */
  .shots { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .shot figcaption { padding: .45rem .6rem .6rem; font-size: .8rem; }
  .crew { grid-template-columns: repeat(2, 1fr); }
  .crew-img { width: 112px; height: 112px; }
  .action-primary { grid-column: span 1; grid-template-columns: 1fr; }
  .action-primary .num { grid-row: auto; }
  .action-primary h3, .action-primary p, .action-primary .btn { grid-column: 1; grid-row: auto; }
  .action-primary .btn { justify-self: start; }
  .news-tab span { white-space: normal; }
}

/* Restored blocks: why cards, the one-change agenda, launch panels and quotes */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.4rem; }
.card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r); padding: 1.4rem; }
.card p { margin: 0; color: rgba(255,255,255,.78); font-size: .96rem; }
.pull { margin: 1.8rem 0 0; max-width: 52rem; padding: 1.3rem 1.6rem; border-inline-start: 5px solid var(--gold); background: rgba(255,255,255,.07); border-radius: 0 var(--r) var(--r) 0; }
[dir="rtl"] .pull { border-radius: var(--r) 0 0 var(--r); }
.pull p { font-size: 1.22rem; font-weight: 600; margin: 0 0 .5rem; color: var(--white); line-height: 1.45; }
blockquote { margin: 0; }
blockquote cite { font-style: normal; font-size: .89rem; color: var(--gold-2); }
.agenda { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.agenda li { background: var(--white); border: 1px solid var(--blue-100); border-radius: var(--r); padding: 1.3rem; }
.agenda li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.agenda-who { color: var(--blue-600); font-size: .89rem; font-weight: 700; margin-bottom: .2rem; }
.agenda h4 { color: var(--blue-800); margin-bottom: .35rem; }
.agenda p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.2rem; }
.quotes blockquote { background: rgba(255,255,255,.07); border-radius: var(--r); padding: 1.4rem; border-top: 4px solid var(--gold); }
.quotes blockquote p { font-size: 1.06rem; font-weight: 600; margin: 0 0 .5rem; color: var(--white); line-height: 1.5; }
.panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.2rem; }
.panel { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r); padding: 1.4rem; }
.panel h4 { margin-bottom: .1rem; }
.mod { color: var(--gold); font-weight: 600; font-size: .9rem; margin-bottom: .6rem; }
.panel ul { margin: 0; padding-inline-start: 1.1rem; color: rgba(255,255,255,.78); font-size: .95rem; }
.panel li { margin-bottom: .25rem; }
@media (max-width: 1080px) {
  .grid3, .quotes, .panels { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .grid3, .quotes, .panels, .agenda { grid-template-columns: 1fr; }
}

/* --- archive pages: /updates/ and /gallery/ --- */
.crumb { margin: 0 0 1.4rem; font-size: .92rem; font-weight: 700; }
.crumb a { text-decoration: none; }
.crumb a::before { content: "\2190"; margin-inline-end: .4rem; }
[dir="rtl"] .crumb a::before { content: "\2192"; }
.arch-h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin-bottom: .8rem; }
.sec-light .arch-h1 { color: var(--blue-800); }
.arch-head { font-size: 1.5rem; margin: 2.4rem 0 1rem; padding-top: 1.4rem; border-top: 2px solid var(--blue-100); display: flex; align-items: center; gap: .7rem; }
.arch-head:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.sec-deep .arch-head { border-top-color: rgba(255,255,255,.16); }
.album-n { font-size: .8rem; font-weight: 800; background: rgba(255,255,255,.14); color: var(--gold-2); border-radius: 999px; padding: .15rem .6rem; font-variant-numeric: tabular-nums; }
.album + .album { margin-top: 2.6rem; }

/* The gallery feed: one running column of photos with the months beside it.
   The rail sits on the start side, which is the right in Hebrew and the left
   in English, so it is always where the reader's eye begins. */
.feed.has-rail { display: grid; grid-template-columns: 11rem 1fr; gap: 2.4rem; align-items: start; }
.feed-main { min-width: 0; }
.months { position: sticky; top: 92px; }
.months-head { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; color: var(--gold); margin: 0 0 .7rem; }
.months ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.months a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .42rem .7rem; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: .94rem; color: rgba(255,255,255,.8); border-inline-start: 2px solid rgba(255,255,255,.16); transition: background .15s, color .15s, border-color .15s; }
.months a:hover { background: rgba(255,255,255,.08); color: var(--white); border-inline-start-color: var(--gold); }
.months-n { font-size: .76rem; font-weight: 800; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.feed-month { scroll-margin-top: 92px; }
/* The rail takes a column's worth of width, so the feed shows three across
   where the homepage grid shows four. Bounded above 900px on purpose: this
   selector outranks the narrow-screen rules further down, so left unbounded
   it would hold the phone at three columns and push the page sideways. */
@media (min-width: 901px) {
  .feed.has-rail .shots { grid-template-columns: repeat(3, 1fr); }
}
.feed-month + .feed-month { margin-top: 2.6rem; }
/* the event name, which used to be the heading a group sat under */
.shot-tag { display: inline-block; background: rgba(232,185,60,.16); color: var(--gold-2); font-size: .72rem; font-weight: 800; padding: .1rem .5rem; border-radius: 999px; margin-inline-end: .45rem; }
@media (max-width: 900px) {
  /* the rail turns into a strip above the feed rather than squeezing it */
  .feed.has-rail { grid-template-columns: 1fr; gap: 1.2rem; }
  .months { position: static; }
  .months ul { display: flex; flex-wrap: wrap; gap: .4rem; }
  .months a { border-inline-start: 0; border: 1px solid rgba(255,255,255,.2); padding: .3rem .7rem; }
}
.arch { display: grid; gap: 1.4rem; max-width: 760px; }
.arch-item { background: var(--white); border-radius: var(--r); box-shadow: var(--shadow); padding: 1.3rem 1.4rem 1.5rem; }
.arch-item h3 { font-size: 1.3rem; color: var(--blue-800); margin-bottom: .6rem; }
.arch-item p { margin: 0; color: var(--ink-soft); }
.arch-item .news-media { margin: .2rem 0 .9rem; }
.arch-item .news-media img, .arch-item .news-media .vplay { aspect-ratio: 16/9; }