/* ============================================================
   Store (Solutions) — page-specific styles.
   Loaded AFTER home-v2.css + about-us.css + industrial-services.css.
   Structurally identical to Industrial Services EXCEPT:
     - Hero: single body paragraph, larger custom heading type scale,
       photo is a single flattened graphic (laptop + 4 icon circles +
       lavender blob + connector arrows) so the stock square/dots
       decoration is hidden.
     - Section 5 (.rd-is-improve) has only FOUR feature blocks; block 4
       is the AI block (image-right, reuses is-feat-5, FOUR outcomes).
     - Section 6 "Specialized Experience" is omitted entirely (no CSS
       needed — the section is simply not present in the region).
   Text on any colored/dark bg keeps an EXPLICIT color (see CLAUDE.md §6).
   ============================================================ */

/* ---- 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. The old flattened composite (laptop + 4 icon circles + lavender blobs +
   connector arrows baked into ONE png, with the stock square/dots hidden) is replaced
   by the standard square + dots so every non-home hero behaves the same and is
   responsive — the old composite vanished on mobile. ---- */
.rd-st-hero { background: #F4F7FF; }  /* R3: uniform hero bg #F4F7FF (matches the mockup + every other page) */
.rd-st-hero .rd-about-hero-inner { grid-template-columns: 1fr 560px; gap: 60px; align-items: center; }
.rd-st-hero h1 { font: 700 40px/1.2 var(--v2-font); letter-spacing: 5px; max-width: 460px; }
.rd-st-hero h1 span { color: var(--v2-purple); }
.rd-st-hero .rd-about-hero-copy p { max-width: 440px; color: var(--v2-text); }
.rd-st-hero .rd-about-hero-media img { aspect-ratio: 1034 / 625; }  /* R2: crisper clean Engagements laptop (1034px, transparent) replacing the soft 800px crop — matches the Report full-laptop hero treatment */
.rd-st-hero .rd-about-hero-square { top: -44px; left: 150px; width: 500px; height: 300px; }
.rd-st-hero .rd-about-hero-dots { top: 366px; left: 452px; width: 130px; height: 96px; }

@media (max-width: 980px) {
  /* clear the fixed nav/hamburger row: heading top ~120px sat under the logo
     (bottom ~124px) — bump top padding so it clears with a Report-like gap */
  .rd-st-hero { padding-top: 145px; }  /* R2: match the consistent mobile hero clearance (was 175 = too far) */
  .rd-st-hero .rd-about-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .rd-st-hero h1, .rd-st-hero .rd-about-hero-copy p { max-width: none; }
  .rd-st-hero .rd-about-hero-media img { width: 100%; }
  .rd-st-hero .rd-about-hero-square, .rd-st-hero .rd-about-hero-dots { display: none; }
}
.rd-st-hero-btns { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.rd-page .rd-st-hero-btns .rd-btn { border-color: var(--v2-purple); color: var(--v2-purple); background: transparent; }
.rd-page .rd-st-hero-btns .rd-btn:hover { background: var(--v2-purple-10); }

/* ---- Section 3 "Better Information Creates Better Decisions" — TRUST card
   copy needs a touch more width than the template's 285px to stay 2 lines ---- */
.rd-is-better .rd-is-card p { max-width: 310px; }

/* ---- Section 5 AI block (block 4) — 4 Typical Outcomes instead of 3 ---- */
.rd-st-feat-row--ai .rd-is-feat-out li { margin-bottom: 12px; }
.rd-st-feat-row--ai .rd-is-feat-out li:last-child { margin-bottom: 0; }

/* ---- Section 5 heading — Store's figma heading renders ~10% larger
   cap-height than the shared .rd-is-improve-h default (measured: figma
   capH 21px vs template's 19px); bump size/tracking to match on this page
   only (industrial-services.css untouched). ---- */
.rd-is-improve-h { font-size: 33px; letter-spacing: 3px; }