/* ==========================================================================
   אדוות | גל דורי
   Design language: see /DESIGN.md. Tokens first, components after.
   No inline styles anywhere: the CSP forbids them.
   ========================================================================== */

/* Two free Google Fonts (SIL Open Font License):
   - Amatic SC: hand-drawn headlines (Regular + Bold). size-adjust compensates for its small, narrow letterforms.
   - Rubik: everything you read (variable 300-900). size-adjust keeps it on the same type scale as the headlines. */
@font-face { font-family: "Rubik"; src: url("/fonts/rubik-var.woff") format("woff"); font-weight: 300 900; font-display: swap; size-adjust: 84%; }
@font-face { font-family: "Amatic SC"; src: url("/fonts/amatic-sc-regular.woff") format("woff"); font-weight: 100 500; font-display: swap; size-adjust: 128%; }
@font-face { font-family: "Amatic SC"; src: url("/fonts/amatic-sc-bold.woff") format("woff"); font-weight: 600 900; font-display: swap; size-adjust: 128%; }

:root {
  /* colour roles (from the client's reference site) */
  --canvas: #fffcf6;
  --surface: #ffffff;
  --ice: #f4fbfe;
  --sand: #f3e3ce;
  --ink: #314762;
  --ink-deep: #24364c;
  --muted: #536477;
  --primary: #4c70a4;
  --primary-hover: #3f6192;
  --on-primary: #ffffff;
  --burgundy: #683238;
  --teal: #368b84;
  --olive: #bcb596;
  --purple: #858297;
  --hairline: #e4ddd0;
  --on-dark: #fffcf6;
  --on-dark-soft: #c9d4e1;
  --focus: #4c70a4;
  --error: #a3262f;
  --success: #24705f;

  /* type */
  --font-display: "Amatic SC", "Arial Hebrew", Arial, sans-serif;
  --font-text: "Rubik", "Arial Hebrew", Arial, sans-serif;
  --t-hero: clamp(2.3rem, 1.2rem + 4vw, 4.5rem);
  --t-h2: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem);
  --t-h3: clamp(1.45rem, 1.25rem + .6vw, 1.8rem);
  --t-lead: clamp(1.45rem, 1.3rem + .45vw, 1.7rem);
  --t-body: 1.375rem;
  --t-small: 1.1875rem;

  /* space (4px base) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
  --section: clamp(3.5rem, 2.25rem + 4.5vw, 6rem);
  --gutter: clamp(1rem, .5rem + 2.5vw, 2.5rem);
  --measure: 62ch;

  /* shape + depth */
  --r-sm: 8px; --r-md: 14px; --r-lg: 24px; --r-full: 9999px;
  --e1: 0 1px 2px rgb(49 71 98 / .06), 0 4px 14px rgb(49 71 98 / .06);
  --e2: 0 2px 4px rgb(49 71 98 / .06), 0 14px 40px rgb(49 71 98 / .10);

  /* motion */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --dur-fast: 140ms;
  --dur: 220ms;

  --header-h: 4.5rem;
  --a11y-scale: 1;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-size: calc(100% * var(--a11y-scale));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  background: var(--canvas);
}
@media (prefers-reduced-motion: no-preference) { html:not(.motion-off) { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-synthesis: none;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
::selection { background: var(--sand); color: var(--ink); }
input, textarea, button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; inset-block-start: var(--s-3); inset-inline-start: var(--s-3); z-index: 1000;
  background: var(--ink); color: var(--on-dark); padding: var(--s-3) var(--s-5);
  border-radius: var(--r-full); font-weight: 700; text-decoration: none;
  transform: translateY(-200%); transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: none; }
main:focus { outline: none; }

.container { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section-top { padding-block-start: var(--section); }
.section-bottom { padding-block-end: var(--section); }

.h2 {
  font-family: var(--font-display);
  text-wrap: balance;
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
  margin-block-end: var(--s-5);
}
.h3 {
  font-family: var(--font-text);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.3;
  margin-block-end: var(--s-3);
}
h1, h2, h3, figcaption, .for-list li, .journey-steps h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
.nb { white-space: nowrap; }
h1 em, .h2 em { font-style: normal; color: var(--burgundy); font-weight: 400; }
.prose p { max-width: var(--measure); text-wrap: pretty; }
.prose p + p { margin-block-start: var(--s-4); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 2.875rem; padding: .7rem 1.6rem;
  border: 1.5px solid transparent; border-radius: var(--r-full);
  font-family: var(--font-text); font-size: 1.35rem; font-weight: 700; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 6px 18px rgb(76 112 164 / .25); }
.btn-sm { min-height: 2.5rem; padding: .55rem 1.2rem; font-size: 1.125rem; }
.btn-lg { min-height: 3.25rem; padding: .9rem 2rem; font-size: 1.125rem; }
.btn-whatsapp { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-whatsapp svg { width: 1.25rem; height: 1.25rem; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--primary-hover); }
  .btn-whatsapp:hover { background: var(--ink); color: var(--on-dark); }
}
.text-link {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  color: var(--ink); font-weight: 600; text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.text-link:hover { text-decoration-color: currentColor; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--canvas) 92%, transparent);
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
@supports (backdrop-filter: blur(8px)) {
  .site-header { backdrop-filter: saturate(1.2) blur(10px); }
}
.site-header.is-scrolled { border-block-end-color: var(--hairline); box-shadow: 0 6px 24px rgb(49 71 98 / .05); }
.header-inner {
  display: flex; align-items: center; gap: var(--s-5);
  max-width: 76rem; margin-inline: auto; padding-inline: var(--gutter);
  min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--ink); }
.brand { padding-block: .35rem; }
.brand-logo { height: 3.6rem; width: auto; display: block; }
@media (max-width: 960px) { .brand-logo { height: 3.1rem; } }
.main-nav { margin-inline-start: auto; }
.main-nav ul { display: flex; gap: var(--s-1); }
.main-nav a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: var(--s-3);
  border-radius: var(--r-full); text-decoration: none; font-size: 1.15rem; color: var(--ink);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.main-nav a:hover { background: color-mix(in srgb, var(--sand) 60%, transparent); }
.main-nav a[aria-current="true"] { background: var(--sand); }
.menu-toggle {
  display: none; width: 2.75rem; height: 2.75rem; margin-inline-start: auto;
  border: 1.5px solid var(--hairline); border-radius: var(--r-full); background: var(--surface); cursor: pointer;
  align-items: center; justify-content: center;
}
.menu-toggle-bars, .menu-toggle-bars::before, .menu-toggle-bars::after {
  display: block; width: 1.1rem; height: 2px; background: var(--ink); border-radius: 2px; position: relative;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.menu-toggle-bars::before, .menu-toggle-bars::after { content: ""; position: absolute; inset-inline: 0; }
.menu-toggle-bars::before { top: -6px; }
.menu-toggle-bars::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu {
  border-block-start: 1px solid var(--hairline); background: var(--canvas);
  padding: var(--s-4) var(--gutter) var(--s-6);
}
.mobile-menu ul { display: grid; gap: var(--s-1); }
.mobile-menu a:not(.btn) {
  display: flex; align-items: center; min-height: 3rem; font-size: 1.5rem; text-decoration: none;
  border-block-end: 1px solid var(--hairline);
}
.mobile-menu .btn { margin-block-start: var(--s-4); width: 100%; }

@media (max-width: 960px) {
  .main-nav, .header-cta { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* ---------- ACT 1 · hero ---------- */
.hero {
  position: relative;
  min-height: min(calc(100svh - var(--header-h)), 40rem);
  display: flex; align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero-scene {
  position: absolute; inset-block: 0; inset-inline-end: 0; width: 64%;
  z-index: -1;
  -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 100%);
  mask-image: linear-gradient(to right, #000 62%, transparent 100%);
}
.plane { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.plane-sky {
  background:
    radial-gradient(60% 35% at 50% 72%, color-mix(in srgb, var(--ice) 100%, transparent) 0%, transparent 70%),
    linear-gradient(to bottom, transparent 50%, color-mix(in srgb, var(--ice) 85%, transparent) 70%, transparent 100%);
}
.plane-near { z-index: 2; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.drop-shadow { transform-box: fill-box; transform-origin: center; }
.hero-copy { position: relative; z-index: 1; padding-block: var(--s-6); }
.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-hero);
  line-height: 1.1;
  letter-spacing: -.01em;
  max-width: 12em;
  text-wrap: balance;
}
.hero-lead {
  margin-block-start: var(--s-5);
  max-width: 34rem;
  font-size: var(--t-lead);
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-block-start: var(--s-6); }

@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.breathe { transform-box: fill-box; transform-origin: center; animation: breathe 7s ease-in-out infinite; }
.breathe.b2 { animation-delay: -2.3s; }
.breathe.b3 { animation-delay: -4.6s; }
.drop { transform-box: fill-box; transform-origin: center; animation: bob 5.5s ease-in-out infinite; }
.hero.is-offscreen .breathe, .hero.is-offscreen .drop { animation-play-state: paused; }

@media (max-width: 820px) {
  .hero { flex-direction: column; align-items: stretch; min-height: auto; }
  .hero-scene {
    position: relative; inset: auto; width: 100%; height: 38svh; min-height: 15rem; order: -1;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  }
  .hero-copy { padding-block: var(--s-2) var(--s-8); }
  .hero-title { max-width: none; }
}

/* ---------- ACT 2 · about ---------- */
.about-grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--s-6) var(--s-8); align-items: center;
}
.about-facts {
  display: grid; grid-template-columns: max-content 1fr var(--s-6) max-content 1fr; column-gap: var(--s-3);
  margin-block-start: var(--s-6);
}
.about-facts > div {
  display: grid; grid-template-columns: subgrid; align-items: baseline;
  padding-block: var(--s-3); border-block-start: 1px solid var(--hairline);
}
.about-facts dt {
  font-family: var(--font-display); font-size: 1.75rem; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.about-facts dd { color: var(--muted); font-size: 1.25rem; line-height: 1.35; }
.portrait { margin: 0; position: relative; isolation: isolate; max-width: 26rem; justify-self: center; width: 100%; }
.portrait::before {
  content: ""; position: absolute; inset: auto -6% -5% auto; width: 78%; aspect-ratio: 1; z-index: -1;
  border-radius: 50%; border: 1.5px solid var(--teal); opacity: .35;
}
.portrait img {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 70% 30%;
  border-radius: 999px 999px var(--r-lg) var(--r-lg); box-shadow: var(--e2); background: var(--sand);
}

.belief { margin-block-start: var(--s-8); }
.belief blockquote, .belief figcaption { max-width: 52rem; }
.belief-text {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.1rem);
  font-weight: 400;
  line-height: 1.3;
  text-wrap: balance;
}
.belief-text .w { color: color-mix(in srgb, var(--ink) 22%, var(--canvas)); transition: color 260ms var(--ease-out); }
.belief-text .w.is-lit { color: var(--ink); }
.belief-text .w.is-key.is-lit { color: var(--burgundy); }
.belief figcaption {
  margin-block-start: var(--s-5); max-width: 40rem; color: var(--muted); font-size: var(--t-lead); line-height: 1.6;
  padding-inline-start: var(--s-5); border-inline-start: 1px solid var(--olive);
}

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .portrait { max-width: 20rem; order: -1; }
}

/* ---------- ACT 3 · for whom ---------- */
.band-ice { background: var(--ice); }
.band-sand { background: var(--sand); }
.band-ink { background: var(--ink-deep); color: var(--on-dark); }

.for-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s-8); align-items: start; }
.for-head { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
.for-intro { color: var(--muted); font-size: var(--t-lead); line-height: 1.6; max-width: 30rem; }
.for-prefix {
  font-family: var(--font-display); font-size: var(--t-h3); color: var(--teal); font-weight: 400;
  margin-block-end: var(--s-3);
}
.for-list li {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
  font-weight: 400;
  line-height: 1.2;
  padding-block: var(--s-4);
  border-block-end: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.areas-title { margin-block: var(--s-8) var(--s-4); }
.areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s-6); }
.areas > div { padding-block: var(--s-5); border-block-start: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.areas dt { font-size: 1.375rem; margin-block-end: var(--s-1); }
.areas dd { color: var(--muted); line-height: 1.55; }

@media (max-width: 860px) {
  .for-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .for-head { position: static; }
  .areas { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .areas { grid-template-columns: 1fr; } }

/* reveal device */
.js-motion .reveal { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); }
.js-motion .reveal.is-in { opacity: 1; transform: none; }

/* ---------- ACT 4 · approach (pan rail) ---------- */
.approach-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-6) var(--s-8); align-items: center; }
.approach-head .h2 { margin: 0; }
.approach-lead { color: color-mix(in srgb, var(--ink) 88%, var(--sand)); font-size: var(--t-lead); line-height: 1.5; max-width: 40rem; margin: 0; }

.tools-wrap { padding-block-start: var(--s-6); }
.tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.tool {
  background: color-mix(in srgb, var(--canvas) 70%, var(--sand));
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset;
}
.tool-icon { width: 2.6rem; height: 2.6rem; color: var(--teal); margin-block-end: var(--s-3); }
.tool h3 { font-family: var(--font-display); font-size: 1.85rem; font-weight: 400; line-height: 1.1; margin-block-end: var(--s-3); }
.tool p { color: var(--muted); line-height: 1.6; }

.principles { padding-block-start: var(--s-7); }
.principles ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); }
.principles li { line-height: 1.6; padding-block: var(--s-3); border-block-start: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.principles strong { font-weight: 700; }

@media (max-width: 860px) {
  .approach-head { grid-template-columns: 1fr; }
  .principles ul { grid-template-columns: 1fr; }
  .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- ACT 5 · together (still) ---------- */
.together-grid { display: grid; gap: var(--s-6); }
.together-title { font-size: clamp(2.2rem, 1.3rem + 3vw, 3.8rem); font-weight: 400; }
.together-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.together-cols p { color: var(--muted); }
@media (max-width: 760px) { .together-cols { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ---------- ACT 6 · journey (peak) ---------- */
.journey { position: relative; }
.journey .h2 { color: var(--on-dark); margin-block-end: var(--s-2); }
.journey-sub { color: var(--on-dark-soft); font-size: var(--t-lead); }
.journey-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas: "head rings" "steps rings";
  gap: 0 clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}
.journey-head { grid-area: head; margin-block-end: var(--s-5); }
.journey-rings {
  grid-area: rings; width: 100%; height: auto; overflow: visible;
  position: sticky; top: calc(var(--header-h) + 18vh);
}
.journey-rings .ring-draw { transform-box: fill-box; transform-origin: center; }
.jr-drop { transform-box: fill-box; transform-origin: 50% 100%; }
.journey-steps { grid-area: steps; }
.journey-steps li { padding-block: var(--s-4); border-block-start: 1px solid rgb(255 255 255 / .16); transition: opacity 320ms var(--ease-out); }
.step-kind { display: inline-block; font-size: 1.0625rem; font-weight: 700; color: var(--olive); letter-spacing: .02em; margin-block-end: var(--s-1); }
.journey-steps h3 { font-family: var(--font-display); font-size: clamp(1.4rem, 1.15rem + .7vw, 1.85rem); font-weight: 400; line-height: 1.18; margin-block-end: var(--s-2); }
.journey-steps p { color: var(--on-dark-soft); line-height: 1.6; }
.journey-steps .step-final h3 { color: var(--sand); }



.matia { margin-block-start: var(--s-5); }
.matia details {
  max-width: none; border: 1px solid rgb(255 255 255 / .18); border-radius: var(--r-md);
  background: rgb(255 255 255 / .04);
}
.matia summary {
  cursor: pointer; padding: var(--s-4) var(--s-5); font-weight: 700; min-height: 2.75rem;
  list-style: none; display: flex; align-items: center; gap: var(--s-3);
}
.matia summary::-webkit-details-marker { display: none; }
.matia summary::before {
  content: ""; width: .6rem; height: .6rem; border-inline-start: 2px solid currentColor; border-block-end: 2px solid currentColor;
  transform: rotate(45deg); margin-block-start: -.25rem;
}
.matia details[open] summary::before { transform: rotate(-45deg); margin-block-start: .1rem; }
.matia-body { padding: 0 var(--s-5) var(--s-5); color: var(--on-dark-soft); }
.matia-body ul { list-style: disc; padding-inline-start: 1.25rem; margin-block: var(--s-3); }
.matia-body p + p { margin-block-start: var(--s-3); }
.journey :focus-visible { outline-color: var(--sand); }

@media (max-width: 760px) {
  .journey-stage { grid-template-columns: 1fr; grid-template-areas: "head" "rings" "steps"; }
  .journey-head { margin-block-end: var(--s-3); }
  .journey-rings {
    top: var(--header-h); z-index: 2; background: var(--ink-deep);
    padding-block: var(--s-2) var(--s-3); height: 9.5rem; margin-inline: calc(var(--gutter) * -1);
    width: calc(100% + var(--gutter) * 2); max-width: none;
  }
  .journey-sub { font-size: 1.25rem; }
}

/* ---------- ACT 7 · contact ---------- */
.contact { padding-block-end: var(--s-7); }
.contact-stage { position: relative; isolation: isolate; }
.contact-water { position: absolute; inset: calc(var(--section) * -1) 0 calc(var(--s-6) * -1); z-index: -1; pointer-events: none; overflow: hidden; }
.contact-water svg { width: 100%; height: 100%; }
.ripple { transform-box: fill-box; transform-origin: center; animation: ripple 1800ms var(--ease-out) forwards; }
@keyframes ripple { from { transform: scale(.15); opacity: .7; } to { transform: scale(1); opacity: 0; } }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s-8); align-items: start; }
.contact-lead { font-size: var(--t-lead); color: var(--muted); line-height: 1.6; max-width: 30rem; }
.direct { display: grid; gap: var(--s-3); margin-block-start: var(--s-6); justify-items: start; }
.direct-link {
  display: inline-flex; gap: var(--s-3); align-items: baseline; min-height: 2.75rem; padding-block: var(--s-2);
  text-decoration: none; font-size: 1.25rem;
}
.direct-link:hover { text-decoration: underline; }
.direct-label { color: var(--muted); font-size: 1.125rem; min-width: 4.5ch; }

.contact-form {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, .8rem + 2vw, 2.5rem);
  box-shadow: var(--e2);
}
.form-note { color: var(--muted); font-size: var(--t-small); margin-block-end: var(--s-5); }
.field { display: grid; gap: var(--s-2); align-content: start; margin-block-end: var(--s-5); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-4); align-items: start; }
.field label { font-size: 1.1875rem; line-height: 1.35; }
.req { color: var(--burgundy); }
.optional { color: var(--muted); font-weight: 700; }
.field input, .field textarea {
  width: 100%; height: 3rem; min-height: 3rem; padding: .7rem .9rem;
  background: var(--canvas); border: 1.5px solid color-mix(in srgb, var(--ink) 28%, transparent); border-radius: var(--r-md);
  font-size: 1.1875rem; line-height: 1.4; caret-color: var(--primary);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { resize: vertical; height: auto; min-height: 7.5rem; }
.field input[dir="ltr"] { text-align: right; }
.field input[dir="ltr"]:not(:placeholder-shown) { text-align: left; }
.field input:hover, .field textarea:hover { border-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.field input:focus, .field textarea:focus { outline: none; background: var(--surface); border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--error); }
.field-hint { color: var(--muted); font-size: var(--t-small); }
.field-error { color: var(--error); font-size: var(--t-small); font-weight: 600; }
.field-check { grid-template-columns: auto 1fr; align-items: start; column-gap: var(--s-3); }
.field-check input { width: 1.375rem; height: 1.375rem; min-height: 0; padding: 0; margin: .15rem 0 0; accent-color: var(--primary); }
.field-check label { font-weight: 700; }
.field-check .field-error { grid-column: 1 / -1; }
.hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.turnstile-slot:empty { display: none; }
.turnstile-slot { margin-block-end: var(--s-5); }
.btn-submit { width: 100%; position: relative; }
.btn-spinner {
  display: none; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 2px solid rgb(255 255 255 / .4); border-top-color: #fff; animation: spin 700ms linear infinite;
}
.btn-submit.is-loading .btn-spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-status { margin-block-start: var(--s-4); font-weight: 600; line-height: 1.5; }
.form-status:empty { display: none; }
.form-status:focus { outline: none; }
.form-status.is-error { color: var(--error); }
.form-status.is-success {
  color: var(--success); background: color-mix(in srgb, var(--success) 8%, var(--surface));
  padding: var(--s-4); border-radius: var(--r-md);
}
.form-status a { color: inherit; }

.closing {
  margin-block-start: var(--s-8);
  display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center;
  gap: var(--s-5) clamp(2rem, 1rem + 5vw, 6rem);
  padding-block-start: var(--s-7); border-block-start: 1px solid var(--hairline);
}
.closing-brand { text-align: center; }
.closing-drop { width: clamp(13rem, 9rem + 14vw, 22rem); height: auto; }
.closing-logo { width: clamp(8.5rem, 6rem + 8vw, 12rem); height: auto; margin-inline: auto; }
.closing-line { font-family: var(--font-display); font-size: var(--t-h3); color: var(--burgundy); margin-block-start: var(--s-3); }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-footer { background: var(--ink-deep); color: var(--on-dark); padding-block: var(--s-6) var(--s-5); }
.footer-inner { display: grid; grid-template-columns: 1fr auto; gap: var(--s-5) var(--s-6); align-items: center; }
.footer-links { align-items: center; }
.footer-brand { display: flex; align-items: center; gap: var(--s-3); }
.footer-logo { width: 6.5rem; height: auto; flex: none; }
.footer-brand p { font-weight: 700; line-height: 1.4; }
.footer-brand span { font-weight: 700; color: var(--on-dark-soft); font-size: var(--t-small); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); }
.footer-links a { display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--on-dark); text-decoration: underline; text-decoration-color: rgb(255 255 255 / .35); }
.footer-links a:hover { text-decoration-color: currentColor; }
.copyright { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5); color: var(--on-dark-soft); font-size: var(--t-small); border-block-start: 1px solid rgb(255 255 255 / .12); padding-block-start: var(--s-4); }
.site-footer :focus-visible { outline-color: var(--sand); }
@media (max-width: 700px) { .footer-inner { grid-template-columns: 1fr; } }
@media (max-width: 1360px) { .site-footer { padding-block-end: 5.5rem; } }

/* ---------- inner pages (accessibility / privacy) ---------- */
.page { padding-block: var(--s-8) var(--section); }
.page h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-h2); line-height: 1.15; margin-block-end: var(--s-5); }
.page h2 { font-size: var(--t-h3); font-weight: 700; margin-block: var(--s-7) var(--s-3); }
.page p, .page li { max-width: var(--measure); }
.page p + p { margin-block-start: var(--s-3); }
.page ul { list-style: disc; padding-inline-start: 1.25rem; display: grid; gap: var(--s-2); margin-block: var(--s-3); }
.page .updated { color: var(--muted); font-size: var(--t-small); }
.page a { color: var(--primary); font-weight: 600; }
.notfound { min-height: 60vh; display: grid; place-content: center; text-align: center; gap: var(--s-5); }

/* ==========================================================================
   Accessibility menu
   ========================================================================== */
.a11y { position: fixed; inset-block-end: 1rem; inset-inline-end: 1rem; z-index: 900; font-family: var(--font-text); }
.a11y-toggle {
  width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 2px solid #fff;
  background: #1f3b63; color: #fff; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 6px 20px rgb(0 0 0 / .22);
  transition: transform var(--dur-fast) var(--ease-out);
}
.a11y-toggle svg { width: 1.7rem; height: 1.7rem; }
.a11y-toggle:hover { transform: scale(1.05); }
.a11y-toggle:active { transform: scale(.97); }
.a11y-toggle:focus-visible { outline: 3px solid #ffbf00; outline-offset: 3px; }
.a11y-panel {
  position: absolute; inset-block-end: 4rem; inset-inline-end: 0;
  width: min(21rem, calc(100vw - 2rem)); max-height: min(36rem, calc(100svh - 6rem)); overflow-y: auto;
  background: #fff; color: #14202f; border: 1px solid #c9d1db; border-radius: 18px;
  box-shadow: 0 18px 50px rgb(0 0 0 / .22);
  padding: 1rem; font-size: 1rem; line-height: 1.4;
}
.a11y-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: .75rem; }
.a11y-head h2 { font-size: 1.15rem; font-weight: 800; }
.a11y-close { width: 2.75rem; height: 2.75rem; border: 0; background: transparent; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: #14202f; }
.a11y-close svg { width: 1.25rem; height: 1.25rem; }
.a11y-close:hover { background: #eef2f7; }
.a11y-size { display: flex; align-items: center; gap: .5rem; padding: .5rem 0 .75rem; border-block-end: 1px solid #e3e8ef; margin-block-end: .75rem; }
.a11y-size span { margin-inline-end: auto; font-weight: 700; }
.a11y-size button { width: 2.75rem; height: 2.75rem; border-radius: 10px; border: 1.5px solid #9aa8ba; background: #fff; font-weight: 800; cursor: pointer; color: #14202f; }
.a11y-size output { min-width: 3.5rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.a11y-options { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.a11y-options button {
  width: 100%; min-height: 3.25rem; padding: .5rem .6rem; border-radius: 10px; border: 1.5px solid #c3ccd8;
  background: #f6f8fb; color: #14202f; font-weight: 700; font-size: .95rem; line-height: 1.25; cursor: pointer; text-align: center;
}
.a11y-options button:hover, .a11y-size button:hover { border-color: #1f3b63; }
.a11y-options button[aria-pressed="true"] { background: #1f3b63; border-color: #1f3b63; color: #fff; }
.a11y-panel button:focus-visible, .a11y-panel a:focus-visible { outline: 3px solid #ffbf00; outline-offset: 2px; }
.a11y-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-block-start: .9rem; padding-block-start: .75rem; border-block-start: 1px solid #e3e8ef; }
.a11y-reset { min-height: 2.75rem; padding: .4rem 1rem; border-radius: 999px; border: 1.5px solid #1f3b63; background: #fff; color: #1f3b63; font-weight: 800; cursor: pointer; }
.a11y-foot a { color: #1f3b63; font-weight: 700; display: inline-flex; min-height: 2.75rem; align-items: center; }

/* ---- modes ---- */
html.a11y-contrast {
  --canvas: #ffffff; --surface: #ffffff; --ice: #ffffff; --sand: #ffffff;
  --ink: #000000; --ink-deep: #000000; --muted: #1a1a1a; --hairline: #000000;
  --primary: #0b3d91; --primary-hover: #082c69; --on-primary: #ffffff; --burgundy: #6b0010;
  --on-dark: #ffffff; --on-dark-soft: #ffffff; --olive: #ffe066; --teal: #004d47; --focus: #000;
}
html.a11y-contrast .belief-text .w { color: #000 !important; }
html.a11y-contrast .btn-primary { box-shadow: none; outline: 2px solid #000; outline-offset: 2px; }
html.a11y-contrast .tool, html.a11y-contrast .contact-form { border-color: #000; }

html.a11y-dark {
  --canvas: #0d0f12; --surface: #16191e; --ice: #0d0f12; --sand: #16191e;
  --ink: #ffffff; --ink-deep: #000000; --muted: #e2e6eb; --hairline: #5c6570;
  --primary: #ffd84d; --primary-hover: #ffe680; --on-primary: #000000; --burgundy: #ffb3bd;
  --on-dark: #ffffff; --on-dark-soft: #e2e6eb; --olive: #ffd84d; --teal: #7fe0d6; --focus: #ffd84d;
}
html.a11y-dark .belief-text .w { color: #fff !important; }
html.a11y-dark .site-header { background: #0d0f12; }
html.a11y-dark .menu-toggle-bars, html.a11y-dark .menu-toggle-bars::before, html.a11y-dark .menu-toggle-bars::after { background: #fff; }
html.a11y-dark .hero-scene { opacity: .45; }
html.a11y-dark .brand-logo, html.a11y-dark .closing-logo { filter: brightness(0) invert(1); }
html.a11y-contrast .brand-logo, html.a11y-contrast .closing-logo { filter: brightness(0); }
html.a11y-dark ::selection { background: #ffd84d; color: #000; }

html.a11y-grayscale .site { filter: grayscale(1); }

html.a11y-links .site a {
  text-decoration: underline !important; text-decoration-thickness: 2px !important;
  outline: 2px solid currentColor; outline-offset: 2px; background-color: color-mix(in srgb, #ffe066 45%, transparent);
}
html.a11y-headings .site h1, html.a11y-headings .site h2, html.a11y-headings .site h3 {
  outline: 2px dashed currentColor; outline-offset: 6px;
}
html.a11y-font body, html.a11y-font .site * { font-family: Arial, "Arial Hebrew", Helvetica, sans-serif !important; letter-spacing: 0 !important; }
html.a11y-spacing .site p, html.a11y-spacing .site li, html.a11y-spacing .site dd, html.a11y-spacing .site label {
  line-height: 2.1 !important; letter-spacing: .04em !important; word-spacing: .16em !important;
}
html.a11y-cursor, html.a11y-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 4l30 18-13 3-7 13z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto !important;
}
html.a11y-focus *:focus { outline: 4px solid #ffbf00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 8px rgb(0 0 0 / .85) !important; }

/* ---- motion off: system preference OR accessibility menu ---- */
html.motion-off *, html.motion-off *::before, html.motion-off *::after {
  animation-duration: 1ms !important; animation-iteration-count: 1 !important;
  transition-duration: 1ms !important; scroll-behavior: auto !important;
}
html.motion-off .breathe, html.motion-off .drop { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .breathe, .drop { animation: none !important; }
}

/* ---- print ---- */
@media print {
  .site-header, .a11y, .hero-scene, .contact-water, .contact-form, .journey-rings { display: none !important; }
  .band-ink { background: #fff; color: #000; }
}
.page-back { margin-inline-start: auto; }



@media (max-width: 600px) {
  .tools-wrap { padding-inline: 0; }
  .tools {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s-3);
    padding-inline: var(--gutter); padding-block-end: var(--s-3); scrollbar-width: thin;
  }
  .tool { flex: 0 0 78%; scroll-snap-align: center; }
}

@media (max-width: 640px) {
  .closing { grid-template-columns: 1fr; justify-items: center; }
  .closing-drop { order: -1; width: 13rem; }
}

.credit a { color: var(--on-dark); font-weight: 700; text-decoration: underline; text-decoration-color: rgb(255 255 255 / .35); }
.credit a:hover { text-decoration-color: currentColor; }

/* ==========================================================================
   Scroll & interaction layer (fx.js). All of it sits behind html.js-motion.
   ========================================================================== */

/* reading progress */
.scroll-progress { position: absolute; inset-inline: 0; inset-block-end: -1px; height: 2px; overflow: hidden; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: linear-gradient(to left, var(--teal), var(--primary)); transform: scaleX(0); transform-origin: right; }

/* back to top with progress ring */
.to-top {
  position: fixed; inset-block-end: 1rem; inset-inline-start: 1rem; z-index: 880;
  width: 3.25rem; height: 3.25rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--ink); box-shadow: var(--e2);
  opacity: 0; transform: translateY(12px) scale(.95); pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.to-top.is-shown, html:not(.js) .to-top { opacity: 1; transform: none; pointer-events: auto; }
.to-top svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top svg path { transform: rotate(90deg); transform-origin: 24px 24px; }
.to-top-track { fill: none; stroke: var(--hairline); stroke-width: 2; }
.to-top-ring { fill: none; stroke: var(--teal); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.to-top:hover { color: var(--primary); }
.to-top:active { transform: scale(.95); }

/* hero: phrase-by-phrase entrance */
@keyframes fx-rise { from { opacity: 0; transform: translateY(.45em); } to { opacity: 1; transform: none; } }
.js-motion .hero-title .nb { display: inline-block; animation: fx-rise 900ms var(--ease-out) both; }
.js-motion .hero-title .nb:nth-child(2) { animation-delay: 90ms; }
.js-motion .hero-title .nb:nth-child(3) { animation-delay: 180ms; }
.js-motion .hero-title .nb:nth-child(4) { animation-delay: 270ms; }
.js-motion .fx-in { animation: fx-rise 900ms var(--ease-out) 420ms both; }
.js-motion .hero-actions.fx-in { animation-delay: 540ms; }

/* section headings: masked rise */
.js-motion .fx-mask { clip-path: inset(-.2em 0 100% 0); transform: translateY(.35em); opacity: .001;
  transition: clip-path 900ms var(--ease-out), transform 900ms var(--ease-out), opacity 300ms linear; }
.js-motion .fx-mask.is-in { clip-path: inset(-.2em 0 -.3em 0); transform: none; opacity: 1; }

/* highlighter */
mark.fx-mark {
  color: inherit; background: linear-gradient(to left, color-mix(in srgb, var(--sand) 85%, transparent), color-mix(in srgb, var(--sand) 85%, transparent)) no-repeat right 88% / var(--mark, 100%) 42%;
  padding-inline: .1em; border-radius: 2px;
}
.js-motion mark.fx-mark { --mark: 0%; }
.js-motion mark.fx-mark, .js-motion .h2 em, .js-motion .closing-line em { transition: background-size 220ms linear; }
.band-sand mark.fx-mark { background-image: linear-gradient(#fffcf6, #fffcf6); }

/* text boxes slide in from the side they sit on */
.js-motion .reveal-side { transform: translateX(-24px); }
.js-motion .reveal-side:nth-child(2) { transform: translateX(24px); }
.js-motion .reveal-side.is-in { transform: none; }

/* tool cards lean toward the pointer, with a soft light */
.tool { position: relative; isolation: isolate; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 380ms var(--ease-out), box-shadow 380ms var(--ease-out), opacity 600ms var(--ease-out); }
.tool::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgb(255 255 255 / .7), transparent 60%);
  transition: opacity 240ms var(--ease-out);
}
.tool.is-tilting { transition: transform 80ms linear, box-shadow 240ms var(--ease-out); box-shadow: var(--e2); }
.tool.is-tilting::after { opacity: 1; }
.js-motion .tool.reveal:not(.is-in) { transform: perspective(900px) translateY(18px); }

/* portrait drifts inside its arch */
.portrait picture { display: block; overflow: hidden; border-radius: 999px 999px var(--r-lg) var(--r-lg); box-shadow: var(--e2); }
.portrait img { box-shadow: none; border-radius: 0; }
.js-motion .fx-parallax img { transform: translateY(var(--py, 0)) scale(1.08); will-change: transform; }

/* journey: one ring per step you pass */
.js-motion .journey-rings .ring-draw { opacity: 0; transform: scale(.35); transition: opacity 600ms var(--ease-out), transform 900ms var(--ease-out); }
.js-motion .journey-rings .ring-draw.is-on { opacity: 1; transform: none; }
@keyframes fx-drip { 0% { transform: translateY(-26px) scale(.9); opacity: 0; } 55% { transform: translateY(2px) scaleY(.92); opacity: 1; } 100% { transform: none; opacity: 1; } }
.js-motion .jr-drop.is-drip { animation: fx-drip 620ms var(--ease-out); }
.js-motion .journey-steps.is-tracking li { opacity: .7; }
.js-motion .journey-steps.is-tracking li.is-past { opacity: .88; }
.js-motion .journey-steps.is-tracking li.is-current { opacity: 1; }
.js-motion .journey-steps.is-tracking li.is-current .step-kind { color: var(--sand); }

/* closing: the drop falls and the puddle answers */
@keyframes fx-fall { 0% { transform: translateY(-70px); opacity: 0; } 70% { transform: translateY(4px); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes fx-spread { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.cd-drop, .cd-rings { transform-box: fill-box; transform-origin: center; }
.js-motion .fx-splash .cd-drop { opacity: 0; }
.js-motion .fx-splash .cd-rings { opacity: 0; }
.js-motion .fx-splash.is-in .cd-drop { animation: fx-fall 900ms cubic-bezier(.5, 0, .3, 1) both; }
.js-motion .fx-splash.is-in .cd-rings { animation: fx-spread 1200ms var(--ease-out) 700ms both; }
.js-motion .tool.reveal.is-in { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }

/* ---------- phones: calmer motion, tighter top of "נעים להכיר" ---------- */
@media (max-width: 860px) {
  .hero-copy { padding-block-end: var(--s-5); }
  .about.section { padding-block-start: var(--s-4); }
  .js-motion .reveal { transform: translateY(10px); transition-duration: 450ms, 500ms; }
  .js-motion .reveal-side, .js-motion .reveal-side:nth-child(2) { transform: translateY(10px); }
  .js-motion .fx-mask { transform: translateY(.2em); transition-duration: 650ms, 650ms, 250ms; }
  .js-motion .tool.reveal:not(.is-in) { transform: translateY(10px); }
  .tool { transform: none; }
  .js-motion .fx-parallax img { transform: none; will-change: auto; }
  .js-motion .journey-rings .ring-draw { transition: opacity 450ms var(--ease-out), transform 600ms var(--ease-out); }
}
@media (max-width: 760px) { .journey-rings { height: 7.5rem; } }

/* ---------- type: Amatic SC headlines + Rubik text ----------
   Amatic: large headlines in Regular with Bold, highlighted emphasis words; mid-size display titles in Bold.
   Rubik: body 400, interface and sub-headings 500, emphasis 600. */
body { font-weight: 400; letter-spacing: 0; }
.hero-title, .h2, .together-title, .page h1 { font-weight: 400; letter-spacing: .02em; }
.belief-text, .for-list li, .closing-line, .tool h3, .journey-steps h3, .about-facts dt, .for-prefix { font-weight: 700; letter-spacing: .02em; }
h1 em, .h2 em, .closing-line em {
  font-weight: 700;
  background: linear-gradient(transparent 64%, color-mix(in srgb, var(--sand) 90%, transparent) 64%, color-mix(in srgb, var(--sand) 90%, transparent) 92%, transparent 92%);
  background-repeat: no-repeat; background-position: right center; background-size: var(--mark, 100%) 100%;
  padding-inline: .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.js-motion .h2 em, .js-motion .closing-line em { --mark: 0%; }
/* hero: it is already on screen, so the marker draws itself once the line has risen in */
@keyframes fx-mark-in { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
.js-motion .hero-title em { animation: fx-mark-in 900ms cubic-bezier(.6, 0, .25, 1) 750ms both; }
.band-sand .h2 em { background-repeat: no-repeat; background-position: right center; background-size: var(--mark, 100%) 100%; background-image: linear-gradient(transparent 64%, color-mix(in srgb, var(--canvas) 85%, transparent) 64%, color-mix(in srgb, var(--canvas) 85%, transparent) 92%, transparent 92%); }
.band-ink .h2 em { background: none; }
h3, .h3, .btn, .main-nav a, .mobile-menu a, .text-link, .field label, .step-kind, .areas dt, .direct-link,
.form-status, .field-error, .footer-brand p, .credit a, .matia summary, .page h2, .areas-title, .skip-link { font-weight: 500; }
strong, .principles strong { font-weight: 600; }
.field-check label, .optional, .direct-label, .footer-brand span { font-weight: 400; }
.a11y, .a11y * { font-family: system-ui, "Segoe UI", Arial, sans-serif; letter-spacing: 0; }

/* contact: the intro travels with the form so neither column leaves a hole */
@media (min-width: 901px) { .contact-intro { position: sticky; top: calc(var(--header-h) + var(--s-6)); } }
.copyright { align-items: center; }

/* tools on phones: one tidy column, icon beside the title, no sideways scrolling */
@media (max-width: 600px) {
  .tools-wrap { padding-inline: var(--gutter); }
  .tools { display: grid; grid-template-columns: 1fr; overflow: visible; gap: var(--s-3); padding: 0; scroll-snap-type: none; }
  .tool {
    flex: none; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon title" "icon text";
    column-gap: var(--s-4); align-items: start; padding: var(--s-4) var(--s-5);
  }
  .tool-icon { grid-area: icon; width: 2.4rem; height: 2.4rem; margin: .1rem 0 0; }
  .tool h3 { grid-area: title; font-size: 1.6rem; margin-block-end: var(--s-1); }
  .tool p { grid-area: text; }
}

.about-facts > div:nth-child(odd) { grid-column: 1 / 3; }
.about-facts > div:nth-child(even) { grid-column: 4 / 6; }
@media (max-width: 520px) {
  .about-facts { grid-template-columns: max-content 1fr; }
  .about-facts > div:nth-child(n) { grid-column: 1 / -1; }
}

/* phones: button first, WhatsApp link under it on the reading side (clear of the floating accessibility button) */
@media (max-width: 600px) {
  .hero-actions { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
}
/* desktop hero: copy keeps to the reading side, the drop keeps its own space */
@media (min-width: 821px) {
  .hero-copy { padding-inline-end: max(var(--gutter), 36%); }
  .hero-title { max-width: none; }
}

/* form: phone + email side by side only when the card is wide enough for both hints on one line */
.contact-form { container-type: inline-size; }
@container (max-width: 34rem) { .field-row { grid-template-columns: 1fr; } }
@media (min-width: 821px) and (max-width: 1199px) { .hero-copy { padding-inline-end: max(var(--gutter), 42%); } }
.field-hint { line-height: 1.8rem; min-height: 1.8rem; }

/* ==========================================================================
   "ומה קורה בדיוק בטיפול?" pinned sideways scroll (desktop + phones).
   The title, intro and cards pin together and the cards travel sideways as you scroll down.
   Without motion (or if the stage is taller than the screen) it falls back to the static grid.
   ========================================================================== */
.approach { overflow-x: clip; }
.pan-stage { padding-block: var(--section) 0; }
.pan-caption { display: none; }
.pan-meter { flex: 1; max-width: 14rem; height: 3px; background: color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 3px; overflow: hidden; }
.pan-meter-fill { display: block; height: 100%; background: var(--teal); transform: scaleX(0); transform-origin: right; }

.js-motion .pan.is-pinned .pan-stage { position: sticky; padding-block: var(--s-5) var(--s-5); }
.js-motion .pan.is-pinned .approach-head { margin-block-end: var(--s-5); }
.js-motion .pan.is-pinned .pan-caption {
  display: flex; align-items: center; gap: var(--s-4); margin-block-end: var(--s-4);
  color: var(--muted); font-size: var(--t-small);
}
.js-motion .pan.is-pinned .tools-wrap { padding-block-start: 0; overflow: visible; }
.js-motion .pan.is-pinned .tools {
  display: flex; flex-wrap: nowrap; gap: var(--s-4); width: max-content; max-width: none;
  overflow: visible; padding: 0 0 var(--s-3); scroll-snap-type: none; will-change: transform;
}
.js-motion .pan.is-pinned .tool { flex: 0 0 clamp(16rem, 24vw, 21rem); }
@media (max-width: 600px) {
  .js-motion .pan.is-pinned .tool { flex-basis: 78vw; display: block; padding: var(--s-5); }
  .js-motion .pan.is-pinned .tool-icon { margin-block-end: var(--s-3); }
  .js-motion .pan.is-pinned .approach-lead { font-size: var(--t-body); }
}

/* facts: number/label vertically centred against its description, on every row */
.about-facts > div { align-items: center; }
.about-facts dt { line-height: 1; }

/* facts, two-column layouts: equal columns, label on top, description underneath (max two lines) */
@media (min-width: 521px) {
  .about-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); }
  .about-facts > div:nth-child(n) {
    grid-column: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: var(--s-2); padding-block: var(--s-4);
  }
  .about-facts dt { font-size: 2rem; }
  .about-facts dd { font-size: 1.125rem; line-height: 1.5; }
}