/* ═══════════════════════════════════════════════════════════════════
   inside-pages.css — shared styling for every "inside" page that uses
   the .svc-hero-wrap hero pattern (service pages, industry pages,
   and anything else that adopts the same shell).
   ─────────────────────────────────────────────────────────────────────
   Loaded globally via views/partials/head.ejs. All rules are scoped to
   `body:has(.svc-hero-wrap)` (or the `.svc-hero-wrap` element itself),
   so pages that do NOT use that hero pattern stay completely unaffected.

   Previously these rules lived inline inside views/services/show.ejs.
   Moving them here makes them apply automatically to every inside page.
   ═══════════════════════════════════════════════════════════════════ */

/* Breadcrumb treatment moved to public/css/breadcrumb.css. */

/* Same navy-to-white gradient as the homepage Case Studies section. */
.svc-hero-wrap {
  background: linear-gradient(180deg, #1a2857 0%, #16214a 12%, #121c3a 30%, #eef1f6 58%, #ffffff 100%);
  padding-top: 20px;
}
.svc-hero-wrap .ins-btn-primary,
.svc-hero-wrap .ins-btn-ghost { border-radius: 999px; }

/* Row: white card on LEFT, gradient / process panel on RIGHT. */
.svc-hero-wrap .ins-row1 {
  flex-direction: row-reverse;
  align-items: stretch;
  gap: 24px;
}
/* White card — light-flip: white + top-left dark bloom, no drop shadow. */
.svc-hero-wrap .ins-card-overlap {
  margin-left: 0;
  margin-right: 0;
  border-radius: 18px;
  align-self: stretch;
  background-color: #ffffff;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
  box-shadow: none;
}
.svc-hero-wrap .ins-card-overlap .ins-card-eyebrow { color: var(--navy); }
.svc-hero-wrap .ins-card-overlap .ins-card-eyebrow-bar { background: var(--navy); }
.svc-hero-wrap .ins-card-overlap .ins-card-desc { color: var(--navy); }
/* Strip any inline colour inside the title. */
.svc-hero-wrap .ins-card-overlap .ins-card-title,
.svc-hero-wrap .ins-card-overlap .ins-card-title * { color: var(--navy) !important; }
/* Pills: navy border + navy text, rounded pill, Title Case. */
.svc-hero-wrap .ins-card-overlap .ins-card-pill {
  color: var(--navy) !important;
  border: 1px solid var(--navy) !important;
  border-radius: 999px;
  text-transform: capitalize;
}
.svc-hero-wrap .ins-gradient {
  background: transparent;
  width: auto;
  flex: 0 0 42%;
}
/* Industry-page right-side cards: each .ins-gradient-card is a stacked
   coloured tile with the same top-left dark bloom as the process tiles
   on service pages. Colours cycle through the brand palette. Anchors
   with .ins-gradient-card need the reset for text-decoration/inherit. */
body:has(.svc-hero-wrap) .ins-gradient-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
}
body:has(.svc-hero-wrap) .ins-gradient-card {
  display: block;
  padding: 22px 24px;
  border-radius: 14px;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
  text-decoration: none;
  color: inherit;
  transition: filter .25s ease, transform .2s ease;
}
body:has(.svc-hero-wrap) a.ins-gradient-card:hover { filter: brightness(1.06); }
body:has(.svc-hero-wrap) .ins-gradient-card:nth-child(4n+1) { background-color: var(--teal); }
body:has(.svc-hero-wrap) .ins-gradient-card:nth-child(4n+2) { background-color: var(--orange); }
body:has(.svc-hero-wrap) .ins-gradient-card:nth-child(4n+3) { background-color: var(--green); }
body:has(.svc-hero-wrap) .ins-gradient-card:nth-child(4n+4) { background-color: var(--navy); }
/* When .ins-step items are rendered inside a coloured .ins-gradient-card
   (case-study hero Key Impacts list), strip the tile-style bloom and
   force the numbers to white so nothing competes with the card colour. */
body:has(.svc-hero-wrap) .ins-gradient-card .ins-step {
  padding: 8px 0;
  background-image: none;
  border-radius: 0;
  transition: none;
}
body:has(.svc-hero-wrap) .ins-gradient-card .ins-step:hover { filter: none; transform: none; }
body:has(.svc-hero-wrap) .ins-gradient-card .ins-step-num { color: #ffffff !important; opacity: 0.55; }

/* "The Problem Space" — restructure the section on inside pages. The
   base entexis.css builds this as a 2-column grid (left: title + copy,
   right: stacked stat cards). We flip it to a single stacked layout:
   title + copy span the full width at the top, then the stat cards
   drop below in a horizontal row so the section reads as a full-width
   feature block rather than a narrow two-column split. */
body:has(.svc-hero-wrap) .problem-section {
  grid-template-columns: 1fr !important;
  gap: 40px !important;
  align-items: initial !important;
}
/* "The Problem Space" eyebrow label reads as navy on every case study,
   overriding the per-page theme-colour the DB body sets inline (green
   / orange / blue etc.). */
body:has(.svc-hero-wrap) .problem-section .sec-eyebrow {
  color: var(--navy) !important;
}
body:has(.svc-hero-wrap) .prob-right {
  flex-direction: row !important;
  gap: 20px !important;
}
body:has(.svc-hero-wrap) .prob-right > .prob-stat-card {
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 900px) {
  body:has(.svc-hero-wrap) .prob-right {
    flex-direction: column !important;
  }
}
/* Stat cards — plain tiles: no background tint, no border. Base
   entexis.css draws a left border and a light nth-child tint per card;
   we strip both here so the cards read as clean content blocks that
   inherit the section's white ground. Padding is trimmed on the sides
   so the copy aligns to the same left edge as the paragraphs above. */
body:has(.svc-hero-wrap) .prob-stat-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 8px 0 !important;
}
/* Hide the stat-card icons entirely — the cards read cleaner as
   number → label → description, no glyph on top. */
body:has(.svc-hero-wrap) .prob-stat-card .psc-icon { display: none !important; }

/* "Under the Hood" — inline navy panels inside each deep-dive card
   (marked in DB body with `style="background:#1a2857"`) get rounded
   corners so they match the site's rounded-card language. */
body:has(.svc-hero-wrap) .deep-dives-section [style*="background:#1a2857"] {
  border-radius: 18px !important;
  overflow: hidden;
}
/* Every mini-tile INSIDE a navy panel across case studies uses an
   inline coloured border (`border:2px solid #4aaa57` etc.) from the
   DB body. Strip those borders so the tiles read as clean subtle
   plates on the navy ground — matching the AllWear body style. */
body:has(.svc-hero-wrap) [style*="background:#1a2857"] [style*="border:"],
body:has(.svc-hero-wrap) [style*="background:#1a2857"] [style*="border-left:"],
body:has(.svc-hero-wrap) [style*="background:#1a2857"] [style*="border-right:"],
body:has(.svc-hero-wrap) [style*="background:#1a2857"] [style*="border-top:"],
body:has(.svc-hero-wrap) [style*="background:#1a2857"] [style*="border-bottom:"] {
  border: 0 !important;
}
/* Extra bottom padding so "Under the Hood" ends with breathing room
   before the next section (What's Possible / Related, etc.) begins. */
body:has(.svc-hero-wrap) .deep-dives-section {
  padding-bottom: 100px !important;
}

/* ── "What It Connects" (.ecosystem-section) — same treatment as the
   Impact and What's Possible sections: navy→white gradient ground,
   cards flip to solid brand colours with content anchored to the
   bottom, no border, 18px rounded corners. */
body:has(.svc-hero-wrap) .ecosystem-section {
  background: linear-gradient(180deg, #1a2857 0%, #16214a 12%, #121c3a 30%, #eef1f6 58%, #ffffff 100%) !important;
  padding: 80px 72px 100px !important;
}
body:has(.svc-hero-wrap) .ecosystem-section .sec-eyebrow { color: rgba(255,255,255,0.7) !important; }
body:has(.svc-hero-wrap) .ecosystem-section .sec-title,
body:has(.svc-hero-wrap) .ecosystem-section h2 { color: #ffffff !important; }
body:has(.svc-hero-wrap) .ecosystem-section > div > p { color: rgba(255,255,255,0.7) !important; }

/* Header wrapper — the DB body constrains it to `max-width:900px;
   padding:0 24px`, which offsets the title / description to the right
   of the card grid. Reset both so heading text aligns to the same
   72px section padding as the cards below. */
body:has(.svc-hero-wrap) .ecosystem-section > div:not(.eco-grid) {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Grid: keep the DB body's 3-col template, just widen the gap and
   remove the inline max-width so the grid aligns to section padding. */
body:has(.svc-hero-wrap) .ecosystem-section .eco-grid {
  max-width: none !important;
  padding: 0 !important;
  gap: 20px !important;
  margin: 32px 0 0 !important;
}

/* Cards — flat solid colour + top-left dark bloom, rounded corners,
   content anchored to the bottom (flex column pushed to flex-end).
   Border-radius + border overrides the inline styles. `!important` on
   the flex properties beats any inline `display:block` the DB body
   might set. */
body:has(.svc-hero-wrap) .ecosystem-section .eco-card {
  border-radius: 18px !important;
  border: 0 !important;
  padding: 24px 22px !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  overflow: hidden;
  position: relative;
  min-height: 200px;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}
/* Brand-cycle colours across the flat grid. */
body:has(.svc-hero-wrap) .ecosystem-section .eco-card:nth-child(5n+1) { background-color: var(--teal, #0096c7) !important; }
body:has(.svc-hero-wrap) .ecosystem-section .eco-card:nth-child(5n+2) { background-color: var(--orange, #f77f00) !important; }
body:has(.svc-hero-wrap) .ecosystem-section .eco-card:nth-child(5n+3) { background-color: var(--green, #4aaa57) !important; }
body:has(.svc-hero-wrap) .ecosystem-section .eco-card:nth-child(5n+4) { background-color: var(--blue, #1565c7) !important; }
body:has(.svc-hero-wrap) .ecosystem-section .eco-card:nth-child(5n+5) { background-color: var(--navy, #1a2857) !important; }
/* Every text descendant flips to white on the coloured tiles. */
body:has(.svc-hero-wrap) .ecosystem-section .eco-card,
body:has(.svc-hero-wrap) .ecosystem-section .eco-card * { color: #ffffff !important; }
/* Title / description sit flush against the card's inner padding — no
   inherited left offset. */
body:has(.svc-hero-wrap) .ecosystem-section .eco-card .eco-name,
body:has(.svc-hero-wrap) .ecosystem-section .eco-card .eco-desc,
body:has(.svc-hero-wrap) .ecosystem-section .eco-card .eco-tag {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
/* Light-flip — chained class selector beats the nth-child colour cycle
   above (2 classes vs 2 classes; later in source wins). Card 0 gets
   `.eco-card--light` from the JS, plus one random card past index 2. */
body:has(.svc-hero-wrap) .ecosystem-section .eco-card.eco-card--light {
  background-color: #ffffff !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.18), transparent 55%) !important;
}
body:has(.svc-hero-wrap) .ecosystem-section .eco-card.eco-card--light,
body:has(.svc-hero-wrap) .ecosystem-section .eco-card.eco-card--light * {
  color: var(--navy, #1a2857) !important;
}
@media (max-width: 900px) {
  body:has(.svc-hero-wrap) .ecosystem-section { padding: 60px 24px 80px !important; }
  body:has(.svc-hero-wrap) .ecosystem-section .eco-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Case-study FAQ — match the home FAQ layout: inner wrapper widened to
   1200px, wrapped in a white rounded card with generous padding. Base
   template ships `.fade-in { max-width: 800px }` inline, which we
   widen here so both sites carry the same shape. Section itself gets
   a subtle light-gray ground so the white card reads as a card. */
body:has(.svc-hero-wrap) .cs-faq-section {
  background: #f7f7f8 !important;
  padding: 56px 40px !important;
}
body:has(.svc-hero-wrap) .cs-faq-section > .fade-in {
  max-width: 1200px !important;
  background: #ffffff !important;
  border-radius: 18px !important;
  padding: 48px 48px !important;
  margin: 0 auto !important;
}
@media (max-width: 900px) {
  body:has(.svc-hero-wrap) .cs-faq-section { padding: 40px 20px !important; }
  body:has(.svc-hero-wrap) .cs-faq-section > .fade-in { padding: 32px 20px !important; }
}
@media (max-width: 560px) {
  body:has(.svc-hero-wrap) .cs-faq-section { padding: 28px 14px !important; }
  body:has(.svc-hero-wrap) .cs-faq-section > .fade-in { padding: 24px 14px !important; }
}

/* ── "What's Possible" (.roadmap-section) — same treatment as the
   Impact section: navy→white gradient ground, cards in the Industries
   row rhythm (2 + 1 + 3 + 1). Reuses the palette rotation but with
   `.rm-step--wide / --lead / --light` modifiers the JS assigns. */
body:has(.svc-hero-wrap) .roadmap-section {
  background: linear-gradient(180deg, #1a2857 0%, #16214a 12%, #121c3a 30%, #eef1f6 58%, #ffffff 100%) !important;
  padding: 144px 72px 100px !important;
  margin-top: 0 !important;
}
body:has(.svc-hero-wrap) .roadmap-section .sec-eyebrow { color: rgba(255,255,255,0.7) !important; }
body:has(.svc-hero-wrap) .roadmap-section .sec-title,
body:has(.svc-hero-wrap) .roadmap-section h2 { color: #ffffff !important; }
body:has(.svc-hero-wrap) .roadmap-section > .fade-in > p { color: rgba(255,255,255,0.7) !important; }
body:has(.svc-hero-wrap) .rm-steps {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin-top: 32px !important;
}
/* Cards — flat solid colour + top-left dark bloom, rounded corners,
   no hover motion or shadow, no ::after ring. */
body:has(.svc-hero-wrap) .rm-step {
  padding: 32px 28px !important;
  background: var(--rm-color, var(--teal)) !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  min-height: 240px;
  border-radius: 18px !important;
  overflow: hidden;
  position: relative;
}
body:has(.svc-hero-wrap) .rm-step::after { display: none !important; }
body:has(.svc-hero-wrap) .rm-step:hover {
  transform: none !important;
  box-shadow: none !important;
}
/* Palette cycle — flat tokens instead of the diagonal gradient. */
body:has(.svc-hero-wrap) .rm-step:nth-child(5n+1) { --rm-color: var(--teal);   background: var(--teal)   !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; }
body:has(.svc-hero-wrap) .rm-step:nth-child(5n+2) { --rm-color: var(--orange); background: var(--orange) !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; }
body:has(.svc-hero-wrap) .rm-step:nth-child(5n+3) { --rm-color: var(--green);  background: var(--green)  !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; }
body:has(.svc-hero-wrap) .rm-step:nth-child(5n+4) { --rm-color: var(--blue);   background: var(--blue)   !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; }
body:has(.svc-hero-wrap) .rm-step:nth-child(5n+5) { --rm-color: var(--navy);   background: var(--navy)   !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; }
/* Force every text descendant to white on the coloured cards. */
body:has(.svc-hero-wrap) .rm-step,
body:has(.svc-hero-wrap) .rm-step * { color: #ffffff !important; }
/* Row-rhythm modifiers. */
body:has(.svc-hero-wrap) .rm-step--wide { grid-column: span 2; }
body:has(.svc-hero-wrap) .rm-step--lead { grid-column: 1 / -1; }
/* Light-flip — chained selector matches the nth-child specificity;
   placed AFTER the nth-child block, so cascade order wins. */
body:has(.svc-hero-wrap) .rm-step.rm-step--light {
  background: #ffffff !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.08), transparent 55%) !important;
}
body:has(.svc-hero-wrap) .rm-step.rm-step--light,
body:has(.svc-hero-wrap) .rm-step.rm-step--light * { color: var(--navy) !important; }
body:has(.svc-hero-wrap) .rm-step.rm-step--light .rm-dot {
  background: rgba(26,40,87,0.08) !important;
  border-color: rgba(26,40,87,0.20) !important;
  color: var(--navy) !important;
}
body:has(.svc-hero-wrap) .rm-step.rm-step--light .rm-status {
  background: rgba(26,40,87,0.08) !important;
  color: var(--navy) !important;
}
/* Navy paint for every full-width --lead tile. */
body:has(.svc-hero-wrap) .rm-step.rm-step--lead {
  background: var(--navy) !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
}
/* Explicit green accent for step 5 (JS marks it with --green). Same
   chained-class specificity so it beats the nth-child cycle. */
body:has(.svc-hero-wrap) .rm-step.rm-step--green {
  background: var(--green) !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
}
@media (max-width: 900px) {
  body:has(.svc-hero-wrap) .rm-steps { grid-template-columns: 1fr !important; }
  body:has(.svc-hero-wrap) .rm-step--wide,
  body:has(.svc-hero-wrap) .rm-step--lead { grid-column: 1 !important; }
}
/* Small-caps title at the top of each navy panel (e.g. "Same Topic,
   Two Very Different Sets"). DB body colours these with an inline
   brand-hex string — force them to white so they read cleanly against
   the navy ground. */
body:has(.svc-hero-wrap) .deep-dives-section [style*="background:#1a2857"] > div[style*="letter-spacing:.1em"],
body:has(.svc-hero-wrap) .deep-dives-section [style*="background:#1a2857"] > div[style*="text-transform:uppercase"] {
  color: #ffffff !important;
}
/* Body copy inside every navy panel across a case study (Under the
   Hood deep-dive panels, What Makes It Work visual panels, and any
   other inline `background:#1a2857` block) reads at rgba(255,255,255,
   .35–.7) in the DB body, which is muted on navy. Boost every text
   descendant to a high-contrast off-white so the copy stays readable.
   Small-caps eyebrow labels above already resolve to pure white. */
body:has(.svc-hero-wrap) [style*="background:#1a2857"] [style*="rgba(255,255,255,"] {
  color: rgba(255,255,255,0.92) !important;
}
body:has(.svc-hero-wrap) .feat-sb-visual .feat-sb-muted,
body:has(.svc-hero-wrap) .feat-sb-visual .feat-sb-note-body {
  color: rgba(255,255,255,0.92) !important;
}
body:has(.svc-hero-wrap) .feat-sb-visual .feat-sb-label,
body:has(.svc-hero-wrap) .feat-sb-visual .feat-sb-autolog {
  color: rgba(255,255,255,0.75) !important;
}
/* Card title (the big number / lead phrase) matches the left-side H2
   `.prob-title` scale so the two columns read at the same weight. */
body:has(.svc-hero-wrap) .prob-stat-card .psc-num {
  font-size: clamp(28px, 3vw, 42px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em !important;
}

/* "The Impact" section on case-study bodies. Section gets the case-studies
   navy-to-white gradient behind it; the inner grid becomes a 3-column
   asymmetric layout like the homepage Industries; each card cycles the
   brand palette with the top-left dark bloom, and the first (lead) card
   spans the full row width (like hn-ind-lead). Card 0 + one random card
   render as white light-flip tiles. */
body:has(.svc-hero-wrap) .cs-impact-section {
  background: linear-gradient(180deg, #1a2857 0%, #16214a 12%, #121c3a 30%, #eef1f6 58%, #ffffff 100%) !important;
  /* Match the side padding of .problem-section (72px) so the dark
     gradient starts and stops at the same horizontal inset as the
     sections above and below. */
  padding: 80px 72px 100px !important;
}
/* Restyle the section heading colours so they read against the dark top
   of the gradient. */
body:has(.svc-hero-wrap) .cs-impact-section .sec-eyebrow { color: rgba(255,255,255,0.7) !important; }
body:has(.svc-hero-wrap) .cs-impact-section .sec-title,
body:has(.svc-hero-wrap) .cs-impact-section h2 { color: #ffffff !important; }
body:has(.svc-hero-wrap) .cs-impact-section .fade-in > p { color: rgba(255,255,255,0.7) !important; }

/* Match the width of the sections above (Problem Space, Features, etc.)
   which use full-flow content inside `.problem-section`-style wrappers
   with 72px side padding and no inner max-width cap. The DB body ships
   the Impact section with `<div class="fade-in" style="max-width:900px">`,
   so we cancel that inline cap and reset the inline `padding:0 24px` too
   so the content aligns to the outer 72px side padding of the section. */
body:has(.svc-hero-wrap) .cs-impact-section .fade-in {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Turn the .fade-in that WRAPS the Impact cards into one 3-col grid
   and flatten every DB sub-grid wrapper inside it (display: contents)
   so all cards flow into the same outer grid. Row rhythm is then set
   by two per-card modifiers the JS applies:
     .cs-impact-card--wide  → spans 2 of 3 columns (top-left tile)
     .cs-impact-card--lead  → spans all 3 columns (full-width row)
   Card index 0 is --wide + --light, then every 4th card starting at
   index 2 is --lead, giving the Industries-block rhythm the site
   already uses: 2 → 1 → 3 → 1 → 3 → 1 → … */
body:has(.svc-hero-wrap) .cs-impact-section .fade-in:has(.cs-impact-card) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}
body:has(.svc-hero-wrap) .cs-impact-section .fade-in:has(.cs-impact-card) > div {
  display: contents !important;
}
body:has(.svc-hero-wrap) .cs-impact-card--wide { grid-column: span 2; }
body:has(.svc-hero-wrap) .cs-impact-card--lead { grid-column: 1 / -1; }
/* The navy paint for every --lead tile lives BELOW the nth-child colour
   block further down this file, so cascade order (later wins at equal
   specificity) can beat the green/orange/etc. cycle. */

/* Cards — brand-cycle colours + top-left dark bloom + individual
   rounded corners (18px each, like the Industries tiles). Position
   `relative` so the decorative corner ring (.cs-impact-ring) can be
   absolutely-placed inside the card. */
body:has(.svc-hero-wrap) .cs-impact-card {
  padding: 32px 28px !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  min-height: 260px;
  border-radius: 18px !important;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* Icon slot injected by the Impact-section JS. Inherits the card's own
   text colour so it flips with the light variant. Sits above the DB
   inline content, matching the Industries card structure. */
body:has(.svc-hero-wrap) .cs-impact-icon {
  color: inherit !important;
  margin-bottom: 18px;
  line-height: 0;
}
body:has(.svc-hero-wrap) .cs-impact-icon svg { display: block; }
body:has(.svc-hero-wrap) .cs-impact-card.cs-impact-card--light .cs-impact-icon,
body:has(.svc-hero-wrap) .cs-impact-card.cs-impact-card--light .cs-impact-icon * {
  color: var(--navy) !important;
  stroke: var(--navy) !important;
}
/* Decorative corner circle at top-right (Industries-block signature). */
body:has(.svc-hero-wrap) .cs-impact-ring {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 50%;
  pointer-events: none;
}
body:has(.svc-hero-wrap) .cs-impact-card.cs-impact-card--light .cs-impact-ring {
  border-color: rgba(0,0,0,0.08);
}

/* Kill hover motion + hover shadow on every card-like element on inside
   pages. Some cards set transform / box-shadow via inline onmouseover
   handlers (from services/show.ejs and older DB body content); this
   `!important` beats the inline styles that get pushed in on mouseover. */
body:has(.svc-hero-wrap) .hn-bento-card:hover,
body:has(.svc-hero-wrap) .hn-news-card:hover,
body:has(.svc-hero-wrap) .hn-how-card:hover,
body:has(.svc-hero-wrap) .cs-impact-card,
body:has(.svc-hero-wrap) .cs-impact-card:hover,
body:has(.svc-hero-wrap) .ins-gradient-card:hover,
body:has(.svc-hero-wrap) .svc-lab:hover,
body:has(.svc-hero-wrap) .hn-ind-grid a:hover,
body:has(.svc-hero-wrap) a[onmouseover]:hover {
  transform: none !important;
  box-shadow: none !important;
}
body:has(.svc-hero-wrap) .cs-impact-card:nth-child(5n+1) { background: var(--teal) !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; }
body:has(.svc-hero-wrap) .cs-impact-card:nth-child(5n+2) { background: var(--orange) !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; }
body:has(.svc-hero-wrap) .cs-impact-card:nth-child(5n+3) { background: var(--green) !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; }
body:has(.svc-hero-wrap) .cs-impact-card:nth-child(5n+4) { background: var(--blue) !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; }
body:has(.svc-hero-wrap) .cs-impact-card:nth-child(5n+5) { background: var(--navy) !important; background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important; }

/* Force every text descendant white on the coloured cards. */
body:has(.svc-hero-wrap) .cs-impact-card,
body:has(.svc-hero-wrap) .cs-impact-card * { color: #ffffff !important; }
/* Bump the description text (13-14px in DB inline) to body size so it
   reads at the same weight as the paragraph copy above. The JS-injected
   .cs-impact-icon is now the first div child, so the DB description
   sits at nth-of-type(4) (icon → number → label → description). */
body:has(.svc-hero-wrap) .cs-impact-card > div:nth-of-type(4),
body:has(.svc-hero-wrap) .cs-impact-card p {
  font-size: 15px !important;
  line-height: 1.65 !important;
}
/* On cards whose LABEL slot is a small 13px string (Before / After /
   What It Unlocked in HR; similar mini-label cards in other bodies),
   bump the label from 13px to a real headline size so it reads as the
   card's title. Icon is now nth-of-type(1); the label sits at
   nth-of-type(2). Stats cards have a 32px number at nth-of-type(2), so
   the [style*="font-size:13px"] attribute filter is what keeps this
   rule from catching them. */
body:has(.svc-hero-wrap) .cs-impact-card > div:nth-of-type(2)[style*="font-size:13px"] {
  font-size: 22px !important;
  line-height: 1.2 !important;
  margin-bottom: 14px !important;
}

/* Light-flip — card chain uses two classes so specificity matches the
   nth-child colour rules (both are 3 classes/pseudo-classes deep) and
   the later declaration wins the cascade, making the tile white. */
body:has(.svc-hero-wrap) .cs-impact-card.cs-impact-card--light { background: #ffffff !important; }
body:has(.svc-hero-wrap) .cs-impact-card.cs-impact-card--light,
body:has(.svc-hero-wrap) .cs-impact-card.cs-impact-card--light * { color: var(--navy) !important; }
/* Navy paint for every full-width --lead tile. Chained class selector
   (2 classes) matches the nth-child rule specificity above; this rule
   is placed AFTER the nth-child block so cascade order wins. */
body:has(.svc-hero-wrap) .cs-impact-card.cs-impact-card--lead {
  background: var(--navy) !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
}
/* Explicit green accent for card 6 (JS marks it with --green). Same
   chained-class specificity so it beats the nth-child cycle. */
body:has(.svc-hero-wrap) .cs-impact-card.cs-impact-card--green {
  background: var(--green) !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
}

@media (max-width: 900px) {
  body:has(.svc-hero-wrap) .cs-impact-section .fade-in:has(.cs-impact-card) {
    grid-template-columns: 1fr !important;
  }
  body:has(.svc-hero-wrap) .cs-impact-card--wide,
  body:has(.svc-hero-wrap) .cs-impact-card--lead {
    grid-column: 1 !important;
  }
  /* Trim the giant 72px desktop side padding on mobile — the coloured
     cards need almost the full viewport width to read cleanly. Applies
     to Impact, How It Works, and What's Possible in one pass. */
  body:has(.svc-hero-wrap) .cs-impact-section,
  body:has(.svc-hero-wrap) .how-section,
  body:has(.svc-hero-wrap) .roadmap-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  body:has(.svc-hero-wrap) .cs-impact-card,
  body:has(.svc-hero-wrap) .how-step,
  body:has(.svc-hero-wrap) .rm-step {
    padding: 24px 20px !important;
  }
}

/* ── "How It Works" section on case-study bodies — render the 4 steps
   as the case-studies bento from the homepage: wide top-left, tall
   right spanning both rows, two narrow tiles below. Solid brand colour
   + top-left dark bloom (no diagonal gradient), no hover shadow / lift,
   no ::after ring, no fixed 280px min-height — grid rows govern size.
   Step 1 flips to a white lead tile with navy text. Section itself
   gets the same navy→white gradient the Impact section uses so the two
   feature blocks read as a pair. */
body:has(.svc-hero-wrap) .how-section {
  background: linear-gradient(180deg, #1a2857 0%, #16214a 12%, #121c3a 30%, #eef1f6 58%, #ffffff 100%) !important;
  padding: 80px 72px 100px !important;
}
body:has(.svc-hero-wrap) .how-section .sec-eyebrow { color: rgba(255,255,255,0.7) !important; }
body:has(.svc-hero-wrap) .how-section .sec-title,
body:has(.svc-hero-wrap) .how-section h2 { color: #ffffff !important; }
body:has(.svc-hero-wrap) .how-section > .fade-in > p { color: rgba(255,255,255,0.7) !important; }
body:has(.svc-hero-wrap) .how-grid {
  grid-template-columns: 1.15fr 0.95fr 1.05fr !important;
  grid-template-rows: minmax(300px, auto) minmax(300px, auto) !important;
  gap: 18px !important;
}
body:has(.svc-hero-wrap) .how-grid > .how-step:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
body:has(.svc-hero-wrap) .how-grid > .how-step:nth-child(2) { grid-column: 3;     grid-row: 1 / 3; }
body:has(.svc-hero-wrap) .how-grid > .how-step:nth-child(3) { grid-column: 1;     grid-row: 2; }
body:has(.svc-hero-wrap) .how-grid > .how-step:nth-child(4) { grid-column: 2;     grid-row: 2; }
body:has(.svc-hero-wrap) .how-step {
  background: var(--step-color, var(--teal)) !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
  border-radius: 18px !important;
  min-height: 0 !important;
  padding: 30px 30px 26px !important;
  transition: none !important;
}
body:has(.svc-hero-wrap) .how-step::after { display: none !important; }
body:has(.svc-hero-wrap) .how-step:hover {
  transform: none !important;
  box-shadow: none !important;
}
/* Base .how-step rules paint .how-num at 30% white, .how-desc and
   .how-icon at 70% white — semi-transparent, which reads muted on the
   dark bento tiles. Force every text piece to pure #ffffff on the
   coloured cards. The white lead card overrides below. */
body:has(.svc-hero-wrap) .how-step,
body:has(.svc-hero-wrap) .how-step *,
body:has(.svc-hero-wrap) .how-step .how-num,
body:has(.svc-hero-wrap) .how-step .how-desc,
body:has(.svc-hero-wrap) .how-step .how-icon,
body:has(.svc-hero-wrap) .how-step .how-icon * {
  color: #ffffff !important;
}
/* Match the home bento palette: teal / orange / green / navy. */
body:has(.svc-hero-wrap) .how-step:nth-child(1) { --step-color: var(--teal); }
body:has(.svc-hero-wrap) .how-step:nth-child(2) { --step-color: var(--orange); }
body:has(.svc-hero-wrap) .how-step:nth-child(3) { --step-color: var(--green); }
body:has(.svc-hero-wrap) .how-step:nth-child(4) { --step-color: var(--navy); }

/* Step 1 = white lead tile (same treatment as .hn-bento-0 on home).
   Base .how-step rules force every descendant white via `!important`, so
   we override each targeted piece with a more-specific selector. */
body:has(.svc-hero-wrap) .how-step:nth-child(1) {
  background: #ffffff !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%) !important;
}
body:has(.svc-hero-wrap) .how-step:nth-child(1),
body:has(.svc-hero-wrap) .how-step:nth-child(1) *,
body:has(.svc-hero-wrap) .how-step:nth-child(1) .how-title,
body:has(.svc-hero-wrap) .how-step:nth-child(1) .how-desc,
body:has(.svc-hero-wrap) .how-step:nth-child(1) .how-icon,
body:has(.svc-hero-wrap) .how-step:nth-child(1) .how-icon * {
  color: var(--navy) !important;
}
body:has(.svc-hero-wrap) .how-step:nth-child(1) .how-num { color: rgba(26,40,87,0.35) !important; }

@media (max-width: 900px) {
  body:has(.svc-hero-wrap) .how-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
  }
  body:has(.svc-hero-wrap) .how-grid > .how-step {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: 220px !important;
  }
  /* Trim the desktop 72px side padding on mobile. The `.how-section`
     base rule with `padding: 80px 72px 100px !important` sits later
     in this file than the earlier shared @media block, so this
     placement AFTER the base rule wins the cascade. */
  body:has(.svc-hero-wrap) .how-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Hide any inline `.cs-cta-section` that ships inside a case-study
   body (many older DB bodies still carry one). The template renders
   its own `.cta-band cta-band-light` below the FAQ block, so this
   inline block would be a duplicate — and its two-column button + note
   layout doesn't match the site's current pill-input CTA. */
body:has(.svc-hero-wrap) .cs-cta-section { display: none !important; }

/* Every above-footer CTA (site-wide) uses the same "card-in-section"
   treatment: a light grey outer strip carries a navy rounded card, and
   the copy + form sit on the navy card in white. Covers .cta-band on
   the homepage / labs / campaigns AND .cs-cta-section on services /
   industries. */
.cta-band,
.cs-cta-section {
  background: #eff0f2 !important;
  color: #ffffff !important;
  padding: 40px max(40px, calc((100% - 1200px) / 2)) !important;
  gap: 0 !important;
  position: relative !important;
  margin-top: 40px !important;
}
.cta-band::before,
.cs-cta-section::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 40px !important;
  bottom: 40px !important;
  left: max(40px, calc((100% - 1200px) / 2)) !important;
  right: max(40px, calc((100% - 1200px) / 2)) !important;
  background: linear-gradient(180deg, #121c3a 0%, #16214a 45%, #1a2857 100%) !important;
  border-radius: 24px !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.cta-band::after,
.cs-cta-section::after { display: none !important; }
.cta-band > *,
.cs-cta-section > * {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  padding: 48px !important;
}
/* Tighten the gap between the heading block and the form block ONLY
   when the layout has collapsed to a single stacked column (below
   1100px, matching the .cta-band 1fr fallback in entexis.css). At
   desktop the layout is a 2-column grid — heading left, form right —
   and touching the top/bottom padding just makes them sit at
   different Y positions instead of tightening the vertical gap. */
@media (max-width: 1100px) {
  .cta-band > *:nth-child(1),
  .cs-cta-section > *:nth-child(1) { padding-bottom: 12px !important; }
  .cta-band > *:nth-child(2),
  .cs-cta-section > *:nth-child(2) { padding-top: 8px !important; }
}

.cta-band h2,
.cta-band h2 span,
.cta-band .cta-sub,
.cta-band .cta-note,
.cs-cta-section h2,
.cs-cta-section h2 span,
.cs-cta-section p,
.cs-cta-section .cta-note {
  color: #ffffff !important;
}
.cta-band .cta-sub,
.cs-cta-section p { color: rgba(255,255,255,0.75) !important; }
.cta-band .cta-note,
.cs-cta-section .cta-note { color: rgba(255,255,255,0.5) !important; }

.cta-band .cta-row,
.cs-cta-section .cta-row {
  position: relative;
  display: block;
}
.cta-band .cta-inp,
.cs-cta-section .cta-inp {
  display: block;
  width: 100%;
  background: #ffffff !important;
  color: var(--navy) !important;
  border: 1px solid #ffffff !important;
  padding: 18px 200px 18px 28px;
  font-size: 15px !important;
  border-radius: 999px !important;
}
.cta-band .cta-inp::placeholder,
.cs-cta-section .cta-inp::placeholder { color: rgba(26,40,87,0.45) !important; }
.cta-band .cta-btn,
.cs-cta-section .cta-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}
.cta-band .cta-btn:hover,
.cs-cta-section .cta-btn:hover { transform: translateY(-50%) !important; }

@media (max-width: 900px) {
  .cta-band,
  .cs-cta-section {
    padding: 28px 24px !important;
    margin-top: 24px !important;
  }
  .cta-band::before,
  .cs-cta-section::before {
    top: 28px !important; bottom: 28px !important;
    left: 24px !important; right: 24px !important;
    border-radius: 20px !important;
  }
  .cta-band > *,
  .cs-cta-section > * { padding: 40px 28px !important; }
  .cta-band > *:nth-child(1),
  .cs-cta-section > *:nth-child(1) { padding-bottom: 8px !important; }
  .cta-band > *:nth-child(2),
  .cs-cta-section > *:nth-child(2) { padding-top: 8px !important; }
}
@media (max-width: 560px) {
  .cta-band,
  .cs-cta-section { padding: 20px !important; }
  .cta-band::before,
  .cs-cta-section::before {
    top: 20px !important; bottom: 20px !important;
    left: 20px !important; right: 20px !important;
    border-radius: 18px !important;
  }
  .cta-band > *,
  .cs-cta-section > * { padding: 32px 22px !important; }
}

/* Site-wide: every FAQ icon uses a single navy stroke. Inline `stroke`
   attributes on the SVGs (teal / orange / green / blue / navy variants
   in DB copy and templates) get overridden. Covers per-item icons
   (.faq-icon) AND any inline SVG inside the FAQ heading / section
   wrappers (case-study, homepage, ent-faq accordion). */
.faq-icon,
.cs-faq-section svg,
.home-faq-section svg,
.ent-faq svg,
h2 svg + .faq-text /* noop safety */ {
  stroke: var(--navy) !important;
  color: var(--navy) !important;
}
/* Only repaint shapes that were EXPLICITLY filled (fill="..." attribute
   present and not "none"). The homepage FAQ icons are stroke-only
   outlines; without this guard the unconditional `.faq-icon circle`
   selector was filling every circle solid navy, hiding the inner icon
   shapes underneath. */
.faq-icon [fill]:not([fill="none"]),
.cs-faq-section svg [fill]:not([fill="none"]),
.home-faq-section svg [fill]:not([fill="none"]),
.ent-faq svg [fill]:not([fill="none"]) {
  fill: var(--navy) !important;
}

/* Blog-post FAQ heading — the H2 directly preceding an .ent-faq
   accordion. Center the label + repaint its inline SVG icon navy so it
   matches the accordion below and stops using the DB-inlined teal. */
.is-blog-post h2:has(+ .ent-faq),
.blog-prose h2:has(+ .ent-faq) {
  text-align: center;
}
.is-blog-post h2:has(+ .ent-faq) svg,
.blog-prose h2:has(+ .ent-faq) svg {
  stroke: var(--navy) !important;
  color: var(--navy) !important;
}
.is-blog-post h2:has(+ .ent-faq) svg [fill]:not([fill="none"]),
.blog-prose h2:has(+ .ent-faq) svg [fill]:not([fill="none"]) {
  fill: var(--navy) !important;
}

/* Process panel — compact coloured tiles with top-left dark bloom. */
.svc-hero-wrap .ins-gradient-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.svc-hero-wrap .ins-gradient-eyebrow {
  color: rgba(255,255,255,0.65);
  margin: 6px 4px 10px;
}
.svc-hero-wrap .ins-step {
  padding: 14px 18px;
  border-radius: 12px;
  border-bottom: 0;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
  transition: filter .25s ease, transform .2s ease;
}
.svc-hero-wrap .ins-step:hover { filter: brightness(1.06); }
.svc-hero-wrap .ins-step-num { font-size: 16px; opacity: 1; }
.svc-hero-wrap .ins-gradient-heading { color: #ffffff; font-size: 16px; margin-bottom: 4px; font-weight: 700; }
.svc-hero-wrap .ins-gradient-text { color: #ffffff; font-size: 15px; line-height: 1.55; }

/* Light-flip overrides for the first (white) tile. */
.svc-hero-wrap .ins-step-light .ins-gradient-heading { color: var(--navy); }
.svc-hero-wrap .ins-step-light .ins-gradient-text { color: var(--muted); }
.svc-hero-wrap .ins-gradient-bottom { margin-top: 10px; padding: 0 4px; }
.svc-hero-wrap .ins-gradient-bottom a { color: var(--navy); border-bottom-color: rgba(26,40,87,0.4); }
.svc-hero-wrap .ins-gradient-bottom a:hover { border-bottom-color: var(--navy); }

@media (max-width: 900px) {
  .svc-hero-wrap .ins-row1 { flex-direction: column; gap: 16px; }
  .svc-hero-wrap .ins-gradient { flex: none; width: 100%; }
}

/* ── Content-section: blog-stat-row — rounded tiles, light-flip, gap. */
body:has(.svc-hero-wrap) .is-blog-post .blog-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  background: transparent;
  margin: 36px 0;
}
body:has(.svc-hero-wrap) .is-blog-post .blog-stat-item {
  padding: 24px 22px;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  overflow: hidden;
}
body:has(.svc-hero-wrap) .is-blog-post .blog-stat-item::before { display: none; }
body:has(.svc-hero-wrap) .is-blog-post .blog-stat-val {
  color: var(--navy) !important;
  font-size: 22px;
  margin-bottom: 8px;
}
body:has(.svc-hero-wrap) .is-blog-post .blog-stat-lbl { color: var(--muted); }

/* Sidebar CTA — rounded, full-width button, single white text throughout. */
body:has(.svc-hero-wrap) .blog-sidebar-cta {
  border-radius: 18px !important;
  overflow: hidden;
}
body:has(.svc-hero-wrap) .blog-sidebar-cta,
body:has(.svc-hero-wrap) .blog-sidebar-cta * {
  color: #ffffff !important;
}
body:has(.svc-hero-wrap) .sidebar-cta-btn {
  display: block !important;
  text-align: center;
  padding: 14px 24px !important;
  font-size: 14px !important;
  border-radius: 999px !important;
}

/* Content-body icons — every SVG inside .blog-article prose forced to navy. */
body:has(.svc-hero-wrap) .blog-article svg {
  color: var(--navy) !important;
  stroke: var(--navy) !important;
}

/* Body-authored inline CTA strips: any div in article body painted with
   a navy background gets rounded corners, white heading and a pill button. */
body:has(.svc-hero-wrap) .blog-article div[style*="var(--navy)"],
body:has(.svc-hero-wrap) .blog-article div[style*="#1a2857"] {
  border-radius: 18px !important;
}
body:has(.svc-hero-wrap) .blog-article div[style*="var(--navy)"] div[style*="font-weight:800"],
body:has(.svc-hero-wrap) .blog-article div[style*="#1a2857"] div[style*="font-weight:800"] {
  color: #ffffff !important;
}
body:has(.svc-hero-wrap) .blog-article div[style*="var(--navy)"] a[style*="background"],
body:has(.svc-hero-wrap) .blog-article div[style*="#1a2857"] a[style*="background"] {
  background-color: #1a2857 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: 1.5px solid #ffffff !important;
  border-radius: 999px !important;
}

/* Insights news mosaic — corners handle counts from 1 to 6 in a 3-col grid.
   Every card starts flat, then the four outer positions get their own
   corner. Extra rules cover edge cases where the grid has < 6 cards so
   the outer corners always live on a card that actually exists. */
body:has(.svc-hero-wrap) .home-new .hn-news-grid > .hn-news-card:nth-child(n) { border-radius: 0; }
body:has(.svc-hero-wrap) .home-new .hn-news-grid > .hn-news-card:first-child { border-top-left-radius: var(--hn-r-card); }
body:has(.svc-hero-wrap) .home-new .hn-news-grid > .hn-news-card:nth-child(3) { border-top-right-radius: var(--hn-r-card); }
body:has(.svc-hero-wrap) .home-new .hn-news-grid > .hn-news-card:nth-child(4) { border-bottom-left-radius: var(--hn-r-card); }
body:has(.svc-hero-wrap) .home-new .hn-news-grid > .hn-news-card:last-child { border-bottom-right-radius: var(--hn-r-card); }
/* Fewer than 4 cards → grid is one row, so the first card also owns
   bottom-left and (for 1-2 cards) the last card owns top-right. */
body:has(.svc-hero-wrap) .home-new .hn-news-grid:not(:has(> .hn-news-card:nth-child(4))) > .hn-news-card:first-child {
  border-bottom-left-radius: var(--hn-r-card);
}
body:has(.svc-hero-wrap) .home-new .hn-news-grid:not(:has(> .hn-news-card:nth-child(3))) > .hn-news-card:last-child {
  border-top-right-radius: var(--hn-r-card);
}

/* Single column below 720. The 3-col corner map above is geometric, so on a
   stack it rounds cards 3 and 4 in the MIDDLE of the strip. Collapse it to
   the stack's own four corners: first card takes both top, last card takes
   both bottom, everything between stays flat. !important because the
   body:has() + :not(:has()) selectors above outrank anything this block can
   spell, and home-new.css's own 720 block loses to them for the same reason. */
@media (max-width: 720px) {
  body:has(.svc-hero-wrap) .home-new .hn-news-grid > .hn-news-card {
    border-radius: 0 !important;
  }
  body:has(.svc-hero-wrap) .home-new .hn-news-grid > .hn-news-card:first-child {
    border-top-left-radius: var(--hn-r-card) !important;
    border-top-right-radius: var(--hn-r-card) !important;
  }
  body:has(.svc-hero-wrap) .home-new .hn-news-grid > .hn-news-card:last-child {
    border-bottom-left-radius: var(--hn-r-card) !important;
    border-bottom-right-radius: var(--hn-r-card) !important;
  }
}

/* Navy-to-white gradient behind the Insights section. */
body:has(.svc-hero-wrap) .home-new .hn-news {
  background: linear-gradient(180deg, #1a2857 0%, #16214a 12%, #121c3a 30%, #eef1f6 58%, #ffffff 100%) !important;
}

/* Inside pages with fewer than 4 case studies — collapse the empty rows
   that the homepage's fixed 2×300px template would otherwise reserve.
   Scoped so pages that DO have all 4 case studies keep the bento's
   proper layout untouched. */
body:has(.svc-hero-wrap) .home-new .hn-bento:not(:has(> .hn-bento-card:nth-child(4))) {
  grid-template-rows: auto !important;
}
body:has(.svc-hero-wrap) .home-new .hn-bento:not(:has(> .hn-bento-card:nth-child(4))) .hn-bento-card {
  min-height: 300px;
}

/* Rounded corners on infographic panels, callouts, takeaway blocks, and
   inline CTA strips inside the article prose. */
body:has(.svc-hero-wrap) .is-blog-post .blog-diagram-scroll > div,
body:has(.svc-hero-wrap) .is-blog-post .inline-cta-strip,
body:has(.svc-hero-wrap) .is-blog-post .blog-callout,
body:has(.svc-hero-wrap) .is-blog-post .blog-takeaway {
  border-radius: 18px !important;
  overflow: hidden;
}
body:has(.svc-hero-wrap) .is-blog-post .blog-callout { border-left: 0 !important; }
body:has(.svc-hero-wrap) .is-blog-post .blog-takeaway::before { display: none !important; }

/* ── Entexis Labs card, base visuals ────────────────────────────────
   The service pages carry these as inline styles on each anchor; insight
   posts use the classed version, so the values live here. Identical
   numbers, so the two render the same. Child ORDER matters: the ring is
   the first div and the icon the second, which is what the
   `> div:nth-of-type(2)` rule below keys off. */
.svc-labs-grid { display: grid; gap: 16px; }
.svc-lab {
  display: block;
  padding: 28px 24px 22px;
  border-radius: 14px;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.svc-lab:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.svc-lab-ring {
  position: absolute; top: -30px; right: -30px; width: 120px; height: 120px;
  border: 1px solid rgba(255,255,255,.08); border-radius: 50%; pointer-events: none;
}
.svc-lab-icon { position: relative; margin-bottom: 14px; color: rgba(255,255,255,.85); }
.svc-lab-name { position: relative; margin-bottom: 8px; font-size: 15px; font-weight: 700; line-height: 1.25; color: #fff; }
.svc-lab-desc { position: relative; margin-bottom: 14px; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.78); }
.svc-lab-cta  { position: relative; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.svc-lab-light .svc-lab-icon,
.svc-lab-light .svc-lab-icon svg,
.svc-lab-light .svc-lab-name,
.svc-lab-light .svc-lab-desc,
.svc-lab-light .svc-lab-cta { color: var(--navy) !important; }
.svc-lab-light .svc-lab-ring { border-color: rgba(0,0,0,.06); }

/* NOTE ON SCOPE: these rules are keyed on .svc-labs-band alone, not on
   body:has(.svc-hero-wrap). Insight posts carry .blog-hero-wrap, so the
   old body scope silently excluded them and their cards fell back to a
   single-column grid. .svc-labs-band only exists on service pages and
   insight posts, so it is specific enough by itself.

   Entexis Labs grid — homepage Case Studies bento for the first four
   cards, then the remaining five as a 2-up row followed by a 3-up row.
   Six columns rather than three: 6 divides evenly by both 2 (spans of 3)
   and 3 (spans of 2), so a half-width row and a third-width row can sit
   in the same grid. Cards past index 8 auto-flow two columns wide. */
.svc-labs-band .svc-labs-grid {
  grid-template-columns: repeat(6, 1fr) !important;
  grid-auto-rows: 1fr;
  grid-auto-flow: row dense;
}
.svc-labs-band .svc-lab { grid-column: span 2; }
.svc-labs-band .svc-lab {
  padding: 32px 30px 28px !important;
  min-height: 280px;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
}
.svc-labs-band .svc-lab > div:nth-of-type(2) {
  position: absolute !important;
  top: 22px;
  right: 22px;
  margin: 0 !important;
  width: 36px;
  height: 36px;
}
.svc-labs-band .svc-lab > div:nth-of-type(2) svg {
  width: 100% !important;
  height: 100% !important;
}
.svc-labs-band .svc-lab-0 > div:nth-of-type(2) {
  width: 46px;
  height: 46px;
  top: 26px;
  right: 26px;
}
/* Rows 1-2: the bento. 4 of 6 columns = the old "2 of 3". */
.svc-labs-band .svc-lab-0 { grid-column: 1 / 5; grid-row: 1; padding: 44px 36px 36px !important; }
.svc-labs-band .svc-lab-1 { grid-column: 5 / 7; grid-row: 1 / 3; }
.svc-labs-band .svc-lab-2 { grid-column: 1 / 3; grid-row: 2; }
.svc-labs-band .svc-lab-3 { grid-column: 3 / 5; grid-row: 2; }
/* Row 3: two cards, half width each. */
.svc-labs-band .svc-lab-4 { grid-column: 1 / 4; grid-row: 3; }
.svc-labs-band .svc-lab-5 { grid-column: 4 / 7; grid-row: 3; }
/* Row 4: three cards, a third each. */
.svc-labs-band .svc-lab-6 { grid-column: 1 / 3; grid-row: 4; }
.svc-labs-band .svc-lab-7 { grid-column: 3 / 5; grid-row: 4; }
.svc-labs-band .svc-lab-8 { grid-column: 5 / 7; grid-row: 4; }

/* Insight posts use the SAME bento as the service pages above — the
   placements are already inherited, so nothing is overridden here for the
   common cases. relatedLabs is a manual per-post pick though, and the
   fixed bento only tiles cleanly at 4, 6 or 9 cards. These count-aware
   rules close the holes at 1, 2, 3 and 5 without touching the rest. */
.svc-labs-band--flow .svc-labs-grid:has(> .svc-lab:first-child:nth-last-child(1)) > .svc-lab {
  grid-column: 1 / 7 !important; grid-row: auto !important;
}
.svc-labs-band--flow .svc-labs-grid:has(> .svc-lab:first-child:nth-last-child(2)) > .svc-lab {
  grid-column: span 3 !important; grid-row: auto !important;
}
.svc-labs-band--flow .svc-labs-grid:has(> .svc-lab:first-child:nth-last-child(3)) > .svc-lab {
  grid-column: span 2 !important; grid-row: auto !important;
}
/* 5 cards: keep the 4-card bento, then run the fifth full width. */
.svc-labs-band--flow .svc-labs-grid:has(> .svc-lab:first-child:nth-last-child(5)) > .svc-lab-4 {
  grid-column: 1 / 7 !important; grid-row: 3 !important;
}

@media (max-width: 1100px) {
  .svc-labs-band--flow .svc-labs-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .svc-labs-band--flow .svc-lab-0:not(:last-child) { grid-column: span 2 !important; grid-row: span 1 !important; }
}
@media (max-width: 720px) {
  .svc-labs-band--flow .svc-labs-grid { grid-template-columns: 1fr !important; }
  .svc-labs-band--flow .svc-lab-0:not(:last-child) { grid-column: 1 !important; grid-row: auto !important; }
}
.svc-labs-band .svc-lab-lead > div:nth-of-type(3) {
  font-size: 22px !important;
}
.svc-labs-band .svc-lab-light > div,
.svc-labs-band .svc-lab-light svg { color: var(--navy) !important; }
.svc-labs-band .svc-lab-light > div:first-child { border-color: rgba(0,0,0,0.06) !important; }

@media (max-width: 1100px) {
  .svc-labs-band .svc-labs-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: repeat(3, minmax(220px, auto));
  }
  .svc-labs-band .svc-lab { grid-column: auto !important; grid-row: auto !important; }
  .svc-labs-band .svc-lab-0 { grid-column: 1 / 3 !important; grid-row: 1 !important; }
  .svc-labs-band .svc-lab-1 { grid-column: 1 / 3 !important; grid-row: 2 !important; }
}
@media (max-width: 720px) {
  .svc-labs-band .svc-labs-grid { grid-template-columns: 1fr !important; grid-template-rows: none; }
  .svc-labs-band .svc-lab { grid-column: 1 !important; grid-row: auto !important; }
}

/* ── "What We Build / Solutions We Deliver" cards (.csb-svc-*) —
   shared styling used by case study pages AND blog article pages.
   Unscoped so it applies wherever the classes appear. */
.csb-svc-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  text-decoration: none;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  border: 0 !important;
  border-top: 0 !important;
  border-radius: 18px;
  min-height: 200px;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.22), transparent 55%);
  transition: none;
  box-shadow: none;
}
.csb-svc-card:hover { transform: none; box-shadow: none; }
/* First card is always the white lead tile with navy text. */
.csb-svc-card:nth-child(1) {
  background-color: #ffffff !important;
  background-image: radial-gradient(circle at 0% 0%, rgba(0,0,0,0.18), transparent 55%) !important;
}
/* Cards 2+ cycle the brand palette with white text. `background-color`
   (not the `background` shorthand) preserves the base radial gradient
   so every tile keeps its top-left dark bloom. */
.csb-svc-card:nth-child(5n+2) { background-color: #f77f00 !important; }
.csb-svc-card:nth-child(5n+3) { background-color: #4aaa57 !important; }
.csb-svc-card:nth-child(5n+4) { background-color: #1565c7 !important; }
.csb-svc-card:nth-child(5n+5) { background-color: #1a2857 !important; }
.csb-svc-card:nth-child(5n+6) { background-color: #0096c7 !important; }
.csb-svc-card:not(:nth-child(1)),
.csb-svc-card:not(:nth-child(1)) * { color: #ffffff !important; }

/* ── Industries body content ──────────────────────────────────────────
   Scoped by .ind-prose, added on the industries template only, so the
   insight articles that share .blog-prose keep their per-post accent. */

/* Square list bullets: the .blog-prose default falls back to --teal when
   no --prose-accent is set, and industries never sets one, so every
   bullet rendered blue. Navy on all six pages. */
.ind-prose ul li::before { background: var(--navy); }