/* ============================================================
   Solutions (Overview / Landing) — page-specific styles.
   Loaded AFTER home-v2.css + about-us.css + industrial-services.css.
   Reuses: .rd-about-hero shell, .rd-is-feat-band/.rd-is-feat-img/.rd-is-feat-head
   (band+heading half of the Report/Store/Operate blocks), .rd-is-chk, .rd-is-solution,
   .rd-is-work, .rd-logos, .rd-quote, .rd-cases/.rd-is-cases, .rd-cta/.rd-is-cta, .rd-footer.
   New page-specific pieces (prefixed .rd-sol-*): hero composite media, the "Three Ways"
   pill row, and the Challenges/Solutions/Outcomes + two-button card under each band.
   Text on any colored/dark bg is given an EXPLICIT color (see CLAUDE.md §6).
   ============================================================ */

/* ---- 1. Hero (reuses the SHARED .rd-about-hero layered pattern: clean laptop image
   + CSS purple square + CSS dot-grid, identical structure/behavior to the industry
   heroes. NO buttons on this page. The old baked composite (laptop+tablet+square+dots
   in one PNG, positioned absolutely outside the grid) is replaced so every non-home
   hero behaves the same and reflows/hides decoration on mobile. ---- */
.rd-sol-hero { background: #F4F7FF; }
.rd-sol-hero .rd-about-hero-inner { grid-template-columns: 1fr 600px; gap: 56px; align-items: center; }
.rd-sol-hero-copy h1 {
  font: 700 38px/1.2 var(--v2-font);
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--v2-text);
  margin: 0 0 24px;
  max-width: none;
  white-space: nowrap;
}
.rd-sol-hero-copy h1 span { color: var(--v2-purple); }
.rd-sol-hero-copy p { font: 400 16px/1.6 var(--v2-font); color: var(--v2-grey); margin: 0 0 16px; max-width: 440px; }
.rd-sol-hero-copy p:last-child { margin-bottom: 0; }
/* R3: client-supplied whole-group hero composition (1800x1215). Show it WHOLE — no
   object-fit crop (the old aspect-ratio 1130/873 was cropping the new, wider graphic's
   sides). Cap the width and right-align it inside the media column so the graphic never
   crosses the screen centre, leaving the copy column room. NEVER crop client artwork. */
/* Hero graphic: show the client composition WHOLE at the shared hero width (fills the media
   track, natural aspect, no object-fit crop). */
.rd-sol-hero .rd-about-hero-media img { aspect-ratio: auto; object-fit: contain; }
/* Title: keep the coloured word inline so the <br> after it doesn't add an empty line
   between "Solutions" and "Built Around". */
.rd-page .rd-sol-hero.rd-hero-std .rd-about-hero-copy h1 span { display: inline; }
/* Decorative square — Figma places it as a backdrop behind the graphic's RIGHT side, the
   laptop poking up-and-left of it, the square peeking out to the right (NOT above). Dots
   sit low-right. Kept inside the viewport so nothing scrolls. */
.rd-page .rd-sol-hero.rd-hero-std .rd-about-hero-square { top: 64px; left: 300px; width: 448px; height: 236px; }
/* Dots straddle the square's bottom-RIGHT corner: half overlapping the square, half below it,
   at the square's far right. (Square abs R~1420 B~603 → dots centred on that corner.) */
.rd-page .rd-sol-hero.rd-hero-std .rd-about-hero-dots { top: 252px; left: 636px; width: 112px; height: 96px; }
/* R4 FIX: same viewport-overflow clip as the shared hero dots — hide below the width where the
   grid fits beside the graphic (see about-us.css note). Shown at >=1421px, cleanly absent below. */
@media (max-width: 1420px) {
  .rd-page .rd-sol-hero.rd-hero-std .rd-about-hero-dots { display: none; }
}

/* ---- 2. Three Ways We Help (white bg; new) ---- */
.rd-sol-ways { padding: 90px 0 86px; }
.rd-sol-ways-h { font-size: 32px; letter-spacing: 1px; line-height: 1.35; margin-bottom: 0; }
.rd-sol-ways-h .rd-rule { margin-top: 22px; }
.rd-sol-pills { display: flex; justify-content: center; gap: 34px; margin: 46px 0 40px; flex-wrap: wrap; }
.rd-sol-pill {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: #fff; border: 1px solid #E6E6E6; border-radius: 8px;
  box-shadow: 0 8px 20px rgba(72,57,92,.08);
  padding: 20px 30px; min-width: 358px;
}
.rd-sol-pill-w1 { font: 700 16px/1 var(--v2-font); letter-spacing: 1px; text-transform: uppercase; color: var(--v2-text); }
.rd-sol-pill-w2 { font: 700 16px/1 var(--v2-font); letter-spacing: 1px; text-transform: uppercase; color: var(--v2-purple); }
.rd-sol-pill-arr { width: 16px; height: 12px; color: var(--v2-purple); flex: 0 0 16px; }
.rd-sol-ways-body { text-align: center; max-width: 900px; margin: 0 auto; font: 400 18px/1.6 var(--v2-font); color: var(--v2-text); }

/* ---- 3-5. Report / Store / Operate blocks ---- */
.rd-sol-block { padding: 46px 0; }
.rd-sol-block:first-of-type { padding-top: 8px; }
/* One continuous bordered/shadowed card: the coloured band is the rounded TOP,
   the white body is the rounded BOTTOM — the wrapper carries the single border,
   radius and shadow (overflow:hidden clips the band's fill to the top corners),
   so band+body read as ONE card (Figma) instead of a floating rounded band. */
.rd-sol-cardwrap {
  margin: 0 -24px; width: calc(100% + 48px);
  border: 1px solid #E6E6E6; border-radius: 10px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(72,57,92,.10);
}
.rd-sol-band { min-height: 322px; margin: 0; width: 100%; border-radius: 0; box-shadow: none; }
.rd-sol-band .rd-is-feat-head h3 { font-size: 33px; letter-spacing: 3.5px; margin-bottom: 10px; }
.rd-sol-band .rd-is-feat-img img { width: 404px; height: auto; }
/* R3: centre the purple divider — image + text grouped on either side of it (was image fixed 476px on the left, so the line sat far to the right). Each side is 50%; the image hugs the centre line, the text starts from it. */
.rd-sol-band .rd-is-feat-img { flex: 1 1 50%; justify-content: flex-end; padding: 0 46px 0 0; }
.rd-sol-band .rd-is-feat-head { flex: 1 1 50%; }
.rd-is-feat--right.rd-sol-band .rd-is-feat-img { justify-content: flex-start; padding: 0 0 0 46px; }
.rd-sol-block--report .rd-sol-band { background: #E3EDF4; }
.rd-sol-block--store  .rd-sol-band { background: #F2EAFB; }
.rd-sol-block--operate .rd-sol-band { background: #EDF0F2; }
.rd-sol-block--store .rd-sol-band .rd-is-feat-img img { width: 388px; }

/* white card under the band (inside the wrapper — no own border/radius/shadow) */
.rd-sol-card { background: #fff; margin: 0; width: 100%; padding: 40px 33px 42px; }
.rd-sol-card-desc { font: 400 18px/1.5 var(--v2-font); color: var(--v2-grey); margin: 0 0 30px; }
.rd-sol-card-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.rd-sol-col h4 {
  font: 700 18px/1.2 var(--v2-font); color: #101828; margin: 0 0 18px;
  border-left: 3px solid var(--v2-purple); padding-left: 13px;
  display: flex; align-items: center; gap: 9px;
}
.rd-sol-col ul { list-style: none; margin: 0; padding: 0; }
.rd-sol-col li { font: 400 16px/1.4 var(--v2-font); color: var(--v2-grey); margin-bottom: 15px; padding-left: 18px; position: relative; }
.rd-sol-col li:last-child { margin-bottom: 0; }
/* Typical Challenges — purple dot bullets */
.rd-sol-col-challenges li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--v2-purple); }
/* Common Solutions — purple check bullets */
.rd-sol-col-solutions li { padding-left: 24px; }
.rd-sol-col-solutions li::before { content: "\2713"; position: absolute; left: 0; top: -1px; color: var(--v2-purple); font-weight: 700; }
/* Outcomes — bordered box, green circle-check heading + green check bullets */
.rd-sol-col-outcomes { border: 1px solid #E6E6E6; border-radius: 8px; padding: 22px 26px 24px; }
.rd-sol-col-outcomes h4 { border-left: none; padding-left: 0; }
.rd-sol-col-outcomes li { padding-left: 26px; }
.rd-sol-col-outcomes li::before { content: "\2713"; position: absolute; left: 4px; top: 0; color: #00961E; font-weight: 700; }

.rd-sol-card-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 34px; }
.rd-page .rd-sol-btn-fill { background: #6D4A8D; color: #fff; text-align: center; justify-content: center; }
.rd-page .rd-sol-btn-fill:hover { background: #5c3d78; }
.rd-page .rd-sol-btn-outline { background: transparent; border: 1px solid #6D4A8D; color: #6D4A8D; text-align: center; justify-content: center; }
.rd-page .rd-sol-btn-outline:hover { background: rgba(109,74,141,.08); }

/* ---- 11. CTA (reuses .rd-cta/.rd-is-cta; white/60% heading bar like about-us CTA) ---- */
.rd-sol-cta h2 { border-left: 2px solid rgba(255,255,255,.6); padding-left: 18px; }
.rd-sol-cta p { max-width: 385px; }

/* ---- Footer: Clutch mark before the star rating (page-specific addition) ---- */
.rd-f-ico-clutch { width: 15px; height: 15px; margin-right: 8px; }

@media (max-width: 980px) {
  .rd-sol-hero .rd-about-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .rd-sol-hero-copy h1 { white-space: normal; }
  .rd-sol-hero .rd-about-hero-media img { width: 100%; }
  .rd-sol-hero .rd-about-hero-square, .rd-sol-hero .rd-about-hero-dots { display: none; }
  .rd-sol-pills { flex-direction: column; align-items: stretch; }
  .rd-sol-pill { min-width: 0; }
  .rd-sol-card-cols { grid-template-columns: 1fr; gap: 30px; }
  .rd-sol-card-btns { grid-template-columns: 1fr; }
  .rd-is-feat--right.rd-sol-band, .rd-sol-band { flex-direction: column; }
  /* R3: reset the desktop 50/50 flex on mobile so the stacked title/image size naturally (title-before-image handled by the shared .rd-is-feat mobile rules) */
  .rd-sol-band .rd-is-feat-img, .rd-sol-band .rd-is-feat-head, .rd-is-feat--right.rd-sol-band .rd-is-feat-img { flex: none; padding: 0; }
}

/* ---- HOW WE WORK — dark band variant (Solutions page) ---- */
.rd-sol-work { background: #392A46; }
.rd-sol-work .rd-is-work-h { color: #fff; }
.rd-page .rd-sol-work .rd-is-step-num { color: var(--v2-purple-50); }
.rd-sol-work .rd-is-step h3 { color: #fff; }
.rd-sol-work .rd-is-step p { color: #E8E2F0; }