/* ============================================================
   Shabbat of Peace — styles.css
   Palette: navy #1F4E79 · gold #C9A24B · cream #FAF6EF · ink #2b2b2b
   Mobile-first. No frameworks. No external fonts.
   ============================================================ */

:root {
  --navy: #1F4E79;
  --navy-deep: #17395a;
  --gold: #C9A24B;
  --cream: #FAF6EF;
  --ink: #2b2b2b;

  --serif: Georgia, "Times New Roman", "Iowan Old Style", "Palatino Linotype", serif;
  --serif-he: "Frank Ruhl Libre", "David Libre", "Times New Roman", Georgia, serif;

  --wrap: 46rem;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--serif);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

/* ---------- Accessibility helpers ---------- */
.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;
}

.skip-link {
  position: absolute;
  left: 0; top: -3rem;
  background: var(--gold);
  color: var(--navy-deep);
  padding: 0.6rem 1rem;
  font-weight: bold;
  z-index: 100;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--cream);
  text-align: center;
  padding: clamp(3.5rem, 12vw, 7rem) 1.5rem clamp(3rem, 9vw, 5.5rem);
  border-bottom: 4px solid var(--gold);
}

/* Small "Set One More Place" badge as a corner logo (gold ring for definition on navy) */
.hero__logo {
  position: absolute;
  top: clamp(0.75rem, 3vw, 1.4rem);
  left: clamp(0.75rem, 3vw, 1.4rem);
  width: clamp(46px, 12vw, 66px);
  height: auto;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: var(--navy-deep);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  z-index: 2;
}

.hero__inner {
  max-width: var(--wrap);
  margin-inline: auto;
}

/* ---- Eyebrow: "International" ---- */
.hero__eyebrow {
  margin: 0 0 0.4rem;
  color: var(--gold);
  font-size: clamp(0.8rem, 3vw, 1.15rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  /* balance the trailing letter-spacing so the word stays optically centered */
  text-indent: 0.34em;
}

/* ---- Wordmark (English) ---- */
.wordmark {
  margin: 0;
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1em;
}
.wordmark__big {
  display: block;
  font-size: clamp(1.9rem, 11vw, 5.75rem);
  color: var(--cream);
}
.wordmark__of {
  display: block;
  /* Deliberately much smaller than the big words */
  font-size: clamp(0.85rem, 3vw, 1.4rem);
  font-style: italic;
  letter-spacing: 0.35em;
  text-transform: lowercase;
  color: var(--gold);
  margin: 0.05em 0;
}

/* ---- Wordmark (Hebrew) ---- */
.wordmark-he {
  margin: 1rem 0 0;
  line-height: 1;
  font-family: var(--serif-he);
  font-weight: 700;
  color: var(--gold);
  display: flex;
  flex-direction: row;      /* dir="rtl" orders it: שבת (right) · של · שלום (left) */
  justify-content: center;
  align-items: baseline;
  gap: 0.3em;
}
.wordmark-he__big {
  font-size: clamp(1.8rem, 8vw, 3.5rem);
}
.wordmark-he__of {
  /* של set much smaller, like "of" */
  font-size: clamp(0.8rem, 3vw, 1.35rem);
  opacity: 0.9;
}

.tagline {
  margin: 1.75rem 0 0;
  font-size: clamp(1.05rem, 4.5vw, 1.5rem);
  font-style: italic;
  color: var(--cream);
  letter-spacing: 0.01em;
}

.date-badge {
  display: inline-block;
  margin: 1.75rem 0 0;
  padding: 0.55rem 1.25rem;
  border: 2px solid var(--gold);
  border-radius: 999px;
  color: var(--gold);
  font-size: clamp(0.85rem, 3.5vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* ---- Hero action buttons (two paths) ---- */
.hero__actions {
  margin: 2rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
}
.btn {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  font-family: var(--serif);
  font-size: clamp(1rem, 4vw, 1.2rem);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--gold);
  color: var(--navy-deep);
  border: 2px solid var(--gold);
}
.btn--primary:hover { background: #d8b45f; border-color: #d8b45f; }

/* WhatsApp channel button — WhatsApp green (#25D366) with the WhatsApp glyph.
   Dark text (not white) on the bright green: white would fail contrast (~1.8:1),
   navy-deep passes AA (~6.6:1) and ties back to the brand. */
.btn--wa {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: #25D366;
  border-color: #25D366;
  color: var(--navy-deep);
}
.btn--wa:hover { background: #1EBE5A; border-color: #1EBE5A; color: var(--navy-deep); }
.btn--wa svg { width: 1.25em; height: 1.25em; flex: 0 0 auto; }
.cta__wa { margin: 1.6rem 0 0; }
.btn--ghost {
  background: transparent;
  color: var(--cream);
  border: 2px solid rgba(250, 246, 239, 0.55);
}
.btn--ghost:hover { background: var(--cream); color: var(--navy-deep); border-color: var(--cream); }

/* ============================================================
   THE MESSAGE
   ============================================================ */
.message {
  padding: clamp(3rem, 9vw, 5rem) 0;
  background: var(--cream);
}
.message__body {
  margin: 0;
  font-size: clamp(1.15rem, 4.5vw, 1.5rem);
  line-height: 1.7;
  color: var(--ink);
}

/* ---- Slogan ---- */
.slogan {
  font-family: var(--serif);
  color: var(--navy);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.slogan--inline {
  margin: 2rem 0 0;
  text-align: center;
  font-size: clamp(1.5rem, 7vw, 2.5rem);
  color: var(--gold);
}
.slogan--inline::before,
.slogan--inline::after {
  content: "\2014";
  color: var(--navy);
  opacity: 0.35;
  margin: 0 0.4em;
}

/* ============================================================
   WHO'S IN — rotating stills
   ============================================================ */
.voices {
  padding: clamp(2.5rem, 8vw, 4rem) 0;
  background: var(--cream);
}
.voices .section-title { color: var(--navy); }

/* Socials + "Who's in.." sit side by side at the foot of the hero.
   Wraps to a stack on narrow screens, where there is no room to the right. */
.hero__base {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 3rem);
}
.hero__base .socials--hero { margin: 0; }

/* The "Who's in.." proof feeds this: you've seen who's in, now go be one of them. */
.joinin { max-width: 22rem; }
.joinin__call { margin: 0 0 0.9rem; line-height: 1.25; }
.joinin__lead {
  display: block;
  font-size: clamp(1.05rem, 3vw, 1.3rem);
  color: var(--cream);
}
.joinin__slogan {
  display: block;
  margin-top: 0.15rem;
  font-size: clamp(1.25rem, 3.8vw, 1.65rem);
  font-weight: 700;
  color: var(--gold);
}
.joinin .socials--hero { justify-content: center; }

/* In-hero variant: transparent on navy, and the section owns no page rhythm. */
.voices--hero {
  padding: 0;
  background: transparent;
}
.voices--hero .section-title {
  margin: 0 0 0.9rem;
  font-size: clamp(1.15rem, 3.4vw, 1.5rem);
  color: var(--gold);
}
.voices--hero .voice__in { color: var(--cream); }
/* The cream-background gold is too dark to read on navy — use the bright gold. */
.voices--hero .voice__isin { color: var(--gold); }
.voices--hero .voice__role { color: var(--cream); opacity: 0.75; }
.voices--hero .voices__stage { width: min(190px, 54vw); }
.voices--hero .voices__dot { background: var(--cream); }
.voices--hero .voices__dot.is-active { background: var(--gold); }
.voices--hero .voices__dot:focus-visible { outline-color: var(--cream); }

/* Grid, not absolute positioning: every card shares one cell, so the stage
   sizes itself to the tallest card and the captions stay in normal flow.
   (Absolute cards let the caption spill out of the section entirely.) */
.voices__stage {
  width: min(260px, 68vw);
  margin: 0 auto;
  display: grid;
}
/* Without JS each card takes its own row and reads as a plain list. */
.voices__stage:not(.js-voices) .voice + .voice { margin-top: 1.5rem; }

.voice { margin: 0; }
.js-voices .voice {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease;
}
.js-voices .voice.is-active { opacity: 1; visibility: visible; }

.voice__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--gold);
  background: var(--navy);
}
/* Card reads: "Name … is in"  ->  photo  ->  "to"  ->  Set One More Place badge */
.voice__cap { margin: 0 0 0.7rem; text-align: center; }
.voice__to {
  margin: 0.55rem 0 0.4rem;
  text-align: center;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--cream);
  opacity: 0.8;
}
.voice__logo {
  display: block;
  width: clamp(84px, 24vw, 104px);
  height: auto;
  margin: 0 auto;
}
.voice__in {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--navy);
}
.voice__name { font-weight: 700; }
/* Own line: keeps long names from wrapping raggedly around the "is in." */
.voice__isin {
  display: block;
  color: var(--gold-deep, #8a6d2f);
  font-style: italic;
}
.voice__role {
  margin: 0.2rem 0 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--navy);
  opacity: 0.72;
}
.voice__role:empty { display: none; }

.voices__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.voices__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--navy);
  opacity: 0.25;
  cursor: pointer;
  transition: opacity 200ms ease;
}
.voices__dot.is-active { opacity: 1; background: var(--gold); }
.voices__dot:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* Respect reduced-motion: no cross-fade, JS also stops auto-rotation. */
@media (prefers-reduced-motion: reduce) {
  .js-voices .voice { transition: none; }
}

/* ============================================================
   MAKE YOUR VIDEO
   ============================================================ */
.video {
  padding: clamp(3rem, 9vw, 5rem) 0;
  background: var(--navy);
  color: var(--cream);
}
.section-title {
  margin: 0 0 2rem;
  text-align: center;
  font-size: clamp(1.75rem, 7vw, 2.75rem);
  color: var(--gold);
  font-weight: 700;
}

.steps {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 38rem;
  counter-reset: step;
}
.step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(250, 246, 239, 0.18);
}
.step:last-child { border-bottom: 0; }

.step__num {
  flex: 0 0 auto;
  width: 2.4rem; height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-deep);
  font-weight: 700;
  font-size: 1.2rem;
}
.step__text {
  font-size: clamp(1.05rem, 4vw, 1.25rem);
  padding-top: 0.15rem;
}
.tag { color: var(--gold); font-weight: 700; white-space: nowrap; }
.tag--he { font-family: var(--serif-he); unicode-bidi: isolate; }

.video__close {
  margin: 2.5rem auto 0;
  max-width: 38rem;
  text-align: center;
  font-size: clamp(1.15rem, 5vw, 1.6rem);
  font-style: italic;
  color: var(--gold);
}

/* ============================================================
   CTA
   ============================================================ */
.cta {
  padding: clamp(3.5rem, 11vw, 6rem) 0;
  background:
    radial-gradient(120% 120% at 50% 0%, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--cream);
  text-align: center;
  border-top: 4px solid var(--gold);
}
.slogan--hero {
  margin: 0;
  font-size: clamp(2.6rem, 13vw, 5.5rem);
  line-height: 1.05;
  color: var(--cream);
}
.hashtags {
  margin: 1.75rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.hashtags__primary {
  font-size: clamp(1.35rem, 6vw, 2rem);
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.hashtags__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
}
.hashtags__secondary {
  font-size: clamp(1rem, 4.5vw, 1.35rem);
  color: var(--cream);
  opacity: 0.85;
}
.hashtags__he {
  font-family: var(--serif-he);
  font-size: clamp(1.05rem, 4.5vw, 1.5rem);
  font-weight: 700;
  color: var(--gold);
  unicode-bidi: isolate;   /* keep each Hebrew hashtag's # on the right, cleanly separated */
}

/* ============================================================
   STATEMENT BAND — bold "no barriers" moment
   ============================================================ */
.statement {
  background: var(--gold);
  color: var(--navy-deep);
  text-align: center;
  padding: clamp(2.75rem, 9vw, 4.5rem) 1.5rem;
}
.statement__text {
  margin: 0 auto;
  max-width: 22ch;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.0;
  letter-spacing: -0.01em;
  font-size: clamp(2.1rem, 10vw, 4.25rem);
}
.statement__text span:last-child { color: var(--cream); }

/* ============================================================
   LAUNCH NOTICE
   ============================================================ */
.launchnote {
  background: var(--cream);
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
}
.launchnote__text {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  padding: 1.1rem 1.5rem;
  color: var(--navy);
  font-size: clamp(0.98rem, 3.6vw, 1.05rem);
  line-height: 1.6;
}

/* ============================================================
   LAUNCH NOTICE
   ============================================================ */
.launchnote {
  background: var(--cream);
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
}
.launchnote__text {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  padding: 1.1rem 1.5rem;
  color: var(--navy);
  font-size: clamp(0.98rem, 3.6vw, 1.05rem);
  line-height: 1.6;
}

/* ============================================================
   SAMPLE SCRIPTS (rotating speech bubbles)
   ============================================================ */
.scripts {
  padding: clamp(3rem, 9vw, 5rem) 0;
  background: var(--cream);
}
.section-title--dark { color: var(--navy); }

.scripts__intro {
  margin: -0.75rem auto 2.5rem;
  max-width: 34rem;
  text-align: center;
  font-size: clamp(1.05rem, 4vw, 1.25rem);
  font-style: italic;
  color: var(--ink);
  opacity: 0.85;
}

.scripts__carousel { max-width: 40rem; margin-inline: auto; }

/* Default (no-JS): a readable stacked list of bubbles */
.scripts__viewport {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.75rem;
}

/* JS-enhanced: stack all slides in one cell so height stays stable */
.js-carousel .scripts__viewport { gap: 0; }
.js-carousel .script {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.js-carousel .script.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.script__label {
  margin: 0 0 0.75rem;
  text-align: center;
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(1.1rem, 4.5vw, 1.4rem);
  letter-spacing: 0.01em;
}
.script__num {
  display: inline-grid;
  place-items: center;
  width: 1.9rem; height: 1.9rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: 0.95rem;
  vertical-align: middle;
}

/* The speech bubble */
.bubble {
  position: relative;
  margin: 0;
  background: #fff;
  border: 1px solid rgba(31, 78, 121, 0.12);
  border-left: 5px solid var(--gold);
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
  box-shadow: 0 10px 30px rgba(31, 78, 121, 0.10);
}
.bubble p {
  margin: 0;
  font-size: clamp(1.05rem, 4vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink);
}
/* Tail, pointing down-left */
.bubble::after {
  content: "";
  position: absolute;
  left: 32px;
  bottom: -13px;
  width: 24px; height: 24px;
  background: #fff;
  border-right: 1px solid rgba(31, 78, 121, 0.12);
  border-bottom: 1px solid rgba(31, 78, 121, 0.12);
  transform: rotate(45deg);
}

.script__tags {
  margin: 1.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0.9rem;
}
.script__tag {
  font-size: clamp(0.85rem, 3.2vw, 1rem);
  font-weight: 700;
  color: var(--navy);
}
.script__tag--he {
  font-family: var(--serif-he);
  color: var(--gold);
  font-size: clamp(0.95rem, 3.6vw, 1.15rem);
  unicode-bidi: isolate;
}

/* Copy-script button (injected by JS) */
.script__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 1.1rem auto 0;
  padding: 0.5rem 1.1rem;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: transparent;
  color: var(--navy);
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.script__copy:hover { background: var(--navy); color: var(--cream); }
.script__copy svg { width: 1.05em; height: 1.05em; }
.script__copy.is-copied {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--navy-deep);
}
/* wrapper for the injected copy buttons under each slide */
.script__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
/* secondary "Copy hashtags" variant — lighter than the primary Copy script */
.script__copy--tags {
  border-color: rgba(31, 78, 121, 0.45);
  font-weight: 400;
}

/* Standalone "Copy all hashtags" button in the CTA (on navy) */
.hashtags__copy {
  display: inline-block;
  margin: 1.4rem auto 0;
  padding: 0.55rem 1.3rem;
  border: 2px solid var(--gold);
  border-radius: 999px;
  background: transparent;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.hashtags__copy:hover { background: var(--gold); color: var(--navy-deep); }
.hashtags__copy.is-copied { background: var(--gold); color: var(--navy-deep); }

/* Controls (only shown when JS enhances the carousel) */
.scripts__controls,
.scripts__playpause { display: none; }
.js-carousel .scripts__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}
.scripts__btn {
  width: 2.75rem; height: 2.75rem;
  flex: 0 0 auto;
  border: 2px solid var(--navy);
  background: transparent;
  color: var(--navy);
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.scripts__btn:hover { background: var(--navy); color: var(--cream); }

.scripts__dots { display: flex; gap: 0.5rem; }
.scripts__dot {
  width: 0.7rem; height: 0.7rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(31, 78, 121, 0.28);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.scripts__dot.is-active {
  background: var(--gold);
  transform: scale(1.3);
}

.js-carousel .scripts__playpause {
  display: inline-block;
  margin: 1.1rem auto 0;
  padding: 0.4rem 1.1rem;
  border: 1px solid rgba(31, 78, 121, 0.35);
  border-radius: 999px;
  background: transparent;
  color: var(--navy);
  font-family: var(--serif);
  font-size: 0.9rem;
  cursor: pointer;
}
.js-carousel .scripts__playpause:hover { background: rgba(31, 78, 121, 0.06); }

/* ============================================================
   LOGOS & EMBLEMS
   ============================================================ */
/* Hero lockup: [Set One More Place] "for the" [Shabbat Achdus crest] */
.hero__lockup {
  margin: 0 0 clamp(1.5rem, 5vw, 2.25rem);
  display: flex;
  flex-direction: column;          /* mobile: stacked, reads top-to-bottom */
  align-items: center;
  justify-content: center;
  gap: clamp(0.65rem, 2.5vw, 1.1rem);
}
.lockup__badge,
.lockup__crest {
  display: block;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.34));
}
.lockup__crest { width: clamp(200px, 54vw, 300px); }
/* Set One More Place leads the lockup — sized a touch larger than the crest */
.lockup__badge { width: clamp(232px, 62vw, 348px); }
/* The badge artwork has no ring of its own — give it one so it reads on navy */
.lockup__badge {
  border-radius: 50%;
  border: 3px solid var(--gold);
  background: var(--navy-deep);
}
.lockup__join {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  font-size: clamp(1.15rem, 4.5vw, 1.75rem);
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;   /* keep "for the" on one line beside the logos */
  flex: 0 0 auto;
}
/* Desktop: read it as one horizontal sentence */
@media (min-width: 56rem) {
  .hero__lockup { flex-direction: row; gap: clamp(1rem, 2.5vw, 1.75rem); }
  .lockup__crest { width: clamp(220px, 26vw, 300px); }
  .lockup__badge { width: clamp(252px, 30vw, 348px); }
}

/* Badge sits on navy — its artwork has no ring, so add a gold one for definition */
.cta__badge {
  display: block;
  width: clamp(104px, 26vw, 150px);
  height: auto;
  margin: 0 auto 1.6rem;
  border-radius: 50%;
  border: 3px solid var(--gold);
  background: var(--navy-deep);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
}

.site-footer__mark {
  display: block;
  width: 64px;
  height: auto;
  margin: 0 auto 0.9rem;
}

/* Social links */
.socials {
  display: flex;
  justify-content: center;
  gap: 1.15rem;
  margin: 0 0 1.15rem;
}
/* In the hero they sit directly under the WhatsApp button */
.socials--hero { margin: 1.6rem 0 0; }
.socials--hero .social svg { width: 1.9rem; height: 1.9rem; }
.social {
  display: inline-flex;
  color: var(--cream);
  opacity: 0.8;
  transition: color 0.2s ease, opacity 0.2s ease, transform 0.1s ease;
}
.social svg { width: 1.7rem; height: 1.7rem; }
.social:hover { color: var(--gold); opacity: 1; transform: translateY(-2px); }

/* Bigger CTA slogan with a gold underline */
.slogan--underline { padding-bottom: 0.15em; }
.slogan--underline::after {
  content: "";
  display: block;
  width: clamp(84px, 22vw, 168px);
  height: 5px;
  margin: 0.6rem auto 0;
  background: var(--gold);
  border-radius: 3px;
}

/* Slim closing statement band (single line) */
.statement--slim { padding: clamp(1.75rem, 6vw, 2.75rem) 1.5rem; }
.statement__text--single {
  max-width: none;
  font-size: clamp(1.5rem, 6.5vw, 3rem);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--navy-deep);
  color: var(--cream);
  text-align: center;
  padding: 2rem 1.5rem;
  font-size: 0.95rem;
}
.site-footer p { margin: 0; opacity: 0.85; }

/* ============================================================
   Wider screens
   ============================================================ */
@media (min-width: 56rem) {
  .wordmark {
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
    gap: 0.35em;
  }
  .wordmark__of { margin: 0; }
}

/* ============================================================
   LANGUAGE SWITCHER + RTL
   ============================================================ */
.lang-switch {
  position: fixed;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 200;
  display: flex;
  gap: 0.1rem;
  padding: 0.25rem;
  background: rgba(23, 57, 90, 0.9);
  border: 1px solid rgba(201, 162, 75, 0.55);
  border-radius: 999px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
}
.lang-btn {
  border: 0;
  background: transparent;
  color: var(--cream);
  font-family: var(--serif);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.32rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.72;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.lang-btn:hover { opacity: 1; }
.lang-btn.is-active { background: var(--gold); color: var(--navy-deep); opacity: 1; }

/* Better Hebrew rendering when Hebrew is active */
html[lang="he"] body { font-family: var(--serif-he); }

/* Right-to-left tweaks (mirrored accents; layout is mostly centered already) */
[dir="rtl"] .bubble {
  border-left: 1px solid rgba(31, 78, 121, 0.12);
  border-right: 5px solid var(--gold);
}
[dir="rtl"] .bubble::after { left: auto; right: 32px; }
[dir="rtl"] .script__num { margin-right: 0; margin-left: 0.35rem; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---- About + Press (added 2026-07-23) ---- */
.about .scripts__heading{margin-bottom:.6em}
.press__list{list-style:none;margin:1.2em auto 0;padding:0;max-width:44em;text-align:center}
.press__list li{margin:.55em 0;line-height:1.45}
.press__list a{color:var(--gold,#C9A24B);text-decoration:none;border-bottom:1px solid rgba(201,162,75,.45)}
.press__list a:hover,.press__list a:focus{color:#fff;border-bottom-color:#fff}
.press__embed{position:relative;max-width:640px;margin:1.4em auto 0;aspect-ratio:16/9}
.press__embed iframe{position:absolute;inset:0;width:100%;height:100%;border-radius:12px}
.press__embed video{position:absolute;inset:0;width:100%;height:100%;border-radius:12px;background:#0a1a2f;object-fit:cover}
.press__vidcap{text-align:center;color:#e8e2d4;font-style:italic;margin:.5em 0 0}

/* ---- Who's in — video grid (2026-07-24) ---- */
.voices__sub{text-align:center;color:#d9c89a;font-style:italic;margin:-4px 0 18px;font-size:.95rem}
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 12px;max-width:1040px;margin:0 auto;padding:0 12px}
.vtile{margin:0}
.vtile__btn{position:relative;display:block;width:100%;padding:0;border:2px solid var(--gold,#C9A24B);border-radius:12px;overflow:hidden;cursor:pointer;background:#0a1a2f;aspect-ratio:3/4;line-height:0}
.vtile__btn img{width:100%;height:100%;object-fit:cover;display:block}
.vtile__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2rem;color:#fff;background:rgba(10,26,47,.30);text-shadow:0 2px 10px rgba(0,0,0,.7);transition:background .15s}
.vtile__btn:hover .vtile__play,.vtile__btn:focus-visible .vtile__play{background:rgba(10,26,47,.10)}
.vtile__video{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;background:#000;border:2px solid var(--gold,#C9A24B);display:block}
.vtile__cap{text-align:center;margin-top:7px;line-height:1.2}
.vtile__cap span{display:block;color:#fff;font-weight:700;font-size:.86rem}
.vtile__cap small{display:block;color:#c9d3e0;font-size:.72rem;margin-top:1px}
@media(max-width:640px){.vgrid{grid-template-columns:repeat(2,1fr);gap:12px 10px}}