/* ============================================================
   Industries (INDEX / overview) — page-specific styles.
   Loaded AFTER home-v2.css + about-us.css + industrial-services.css.
   Reuses .rd-* + .rd-about-hero + rd-nav-light + .rd-is-work + .rd-cta + .rd-quote + .rd-cases + .rd-logos.
   Distinct .rd-indx-* prefix (Home uses .rd-ind-grid/.rd-card for its own industries cards).
   Text on any colored/dark bg is given an EXPLICIT color (CLAUDE.md §6).
   ============================================================ */

/* ---- 1. Hero (reuses .rd-about-hero; light #F4F7FF bg) ---- */
.rd-indx-hero { padding-bottom: 169px; }
.rd-indx-hero .rd-about-hero-inner { grid-template-columns: 1fr 548px; gap: 64px; }
.rd-indx-hero h1 { max-width: 350px; }
.rd-indx-hero h1 span { color: var(--v2-purple); }
.rd-indx-hero .rd-about-hero-copy p { max-width: 445px; }
.rd-indx-hero .rd-about-hero-media img { aspect-ratio: 548 / 358; }
/* Square + dots: copied verbatim from the Non-Profits hero (identical size + position) so the
   decoration matches. These equal the shared .rd-hero-std values; set explicitly and scoped
   above hero-std so nothing else can shift them on this page. */
.rd-page .rd-indx-hero.rd-hero-std .rd-about-hero-square { top: -98px; left: 116px; width: 660px; height: 296px; background: #9F84B7; }
.rd-page .rd-indx-hero.rd-hero-std .rd-about-hero-dots {
  top: 100px; left: 600px; width: 144px; height: 144px;
  background-image: radial-gradient(var(--v2-purple-50) 2px, transparent 2.6px);
  background-size: 16px 16px;
}
/* R4 FIX: this page-specific override out-specifies the shared hero-dots rule, so it needs its
   own copy — hide the grid below the width where it fits beside the image (see about-us.css note),
   preventing the mid-dot viewport clip. Shown at >=1421px, cleanly absent below. */
@media (max-width: 1420px) {
  .rd-page .rd-indx-hero.rd-hero-std .rd-about-hero-dots { display: none; }
}

/* ---- 2. Industries We Serve (intro heading + subtitle + pills) ---- */
.rd-indx-iws { padding-bottom: 40px; }
.rd-indx-iws .rd-h2 { width: auto; display: block; text-align: center; font-weight: 500; font-size: 30px; letter-spacing: 2px; }
.rd-indx-iws .rd-rule { width: 896px; max-width: 100%; height: 1px; margin: 20px auto 0; }
.rd-indx-iws .rd-section-sub { font-size: 20px; max-width: 1050px; margin-bottom: 44px; }
/* R3: pills must be equal width + wider (Justin: "make all the boxes the same size and increase their width") — grid gives 3 uniform columns filling the row (was flex:0 0 auto = text-sized, so each pill was a different width). */
.rd-indx-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rd-page .rd-indx-pill {
  text-align: center;
  background: #fff; border: 1px solid #E4E4EA; border-radius: 3px;
  color: var(--v2-purple); font: 700 16px/1 var(--v2-font); letter-spacing: .5px; text-transform: uppercase;
  padding: 21px 20px; box-shadow: 0 6px 18px rgba(72,57,92,.06);
}
.rd-page .rd-indx-pill:hover { border-color: var(--v2-purple); background: var(--v2-purple-10); }

/* ---- 3. Industry cards (3 stacked large cards) ---- */
.rd-indx-cards { background: #fff; padding: 0 0 88px; }
.rd-indx-cards .rd-container { max-width: 1244px; }
.rd-indx-card {
  background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 16px 44px rgba(72,57,92,.13);
  margin-bottom: 64px;
}
.rd-indx-card:last-child { margin-bottom: 0; }
/* R3: banners are the extracted photo band only (the baked description strip was cropped off
   np/is so the description no longer renders twice); show each at its natural aspect. */
.rd-indx-card-banner img { width: 100%; height: auto; display: block; }
.rd-indx-card-body { padding: 34px 32px 32px; }
.rd-indx-desc { font: 400 18px/1.5 var(--v2-font); color: var(--v2-grey); margin: 0 0 28px; }

.rd-indx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 28px; }
.rd-indx-ch {
  font: 700 20px/1.2 var(--v2-font); color: var(--v2-text); margin: 0 0 20px;
  border-left: 3px solid var(--v2-purple); padding-left: 13px;
}
.rd-indx-bullets, .rd-indx-checks { list-style: none; margin: 0; padding: 0; }
.rd-indx-bullets li, .rd-indx-checks li {
  font: 400 16px/1.4 var(--v2-font); color: var(--v2-grey);
  margin-bottom: 16px; position: relative; padding-left: 24px;
}
.rd-indx-bullets li:last-child, .rd-indx-checks li:last-child { margin-bottom: 0; }
.rd-indx-bullets li::before {
  content: ""; position: absolute; left: 5px; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--v2-purple);
}
/* Why Pontem = purple checks */
.rd-indx-checks li::before {
  content: "\2713"; position: absolute; left: 2px; top: 0;
  color: var(--v2-purple); font-weight: 700; font-size: 14px;
}
/* Outcomes = green checks */
.rd-indx-checks-g li::before { color: #00961E; }
.rd-page .rd-indx-plink { color: var(--v2-purple); text-decoration: underline; }
.rd-page .rd-indx-plink:hover { color: var(--v2-purple-hover); }

.rd-indx-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 30px; }
.rd-indx-box { border: 1px solid #E6E6E6; border-radius: 8px; padding: 22px 28px 24px; box-shadow: 0 8px 22px rgba(72,57,92,.05); }
.rd-indx-box h4 {
  display: flex; align-items: center; gap: 10px;
  font: 700 20px/1.2 var(--v2-font); color: var(--v2-text); margin: 0 0 18px;
}
.rd-indx-ico { flex: 0 0 22px; width: 22px; height: 22px; display: inline-block; }
.rd-indx-ico-check { background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300961E' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12l3 3 5-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.rd-indx-ico-bulb { background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23782CD7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-4 10.5c.7.7 1 1.3 1 2.5h6c0-1.2.3-1.8 1-2.5A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }

.rd-indx-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.rd-page .rd-indx-btn {
  display: flex; align-items: center; justify-content: center;
  font: 600 13px/1 var(--v2-font-btn); letter-spacing: 1.5px; text-transform: uppercase;
  padding: 19px 20px; border: 1px solid transparent;
}
.rd-page .rd-indx-btn-fill { background: #6D4A8D; color: #fff; border-color: #6D4A8D; }
.rd-page .rd-indx-btn-fill:hover { background: #5c3d78; }
.rd-page .rd-indx-btn-out { background: #fff; color: var(--v2-purple); border-color: var(--v2-purple); }
.rd-page .rd-indx-btn-out:hover { background: var(--v2-purple-10); }

/* ---- 4. Deep Industry Knowledge band ---- */
.rd-indx-band { position: relative; background: #F6F1FC; padding: 74px 0 78px; overflow: hidden; }
.rd-indx-band .rd-container { max-width: 1244px; }
.rd-indx-band-dots {
  position: absolute; z-index: 0; top: 50px; left: 0; width: 96px; height: 205px;
  background-image: radial-gradient(var(--v2-purple-50) 2px, transparent 2.6px);
  background-size: 20px 20px;
}
.rd-indx-band-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 360px 1fr; gap: 76px; align-items: start; }
.rd-indx-band-h { font: 700 32px/1.25 var(--v2-font); letter-spacing: 1px; text-transform: uppercase; color: var(--v2-text); margin: 0; }
.rd-indx-band-h .pl { color: var(--v2-purple); }
.rd-indx-band-copy { max-width: 770px; }
.rd-indx-band-copy p { font: 400 18px/1.6 var(--v2-font); color: var(--v2-grey); margin: 0 0 20px; }
.rd-indx-band-copy p:last-child { margin-bottom: 0; }
.rd-indx-band-lead { font-weight: 700 !important; color: var(--v2-text) !important; }

/* ---- 5. How We Work (reuses .rd-is-work; DARK plum variant) ---- */
.rd-indx-work { background: var(--v2-dark); }
.rd-indx-work .rd-is-work-h { color: #fff; }
.rd-indx-work .rd-is-step-num { color: #A78BC9; }
.rd-indx-work .rd-is-step h3 { color: #fff; }
.rd-indx-work .rd-is-step p { color: #C6BCD6; }
.rd-indx-work .rd-is-step-node { background: #E3D4F6; }

/* ---- 6. Trusted By Organizations ticker (reuses .rd-logos) ---- */
.rd-indx-ticker { padding: 84px 0 70px; }
.rd-indx-ticker-h { width: auto; display: block; text-align: center; font-weight: 500; font-size: 30px; letter-spacing: 2px; margin-bottom: 0; }
.rd-indx-ticker-h .rd-rule { width: 878px; max-width: 100%; height: 1px; margin: 20px auto 0; }
.rd-indx-ticker .rd-logos-row { margin-top: 56px; }

/* ---- 9. CTA (reuses homepage .rd-cta; thin white heading bar, photo at natural aspect) ---- */
.rd-indx-cta { padding: 78px 0 150px; }
.rd-indx-cta .rd-cta-inner { grid-template-columns: 430px 440px; gap: 60px; justify-content: center; transform: translateX(-42px); }
.rd-indx-cta h2 { border-left: 2px solid rgba(255,255,255,.55); padding-left: 18px; font-size: 29px; }
.rd-indx-cta .rd-cta p { max-width: 400px; }

/* ============ MOBILE (additive; desktop rendering untouched) ============ */
@media (max-width: 980px) {
  /* hero: stack copy over photo; page-scoped offsets/deco reset */
  .rd-indx-hero .rd-about-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .rd-indx-hero h1, .rd-indx-hero .rd-about-hero-copy p { max-width: none; }
  .rd-indx-hero .rd-about-hero-media { width: 100% !important; }
  .rd-indx-hero .rd-about-hero-media img { width: 100% !important; height: auto; }
  .rd-indx-hero .rd-about-hero-square, .rd-indx-hero .rd-about-hero-dots { display: none !important; }

  .rd-indx-cols, .rd-indx-boxes, .rd-indx-btns { grid-template-columns: 1fr; gap: 18px; }
  .rd-indx-band-inner { grid-template-columns: 1fr; gap: 24px; }
  .rd-indx-band-dots { display: none; }
  .rd-indx-pills { grid-template-columns: 1fr; }

  /* CTA: page-scoped desktop rule out-specifies home media rules — reset here */
  .rd-indx-cta .rd-cta-inner { grid-template-columns: 1fr; gap: 44px; transform: none; }
  .rd-indx-cta .rd-cta-photo img { width: 100%; height: auto; }
}
@media (max-width: 640px) {
  .rd-indx-iws .rd-h2, .rd-indx-ticker-h { font-size: 24px; letter-spacing: 1.5px; }
  .rd-indx-band-h { font-size: 24px; }
  .rd-indx-card-body { padding: 26px 22px 28px; }
  .rd-indx-desc { font-size: 16px; }
  /* Card banners are a very wide image with the title text baked in bottom-left; at phone
     width `width:100%` makes them a short strip with tiny text. Give them ~2x height and crop
     to the left (cover) so the banner is taller and the baked title reads larger. */
  .rd-indx-card-banner img { height: 140px; object-fit: cover; object-position: left center; }
}