/* =========================================================
   ABOUT.CSS
   Desktop only — built to the approved Figma screenshot, same
   RTL conventions as hero.css: no direction overrides, physical
   left/right comes from flex-start/flex-end in this dir="rtl"
   document.

   Body paragraph is Lorem Ipsum in the approved Figma itself
   (not yet real copy) — implemented verbatim to match.

   Media is the approved about-image.mp4 — a 1920x1080, ~7.8min,
   891MB source file, used here as-is per direct instruction.
   Expect this to be swapped for a web-optimized version later;
   nothing else in this file should need to change when it is.
   ========================================================= */

/* Content is first in the DOM (reading order before media), but
   the approved Figma puts the media on the physical RIGHT and
   the text on the physical LEFT — row-reverse flips it there
   without reordering the markup, same technique used for the
   eyebrow line and .hero__cta in hero.css.
   No gap: the content block's own background tile sits flush
   against the media, per the approved Figma — align-items:
   stretch makes that background fill the row's full height
   (driven by the media's own landscape aspect-ratio) instead of
   just wrapping the text.
   .content-grid (in the HTML, alongside this class) caps and
   centers this row at --page-max-width with no inset padding —
   same shared grid every section below Hero uses (see layout.css)
   — so the gray panel and media sit flush against the grid's own
   edges (matching the approved Figma's frame edge to edge), not
   inside a page-shell-padded card, while still keeping this row's
   left/right edges on the same vertical line as every other
   section. */
.about__inner {
  display: flex;
  flex-direction: row-reverse;
  /* `center`, not `stretch`. Stretch forced the video's box to
     the text column's height, and a landscape video can only
     fill a box that tall by losing its sides. Centred, the video
     keeps its own height and its own proportions, and is never
     cropped. */
  align-items: center;
  gap: 0;
}

/* .section's padding-block puts equal space above and below —
   but the approved Figma has this section sitting flush against
   Hero above, with no gap. Below, per direct correction, the
   173px gap before Solutions' heading belongs to THIS section,
   not to Solutions' own top padding: About's own box extends
   173px past the video/content row, and Solutions (padding-
   block-start: 0 again, see solutions.css) starts immediately
   after that extension — so the heading's absolute position on
   screen is unchanged, only which section owns the space.
   background is a hard-stop gradient rather than a flat color:
   the top portion (behind .about__inner's text/video row) stays
   #ECECEC, matching .about__content's own gray so the full-bleed
   side margins read as a continuation of the panel instead of a
   white gap (same reasoning as before) — but the trailing 173px
   extension is #F8F9F9, Solutions' own surface tone (see
   solutions.css), so it reads as a seamless lead-in to Solutions
   below rather than an extension of About's own gray. The hard
   stop sits exactly at .about__inner's own bottom edge (100% -
   173px, i.e. the video's bottom edge) regardless of that row's
   dynamic height. */
.about {
  /* the media's bleed overhangs this box on the physical right */
  overflow: hidden;
  padding-block: 0;
  padding-block-end: 173px;
  background: linear-gradient(to bottom, #ECECEC calc(100% - 173px), #F8F9F9 calc(100% - 173px));
}

/* 500px: matches the approved Figma's text:media split (roughly
   a third of the 1140px frame) and keeps the heading on one line
   (it wraps to two below ~480px). Padding tightened from an
   earlier space-8 pass — the approved Figma sits noticeably
   tighter around the text. */
.about__content {
  flex: 0 1 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* --about-air is added to the original 32px at BOTH ends.
     .about__inner is align-items:stretch, so the video on the
     physical right grows with this column and the two stay the
     same height -- the air costs nothing in alignment. */
  /* 0: this column's panel is the same #ECECEC as the band
     behind it, so its padding is invisible as "air" -- all it
     does is make the band taller than the video beside it. */
  --about-air: 0px;
  padding: calc(var(--space-6) + var(--about-air)) var(--space-7);
  background-color: #ECECEC;
}

/* ---------------------------------------------------------
   EYEBROW
   Small label + short line, matching the approved Figma.
   Line is first in the DOM (decorative, aria-hidden) but sits
   at the physical LEFT of the label — row-reverse flips it
   there without reordering the markup, same technique as
   .hero__cta in hero.css.
   .about__content stretches this to the column's full width
   (it's a flex item in a column flex container), so it also
   needs justify-content — row-reverse's main-start is the
   physical LEFT in this RTL document, so flex-start (the
   default) packed the whole line/label pair against the left
   edge instead of the right. flex-end packs it against
   row-reverse's main-end, the physical right, matching Figma.
   --------------------------------------------------------- */
.about__eyebrow {
  display: inline-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-text-muted);
}

/* The 16px dash that used to sit beside the label has been
   removed from the markup at the designer's request, so the
   eyebrow's box is now exactly the width of its own sentence --
   which is what .about__rule below measures itself against.
   (contact.css keeps its own .contact-about__eyebrow-line; that
   one is untouched.) */

/* ---------------------------------------------------------
   EYEBROW RULE
   The brand's blue/red rule, sized to the eyebrow's own ink.
   .about__eyebrow-group is a content-width block so the rule
   can simply be 100% of it; align-self:flex-start pins that
   block to the column's inline-start, which in this RTL page
   is the physical RIGHT -- the same edge the eyebrow text
   already sits on.
   --------------------------------------------------------- */
.about__eyebrow-group {
  align-self: flex-start;
}

.about__rule {
  display: flex;
  width: 100%;
  height: 2px;
  /* tight to the sentence it belongs to */
  margin-block-start: 7px;
  /* The draw runs from the physical RIGHT, with the reading.
     transform-origin is PHYSICAL and is never flipped by
     direction, which is exactly what is wanted here. */
  transform-origin: right center;
}

/* DOM order is red then blue; in this RTL row the first child
   lands physically RIGHT, which is where the comp puts red.
   70 / 30, measured off the reference crop. */
.about__rule-segment--red {
  flex: 30;
  background-color: #CC2F3A;
}

.about__rule-segment--blue {
  flex: 70;
  background-color: #005E8E;
}

/* js/about-reveal.js arms the rule, then draws it once the
   section comes into view and stops watching. Without the
   script neither class is ever added and the rule is simply
   there, at full width, from the start. */
/* NO transition on this one. The class is added by script after
   the page has rendered, and a transition here would animate the
   rule from its full width DOWN to nothing first -- a visible
   shrink before the draw. Arming is instant; only the draw moves. */
.about__rule.is-armed {
  transform: scaleX(0);
}

.about__rule.is-armed.is-drawn {
  transform: scaleX(1);
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .about__rule.is-armed {
    transform: scaleX(1);
    transition: none;
  }
}

/* ---------------------------------------------------------
   HEADING
   h2 already carries font-size-h2 / weight-light / heading
   line-height from base.css — no overrides needed here.
   --------------------------------------------------------- */
.about__heading {
  margin: 0;
  margin-block-start: var(--space-5);
  /* 1.3 rather than base.css's 1.15: this heading now runs to
     two lines, and at 1.15 the Hebrew ascenders and descenders
     of one line nearly meet the other's. */
  line-height: 1.3;
}

/* ---------------------------------------------------------
   PARAGRAPH
   --------------------------------------------------------- */
.about__paragraph {
  margin-block-start: var(--space-6);
  max-width: none;
  /* 17px / 400, up from the inherited 16px / 300. The size was
     never really the problem -- 16px is already the standard
     floor for body copy -- but Light at this size has almost no
     stroke left on a 1x screen, which is why the passage read
     confidently on a Retina display and faintly on an office
     monitor. Regular is what puts the ink back; the extra pixel
     is a small push on top of it. Line-height stays at the
     site's 1.6, so the measure stays near 50 characters. */
  font-size: 17px;
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

/* 32px is the gap from the heading down to the first paragraph;
   between paragraphs of one passage that reads as a break, so
   the later ones sit closer. */
.about__paragraph + .about__paragraph {
  margin-block-start: var(--space-5);
}

/* The brand name set in Latin inside a Hebrew sentence.
   `unicode-bidi: isolate` makes the run an atomic, neutral unit:
   the bidi algorithm then orders the Hebrew around it exactly as
   if the word were not there, so no sentence flips and no full
   stop jumps to the front of a line. base.css already switches
   anything marked lang="en" to the English face; the family is
   restated here so the rule reads on its own. */
.about__brand {
  /* "Blinker Regular" first: it is the real 400 file, declared
     under its own family name in variables.css (the reasoning
     is written out there). var(--font-english) stays behind it
     as the fallback, so if that file ever goes missing this
     word renders in Blinker Light exactly as it used to rather
     than dropping to Arial. */
  font-family: "Blinker Regular", var(--font-english), Arial, sans-serif;
  font-weight: inherit;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---------------------------------------------------------
   MEDIA
   No explicit height or aspect-ratio: align-items: stretch on
   .about__inner makes this match .about__content's own height
   (eyebrow + heading + paragraph + padding), while flex: 1 lets
   it fill the remaining row width — together landing on the
   same landscape proportions as the approved Figma. object-fit
   crops the source video to whatever that resolves to.
   --------------------------------------------------------- */
.about__media {
  flex: 1;
  /* Bleeds past the 1140 frame to the window's physical RIGHT
     edge, so the video gets every pixel of width available and
     is as large as it can be at its own proportions.
     100% here is .about__inner's width; (inner - viewport) / 2
     is negative on any window wider than the frame, which is
     exactly the overhang needed to reach the edge.
     PHYSICAL margin-right, not a logical one: the media lands on
     the physical right through row-reverse, and a logical
     property would resolve to the other side in this RTL page.

     --about-media-gap is held back from the overhang, so the
     video stops short of the window edge instead of running
     into it. The expression is deliberately NOT floored at 0:
     on a window barely wider than the frame it turns positive,
     which pulls the video back INSIDE the 1140 column and keeps
     the same gap there too. That narrow case is the one where
     a video touching the window edge looked wrong. */
  --about-media-gap: 48px;
  margin-right: calc((100% - 100vw) / 2 + var(--about-media-gap));
}

.about__video {
  display: block;
  width: 100%;
  /* `auto`, so the height comes from the file's own proportions.
     Nothing is cropped, there is no letterbox, and there is no
     object-fit to argue with -- the element simply IS the video's
     shape at whatever width the column gives it. */
  height: auto;
}