/* ────────────────────────────────────────────────────────────
   Bayit · marketing site stylesheet
   One sheet for all marketing pages (home, manifesto, members, about).
   Tokens reuse the CRM design system's palette; the type, scale and
   motion are tuned for an editorial, emotional, mission-driven site.
   ──────────────────────────────────────────────────────────── */

:root {
  /* aligned to CRM design system D — blue accent, neutral palette, no warm tones */
  --ink:           #0E1117;
  --paper:         #FAFAF9;
  --paper-2:       #F4F4F2;
  --paper-3:       #EBEBE8;
  --cream:         #FFFFFF;
  --line:          #E6E6E3;
  --line-strong:   #D0D0CC;
  --muted:         #6E6E72;
  --muted-2:       #A0A0A2;
  --brand:         #1F5BD8;
  --brand-ink:     #0F3FA6;
  --brand-soft:    #EDF4FB;
  --brand-light:   #3B7DD8;

  /* legacy aliases — every old reference resolves to the blue palette */
  --paper-warm:    var(--paper-2);
  --paper-deep:    var(--paper-3);
  --warm:          var(--brand);
  --warm-soft:     var(--brand-soft);
  --warm-deep:     var(--brand-ink);
  --heart:         var(--brand);

  /* type families — Open Sans Hebrew everywhere; --serif aliased to sans so legacy refs stay safe */
  --sans:  "Open Sans", "Open Sans Hebrew", system-ui, sans-serif;
  --display: "Open Sans", "Open Sans Hebrew", system-ui, sans-serif;
  --serif: "Open Sans", "Open Sans Hebrew", system-ui, sans-serif;
  --mono:  "JetBrains Mono", "Open Sans Hebrew", "Open Sans", ui-monospace, monospace;

  /* scale */
  --t-7xl:  clamp(64px, 12vw, 200px);   /* hero word */
  --t-6xl:  clamp(56px, 9.5vw, 152px);
  --t-5xl:  clamp(44px, 7vw, 112px);
  --t-4xl:  clamp(36px, 5.5vw, 84px);
  --t-3xl:  clamp(28px, 3.6vw, 56px);
  --t-2xl:  clamp(22px, 2.2vw, 36px);
  --t-xl:   clamp(18px, 1.4vw, 22px);
  --t-lg:   17px;
  --t-md:   15px;
  --t-sm:   13px;
  --t-xs:   11px;

  --max:   1280px;
  --pad:   max(24px, 4vw);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; font-size: var(--t-md); line-height: 1.55; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

/* default headings reset — we style intentionally */
h1, h2, h3, h4 { margin: 0; font-family: var(--display); letter-spacing: -0.025em; line-height: 1.02; font-weight: 900; }
p  { margin: 0; }

/* ── selection ────────────────────────────────────────────── */
::selection { background: var(--ink); color: var(--cream); }

/* ── reveal-on-scroll ─────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal-fade { opacity: 0; transition: opacity 1.2s ease; transition-delay: var(--d, 0s); }
.reveal-fade.in { opacity: 1; }
.reveal-mask {
  /* clip-path masked reveal — bigger drama */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s cubic-bezier(.7,0,.2,1);
  transition-delay: var(--d, 0s);
}
.reveal-mask.in { clip-path: inset(0 0 0 0); }

/* line-by-line word stagger for hero */
.word { display: inline-block; overflow: hidden; vertical-align: top; }
.word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(.2,.7,.1,1);
  transition-delay: var(--d, 0s);
}
.word.in > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-fade, .reveal-mask, .word > span {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
    transition: none !important;
  }
}

/* ── progress bar at top ──────────────────────────────────── */
.scroll-progress {
  position: fixed; top: 0; inset-inline: 0;
  height: 2px; background: transparent; z-index: 200;
  pointer-events: none;
}
.scroll-progress > i {
  display: block; height: 100%; width: 0;
  background: var(--warm);
  transition: width .12s linear;
}

/* ── nav ─────────────────────────────────────────────────── */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 20px;
  padding: 18px var(--pad);
  transition: background .35s ease, border-color .35s ease, color .35s ease;
}
.nav.scrolled {
  background: rgba(250, 247, 240, 0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav.on-dark { color: var(--cream); }
.nav.on-dark.scrolled {
  background: rgba(14, 17, 23, 0.78);
  border-bottom-color: rgba(255,255,255,0.08);
  color: var(--cream);
}

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 800;
  font-size: 19px; letter-spacing: -0.02em; color: inherit;
}
.brand .mark {
  width: 28px; height: 28px;
  background: var(--brand); color: #FFF;
  border-radius: 6px; display: grid; place-items: center;
  font-size: 17px; font-weight: 900;
}
.nav.on-dark .brand .mark { background: var(--brand); color: #FFF; }

.nav-links {
  display: flex; gap: 4px; margin-inline-start: 22px;
}
.nav-links a {
  padding: 8px 12px; font-size: 13.5px; font-weight: 500;
  color: inherit; opacity: .82;
  position: relative; border-radius: 6px;
  transition: opacity .2s ease;
}
.nav-links a:hover { opacity: 1; }
.nav-links a.current::after {
  content: ''; position: absolute; insetInline: 12px; bottom: 4px;
  height: 2px; background: var(--warm); border-radius: 2px;
}
.nav-spacer { flex: 1; }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: var(--cream);
  padding: 11px 20px; border-radius: 999px;
  font-weight: 600; font-size: 13.5px;
  transition: transform .2s ease, background .2s ease;
}
.nav-cta:hover { transform: translateY(-1px); background: var(--brand); }
.nav.on-dark .nav-cta { background: var(--brand); color: #FFF; }
.nav.on-dark .nav-cta:hover { background: var(--brand-light); color: #FFF; }
.nav-cta .arrow { direction: ltr; display: inline-block; transition: transform .25s ease; }
.nav-cta:hover .arrow { transform: translateX(4px); }
[dir="rtl"] .nav-cta:hover .arrow { transform: translateX(-4px); }

.lang-toggle {
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid currentColor; opacity: .6;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  font-family: var(--sans); text-transform: uppercase;
  transition: opacity .2s ease;
}
.lang-toggle:hover { opacity: 1; }

/* ── hero ─────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  padding: 110px var(--pad) 80px;
  background: var(--ink); color: var(--cream);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}

/* warm gradient blob */
.hero::before {
  content: '';
  position: absolute;
  inset-inline-end: -10vw; top: -20vh;
  width: 90vw; height: 90vw; max-width: 1100px; max-height: 1100px;
  background: radial-gradient(circle, rgba(59,125,216,0.36) 0%, rgba(31,91,216,0) 60%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  inset-inline-start: -20vw; bottom: -30vh;
  width: 80vw; height: 80vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, rgba(31,91,216,0.28) 0%, rgba(31,91,216,0) 65%);
  pointer-events: none;
}

.hero-inner { position: relative; max-width: var(--max); margin-inline: auto; width: 100%; }

.hero-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  color: var(--brand-light); letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: 32px;
}
.hero-kicker::before, .hero-kicker::after {
  content: ''; display: inline-block; width: 28px; height: 1px; background: var(--brand-light); opacity: .5;
}

.hero-title {
  font-family: var(--display); font-weight: 900;
  font-size: var(--t-7xl);
  line-height: .92; letter-spacing: -0.045em;
  color: var(--cream);
  text-wrap: balance;
}
.hero-title em {
  font-style: normal;
  font-family: var(--display); font-weight: 900;
  color: var(--brand-light);
  letter-spacing: -0.045em;
}
.hero-title .row { display: block; }
.hero-title .accent { color: var(--warm); }

.hero-sub {
  margin-top: 36px;
  font-size: var(--t-xl);
  color: rgba(251, 246, 233, 0.78);
  max-width: 640px; line-height: 1.5;
  text-wrap: pretty;
}

.hero-cta-row {
  margin-top: 44px;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}

.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 32px; border-radius: 999px;
  background: var(--brand); color: #FFF;
  font-family: var(--display); font-weight: 800;
  font-size: 16px; letter-spacing: -0.005em;
  transition: transform .25s cubic-bezier(.2,.7,.1,1), box-shadow .25s ease, background .25s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 12px 28px rgba(31,91,216,0.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 18px 40px rgba(31,91,216,0.45); background: var(--brand-light); }
.btn-primary .arrow { direction: ltr; transition: transform .25s ease; }
.btn-primary:hover .arrow { transform: translateX(4px); }
[dir="rtl"] .btn-primary:hover .arrow { transform: translateX(-4px); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 18px; font-size: 14.5px; font-weight: 600;
  color: var(--cream); opacity: .75;
  border-bottom: 1px solid rgba(251,246,233,0.18);
  transition: opacity .2s ease, border-color .2s ease;
}
.btn-ghost:hover { opacity: 1; border-color: var(--warm); }

/* hero meta strip */
.hero-meta {
  position: absolute; inset-inline: var(--pad); bottom: 32px;
  display: flex; align-items: end; justify-content: space-between; gap: 24px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 600; color: rgba(251,246,233,0.5);
  letter-spacing: 0.18em; text-transform: uppercase;
}
.hero-meta .scroll-hint { display: inline-flex; align-items: center; gap: 10px; }
.hero-meta .scroll-hint::after {
  content: ''; display: inline-block; width: 1px; height: 32px;
  background: rgba(251,246,233,0.3);
  animation: scrollHint 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollHint {
  0%, 100% { transform: scaleY(0.2); opacity: 0.3; }
  50%      { transform: scaleY(1);   opacity: 1;   }
}

/* ── marquee ───────────────────────────────────────────────── */
.marquee-wrap {
  background: var(--ink); color: var(--cream);
  padding: 32px 0; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
.marquee-wrap.on-light { background: var(--paper); color: var(--ink); border-color: var(--line); }
.marquee-wrap.gold     { background: var(--brand); color: #FFF; border-color: rgba(0,0,0,0.05); }
.marquee-wrap.gold .marquee i { opacity: 1; color: rgba(255,255,255,0.7); }
.marquee-wrap.gold .marquee i:hover { color: #FFF; }

.marquee {
  display: flex; gap: 56px; width: max-content;
  animation: marquee 60s linear infinite;
  font-family: var(--display); font-weight: 900; font-size: clamp(32px, 4.4vw, 64px);
  letter-spacing: -0.03em; line-height: 1;
  align-items: center;
  will-change: transform;
}
.marquee-wrap:hover .marquee { animation-play-state: paused; }
.marquee i {
  font-style: normal; opacity: .42; transition: opacity .25s ease, color .25s ease;
}
.marquee i:hover { opacity: 1; color: var(--warm); }
.marquee .dot {
  width: 12px; height: 12px; background: currentColor;
  border-radius: 50%; opacity: .4; flex: 0 0 auto;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
[dir="rtl"] .marquee { animation-name: marqueeRtl; }
@keyframes marqueeRtl {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ── section base ────────────────────────────────────────── */
section { position: relative; }
.section {
  padding: clamp(80px, 11vw, 160px) var(--pad);
  position: relative;
}
.section.dark { background: var(--ink); color: var(--cream); }
.section.warm { background: var(--paper-warm); }
.section.cream { background: var(--cream); }
.section.gold  { background: var(--warm); color: var(--ink); }

.section-inner { max-width: var(--max); margin-inline: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  color: var(--brand-ink); letter-spacing: 0.22em; text-transform: uppercase;
  margin-bottom: 24px;
}
.section.dark .eyebrow { color: var(--brand-light); }
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}

.section-title {
  font-size: var(--t-5xl); line-height: 1; letter-spacing: -0.04em;
  font-weight: 900; max-width: 16ch; text-wrap: balance;
}
.section-title em {
  font-style: normal;
  font-family: var(--display); font-weight: 900;
  color: var(--brand);
  letter-spacing: -0.04em;
}
.section.dark .section-title em { color: var(--brand-light); }
.section-title .accent { color: var(--warm); }

.section-sub {
  margin-top: 28px;
  font-size: var(--t-xl); color: var(--muted); max-width: 56ch;
  line-height: 1.55; text-wrap: pretty;
}
.section.dark .section-sub { color: rgba(251,246,233,0.7); }

/* ── Statement (big single sentence, no chrome) ─────────── */
.statement {
  padding: clamp(120px, 16vw, 220px) var(--pad);
}
.statement.dark { background: var(--ink); color: var(--cream); }
.statement-text {
  max-width: 1100px; margin-inline: auto;
  font-family: var(--display); font-weight: 900;
  font-size: var(--t-6xl);
  line-height: .98; letter-spacing: -0.04em;
  text-wrap: balance;
}
.statement-text em {
  font-family: var(--display); font-style: normal; font-weight: 900;
  color: var(--brand); letter-spacing: -0.04em;
}
.statement-foot {
  margin-top: 36px; max-width: 60ch;
  font-size: var(--t-xl); color: var(--muted);
  text-wrap: pretty;
}
.statement.dark .statement-foot { color: rgba(251,246,233,0.7); }
.statement.dark .statement-text em { color: var(--brand-light); }

/* ── shoulder (the "כתף" mechanic — two halves meeting) ─── */
.shoulder {
  padding: clamp(80px, 12vw, 160px) var(--pad);
  background: var(--paper-warm);
}
.shoulder-grid {
  max-width: var(--max); margin-inline: auto;
  display: grid; gap: 64px;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
@media (max-width: 900px) { .shoulder-grid { grid-template-columns: 1fr; gap: 36px; } }

.shoulder-art {
  aspect-ratio: 1 / 1;
  position: relative;
  background: var(--ink); color: var(--cream);
  border-radius: 24px; overflow: hidden;
}
.shoulder-art img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(20%) contrast(1.05);
  transition: transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.shoulder:hover .shoulder-art img { transform: scale(1.04); }
.shoulder-art .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,17,23,0) 30%, rgba(14,17,23,0.65) 100%);
}
.shoulder-art .caption {
  position: absolute; inset-inline: 24px; bottom: 24px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(251,246,233,0.85);
}

.shoulder-points {
  display: flex; flex-direction: column; gap: 36px;
}
.shoulder-point {
  display: grid; grid-template-columns: 56px 1fr; gap: 24px; align-items: start;
}
.shoulder-point .num {
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  color: var(--warm-deep); direction: ltr; letter-spacing: 0.1em;
  padding-top: 6px;
}
.shoulder-point h3 {
  font-family: var(--display); font-size: clamp(22px, 2vw, 32px);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
  margin-bottom: 10px;
}
.shoulder-point p { color: var(--muted); font-size: var(--t-lg); line-height: 1.55; text-wrap: pretty; }

/* ── numbers (epic poster style) ─────────────────────────── */
.numbers {
  background: var(--ink); color: var(--cream);
  padding: clamp(80px, 11vw, 140px) var(--pad);
}
.numbers-inner {
  max-width: var(--max); margin-inline: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid rgba(255,255,255,0.18);
}
@media (max-width: 900px) { .numbers-inner { grid-template-columns: 1fr; } }
.number {
  padding: 36px 28px;
  border-inline-end: 1px solid rgba(255,255,255,0.18);
  display: flex; flex-direction: column; gap: 8px;
}
.number:last-child { border-inline-end: none; }
@media (max-width: 900px) {
  .number { border-inline-end: none; border-bottom: 1px solid rgba(255,255,255,0.18); }
  .number:last-child { border-bottom: none; }
}
.number .big {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(72px, 11vw, 168px);
  line-height: .9; letter-spacing: -0.05em;
  direction: ltr;
  color: var(--cream);
  position: relative;
}
.number .big sup {
  font-family: var(--sans);
  font-size: 0.16em; font-weight: 700;
  color: var(--brand-light); margin-inline-start: 12px;
  vertical-align: super; top: -0.4em; letter-spacing: 0.18em;
  text-transform: uppercase;
}
.number .label {
  font-size: var(--t-md); color: rgba(251,246,233,0.65);
  font-weight: 500; letter-spacing: 0.02em;
}

/* ── members wall ───────────────────────────────────────── */
.members-section { padding: clamp(80px, 10vw, 120px) var(--pad); background: var(--paper); }
.members-head {
  max-width: var(--max); margin: 0 auto 48px;
  display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.members-grid {
  max-width: var(--max); margin-inline: auto;
  display: grid; gap: 12px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) { .members-grid { grid-template-columns: repeat(2, 1fr); } }

.member-card {
  position: relative; overflow: hidden;
  border-radius: 14px;
  background: var(--paper-warm);
  aspect-ratio: 4 / 5;
  cursor: pointer;
}
.member-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(10%);
  transition: transform 1.1s cubic-bezier(.2,.7,.1,1), filter .6s ease;
}
.member-card:hover img { transform: scale(1.06); filter: grayscale(0%); }
.member-card .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,17,23,0) 40%, rgba(14,17,23,0.78) 100%);
}
.member-card .info {
  position: absolute; inset-inline: 20px; bottom: 20px;
  color: var(--cream);
  transform: translateY(0); transition: transform .35s ease;
}
.member-card .info .name {
  font-family: var(--display); font-size: 22px; font-weight: 800;
  letter-spacing: -0.015em; line-height: 1.1;
}
.member-card .info .role {
  font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  color: var(--brand-soft); letter-spacing: 0.18em; text-transform: uppercase;
  margin-top: 4px;
}
.member-card .info .tag {
  margin-top: 14px; font-size: 13px; line-height: 1.45;
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
  max-width: 220px;
}
.member-card:hover .info .tag { opacity: 1; transform: none; }

/* avatar fallback (no image yet) — uses member colour */
.member-card.no-photo {
  display: flex; align-items: end; padding: 24px;
  background-image: linear-gradient(180deg, transparent 30%, rgba(14,17,23,0.55) 100%), var(--bg, var(--paper-warm));
  color: var(--cream);
}
.member-card.no-photo .info { position: static; }
.member-card.no-photo::after {
  content: attr(data-initials);
  position: absolute; inset-inline-start: 50%; top: 32%; transform: translate(-50%, -50%);
  font-family: var(--display); font-size: 96px; font-weight: 900;
  color: rgba(255,255,255,0.36); letter-spacing: -0.02em; pointer-events: none;
}
[dir="rtl"] .member-card.no-photo::after { transform: translate(50%, -50%); }

/* ── voices ─────────────────────────────────────────────── */
.voices-section { padding: clamp(80px, 11vw, 140px) var(--pad); background: var(--cream); }
.voices-grid {
  max-width: var(--max); margin: 60px auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 900px) { .voices-grid { grid-template-columns: 1fr; } }
.voice {
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: 18px; padding: 28px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative; overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.voice:hover {
  transform: translateY(-4px);
  border-color: var(--brand);
  box-shadow: 0 18px 40px rgba(31,91,216,0.16);
}
.voice::before {
  content: '“';
  position: absolute; inset-inline-start: 22px; top: -6px;
  font-family: var(--display); font-size: 120px; line-height: 1;
  color: var(--brand); opacity: .18;
  pointer-events: none; font-weight: 900;
}
.voice q {
  display: block; quotes: none;
  font-family: var(--sans); font-size: 18px; line-height: 1.5;
  color: var(--ink); text-wrap: pretty; padding-top: 28px;
  font-weight: 500;
}
.voice q::before, .voice q::after { content: ''; }
.voice .who {
  display: flex; align-items: center; gap: 12px;
  padding-top: 16px; border-top: 1px dashed var(--line-strong);
}
.voice .who .ava {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; color: #FFF; font-weight: 700; font-size: 14px;
  flex: 0 0 auto;
}
.voice .who .name { font-weight: 700; font-size: 14px; }
.voice .who .role {
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--muted); text-transform: uppercase;
}

/* ── rules teaser (10 rules in a 2-col layout) ──────────── */
.rules-section { padding: clamp(80px, 11vw, 140px) var(--pad); background: var(--paper); }
.rules-grid {
  max-width: var(--max); margin: 56px auto 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px;
  border-top: 1px solid var(--ink);
}
@media (max-width: 900px) { .rules-grid { grid-template-columns: 1fr; } }
.rule {
  padding: 28px 0; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: baseline;
  cursor: pointer; transition: padding .25s ease;
}
.rule:hover { padding-inline-start: 12px; }
.rule .nm {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--warm-deep); letter-spacing: 0.1em; direction: ltr;
}
.rule .title {
  font-family: var(--display); font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
}
.rule .title .icon {
  font-size: 0.85em; opacity: .8;
}
.rule .desc {
  grid-column: 2; margin-top: 6px;
  font-size: 14.5px; color: var(--muted); line-height: 1.55;
  text-wrap: pretty;
}
.rules-foot {
  max-width: var(--max); margin: 36px auto 0;
  display: flex; justify-content: center;
}

/* ── full-bleed image moment ─────────────────────────────── */
.bleed {
  height: 78vh; min-height: 540px;
  position: relative; overflow: hidden;
  background: var(--ink);
}
.bleed img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08);
  transition: transform 2.4s cubic-bezier(.2,.6,.2,1);
}
.bleed.in img { transform: scale(1); }
.bleed::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,17,23,0.15) 0%, rgba(14,17,23,0.55) 100%);
}
.bleed .bleed-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--cream);
  padding: var(--pad);
}
.bleed .bleed-text h2 {
  font-size: var(--t-5xl); line-height: 1; max-width: 18ch;
  letter-spacing: -0.04em; text-wrap: balance; color: var(--cream);
}
.bleed .bleed-text h2 em {
  font-family: var(--display); font-weight: 900; font-style: normal;
  color: var(--brand-light); letter-spacing: -0.04em;
}
.bleed .bleed-text p {
  margin-top: 20px; font-size: var(--t-xl);
  color: rgba(251,246,233,0.84); max-width: 60ch;
  text-wrap: pretty;
}

/* ── invite (CTA block) ─────────────────────────────────── */
.invite {
  padding: clamp(80px, 11vw, 140px) var(--pad);
  background: var(--paper-warm);
  position: relative; overflow: hidden;
}
.invite::before {
  content: ''; position: absolute; inset-inline-end: -10vw; top: -20vh;
  width: 70vw; height: 70vw; max-width: 700px; max-height: 700px;
  background: radial-gradient(circle, rgba(31,91,216,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.invite-inner {
  max-width: 1080px; margin-inline: auto;
  position: relative;
}
.invite h2 {
  font-size: var(--t-5xl); line-height: 1; letter-spacing: -0.04em;
  font-weight: 900; max-width: 18ch; text-wrap: balance;
}
.invite h2 em {
  font-style: normal;
  font-family: var(--display); font-weight: 900; color: var(--brand);
  letter-spacing: -0.04em;
}
.invite p {
  margin-top: 28px; font-size: var(--t-xl); color: var(--muted);
  max-width: 60ch; line-height: 1.55; text-wrap: pretty;
}
.invite-form {
  margin-top: 40px;
  display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap;
}
.invite-form input {
  flex: 1; min-width: 260px;
  padding: 18px 22px; font: inherit; font-size: 16px;
  background: var(--paper); border: 1.5px solid var(--line-strong);
  border-radius: 999px; color: var(--ink);
  transition: border-color .2s ease, background .2s ease;
}
.invite-form input::placeholder { color: var(--muted-2); }
.invite-form input:focus { outline: none; border-color: var(--brand); background: #FFF; }
.invite-foot {
  margin-top: 18px; font-size: 13.5px; color: var(--muted);
}

/* ── footer ─────────────────────────────────────────────── */
.foot {
  background: var(--ink); color: var(--cream);
  padding: 56px var(--pad) 24px;
}
.foot-top {
  max-width: var(--max); margin-inline: auto;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px;
}
@media (max-width: 900px) { .foot-top { grid-template-columns: 1fr 1fr; } }
.foot-col h4 {
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--brand-light); font-weight: 700;
  margin-bottom: 14px;
}
.foot-col a {
  display: block; padding: 6px 0; font-size: 14.5px;
  color: rgba(251,246,233,0.78);
  transition: color .2s ease;
}
.foot-col a:hover { color: var(--warm); }
.foot-tag { font-size: 14.5px; color: rgba(251,246,233,0.65); max-width: 320px; line-height: 1.55; }
.foot-bot {
  max-width: var(--max); margin: 32px auto 0;
  padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  color: rgba(251,246,233,0.4); direction: ltr;
}

/* ── cursor follower ────────────────────────────────────── */
.cursor-dot { display: none !important; }

/* ── utility ─────────────────────────────────────────────── */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── lang-aware bits (visible per html[lang]) ─────────────── */
html[lang="he"] .show-en { display: none; }
html[lang="en"] .show-he { display: none; }

/* page-specific page headers (used by manifesto.html / members.html / about.html) */
.page-header {
  padding: 160px var(--pad) 80px;
  background: var(--ink); color: var(--cream);
  position: relative; overflow: hidden;
}

/* ── print ──────────────────────────────────────────────────
   Apply globally so every marketing page prints cleanly without
   needing its own -print.html. Flattens reveal animations, forces
   desktop grids, hides scroll/fixed chrome, freezes the marquee. */
@page { size: 1280px 1700px; margin: 0; }
@media print {
  html, body {
    background: var(--paper); overflow: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .scroll-progress, .cursor-dot, .nav { display: none !important; }

  /* force every reveal-* element to its final visible state */
  .reveal, .reveal-fade, .reveal-mask, .word, .word > span, .bleed,
  [data-countup] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }
  /* .word has overflow:hidden by default — release it for print */
  .word { overflow: visible !important; }

  /* force desktop layouts — print container width crosses our 900px
     breakpoint and otherwise the grids collapse to one column */
  .shoulder-grid    { grid-template-columns: 1fr 1fr !important; gap: 48px !important; }
  .members-grid     { grid-template-columns: repeat(4, 1fr) !important; }
  .voices-grid      { grid-template-columns: repeat(3, 1fr) !important; }
  .rules-grid       { grid-template-columns: repeat(2, 1fr) !important; }
  .numbers-inner    { grid-template-columns: repeat(3, 1fr) !important; }
  .foot-top         { grid-template-columns: 1.6fr 1fr 1fr 1fr !important; }
  .invite-inner > div, .step { grid-template-columns: 120px 1fr 1fr !important; }

  /* marquee: kill scroll, show a contained static row */
  .marquee-wrap { overflow: hidden !important; padding: 28px var(--pad) !important; }
  .marquee {
    animation: none !important;
    transform: none !important;
    width: 100% !important; max-width: 100% !important;
    flex-wrap: wrap; justify-content: center; align-items: baseline;
    gap: 28px !important;
    font-size: 26px !important;
  }
  .marquee i { opacity: 1 !important; white-space: nowrap; }
  .marquee .dot { display: none !important; }

  /* hero: cap height and drop the bottom meta bar */
  .hero { min-height: auto !important; padding: 80px var(--pad) 100px !important; }
  .hero-meta { display: none !important; }

  /* full-bleed image keeps an immersive but printable height */
  .bleed { height: 1100px !important; min-height: 1100px !important; }
  .bleed img { transform: scale(1) !important; }

  /* keep cards from splitting across page breaks */
  .member-card, .voice, .rule, .commandment, .step,
  .number, .shoulder-point {
    break-inside: avoid; page-break-inside: avoid;
  }

  /* sticky elements need to un-stick for paged output */
  .filters { position: static !important; }
  .commandment .lead { position: static !important; }
  .nav { position: static !important; }

  /* interactive button shadows look strange when flattened */
  .btn-primary, .invite-form input, .invite-form button,
  .nav-cta, .voice {
    box-shadow: none !important;
  }
}
.page-header::before {
  content: ''; position: absolute; inset-inline-end: -20%; top: -20%;
  width: 70vw; height: 70vw; max-width: 800px; max-height: 800px;
  background: radial-gradient(circle, rgba(59,125,216,0.28) 0%, transparent 60%);
  pointer-events: none;
}
.page-header .inner { max-width: var(--max); margin-inline: auto; position: relative; }
.page-header h1 {
  font-size: var(--t-6xl); font-weight: 900; line-height: .95;
  letter-spacing: -0.045em; color: var(--cream); max-width: 18ch; text-wrap: balance;
}
.page-header h1 em {
  font-family: var(--display); font-style: normal; font-weight: 900; color: var(--brand-light);
  letter-spacing: -0.045em;
}
.page-header p {
  margin-top: 28px; font-size: var(--t-xl); color: rgba(251,246,233,0.7);
  max-width: 60ch; text-wrap: pretty;
}