/* ── RESET & TOKENS ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Human-Centric Systems - Architectural Warmth */
  --black:   #1A1A1A;
  --dark:    #1A1A1A;
  --mid:     #57534E;
  --light:   #78716C;
  --border:  #E5E1DA;
  --bg:      #F9F7F2;
  --surface: #F2EFE9;
  --white:   #ffffff;
  --radius:  6px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  background: var(--bg);
  color: var(--black);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 48px;
}

/* ── NAV ── */
nav {
  padding: 24px 0;
  min-height: 72px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 100;
}
nav .container { display: flex; justify-content: space-between; align-items: center; max-width: 1440px; }
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo-img { height: 28px; width: auto; display: block; }
.nav-menu { display: flex; align-items: center; gap: 32px; }
.nav-menu a {
  font-size: 16px;
  color: var(--mid);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.nav-menu a:hover { color: var(--black); }

/* Mid-range widths: tighten EN nav instead of overflowing */
@media (min-width: 769px) and (max-width: 1180px) {
  .nav-menu { gap: 18px; }
  .nav-menu a { font-size: 14px; }
}

/* HE nav has more items - switch to the hamburger drawer below 1180px */
@media (min-width: 769px) and (max-width: 1180px) {
  [lang="he"] .nav-toggle { display: flex; }
  [lang="he"] .nav-menu {
    position: fixed;
    inset: 64px 0 0 0;
    background: var(--bg);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 24px 24px 40px;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 90;
    overflow-y: auto;
  }
  [lang="he"] .nav-menu.is-open { transform: translateX(0); }
  [lang="he"] .nav-menu a {
    padding: 18px 0;
    font-size: 18px;
    border-bottom: 1px solid var(--border);
    color: var(--dark);
  }
  [lang="he"] .nav-menu .nav-cta {
    display: block;
    margin-top: 24px;
    padding: 18px 20px;
    font-size: 18px !important;
    background: var(--black);
    color: white !important;
    border: 1.5px solid var(--black);
    align-self: stretch;
    text-align: start;
  }
}
.nav-cta {
  font-size: 15px !important;
  font-weight: 500;
  color: var(--black) !important;
  border: 1.5px solid var(--black);
  border-radius: var(--radius);
  padding: 8px 22px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.nav-cta:hover { background: var(--black); color: var(--bg) !important; }
.nav-cta { cursor: pointer; background: none; font-family: inherit; }

/* Hamburger toggle - desktop hidden */
.nav-toggle {
  display: none;
  background: transparent; border: none;
  width: 40px; height: 40px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  padding: 0; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--black); transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── POPUP ── */
.popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.popup-overlay.is-open { display: flex; }

.popup {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  max-width: 480px;
  padding: 48px 40px 40px;
  position: relative;
}

.popup-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--light);
  padding: 4px;
  line-height: 1;
  transition: color 0.15s;
}
.popup-close:hover { color: var(--black); }

.popup-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin-bottom: 28px;
  color: var(--black);
}

.popup-form {
  margin-bottom: 32px;
}
.popup-form iframe {
  width: 100%;
  height: 420px;
  border: none;
  display: block;
}

.popup-contact {
  display: flex;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.popup-contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--mid);
  text-decoration: none;
  transition: color 0.15s;
}
.popup-contact-link:hover { color: var(--black); }

.popup-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .popup { padding: 40px 24px 32px; }
  .popup-contact { flex-direction: column; gap: 16px; }
}

/* ── FLOATING WHATSAPP BUTTON ──
   Fixed to the bottom-right on every page, in both layouts. `right` is used on
   purpose instead of `inset-inline-end`: the corner must stay physically right
   on the RTL Hebrew site too, which is where Rani asked for it.

   The bottom offset chains the heights that other bottom-anchored elements
   publish, so this button always lifts clear of whatever is already there:
     --consent-offset       cookie banner (bottom:0, full width, z-index 9999)
     --lang-suggest-offset  language banner (English layout only)
   Both fall back to 0 when that element is absent or dismissed.

   z-index sits below the contact popup overlay (1000) so the button is covered
   by the modal rather than floating on top of it. */
.wa-float {
  position: fixed;
  right: 24px;
  bottom: calc(24px + var(--consent-offset, 0px) + var(--lang-suggest-offset, 0px));
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease, bottom 0.18s ease;
}

.wa-float:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
}

.wa-float:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 3px;
}

.wa-float svg {
  width: 30px;
  height: 30px;
  display: block;
}

@media (max-width: 600px) {
  .wa-float {
    right: 16px;
    bottom: calc(16px + var(--consent-offset, 0px) + var(--lang-suggest-offset, 0px));
    width: 52px;
    height: 52px;
  }
  .wa-float svg { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float { transition: none; }
  .wa-float:hover { transform: none; }
}

@media print {
  .wa-float { display: none; }
}

/* ── LANGUAGE SUGGESTION BANNER ── */
.lang-suggest-banner {
  position: fixed;
  /* --consent-offset is set by the consent partial to the live height of the
     cookie banner, 0 when it is not showing. Without it the cookie banner
     (bottom:0, full width, z-index 9999) sits on top of this one and hides it. */
  bottom: calc(20px + var(--consent-offset, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 92%;
  background: var(--black);
  color: var(--bg);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  font-size: 17px;
}

.lang-suggest-banner p {
  margin: 0;
}

.lang-suggest-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.lang-suggest-switch {
  background: var(--bg);
  color: var(--black);
  border-radius: 6px;
  padding: 8px 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.lang-suggest-switch:hover {
  opacity: 0.85;
}

.lang-suggest-dismiss {
  background: none;
  border: none;
  color: var(--bg);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.lang-suggest-dismiss:hover {
  opacity: 1;
}

@media (max-width: 600px) {
  .lang-suggest-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    bottom: calc(12px + var(--consent-offset, 0px));
    padding: 14px 16px;
  }
  .lang-suggest-actions {
    width: 100%;
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lang-suggest-switch,
  .lang-suggest-dismiss {
    transition: none;
  }
}

/* ── FOOTER ── */
footer {
  border-top: 1px solid var(--border);
  padding: 40px 0;
}
footer .container { display: flex; justify-content: space-between; align-items: center; }
.footer-logo-img { height: 22px; width: auto; display: block; }
.footer-brand { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer-links { display: flex; gap: 24px; }
.footer-links a {
  font-size: 15px; color: var(--mid);
  text-decoration: none; transition: color 0.15s;
}
.footer-links a:hover { color: var(--black); }
.footer-credits {
  max-width: 280px;
  font-size: 12px; line-height: 1.7; color: var(--light);
}

/* ── UTILITY ── */
.sec-tag {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--light); margin-bottom: 14px;
}
.sec-title {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.2; margin-bottom: 56px;
}

/* ── BREADCRUMB (Phase 47 product pages) ── */
.breadcrumb-nav {
  font-size: 15px;
  color: var(--light);
  margin-bottom: 16px;
}
.breadcrumb-nav a { color: var(--light); text-decoration: none; }
.breadcrumb-nav a:hover { color: var(--dark); text-decoration: underline; }
.breadcrumb-nav [aria-current="page"] { color: var(--mid); }

/* ── HERO ── */
.hero {
  padding: 80px 0 0;
  border-bottom: 1px solid var(--border);
}
.hero-label {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--light); margin-bottom: 28px;
}
.hero h1 {
  font-size: clamp(34px, 4.2vw, 54px);
  font-weight: 700; line-height: 1.1;
  letter-spacing: -0.03em; max-width: 820px;
  margin-bottom: 28px;
}
.hero-sub {
  font-size: 18px; font-weight: 400;
  color: var(--mid); max-width: 640px;
  line-height: 1.7; margin-bottom: 48px;
}
.hero-cta {
  display: inline-block;
  background: var(--black); color: var(--bg);
  text-decoration: none;
  font-size: 16px; font-weight: 600;
  padding: 15px 36px; letter-spacing: 0.02em;
  border-radius: var(--radius);
  transition: opacity 0.15s;
  border: none; cursor: pointer; font-family: inherit;
}
.hero-cta:hover { opacity: 0.85; }

.hero-accent {
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ── HERO DARK TWO-COL ── */
.hero--dark {
  background: #1a1a1a;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hero--dark .hero-label { color: rgba(249, 247, 242, 0.55); }
.hero--dark h1 { color: var(--bg); }
.hero--dark .hero-sub { color: rgba(249, 247, 242, 0.72); }
.hero--dark .hero-cta {
  background: var(--bg);
  color: #1a1a1a;
  border-color: var(--bg);
}
.hero--dark .hero-cta:hover { opacity: 0.9; }

.hero-two-col {
  display: flex;
  align-items: center;
  gap: 56px;
  min-height: 600px;
}
.hero-text { flex: 1; padding-bottom: 0; }
.hero-portrait-wrap {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-self: flex-end;
  overflow: hidden;
}
.hero-portrait {
  width: 100%;
  max-width: 520px;
  height: auto !important;
  display: block;
  object-fit: cover;
  object-position: top center;
  -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
}
.hero-portrait-wrap picture {
  display: block;
  width: 100%;
  max-width: 520px;
}
.hero-cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 32px;
}
.hero-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--bg);
  border: 1.5px solid rgba(249, 247, 242, 0.45);
  border-radius: var(--radius);
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: all 0.18s;
}
.hero-cta-secondary:hover {
  background: var(--bg);
  color: #1a1a1a;
  border-color: var(--bg);
}

@media (max-width: 768px) {
  .hero-two-col { flex-direction: column; align-items: stretch; gap: 32px; }
  .hero-text { padding-bottom: 0; }
  .hero-portrait-wrap { justify-content: center; }
  .hero-portrait { max-width: 420px; width: 100%; }
  .hero-cta-row { flex-direction: column; align-items: stretch; }
  .hero-cta, .hero-cta-secondary { width: 100%; text-align: center; justify-content: center; }
}

/* ── NUMBERS / STATS ── */
.numbers {
  padding: 80px 0;
  border-bottom: 1px solid var(--border);
}
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.number-item { padding-right: 32px; }
.number-item + .number-item {
  padding-left: 32px;
  border-left: 1px solid var(--border);
}
.number-value {
  display: block;
  font-size: 38px; font-weight: 700;
  letter-spacing: -0.04em; margin-bottom: 6px;
  white-space: nowrap;
}
.number-label { font-size: 16px; color: var(--mid); line-height: 1.5; }

.numbers--divided {
  background: var(--surface);
}
.numbers--divided .number-item + .number-item {
  border-left: none;
  position: relative;
}
.numbers--divided .number-item + .number-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: var(--border);
}

@media (max-width: 768px) {
  .numbers--divided .number-item + .number-item::before {
    display: none;
  }
  .numbers--divided .number-item + .number-item {
    border-top: none;
    border-left: none;
    padding-top: 0;
  }
}

/* ── CAPABILITIES ── */
.capabilities {
  padding: 92px 0;
  border-bottom: 1px solid var(--border);
}
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}
.cap-num {
  font-size: 12px; font-weight: 600;
  color: var(--light); letter-spacing: 0.05em;
  margin-bottom: 18px;
}
.cap-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 32px;
}
.cap-item h3 {
  font-size: 20px; font-weight: 600;
  letter-spacing: -0.01em; margin-bottom: 12px;
}
.cap-item p { font-size: 17px; color: var(--mid); line-height: 1.75; }

/* ── APPROACH ── */
.approach {
  padding: 92px 0;
  border-bottom: 1px solid var(--border);
}
.approach-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px; align-items: start;
}
.approach-left h2 {
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.3; margin-bottom: 20px;
}
.approach-left p { font-size: 17px; color: var(--mid); line-height: 1.8; }
.approach-left p + p { margin-top: 16px; }

.steps { display: flex; flex-direction: column; gap: 36px; }
.step { display: grid; grid-template-columns: 28px 1fr; gap: 18px; }
.step-num {
  font-size: 12px; font-weight: 600;
  color: var(--light); letter-spacing: 0.05em; padding-top: 3px;
}
.step-body h4 {
  font-size: 20px; font-weight: 600;
  letter-spacing: -0.01em; margin-bottom: 6px;
}
.step-body p { font-size: 17px; color: var(--mid); line-height: 1.7; }

/* ── PROJECTS ── */
.projects {
  padding: 92px 0;
  border-bottom: 1px solid var(--border);
}
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  background: transparent;
}
.project-card {
  background: var(--surface);
  padding: 40px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.project-type {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--light); margin-bottom: 18px;
}
.project-card h3 {
  font-size: 20px; font-weight: 600;
  letter-spacing: -0.01em; margin-bottom: 14px; line-height: 1.35;
}
.project-card p { font-size: 17px; color: var(--mid); line-height: 1.75; margin-bottom: 22px; }
.project-outcome {
  font-size: 15px; font-weight: 500; color: var(--mid);
  border-top: 1px solid var(--border); padding-top: 18px; line-height: 1.55;
}

/* ── VIDEO ── */
.video-section {
  padding: 92px 0;
  border-bottom: 1px solid var(--border);
}
.video-wrap {
  background: #0D0D0D;
  aspect-ratio: 16 / 9;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer; position: relative; overflow: hidden;
}
.play-ring {
  width: 68px; height: 68px;
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
  transition: border-color 0.2s;
}
.video-wrap:hover .play-ring { border-color: rgba(255,255,255,0.85); }
.play-ring svg { width: 22px; height: 22px; fill: white; margin-left: 4px; }
.video-label {
  font-size: 17px; font-weight: 500;
  color: rgba(255,255,255,0.65); letter-spacing: 0.3px;
}
.video-sub { font-size: 13px; color: rgba(255,255,255,0.3); margin-top: 8px; letter-spacing: 0.5px; }

/* ── ABOUT ── */
.about {
  padding: 92px 0;
  border-bottom: 1px solid var(--border);
}
.about-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 80px; align-items: start;
}
.about-photo {
  width: 100%; aspect-ratio: 3/4;
  display: block; overflow: hidden;
}
.about-photo picture {
  display: block; width: 100%; height: 100%;
}
.about-photo img {
  width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(15%); display: block;
}
.about-content h2 {
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.3; margin-bottom: 22px;
}
.about-content p { font-size: 17px; color: var(--mid); line-height: 1.8; }
.about-content p + p { margin-top: 16px; }
.stack-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.stack-tag {
  font-size: 13px; font-weight: 500; color: var(--dark);
  border: 1px solid var(--border); padding: 5px 14px;
  background: var(--surface);
  border-radius: 100px;
}

/* ── CTA SECTION ── */
.cta-section { padding: 100px 0; }
.cta-inner { max-width: 580px; }
.cta-inner h2 {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.12; margin-bottom: 22px;
}
.cta-inner p {
  font-size: 16px; color: var(--mid);
  line-height: 1.7; margin-bottom: 40px;
}
.cta-row { display: flex; gap: 20px; align-items: center; }
.cta-btn {
  display: inline-block;
  background: var(--black); color: var(--bg);
  text-decoration: none;
  font-size: 16px; font-weight: 600;
  padding: 15px 36px;
  border-radius: var(--radius);
  transition: opacity 0.15s;
  border: none; cursor: pointer; font-family: inherit;
}
.cta-btn:hover { opacity: 0.85; }
.cta-link {
  font-size: 16px; color: var(--mid);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}
.cta-link:hover { color: var(--black); border-color: var(--black); }

/* ── BLOG LIST ── */
.blog-list-section {
  padding: 80px 0;
}
.blog-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.blog-list-item {
  border-bottom: 1px solid var(--border);
}
.blog-list-item:first-child {
  border-top: 1px solid var(--border);
}
.blog-list-link {
  display: block;
  padding: 48px 0;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s, padding-left 0.15s;
}
.blog-list-link:hover {
  background: rgba(242, 239, 233, 0.4);
  padding-left: 8px;
}
.blog-list-date {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 12px;
}
.blog-list-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--black);
  margin: 0 0 12px 0;
  max-width: 760px;
  transition: opacity 0.15s;
}
.blog-list-link:hover .blog-list-title {
  opacity: 0.72;
}
.blog-list-desc {
  font-size: 17px;
  line-height: 1.75;
  color: var(--mid);
  max-width: 700px;
  margin: 0 0 20px 0;
}
.blog-list-cta {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--black);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.15s;
}
.blog-list-link:hover .blog-list-cta {
  gap: 8px;
}

@media (max-width: 768px) {
  .blog-list-link { padding: 36px 0; }
  .blog-list-title { font-size: 22px; }
}

/* ============================================================
   NEWSLETTER SECTION
   ============================================================ */
.newsletter-section {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 100px 0;
}
.newsletter-inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.newsletter-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--black);
  margin: 0 0 12px 0;
}
.newsletter-sub {
  font-size: 17px;
  line-height: 1.75;
  color: var(--mid);
  margin: 0 0 32px 0;
}
.newsletter-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.newsletter-input {
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  font-size: 17px;
  line-height: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--black);
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}
.newsletter-input:focus {
  border-color: var(--black);
  box-shadow: 0 0 0 2px rgba(28, 27, 27, 0.08);
}
.newsletter-btn {
  padding: 13px 28px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--black);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.newsletter-btn:hover { opacity: 0.82; }

.newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  cursor: pointer;
  text-align: left;
}
.newsletter-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--black);
  cursor: pointer;
}
.newsletter-consent span {
  font-size: 15px;
  color: var(--light);
  line-height: 1.5;
}
.newsletter-msg {
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 20px;
  min-height: 0;
}
.newsletter-msg--success {
  color: #2d6a4f;
  font-weight: 500;
}
.newsletter-msg--info {
  color: var(--mid);
}

@media (max-width: 768px) {
  .newsletter-section { padding: 64px 0; }
  .newsletter-form { flex-direction: column; }
  .newsletter-input, .newsletter-btn { width: 100%; }
}

[lang="he"] .newsletter-consent { text-align: right; }

/* ============================================================
   DARK HERO - shared page hero (workshops, blog, contact, services)
   ============================================================ */
.dark-hero {
  background: #1a1a1a;
  color: var(--bg);
  padding: 100px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dark-hero-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(249, 247, 242, 0.55);
  margin-bottom: 20px;
}
.dark-hero h1 {
  font-size: 62px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--bg);
  margin-bottom: 20px;
  max-width: 800px;
}
.dark-hero-sub {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(249, 247, 242, 0.70);
  max-width: 560px;
  margin-bottom: 40px;
}
.dark-hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.btn-inverse-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: #1a1a1a;
  border: 1.5px solid var(--bg);
  border-radius: var(--radius);
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.18s;
}
.btn-inverse-primary:hover { opacity: 0.88; }
.btn-inverse-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--bg);
  border: 1.5px solid rgba(249, 247, 242, 0.5);
  border-radius: var(--radius);
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.18s;
}
.btn-inverse-outline:hover {
  background: var(--bg);
  color: #1a1a1a;
  border-color: var(--bg);
}

@media (max-width: 768px) {
  .dark-hero { padding: 64px 0; }
  .dark-hero h1 { font-size: 38px; }
  .dark-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-inverse-primary,
  .btn-inverse-outline { width: 100%; justify-content: center; }
}

.dark-hero--services {
  text-align: center;
}
.dark-hero--services h1 {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  font-size: 58px;
}
.dark-hero--services .dark-hero-sub {
  margin-left: auto;
  margin-right: auto;
}
.dark-hero--services .dark-hero-actions {
  justify-content: center;
}
.dark-hero-accent {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  text-decoration-color: rgba(249, 247, 242, 0.5);
}

@media (max-width: 768px) {
  .dark-hero--services h1 { font-size: 34px; }
}

/* ── SERVICES PAGE ── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.services-numbered-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}
.service-num-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.service-num-card:hover {
  background: var(--bg);
  border-color: var(--mid);
  transform: translateY(-3px);
  transition: all 0.2s;
}
.service-card-num {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--light);
  display: block;
}
.service-num-card h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--black);
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
  margin: 0;
}
.service-num-card p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--mid);
  margin: 0;
}
.service-num-card .service-details {
  margin-top: auto;
}

@media (max-width: 900px) {
  .services-numbered-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.services-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 48px;
}
.service-feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.service-feature-card:hover {
  border-color: var(--mid);
  background: var(--bg);
  transform: translateY(-3px);
}
.service-feature-card h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--black);
  margin: 0;
}
.service-feature-card > p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--mid);
  margin: 0;
}
.service-feature-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.service-feature-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}
.service-feature-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--black);
  flex-shrink: 0;
}
.service-feature-value {
  font-size: 15px;
  color: var(--mid);
  text-align: right;
}
.service-feature-badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #E7F3EF;
  color: #065F46;
  padding: 4px 10px;
  border-radius: 100px;
}

@media (max-width: 768px) {
  .services-feature-grid {
    grid-template-columns: 1fr;
  }
}

.cta-btn--outline {
  background: transparent;
  color: var(--black);
  border: 1.5px solid var(--border);
}
.cta-btn--outline:hover {
  border-color: var(--black);
  background: transparent;
}

/* ── HOW IT WORKS (services) ── */
.how-it-works {
  padding: 92px 0;
  border-bottom: 1px solid var(--border);
}

/* ── BLOG POST - meta + blockquote (main .post-* rules live in the BLOG POST section further down) ── */
.post-meta {
  font-size: 13px; color: var(--light);
  letter-spacing: 0.5px;
}
.post-body blockquote {
  border-left: 3px solid var(--border);
  padding: 0 0 0 24px; margin: 32px 0;
}
.post-body blockquote p { color: var(--mid); }

/* ── POST TL;DR BOX ── */
.post-tldr {
  max-width: 760px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 40px 0 0;
}
.post-tldr-label {
  font-size: 15px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--light); margin: 0 0 10px;
}
.post-tldr ul { margin: 0; padding-inline-start: 20px; }
.post-tldr li {
  font-size: 17px; color: var(--dark);
  line-height: 1.7; margin-bottom: 6px;
}
.post-tldr li:last-child { margin-bottom: 0; }

/* ── POST FAQ ── */
.post-faq { max-width: 760px; margin: 8px 0 48px; }
.post-faq h2 {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.5px; margin: 0 0 8px;
}
.post-faq .workshop-faq-list { max-width: none; margin: 0; }

/* ── POST NAV ── */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 48px 0 0;
  border-top: 1px solid var(--border);
  margin-top: 48px;
}
.post-nav-item {
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none; color: inherit;
}
.post-nav-next { text-align: right; }
.post-nav-label {
  font-size: 13px; color: var(--light);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.post-nav-title {
  font-size: 17px; font-weight: 600; color: var(--black);
  letter-spacing: -0.2px; line-height: 1.4;
}
.post-nav-item:hover .post-nav-title { text-decoration: underline; }

/* ── FEAT QUOTE SECTION - centered editorial blockquote on home ── */
.feat-quote-section {
  padding: 100px 0;
  border-bottom: 1px solid var(--border);
}
.feat-quote-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.feat-quote-text {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--black);
  margin: 0 0 32px 0;
  font-style: normal;
}
.feat-quote-attribution {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.feat-quote-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--black);
  letter-spacing: -0.01em;
}
.feat-quote-role {
  font-size: 16px;
  color: var(--mid);
  letter-spacing: 0;
}

@media (max-width: 768px) {
  .feat-quote-section { padding: 64px 0; }
  .feat-quote-text { font-size: 22px; }
}

/* ── TESTIMONIALS WALL ── */
.testimonials {
  padding: 92px 0;
  border-bottom: 1px solid var(--border);
}

.quotes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 72px;
}

.quote-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.quote-text {
  font-size: 17px;
  line-height: 1.7;
  color: var(--dark);
  font-style: normal;
  flex: 1;
}
.quote-text::before {
  content: "\201C";
  display: block;
  font-size: 48px;
  line-height: 1;
  color: var(--border);
  margin-bottom: 8px;
}

.quote-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.quote-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--black);
}

.quote-title {
  font-size: 15px;
  color: var(--light);
}

/* ── TESTIMONIAL SCREENSHOT CAROUSEL (shared: homepage + workshop pages) ── */
/* Infinite auto-scrolling marquee: the track holds the item list twice back
   to back, then animates left by exactly one list's width (-50%) on a loop,
   so the moment it resets to 0 the frame is pixel-identical — no visible jump. */
.testimonial-carousel {
  max-width: 960px;
  margin: 0 auto;
  overflow: hidden;
  /* RTL pages anchor overflowing content to the right edge, which starts the
     marquee at the end of the strip and lets it slide fully out of view.
     The wrapper must be LTR so the track anchors left, as the animation expects. */
  direction: ltr;
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.testimonial-carousel-track {
  display: flex;
  direction: ltr;
  width: max-content;
  gap: 16px;
  padding: 4px 4px 16px;
  animation: testimonial-marquee 48s linear infinite;
}
.testimonial-carousel:hover .testimonial-carousel-track,
.testimonial-carousel:focus-within .testimonial-carousel-track {
  animation-play-state: paused;
}

@keyframes testimonial-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-carousel-track { animation: none; overflow-x: auto; }
}

.testimonial-carousel-item {
  flex: 0 0 220px;
  width: 220px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  padding: 0;
  margin: 0;
  cursor: zoom-in;
  display: block;
  text-align: start;
  -webkit-appearance: none;
  appearance: none;
}
.testimonial-carousel-item picture,
.testimonial-carousel-item img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── LIGHTBOX (click-to-enlarge for testimonial carousel images) ── */
.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1001;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox-overlay.is-open { display: flex; }

.lightbox-img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  padding: 4px;
  line-height: 1;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.lightbox-close:hover { opacity: 1; }

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox-nav--prev { right: 16px; }
.lightbox-nav--next { left: 16px; }

@media (max-width: 600px) {
  .lightbox-nav { width: 38px; height: 38px; font-size: 18px; }
  .lightbox-nav--prev { right: 8px; }
  .lightbox-nav--next { left: 8px; }
  .lightbox-close { top: 12px; right: 12px; }
}

/* ── SERVICES BLOCK ── */
.services-block {
  padding: 92px 0;
  border-bottom: 1px solid var(--border);
}
.services-block .sec-tag { margin-bottom: 40px; }
.services-block--alt { background: var(--surface); }
.services-grid--2col {
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
}
.service-item {
  border-top: 1px solid var(--border);
  padding-top: 32px;
}
.service-item h3 {
  font-size: 20px; font-weight: 600;
  letter-spacing: -0.3px; margin-bottom: 12px;
}
.service-item > p {
  font-size: 16px; color: var(--mid);
  line-height: 1.7; margin-bottom: 20px;
}
.service-details {
  list-style: none;
  display: flex; flex-direction: column; gap: 8px;
}
.service-details li {
  font-size: 15px; color: var(--mid);
  padding-left: 24px; position: relative;
}
.service-details li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ── STEPS HORIZONTAL ── */
.steps--horizontal {
  flex-direction: row;
  gap: 0;
}
.steps--horizontal .step {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding-right: 32px;
  border-right: 1px solid var(--border);
  margin-right: 32px;
}
.steps--horizontal .step:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
}
.steps--horizontal .step-num {
  font-size: 16px;
  color: var(--mid);
  font-weight: 600;
  letter-spacing: 0.5px;
}

@media (max-width: 768px) {
  .services-grid--2col { grid-template-columns: 1fr; max-width: 100%; }
  .steps--horizontal { flex-direction: column; }
  .steps--horizontal .step {
    border-right: none; border-bottom: 1px solid var(--border);
    padding-right: 0; margin-right: 0;
    padding-bottom: 32px; margin-bottom: 32px;
  }
  .steps--horizontal .step:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
}

/* ── WORKSHOPS ── */
.section-heading {
  font-size: 28px; font-weight: 700; letter-spacing: -0.3px;
  color: var(--dark); text-align: center; margin: 0 0 48px;
}

.workshops-listing {
  padding: 96px 0 64px;
}
.workshops-listing .container {
  max-width: 1140px;
}
.workshops-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
@media (max-width: 768px) {
  .workshops-grid {
    grid-template-columns: 1fr;
  }
}
.workshop-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 36px 36px;
  transition: border-color 0.2s, background 0.2s;
}
.workshop-card:hover {
  border-color: var(--mid);
  background: var(--bg);
  transform: translateY(-3px);
}
.workshop-meta {
  display: flex; align-items: center;
  gap: 14px; margin-bottom: 20px;
}
.workshop-format { font-size: 13px; color: var(--light); font-weight: 500; }
.workshop-status {
  font-size: 12px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 3px 10px; border: 1px solid currentColor;
}
.workshop-status--open { color: #2d7d46; }
/* status classes are computed in workshops.njk: workshop-status--{{ status }} - keep all variants */
.workshop-status--closed { color: var(--light); }
.workshop-status--coming-soon { color: #b45309; }
.workshop-card h2 {
  font-size: 24px;
  font-weight: 700; letter-spacing: -0.5px;
  margin-bottom: 8px; line-height: 1.25;
}
.workshop-cycle { font-size: 15px; color: var(--light); margin-bottom: 18px; }
.workshop-desc {
  font-size: 17px; color: var(--mid);
  line-height: 1.7; margin-bottom: 32px;
  flex: 1;
}
.workshop-cta {
  display: inline-block;
  align-self: flex-start;
  background: var(--black); color: var(--bg);
  text-decoration: none;
  font-size: 16px; font-weight: 600;
  padding: 14px 28px;
  border-radius: var(--radius);
  transition: opacity 0.15s;
}
.workshop-cta:hover { opacity: 0.85; text-decoration: none; }

.workshop-how-section { padding: 0 0 96px; }
.workshop-how-section .container,
.workshop-faq-section .container { max-width: 1140px; }
.workshop-how-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.workshop-how-step { text-align: center; padding: 0 12px; }
.workshop-how-num {
  display: block; font-size: 15px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--light); margin-bottom: 12px;
}
.workshop-how-step h3 { font-size: 20px; font-weight: 700; margin: 0 0 10px; }
.workshop-how-step p { font-size: 16px; color: var(--mid); line-height: 1.6; margin: 0; }

.workshop-faq-section { padding: 0 0 96px; }
.workshop-faq-list { max-width: 720px; margin: 0 auto; }
.workshop-faq-item {
  border-bottom: 1px solid var(--border); padding: 18px 0;
}
.workshop-faq-item summary {
  font-size: 17px; font-weight: 600; color: var(--dark);
  cursor: pointer; list-style: none;
}
.workshop-faq-item summary::-webkit-details-marker { display: none; }
.workshop-faq-item summary::after { content: "+"; float: inline-end; color: var(--light); }
.workshop-faq-item[open] summary::after { content: "−"; }
.workshop-faq-item p { font-size: 16px; color: var(--mid); line-height: 1.6; margin: 12px 0 0; }

@media (max-width: 768px) {
  .workshop-how-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ── BLOG LISTING ── */
.blog-filter { margin-bottom: 40px; }
.blog-empty { font-size: 17px; color: var(--light); padding: 48px 0; }
.blog-list-section { padding: 64px 0 120px; }
.blog-list { list-style: none; padding: 0; margin: 0; }
.blog-list-item { border-bottom: 1px solid var(--border); }
.blog-list-item:first-child { border-top: 1px solid var(--border); }
.blog-list-link { display: block; padding: 40px 0; text-decoration: none; color: inherit; }
.blog-list-link:hover .blog-list-title { opacity: 0.7; }
.blog-list-date { font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--light); display: block; margin-bottom: 12px; }
.blog-list-title { font-size: 22px; font-weight: 600; color: var(--dark); margin: 0 0 10px; line-height: 1.35; }
.blog-list-desc { font-size: 17px; color: var(--mid); line-height: 1.6; margin: 0 0 16px; max-width: 640px; }
.blog-list-cta { font-size: 15px; font-weight: 600; color: var(--black); }

.blog-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.blog-filter-chip {
  background: none; border: 1px solid var(--border); border-radius: 20px;
  padding: 7px 16px; font-size: 15px; font-weight: 500; color: var(--mid);
  cursor: pointer; text-transform: capitalize; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.blog-filter-chip:hover { border-color: var(--mid); color: var(--black); }
.blog-filter-chip.is-active { background: var(--black); border-color: var(--black); color: var(--bg); }

.blog-featured {
  display: block; text-decoration: none; color: inherit;
  padding: 40px; margin-bottom: 8px; border-radius: 14px;
  background: var(--black); color: var(--bg);
}
.blog-featured-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--light); display: block; margin-bottom: 14px; }
.blog-featured-title { font-size: 28px; font-weight: 700; line-height: 1.3; margin: 0 0 12px; color: var(--bg); }
.blog-featured-desc { font-size: 16px; color: var(--light); line-height: 1.6; margin: 0 0 18px; max-width: 680px; }
.blog-featured .blog-list-date { color: var(--light); margin-bottom: 0; }
.blog-featured:hover .blog-featured-title { opacity: 0.85; }

@media (max-width: 600px) {
  .blog-featured { padding: 28px 24px; }
  .blog-featured-title { font-size: 22px; }
}

/* ── BLOG IMAGE CARDS (Hebrew blog index) ──
   Image on top with an optional teaser badge, then date, title, summary and the read link.
   Logical properties (inline-start) so the badge sits top-right in RTL. */
.blog-cards {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px;
}
.blog-card-item { display: flex; }
.blog-card {
  display: flex; flex-direction: column; width: 100%;
  text-decoration: none; color: inherit;
}
.blog-card-media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius); background: #1b1917;
}
.blog-card-media picture,
.blog-card-img {
  display: block; width: 100%; height: 100%;
}
.blog-card-img { object-fit: cover; transition: transform 0.3s ease; }
.blog-card-img--empty { background: #1b1917; }
.blog-card:hover .blog-card-img { transform: scale(1.03); }
.blog-card-teaser {
  position: absolute; top: 14px; inset-inline-start: 14px;
  max-width: calc(100% - 28px);
  background: var(--bg); color: var(--black);
  font-size: 14px; font-weight: 700; line-height: 1.3;
  padding: 6px 12px; border-radius: 999px;
}
.blog-card-body { display: flex; flex-direction: column; flex: 1; padding-top: 18px; }
.blog-card-body .blog-list-date { margin-bottom: 8px; }
.blog-card-title {
  font-size: 20px; font-weight: 700; line-height: 1.35;
  color: var(--black); margin: 0 0 10px; transition: opacity 0.15s;
}
.blog-card:hover .blog-card-title { opacity: 0.72; }
.blog-card-desc {
  font-size: 16px; line-height: 1.65; color: var(--mid); margin: 0 0 16px;
}
.blog-card-body .blog-list-cta { margin-top: auto; }

.blog-card--featured {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center;
  padding-bottom: 48px; margin-bottom: 48px; border-bottom: 1px solid var(--border);
}
.blog-card--featured .blog-card-body { padding-top: 0; }
.blog-card--featured .blog-card-title { font-size: 30px; line-height: 1.25; }
.blog-card--featured .blog-card-desc { font-size: 17px; }
.blog-card-eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--black); margin-bottom: 10px;
}

@media (max-width: 1100px) {
  .blog-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .blog-cards { grid-template-columns: 1fr; gap: 44px; }
  .blog-card--featured { grid-template-columns: 1fr; gap: 0; }
  .blog-card--featured .blog-card-body { padding-top: 18px; }
  .blog-card--featured .blog-card-title { font-size: 24px; }
  .blog-card-title { font-size: 22px; }
  .blog-card-desc { font-size: 19px; }
  .blog-card--featured .blog-card-desc { font-size: 19px; }
}

/* ── BLOG POST ── */
.post { padding: 64px 0 80px; }

/* ============================================================
   POST DARK HERO - blog post page header
   ============================================================ */
.post-dark-hero {
  background: #1a1a1a;
  color: var(--bg);
  padding: 100px 0 80px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.post-dark-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(249, 247, 242, 0.55);
  margin-bottom: 20px;
}
.post-dark-hero h1 {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--bg);
  margin: 0 0 24px 0;
  max-width: 800px;
}
.post-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  color: rgba(249, 247, 242, 0.65);
}
@media (max-width: 768px) {
  .post-dark-hero { padding: 64px 0 56px; }
  .post-dark-hero h1 { font-size: 32px; }
}

.post-header {
  /* merged from the former duplicate definition: padding-top 80px + max-width carried over */
  padding: 80px 0 48px;
  margin-bottom: 64px;
  border-bottom: 1px solid var(--border);
  max-width: 760px;
}
.post-date { font-size: 15px; color: var(--light); margin-bottom: 20px; }
.post-header h1 {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700; letter-spacing: -1px;
  line-height: 1.15; margin-bottom: 16px;
}
.post-description { font-size: 18px; color: var(--mid); line-height: 1.6; margin-bottom: 32px; }
.post-body {
  /* merged: padding carried over from the former duplicate definition */
  max-width: 680px; font-size: 17px; line-height: 1.8; color: var(--dark);
  padding: 60px 0 80px;
  overflow-wrap: anywhere;
}
.resource-video-wrap {
  width: min(860px, 100%);
  margin: 0 0 48px;
  aspect-ratio: 16 / 9;
  position: relative;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}
.resource-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.post-body h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; margin: 48px 0 16px; }
.post-body h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.3px; margin: 36px 0 12px; }
.post-body p { font-size: 18px; color: var(--dark); line-height: 1.85; margin-bottom: 20px; }
.post-body ul, .post-body ol { margin-bottom: 20px; padding-left: 24px; }
.post-body li { font-size: 18px; color: var(--dark); line-height: 1.75; margin-bottom: 8px; }
.post-body strong { font-weight: 600; color: var(--black); }
.post-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 32px auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.post-body pre {
  position: relative;
  background: #111;
  border-radius: 8px;
  padding: 28px;
  margin: 32px 0;
  overflow-x: auto;
}
.copy-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #2a2a2a;
  color: #888;
  border: 1px solid #333;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.copy-btn:hover { color: #fff; background: #3a3a3a; }
.post-body pre code {
  font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
  font-size: 15px;
  line-height: 1.7;
  color: #e8e8e8;
  background: none;
  padding: 0;
}
/* Hebrew prompt copybox (```` prompt fence): wraps as a paragraph, right to left */
.post-body pre code.language-prompt {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  direction: rtl;
  text-align: right;
  font-family: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.8;
  padding-top: 22px;
}
.post-body code {
  font-family: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
  font-size: 16px;
  background: #f2f2f2;
  color: #111;
  padding: 2px 6px;
  border-radius: 3px;
}

/* ── CONTACT ── */
.contact-section {
  /* merged: border-bottom carried over from the former duplicate definition */
  padding: 80px 0;
  border-bottom: 1px solid var(--border);
}
.contact-link {
  display: block; font-size: 17px; font-weight: 500;
  color: var(--black); text-decoration: none; margin-bottom: 8px;
}
.contact-link:hover { text-decoration: underline; }
.contact-footer-note { padding-top: 48px; border-top: 1px solid var(--border); }
.contact-footer-note p { font-size: 15px; color: var(--light); }

/* Contact page - two-column form layout */
.contact-page-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 80px;
  align-items: start;
  margin-bottom: 64px;
}
.contact-col-title {
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.2px; margin-bottom: 8px;
}
.contact-col-sub {
  font-size: 16px; color: var(--mid);
  line-height: 1.6; margin-bottom: 24px;
}
.contact-form-wrap {
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.contact-form-wrap iframe {
  display: block;
  width: 100%;
  height: 520px;
  border: none;
}
.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.contact-info-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  color: var(--black);
  transition: border-color 0.15s, background 0.15s;
}
.contact-info-item:hover {
  border-color: var(--black);
  background: var(--surface);
}
.contact-info-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--border);
  border-radius: 50%;
  color: var(--dark);
}
.contact-info-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contact-info-text strong {
  font-size: 16px; font-weight: 600;
  line-height: 1.3;
}
.contact-info-text span {
  font-size: 13px; color: var(--mid);
}

/* ═══════════════════════════════════════
   THANK-YOU PAGES
   ═══════════════════════════════════════ */

.tp-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: 80px 0;
}
.tp-card {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}
.tp-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 32px;
  color: var(--black);
}
.tp-headline {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--black);
  margin: 0 0 16px;
  line-height: 1.2;
}
.tp-body {
  font-size: 1.0625rem;
  color: var(--mid);
  line-height: 1.7;
  margin: 0 0 40px;
}
.tp-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0 0 32px;
}
.tp-fallback {
  font-size: 1rem;
  color: var(--light);
  line-height: 1.65;
  margin: 0 0 48px;
}
.tp-fallback a {
  color: var(--dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tp-fallback a:hover { color: var(--black); }
.tp-signature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.tp-sig-photo-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--border);
  border: 1px solid var(--border);
}
.tp-sig-photo-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}
.tp-sig-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.tp-sig-info { text-align: center; }
.tp-sig-name {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--black);
  line-height: 1.3;
}
.tp-sig-title {
  font-size: 0.9375rem;
  color: var(--light);
  margin-top: 2px;
}

/* ═══════════════════════════════════════
   RESPONSIVE - Mobile (≤ 768px)
   ═══════════════════════════════════════ */

@media (max-width: 768px) {
  .container { padding: 0 24px; }

  /* Nav - hamburger drawer */
  nav .container { flex-wrap: nowrap; justify-content: space-between; }
  .nav-toggle { display: flex; }
  .nav-menu {
    position: fixed;
    inset: 64px 0 0 0;
    background: var(--bg);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 24px 24px 40px;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 90;
    overflow-y: auto;
  }
  .nav-menu.is-open { transform: translateX(0); }
  .nav-menu a {
    padding: 18px 0;
    font-size: 18px;
    border-bottom: 1px solid var(--border);
    color: var(--dark);
  }
  .nav-menu .nav-cta {
    display: block;
    margin-top: 24px;
    padding: 18px 20px;
    font-size: 18px !important;
    background: var(--black);
    color: white !important;
    border: 1.5px solid var(--black);
    align-self: stretch;
    text-align: start;
  }

  /* Hero */
  .hero { padding: 64px 0 56px; }
  .hero h1 { font-size: 42px; line-height: 1.15; letter-spacing: -1px; }
  .hero-sub { font-size: 16px; }

  /* Numbers */
  .numbers-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .number-item + .number-item { border-left: none; padding-left: 0; }
  .number-item { padding-right: 0; }
  .number-value { font-size: 28px; }

  /* Capabilities */
  .cap-grid { grid-template-columns: 1fr; gap: 40px; }
  .capabilities { padding: 64px 0; }

  /* Approach */
  .approach-grid { grid-template-columns: 1fr; gap: 48px; }
  .approach { padding: 64px 0; }

  /* Projects */
  .projects-grid { grid-template-columns: 1fr; gap: 16px; background: transparent; }
  .project-card { border: 1px solid var(--border); }
  .projects { padding: 64px 0; }

  /* About */
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-photo { max-width: 360px; margin: 0 auto 24px; }
  .about { padding: 64px 0; }

  /* Approach steps body bump */
  .step-body p { font-size: 16px; }

  /* CTA */
  .cta-row { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* Services */
  .services-block { padding: 56px 0; }
  .services-grid { grid-template-columns: 1fr; gap: 40px; }
  .services-grid--2col { grid-template-columns: 1fr; max-width: 100%; }
  .service-item { padding-top: 28px; padding-bottom: 0; }
  .service-item h3 { font-size: 19px; line-height: 1.3; }
  .service-details li { font-size: 16px; }
  .sec-tag { letter-spacing: 1px; }
  .cta-btn { min-height: 48px; padding: 16px 32px; }
  .steps--horizontal { flex-direction: column; }
  .steps--horizontal .step {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0 0 24px 0;
    margin: 0 0 24px 0;
  }
  .steps--horizontal .step:last-child {
    border-bottom: none; padding-bottom: 0; margin-bottom: 0;
  }

  /* Workshops */
  .workshop-card { padding: 40px 24px; }

  /* Blog post */
  .post-body { font-size: 16px; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-next { text-align: left; }

  /* Contact */
  .contact-page-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-form-wrap iframe { height: 480px; }

  /* Page header */
  .page-header { padding: 56px 0 48px; }

  /* Footer */
  footer .container { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-links { flex-direction: column; gap: 8px; }

  /* Testimonials */
  .quotes-grid { grid-template-columns: 1fr; }
  .testimonial-carousel-item { flex-basis: 180px; width: 180px; }

  /* Headings */
  .sec-title { letter-spacing: -0.5px; }
  .cta-inner h2 { letter-spacing: -0.6px; }
}

@media (max-width: 480px) {
  .hero { padding: 48px 0 40px; }
  .hero h1 { font-size: 34px; letter-spacing: -0.5px; }
  .number-value { font-size: 24px; }
  .cap-item, .project-card, .quote-card, .workshop-card, .service-num-card, .service-feature-card { padding: 32px 20px; }
  .numbers-grid { grid-template-columns: 1fr 1fr; }

  /* Hero CTA: full-width thumb-target */
  .hero-cta { display: block; width: 100%; text-align: center; min-height: 48px; }

  /* Stats: 5th item spans both cols */
  .numbers-grid { grid-template-columns: 1fr 1fr; }
  .numbers-grid > :nth-child(5) { grid-column: 1 / -1; text-align: center; }

  /* Stack tags: cap visible */
  .stack-tags li:nth-child(n+7) { display: none; }

  /* Testimonials */
  .quotes-grid { grid-template-columns: 1fr; }
  .testimonial-carousel-item { flex-basis: 150px; width: 150px; }
}

/* ===================== */
/* Hebrew / RTL overrides */
/* ===================== */

[lang="he"] {
  font-family: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

[lang="he"] h1,
[lang="he"] h2,
[lang="he"] h3,
[lang="he"] h4,
[lang="he"] .sec-title,
[lang="he"] .hero h1,
[lang="he"] .cta-inner h2,
[lang="he"] .project-card h3,
[lang="he"] .page-header h1 {
  font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  letter-spacing: 0 !important;
}

[lang="he"] p,
[lang="he"] a,
[lang="he"] button,
[lang="he"] li,
[lang="he"] span,
[lang="he"] input,
[lang="he"] select,
[lang="he"] textarea {
  font-family: 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Reset negative letter-spacing for Hebrew text */
[lang="he"] .sec-tag {
  letter-spacing: 0.1em !important;
}

/* Remove italics slant for Hebrew (unnatural and cheap) */
[lang="he"] blockquote,
[lang="he"] q,
[lang="he"] cite,
[lang="he"] em,
[lang="he"] i,
[lang="he"] .quote-text {
  font-style: normal !important;
}

/* Fix double-reversal nav layouts in RTL */
/* Let dir="rtl" on <html> naturally align the flexbox instead of overriding with row-reverse */
[lang="he"] nav .container {
  /* Native flex direction handles RTL */
}

[lang="he"] .nav-menu {
  gap: 26px;
}

/* Keep numbers LTR within RTL context */
[lang="he"] .number-value {
  direction: ltr;
  display: inline-block;
}
[lang="he"] .cap-num {
  direction: ltr;
}
[lang="he"] .step-num {
  direction: ltr;
}

/* Language toggle link in nav */
.nav-lang-toggle {
  font-size: 15px;
  font-weight: 500;
  color: var(--mid);
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  letter-spacing: 0.02em;
  transition: color 0.2s, border-color 0.2s;
}
.nav-lang-toggle:hover {
  color: var(--black);
  border-color: var(--mid);
}
.nav-members-btn {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--bg) !important;
  background: var(--black);
  border: 1.5px solid var(--black);
  border-radius: var(--radius);
  padding: 6px 12px;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
}
.nav-members-btn:hover {
  background: var(--dark);
  border-color: var(--dark);
}

/* Text alignment and specific block overrides */
[lang="he"] .sec-tag { text-align: right; }
[lang="he"] .sec-title { text-align: right; }
[lang="he"] .hero-label { text-align: right; }
[lang="he"] .hero h1 { text-align: right; line-height: 1.25; }
[lang="he"] .hero-sub { text-align: right; }
[lang="he"] .cap-item { text-align: right; }
[lang="he"] .step-body { text-align: right; }
[lang="he"] .about-content { text-align: right; }
[lang="he"] .project-card { text-align: right; }
[lang="he"] .cta-inner { text-align: right; }
[lang="he"] .cta-row { justify-content: flex-start; gap: 20px; }
[lang="he"] .service-num-card { text-align: right; }
[lang="he"] .service-feature-card { text-align: right; }
[lang="he"] .service-feature-value { text-align: left; }
[lang="he"] .contact-info-text { text-align: right; }
[lang="he"] .newsletter-input { text-align: right; }

/* Stats Bar RTL Mirroring */
[lang="he"] .number-item {
  padding-right: 0;
  padding-left: 32px;
  text-align: right;
}
[lang="he"] .number-item + .number-item {
  padding-left: 0;
  padding-right: 32px;
  border-left: none;
  border-right: 1px solid var(--border);
}
[lang="he"] .numbers--divided .number-item + .number-item {
  border-right: none;
}
[lang="he"] .numbers--divided .number-item + .number-item::before {
  left: auto;
  right: 0;
}

@media (max-width: 768px) {
  [lang="he"] .hero h1 { font-size: 38px; line-height: 1.2; }
  [lang="he"] .number-item { padding-left: 0; padding-right: 0; }
  [lang="he"] .number-item + .number-item {
    border-right: none;
    border-top: none;
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
  }
}


/* Mirror horizontal steps borders and paddings for RTL */
[lang="he"] .steps--horizontal .step {
  padding-right: 0;
  padding-left: 32px;
  border-right: none;
  border-left: 1px solid var(--border);
  margin-right: 0;
  margin-left: 32px;
}
[lang="he"] .steps--horizontal .step:last-child {
  border-left: none;
  padding-left: 0;
  margin-left: 0;
}

@media (max-width: 768px) {
  [lang="he"] .steps--horizontal .step {
    border-left: none;
    border-bottom: 1px solid var(--border);
    padding: 0 0 24px 0;
    margin: 0 0 24px 0;
  }
  [lang="he"] .steps--horizontal .step:last-child {
    border-bottom: none;
  }
}

/* Service list bullets alignment in RTL */
[lang="he"] .service-details li {
  padding-left: 0;
  padding-right: 24px;
}
[lang="he"] .service-details li::before {
  left: auto;
  right: 0;
}

/* ── BLOG POST - RTL overrides ── */
[lang="he"] .post-header { text-align: right; }
[lang="he"] .post-header h1 { text-align: right; }
[lang="he"] .post-date { text-align: right; }
[lang="he"] .post-description { text-align: right; }
[lang="he"] .post-body { text-align: right; }
[lang="he"] .post-body h2,
[lang="he"] .post-body h3 { text-align: right; }
[lang="he"] .post-body p { text-align: right; }

/* Fix list indentation direction */
[lang="he"] .post-body ul,
[lang="he"] .post-body ol {
  padding-left: 0;
  padding-right: 24px;
}

/* Fix blockquote border side */
[lang="he"] .post-body blockquote {
  border-left: none;
  border-right: 3px solid var(--border);
  padding-left: 0;
  padding-right: 20px;
}

/* Code blocks stay LTR in RTL context */
[lang="he"] .post-body pre,
[lang="he"] .post-body code {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}

/* Fix copy button position for RTL */
[lang="he"] .copy-btn {
  right: auto;
  left: 12px;
}

/* Fix post nav direction for RTL */
[lang="he"] .post-nav-next { text-align: left; }
[lang="he"] .post-nav-prev { text-align: right; }

/* Language toggle in post header */
[lang="he"] .post-header .nav-lang-toggle {
  display: inline-block;
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  [lang="he"] .post-nav-next { text-align: right; }
}

/* ============================================================
   EXPERTISE SECTION - faded industry labels on contact page
   ============================================================ */
.expertise-section {
  padding: 80px 0 100px;
  text-align: center;
  border-top: 1px solid var(--border);
}
.expertise-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 40px;
  display: block;
}
.expertise-labels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 56px;
  opacity: 0.35;
}
.expertise-labels span {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--black);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .expertise-labels { gap: 24px 32px; }
  .expertise-labels span { font-size: 22px; }
}

/* ── ANIMATIONS ── */

/* 1 - Page-load fade-in */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

main {
  animation: fadeIn 0.35s ease forwards;
}

/* 2 - Hero text entrance stagger */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-label        { animation: slideUp 0.45s ease forwards; animation-delay: 0.05s; opacity: 0; }
.hero h1           { animation: slideUp 0.45s ease forwards; animation-delay: 0.13s; opacity: 0; }
.hero-sub          { animation: slideUp 0.45s ease forwards; animation-delay: 0.21s; opacity: 0; }
.hero-cta-row      { animation: slideUp 0.45s ease forwards; animation-delay: 0.29s; opacity: 0; }

/* 3 - Card hover lift */
.cap-item,
.project-card,
.quote-card {
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.cap-item:hover,
.project-card:hover,
.quote-card:hover {
  transform: translateY(-3px);
}

/* 4 - Scroll-driven section entrances */
@supports (animation-timeline: view()) {
  @keyframes sectionEntrance {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .capabilities,
  .approach,
  .projects,
  .about,
  .testimonials,
  .cta-section {
    animation: sectionEntrance linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 15%;
  }
}

/* 5 - Nav link underline grow */
.nav-menu a:not(.nav-cta):not(.nav-lang-toggle) {
  position: relative;
}

.nav-menu a:not(.nav-cta):not(.nav-lang-toggle)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--black);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.nav-menu a:not(.nav-cta):not(.nav-lang-toggle):hover::after {
  transform: scaleX(1);
}

[lang="he"] .nav-menu a:not(.nav-cta):not(.nav-lang-toggle)::after {
  transform-origin: right;
}

/* 6 - Stack tag hover invert */
.stack-tag {
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  cursor: default;
}

.stack-tag:hover {
  background: var(--black);
  color: var(--bg);
  border-color: var(--black);
}

/* ── REDUCED MOTION GUARD ── */
@media (prefers-reduced-motion: reduce) {
  main,
  .hero-label, .hero h1, .hero-sub, .hero-cta-row {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .cap-item, .project-card, .quote-card,
  .workshop-card, .service-num-card {
    transition: none;
  }

  .capabilities, .approach, .projects,
  .about, .testimonials, .cta-section {
    animation: none !important;
  }

  .nav-menu a:not(.nav-cta):not(.nav-lang-toggle)::after {
    transition: none;
  }

  .stack-tag {
    transition: none;
  }
}

/* ── PRINT / NON-SCROLLING RENDERER GUARD ──
   Animations never run in print (and in some screenshot/preview
   renderers), so anything that starts at opacity: 0 stays invisible.
   Force every animated element fully visible. */
@media print {
  main,
  .hero-label, .hero h1, .hero-sub, .hero-cta-row,
  .capabilities, .approach, .projects,
  .about, .testimonials, .cta-section {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Pricing box (workshop detail pages + service pages + home) ──
   NOT case-study-specific: service pages use .workshop-price-value,
   so this family stays in the global sheet (css-reshape Phase 4). */
.workshop-pricing-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 40px;
  margin: 40px 0;
  max-width: 680px;
}
.workshop-price-value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--black);
  margin-bottom: 8px;
}
.workshop-price-value span {
  font-size: 17px;
  font-weight: 400;
  color: var(--mid);
}
.workshop-price-note {
  font-size: 16px;
  color: var(--mid);
  margin-bottom: 20px;
}
.workshop-price-includes {
  font-size: 16px;
  line-height: 1.8;
  color: var(--mid);
  margin-bottom: 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
@media (max-width: 640px) {
  .workshop-pricing-box { padding: 28px 24px; }
}

/* Webinar top banner */
#webinar-banner {
  background: var(--surface, #F2EFE9);
  border-bottom: 1px solid var(--border, #E5E1DA);
  width: 100%;
}
.webinar-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 40px;
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
}
.webinar-banner-text {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.webinar-banner-line1 {
  font-size: 17px;
  font-weight: 600;
  color: var(--black, #1A1A1A);
}
.webinar-banner-line2 {
  font-size: 16px;
  color: var(--mid, #57534E);
}
.webinar-banner-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.webinar-banner-cta {
  display: inline-block;
  background: #E8640A;
  color: #fff;
  padding: 10px 24px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s;
  font-family: inherit;
}
.webinar-banner-cta:hover { opacity: 0.85; }
.webinar-banner-close {
  background: none;
  border: none;
  color: var(--mid, #57534E);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
  transition: color 0.15s;
}
.webinar-banner-close:hover { color: var(--black, #1A1A1A); }
@media (max-width: 700px) {
  .webinar-banner-inner { flex-direction: column; align-items: flex-start; gap: 12px; padding: 12px 20px; }
  .webinar-banner-actions { width: 100%; justify-content: space-between; }
}

/* ── Shared funnel components (quiz pages + workshop .md pages) ──
   Kept global on purpose: workshop content markdown uses these too
   (css-reshape Phase 4). */
.quiz-submit-btn {
  width: 100%;
  padding: 14px;
  background: var(--black);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  margin-top: 12px;
}
.quiz-submit-btn:hover {
  opacity: 0.85;
}
.approach-grid-hr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
}
.approach-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 24px;
}
.approach-col h3 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 8px;
}
.approach-col p {
  font-size: 16px;
  color: var(--mid);
  line-height: 1.6;
}
@media (max-width: 768px) {
  .approach-grid-hr {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ── HR FUNNEL: narrow text sections (pain/solution) ── */
.hr-text-section {
  padding: 60px 0;
}
.hr-text-section .container {
  max-width: 700px;
}
.hr-text-section--alt {
  background: var(--surface);
}
.hr-text-section--wide .container {
  max-width: 880px;
}
.hr-text-section--center {
  text-align: center;
}
.hr-text-section h2 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.hr-text-section p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--dark);
  margin-bottom: 20px;
}
.hr-text-section p:last-child { margin-bottom: 0; }

/* ── HR FUNNEL: testimonial cards (reuses .cs-testimonial card look in a grid) ── */
.hr-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 880px;
  margin: 0 auto;
}
/* ── Shared media frame (dark-hero video placeholder + real iframe embeds) ── */
.media-frame {
  position: relative;
  max-width: 800px;
  margin: 40px auto 32px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(249, 247, 242, 0.15);
  background: rgba(255, 255, 255, 0.04);
}
.media-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.media-frame-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  text-align: center;
  color: rgba(249, 247, 242, 0.45);
  font-size: 16px;
}
.media-frame--light {
  border-color: var(--border);
  background: var(--surface);
}

/* ── Shared thank-you / holding page pattern ── */
.thank-you-section {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
}
.thank-you-inner {
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}
.thank-you-icon {
  color: var(--black);
  margin-bottom: 24px;
}
.thank-you-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--black);
}
.thank-you-text {
  font-size: 1.1rem;
  color: var(--mid);
  margin-bottom: 32px;
  line-height: 1.7;
}
.thank-you-back,
.thank-you-btn-secondary {
  display: inline-block;
  padding: 12px 28px;
  background: var(--black);
  color: var(--bg);
  text-decoration: none;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 17px;
  transition: opacity 0.15s;
}
.thank-you-back:hover,
.thank-you-btn-secondary:hover { opacity: 0.85; }
.thank-you-btn-secondary--outline {
  background: transparent;
  color: var(--mid);
  border: 1.5px solid var(--border);
}
.thank-you-inner--wide {
  max-width: 640px;
}
.thank-you-actions {
  text-align: center;
}
.thank-you-actions + .thank-you-actions {
  margin-top: 16px;
}
.thank-you-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
}

/* ── SPACIOUS TIMELINE TABLES ── */
.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  font-size: 17px;
  text-align: right;
}
.post-body th {
  font-weight: 700;
  color: var(--black);
  border-bottom: 2px solid var(--border);
  padding: 16px 12px;
}
.post-body td {
  padding: 18px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--dark);
}
.post-body tr:hover td {
  background: rgba(242, 239, 233, 0.35);
}

/* ── STACKED CAPABILITIES GRID (ONE CARD PER ROW) ── */
.cap-grid--stack {
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 769px) {
  .cap-grid--stack .cap-item {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    align-items: start;
    padding: 32px 40px;
  }
  .cap-grid--stack .cap-item .cap-header {
    margin-bottom: 0;
  }
  .cap-grid--stack .cap-item .cap-num {
    margin-bottom: 8px;
  }
  .cap-grid--stack .cap-item h3 {
    margin-bottom: 0;
  }
}

/* ── OUTCOMES LIST HIGHLIGHT ── */
.outcomes-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 32px 0;
}
.outcome-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 20px 24px;
  border-radius: var(--radius);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.outcome-item:hover {
  border-color: var(--black);
  background: rgba(242, 239, 233, 0.2);
}
.outcome-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  flex-shrink: 0;
  margin-top: 2px;
}
.outcome-icon svg {
  stroke-width: 3px;
}
.outcome-text {
  font-size: 16px;
  font-weight: 500;
  color: var(--black);
  line-height: 1.6;
}

/* ── DARK MODE ── */
[data-theme="dark"] {
  --black:   #F2EFE9;
  --dark:    #F2EFE9;
  --mid:     #C7C2B8;
  --light:   #9A958B;
  --border:  #38352F;
  --bg:      #1B1917;
  --surface: #242220;
  --white:   #242220;
}
[data-theme="dark"] .newsletter-input {
  background: var(--surface);
}
[data-theme="dark"] .post-body code {
  background: #2A2723;
  color: #E8E4DC;
}
[data-theme="dark"] .nav-logo-img,
[data-theme="dark"] .footer-logo-img {
  filter: invert(1);
}
/* these sections hardcode a permanently-dark background and lean on
   var(--bg) to mean "the light neutral color" for their own text/CTA -
   pin it back to light so it doesn't invert along with the page bg */
[data-theme="dark"] .hero--dark,
[data-theme="dark"] .dark-hero,
[data-theme="dark"] .post-dark-hero {
  --bg: #F9F7F2;
}

/* ── THEME TOGGLE BUTTON ── */
.nav-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin-inline-start: 4px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--black);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-theme-toggle:hover {
  background: var(--surface);
}
.nav-theme-toggle .icon-sun {
  display: none;
}
.nav-theme-toggle .icon-moon {
  display: block;
}
[data-theme="dark"] .nav-theme-toggle .icon-sun {
  display: block;
}
[data-theme="dark"] .nav-theme-toggle .icon-moon {
  display: none;
}




/* ── MOBILE READABILITY BUMP (design change 0020b) ──
   Reading text only: +3px on phones. Labels, buttons, nav untouched.
   Kept at end of file so it wins the cascade over earlier mobile overrides. */
@media (max-width: 768px) {
  /* 17px group -> 20px */
  .cap-item p,
  .approach-left p,
  .step-body p,
  .project-card p,
  .about-content p,
  .blog-list-desc,
  .newsletter-sub,
  .dark-hero-sub,
  .service-num-card p,
  .quote-text,
  .workshop-desc,
  .webinar-intro,
  .hr-text-section p,
  .post-tldr li {
    font-size: 20px;
  }

  /* 16px group -> 19px */
  .hero-sub,
  .cta-inner p,
  .contact-col-sub,
  .workshop-how-step p,
  .workshop-faq-item p,
  .blog-featured-desc,
  .service-details li {
    font-size: 19px;
  }

  /* Blog post reading surface: 18px -> 21px */
  .post-body p,
  .post-body li,
  .post-description {
    font-size: 21px;
  }

  /* Keep heading hierarchy above the bumped body text */
  .cap-item h3,
  .step-body h4,
  .project-card h3,
  .service-num-card h3,
  .service-feature-card h3,
  .service-item h3,
  .workshop-how-step h3 {
    font-size: 22px;
  }
  .post-body h3 {
    font-size: 23px;
  }
  .post-body h2 {
    font-size: 26px;
  }
}

/* ── Consent banner (Phase 48.2) ──
   Uses the existing tokens only, so it follows the light/dark theme automatically.
   Logical properties throughout: the Hebrew layout is RTL and must mirror without
   a separate rule set. See session handoff 0039 for why physical offsets bite here. */

.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 9999;
  background: var(--bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.08);
}

.consent-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.consent-text {
  flex: 1 1 320px;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--mid);
}

.consent-text a {
  color: var(--black);
  text-decoration: underline;
  /* Keep the policy link on one line. Without this the two Hebrew words split
     across a line break on narrow screens and read as separate links. */
  white-space: nowrap;
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Accept and reject share this class on purpose. Equal weight is a requirement,
   not a preference: a weaker reject button invalidates the consent collected. */
.consent-btn {
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  padding: 11px 20px;
  border: 1px solid var(--black);
  border-radius: var(--radius);
  background: var(--black);
  color: var(--bg);
  cursor: pointer;
}

.consent-btn:hover { opacity: 0.85; }

.consent-btn-quiet {
  background: transparent;
  color: var(--black);
}

/* "Cookie settings" on the first-visit notice. A link, not a button, and that is
   deliberate: the button is the one action the notice asks for, and a second
   element with equal weight beside it turns one clear ask into a choice between
   two. It sits in the actions row so the notice stays a single block of text -
   an earlier version put it in a second paragraph, which the flex row placed
   beside the first and made the whole banner read as duplicated. */
.consent-link {
  align-self: center;
  font-size: 14px;
  color: var(--mid);
  text-decoration: underline;
  white-space: nowrap;
}

.consent-link:hover { color: var(--black); }

/* The category picker (.consent-panel / .consent-row) was removed on 2026-08-04
   when the banner became an accept-or-leave wall. With one set of terms there is
   nothing to pick between, so the markup and its styles are both gone. */

@media (max-width: 560px) {
  .consent-inner { padding: 16px; gap: 12px; }
  .consent-actions { width: 100%; }
  .consent-actions .consent-btn { flex: 1 1 auto; }
}