/* =========================================================
   TECHNICAL-SERVICE.CSS
   "שרות טכני" (Technical Services) — desktop, built to the
   approved Figma frame (node 19-140, 1140 x 2751). Direct
   node-metadata inspection; every px below is a measured
   Figma value unless a comment says otherwise.

   Follows the page-width model established on Contact:
   sections run the FULL viewport width and carry the band
   colour; the inner wrapper is capped at --page-max-width and
   centred; the numbered rail is an absolute overlay that lands
   on right:0 of the viewport because its section is full-width.
   Visual areas (photos) leave the flow and bleed to the outer
   edge, with their in-flow slot preserved so no text moves.
   ========================================================= */

/* Jost stands in for Century Gothic (commercial, unlicensed for
   embedding) — same substitution the Contact page uses. */
@font-face {
  font-family: "Jost";
  src: url("../fonts/Jost-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Figma: the header plate is #F9F8F6 with X0 Y4 Blur4 #D9D9D9,
   the same treatment Contact uses. */
.site-header {
  box-shadow: 0px 4px 4px 0px #D9D9D9;
}

/* Active nav underline in this page's own red/blue pair, matching
   Contact's inner-page treatment. */
.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;
}

/* ---------------------------------------------------------
   SHARED: capped, centred inner wrappers.
   1140 total = 1053 content zone + 87 reserved for the rail.
   --------------------------------------------------------- */
.tech-hero__inner,
.tech-service__inner,
.tech-process__inner,
.tech-consult__inner {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
}

/* ---------------------------------------------------------
   SHARED: the two-tone rule (blue on the left, red on the
   right), sitting UNDER its label with its right edge flush to
   the type. 67.6px in the hero (Figma node 213:44), 42px in the
   service blocks (node "Group 33").

   Note: the frame also contains a wider 54px line per block,
   offset 40px to the right — it does not appear in the canvas
   at all, so it is treated as a stray/hidden layer and not
   reproduced. The approved crops show exactly one rule.
   Segment split ~57/43, read off those crops.
   --------------------------------------------------------- */
.tech-hero__rule,
.tech-service__rule,
.tech-process__rule {
  display: flex;
  height: 2px;
}

.tech-hero__rule { width: 67.6px; }
.tech-service__rule,
.tech-process__rule { width: 42px; }

/* DOM order is red then blue; in this RTL row the first child
   lands physically RIGHT, which is where the crops put red. */
.tech-rule__segment--red {
  flex: 43;
  background-color: #CC2F3A;
}

.tech-rule__segment--blue {
  flex: 57;
  background-color: #005E8E;
}

/* =========================================================
   HERO — Figma y79–749 (670 tall), rail item "00".
   The photo (node 210:11, w1212) spans the whole band and the
   wash above it creates the light panel the text sits on — it
   is not a column ending mid-frame.
   ========================================================= */
.tech-hero {
  position: relative;
  height: 670px;
  /* Fallback tone behind the photo; also the colour the wash
     resolves to, so the band never flashes white. */
  background-color: var(--color-surface);
  overflow: hidden;
}

.tech-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.tech-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ESTIMATE, not a measurement: Figma's wash (node 210:25) is a
   flattened vector whose gradient stops the export does not
   expose. Stops are anchored to the band's centre so the wash
   reaches full strength just where the text column starts
   (the H1's left edge sits at centre +37px), at any viewport. */
.tech-hero__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(247, 247, 245, 0) calc(50% - 160px),
    rgba(247, 247, 245, 0.86) calc(50% + 40px),
    rgba(247, 247, 245, 0.86) 100%
  );
  pointer-events: none;
}

.tech-hero__inner {
  position: relative;
  height: 100%;
  padding-inline-start: 87px;
}

/* Right edge of the hero type sits at Figma x1023 (H1 1028,
   eyebrow 1027, subheading 1020, paragraph 1017 — 30px inside
   the 1053 content zone). padding-block-start 92px puts the
   two-tone rule on its measured y. */
.tech-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-inline-start: 30px;
  /* 117px puts the SILANDE label on its measured y (Figma 196,
     i.e. 117 into the band); the rule follows 4px under it. */
  padding-block-start: 117px;
}

.tech-hero__eyebrow {
  margin: 0;
  font-family: "Jost", var(--font-english), sans-serif;
  font-size: 8px;
  font-weight: var(--font-weight-regular);
  line-height: 18px;
  letter-spacing: 1.6px;
  color: var(--color-text);
}

.tech-hero__rule {
  margin-block-start: 4px;
}

.tech-hero__heading {
  margin: 77px 0 0;
  font-size: 64px;
  font-weight: var(--font-weight-light);
  line-height: 63px;
  color: var(--color-text-strong);
}

.tech-hero__subheading {
  margin: 2px 0 0;
  max-width: none;
  font-size: 24px;
  font-weight: var(--font-weight-regular);
  line-height: 63px;
  color: var(--color-text-strong);
}

.tech-hero__paragraph {
  margin: 4px 0 0;
  max-width: 348px;
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
  color: var(--color-text-strong);
}

/* =========================================================
   SERVICE BLOCKS 01–04
   Each band is one photo (546/545 wide) beside a colour panel
   (507 wide). The SECTION carries the panel colour, so that
   colour fills everything the photo does not cover and the band
   reads as one continuous surface at any width.
   ========================================================= */
/* 403 = the photo's own 307 plus 48px of panel above and below
   it (--tech-service-air). The photo, the type and the spacing
   between them are untouched: the band simply grew around them,
   so each block now has room to breathe against the one below.
   box-sizing is border-box site-wide, so .tech-service__inner's
   height:100% still resolves to exactly 307 of content. */
:root {
  --tech-service-air: 48px;
}

.tech-service {
  position: relative;
  height: calc(307px + var(--tech-service-air) * 2);
}

/* Blocks 01 and 03: photo physically LEFT. DOM order is photo
   then content, and in this RTL document the first child lands
   physically RIGHT — so these need row-reverse. Blocks 02/04
   want the photo on the right and therefore a plain row. */
.tech-service--image-start .tech-service__inner {
  flex-direction: row-reverse;
}

/* PANEL TONE — one step per block, lightening down the page.

   The colour used to be carried by --image-start / --image-end,
   which meant it alternated with the photo's side: 01 and 03
   got one tone, 02 and 04 the other. Blocks 02 and 03 therefore
   came out IDENTICAL (#F6F5F3 both), which is what read as one
   undivided panel across the join between them.

   Per direct correction, each of the four now has its own tone.
   The ladder runs from the darkest at 01 to the lightest at 04
   -- about two points of each channel per step, which is below
   the threshold of a side-by-side comparison but enough to mark
   where one band ends and the next begins. The direction is
   deliberate: the hero above is #F7F7F5 and "תהליך העבודה" below
   is #FAFAFA, so brightening downward lands the band's last
   block one step short of the section that follows it instead of
   putting its darkest value against the page's lightest.

   01 and 03 keep exactly the tones they already had; only 02 and
   04 move, and each by one step. Nothing but background-color is
   touched here -- 03's own height is still its own. */
.tech-service {
  background-color: #F6F5F3;   /* fallback for any further block */
}

.tech-service--01 { background-color: #F2F0F0; }   /* unchanged */
.tech-service--02 { background-color: #F4F2F1; }   /* was #F6F5F3 */
.tech-service--03 { background-color: #F6F5F3; }   /* unchanged */
.tech-service--04 { background-color: #F8F7F6; }   /* was #F2F0F0 */

/* Block 03 is 308 tall rather than 307 (Figma node 210:178). */
.tech-service--03 {
  height: calc(308px + var(--tech-service-air) * 2);
}

.tech-service__inner {
  display: flex;
  align-items: stretch;
  height: 100%;
  /* No padding here: the photo is a stretch item of this row and
     has to reach the band's top and bottom edges. The air the
     band gained belongs to the TEXT column alone -- see
     .tech-service__content below. */
  padding-inline-start: 87px;
}

/* The photo sits at its Figma width (546/545) rather than
   bleeding to the screen edge. Per direct decision: at this band
   height a bled photo had to give up 28–36% of its height to
   cropping, and these are content photos with a clear subject.
   The section's own panel colour continues past the photo to the
   viewport edge, so the band still reads full-width with no white
   margin — only the picture itself stops where the comp stops it. */
/* ONE vertical line down all four blocks.
   The content zone is 1053 wide (1140 less the 87px rail). The
   Figma's 546 and 545 were each measured from the end the photo
   happens to sit at, so the two edges landed at 546 and at
   1053-545=508 from the zone's right -- 38px apart, which is the
   zig-zag. 50% puts the boundary at 526.5 from either end, so
   every photo edge and every text column edge stack on the same
   line whichever side the photo is on, and all four photos and
   all four text columns come out the same width. */
/* align-self + aspect-ratio, per direct correction: the photo
   had gone nearly square. .tech-service__inner is
   align-items:stretch, so when the band grew by
   --tech-service-air at each end the photo -- a stretch item --
   grew with it, from the comp's 546x307 (1.78, a wide frame) to
   527x403 (1.31). object-fit:cover then had to throw away a
   third of each picture's width to fill that taller box, which
   is what read as "square".

   align-self:center stops it stretching and aspect-ratio pins it
   back to the comp's own 546:307. The rendered frame is 527x296
   again, the full width of each picture is back, and the air the
   band gained now sits above and below the photo exactly as it
   already does around the text. Nothing else moves: the band's
   height, the text column, the rail and every other measurement
   are untouched. */
.tech-service__photo {
  flex: 0 0 50%;
  align-self: center;
  aspect-ratio: 546 / 307;
}

/* Fills its slot exactly, so the rendered box keeps the comp's
   546x307 / 545x307 and ~97% of each photo survives the crop.
   Per direct decision: bleeding these to the screen edge cost
   28–36% of each photo's height, and unlike the hero these are
   content photos with a clear subject. The section's own panel
   colour still runs to the viewport edge, so the band reads
   full-width with no white margin — only the picture stops where
   the comp stops it. cover + centre keeps the aspect ratio. */
.tech-service__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.tech-service__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Type right edge: x1018 on photo-left blocks (35px inside the
   1053 content zone) and x428 on photo-right blocks (79px
   inside the 507 panel). */
.tech-service--image-start .tech-service__content {
  padding-inline-start: 35px;
}

.tech-service--image-end .tech-service__content {
  padding-inline-start: 79px;
}

/* ONE rhythm for all four blocks. The frame's own per-block
   values drift (numeral tops at 2/19/14/15, rules at 135/162/
   150/151) but the approved crops show the four bands spaced
   identically, so blocks 03/04 — where the frame and the crops
   agree — set the rhythm for all of them. */
/* The band grew by --tech-service-air at each end. All of that
   air goes to this column, so the type keeps its distance from
   the band edges while the photo beside it runs the full height.
   The 15px is the original rhythm, measured from where the
   content used to start. */
.tech-service__content {
  padding-block-start: calc(15px + var(--tech-service-air));
  padding-block-end: var(--tech-service-air);
}

/* Open Sans Hebrew Light 48px in #C9C9C9 — Figma-exact.
   font-family is stated explicitly and the element carries NO
   lang="en": base.css switches anything marked lang="en" to the
   English face (Blinker), which is what these numerals were
   wrongly rendering in.
   line-height 70px (not the box's 74) so the heading below lands
   on its measured y with no negative margin. The numeral
   overhangs the type column by 7px (Figma x1025 vs 1018). */
.tech-service__number {
  margin: 0;
  margin-inline-start: -7px;
  font-family: var(--font-hebrew);
  font-size: 48px;
  font-weight: var(--font-weight-light);
  line-height: 70px;
  color: #C9C9C9;
}

/* nowrap: all four headings are single-line in the comp (their
   boxes are 49px tall at a 50px line-height). Without it a
   heading that measures slightly wide in a fallback font wraps
   and drags the whole block 50px down — which is exactly what
   happened to 02 before this was pinned. There is ~470px of
   clear panel beside the type, so a single line cannot collide
   with the photo. */
.tech-service__heading {
  margin: 0;
  max-width: 253px;
  white-space: nowrap;
  font-size: 36px;
  font-weight: var(--font-weight-regular);
  line-height: 50px;
  color: var(--color-text-strong);
}

/* Rule 16px under the heading, right edge flush with the type. */
.tech-service__rule {
  margin-block-start: 16px;
}

.tech-service__paragraph {
  margin: 13px 0 0;
  max-width: 350px;
  font-size: 16px;
  font-weight: var(--font-weight-light);
  line-height: 30px;
  color: var(--color-text-strong);
}

/* Arrow first in the DOM and row-reverse, so it sits physically
   LEFT of the label — the pattern used across this site. */
.tech-service__cta {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 17px;
  /* auto pushes the link to the foot of the band. Anchoring it to
     the paragraph instead left block 01 (three lines of copy) ~30px
     below the others; in the crops all four links sit level. */
  margin-block-start: auto;
  margin-block-end: 20px;
  font-size: 16px;
  /* Figma says Bold; only Light 300 and Regular 400 exist as
     real files for Open Sans Hebrew, so this reuses the site's
     --font-weight-emphasis rather than faking a 700. */
  font-weight: var(--font-weight-emphasis);
  color: var(--color-text-strong);
  text-decoration: none;
}

.tech-service__cta-arrow {
  flex: none;
  color: var(--color-text-strong);
  transition: transform 150ms ease;
}

.tech-service__cta:hover .tech-service__cta-arrow {
  transform: translateX(-4px);
}

/* =========================================================
   "תהליך העבודה שלנו" — Figma y1978–2400.
   Page ground here is the frame's own #FAFAFA: no panel rect
   sits behind this band.
   ========================================================= */
/* --tech-process-air is added at BOTH ends: 46 -> 96 above the
   heading, and the 62 of slack the fixed height already left
   under the last line of step text -> 112. The band's own
   rhythm (heading 67, gap 67, steps 181) is untouched; only
   the white around it grows. */
.tech-process {
  position: relative;
  background-color: #FAFAFA;
  --tech-process-air: 50px;
  padding-block: calc(46px + var(--tech-process-air)) 0;
  height: calc(423px + var(--tech-process-air) * 2);
}

/* The heading respects the 87px rail reserve; the step row below
   deliberately does not — in the comp the four columns span the
   full 1140 frame (step 01's box runs to x1140). */
.tech-process__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-inline-start: 93px;
}

.tech-process__heading {
  margin: 0;
  max-width: 315px;
  font-size: 36px;
  font-weight: var(--font-weight-regular);
  line-height: 50px;
  color: var(--color-text-strong);
}

/* Same two-tone rule as everywhere else on the page — this one
   had been left as a plain grey hairline. 15px under the heading,
   right edge flush with it (Figma node "Group 77", y2088). */
.tech-process__rule {
  margin-block-start: 15px;
}

/* Four equal columns across the full frame. DOM order is 01→04
   and in this RTL row the first child lands physically RIGHT,
   which is where Figma puts 01 (centre x1002) — so a plain row
   is correct here, no row-reverse. */
.tech-process__steps {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  margin-block-start: 67px;
}

.tech-process__step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 15px tick between columns (Figma "Line 52/53/54", y2234 —
   79px below the row's own top). Physical `right` on purpose:
   it must not follow any direction override. */
.tech-process__step:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 79px;
  right: -7.5px;
  width: 15px;
  height: 1px;
  background-color: var(--color-line);
}

/* Open Sans Hebrew Regular — same lang="en" trap as the block
   numerals above. */
.tech-process__step-number {
  margin: 0;
  font-family: var(--font-hebrew);
  font-size: 24px;
  font-weight: var(--font-weight-regular);
  line-height: 13px;
  color: #3C3C3C;
}

.tech-process__step-title {
  margin: 28px 0 0;
  max-width: 275px;
  font-size: 16px;
  font-weight: var(--font-weight-emphasis);
  line-height: 28px;
  color: var(--color-text-strong);
}

.tech-process__step-text {
  margin: 28px 0 0;
  max-width: 209px;
  font-size: 16px;
  font-weight: var(--font-weight-light);
  line-height: 28px;
  color: var(--color-text-strong);
}

/* =========================================================
   "צריכים ייעוץ טכני לפרויקט?" — CLOSING CONSULT BAND

   ESTIMATED, NOT MEASURED. This band is visible in the Figma
   canvas screenshot but its layers are absent from everything
   the Figma API returns for this frame (metadata, design
   context and Figma's own render all show empty space here),
   so its geometry and colour are built to match the rest of the
   page rather than read off the comp. Re-measure and correct
   once those layers come back.
   ========================================================= */
.tech-consult {
  position: relative;
  height: 300px;
  background-color: #F6F5F3;
}

.tech-consult__inner {
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
  height: 100%;
  padding-inline-start: 87px;
}

.tech-consult__photo {
  flex: 0 0 546px;
}

/* Same treatment as the service photos above, so the closing
   band matches them. */
.tech-consult__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.tech-consult__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-inline-start: 35px;
}

.tech-consult__heading {
  margin: 0;
  /* Single line, as it reads in the canvas screenshot. */
  white-space: nowrap;
  font-size: 36px;
  font-weight: var(--font-weight-regular);
  line-height: 50px;
  color: var(--color-text-strong);
}

.tech-consult__paragraph {
  margin: 18px 0 0;
  max-width: 350px;
  font-size: 16px;
  font-weight: var(--font-weight-light);
  line-height: 30px;
  color: var(--color-text-strong);
}

.tech-consult__cta {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 17px;
  margin-block-start: 24px;
  font-size: 16px;
  font-weight: var(--font-weight-emphasis);
  color: var(--color-text-strong);
  text-decoration: none;
}

/* =========================================================
   RAIL — item 04 sits on a translucent warm tint and Figma
   switches its number, rule and label to white.
   ========================================================= */
.section-rail__number--light,
.section-rail__label--light {
  color: #FFFFFF;
}

.section-rail__divider--light {
  border-block-start-color: #FFFFFF;
}