/* ============================================================
   Operate (Solutions) — page-specific styles.
   Loaded AFTER home-v2.css + about-us.css + industrial-services.css.
   Clone of the Industrial-Services template: reuses every .rd-is-* class
   for pains/better/help/improve/solution/cases/work/cta. Only the hero is
   page-specific (new background, no square/dots decoration, different
   heading color) and Section 5 has 4 blocks (not 5) with block 2 using a
   blob/AI-style graphic image-right. Section 6 "Specialized Experience" is
   omitted entirely for this page. Text on 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. This page's Figma had no decoration, but per the client consistency request
   every non-home hero now carries the SAME square + dots. Background is plain #EDF0F2;
   heading uses the site's default dark ink (--tuna, #392A46). ---- */
.rd-op-hero { background: #EDF0F2; padding: 222px 0 96px; }  /* grey hero bg per the Operate Figma (#EDF0F2) */
.rd-op-hero .rd-about-hero-inner { grid-template-columns: 1fr 601px; gap: 60px; align-items: center; }
.rd-op-hero h1 { max-width: 480px; color: #392A46; margin-bottom: 22px; }
.rd-op-hero h1 span { color: var(--v2-purple); display: inline; }
.rd-op-hero .rd-about-hero-copy p { max-width: 405px; color: var(--v2-text); }
.rd-op-hero .rd-about-hero-media img { width: 100%; aspect-ratio: 1947 / 1377; object-fit: contain; display: block; }
/* Operate hero has NO decoration in the Figma — just the image on the right. Hide the
   shared purple square + dot-grid on THIS page only. */
.rd-op-hero .rd-about-hero-square, .rd-op-hero .rd-about-hero-dots { display: none; }
/* With no block, this page gets a BIGGER hero image (~30% larger than the 582px media
   track). It grows rightward from the track's left edge into the right margin, staying
   clear of the copy and inside the viewport. Desktop only (mobile stays full-width). */
@media (min-width: 981px) {
  .rd-page .rd-op-hero.rd-hero-std .rd-about-hero-media img { width: 681px; max-width: none; }
  /* vertically centre the image with the copy (was top-aligned + the media had a 93px top
     offset, so the image sat lower than the text) */
  .rd-page .rd-op-hero.rd-hero-std .rd-about-hero-inner { align-items: center; }
  .rd-page .rd-op-hero.rd-hero-std .rd-about-hero-copy,
  .rd-page .rd-op-hero.rd-hero-std .rd-about-hero-media { margin-top: 0; }
}

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

/* ---- Section 5 block 2 (Workflow Automation): blob/AI-style graphic,
   image-right, treated like the AI graphic (larger natural width) rather
   than a flat laptop screenshot. ---- */
.rd-op-feat--blob .rd-is-feat-img img { width: 430px; }

/* ---- No Section 6 (Specialized Experience) on this page — omitted. ---- */