/* ==========================================================================
   Melet Daniel — מלט דניאל
   Light editorial. Bidirectional (he-RTL default, en-LTR mirror).
   Layout uses CSS logical properties so one stylesheet serves both dirs.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Warm paper stack — no pure white, no pure black anywhere. */
  --paper:    #FAF8F5;
  --paper-2:  #F2EEE8;
  --white:    #FFFFFF;

  --ink:      #1C1917;
  --ink-2:    #44403C;
  --muted:    #7A716A;
  --line:     #DED7CC;
  --line-2:   #C9C0B3;

  /* Brand red, taken from the circular logo mark. */
  --brand:      #C8102E;
  --brand-dk:   #9E0C22;
  --brand-tint: #FBEAEC;

  --font-display: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gut:      clamp(1.25rem, 4vw, 3rem);
  --max:      1180px;
  --max-text: 66ch;

  --sec-y:  clamp(4rem, 8vw, 7.5rem);
  --ease:   cubic-bezier(.22, 1, .36, 1);
  --dur:    240ms;

  --r:      3px;

  --z-nav:   100;
  --z-float: 200;
}

/* --- Reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: 88px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
::selection { background: var(--brand); color: var(--white); }

/* --- Type ----------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
[lang="he"] h1, [lang="he"] h2, [lang="he"] h3, [lang="he"] h4 {
  letter-spacing: 0;
  line-height: 1.18;
}

.h-lg { font-size: clamp(1.9rem, 4vw, 3rem); }
.h-md { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.h-sm { font-size: clamp(1.15rem, 1.9vw, 1.35rem); }

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.65;
  max-width: var(--max-text);
  color: var(--ink-2);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: .04em;
  margin-block-end: .9rem;
}

.tnum { font-variant-numeric: tabular-nums; }

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

/* --- Layout --------------------------------------------------------------- */

.wrap {
  inline-size: min(100% - (var(--gut) * 2), var(--max));
  margin-inline: auto;
}

.section { padding-block: var(--sec-y); }
.section--tint { background: var(--paper-2); }
.section--white { background: var(--white); }

.sec-head { margin-block-end: clamp(2.25rem, 4.5vw, 3.5rem); max-width: 42ch; }
.sec-head .lede { margin-block-start: 1.1rem; }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-block-size: 52px;
  padding: .85rem 1.6rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  background: var(--brand);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--brand-dk); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.btn--lg { min-block-size: 58px; font-size: 1.08rem; padding-inline: 2rem; }
.btn .ico { inline-size: 18px; block-size: 18px; flex: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-block-start: 2rem; }

/* Quiet inline link with an underline that grows. */
.tlink {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding-block-end: 2px;
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.tlink:hover, .tlink:focus-visible { border-block-end-color: var(--brand); }
.tlink svg { inline-size: 15px; block-size: 15px; }

.brand { display: flex; align-items: center; gap: .75rem; flex: none; }

.brand__txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.brand__sub { font-size: .74rem; color: var(--muted); }

/* --- Header --------------------------------------------------------------- */

.skip {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: 1rem;
  z-index: 999;
  background: var(--brand);
  color: var(--white);
  padding: .8rem 1.2rem;
  border-radius: var(--r);
  font-weight: 700;
}
.skip:focus { inset-block-start: 1rem; }

.hdr {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-nav);
  background: rgba(250, 248, 245, .92);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--line);
}

.hdr__in { display: flex; align-items: center; gap: 1.25rem; min-block-size: 84px; }

.nav { margin-inline-start: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(.9rem, 1.8vw, 1.8rem); }

.nav__link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .97rem;
  color: var(--ink-2);
  white-space: nowrap;
  padding-block: .4rem;
  border-block-end: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav__link:hover, .nav__link[aria-current="true"] { color: var(--brand); border-block-end-color: var(--brand); }

.hdr__actions { display: flex; align-items: center; gap: .6rem; flex: none; }

.lang {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  color: var(--muted);
  padding: .55rem .6rem;
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--dur) var(--ease);
}
.lang:hover { color: var(--brand); }

.hdr__tel {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  padding: .6rem 1.05rem;
  min-block-size: 46px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hdr__tel:hover { background: var(--brand); border-color: var(--brand); color: var(--white); }
.hdr__tel .ico { inline-size: 17px; block-size: 17px; }

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  /* hero.jpg sits on top of the drawn fallback; if the photo is missing the
     browser simply skips that layer and the illustration shows through. */
  background-image:
    linear-gradient(to bottom, rgba(250,248,245,.86) 0%, rgba(250,248,245,.72) 45%, rgba(250,248,245,.94) 100%),
    url("../img/hero-bg.svg");
  background-size: cover, cover;
  background-position: center, center bottom;
  background-repeat: no-repeat;
  /* Kept deliberately tight: the numbers and the client logos are the strongest
     trust signals on the page and both need to land in the first screen. */
  padding-block: clamp(1.75rem, 3.2vw, 2.75rem) clamp(1.25rem, 2.2vw, 1.75rem);
}

.hero__in { position: relative; max-width: 54rem; }

.hero h1 { color: var(--ink); }

.hero__shout {
  display: block;
  font-size: clamp(2.6rem, 7vw, 5.25rem);
  line-height: 1.04;
  font-weight: 800;
}
.hero__shout em { font-style: normal; color: var(--brand); }

.hero__sub {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.02rem, 1.9vw, 1.3rem);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--ink-2);
  margin-block-start: 1.35rem;
  max-width: 36ch;
}

/* Facts row — plain text, no boxes. */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin-block-start: clamp(1.4rem, 2.8vw, 2.1rem);
  padding-block-start: clamp(1rem, 2vw, 1.4rem);
  border-block-start: 1px solid var(--line);
}
.facts__item { max-width: 15rem; }
.facts__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  color: var(--ink);
  line-height: 1;
  display: block;
  letter-spacing: -0.02em;
}
.facts__n em { font-style: normal; color: var(--brand); }
.facts__l { font-size: .88rem; color: var(--muted); margin-block-start: .35rem; display: block; line-height: 1.45; }

/* --- Clients strip --------------------------------------------------------
   Sits directly under the hero. Wordmarks are set in type until real logo
   files arrive; swapping a <span> for an <img> needs no other change. */

/* Sits immediately under the hero and carries the heaviest trust signal on the
   page, so it gets its own surface rather than blending into the background. */
.clients {
  padding-block: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--white);
  border-block: 1px solid var(--line);
}

.clients__lead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--ink);
  margin-block-end: .35rem;
}
.clients__sub { font-size: .88rem; color: var(--muted); margin-block-end: 1.1rem; }

/* Looping ticker. main.js clones the track once so the seam is continuous;
   the shift accounts for the inter-track gap or the loop visibly jumps. */
.marquee {
  --mq-gap: clamp(2.25rem, 4.5vw, 4rem);
  --mq-shift: calc(-100% - var(--mq-gap));
  display: flex;
  gap: var(--mq-gap);
  overflow: hidden;
  /* fade the cut edges so items enter and leave rather than pop */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
[dir="rtl"] .marquee { --mq-shift: calc(100% + var(--mq-gap)); }

.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--mq-gap);
  flex: none;
  min-inline-size: max-content;
  animation: marquee 46s linear infinite;
}
/* Runs continuously — it is not interactive, so hover and touch do not stop it.
   prefers-reduced-motion remains the mechanism for anyone who needs it still. */

@keyframes marquee { to { transform: translateX(var(--mq-shift)); } }

.clients__item {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.98rem, 1.5vw, 1.15rem);
  color: var(--ink-2);
  white-space: nowrap;
  opacity: .78;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
.marquee:hover .clients__item { opacity: 1; color: var(--ink); }

/* Logo files are optional. The name shows until main.js confirms an image
   actually loaded, so a missing file degrades to a wordmark, not a gap.

   Matching heights makes wide lockups shout and tall crests disappear, so each
   logo carries a --k multiplier tuned to its aspect: wide marks sit smaller,
   upright ones larger, and they end up looking the same size. Multiply drops
   the white box on the marks that came as flattened artwork. */
.clients__logo {
  display: none;
  block-size: calc(var(--k, 1) * clamp(36px, 4.4vw, 54px));
  inline-size: auto;
  max-inline-size: 230px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.clients__item[data-has-logo="true"] .clients__logo { display: block; }
.clients__item[data-has-logo="true"] .clients__name { display: none; }

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
}

/* --- Services ------------------------------------------------------------- */

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Services are separated by rules and space, not boxed in cards. */
.svc {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding-block-start: 1.6rem;
  border-block-start: 2px solid var(--ink);
}
.svc--lead { border-block-start-color: var(--brand); }

.svc__ico { inline-size: 30px; block-size: 30px; stroke: var(--brand); margin-block-end: .3rem; }
.svc h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }
.svc__body { color: var(--ink-2); font-size: 1rem; }
.svc__list { display: flex; flex-direction: column; gap: .3rem; font-size: .95rem; color: var(--muted); margin-block-start: .2rem; }
.svc__list li { padding-inline-start: .9rem; position: relative; }
.svc__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .72em;
  inline-size: 4px; block-size: 1px;
  background: var(--line-2);
}
.svc .tlink { margin-block-start: .5rem; align-self: flex-start; }

/* --- Technical drawing ----------------------------------------------------
   Callout numerals live in the SVG (direction neutral); their labels live in
   the HTML legend, so one drawing serves both text directions. */

.draw {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.1rem, 2.5vw, 1.9rem);
}

.draw__head {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  justify-content: space-between;
  align-items: baseline;
  border-block-end: 1px solid var(--line);
  padding-block-end: .8rem;
  margin-block-end: 1.25rem;
}
.draw__title { font-family: var(--font-display); font-weight: 800; font-size: .95rem; color: var(--ink); }
.draw__ref { font-size: .72rem; letter-spacing: .1em; color: var(--muted); font-weight: 600; }

.draw svg { inline-size: 100%; block-size: auto; }

.dw-cut   { stroke: var(--ink); stroke-width: 2; fill: none; }
.dw-thin  { stroke: var(--line-2); stroke-width: 1; fill: none; }
.dw-dim   { stroke: var(--brand); stroke-width: 1; fill: none; }
.dw-hatch { fill: url(#hatch); }
.dw-fill  { fill: var(--white); }
.dw-num   { fill: var(--white); font-family: 'Heebo', sans-serif; font-weight: 800; font-size: 13px; }
.dw-bub   { fill: var(--brand); }

@media (prefers-reduced-motion: no-preference) {
  .draw svg .dw-anim { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); }
  .draw.is-in svg .dw-anim { animation: draw-in 1400ms var(--ease) forwards; }
  .draw svg .dw-late { opacity: 0; }
  .draw.is-in svg .dw-late { animation: fade-in 460ms var(--ease) 820ms forwards; }
}
@keyframes draw-in { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }

.legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem 1.6rem;
  margin-block-start: 1.35rem;
  padding-block-start: 1.1rem;
  border-block-start: 1px solid var(--line);
}
.legend li { display: flex; gap: .6rem; align-items: baseline; font-size: .9rem; color: var(--ink-2); }
.legend b { font-family: var(--font-display); font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; flex: none; }

.spot { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }

.spec { margin-block-start: 1.9rem; border-block-start: 1px solid var(--line); }
.spec__cell { display: flex; justify-content: space-between; gap: 1.25rem; padding-block: .8rem; border-block-end: 1px solid var(--line); }
.spec__k { color: var(--muted); font-size: .92rem; }
.spec__v { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: .98rem; text-align: end; }

/* --- Pillars & process ---------------------------------------------------- */

.pillar { display: flex; flex-direction: column; gap: .55rem; }
.pillar h3 { font-size: 1.15rem; }
.pillar p { font-size: .97rem; color: var(--ink-2); }
.pillar__mark { inline-size: 26px; block-size: 2px; background: var(--brand); margin-block-end: .5rem; }

.steps { display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding-block: clamp(1.4rem, 2.6vw, 2rem);
  border-block-end: 1px solid var(--line);
  align-items: baseline;
}
.step:first-child { border-block-start: 1px solid var(--line); }
.step__n { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--brand); font-variant-numeric: tabular-nums; }
.step__body h3 { margin-block-end: .4rem; }
.step__body p { color: var(--ink-2); max-width: 60ch; }

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

.faq { max-width: 820px; }
.faq details { border-block-end: 1px solid var(--line); padding-block: 1.2rem; }
.faq details:first-of-type { border-block-start: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.02rem, 1.7vw, 1.18rem);
  color: var(--ink);
  min-block-size: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  inline-size: 11px; block-size: 11px;
  flex: none;
  border-inline-end: 2px solid var(--brand);
  border-block-end: 2px solid var(--brand);
  transform: rotate(45deg);
  margin-block-end: 4px;
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-block: 4px 0; }
.faq__a { padding-block-start: .85rem; color: var(--ink-2); max-width: var(--max-text); }
.faq__a p + p { margin-block-start: .7rem; }

/* --- Contact / form ------------------------------------------------------- */

.contact { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.contact__info { display: flex; flex-direction: column; gap: 1.6rem; }

.nap { display: flex; flex-direction: column; }
.nap__row { display: flex; gap: .85rem; align-items: flex-start; padding-block: .9rem; border-block-end: 1px solid var(--line); }
.nap__row:first-child { border-block-start: 1px solid var(--line); }
.nap__row svg { inline-size: 19px; block-size: 19px; flex: none; stroke: var(--brand); margin-block-start: .25rem; }
.nap__k { font-size: .8rem; color: var(--muted); }
.nap__v { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.02rem; }
.nap__v a:hover { color: var(--brand); }

.form {
  background: var(--white);
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.4rem, 3vw, 2.25rem);
  display: grid;
  gap: 1.15rem;
}

.field { display: flex; flex-direction: column; gap: .4rem; }
.field > label { font-family: var(--font-display); font-weight: 700; font-size: .93rem; color: var(--ink); }
.field .req { color: var(--brand); }

.field input, .field select, .field textarea {
  min-block-size: 50px;
  padding: .75rem .9rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  appearance: none;
}
.field textarea { min-block-size: 120px; resize: vertical; }

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1917' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: calc(100% - 14px) center;
  background-size: 15px 15px;
  background-repeat: no-repeat;
  padding-inline-end: 2.5rem;
}
[dir="rtl"] .field select { background-position: 14px center; }

.field input:focus, .field select:focus, .field textarea:focus { background: var(--white); border-color: var(--ink); }
.field .hint { font-size: .82rem; color: var(--muted); }
.field .err { font-size: .84rem; font-weight: 600; color: var(--brand-dk); display: none; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--brand); background: var(--brand-tint); }
.field[data-invalid="true"] .err { display: block; }

.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; }
.form__foot { display: flex; flex-direction: column; gap: .8rem; }
.form__legal { font-size: .82rem; color: var(--muted); }
.form__status { padding: .85rem 1rem; border-radius: var(--r); font-weight: 600; display: none; }
.form__status[data-state="ok"]   { display: block; background: #F0FAF2; border: 1px solid #A7D8B4; color: #1B5E32; }
.form__status[data-state="fail"] { display: block; background: var(--brand-tint); border: 1px solid var(--brand); color: var(--brand-dk); }

/* --- CTA band ------------------------------------------------------------- */

.cta-band { background: var(--brand); color: var(--white); padding-block: clamp(3rem, 6vw, 4.5rem); }
.cta-band h2 { color: var(--white); }
.cta-band p { max-width: 52ch; margin-block-start: .9rem; color: rgba(255,255,255,.9); }
.cta-band__in { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: space-between; }
.cta-band .btn { background: var(--white); color: var(--brand); }
.cta-band .btn:hover { background: var(--ink); color: var(--white); }
.cta-band .btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.5); }
.cta-band .btn--ghost:hover { background: var(--white); color: var(--brand); border-color: var(--white); }
.cta-band .btn-row { margin-block-start: 0; }

/* --- Footer --------------------------------------------------------------- */

.ftr { background: var(--ink); color: rgba(255,255,255,.62); padding-block: clamp(2.75rem, 5vw, 4rem) 1.75rem; font-size: .94rem; }
.ftr .brand__name { color: var(--white); }
.ftr .brand__sub { color: rgba(255,255,255,.5); }
.ftr__top {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-block-end: 2.25rem;
  border-block-end: 1px solid rgba(255,255,255,.14);
}
.ftr h3 { font-size: .8rem; color: var(--white); margin-block-end: .9rem; font-weight: 700; }
.ftr ul { display: flex; flex-direction: column; gap: .55rem; }
.ftr a:hover { color: var(--white); }
.ftr__blurb { margin-block-start: .9rem; max-width: 32ch; line-height: 1.6; }
.ftr__bot { padding-block-start: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; font-size: .84rem; color: rgba(255,255,255,.45); }

.social { display: flex; gap: .5rem; margin-block-start: 1.1rem; }
.social a {
  inline-size: 40px; block-size: 40px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.social a:hover { background: var(--brand); border-color: var(--brand); color: var(--white); }
.social svg { inline-size: 17px; block-size: 17px; }

/* --- Floating actions ----------------------------------------------------- */

.wa {
  position: fixed;
  inset-block-end: 1.5rem;
  inset-inline-end: 1.5rem;
  z-index: var(--z-float);
  inline-size: 54px; block-size: 54px;
  background: #25D366;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 16px rgba(28,25,23,.22);
  transition: transform var(--dur) var(--ease);
}
.wa:hover { transform: translateY(-3px); }
.wa svg { inline-size: 28px; block-size: 28px; fill: var(--white); }

.callbar { display: none; position: fixed; inset-block-end: 0; inset-inline: 0; z-index: var(--z-float); border-block-start: 1px solid var(--line); }
.callbar a {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  min-block-size: 58px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
}
.callbar__tel { background: var(--brand); color: var(--white); }
.callbar__quote { background: var(--white); color: var(--ink); }
.callbar svg { inline-size: 18px; block-size: 18px; }

/* --- Reveal --------------------------------------------------------------- */

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 560ms var(--ease), transform 560ms var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1100px) {
  /* No mobile menu. The sections run in reading order and the sticky call bar
     carries the two actions that matter, so a hamburger added a trap without
     adding a route. */
  .nav { display: none; }

  /* With the nav gone its auto margin goes too, so the actions have to claim
     the free space themselves and sit against the far edge of the bar. The
     margin belongs on the container: on .hdr__tel it did nothing, because the
     container shrink-wraps and there was no space inside it to push against. */
  .hdr__actions { margin-inline-start: auto; }

  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 940px) {
  .spot { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
}

/* The full name plus a phone number will not fit beside each other on a narrow
   screen, so the number collapses to a solid call button. Outlined with just an
   icon it read as an empty box; filled, it reads as the action it is. */
@media (max-width: 520px) {
  .hdr__in { min-block-size: 64px; gap: .6rem; }

  /* The English name is half again as wide as the Hebrew one and was pushing
     the call button off the edge, so the brand yields and wraps while the
     actions keep their size. */
  .brand { flex: 0 1 auto; min-inline-size: 0; }
  .hdr__actions { flex: none; }
  .brand__name { font-size: 1rem; line-height: 1.15; }
  .brand__sub { font-size: .68rem; }

  .hdr__tel span { display: none; }
  .hdr__tel {
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    min-block-size: 44px;
    padding: 0;
    background: var(--brand);
    border-color: var(--brand);
    color: var(--white);
  }
  .hdr__tel .ico { inline-size: 19px; block-size: 19px; }

  .lang { padding-inline: .35rem; }

  html { scroll-padding-block-start: 68px; }
}

@media (max-width: 720px) {
  .grid--4 { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .legend { grid-template-columns: 1fr; }
  .ftr__top { grid-template-columns: 1fr; }
  .btn { inline-size: 100%; }
  .step { grid-template-columns: 1fr; gap: .35rem; }

  /* Callouts scale with the viewport and drop below legibility on a phone. */
  .dw-num { font-size: 22px; }
  .dw-bub { r: 26px; }

  .callbar { display: flex; }
  .wa { inset-block-end: 72px; inline-size: 48px; block-size: 48px; }
  body { padding-block-end: 58px; }
}

/* --- Motion / print ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .hdr, .wa, .callbar, .cta-band, .form { display: none; }
  body { background: #fff; }
  .section { padding-block: 1.25rem; }
}