/* ========================================================================== MISSION, VISION & VALUES (page 118) — the "Our Purpose" row (5b4b69f) Vision on the left: a target mark, "Our Vision", a two-line paragraph. Mission on the right: a photo panel carrying "Our Mission" and a longer paragraph. Both columns are 620px tall and stretch to the same height, and that much was always right — measured top, bottom and height matched to the pixel at every width. What did not match was the two headings. WHY The two sides were positioned by two different mechanisms. The Mission block sits in a container (6c59223) that is anchored to the TOP of its column and pushed down by a margin: +42px on desktop, -22px on tablet. Simple, and width-independent. The Vision block has no container. Its three widgets are direct children of the column (10b99b4), which CENTRES them — and the thing being centred is a stack whose measured height is dominated by a large negative margin on the target mark: -358px on desktop, -245px on tablet. So the heading's position came out of that arithmetic: heading = column padding + (free space) / 2 + mark margin + mark HEIGHT ... and the mark's height is a percentage of the column, so it changes with the viewport. Centre a stack whose height moves and the stack moves half as far, in the opposite direction, at every width. The two sets of numbers were hand-tuned until they agreed at 1200px and up. Nowhere else did they: 1440 0.5px apart 1026 27.4px apart 1200 0.5px apart 1024 164.5px apart 1100 2.1px apart 768 139.4px apart At tablet the gap is the whole defect: "Our Mission" sits at the top of the photo while "Our Vision" is stranded 140px lower with empty space above and below it. THE FIX — give both sides the Mission block's mechanism The target mark is decoration. It hangs up and to the left, deliberately outside the column, and nothing about the text should depend on how tall it happens to be. Taking it out of the flow is the whole fix: once it is out, the Vision heading is just "column top plus an offset", exactly like the Mission heading, and the two offsets can be stated once and hold at every width because every term in them is now a constant. Both headings land at 126px from the top of the row, which is where desktop already had them (126.5 and 127). So this does not move the approved desktop composition — it makes the rest of the range agree with it: 1440, 1200, 1100, 1026, 1024, 900, 768 headings 0.0px apart The mark keeps its size and its horizontal position exactly, at every width (measured: 300x169 at 1440, 253x143 at 768, same left edge as before). Only its vertical position changes, and only where it was wrong: it now sits at the 12.8px it already had on desktop instead of drifting between 5.6 and 72. NOT ON PHONES. Below 768 the two stack, one above the other, and "aligned with each other" stops meaning anything. Everything here is behind min-width: 768px and the phone layout is left byte-identical. Nothing here is a new offset invented to drag something into place. The two numbers below are the positions the design already used on desktop. ========================================================================== */ @media (min-width: 768px) { /* ---------------------------------------------------------------------- THE VISION COLUMN Stops centring. Its content now starts at a stated distance from the top of the column, the way the Mission container always has. 122px puts the heading on 126 — the column begins 4px into the row. `position: relative` is only here to give the mark below something to be positioned against. -------------------------------------------------------------------- */ .elementor-118 .elementor-element.elementor-element-10b99b4 { position: relative; justify-content: flex-start; padding-block-start: 122px; } /* ---------------------------------------------------------------------- THE TARGET MARK Out of the flow, so its height stops setting the heading's position. Taken out of the flow it would otherwise re-measure itself: an absolutely positioned box shrink-to-fits instead of filling its parent, and the mark is capped by the column rather than by its own 300px on narrow screens. `padding-inline: inherit` restores the column's own side padding onto the box, and `fit-content` within `100%` reproduces "300px, or the column if that is narrower" — the two rules together return it to the exact width and left edge it had in flow, at every breakpoint. 8.8px is the distance below the column's top edge where this mark already sat on desktop. It is kept, and now it is kept everywhere. The editor's own side offset (margin-left: -121px on desktop, 0 on tablet) still applies on top, so the mark still hangs out to the left — and the Arabic sheet still mirrors it, because only the block direction is touched here. -------------------------------------------------------------------- */ .elementor-118 .elementor-element.elementor-element-a31a179 { position: absolute; inset-block-start: 8.8px; inset-inline-start: 0; margin-block-start: 0; padding-inline: inherit; inline-size: fit-content; max-inline-size: 100%; } /* * The heading's own -75px (desktop) / -32px (tablet) was part of the same * correction, pulling the title back up through the centred stack. With the * stack gone there is nothing left to correct. */ .elementor-118 .elementor-element.elementor-element-862736a { margin-block-start: 0; } /* ---------------------------------------------------------------------- THE MISSION BLOCK One value instead of two: 41px at every width, rather than +42 on desktop and -22 on tablet. 41 lands its heading on the same 126 as the Vision heading, 1px from where desktop already had it. -------------------------------------------------------------------- */ .elementor-118 .elementor-element.elementor-element-6c59223 { margin-block-start: 41px; } }