/* =========================================================
   CONTACT.CSS
   "צור קשר" (Contact) page — desktop only, built to the
   approved Figma frame (node 103-22). Direct Figma layer
   inspection (not the guest-mode screenshot pass used for the
   first structural read) — see individual comments below for
   exact values.

   Do NOT assume this page reuses Home's layout system: it
   does not. Content here is inset to 1053px (not the site's
   usual 1140px --page-max-width) because the physical right
   87px of every section is reserved for the numbered index
   rail — see section-rail.css. Home has no equivalent element.
   ========================================================= */

/* ---------------------------------------------------------
   JOST — SUBSTITUTE FOR CENTURY GOTHIC
   Figma specifies Century Gothic for the "SILANDE" eyebrow
   label — a commercial Monotype face (confirmed via its own
   embedded copyright string: "All Rights Reserved") we don't
   have a web-embedding license for, so it can't be self-hosted
   here the way Open Sans Hebrew/Blinker are. Jost is the
   substitute per direct instruction: visually close (same
   geometric-sans genre Century Gothic belongs to), and
   genuinely free to embed — SIL Open Font License 1.1, fetched
   directly from Google Fonts' own OFL repo (license text kept
   alongside it at fonts/Jost-OFL.txt). Variable font (single
   file, weight axis 100–900) rather than one static file per
   weight, so one @font-face rule covers every weight this
   page might need. */
@font-face {
  font-family: "Jost";
  src: url("../fonts/Jost-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------
   HEADER SHADOW
   Figma-exact (a Drop Shadow effect on the header's own
   background rectangle, read directly from the inspector):
   X0 Y4 Blur4 Spread0, color #D9D9D9 @ 100%. Scoped here in
   contact.css (not header.css) on purpose — this shadow is
   specific to Contact's own approved frame; Home's header is
   explicitly out of scope right now and must stay untouched.
   --------------------------------------------------------- */
.site-header {
  box-shadow: 0px 4px 4px 0px #D9D9D9;
}

/* ---------------------------------------------------------
   ACTIVE NAV LINK — COLOR + GAP OVERRIDE
   header.css's shared .is-active::before/::after underline
   uses --color-accent-blue/red (#6faec7 / #cc6b62) — Home's
   own approved pair. A direct Figma inspection of Contact's
   own active "צור קשר" link (Group 62, two Line 35 layers)
   found a different, Contact-specific pair instead: #005E8E
   and #CC2F3A — the exact same two colors as this page's own
   Hero divider (see below), just not Home's tokens. Overriding
   color here, not in the shared header.css.

   Gap: per direct instruction, 8px between the link text's own
   bottom edge and the line. header.css's shared bottom:-18px is
   measured from the LINK's own box bottom, which includes its
   padding-block — real-browser measurement (Range.getBounding-
   ClientRect on the text node itself, not the padded box) found
   that -18px was rendering a 21px gap from the actual glyph
   bottom, not 8. -5px (18-13, the exact padding-driven
   difference) lands the line exactly 8px under the real text.

   Width: per direct instruction (Figma's own "46 x 0" dimension
   label on the two-segment group), fixed at 46.31px total —
   header.css's shared 40%/20%-of-link-width split was rendering
   only ~29px here, visibly short. Segment widths are the exact
   measured Line 35 values (32.16 / 14.15), overriding the
   percentage-based right/width from header.css with fixed px,
   red flush to the link's own right edge and blue immediately
   before it (right: 14.15px, its own width's start point). */
.site-navigation__link.is-active::before {
  right: 14.15px;
  width: 32.16px;
  bottom: -5px;
  background-color: #005E8E;
}

.site-navigation__link.is-active::after {
  right: 0;
  width: 14.15px;
  bottom: -5px;
  background-color: #CC2F3A;
}

/* ---------------------------------------------------------
   HERO
   Figma: the content row (image+text) is Frame 4 — X0, Y79,
   W1053, H553, flush against the header above (79px, see
   header.css) and against the page's left edge, leaving
   exactly the rail's own 87px free on the right (1140-1053).
   position:relative + the fixed height here is what lets
   .section-rail__item's height:100% match this section
   exactly, matching the rail's own item-01 rectangle height.
   --------------------------------------------------------- */
/* =========================================================
   PAGE-WIDTH MODEL FOR THIS PAGE (read this before touching
   any width here)

   Two layers, and the split is the whole point:

   1. The SECTION runs the full viewport width. That is what
      makes its background one continuous surface from the left
      edge of the screen, past the content, all the way under the
      numbered rail — no white band anywhere.

   2. The INNER wrapper inside it is capped at --page-max-width
      and CENTRED, so the composition itself (content width,
      positions, proportions) is identical at every viewport
      width and never moves.

   Because the section is full-width, .section-rail__item's own
   `inset-inline-start: 0` already lands hard on right:0 of the
   viewport — no calc, no vw, no fixed offset, and nothing for a
   scrollbar to throw off. The extra space that opens between the
   content and the rail on a wide screen is simply more of the
   section's own background.
   ========================================================= */
.contact-hero {
  position: relative;
  /* The one band on this page that had NO background on its own
     full-width layer, so the space beside the capped inner fell
     through to the body's white and read as a separate column —
     the audit caught it as the only outlier besides the closing
     photo. #F7F7F5 is this section's own wash colour (the same
     value .contact-hero__wash fades in, and the site's
     --color-surface token), so the gap beside the text panel
     continues the tone that is already there instead of
     introducing a new one. */
  background-color: var(--color-surface);
  height: 553px;
  /* Clips the full-bleed media layer below to the band. */
  overflow: hidden;
}

/* DOM order is image then content — in this dir="rtl"
   document, with no direction override, plain `row` already
   places the first child (image) at the physical LEFT... no:
   inline-start in RTL is the physical RIGHT. So plain row
   would put the image on the right, which is backwards
   against the approved Figma (image physical LEFT, text
   physical RIGHT). row-reverse flips main-start to the
   physical LEFT, landing the image (first DOM child) there,
   matching Figma — same technique as .about__inner on Home. */
/* Capped + CENTRED — see the page-width model note above. This is
   what holds the composition in exactly the position it already
   has, while the section behind it spreads to the screen edges. */
.contact-hero__inner,
.contact-about__inner,
.contact-form__inner,
.contact-stats__inner,
.contact-legal__inner {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
}

/* position:relative deliberately NOT set here any more. The media
   and wash layers below are absolutely positioned, and they must
   resolve against the full-width .contact-hero — not against this
   capped 1140 wrapper — so the photo can bleed to the viewport
   edges. This wrapper now carries the text panel only.
   justify-content:flex-end keeps that panel in exactly the spot
   it occupied when the (now out-of-flow) media was still a flex
   sibling absorbing the leftover width. */
.contact-hero__inner {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: stretch;
  height: 100%;
  /* Reserves the rail's own 87px on the physical right so the
     inner row never sits under it. */
  padding-inline-start: 87px;
}

/* Full-bleed layer spanning the whole band, matching Figma: there
   the photo (node 103:24) covers the entire frame width and it is
   the wash on top that creates the light panel the text sits on —
   the photo was never a column ending mid-frame. object-fit:cover
   keeps its aspect ratio intact at any viewport width (no
   stretching); the extra width is gained by cropping, not
   distorting. */
.contact-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.contact-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keeps the frame's own centre as the focal point as the band
     widens — the crop grows symmetrically instead of drifting. */
  object-position: center;
}

/* ---------------------------------------------------------
   WASH OVERLAY
   A separate layer in the approved Figma (Rectangle 110,
   spanning the full 1053px inner row, not just the image) —
   a left-to-right linear gradient, #F7F7F5 at 0% opacity
   fading to 83% opacity. It sits at the seam between the
   photo and the text panel, softening the transition instead
   of a hard edge — not a tint over the whole photo. Percentage
   stops below are converted from the gradient line's own
   start/end points (read off the inspector) into the inner
   row's own width. Purely decorative: absolutely positioned,
   full inner-row size, no pointer events, sits above the
   image and below the text (DOM order after media, before
   content — text has no background of its own to need it
   below, but visually this keeps it under the type). */
.contact-hero__wash {
  position: absolute;
  inset: 0;
  /* Stops anchored to the band's CENTRE rather than to percentages
     of its width. The text panel's left edge always falls ~17px
     left of centre (half of 1140, minus the 87px rail reserve and
     the panel's own 500px), so `50% - 20px` puts the wash at full
     strength exactly where the text starts, and `50% - 220px`
     opens the same 200px fade the approved frame uses — at every
     viewport width, now that this layer spans the whole band. */
  background: linear-gradient(
    to right,
    rgba(247, 247, 245, 0) calc(50% - 220px),
    rgba(247, 247, 245, 0.83) calc(50% - 20px),
    rgba(247, 247, 245, 0.83) 100%
  );
  pointer-events: none;
}

.contact-hero__content {
  /* position:relative for no positional reason — purely to win
     the paint order against .contact-hero__wash. Positioned
     elements always paint above static ones regardless of DOM
     order, so without this the wash (position:absolute) would
     sit on top of this text even though it comes later in the
     markup. */
  position: relative;
  flex: 0 1 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: var(--space-7);
}

/* Figma specifies Century Gothic for the literal "SILANDE"
   label specifically (checked directly in the inspector) — not
   Open Sans Hebrew like the rest of this page. Per direct
   instruction, Jost substitutes for it (see the @font-face
   above) — a real, freely-licensed file, unlike Century Gothic
   itself. */
.contact-hero__eyebrow {
  margin: 0;
  font-family: "Jost", var(--font-english), sans-serif;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-muted);
}

/* Two-color, red+blue — a different pair from Home's own
   --color-brand-red/blue (#CC2F3A / #005E8E here, confirmed by
   detaching each Line's style in the inspector — Home's hero
   divider uses #bc3e40 / #275d8a, a genuinely different pair,
   not reusable tokens). Plain (non-reversed) flex row: in this
   dir="rtl" document with no direction override, the first DOM
   child already lands at the physical right on its own — no
   row-reverse needed here (unlike Home's own divider, which
   has other DOM-order constraints forcing it to reverse) — and
   Figma confirms red sits physically right of blue (X944.8 vs
   X898). Segment widths use the exact measured px (20.8 / 47.26)
   as flex-grow ratios, so the split stays exact regardless of
   the container's own rendered width. */
.contact-hero__divider {
  display: flex;
  width: 68px;
  height: 1px;
  margin-block-start: var(--space-3);
}

.contact-hero__divider-segment--red {
  flex: 20.8;
  background-color: #CC2F3A;
}

.contact-hero__divider-segment--blue {
  flex: 47.26;
  background-color: #005E8E;
}

.contact-hero__heading {
  margin: 0;
  margin-block-start: var(--space-5);
  /* 64px, Figma-exact (Open Sans Hebrew Light) — the H1 scale,
     not the sitewide H2 used for other section headings. An
     earlier guest-mode pass had assumed this was a normal
     section heading; the real inspector reading corrects that.
     Weight reverted to Light per direct re-confirmation against
     the inspector panel — a prior visual-comparison pass had
     switched this to Regular, but the exact metadata is the
     source of truth here, not a subjective render comparison. */
  font-size: 64px;
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-heading);
}

/* 13px, Figma-exact (Open Sans Hebrew Regular) — smaller than
   the sitewide --font-size-body (16px) this had been using.
   264px width, also Figma-exact (the text box itself, X701/
   W264 relative to the hero row) — matches the approved
   Figma's 3-line wrap instead of wrapping at 2. */
.contact-hero__paragraph {
  margin: 0;
  margin-block-start: var(--space-6);
  max-width: 264px;
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

/* Icon first in the DOM (decorative, ahead of the label for
   a11y ordering) but sits at the physical LEFT of the label in
   the approved Figma — row-reverse flips it there without
   reordering the markup, same technique as Home's .hero__cta. */
.contact-hero__cta {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
  width: fit-content;
  font-size: var(--font-size-label);
  /* Figma reports this as literal "Bold" (700) — no real Bold
     weight file is loaded for Open Sans Hebrew (only Light 300
     and Regular 400; there's an ExtraBold 800 file but that's a
     different, heavier weight than 700 asked for), so reusing
     --font-weight-emphasis (600, sitewide token for "make a CTA
     bold", already used the same way on Home's own .hero__cta)
     rather than requesting a synthetic/faux-bold 700 the browser
     would have to fake from the Regular file. */
  font-weight: var(--font-weight-emphasis);
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text);
  text-decoration: none;
  /* The underline the approved Figma put here has been removed at
     the designer's request, matching the home page's own CTA. */
  padding-block-end: var(--space-2);
}

/* "heroicons:chevron-down", 14x14 Figma-exact — a plain
   down-pointing chevron, not the diagonal corner-arrow Home's
   own .hero__cta-icon uses (a different icon entirely). */
.contact-hero__cta-icon {
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =========================================================
   "מי אנחנו" — SECTION 02
   Figma-exact, direct inspection. Same row-reverse technique
   as Home's .about__inner: DOM is content-then-image, and
   row-reverse lands the first child (content) at the physical
   LEFT and the second (image) at the physical RIGHT — matching
   the approved Figma (image X656–1053, text X189–624: image on
   the right). Height is driven by the image (397×298, flush to
   the section's own top with no padding, same as Home's about),
   which is also what .section-rail__item's height:100% locks
   onto for rail item 02 — no fixed height needed here.
   Background #F6F5F3 — confirmed as rail item 02's own fill
   too (see section-rail.css usage in the HTML). No side rail
   padding-inline-start here: unlike the Hero (a single flush
   row), this section's own text column already stops short of
   the rail on its own (image ends at X1053, exactly where the
   rail begins) — but padding-inline-start:87px is added anyway
   for the same structural safety Hero's row has, costing
   nothing since the image already respects that edge.
   ========================================================= */
.contact-about {
  position: relative;
  background-color: #F6F5F3;
}

/* 298px, Figma-exact (the image's own measured height) —
   without an explicit height here, .contact-about__image's own
   height:100% has no definite parent height to resolve against
   (align-items:stretch alone doesn't provide one: the row's
   cross-size is itself derived FROM each item's hypothetical
   height first, and a percentage height against an indefinite
   ancestor resolves to auto, i.e. the image's raw aspect ratio
   at its flexed width — 731px tall here, not 298). Same fix
   pattern as .contact-hero's own explicit height, and the same
   thing .section-rail__item's height:100% needs to lock onto. */
/* 32px, Figma-exact gap between the text column and the image
   (measured: the "קרא עוד" link's own right edge to the image's
   left edge). A FIXED gap, not justify-content:space-between —
   that had been dumping the row's ENTIRE leftover width (this
   page renders at the real viewport's full width, not Figma's
   1140px frame) into one gap, ballooning it hugely on any real
   screen. The content column (flex:1, see below) is what
   absorbs that extra width instead, keeping this gap constant
   regardless of viewport. */
.contact-about__inner {
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
  gap: 32px;
  height: 298px;
  padding-inline-start: 87px;
}

/* 397px, Figma-exact — a FIXED width, not flex:1 (that had
   been stretching this to fill the entire remaining row, ~975px
   in a real viewport, way past its real approved size). Figma's
   image sits at X656–1053 inside the 1140 frame: a specific
   397px block flush against the rail's own edge, with a fixed
   32px gap before it (see .contact-about__inner's own gap) —
   the text column (flex:1) is what absorbs any extra viewport
   width, not this gap. */
.contact-about__media {
  flex: 0 0 397px;
  overflow: hidden;
}

.contact-about__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* flex:1 — grows to absorb the viewport's extra width (beyond
   Figma's 1140px frame) itself, instead of that space becoming
   part of the gap to the image (see .contact-about__inner).
   align-items:flex-start (not the flex default of stretch) so
   the text hugs this column's own physical-right edge (RTL
   inline-start) at its natural/max-width as the column grows,
   rather than stretching every child to the column's full,
   now-variable width. */
/* padding-inline-start:0 on purpose — that's the physical RIGHT
   side here (no direction override, inline-start=right in this
   RTL doc), the side FACING the image. .contact-about__inner's
   own 32px gap already provides the correct Figma-measured
   spacing there; a symmetric padding-inline had been adding an
   extra 48px on top of that gap (80px total, visibly "huge"
   per direct feedback) instead of the real 32px. Only the far
   (physical left, outer) side keeps padding, for basic breathing
   room from the viewport edge — not a value Figma's own static
   comp actually specifies (its "outer" position was incidental,
   not a deliberate margin), so the sitewide --space-7 token is
   used here rather than inventing a one-off exact px. */
.contact-about__content {
  flex: 1 1 435px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-inline-start: 0;
  padding-inline-end: var(--space-7);
}

.contact-about__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.contact-about__eyebrow-line {
  width: 16px;
  height: 1px;
  background-color: var(--color-text-muted);
}

/* 32px, Figma-exact (Open Sans Hebrew Light) — this page's own
   H2 scale for a body-section heading, distinct from the
   Hero's 64px H1. 435px max-width matches the Figma text box
   so it wraps identically. */
.contact-about__heading {
  margin: 0;
  margin-block-start: var(--space-5);
  max-width: 435px;
  font-size: 32px;
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-heading);
}

/* 13px / 296px, both Figma-exact — noticeably smaller and
   narrower than the sitewide paragraph default, matching the
   approved 4-line wrap. */
.contact-about__paragraph {
  margin: 0;
  margin-block-start: var(--space-4);
  max-width: 296px;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Bold (Open Sans Hebrew), 13px, Figma-exact. Chevron points
   physically LEFT (toward the text, "read more" affordance) —
   DOM order is icon-then-label with a plain (non-reversed) row:
   in this dir="rtl" document the first child already lands at
   the physical right on its own, so a plain row already puts
   the label after (physically left of) the icon... no: this
   needs the ICON at physical left, label at physical right —
   row-reverse achieves that (icon, first in DOM, moves to
   main-end = physical left under row-reverse). */
.contact-about__more {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
  width: fit-content;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
}

.contact-about__more-icon {
  width: 14px;
  height: 8px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M13 4H1M5 1 1 4l4 3' stroke='%23000' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M13 4H1M5 1 1 4l4 3' stroke='%23000' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =========================================================
   "שלחו לנו הודעה" — SECTION 03 (CONTACT FORM)
   Rebuilt per the updated Figma (photo now full-section-height
   with contact details overlaid on it, editorial underline
   fields, real phone/hours). Row-reverse: DOM is photo-then-
   form, so the first child (photo) lands physical LEFT and the
   form physical RIGHT, matching Figma. Photo is flex:1 (grows
   to absorb real-viewport extra width past Figma's 1140px
   frame, same reasoning as .contact-about__media); the form
   stays a fixed width since its own field layout is a precise
   fit, not something meant to stretch.
   780px explicit height — Figma-measured (the photo's own
   H=780) — avoids the same percentage-height/aspect-ratio trap
   .contact-about__inner needed height:298px for (see that
   comment): without a definite height here .contact-form__image's
   height:100% would resolve against nothing and fall back to
   the image's raw aspect ratio instead.
   Background #F1EFEE — matches rail item 03's own fill.
   ========================================================= */
.contact-form {
  position: relative;
  background-color: #f3f3ef;
}

.contact-form__inner {
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
  /* 84px, re-measured directly from Figma node metadata (image
     right edge at x=526.8, form field underlines starting at
     x=610.8, both relative to the 1053px content zone) — the
     previous 48px was nearly HALF the real gap. */
  gap: 84px;
  height: 780px;
  padding-inline-start: 87px;
}

/* Still the 525px slot in the flex row — that is what fixes the
   84px gap and the form column beside it, so it must not change.
   position:relative is deliberately NOT set: the photo layer and
   its overlay below are absolute and need to resolve against the
   full-width .contact-form, so the picture can bleed to the left
   edge of the screen instead of stopping at the capped container.
   The element itself is now just the reserved slot; everything
   visible in it is painted by the two layers that follow. */
.contact-form__photo {
  flex: 1 1 525px;
}

/* Bleeds from the viewport's left edge to the photo's own right
   edge. That right edge sits 45px left of centre (half of the
   1140 container is 570; the photo runs 525 of it), so
   `calc(50% - 45px)` lands it exactly where it is today at any
   viewport width — percentages here resolve against the
   full-width section, so no vw and nothing for a scrollbar to
   shift. object-fit:cover means the extra width is gained by
   cropping, never by stretching. */
.contact-form__image {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(50% - 45px);
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* NOT an opaque plate in a corner. The approved Figma puts a
   single soft white wash (Rectangle 137, node 471:109) over the
   photo's left ~484 of its 525px, full height, with the contact
   details sitting directly on the photo through it — no panel
   edge anywhere. The previous rgba(241,239,238,.94) block sat on
   the physical RIGHT of the photo too (inset-inline-start
   resolves to the right in this RTL document), the opposite side
   from the comp.
   NOTE: the wash's exact gradient stops can't be read out of the
   Figma export (the layer is a rotated vector), so these stops
   are an approximation of the comp's own falloff — the one value
   in this section not measured. */
.contact-form__photo-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(50% - 45px);
  height: 100%;
  /* Stops measured from the box's RIGHT edge instead of as
     percentages of its width. The right edge is pinned to the
     photo's original right edge, so the wash keeps the exact
     profile it has today over the contact details, and simply
     carries its opening tone further left across the new bleed —
     no seam where the old 525px box used to end. */
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.82) calc(100% - 525px),
    rgba(255, 255, 255, 0.6) calc(100% - 284px),
    rgba(255, 255, 255, 0) calc(100% - 42px)
  );
}

/* Absolutely positioned at Figma's own coordinates (x=81.8 vs
   the photo's own x=1.8, so 80px in from its left edge; first
   line at y=1319.29 - 926.29 = 393). Each row is pinned to its
   measured y rather than flowed with a shared gap, because the
   comp's own gaps between them are not uniform. */
.contact-form__contact-list {
  position: absolute;
  /* Was 80px from the photo's own left edge. These resolve against
     the overlay above, whose box now starts at the screen edge and
     ENDS at the photo's original right edge — so the stable anchor
     is that right edge, not a percentage of the box: 445px back
     from it is exactly where these sat before (570 - 80 - 45).
     Measured against `50%` first, which silently resolved to half
     the OVERLAY rather than half the viewport and threw the block
     off-screen. */
  left: calc(100% - 445px);
  top: 393px;
  margin: 0;
  padding: 0;
  list-style: none;
  direction: ltr;
  text-align: left;
  /* Figma specifies Century Gothic Bold here; Jost is this
     page's approved substitute for it (see the @font-face at
     the top of this file). */
  font-family: "Jost", var(--font-english), sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.05;
  color: #656565;
}

.contact-form__contact-list li {
  position: absolute;
  left: 0;
  white-space: nowrap;
}

/* 393 / 436 / 475 / 533 in the comp, expressed relative to the
   list's own top (nodes 471:110, 471:111, 471:112, 471:113). */
.contact-form__contact-list li:nth-child(1) { top: 0; }
.contact-form__contact-list li:nth-child(2) { top: 43px; }
.contact-form__contact-list li:nth-child(3) { top: 82px; }
.contact-form__contact-list li:nth-child(4) { top: 140px; }

.contact-form__contact-list a,
.contact-form__contact-list span[dir="ltr"] {
  text-align: left;
  text-decoration: none;
  color: inherit;
}

/* The email is the one underlined item; same #656565 as the rest
   of the block per direct instruction. */
.contact-form__contact-list li:nth-child(1) a {
  color: #656565;
  text-decoration: underline;
}

/* Rule at y=667, signature text at y=687 (nodes 471:114 /
   471:115). The rule is only 42px wide while the text runs to
   ~205px, so it's drawn as a pseudo-element rather than a
   border on the text block itself. */
.contact-form__signature {
  position: absolute;
  /* Same right-edge anchoring as .contact-form__contact-list. */
  left: calc(100% - 445px);
  top: 667px;
  width: 220px;
  margin: 0;
  padding: 0;
  border: none;
  /* ltr on the container, not just on the text inside it: the
     42px rule below is a block child, and in this RTL document a
     fixed-width block aligns to its container's RIGHT edge —
     which was pushing the rule 178px away from the signature it
     belongs to. */
  direction: ltr;
}

.contact-form__signature::before {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  margin-bottom: 19px;
  background-color: var(--color-text-strong);
}

/* One 10px Century-Gothic (→ Jost) block at 1.2px tracking in
   black — Figma has SILANDE and the two tagline lines as a
   single text node at one size, not a larger word above smaller
   grey type the way this had been built. */
.contact-form__signature-word,
.contact-form__signature-tagline {
  margin: 0;
  max-width: none;
  font-family: "Jost", var(--font-english), sans-serif;
  font-size: 10px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 1.2px;
  line-height: 1.35;
  direction: ltr;
  text-align: left;
  color: var(--color-text-strong);
}

/* 444px — re-measured directly from Figma node metadata:
   1053 (content zone) - 525 (photo) - 84 (gap) = 444, confirmed
   by the field underlines' own right edge sitting at x=979.8,
   74px short of the zone's own right edge (x=1053.8) — that 74px
   is real empty space in the approved design, not a rendering
   accident, so it's reproduced below as padding rather than left
   for the fields to stretch into (the previous 460px + no padding
   let the fields run flush to the column's own edge, visibly
   wider/closer to the rail than Figma shows).
   flex-basis only, no grow/shrink, so it stays this width
   regardless of viewport. */
.contact-form__form {
  flex: 0 0 444px;
  /* Verified in an actual browser render (not just reading the
     CSS): without this, the browser's automatic min-width:auto
     on flex items resolves to this column's CONTENT min-width
     (driven by the two side-by-side <input> elements' own
     default intrinsic size) — which is wider than 444px, so it
     silently overrode flex-basis and rendered at ~515px instead,
     stealing space from the photo (measured 454px instead of
     525px). min-width:0 forces the fixed 444px to actually hold. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* 74px, Figma-exact (see note above) — physical-right padding
     (inline-start in this RTL doc) keeps the fields' own right
     edge short of the column's edge, matching the gap to the
     rail seen in the approved design. */
  padding-inline-start: 74px;
  /* 50px — derived so the red/blue divider's own top edge lands
     at y=102 relative to the section top (Figma Group 35,
     y=1028.29 - section top 926.29 = 102), given the h2's own
     36.8px line box (32px x 1.15) plus the divider's 15px
     margin below. var(--space-8) (64px) pushed everything ~14px
     low, and that error compounded down the whole column. */
  padding-block-start: 50px;
}

.contact-form__heading {
  margin: 0;
  font-size: 32px;
  font-weight: var(--font-weight-light);
  /* Figma: text-black on this heading, not the sitewide
     --color-text (#262626). */
  color: var(--color-text-strong);
}

.contact-form__divider {
  display: flex;
  width: 54px;
  height: 2px;
  /* 15px — lands the divider at y=102 exactly (see the
     padding-block-start note on .contact-form__form). */
  margin-block-start: 15px;
}

.contact-form__divider-segment--red {
  flex: 20.8;
  background-color: #CC2F3A;
}

.contact-form__divider-segment--blue {
  flex: 47.26;
  background-color: #005E8E;
}

/* 13px / 200px / black — all Figma-exact (node 471:106:
   Open Sans Hebrew Light, text-[13px], text-black, box width
   198px giving the approved 2-line wrap). It had been rendering
   at the inherited 16px in --color-text-muted grey across 380px,
   which both looked wrong and wrapped differently. */
.contact-form__lead {
  margin: 0;
  margin-block-start: 18px;
  max-width: 200px;
  font-size: 13px;
  color: var(--color-text-strong);
}

.contact-form__fieldset {
  /* 63px — puts the first field-label row's own top at y=227
     (Figma nodes 471:84 / 471:79), measured from the lead's
     own bottom edge. */
  margin-top: 63px;
  display: flex;
  flex-direction: column;
}

/* row-reverse, NOT plain row: the DOM order is חברה then שם מלא,
   and in this dir="rtl" document a plain row puts the first child
   (חברה) at the physical RIGHT — the opposite of the approved
   Figma, which has שם מלא on the right (x816.8–979.8) and חברה
   on the left (x614.3–777.3). This was rendering the two fields
   swapped. */
.contact-form__row {
  display: flex;
  flex-direction: row-reverse;
  /* 27px, Figma-exact (measured between the company/name field
     underlines directly, node metadata for Line 57/Line 56) —
     var(--space-6) (32px) was close but not exact. */
  gap: 27px;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* Same automatic-min-width issue as .contact-form__form, one
     level down: inside the two-column row (חברה/שם מלא) each
     field is itself a flex item whose own input content wants
     more than its 1/2 share of 370px, so without this override
     the row would try to overflow/expand rather than split
     evenly. */
  min-width: 0;
  position: relative;
}

.contact-form__row .contact-form__field {
  margin-top: 0;
}

/* Per-field top margins, each measured directly off the Figma
   frame rather than a single uniform token: the approved comp
   genuinely uses different gaps between one field's own underline
   and the next field's label (30 / 23 / 20px, from nodes
   471:98→471:80, 471:99→471:81, 471:100→471:83). A uniform
   var(--space-6) (32px) drifted the whole stack progressively
   lower — by the phone field it was ~125px below the comp. */
.contact-form__fieldset > label.contact-form__field:nth-of-type(1) {
  margin-top: 30px;
}

.contact-form__fieldset > label.contact-form__field:nth-of-type(2) {
  margin-top: 23px;
}

.contact-form__fieldset > label.contact-form__field:nth-of-type(3) {
  margin-top: 20px;
}

/* 16px Regular in #656565 — Figma-exact (nodes 471:79/80/81/
   83/84). It had been 13px in near-black --color-text, which
   read as noticeably smaller and darker than the comp. */
.contact-form__field-label {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  color: #656565;
}

/* Real <input>/<textarea>, not styled divs, so this form is
   actually usable — native chrome (borders, background) reset
   first. Underline-only per the updated Figma (no filled box,
   no shadow) — a deliberate change from the earlier boxed
   version this replaced. */
/* No top margin and no bottom padding: in the approved Figma the
   underline sits just 42px below its own label's top edge (label
   box 26px + ~16px), so the typed line sits directly on the rule.
   The old 13px margin + 11px padding made each field ~71px tall,
   which is what pushed every rule far below its Figma position. */
.contact-form__field input,
.contact-form__field textarea {
  margin-top: 0;
  padding: 0;
  line-height: 1;
  border: none;
  border-bottom: 1px solid var(--color-line);
  background: transparent;
  font-family: var(--font-hebrew);
  font-size: var(--font-size-body);
  color: var(--color-text);
  outline: none;
  transition: border-color 150ms ease;
}

/* 17px explicit (border-box: 16px of text + the 1px rule) —
   measured, not assumed: left to size itself, Chrome gives a
   text input ~19px here even at line-height:1, which drifted
   every rule ~2px lower than the comp and compounded down the
   stack. */
.contact-form__field input {
  height: 17px;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
  border-bottom-color: #005E8E;
}

/* 146px — Figma's own message field is far taller than the text
   ones: its label top sits at y=426 and its rule at y=599
   (node 471:83 → 471:101), i.e. 173px, of which the label takes
   ~26px. rows="3" alone rendered barely half that. */
.contact-form__field textarea {
  resize: none;
  height: 146px;
  line-height: 1.6;
  font-family: inherit;
}

/* Sits just ABOVE its own rule (Figma node 471:103 at y=577 vs
   the rule at y=599), at the fields' shared right edge — the
   old bottom:-18px hung it below the line entirely. */
.contact-form__counter {
  position: absolute;
  /* PHYSICAL right, deliberately — not inset-inline-start. This
     element carries its own direction:ltr (so the digits read
     left-to-right), and logical inset properties resolve against
     the ELEMENT's own direction, so inset-inline-start was
     resolving to the physical LEFT and parking 0/500 at the far
     end of the rule instead of the right edge Figma shows. */
  right: 0;
  bottom: 3px;
  font-size: 12px;
  color: #5A5A5A;   /* was #a1a1a1 -- 2.32:1, the worst on the site */
  direction: ltr;
}

/* Icon-first in the DOM, row-reverse landing it at the
   physical left of the label — same technique as
   .contact-hero__cta / .contact-about__more. */
/* 20px Regular with 1.6px tracking, in black — Figma-exact
   (node 471:82), noticeably larger than the 16px/500 it had
   been. margin-top 72px with no padding puts its own text top
   at y=671, matching the comp; the old 32px + 15px padding sat
   it far too close under the message field. */
/* THE NOTICE BESIDE THE FORM.

   The duty to inform under the Privacy Protection Law is a duty at the
   MOMENT of collection, not only on a page someone might find later. So
   one quiet line sits between the last field and the send button, with
   the policy a click away.

   Sized and coloured as a note rather than as content: it should be read
   once by whoever looks for it, and not compete with the fields. The 72px
   that separated the last field from the button now separates the field
   from this line, and the button keeps a smaller gap of its own. */
.contact-form__privacy {
  margin: 44px 0 0;
  max-width: 420px;
  font-family: var(--font-hebrew);
  font-size: 13px;
  font-weight: var(--font-weight-light);
  line-height: 20px;
  color: var(--color-text-muted);
}

.contact-form__privacy a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 200ms ease;
}

.contact-form__privacy a:hover {
  color: var(--color-brand-blue);
}

/* The button's own top margin was 72px measured from the last field.
   With the note in between, that distance is split. */
.contact-form__privacy + .contact-form__submit {
  margin-top: 26px;
}

.contact-form__submit {
  margin-top: 72px;
  align-self: flex-start;
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 13px;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--font-hebrew);
  font-size: 20px;
  font-weight: var(--font-weight-regular);
  letter-spacing: 1.6px;
  color: var(--color-text-strong);
  cursor: pointer;
  transition: color 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* #005E8E -- the blue the brand rules on this site are drawn in,
   and the same one the process steps turn on hover. The arrow is
   `currentColor` once the override below releases it, so the
   label and the arrow move together. */
.contact-form__submit:hover,
.contact-form__submit:focus-visible {
  color: #005E8E;
}

.contact-form__submit:hover svg,
.contact-form__submit:focus-visible svg {
  color: inherit;
}

/* Figma's arrow reads as the same near-black as the label, not
   the brand blue the earlier pass used. */
.contact-form__submit svg {
  color: var(--color-text-strong);
  transition: transform 150ms ease;
}

.contact-form__submit:hover svg {
  transform: translateX(-4px);
}

/* =========================================================
   STATS BAR — SECTION 04
   Plain white background (confirmed directly — distinct from
   rail item 04's own translucent #B2ACA8 tint, which belongs
   to the rail strip only, not this row). Rail label is now
   "QUANTITY / CALCULATOR" (was "PRECISION IN EVERY DETAIL").
   ========================================================= */
.contact-stats {
  position: relative;
  /* #F6F4F3, read straight off the Figma node that sits directly
     under the form section (104:125 — x-2, y1706, w1056, exactly
     where the 780px form band ends). An earlier pass had this as
     plain #FFFFFF on the claim it was "confirmed directly"; the
     node data says otherwise. */
  background-color: #F6F4F3;
}

.contact-stats__inner {
  display: flex;
  padding-inline-start: 87px;
  padding-block: var(--space-8);
}

/* The divider is drawn as a pseudo-element rather than as this
   box's own border, so it can be revealed from the top down.
   It sits on exactly the same line the border sat on: the box's
   inline-START edge, which in this RTL row is the physical
   right. Nothing moves -- the item keeps its width, and
   box-sizing:border-box means dropping the 1px border only
   gives that pixel back to the (centred) content. */
.contact-stats__item {
  position: relative;
  flex: 1;
  text-align: center;
}

.contact-stats__item::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 1px;
  background-color: var(--color-line);
  transform-origin: top center;
  pointer-events: none;
}

.contact-stats__item:first-child::before { content: none; }

.contact-stats__number {
  margin: 0;
  font-size: 40px;
  font-weight: var(--font-weight-light);
  color: var(--color-text);
  /* "40+" is a number followed by a NEUTRAL character. Left to
     the surrounding RTL paragraph, bidi reorders it to "+40" --
     which it did, on every one of these figures. Isolate the run
     in its own ltr context, the same way the Downloads band
     already does. */
  direction: ltr;
  unicode-bidi: isolate;
  /* Fixed-width figures, so a digit changing mid-count cannot
     nudge the number sideways. */
  font-variant-numeric: tabular-nums;
  transition: opacity 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =========================================================
   THE FIGURES' REVEAL
   js/stats-reveal.js adds .is-armed once (so nothing is ever
   hidden without the script running), then .is-revealed the
   first time the band is a third of the way into view.
   It never runs twice.
   ========================================================= */
[data-stats].is-armed .contact-stats__item::before {
  transform: scaleY(0);
}

[data-stats].is-armed.is-revealed .contact-stats__item::before {
  transform: scaleY(1);
  transition: transform 760ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--stat-delay, 0ms);
}

/* A shade lighter while the number is still moving; it settles
   to full as soon as it lands on its value. */
.contact-stats__number.is-counting {
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  [data-stats].is-armed .contact-stats__item::before { transform: scaleY(1); }
  .contact-stats__number { transition: none; }
  .contact-stats__number.is-counting { opacity: 1; }
}

.contact-stats__label {
  margin: var(--space-2) 0 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* =========================================================
   "הערות משפטיות" — SECTION 05 (LEGAL NOTES)
   Repurposed from the earlier lorem-ipsum testimonial slot —
   real legal/distributor copy now. #E9E5E3 confirmed directly
   (Rectangle 135). No rail item here, same as before — the
   rail stops after section 04.
   ========================================================= */
.contact-legal {
  background-color: #E9E5E3;
}

.contact-legal__inner {
  padding-inline-start: 87px;
  padding-block: var(--space-8);
}

.contact-legal__heading {
  margin: 0;
  font-size: 24px;
  font-weight: var(--font-weight-light);
}

.contact-legal__text {
  margin: var(--space-5) 0 0;
  max-width: none;
  color: var(--color-text-muted);
}

/* =========================================================
   CLOSING PHOTO — full-bleed, no rail (matches the approved
   Figma: the rail stops before this band and the footer).
   ========================================================= */
/* Full-bleed band, like the other two visual areas: Figma's own
   node (103:77) runs the full width of the 1140 frame, i.e. edge
   to edge, and there is no rail beside it. cover + centre keeps
   the aspect ratio and the focal point; the extra width is a
   wider crop, not a stretch. */
.contact-closing-photo {
  display: block;
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center;
}

/* =========================================================
   RIGHT RAIL
   No override needed here any more. Each section is full-width
   (see the page-width model note near the top), so the shared
   `inset-inline-start: 0` in section-rail.css already pins each
   rail to right:0 of the viewport at its original 87px width.
   ========================================================= */