@charset "UTF-8";
/*!
 * Home page — what main.min.css and Bootstrap do not supply.
 *
 * Only two kinds of rule belong here:
 *   1. a class template-home.php uses that was never authored anywhere
 *      (.badge-adventage);
 *   2. Elementor per-page CSS that carried real brand or layout meaning and
 *      leaves the moment the page stops being an Elementor document.
 *
 * Everything else Elementor emitted for this page — widget scaffolding,
 * .elementor-element-<hash> wrappers holding only transitions and custom
 * properties, the dead motion-effect child layers, the button-internal
 * flex fixes — styles DOM this template does not have, and is deliberately
 * not ported.
 *
 * Values were re-measured on the live Elementor page at 1440 rather than read
 * off the reconstructed page CSS. Two of them came back different from the
 * reconstruction; both are called out inline, because a light-tinted reframe
 * card would have put yellow type at 1.6:1 on its own background.
 *
 * Tokens over hex literals (css/rs-design-tokens.css), per migration plan §7b.
 * Scoped to #rs-home so nothing here can leak onto a page Elementor still
 * renders.
 */
/* For the button atom's mobile cut. The desktop box stays longhand below —
   `btn-atom-l` also carries radius and the default shadow, which the global
   `.btn` block already owns for every button on this page. The mobile mixin
   carries neither, so it is safe to include here. */
/*!
 * The design system's button atom — atom/btns, Figma component set 30592:2267.
 *
 * WHY THIS FILE EXISTS
 * The same button box was written out longhand in eight places: four faces on the
 * Reliability Protocol LP, both survey submits, and the two hero faces. Every copy
 * was a place to drift, and it did drift — `.protocol-survey__next` ended up with
 * `min-height: 56px` and a second, higher-specificity `button.protocol-survey__next`
 * rule 400 lines away correcting it back to 48. Reviews kept surfacing button
 * findings page by page for exactly this reason.
 *
 * WHAT BELONGS HERE
 * Only the atom's BOX — the numbers that are identical across every colour.
 * Fill, border colour and label colour deliberately stay with the caller, because
 * that is the only axis the atom actually varies (yellow / teal / black / white),
 * and Bootstrap's own .btn-* variants already carry those for the global buttons.
 *
 * WHAT IS NOT HERE
 * The shadow ladder's hover and click steps, the disabled face and the radius
 * custom property live on the global `.btn` block in main.scss, which every button
 * in the theme already gets. Repeating them here would give two owners to one rule.
 *
 * Imported by main.scss and by the standalone page stylesheets that need it — the
 * pages/ entry points do not include main.scss, so a shared partial is the only way
 * they can share a definition.
 */
/* State shadows. The ladder tightens and strengthens as the button is pressed:
     default   0 20px 40px -10px rgba(38,50,56,.2)
     hover     0 10px 20px  -5px rgba(38,50,56,.3)
     click     0  5px 10px  -5px rgba(38,50,56,.4)
   Figma's ON_HOVER motion is 200ms ease-out, not Bootstrap's 150ms ease-in-out. */
/* ---------------------------------------------------------------------------
 * Hero eyebrow pills
 *
 * .badge-adventage exists in no stylesheet — on the Elementor page it was pure
 * per-page CSS, so today the three pills render as plain white running text:
 * no fill, no radius, no padding, no gap around the tick.
 *
 * Production drags the icon onto the text baseline with
 * `i { margin-right: 8px; position: relative; top: 3.5px }`. Centring the flex
 * line does the same job without the magic number and survives a line-height
 * change, so the icon rule is replaced rather than ported.
 *
 * Font family is left alone on purpose: "Hind Madurai" is already
 * $font-family-base.
 * ------------------------------------------------------------------------- */
/* The pill row is a flex row with the spec's own 8px gap, not three inline
   spans with a 5px block margin each: the margin put 5px of its own under the
   row, which is exactly the kind of drift that makes the 28px gap below
   (Figma 34905:31829) unreadable in the rendered page. */
#rs-home .adventage-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#rs-home .badge-adventage {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 4px 14px;
  border-radius: 12px;
  background-color: var(--rs-grey-light-50, #F9F9F9);
  color: var(--rs-teal-00, #408897);
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
}

/* ---------------------------------------------------------------------------
 * Button atom — size (Raman review 2026-08-11, items 1, 2, 3, 6, 9)
 *
 * Every button on this page was sized with Bootstrap's `px-4 py-3` utilities
 * (24/16), which is nothing in the design system: Figma's atom/btns is 15/30
 * padding at 16px/700, and the icon-bearing variants (42058:34666 / :34671 /
 * :34707 / :34717) tighten the right padding to 20px, add a 12px gap and an
 * 18px glyph. That single wrong pair of utilities is what made five of the
 * nine review screenshots. Fixing it here rather than per button is what
 * makes the page consistent; the utilities are gone from the markup because
 * they are !important and would win.
 *
 * BOTH cuts are a 48px box (Raman ruling 2026-08-14, task 1217488000144711).
 * This rule previously ran the text-only face at 52px, derived from a 1.375
 * line-height. The text-only atom is 30592:2291: 48px tall, 15/30 padding,
 * 16px/100% label — the same box as `with arrow`, only without the glyph.
 * The 48 comes from min-height, not from the padding summing to it (15+16+15
 * is 46), which is exactly how config/_btn-atom.scss's `btn-atom-l` works.
 * Not written as `@include btn-atom-l` here: that mixin also carries radius
 * and the default shadow, which the global `.btn` block below already owns
 * for every button on the page, and one rule should not have two owners.
 *
 * Radius (4px), the shadow ladder and every state fill already come from
 * main.scss's global `.btn` block — none of that is repeated here.
 *
 * Scoped away from the case-study carousel on purpose: that partial is shared
 * with About and the quiz thank-you page, its card CTA is a deliberately
 * different full-width `py-2` face, and the review did not flag it. Restyling
 * it from this file would silently change two other pages.
 * ------------------------------------------------------------------------- */
#rs-home .btn:not(.caseStudySwiper *) {
  /* Bootstrap draws every .btn with a 1px transparent border, which is 2px of
     box the design does not have — 54px measured against the atom's 52. None of
     the faces on this page is an outline variant, so the border goes rather
     than being subtracted from the padding. */
  --bs-btn-border-width: 0;
  /* Centred rather than left as an inline-block: min-height carries the box
     2px past the 46px the padding and label add up to, and on an inline-block
     that slack all lands under the label. Figma's atom is an auto-layout row
     centred on both axes, so this is the atom's own construction. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 700;
  /* The atom's label is 16px at 100%; min-height above carries the box to 48.
     Bootstrap's 1.5 would make it 59. */
  line-height: 1;
}

/* Display, centring and line-height now come from the base rule above — the
   icon cut differs from the text-only one on the gap and the right padding
   only, which is the whole point of the ruling this rule was rewritten for. */
#rs-home .btn:has(i):not(.caseStudySwiper *) {
  gap: 12px;
  /* The icon side is 10px tighter than the label side, per every icon atom. */
  padding-right: 20px;
}

/* 15 + 18 + 15 = 48px. Font Awesome's own 1.6 line-height would grow the box
   to 64 and is the reason every icon button rendered oversized. */
#rs-home .btn:has(i):not(.caseStudySwiper *) i {
  font-size: 18px;
  line-height: 1;
}

/* The atom's device=mobile cut — 44px at 14px/1, padding 15/20 symmetric for
   both faces (atom 30650:1662 text-only / 31528:18422 with arrow; Raman ruling
   2026-08-17). The page had no mobile box rule at all: the global `.btn` media
   rule drops the label to 14px and stops there, so every button on Home wore
   the 48px desktop box on a phone. Listed on both selectors because the icon
   rule above out-specifies a bare `#rs-home .btn` even from inside a media
   query, and its 20px right edge is now the value the mixin sets anyway. */
@media (max-width: 767.98px) {
  #rs-home .btn:not(.caseStudySwiper *),
  #rs-home .btn:has(i):not(.caseStudySwiper *) {
    min-height: 44px;
    padding: 15px 20px;
    font-size: 0.875rem;
  }
  #rs-home .btn:has(i):not(.caseStudySwiper *) i {
    font-size: 0.875rem;
  }
}
/* ---------------------------------------------------------------------------
 * Hero rhythm (Raman review item 1)
 *
 * The four hero children were spaced with a uniform mb-4 (24px). Figma
 * 34905:31829 runs three different gaps down the stack — 28 under the pill
 * row, 20 under the headline, 48 above the button — and the flat 24 is what
 * reads as "wrong gaps and margins between elements".
 * ------------------------------------------------------------------------- */
#rs-home .rs-hero .adventage-bar {
  margin-bottom: 28px;
}

#rs-home .rs-hero h1 {
  margin-bottom: 20px;
}

#rs-home .rs-hero p {
  margin-bottom: 48px;
}

/* ---------------------------------------------------------------------------
 * Quiz teaser rhythm and its text link (Raman review items 3, 4)
 *
 * Figma 34905:31814: 40px from the copy to the button, 20px from the button to
 * the link below it. The link is 16px/600 in the button's own yellow — and
 * carries no underline. The brand does not underline anchors; Bootstrap's
 * reboot does, which is where the underline in the screenshot came from.
 * ------------------------------------------------------------------------- */
#rs-home .rs-quiz p {
  margin-bottom: 40px;
}

#rs-home .rs-quiz .btn {
  margin-bottom: 20px;
}

#rs-home .rs-quiz a.link-warning {
  font-weight: 600;
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * Heading emphasis
 *
 * A <span> inside a heading is the brand's emphasis device: production drops it
 * to 400 and italicises it. It is per-widget Elementor CSS, so it leaves with
 * the plugin and every emphasised phrase currently renders bold and upright,
 * indistinguishable from the words around it.
 *
 * h1 is included as of Raman's 2026-08-12 round: production renders the hero's
 * "productivity" and "reliability" at the headline's own weight and upright, and
 * that was carried over by the migration, but the design wants the same emphasis
 * device here as everywhere else on the page — 400 and italic. Production loses
 * this one.
 *
 * The .rs-cta* headings are excluded because template-parts/cta-two-path.php
 * owns its own heading styling in pages/cta-two-path.scss, and an #id selector
 * here would silently outrank that file's .rs-cta__title span. The exclusion
 * sits on the heading rather than on an ancestor section on purpose: an
 * ancestor type selector would push this rule one type above the two colour
 * exceptions below and quietly beat them.
 * ------------------------------------------------------------------------- */
#rs-home h1 span,
#rs-home h2:not([class*=rs-cta]) span,
#rs-home h3:not([class*=rs-cta]) span {
  font-style: italic;
  font-weight: 400;
}

/* h4 is the same device minus the italic — production drops the span to 400 and
   leaves it upright. Separate rule rather than an addition to the list above
   because the two colour exceptions below are both h4s, and folding them
   together would need the weight declared three times instead of twice. */
#rs-home h4 span {
  font-weight: 400;
}

/* Two headings carry the emphasis in colour instead: coral for the pain, yellow
   for the promise, both at full weight. Same specificity as the rules above, so
   they have to stay below them. */
#rs-home .rs-problem h4 span {
  font-weight: 700;
  color: var(--rs-coral-00, #F35B54);
}

#rs-home .rs-reframe h4 span {
  font-weight: 700;
  color: var(--rs-yellow-00, #FFC94B);
}

/* The quiz headline's <i>#1 blocker</i> inherits .fw-bold from its h2 and comes
   out bold-italic; production forces 400. Matches only the classless <i> on
   purpose — every other <i> on this page is a Font Awesome glyph, whose weight
   IS its variant, so 400 would quietly turn solid icons into regular ones. */
#rs-home h2 i:not([class]) {
  font-weight: 400;
}

/* ---------------------------------------------------------------------------
 * Display type
 *
 * Bootstrap's .display-4 is a flat 3.5rem/1.2 — 56px/67px at every width.
 * Production runs 48/52 and steps down twice, so the current hero is larger
 * than production on desktop and roughly 2.3x larger at 375px, where it eats
 * the fold. The stepped values are production's, mapped onto this site's
 * Bootstrap breakpoints.
 * ------------------------------------------------------------------------- */
#rs-home .display-4 {
  font-size: 48px;
  line-height: 52px;
}

/* ---------------------------------------------------------------------------
 * Long words in headings
 *
 * Polish runs 10-15% longer than English and its compound nouns are what break
 * out of a heading box — that exact bug shipped on About. Applied to every
 * heading rather than the two .display-* classes, because the widest headings
 * on this page (.fs-1, 40px) carry neither class.
 *
 * hyphens is gated to Polish. It is only ever needed there — English never
 * overflowed — and switching it on for both languages is what put a mid-word
 * "re-/mote" into the English h1, a break production does not have.
 * overflow-wrap stays on for both: it is the guarantee for a word hyphenation
 * refuses to split, and it does not touch a line that already fits.
 * ------------------------------------------------------------------------- */
#rs-home h1,
#rs-home h2,
#rs-home h3,
#rs-home h4 {
  overflow-wrap: break-word;
}

#rs-home:lang(pl) > :not(.rs-cta):not(.rs-modal) h1,
#rs-home:lang(pl) > :not(.rs-cta):not(.rs-modal) h2,
#rs-home:lang(pl) > :not(.rs-cta):not(.rs-modal) h3,
#rs-home:lang(pl) > :not(.rs-cta):not(.rs-modal) h4 {
  hyphens: auto;
}

/* ---------------------------------------------------------------------------
 * Heading colour and rhythm
 *
 * Bootstrap 5.3 routes every heading through `color: var(--bs-heading-color)`,
 * whose :root value is `inherit`. With no page-level value set, the headings
 * here inherit $body-color (#5D636A) and render as washed-out body grey —
 * production paints every one of them $color-text-dark, and so does the
 * already-migrated CTA partial (.rs-cta__title). Setting the custom property
 * once is the whole fix. The three dark contexts hand it back to `currentColor`
 * so their headings keep following their section's white text.
 *
 * `currentColor` and not `inherit`: on a custom property `inherit` is the
 * CSS-wide keyword, so it resolves to the value inherited from #rs-home — the
 * dark ink again — and paints a dark h1 on the dark hero. `currentColor` is a
 * plain token, substituted into `color` where it means the inherited colour.
 *
 * Line-height is the same story: Bootstrap gives headings a flat 1.2, and
 * production runs 1.3 — 40/52 on all five section headings, 32/42 on the
 * pivot line. cta-two-path.scss already hardcodes 1.3 for its own h2.
 *
 * Both partials are excluded from the line-height rule because they set their
 * own values per heading and an #id selector here would silently outrank them.
 * ------------------------------------------------------------------------- */
#rs-home {
  --bs-heading-color: var(--rs-black-prime, #34383C);
}

#rs-home .text-white,
#rs-home .rs-reframe {
  --bs-heading-color: currentColor;
}

#rs-home > :not(.rs-cta):not(.rs-modal) {
  /* .display-4 is exempt because it carries its own leading at all three of
     its sizes; without the exemption the quiz h2 took 1.3 at the two mobile
     steps and fell out of step with the hero h1, which is the same size. */
  /* 1.3 is right for the 32px and 40px headings it was measured from, but
     production's leading is a per-size value rather than one ratio: 20/28 and
     24/34 are both looser than 1.3. Selectors carry the element so that a
     .fs-4 or .fs-5 on a paragraph is not caught, and they sit inside this
     block so they outrank the bare `h2` above without an !important. */
  /* The quiz headline shares .display-4 with the hero h1 and every value of it
     except the leading: 54px against the h1's 52. Pinned only where .display-4
     is 48px, so the two step-downs below 1200px still reach it. Nested in this
     block, not written flat, so that it outranks the 1.3 above. */
}
#rs-home > :not(.rs-cta):not(.rs-modal) h2:not(.display-4),
#rs-home > :not(.rs-cta):not(.rs-modal) h3 {
  line-height: 1.3;
}
#rs-home > :not(.rs-cta):not(.rs-modal) h2.fs-5 {
  line-height: 28px;
}
#rs-home > :not(.rs-cta):not(.rs-modal) h4.fs-4 {
  line-height: 34px;
}
@media (min-width: 1200px) {
  #rs-home > :not(.rs-cta):not(.rs-modal).rs-quiz h2 {
    line-height: 54px;
  }
}

/* ---------------------------------------------------------------------------
 * Page rhythm — background
 *
 * Production alternates white and #F9F9F9 bands down the page — problem,
 * services, case studies are grey; hero, trusted strip, reframe and the CTA are
 * the white body showing through. Losing the grey bands flattened the page into
 * one uninterrupted white run.
 *
 * Shared class, three different hosts: full-bleed on .rs-services/.rs-cases
 * (production paints those edge-to-edge too), but on .rs-problem it sits on the
 * `.container` rather than the `<section>` — see "Problem — contained panel"
 * below for why.
 * ------------------------------------------------------------------------- */
#rs-home .rs-band {
  background-color: var(--rs-grey-light-50, #F9F9F9);
}

/* ---------------------------------------------------------------------------
 * Page rhythm — vertical padding
 *
 * Production's rhythm is per-section (20px to 290px) rather than one repeated
 * value, so each section gets its own rule instead of a shared utility class.
 * Values are measured off the live page (desktop = min-width 768, this file's
 * existing breakpoint for "mobile"); mobile is its own scale, not a shrunk
 * copy of desktop — production does not reuse desktop spacing at 375 either.
 *
 * .rs-quiz's background/gradient declaration lives with the rest of its rules
 * further down this file; only its padding is set here so the rhythm stays
 * legible in one place.
 *
 * .rs-trusted and .rs-cases were re-measured: the first pass read
 * padding-top/bottom straight off getComputedStyle, but staging leans on
 * negative margins between sibling sections to make two paddings overlap.
 * Reading the padding value alone, without the offsetting margin on its
 * neighbour, is a real number in the DOM and still the wrong one — the
 * values below are the net visual gap instead, measured end-to-end between
 * the same two edges a ruler on the rendered page would use.
 *
 * .rs-services is the one exception, and it is NOT netted out — see
 * "Services band — grey runs under the teal card" below for why its
 * negative margin is real, visible overlap rather than an arithmetic
 * artefact to cancel.
 * ------------------------------------------------------------------------- */
/* 90/60, not the 20/20 measured off the Elementor page: Raman's 2026-08-12
   round. The old value let the pill row sit almost under the navbar. Desktop
   only — mobile keeps its own scale below, as every other section here does. */
#rs-home .rs-hero {
  padding: 90px 0 60px;
}

/* .rs-trusted carries no padding of its own: it is the shared running-line frame
   (`.rs-trusted-strip`, logo-marquee.scss) and owns 40 top / 40 gap / 60 bottom
   site-wide. The 60px between the hero and the strip is `.rs-hero`'s own
   padding-bottom above, so hero content → title is 60 + 40 = the 100px Raman
   specified — it was 120 while this rule added a second 60 on top of the hero's.
   Raman, 2026-08-19: "the template from a Home page is a main component that is
   duplicated across all other pages … now they are correct: 40px top and 60px
   bottom." Do not give this section padding again; put page-level air on the
   neighbouring section, or wrap the strip in a container of its own. */
#rs-home .rs-quiz {
  padding: 70px 0 60px;
}

#rs-home .rs-isolation {
  padding: 90px 0 75px;
}

#rs-home .rs-meaningful-data {
  padding: 90px 0;
}

#rs-home .rs-cases {
  padding: 60px 0 90px;
}

/* .rs-cta carries no override here any more. The block's own `60px 20px` (and
   `40px 20px` on mobile) is the site-wide default Raman asked for, 2026-08-19,
   and Home's old `60px 20px 120px` matched it on three sides anyway. The 120px
   never rendered as 120: the cards overhang the photo by a transform, so the
   bottom was measured from the photo's edge and 120 came out as 62. Fixed in
   pages/cta-two-path.scss — which is why the number goes instead of the fix.
   Oskar's ruling on FIX 1217648343711028: 60px everywhere, one number, in the
   component. Do not reintroduce a per-page bottom here. */
/* Extra gap ahead of the problem panel — .rs-problem carries no padding of
   its own (the grey fill lives on .container below, flush with the section
   edge), so today the quiz band's dark background runs straight into the
   panel with zero space between them. Production has a measured 100px of
   plain white page background between the two. Margin, not padding: the gap
   is body background showing through, not part of the panel, and a
   padding-top on the section would paint nothing (the section itself has no
   fill) while a padding-top on .container would double up with its own
   measured 55/60 top/bottom rhythm below. */
#rs-home .rs-problem {
  margin-top: 100px;
}

/* The contained panel's own padding, not the section's — see below.
   padding-top/bottom only — see the mobile override below for why the
   shorthand is wrong here. This rule is unconditional (no media query), so
   its own 3-value shorthand was the actual regression: it zeroes the
   container's horizontal padding at every width, not just mobile. */
#rs-home .rs-problem .container {
  padding-top: 55px;
  padding-bottom: 60px;
}

@media (max-width: 767.98px) {
  #rs-home .rs-hero {
    padding: 30px 0 20px;
  }
  /* .rs-trusted: see the desktop note — the shared frame's 40/40/60 is width
     independent, so there is no mobile pair here either. This rule used to add
     40 top (which the frame now supplies) and 80 bottom (the frame gives 60). */
  #rs-home .rs-quiz {
    padding: 40px 0 80px;
  }
  #rs-home .rs-isolation {
    padding: 30px 0 40px;
  }
  #rs-home .rs-meaningful-data {
    padding: 20px 0 60px;
  }
  #rs-home .rs-cases {
    padding: 40px 0 40px;
  }
  /* .rs-cta: no mobile pair either — see the desktop note. */
  #rs-home .rs-problem {
    margin-top: 40px;
  }
  /* padding-top/bottom only — NOT the padding shorthand. This container's own
     .row carries g-4/g-lg-5 gutters, whose Bootstrap-standard negative margin
     (-12px each side) relies on the container's default 12px horizontal
     padding to cancel out. A 3-value shorthand here zeroed that padding and
     the row's gutter bled 12px past the viewport on the right — a regression
     from this rule, not a pre-existing quirk. */
  #rs-home .rs-problem .container {
    padding-top: 40px;
    padding-bottom: 70px;
  }
}
/* ---------------------------------------------------------------------------
 * Services band — grey runs under the teal card
 *
 * Staging does not stack .rs-services flush below .rs-isolation: the grey
 * (#F9F9F9) band starts while the teal .rs-reframe card (the last thing in
 * .rs-isolation) is still on screen, and the card's own bottom edge lands
 * fully inside the grey area — measured on staging at 1440, the grey band's
 * top edge sits 210px above the teal card's bottom edge, both at desktop and
 * at 375. The section-level shorthand above nets this to zero (padding-top
 * chosen so the heading lands right, negative margin never applied) — right
 * heading, wrong background, and the case this whole rule exists to fix.
 *
 * margin-top pulls the section (and its full-bleed grey fill) up by
 * 210px + .rs-isolation's own padding-bottom, so the grey top edge lands
 * exactly 210px above the teal card regardless of that padding. padding-top
 * absorbs the same amount back plus the section's pre-existing padding-top,
 * so the heading two lines down does not move — measured gap from the teal
 * card's bottom edge to the heading's top edge is 80px at desktop, 90px at
 * 375 (also off staging; not the same number as the 210px overlap, and not
 * derived from it). padding-bottom is untouched at both widths.
 * ------------------------------------------------------------------------- */
#rs-home .rs-services {
  margin-top: -285px;
  padding: 290px 0 130px;
}

@media (max-width: 767.98px) {
  #rs-home .rs-services {
    margin-top: -250px;
    padding: 300px 0 60px;
  }
}
/* ---------------------------------------------------------------------------
 * Heading measure
 *
 * Three headings are set narrower than their container on production. Left at
 * the container's full 1122px they run to a measure the design never intended
 * — the services heading in particular is a centred two-line block there and a
 * single 1122px line here.
 *
 * .rs-cta__title is the two-path partial's own heading. Reaching it from here
 * rather than from pages/cta-two-path.scss is deliberate: the partial is shared
 * with other pages and only the homepage caps it.
 * ------------------------------------------------------------------------- */
#rs-home .rs-services > .container > h2 {
  max-width: 550px;
  margin-inline: auto;
  /* Raman review item 6: the heading sat on Bootstrap's own 8px heading margin,
     which reads as the title touching the first card. Figma 34905:32104 puts
     60px between them (and 30px between the two cards, which .rs-service-stack
     already has). */
  margin-bottom: 60px;
}

/* ---------------------------------------------------------------------------
 * Service cards — media/copy split
 *
 * Figma 34905:32104 and the live page agree closely: a ~455px colour panel,
 * a 60px gap, and the remaining width to the white copy panel. The "Discover"
 * button style (white on the card's own colour) is staging's, not Figma's —
 * the spec has it swap to a dark button on the coral card, but both live
 * cards use the same white/teal button regardless of their own accent, so one
 * rule serves both instead of the two the spec implied.
 * ------------------------------------------------------------------------- */
#rs-home .rs-service-stack {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

#rs-home .rs-service-card {
  border-radius: 4px;
  overflow: hidden;
  background-color: var(--rs-white-pure, #FFFFFE);
}

#rs-home .rs-service-card__media {
  display: flex;
  flex-direction: column;
  padding: 40px;
  color: var(--rs-white-pure, #FFFFFE);
  /* Anchor AND stacking context for the decorative pattern below.
     position:relative alone does not open one (that needs a z-index other
     than auto) — without it the panel has no stacking context of its own,
     so the pseudo's z-index:-1 escapes to the nearest ancestor that does
     have one, which can be far enough up the tree to land behind an opaque
     background and disappear completely instead of just sitting under this
     panel's own gradient. */
  position: relative;
  z-index: 0;
}

/* Staging layers a media-library line-art SVG under the gradient on both
   cards — the reconstruction had only the flat gradient, which is the
   "wrong background" this was flagged for. z-index:-1 (not DOM order) is
   what keeps it under the badge/heading/CTA: those are plain static content,
   and a positioned pseudo-element with z-index:auto paints ABOVE static
   content regardless of source order, so without it the artwork would sit
   on top of the copy instead of behind it. z-index:-1 only reads as "behind
   the gradient" because the rule above gives .rs-service-card__media its own
   stacking context for it to be -1 within. */
#rs-home .rs-service-card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-repeat: no-repeat;
}

#rs-home .rs-service-card--coral .rs-service-card__media {
  /* 105deg, not the --rs-gradient-coral token's 135deg — staging's own card
     renders at 105deg; the token is correct everywhere else it's used, so
     the deviation is local rather than a token edit. */
  background: linear-gradient(105deg, #F18E70 0%, #F37465 100%);
}

#rs-home .rs-service-card--coral .rs-service-card__media::before {
  background-image: url("../../../uploads/2023/09/waves-logo.svg");
  background-position: 0% 0%;
}

#rs-home .rs-service-card--teal .rs-service-card__media {
  background: var(--rs-gradient-teal-light-135, linear-gradient(135deg, #4B9EB0 0%, #408897 100%));
}

#rs-home .rs-service-card--teal .rs-service-card__media::before {
  background-image: url("../../../uploads/2023/09/remote_hybrid.svg");
  background-position: 100% 100%;
}

/* Fixed gap under the title at mobile, where the media panel is only as tall
   as its own content; margin-top:auto takes over at desktop, where the panel
   is stretched to match the (taller) copy panel and the button needs to sit
   at its bottom edge instead. */
/* Card title: 40px/1.3 Bold (Figma `cards` 34905:32106). .fs-1 carries the
   size; 1.3 has no Bootstrap line-height utility. */
/* The panel already sets white, but a page-wide heading rule repaints h2 dark,
   so the title has to state it. */
#rs-home .rs-service-card__media h2 {
  line-height: 1.3;
  color: var(--rs-white-pure, #FFFFFE);
}

/* Both CTAs live inside the coloured panel, stacked 15px apart and filling its
   width — Figma 34905:31677 `img.btns`, and Raman review item 7. The card used
   to carry a single "Discover" here and a second, differently-sized "Book a
   call" over in the white copy panel; that was staging's arrangement, not the
   design's. Sizing comes from the icon atom at the top of this file; only the
   two faces are stated here.
   Fixed 24px above the pair at mobile, where the panel is only as tall as its
   own content; margin-top:auto takes over at desktop, where the panel is
   stretched to the (taller) copy panel and the buttons sit at its bottom. */
#rs-home .rs-service-card__btns {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 24px;
}

/* The yellow face is `.btn-warning`, so its whole state ladder comes from
   main.scss for free. Only the white "Discover" needs its own — and its label
   is the page's ink, not teal: 42058:34671 is #FFFFFE on #34383C. */
#rs-home .rs-service-card__cta--discover {
  background-color: var(--rs-white-pure, #FFFFFE);
  color: var(--rs-black-prime, #34383C);
}

#rs-home .rs-service-card__cta--discover:hover,
#rs-home .rs-service-card__cta--discover:focus-visible {
  background-color: var(--rs-white-ivory, #F9FAF4);
  color: var(--rs-coral-00, #F35B54);
}

#rs-home .rs-service-card__cta--discover:active {
  background-color: #FFF5DE;
  color: #D9514B;
}

#rs-home .rs-service-card__body {
  padding: 40px;
}

#rs-home .rs-service-card__bullet {
  color: var(--rs-coral-00, #F35B54);
}

@media (min-width: 992px) {
  #rs-home .rs-service-card {
    display: flex;
    gap: 60px;
  }
  #rs-home .rs-service-card__media {
    flex: 0 0 455px;
  }
  #rs-home .rs-service-card__btns {
    margin-top: auto;
  }
  #rs-home .rs-service-card__body {
    flex: 1 1 auto;
    padding: 40px 40px 40px 0;
  }
}
#rs-home .rs-cases h2 {
  max-width: 784px;
}

#rs-home .rs-cta__title {
  max-width: 844px;
  margin-inline: auto;
}

/* ---------------------------------------------------------------------------
 * Quiz teaser — the sand-coloured glow rising off the bottom edge.
 *
 * Elementor per-page CSS layered over .bg-dark's #2A2D31, and the only thing
 * that tells this section apart from the two other flat dark sections on the
 * page. Not to be confused with the near-identical orphan rule attached to
 * element 60fbdb2f, which targets a node that is on neither page and has never
 * rendered.
 * ------------------------------------------------------------------------- */
#rs-home .rs-quiz {
  /* The fill is here rather than on a .bg-dark in the markup: main.scss means
     .bg-dark to be the brand's #2A2D31, but Bootstrap's own .bg-dark carries
     !important and wins, so the class paints #212529 wherever it is used.
     Painting the one dark band on this page directly avoids that fight. */
  background-color: #2A2D31;
  background-image: radial-gradient(at bottom center, rgba(182, 169, 141, 0.3) 0%, rgba(41, 47, 52, 0) 50%);
}

/* ---------------------------------------------------------------------------
 * Contained panels
 *
 * Two bands are full-bleed on desktop but NOT on a 375 screen: production
 * insets both into a card rather than letting them run to the viewport edge.
 * The section keeps the full-bleed fill at every width above; at mobile the
 * fill instead moves to `.container` (Bootstrap already gives it horizontal
 * gutters, so shrinking its own box and re-centring it is the whole change —
 * no new wrapper element).
 *
 * The two panels are inset by different amounts because they measure
 * differently on production (quiz 20px both sides, problem 20/0) — carried
 * over as measured rather than normalised to one shared value.
 * ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  #rs-home .rs-quiz {
    background: none;
  }
  #rs-home .rs-quiz .container {
    width: calc(100% - 40px);
    margin-inline: 20px;
    background-color: #2A2D31;
    background-image: radial-gradient(at bottom center, rgba(182, 169, 141, 0.3) 0%, rgba(41, 47, 52, 0) 50%);
  }
  #rs-home .rs-problem .container {
    width: calc(100% - 20px);
    margin-left: 20px;
    margin-right: 0;
  }
}
/* ---------------------------------------------------------------------------
 * Problem panel — corner radius, photo bleed, pain-list rhythm
 *
 * Figma 34905:32260 and the live page agree: the panel's top-left corner is one
 * oversized radius (not a small 4-8px rounding), and the photo poke past the
 * panel's own top edge rather than sitting flush inside it. Values are
 * staging's, measured at 1440 and 375 — the radius comes back as the same 233px
 * at both widths, so it is a fixed value, not something scaled off a ratio.
 *
 * The icon glyph is also corrected here: staging renders "frown" (fa-regular),
 * matching the Figma spec too — the pre-existing "x" was neither's icon, so
 * this is a real design correction, not a copy edit.
 * ------------------------------------------------------------------------- */
#rs-home .rs-problem__panel {
  border-top-left-radius: 233px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

/* Desktop bleed (65px) only applies with the row's own .align-items-lg-end;
   mobile's is smaller (30px) because the stacked column has no equivalent
   bottom-alignment pulling extra height out of the image. */
#rs-home .rs-problem__photo {
  margin-top: -30px;
}

@media (min-width: 992px) {
  #rs-home .rs-problem__photo {
    margin-top: -65px;
  }
}
/* .rs-problem__copy is plain h4 + p + ul with no margin utility on the first
   two, so the gap between them was Bootstrap's own heading/paragraph margins
   (0.5rem / 1rem = 8px / 16px) rather than a value this file ever set.
   Staging and Figma agree on 20px for both. */
#rs-home .rs-problem__copy > h4,
#rs-home .rs-problem__copy > p {
  margin-bottom: 20px;
}

/* ---------------------------------------------------------------------------
 * Icon-to-text alignment in every bullet list on the page (Raman review item 5)
 *
 * The glyph has to sit centred on the FIRST line of its row, and it was riding
 * the row's top edge instead. Font Awesome gives its icons `line-height: 1`, so
 * a 20px glyph is a 20px-tall flex item next to a 32px first line (20px text at
 * 1.6) and `align-items: flex-start` pins it 6px too high.
 *
 * Handing the glyph its list's OWN leading makes its line box exactly as tall
 * as the text's, so the glyph centres inside it — which is precisely how Figma
 * builds it (34905:31794 offsets the icon y+6 against a 32px line box, and
 * 34905:32219 gives its star a 32px box against 20px/1.6 text).
 *
 * `inherit` rather than a literal 1.6: these three lists do not all run the
 * same leading (the pain list renders 20/30, Figma's spec is 20/32), and a
 * hardcoded ratio would re-introduce the same 1-2px drift the moment a list's
 * font-size or leading changed. Inheriting is self-correcting.
 *
 * This also replaces the `.mt-1` nudges the outcome and focus lists carried:
 * 4px was a guess at the same 6px, it only ever looked right at one font size,
 * and it moved the glyph rather than sizing its line box.
 * ------------------------------------------------------------------------- */
#rs-home .rs-problem__icon,
#rs-home .rs-reframe__outcomes i,
#rs-home .rs-service-card__bullet {
  line-height: inherit;
}

#rs-home .rs-problem__icon {
  color: var(--rs-coral-00, #F35B54);
  font-size: 20px;
}

#rs-home .rs-problem__list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#rs-home .rs-problem__item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* ---------------------------------------------------------------------------
 * Isolation row — two columns on desktop, stacked on mobile
 *
 * Figma 34905:32254: coral-bar heading on the left, the CEO/manager paragraph
 * on the right. The wrapper markup for this already existed
 * (.rs-isolation__row > .rs-isolation__quote + .rs-isolation__copy) — it only
 * needed the flex rule below to stop rendering as two stacked block children.
 * ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  #rs-home .rs-isolation__row {
    display: flex;
    align-items: flex-start;
    /* Staging's column gutter (10px column padding each side) is 20px between
       the quote and the copy; the flex row here had no gap at all. */
    gap: 20px;
  }
  #rs-home .rs-isolation__quote {
    flex: 0 0 47%;
    max-width: 400px;
  }
  #rs-home .rs-isolation__copy {
    flex: 1 1 auto;
  }
}
@media (max-width: 991.98px) {
  #rs-home .rs-isolation__quote {
    margin-bottom: 20px;
  }
}
/* Staging's copy paragraph is 20px at desktop (.fs-5, set in the template),
   dropping to 18px at mobile — not all the way to Figma's 16px. Prefer the
   live measurement. */
@media (max-width: 767.98px) {
  #rs-home .rs-isolation__copy p {
    font-size: 18px;
  }
}
/* The pull-quote's coral rule. Bootstrap's reboot zeroes blockquote's UA margin
   and adds nothing else, so without this the quote is indistinguishable from
   body copy. Vertical rhythm is left to the template's .mb-4.
   blockquote is not a heading element, so it never picked up the
   --bs-heading-color set on #rs-home above — it inherited plain $body-color
   (#5D636A) instead of staging's #34383C. It is the only blockquote on this
   page, so the colour lives on the bare element rather than a BEM class. */
#rs-home blockquote {
  padding: 20px 0 20px 20px;
  border-left: 4px solid var(--rs-coral-00, #F35B54);
  color: var(--rs-black-prime, #34383C);
}

/* ---------------------------------------------------------------------------
 * Pivot ornament — the circle-and-arrow bridging "But it doesn't have to be
 * that way..." into the teal card.
 *
 * The ornament is a media-library image (rs_home_media output, a bare <img>),
 * not CSS artwork — it already draws its own circle, arrow and descending
 * line. Its container is not itself text-center (only the heading above it
 * is), so the image renders at the container's flush-left edge instead of
 * centred under that heading. margin-inline:auto matches the centring
 * pattern already used on .rs-services__heading and .rs-cta__title below.
 *
 * margin-bottom:0 closes the gap to the teal card below — production runs
 * its line straight into the card with none. The template carries no margin
 * utility on this image for the same reason: Bootstrap's spacing utilities
 * are !important, and fighting one here would need an !important right back.
 * ------------------------------------------------------------------------- */
#rs-home .rs-isolation > .container > img {
  display: block;
  margin-inline: auto;
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * "Remote work CAN be organized" card
 *
 * The template reached for `bg-info bg-opacity-10`, which is stock Bootstrap
 * cyan at 10% — $info is one of the two Bootstrap colours config/variables.scss
 * does not override, so the card rendered rgba(13, 202, 240, .1).
 *
 * Production is solid teal with white type; measured, not reconstructed. The
 * reconstruction read this as a pale tint, which would have left the yellow
 * heading spans above at 1.6:1 against their own card.
 * ------------------------------------------------------------------------- */
#rs-home .rs-reframe {
  /* Anchor AND stacking context — see the identical comment on
     .rs-service-card__media above. The services band below now overlaps
     this card with a negative margin-top (see "Services band — grey runs
     under the teal card"); .rs-services is a later, plain static sibling,
     and position:relative with no z-index opens no stacking context at
     all, so without an explicit z-index here the grey band — painted after
     this card in DOM order — would paint over it instead of under it. */
  position: relative;
  z-index: 1;
  background-color: var(--rs-teal-00, #408897);
  /* Production layers a wave shape over the teal — white at 5% alpha, so it
     reads as a sheen on the left third rather than as artwork. Media-library
     asset, addressed the way cta-two-path.scss addresses its own: relative
     from wp-content/themes/hello-elementor-child/css/ up to wp-content/uploads/. */
  background-image: url("../../../uploads/2025/09/bg-2.png");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
  color: #FFF;
}

/* Outcome markers are grey/light/30 stars, not coral ticks — Figma 34905:32219,
   confirmed by Raman (review item 4): FA regular "star" at 20px in #D8E2E3
   against the teal. Production's coral tick was carried over by the migration;
   the design has never used a tick here. */
#rs-home .rs-reframe li i {
  color: var(--rs-grey-light-30, #D8E2E3);
}

/* ---------------------------------------------------------------------------
 * "Remote work CAN be organized" card — two-column grid
 *
 * Figma 34905:32219 splits the card into an intro+CTA column and an outcomes
 * column. grid-template-areas place the five existing children (heading,
 * subtext, outcomes-title, outcomes-list, cta) into that layout without
 * reordering the markup, so mobile's plain DOM-order stack keeps working for
 * free. Desktop gap/offset values are staging's; the 88px gap above the CTA
 * has no Figma counterpart at all (that spec only covers it on mobile).
 * ------------------------------------------------------------------------- */
#rs-home .rs-reframe {
  border-radius: 5px;
  padding: 40px 30px 60px;
}

#rs-home .rs-reframe__subtext,
#rs-home .rs-reframe__outcomes-title,
#rs-home .rs-reframe__outcomes,
#rs-home .rs-reframe__cta {
  margin-top: 20px;
}

#rs-home .rs-reframe__outcomes {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

@media (min-width: 576px) {
  #rs-home .rs-reframe {
    padding: 40px 60px 60px;
  }
}
@media (min-width: 992px) {
  #rs-home .rs-reframe__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
    grid-template-areas: "heading         outcomes-title" "subtext         outcomes-list" "cta             outcomes-list";
  }
  #rs-home .rs-reframe__heading {
    grid-area: heading;
  }
  #rs-home .rs-reframe__subtext {
    grid-area: subtext;
    margin-top: 30px;
  }
  #rs-home .rs-reframe__outcomes-title {
    grid-area: outcomes-title;
    margin-top: 0;
  }
  #rs-home .rs-reframe__outcomes {
    grid-area: outcomes-list;
    margin-top: 25px;
  }
  #rs-home .rs-reframe__cta {
    grid-area: cta;
    margin-top: 88px;
    align-self: start;
  }
}
/* Staging's subtext is 20px at desktop (.fs-5, set in the template), dropping
   to 18px at mobile. The outcomes list stays 20px at every width on staging,
   so .fs-5 needs no mobile override the way the subtext does. */
@media (max-width: 767.98px) {
  #rs-home .rs-reframe__subtext {
    font-size: 18px;
  }
}
/* ---------------------------------------------------------------------------
 * Closing band — `bg-info bg-opacity-25`, i.e. the same Bootstrap cyan again.
 * Production is solid teal-dark, white type, and a deliberately tall,
 * top-heavy band (135px above the heading, 120px below the logo grid).
 * ------------------------------------------------------------------------- */
#rs-home .rs-closing {
  padding: 135px 0 120px;
  background-color: var(--rs-teal-dark-10, #35717D);
}

/* The sign-off line is a step down from the white heading above it, not the
   same white. */
#rs-home .rs-closing p {
  color: var(--rs-grey-light-30, #D8E2E3);
}

/* Eight client logos in the band's right-hand column: 2 x 4, 20px both ways,
   each 166px cell centred. A grid rather than the flex row that was here,
   because a wrapping flex row reflows to 3-2-3 in the narrower column and
   production's is a fixed pair-per-row. Collapses to a single column with the
   Bootstrap row below lg. */
#rs-home .rs-client-logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  justify-items: center;
  align-items: center;
}

/* Bootstrap derives a button's ink from its background, and for the brand teal
   its contrast test lands on black. Production's "See all Case Studies" is
   white on that same teal. */
#rs-home .btn-primary {
  --bs-btn-color: #FFF;
  --bs-btn-hover-color: #FFF;
  --bs-btn-active-color: #FFF;
}

/* main.scss repaints .btn-dark to #34383C but not its outline sibling, so the
   two buttons in a service card sit side by side in two different blacks
   (#34383C against Bootstrap's #212529). Bootstrap 5.3 buttons are driven by
   CSS variables, so setting them is the whole fix. */
#rs-home .btn-outline-dark {
  --bs-btn-color: var(--rs-black-prime, #34383C);
  --bs-btn-border-color: var(--rs-black-prime, #34383C);
  --bs-btn-hover-bg: var(--rs-black-prime, #34383C);
  --bs-btn-hover-border-color: var(--rs-black-prime, #34383C);
  --bs-btn-active-bg: var(--rs-black-prime, #34383C);
  --bs-btn-active-border-color: var(--rs-black-prime, #34383C);
}

/* The case-study carousel's own layout/behaviour CSS now lives in
   pages/case-study-carousel.scss (a real shared stylesheet, enqueued by
   rs_enqueue_case_study_carousel()) rather than an @import duplicated into this
   page's scope. Only this page's colour override stays here — see below.

   The carousel's chrome is white because the partial was written for About's
   dark band: the arrows are inline SVGs with fill="#FFFFFE" baked into the
   markup, and the pagination bullets are white too. Both vanish on this page's
   #F9F9F9 band. Repainted here rather than in the partial because About still
   needs white.

   The colour is brand teal, not the charcoal this file used to paint: Figma
   34905:31504 draws both the arrows and the dots in #408897, the active dot at
   full opacity and the rest at 30% (Raman review item 8 — "wrong color for the
   pagination part"). Charcoal was inferred from the page's heading ink when the
   band was flipped from dark to light; the design says otherwise. */
#rs-home .caseStudySwiper .swiper-button-next path,
#rs-home .caseStudySwiper .swiper-button-prev path {
  fill: var(--rs-teal-00, #408897);
}

#rs-home .caseStudySwiper .swiper-pagination-bullet {
  background: var(--rs-teal-00, #408897);
  opacity: 0.3;
}

#rs-home .caseStudySwiper .swiper-pagination-bullet-active {
  opacity: 1;
}

@media (max-width: 1199.98px) {
  #rs-home .display-4 {
    font-size: 32px;
    line-height: 42px;
  }
}
@media (max-width: 767.98px) {
  #rs-home .display-4 {
    font-size: 24px;
    line-height: 34px;
  }
  #rs-home .rs-closing {
    padding: 40px 0 60px;
  }
}