/* ==========================================================================
   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 <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-left: auto;
  margin-right: 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;
}
.rp-case-study-detail .cs-hero-container-mask-img-2_0 {
  /* Live constrains the hero image to roughly the right 60% of the hero
     so it sits behind the right-column metrics panel and doesn't compete
     with the left-column logo+intro. */
  object-fit: cover;
  width: 60%;
  max-width: 900px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
}
.rp-case-study-detail .cs-hero-container-mask-2_0 {
  /* Webflow source (line 33672) is `radial-gradient(circle, #00000080, #000 95%)`,
     which is designed for a hero image that fills the FULL container width.
     Our Fix 3 constrains `cs-hero-container-mask-img-2_0` to the right 60% so
     a radial mask would land its near-opaque edges on top of the visible image
     and hide it. Substituting a horizontal linear gradient instead: dark on
     the left (keeps logo + intro copy readable on white text), fading to
     ~35% on the right where the image + Achievements panel sit. */
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: transparent;
  background-image: linear-gradient(
    to right,
    rgba(15, 16, 53, 0.95) 0%,
    rgba(15, 16, 53, 0.85) 30%,
    rgba(15, 16, 53, 0.55) 60%,
    rgba(15, 16, 53, 0.35) 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;
}
.rp-case-study-detail .cs-hero-right .cs-mosaik-container {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 24px 24px 16px;
  backdrop-filter: blur(2px);
}
.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: left;
}
.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: left;
  margin-top: 4px;
}


/* ============ §D. Hero richtext (cs-richtext-main-class*) =================
   Source: detail_case-studies.html inline <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 <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-left: 0;
  list-style: none;
}
.rp-case-study-detail .cs-richtext-main-class ol {
  padding-left: 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: 0px 2px;
  background-repeat: no-repeat;
  background-size: auto;
  margin-bottom: 8px;
  padding-left: 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-left: 0;
  padding-right: 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 <style> 679-685 (review p typography).
   ========================================================================== */
.rp-case-study-detail .rp-case-study-quote {
  padding-top: 64px;
  padding-bottom: 64px;
  background: #f7f8fb;
}
.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;
}
.rp-case-study-detail .cs-richtext-review {
  /* Container itself; .cs-richtext-review p handles the quote typography */
  margin: 0;
  padding: 32px 24px;
  border-left: 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 <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: left;
}
.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;
}
/* 2026-07-21: reviewer headshot — circular, 60px desktop/tablet, 48px mobile. */
.rp-case-study-detail .cs-reviewer-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .rp-case-study-detail .cs-hero-container.cs-hero-container-2_0 { padding: 0px 16px 24px; }
  .rp-case-study-detail .cs-reviewer-avatar {
    width: 48px;
    height: 48px;
  }
}
.rp-case-study-detail .cs-reviewer-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.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-left: 16px;
  padding-right: 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-left: 32px;
    padding-right: 32px;
  }
  .rp-case-study-detail .cs-hero-container.cs-hero-container-2_0 {
    padding: 24px 32px 40px;
  }
}


/* ==========================================================================
   §K. Desktop 1024px+ (max content width 1200px)
   ========================================================================== */
@media (min-width: 1024px) {
  .rp-case-study-detail .cs-hero-container.cs-hero-container-2_0 { padding: 96px 32px 128px; }
  .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-left: 64px;
    padding-right: 64px;
  }
  .rp-case-study-detail .pd-top {
    padding-top: 96px;
  }
  .rp-case-study-detail .rp-case-study-breadcrumb-share {
    padding: 32px 64px 0;
  }
}


/* ==========================================================================
   §L. Hero meta info-box  (Industry · Locations · RemotePass services used)
   --------------------------------------------------------------------------
   Restored 2026-07-03 (EN correctness pass). Translucent bar under the hero
   intro paragraphs, on the dark hero background → white text. Rendered by
   [rp_case_study_hero] from the per-slug data map in inc/cpt-case-study.php.
   ========================================================================== */
.rp-case-study-detail .cs-hero-infobox {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin-top: 8px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  backdrop-filter: blur(2px);
}
.rp-case-study-detail .cs-hero-infobox-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}
.rp-case-study-detail .cs-hero-infobox-label {
  font-family: Inter, Mulish, 'Noto Sans Arabic', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  line-height: 16px;
}
.rp-case-study-detail .cs-hero-infobox-value {
  font-family: Inter, Mulish, 'Noto Sans Arabic', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  line-height: 22px;
}


/* ==========================================================================
   §M. Narrative section headings (blue-accent phrase via .highlight-it-blue)
   --------------------------------------------------------------------------
   Large heading above each body section (challenge / solution / results).
   Absent on all 9 live pages; rendered by rp_case_study_section_block() from
   the per-slug data map. Plain (dark) variants pass no accent (Valmont;
   Moniepoint "Results and Impact"). .highlight-it-blue = #114ef7 (theme-wide).
   ========================================================================== */
.rp-case-study-detail .cs-section-narrative-heading {
  color: #061235;
  font-family: Inter, Mulish, 'Noto Sans Arabic', system-ui, sans-serif;
  font-size: 30px;
  line-height: 38px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0 0 24px;
}
.rp-case-study-detail .cs-section-narrative-heading .highlight-it-blue {
  color: #114ef7;
}
@media (min-width: 768px) {
  .rp-case-study-detail .cs-section-narrative-heading {
    font-size: 38px;
    line-height: 46px;
  }
}
@media (min-width: 1024px) {
  .rp-case-study-detail .cs-section-narrative-heading {
    font-size: 44px;
    line-height: 52px;
  }
}


/* ==========================================================================
   §N. Quote-section heading + G2 "Best Software Awards 2024" award badge
   --------------------------------------------------------------------------
   "<Company> shared their love for RemotePass." + the G2 award badge
   (assets/case-studies/g2-best-software-2024-badge@2x.png, 240×252 shown at
   96px) + rating line. Absent on all 9 live pages; rendered by
   [rp_case_study_quote]. Sits above the existing pull-quote card.
   ========================================================================== */
.rp-case-study-detail .cs-quote-heading-wrap {
  max-width: 880px;
  margin: 0 auto 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.rp-case-study-detail .cs-quote-heading {
  color: #061235;
  font-family: Inter, Mulish, 'Noto Sans Arabic', system-ui, sans-serif;
  font-size: 26px;
  line-height: 34px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0;
}
@media (min-width: 768px) {
  .rp-case-study-detail .cs-quote-heading {
    font-size: 34px;
    line-height: 42px;
  }
}
.rp-case-study-detail .cs-quote-g2 {
  display: flex;
  align-items: center;
  gap: 16px;
}
.rp-case-study-detail .cs-quote-g2-badge {
  width: 96px;
  height: auto;
  display: block;
  flex: 0 0 auto;
}
.rp-case-study-detail .cs-quote-g2-text {
  color: #696969;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  margin: 0;
  text-align: left;
}


/* ==========================================================================
   §O. Quote section with a full-bleed background photo (6 pages)
   --------------------------------------------------------------------------
   2026-07-04: where the per-slug map supplies a text-free @2x quote photo, the
   [rp_case_study_quote] shortcode adds `rp-cs-quote-has-bg` + an inline
   background-image (dark overlay gradient + the photo). Here we set cover/
   center sizing and flip the heading + rating text to white for legibility
   over the darkened photo. The white review card keeps its own background.
   (Lean & Moniepoint quote photos couldn't be isolated → no bg, unchanged;
   Valmont is a light card by design → no bg.)
   ========================================================================== */
.rp-case-study-detail .rp-case-study-quote.rp-cs-quote-has-bg {
  background-color: #061235;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.rp-case-study-detail .rp-cs-quote-has-bg .cs-quote-heading {
  color: #fff;
}
.rp-case-study-detail .rp-cs-quote-has-bg .cs-quote-g2-text {
  color: rgba(255, 255, 255, 0.85);
}


/* ==========================================================================
   §P. Quote section v4 — canonical Figma rebuild (2026-07-20, Greg)
   --------------------------------------------------------------------------
   Frame: RP--Resources 1:36255 (Podeo; applies to all 9 case studies).
   Yellow gradient band + blue decorative blobs → heading LEFT / G2 badge +
   stars + rating RIGHT → photo as a big rounded CARD with the white quote
   overlaid at its base (first sentence bold) + author. Shortcode adds
   .cs-quote-v4 (and .cs-quote-v4-nophoto for lean/moniepoint/valmont until
   Adil supplies photos). §H/§N/§O rules above remain for reference but are
   overridden here under the .cs-quote-v4 scope; the old section-background
   treatment (rp-cs-quote-has-bg) is no longer emitted by the shortcode.
   ========================================================================== */
.rp-case-study-detail .cs-quote-v4 {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FFFDF4 0%, #FBEFC5 48%, #F6DD8C 100%);
  padding-bottom: 96px;
}
/* blue decorative blobs per frame (right edge + bottom-left) */
.rp-case-study-detail .cs-quote-v4::before {
  content: "";
  position: absolute;
  right: -130px;
  top: 26%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: #114EF7;
  z-index: 0;
}
.rp-case-study-detail .cs-quote-v4::after {
  content: "";
  position: absolute;
  left: -90px;
  bottom: -110px;
  width: 280px;
  height: 280px;
  border-radius: 64px;
  transform: rotate(28deg);
  background: #0B31C4;
  z-index: 0;
}
.rp-case-study-detail .cs-quote-v4 .rp-container {
  position: relative;
  z-index: 1;
}
/* heading row: title left, G2 cluster right */
.rp-case-study-detail .cs-quote-v4 .cs-quote-heading-wrap {
  max-width: 1140px;
  margin: 0 auto 40px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  gap: 24px;
}
.rp-case-study-detail .cs-quote-v4 .cs-quote-heading {
  color: #061235;
  max-width: 600px;
  font-size: 36px;
  line-height: 46px;
}
.rp-case-study-detail .cs-quote-v4 .cs-quote-g2 {
  gap: 14px;
  flex: 0 0 auto;
}
.rp-case-study-detail .cs-quote-v4 .cs-quote-g2-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rp-case-study-detail .cs-quote-v4 .cs-quote-stars {
  color: #F8A504;
  font-size: 22px;
  line-height: 24px;
  letter-spacing: 4px;
}
.rp-case-study-detail .cs-quote-v4 .cs-quote-g2-text {
  color: #061235;
}
/* the photo card */
.rp-case-study-detail .cs-quote-v4 .cs-section-review-container-v3 {
  max-width: 1140px;
  min-height: 520px;
  border-radius: 24px;
  overflow: hidden;
  background-color: #061235; /* nophoto fallback + paint-under for photos */
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  row-gap: 12px;
  padding: 48px;
  box-shadow: 0 24px 48px rgba(2, 17, 67, 0.18);
}
.rp-case-study-detail .cs-quote-v4 .cs-quote-glyph {
  color: #fff;
  font-family: Inter, Mulish, system-ui, sans-serif;
  font-size: 72px;
  line-height: 0.6;
  font-weight: 800;
}
.rp-case-study-detail .cs-quote-v4 .cs-richtext-review {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  max-width: 980px;
}
.rp-case-study-detail .cs-quote-v4 .cs-richtext-review p {
  color: #fff;
  font-size: 18px;
  line-height: 28px;
}
.rp-case-study-detail .cs-quote-v4 .cs-richtext-review p strong {
  font-weight: 700;
}
.rp-case-study-detail .cs-quote-v4 .reviewer-name {
  color: #fff;
  font-size: 15px;
}
.rp-case-study-detail .cs-quote-v4 .username {
  color: rgba(255, 255, 255, 0.75);
}
/* frame: the twin-CTA band below sits on WHITE on case-study pages
   (home keeps its yellow — this is scoped under .rp-case-study-detail).
   !important + stacked classes: the shared band's own yellow wins otherwise
   (measured rgb(255,231,151) surviving a (0,2,0) override in the prototype). */
.rp-case-study-detail .rp-section.home-try-rp-section,
.rp-case-study-detail .home-try-rp-section.new-footer-awards-orange,
/* 2026-07-21: AR twin-CTA is a Gutenberg block rendered outside .rp-case-study-detail,
   so the rule above doesn't reach it. Target via body class + rp-ktwincta wrapper. */
.single-case_study .rp-ktwincta .rp-section.home-try-rp-section {
  background: #fff !important;
}
/* mobile / tablet */
@media (max-width: 767px) {
  .rp-case-study-detail .cs-quote-v4 .cs-quote-heading-wrap {
    flex-direction: column;
    align-items: flex-start;
  }
  .rp-case-study-detail .cs-quote-v4 .cs-quote-heading {
    font-size: 26px;
    line-height: 34px;
  }
  .rp-case-study-detail .cs-quote-v4 .cs-section-review-container-v3 {
    min-height: 420px;
    padding: 24px;
    border-radius: 16px;
  }
  .rp-case-study-detail .cs-quote-v4 .cs-richtext-review p {
    font-size: 16px;
    line-height: 25px;
  }
  .rp-case-study-detail .cs-quote-v4::before,
  .rp-case-study-detail .cs-quote-v4::after {
    width: 180px;
    height: 180px;
  }
}


/* ==========================================================================
   §Q. Hero + narrative bands — Greg's 2026-07-20 batch (frame 1:36255)
   --------------------------------------------------------------------------
   1. Hero photo FULL-WIDTH + cover (was a 900px right-anchored img leaving
      the hero's right half a washed grey); gradient overlay retuned so the
      whole hero stays frame-dark with the photo showing through center-right.
   2. Hero rounded bottom corners per frame.
   3. Achievements card per frame: darker panel, stats get a blue left bar,
      horizontal dividers dropped.
   4. Narrative bands alternate WHITE <-> #F0F4FE in render order (classes
      cs-band-white/cs-band-blue emitted by rp_case_study_section_block).
      !important beats the legacy .bg-light-grey grey.
   ========================================================================== */
.rp-case-study-detail .cs-hero-full-container-2_0 {
  border-radius: 0 0 32px 32px;
  overflow: hidden;
  /* solid dark base — the mask gradient is translucent; without this it
     compposites onto the WHITE page bg wherever the photo doesn't reach,
     producing the washed-grey right half Greg flagged */
  background-color: #0F1035;
}
.rp-case-study-detail .cs-hero-container-mask-img-2_0 {
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  width: 100% !important;  /* legacy rule pins it to 900px — must lose */
  max-width: none !important;  /* the actual pin was max-width:900px */
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}
.rp-case-study-detail .cs-hero-container-mask-2_0 {
  background-image: linear-gradient(
    to right,
    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%
  );
}
.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;
}
.rp-case-study-detail .cs-hero-right .cs-mosaik-item-card {
  border-bottom: 0;
  border-left: 3px solid #fff; /* 2026-07-23 (Mo): was #114EF7 */
  border-radius: 0;
  padding: 2px 0 2px 16px;
}
.rp-case-study-detail .cs-hero-infobox {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
/* narrative band alternation (render-order classes from PHP) */
.rp-case-study-detail .cs-band-white {
  background: #fff !important;
}
.rp-case-study-detail .cs-band-blue {
  background: #F0F4FE !important;
}
/* narrative media: no box — transparent, flat (asset bgs are a content issue,
   tracked separately; wrapper must never add its own) */
.rp-case-study-detail .cs-section-media,
.rp-case-study-detail .cs-section-media-img {
  background: transparent;
  box-shadow: none;
  border: 0;
}

/* ==========================================================================
   §R. alts-digital hero logo — per-slug width override (2026-07-20, Greg)
   --------------------------------------------------------------------------
   The canonical alts-digital.svg is a COMPACT 80x56 mark. The shared hero
   rule forces width:240px (aspect-preserving), stretching it to 240x168 —
   ~3x the height of the wide wordmark logos (valmont renders 240x55). Pin
   THIS logo to its natural 80px so it sits at the shared h=56 cap height,
   aligned with its neighbours. Scoped by src (env-agnostic — no fragile
   postid); the shared .cs-hero-sub-container-brand rule is untouched.
   ========================================================================== */
.rp-case-study-detail img.cs-hero-sub-container-brand[src*="alts-digital.svg"] {
  width: 80px !important;
  max-width: 80px !important;
}

/* ==========================================================================
   §S. new-footer-rp-container — strip empty paragraphs (2026-07-21)
   --------------------------------------------------------------------------
   WordPress wpautop injects empty <p></p> tags inside the footer try-rp
   container on case study pages, creating unwanted vertical gaps.
   ========================================================================== */
.rp-case-study-detail .new-footer-rp-container p:empty {
  display: none;
  margin: 0;
  padding: 0;
}

/* 2026-07-23 (Mo): achievements metric subheaders white */
.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): case-study hero — desktop + tablet (>=768) overrides. */
@media (min-width: 768px) {
  .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: left;
  }
}