/* ============================================================
   Professional Services (Industries) — page-specific styles.
   Loaded AFTER home-v2.css + about-us.css + industrial-services.css.
   Structurally identical to Industrial Services — REUSES every .rd-is-*
   class. Only the hero (different photo) is overridden; Section 6 uses the
   Industrial 4-card .rd-is-spec as-is. Text on colored/dark bg keeps an
   EXPLICIT color (see CLAUDE.md §6).
   ============================================================ */

/* ---- Hero (reuses .rd-about-hero; photo is 559x425) ---- */
.rd-pf-hero .rd-about-hero-inner { grid-template-columns: 1fr 559px; gap: 60px; }
.rd-pf-hero h1 { max-width: 560px; }
.rd-pf-hero h1 span { color: var(--v2-purple); }
.rd-pf-hero .rd-about-hero-copy p { max-width: 540px; }
.rd-pf-hero .rd-about-hero-media { align-self: start; margin-top: 71px; }
.rd-pf-hero .rd-about-hero-media img { aspect-ratio: 559 / 425; }
.rd-pf-hero .rd-about-hero-square { top: -31px; left: 48px; width: 600px; height: 280px; }
.rd-pf-hero .rd-about-hero-dots { top: 232px; left: 553px; width: 132px; height: 46px; }
.rd-pf-hero-btns { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.rd-page .rd-pf-hero-btns .rd-btn { border-color: var(--v2-purple); color: var(--v2-purple); background: transparent; }
.rd-page .rd-pf-hero-btns .rd-btn:hover { background: var(--v2-purple-10); }

/* ============ MOBILE (additive; desktop rendering untouched) ============ */
/* The base ≤980 reset (.rd-about-hero-inner -> 1fr) is out-specified by the
   two-class .rd-pf-hero override above, so on phones the photo was pushed off
   the viewport. Mirror the industrial-services mobile hero: stack copy over the
   full-width photo. (square/dots already hidden by the about-us base ≤980 rule.) */
@media (max-width: 980px) {
  .rd-pf-hero .rd-about-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .rd-pf-hero h1, .rd-pf-hero .rd-about-hero-copy p { max-width: none; }
  .rd-pf-hero .rd-about-hero-media { align-self: auto; margin-top: 0; }
  .rd-pf-hero .rd-about-hero-media img { width: 100%; height: auto; }
}