/* ==========================================================================
   Senaya — Design System · "Organic Calm"
   -------------------------------------------------------------------------
   Visual language built around the brand's tree-ring mark:
   concentric rings, warm earthy gradients, generous breathing space and
   soft, physiological calm. Colors anchored to the logo:
     - Dark brown  #61524A  -> "SENAYA" wordmark strokes
     - Warm tan    #A89888  -> tree-ring band
   ========================================================================== */

:root {
  /* Brand colors (from logo) */
  --color-brown: #61524A;
  --color-brown-dark: #4A3D36;
  --color-brown-deep: #2E2621;      /* deepest tone — footer, dark bands */
  --color-tan: #A89888;
  --color-tan-dark: #8C7A68;
  --color-tan-light: #E8E1D6;
  --color-accent: #B98A5E;          /* warm amber accent for highlights */

  /* Neutrals */
  --color-bg: #FBF8F4;
  --color-bg-alt: #F3ECE2;
  --color-white: #FFFFFF;

  /* Section background scale — three fixed steps. Home-page sections draw
     from these only; no per-section hard-coded value or color-mix(). */
  --bg-base: #FBF8F4;
  --bg-tint: #F4EDE4;
  --bg-deep: #EBE0D2;

  /* Semantic aliases */
  --color-text: var(--color-brown-dark);
  --color-heading: var(--color-brown);
  --color-muted: #8A7B70;
  --color-border: var(--color-tan-light);
  --color-link: var(--color-brown);
  --color-link-hover: var(--color-tan-dark);

  /* Gradients */
  --grad-warm: linear-gradient(135deg, #FBF8F4 0%, #F3ECE2 55%, #ECE1D2 100%);
  --grad-brand: linear-gradient(120deg, #6E5D53 0%, #61524A 45%, #4A3D36 100%);
  --grad-heading: linear-gradient(120deg, #61524A 0%, #8C7A68 100%);

  /* Typography — central system. Never hard-code a font name in a selector;
     always reference one of these variables.
     Headings use "Ploni ML" (Fontef, commercial) when its local files are
     present; that font is NOT bundled, so we currently stand in with Heebo,
     a modern Google-hosted Hebrew sans with a very close feel. To switch to
     Ploni, add the @font-face below and prepend "Ploni ML" to --font-heading. */
  --font-heading: "Heebo", "Assistant", "Arial Hebrew", sans-serif;
  --font-body: "Assistant", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-en: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Layout */
  --container-max: 1180px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-card: var(--radius-lg);   /* alias: cards, portraits, panels */
  --radius-pill: 999px;
  --shadow-soft: 0 10px 40px -12px rgba(74, 61, 54, 0.18);
  --shadow-card: 0 2px 8px rgba(74, 61, 54, 0.05);
  --shadow-hover: 0 22px 50px -18px rgba(74, 61, 54, 0.30);
  --transition: 0.25s cubic-bezier(.4, 0, .2, 1);
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Backstop against a stray horizontal scrollbar from a decorative element
   overshooting the viewport. `clip` rather than `hidden`, because `hidden` makes
   the nearest ancestor a scroll container and would break any `position: sticky`
   further down the page. */
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--color-bg);
  background-image:
    radial-gradient(1100px 600px at 90% -8%, rgba(185, 138, 94, 0.07), transparent 60%),
    radial-gradient(900px 500px at -10% 12%, rgba(168, 152, 136, 0.10), transparent 55%);
  background-attachment: fixed;
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:lang(en) body { font-family: var(--font-en); }
/* Latin headings read best in Poppins (already loaded); Heebo is the fallback. */
:lang(en) { --font-heading: "Poppins", "Heebo", sans-serif; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-link); text-decoration: none; transition: color var(--transition); }
a:hover, a:focus-visible { color: var(--color-link-hover); }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; }
::selection { background: var(--color-tan); color: #fff; }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.65rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
p { margin: 0 0 1.1em; color: var(--color-text); }
.lede { font-size: 1.18rem; line-height: 1.7; color: var(--color-muted); }
/* Emphasis inside a lede: bold alone reads weak against the muted grey, so the
   highlighted run also steps up to the heading brown. 600 is a real loaded
   weight — 700 would be synthesised for Assistant. */
.lede strong { font-weight: 600; color: var(--color-brown); }

/* ---------- Layout helpers ---------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 24px;
}
section { padding-block: clamp(3.5rem, 8vw, 6rem); position: relative; }
/* Alternating section backgrounds create clear boundaries between the
   top-of-page sections (cream / white / cream). */
.section-cream { background: var(--color-bg); }
.section-white { background: var(--color-white); }
/* RTL readability: cap body-copy line length so paragraphs don't stretch
   across the full section width. Eyebrows are marked up as <p> but are labels,
   not prose — :not() keeps the measure off them, which the rule had always
   claimed to do but didn't: at 65ch the long en hero eyebrow was being wrapped
   at every width, ~90px short of the room its line actually had. */
main p:not(.eyebrow) { max-width: 65ch; }
.section-alt {
  background: var(--color-bg-alt);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.4), transparent 30%);
}
.text-center { text-align: center; }
/* `main p` caps the measure at 65ch, which leaves the paragraph box narrower
   than its container and pinned to the start edge — so centred text still read
   as off-centre. Centre the box itself wherever the block is centred. */
.text-center p { margin-inline: auto; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-tan-dark);
  font-weight: 600;
  margin-bottom: 1em;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-tan));
}
.text-center .eyebrow { justify-content: center; }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-soft), transform 0.8s var(--ease-soft);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  inset-inline-start: -999px;
  top: 0;
  background: var(--color-brown);
  color: var(--color-white);
  padding: 10px 18px;
  z-index: 200;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { inset-inline-start: 0; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 248, 244, 0.72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(168, 152, 136, 0.22);
  transition: box-shadow var(--transition), background var(--transition);
}
.site-header.is-scrolled {
  box-shadow: 0 6px 30px -18px rgba(74, 61, 54, 0.45);
  background: rgba(251, 248, 244, 0.9);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--color-brown);
}
.brand img { height: 42px; width: auto; transition: transform var(--transition); }
.brand:hover img { transform: rotate(-6deg) scale(1.05); }

/* Wordmark lockup: light, widely tracked caps over a smaller tracked tagline,
   centred on each other. Latin in both languages — it is the brand mark, not
   copy. The trailing letter-space of the last glyph would push each line off
   centre, so text-indent adds the same amount back on the leading edge. */
.brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  line-height: 1;
  direction: ltr;
}
.brand-name {
  font-family: var(--font-en);
  font-size: 1.26rem;
  font-weight: 400;
  letter-spacing: 0.62em;
  text-indent: 0.62em;
  color: var(--color-brown);
}
.brand-tagline {
  display: block;
  font-family: var(--font-en);
  font-size: 0.5rem;
  font-weight: 400;
  letter-spacing: 0.17em;
  text-indent: 0.17em;
  color: var(--color-tan-dark);
  text-transform: uppercase;
  white-space: nowrap;
}
/* Phones: the full tracking would push the header past the viewport once the
   language pill and burger are accounted for, so tighten the whole lockup
   rather than dropping the tagline. text-indent tracks letter-spacing so each
   line stays optically centred (see the .brand-lockup note above), and
   white-space: nowrap above keeps the tagline on one line. */
@media (max-width: 767px) {
  .site-header .brand-lockup { gap: 1px; }
  .site-header .brand-name {
    font-size: 1.0625rem;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    line-height: 1.1;
  }
  .site-header .brand-tagline {
    font-size: 0.5rem;
    letter-spacing: 0.12em;
    text-indent: 0.12em;
    line-height: 1.2;
    opacity: 0.75;
  }
  /* The mark is a sibling of .brand-lockup, not a child. */
  .site-header .brand img { height: 34px; }
}

.main-nav { display: none; }
.main-nav ul { display: flex; align-items: center; gap: 30px; }
.main-nav a {
  position: relative;
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--color-brown-dark);
  padding-block: 6px;
}
.main-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-tan));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition);
}
.main-nav a:hover,
.main-nav a[aria-current="page"] { color: var(--color-brown); }
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-border);
  color: var(--color-brown-dark);
  background: rgba(255, 255, 255, 0.6);
  padding: 8px 15px;
  border-radius: var(--radius-pill);
  font-size: 0.86rem;
  font-weight: 600;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.lang-switch:hover { border-color: var(--color-tan); color: var(--color-brown); background: var(--color-white); }
.lang-switch svg { width: 14px; height: 14px; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-brown);
  position: relative;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

.main-nav.is-open {
  display: block;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: rgba(251, 248, 244, 0.98);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}
.main-nav.is-open ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 18px; }
.main-nav.is-open a { display: block; padding: 13px 0; border-bottom: 1px solid var(--color-border); }
.main-nav.is-open a::after { display: none; }

@media (min-width: 900px) {
  .main-nav { display: block; }
  .main-nav ul { flex-direction: row; }
  .nav-toggle { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* The label is centred here, not by text-align — text-align has no effect on
     a flex container's items. Inert while the button shrink-wraps its content;
     it only shows up once something stretches the button (full-width CTAs,
     grid/flex stretch), which is exactly when the label would otherwise pin to
     the start edge. */
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.98rem;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition),
              background var(--transition), color var(--transition), border-color var(--transition);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--grad-brand);
  color: var(--color-white);
  box-shadow: 0 12px 26px -12px rgba(74, 61, 54, 0.6);
}
.btn-primary:hover { color: var(--color-white); box-shadow: 0 18px 34px -12px rgba(74, 61, 54, 0.7); }
.btn-outline {
  background: transparent;
  color: var(--color-brown);
  border-color: var(--color-tan);
}
.btn-outline:hover { background: var(--color-brown); color: var(--color-white); border-color: var(--color-brown); }

/* ---------- Founder bio (home about teaser) ---------- */
/* Mobile-first: portrait comes first in the DOM, so it stacks above the text.
   The image is a direct grid child — no wrapper — so the two-column desktop
   rule below has two items to place instead of one. */
.home-about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.home-about__portrait {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}
/* The CTA is centered under the bio text rather than hugging the start edge. */
.home-about__body .btn {
  display: block;
  width: fit-content;
  margin-inline: auto;
}
/* Desktop: explicit columns, so the portrait sits on the outer edge of the
   reading direction (left in RTL, right in LTR) without forcing `direction`. */
@media (min-width: 900px) {
  .home-about {
    grid-template-columns: minmax(0, 1fr) minmax(0, 34%);
    gap: clamp(2rem, 4vw, 3.5rem);
    /* start, not center: the heading should line up with the top edge of the
       portrait rather than floating down beside its middle. */
    align-items: start;
  }
  /* grid-row is explicit: the portrait is first in the DOM (for the mobile
     stack) but sits in column 2, so auto-placement would push the body to a
     second row. */
  .home-about__body { grid-column: 1; grid-row: 1; }
  .home-about__portrait { grid-column: 2; grid-row: 1; max-height: 460px; }
}

/* ---------- Hero ---------- */
.hero {
  padding-block: clamp(64px, 11vw, 132px);
  position: relative;
  overflow: hidden;
}
/* Hero background video + readability overlay */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(251, 248, 244, 0.82);
  z-index: 1;
  pointer-events: none;
}
.hero .container { position: relative; z-index: 2; }

/* The poster sits permanently behind the video rather than only appearing at a
   breakpoint. The video is absolutely positioned over the whole band, so this
   is invisible while it plays and becomes the fallback the moment it does not
   — slow connection, unsupported codec, blocked autoplay, or reduced motion.
   That way the band is never an empty colour. */
.hero {
  background: url("../video/hero-poster.jpg") center / cover no-repeat;
}

/* Respect users who prefer reduced motion — the poster above shows through */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}
.hero-grid {
  display: grid;
  gap: 48px;
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; }
}
.hero-logo { display: flex; justify-content: center; }
.hero-logo img {
  width: min(430px, 90%);
  filter: drop-shadow(0 24px 44px rgba(74, 61, 54, 0.22));
  animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
/* Solo hero (no logo column): keep copy readable at a comfortable width */
.hero-copy--solo { max-width: 780px; }
.hero-copy--solo h1 { font-size: clamp(2.05rem, 4.8vw, 3.15rem); }
.hero-copy h1 {
  margin-bottom: 0.2em;
  background: var(--grad-heading);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-brand-desc {
  font-size: 1.14rem;
  font-weight: 600;
  color: var(--color-brown);
  margin-bottom: 0.5em;
}
.hero-slogan {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-tan-dark);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 15px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.5);
  margin-bottom: 1.1em;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.8em; }

/* Hero entrance (load animation) */
.hero-copy > * { animation: rise 0.9s var(--ease-soft) both; }
.hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.15s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.25s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.35s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.45s; }
.hero-copy > *:nth-child(6) { animation-delay: 0.55s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Cards / Grids ---------- */
.grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

#services-offerings, .service-detail { scroll-margin-top: 90px; }
.section-anchor { display: block; position: relative; top: -70px; visibility: hidden; }
.service-cta { margin-top: 28px; }

.grid-4 { counter-reset: card; }
.card {
  position: relative;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.card::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: inline-start;
  background: linear-gradient(90deg, var(--color-accent), var(--color-tan));
  transition: transform 0.4s var(--ease-soft);
}
.card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-6px);
  border-color: rgba(185, 138, 94, 0.4);
}
.card:hover::before { transform: scaleX(1); }
.grid-4 .card { counter-increment: card; }
.grid-4 .card::after {
  content: counter(card, decimal-leading-zero);
  position: absolute;
  inset-inline-end: 22px;
  top: 20px;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-tan-light);
  transition: color var(--transition);
}
.grid-4 .card:hover::after { color: var(--color-tan); }
.card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--color-tan-light));
  color: var(--color-brown);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: inset 0 0 0 1px rgba(168, 152, 136, 0.35), 0 6px 16px -8px rgba(74, 61, 54, 0.4);
  transition: transform var(--transition);
}
.card:hover .card-icon { transform: scale(1.08) rotate(-4deg); }
.card-icon svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: 0.5em; }

/* Clickable card (homepage service teasers linking to services.html) */
.card-link { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.card-link p { color: var(--color-muted); }
.card-more {
  margin-top: auto;
  padding-top: 14px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-accent);
}
.card-link:hover .card-more { color: var(--color-brown); }

/* ---------- Service detail sections (services page) ---------- */
.service-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  margin-bottom: 34px;
}
.service-detail-head .card-icon { flex: 0 0 auto; margin-bottom: 0; }
.service-detail-head h2 { margin-bottom: 0.3em; }
.service-detail-head .eyebrow { margin-bottom: 0.6em; }
.service-facts {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .service-facts { grid-template-columns: repeat(2, 1fr); } }
.service-fact {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--shadow-card);
}
.service-fact h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5em;
  display: flex;
  align-items: center;
  gap: 9px;
}
.service-fact h3::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-tan));
}
.service-fact p:last-child { margin-bottom: 0; }

/* ---------- Service-fact field icons — thin line + hover animation ----------
   Markup: <h3 class="field-row"><span class="field-ico" data-ico="…">…inline svg…</span><span class="lbl">…</span></h3>
   The inline icon replaces the generic ::before dash for these labels. */
.service-fact h3.field-row::before { display: none; }
.field-ico {
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: var(--field-ico-color, #4A3F35);
  vertical-align: middle;
  flex: 0 0 auto;
}
.field-ico svg { width: 100%; height: 100%; overflow: visible; }

/* elements start in resting state; the row/icon hover drives them */
.field-ico .pulse { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* ---- audience: heads bob up in sequence ---- */
.field-ico[data-ico="audience"] .p { transform-box: fill-box; transform-origin: center bottom; }
:is(.field-ico[data-ico="audience"]:hover, .field-row:hover .field-ico[data-ico="audience"], .field-ico[data-ico="audience"]:focus-within) .p1 { animation: fico-bob .5s ease 0s; }
:is(.field-ico[data-ico="audience"]:hover, .field-row:hover .field-ico[data-ico="audience"], .field-ico[data-ico="audience"]:focus-within) .p2 { animation: fico-bob .5s ease .07s; }
:is(.field-ico[data-ico="audience"]:hover, .field-row:hover .field-ico[data-ico="audience"], .field-ico[data-ico="audience"]:focus-within) .p3 { animation: fico-bob .5s ease .14s; }
@keyframes fico-bob { 30% { transform: translateY(-2.2px); } }

/* ---- duration: minute hand sweeps once ---- */
.field-ico[data-ico="duration"] .hands { transform-box: fill-box; transform-origin: 12px 12px; }
.field-ico[data-ico="duration"] .hand-min { transform-box: fill-box; transform-origin: bottom; }
:is(.field-ico[data-ico="duration"]:hover, .field-row:hover .field-ico[data-ico="duration"], .field-ico[data-ico="duration"]:focus-within) .hand-min { animation: fico-sweep .7s cubic-bezier(.4,0,.2,1); }
@keyframes fico-sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---- session: pulse redraws left→right ---- */
:is(.field-ico[data-ico="session"]:hover, .field-row:hover .field-ico[data-ico="session"], .field-ico[data-ico="session"]:focus-within) .pulse { animation: fico-draw .6s ease; }
@keyframes fico-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---- takeaway: lid handle lifts slightly ---- */
.field-ico[data-ico="takeaway"] .lid { transform-box: fill-box; transform-origin: center bottom; }
:is(.field-ico[data-ico="takeaway"]:hover, .field-row:hover .field-ico[data-ico="takeaway"], .field-ico[data-ico="takeaway"]:focus-within) .lid { animation: fico-lift .5s ease; }
@keyframes fico-lift { 40% { transform: translateY(-1.6px); } }

/* accessibility: no motion */
@media (prefers-reduced-motion: reduce) {
  .field-ico * { animation: none !important; }
  .field-ico .pulse { stroke-dashoffset: 0 !important; }
}

/* Editorial placeholders — clearly marked, replace before launch */
.todo {
  color: var(--color-muted);
  font-style: italic;
  border: 1px dashed var(--color-tan);
  border-radius: 8px;
  padding: 8px 12px;
  background: rgba(168, 152, 136, 0.07);
}

/* ---------- FAQ accordion ---------- */
.faq-list { margin-top: 40px; display: grid; gap: 14px; }
.faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-heading);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-inline-end: 2px solid var(--color-tan-dark);
  border-bottom: 2px solid var(--color-tan-dark);
  transform: rotate(45deg);
  transition: transform var(--transition);
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item summary:hover { color: var(--color-brown); }
.faq-answer { padding: 0 24px 22px; }
.faq-answer p:last-child { margin-bottom: 0; }

/* ---------- Stats strip ---------- */
.stats {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}
@media (min-width: 640px) { .stats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) { .stats-3 { grid-template-columns: repeat(3, 1fr); } }
.stats > div {
  padding: 28px 18px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}
.stats > div:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.stat-num {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  font-weight: 700;
  background: var(--grad-heading);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 0.92rem; color: var(--color-muted); margin-top: 6px; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--grad-brand);
  color: var(--color-white);
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-radial-gradient(circle at 15% 120%,
      transparent 0 40px,
      rgba(255, 255, 255, 0.06) 40px 42px);
  pointer-events: none;
}
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2, .cta-band p { color: var(--color-white); }
.cta-band h2 { font-size: clamp(1.55rem, 3.1vw, 2.2rem); }
.cta-band p { color: rgba(255, 255, 255, 0.85); }
.cta-band .btn-outline { color: var(--color-white); border-color: rgba(255, 255, 255, 0.5); }
.cta-band .btn-outline:hover { background: var(--color-white); color: var(--color-brown); border-color: var(--color-white); }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  font-size: 0.88rem;
  color: var(--color-muted);
  padding-block: 20px 4px;
}
.breadcrumb a { color: var(--color-muted); }
.breadcrumb a:hover { color: var(--color-brown); }
.breadcrumb [aria-current="page"] { color: var(--color-brown); font-weight: 600; }

/* ---------- Contact ---------- */
/* Base cream, not the tinted band the rest of the site uses for full-width
   sections: the contact card is itself --bg-tint, and on a tinted band it
   vanishes. The card is the only surface on this page, so it gets the tint. */
.contact-section { background: var(--bg-base); }

/* Calendar and contact card sit side by side from 1000px up. The calendar is
   the only conversion path now, so it takes the flexible column and the card
   is capped — below 1000px they stack, calendar first, and the card releases
   its sticky offset. */
.contact-grid {
  display: grid;
  gap: 32px;
  text-align: start;
}
@media (min-width: 1000px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
  .contact-card { position: sticky; top: 7rem; }
}

.booking-block .lede { max-width: 52ch; margin-bottom: 1.75rem; }

/* Named -wrap, not .cal-embed: Cal.com puts class="cal-embed" on its own
   iframe and injects a stylesheet for it after ours, so sharing the name both
   leaks our rules onto the iframe and loses our min-height to theirs.
   min-height reserves the slot so the page doesn't jump when the iframe
   arrives. No overflow: scroll here — the Cal iframe scrolls itself, and a
   second scroller on the wrapper would nest two bars. */
.cal-embed-wrap {
  width: 100%;
  min-height: 640px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--bg-base);
}

.cal-fallback {
  font-size: .875rem;
  opacity: .75;
  margin-top: .875rem;
}

@media (max-width: 999px) {
  .cal-embed-wrap { min-height: 580px; }
}

/* The card is the quieter half of the pair: a tint panel with no border and
   no shadow, so it reads as a sidebar rather than a second primary action. */
.contact-card {
  background: var(--bg-tint);
  border-radius: var(--radius-card);
  padding: clamp(1.75rem, 3vw, 2.25rem);
}
.contact-card h2 { font-size: 1.5rem; margin-bottom: 1.75rem; }

.contact-list { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 1.25rem; }
.contact-list li { display: grid; grid-template-columns: 42px 1fr; gap: 0.875rem; align-items: center; }

.contact-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-accent);
}
.contact-icon svg { width: 19px; height: 19px; }

/* min-width: 0 lets the long email address wrap instead of forcing the grid
   column wider than the card. */
.contact-meta { display: grid; gap: 0.125rem; min-width: 0; }
.contact-label {
  font-size: 0.8125rem;
  opacity: 0.7;
  font-weight: 500;
}
/* 44px min target: the label above the link is inert, so the link itself has
   to carry the full touch height. */
.contact-meta a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-heading);
  text-decoration: none;
  /* break-word, not anywhere: the email carries a <wbr> after the "@", so it
     wraps there rather than mid-domain. */
  overflow-wrap: break-word;
  font-size: 1rem;
}
.contact-meta a:hover, .contact-meta a:focus-visible { color: var(--color-accent); text-decoration: underline; }
/* The phone carries dir="ltr" so the digits and dashes aren't reordered in
   Hebrew. That also makes the flex line box start on the left, which breaks
   the card's right edge — flex-end pulls it back in line with the label. */
[dir="rtl"] .contact-meta a[dir="ltr"] { justify-content: flex-end; }

.contact-social {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--color-heading) 12%, transparent);
  text-align: center;
}
.contact-social .social-links { margin-top: 0.75rem; justify-content: center; }
/* The shared 42px circles are just under the 44px target, and the default
   border is tuned for cream and washes out on this tint. */
.contact-card .social-links a {
  width: 44px;
  height: 44px;
  border-color: color-mix(in srgb, var(--color-heading) 20%, transparent);
}

/* WhatsApp button (contact page) — a secondary action in the site palette.
   The brand green pulled rank over the primary CTA, so only the glyph carries
   the WhatsApp cue now. */
.btn-whatsapp {
  width: 100%;
  justify-content: center;
  background: transparent;
  color: var(--color-heading);
  border: 1.5px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  border-radius: var(--radius-pill);
  padding: 0.875rem 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 50px;
  box-shadow: none;
  transition: background var(--transition), border-color var(--transition);
}
.btn-whatsapp:hover, .btn-whatsapp:focus-visible {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  border-color: var(--color-accent);
  color: var(--color-heading);
  transform: none;
}
.btn-whatsapp svg { width: 20px; height: 20px; fill: currentColor; }

/* ---------- Social icons ---------- */
.social-links { display: flex; gap: 12px; }
.social-links a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brown);
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
.social-links a:hover {
  background: var(--color-brown);
  color: var(--color-white);
  border-color: var(--color-brown);
  transform: translateY(-3px);
}
.social-links svg { width: 18px; height: 18px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-brown-deep);
  color: #E9E2D9;
  padding-block: clamp(2.25rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset-inline-end: -80px;
  top: -80px;
  width: 320px;
  height: 320px;
  background:
    repeating-radial-gradient(circle, transparent 0 22px, rgba(168, 152, 136, 0.12) 22px 23px);
  pointer-events: none;
}
.site-footer .container { position: relative; z-index: 1; }
.site-footer a { color: #E9E2D9; }
.site-footer a:hover { color: var(--color-white); }
/* Three columns from 768px, one centred column below it. text-align does the
   alignment work so every column — including the brand mark and the social
   circles — follows the same rule instead of each centring itself. */
.footer-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
  text-align: center;
}
@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr 1.2fr;
    text-align: start;
    align-items: start;
  }
}

/* fit-content shrinks the brand box to its widest child — the tagline — so the
   mark above it can centre over the lockup with margin-inline: auto. Without
   it the box fills the grid column and the narrower mark hangs off the start
   edge instead of sitting over the wordmark. */
.footer-brand { width: fit-content; margin-inline: auto; }
.footer-brand img {
  display: block;
  max-width: 64px;
  height: auto;
  margin-block-end: 14px;
  margin-inline: auto;
}
.footer-wordmark { width: fit-content; }
.footer-wordmark .brand-name { font-size: 1.06rem; color: var(--color-tan-light); }
.footer-wordmark .brand-tagline { display: block; color: #C9BFB5; }
/* Desktop: the block sits at the column's start edge, but the mark stays
   centred over the lockup inside it. */
@media (min-width: 768px) {
  .footer-brand { margin-inline: 0; }
}

.footer-nav h2,
.footer-contact h2 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
  opacity: 0.7;
}

.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.footer-nav a { font-size: 0.9375rem; }

.footer-nav a,
.footer-contact a { color: inherit; text-decoration: none; }
.footer-nav a:hover,
.footer-contact a:hover { text-decoration: underline; }

/* All three contact rows share one icon slot so they read as a set — the
   envelope and phone are outlines, so the solid WhatsApp glyph is the only
   one that swaps stroke for fill at the same 18px box. */
.footer-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
}
.footer-contact-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
  font-size: 0.9375rem;
}
.footer-contact-list a:hover { text-decoration: underline; }

.fc-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.fc-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.fc-icon-solid svg { fill: currentColor; stroke: none; }

/* Sits under the brand lockup. No border-top here — the brand column is
   fit-content, so a rule would stop at the tagline's width and read as an
   arbitrary stub rather than a separator. The heading carries the break. */
.footer-social {
  margin-top: 1.25rem;
}
.footer-social h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.625rem;
  opacity: 0.7;
}
/* Centred on the lockup above it, matching the mark. */
.footer-social,
.footer-social .social-links { text-align: center; justify-content: center; }

/* The shared .social-links circles are tuned for cream backgrounds; on the
   dark band the border and hover need to invert. */
.site-footer .social-links { gap: 0.75rem; }
.site-footer .social-links a {
  width: 36px;
  height: 36px;
  border-color: rgba(255, 255, 255, 0.22);
  color: inherit;
}
.site-footer .social-links svg { width: 17px; height: 17px; }
.site-footer .social-links a:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--color-white);
}
@media (max-width: 767px) {
  .site-footer .social-links { justify-content: center; }
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8125rem;
  color: #C9BFB5;
}
/* Stacked rather than wrapped: at 375px the copyright and the language link
   still fit on one row, and space-between would strand them at the edges. */
@media (max-width: 767px) {
  .footer-bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Client logos / social proof ---------- */
/* Social-proof strip sitting between the challenge (cream) and the methodology
   (white). The faint accent tint bleeds full-bleed to the viewport edges while
   the inner .container keeps the content on the page grid — no border needed,
   the tint alone separates it from the neighbouring sections. */
.client-logos {
  background: var(--bg-tint);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
/* .eyebrow is inline-flex (it carries a ::before rule), so text-align alone
   would not move it — the flex container is what aligns the box itself.
   Logical start: right on the RTL Hebrew pages, left on /en. */
.client-logos .eyebrow {
  display: flex;
  justify-content: flex-start;
  text-align: start;
  margin-bottom: 1.75rem;
}
/* Always-moving infinite carousel (marquee).
   Forced LTR so the track lays out and scrolls predictably left-to-right even
   inside the RTL page — otherwise the duplicated half sits on the wrong side
   and a gap opens up on one edge as it scrolls. */
.client-logos-viewport {
  direction: ltr;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.client-logos-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  width: max-content;
  animation: client-logos-scroll 28s linear infinite;
}
.client-logos-viewport:hover .client-logos-list {
  animation-play-state: paused;
}
.client-logos-list li {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  margin-inline-end: 3.5rem;
}
.client-logos-list img {
  height: 44px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.3s var(--ease-soft), opacity 0.3s var(--ease-soft);
}
.client-logos-list img:hover,
.client-logos-list li:focus-within img {
  filter: grayscale(0);
  opacity: 1;
}

@keyframes client-logos-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 560px) {
  .client-logos-list li {
    margin-inline-end: 2.25rem;
  }
  .client-logos-list img {
    height: 38px;
  }
  .client-logos-list {
    animation-duration: 20s;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Static wrapped grid: nothing scrolls, so the edge fade would only dim the
     outermost logos of each row for no reason. */
  .client-logos-viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .client-logos-list {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    gap: 2.5rem 3rem;
  }
  /* gap handles the spacing here; the marquee's trailing margin would stack on
     top of it and blow the rows apart. */
  .client-logos-list li {
    margin-inline-end: 0;
  }
  .client-logos-list li[aria-hidden="true"] {
    display: none;
  }
}

/* ---------- Floating WhatsApp button ---------- */
.whatsapp-float {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-end: 22px;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Site accent rather than the WhatsApp green — the glyph alone carries the
     recognition, and the circle stays inside the palette. */
  background: var(--color-accent);
  color: #FFF8F1;
  box-shadow: 0 10px 28px -8px rgba(185, 138, 94, 0.6);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  color: #FFF8F1;
  background: color-mix(in srgb, var(--color-accent) 88%, var(--color-brown-dark));
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 16px 34px -8px rgba(185, 138, 94, 0.75);
}
.whatsapp-float svg { width: 30px; height: 30px; }
@media (max-width: 480px) {
  .whatsapp-float { inset-block-end: 16px; inset-inline-end: 16px; width: 52px; height: 52px; }
}
/* Hide the floating button when printing */
@media print { .whatsapp-float { display: none !important; } }

/* ==========================================================================
   Homepage rhythm — section-specific layouts
   ========================================================================== */

/* ---------- Section A · "האתגר" — intro + data points ----------
   Two columns on desktop: content (eyebrow + heading + copy) beside a
   vertical stack of data points. Logical properties keep it correct in both
   RTL (content leads / inline-start) and LTR (auto-flips) without hard-coded
   left/right. Single column below 768px, content above the data. */
.challenge-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
@media (min-width: 768px) {
  .challenge-grid {
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(40px, 5vw, 80px);
  }
}
.challenge-intro { max-width: 46ch; }
.challenge-intro p { margin-bottom: 0; }

/* Data points: vertical stack, hairline dividers, no card chrome.
   A very muted vertical rule on the inline-start edge ties the data column to
   the content column and justifies the whitespace. It collapses on mobile. */
.challenge-data {
  border-inline-start: 1px solid var(--color-border);
  padding-inline-start: 2.5rem;
}
.challenge-stats {
  margin: 0;
  padding: 0;
}
/* Vertical rhythm reduced ~25% (22px → 16px) to shrink the white gap below the
   content paragraph. Uniform dividers span the full width of the data column. */
.challenge-stat {
  padding-block: 16px;
  border-block-end: 1px solid var(--color-border);
}
.challenge-stat:first-child { padding-block-start: 0; }
.challenge-stat:last-child { border-block-end: 0; }

.challenge-stat-num {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  color: var(--color-accent);
  text-align: start;
}
/* Number + affix on one shared baseline. inline-flex + align-items:baseline
   keeps the "%"/"פי" locked to the numeral's baseline (no super/sub), and an
   explicit direction preserves visual order in both languages. */
.challenge-stat-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 0.08em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  direction: ltr; /* "76%" — numeral then percent */
}
.challenge-stat-inline--word {
  direction: rtl; /* "פי 2.6" — word then numeral */
}
.challenge-stat-affix {
  align-self: baseline;
  font-size: 0.5em;
  font-weight: 600;
  color: var(--color-tan-dark);
}

/* Descriptions wrap freely by default (mobile / narrow); desktop forces each
   onto a single line — see the min-width:768px block below. No max-width so the
   line can use the full data-column width. */
.challenge-stat-desc {
  margin: 10px 0 0;
  color: var(--color-text);
  font-size: 0.95rem;
  line-height: 1.55;
  text-align: start;
}
.challenge-source {
  font-size: 0.72rem;
  color: var(--color-muted);
  opacity: 0.75;
  margin: 36px 0 0;
  line-height: 1.7;
  text-align: start;
}

/* Both columns share one top line; kill any leading margin so the data block
   never floats above the eyebrow. */
.challenge-intro > :first-child,
.challenge-data > :first-child { margin-block-start: 0; }

@media (min-width: 768px) {
  /* Stretch the data column to the row height (both columns still share the
     same top line) and distribute the stats, absorbing leftover gap instead of
     pooling it at the bottom of the content column. */
  .challenge-data {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  /* One line per description and the full sources string on one line. bdi keeps
     the English source segments LTR and unbroken within the RTL line. */
  .challenge-stat-desc,
  .challenge-source small {
    white-space: nowrap;
  }
}
@media (max-width: 767px) {
  /* Vertical rule makes no sense once columns stack. */
  .challenge-data {
    border-inline-start: 0;
    padding-inline-start: 0;
  }
}

/* ---------- Section B · "גישת SENAYA" — banner image + full-width 3-step process ---------- */
/* Image is a wide banner across the top; the three steps then span the full
   container width below it, so each column reads comfortably (no cramping). */
.approach-layout { display: block; }
.approach-figure { margin: 0 0 clamp(28px, 4vw, 44px); }
.approach-figure img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center 22%; /* keep the previous banner size, but bias the crop up to Shani — the audience at the bottom is trimmed */
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}
.approach-main { max-width: none; }

.process-steps {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 30px;
}
.process-step {
  position: relative;
  border-radius: var(--radius-lg);
  transition: transform 250ms ease, box-shadow 250ms ease, background-color 250ms ease;
}
.process-step h3 { margin-bottom: 0.35em; }
.process-step p { margin-bottom: 0; color: var(--color-muted); line-height: 1.7; }
.process-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--color-tan);
  background: var(--color-white);
  color: var(--color-brown);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
  transition: transform 250ms ease, background-color 250ms ease,
              color 250ms ease, border-color 250ms ease;
}

/* Hover + keyboard focus (each step is tabbable): fill the circle, lift the column.
   focus-within mirrors hover so keyboard users get the same affordance. */
.process-step:hover,
.process-step:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  background: var(--color-bg);
}
.process-step:hover .process-num,
.process-step:focus-within .process-num {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
  transform: scale(1.08);
}

/* Mobile: single column, image on top, vertical connector down the circles */
@media (max-width: 767.98px) {
  .process-step { padding-inline-start: 64px; }
  .process-num { position: absolute; inset-inline-start: 0; top: 0; margin: 0; }
  .process-step:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-inline-start: 22px;
    top: 48px;
    bottom: -30px;
    width: 2px;
    background: var(--color-border);
  }
}
/* Desktop: three full-width columns; connecting line behind the centred circles.
   RTL keeps step 1 on the right, step 3 on the left (natural source order). */
@media (min-width: 768px) {
  .process-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 4vw, 48px);
    position: relative;
  }
  .process-steps::before {
    content: "";
    position: absolute;
    top: 40px;
    inset-inline-start: 16.666%;
    inset-inline-end: 16.666%;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
  }
  .process-step {
    text-align: start;
    max-width: 34ch;
    margin-inline: auto;
    padding: 22px 22px 24px;
  }
  .process-num { margin-inline: auto; }
}

/* Reduced motion: keep the gentle colour fill, drop scale + lift */
@media (prefers-reduced-motion: reduce) {
  .process-step,
  .process-num {
    transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease;
  }
  .process-step:hover,
  .process-step:focus-within { transform: none; box-shadow: none; }
  .process-step:hover .process-num,
  .process-step:focus-within .process-num { transform: none; }
}
.approach-closer {
  text-align: center;
  max-width: 42ch;
  margin: 44px auto 0;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  line-height: 1.4;
  color: var(--color-heading);
}

/* ---------- Section C · "שלושה עקרונות" — principle cards ---------- */
.grid-3 { align-items: stretch; }
.card--principle {
  display: flex;
  flex-direction: column;
  padding: 40px 34px;
  border-color: rgba(168, 152, 136, 0.28);
}

/* ---------- Section · "הסיפור שמאחורי הסמל" — animated symbol ----------
   Two-column layout: brand copy beside the logo mark. Logical grid flow + the
   page `dir` handle the RTL/LTR flip automatically — in Hebrew the copy sits on
   the right and the mark on the left; the English mirror needs no extra rules.
   The figure stacks the wood-ring mark above the wordmark; the mark reveals
   radially from the spiral eye, then the wordmark settles in, then a gentle
   breathing loop runs — replayed on every scroll-in (see main.js). */
/* A warm tint marks this section off from the bio above and the stats below —
   it replaces the pair of <hr> rules that used to fence it in. The tint sits on
   the <section> so it bleeds edge to edge; the inner .container keeps the
   measure. Its own padding/margin override the generic `section` rhythm. */
.symbol-section {
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg));
  padding-block: clamp(4rem, 9vw, 7rem);
  margin-block: clamp(3rem, 6vw, 5rem);
}

/* The site's muted browns land around 3.6:1 on this tint, so the three muted
   roles in this section are darkened to clear 4.5:1 (they measure 4.9:1). Only
   here — elsewhere they sit on the plain cream background. */
.symbol-section .eyebrow,
.symbol-section .lede,
.symbol-section .brand-tagline { color: #75655A; }

.symbol-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
/* Body copy: start-aligned with a capped measure (previously centered + wide). */
.symbol-copy p { text-align: start; max-width: 60ch; }
/* The two emphases in this paragraph carry the idea, so they take the heading
   colour rather than the softer brown `.lede strong` gives elsewhere. Weight and
   colour only — no size shift, or they would read as sub-headings. */
.symbol-copy .lede strong { color: var(--color-heading); }

.symbol-figure {
  --mark-origin-x: 51%;
  --mark-origin-y: 80%;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
  margin: 0;
  justify-self: center;
  order: -1; /* mobile: mark above the copy */
}

/* The ripple is anchored to the mark alone, not to the whole figure — otherwise
   adding the wordmark below would stretch its box and distort the mask. */
.symbol-mark-wrap {
  position: relative;
  display: block;
  width: clamp(200px, 26vw, 340px);
}

/* Wordmark under the mark: same lockup as the site header, scaled up. Unlike
   the header copy it stays visible on phones — there is room here. */
.symbol-wordmark .brand-name {
  font-size: clamp(1.35rem, 3.1vw, 2.15rem);
  color: var(--color-brown);
}
.symbol-wordmark .brand-tagline {
  display: block;
  font-size: clamp(0.58rem, 1.25vw, 0.86rem);
}

.symbol-media {
  display: block;
  width: 100%;
  height: auto;

  aspect-ratio: 760 / 443;        /* reserve space -> no CLS */
  transform-origin: var(--mark-origin-x) var(--mark-origin-y);

  -webkit-mask-image: radial-gradient(circle, #000 58%, rgba(0,0,0,0) 78%);
          mask-image: radial-gradient(circle, #000 58%, rgba(0,0,0,0) 78%);
  -webkit-mask-position: var(--mark-origin-x) var(--mark-origin-y);
          mask-position: var(--mark-origin-x) var(--mark-origin-y);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 300% 300%;
          mask-size: 300% 300%;
}

/* Ripple: a soft cream band travels outward from the spiral eye, masked by the
   mark itself so only the drawn rings light up — the lines read as if they were
   flowing. Two copies half a cycle apart keep the motion unbroken. */
.symbol-ripple {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;

  -webkit-mask-image: url("/assets/images/senaya-mark.webp");
          mask-image: url("/assets/images/senaya-mark.webp");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Each band is a soft ring centred on the spiral eye. The box is deliberately
   oversized (300%) and centred on that point, so scaling it never clips the
   ring against an edge — it just grows outward. Colour is --color-brown-dark. */
.symbol-ripple::before,
.symbol-ripple::after {
  content: "";
  position: absolute;
  left: var(--mark-origin-x);
  top: var(--mark-origin-y);
  width: 300%;
  height: 300%;
  transform: translate(-50%, -50%) scale(0.1);
  transform-origin: 50% 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(74, 61, 54, 0) 0 17%,
    rgba(74, 61, 54, 0.6) 24%,
    rgba(74, 61, 54, 0) 33%);
}

@media (min-width: 768px) {
  .symbol-grid { grid-template-columns: 1fr auto; }
  .symbol-figure { order: 0; } /* restore DOM order → copy first, mark second */
}

/* Animation only kicks in once JS is present (data-anim="ready"), so the mark
   stays fully visible with JS disabled (progressive enhancement). */
.symbol-figure[data-anim="ready"] .symbol-media {
  -webkit-mask-size: 0% 0%;
          mask-size: 0% 0%;
}

/* Mark: rings grow outward from the spiral eye. */
.symbol-figure[data-anim="ready"].is-active .symbol-media {
  animation:
    senaya-mark-reveal 1800ms cubic-bezier(0.22, 1, 0.36, 1) forwards,
    senaya-breathe 12s ease-in-out 1900ms infinite;
  will-change: mask-size, transform, opacity;
}
/* Ripple: fades in behind the reveal, then runs for as long as the figure is
   on screen. */
.symbol-figure[data-anim="ready"].is-active .symbol-ripple { opacity: 1; }
.symbol-figure[data-anim="ready"].is-active .symbol-ripple::before,
.symbol-figure[data-anim="ready"].is-active .symbol-ripple::after {
  animation: senaya-ripple 6s linear infinite;
  will-change: transform, opacity;
}
.symbol-figure[data-anim="ready"].is-active .symbol-ripple::after {
  animation-delay: -3s;   /* half a cycle behind → a band is always in flight */
}
.symbol-figure:not(.is-active) .symbol-media {
  will-change: auto;
}

@keyframes senaya-mark-reveal {
  from {
    -webkit-mask-size: 0% 0%;
            mask-size: 0% 0%;
    opacity: 0.35;
  }
  to {
    -webkit-mask-size: 300% 300%;
            mask-size: 300% 300%;
    opacity: 1;
  }
}

/* Ripple: one band expands from the eye past the bark and fades at both ends,
   so the loop restart is invisible. */
@keyframes senaya-ripple {
  0%   { transform: translate(-50%, -50%) scale(0.1); opacity: 0; }
  14%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2);   opacity: 0; }
}

/* Breathing: 4s expand / 8s release. */
@keyframes senaya-breathe {
  0%      { transform: scale(1);     opacity: 0.94; }
  33.333% { transform: scale(1.015); opacity: 1; }
  100%    { transform: scale(1);     opacity: 0.94; }
}

/* ==========================================================================
   Services page — navigated redesign
   --------------------------------------------------------------------------
   Sticky sub-nav, quick-compare table, zigzag service layout with media,
   two-up field grid, FAQ open animation, sticky mobile CTA and a decorative
   pulse divider. Everything below reuses the existing design tokens only —
   no new colours, fonts or radii. Two new *layout* variables (--header-h /
   --subnav-h) are measured live in main.js so the sticky offsets stay correct
   at every breakpoint; the values here are sensible fallbacks.
   ========================================================================== */
:root {
  /* Live-measured in main.js for pixel-exact sticky offsets. These fallbacks
     are intentionally on the generous side so that even with JS disabled a
     jumped heading still clears BOTH sticky bars (real desktop total ≈ 139px)
     rather than tucking behind them. */
  --header-h: 78px;   /* sticky site header */
  --subnav-h: 60px;   /* services sub-nav   */
}

/* Sections that the sub-nav jumps to must clear BOTH sticky bars so their
   heading is never tucked behind the header + sub-nav. Overrides the earlier
   90px rule (same specificity, later wins). */
#services-offerings,
.service-detail { scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + 16px); }

/* ---------- Sticky sub-nav (הרצאה · סדנאות · ליווי 1:1 · ריטריט) ---------- */
.services-subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 80;                     /* below header (100) + WhatsApp (90) */
  background: rgba(251, 248, 244, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-block: 1px solid rgba(168, 152, 136, 0.22);
}
.services-subnav .container { padding-block: 0; }
.subnav-list {
  display: flex;
  gap: 2px;
  margin: 0;
  overflow-x: auto;                /* mobile: horizontal scroll */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.subnav-list::-webkit-scrollbar { display: none; }
.subnav-list li { flex: 0 0 auto; scroll-snap-align: start; }
.subnav-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 15px 16px;
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--color-brown-dark);
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.subnav-num {
  font-family: var(--font-en);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-tan-dark);
  transition: color var(--transition);
}
.subnav-list a:hover { color: var(--color-brown); }
.subnav-list a.is-active { color: var(--color-brown); border-bottom-color: var(--color-accent); }
.subnav-list a.is-active .subnav-num { color: var(--color-accent); }

/* ---------- Quick-compare table ---------- */
.svc-compare-section { padding-block: clamp(40px, 6vw, 72px); }
.svc-compare-head { margin-bottom: 26px; }
.svc-compare-head p { margin-bottom: 0; max-width: 60ch; }
.svc-compare {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.svc-compare caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.svc-compare th,
.svc-compare td {
  text-align: start;
  padding: 15px 18px;
  border-block-end: 1px solid var(--color-border);
  vertical-align: middle;
  font-size: 0.96rem;
}
.svc-compare thead th {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-tan-dark);
  background: var(--color-bg-alt);
  font-weight: 600;
}
.svc-compare tbody tr { cursor: pointer; transition: background var(--transition); }
.svc-compare tbody tr:hover,
.svc-compare tbody tr:focus-within { background: var(--color-bg); }
.svc-compare tbody tr:last-child td { border-block-end: 0; }
.svc-compare-name-cell { white-space: nowrap; }
.svc-compare-name {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-heading);
}
.svc-compare-name:hover { color: var(--color-heading); }
.svc-compare-name .svc-num { font-family: var(--font-en); color: var(--color-tan-dark); font-size: 0.9rem; }
.svc-compare-ico {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--color-tan-light));
  color: var(--color-brown);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(168, 152, 136, 0.35);
}
.svc-compare-ico svg { width: 18px; height: 18px; }

/* Mobile: no horizontal scroll — every row becomes a stacked card */
@media (max-width: 639px) {
  .svc-compare, .svc-compare tbody, .svc-compare tr, .svc-compare td { display: block; width: 100%; }
  .svc-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .svc-compare { border: 0; background: transparent; box-shadow: none; }
  .svc-compare tr {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 8px 4px 10px;
    margin-bottom: 14px;
  }
  .svc-compare td { border-block-end: 0; padding: 7px 18px; display: flex; justify-content: space-between; align-items: baseline; gap: 18px; }
  .svc-compare td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--color-tan-dark);
  }
  .svc-compare-name-cell { padding-top: 10px; }
  .svc-compare-name-cell::before { display: none; }
  .svc-compare td:not(.svc-compare-name-cell) { text-align: end; }
  .svc-compare td:not(.svc-compare-name-cell) bdi,
  .svc-compare td:not(.svc-compare-name-cell) span { text-align: end; }
}

/* ---------- Zigzag service layout ---------- */
.service-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 900px) {
  .service-layout { grid-template-columns: 1fr 1fr; }
  /* Flip = media on the inline-end side (left in RTL). Applied to services 02 & 04. */
  .service-layout--flip .service-media { order: 2; }
}
.service-body .card-icon { margin-bottom: 16px; }
.service-body .eyebrow { margin-bottom: 0.7em; }
.service-body > h2 { margin-bottom: 0.35em; }
.service-hook {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.35;
  color: var(--color-accent);
  border-inline-start: 3px solid var(--color-accent);
  padding-inline-start: 16px;
  margin-bottom: 0.7em;
}

/* Media / editorial placeholder */
.service-media { margin: 0; }
.service-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}
.service-media--placeholder {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  border: 1px dashed var(--color-tan);
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.6), transparent 55%),
    var(--grad-warm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--color-tan-dark);
  text-align: center;
  box-shadow: var(--shadow-card);
}
.service-media--placeholder .ph-ico { width: 60px; height: 60px; opacity: 0.75; }
.service-media--placeholder .ph-ico svg { width: 100%; height: 100%; }
.service-media--placeholder .ph-label { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; }

/* Inline animated service illustrations (320×220 SVGs).
   aspect-ratio reserves the box up-front so there is no CLS while the SVG parses. */
.service-media--illus {
  aspect-ratio: 320 / 220;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  background: var(--grad-warm);
}
.service-media--illus > svg { display: block; width: 100%; height: 100%; }

/* ---------- Field grid: audience + duration side-by-side, session + takeaway full ----------
   Legacy grid — still used by /en/services.html (.service-body > .service-facts). */
.service-facts { margin-top: 4px; }
@media (min-width: 640px) {
  .service-fact--full { grid-column: 1 / -1; }
}

/* ============================================================
   Services page — two-strip service layout (hero + fields).
   Used by services.html. Logical properties throughout so the
   zigzag and dividers mirror correctly in both RTL and LTR.
   ============================================================ */

/* --- Top strip: hero = illustration + intro, vertically centered --- */
.service-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.service-hero .service-media { margin: 0; }
@media (min-width: 900px) {
  .service-hero { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); }
  /* Zigzag: services 02 & 04 place the illustration on the far side.
     order swaps the source order, so the flip mirrors in RTL and LTR alike. */
  .service-hero--flip .service-media { order: 2; }
}
.service-intro { max-width: 62ch; }
.service-intro .card-icon { margin-bottom: 16px; }
.service-intro .eyebrow { margin-bottom: 0.7em; }
.service-intro > h2 { margin-bottom: 0.35em; }

/* --- Bottom strip: 4 equal fields, no cards, thin dividers between them --- */
.service-fields {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
/* remove the card chrome inherited from .service-fact inside this strip */
.service-fields .service-fact {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
/* <640px: single column, subtle horizontal rule between fields */
.service-fields .service-fact + .service-fact {
  border-block-start: 1px solid var(--color-border);
  padding-block-start: 28px;
}
/* 640–1023px: 2×2 */
@media (min-width: 640px) {
  .service-fields { grid-template-columns: 1fr 1fr; gap: 34px; }
  .service-fields .service-fact + .service-fact {
    border-block-start: 0;
    padding-block-start: 0;
  }
  /* vertical rule between the two columns */
  .service-fields .service-fact:nth-child(even) {
    border-inline-start: 1px solid var(--color-border);
    padding-inline-start: 34px;
  }
  /* horizontal rule before the second row */
  .service-fields .service-fact:nth-child(n+3) {
    border-block-start: 1px solid var(--color-border);
    padding-block-start: 34px;
  }
}
/* ≥1024px: 4 equal columns in one row, thin vertical dividers */
@media (min-width: 1024px) {
  .service-fields { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .service-fields .service-fact:nth-child(even),
  .service-fields .service-fact:nth-child(n+3) {
    border-block-start: 0;
    padding-block-start: 0;
  }
  .service-fields .service-fact { padding-inline: clamp(18px, 1.8vw, 30px); }
  .service-fields .service-fact + .service-fact {
    border-inline-start: 1px solid var(--color-border);
  }
  .service-fields .service-fact:first-child { padding-inline-start: 0; }
  .service-fields .service-fact:last-child { padding-inline-end: 0; }
}

/* CTA below the fields strip, aligned to the inline start — consistent across all four */
.service-detail .service-cta { margin-top: clamp(28px, 4vw, 44px); }

/* --- Scroll-in reveal for the fields strip: fade + rise, staggered per column --- */
@media (prefers-reduced-motion: no-preference) {
  .service-fields .service-fact {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
  }
  .service-fields .service-fact:nth-child(2) { transition-delay: 90ms; }
  .service-fields .service-fact:nth-child(3) { transition-delay: 180ms; }
  .service-fields .service-fact:nth-child(4) { transition-delay: 270ms; }
  .service-fields.is-in .service-fact { opacity: 1; transform: none; }
}

/* ---------- Decorative pulse divider between services (brand motif) ---------- */
.svc-divider {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  color: var(--color-tan);
  line-height: 0;
}
.svc-divider svg { width: min(340px, 70%); height: 26px; overflow: visible; }
.svc-divider .pulse-path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease-soft);
}
.svc-divider.is-visible .pulse-path { stroke-dashoffset: 0; }

/* ---------- Sticky mobile CTA ---------- */
.mobile-cta {
  display: none;
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 85;                     /* above content, below the WhatsApp fab (90) */
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(251, 248, 244, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -8px 24px -16px rgba(74, 61, 54, 0.4);
}
.mobile-cta .btn { width: 100%; justify-content: center; }
@media (max-width: 767px) {
  .mobile-cta { display: block; }
  /* Keep the last content clear of the fixed bar, and lift the WhatsApp fab
     above it so both stay tappable (bar sits below the fab in z-order). */
  body.has-mobile-cta { padding-bottom: 68px; }
  body.has-mobile-cta .whatsapp-float { inset-block-end: 86px; }
}
@media (min-width: 768px) {
  .mobile-cta { display: none; }   /* desktop: each service CTA is enough */
}

/* ---------- FAQ open animation (native <details> stays fully accessible) ---------- */
.faq-item[open] .faq-answer { animation: faq-reveal 0.34s var(--ease-soft); }
@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  /* Pulse divider: show fully drawn, no self-drawing motion. */
  .svc-divider .pulse-path { stroke-dashoffset: 0 !important; }
  /* Symbol: final, fully-visible state — no reveal, no breathing, no ripple. */
  .symbol-media,
  .symbol-figure[data-anim="ready"] .symbol-media {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  .symbol-ripple { display: none !important; }
}

/* ==========================================================================
   Articles
   --------------------------------------------------------------------------
   Index cards reuse .grid / .card / .card-link; only the meta line, the tag
   pills and the long-form reading scope (.article-prose) are new. The prose
   scope re-enables list bullets, which the global reset strips, and gives
   headings a wider rhythm than the marketing sections need.
   ========================================================================== */

/* ---------- Index ---------- */
.article-grid { align-items: stretch; }
/* The <article> keeps the card chrome; the inner <a> carries the padding so
   the whole card surface stays clickable. */
.article-card { padding: 0; }
.article-card .card-link { height: 100%; padding: 30px 28px; }
.article-card h2 {
  font-size: clamp(1.25rem, 2.1vw, 1.55rem);
  margin-bottom: 0.55em;
}
.article-card .card-more { margin-top: auto; }

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: 14px;
}
.article-meta .meta-sep { color: var(--color-tan); }

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.article-tag {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--color-tan-light);
  color: var(--color-brown);
}

/* ---------- Article page ---------- */
/* One reading column for the whole article — breadcrumb, header, video, prose
   and closing CTA all share it, so the left and right edges line up down the
   page. Declared after .container (line ~122) and carried on the same
   elements, so the later rule wins the max-width without !important.
   .article-head / .article-prose used to set max-width: 780px with no
   margin-inline, which is what pinned the column to the RTL start edge. */
/* 35.5rem is 68ch measured at the body size — stated in rem, not ch, because
   ch resolves against each element's own font-size, and the breadcrumb's
   smaller type made its column ~100px narrower than the prose below it. */
.article-body {
  max-width: 35.5rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.article-head h1 { margin-bottom: 0.35em; }
.article-head .article-subtitle {
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--color-muted);
  margin-bottom: 1.3em;
}

.article-prose > h2 {
  font-size: clamp(1.4rem, 2.7vw, 1.9rem);
  margin-top: 1.9em;
}
.article-prose > h2:first-child { margin-top: 0; }
.article-prose ul {
  display: grid;
  gap: 12px;
  margin: 0 0 1.4em;
  max-width: 65ch;
}
.article-prose ul li {
  position: relative;
  padding-inline-start: 22px;
}
.article-prose ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* Each learning stage is its own card so the five of them scan as a set. */
.stage {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px 30px;
  margin-bottom: 22px;
}
.stage h3 { margin-top: 0; margin-bottom: 0.7em; }
/* Stages that carry prose instead of a <dl> would otherwise stack the
   paragraph's bottom margin on top of the card padding. */
.stage > p:last-child { margin-bottom: 0; }
/* "1." is a digit followed by a neutral character, so Hebrew's RTL paragraph
   direction reorders it to ".1". dir="ltr" isolates the pair; the span still
   sits at the RTL start edge, so the heading reads "1. שלב ההישרדות". */
.stage-num { unicode-bidi: isolate; }
.stage-list { margin: 0; }
.stage-list dt {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-brown);
  margin-top: 16px;
}
.stage-list dt:first-of-type { margin-top: 0; }
.stage-list dd {
  margin: 4px 0 0;
  max-width: 65ch;
}

/* ---------- Article references ---------- */
/* The citation is Latin-script inside an RTL page, so it needs its own
   direction — otherwise the year, the period and the publisher reorder. */
.article-refs {
  margin-block: 3rem 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--color-heading) 12%, transparent);
}
.article-refs h2 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}
.article-refs p {
  font-size: 0.9375rem;
  line-height: 1.6;
  opacity: 0.85;
  direction: ltr;
  text-align: left;
}

/* ---------- Article hero video ---------- */
/* Posts lead with either a looping clip or a still, so the img shares the
   video's sizing and corner radius rather than getting a parallel rule. */
.article-hero {
  margin: 2rem 0;
}
.article-hero video,
.article-hero img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
.article-hero figcaption {
  font-size: 0.875rem;
  opacity: 0.7;
  margin-top: 0.5rem;
}
@media (prefers-reduced-motion: reduce) {
  .article-hero video { animation: none; }
}

/* Index card thumbnail — the video's poster frame doubles as the card image. */
.article-card .card-link { padding: 0; }
.article-card .article-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.article-card .article-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 28px 30px;
}

/* ==========================================================================
   Home-page conversion additions
   ========================================================================== */

/* Belt-and-braces: nothing marked `hidden` should ever paint, even if a later
   rule sets display on the element (the testimonials section relies on this). */
[hidden] { display: none !important; }

/* Hero: H1 stays dominant, the sub-headline sits at ~60% of it in a lighter
   weight so the two never read as competing headlines. */
.hero-subtitle {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2.9vw, 1.9rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-brown);
  margin-bottom: 0.7em;
  max-width: 24ch;
}
:lang(en) .hero-subtitle { max-width: 30ch; }

/* The he sub-headline is a two-beat line — "להוביל בבהירות." then "גם כשהלחץ
   בשיא." — and reads as one thought only when it stays on one row. At 12.9em
   wide it fits any column down to ~230px, provided it is sized against the hero
   column (cqi) rather than the viewport; the 24ch measure above, not the type
   size, was what forced the break. The en string is far longer and would need
   ~11px type to do the same on a phone, so it keeps the wrapping measure. */
.hero-copy { container-type: inline-size; }
:lang(he) .hero-subtitle {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(0.95rem, 6.4cqi, 1.9rem);
}
.hero-note {
  margin-top: 0.9em;
  font-size: 0.88rem;
  color: var(--color-muted);
}

/* Bridge line under the challenge stats — hands off to the method section. */
.challenge-bridge {
  margin: 26px 0 0;
  font-weight: 600;
  color: var(--color-brown);
  line-height: 1.6;
}

/* "פי 2.6" needs a wider word gap than "76%" does. */
.challenge-stat-inline--word { gap: 0.18em; }

/* Testimonials */
.testimonial {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.testimonial-quote { margin: 0; }
.testimonial-quote p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text);
}
.testimonial-quote p::before { content: "“"; }
.testimonial-quote p::after { content: "”"; }
.testimonial-by {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.testimonial-name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-brown);
}
.testimonial-role {
  display: block;
  font-size: 0.88rem;
  color: var(--color-muted);
}

/* Service card qualifier line */
.card-best-for {
  margin: -0.2em 0 0.9em;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-tan-dark);
}

/* Secondary path under the closing CTA */
.cta-alt { margin: 16px 0 0; }
.cta-alt a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.92rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cta-alt a:hover { color: var(--color-white); }

/* ==========================================================================
   About page — portrait, bio and signature
   ========================================================================== */

/* The bio is one float layout, not a grid: the portrait sits at the top of the
   copy, the opening paragraphs run alongside it, and everything past its bottom
   edge reflows to the full width of the column. That only works if the <img> is
   the first child of .about-body in source order — a wrapper or a grid around
   it would take the float out of the text flow. */
.about-body {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  padding-block: 2rem;
  text-align: start;   /* right in he, left in en — never centred */
}
/* Closes the float so the sections after the bio start below the portrait. */
.about-body::after { content: ""; display: block; clear: both; }

.about-portrait {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;   /* keeps the face out of the top crop */
  display: block;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}

@media (min-width: 900px) {
  .about-portrait {
    width: 36%;
    max-width: 400px;
    height: auto;
    margin-block: .25rem 1.5rem;
    shape-margin: 2rem;
  }
  /* Portrait on the outer side of the reading direction: left in he, right in
     en. Physical margins rather than logical ones, to match `float`: the gutter
     belongs on the side the text wraps around, which is the inline-start side
     in rtl but the inline-end side in ltr — logical properties would put it on
     the outer edge in one of the two. */
  [dir="rtl"] .about-portrait {
    float: left;
    margin-right: 2.5rem;
    margin-left: 0;
  }
  [dir="ltr"] .about-portrait {
    float: right;
    margin-left: 2.5rem;
    margin-right: 0;
  }
}

/* Phones: portrait in normal flow above the copy, full container width. No
   bleed — it would open a horizontal scrollbar. */
@media (max-width: 899px) {
  .about-portrait {
    float: none;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0 0 1.75rem;
  }
}

/* The page title must hold on one line at every width, in he and en alike.
   Sized against the copy column rather than the viewport (cqi, not vw), since
   the column is capped well below the window on wide screens. container-type on
   .about-body makes that column the query container.
   --h1-fit is the largest font-size, as a share of the column, at which the
   title still fits: measured width-per-em is 11.5em in he (Heebo) and 15.7em in
   en (Poppins, a longer string in a wider face), less a ~4% margin for
   rounding. Two values rather than one so the shorter he title isn't punished
   for the longer en one. */
.about-body { container-type: inline-size; }
.about-body h1 {
  --h1-fit: 8.3cqi;   /* he */
  font-size: clamp(0.9rem, var(--h1-fit), 2.75rem);
  line-height: 1.2;
  white-space: nowrap;
}
html:lang(en) .about-body h1 { --h1-fit: 6.1cqi; }
/* Beside the float the title only gets what's left of the column — roughly
   55cqi once the portrait (36cqi) and its gutter are taken out — so the share
   has to be measured against that remainder, not the full container, or the
   nowrap title would push a horizontal scrollbar. */
@media (min-width: 900px) {
  .about-body h1 { --h1-fit: 4.5cqi; }
  html:lang(en) .about-body h1 { --h1-fit: 3.3cqi; }
}
/* max-width: none overrides the global `main p:not(.eyebrow)` 65ch cap — here
   the measure comes from wrapping around the portrait at the top and from the
   column cap below it, and a second cap would reopen the empty gutters. */
.about-body p:not(.eyebrow) {
  font-size: 1.1875rem;
  line-height: 1.8;
  max-width: none;
  margin-block: 0 1.25rem;
}
/* :last-of-type, not :last-child — the closing paragraph is followed by the
   signature and CTA divs, so :last-child never matched it and the rule was
   dead. */
.about-body p:last-of-type { margin-bottom: 0; }
/* p.about-lead rather than .about-lead: the rule above is (0,2,1), so a bare
   class would lose the margin override. */
.about-body p.about-lead {
  font-size: 1.3125rem;
  line-height: 1.65;
  margin-bottom: 1.75rem;
}
/* 600 (a real loaded weight) rather than 700, and a colour shift instead of a
   size change — the emphasis should read as tone, not as a heading. */
.about-body strong { font-weight: 600; color: var(--color-heading); }

/* The portrait is the first child now, so the margin reset targets the eyebrow
   — the first *text* element — instead. */
.about-portrait + * { margin-top: 0; }
/* .eyebrow is inline-flex by default, so it sits on a line box and picks up
   ~8px of the parent's half-leading above it — enough to read as the portrait
   starting high next to it. Block-level flex drops the line box; the
   fit-content width keeps the rule pinned to the text, not the column. */
.about-body > .eyebrow { display: flex; width: fit-content; }

/* Hand-written sign-off (inline SVG). The artwork already carries its own
   slant — no rotate(). Height-only sizing with width:auto keeps both correct
   despite very different aspect ratios (he 406×435, en 893×441).
   clear: both drops it below the portrait, so a short bio can't leave the
   signature pinned against the image. Signature and CTA are both centred, in
   both directions — no dir-specific side alignment. */
.signature {
  clear: both;
  margin-block: 2.5rem 1.5rem;
  color: var(--color-heading);   /* the path is fill="currentColor" */
  opacity: .9;
}
/* Only the heights are dir-specific, because the two artworks have very
   different aspect ratios. */
.signature svg {
  width: auto;
  display: block;
  margin-inline: auto;
}
[dir="rtl"] .signature svg { height: clamp(52px, 7vw, 68px); }
[dir="ltr"] .signature svg { height: clamp(34px, 4.5vw, 46px); }

/* A single CTA closing the bio, centred under the signature.
   clear: both keeps the button out of the float. */
.about-cta {
  clear: both;
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
  /* The CTA owns the gap down to the tinted symbol section, so the bio section
     drops its own bottom padding below — otherwise the two stack into a void. */
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.about-bio { padding-bottom: 0; }

/* The only full-width CTA on the site. text-align: center used to sit here and
   did nothing — the label is centred by justify-content on .btn. */
@media (max-width: 899px) {
  .about-cta .btn {
    width: 100%;
    min-height: 52px;
    padding-inline: 1.25rem;
  }
}

/* ---------- About page — collaborators ----------
   One card per collaborator, stacked. The card is a flex row, so the photo
   lands on the start edge — right in the RTL page, left in the EN one — from
   `dir` alone, with no direction-specific rules. */
.collaborators {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(20px, 3vw, 28px);
}
.collaborator-card {
  display: flex;
  align-items: flex-start;
  gap: clamp(22px, 3vw, 34px);
}
.collaborator-photo {
  flex: none;
  width: clamp(150px, 20vw, 220px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  display: block;
}
.collaborator-body { min-width: 0; }
.collaborator-body h3 { margin-top: 0; margin-bottom: 0.6em; }
.collaborator-body p { margin-bottom: 1.1em; }
.collaborator-toggle { margin-top: 0.4rem; }

/* Expanded copy. The height transition only runs once JS has measured the
   block (.is-animating + an inline max-height); the default state is plain
   `auto`, so an un-measured or reduced-motion card just appears. */
.collaborator-more.is-animating {
  overflow: hidden;
  transition: max-height 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collaborator-more.is-animating { transition: none; }
}

/* Phones: photo on top, full width of the card, shorter crop so it doesn't
   push the bio off the first screen. */
@media (max-width: 639px) {
  .collaborator-card { flex-direction: column; }
  .collaborator-photo {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-position: center 22%;
  }
}

/* ==========================================================================
   Home page — section background rhythm
   -------------------------------------------------------------------------
   The home page alternates between exactly three steps of the background
   scale, in document order:
     hero (video) · logos tint · challenge base · method tint ·
     about base · services tint · CTA deep
   Each background is full-bleed to the viewport; the inner .container keeps
   the content measure. Sections carry no margin-block, so two adjacent bands
   meet with no white seam between them.
   ========================================================================== */
.page-home main > section { margin-block: 0; }

/* Safety net: no home-page section inherits its background from <body> or from
   a neighbour — inheritance is what let two bands merge into one long strip.
   Every section below overrides this with its own step of the scale. */
.page-home main > section { background: var(--bg-base); }
/* The hero opts out of the --bg-base band, but it can't just go transparent:
   this selector is (0,2,0) and outranks the .hero poster fallback at (0,1,0),
   which is what left mobile with neither video nor image. Restating the poster
   here at matching specificity — and after the rule above — keeps the fallback
   alive without !important. The video still covers it whenever it plays. */
.page-home .hero {
  background: url("../video/hero-poster.jpg") center / cover no-repeat;
}

.page-home .client-logos,
.page-home #method,
.page-home #services-offerings { background: var(--bg-tint); }

.page-home .challenge { background: var(--bg-base); }

/* The workshop banner opens the methodology section. It no longer collides
   with the logos strip: the challenge section (base) sits between them, so the
   two tinted bands are never adjacent. */

/* The founder teaser reuses .section-alt for its layout; on the home page its
   own tinted background is replaced by the scale value. */
.page-home .section-alt {
  background: var(--bg-base);
  background-image: none;
}

/* Closing CTA — deepest step of the scale. Light band, so the copy and the
   outline button switch from white to the brand browns (#4A3D36 on #EBE0D2
   ≈ 8.6:1; #61524A ≈ 6.2:1) rather than lightening the background. */
.page-home .cta-band {
  background: var(--bg-deep);
  color: var(--color-text);
}
.page-home .cta-band::before {
  background:
    repeating-radial-gradient(circle at 15% 120%,
      transparent 0 40px,
      rgba(74, 61, 54, 0.07) 40px 42px);
}
.page-home .cta-band h2 { color: var(--color-heading); }
.page-home .cta-band p { color: var(--color-text); }
.page-home .cta-band .btn-outline {
  color: var(--color-brown-dark);
  border-color: rgba(74, 61, 54, 0.45);
}
.page-home .cta-band .btn-outline:hover {
  background: var(--color-brown);
  color: var(--color-white);
  border-color: var(--color-brown);
}