@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 300 800;
  font-display: optional;
  src: url('/assets/fonts/assistant-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: 'Assistant';
  font-style: normal;
  font-weight: 300 800;
  font-display: optional;
  src: url('/assets/fonts/assistant-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Playpen Sans Hebrew';
  font-style: normal;
  font-weight: 400 600;
  font-display: optional;
  src: url('/assets/fonts/playpen-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

:root {
  --navy: #0d2a47;
  --blue: #2477b6;
  --red: #dc2f3c;

  --navy-900: #061424;
  --navy-800: #0a2138;
  --navy-600: #16406b;
  --blue-700: #1b5f95;
  --blue-400: #4c9ad4;
  --blue-300: #7cc0ea;
  --blue-100: #cfe2f6;
  --sky-500: #95cffd;
  --sky-300: #d5eafb;
  --sky-100: #edf7fd;
  --sky-50: #f5fafe;
  --sky-alt-end: #e3eff9;
  --ice: #edf7fd;
  --band: #f5fafe;
  --band-deep: #d5eafb;
  --rose: #dc2f3c;
  --page: #f5fafe;
  --white: #ffffff;

  --red-hover: #c02733;

  --cta: #2477b6;
  --cta-hover: #1b5f95;
  --cta-active: #164e7a;
  --sh-cta: 0 8px 22px rgba(36, 119, 182, .30);
  --sh-cta-hi: 0 14px 34px rgba(36, 119, 182, .38);
  --red-active: #a82230;

  --text: #0d2a47;
  --muted: #4c6884;
  --line: rgba(13, 42, 71, .09);
  --line-strong: rgba(13, 42, 71, .16);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --r-chip: 13px;
  --r-soft: 16px;
  --r-card: 24px;
  --r-panel: 36px;

  --sh-xs: 0 1px 2px rgba(6, 20, 36, .06), 0 2px 6px rgba(6, 20, 36, .04);
  --sh-sm: 0 2px 6px rgba(6, 20, 36, .06), 0 8px 20px rgba(6, 20, 36, .06);
  --sh-md: 0 4px 12px rgba(6, 20, 36, .07), 0 18px 44px rgba(6, 20, 36, .10);
  --sh-lg: 0 8px 24px rgba(6, 20, 36, .09), 0 34px 80px rgba(6, 20, 36, .16);
  --sh-red: 0 8px 22px rgba(220, 47, 60, .28);
  --sh-red-hi: 0 14px 34px rgba(220, 47, 60, .34);

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(72px, 9vw, 152px);
  --header-h: 72px;
  --finish-h: clamp(64px, 9vw, 148px);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --t-fast: 180ms;
  --t-base: 320ms;
  --t-slow: 620ms;
  /* widens the gap between .reveal siblings' stagger delays on mobile
     only (redefined inside @media max-width:1024px below) — the shared
     per-element --reveal-delay values in the HTML stay exactly as
     authored, this just scales how they're read, so desktop's own
     reveal pacing is completely untouched */
  --stagger-mult: 1;

  --fs-display: clamp(2.6rem, 1.2rem + 4.8vw, 4.9rem);
  --fs-h2: clamp(1.85rem, 1.1rem + 2.5vw, 3.1rem);
  --fs-h3: clamp(1.2rem, 1.05rem + .5vw, 1.5rem);
  --fs-h4: clamp(1.05rem, 1rem + .25vw, 1.2rem);
  --fs-lead: clamp(1.05rem, .98rem + .42vw, 1.3rem);
  --fs-body: clamp(1rem, .97rem + .16vw, 1.075rem);
  --fs-sm: .9rem;
  --fs-xs: .8125rem;
}

@media (min-width: 1025px) {
  :root {
    --header-h: 88px;
  }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-6));
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: 'Assistant', 'Segoe UI', system-ui, sans-serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body.is-locked {
  overflow: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--navy);
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.08;
  text-wrap: balance;
}

h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }

h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.012em;
}

h4 {
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.008em;
}

p { margin: 0; }

a {
  color: var(--blue-700);
  text-underline-offset: 4px;
}

img, svg, picture, video {
  display: block;
  max-width: 100%;
}

img { height: auto; }

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--blue-300);
  color: var(--navy-900);
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide {
  max-width: 1480px;
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: clamp(48px, 5vw, 88px);
}

.section--white { background: var(--white); }

.section--sky {
  background:
    radial-gradient(62rem 42rem at 88% -12%, rgba(149, 207, 253, .40), transparent 62%),
    linear-gradient(180deg, var(--sky-100) 0%, var(--sky-50) 100%);
}
.section--sky-alt {
  background:
    radial-gradient(54rem 38rem at 6% -10%, rgba(149, 207, 253, .34), transparent 60%),
    linear-gradient(180deg, var(--sky-100) 0%, var(--sky-alt-end) 100%);
}


.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

.small {
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  color: var(--blue-700);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: none;
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to left, var(--blue), var(--blue-300));
}

.handwritten {
  font-family: 'Playpen Sans Hebrew', 'Assistant', cursive;
  font-weight: 500;
  color: var(--blue-700);
  line-height: 1.5;
  letter-spacing: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--solid {
  fill: currentColor;
  stroke: none;
}

.skip-link {
  position: fixed;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 300;
  padding: var(--space-3) var(--space-5);
  background: var(--navy);
  color: var(--white);
  border-radius: var(--r-soft);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-220%);
  transition: transform var(--t-fast) var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.section__head {
  max-width: 46rem;
  margin-bottom: clamp(var(--space-6), 3vw, var(--space-7));
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__head .lead {
  margin-top: var(--space-3);
}

.reveal {
  --reveal-y: 28px;
  --reveal-x: 0px;
}

html.js .reveal {
  opacity: 0;
  transform: translate3d(var(--reveal-x), var(--reveal-y), 0);
  transition:
    opacity var(--t-slow) var(--ease),
    transform var(--t-slow) var(--ease);
  transition-delay: calc(var(--reveal-delay, 0ms) * var(--stagger-mult));
  will-change: opacity, transform;
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

html.js .reveal--right { --reveal-x: 34px; --reveal-y: 0px; }
html.js .reveal--left { --reveal-x: -34px; --reveal-y: 0px; }

html.js .reveal--scale {
  --reveal-y: 0px;
  transform: scale(.94);
}

html.js .reveal--scale.is-visible {
  transform: none;
}

.parallax {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  /* !important because the mobile progress-driven block further down sets
     opacity/transform from --rv-* at the same specificity and would
     otherwise win on source order — under reduced motion nothing may
     depend on the scroll loop having run at all */
  html.js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 16px 30px;
  border: none;
  border-radius: var(--r-soft);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-base) var(--ease),
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}

.btn .icon {
  width: 1.1em;
  height: 1.1em;
}

.btn__arrow {
  transition: transform var(--t-base) var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(-5px);
}

.btn-primary {
  background: var(--cta);
  color: var(--white);
  box-shadow: var(--sh-cta);
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 46%);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}

.btn-primary:hover {
  background: var(--cta-hover);
  transform: translateY(-2px);
  box-shadow: var(--sh-cta-hi);
}

.btn-primary:hover::before { opacity: 1; }

.btn-primary:active {
  background: var(--cta-active);
  transform: translateY(0);
  box-shadow: var(--sh-cta);
}

.btn-primary[disabled],
.btn-primary[aria-disabled='true'] {
  background: var(--blue-300);
  color: rgba(255, 255, 255, .7);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.btn-lg {
  padding: 20px 38px;
  font-size: 1.075rem;
}

.btn-sm {
  padding: 12px 22px;
  font-size: .9375rem;
}

.btn-ghost {
  background: rgba(255, 255, 255, .72);
  color: var(--navy);
  box-shadow: inset 0 0 0 1.5px var(--line-strong), var(--sh-xs);
  backdrop-filter: blur(14px);
}

.btn-secondary {
  background: var(--white);
  color: var(--blue-700);
  box-shadow: inset 0 0 0 1.5px var(--sky-300), var(--sh-xs);
}

.btn-secondary:hover {
  background: var(--sky-50);
  box-shadow: inset 0 0 0 1.5px var(--sky-500), var(--sh-sm);
}

.section--soft { background: var(--sky-50); }

.btn-ghost:hover {
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--blue-300), var(--sh-sm);
  transform: translateY(-2px);
}

.btn-on-dark {
  background: rgba(255, 255, 255, .1);
  color: var(--white);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28);
  backdrop-filter: blur(12px);
}

.btn-on-dark:hover {
  background: rgba(255, 255, 255, .18);
  transform: translateY(-2px);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--blue-700);
  font-weight: 700;
  text-decoration: none;
}

.link-arrow .icon {
  transition: transform var(--t-base) var(--ease);
}

.link-arrow:hover .icon {
  transform: translateX(-5px);
}

.link-button {
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.icon-badge {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(150deg, var(--white), var(--ice));
  color: var(--blue-700);
  box-shadow: inset 0 0 0 1px rgba(124, 192, 234, .5), var(--sh-xs);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.icon-badge .icon {
  width: 25px;
  height: 25px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  border-radius: var(--r-soft);
  background: rgba(255, 255, 255, .82);
  box-shadow: inset 0 0 0 1px var(--line-strong), var(--sh-xs);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--navy);
  backdrop-filter: blur(12px);
}

.pulse-dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue-300);
  flex: none;
}

html.js .pulse-dot::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(124, 192, 234, .7);
  animation: pulse-ring 2.2s var(--ease) infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(.6); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ice);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}

.card:hover .card__media img {
  transform: scale(1.06);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  flex: 1;
}

.card__body > .link-arrow {
  margin-top: auto;
}

.card__title a {
  color: inherit;
  text-decoration: none;
}

.stretched-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}


















.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 115;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 -1px 0 var(--line);
  transition: box-shadow var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: var(--header-h);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  transition: height var(--t-base) var(--ease);
}

.site-header.is-stuck {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 0 var(--line), var(--sh-md);
}

.site-header.is-stuck .site-header__inner { height: 68px; }

.site-header__logo {
  flex: none;
  line-height: 0;
}

.site-header__logo img {
  width: auto;
  height: 44px;
  transition: height var(--t-base) var(--ease);
}

.site-header.is-stuck .site-header__logo img { height: 36px; }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-inline-start: auto;
}

.site-header__cta { display: none; padding: 12px 24px; font-size: .95rem; }

.site-header__burger {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: var(--ice);
  border: none;
  border-radius: 15px;
  color: var(--navy);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}

.site-header__burger:hover { background: var(--blue-100); }

.site-header__burger .icon {
  width: 22px;
  height: 22px;
  grid-area: 1 / 1;
}

.site-header__burger .icon--close,
.site-header__burger[aria-expanded='true'] .icon--menu { display: none; }
.site-header__burger[aria-expanded='true'] .icon--close { display: block; }

.site-nav {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  height: 100dvh;
  z-index: 120;
  width: min(380px, 88vw);
  padding: calc(var(--header-h) + var(--space-7)) var(--space-6) var(--space-8);
  background: var(--white);
  box-shadow: var(--sh-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--t-base) var(--ease), visibility var(--t-base);
}

.site-nav.is-open {
  transform: translateX(0);
  visibility: visible;
}

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.site-nav__list a {
  display: block;
  padding: var(--space-3) var(--space-3);
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  border-radius: 14px;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.site-nav__list a:hover {
  background: var(--ice);
  color: var(--blue-700);
}

.site-nav__item--has-menu {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

/* "שירותינו" is a disclosure trigger, never a link — it only opens/closes
   the services submenu, and "לכל השירותים" inside the submenu is what
   navigates to the services page. Styled to render identically to the
   sibling nav links so the approved header/drawer visuals don't move. */
.site-nav__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-3) var(--space-3);
  background: none;
  border: none;
  border-radius: 14px;
  color: var(--navy);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: 700;
  text-align: start;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.site-nav__trigger:hover {
  background: var(--ice);
  color: var(--blue-700);
}

.site-nav__toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  color: var(--navy);
  cursor: pointer;
}

.site-nav__toggle .icon {
  transition: transform var(--t-base) var(--ease);
}

.site-nav__trigger[aria-expanded='true'] .icon { transform: rotate(180deg); }

.site-nav__submenu {
  grid-column: 1 / -1;
  max-height: 0;
  overflow: hidden;
  margin-inline-start: var(--space-3);
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid var(--blue-100);
  transition: max-height var(--t-base) var(--ease-in-out);
}

.site-nav__item--has-menu.is-open .site-nav__submenu {
  max-height: var(--submenu-h, 400px);
}

.site-nav__submenu a {
  font-weight: 500;
  font-size: .95rem;
}

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 105;
  background: rgba(6, 20, 36, .5);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}

.nav-scrim.is-open { opacity: 1; }

@media (min-width: 1025px) {
  .site-header__cta { display: inline-flex; }
  .site-header__burger { display: none; }

  .site-nav {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
    transform: none;
    visibility: visible;
    margin-inline-start: auto;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
  }

  .site-nav__list a {
    position: relative;
    padding: var(--space-2) 0;
    border-radius: 0;
    font-weight: 600;
  }

  .site-nav__list a::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--blue);
    transform: scaleX(0);
    transition: transform var(--t-base) var(--ease);
  }

  .site-nav__list a:hover {
    background: none;
    color: var(--blue-700);
  }

  .site-nav__list a:hover::after,
  .site-nav__list a[aria-current='page']::after {
    transform: scaleX(1);
  }

  .site-nav__item--has-menu {
    position: relative;
    display: flex;
    gap: var(--space-1);
  }

  /* the vertical padding lives on the label span, not the button, so the
     hover underline sits at the same baseline as the sibling links' and
     spans the text only — not the text plus the chevron */
  .site-nav__trigger {
    position: relative;
    width: auto;
    padding: 0;
    border-radius: 0;
    font-weight: 600;
  }

  .site-nav__trigger:hover { background: none; color: var(--blue-700); }

  .site-nav__trigger-label {
    position: relative;
    display: inline-block;
    padding: var(--space-2) 0;
  }

  .site-nav__trigger-label::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--blue);
    transform: scaleX(0);
    transition: transform var(--t-base) var(--ease);
  }

  .site-nav__trigger:hover .site-nav__trigger-label::after,
  .site-nav__item--has-menu.is-current .site-nav__trigger-label::after {
    transform: scaleX(1);
  }

  .site-nav__toggle { width: 22px; height: 22px; }

  .site-nav__submenu {
    position: absolute;
    top: calc(100% + var(--space-4));
    inset-inline-start: 50%;
    display: block;
    width: max-content;
    min-width: 250px;
    max-height: none;
    overflow: visible;
    margin: 0;
    padding: var(--space-3);
    border: none;
    border-radius: var(--r-card);
    background: var(--white);
    box-shadow: var(--sh-lg);
    transform: translate(50%, 10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility var(--t-base);
  }

  /* no :focus-within here — with the parent now a real disclosure button,
     focusing it would force the menu open behind the button's own
     aria-expanded state, so Enter/Space would read as doing nothing.
     Keyboard opens it via .is-open; hover stays a mouse-only affordance. */
  .site-nav__item--has-menu:hover .site-nav__submenu,
  .site-nav__item--has-menu.is-open .site-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(50%, 0);
  }

  .site-nav__submenu a { padding: var(--space-3) var(--space-4); border-radius: 14px; }
  .site-nav__submenu a::after { display: none; }
  .site-nav__submenu a:hover { background: var(--ice); }
  .site-nav__close,
  .site-nav__mark,
  .site-nav__brand,
  .site-nav__trust,
  .site-nav__contact,
  .site-nav__social { display: none; }

  .nav-scrim { display: none; }
}

.hero {
  position: relative;
  isolation: isolate;
  background: var(--white);
  overflow: clip;
}

.hero__media {
  position: absolute;
  inset: -8% 0 0 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  transform: scaleX(-1);
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(258deg, rgba(255, 255, 255, .985) 6%, rgba(255, 255, 255, .955) 26%, rgba(255, 255, 255, .74) 47%, rgba(255, 255, 255, .26) 64%, transparent 79%),
    linear-gradient(to top, rgba(255, 255, 255, .6), transparent 44%);
}

.hero__inner {
  display: grid;
  align-content: center;
  min-height: calc(100dvh - var(--header-h));
  padding-block: clamp(var(--space-8), 9vw, var(--space-10));
}

.hero__content {
  max-width: 40rem;
}

.hero h1 {
  color: var(--navy);
  margin-bottom: var(--space-5);
}

.hero__accent {
  display: block;
  background: linear-gradient(94deg, var(--blue) 6%, var(--blue-400) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .eyebrow { color: var(--blue-700); }

.hero__lead {
  max-width: 34rem;
  color: var(--muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.hero .badge {
  background: rgba(255, 255, 255, .9);
  color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--line-strong), var(--sh-xs);
}

.hero__note {
  position: absolute;
  z-index: 3;
  top: clamp(var(--space-6), 9vh, var(--space-10));
  left: clamp(var(--space-5), 5vw, var(--space-9));
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--blue-700);
  font-size: 1.02rem;
  white-space: nowrap;
  text-shadow: 0 1px 12px rgba(255, 255, 255, .95), 0 0 24px rgba(255, 255, 255, .8);
  transform: rotate(-4deg);
}

.scroll-cue {
  position: absolute;
  z-index: 3;
  bottom: calc(var(--finish-h) + var(--space-4));
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--blue-700);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-decoration: none;
}

.scroll-cue__ring {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--sh-xs);
}

.scroll-cue__ring .icon { width: 17px; height: 17px; }

html.js .scroll-cue__ring {
  animation: cue-bob 2.8s var(--ease) infinite;
}

@keyframes cue-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

.split {
  display: grid;
  gap: clamp(var(--space-7), 5vw, var(--space-9));
  align-items: center;
}

@media (min-width: 1025px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-start > .split__media { order: -1; }
}

.split__media { position: relative; }

.heart-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 30rem;
  margin-inline: auto;
  filter: drop-shadow(0 24px 48px rgba(6, 20, 36, .22));
}

.heart-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: url(#heart-clip);
}

.note-float {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: rgba(255, 255, 255, .94);
  border-radius: var(--r-soft);
  box-shadow: var(--sh-md);
  backdrop-filter: blur(14px);
  font-family: 'Playpen Sans Hebrew', 'Assistant', cursive;
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--blue-700);
  max-width: none;
  line-height: 1.4;
  white-space: nowrap;
}

.note-float .icon {
  width: 1.05em;
  height: 1.05em;
  color: var(--red);
}

.note-float--map {
  top: 7%;
  left: 23%;
  right: auto;
  transform: rotate(3deg);
}


.region-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-6);
}

.region-list li {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--r-soft);
  font-size: .84rem;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  transition: color var(--t-base) var(--ease);
}

.region-list li:hover { color: var(--blue-700); }
.region-list li .icon { width: 15px; height: 15px; color: var(--blue); }


.faq {
  display: grid;
  gap: var(--space-3);
}

.faq__item {
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: box-shadow var(--t-base) var(--ease);
}

.faq__item:hover { box-shadow: var(--sh-sm); }

.faq__item:has(.faq__trigger[aria-expanded='true']) {
  box-shadow: var(--sh-md);
}

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) var(--space-6);
  background: none;
  border: none;
  color: var(--navy);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.4;
  text-align: start;
  cursor: pointer;
}

.faq__trigger .icon {
  color: var(--blue);
  transition: transform var(--t-base) var(--ease);
}

.faq__trigger[aria-expanded='true'] .icon { transform: rotate(180deg); }

.faq__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-base) var(--ease-in-out);
}

.faq__panel > div {
  padding: 0 var(--space-6) var(--space-6);
  color: var(--muted);
}

.cta-block {
  position: relative;
  padding: clamp(var(--space-7), 6vw, var(--space-10)) clamp(var(--space-5), 5vw, var(--space-9));
  border-radius: var(--r-panel);
  background: linear-gradient(150deg, var(--navy-900) 0%, var(--navy) 46%, var(--navy-600) 100%);
  text-align: center;
  color: rgba(255, 255, 255, .82);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--sh-lg);
}

.cta-block__mark {
  position: absolute;
  z-index: -1;
  inset-block-start: -22%;
  inset-inline-end: -6%;
  width: min(28rem, 52%);
  fill: var(--white);
  opacity: .07;
  pointer-events: none;
}

.cta-block h2 { color: var(--white); }

.cta-block p {
  max-width: 34rem;
  margin: var(--space-4) auto 0;
}

.cta-block__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.site-footer__wave {
  position: absolute;
  /* 2px, and the height grows by the same amount so the curve keeps its
     proportions. The footer clips this back to its own top edge (see the
     note on .site-footer) — which is the point: the wave's solid top row
     is now a CLIPPED interior row rather than the element's own
     anti-aliased edge, so it lands on the boundary at full coverage. */
  top: -2px;
  inset-inline: 0;
  z-index: 2;
  height: calc(clamp(48px, 6vw, 96px) + 2px);
  line-height: 0;
  pointer-events: none;
}

.site-footer__wave svg {
  width: 100%;
  height: 100%;
  fill: var(--page);
  transform: scaleY(-1);
}

.site-footer {
  position: relative;
  margin-top: 0;
  padding-top: clamp(48px, 6vw, 96px);
  padding-bottom: var(--space-6);
  /* VISUAL LOCK — the line at the top of the footer, isolated by A/B on
     the rendered page (/shirutey-sieud, footer top at y=411):
       as shipped ............................. line
       inset shadow removed .................... line
       ::before strip removed .................. line
       wave filled magenta ..................... magenta starts exactly on the line
       overflow:hidden removed ................. NO line
       footer background set to page colour .... NO line
     So the line is the footer's own clip edge. It falls on a fractional
     pixel, and in that boundary row the light layers being clipped (wave,
     strip) are blended with the DARK gradient painted beneath them.
     Removing the clip is not an option — the watermark heart would add
     ~500px of scroll below the footer, and even a 3px clip margin grew the
     locked home page's height (6030→6033). So the dark gradient simply
     starts 4px below the footer's top edge, with the page colour in those
     4px: the clip edge can then only ever blend light with light. The
     gradient's own new edge at 4px sits under the wave's solid light fill
     (at least ~9px deep at every width), so it never shows. Zero layout
     change. This replaces last round's inset shadow, which was clipped at
     the very same edge and therefore could not help. */
  background:
    linear-gradient(158deg, var(--navy-900) 0%, var(--navy) 46%, var(--navy-600) 100%) 0 4px / 100% calc(100% - 4px) no-repeat,
    var(--page);
  color: rgba(255, 255, 255, .74);
  /* PRECISION PASS — the CTA→footer hairline, fixed as one system.

     The finding: `overflow: hidden` here clips descendants to the padding
     box, so the wave's `top: -1px` — written in an earlier round
     specifically as insurance across this join — was being clipped away
     and had NEVER been in effect. The light layer therefore began at
     exactly the footer's top edge, with no overlap at all. And that edge
     lands on a fractional device pixel at most widths (measured: 514.34
     at 320px wide, 7206.5251 on a long page). A layer whose own top row
     is only partially covered gets blended by the compositor with
     whatever is beneath it — and beneath it was the dark gradient.

     Fighting the clip is the wrong move: `overflow: clip` +
     `overflow-clip-margin` does restore the bleed, but it also grows the
     page's scrollable area, and measured on the LOCKED home page that
     added 3px of empty scroll (6030 → 6033). So the guarantee goes
     INSIDE the box, where clipping cannot reach it: an inset shadow
     paints the footer's own first 2px in the page colour before the wave
     draws, leaving nothing dark at that row to blend with. An inset
     shadow shares the element's own border box, so its edge rasterises
     identically to the background's and cannot introduce a seam of its
     own. Zero layout cost — home page back to 6030 exactly.

     Honest reproduction note: the hairline could NOT be forced to appear
     in this engine at DPR 2, at either an integer or a deliberately
     fractional boundary, with a black footer under a white wave. This
     defends the mechanism (fractional DPR from Windows display scaling
     at 125%/150%, where a 1px CSS overlap can round to nothing) rather
     than a failure reproduced here. */
  overflow: hidden;
  isolation: isolate;
}

/* .site-footer__wave's height is a clamp() that lands on a fractional
   pixel at most viewport widths; an absolutely-positioned SVG scaled via
   preserveAspectRatio="none" onto a fractional box can leave a hairline
   sub-pixel gap at its own top edge where the dark footer background
   shows through against the light section above. This sits directly
   behind the wave (z-index 1 vs the wave's 2) as a solid --page-colored
   guarantee across exactly that edge — it doesn't touch the wave's shape
   or the visible dips further down, only insures the seam itself. */
.site-footer::before {
  content: '';
  position: absolute;
  top: -2px;
  inset-inline: 0;
  z-index: 1;
  height: 5px;
  background: var(--page);
  pointer-events: none;
}

.site-footer__mark {
  position: absolute;
  z-index: -1;
  inset-block-start: -8%;
  inset-inline-start: -5%;
  width: min(44rem, 78%);
  fill: var(--white);
  opacity: .05;
  pointer-events: none;
}

.site-footer__inner {
  display: grid;
  gap: var(--space-7);
  padding-top: clamp(var(--space-7), 5vw, var(--space-9));
  padding-bottom: var(--space-7);
}

.site-footer__logo { width: auto; height: 62px; }

.site-footer__note {
  margin-top: var(--space-4);
  font-size: 1.15rem;
  color: var(--blue-300);
}

.site-footer__title {
  margin-bottom: var(--space-5);
  color: var(--white);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.site-footer__col li + li { margin-top: var(--space-3); }

.site-footer a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
.site-footer a:hover { color: var(--white); }

.site-footer__contact li { display: flex; align-items: center; gap: var(--space-3); }
.site-footer__contact .icon { color: var(--blue-300); }

.social-list {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.social-list a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.social-list a:hover {
  background: rgba(255, 255, 255, .12);
  transform: translateY(-2px);
}

.social-list .icon { width: 20px; height: 20px; }

.social-list .is-soon { opacity: .4; pointer-events: none; }

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  text-align: center;
  padding-top: var(--space-6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  font-size: var(--fs-xs);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
}

.site-footer__credit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  opacity: .66;
  transition: opacity var(--t-fast) var(--ease);
}

.site-footer__credit:hover { opacity: 1; }
.site-footer__credit img { width: auto; height: 18px; }

@media (min-width: 641px) {
  .site-footer__inner { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1025px) {
  .site-footer__inner {
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: var(--space-8);
  }

  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: start;
  }
}

.a11y-toggle {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 52px;
  padding: var(--space-4) var(--space-2);
  background: var(--navy);
  border: none;
  border-radius: 0 var(--r-card) var(--r-card) 0;
  color: var(--white);
  box-shadow: var(--sh-md);
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease), width var(--t-base) var(--ease);
}

.a11y-toggle:hover { background: var(--blue-700); }
.a11y-toggle .icon { width: 24px; height: 24px; }

.a11y-toggle__label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.a11y-panel {
  position: fixed;
  left: 60px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 121;
  width: min(310px, calc(100vw - 76px));
  padding: var(--space-5);
  background: var(--white);
  border-radius: var(--r-panel);
  box-shadow: var(--sh-lg);
}

.a11y-panel[hidden] { display: none; }
.a11y-panel h2 { font-size: 1.05rem; margin-bottom: var(--space-4); }
.a11y-panel__group { display: grid; gap: var(--space-2); }

.a11y-panel__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 10px var(--space-4);
  background: var(--ice);
  border: 2px solid transparent;
  border-radius: 14px;
  color: var(--navy);
  font-size: .9rem;
  font-weight: 700;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.a11y-panel__option[aria-pressed='true'] {
  border-color: var(--blue);
  background: var(--white);
}

.a11y-panel__reset { width: 100%; margin-top: var(--space-4); }

html.a11y-links a { text-decoration: underline !important; }

html.a11y-readable body,
html.a11y-readable button,
html.a11y-readable input,
html.a11y-readable select,
html.a11y-readable textarea {
  font-family: Arial, 'Segoe UI', sans-serif !important;
  letter-spacing: .01em;
}

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

html.a11y-contrast {
  --page: #ffffff;
  --ice: #ffffff;
  --white: #ffffff;
  --text: #000000;
  --muted: #1a1a1a;
  --navy: #000000;
  --blue: #0b3f66;
  --blue-700: #0b3f66;
  --line: #000000;
  --line-strong: #000000;
}

html.a11y-contrast body { background: #ffffff; }

html.a11y-contrast .card,
html.a11y-contrast .faq__item,
html.a11y-contrast .site-header,
html.a11y-contrast .a11y-panel {
  box-shadow: inset 0 0 0 2px #000000;
}

html.a11y-no-motion *,
html.a11y-no-motion *::before,
html.a11y-no-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

.cookie-banner {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 130;
  padding: var(--space-4);
}

.cookie-banner[hidden] { display: none; }

.cookie-banner__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-5) var(--space-6);
  background: rgba(255, 255, 255, .96);
  border-radius: var(--r-panel);
  box-shadow: var(--sh-lg);
  backdrop-filter: blur(16px);
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (min-width: 861px) {
  .cookie-banner__inner { flex-direction: row; align-items: center; }
  .cookie-banner__actions { margin-inline-start: auto; flex-wrap: nowrap; }
}

.grid { display: grid; gap: var(--space-5); }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

@media (min-width: 641px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1025px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.blog-count { margin-bottom: var(--space-6); color: var(--muted); }

.blog-more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}

.error-page {
  max-width: 640px;
  text-align: center;
  margin-inline: auto;
}

.error-page .lead { margin-top: var(--space-4); }

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.wave-cut {
  position: absolute;
  top: -1px;
  inset-inline: 0;
  z-index: 1;
  height: var(--finish-h);
  line-height: 0;
  pointer-events: none;
}

.wave-cut svg {
  width: 100%;
  height: 100%;
  transform: scaleY(-1);
}

.wave-cut__back { opacity: .45; }

.wave-cut--white svg { fill: var(--white); }
.wave-cut--sky svg { fill: var(--sky-50); }
.wave-cut--ice svg { fill: var(--band); }
.wave-cut--page svg { fill: var(--page); }
.wave-cut--navy svg { fill: var(--navy-900); }
.wave-cut--sky-end svg { fill: var(--sky-50); }
.wave-cut--sky-alt-end svg { fill: var(--sky-alt-end); }

.insurers-strip {
  position: relative;
  z-index: 3;
  margin-top: calc(clamp(40px, 5vw, 72px) * -1);
}

.insurers-card {
  display: grid;
  gap: var(--space-5);
  padding: clamp(var(--space-5), 3vw, var(--space-7)) clamp(var(--space-5), 4vw, var(--space-8));
  background: var(--white);
  border-radius: var(--r-panel);
  box-shadow: var(--sh-lg);
}

.insurers-card__head {
  display: grid;
  gap: var(--space-4);
  align-items: center;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 861px) {
  .insurers-card__head {
    grid-template-columns: 1fr auto;
  }
}

.insurers-card__head h2 {
  font-size: var(--fs-h4);
  font-weight: 800;
}

.insurers-card__head p {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.insurers-card__logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
}

@media (min-width: 641px) {
  .insurers-card__logos { grid-template-columns: repeat(4, 1fr); }
}

.insurers-card__logos li {
  display: grid;
  place-items: center;
  padding: var(--space-3) var(--space-4);
}

@media (min-width: 641px) {
  .insurers-card__logos li + li {
    border-inline-end: 1px solid var(--line);
  }

  .insurers-card__logos li:first-child {
    border-inline-end: 1px solid var(--line);
  }

  .insurers-card__logos li:last-child {
    border-inline-end: none;
  }
}

.insurers-card__logos img {
  width: auto;
  max-width: 100%;
  height: clamp(30px, 3vw, 40px);
  object-fit: contain;
}

.insurers-card__pledge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  color: var(--blue-700);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.insurers-card__pledge .icon {
  width: 1.05em;
  height: 1.05em;
  color: var(--rose);
}

.icon-heart {
  color: var(--rose);
  transform: rotate(-12deg);
}

.note-float .icon,
.hero__note .icon,
.handwritten .icon {
  color: var(--rose);
  transform: rotate(-12deg);
}

.heart-mark {
  fill: var(--white);
  opacity: .06;
  transform: rotate(-9deg);
  transform-origin: center;
}

.insurers-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.insurers-note span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 11px var(--space-5);
  background: rgba(255, 255, 255, .8);
  border-radius: var(--r-soft);
  box-shadow: inset 0 0 0 1px var(--line-strong), var(--sh-xs);
  backdrop-filter: blur(10px);
  color: var(--navy);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.insurers-note .icon {
  width: 1.2em;
  height: 1.2em;
  color: var(--blue);
}

.insurers-card__logos li[data-logo="meuhedet"] img {
  transform: translateY(3px);
}



















@keyframes sent-pop {
  0% { transform: scale(.6); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes sent-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes sent-fade {
  to { opacity: 1; transform: none; }
}


.h2-accent {
  display: block;
  color: var(--blue);
}

.hero__mark {
  position: absolute;
  z-index: -1;
  inset-block-start: 6%;
  inset-inline-start: 4%;
  width: min(30rem, 38%);
  fill: var(--rose);
  opacity: .085;
  transform: rotate(-8deg);
  filter: blur(1.5px);
  pointer-events: none;
}

.services-showcase {
  display: grid;
  gap: clamp(var(--space-7), 5vw, var(--space-9));
  align-items: center;
}

@media (min-width: 1025px) {
  .services-showcase {
    grid-template-columns: 1.05fr 1fr;
  }
}

.services-showcase__media {
  position: relative;
}

.services-showcase__media img {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  border-radius: 46% 8% 42% 10% / 34% 10% 40% 12%;
  box-shadow: var(--sh-lg);
}

.service-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-7);
}

@media (min-width: 1025px) {
  .service-tiles {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-inline-end: clamp(-96px, -6vw, -32px);
  }
}

.service-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-3);
  background: rgba(255, 255, 255, .82);
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), var(--sh-md);
  backdrop-filter: blur(16px) saturate(150%);
  color: var(--navy);
  text-align: center;
  text-decoration: none;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}

.service-tile:hover {
  background: var(--white);
  transform: translateY(-6px);
  box-shadow: inset 0 0 0 1px var(--blue-100), var(--sh-lg);
}

.service-tile .icon-badge {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.service-tile .icon-badge .icon { width: 22px; height: 22px; }

.service-tile__label {
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.3;
}

.service-tile__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  color: var(--blue-700);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.service-tile__go .icon {
  width: 1em;
  height: 1em;
  transition: transform var(--t-base) var(--ease);
}

.service-tile:hover .service-tile__go .icon { transform: translateX(-4px); }

.services-showcase__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-7);
}

.why-head {
  max-width: 40rem;
}

.why-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--space-8);
}

@media (min-width: 861px) {
  .why-row { grid-template-columns: repeat(5, 1fr); }
}

.heart-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 28rem;
  margin-inline: auto;
}

.heart-frame__ring,
.heart-frame__img {
  position: absolute;
  inset: 0;
}

.heart-frame__ring {
  z-index: 2;
  fill: none;
  stroke: var(--sky-500);
  stroke-width: .009;
  stroke-linecap: round;
  stroke-dasharray: .62 1;
  stroke-dashoffset: .18;
  transform: scale(1.07);
  transform-origin: center;
  pointer-events: none;
  opacity: .9;
}

.heart-frame__ring--accent {
  stroke: var(--sky-300);
  stroke-width: .007;
  stroke-dasharray: .34 1;
  stroke-dashoffset: .74;
  transform: scale(1.13);
  opacity: .8;
}

.heart-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: url(#heart-clip);
  filter: drop-shadow(0 20px 40px rgba(6, 20, 36, .18));
}

.faq__trigger {
  border-radius: var(--r-soft);
}

.faq__item:has(.faq__trigger[aria-expanded='true']) .faq__trigger {
  border-radius: var(--r-card) var(--r-card) 0 0;
}

.faq__item {
  border-radius: var(--r-soft);
}

.faq__item:has(.faq__trigger[aria-expanded='true']) {
  border-radius: var(--r-card);
}

.contact-media {
  position: relative;
}

@media (min-width: 1025px) {
  .service-tiles {
    margin-inline-end: clamp(-140px, -9vw, -60px);
  }
}

.hero-finish {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  z-index: 2;
  height: var(--finish-h);
  line-height: 0;
  pointer-events: none;
}

.hero-finish svg {
  width: 100%;
  height: 100%;
  fill: var(--sky-50);
}

.map-figure {
  position: relative;
}

.map-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 42rem;
  margin-inline: auto;
  overflow: visible;
  filter: drop-shadow(0 26px 52px rgba(6, 20, 36, .16));
}

.map-pin__shape { fill: var(--rose); }
.map-pin__shadow { fill: var(--navy); opacity: .14; }
.map-pin__label { fill: var(--navy); font-family: 'Assistant', sans-serif; font-weight: 800; }

.map-pin__ripple {
  fill: none;
  stroke: var(--rose);
  stroke-width: 2;
  opacity: 0;
}

html.js .map-pin {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 96%;
  transform: translateY(-58px) scale(.35);
}

html.js .map-svg .map-pin__label,
html.js .map-svg .map-pin__shadow {
  opacity: 0;
}

html.js .is-visible .map-pin {
  animation: pin-drop 780ms var(--ease) forwards;
  animation-delay: calc(var(--pin) * 150ms);
}

html.js .is-visible .map-pin__shadow {
  animation: pin-shadow 460ms var(--ease) forwards;
  animation-delay: calc(var(--pin) * 150ms + 320ms);
}

html.js .is-visible .map-pin__label {
  animation: pin-label 520ms var(--ease) forwards;
  animation-delay: calc(var(--pin) * 150ms + 400ms);
}

html.js .is-visible .map-pin__ripple {
  animation: pin-ripple 1700ms var(--ease) infinite;
  animation-delay: calc(var(--pin) * 150ms + 560ms);
}

@keyframes pin-drop {
  0% { opacity: 0; transform: translateY(-58px) scale(.35); }
  58% { opacity: 1; transform: translateY(8px) scale(1.08); }
  78% { transform: translateY(-4px) scale(.97); }
  100% { opacity: 1; transform: none; }
}

@keyframes pin-shadow {
  0% { opacity: 0; transform: scaleX(.2); }
  100% { opacity: .14; transform: none; }
}

@keyframes pin-label {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes pin-ripple {
  0% { opacity: .5; transform: scale(.5); }
  70% { opacity: 0; transform: scale(2.1); }
  100% { opacity: 0; transform: scale(2.1); }
}

html.js .map-pin__ripple {
  transform-box: fill-box;
  transform-origin: center;
}

html.js .map-pin__shadow {
  transform-box: fill-box;
  transform-origin: center;
}

.bleed {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.bleed__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.bleed__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1025px) {
  .bleed--left .bleed__media {
    right: auto;
    left: 0;
    width: min(62%, 940px);
  }

  .bleed--right .bleed__media {
    left: auto;
    right: 0;
    width: min(60%, 900px);
  }
}

.section.bleed { padding-block: 0; }

.bleed__inner {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  min-height: var(--bleed-h, clamp(400px, 62vh, 600px));
  padding-block: clamp(var(--space-7), 5vw, var(--space-8));
}

.bleed--flip .bleed__media img { transform: scaleX(-1); }

@media (min-width: 1025px) {
  .bleed--left .bleed__inner { justify-items: start; }
  .bleed--right .bleed__inner { justify-items: end; }
}

.bleed__content {
  max-width: 36rem;
}

@media (max-width: 1024px) {
  .bleed__media {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    width: auto;
    margin-bottom: calc(var(--space-8) * -1);
  }

  .bleed__media img {
    aspect-ratio: 4 / 3;
    -webkit-mask-image: linear-gradient(to top, transparent 2%, #000 34%);
    mask-image: linear-gradient(to top, transparent 2%, #000 34%);
  }

  .bleed__inner {
    min-height: 0;
    justify-items: stretch;
  }

  .bleed__content { max-width: none; }
}

.closing-panel {
  position: relative;
  padding: clamp(var(--space-7), 6vw, var(--space-10)) clamp(var(--space-5), 5vw, var(--space-9));
  border-radius: var(--r-panel);
  background: linear-gradient(150deg, var(--navy-900) 0%, var(--navy) 46%, var(--navy-600) 100%);
  color: rgba(255, 255, 255, .82);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--sh-lg);
}

.closing-panel h2 { color: var(--white); }

.closing-panel__head {
  max-width: 36rem;
  text-align: center;
  margin-inline: auto;
}

.closing-panel__head p { margin-top: var(--space-4); }

.closing-channels {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

@media (min-width: 861px) {
  .closing-channels { grid-template-columns: repeat(3, 1fr); }
}

.closing-channel {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: rgba(255, 255, 255, .07);
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  color: var(--white);
  text-decoration: none;
  transition: background-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.closing-channel:hover {
  background: rgba(255, 255, 255, .13);
  transform: translateY(-4px);
}

.closing-channel .icon-badge {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  color: var(--white);
}

.closing-channel .icon-badge .icon { width: 21px; height: 21px; }

.closing-channel__text { display: grid; gap: 2px; }
.closing-channel__text strong { font-size: 1.05rem; letter-spacing: -.01em; }
.closing-channel__text small { color: rgba(255, 255, 255, .62); font-size: var(--fs-xs); }

/* the email's line break (if any) is decided by JS (initClosingEmailWrap
   in main.js), which measures the real available width at runtime and
   only inserts a <br> when the text actually doesn't fit — CSS alone
   can't do this responsively: a plain <wbr> break-opportunity is NOT
   reliably suppressed by white-space:nowrap in this engine (confirmed
   empirically — nowrap stayed set but the wbr still broke the line), and
   a forced display:block span breaks unconditionally regardless of
   whether the line actually needs it. */

.closing-panel__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.hero {
  position: relative;
}

.hero__inner {
  align-content: center;
  padding-block: clamp(var(--space-6), 5vw, var(--space-8)) calc(var(--finish-h) + var(--space-9));
}

.hero__content {
  max-width: 46rem;
  transform: none;
}

.hero .eyebrow { margin-bottom: var(--space-3); }
.hero h1 { margin-bottom: var(--space-4); }
.hero__lead { max-width: 38rem; }
.hero__actions { margin-top: var(--space-6); gap: var(--space-3); }
.hero__badges { margin-top: var(--space-5); }
.hero .btn-lg, .hero .btn-ghost { padding: 15px 32px; font-size: 1rem; }

.note-float--services {
  position: absolute;
  z-index: 3;
  bottom: clamp(var(--space-6), 7vh, var(--space-9));
  left: clamp(var(--space-5), 4vw, var(--space-8));
  transform: rotate(-3deg);
}

.note-float--inline {
  position: static;
  display: inline-flex;
  margin-top: var(--space-6);
  transform: rotate(-2deg);
}

.bleed__media img {
  --fade-x: to right;
  -webkit-mask-image:
    linear-gradient(var(--fade-x), #000 0%, #000 44%, rgba(0, 0, 0, .55) 72%, rgba(0, 0, 0, .12) 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .45) 9%, #000 21%, #000 79%, rgba(0, 0, 0, .45) 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(var(--fade-x), #000 0%, #000 44%, rgba(0, 0, 0, .55) 72%, rgba(0, 0, 0, .12) 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .45) 9%, #000 21%, #000 79%, rgba(0, 0, 0, .45) 92%, transparent 100%);
  mask-composite: intersect;
}

.bleed--right .bleed__media img,
.bleed--left.bleed--flip .bleed__media img { --fade-x: to left; }
.bleed--right.bleed--flip .bleed__media img { --fade-x: to right; }

#services { --bleed-h: clamp(490px, 78vh, 760px); }
#services .bleed__content { transform: translateY(3%); }
#services .service-tiles { margin-top: var(--space-6); }
#services .service-tile { padding: var(--space-4) var(--space-3); gap: var(--space-2); }
#services .service-tile .icon-badge { width: 44px; height: 44px; }
#services .service-tile .icon-badge .icon { width: 20px; height: 20px; }

#services .services-showcase__foot {
  justify-content: flex-start;
  width: 100%;
  margin-top: var(--space-6);
}

#why-us {
  overflow-x: clip;
  padding-block: clamp(44px, 4.5vw, 76px);
}

#why-us .split {
  gap: clamp(var(--space-5), 2.5vw, var(--space-7));
  align-items: center;
}

@media (min-width: 1025px) {
  #why-us .split { grid-template-columns: minmax(0, .5fr) minmax(0, 2fr); }
  #why-us .split__media { margin-inline-start: min(0px, calc((1240px - 100vw) / 2 + 40px)); }
}

#why-us .heart-frame { max-width: 22rem; margin-inline: auto; }
#why-us .heart-frame__ring { stroke: var(--rose); }
#why-us .heart-frame__ring--accent { stroke: var(--rose); opacity: .5; }

#why-us .why-head { max-width: 46rem; margin-bottom: var(--space-4); }

#why-us .why-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) 0;
  margin-top: var(--space-6);
}

@media (min-width: 641px) {
  #why-us .why-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
  #why-us .why-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #why-us .why-item + .why-item { box-shadow: inset -1px 0 0 var(--line); }
}

#why-us .why-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: none;
  box-shadow: none;
  border-radius: 0;
  border-inline-end: none;
}

#why-us .why-item:hover { transform: none; background: none; }

#why-us .why-item .icon-badge {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--white), var(--sky-100));
  box-shadow: inset 0 0 0 1px rgba(149, 207, 253, .55), var(--sh-xs);
  color: var(--blue-700);
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

#why-us .why-item:hover .icon-badge {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--sky-500), var(--sh-sm);
}

#why-us .why-item .icon-badge .icon { width: 27px; height: 27px; stroke-width: 1.7; }
#why-us .why-item__text { display: grid; gap: 2px; min-width: 0; }
#why-us .why-item h3 { font-size: .98rem; line-height: 1.25; margin-bottom: 0; text-wrap: balance; }
#why-us .why-item p { font-size: .82rem; line-height: 1.35; }

#about-teaser { --bleed-h: clamp(485px, 74vh, 725px); }

#coverage-map {
  overflow-x: clip;
  padding-block: clamp(40px, 4vw, 68px) clamp(24px, 2vw, 40px);
}

#coverage-map .split { align-items: center; }
@media (min-width: 1025px) {
  #coverage-map .map-figure { margin-inline-start: clamp(-320px, -17vw, -110px); }
}

#coverage-map .map-svg {
  max-width: 42rem;
  filter: none;
  -webkit-mask-image:
    linear-gradient(to left, #000 58%, rgba(0, 0, 0, .35) 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 11%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to left, #000 58%, rgba(0, 0, 0, .35) 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 11%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
#contact-form .bleed__inner { padding-block: clamp(var(--space-6), 4vw, var(--space-7)); }





#closing-cta {
  background: var(--page);
  padding-bottom: clamp(40px, 4vw, 72px);
}

#closing-cta .closing-panel {
  padding-block: clamp(var(--space-6), 4vw, var(--space-8)) clamp(var(--space-6), 3vw, var(--space-7));
}

#closing-cta .closing-channels { margin-top: var(--space-6); }
#closing-cta .closing-panel__head p { margin-top: var(--space-3); }

.closing-channel__go {
  margin-inline-start: auto;
  width: 18px;
  height: 18px;
  opacity: .55;
  transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}

.closing-channel:hover .closing-channel__go {
  opacity: 1;
  transform: translateX(-5px);
}

.closing-channels { margin-bottom: 0; }

.h2-inline { text-wrap: balance; }
.h2-accent-inline { color: var(--blue); }

#insurers-bubble + .bleed { margin-top: 0; }





#closing-cta { padding-top: clamp(var(--space-7), 7vw, var(--space-9)); }











.hero-in { animation: hero-in 900ms var(--ease) backwards; animation-delay: var(--hero-delay, 0ms); }
.hero__media img { animation: hero-media 1400ms var(--ease) backwards; }
.hero__mark { animation: hero-mark 1600ms var(--ease) backwards; animation-delay: 260ms; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

/* .hero__note rests at a static rotate(-4deg) (see .hero__note base rule);
   without its own end-state, the shared hero-in keyframes (ending at
   transform:none) would snap to rotate(-4deg) the instant the animation
   finished, since animation-fill-mode:backwards doesn't persist the last
   frame. Give it a matching end-state instead so there's nothing to snap. */
.hero__note.hero-in { animation-name: hero-in-note; }

@keyframes hero-in-note {
  from { opacity: 0; transform: translateY(22px) rotate(-4deg); }
  to { opacity: 1; transform: rotate(-4deg); }
}

@keyframes hero-media {
  from { opacity: 0; transform: scaleX(-1) scale(1.06); }
  to { opacity: 1; transform: scaleX(-1); }
}

@keyframes hero-media-mobile {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: none; }
}

@keyframes hero-mark {
  from { opacity: 0; transform: rotate(-18deg) scale(.9); }
  to { opacity: .13; transform: rotate(-8deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-in, .hero__media img, .hero__mark { animation: none; }
  .hero__mark { opacity: .13; }
}

.badge { border-radius: var(--r-chip); }
.region-list li { border-radius: var(--r-chip); }
.insurers-note span { border-radius: var(--r-chip); }

#closing-cta .container { position: relative; z-index: 2; }

.hero__mark {
  inset-block-start: 4%;
  inset-inline-start: 2%;
  width: min(34rem, 42%);
  opacity: .13;
  filter: blur(2.5px);
}


#why-us { padding-block: clamp(52px, 5.5vw, 92px); }
#why-us .why-head { max-width: 40rem; }
#why-us .heart-frame { max-width: 20rem; }

#about-teaser { --bleed-h: clamp(510px, 78vh, 760px); }

#coverage-map .map-svg {
  -webkit-mask-image:
    linear-gradient(to left, #000 58%, rgba(0, 0, 0, .35) 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 11%, #000 76%, rgba(0, 0, 0, .35) 92%, transparent 100%);
  mask-image:
    linear-gradient(to left, #000 58%, rgba(0, 0, 0, .35) 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 11%, #000 76%, rgba(0, 0, 0, .35) 92%, transparent 100%);
}

#services { --bleed-h: clamp(460px, 72vh, 700px); }
#contact-form { --bleed-h: clamp(720px, 84vh, 840px); }
#coverage-map { padding-block: clamp(36px, 3.4vw, 60px) clamp(20px, 1.8vw, 34px); }
#closing-cta { padding-block: clamp(var(--space-6), 5vw, var(--space-8)) clamp(24px, 2.4vw, 44px); }

/* +2px matches the -2px offset above so the curve keeps its shape */
.site-footer__wave { height: calc(clamp(34px, 4vw, 64px) + 2px); }
.site-footer { padding-top: clamp(28px, 3vw, 52px); }
#closing-cta { padding-bottom: clamp(14px, 1.4vw, 26px); }

.section__head { margin-bottom: clamp(var(--space-5), 2.2vw, var(--space-6)); }
#services .service-tiles { margin-top: var(--space-5); }
#services .services-showcase__foot { margin-top: var(--space-5); }
#why-us .why-row { margin-top: var(--space-4); }
.region-list { margin-top: var(--space-5); }

.hero__lead {
  max-width: 34rem;
  font-size: clamp(1rem, .95rem + .3vw, 1.14rem);
  line-height: 1.55;
}

.hero h1 { margin-bottom: var(--space-3); }
.hero__actions { margin-top: var(--space-5); }

.lead {
  font-size: clamp(1rem, .95rem + .3vw, 1.14rem);
  line-height: 1.55;
}

#services { --bleed-h: clamp(430px, 63vh, 600px); }
#services .bleed__inner { padding-block: clamp(var(--space-6), 3.4vw, var(--space-7)); }




#services .wave-cut { height: clamp(56px, 6.2vw, 118px); }

@media (min-width: 1025px) {
  #services .bleed__media {
    left: 0;
    right: auto;
    top: auto;
    bottom: 0;
    width: auto;
    height: calc(100% - 104px);
    max-width: 80%;
    aspect-ratio: 1672 / 941;
    overflow: hidden;
  }

  #services .bleed__media img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-mask-image:
      linear-gradient(var(--fade-x), #000 0%, #000 26%, rgba(0, 0, 0, .5) 46%, rgba(0, 0, 0, .12) 64%, transparent 80%),
      linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .6) 2%, #000 6%, #000 86%, rgba(0, 0, 0, .4) 95%, transparent 100%);
    mask-image:
      linear-gradient(var(--fade-x), #000 0%, #000 26%, rgba(0, 0, 0, .5) 46%, rgba(0, 0, 0, .12) 64%, transparent 80%),
      linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .6) 2%, #000 6%, #000 86%, rgba(0, 0, 0, .4) 95%, transparent 100%);
  }
}

#why-us { padding-block: clamp(64px, 7vw, 124px); }
#why-us .heart-frame { max-width: 17rem; }

@media (min-width: 1025px) {
  #why-us .split {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.75fr);
    gap: clamp(var(--space-6), 3.5vw, var(--space-8));
  }
}

@media (min-width: 1025px) {
  #about-teaser .bleed__media {
    left: 0;
    right: auto;
    top: auto;
    bottom: 0;
    width: auto;
    height: calc(100% - 44px);
    max-width: 84%;
    aspect-ratio: 1672 / 941;
    overflow: hidden;
  }

  #about-teaser .bleed__media img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
    -webkit-mask-image:
      linear-gradient(var(--fade-x), #000 0%, #000 22%, rgba(0, 0, 0, .5) 40%, rgba(0, 0, 0, .12) 56%, transparent 70%),
      linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .6) 2%, #000 7%, #000 96%, rgba(0, 0, 0, .55) 99%, transparent 100%);
    mask-image:
      linear-gradient(var(--fade-x), #000 0%, #000 22%, rgba(0, 0, 0, .5) 40%, rgba(0, 0, 0, .12) 56%, transparent 70%),
      linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .6) 2%, #000 7%, #000 96%, rgba(0, 0, 0, .55) 99%, transparent 100%);
  }
}

.coverage-cta { margin-top: var(--space-6); }

@media (min-width: 1025px) {
  #contact-form .bleed__media {
    left: 0;
    right: auto;
    top: auto;
    bottom: 0;
    width: min(64%, 1000px);
    height: auto;
    max-width: none;
    aspect-ratio: 1672 / 941;
    overflow: hidden;
  }

  #contact-form .bleed__media img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 40% center;
    -webkit-mask-image:
      linear-gradient(var(--fade-x), #000 0%, #000 40%, rgba(0, 0, 0, .5) 62%, rgba(0, 0, 0, .12) 80%, transparent 96%),
      linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .6) 2%, #000 8%, #000 94%, rgba(0, 0, 0, .5) 98%, transparent 100%);
    mask-image:
      linear-gradient(var(--fade-x), #000 0%, #000 40%, rgba(0, 0, 0, .5) 62%, rgba(0, 0, 0, .12) 80%, transparent 96%),
      linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .6) 2%, #000 8%, #000 94%, rgba(0, 0, 0, .5) 98%, transparent 100%);
  }
}













@keyframes sent-logo {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}


/* ============================================================
   FORMS — single source of truth
   ============================================================ */

.field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.field > label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--navy);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 20px;
  background: var(--white);
  border: 1.5px solid var(--blue-100);
  border-radius: var(--r-soft);
  font: inherit;
  color: var(--text);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

.field input[type="tel"] {
  direction: rtl;
  text-align: right;
}

.field textarea {
  min-height: 108px;
  resize: vertical;
}

.field select {
  appearance: none;
}

@media (max-width: 1024px) {
  /* below desktop the native picker is used (see initSelects in main.js) —
     restore the OS's own select affordance instead of a fake chevron */
  .field select {
    appearance: auto;
    padding-inline-end: var(--space-4);
  }
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(36, 119, 182, .16);
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: var(--red);
}

.field.is-invalid input:focus-visible,
.field.is-invalid select:focus-visible,
.field.is-invalid textarea:focus-visible {
  box-shadow: 0 0 0 3px rgba(220, 47, 60, .16);
}

.field__error { display: none; }

.field--consent {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
}

.field--consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border-radius: 6px;
  accent-color: var(--blue);
}

.field--consent.is-invalid input {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.field--consent label {
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted);
}

.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- custom select ---- */

.select-wrap { position: relative; }

.select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: 14px 20px;
  background: var(--white);
  border: 1.5px solid var(--blue-100);
  border-radius: var(--r-soft);
  font: inherit;
  color: var(--muted);
  text-align: start;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.select-trigger.has-value {
  color: var(--text);
  font-weight: 600;
}

.select-trigger[aria-expanded='true'],
.select-trigger:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(36, 119, 182, .16);
}

.field.is-invalid .select-trigger { border-color: var(--red); }

.select-trigger .icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--blue);
  transition: transform var(--t-base) var(--ease);
}

.select-trigger[aria-expanded='true'] .icon { transform: rotate(180deg); }

.select-list {
  position: absolute;
  z-index: 20;
  inset-inline: 0;
  top: calc(100% + 6px);
  max-height: 13rem;
  padding: var(--space-2);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  border: 1.5px solid var(--sky-300);
  border-radius: var(--r-card);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility var(--t-base);
}

.select-wrap.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.select-list li {
  padding: 11px var(--space-4);
  border-radius: 12px;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.select-list li:hover,
.select-list li.is-active,
.select-list li[aria-selected='true'] {
  background: var(--sky-100);
  color: var(--blue-700);
  font-weight: 700;
}

/* ---- contact form layout ---- */

.contact-form {
  position: relative;
  display: grid;
  gap: var(--space-3);
  padding: var(--pad);
  --pad: clamp(var(--space-5), 3vw, var(--space-7));
  background: rgba(255, 255, 255, .94);
  border-radius: var(--r-panel);
  box-shadow: inset 0 0 0 1.5px var(--sky-300), 0 2px 4px rgba(6, 20, 36, .04), 0 26px 64px rgba(6, 20, 36, .12);
  backdrop-filter: blur(18px) saturate(160%);
}

@media (min-width: 641px) {
  .contact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .contact-form > .contact-form__head,
  .contact-form > .field--wide,
  .contact-form > .field--consent,
  .contact-form > .contact-form__submit { grid-column: 1 / -1; }
}

.contact-form__head { margin-bottom: var(--space-1); }

.contact-form__head .eyebrow { margin-bottom: var(--space-3); }

.contact-form__head h2 {
  font-size: clamp(1.55rem, 1.15rem + 1.35vw, 2.2rem);
  line-height: 1.15;
  margin-bottom: var(--space-3);
}

.contact-form__intro {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1.5;
}

.contact-form__submit {
  width: 100%;
  margin-top: var(--space-1);
}


.form-status[hidden] { display: none; }

.form-status.is-ok {
  background: var(--sky-100);
  color: var(--navy);
}

.form-status.is-error {
  background: #fdeaec;
  color: var(--red-active);
}

/* ---- success state ---- */

.form-sent {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--pad);
  background: var(--white);
  border-radius: inherit;
  text-align: center;
}

.form-sent[hidden] { display: none; }

.form-sent__logo {
  width: auto;
  height: 42px;
}

.form-sent__ring {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--sky-100);
  color: var(--blue-700);
}

.form-sent__ring .icon {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.form-sent__text h3 { margin-bottom: var(--space-2); }
.form-sent__text p { color: var(--muted); }

.form-sent[data-play] .form-sent__logo { animation: sent-logo 620ms var(--ease) both; }
.form-sent[data-play] .form-sent__ring { animation: sent-pop 620ms var(--ease) 180ms both; }
.form-sent[data-play] .form-sent__ring .icon { animation: sent-draw 460ms var(--ease) 480ms both; }
.form-sent[data-play] .form-sent__text { animation: sent-fade 420ms var(--ease) 700ms both; }

@keyframes sent-logo {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}

@keyframes sent-pop {
  from { opacity: 0; transform: scale(.6); }
  to { opacity: 1; transform: none; }
}

@keyframes sent-draw {
  from { stroke-dasharray: 26; stroke-dashoffset: 26; }
  to { stroke-dasharray: 26; stroke-dashoffset: 0; }
}

@keyframes sent-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .form-sent[data-play] .form-sent__logo,
  .form-sent[data-play] .form-sent__ring,
  .form-sent[data-play] .form-sent__ring .icon,
  .form-sent[data-play] .form-sent__text { animation: none; }
}

/* ---- contact section ---- */

#contact-form .contact-block { max-width: 38rem; }

.form-status {
  margin: var(--space-4) 0 0;
  padding: 11px var(--space-5);
  border-radius: var(--r-soft);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.select-list { max-height: 21rem; }

/* ---- FAQ section ---- */

#faq { --bleed-h: clamp(700px, 76vh, 780px); }

#faq .wave-cut { height: clamp(48px, 5.4vw, 102px); }

@media (min-width: 1025px) {
  #faq .bleed__media {
    right: 0;
    left: auto;
    top: 0;
    bottom: auto;
    width: min(66%, 1250px);
    height: auto;
    max-width: none;
    aspect-ratio: 1672 / 941;
    overflow: hidden;
  }

  #faq .bleed__media img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-mask-image:
      linear-gradient(var(--fade-x), #000 0%, #000 28%, rgba(0, 0, 0, .5) 48%, rgba(0, 0, 0, .12) 64%, transparent 78%),
      linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .6) 2%, #000 8%, #000 94%, rgba(0, 0, 0, .5) 98%, transparent 100%);
    mask-image:
      linear-gradient(var(--fade-x), #000 0%, #000 28%, rgba(0, 0, 0, .5) 48%, rgba(0, 0, 0, .12) 64%, transparent 78%),
      linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .6) 2%, #000 8%, #000 94%, rgba(0, 0, 0, .5) 98%, transparent 100%);
  }
}

#faq .bleed__content {
  max-width: 42rem;
  margin-inline: auto 0;
}

#faq .section__head { margin-bottom: var(--space-5); }

#faq .faq {
  gap: var(--space-2);
  align-content: start;
}

#faq .faq__trigger { padding: 15px var(--space-5); }

/* ---- heading block rhythm: one rule for the whole site ---- */

.eyebrow { margin-bottom: var(--space-3); }

.section__head .lead,
.why-head .lead,
.split__body > .lead,
.bleed__content > .lead,
.closing-panel__head p,
.contact-form__intro { margin-top: var(--space-3); }

.hero h1 { margin-bottom: var(--space-3); }
.section__head h2,
.why-head h2,
.split__body > h2,
.bleed__content > h2 { margin-bottom: 0; }

#closing-cta { padding-block: clamp(36px, 3.6vw, 66px); }

.btn-row { margin-top: clamp(var(--space-5), 2.4vw, var(--space-7)); }

/* ============================================================
   HOME PAGE — MOBILE ART DIRECTION
   Everything below is scoped to max-width queries only.
   Desktop (≥1025px) inherits nothing from this block.
   ============================================================ */

/* ---- 01 Header: compact mobile/tablet bar (logo centered,
   hamburger on the right, icon-only call button on the left) ---- */
@media (max-width: 1024px) {
  .site-header__inner { justify-content: space-between; }
  .site-header__logo { order: 2; }
  .site-header__actions { order: 3; display: contents; }

  /* requested more than once — this is the CLOSED header bar's own logo
     (not the drawer's), previously only ever getting the desktop-shared
     44px base. A mobile-only bump, clearly felt at a glance. */
  .site-header__logo img { height: 50px; }
  .site-header.is-stuck .site-header__logo img { height: 40px; }

  .site-header__burger { order: 1; position: relative; z-index: 111; }

  /* the drawer has its own dedicated close control (.site-nav__close);
     the header's burger keeps its normal closed-state look and position
     and just stays out of the way visually once the (opaque) drawer is
     open and already covering it */
  .site-header__burger[aria-expanded='true'] { visibility: hidden; }

  .site-header__cta {
    order: 3;
    display: inline-flex;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
  }

  .site-header__cta span { display: none; }
  .site-header__cta .icon { width: 20px; height: 20px; transition: width var(--t-base) var(--ease), height var(--t-base) var(--ease); }

  /* the compact (.is-stuck) state only shrank the logo before — burger
     and call button stayed visually full-size, reading as unbalanced.
     Scale them down as one proportional system: button box 46→44px
     (still meeting the 44px accessible minimum — never smaller), icon
     glyphs shrink with it, header gap tightens too. */
  .site-header__burger,
  .site-header__cta,
  .site-header__burger .icon,
  .site-header__cta .icon {
    transition: width var(--t-base) var(--ease), height var(--t-base) var(--ease);
  }

  .site-header.is-stuck .site-header__burger,
  .site-header.is-stuck .site-header__cta {
    width: 44px;
    height: 44px;
  }

  .site-header.is-stuck .site-header__burger .icon { width: 19px; height: 19px; }
  .site-header.is-stuck .site-header__cta .icon { width: 17px; height: 17px; }

  .site-header__inner {
    transition: height var(--t-base) var(--ease), gap var(--t-base) var(--ease), padding-inline var(--t-base) var(--ease);
  }

  .site-header.is-stuck .site-header__inner {
    gap: var(--space-5);
    padding-inline: clamp(16px, 4vw, 52px);
  }
}

/* ---- 00 Reveal motion, mobile/tablet only — scroll-progress driven.
   What this replaces: an IntersectionObserver flipped .is-visible once and
   a CSS transition then played on its own fixed clock (duration + stagger
   delays). That clock was the root cause of the "generic template" feel —
   the entrance ran at the same speed no matter how fast the reader was
   actually moving, so on a slow scroll it had always finished long before
   the content was reached, and the stagger was a queue of timers rather
   than anything to do with the page.

   Here initReveal()'s mobile branch writes two numbers per frame from the
   element's own position in the viewport: --rv-p (eased motion progress)
   and --rv-o (eased opacity, which lands earlier so text is never left
   sitting at a hard-to-read part-opacity if the reader stops mid-scroll).
   The motion IS the scroll — slow scroll, slow reveal; fast scroll, it
   catches up; nothing plays before the element is genuinely arrived at.
   Progress only ever moves forward, so scrolling back up never un-reveals.

   --rv-y / --rv-s give each content type its own small entrance instead of
   one shared fade-up. Desktop (≥1025px) never enters this block and keeps
   its original approved timed behavior. ---- */
@media (max-width: 1024px) {
  html.js .reveal {
    --rv-y: 20px;
    --rv-s: 0;
    opacity: 0;
    transform: translate3d(0, var(--rv-y), 0) scale(calc(1 + var(--rv-s)));
    /* The curve is where the quality lives. cubic-bezier(.16,1,.3,1) is a
       long expo-style deceleration: it covers most of the distance early
       and then settles for a long time, which is what reads as "eased into
       place" rather than "moved and stopped". Transform runs longer than
       opacity so the element is readable before it has finished settling,
       and the two finishing at different moments is what stops it looking
       like a single mechanical fade-and-slide.
       --rv-delay is set per element by initReveal() from its index among
       its siblings, so groups cascade. */
    transition:
      opacity 620ms cubic-bezier(.33, 1, .68, 1) var(--rv-delay, 0ms),
      transform 900ms cubic-bezier(.16, 1, .3, 1) var(--rv-delay, 0ms);
    will-change: opacity, transform;
  }

  html.js .reveal.is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  /* cards — arrive and settle, not a zoom. Travel carries the entrance;
     the scale is only there to give it a little depth */
  html.js .reveal-in--scale { --rv-y: 18px; --rv-s: -.010; }

  /* images and the map — depth only, no vertical slide, so a photograph
     settles into place instead of behaving like a card */
  html.js .reveal-in--media { --rv-y: 0px; --rv-s: .014; }

  /* FAQ and list rows — a quiet rise, cascaded by the stagger delay */
  html.js .reveal-in--row { --rv-y: 14px; --rv-s: 0; }

  /* the beat that closes a sequence */
  html.js .reveal-in--cta { --rv-y: 12px; --rv-s: 0; }
}

/* ---- 00b Section seam continuity (mobile/tablet only) — systemic.
   The section palette uses three different near-whites as backgrounds:
   --white #ffffff, --sky-50 #f5fafe and --sky-100 #edf7fd (plus
   --sky-alt-end #e3eff9 as the map's ending tint). Wherever two adjacent
   sections happened to pick different ones, the join painted a hard step
   across a single pixel row. Measured ΔRGB at every boundary before this
   block: services→why-us 16, why-us→about 0, about→map 28, map→contact 50,
   contact→faq 28, faq→closing 0. That single mismatch is the "line between
   sections" everywhere it shows up — one cause, not several, which is why
   fixing them one at a time never held.

   The rule, applied uniformly: a section RESOLVES TO ITS NEIGHBOUR'S COLOUR
   at each shared edge, over --seam-fade. The join is then an exact colour
   match by construction (ΔRGB 0) and the resolve is spread over enough
   distance to read as the section's own background rather than a band.
   The ramp is always placed on the side that has empty padding at that
   edge, so no section's content area changes tone.

   Note these are painted via background-IMAGE; a section's computed
   backgroundColor can be rgba(0,0,0,0) while a gradient does all the
   painting, so colour-matching a boundary by backgroundColor alone reads
   "nothing here" and misses the step entirely. ---- */
@media (max-width: 1024px) {
  :root { --seam-fade: 140px; }

  /* Opens on the map's ending --sky-alt-end so the two meet exactly, then
     resolves to white — which is also what the FAQ's own .wave-cut below
     is filled with, so both of this section's edges agree with their
     neighbour. The ramp sits behind the photo's curved top edge.

     Only this one section needs a ramp. Every other join is already
     handled by the .wave-cut divider at the top of the following section,
     whose fill is authored to match the previous section's bottom colour —
     that system IS the seam system here, and adding colour ramps on top of
     it is what broke two joins (a wave-cut filled --white against a
     section bottom that had been ramped to --sky-100). Before changing any
     section's edge colour, check the next section's .wave-cut fill. */
  #contact-form {
    background: linear-gradient(180deg,
      var(--sky-alt-end) 0,
      var(--white) var(--seam-fade));
  }
}

/* ---- 02 Hero: a clear top image band (~30% of the opening), soft
   vertical blend into the content, centered CTAs ---- */
@media (max-width: 640px) {
  /* svh, not vh/dvh: guarantees the hero fills the screen even with
     browser chrome fully expanded, so the next section never peeks into
     the first viewport — without pinning to a rigid legacy 100vh */
  .hero { min-height: 100svh; }

  /* only "זמינים כרגע" stays in the hero; "צוות ישראלי מוסמך" moved to
     the drawer's trust items (see the drawer rules), desktop untouched */
  .hero__badges li:nth-child(2),
  .hero__badges li:nth-child(3) { display: none; }

  .hero__badges { justify-content: center; }

  .hero__media {
    inset: 0 0 auto 0;
    height: clamp(231px, 36dvh, 341px);
  }

  /* the shared .hero-media keyframes hard-code scaleX(-1) for the desktop
     mirror; giving mobile its own animation-name (matching .hero__note's
     fix) keeps the mirror out of the animation entirely instead of just
     the resting state — that mismatch was the flip/duplicate-looking bug */
  .hero__media img {
    /* the image's own hard rectangular crop was the "aggressive edge" —
       the white overlay below (.hero::after) fades the WHOLE hero for
       text legibility, but never touched the photo's own bottom border.
       Masking the IMG directly (not .hero__media, which sits at
       z-index:-2 inside .hero's isolated stacking context) — masking the
       container made the whole photo vanish at some widths, a real
       mask+negative-z-index+isolation interaction, not just a style
       preference. */
    -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
    animation-name: hero-media-mobile;
    transform: none;
    object-position: 60% 44%;
  }

  /* the desktop-oriented mark (large, low over the whole hero, meant to
     sit in empty space beside the diagonal text layout) lands behind the
     subject once the mobile crop is this tight. Anchored to the same
     safe left column as "אנשים לפני הכל" instead, sized and placed to
     read as a deliberate accent near it, not scenery behind the photo. */
  .hero__mark {
    /* percentages here resolve against the WHOLE hero (min-height:100svh
       now, not just the image band) — dvh keeps it anchored within the
       image band regardless of how tall the rest of the hero's content
       makes the section, instead of drifting toward the CTAs/badges */
    inset-block-start: 11dvh;
    inset-block-end: auto;
    /* physical left, not inset-inline-start — in this RTL page that
       logical property resolves to the right edge, which is exactly why
       this was landing behind the figure instead of over by the note */
    inset-inline-start: auto;
    left: 2%;
    width: 26%;
    opacity: .16;
    filter: none;
  }

  .hero__note {
    top: clamp(var(--space-6), 8vh, var(--space-9));
    left: var(--space-5);
  }

  .hero .eyebrow {
    text-shadow: 0 1px 10px rgba(255, 255, 255, .85), 0 0 16px rgba(255, 255, 255, .6);
  }

  .hero__inner {
    min-height: 100svh;
    padding-top: clamp(154px, 26dvh, 244px);
    padding-bottom: clamp(40px, 9vw, 64px);
  }

  .hero::after {
    background:
      linear-gradient(to bottom,
        rgba(255, 255, 255, .02) 0,
        rgba(255, 255, 255, .1) 21dvh,
        rgba(255, 255, 255, .4) 29dvh,
        rgba(255, 255, 255, .78) 36dvh,
        var(--page) 44dvh,
        var(--page) 100%);
  }

  .hero__badges li:nth-child(1) {
    padding: 6px 12px;
    background: rgba(255, 255, 255, .68);
    font-size: .82rem;
    font-weight: 600;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn { width: 100%; }

  .scroll-cue { display: none; }
}

/* ---- 03 Health funds / reimbursement strip: balanced centering ---- */
@media (max-width: 640px) {
  .insurers-card__head { justify-items: center; text-align: center; }
  .insurers-card__head > div { display: flex; flex-direction: column; align-items: center; }
  .insurers-card__head .link-arrow { margin-top: var(--space-1); }
}

/* ---- 04 Services: shared Mobile Media System already applies via
   .bleed__media (see @media max-width:1024 above); just center the CTA ---- */
@media (max-width: 640px) {
  #services .services-showcase__foot { justify-content: center; }
  .note-float--services { display: none; }

  /* longhand override, bottom only — the last card's own shadow needs
     more room before the wave into Why-Or-Tal than the shared top/bottom
     .bleed__inner padding-block value gives it; top stays untouched */
  #services .bleed__inner { padding-block-end: clamp(72px, 9vw, 112px); }
}

/* round 2 — the crop was too tight: taller frame, focal point kept on
   the pair, a longer/softer fade into the section below */
@media (max-width: 1024px) {
  #services .bleed__media { aspect-ratio: 6 / 5; }

  #services .bleed__media img {
    object-position: 50% 28%;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 42%);
    mask-image: linear-gradient(to top, transparent 0%, #000 42%);
  }
}

/* ---- 05 Why Or-Tal: heart image first, then heading, then values (2+2+1) ---- */
@media (max-width: 1024px) {
  #why-us .split__media { order: -1; }
}

@media (max-width: 640px) {
  #why-us .why-item:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 55%;
  }
}

/* ---- 06 About: shared Mobile Media System covers the image;
   nothing else needed here ---- */

/* ---- 07 National coverage: map first, bigger, pins with more presence ---- */
@media (max-width: 1024px) {
  #coverage-map .split__media { order: -1; }
}

@media (max-width: 640px) {
  /* tighter gap between the map and the heading below it — the map is
     meant to read as landscape/background the page opens into, not a
     separate graphic block sitting above a distinctly separate text
     block with a lot of dead air between them */
  #coverage-map .split { gap: var(--space-4); }

  #coverage-map .map-figure {
    margin-inline: calc(var(--gutter) * -1);
  }

  #coverage-map .map-svg {
    max-width: none;
    width: 124%;
    margin-inline-start: -12%;
    filter: none;
    /* a hard rectangular edge (plus the round-2 fix's mask-image:none)
       is exactly why this read as "a graphic placed on the background"
       instead of "the map IS the background" — fading its own top/bottom
       into the section's colour removes that edge instead of just
       enlarging what was still a sharp-edged rectangle */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  }

  #coverage-map .note-float--map { display: none; }

  #coverage-map .region-list { margin-top: var(--space-4); }
  #coverage-map .coverage-cta { margin-top: var(--space-4); }

  /* the CTA button's own box-shadow (0 8px 22px) reaches roughly 25-30px
     past its own border box — the shared bottom padding (20px min) left
     less room than that, so the shadow's soft edge was bleeding across
     the wave-cut into #contact-form. Longhand override, bottom only. */
  #coverage-map { padding-block-end: clamp(56px, 8vw, 88px); }
}

/* ---- 08 Contact: same image-on-top family as FAQ/services/about
   (round 2 — replaces round 1's background-image treatment per
   updated direction). Height stays fully content-driven. ---- */
@media (max-width: 640px) {
  /* Bottom spacing is measured from the card's VISUAL end, not its box: the
     form card's shadow is 0 26px 64px, so it reaches 90px below its own
     border box. The previous floor (--space-8, 64px) was shorter than that,
     so the shadow's tail was landing ~26px inside the FAQ section's image —
     which is what read as the two sections stacking rather than following
     each other. 120px = 90px of shadow reach + ~30px of actual breathing
     room. Padding, never a fixed height, so the validation-error state
     (which adds a status line below the card) simply grows from here. */
  #contact-form .bleed__inner { padding-block: clamp(var(--space-8), 12vw, var(--space-9)) clamp(132px, 20vw, 156px); }
}

/* ---- 09 FAQ: shared Mobile Media System covers the image;
   accordion sizing/dynamic-height already comes from JS + .bleed__inner
   { min-height:0 } at max-width:1024 above ---- */
@media (max-width: 1024px) {
  .faq__trigger span { text-wrap: balance; }

  /* An OPEN accordion item is elevated — 0 18px 44px, so 62px of downward
     shadow reach — while a closed one is nearly flat (8px). The bottom
     spacing was sized for the closed state, and because the --bleed-h
     height floor deliberately keeps the section exactly as tall whether an
     item is open or not, expanding the LAST item put a 62px shadow into a
     38px gap: 24px of it landed inside the Closing CTA. Size the gap for
     the EXPANDED shadow instead — 62px reach plus ~30px breathing room.
     The closed state simply keeps more room below it, and no fixed height
     is involved either way. */
  #faq .bleed__inner { padding-block-end: clamp(102px, 16vw, 132px); }
}

/* mobile-only explicit two-line treatment for the one long question —
   text-wrap:balance didn't land on the exact break point requested.
   Desktop keeps it as one continuous sentence (the two spans stay inline
   with a normal space between them); the accessible name is unaffected
   either way since it's just the button's concatenated text content. */
@media (max-width: 640px) {
  .faq__q-line:last-of-type { display: block; }
}

/* ---- 10 Final CTA: keep the heart mark as a quiet background accent;
   fix the channel bubbles overflowing at narrow widths at the root
   (flex children need min-width:0 to shrink instead of pushing out) ---- */
@media (max-width: 640px) {
  #closing-cta .cta-block__mark {
    inset-block-start: auto;
    inset-block-end: -8%;
    inset-inline-end: -14%;
    inset-inline-start: auto;
    width: min(18rem, 68%);
    opacity: .05;
  }

  .closing-channel {
    min-width: 0;
    padding: var(--space-4);
    gap: var(--space-3);
  }

  .closing-channel__text { min-width: 0; }

  .closing-channel__text strong {
    display: block;
    overflow-wrap: anywhere;
  }

  /* the email address is long enough to need help at the narrowest
     widths; a smaller font-size keeps it on one line through ~390px on
     its own. Below that, the <wbr> in the markup (before the @) is a
     genuine break OPPORTUNITY, not a forced one — the browser only uses
     it if the line actually doesn't fit, so this stays a true one-line
     fit whenever there's room instead of a fixed breakpoint override
     that wraps unconditionally regardless of available width. */
  .closing-channel[href^="mailto"] .closing-channel__text strong { font-size: .92rem; }

  .closing-channel .icon-badge { flex: none; width: 42px; height: 42px; }
  .closing-channel__go { flex: none; }
}

/* ---- 11 Footer: watermark sits behind the brand/logo area near the top
   of the footer instead of anchored to the section's bottom edge — with
   how tall the footer's column stack is on mobile, a bottom-anchored mark
   landed mostly below the fold, behind dense text columns, reading as
   barely-there rather than a deliberate accent; soften the closing-panel's
   shadow at mobile only — it's what was creating the visible band at the
   footer seam (the shadow itself is shared with desktop, so only its
   mobile value changes) ---- */
@media (max-width: 640px) {
  /* round 7: neither extreme worked — top (round 6) put it behind the
     brand row where there's little vertical room for a mark this size;
     bottom (original) put most of it below the fold behind the dense
     contact column. Split the difference: starts around where the
     contact-info column begins and runs down toward the credits row, so
     it reads as one continuous watermark behind that content instead of
     being pinned to either end. */
  .site-footer__mark {
    inset-block-start: 56%;
    inset-block-end: auto;
    inset-inline-start: auto;
    left: -14%;
    width: min(38rem, 108%);
    opacity: .07;
    transform: rotate(-6deg);
  }

  #closing-cta .closing-panel {
    box-shadow: none;
  }
}

/* ============================================================
   ROUND 2 — navigation drawer art direction
   The closed header bar (logo centered / burger right / call left)
   is approved from round 1 and untouched. This is the OPEN drawer only.
   ============================================================ */
@media (max-width: 1024px) {
  .site-nav {
    display: flex;
    flex-direction: column;
    padding: 0;
    /* .site-nav__mark bleeds off the panel's own right edge; overflow-y:auto
       on the base rule otherwise computes overflow-x to auto too (the "one
       visible, one not" interop rule) and would let that bleed open up a
       horizontal scroll area inside the drawer */
    overflow-x: hidden;
  }

  /* positioned against .site-nav itself (already position:fixed, so it's
     a valid containing block on its own) — no relocation, no offsets
     computed against the viewport, just normal absolute-in-fixed-parent
     placement. Can never end up outside the panel. */
  .site-nav__close {
    position: absolute;
    top: 13px;
    left: var(--space-5);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--ice);
    border: none;
    border-radius: 15px;
    color: var(--navy);
    cursor: pointer;
  }

  .site-nav__close:hover { background: var(--blue-100); }
  .site-nav__close .icon { width: 20px; height: 20px; }
  .site-nav__close:active { transform: scale(.94); }

  .site-nav__brand {
    position: relative;
    flex: none;
    /* the vh-clamped terms shrink on shorter viewports so the drawer's
       CLOSED content (submenu collapsed) fits inside common phone heights
       without needing internal scroll — see the "no internal scroll
       unless the submenu is open" rule below */
    padding: calc(var(--header-h) + clamp(var(--space-3), 2.5vh, var(--space-5))) var(--space-6) clamp(var(--space-4), 3vh, var(--space-6));
  }

  /* sits directly against .site-nav (not .site-nav__brand) so it has the
     whole panel's height to bleed across instead of the brand strip's
     ~170px — low and off a corner, like .site-footer__mark, instead of
     cramped behind the close button/logo row. Physical right/bottom, not
     inset-inline-*, to avoid the RTL flip documented above for
     .hero__mark. */
  .site-nav__mark {
    position: absolute;
    z-index: -1;
    top: auto;
    /* flush with the panel's own bottom edge, not bled past it — a
       negative bottom here was the actual cause of "closed drawer can
       still scroll": a purely decorative, aria-hidden absolutely
       positioned descendant still counts toward a scrollable ancestor's
       overflow area even though nothing about it needs to be seen by
       scrolling to it */
    bottom: 4%;
    right: -22%;
    left: auto;
    width: 74%;
    fill: var(--rose);
    opacity: .06;
    transform: rotate(-8deg);
    pointer-events: none;
  }

  .site-nav__logo { width: auto; height: 52px; }

  .site-nav__list {
    /* flex-grow:1 here was silently cancelling out every other spacing
       trim in this block: whatever room got freed elsewhere in the
       column, the list (the only flex-grow item) absorbed by growing its
       own box the exact same amount, so the drawer's total content height
       never actually changed. flex:0 lets it stay at its natural size so
       trimmed sibling spacing actually shortens the total. */
    flex: 0 1 auto;
    padding: 0 var(--space-6);
    gap: 0;
  }

  .site-nav__list > li { border-top: 1px solid var(--line); }
  .site-nav__list > li:first-child { border-top: none; }

  .site-nav__list a {
    padding: clamp(9px, 1.3vh, 14px) var(--space-3);
    font-size: 1.05rem;
  }

  .site-nav__list a:active,
  .site-nav__trigger:active { transform: scale(.97); }

  .site-nav__item--has-menu.is-open .site-nav__trigger {
    color: var(--blue-700);
  }

  /* the trigger never navigates away, so the shared :hover pill background
     would never get a chance to clear and would read as a stuck "pressed
     button" */
  .site-nav__trigger {
    padding-block: clamp(9px, 1.3vh, 14px);
    /* chevron stays flush with the row's inline end, exactly where it sat
       when it was its own grid column */
    padding-inline: var(--space-3) 0;
    font-size: 1.05rem;
  }

  .site-nav__trigger:hover { background: none; }

  .site-nav__toggle { width: 44px; height: 44px; border-radius: 12px; }

  /* inside the trigger the chevron must not set the row's height the way a
     44px-tall grid cell of its own used to — it stretches to the text's
     line box instead and centers the icon in it, so the row height and the
     icon's centre both stay exactly where they were */
  .site-nav__trigger .site-nav__toggle { height: auto; align-self: stretch; }

  .site-nav__submenu a { padding: 12px var(--space-3); }

  .site-nav__trust {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    /* round 7 trimmed this (and __contact below) to close a real
       no-scroll bug — but with that bug's actual causes fixed (the
       list's flex-grow, the mark's bleed) there's slack again, and this
       trim alone had pulled trust/contact up tighter than needed, closer
       to the links than to the drawer's own bottom edge */
    margin: clamp(var(--space-4), 4vh, var(--space-7)) var(--space-6) 0;
  }

  .site-nav__trust li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--blue-700);
    font-size: var(--fs-xs);
    font-weight: 700;
  }

  .site-nav__trust .icon { width: 15px; height: 15px; color: var(--blue); flex: none; }

  .site-nav__contact {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: clamp(var(--space-4), 4vh, var(--space-7)) var(--space-6) 0;
    padding-top: clamp(var(--space-4), 3.5vh, var(--space-6));
    padding-bottom: clamp(var(--space-6), 5vh, var(--space-8));
    border-top: 1px solid var(--line);
  }

  .site-nav__contact .btn { width: 100%; }

  .site-nav__social:not([hidden]) {
    flex: none;
    padding: 0 var(--space-6) var(--space-6);
  }
}

/* ---- 12 Accessibility widget: compact round button, clear of the
   cookie banner (reuses the --banner-h var the banner already sets) ---- */
@media (max-width: 640px) {
  .a11y-toggle {
    top: auto;
    bottom: calc(var(--banner-h, 0px) + 28px);
    left: 12px;
    transform: none;
    flex-direction: row;
    gap: 0;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }

  .a11y-toggle__label { display: none; }

  .a11y-panel {
    left: 12px;
    top: auto;
    bottom: calc(var(--banner-h, 0px) + 84px);
    transform: none;
    width: min(300px, calc(100vw - 24px));
  }
}


/* ============================================================
   INNER PAGES — shared layer
   Every class below is namespaced to markup that only inner
   pages use (index.html contains none of them), so this block
   cannot regress the approved home page. It composes the same
   design language: same tokens, same .section/.container/
   .wave-cut/.card/.icon-badge/.faq primitives, same reveal
   classes. Page-specific tweaks live in the page's own block
   further down, always id-scoped.
   ============================================================ */

/* ---- page hero — REBUILT (art-direction pass).
   Previously a floating rounded image panel occupying 46% of the left
   side. Three things were wrong with it and all three were structural,
   not a matter of tuning: the photo read as a CARD placed on the page
   rather than as the page's own opening; it was half the height of the
   copy beside it, so a tall H1 always won; and the composition shared
   nothing with the approved home hero except the typeface.

   It is now built on exactly the home hero's architecture — a full-bleed
   photograph behind the whole section, a directional wash from the
   reading side for legibility, copy sitting ON the image, the brand heart
   as a watermark — just shorter, because an inner page has to get to its
   content. Same family, not a clone.

   Per-page art direction happens through --hero-pos (the crop's focal
   point) and --hero-h (how much room this page's opening deserves); both
   have sane defaults so a page that sets neither still composes. ---- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--page);
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.page-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos, 60% 40%);
}

/* ---- PRECISION PASS: desktop hero image geometry.
   Stretching the photograph across the whole hero and relying on a wash
   for legibility made several of them terminate awkwardly — the picture
   ran under the copy and then simply stopped at the viewport edge, which
   reads as a background texture rather than as a photograph.

   The image now occupies --hero-media-w (66% by default) from the
   opposite side to the copy and DISSOLVES rather than ends: the same
   two-axis mask the .bleed sections use, so the hero belongs to the same
   image language as the rest of the page instead of having its own. The
   width and the focal point are both per-page knobs, because forcing one
   crop on eight different photographs is what caused this. ---- */
@media (min-width: 1025px) {
  .page-hero__media {
    right: auto;
    left: 0;
    /* /hachzarim's 62% is the reference: wide enough for the subject,
       narrow enough that the copy owns its half */
    width: var(--hero-media-w, 62%);
  }

  .page-hero__media img {
    -webkit-mask-image:
      linear-gradient(var(--hero-fade, to right), #000 0%, #000 40%, rgba(0, 0, 0, .58) 68%, rgba(0, 0, 0, .14) 89%, transparent 100%),
      linear-gradient(to bottom, #000 0%, #000 68%, rgba(0, 0, 0, .5) 87%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(var(--hero-fade, to right), #000 0%, #000 40%, rgba(0, 0, 0, .58) 68%, rgba(0, 0, 0, .14) 89%, transparent 100%),
      linear-gradient(to bottom, #000 0%, #000 68%, rgba(0, 0, 0, .5) 87%, transparent 100%);
    mask-composite: intersect;
  }

  /* the mask now does most of the blending, so the wash only has to keep
     the copy legible over whatever is left of the photo under it */
  .page-hero::after {
    background:
      linear-gradient(258deg, rgba(245, 250, 254, .96) 8%, rgba(245, 250, 254, .86) 30%, rgba(245, 250, 254, .5) 52%, rgba(245, 250, 254, .12) 72%, transparent 86%),
      linear-gradient(to top, var(--page) 0, rgba(245, 250, 254, .7) 11%, rgba(245, 250, 254, 0) 42%);
  }

  /* mirror the PHOTOGRAPH only — never the copy, badges or the mark,
     which are not inside .page-hero__media */
  /* VISUAL LOCK — the mask is drawn in the image's own coordinates, so
     scaleX(-1) mirrors it along with the photo. Measured on all four
     flipped heroes: authored `to right`, on screen `to left` — the fade
     had moved to the outer viewport edge and the hard end of the picture
     faced the copy, which is exactly "you can see where the photo stops".
     Authoring the fade the opposite way cancels the mirror, so these four
     now dissolve toward the copy exactly like /hachzarim. */
  .page-hero--flip .page-hero__media img {
    transform: scaleX(-1);
    --hero-fade: to left;
  }
}

/* per-page focal points and image widths. One crop does not serve eight
   different photographs: these are chosen against the actual subject in
   each frame, not derived from a formula. */
/* Width now defaults to /hachzarim's 62% everywhere; only the focal
   point stays per page. The shorter box of a 1-line hero crops the
   photograph harder vertically, so those focal points sit higher to keep
   faces in frame rather than trimmed at the top. */
.page-hero[data-page='sherutenu']   { --hero-pos: 58% 26%; }
.page-hero[data-page='sieud']       { --hero-pos: 54% 32%; }
.page-hero[data-page='metapelet']   { --hero-pos: 56% 30%; }
.page-hero[data-page='achot']       { --hero-pos: 60% 30%; }
.page-hero[data-page='hachzarim']   { --hero-pos: 52% 46%; }
.page-hero[data-page='odot']        { --hero-pos: 58% 40%; }
.page-hero[data-page='drushim']     { --hero-pos: 55% 24%; }
.page-hero[data-page='tsor-kesher'] { --hero-pos: 46% 30%; }
.page-hero[data-page='article']     { --hero-pos: 55% 34%; }

/* ---- VISUAL LOCK: /sherutenu hero — the team in the Or-Tal heart.
   A deliberate exception to the wide-photograph heroes: this is the page
   that introduces all the services, so it gets the brand's own frame.
   Learned from the home page's #why-us image — heart clip, the two
   dashed rose rings, the same drop-shadow finish — by reusing the site's
   own .heart-frame component rather than copying that section. With no
   .page-hero__media the hero takes the tinted text-hero ground, which
   already resolves to --page for the wave below it. ---- */
.page-hero--heart .page-hero__heart {
  display: flex;
  justify-content: center;
}

.page-hero--heart .heart-frame {
  width: min(100%, 23rem);
  max-width: 23rem;
}

/* a 16:9 group photograph in a square heart: the crop is centred on the
   middle of the group, where the faces are, not on the frame's centre */
.page-hero--heart .heart-frame img { object-position: 46% 30%; }

.page-hero--heart .heart-frame__ring { stroke: var(--rose); }
.page-hero--heart .heart-frame__ring--accent { stroke: var(--rose); opacity: .5; }

@media (min-width: 1025px) {
  .page-hero--heart .page-hero__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(48px, 7vw, 120px);
  }

  /* RTL grid: column 1 is the right (reading start), 2 the left */
  .page-hero--heart .page-hero__copy { grid-column: 1; }
  .page-hero--heart .page-hero__heart { grid-column: 2; padding-inline-end: clamp(0px, 3vw, 48px); }
}

/* phone and tablet: the heart leads, then the copy — the brand image is
   the opening, as the photographic heroes' image band is */
@media (max-width: 1024px) {
  .page-hero--heart .page-hero__heart { order: -1; margin-bottom: var(--space-6); }
  .page-hero--heart .heart-frame { width: clamp(190px, 52vw, 280px); }
}

/* the image-band clearance the photographic heroes need on a phone does
   not apply — there is no band to clear */
@media (max-width: 640px) {
  .page-hero--heart .page-hero__inner { padding-block: var(--space-7) clamp(44px, 10vw, 64px); }
}

/* ---- VISUAL LOCK: list bullets carry meaning now, so they need room to
   be read. A 16px glyph was enough for a tick; a stethoscope or a
   clipboard at that size is a smudge. Same circle, same --ice ground,
   same stroke family as every other badge — one size up. Where the
   check genuinely IS the meaning (an inclusion list, a checklist of
   documents) it stays, at the same size, so every list is one family. */
main:has(.page-hero) .check-list .icon {
  width: 30px;
  height: 30px;
  margin-top: -1px;
  padding: 6px;
  stroke-width: 1.8;
}

main:has(.page-hero) .check-list li { gap: var(--space-3); }

/* ---- VISUAL LOCK: one rhythm for eyebrow → heading → lead → list → CTA.
   Measured with the scroll-reveal offsets neutralised, every inner
   content block, desktop / phone:
     eyebrow→heading   12 / 12   (the site-wide rule — kept)
     heading→lead      12 / 12   tight under a 2-line 40px heading
     lead→list          0 /  0   /sherutenu ×4: the list sat ON the lead,
                                 because there the list follows the lead
                                 directly instead of via .section__head,
                                 and nothing spaced that pair
     heading→list      32 / 24   (the service pages — already right)
     list→button       35 / 24   the phone value ran tighter than the
                                 desktop one around a heading that had
                                 just wrapped to two or three lines
   The fix states the relationships once, so a block reads the same
   whichever markup path it took. ---- */
main:has(.page-hero) :is(.bleed__content, .split__body, .section__head) h2 {
  text-wrap: balance;
}

main:has(.page-hero) :is(.bleed__content, .split__body, .section__head) > h2 + .lead {
  margin-top: 16px;
}

main:has(.page-hero) :is(.bleed__content, .split__body) > .lead + .check-list {
  margin-top: 32px;
}

main:has(.page-hero) .check-list + .btn-row {
  margin-top: 36px;
}

/* phone: the heading has usually wrapped by now, so the space around it
   grows rather than shrinking with the viewport */
@media (max-width: 640px) {
  main:has(.page-hero) :is(.bleed__content, .split__body, .section__head) > h2 + .lead { margin-top: 18px; }
  main:has(.page-hero) :is(.bleed__content, .split__body) > .lead + .check-list { margin-top: 24px; }
  main:has(.page-hero) .check-list + .btn-row { margin-top: 32px; }
}

/* the wash. Two layers, same idea as .hero::after on the home page:
   (1) a directional sweep out of the reading side so the copy always has
   a quiet ground under it, (2) a vertical resolve into --page at the
   bottom so the section ENDS on the colour the next section's
   .wave-cut--page is filled with. That second layer is what keeps the
   seam contract intact — see the wave-cut note further up this file. */
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* PRECISION ROUND — the wash is --page (245,250,254), NOT white.
     It used to be pure white, while the layer under it resolved the
     hero's bottom to --page for the wave-cut contract and the section
     after the wave is white again. Two near-whites stacked vertically:
     on the copy side you read white → a pale-blue band → white, which is
     the "line" between the hero and the next section. One colour for the
     whole hero leaves the wave's curve as the only edge. */
  background:
    linear-gradient(258deg, rgba(245, 250, 254, .985) 6%, rgba(245, 250, 254, .95) 25%, rgba(245, 250, 254, .74) 46%, rgba(245, 250, 254, .26) 64%, transparent 80%),
    linear-gradient(to top, var(--page) 0, rgba(245, 250, 254, .78) 13%, rgba(245, 250, 254, 0) 46%);
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  /* PRECISION ROUND — measured at 1440×900, EVERY inner hero was the
     same fixed 486px box (this floor). /hachzarim's copy (2-line title,
     2-line lead) filled 66% of it, which is why it read as the balanced
     one; the six pages with a 1-line title filled 47% and sat as a small
     block in a half-empty hero. A lower floor lets each hero hug its own
     copy with the same padding /hachzarim has, so the proportion carries
     across pages instead of the box size. */
  min-height: var(--hero-h, clamp(380px, 44vh, 480px));
  padding-block: clamp(var(--space-7), 5vw, var(--space-9)) clamp(var(--space-8), 6vw, var(--space-10));
}

.page-hero__copy { max-width: 40rem; }

.page-hero .eyebrow { color: var(--blue-700); }

/* an inner page's H1 is a signpost, not the site's opening statement.
   At the shared h1 scale (78px at 1440) a real page title like
   "החזר כספי מקופת החולים, בלי בירוקרטיה מיותרת" ran to three lines and
   left the lead and the CTAs fighting for what was left of the hero. */
.page-hero h1 {
  margin: 0 0 var(--space-4);
  color: var(--navy);
  font-size: clamp(1.95rem, 1.4rem + 2.35vw, 3.4rem);
  line-height: 1.12;
  text-wrap: balance;
}

.page-hero .lead {
  max-width: 36rem;
  color: var(--muted);
}

/* ---- PRECISION PASS: .btn-row was never a row.
   Its only declaration site-wide is `margin-top` — display stayed
   `block`. Every `gap`, `flex-direction` and `align-items` written
   against it (including in the previous pass) was inert, and the two
   stacked hero buttons on a phone were not merely tight: measured, they
   OVERLAPPED by 1px, because they were inline-level boxes on adjacent
   line boxes rather than flex items. Making it a real flex container is
   what actually delivers the spacing. Scoped to inner pages so the
   approved home page cannot be touched by the correction. ---- */
main:has(.page-hero) .btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* through a custom property, because this selector is (0,3,1) and
     would otherwise out-rank every per-context gap written against the
     plainer `.page-hero .btn-row` — a value, not a specificity fight */
  gap: var(--row-gap, var(--space-3));
}

.page-hero .btn-row {
  margin-top: var(--space-6);
  gap: var(--space-3);
}

/* the two hero CTAs were .btn-lg (20/38, 1.075rem) beside .btn-ghost
   (16/30, 1rem) — a 8px height difference and two type sizes sitting
   side by side. The home hero equalises them with exactly this rule;
   the inner heroes never got it. Same numbers, so a call button looks
   identical whichever page it is on. */
.page-hero .btn-lg,
.page-hero .btn-ghost {
  padding: 15px 32px;
  font-size: 1rem;
}

/* ---- PRECISION PASS: hero CTAs differ by device, on purpose.
   DESKTOP keeps one call to action — WhatsApp. Two competing buttons in
   an inner hero split the intent, and on a desktop a phone number is
   something you read, not something you tap; the header already carries
   a call button. The remaining button therefore has to CARRY the hero,
   so it takes the primary treatment even though its markup class is
   ghost — the markup keeps phone-first because that is the right
   hierarchy on a phone, and only the presentation changes here.
   MOBILE keeps both, because tapping either one actually starts the
   conversation, and gets real room around them. ---- */
@media (min-width: 1025px) {
  .page-hero .btn-row .btn[data-contact='phone'] { display: none; }

  /* whatever single button survives — WhatsApp on the contact heroes,
     "בדקו זכאות" on /hachzarim, "הגישו מועמדות" on /drushim — carries the
     same weight, so a hero CTA looks the same wherever you land */
  .page-hero .btn-row .btn { padding: 17px 36px; }

  .page-hero .btn-row .btn[data-contact='whatsapp'] {
    background: var(--cta);
    color: var(--white);
    box-shadow: var(--sh-cta);
    backdrop-filter: none;
  }

  .page-hero .btn-row .btn[data-contact='whatsapp']:hover {
    background: var(--cta-hover);
    transform: translateY(-2px);
    box-shadow: var(--sh-cta-hi);
  }
}

/* brand DNA. Same treatment as .hero__mark on the home page (rose, ~8%,
   rotated, slightly blurred so it reads as ground, never as an icon) —
   anchored to the reading side where the wash is strongest, so it reads
   as a watermark under the copy instead of a shape cut into the photo.
   Physical right/left, never inset-inline-*: RTL resolves those the
   opposite way and this has to land on a specific visual side. */
.page-hero__mark {
  position: absolute;
  z-index: -1;
  top: -14%;
  right: -5%;
  bottom: auto;
  left: auto;
  width: min(30rem, 38%);
  fill: var(--rose);
  opacity: .1;
  transform: rotate(-8deg);
  filter: blur(1.5px);
  pointer-events: none;
}

/* the old markup's right-hand column spacer. The photo is behind the
   whole section now, so it has nothing to hold open. */
.page-hero__spacer { display: none; }

/* tablet: the copy column has to give the photograph somewhere to be
   seen, otherwise a 40rem measure eats the whole width and the image is
   only ever a texture behind text */
@media (max-width: 1024px) {
  .page-hero__copy { max-width: 32rem; }
  .page-hero .lead { max-width: 30rem; }
}

/* phone: the same top image band the home hero uses at this width —
   a defined photographic opening that dissolves into the copy, rather
   than a wash over a photo nobody can see behind the text */
@media (max-width: 640px) {
  .page-hero__media {
    inset: 0 0 auto 0;
    height: var(--hero-band, clamp(196px, 29dvh, 280px));
  }

  /* mask the IMG, not the container: .page-hero__media carries
     z-index:-2 inside .page-hero's isolated stacking context, and a mask
     there makes the whole photo disappear at some widths — a real
     mask/negative-z-index/isolation interaction already hit once on the
     home hero. */
  .page-hero__media img {
    -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
  }

  .page-hero::after {
    background: linear-gradient(to bottom,
      rgba(255, 255, 255, .04) 0,
      rgba(255, 255, 255, .14) 14dvh,
      rgba(255, 255, 255, .52) 20dvh,
      rgba(255, 255, 255, .86) 25dvh,
      var(--page) 31dvh,
      var(--page) 100%);
  }

  .page-hero__inner {
    min-height: 0;
    padding-block: clamp(126px, 24dvh, 202px) clamp(40px, 9vw, 60px);
  }

  .page-hero__copy { max-width: none; }
  .page-hero .lead { max-width: none; }

  .page-hero__mark {
    top: 7dvh;
    right: auto;
    left: 2%;
    width: 26%;
    opacity: .15;
    filter: none;
  }

  /* match the home hero's stacked, full-width CTA treatment rather than
     letting the two buttons size to their own text and sit ragged.
     The pair sat tight against each other and against the copy above;
     both buttons now carry identical padding so neither reads as the
     heavier object, and the whole group starts lower in the hero. */
  .page-hero .btn-row {
    flex-direction: column;
    align-items: stretch;
    --row-gap: var(--space-4);
    margin-top: var(--space-7);
  }

  .page-hero .btn-row .btn {
    width: 100%;
    padding: 17px 28px;
    font-size: 1rem;
  }

  .page-hero__inner { padding-block-end: clamp(52px, 11vw, 76px); }
}

/* ---- prose: long-form body copy (legal pages, article bodies).
   Measured column, generous rhythm, links that read as links. ---- */
.prose {
  max-width: 44rem;
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.75;
}

/* the reading column is centred in its container. Left at the container's
   reading edge it sat hard against the right of a 1400px screen with
   400px of nothing beside it — a measured column that looks like a
   layout accident. Centring is also what makes the article's inline CTA
   and its related strip share an axis with the text. */
.prose { margin-inline: auto; }

.prose > * + * { margin-top: var(--space-5); }

/* a legal page that opens on <h2> was inheriting the 64px inter-section
   margin as a TOP margin, so /takanon started 40px lower than /nagishut
   (which opens on a paragraph) for no reason a reader could see */
.prose > :first-child { margin-top: 0; }

/* article headings are not section headings. At the shared h2/h3 scale
   every "1. יש צורך במתן תרופות שדורש מעקב" broke to two lines inside a
   44rem measure, which reads as five sub-sections rather than as steps
   through one argument. */
.prose h2 {
  margin-top: var(--space-8);
  margin-bottom: 0;
  font-size: clamp(1.35rem, 1.12rem + .82vw, 1.78rem);
  line-height: 1.25;
}

.prose h3 {
  margin-top: var(--space-6);
  margin-bottom: 0;
  font-size: clamp(1.12rem, 1.02rem + .38rem, 1.28rem);
  line-height: 1.32;
}
.prose h2 + *, .prose h3 + * { margin-top: var(--space-3); }
.prose ul, .prose ol { padding-inline-start: var(--space-5); }
.prose li + li { margin-top: var(--space-2); }
.prose a { color: var(--blue-700); text-underline-offset: 3px; }
.prose strong { color: var(--navy); }

.prose__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0 0 var(--space-6);
  color: var(--muted);
  font-size: var(--fs-sm);
}

.prose__meta span { display: inline-flex; align-items: center; gap: var(--space-2); }
.prose__meta .icon { width: 16px; height: 16px; color: var(--blue); }

/* ---- feature-row: the "what characterises this service" strip.
   Same visual family as the home page's .why-row, but a standalone
   list that can carry a description line per item. ---- */
.feature-row {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.feature-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.feature-item h3 { margin: 0 0 var(--space-1); font-size: var(--fs-h4); }
.feature-item p { margin: 0; color: var(--muted); }

/* ---- check-list: "what the service includes" ---- */
.check-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  line-height: 1.6;
}

.check-list .icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  padding: 3px;
  border-radius: 50%;
  background: var(--ice);
  color: var(--blue-700);
}

/* ---- step-list: numbered process (how the refund works) ---- */
.step-list {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.step-item {
  position: relative;
  counter-increment: step;
  padding: var(--space-6);
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: var(--sh-sm);
}

.step-item::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-weight: 800;
  font-size: 1.05rem;
}

.step-item h3 { margin: 0 0 var(--space-2); font-size: var(--fs-h4); }
.step-item p { margin: 0; color: var(--muted); }

/* ---- media-note: supporting image inside a content section ---- */
.media-note {
  margin: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-md);
}

.media-note img { display: block; width: 100%; height: auto; }

/* ---- pending: an area whose behaviour is not wired yet. Visible to
   the team, never to a visitor as an error — the UI around it is
   real and final, only the logic is outstanding. ---- */
[data-pending] { position: relative; }

/* ---- eligibility calculator (/hachzarim #calculator).
   UI only. The business logic — which fund/service combination
   yields what — has not been supplied, so the markup is built to
   receive it and nothing is invented: the panel carries
   data-pending="calculator-logic" and the result copy is the
   deliberately soft wording from the content spec. ---- */
.calc {
  max-width: 48rem;
  margin-inline: auto;
  padding: clamp(var(--space-6), 5vw, var(--space-8));
  border-radius: var(--r-panel);
  background: var(--white);
  box-shadow: var(--sh-md);
}

.calc__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.calc__submit { margin-top: var(--space-5); width: 100%; }

.calc__result {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--r-soft);
  background: var(--ice);
  color: var(--navy);
}

.calc__result p { margin: 0 0 var(--space-4); }
.calc__result p:last-child { margin-bottom: 0; }
.calc__result[hidden] { display: none; }

/* ---- insurer strip: the four health-fund logos ---- */
.insurer-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(var(--space-5), 5vw, var(--space-8));
  margin: 0;
  padding: 0;
  list-style: none;
}

.insurer-strip img {
  display: block;
  width: auto;
  height: clamp(28px, 6vw, 40px);
  opacity: .85;
}

/* ---- job cards (/drushim) ---- */
.job-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: var(--sh-sm);
}

.job-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.job-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.job-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--space-3);
  padding: var(--space-6);
}

.job-card__body h3 { margin: 0; font-size: var(--fs-h4); }
.job-card__body p { margin: 0; color: var(--muted); }

.job-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
}

.job-card__actions .btn { flex: 1 1 auto; justify-content: center; }

/* ---- contact details panel (/tsor-kesher) ---- */
.contact-details {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  border-radius: var(--r-card);
  background: var(--ice);
  list-style: none;
}

.contact-details li { display: flex; gap: var(--space-4); align-items: flex-start; }
.contact-details dt, .contact-details__label { display: block; font-weight: 700; color: var(--navy); }
.contact-details a { color: var(--blue-700); }
.contact-details .icon-badge { flex: none; }
.contact-details__text { min-width: 0; }
.contact-details__text span { display: block; color: var(--muted); word-break: break-word; }

/* ---- text-only page hero (blog index, legal pages).
   No photograph, so the wash has nothing to wash over: the section
   carries its own quiet tint instead, resolving into --page for the
   wave-cut contract exactly as the photographic hero does. Selected by
   the ABSENCE of a media element rather than a modifier class, so a
   page cannot get one without the other. It also runs shorter — a
   legal page's opening should not claim half a screen.

   The old rule added a full --header-h of top padding here. The header
   is position:sticky and therefore IN FLOW, so that was clearance for
   an overlap that does not happen — pure dead space at the top of five
   pages. ---- */
.page-hero:not(:has(.page-hero__media)) {
  background: linear-gradient(180deg, var(--sky-100) 0%, var(--page) 76%);
}

.page-hero:not(:has(.page-hero__media))::after { content: none; }

.page-hero__inner--text {
  min-height: var(--hero-h, clamp(210px, 24vh, 310px));
  padding-block: clamp(var(--space-7), 5vw, var(--space-9));
}

/* with no photograph in front of it the watermark can carry more of the
   section, so it is placed and weighted as the page's own artwork */
.page-hero:not(:has(.page-hero__media)) .page-hero__mark {
  top: auto;
  bottom: -42%;
  right: -4%;
  width: min(26rem, 34%);
  opacity: .06;
}

@media (max-width: 640px) {
  .page-hero__inner--text { padding-block: clamp(var(--space-6), 8vw, var(--space-8)); }
  .page-hero:not(:has(.page-hero__media)) .page-hero__mark {
    bottom: -30%;
    right: -14%;
    left: auto;
    width: 46%;
    opacity: .07;
  }
}

/* ---- QA pass: inner-page section rhythm.
   The inner pages were inheriting the raw --section-y default
   (72px mobile / 129.6px at 1440) while the approved home page
   overrides every one of its own sections to a tighter scale
   (#why-us 64/100.8, #closing-cta 36/51.84). The result was inner
   pages reading ~30% airier than the benchmark. These two rules put
   them on exactly the home page's numbers at both ends of the range.
   Scoped through :has(.page-hero) — a marker only inner pages carry,
   verified zero occurrences on index.html — so the home page cannot
   be touched. If :has() is unsupported the pages simply keep the old,
   larger padding: looser, never broken. ---- */
main:has(.page-hero) .section {
  padding-block: clamp(64px, 7vw, 112px);
}

main:has(.page-hero) .section--tight {
  padding-block: clamp(36px, 3.6vw, 56px);
}

/* ---- ART-DIRECTION PASS: image + copy sections now use the site's own
   .bleed system instead of a card-sized photo inside a grid column.

   The old treatment put a ~460px picture in one half of .container and
   the copy in the other, both vertically centred inside a section whose
   height came from whichever column happened to be taller. In practice
   the copy was always taller, so every one of these sections rendered as
   a small floating photograph with 150px of empty space above and below
   it — the "image too small / dead space / content sitting too high"
   complaint, and it was the same complaint on six different pages
   because it was one shared cause.

   .bleed is what the approved home page already uses for exactly this
   pattern (#services, #about-teaser, #contact-form, #faq): the photo is a
   62%-viewport-wide layer behind the section with masked edges that
   dissolve into the background before they reach the text, and the
   section gets a designed height of its own (--bleed-h) that the copy
   sits centred inside. Nothing new is invented here — the inner pages
   simply join the system.

   The one rule that has to be restated: .section.bleed{padding-block:0}
   is (0,2,0) and loses to the inner-page rhythm rule above at (0,2,1),
   so a bleed section on an inner page would otherwise keep section
   padding on top of --bleed-h and grow ~200px taller than intended. ---- */
main:has(.page-hero) .section.bleed {
  padding-block: 0;
  --bleed-h: clamp(420px, 60vh, 580px);
}

/* the wave-cut sits over the top of the section, so the copy has to start
   below it or it reads as "pushed into the wave" — the same clearance the
   home page's bleed sections get from their own larger padding.
   Only where a wave actually exists: /hachzarim's "what to prepare"
   follows another white section with no wave between them, and giving it
   the clearance anyway put 133px of nothing above the heading. */
main:has(.page-hero) .section.bleed .bleed__inner {
  padding-block: clamp(var(--space-7), 5vw, var(--space-9));
}

main:has(.page-hero) .section.bleed:has(> .wave-cut) .bleed__inner {
  padding-block-start: calc(var(--finish-h) * .8 + var(--space-6));
}

/* a note under a list is a new thought, not the list's last line */
main:has(.page-hero) .check-list + p { margin-top: var(--space-5); }

/* ---- PRECISION PASS: the bleed photograph and the finish above it.
   The image is inset:0 in its section, so its top edge starts directly
   under the wave. The shared mask fades it in over the top 21% — about
   105px on a 500px section — while the wave itself is 129.6px tall. The
   picture therefore reached full strength ABOVE the point where the
   curve ends, and the curve's own edge cut across a fully-opaque photo:
   the visible join on /odot's team section, and the same on every other
   waved bleed section.

   Completing the fade below the wave instead lets the photograph emerge
   from under the curve rather than meet it. --fade-x is reused so each
   section keeps the horizontal direction it already had. ---- */
main:has(.page-hero) .section.bleed:has(> .wave-cut) .bleed__media img {
  -webkit-mask-image:
    linear-gradient(var(--fade-x), #000 0%, #000 44%, rgba(0, 0, 0, .55) 72%, rgba(0, 0, 0, .12) 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .28) 14%, rgba(0, 0, 0, .78) 26%, #000 36%, #000 82%, rgba(0, 0, 0, .45) 93%, transparent 100%);
  mask-image:
    linear-gradient(var(--fade-x), #000 0%, #000 44%, rgba(0, 0, 0, .55) 72%, rgba(0, 0, 0, .12) 92%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .28) 14%, rgba(0, 0, 0, .78) 26%, #000 36%, #000 82%, rgba(0, 0, 0, .45) 93%, transparent 100%);
}

/* and a little more of the frame: at 62% these photographs were reading
   as support for the copy rather than as half of the composition */
@media (min-width: 1025px) {
  main:has(.page-hero) .bleed--left .bleed__media { width: min(66%, 1020px); }
  main:has(.page-hero) .bleed--right .bleed__media { width: min(64%, 980px); }

  /* PRECISION ROUND — /sherutenu, "שירותי סיעוד" and "אחות פרטית":
     the photograph is mirrored so its subject turns toward the copy.
     Desktop only, like the hero flips: stacked on a phone there is no
     copy beside the picture to face. The mask is authored in the image's
     own coordinates, so mirroring the image mirrors the mask too — the
     fade direction is flipped with it, or the dissolve would land on the
     outer edge and the hard edge against the text. */
  main:has(.page-hero) .bleed--mirror .bleed__media img { transform: scaleX(-1); }
  main:has(.page-hero) .bleed--left.bleed--mirror .bleed__media img { --fade-x: to left; }
  main:has(.page-hero) .bleed--right.bleed--mirror .bleed__media img { --fade-x: to right; }

  /* VISUAL LOCK — the strip at the end of the two mirrored photographs.
     Not a rendering gap (a magenta ground behind them showed no unpainted
     column anywhere) — it is the photographs' own content. Mirroring put
     each photo's ORIGINAL left edge where the dissolve ends: a window
     frame and a chair corner in "שירותי סיעוד", a red object and a table
     edge in "אחות פרטית". The fade is still 12% opaque at 92% of the box,
     so those hard verticals survived as a faint strip against the white.
     Two changes, direction untouched:
     1. object-position 100% crops the ORIGINAL left side — which is the
        side that lands in the fade once mirrored — so that edge content
        falls outside the box;
     2. these two fades reach full transparency at 92% instead of 100%,
        so nothing hard can sit in the last stretch of the dissolve.
     Specificity has to beat the waved-bleed mask rule, (0,5,2). */
  main:has(.page-hero) .section.bleed.bleed--mirror:has(> .wave-cut) .bleed__media img {
    object-position: 100% 50%;
    -webkit-mask-image:
      linear-gradient(var(--fade-x), #000 0%, #000 40%, rgba(0, 0, 0, .5) 64%, rgba(0, 0, 0, .12) 82%, transparent 92%),
      linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .28) 14%, rgba(0, 0, 0, .78) 26%, #000 36%, #000 82%, rgba(0, 0, 0, .45) 93%, transparent 100%);
    mask-image:
      linear-gradient(var(--fade-x), #000 0%, #000 40%, rgba(0, 0, 0, .5) 64%, rgba(0, 0, 0, .12) 82%, transparent 92%),
      linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .28) 14%, rgba(0, 0, 0, .78) 26%, #000 36%, #000 82%, rgba(0, 0, 0, .45) 93%, transparent 100%);
  }
}

/* tablet: the stacked bleed image is authored 4:3, which at 768px wide
   is a 576px-tall photograph before a single word of the section is
   read. On the home page that happens twice; on /sherutenu it happens
   four times in a row and the page becomes a slideshow. Held to 16:9
   here — still a full-width photograph, not a strip. The home page keeps
   its own approved 4:3 because this is scoped to inner pages. */
@media (min-width: 641px) and (max-width: 1024px) {
  main:has(.page-hero) .bleed__media img { aspect-ratio: 16 / 9; }
}

/* ---- ART-DIRECTION PASS: how every page ENDS. One shared cause, one
   shared fix — not a patch per page.

   The footer opens with .site-footer__wave, whose path is filled --page
   (#f5fafe). The approved home page therefore ends on a section whose
   background is also --page (#closing-cta), and the join is invisible:
   the colour change happens along the wave curve, which is the whole
   point of this site's finish system.

   Every inner page instead ended on .section--white (#ffffff). A white
   section meeting a --page-filled wave paints a flat horizontal step
   across the full width, one pixel row high, immediately above the
   curve — the "background mismatch / horizontal seam" seen on all of
   them. The two article pages ended on .section--soft (--sky-50), which
   is the same colour as --page and is why they alone looked correct;
   that coincidence is what made this look like a per-page problem.

   Selecting the last section rather than an id means a page cannot be
   added later without inheriting the correct ending. Specificity is
   (0,2,1) so it beats .section--white (0,1,0) without !important. ---- */
main > .section:last-child {
  background: var(--page);
}

/* the closing panel's own shadow reaches ~60px past its box; the home
   page's ending has the same panel and the same clearance, so this is
   matched to it rather than invented */
main:has(.page-hero) > .section:last-child {
  padding-bottom: clamp(36px, 3.6vw, 56px);
}

/* ---- VISUAL LOCK: the line above the footer, found and measured.
   The closing panel casts `0 34px 80px` — a shadow that reaches 114px
   below the panel — but the panel sits only 23.8px above the footer on
   desktop (16px on a phone). So the shadow's grey spilled across the
   section's last strip and was then CUT in a dead-straight horizontal
   line where the footer paints over it: that cut is the line.
   It was not page-specific. The closing geometry is byte-identical on
   every page (last section 480.75px, same padding, same wave, same
   23.8px gap); /sherutenu and /blog carry exactly the same cut. What
   differed is only where the join falls between device pixels — which
   depends on how tall each page is above it — so the same line read
   sharper on some pages than others. The forms that end /drushim and
   /tsor-kesher had the same defect (`0 26px 64px`, reach 90px).
   The rule is structural: a panel in a page's LAST section may not cast
   past its own gap. Both shadows keep their lift, but end inside it
   (reach 14px — under the 16px phone gap). ---- */
main:has(.page-hero) > .section:last-child .cta-block {
  box-shadow: 0 2px 4px rgba(6, 20, 36, .06), 0 4px 10px rgba(6, 20, 36, .12);
}

main:has(.page-hero) > .section:last-child .contact-form {
  box-shadow: inset 0 0 0 1.5px var(--sky-300), 0 2px 4px rgba(6, 20, 36, .04), 0 4px 10px rgba(6, 20, 36, .1);
}

/* ---- ART-DIRECTION PASS: icon badges, one system for every inner page.
   The badges were the base .icon-badge (54px, 18px-radius square, 25px
   icon at the global stroke-width of 1.9) while the approved home page's
   own featured badges are circles — 58px with a 27px icon at 1.7 — so
   the same idea was drawn two different ways depending which page you
   were on. Rather than invent a third spec, the inner pages simply adopt
   the home page's: identical dimensions, icon scale, stroke weight,
   ring, gradient and hover lift, so a badge is a badge everywhere. ---- */
main:has(.page-hero) .icon-badge {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--white), var(--sky-100));
  box-shadow: inset 0 0 0 1px rgba(149, 207, 253, .55), var(--sh-xs);
  color: var(--blue-700);
}

main:has(.page-hero) .icon-badge .icon {
  width: 27px;
  height: 27px;
  stroke-width: 1.7;
}

/* ---- ART-DIRECTION PASS: the numbered process ("איך זה עובד").
   Was a plain white card with a 40px solid blue disc at the top — the
   disc read as a UI control rather than as a step, and three of them in
   a row looked like a settings screen. The number is now large and
   quiet, set in the section's own tint behind the copy, and the card
   carries a brand rule along its reading edge. Depth comes from a
   hairline ring plus one soft shadow, not from glass or blur: this is a
   healthcare page, and a trendy surface would date it. ---- */
.step-item {
  overflow: hidden;
  padding: clamp(var(--space-6), 3vw, var(--space-7));
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-sm);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

/* physical left: in RTL the reading edge is the right, so the numeral
   belongs on the far side where it cannot sit under the first word */
.step-item::before {
  content: counter(step);
  position: absolute;
  z-index: 0;
  top: -.18em;
  left: .06em;
  right: auto;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
  background: none;
  color: var(--sky-100);
  font-size: clamp(5.5rem, 8vw, 7.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  pointer-events: none;
}

.step-item::after {
  content: '';
  position: absolute;
  inset-block: clamp(var(--space-5), 3vw, var(--space-6));
  inset-inline-start: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(to bottom, var(--blue) 0%, var(--sky-300) 100%);
}

.step-item h3,
.step-item p { position: relative; z-index: 1; }

.step-item h3 { margin-bottom: var(--space-3); }

.step-item:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--sky-300), var(--sh-md);
}

/* ---- ART-DIRECTION PASS: the eligibility check.
   Flow is fund → days → service → result, per the Or-Tal brief. Still no
   business logic: what a given combination is worth has not been
   supplied and is not guessed. What changed is the interface around it —
   a real progress track instead of a line of text, options that read as
   a set of equal choices, and a result that shows the reader their own
   answers back before it asks for their number. ---- */
.calc__progress {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 clamp(var(--space-6), 3vw, var(--space-7));
}

.calc__progress[hidden] { display: none; }

.calc__progress-label {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.calc__progress-track {
  display: block;
  height: 6px;
  border-radius: 6px;
  background: var(--sky-100);
  overflow: hidden;
}

.calc__progress-bar {
  display: block;
  width: 33%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(to left, var(--blue) 0%, var(--blue-400) 100%);
  transition: width 480ms cubic-bezier(.33, 1, .68, 1);
}

.calc__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}

.calc__back .icon { width: 16px; height: 16px; }
.calc__back:hover { color: var(--blue); }

/* ---- PRECISION PASS: the wizard should not look like a box inside a
   box. The result panel was a tinted --ice card sitting inside the white
   .calc card, and the answer summary was a third white card inside that.
   Three nested surfaces for one thought. The result now shares the
   card's own ground and is separated by a rule and space instead of by
   another background; the summary is a bordered list, not a panel. ---- */
.calc__result {
  margin-top: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  text-align: start;
}

.calc__result-mark {
  display: block;
  width: 40px;
  height: auto;
  margin-bottom: var(--space-4);
  fill: var(--rose);
  opacity: .92;
  transform: rotate(-6deg);
}

.calc__result-title {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.12rem, 1rem + .6vw, 1.36rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--navy);
}

/* the answers, read back — a receipt of what was asked, not a form */
.calc__summary {
  display: grid;
  margin: 0 0 var(--space-5);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-soft);
  list-style: none;
  font-size: var(--fs-sm);
}

.calc__summary li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
}

.calc__summary li + li { border-top: 1px solid var(--line); }
.calc__summary span { color: var(--muted); }
.calc__summary strong { color: var(--navy); text-align: end; }

/* Scoped through .calc__result on purpose: the pre-existing
   `.calc__result p { margin: 0 0 var(--space-4) }` is (0,2,0) and was
   silently winning over a plain class here, which is why the supporting
   line kept rendering 6px under the submit button no matter what margin
   it was given — it read as part of the button rather than as an
   alternative to it. */
.calc__result .calc__aside {
  margin: var(--space-6) 0 0;
  color: var(--muted);
  text-align: center;
}

.calc__result .calc__restart {
  margin: var(--space-7) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  text-align: center;
}

/* ---- PRECISION PASS: fund choice carries the fund's own logo.
   Recognising your own health fund's mark is faster than reading four
   names, and it is what makes this feel like a real eligibility check
   rather than a styled radio group. Logos are sized per-mark, NOT to a
   common height: the four differ in aspect ratio from 2.44:1 (Maccabi)
   to 4.02:1 (Leumit), so equal height is exactly what made some of them
   read heavier than others. ---- */
.calc__options--fund { gap: var(--space-3); }

.calc__opt--fund {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 104px;
  padding: var(--space-4) var(--space-3);
}

/* the logo IS the name — printing "מכבי" under the Maccabi wordmark said
   the same thing twice. The label stays in the accessibility tree so the
   button still announces which fund it selects. */
.calc__opt--fund > span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.calc__opt--unsure > span {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.calc__opt-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: 26px;
  transition: filter var(--t-fast) var(--ease);
}

[data-fund='maccabi']  .calc__opt-logo, [data-fund='maccabi']  img { height: 25px; }
[data-fund='clalit']   .calc__opt-logo, [data-fund='clalit']   img { height: 27px; }
/* Meuhedet up from 23px: its mark is a compact wordmark with a small
   symbol and internal padding in the file, so at the others' height it
   read as the least important fund of the four */
[data-fund='meuhedet'] .calc__opt-logo, [data-fund='meuhedet'] img { height: 28px; }
[data-fund='leumit']   .calc__opt-logo, [data-fund='leumit']   img { height: 28px; }

/* on the filled state the ground goes brand blue, so a full-colour mark
   would fight it — knocked out to white instead */
.calc__opt--fund[aria-pressed='true'] .calc__opt-logo { filter: brightness(0) invert(1); }

.calc__opt--unsure .icon { width: 26px; height: 26px; color: var(--blue-700); }
.calc__opt--unsure[aria-pressed='true'] .icon { color: inherit; }

/* four options read as a 2×2 block, not as a 3 + 1 orphan */
@media (min-width: 641px) {
  .calc__options--pair .calc__opt { flex-basis: calc((100% - var(--space-3)) / 2); }
}


#calculator { padding-bottom: clamp(40px, 4.2vw, 68px); }

/* ---- ART-DIRECTION PASS: statement blocks.
   These carry a single sentence of company philosophy (metapelet "how we
   choose", achot "our training", odot "our values"). The previous pass
   put that sentence in a tinted rounded panel with a heart watermark,
   which solved the empty-space problem but produced exactly what it
   looks like: a generic card dropped in to fill a section.

   Re-art-directed as an editorial beat rather than a component. There is
   no box any more — the block is held by a brand rule on the reading
   side and signed with the heart at its head, the sentence is set at
   statement scale, and the BLOCK is centred in the section while the
   TEXT stays left-ragged and naturally RTL, because a centred paragraph
   of Hebrew prose is harder to read and reads as a slide, not a page. ---- */
.statement {
  position: relative;
  max-width: 44rem;
  margin-inline: auto;
  padding-inline-start: clamp(var(--space-5), 3.5vw, var(--space-7));
  text-align: start;
}

/* the rule genuinely should mirror with the text direction — it marks
   the reading edge — so a logical property is correct here, unlike the
   decorative marks elsewhere in this file that must hold a fixed side */
.statement::before {
  content: '';
  position: absolute;
  inset-block: 4px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(to bottom, var(--rose) 0%, var(--blue-400) 46%, rgba(124, 192, 234, 0) 100%);
}

.statement .section__head {
  max-width: none;
  margin: 0;
  text-align: start;
}

.statement .lead {
  margin-inline: 0;
  font-size: clamp(1.05rem, 1rem + .42vw, 1.28rem);
  line-height: 1.62;
  color: var(--navy);
}

/* the heart stops being a watermark hiding behind the text and becomes
   the block's signature — small, solid, deliberately tilted, the same
   glyph the logo uses */
.statement__mark {
  position: static;
  display: block;
  width: 38px;
  height: auto;
  margin-bottom: var(--space-4);
  fill: var(--rose);
  opacity: .92;
  transform: rotate(-6deg);
  pointer-events: none;
}

/* ---- ART-DIRECTION PASS: FAQ heading on inner pages.
   The heading and its eyebrow now centre over the list, which is what
   gives the section a deliberate axis; the questions and answers keep
   their natural RTL left-ragged setting, because centring body copy is
   what makes a FAQ hard to scan. ---- */
main:has(.page-hero) #faq .section__head {
  margin-inline: auto;
  text-align: center;
}

/* ---- ART-DIRECTION PASS: content must never be under the finish.
   .wave-cut is position:absolute at z-index 1 across the top of its
   section, and --finish-h is clamp(64px, 9vw, 148px) — 129.6px at
   1440 — while an inner section's top padding is 112px. So the curve
   was painting OVER the first ~18px of content on every inner page: the
   eyebrow of a section heading, the top of a form, the first row of a
   card. The home page already solves this for its own closing section
   with exactly this rule; here it is applied to the whole inner-page
   layer so no page can be added without it. ---- */
main:has(.page-hero) .section > .container {
  position: relative;
  z-index: 2;
}

/* ---- PRECISION PASS: clearance under the finish.
   Measured on the article page: the wave box ends 129px below the
   section's top edge and the first paragraph of prose began at exactly
   129px — zero clearance, so the copy sat on the curve. The same
   arithmetic applied to the blog grid, the careers form and the contact
   cards, which is why the same complaint came back on four pages.
   Sections carrying a finish now start clear of it. Sections without one
   keep the tighter rhythm, so this buys clearance where it is needed
   without making the whole site airier. ---- */
main:has(.page-hero) .section:not(.bleed):not(.section--tight):has(> .wave-cut) {
  padding-top: calc(var(--finish-h) + clamp(28px, 2.8vw, 48px));
}

/* and a little more air under the curve before the FAQ's centred
   heading, which sits at the section's horizontal middle — the deepest
   part of the wave */
main:has(.page-hero) #faq {
  padding-top: clamp(76px, 8vw, 132px);
}

/* ---- ART-DIRECTION PASS: the blog as a knowledge centre.
   The index reused the home page's marketing .card at three-to-a-row
   inside a 1112px container. With two articles published, auto-fit
   stretched each card to ~540px: two enormous tiles, a 16:9 photo the
   width of a hero, a heading at section scale, and a line above them
   announcing "showing 2 of 2 articles". It read as a page apologising
   for being short rather than as a publication.

   The grid now sizes the CARD, not the row: tracks are held between
   17rem and 22rem and the set is centred, so two articles make a
   deliberate pair, three fill a row, and six fill two rows without the
   page changing character at any of those counts. Cards carry a
   category chip and a date, a 3:2 image (an editorial ratio, not a
   hero's), a title at card scale, and an excerpt. ---- */
.post-grid {
  display: grid;
  gap: clamp(var(--space-5), 3vw, var(--space-7));
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 22rem));
}

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.post-card[hidden] { display: none; }

.post-card__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--sky-100);
}

.post-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.post-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: clamp(var(--space-4), 2.4vw, var(--space-5));
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-xs);
}

.post-card__title {
  margin: 0;
  font-size: clamp(1.06rem, 1rem + .32vw, 1.2rem);
  line-height: 1.3;
  color: var(--navy);
  text-wrap: balance;
}

.post-card__title a { color: inherit; text-decoration: none; }

.post-card__excerpt {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.post-card .link-arrow { margin-top: auto; }

/* one hover/focus behaviour for the whole card, driven by the real link
   inside it so keyboard focus gets the same affordance as a mouse */
.post-card:has(a:hover),
.post-card:has(a:focus-visible) {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
}

.post-card:has(a:hover) .post-card__media img,
.post-card:has(a:focus-visible) .post-card__media img { transform: scale(1.045); }

.post-card:has(a:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }
.post-card a:focus-visible { outline: none; }

/* related articles: the same object, deliberately smaller and without an
   excerpt, so it reads as a footnote to the article being read rather
   than as a second index competing with it */
.post-grid--sm { grid-template-columns: repeat(auto-fit, minmax(14rem, 18rem)); }
.post-grid--sm .post-card__media { aspect-ratio: 16 / 9; }
.post-grid--sm .post-card__title { font-size: 1rem; }

.blog-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(var(--space-6), 4vw, var(--space-8));
}

/* a single article's index card stays at its natural size instead of
   stretching to fill the row it is alone in */
@media (max-width: 640px) {
  .post-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- QA pass: an article's closing CTA was spanning the full
   container (1112px) beneath a 704px reading column, so the two
   shared a right edge but diverged by 400px on the left. Holding it
   to the prose measure keeps the article one coherent column. ---- */
article .cta-block,
article .article-cta {
  max-width: 44rem;
  margin-inline: auto;
}

/* ---- QA/reference pass: eligibility calculator, step architecture.
   Rebuilt on the structure proven in the sister Orian project: discrete
   steps, large option BUTTONS rather than <select> (far better on a
   phone, and each option is a real target with aria-pressed), a result
   region that is announced, and a lead-capture step that carries the
   answers as hidden fields so the conversation starts with context.
   Only the shell lives here. Or-Tal's own content spec calls for a soft
   result ("ייתכן שתהיו זכאים"), not a computed figure, and the per-fund
   rules have not been supplied — so nothing is calculated and nothing is
   invented. See [data-pending="calculator-logic"]. ---- */
.calc__step + .calc__step { margin-top: var(--space-6); }
.calc__step[hidden] { display: none; }

.calc__q {
  margin: 0 0 var(--space-4);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--navy);
}

/* every option is exactly one third of the row and does NOT grow: with
   flex:1 1 auto the final line stretched to fill, so "לא בטוח/ה" came out
   twice the width of "מכבי" and five equal choices read as ragged. A
   fixed third also keeps a 5-option step at 3+2 instead of 4+1, which is
   what a grid's auto-fit gives you as the panel widens. */
.calc__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.calc__opt {
  flex: 0 1 calc((100% - var(--space-3) * 2) / 3);
  min-width: 8rem;
  padding: var(--space-4) var(--space-5);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-soft);
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.calc__opt:hover { border-color: var(--blue); background: var(--ice); }
.calc__opt:active { transform: scale(.98); }

.calc__opt[aria-pressed='true'] {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}

/* Phone. Two things had to change together: the thirds basis leaves
   ~85px per option inside a 256px panel, which `min-width: 8rem` then
   overrides to 128 — and two 128s plus the gap no longer fit, so the
   funds collapsed to ONE per row with a half-width gutter beside them.
   Halves plus smaller marks keep them 2-up at 360px, the narrowest case.

   This lives HERE, after the base .calc__opt, and not up with the other
   fund rules: the calculator has two rule blocks in this file and the
   base one is the later of the two, so an override written above it
   silently loses at equal specificity. */
@media (max-width: 640px) {
  .calc__opt { min-width: 0; flex-basis: calc((100% - var(--space-3)) / 2); padding-inline: var(--space-3); }
  .calc__opt--fund { min-height: 92px; }
  .calc__opt--fund .calc__opt-logo { height: 21px; }
  [data-fund='clalit'] .calc__opt-logo { height: 22px; }
  [data-fund='meuhedet'] .calc__opt-logo { height: 25px; }
  [data-fund='leumit'] .calc__opt-logo { height: 23px; }
  .calc__opt--unsure .icon { width: 24px; height: 24px; }
}

/* ---- PRECISION ROUND: every option set fills its rows.
   The options were a fixed-basis wrap that never grew, so any row that
   was not full simply stopped: on desktop the funds ran 3 + 2 with the
   last two at a third each and an empty third beside them, and on a
   phone 2 + 2 + 1 left "עדיין לא בטוח/ה" as a half-width leftover. The
   options were not weak — the ROW was unfinished. With flex-grow the
   last row always resolves to equal shares of the full width: 3 + 2
   halves on desktop, 2 + 2 + one full-width choice on a phone. ---- */
.calc__options--fund .calc__opt { flex-grow: 1; }

/* the lone option on a phone is full width, so it lays out as a row
   (mark beside label) rather than a tall empty column — and it carries
   real type weight so it reads as a choice, not as a footnote */
.calc__opt--unsure {
  flex-direction: row;
  gap: var(--space-3);
  color: var(--navy);
}

.calc__opt--unsure > span { font-size: 1rem; font-weight: 700; }

/* the day ceiling is 3 or 4 rungs depending on the fund: one row on
   desktop whichever it is; on a phone 2 + 2, or 2 + one full-width */
@media (min-width: 641px) {
  .calc__options--days .calc__opt { flex: 1 1 0; min-width: 0; }
}

@media (max-width: 640px) {
  .calc__options--days .calc__opt { flex-grow: 1; }
}

/* ---- PRECISION ROUND: the result is a figure now, so it is set as one.
   Kicker → the amount at display scale → one line on what it is based
   on, centred as a single outcome; the receipt of answers, the lead form
   and the rest stay start-aligned. Scoped through .calc__result because
   the older `.calc__result p { margin: 0 0 var(--space-4) }` is (0,2,0)
   and out-ranks a single class — the same trap as the supporting line
   in the previous round. ---- */
.calc__outcome {
  margin-bottom: var(--space-6);
  text-align: center;
}

.calc__outcome .calc__result-mark { margin-inline: auto; }

.calc__result .calc__result-kicker {
  margin: 0 0 var(--space-2);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.calc__result .calc__result-amount {
  margin: 0;
  color: var(--blue-700);
  font-size: clamp(2.5rem, 1.9rem + 2.6vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
}

/* the symbol-then-digits string is isolated so the bidi algorithm can
   never reorder "₪5,210" inside a right-to-left paragraph */
.calc__result-amount bdi { direction: ltr; unicode-bidi: isolate; }

/* a quote path has words where the number would be, so it drops from
   display scale to heading scale rather than shouting a sentence */
.calc__result .calc__result-amount.is-quote {
  color: var(--navy);
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
  line-height: 1.2;
  letter-spacing: 0;
}

.calc__result .calc__result-note {
  max-width: 32rem;
  margin: var(--space-3) auto 0;
  color: var(--navy);
  line-height: 1.6;
}

.calc__result .calc__result-fine {
  margin: 0 0 var(--space-5);
  color: var(--muted);
  font-size: var(--fs-sm);
}

.calc__result-fine[hidden] { display: none; }

.calc__progress {
  margin: 0 0 var(--space-5);
  color: var(--muted);
  font-size: var(--fs-sm);
}

.calc__back {
  margin-top: var(--space-5);
  background: none;
  border: none;
  padding: 0;
  color: var(--blue-700);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.calc__lead { margin-top: var(--space-6); }
.calc__lead .field + .field { margin-top: var(--space-4); }

/* ---- QA/reference pass: article furniture.
   Two lessons taken from the sister project's blog. First, an article
   closes better with a light inline call to action sitting inside the
   reading column than with the same heavy dark panel the marketing pages
   end on — the panel competes with the text and breaks the reading mode.
   Second, a category chip next to the reading time makes the blog read
   as an edited publication rather than a list of pages. ---- */
.article-cta {
  margin-top: var(--space-8);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  border-radius: var(--r-card);
  border: 1.5px solid var(--sky-300);
  background: var(--ice);
}

.article-cta p {
  margin: 0 0 var(--space-4);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--navy);
}

.article-cta .btn-row { margin: 0; }

/* ---- PRECISION PASS: the article's closing beat.
   "לא בטוחים מה מתאים? חייגו ונעזור להחליט" over two buttons read as an
   advert dropped into a guide. Rebuilt in the language of the home
   page's own contact section (section 7): the same eyebrow → h2-inline
   with an accent clause → short intro, and the same channel rows the
   closing panel uses (icon badge, number, what it is, a go arrow). It
   offers a conversation instead of shouting a CTA, and it stays inside
   the reading column so the article never becomes a landing page. ---- */
.article-contact {
  position: relative;
  margin-top: var(--space-8);
  padding: clamp(var(--space-6), 4vw, var(--space-7));
  border-radius: var(--r-card);
  background: var(--ice);
  box-shadow: inset 0 0 0 1px var(--sky-300);
}

.article-contact__mark {
  display: block;
  width: 36px;
  height: auto;
  margin-bottom: var(--space-4);
  fill: var(--rose);
  opacity: .92;
  transform: rotate(-6deg);
}

.article-contact .eyebrow { margin-bottom: var(--space-3); }

.article-contact h2 {
  margin: 0;
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.72rem);
  line-height: 1.2;
}

.article-contact__intro {
  margin: var(--space-3) 0 0;
  color: var(--muted);
}

.article-contact__channels {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.article-contact__channels a {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-soft);
  background: var(--white);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--sh-xs);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}

.article-contact__channels a:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-sm);
}

/* PRECISION ROUND — the block sits inside .prose, and two of prose's
   list rules were reaching into it. Measured: `.prose ul` gave the
   channel list 24px of start padding (pushed off the reading edge the
   heading and intro align to), and `.prose li + li` gave the second card
   an 8px top margin — side by side on desktop that put the two cards
   8px out of line (tops at 250 and 258). Reset at (0,2,1) so they win. */
.prose .article-contact__channels { padding-inline-start: 0; }

/* VISUAL LOCK — from the article's contact beat to "מאמרים נוספים".
   Measured: 279px from the bottom of the contact block to the related
   heading on desktop (162 on a phone) — the article section's full
   100px bottom padding, then a full 130px wave, then the finish
   clearance. That much air made the related strip read as a second page
   bolted on. The article ends closer to its last card, and this one join
   carries a shallower wave with clearance sized to it, so the reader
   moves on in one step. The related section itself is untouched. */
main > article > .section:last-child { padding-bottom: clamp(40px, 4vw, 64px); }

main > article + .section > .wave-cut { height: calc(var(--finish-h) * .6); }

main:has(.page-hero) > article + .section:not(.bleed):not(.section--tight):has(> .wave-cut) {
  padding-top: calc(var(--finish-h) * .6 + clamp(24px, 2.4vw, 40px));
}

/* stacked on a phone the WhatsApp card's line wraps and the phone card's
   does not, so the pair came out at two different heights; equal rows
   make them read as one set of equal choices at every width */
.article-contact__channels { grid-auto-rows: 1fr; }

/* the rows were already equal; the link inside each row was not filling
   its row (measured 82 / 103px on a phone), so the cards still differed */
.article-contact__channels li > a { height: 100%; }
.prose .article-contact__channels li + li { margin-top: 0; }

.article-contact .icon-badge { flex: none; }

.article-contact__text { display: grid; gap: 2px; min-width: 0; }
.article-contact__text strong { color: var(--navy); font-size: 1.06rem; }
.article-contact__text small { color: var(--muted); }

.article-contact__go {
  margin-inline-start: auto;
  width: 18px;
  height: 18px;
  opacity: .5;
}

@media (min-width: 641px) {
  .article-contact__channels { grid-template-columns: 1fr 1fr; }
  .article-contact__go { display: none; }
}

/* ---- PRECISION ROUND: /blog hero art.
   Why the last attempt did nothing: it styled `.page-hero__mark` inside
   the blog hero, but that hero has NO mark element — it was removed in an
   earlier round — so the rule matched zero nodes and the hero stayed
   exactly as bare as before. This is a real element now: the open-book
   icon in the home page's own badge treatment (the #why-us circle, at
   hero scale), with a soft outer ring and the Or-Tal heart as a small
   signature. Physical `left`: it must sit opposite the RTL copy. ---- */
.blog-hero-art {
  position: absolute;
  top: 50%;
  left: clamp(0px, 3vw, 48px);
  width: clamp(104px, 9vw, 136px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
}

.blog-hero-art::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px solid rgba(124, 192, 234, .4);
}

.blog-hero-art__badge {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--white), var(--sky-100));
  box-shadow: inset 0 0 0 1px rgba(149, 207, 253, .55), 0 18px 40px rgba(13, 42, 71, .1);
  color: var(--blue-700);
}

.blog-hero-art__badge .icon { width: 44%; height: 44%; stroke-width: 1.5; }

.blog-hero-art__heart {
  position: absolute;
  top: -4px;
  right: -6px;
  width: 30%;
  fill: var(--rose);
  transform: rotate(-8deg);
}

/* phone: smaller, and lifted to the eyebrow's row — the one line in this
   hero short enough to leave the left side free */
@media (max-width: 640px) {
  .blog-hero-art {
    top: clamp(var(--space-6), 8vw, var(--space-8));
    left: 4px;
    width: 58px;
    transform: none;
  }

  .blog-hero-art::before { inset: -8px; }
}

/* ---- PRECISION PASS: the closing CTA on a phone.
   The inner pages' .cta-block kept the DESKTOP mark placement at every
   width — anchored to the top with a 52%-wide heart — so on a phone the
   panel's own overflow:hidden cropped it into an unrecognisable dark
   wedge in the top corner. The home page solves this in its own mobile
   block by moving the mark low and small; the same treatment is applied
   here so the brand mark reads as a watermark rather than as a glitch.

   The two buttons were .btn-primary.btn-lg (20/38px, 1.075rem) beside
   .btn-on-dark (16/30px, 1rem): a 8px height difference stacked one on
   top of the other, where the difference is at its most obvious. They
   now share one padding and one type size, and the hierarchy is carried
   by colour alone, which is where it belongs. ---- */
@media (max-width: 640px) {
  main:has(.page-hero) .cta-block__mark {
    inset-block-start: auto;
    inset-block-end: -8%;
    inset-inline-end: -14%;
    inset-inline-start: auto;
    width: min(18rem, 68%);
    opacity: .05;
  }

  main:has(.page-hero) .cta-block__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  main:has(.page-hero) .cta-block__actions .btn {
    width: 100%;
    padding: 17px 28px;
    font-size: 1rem;
  }
}

/* ---- PRECISION PASS: legal pages run tighter than the rest.
   These carry a title, a standfirst and then straight into clauses. The
   opening was holding a third of a screen for two lines of type, and the
   general clearance rule above then added more before the first heading.
   A prose heading can sit closer under the finish than a grid of cards
   can, so both are pulled in. Matched to the general rule's specificity
   (0,5,1) and placed after it, so it wins without !important. ---- */
main:has([data-page='legal']) .page-hero__inner--text {
  min-height: 0;
  padding-block: clamp(var(--space-6), 4vw, var(--space-8)) clamp(var(--space-5), 3vw, var(--space-6));
}

main:has([data-page='legal']) .section:not(.bleed):not(.section--tight):has(> .wave-cut) {
  padding-top: calc(var(--finish-h) + clamp(12px, 1.2vw, 22px));
}

.article-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--space-3);
  border-radius: var(--r-chip);
  background: var(--blue);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* ---- QA/reference pass: contact methods as cards.
   The sister project presents phone / WhatsApp / email / address as four
   separate tappable cards rather than rows in a list. On a contact page
   that is the whole point of the page: each method becomes a target in
   its own right instead of a line of text with a link inside it. ---- */
/* 15rem, not 13: at 13rem a 704px tablet container fits three tracks, so
   the four methods came out 3 + 1 with the fourth stranded. 15rem gives
   4 across on desktop, a clean 2×2 on tablet and a single column on a
   phone — the set always reads as a set. */
.contact-cards {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.contact-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.contact-card:has(a:hover) { transform: translateY(-2px); box-shadow: var(--sh-md); }

.contact-card__label { color: var(--muted); font-size: var(--fs-sm); }

.contact-card__value {
  font-weight: 800;
  font-size: var(--fs-h4);
  color: var(--navy);
  text-decoration: none;
  word-break: break-word;
}

.contact-card a.contact-card__value::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* ---- ART-DIRECTION PASS: /tsor-kesher, one column instead of two.
   The page put the four contact methods and the form side by side, so
   each got half a container: the cards were cramped into a 2×2 at 260px
   and the form's email, city and message fields were narrower than the
   text they hold. On the one page whose whole job is getting in touch,
   both halves lost.

   It reads top to bottom now — ways to reach us, then one form. The
   form is deliberately wider than half a container but well short of
   full width: comfortable, not a wall. ---- */
.contact-cards { gap: var(--space-5); }

.contact-card {
  align-items: center;
  gap: var(--space-4);
  padding: clamp(var(--space-5), 3vw, var(--space-6)) var(--space-4);
  text-align: center;
}

.contact-card__value { font-size: 1.075rem; }

.contact-availability {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  margin: clamp(var(--space-6), 4vw, var(--space-7)) 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  text-align: center;
}

.contact-availability .icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--blue);
}

.contact-form--solo {
  max-width: 46rem;
  margin-inline: auto;
}

/* the form is the page's whole purpose, so its section gets more room
   above it than the shared clearance gives — about a tenth of the
   section's height — and the card sits centred in it rather than pinned
   under the finish. Width is deliberately unchanged. */
#contact { padding-top: calc(var(--finish-h) + clamp(46px, 4.6vw, 78px)); }

/* email, city and the message need room to be typed into comfortably —
   they were the three fields the two-column page squeezed hardest */
@media (min-width: 641px) {
  .contact-form--solo { gap: var(--space-4); }
  .contact-form--solo > .contact-form__head { text-align: center; }
  .contact-form--solo > .contact-form__head h2 { margin-inline: auto; }
  .contact-form--solo textarea { min-height: 7.5rem; }
}
/* The transformed mask can rasterize a hairline at a fractional media edge.
   Clip only the already-transparent inner edge, never the photograph's outer edge. */
@media (min-width: 1025px) {
  main:has(.page-hero) .section.bleed--left .bleed__media { clip-path: inset(0 2px 0 0); }
  main:has(.page-hero) .section.bleed--right .bleed__media { clip-path: inset(0 0 0 2px); }
}
/* Let the desktop listbox escape its section only while it is open. */
#contact-form:has(.select-wrap.is-open) {
  overflow: visible;
  z-index: 2;
}

/* Legal introductions need a compact transition, not a marketing-section wave gap. */
main:has([data-page='legal']) .page-hero + .section {
  --finish-h: clamp(32px, 4vw, 56px);
}

/* Keep the nurse-service closing thought together without rewriting the copy. */
#service-achot .service-intro__closing {
  display: block;
  margin-block-start: .25em;
}