/* ============================================================
   Agratix service-page upgrades (scoped to service pages)
   Trust band + instant-estimate banner + light polish
   ============================================================ */

/* Card icon tiles — some pages (e.g. mobile-app) put the icon inline in the
   <h3>; bring them in line with the gradient tile used across the site. */
.standard-icon, .solution-icon {
  width: 54px; height: 54px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: #fff; margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--pillar-a, #489156), var(--pillar-b, #5da86a));
}
/* Number badges -> gradient icon tiles (pillar / process cards) */
.pillar-icon, .process-icon {
  width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff; margin-bottom: 1.2rem;
  background: linear-gradient(135deg, var(--pillar-a, #489156), var(--pillar-b, #5da86a));
}
.standards-grid .standard-card { text-align: center; }
.standards-grid .standard-card h3 { display: block; }
.standards-grid .standard-icon { margin-left: auto; margin-right: auto; }
/* safety: hide any icon still left inline in a heading */
.standard-card h3 i, .solution-card h3 i { display: none; }

/* "How We Scope & Price" block — replaces fixed pricing tiers site-wide.
   Self-contained + pillar-aware so it looks identical on every service page. */
.scope-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
  max-width: 1100px;
  margin: 0 auto;
}
.scope-card {
  flex: 1 1 280px;
  max-width: 360px;
  background: #fff;
  border: 1px solid rgba(28, 55, 101, 0.1);
  border-radius: 18px;
  padding: 2rem 1.8rem;
  text-align: center;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.scope-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(28,55,101,.12); }
.scope-card .scope-ico {
  width: 56px; height: 56px; border-radius: 14px; margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff;
  background: linear-gradient(135deg, var(--pillar-a, #489156), var(--pillar-b, #5da86a));
}
.scope-card h3 { font-size: 1.15rem; color: #1c3765; margin: 0 0 0.6rem; }
.scope-card p { font-size: 0.95rem; line-height: 1.6; color: #5b6573; margin: 0; }
body.dark-theme .scope-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
body.dark-theme .scope-card h3 { color: #e2e8f0; }
body.dark-theme .scope-card p { color: rgba(226,232,240,.8); }

/* Checklist lists (case-study solutions, "what it delivers", etc.).
   The check icon is the marker, so remove the default disc bullet and
   lay each row out cleanly. Fixes the "• ✓" double-marker. */
.solution-features,
.solution-list,
ul.solution-features,
ul.solution-list {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.solution-features li,
.solution-list li {
  list-style: none !important;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
}
.solution-features li i,
.solution-list li i {
  color: var(--pillar-a, #489156);
  flex-shrink: 0;
}

/* Inline "Learn more" links inside card copy — use the page pillar
   colour instead of a hard-coded hex, so every service page matches. */
.svc-inline-link {
  color: var(--pillar-a, #489156);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.svc-inline-link:hover { text-decoration: underline; }

/* Case-study preview: text left, illustration right (fills the empty
   right side). Results grid stays full-width below via .case-study-results. */
.cs-top {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 3rem;
}
.cs-narrative .case-study-challenge { margin-bottom: 2.4rem; padding-bottom: 2.4rem; }
.cs-narrative .case-study-solution { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.cs-art { display: flex; justify-content: center; align-items: center; }
.cs-art svg { width: 100%; max-width: 420px; height: auto; }
@media (max-width: 900px) {
  .cs-top { grid-template-columns: 1fr; gap: 2rem; }
  .cs-art { order: -1; max-width: 340px; margin: 0 auto; }
}

/* Whole-card links (sub-service grids). The card is now an <a>; keep the
   text colours it had as a div, and pin "Learn more" to the bottom so
   cards of different text length still line up in the grid. */
a.specialization-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
a.specialization-card .svc-inline-link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  padding: 0.6rem 1.4rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pillar-a, #1c3765), var(--pillar-b, #489156));
  color: #fff !important;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none !important;
  box-shadow: 0 6px 16px rgba(var(--pillar-rgb, 28,55,101), 0.20);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
a.specialization-card:hover .svc-inline-link {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(var(--pillar-rgb, 28,55,101), 0.28);
  filter: brightness(1.06);
  text-decoration: none !important;
}

/* ------------------------------------------------------------
   Standardize content-card grids (count-aware, even spacing)
   - Cards keep a consistent width (no full-width stretching).
   - Incomplete rows are centred.
   - Sections with 2 or 4 cards become a clean 2-up / 2x2,
     which removes the lonely-orphan gap for the most common counts.
   - Footers, stat counters and pricing tables are left untouched.
   ------------------------------------------------------------ */
:is(
  .specializations-grid, .services-grid, .approaches-grid, .why-choose-grid,
  .industry-grid, .tech-stack-grid, .technology-grid, .technologies-grid,
  .benefits-grid, .costs-benefits-grid, .expertise-grid, .solutions-grid,
  .solution-grid, .solution-features-grid, .standards-grid, .differentiators-grid,
  .deliverables-grid, .specialties-grid, .specialized-grid, .optimization-grid,
  .platforms-grid, .platform-grid, .security-grid,
  .philosophy-grid, .strategies-grid, .strategy-breakdown-grid, .portal-types-grid,
  .legacy-state-grid, .initial-state-grid, .pre-migration-grid, .data-migration-grid,
  .transformation-grid, .architecture-grid, .challenge-grid, .risk-grid,
  .features-grid, .features-grid-portals,
  .process-phases, .process-steps, .methodology-steps, .philosophy-cards, .stack-cards
) {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1.75rem;
}

:is(
  .specializations-grid, .services-grid, .approaches-grid, .why-choose-grid,
  .industry-grid, .tech-stack-grid, .technology-grid, .technologies-grid,
  .benefits-grid, .costs-benefits-grid, .expertise-grid, .solutions-grid,
  .solution-grid, .solution-features-grid, .standards-grid, .differentiators-grid,
  .deliverables-grid, .specialties-grid, .specialized-grid, .optimization-grid,
  .platforms-grid, .platform-grid, .security-grid,
  .philosophy-grid, .strategies-grid, .strategy-breakdown-grid, .portal-types-grid,
  .legacy-state-grid, .initial-state-grid, .pre-migration-grid, .data-migration-grid,
  .transformation-grid, .architecture-grid, .challenge-grid, .risk-grid,
  .features-grid, .features-grid-portals,
  .process-phases, .process-steps, .methodology-steps, .philosophy-cards, .stack-cards
) > * {
  flex: 1 1 300px;
  max-width: 380px;
  margin: 0;
}

/* 2 or 4 cards -> two per row (4 becomes a tidy 2x2) */
:is(
  .specializations-grid, .services-grid, .approaches-grid, .why-choose-grid,
  .industry-grid, .tech-stack-grid, .technology-grid, .technologies-grid,
  .benefits-grid, .costs-benefits-grid, .expertise-grid, .solutions-grid,
  .solution-grid, .solution-features-grid, .standards-grid, .differentiators-grid,
  .deliverables-grid, .specialties-grid, .specialized-grid, .optimization-grid,
  .platforms-grid, .platform-grid, .security-grid,
  .philosophy-grid, .strategies-grid, .strategy-breakdown-grid, .portal-types-grid,
  .legacy-state-grid, .initial-state-grid, .pre-migration-grid, .data-migration-grid,
  .transformation-grid, .architecture-grid, .challenge-grid, .risk-grid,
  .features-grid, .features-grid-portals,
  .process-phases, .process-steps, .methodology-steps, .philosophy-cards, .stack-cards
):has(> :last-child:nth-child(2)) > *,
:is(
  .specializations-grid, .services-grid, .approaches-grid, .why-choose-grid,
  .industry-grid, .tech-stack-grid, .technology-grid, .technologies-grid,
  .benefits-grid, .costs-benefits-grid, .expertise-grid, .solutions-grid,
  .solution-grid, .solution-features-grid, .standards-grid, .differentiators-grid,
  .deliverables-grid, .specialties-grid, .specialized-grid, .optimization-grid,
  .platforms-grid, .platform-grid, .security-grid,
  .philosophy-grid, .strategies-grid, .strategy-breakdown-grid, .portal-types-grid,
  .legacy-state-grid, .initial-state-grid, .pre-migration-grid, .data-migration-grid,
  .transformation-grid, .architecture-grid, .challenge-grid, .risk-grid,
  .features-grid, .features-grid-portals,
  .process-phases, .process-steps, .methodology-steps, .philosophy-cards, .stack-cards
):has(> :last-child:nth-child(4)) > * {
  flex: 1 1 calc(50% - 1rem);
  max-width: 520px;
}

/* 3 or 6 cards -> three per row (6 becomes a tidy 3x2) */
:is(
  .specializations-grid, .services-grid, .approaches-grid, .why-choose-grid,
  .industry-grid, .tech-stack-grid, .technology-grid, .technologies-grid,
  .benefits-grid, .costs-benefits-grid, .expertise-grid, .solutions-grid,
  .solution-grid, .solution-features-grid, .standards-grid, .differentiators-grid,
  .deliverables-grid, .specialties-grid, .specialized-grid, .optimization-grid,
  .platforms-grid, .platform-grid, .security-grid,
  .philosophy-grid, .strategies-grid, .strategy-breakdown-grid, .portal-types-grid,
  .legacy-state-grid, .initial-state-grid, .pre-migration-grid, .data-migration-grid,
  .transformation-grid, .architecture-grid, .challenge-grid, .risk-grid,
  .features-grid, .features-grid-portals,
  .process-phases, .process-steps, .methodology-steps, .philosophy-cards, .stack-cards
):has(> :last-child:nth-child(3)) > *,
:is(
  .specializations-grid, .services-grid, .approaches-grid, .why-choose-grid,
  .industry-grid, .tech-stack-grid, .technology-grid, .technologies-grid,
  .benefits-grid, .costs-benefits-grid, .expertise-grid, .solutions-grid,
  .solution-grid, .solution-features-grid, .standards-grid, .differentiators-grid,
  .deliverables-grid, .specialties-grid, .specialized-grid, .optimization-grid,
  .platforms-grid, .platform-grid, .security-grid,
  .philosophy-grid, .strategies-grid, .strategy-breakdown-grid, .portal-types-grid,
  .legacy-state-grid, .initial-state-grid, .pre-migration-grid, .data-migration-grid,
  .transformation-grid, .architecture-grid, .challenge-grid, .risk-grid,
  .features-grid, .features-grid-portals,
  .process-phases, .process-steps, .methodology-steps, .philosophy-cards, .stack-cards
):has(> :last-child:nth-child(6)) > * {
  flex: 1 1 calc(33.333% - 1.2rem);
  max-width: calc(33.333% - 1.2rem);
}

/* 5 COMPACT cards -> single row of five. Only compact card grids
   (icon + title + one line). Content-heavy grids like services-grid keep
   the default (3+2) so their feature lists don't get squished. */
:is(
  .differentiators-grid, .standards-grid, .why-choose-grid, .benefits-grid,
  .specialties-grid, .philosophy-grid, .expertise-grid, .features-grid,
  .process-phases, .process-steps, .methodology-steps
):has(> :last-child:nth-child(5)) > * {
  flex: 1 1 calc(20% - 1.4rem);
  max-width: calc(20% - 1.4rem);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
/* 5-up cards are narrow: tighten the heading so nothing feels crammed */
:is(.differentiators-grid, .standards-grid, .why-choose-grid, .benefits-grid, .specialties-grid, .philosophy-grid, .expertise-grid, .features-grid, .process-phases, .process-steps, .methodology-steps):has(> :last-child:nth-child(5)) > * h3 {
  font-size: 1.12rem;
}

/* Approach detail lists read badly when the <strong> label becomes its own
   flex column (labels wrap, value sits in a separate column). Let the label
   and value flow as normal inline text, with the check hanging to the left. */
.approach-details li {
  display: block !important;
  position: relative;
  padding-left: 1.75rem !important;
  line-height: 1.55;
}
.approach-details li i {
  position: absolute;
  left: 0;
  top: 0.95rem;
}
.approach-details li strong { color: #1c3765; margin-right: 0.3rem; }

/* Stacked-row layout for the "approaches" spectrum — reads as a decision
   guide (badge/title/description left, aligned detail table right). */
.approach-rows {
  max-width: 1080px;
  margin: 50px auto 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.approach-row {
  display: grid;
  grid-template-columns: 0.85fr 1.5fr;
  gap: 2.5rem;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(28, 55, 101, 0.1);
  border-radius: 20px;
  padding: 2rem 2.25rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.approach-row:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(28, 55, 101, 0.1);
  border-color: rgba(72, 145, 86, 0.3);
}
.approach-row-head .approach-badge { margin-bottom: 0.9rem; }
.approach-row-head h3 { font-size: 1.35rem; color: #1c3765; margin: 0 0 0.5rem; font-weight: 700; }
.approach-row-head p { color: #5b6573; line-height: 1.6; font-size: 0.96rem; margin: 0; }
.approach-row-detail { display: flex; flex-direction: column; gap: 0.85rem; }
.ar-item { display: grid; grid-template-columns: 132px 1fr; gap: 1rem; align-items: baseline; }
.ar-label { font-weight: 700; color: #489156; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.ar-val { color: #33404f; line-height: 1.5; font-size: 0.95rem; }
body.dark-theme .approach-row { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
body.dark-theme .approach-row-head h3 { color: #e2e8f0; }
body.dark-theme .approach-row-head p, body.dark-theme .ar-val { color: rgba(226,232,240,.8); }
@media (max-width: 860px) {
  .approach-row { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.5rem 1.5rem; }
}
@media (max-width: 480px) {
  .ar-item { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* Content-heavy grids with 5 cards -> 3 per row (tidy 3+2), never a lonely 4+1.
   These cards carry detail lists, so a 5-up row would cram them. */
:is(
  .services-grid, .approaches-grid, .solutions-grid, .solution-grid,
  .technology-grid, .technologies-grid, .tech-stack-grid, .industry-grid, .deliverables-grid, .strategies-grid,
  .platforms-grid, .platform-grid, .optimization-grid, .portal-types-grid
):has(> :last-child:nth-child(5)) > * {
  flex: 1 1 calc(33.333% - 1.2rem);
  max-width: calc(33.333% - 1.2rem);
}
/* Left-align the rows so the trailing 2 cards line up under the columns
   above instead of centering (which reads as misaligned). */
:is(
  .services-grid, .approaches-grid, .solutions-grid, .solution-grid,
  .technology-grid, .technologies-grid, .tech-stack-grid, .industry-grid, .deliverables-grid, .strategies-grid,
  .platforms-grid, .platform-grid, .optimization-grid, .portal-types-grid
):has(> :last-child:nth-child(5)) {
  justify-content: flex-start !important;
}
/* Tech-stack / platform tool cards: let the trailing two stretch to fill
   the row (top 3 at ~33%, bottom 2 at ~50%) so there's no empty orphan column. */
.tech-stack-grid:has(> :last-child:nth-child(5)) > *,
.industry-grid:has(> :last-child:nth-child(5)) > * {
  max-width: none !important;
}

/* Tablet: two per row */
@media (max-width: 900px) {
  :is(
  .specializations-grid, .services-grid, .approaches-grid, .why-choose-grid,
  .industry-grid, .tech-stack-grid, .technology-grid, .technologies-grid,
  .benefits-grid, .costs-benefits-grid, .expertise-grid, .solutions-grid,
  .solution-grid, .solution-features-grid, .standards-grid, .differentiators-grid,
  .deliverables-grid, .specialties-grid, .specialized-grid, .optimization-grid,
  .platforms-grid, .platform-grid, .security-grid,
  .philosophy-grid, .strategies-grid, .strategy-breakdown-grid, .portal-types-grid,
  .legacy-state-grid, .initial-state-grid, .pre-migration-grid, .data-migration-grid,
  .transformation-grid, .architecture-grid, .challenge-grid, .risk-grid,
  .features-grid, .features-grid-portals,
  .process-phases, .process-steps, .methodology-steps, .philosophy-cards, .stack-cards
  ) > * { flex-basis: calc(50% - 1rem); max-width: none; }
}

/* Mobile: single column */
@media (max-width: 560px) {
  :is(
  .specializations-grid, .services-grid, .approaches-grid, .why-choose-grid,
  .industry-grid, .tech-stack-grid, .technology-grid, .technologies-grid,
  .benefits-grid, .costs-benefits-grid, .expertise-grid, .solutions-grid,
  .solution-grid, .solution-features-grid, .standards-grid, .differentiators-grid,
  .deliverables-grid, .specialties-grid, .specialized-grid, .optimization-grid,
  .platforms-grid, .platform-grid, .security-grid,
  .philosophy-grid, .strategies-grid, .strategy-breakdown-grid, .portal-types-grid,
  .legacy-state-grid, .initial-state-grid, .pre-migration-grid, .data-migration-grid,
  .transformation-grid, .architecture-grid, .challenge-grid, .risk-grid,
  .features-grid, .features-grid-portals,
  .process-phases, .process-steps, .methodology-steps, .philosophy-cards, .stack-cards
  ) > * { flex-basis: 100%; }
}

/* ---------- Trust band (under service hero) ---------- */
.svc-trust-band {
  background: linear-gradient(180deg, #f7f9fc 0%, #eef2f8 100%);
  border-top: 1px solid rgba(28, 55, 101, 0.06);
  border-bottom: 1px solid rgba(28, 55, 101, 0.06);
  padding: 22px 20px;
}
.svc-trust-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
}
.svc-trust-item {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.9rem;
  color: #2b3445;
  flex: 1 1 180px;
  min-width: 170px;
}
.svc-trust-item i {
  font-size: 1.1rem;
  color: #489156;
  background: rgba(72, 145, 86, 0.1);
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.svc-trust-item strong { color: #1c3765; }

/* ---------- Instant-estimate banner (before final CTA) ---------- */
.svc-estimate-banner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px 24px 72px;
}
.svc-estimate-card {
  background: linear-gradient(135deg, #1c3765 0%, #16213e 100%);
  border-radius: 22px;
  padding: 34px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}
.svc-estimate-card .svc-estimate-text h3 {
  color: #fff;
  font-size: 1.45rem;
  margin: 0 0 6px;
}
.svc-estimate-card .svc-estimate-text p {
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  font-size: 0.96rem;
  max-width: 560px;
}
.svc-estimate-btn {
  background: linear-gradient(135deg, #5da86a 0%, #489156 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 15px 28px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 18px rgba(72, 145, 86, 0.35);
  transition: transform .25s ease;
  text-decoration: none;
}
.svc-estimate-btn:hover { transform: translateY(-2px) scale(1.02); }

/* ---------- Light polish ---------- */
.faq-item { transition: box-shadow .25s ease, border-color .25s ease; }

@media (max-width: 760px) {
  .svc-trust-inner { justify-content: flex-start; }
  .svc-trust-item { flex: 1 1 calc(50% - 28px); font-size: 0.84rem; }
  .svc-estimate-card { flex-direction: column; text-align: center; padding: 28px 22px; }
  .svc-estimate-card .svc-estimate-text p { margin: 0 auto; }
}
@media (max-width: 460px) {
  .svc-trust-item { flex: 1 1 100%; }
}


/* ------------------------------------------------------------
   Tighten vertical rhythm on service pages
   Sections shipped with ~120px top+bottom padding (≈240px gaps)
   and 4rem section-header margins, which read as too much space.
   ------------------------------------------------------------ */
section[class*="-section"]:not(.cta-section):not(.service-hero) {
  padding-top: 78px !important;
  padding-bottom: 78px !important;
}
.section-header {
  margin-bottom: 2.5rem !important;
}

/* ============================================================
   ORPHAN-ROW FIXES — 5 is prime, so any uniform multi-column
   grid leaves a lonely trailing row. For the content-heavy
   service / approach card grids we lay 5 cards out as full-width
   stacked rows (head on the left, detail on the right): one card
   per row means an orphan is impossible, and the wider format
   suits their feature lists. 8-card decks go to a clean 4-up.
   ============================================================ */

/* Approach cards (5) -> full-width stacked rows: head on the left,
   detail block on the right. One row per card, so no orphan. */
.approaches-grid:has(> :last-child:nth-child(5)) > * {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  display: grid;
  grid-template-columns: minmax(200px, 0.82fr) 1.7fr;
  column-gap: 2.5rem;
  row-gap: 0.4rem;
  align-items: start;
  text-align: left;
}
.approaches-grid:has(> :last-child:nth-child(5)) > .approach-card > :last-child {
  grid-column: 2;
  grid-row: 1 / span 20;
  align-self: start;
  margin-top: 0;
}
.approaches-grid:has(> :last-child:nth-child(5)) > .approach-card > :not(:last-child) {
  grid-column: 1;
}

/* 8-card deliverables deck -> clean 4 across (2 rows of 4) */
.deliverables-grid:has(> :last-child:nth-child(8)) > * {
  flex: 1 1 calc(25% - 1.2rem) !important;
  max-width: calc(25% - 1.2rem) !important;
}
.deliverables-grid:has(> :last-child:nth-child(8)) {
  justify-content: flex-start !important;
}

/* Responsive: the stacked rows collapse to a single column so the
   detail block drops below the head instead of squeezing. */
@media (max-width: 900px) {
  .approaches-grid:has(> :last-child:nth-child(5)) > * {
    flex-basis: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr;
  }
  .approaches-grid:has(> :last-child:nth-child(5)) > .approach-card > :last-child {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0.5rem;
  }
  .deliverables-grid:has(> :last-child:nth-child(8)) > * {
    flex-basis: calc(50% - 1rem) !important;
    max-width: calc(50% - 1rem) !important;
  }
}

/* ============================================================
   ICONIC SUCCESS METRICS — each metric row carries a meaningful
   gradient icon tile instead of a generic check, matching the
   icon-tile language used across the service pages.
   ============================================================ */
:is(.metrics-list, .platform-details) li.metric-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}
:is(.metrics-list, .platform-details) .metric-item .metric-ic {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--pillar-a, #1c3765), var(--pillar-b, #489156));
  box-shadow: 0 4px 12px rgba(28, 55, 101, 0.18);
  margin-top: 0.05rem;
}
:is(.metrics-list, .platform-details) .metric-item .metric-ic i {
  color: #fff !important;
  font-size: 0.95rem !important;
  margin: 0 !important;
}
:is(.metrics-list, .platform-details) .metric-item .metric-text {
  line-height: 1.5;
  padding-top: 0.4rem;
}
:is(.metrics-list, .platform-details) .metric-item .metric-text strong { color: #1c3765; }
body.dark-theme :is(.metrics-list, .platform-details) .metric-item .metric-text strong { color: #e2e8f0; }

/* ============================================================
   "LEARN MORE" as a ghost-pill button on pillar index service
   cards — fills with the pillar colour on hover, arrow nudges.
   (Specialization cards on design-build are whole-card links,
   so they keep the plain inline treatment.)
   ============================================================ */
.service-card .svc-inline-link {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  margin-top: 0.6rem;
  padding: 0.6rem 1.4rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pillar-a, #1c3765), var(--pillar-b, #489156));
  color: #fff !important;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none !important;
  box-shadow: 0 6px 16px rgba(28, 55, 101, 0.18);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.service-card .svc-inline-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(28, 55, 101, 0.26);
  filter: brightness(1.06);
}
.service-card .svc-inline-link i {
  font-size: 0.8em;
  transition: transform .25s ease;
}
.service-card .svc-inline-link:hover i { transform: translateX(3px); }

/* ============================================================
   5 SERVICE CARDS -> one even row of five compact tiles.
   Prime count can't fill a 3- or 4-col grid without a lonely
   gap, and full-width read as oversized; five even tiles remove
   the orphan gap entirely and give the narrower cards we want.
   ============================================================ */
.services-grid:has(> :last-child:nth-child(5)) {
  justify-content: center !important;
}
.services-grid:has(> :last-child:nth-child(5)) > .service-card {
  flex: 1 1 calc(20% - 1.4rem) !important;
  max-width: calc(20% - 1.4rem) !important;
  padding: 1.75rem 1.35rem !important;
}
.services-grid:has(> :last-child:nth-child(5)) > .service-card .service-icon {
  width: 54px !important;
  height: 54px !important;
  border-radius: 15px !important;
  font-size: 1.35rem !important;
  margin: 0 auto 1rem !important;
}
.services-grid:has(> :last-child:nth-child(5)) > .service-card h3 {
  font-size: 1.02rem !important;
  line-height: 1.3;
}
/* Feature text was inheriting the card's centre alignment and
   reading raggedly on wrap — pin it left next to the checks. */
.services-grid:has(> :last-child:nth-child(5)) > .service-card .service-features {
  text-align: left;
}
.services-grid:has(> :last-child:nth-child(5)) > .service-card .service-features li {
  font-size: 0.82rem !important;
  padding: 0.4rem 0 !important;
  gap: 0.5rem;
}

/* Responsive: five-up is too tight below desktop. */
@media (max-width: 1024px) {
  .services-grid:has(> :last-child:nth-child(5)) > .service-card {
    flex: 1 1 calc(33.333% - 1.2rem) !important;
    max-width: calc(33.333% - 1.2rem) !important;
  }
}
@media (max-width: 720px) {
  .services-grid:has(> :last-child:nth-child(5)) > .service-card {
    flex: 1 1 calc(50% - 1rem) !important;
    max-width: calc(50% - 1rem) !important;
  }
}
@media (max-width: 480px) {
  .services-grid:has(> :last-child:nth-child(5)) > .service-card {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

/* ------------------------------------------------------------
   FIX: the decorative .service-card::before hover overlay covers
   the whole card with no pointer-events, so it was intercepting
   clicks on the "Learn more" link. Let clicks pass through and
   lift the link above any card overlay.
   ------------------------------------------------------------ */
.service-card::before { pointer-events: none !important; }
.service-card .svc-inline-link { position: relative; z-index: 2; }

/* ============================================================
   UI/UX MODERNIZATION approach rows — turn the plain grey stat
   boxes into graphic tiles (icon badge + pillar-tinted card) and
   centre the stats block against the copy so the row is balanced.
   ============================================================ */
.approach-card:has(.approach-meta) > .approach-meta {
  align-self: center !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
  gap: 0.85rem !important;
}
.approach-meta .meta-item {
  background: linear-gradient(160deg, rgba(var(--pillar-rgb, 13,148,136), 0.09), rgba(var(--pillar-rgb, 13,148,136), 0.02)) !important;
  border: 1px solid rgba(var(--pillar-rgb, 13,148,136), 0.16) !important;
  border-radius: 16px !important;
  padding: 1.25rem 1rem !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.approach-meta .meta-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(var(--pillar-rgb, 13,148,136), 0.16);
}
.approach-meta .meta-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--pillar-a, #0d9488), var(--pillar-b, #2dd4bf));
  color: #fff;
  font-size: 1.05rem;
  box-shadow: 0 5px 14px rgba(var(--pillar-rgb, 13,148,136), 0.28);
}
.approach-meta .meta-label { font-size: 0.7rem !important; letter-spacing: 0.06em; }
.approach-meta .meta-value { font-size: 1.05rem !important; margin-top: 0 !important; }

/* ============================================================
   "Why it matters" business-impact cards (application-support)
   — was a bare full-width checklist; now a tidy 2x2 of icon
   cards using the count-aware .benefits-grid.
   ============================================================ */
.benefits-grid .impact-card {
  background: #fff;
  border: 1px solid rgba(28, 55, 101, 0.1);
  border-radius: 18px;
  padding: 1.6rem 1.75rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.benefits-grid .impact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(var(--pillar-rgb, 28,55,101), 0.12);
  border-color: rgba(var(--pillar-rgb, 28,55,101), 0.3);
}
.benefits-grid .impact-card .impact-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--pillar-a, #1c3765), var(--pillar-b, #489156));
  color: #fff;
  font-size: 1.15rem;
  box-shadow: 0 5px 14px rgba(var(--pillar-rgb, 28,55,101), 0.22);
}
.benefits-grid .impact-card p { margin: 0; line-height: 1.55; color: #45505f; }
.benefits-grid .impact-card p strong { color: #1c3765; }
body.dark-theme .benefits-grid .impact-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
body.dark-theme .benefits-grid .impact-card p { color: rgba(226,232,240,.82); }
body.dark-theme .benefits-grid .impact-card p strong { color: #e2e8f0; }

/* ============================================================
   RISK vs ADVANTAGE badges — differentiate the two sides of the
   comparison: Risk reads as caution (red→amber), Advantage as
   positive (brand green), instead of both using one gradient.
   ============================================================ */
.approach-badge.approach-badge--risk {
  background: linear-gradient(135deg, #e05a4d, #e8933a) !important;
}
.approach-badge.approach-badge--advantage {
  background: linear-gradient(135deg, #3f8a52, #5da86a) !important;
}

/* ------------------------------------------------------------
   Risk/Advantage comparison cards carry a single list each, but
   .approach-pros-cons reserved two columns — leaving half the
   card empty. When there's only one list, let it use the full
   width so content fills the card instead of a lonely gap.
   ------------------------------------------------------------ */
.approach-pros-cons:has(> :only-child) {
  grid-template-columns: 1fr !important;
}

/* ------------------------------------------------------------
   KPI spec lists (performance-monitoring, infrastructure-management)
   read badly when the target value sits in its own flex column and
   floats to the top while the label wraps beneath it. Let each item
   flow as normal text: check hanging left, value inline after the
   label (kept together, emphasised).
   ------------------------------------------------------------ */
.kpi-features li {
  display: block !important;
  position: relative;
  padding-left: 1.75rem !important;
  line-height: 1.55;
}
.kpi-features li i {
  position: absolute;
  left: 0;
  top: 0.95rem;
}
.kpi-target {
  display: inline;
  white-space: nowrap;
}

/* ============================================================
   CASE-STUDY "results" block — was a bare full-width checklist
   with empty space on the right. Turn it into a two-column grid
   of result chips with gradient check tiles so it reads as a
   designed outcomes panel. Applies to every case-study section.
   ============================================================ */
.case-study-results .solution-features {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1.25rem;
  margin-top: 1.25rem !important;
}
.case-study-results .solution-features li {
  display: flex !important;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0 !important;
  padding: 0.9rem 1.05rem;
  background: rgba(var(--pillar-rgb, 72,145,86), 0.05);
  border: 1px solid rgba(var(--pillar-rgb, 72,145,86), 0.16);
  border-radius: 12px;
  line-height: 1.5;
  transition: transform .25s ease, box-shadow .25s ease;
}
.case-study-results .solution-features li:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(var(--pillar-rgb, 72,145,86), 0.12);
}
.case-study-results .solution-features li i {
  color: #fff !important;
  background: linear-gradient(135deg, var(--pillar-a, #1c3765), var(--pillar-b, #489156));
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
}
/* A lone trailing item spans the full width instead of sitting half-empty */
.case-study-results .solution-features li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
@media (max-width: 640px) {
  .case-study-results .solution-features { grid-template-columns: 1fr; }
}

/* ============================================================
   METRICS GRID — was a native auto-fit grid that left a 4+1
   orphan at five cards. Make it count-aware like the other card
   grids: 2-up / 3-up / 2x2 / 3x2, and at five cards the trailing
   two stretch to fill the row (no orphan column).
   ============================================================ */
.metrics-grid:has(> .metrics-card) {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1.75rem;
}
.metrics-grid:has(> .metrics-card) > * {
  flex: 1 1 calc(50% - 1rem);
  max-width: calc(50% - 1rem);
}
/* 3 or 6 cards -> three per row */
.metrics-grid:has(> .metrics-card):has(> :last-child:nth-child(3)) > *,
.metrics-grid:has(> .metrics-card):has(> :last-child:nth-child(6)) > * {
  flex-basis: calc(33.333% - 1.2rem);
  max-width: calc(33.333% - 1.2rem);
}
/* 5 cards -> top three at a third, trailing two stretch to fill */
.metrics-grid:has(> .metrics-card):has(> :last-child:nth-child(5)) {
  justify-content: flex-start;
}
.metrics-grid:has(> .metrics-card):has(> :last-child:nth-child(5)) > * {
  flex-basis: calc(33.333% - 1.2rem);
  max-width: none;
}
@media (max-width: 860px) {
  .metrics-grid:has(> .metrics-card) > * { flex-basis: 100% !important; max-width: none !important; }
}

/* ------------------------------------------------------------
   Service-card feature checklists inherit the card's centered
   text-align, which makes multi-line items wrap raggedly. Pin the
   list left so each item lines up cleanly beside its check (the
   icon and title stay centered). Applies to all service cards.
   ------------------------------------------------------------ */
.service-card .service-features { text-align: left; }

/* ============================================================
   COMPLIANCE CALLOUT (e.g. India DPDP Act) — pillar-tinted panel
   with icon, copy and a CTA. Reusable across service pages.
   ============================================================ */
.compliance-callout {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(var(--pillar-rgb, 99,102,241), 0.09), rgba(var(--pillar-rgb, 99,102,241), 0.02));
  border: 1px solid rgba(var(--pillar-rgb, 99,102,241), 0.22);
  border-radius: 20px;
  padding: 2rem 2.25rem;
}
.compliance-callout .cc-icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: #fff;
  background: linear-gradient(135deg, var(--pillar-a, #1c3765), var(--pillar-b, #489156));
  box-shadow: 0 6px 16px rgba(var(--pillar-rgb, 99,102,241), 0.28);
}
.compliance-callout h3 { margin: 0 0 0.5rem; color: #1c3765; font-size: 1.3rem; }
.compliance-callout p { margin: 0 0 1.1rem; color: #4a5568; line-height: 1.65; }
.compliance-callout .cc-cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 1.4rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--pillar-a, #1c3765), var(--pillar-b, #489156));
  color: #fff !important; font-weight: 600; text-decoration: none;
  box-shadow: 0 6px 16px rgba(var(--pillar-rgb, 99,102,241), 0.22);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.compliance-callout .cc-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(var(--pillar-rgb, 99,102,241), 0.30); filter: brightness(1.05); }
body.dark-theme .compliance-callout h3 { color: #e2e8f0; }
body.dark-theme .compliance-callout p { color: rgba(226,232,240,.82); }
@media (max-width: 640px) { .compliance-callout { flex-direction: column; } }