@charset "UTF-8";
/* ===== Case Studies index (/case-studies/) — scoped to .rs-cs-index =====
 *
 * WHY THIS FILE EXISTS AT ALL.
 * The first migration pass shipped this page on Bootstrap utilities only, and the
 * template's docblock claimed that as a feature ("needs no new CSS"). Raman's
 * 2026-08-14 review rejected the result, and the reason is structural rather than
 * a matter of taste: the Figma numbers this page is measured against are not on
 * Bootstrap's scale. A 128px hero gutter, a 460/558 hero split, a 362/753 card
 * split, a fixed 260x60 logo box and a 1.65 quote line-height have no utility
 * class. Utilities can only approximate them, and "approximately the design" is
 * exactly what got sent back. The numbers live here instead.
 *
 * SCOPE NOTE — .rs-cs-index, not .rs-cs.
 * The template used to open <main class="rs-cs">, which is the same class
 * pages/case-study.scss scopes the SINGULAR case-study template under. That was
 * harmless only while this page loaded no CSS of its own. It no longer does, so
 * the root class is .rs-cs-index and every selector below is scoped to it.
 *
 * FIGMA SOURCES (file SnreFPrtbc7XZTfHcuGznW, "Remote Sensei Universe"):
 *   30867:39389  hero (title + subtitle + 2x2 stat grid)
 *   30867:39388  trusted-by logo strip
 *   30867:39386  "You came here to see results, right?" section header
 *   28859:19385  one case-study card (testimonial + info pair)
 *   28859:19373  yellow testimonial card
 *   28859:19356  info / description card
 *   42191:36621  "Show more" button
 *
 * The Figma frame's COPY is older than the page (it still says "11+ years" and
 * "50+ companies"). Only the style values are taken from it — copy stays as
 * staging renders it, per the ruling on task 1217385297863797.
 *
 * The container is 1146px wide at desktop ($container-max-widths xl), which is
 * Figma's 1440 - 2x147 content width, so every px below is a 1:1 transcription
 * and not a scaled guess.
 *
 * 12px radius has no design token — the ramp is 4 / 5 / 8 / 24 (see
 * rs-design-tokens.css). Figma puts every card on this page at 12, so it is a
 * literal here rather than a wrong token.
 */
/* ---- Hero -------------------------------------------------------------------- */
/*
 * The band wraps the hero AND the logo strip, so its bottom padding is whatever
 * the strip does not already provide. Since 2026-08-19 the strip's shared frame
 * (`.rs-trusted-strip`) carries the full 60px below the logos, so this side is
 * zero — a band padding here would stack on top of it and re-open the exact gap
 * Raman flagged. Both edges are inside the same #F9F9F9 fill, so moving the 60
 * from the band to the frame is not visible; it just puts the number on the
 * element that owns it site-wide.
 *
 * The band and the strip below both dropped their py-* utilities to get here.
 * Bootstrap spacing utilities are `!important`, so a page rule cannot trim one —
 * the choice is to remove the class or to answer !important with !important, and
 * the class is the honest half of that trade.
 */
.rs-cs-index__hero-band {
  padding-top: 48px;
  padding-bottom: 0;
}

.rs-cs-index__hero-title {
  margin-bottom: 30px;
}

/* .fs-5 gives 20px/1.5; Figma is 20px/1.6. The 50px below is the Figma gap from
   the subtitle to the avatar pill. */
.rs-cs-index__hero-sub {
  margin-bottom: 50px;
  font-size: 20px;
  line-height: 1.6;
}

@media (min-width: 992px) {
  /*
   * Figma's hero is two absolutely-positioned blocks: text at x147 w460, stat
   * grid at x735 w558, i.e. a 128px gutter inside the 1146 content width.
   * Bootstrap's col-lg-6 pair gives 573/573 with a 24px gutter — the "wrong
   * spacings and gaps between left and right part" in the review. Fixing both
   * widths and letting space-between own the remainder keeps the two outer
   * edges pinned to the container, which is what the design does.
   */
  .rs-cs-index__hero-row {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  /* Padding, not the gutter custom property: --bs-gutter-x:0 also cancels the
     row's -12px side margins, which shrinks the row to the container's 1122px
     content box and turns the 128px gutter into 104px. */
  .rs-cs-index__hero-copy,
  .rs-cs-index__hero-stats {
    padding-right: 0;
    padding-left: 0;
  }
  .rs-cs-index__hero-copy {
    flex: 0 0 460px;
    width: 460px;
  }
  .rs-cs-index__hero-stats {
    flex: 0 0 558px;
    width: 558px;
  }
}
/* Figma: 20px gutters both axes (Bootstrap's default is 24), card radius 12,
   padding 20. */
.rs-cs-index__stats {
  --bs-gutter-x: 20px;
  --bs-gutter-y: 20px;
}

.rs-cs-index__stat {
  padding: 20px;
  border-radius: 12px;
}

/* The stat headline and its explanation are ONE sentence — "We are the first"
   + "and preferred leader in Europe among certified Asana experts" only parses
   as English read straight through. They used to be two sibling <div>s, which
   meant no crawler ever saw the sentence whole: it read as a fragment plus an
   orphaned clause. They are now a single <p>, with the headline as an inline
   <span> so the paragraph's text content is continuous.
   display:block is what preserves the original look — it restores the line
   break the old <div> gave for free, and it is also what makes the Bootstrap
   `mb-1` on the span take effect, since margins do nothing on an inline box.
   Kept here rather than relying on a `d-block` utility so the rule ships in
   this template's own stylesheet, which is always enqueued with it. */
.rs-cs-index__stat-lead {
  display: block;
}

/* ---- Trusted-by logo strip --------------------------------------------------- */
/*
 * All the strip's own spacing — 40px above its title, 40px title-to-logos, 60px
 * below — is Raman's shared `.rs-trusted-strip` frame in logo-marquee.scss, on
 * the wrapper in template-case-studies.php. What stays here is the ONE number
 * that is this page's own and not the component's: the gap between the hero and
 * the frame.
 *
 * That split is Raman's arithmetic, marked on his own screenshot of this page:
 * 60 from the stat-cards' bottom edge to the frame, then the frame's own 40 to
 * the title — "the total gap between hero section and visible part of the
 * running line is 100px". Home reaches the same 100 without a margin here,
 * because `#rs-home .rs-hero` already ends with 60px of its own padding; this
 * page needs the margin because `.rs-cs-index__hero-band` wraps the hero and the
 * strip together, so there is no section boundary to carry it.
 *
 * Keep the two numbers on separate properties. Folding 100 into one padding is
 * what made this drift in the first place: the page-level 60 and the component's
 * 40 then look like a single page-specific value, and the next template copies
 * the total instead of the rule.
 */
.rs-cs-index__logos {
  margin-top: 60px;
}

@media (max-width: 767.98px) {
  /* Mobile hero → frame, matching Home's own mobile step down from 60. The
     frame's 40/40/60 does not change with width — Raman: "No any new values." */
  .rs-cs-index__logos {
    margin-top: 40px;
  }
}
/* 48px (py-lg-5) + 48px (the band's py-5) + the slider's own 30px was 126px of
   dead space under the last logo; Home nets 60px. */
/* The 40px title-to-logos gap is the frame's `gap` now (logo-marquee.scss), so
   the title carries no bottom margin of its own — a margin here would add to it.
   The class stays as the page's hook for the strip's heading. */
.rs-cs-index__logos-title {
  margin-bottom: 0;
}

/* ---- Section header ---------------------------------------------------------- */
/*
 * Was <div class="h1">: an h1-sized block used as a section title. Raman's
 * site-wide rule is that only a hero gets an H1 and section titles are H2, so
 * this is a real <h2> now. The design-system H2 is Montserrat 40/1.3 — the same
 * numbers .rs-cta__title already ships — with the bold runs carried by spans in
 * the markup, hence the 400 base weight.
 */
.rs-cs-index__section-title {
  margin: 0 0 20px;
  color: var(--rs-black-prime, #34383c);
  font-family: Montserrat, sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}

.rs-cs-index__section-lead {
  margin: 0 0 60px;
  color: var(--rs-text-secondary, #5d636a);
  font-size: 20px;
  line-height: 1.6;
  text-align: center;
}

/* The same mobile step .rs-cta__title takes — being "the design system's H2"
   includes its small-screen cut, and 40px Montserrat on a 375 viewport is four
   lines of heading. */
@media (max-width: 767.98px) {
  .rs-cs-index__section-title {
    font-size: 24px;
  }
  .rs-cs-index__section-lead {
    margin-bottom: 40px;
    font-size: 16px;
  }
}
/* ---- Card list --------------------------------------------------------------- */
/* Figma: 40px between cards (and between the last card and the button). mb-5
   gave 48. */
.rs-cs-index__card {
  margin-bottom: 40px;
  /*
   * Raman: "card height must hug its content — remove any fixed/equal
   * height". The real cause wasn't a fixed height: it was this flex row's
   * default cross-axis alignment (`align-items: normal`, i.e. stretch),
   * which forced both columns to the taller sibling's height, and the
   * markup's `h-100` on each inner box (removed) then filled that stretched
   * column. Figma's own card component (28859:19385, "CS card - desktop")
   * confirms this: the yellow testimonial (412px) and the grey info panel
   * (540px) are different heights, each `sizing: hug` on its own, sitting at
   * the row's default flex-start — not stretched to match. `flex-start`
   * here at every width the columns sit side by side (Bootstrap's own .row
   * is flex too, from col-md- up), not only inside the 992px override below.
   */
  align-items: flex-start;
}

@media (min-width: 992px) {
  /*
   * Figma's card is a flex row: testimonial 362 fixed + 30 gap + info 753, and
   * 362 + 30 + 753 = 1145, i.e. the full content width. Bootstrap's
   * col-lg-4/col-lg-8 pair gives 382/764 with a 24px gutter. Dropping out of
   * the grid is less code than fighting it: the row becomes a plain flex row
   * and the info column takes the remainder.
   */
  .rs-cs-index__card {
    display: flex;
    flex-wrap: nowrap;
    gap: 30px;
  }
  .rs-cs-index__card > * {
    width: auto;
    padding-right: 0;
    padding-left: 0;
  }
  .rs-cs-index__quote-col {
    flex: 0 0 362px;
  }
  .rs-cs-index__info-col {
    flex: 1 1 auto;
    min-width: 0;
  }
}
/* ---- Yellow testimonial card ------------------------------------------------- */
.rs-cs-index__quote {
  padding: 20px;
  border-radius: 12px;
  background-color: var(--rs-yellow-00, #ffc94b);
}

/*
 * Figma: Lora 400 16/1.65, #34383C. The face matters — the quote was rendering
 * in italic Hind Madurai at 1.5 and in secondary grey, which is the "font style
 * and colors for all elements" half of the review. Only Lora 400 (normal +
 * italic) is self-hosted, so the italic comes from the markup's `fst-italic`
 * against the 400 weight, exactly as /about/ does it.
 */
.rs-cs-index__quote-text {
  margin: 0 0 20px;
  color: var(--rs-black-prime, #34383c);
  font-family: var(--rs-font-serif, Lora, ui-serif, Georgia, serif);
  font-size: 16px;
  line-height: 1.65;
}

/*
 * Raman's 2026-08 follow-up: avatar down to 64x64 (confirmed against Figma
 * 28859:19373's own `img` node, which is exactly 64x64 — the 90px value below
 * was this page's own prior reading, now superseded). 20px to the name column
 * unchanged — Raman's ruling did not touch that gap.
 */
.rs-cs-index__quote-avatar {
  width: 64px;
  height: 64px;
}

.rs-cs-index__quote-person {
  gap: 20px;
}

.rs-cs-index__quote-name {
  color: var(--rs-black-prime, #34383c);
  font-family: Montserrat, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

/*
 * Raman's 2026-08 follow-up: the role line drops to the design system's
 * text/desktop/S style (--rs-text-s-size/--rs-text-s-lh in
 * rs-design-tokens.css — 16px/1.5), text/mobile/s at mobile (14px/1.5). Was
 * 20px/1.4, matching the name line — the ruling is specifically to step the
 * role down so it no longer reads at the same weight as the name.
 */
.rs-cs-index__quote-role {
  color: var(--rs-black-prime, #34383c);
  font-size: var(--rs-text-s-size, 16px);
  font-weight: 400;
  line-height: var(--rs-text-s-lh, 1.5);
}

@media (max-width: 767.98px) {
  .rs-cs-index__quote-role {
    font-size: var(--rs-text-s-size-mobile, 14px);
    line-height: var(--rs-text-s-lh-mobile, 1.5);
  }
}
/* ---- Info / description card ------------------------------------------------- */
.rs-cs-index__info {
  padding: 24px;
  border-radius: 12px;
  background-color: var(--rs-grey-light-50, #f9f9f9);
}

@media (min-width: 768px) {
  /* Figma's 40px. Held back below 768 because the frame is desktop-only and
     40px of padding on a 375 viewport leaves the copy nowhere to go. */
  .rs-cs-index__info {
    padding: 40px;
  }
}
/*
 * THE LOGO BOX — Raman: "company logo sizes … they are equal on all cards".
 * They were not: the markup asked for width=60 height=60 attributes, and with
 * `height:auto` in force that constrains WIDTH only, so a square mark rendered
 * 60x60 while a wide wordmark rendered 60x11. Figma gives every card the same
 * fixed 260x60 frame and fits the artwork inside it, which is the only way a
 * 60x60 icon and an 850x155 wordmark can read as the same weight.
 *
 * Raman's 2026-08 follow-up: 260 read as too big — "logo part in the cards
 * looks ugly - it's too big". Ruling: 150px max width for a rectangle, 60px
 * for a square. The box width is the only number that needed to move: the
 * img below is already contained (width:auto/height:auto capped by
 * max-width/max-height of this box, preserving aspect ratio), so a 150x60 box
 * automatically caps a landscape logo at 150 wide and lets a 1:1 mark settle
 * at 60x60 (60 is the tighter of the two constraints on a square), with no
 * per-logo class needed.
 */
.rs-cs-index__logo {
  display: flex;
  align-items: center;
  width: 150px;
  max-width: 100%;
  height: 60px;
  margin: 0 0 20px;
}

.rs-cs-index__logo img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

/* Figma: design-system H3, Montserrat 700 24/1.4. Was .h4 — 600 weight at 1.2. */
.rs-cs-index__title {
  margin: 0 0 20px;
  color: var(--rs-black-prime, #34383c);
  font-family: Montserrat, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}

/* Figma: 10px between pills, 30px to the body copy. The pills themselves are
   16px/600 Hind Madurai in secondary grey on white with 4/12 padding — they were
   14px, 4/16, and primary-dark. */
.rs-cs-index__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 30px;
}

.rs-cs-index__tag {
  padding: 4px 12px;
  border-radius: var(--rs-radius-pill, 100px);
  background-color: var(--rs-white-pure, #fffffe);
  color: var(--rs-text-secondary, #5d636a);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
}

.rs-cs-index__excerpt {
  margin: 0 0 20px;
  color: var(--rs-text-secondary, #5d636a);
  font-size: 20px;
  line-height: 1.6;
}

/* ---- "Show more" ------------------------------------------------------------- */
/*
 * Figma 42191:36621 is the design-system button atom in its outline-teal cut:
 * 48px tall, 2px #408897 stroke, transparent fill, 4px radius, label Montserrat
 * 600/14, plus-circle icon at 18px. The box comes from .btn.btn-atom (which the
 * page now opts into rather than re-typing the numbers); this rule is only the
 * outline treatment on top, because btn-atom zeroes border-width by default.
 *
 * It replaces `btn btn-light text-danger` — a grey fill with coral text and a
 * drop shadow, which is not a variant the design system has.
 */
.btn.btn-atom.rs-cs-index__more-btn {
  --bs-btn-border-width: 2px;
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--rs-teal-00, #408897);
  --bs-btn-border-color: var(--rs-teal-00, #408897);
  --bs-btn-hover-bg: var(--rs-teal-00, #408897);
  --bs-btn-hover-color: var(--rs-white-pure, #fffffe);
  --bs-btn-hover-border-color: var(--rs-teal-00, #408897);
  border: 2px solid var(--rs-teal-00, #408897);
  border-radius: var(--rs-radius-xs, 4px);
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
  /* btn-atom's 15px block padding assumes a 16px/1 label; here the 18px icon is
     the tallest thing in the box, so 15 + 18 + 15 + 2x2px border overshoots
     Figma's 48px total by 4. */
  padding-top: 13px;
  padding-bottom: 13px;
}

/* The shadow ladder re-applies its own on :hover at (0,4,0) — match it. */
.btn.btn-atom.rs-cs-index__more-btn:hover,
.btn.btn-atom.rs-cs-index__more-btn:focus-visible {
  box-shadow: none;
}

/* ---- Closing CTA ------------------------------------------------------------- */
/*
 * No override here on purpose. Raman: "gap between CTA and footer somehow
 * collapsed, why it so?" — the real cause was not the number but the shared
 * partial's arithmetic: the cards overhang the photo by 58px via a transform,
 * which takes no layout space, so 60px of padding rendered as 2px of gap and the
 * 120px this page was matched to rendered as 62px. Fixed at the source in
 * pages/cta-two-path.scss (`.rs-cta__main` margin-bottom), and this page now
 * takes the partial's own 60px — the default Raman specified, 2026-08-19.
 */