/* ============================================================
   TIKVA — Warm Editorial
   Production stylesheet. Tokens are lifted verbatim from the
   Claude Design handoff; components rebuilt from the comp's
   inline styles. One accent hue per section; green = primary.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root {
  /* Brand core (sampled from the logo) */
  --tikva-gold:#F4B63F; --tikva-green:#63B551; --tikva-pink:#D32F80;
  --tikva-violet:#694C84; --tikva-blue:#18A8D8; --tikva-coral:#DB7042;
  --tikva-ink:#1A1A18;

  /* Tints */
  --gold-tint:#FDF3DC; --green-tint:#E7F4E2; --pink-tint:#FBE4F0;
  --violet-tint:#EBE6F2; --blue-tint:#DEF2FA; --coral-tint:#FCEAE0;

  /* Shades */
  --gold-deep:#C98A17; --green-deep:#3E8A2E; --pink-deep:#A61F63;
  --violet-deep:#4C3563; --blue-deep:#0F7AA1; --coral-deep:#B8501F;

  /* WCAG AA accessible brand colours. --tikva-green (#63B551) is only 2.54:1 on
     white, so it can never carry text on a light ground, sit behind white text,
     or serve as a band background under white copy.
     --green-text:        3.63:1 on white — LARGE display text only (>=24px, or
                          >=18.66px bold). Hero h1 accent (clamped min 44px).
     --green-text-strong: 5.15:1 on white — small text (eyebrows) and, as
                          --green-action, the .btn--primary / .donate band fill
                          behind white copy.
     --green-action-hover:6.56:1 behind white text.
     --gold-text:         3.50:1 on --mist — the 44px stat value. --gold-deep
                          (2.67:1) is kept for .btn--secondary:hover, which
                          carries ink, not white.
     --tikva-green / --tikva-blue / --tikva-gold stay the brand colours wherever
     they are a fill rather than a text-on-background pair. */
  --green-text:#46982F; --green-text-strong:#377C27;
  --green-action:var(--green-text-strong); --green-action-hover:#2E6A22;
  --gold-text:#AE7710;

  /* Neutrals — clean white base, cool light for sunk sections (no beige) */
  --white:#FFFFFF; --paper:#FFFFFF; --mist:#F1F5EF; --sand:#F1F5EF;
  --gray-100:#EEF1EC; --gray-200:#DFE4DC; --gray-300:#C6CDC1;
  --gray-400:#8F9589; --gray-500:#6B7065; --gray-600:#4A4F45;
  --gray-700:#2E322B; --ink:#161A14;

  /* Dark surfaces (bold sections restored from the original site) */
  --ink-deep:#111510; --vision-bg:#10160E; --vision-glow:rgba(99,181,81,.5);

  /* Semantic */
  --text-strong:var(--ink); --text-body:var(--gray-700);
  /* --text-subtle was --gray-400 (#8F9589): 2.79:1 on --mist, 3.08:1 on white —
     failed AA at the 12.5-13px sizes it is used at (.stats__source, .form-note).
     #63685D is 5.19:1 on --mist and 5.72:1 on white. */
  --text-muted:var(--gray-500); --text-subtle:#63685D;
  --surface-page:var(--paper); --surface-card:var(--white); --surface-sunk:var(--mist);
  --border-soft:var(--gray-200); --border-strong:var(--gray-300); --border-ink:var(--ink);
  --focus-ring:var(--tikva-blue);
  --danger:var(--pink-deep);

  /* Type */
  --font-display:'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Radii */
  --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --radius-xl:32px; --radius-pill:999px;

  /* Borders */
  --border-bold:2.5px;

  /* Shadows (cool neutral, tinted to the ink) */
  --shadow-xs:0 1px 2px rgba(20,28,16,.06);
  --shadow-sm:0 2px 10px rgba(20,28,16,.08);
  --shadow-md:0 10px 28px rgba(20,28,16,.10);
  --shadow-lg:0 22px 50px rgba(20,28,16,.16);
  --shadow-brand:0 14px 30px rgba(62,138,46,.30);
  --shadow-pink:0 14px 30px rgba(211,47,128,.24);

  /* Motion */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:140ms; --dur-base:220ms; --dur-slow:380ms;

  --container:1200px;
}

/* ---------- RESET / BASE ---------- */
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-body);
  color:var(--text-body);
  background:var(--surface-page);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img, picture, svg { display:block; max-width:100%; }
a { color:var(--pink-deep); }
h1,h2,h3,h4 { font-family:var(--font-display); color:var(--ink); line-height:1.1; }
:target { scroll-margin-top:96px; }

/* Skip link */
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 var(--radius-md) 0;
  font-family:var(--font-display); font-weight:700; text-decoration:none;
}
.skip-link:focus { left:0; }

/* Focus visibility (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline:3px solid var(--focus-ring); outline-offset:2px; border-radius:4px;
}
::selection { background:var(--pink-tint); color:var(--ink); }

/* ---------- LAYOUT ---------- */
.container { max-width:var(--container); margin:0 auto; padding-left:32px; padding-right:32px; }
.container--md { max-width:1000px; }
.container--lg { max-width:1120px; }
.section { padding-top:96px; padding-bottom:96px; }
.eyebrow {
  font-family:var(--font-display); font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:.12em; margin:0 0 14px;
}

/* ---------- BUTTONS ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-weight:700; text-decoration:none;
  border-radius:var(--radius-pill); border:2.5px solid transparent; cursor:pointer;
  transition:transform var(--dur-base) var(--ease-bounce), box-shadow var(--dur-base) var(--ease-out), background var(--dur-fast) var(--ease-out);
  white-space:nowrap;
}
.btn--sm { padding:9px 20px; font-size:14px; }
.btn--md { padding:13px 26px; font-size:15px; }
.btn--lg { padding:16px 32px; font-size:16px; }
.btn--primary { background:var(--green-action); color:#fff; box-shadow:var(--shadow-brand); }
.btn--primary:hover { background:var(--green-action-hover); transform:translateY(-2px); }
.btn--secondary { background:var(--tikva-gold); color:var(--ink); box-shadow:0 12px 28px rgba(244,182,63,.30); }
/* Keep ink on hover: white on --gold-deep is only 2.94:1. Ink is 5.92:1. */
.btn--secondary:hover { background:var(--gold-deep); color:var(--ink); transform:translateY(-2px); }
.btn--outline { background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--outline:hover { background:var(--ink); color:#fff; transform:translateY(-2px); }
.btn--white { background:#fff; color:var(--ink); box-shadow:var(--shadow-md); }
.btn--white:hover { transform:translateY(-2px); }
.btn--pink { background:var(--tikva-pink); color:#fff; box-shadow:var(--shadow-pink); }
.btn--pink:hover { background:var(--pink-deep); transform:translateY(-2px); }
.btn svg { width:1.15em; height:1.15em; }
.btn:active { transform:scale(.97); }

/* ---------- HEADER ---------- */
.site-header {
  position:sticky; top:0; z-index:40;
  border-bottom:1px solid var(--border-soft);
}
/* Blur lives on a pseudo-element, NOT the header itself: backdrop-filter on
   the header would make it a containing block and trap the fixed mobile drawer. */
.site-header::before {
  content:""; position:absolute; inset:0;
  background:rgba(255,255,255,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.site-header__inner {
  position:relative;
  max-width:var(--container); margin:0 auto; padding:14px 32px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand { display:inline-flex; align-items:center; }
.brand img { height:52px; width:auto; }
.nav { display:flex; align-items:center; gap:30px; }
.nav a.nav__link {
  font-family:var(--font-display); font-weight:600; font-size:15px;
  color:var(--ink); text-decoration:none; position:relative; padding:4px 0;
}
.nav a.nav__link::after {
  content:""; position:absolute; left:0; bottom:-2px; height:2.5px; width:0;
  background:var(--tikva-green); border-radius:2px; transition:width var(--dur-base) var(--ease-out);
}
.nav a.nav__link:hover::after, .nav a.nav__link:focus-visible::after { width:100%; }

/* Language toggle */
.lang {
  display:inline-flex; align-items:center; border:2px solid var(--border-strong);
  border-radius:var(--radius-pill); overflow:hidden; font-family:var(--font-display); font-weight:700; font-size:13px;
}
/* The header is translucent (rgba(255,255,255,.86) on ::before), so a sticky
   header over the dark vision band resolves to ~#DEDEDD, not white. At that
   background --text-muted (#6B7065) is only 3.78:1 on the inactive language
   link. --gray-600 holds 6.25:1 there and 8.42:1 on white. */
.lang a { padding:5px 11px; color:var(--gray-600); text-decoration:none; }
.lang a[aria-current="true"] { background:var(--ink); color:#fff; }

/* Mobile nav toggle + drawer */
.nav-toggle { display:none; background:none; border:none; padding:8px; cursor:pointer; color:var(--ink); }
.nav-toggle svg { width:28px; height:28px; }
.nav-backdrop { display:none; }

@media (max-width:900px) {
  .nav-toggle { display:inline-flex; }
  .nav {
    position:fixed; inset:0 0 0 auto; width:min(320px,84vw);
    flex-direction:column; align-items:flex-start; gap:8px;
    background:var(--paper); padding:88px 28px 28px; z-index:60;
    transform:translateX(100%);
    /* visibility:hidden while closed keeps the off-canvas links out of the
       Tab order and the accessibility tree (closed-drawer focus leak); the
       transition delay lets the slide-out finish before the drawer hides. */
    visibility:hidden;
    transition:transform var(--dur-base) var(--ease-out),
               visibility 0s linear var(--dur-base);
    box-shadow:var(--shadow-lg); overflow-y:auto;
  }
  .nav[data-open="true"] { transform:none; visibility:visible; transition-delay:0s; }
  .nav a.nav__link { font-size:20px; padding:10px 0; }
  .nav .btn { margin-top:8px; }
  .nav-backdrop[data-open="true"] {
    display:block; position:fixed; inset:0; background:rgba(26,26,24,.4); z-index:50;
  }
  body[data-nav-open="true"] { overflow:hidden; }
  /* Lift the header (and its child drawer) above the backdrop while open.
     The drawer is nested in the sticky header, so raise the header's
     stacking context rather than the drawer alone. */
  body[data-nav-open="true"] .site-header { z-index:70; }
}

/* ---------- HERO ---------- */
.hero { max-width:var(--container); margin:0 auto; padding:56px 32px 64px;
  display:grid; grid-template-columns:1.06fr 1fr; gap:60px; align-items:center; }
.hero__copy { animation:ed-rise .7s var(--ease-out) both; }
@media (min-width:1001px){ .hero__media { max-width:440px; margin-left:auto; } }
.hero h1 {
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(44px,5.4vw,76px); line-height:1.02; letter-spacing:-.025em;
  color:var(--ink); margin:16px 0 22px; text-wrap:balance;
}
.hero h1 .accent { color:var(--green-text); }
.hero__lead { font-size:20px; line-height:1.62; color:var(--text-muted); max-width:480px; margin:0 0 32px; }
.hero__eyebrow { color:var(--tikva-pink); }
.hero__actions { display:flex; gap:14px; flex-wrap:wrap; }
.hero__media { position:relative; animation:ed-fade .9s var(--ease-out) both; }
.hero__frame { border-radius:var(--radius-xl); overflow:hidden; border:3px solid var(--ink); box-shadow:var(--shadow-lg); }
.hero__frame img { width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block; }
.hero__badge {
  position:absolute; bottom:-24px; left:-24px; background:#fff; border-radius:var(--radius-lg);
  padding:16px 22px; box-shadow:6px 6px 0 var(--tikva-pink); border:2.5px solid var(--ink);
  display:flex; align-items:center; gap:13px; max-width:80%;
}
.hero__badge-icon {
  width:46px; height:46px; border-radius:50%; background:var(--pink-tint); color:var(--tikva-pink);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.hero__badge-title { font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--ink); }
.hero__badge-sub { font-size:13px; color:var(--text-muted); }

/* ---------- STATS ---------- */
.stats { background:var(--surface-sunk); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }
.stats__inner { max-width:1120px; margin:0 auto; padding:44px 32px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px; }
.stat { flex:1 1 160px; }
.stat__value { font-family:var(--font-display); font-weight:800; font-size:clamp(32px,4vw,44px); line-height:1; letter-spacing:-.02em; }
.stat__label { font-size:14px; color:var(--text-muted); margin-top:8px; }
.stat--pink .stat__value { color:var(--tikva-pink); }
.stat--green .stat__value { color:var(--green-deep); }
.stat--gold .stat__value { color:var(--gold-text); }        /* gold-deep was 2.67:1 on --mist */
.stat--blue .stat__value { color:var(--blue-deep); }        /* tikva-blue was 2.50:1 on --mist */
.stats__source { max-width:1120px; margin:0 auto; padding:4px 32px 40px; text-align:center; font-size:12.5px; color:var(--text-subtle); }

/* ---------- MISSION ---------- */
.mission { max-width:1000px; margin:0 auto; padding:96px 32px 72px; text-align:center; }
.mission .eyebrow { color:var(--blue-deep); }               /* tikva-blue was 2.75:1 on white */
/* The 404 pages reuse .mission and their main heading is an <h1>. */
.mission h1, .mission h2 {
  font-family:var(--font-display); font-weight:800; font-size:clamp(32px,4vw,46px);
  line-height:1.12; letter-spacing:-.02em; margin:0 auto; max-width:820px; text-wrap:balance;
}
.mission__note { margin-top:22px; font-size:16px; color:var(--text-muted); }

/* ---------- VISION (dark band with a green glow, restored from the original) ---------- */
.vision { position:relative; background:var(--vision-bg); overflow:hidden; }
.vision::before {
  content:""; position:absolute; left:50%; top:50%; width:min(720px,88%); height:340px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(ellipse at center, var(--vision-glow), transparent 70%);
  opacity:.55; pointer-events:none;
}
.vision__inner { position:relative; max-width:900px; margin:0 auto; padding:104px 32px; text-align:center; }
.vision .eyebrow { color:var(--tikva-green); }
.vision h2 {
  font-family:var(--font-display); font-weight:800; color:#fff;
  font-size:clamp(29px,3.9vw,46px); line-height:1.2; letter-spacing:-.02em; text-wrap:balance; margin:6px auto 0; max-width:800px;
}
.vision h2 .accent { color:var(--tikva-green); }
.vision__note { margin-top:22px; font-size:16px; color:rgba(255,255,255,.62); }

/* ---------- PROGRAMMES ---------- */
.programmes { max-width:var(--container); margin:0 auto; padding:100px 32px 104px; }
.programmes__head { max-width:720px; margin:0 0 40px; }
.programmes__head .eyebrow { color:var(--green-text-strong); }  /* green-deep was 4.30:1 on white */
.programmes__head h2 { font-size:clamp(30px,3.6vw,42px); font-weight:800; letter-spacing:-.02em; text-wrap:balance; }
.programmes__sub { font-size:17px; line-height:1.6; color:var(--text-muted); max-width:52ch; margin:14px 0 0; }
/* Programmes as vivid full-bleed cards that PIN and STACK as you scroll — each a
   saturated colour world, photo-forward, no icon badges, no numbers. */
.progstack { display:flex; flex-direction:column; gap:5vh; margin-top:44px; }
.prog {
  position:sticky; top:calc(90px + var(--i) * 18px);
  min-height:min(560px,56vh); border-radius:34px; overflow:hidden;
  display:grid; grid-template-columns:1.03fr 1fr;
  background:var(--_panel); box-shadow:0 30px 68px rgba(26,26,16,.20);
}
.prog--sala    { --_panel:#5FB750; --_fg:#0F2410; --_sub:rgba(15,36,16,.82); --_chip:rgba(15,36,16,.26); --_accent:#063014; }
.prog--thrive  { --_panel:#F3B33A; --_fg:#2E1D03; --_sub:rgba(46,29,3,.82);  --_chip:rgba(46,29,3,.26);  --_accent:#523102; }
.prog--shelter { --_panel:#C82974; --_fg:#FFFFFF; --_sub:rgba(255,255,255,.96);--_chip:rgba(255,255,255,.44);--_accent:#FFFFFF; }
.prog--missions{ --_panel:#1EA0CE; --_fg:#062637; --_sub:rgba(6,38,55,.95);  --_chip:rgba(6,38,55,.26);  --_accent:#022330; }
.prog__panel { padding:clamp(28px,3.4vw,56px); display:flex; align-items:center; }
.prog__label { font-family:var(--font-display); font-weight:700; font-size:12.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--_accent); margin:0 0 14px; display:inline-flex; align-items:center; gap:10px; }
.prog__label::before { content:""; width:26px; height:3px; background:var(--_accent); border-radius:3px; }
.prog__name { font-family:var(--font-display); font-weight:800; font-size:clamp(40px,6vw,92px); line-height:.9;
  letter-spacing:-.035em; margin:0 0 16px; color:var(--_fg); text-wrap:balance; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.prog__badge { font-family:var(--font-display); font-weight:800; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.08em; padding:6px 12px; border-radius:8px; background:rgba(255,255,255,.92); color:var(--ink); }
.prog__desc { font-size:clamp(15.5px,1.15vw,18px); line-height:1.55; color:var(--_sub); max-width:46ch; margin:0; }
.prog__chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.prog__chips span { font-family:var(--font-display); font-weight:600; font-size:13px; padding:8px 15px;
  border-radius:999px; border:1.6px solid var(--_chip); color:var(--_fg); }
.prog__media { position:relative; overflow:hidden; }
.prog__media img { width:100%; height:100%; object-fit:cover; display:block; }
/* The glass chip floats over a PHOTO, so its effective background is whatever
   the photo happens to be. At the old .42 scrim, white text landed at 2.76:1
   over a bright photo region. A .72 scrim keeps it >=4.5:1 even against pure
   white (7.51:1 for strong, 5.9:1 for the .86-alpha sub-line). */
.prog__glass { position:absolute; left:20px; bottom:20px; padding:13px 17px; border-radius:16px;
  background:rgba(18,19,13,.72); backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px);
  border:1px solid rgba(255,255,255,.26); display:flex; flex-direction:column; gap:2px; max-width:78%; }
.prog__glass strong { font-family:var(--font-display); font-weight:800; font-size:15.5px; color:#fff; letter-spacing:-.01em; }
.prog__glass span { font-size:12px; color:rgba(255,255,255,.86); }
@media (max-width:860px){
  .prog { grid-template-columns:1fr; min-height:auto; top:76px; border-radius:26px; }
  .prog__media { min-height:280px; order:-1; }
  .prog__name { font-size:clamp(38px,11vw,64px); }
}
/* Short / landscape viewports: a pinned card can fully cover the previous card
   before its description scrolls into the pinned band, hiding content (WCAG
   1.4.10 Reflow at 320x256). Fall back to normal document flow there. */
@media (max-height:640px), (orientation:landscape) and (max-width:900px){
  .prog { position:static; top:auto; }
  .progstack { gap:28px; }
}
/* The hero h1 clamp floors at 44px; its min-content (esp. the Spanish headline)
   exceeds a 320-360px content box and, with body{overflow-x:hidden}, gets
   clipped rather than scrolled. Lower the floor on very narrow phones. */
@media (max-width:380px){
  .hero h1 { font-size:clamp(34px,9vw,44px); }
}
.badge {
  display:inline-block; font-family:var(--font-display); font-weight:800; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.09em; padding:4px 9px; border-radius:6px;
  background:var(--tikva-gold); color:var(--ink);
}

/* ---------- STORY ---------- */
.story { background:var(--surface-sunk); }
.story__inner { max-width:1120px; margin:0 auto; padding:88px 32px;
  display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center; }
.story__media { border-radius:var(--radius-xl); overflow:hidden; border:3px solid var(--ink); box-shadow:var(--shadow-md); }
.story__media img { width:100%; height:auto; aspect-ratio:5/4; object-fit:cover; display:block; }
.story .eyebrow { color:var(--pink-deep); }                 /* tikva-pink was 4.24:1 on --mist */
.story__quotemark { color:var(--tikva-pink); font-size:56px; line-height:.6; font-family:var(--font-display); }
.story blockquote {
  font-family:var(--font-display); font-weight:600; font-size:clamp(23px,2.8vw,31px);
  line-height:1.34; color:var(--ink); margin:8px 0 10px; letter-spacing:-.01em; text-wrap:balance;
}
.story__ref { font-family:var(--font-display); font-weight:700; color:var(--pink-deep); font-size:15px; margin-bottom:22px; }
.story__body { font-size:16.5px; line-height:1.7; color:var(--text-body); margin:0 0 20px; }
.story__author { display:flex; align-items:center; gap:13px; }
.avatar {
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; color:#fff; font-size:18px; flex-shrink:0;
  background:var(--tikva-violet);
}
.story__author-name { font-family:var(--font-display); font-weight:700; color:var(--ink); }
.story__author-role { font-size:14px; color:var(--text-muted); }

/* ---------- DONATE BAND ---------- */
/* White copy on --tikva-green ran 2.37-2.54:1. --green-action gives 5.15:1. */
.donate { background:var(--green-action); }
.donate__inner { max-width:1000px; margin:0 auto; padding:80px 32px;
  display:grid; grid-template-columns:1.15fr 1fr; gap:48px; align-items:center; }
.donate h2 { font-family:var(--font-display); font-weight:800; font-size:clamp(32px,4vw,44px); color:#fff; margin:0 0 14px; line-height:1.08; }
.donate p { font-size:19px; line-height:1.55; color:rgba(255,255,255,.92); margin:0 0 28px; max-width:460px; }
.donate__card { background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:30px; }
.donate__note { font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.95); margin:18px 0 0; max-width:460px; }
.donate__note a { color:#fff; text-decoration:underline; text-underline-offset:2px; }
.donate__card-label { font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--text-muted); }
.donate__amount { font-family:var(--font-display); font-weight:800; font-size:52px; line-height:1; color:var(--ink); margin:10px 0 4px; }
.donate__amount span { font-size:20px; color:var(--text-muted); font-weight:700; }
.donate__card p { font-size:15px; color:var(--text-muted); margin:6px 0 20px; line-height:1.5; }

/* ---------- CONNECT (newsletter + contact) ---------- */
/* Stay connected / Get in touch — two split sections, photo beside the form,
   alternating sides. */
.signup { border-top:1px solid var(--border-soft); background:var(--surface-card); }
.signup--alt { background:var(--surface-sunk); }
.signup__inner { max-width:1120px; margin:0 auto; padding:84px 32px;
  display:grid; grid-template-columns:.92fr 1.08fr; gap:56px; align-items:stretch; }
.signup--alt .signup__inner { grid-template-columns:1.08fr .92fr; }
.signup__media { border-radius:var(--radius-xl); overflow:hidden; border:3px solid var(--ink);
  box-shadow:var(--shadow-md); min-height:440px; }
.signup__media img { width:100%; height:100%; object-fit:cover; display:block; }
.signup__body { align-self:center; }
.signup .eyebrow { color:var(--coral-deep); }
.signup h2 { font-size:clamp(28px,3.2vw,38px); font-weight:800; letter-spacing:-.02em; margin-bottom:10px; }
.signup p.lead { font-size:16.5px; color:var(--text-muted); line-height:1.6; margin-bottom:24px; max-width:460px; }
.form-row { display:flex; gap:14px; }
.form-row > * { flex:1; }
.field { margin-bottom:16px; }
.field label { display:block; font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink); margin-bottom:6px; }
.field .req { color:var(--danger); }
.field input, .field textarea {
  width:100%; font-family:var(--font-body); font-size:16px; color:var(--ink);
  background:#fff; border:2px solid var(--border-strong); border-radius:var(--radius-md);
  padding:13px 16px; transition:border-color var(--dur-fast) var(--ease-out);
}
.field input:focus, .field textarea:focus { outline:none; border-color:var(--tikva-green); }
.field textarea { min-height:120px; resize:vertical; }
.consent { display:flex; gap:11px; align-items:flex-start; margin:4px 0 18px; font-size:14px; color:var(--text-muted); line-height:1.5; }
.consent input { width:20px; height:20px; margin-top:2px; flex-shrink:0; accent-color:var(--tikva-green); }
.form-note { font-size:13px; color:var(--text-subtle); margin-top:12px; }
.form-status { font-family:var(--font-display); font-weight:700; font-size:14px; margin-top:14px; min-height:20px; }
.form-status[data-state="ok"] { color:var(--green-deep); }
.form-status[data-state="err"] { color:var(--danger); }
/* honeypot: visually hidden, off-screen, not display:none (bots skip display:none) */
.hp-field { position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden; }
/* captcha slot collapses until the Turnstile widget renders */
.cf-turnstile:empty { display:none; }
.contact-methods { margin-top:8px; }
.contact-methods a { font-family:var(--font-display); font-weight:700; color:var(--pink-deep); text-decoration:none; }
.contact-methods a:hover { text-decoration:underline; }

/* ---------- FOOTER ---------- */
.site-footer { background:var(--ink); color:rgba(255,255,255,.72); }
.site-footer__top { max-width:1120px; margin:0 auto; padding:64px 32px 40px;
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; }
.footer-brand__chip { background:#fff; border-radius:var(--radius-md); padding:10px 12px; display:inline-flex; }
.footer-brand__chip img { height:44px; width:auto; }
.footer-brand p { font-size:14px; line-height:1.6; margin-top:16px; max-width:340px; }
.footer-brand__vision { margin-top:13px; }
.footer-brand__label { display:block; font-family:var(--font-display); font-weight:800; font-size:11px;
  text-transform:uppercase; letter-spacing:.1em; color:var(--tikva-green); margin-bottom:3px; }
.footer-col h3 { font-family:var(--font-display); color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }
.footer-col ul { list-style:none; padding:0; display:flex; flex-direction:column; gap:9px; }
.footer-col a, .footer-col button.linklike {
  color:rgba(255,255,255,.72); text-decoration:none; font-size:14px;
  background:none; border:none; padding:0; cursor:pointer; font-family:var(--font-body); text-align:left;
}
.footer-col a:hover, .footer-col button.linklike:hover { color:#fff; text-decoration:underline; }
.site-footer__bottom { border-top:1px solid rgba(255,255,255,.14); }
.site-footer__bottom-inner { max-width:1120px; margin:0 auto; padding:22px 32px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-size:13px; color:rgba(255,255,255,.55); }
.site-footer__bottom-inner .fineprint { max-width:640px; }
/* .4 alpha over --ink resolved to #737672 = 3.83:1. .62 gives 7.36:1. */
.site-footer__version { flex-basis:100%; text-align:center; font-size:11px;
  letter-spacing:.04em; color:rgba(255,255,255,.62); }

/* ---------- REVEAL ANIMATIONS ---------- */
@keyframes ed-rise { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
@keyframes ed-fade { from { opacity:0; } to { opacity:1; } }
/* Scroll-in reveals. Direction set per element (data-reveal="up|left|right|scale");
   a per-item --reveal-delay (assigned in main.js for [data-stagger] groups) makes
   grids cascade in. Everything settles to transform:none / opacity:1. */
[data-reveal] {
  opacity:0; transform:translateY(30px);
  transition:opacity .7s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:var(--reveal-delay, 0ms); will-change:opacity, transform;
}
[data-reveal="left"]  { transform:translateX(-46px); }
[data-reveal="right"] { transform:translateX(46px); }
[data-reveal="scale"] { transform:scale(.9); }
[data-reveal].is-visible { opacity:1; transform:none; }

/* Ambient motion — gentle life on the hero badge + vision glow.
   The reduced-motion block below neutralises these. */
@keyframes ed-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@keyframes ed-glow  { 0%,100% { opacity:.42; } 50% { opacity:.66; } }
.hero__badge { animation:ed-float 4.8s var(--ease-out) infinite; }
.vision::before { animation:ed-glow 6.5s ease-in-out infinite; }

/* Scroll-driven photo zoom — premium "enlarge as you scroll". Progressive:
   browsers without scroll timelines just show the photo at rest. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    @keyframes tk-zoom { from { transform:scale(1.14); } to { transform:scale(1); } }
    .prog__media img, .story__media img, .signup__media img {
      animation:tk-zoom linear both; animation-timeline:view(); animation-range:cover;
    }
  }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px) {
  .hero { grid-template-columns:1fr; gap:44px; padding-top:48px; }
  .hero__media { max-width:460px; }
  .story__inner, .donate__inner { grid-template-columns:1fr; gap:40px; }
  .signup__inner, .signup--alt .signup__inner { grid-template-columns:1fr; gap:34px; }
  .story__media { order:-1; }
  /* image on top for both signup sections when stacked */
  .signup__media { order:-1; min-height:0; aspect-ratio:5/4; }
  .site-footer__top { grid-template-columns:1fr 1fr; }
}
@media (max-width:680px) {
  .container, .hero, .mission, .programmes, .stats__inner, .story__inner, .donate__inner, .signup__inner, .site-header__inner { padding-left:20px; padding-right:20px; }
  .section { padding-top:64px; padding-bottom:64px; }
  .mission { padding:64px 20px 48px; }
  .cards { grid-template-columns:1fr; }
  .stats__inner { gap:24px 32px; }
  .stat { flex:1 1 40%; }
  .form-row { flex-direction:column; gap:0; }
  .site-footer__top { grid-template-columns:1fr; gap:32px; }
  .hero__badge { left:0; bottom:-18px; }
}

/* ---------- MISSION VISION LINE ---------- */
.mission__vision { font-size:18px; line-height:1.62; color:var(--text-body); max-width:720px; margin:22px auto 0; }

/* ---------- WAYS (Go · Pray · Give) ---------- */
.ways { max-width:var(--container); margin:0 auto; padding:28px 32px 104px; }
.ways__head { max-width:720px; margin:0 0 20px; }
.ways__head .eyebrow { color:var(--violet-deep); }
.ways__head h2 { font-size:clamp(30px,3.6vw,42px); font-weight:800; letter-spacing:-.02em; }
/* Big editorial rows — the word carries it, no icons. */
.waysrows { border-top:1px solid var(--border-strong); }
.wayrow { display:grid; grid-template-columns:minmax(120px,auto) 1fr auto; align-items:center; gap:clamp(18px,4vw,56px);
  padding:clamp(24px,3.4vh,42px) 4px; border-bottom:1px solid var(--border-strong); text-decoration:none; color:inherit; }
.wayrow__word { font-family:var(--font-display); font-weight:800; font-size:clamp(38px,6.4vw,88px); line-height:.9;
  letter-spacing:-.03em; color:var(--ink); transition:color var(--dur-base) var(--ease-out); }
.wayrow--go:hover .wayrow__word { color:var(--tikva-blue); }
.wayrow--pray:hover .wayrow__word { color:var(--tikva-violet); }
.wayrow--give:hover .wayrow__word { color:var(--green-deep); }
.wayrow__desc { font-size:16.5px; line-height:1.55; color:var(--text-muted); max-width:44ch; }
.wayrow__go { font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--ink); white-space:nowrap; opacity:.72;
  transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.wayrow:hover .wayrow__go { opacity:1; transform:translateX(8px); }
@media (max-width:680px){ .wayrow { grid-template-columns:1fr; gap:8px; align-items:start; } .wayrow__go { justify-self:start; } }

/* ---------- FOLLOW ALONG (curated Instagram strip) ---------- */
.follow { max-width:1120px; margin:0 auto; padding:88px 32px; text-align:center; }
.follow .eyebrow { color:var(--pink-deep); }
.follow h2 { font-size:clamp(28px,3.2vw,38px); font-weight:800; letter-spacing:-.02em; }
.follow__lead { font-size:16.5px; color:var(--text-muted); max-width:520px; margin:10px auto 24px; }
.follow__grid { display:grid; grid-template-columns:1fr; gap:18px; margin:36px auto 0; max-width:460px; }
.follow__tile {
  position:relative; display:block; border-radius:var(--radius-md); overflow:hidden;
  border:2.5px solid var(--ink); box-shadow:var(--shadow-sm); aspect-ratio:1/1;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.follow__tile img { width:100%; height:100%; object-fit:cover; display:block; }
.follow__tile::after {
  content:""; position:absolute; inset:0; background:rgba(26,26,24,0);
  transition:background var(--dur-base) var(--ease-out);
}
.follow__tile:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.follow__tile:hover::after { background:rgba(211,47,128,.16); }
@media (max-width:520px){ .follow { padding:64px 20px; } .follow__grid { grid-template-columns:1fr; } }

/* ---------- LEGAL / PRIVACY PAGE ---------- */
.legal-hero { background:var(--surface-sunk); border-bottom:1px solid var(--border-soft); }
.legal-hero__inner { max-width:860px; margin:0 auto; padding:64px 32px 48px; }
/* Legal heroes sit on --mist, where --tikva-pink is 4.24:1. --pink-deep is 6.35:1. */
.legal-hero .eyebrow { color:var(--pink-deep); }
.legal-hero h1 { font-size:clamp(34px,5vw,52px); font-weight:800; letter-spacing:-.02em; }
.legal-hero__meta { margin-top:16px; font-size:14px; color:var(--text-muted); }
.legal { max-width:860px; margin:0 auto; padding:56px 32px 88px; }
.legal h2 { font-size:24px; font-weight:800; letter-spacing:-.01em; margin:40px 0 12px; scroll-margin-top:100px; }
.legal h2:first-child { margin-top:0; }
.legal h3 { font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--ink); margin:24px 0 8px; }
.legal p { font-size:16px; line-height:1.7; color:var(--text-body); margin:0 0 14px; }
.legal ul { margin:0 0 16px; padding-left:22px; }
.legal li { font-size:16px; line-height:1.7; color:var(--text-body); margin-bottom:7px; }
.legal a { color:var(--pink-deep); font-weight:600; }
.legal strong { color:var(--ink); }
.legal .legal__anchor { padding-top:8px; }

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce) {
  * { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal] { opacity:1; transform:none; }
  .hero__copy, .hero__media { animation:none; }
}