@charset "UTF-8";
/*!
 * About page — the rules main.min.css is missing.
 *
 * html-remotesensei/src/page-about.html references a handful of classes that were
 * never authored in main.scss (verified against the compiled staging bundle):
 * value-item, tag-pill, secondary-title, section-title, text-dark-slate,
 * text-gray-italic, text-gray-muted, border-light-gray.
 * On the Elementor page those elements were styled by Elementor's per-widget CSS,
 * which is exactly what this migration deletes — so they need real rules.
 *
 * Written against the design-system tokens (css/rs-design-tokens.css) rather than
 * hex literals, per migration plan §7b: "new work uses var(--rs-*)".
 *
 * Scoped to #rs-about so nothing here can leak into a page still rendered by
 * Elementor. When Denis next touches main.scss these should move there and this
 * file should disappear.
 */
#rs-about .text-gray-muted {
  color: var(--rs-text-secondary, #5A6B6F);
}

/* The italic runs in the two founder-story headings ("one question", "— you're
   facing the exact same problem"). Figma paints both at black-prime and separates
   them by WEIGHT alone — 400 against the surrounding 700 (text nodes 37520:30095
   and 37595:6668, both fill #34383C with no per-run colour override). This rule
   used to ask for --rs-text-tertiary, a token that does not exist in
   rs-design-tokens.css, so it silently fell through to the literal #7C8D91 — a
   grey that is not a step of any palette ramp. */
#rs-about .text-gray-italic {
  color: var(--rs-black-prime, #34383C);
}

#rs-about .text-dark-slate {
  color: var(--rs-black-prime, #34383C);
}

/* Card hairlines ("This is not for every company", "one question on a scrap of
   paper") and the belief separators in "What we stand for".
   grey/light/40, per Raman's review — NOT --rs-border-hairline, which is an alias
   for grey/light/20 (#B2C9CB) and reads as a visible blue-grey rule. */
#rs-about .border-light-gray,
#rs-about .value-item > .border-bottom {
  border-color: var(--rs-grey-light-40, #EBF2F2) !important;
}

/* Logo strip: the 40px between the tagline and the logos is now Raman's shared
   `.rs-trusted-strip` frame (logo-marquee.scss), applied on the wrapper in
   template-about.php — the per-page override this replaced was the same 40px
   arrived at by hand, and About's `pt-3`/`py-lg-5` band spacing went with it
   ("on the About us page … we have different margins - 60px instead of 40px;
   lets use 40px top by default", 2026-08-19). Nothing to scope here any more. */
/* Timeline year-tab label ("• The Question"). Bootstrap gives it the 8/16 padding
   (py-2 px-3) and the white fill; everything below is the Figma tag component
   I37599:6770;37595:6699, which is NOT a pill — it is the same 4px radius as every
   other card on the page. The name stays `tag-pill` because that is the class
   Denis's page-about.html uses; only the geometry is corrected.
   Coral is #F35B54 here, one step off Bootstrap's .text-danger (#FF6D66), which is
   why the utility had to come off the markup — it sets colour with !important. */
#rs-about .tag-pill {
  border-radius: var(--rs-radius-xs, 4px); /* -xs is the 4px step; -s is 5px. */
  color: #F35B54;
  font-size: 14px;
  gap: 12px;
  margin-bottom: 20px; /* Figma card gap; Bootstrap has no 20px spacer (mb-3 = 16). */
}

#rs-about .tag-pill__dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Founder-story quote — design-system style "Quote Card Text - S" (Figma text node
   37595:6471): Lora 400 16px/165%, #34383C. `fst-italic` in the markup supplies the
   italic. Font size is already 16px from the body scale, so it is not restated.
   NOTE: the emphasised sentence inside the quote is Lora 700 in Figma, but only
   Lora 400 (normal + italic) is self-hosted — see css/rs-fonts.css — so that run
   renders as a synthesised bold until a 700 face is added. */
#rs-about .about__quote p {
  font-family: var(--rs-font-serif, Lora, ui-serif, Georgia, serif);
  line-height: 1.65;
  color: var(--rs-black-prime, #34383C);
}

/* Team discipline chips. Figma wraps them at 415px (frame 37648:6445) across two
   rows; the template's column is wider than that so the cap lives here, and both
   languages then break where the design breaks. At the previous 358px the Polish
   labels ("Eksperci od bezpieczeństwa w IT" alone is 238px) needed three rows. */
#rs-about .about__disciplines {
  max-width: 415px;
}

/* The typed headline. Sized between h2 and h1 — it is the loudest line on the
   lower half of the page but must not compete with the hero h1.
   min-height is set in main.scss's media queries so the typing animation does not
   reflow the page as characters land. */
#rs-about .secondary-title {
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem);
  line-height: var(--rs-h2-lh, 1.2);
}

#rs-about .section-title {
  line-height: var(--rs-h2-lh, 1.2);
}

/* The belief pull-quote ("Software does not change how people work... — Habits do").
   The only .display-3 on the page.

   Staging kept this inside the viewport with a <br> in the middle of the Polish word
   "Oprogramowa<br>nie" — a hard break mid-word, which we deliberately did not carry
   over. Removing it is correct, but it left the real constraint exposed: at 375px
   this box is 303px wide and "Oprogramowanie" does not fit, so the word spilled 41px
   and pushed the whole PL document 5px past the viewport. English never hits it.

   hyphens does the tidy job (WPML sets lang="pl-PL", so the browser hyphenates by
   Polish rules); overflow-wrap is the guarantee for any word hyphenation refuses to
   split. Neither changes how the line renders when it already fits — EN is untouched.

   Expect this on every migrated page: Polish runs 10-15% longer and compound nouns
   are where large display type breaks out of its box. */
#rs-about .display-3 {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Reliability Protocol sticky stack.
   These four offsets are Elementor per-page CSS on staging, so they disappear the
   moment the page stops being an Elementor document. Ported verbatim (staging
   spells the fourth one "fouth"; corrected here since we own both ends now).

   ONE EXCEPTION to "verbatim", below: the intro column. It is the left-hand
   sticky heading of this section — the one in the screenshot on Raman's
   2026-08-27 ruling — so it takes the 151 line like every other sticky heading
   on this page and on /asana-consulting-v2/ (a 79px header plus his 72px of
   clear space). It carries no top padding of its own, so the offset is a flat
   151. Was 179, then briefly 120.

   The four `.bg-dark` STAGE CARDS below keep their graduated 113/193/273/353.
   Those are not headings: the stagger is what makes each card park below the one
   before it as you scroll, and flattening them to 151 would pile all four on the
   same line and destroy the stack. Confirmed in scope with Raman before touching
   this. */
#rs-about .rs-protocol-sticky .protocol__first:not(.bg-dark) {
  top: 151px;
}

#rs-about .rs-protocol-sticky .protocol__first.bg-dark {
  top: 113px;
}

/* The 151 line, sixth and last heading: the Values band's intro column ("What we
   stand for — in practice, not in theory"). It was pinning at `top: 0`, and the
   only reason it did not sit behind the header is that the wrapper's `pt-lg-5`
   and the h2's own `mt-lg-5` stack to 96px of internal space — measured, not
   assumed. 55 + 96 = the 151 line.

   That 96px is NOT padding to strip: the right-hand column's first `.value-item`
   carries the same `pt-lg-5 mt-lg-5`, so it is what aligns this heading with the
   first value beside it. Which is why the line is defined on the TEXT and not on
   the box — see the header block in pages/asana-consulting.scss.

   Targeted structurally because that wrapper carries nothing but Bootstrap
   utilities, and adding a class to template-about.php for one offset is a worse
   trade than one descendant selector. `.bg-light` wraps only this band, and
   `#rs-about .bg-light .sticky-lg-top` matches exactly one element on the page
   (verified). If a second `.bg-light` sticky ever lands here, give this wrapper a
   real class instead of tightening the selector. */
#rs-about .bg-light .sticky-lg-top {
  top: 55px;
}

#rs-about .rs-protocol-sticky .protocol__second {
  top: 193px;
}

#rs-about .rs-protocol-sticky .protocol__third {
  top: 273px;
}

#rs-about .rs-protocol-sticky .protocol__fourth {
  top: 353px;
}

/* The case-study carousel's own layout/behaviour CSS (card height, line-clamp,
   button-chrome reset) now lives in pages/case-study-carousel.scss — a real
   shared stylesheet enqueued by rs_enqueue_case_study_carousel() — instead of
   being duplicated here under #rs-about. Nothing About-specific to add: the
   default white arrow/bullet colour already matches this page's dark/yellow
   band, unlike Home's, which repaints them (see home.scss). */