/* AUTO-GENERATED from qa-fixes-case-study-detail.css via rtlcss. Do not edit by hand.
   Loaded only on AR pages by inc/i18n-setup.php.
*/
/* ==========================================================================
   qa-fixes-case-study-detail.css — /case-studies/{slug} detail page styling
   --------------------------------------------------------------------------
   Ported from Webflow source:
     webflow latest/css/remotepass-v2.webflow.css   (.cs-* base rules + responsive)
     webflow latest/detail_case-studies.html        (inline \3c style> block, lines 557-752)

   All rules scoped under `.rp-case-study-detail` so they can't leak to other
   templates. The body part wraps the entire page in this class.

   What's intentionally skipped (already in migration.css with identical or
   adequate rules — verified by grep against migration.css):
     - .pd-lr / .pd-top  → defined under longer compound selectors that don't
       help us; we declare standalone scoped versions below.
     - .cs-mosaik-header → 4 matches in migration.css. We layer scope-locked
       overrides anyway so the case-study scope wins on specificity.
     - .section-header  → 7 matches in migration.css. We add scope-locked
       overrides.
   What's intentionally NOT ported:
     - Any `.new_rp_home_ar.dir-rtl` selectors. Our migration handles RTL via
       rtlcss auto-flipping (build-qa-fixes-rtl.mjs); Webflow's old RTL
       marker classes don't apply to our DOM.
     - Any rule referencing `.collection-list-9`, `.cs-mosaik-joined-item-card-2_0
       .collection-item-7:first-child …` (Webflow-CMS-specific selectors that
       aren't in our markup).

   Layout breakpoints:
     - default (mobile-first, ≤767px)
     - 768px+ tablet
     - 1024px+ desktop  (1200px max content width)
   ========================================================================== */


/* ============ §A. Wrapper + content max width =============================
   --gray-border-color and --gray-bg-clr are Webflow's :root vars used by
   .cs-mosaik-item-card and .cs-mosaik-joined. We re-declare them in scope
   so our case-study container resolves them whether or not the global
   :root vars are present.
   ========================================================================== */
.rp-case-study-detail {
  font-family: Mulish, 'Noto Sans Arabic', system-ui, sans-serif;
  color: #061235;
  --gray-border-color: #e4ebfe;
  --gray-bg-clr: #fafbff;
}
.rp-case-study-detail .rp-container.getguide-rp-container {
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}


/* ============ §B. Breadcrumb + share row =================================== */
.rp-case-study-detail .rp-case-study-breadcrumb-share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 0;
}
.rp-case-study-detail .rp-case-study-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2a2a2a;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: color 0.15s ease;
}
.rp-case-study-detail .rp-case-study-back-link:hover {
  color: #114ef7;
}
.rp-case-study-detail .rp-case-study-share-icons {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.rp-case-study-detail .rp-case-study-share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #696969;
  text-decoration: none;
  transition: color 0.15s ease;
}
.rp-case-study-detail .rp-case-study-share-icon:hover {
  color: #114ef7;
}


/* ============ §C. Hero (cs-hero-2_0) ======================================
   Source: Webflow CSS lines 31604, 31916, 33659-33709, plus mobile overrides
   at 38790 (≤479), 46112-46123 (≤991), 56330 (≤767), 63700-63726 (≤479).
   ========================================================================== */
.rp-case-study-detail .cs-hero-full-container-2_0 {
  background-color: transparent;
  position: relative;
  overflow: hidden;
}
/* 2026-07-21: RTL hero image — full-width (mirrors EN override at LTR line ~1005).
   The old 60%-right rule is superseded; image covers full hero in both LTR & RTL. */
.rp-case-study-detail .cs-hero-container-mask-img-2_0 {
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
/* 2026-07-21: RTL gradient — direction flipped to `to left` for RTL; stops match
   EN's override (0.96→0.88→0.50→0.72) so achievements card has same overlay depth
   as EN. Previous stops (0.95→0.85→0.55→0.35) made the card side too transparent. */
.rp-case-study-detail .cs-hero-container-mask-2_0 {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: transparent;
  background-image: linear-gradient(
    to left,
    rgba(15, 16, 53, 0.96) 0%,
    rgba(15, 16, 53, 0.88) 35%,
    rgba(15, 16, 53, 0.50) 62%,
    rgba(15, 16, 53, 0.72) 100%
  );
  pointer-events: none;
}
.rp-case-study-detail .cs-hero-container.cs-hero-container-2_0 {
  position: relative;
  z-index: 2;
  padding: 64px 16px 96px;
  max-width: 1200px;
  margin: 0 auto;
}
.rp-case-study-detail .cs-hero-new-grid-2_0 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 40px;
  padding-bottom: 56px;
}
.rp-case-study-detail .cs-hero-left {
  width: 100%;
  min-height: 100px;
}
.rp-case-study-detail .cs-hero-left.cs-hero-left-full-width {
  width: 100%;
}
.rp-case-study-detail .cs-hero-sub-container-brand {
  display: block;
  width: 200px;
  max-width: 200px;
  height: auto;
  margin-bottom: 24px;
  /* Live's pemo brand-logo SVG is a brand-color (orange/dark) embedded raster;
     coerce it to white so it reads on the dark hero background, matching live.
     If a slug ever needs the original color (e.g. on a light hero), override
     `filter: none` on the per-slug class. */
  filter: brightness(0) invert(1);
}

/* "MEET THE COMPANY" tag above the hero intro paragraph */
.rp-case-study-detail .meet-the-company-tag {
  font-family: Inter, Mulish, 'Noto Sans Arabic', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 16px;
  line-height: 18px;
}

/* Hero right column — Achievements panel that floats over the dark hero image */
.rp-case-study-detail .cs-hero-right {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* 2026-07-21: match EN card — dark navy bg, same border opacity. Remove blur (not in EN). */
.rp-case-study-detail .cs-hero-right .cs-mosaik-container {
  background: rgba(8, 10, 32, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px 24px 16px;
}
.rp-case-study-detail .cs-hero-right .achievements-heading {
  color: #fff;
  font-family: Inter, Mulish, 'Noto Sans Arabic', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 0 0 16px;
  line-height: 20px;
}
/* Inside-hero tiles stack vertically (overrides the standalone .cs-mosaik-splitted
   row layout below). Each tile has transparent bg, no border — the panel-frame
   above is the visual frame. */
.rp-case-study-detail .cs-hero-right .cs-mosaik-splitted {
  flex-direction: column;
  flex-wrap: nowrap;
  column-gap: 0;
  row-gap: 16px;
  margin-bottom: 0;
  align-items: stretch;
}
.rp-case-study-detail .cs-hero-right .cs-mosaik-item-card {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  padding: 0 0 16px;
  flex: 0 1 auto;
  align-items: flex-start;
}
.rp-case-study-detail .cs-hero-right .cs-mosaik-item-card:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.rp-case-study-detail .cs-hero-right .cs-mosaik-header {
  color: #fff;
  font-size: 26px;
  line-height: 40px;
  font-weight: 700;
  text-align: right;
}
.rp-case-study-detail .cs-hero-right .cs-mosaik-subheader {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 20px;
  text-align: right;
  margin-top: 4px;
}


/* ============ §D. Hero richtext (cs-richtext-main-class*) =================
   Source: detail_case-studies.html inline \3c style> lines 561-689 (the
   `.cs-richtext-main-class*` block). Plus the hero-specific overrides
   at lines 31821-31842 of the Webflow CSS for the `*-hero-2_0` modifier.
   ========================================================================== */
.rp-case-study-detail .cs-richtext-main-class {
  margin-top: 16px;
  font-family: Inter, Mulish, 'Noto Sans Arabic', system-ui, sans-serif;
}
.rp-case-study-detail .cs-richtext-main-class.cs-richtext-main-class-hero {
  margin-top: 16px;
}
.rp-case-study-detail .cs-richtext-main-class.cs-richtext-main-class-hero.cs-richtext-main-class-hero-2_0 {
  color: #fff;
  margin-top: 0;
  margin-bottom: 40px;
}
.rp-case-study-detail .cs-richtext-main-class.text-color-white {
  color: #fff !important;
}
.rp-case-study-detail .cs-richtext-main-class.cs-richtext-main-class-hero.cs-richtext-main-class-hero-2_0.text-color-white {
  color: #fff;
}
.rp-case-study-detail .cs-richtext-main-class h1 {
  color: inherit;
  font-size: 44px;
  line-height: 52px;
  font-weight: 700;
  margin: 0 0 16px;
  letter-spacing: -0.5px;
}
.rp-case-study-detail .cs-richtext-main-class h2 {
  color: #061235;
  /* Webflow inline \3c style> (lines 567-573): font-size 32px, line-height 32px (133.333% of 24, but actually 32px per source). */
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
  margin: 32px 0 16px;
}
.rp-case-study-detail .cs-richtext-main-class h3 {
  color: #061235;
  font-size: 24px;
  font-weight: 600;
  margin: 16px 0;
  line-height: 32px;
}
.rp-case-study-detail .cs-richtext-main-class p {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 27px;
  margin: 0 0 16px;
}
.rp-case-study-detail .cs-richtext-main-class.text-color-white h1,
.rp-case-study-detail .cs-richtext-main-class.text-color-white h2,
.rp-case-study-detail .cs-richtext-main-class.text-color-white h3,
.rp-case-study-detail .cs-richtext-main-class.text-color-white p {
  color: #fff;
}
.rp-case-study-detail .cs-richtext-main-class ul li,
.rp-case-study-detail .cs-richtext-main-class ol li {
  color: #061235;
  font-size: 16px;
  font-weight: 400;
  line-height: 27px;
}
.rp-case-study-detail .cs-richtext-main-class ul {
  padding-right: 0;
  list-style: none;
}
.rp-case-study-detail .cs-richtext-main-class ol {
  padding-right: 20px;
}
.rp-case-study-detail .cs-richtext-main-class ol li {
  margin-bottom: 16px;
}
.rp-case-study-detail .cs-richtext-main-class ul li {
  background-image: url("https://uploads-ssl.webflow.com/60e6dc45a4d62517ed5a669f/6599b909fa97c26867d05749_blueCheckMark.svg");
  background-position: 100% 2px;
  background-repeat: no-repeat;
  background-size: auto;
  margin-bottom: 8px;
  padding-right: 2.25em;
  line-height: 27px;
  padding-bottom: 4px;
  padding-top: 2px;
  list-style: none;
}
.rp-case-study-detail .cs-richtext-main-class a {
  color: #114ef7;
  text-decoration: underline;
}
.rp-case-study-detail .cs-richtext-main-class a:hover {
  text-decoration: none;
}


/* ============ §E. Mosaik metric tiles =====================================
   Direct port of live's structure (verified against pemo-live.html):
     .cs-mosaik-container > .cs-mosaik-splitted > .cs-mosaik-item-card
                                                  .cs-mosaik-item-fit-card
   Tile inner: <h1 class="cs-mosaik-header">{value}</h1>
               <div class="cs-mosaik-subheader">{label}</div>

   Sources: Webflow CSS lines 31608-31712 (mosaik containers + tiles).

   Earlier draft used a navy-to-white split-gradient background and a
   custom .rp-case-study-metric-tile class. Both removed — the navy
   gradient was a Cowork interpretation, not in live; the custom tile
   class isn't emitted by the shortcode anymore.
   ========================================================================== */
.rp-case-study-detail .rp-case-study-metrics {
  padding-top: 32px;
  padding-bottom: 64px;
}
.rp-case-study-detail .cs-mosaik-container {
  padding-right: 0;
  padding-left: 0;
}
.rp-case-study-detail .cs-mosaik-splitted {
  /* Webflow source (line 31613): flex row, 32px gap, 3 cards stretching evenly */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 32px;
  row-gap: 32px;
  justify-content: space-around;
  align-items: stretch;
  margin-bottom: 32px;
}
.rp-case-study-detail .cs-mosaik-item-card {
  /* Webflow source (line 31659): card frame */
  border: 1px solid var(--gray-border-color);
  background-color: var(--gray-bg-clr);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 32px;
  padding-bottom: 32px;
  font-family: Inter, Mulish, 'Noto Sans Arabic', system-ui, sans-serif;
}
.rp-case-study-detail .cs-mosaik-item-card.cs-mosaik-item-fit-card {
  /* Webflow source (line 31707): fit-card sizing. flex:1 lets 3 cards fill row on tablet+. */
  flex: 1 1 calc(33.333% - 32px);
  min-width: 220px;
}
.rp-case-study-detail .cs-mosaik-header {
  /* Webflow source (line 31713): mosaik header (h1) */
  color: #061235;
  margin: 0;
  font-family: Inter, Mulish, 'Noto Sans Arabic', system-ui, sans-serif;
  font-size: 45px;
  line-height: 66px;
  font-weight: 700;
}
.rp-case-study-detail .cs-mosaik-subheader {
  /* Webflow source (line ~31782): mosaik subheader */
  font-size: 16px;
  line-height: 27px;
  color: #696969;
  margin: 0;
  text-align: center;
}


/* ============ §F. Overview grid (4 cells) =================================
   case-study-overview-section / overview-grid / overview-item — clean grid,
   not in Webflow source (the old hardcoded body invented these names; we
   keep them for the dynamic version).
   ========================================================================== */
.rp-case-study-detail .case-study-overview-section {
  background: #fff;
  border-bottom: 1px solid #e8e9f1;
}
.rp-case-study-detail .case-study-overview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.rp-case-study-detail .overview-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
}
.rp-case-study-detail .overview-label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #696969;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rp-case-study-detail .overview-value {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  color: #061235;
  font-weight: 600;
}


/* ============ §G. Section wrappers (Challenge / Solution / Results) =======
   Live wraps each body section in `.hero_double_section_2.hero_double_section_revert`
   — a generic 2-column section layout reused across the case-study layout.
   Inside, .cs-richtext-main-class.w-richtext holds the H3 + body copy
   (§D rules already style the inner typography).

   Source: Webflow CSS lines 30347-30364 (hero_double_section_2 + revert).
   ========================================================================== */
.rp-case-study-detail .hero_double_section_2 {
  /* Webflow source (line 30347), with one deviation: live's case-study body
     uses a constant light-grey background across all body sections (matches
     Webflow's `hero_double_section_gray_bg` variant value `#f5f7fa`).
     Setting the bg here, instead of only on `-revert`, prevents the
     white-grey-white alternation our `bg-light-grey` modifier was producing. */
  color: #15113b;
  background-color: #f5f7fa;
  background-image: none;
  margin-top: 0;
  padding-top: 0;
  position: relative;
}
.rp-case-study-detail .hero_double_section_2.hero_double_section_revert {
  /* Same #f5f7fa as the base — kept declarative for clarity. Padding moved
     here so non-`-revert` instances (none currently) wouldn't pick it up. */
  background-color: #f5f7fa;
  background-image: none;
  margin-top: 0;
  padding-top: 56px;
  padding-bottom: 56px;
}
/* `bg-light-grey` was used as an "alternating background" modifier on
   challenge + results sections. Now redundant since hero_double_section_2
   has the constant grey base — keep the rule declared for any legacy markup. */
.rp-case-study-detail .case-study-challenge-section.bg-light-grey,
.rp-case-study-detail .case-study-results-section.bg-light-grey,
.rp-case-study-detail .bg-light-grey {
  background-color: #f5f7fa;
}


/* ============ §H. Pull quote (cs-section-review-container-v3) =============
   Live wraps the quote in `.cs-section-review-container-v3` (a flex column)
   containing `.cs-richtext-review` (the quote) + `.reviewer-name` + `.username`
   for attribution.

   Source: Webflow CSS lines 37383-37404 (review container) + 31897-31914
   (richtext-review) + inline \3c style> 679-685 (review p typography).
   ========================================================================== */
/* 2026-07-21: removed `background: #f7f8fb` — the RTL stylesheet loads after LTR so
   this rule was overriding the warm cream gradient set by `.cs-quote-v4` in the LTR
   file. Padding-only retained; background comes from the LTR .cs-quote-v4 rule. */
.rp-case-study-detail .rp-case-study-quote {
  padding-top: 64px;
  padding-bottom: 64px;
}
.rp-case-study-detail .cs-section-review-container-v3 {
  /* Webflow source (line 37383): flex column with 40px gap */
  display: flex;
  flex-direction: column;
  column-gap: 40px;
  row-gap: 40px;
  max-width: 880px;
  margin: 0 auto;
}
/* 2026-07-21: RTL quote box — bar on right, so rounded corners on right (0 12px 12px 0). */
.rp-case-study-detail .cs-richtext-review {
  /* Container itself; .cs-richtext-review p handles the quote typography */
  margin: 0;
  padding: 32px 24px;
  border-right: 4px solid #114ef7;
  background: #fff;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 4px 16px rgba(2, 17, 67, 0.06);
}
.rp-case-study-detail .cs-richtext-review p {
  /* Webflow inline \3c style> (lines 679-685): 20px / 32px line-height */
  color: #08080d;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
  margin: 0;
  text-align: right;
}
/* 2026-07-21: keep row layout in RTL — avatar sits beside name in both directions.
   rtlcss incorrectly flipped flex-direction to column; restored to row. */
.rp-case-study-detail .rp-case-study-quote-author {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 20px;
}
.rp-case-study-detail .reviewer-name {
  font-weight: 700;
  color: #061235;
  font-size: 14px;
}
.rp-case-study-detail .username {
  color: #696969;
  font-size: 14px;
}


/* ============ §I. Utility classes (scoped) ================================
   `.pd-lr` and `.pd-top` exist in Webflow only as compound selectors —
   we provide standalone scoped versions for our shortcodes' wrappers.
   ========================================================================== */
.rp-case-study-detail .pd-lr {
  padding-right: 16px;
  padding-left: 16px;
}
.rp-case-study-detail .pd-top {
  padding-top: 64px;
}


/* ==========================================================================
   §J. Tablet 768px+
   ========================================================================== */
@media (min-width: 768px) {
  .rp-case-study-detail .cs-richtext-main-class h1 {
    font-size: 56px;
    line-height: 64px;
  }
  .rp-case-study-detail .cs-richtext-main-class p {
    font-size: 18px;
    line-height: 28px;
  }
  .rp-case-study-detail .case-study-overview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .rp-case-study-detail .pd-lr {
    padding-right: 32px;
    padding-left: 32px;
  }
  .rp-case-study-detail .cs-hero-container.cs-hero-container-2_0 {
    padding: 96px 32px 128px;
  }
}


/* ==========================================================================
   §K. Desktop 1024px+ (max content width 1200px)
   ========================================================================== */
@media (min-width: 1024px) {
  .rp-case-study-detail .cs-hero-new-grid-2_0 {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 2fr 1fr;
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    align-self: center;
    align-items: stretch;
    padding-top: 0;
    padding-bottom: 0;
  }
  /* Inside the desktop grid, both hero columns are sized by the grid track
     (2fr / 1fr). Drop the explicit width so the columns can stretch. */
  .rp-case-study-detail .cs-hero-left,
  .rp-case-study-detail .cs-hero-left.cs-hero-left-full-width {
    width: auto;
  }
  .rp-case-study-detail .cs-hero-sub-container-brand {
    width: 240px;
    max-width: 240px;
    margin-bottom: 32px;
  }
  .rp-case-study-detail .cs-richtext-main-class h1 {
    font-size: 64px;
    line-height: 72px;
  }
  .rp-case-study-detail .case-study-overview-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .rp-case-study-detail .hero_double_section_2.hero_double_section_revert {
    padding-top: 96px;
    padding-bottom: 96px;
  }
  .rp-case-study-detail .rp-case-study-quote {
    padding-top: 96px;
    padding-bottom: 96px;
  }
  .rp-case-study-detail .pd-lr {
    padding-right: 64px;
    padding-left: 64px;
  }
  .rp-case-study-detail .pd-top {
    padding-top: 96px;
  }
  .rp-case-study-detail .rp-case-study-breadcrumb-share {
    padding: 32px 64px 0;
  }
}


/* §P v4 RTL mirror (2026-07-20) — quote section rebuild, see qa-fixes-case-study-detail.css §P */
.rp-case-study-detail .cs-quote-v4 .cs-quote-heading-wrap { text-align: right; }
.rp-case-study-detail .cs-quote-v4 .cs-quote-g2-text,
.rp-case-study-detail .cs-quote-v4 .cs-richtext-review p { text-align: right; }
.rp-case-study-detail .cs-quote-v4::before { right: auto; left: -130px; border-radius: 50%; }
.rp-case-study-detail .cs-quote-v4::after { left: auto; right: -90px; }

/* 2026-07-21: RTL mirror of LTR override (qa-fixes-case-study-detail.css line ~1032).
   LTR: border-left 3px blue bar, no bottom divider, left padding.
   RTL: border-right 3px blue bar, no bottom divider, right padding. */
.rp-case-study-detail .cs-hero-right .cs-mosaik-item-card {
  border-bottom: 0;
  border-right: 3px solid #fff; /* 2026-07-23 (Mo): was #114EF7 */
  border-left: 0;
  border-radius: 0;
  padding: 2px 16px 2px 0;
}
.rp-case-study-detail .cs-hero-right .cs-mosaik-item-card:last-child {
  border-bottom: 0;
}

/* 2026-07-23 (Mo): achievements metric subheaders white (RTL twin) */
.rp-case-study-detail .cs-hero-right .cs-mosaik-subheader { color: #fff; }

/* 2026-07-23 (Mo): hero infobox labels (INDUSTRY/LOCATIONS/SERVICES) white, medium */
.rp-case-study-detail .cs-hero-infobox-label { color: #fff; font-weight: 500; }

/* 2026-07-23 (Mo): hero mask gradient — uniform 42% black + edge-darkening horizontal bands */
.rp-case-study-detail .cs-hero-container-mask-2_0 {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.80) 0.12%, rgba(0, 0, 0, 0.00) 43.51%, rgba(0, 0, 0, 0.80) 99.86%);
}

/* 2026-07-23 (Mo): achievements card background — frosted white 6% */
.rp-case-study-detail .cs-hero-right .cs-mosaik-container { background: rgba(255, 255, 255, 0.06); }

/* 2026-07-23 (Mo): achievements column top-aligned */
.rp-case-study-detail .cs-hero-right { justify-content: flex-start; }

/* 2026-07-23 (Mo): infobox values 20/26 bold */
.rp-case-study-detail .cs-hero-infobox-value { font-size: 20px; line-height: 26px; font-weight: 700; }

/* 2026-07-23 (Mo): achievements card padding 24px */
.rp-case-study-detail .cs-hero-right .cs-mosaik-container { padding: 24px; }

/* 2026-07-27 (Mo): RTL mirror of the EN 07-27 case-study hero block. Appended
   last so it beats the earlier RTL rules (infobox-value 20/26 at ~692,
   mosaik-header 26/40 at ~236, cs-hero-container-2_0 padding at ~142/~593).
   Padding is horizontally symmetric → identical to EN; mosaik-header keeps
   text-align:right for RTL (EN uses left). */
@media (max-width: 767px) {
  .rp-case-study-detail .cs-hero-container.cs-hero-container-2_0 { padding: 0px 16px 24px; }
}
@media (min-width: 768px) {
  .rp-case-study-detail .cs-hero-container.cs-hero-container-2_0 { padding: 24px 32px 40px; }
  .rp-case-study-detail .cs-hero-infobox-value {
    font-size: 24px;
    line-height: 26px;
    font-weight: 700;
  }
  .rp-case-study-detail .cs-hero-right .cs-mosaik-header {
    color: #fff;
    font-size: 28px;
    line-height: 48px;
    font-weight: 700;
    text-align: right;
  }
}
@media (min-width: 1024px) {
  .rp-case-study-detail .cs-hero-container.cs-hero-container-2_0 { padding: 96px 32px 128px; }
}