/* ============================================================
   CAPABILITY PAGES — homepage design-system rollout
   Applies the homepage system to /capabilities/cto-as-a-service/
   (template page-capability-transformation-strategy) and
   /capabilities/workflow-automation/ (template
   page-capability-workflow-automation); every rule is scoped
   body:is(<the template body classes>):

     1. SPACING  — 9rem side gutters on every band (→3rem ≤960,
        →1.25rem ≤600), the shared 7rem/5rem/3.5rem vertical
        rhythm, 1680px content inners (gutter moves to the band).
     2. COLOUR   — homepage light theme below the hero: white
        grounds + #08222E ink; the HERO stays dark and untouched
        (same hands-off rule as the homepage hero). The dark
        SOLUTION quote / HOW-WE-TRANSFORM / FAQ bands flip to
        light; the ROI calculator stays a dark feature panel but
        is retoned to the standard #08222E.
     3. TYPE     — homepage unified section-heading scale
        (Inter, clamp(2.5rem,4vw,3.75rem)/700/1.1/-0.02em),
        the one plain-caps eyebrow spec, 24px/1.7 #5A6B75 section
        intros, left-aligned section headers, and the homepage
        header-stack rhythm (eyebrow →1.25rem→ heading →20px→
        intro; header block →4rem→ content).

   Loads AFTER ac-interior-system (same 101-priority block) so it
   wins its 7rem gutters; body-scoped selectors + !important beat
   the pattern's in-body <style> blocks and inline style attrs.
   Fully reversible: delete this file + its wp_enqueue_style().
   Applied 2026-07-09. Modelled on ac-firm-system.css.
   ============================================================ */

/* ── Palette (mirrors ac-homepage-light.css; white band grounds
      like the homepage sections) + legacy-var retone: everything
      that reads var(--ac-text-dark)/var(--ac-bg) on this page
      (card titles, scenario badges) picks up the standard dark
      #08222E automatically. The hero doesn't use these vars —
      its darks are hardcoded, so it stays untouched. ── */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) {
  --lt-page:      #FFFFFF;
  --lt-surface:   #FFFFFF;
  --lt-tint:      #E9F3F7;
  --lt-ink:       #08222E;
  --lt-grey:      #5A6B75;
  --lt-border:    rgba(9, 32, 42, 0.10);
  --lt-border-brand: rgba(7, 169, 209, 0.22);
  --lt-attn:        #E5484D;
  --lt-attn-strong: #C62B30;

  --ac-text-dark: #08222E;
  --ac-bg:        #08222E;

  background-color: var(--lt-page) !important;
  color: var(--lt-ink) !important;
}

/* HANDS OFF THE HERO — it stays dark exactly like the homepage hero.
   This only cancels the page-wide ink colour so the hero's colourless
   text keeps the white it inherits. */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-hero {
  color: #FFFFFF;
}

/* ============================================================
   1a. 9rem SIDE GUTTERS on every band (hero included, horizontal
       only — matches body.ac-homepage .ac-hero)
   ============================================================ */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
  .ac-capp-hero,
  .ac-capp-challenge,
  .ac-capp-solution,
  .ac-capp-detail,
  .hwt-outer,
  .ac-capp-scenarios,
  .ac-capp-cases,
  .ac-capp-faq,
  .ac-capp-related,
  .ac-capp-leaders,
  .ac-roi-embed,
  .ac-cta-wrapper-bg,
  .ac-footer
) {
  padding-left: 9rem !important;
  padding-right: 9rem !important;
}
@media (max-width: 960px) {
  body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
    .ac-capp-hero, .ac-capp-challenge, .ac-capp-solution, .ac-capp-detail,
    .hwt-outer, .ac-capp-scenarios, .ac-capp-cases, .ac-capp-faq,
    .ac-capp-related, .ac-capp-leaders,
    .ac-roi-embed, .ac-cta-wrapper-bg, .ac-footer
  ) {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}
@media (max-width: 600px) {
  body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
    .ac-capp-hero, .ac-capp-challenge, .ac-capp-solution, .ac-capp-detail,
    .hwt-outer, .ac-capp-scenarios, .ac-capp-cases, .ac-capp-faq,
    .ac-capp-related, .ac-capp-leaders,
    .ac-roi-embed, .ac-cta-wrapper-bg, .ac-footer
  ) {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* ============================================================
   1b. VERTICAL RHYTHM — 7rem / 5rem / 3.5rem, margins zeroed
       (same values as the homepage band rhythm). The hwt band
       carries its rhythm on .hwt-section (its .hwt-outer wrapper
       only holds the gutters); the CTA carries it on the wrapper.
   ============================================================ */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
  .ac-capp-challenge,
  .ac-capp-solution,
  .ac-capp-detail,
  .ac-capp-scenarios,
  .ac-capp-cases,
  .ac-capp-faq,
  .ac-capp-related,
  .ac-roi-embed,
  .ac-cta-wrapper-bg
) {
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .hwt-section {
  padding: 7rem 0 !important;
}
/* The hwt band is built from raw <div>/<section> elements, which default to
   box-sizing:content-box (WP block wrappers are border-box). With content-box,
   the 9rem side gutters were ADDED on top of width:100%, pushing the band ~141px
   past the viewport — horizontal scroll and right-side text clipping. Force
   border-box so the gutters sit inside the width, exactly like every WP band. */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(.hwt-outer, .hwt-section) {
  box-sizing: border-box !important;
}
@media (max-width: 960px) {
  body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
    .ac-capp-challenge, .ac-capp-solution, .ac-capp-detail, .ac-capp-scenarios,
    .ac-capp-cases, .ac-capp-faq, .ac-capp-related, .ac-roi-embed, .ac-cta-wrapper-bg
  ) {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
  body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .hwt-section {
    padding: 5rem 0 !important;
  }
}
@media (max-width: 600px) {
  body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
    .ac-capp-challenge, .ac-capp-solution, .ac-capp-detail, .ac-capp-scenarios,
    .ac-capp-cases, .ac-capp-faq, .ac-capp-related, .ac-roi-embed, .ac-cta-wrapper-bg
  ) {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .hwt-section {
    padding: 3.5rem 0 !important;
  }
}

/* ============================================================
   1c. CONTENT INNERS → 1680px. The WP constrained groups cap
       their direct children at contentSize (1200/1100/800) —
       widen them all to the homepage 1680 measure. The hero's
       absolute bg texture layers go full-bleed instead, and the
       FAQ accordion keeps a reading measure (homepage FAQ column
       width) but hugs the left gutter like every other header.
   ============================================================ */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
  .ac-capp-hero,
  .ac-capp-challenge,
  .ac-capp-solution,
  .ac-capp-detail,
  .ac-capp-scenarios,
  .ac-capp-cases,
  .ac-capp-faq,
  .ac-capp-related
) > * {
  max-width: 1680px;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
  .ac-capp-hero__bg-grid,
  .ac-capp-hero__bg-glow
) {
  max-width: none !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .hwt-section {
  max-width: 1680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-roi-embed__inner {
  max-width: 1680px !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-faq__list {
  max-width: 880px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
/* Capability FAQs use the homepage 2-column ac-home-faq layout —
   the accordion spans the layout, not the 880px single-column measure. */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-home-faq .ac-capp-faq__list {
  max-width: none !important;
}
/* Related-capabilities grid ("More from the garage") — ac-capabilities.css
   caps it at 1200px !important (centred), leaving the cards narrower than
   the heading above them. Join the 1680px inner measure so the cards run
   gutter-to-gutter like every other band. */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-related__grid {
  max-width: 1680px !important;
}
/* The centred typing quote keeps its 900px centred measure — same
   exception as the firm culture quote. */

/* ============================================================
   2. TYPE — homepage scales
   ============================================================ */

/* Unified section headings (homepage spec: Inter,
   clamp(2.5rem,4vw,3.75rem), 700, 1.1, -0.02em). Beats the
   pattern's 48px !important block and the h2s' inline style attrs. */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
  .ac-capp-challenge__title,
  .ac-capp-detail__sidebar-title,
  .hwt-header h2,
  .ac-capp-scenarios__title,
  .ac-capp-cases__title,
  .ac-capp-cases .wp-block-heading,
  .ac-capp-faq .wp-block-heading,
  .ac-capp-related .wp-block-heading,
  .ac-roi-embed__header h2
) {
  font-size: clamp(2.5rem, 4vw, 3.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance;
}
@media (max-width: 768px) {
  body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
    .ac-capp-challenge__title, .ac-capp-detail__sidebar-title, .hwt-header h2,
    .ac-capp-scenarios__title,
    .ac-capp-cases__title, .ac-capp-cases .wp-block-heading,
    .ac-capp-faq .wp-block-heading, .ac-capp-related .wp-block-heading,
    .ac-roi-embed__header h2
  ) {
    font-size: clamp(2rem, 8vw, 2.75rem) !important;
  }
}

/* Eyebrow / kicker labels — ONE homepage spec (the .racetrack-badge
   reference): Inter 0.8rem / 700 / 0.14em / caps, PLAIN text — no
   pill, no border, no padding. FAQ eyebrow sits on white → ink;
   ROI eyebrow sits on the dark panel → white. */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
  .ac-capp-faq .ac-section-label,
  .ac-roi-embed .ac-badge
) {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 1.25rem !important;
  display: inline-block !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-faq .ac-section-label {
  color: var(--lt-ink) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-roi-embed .ac-badge {
  color: #FFFFFF !important;
}

/* Section intros / subtexts — homepage standard 24px / 1.7, grey
   #5A6B75 (the accepted firm-page intro colour). */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
  .ac-capp-challenge__desc,
  .ac-capp-detail__sidebar-desc,
  .hwt-header p,
  .ac-capp-scenarios__subtitle,
  .ac-capp-cases__subtitle
) {
  font-size: 24px !important;
  line-height: 1.7 !important;
  color: var(--lt-grey) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-roi-embed__header p {
  font-size: 24px !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

/* "How we deliver" step body copy — one step up from the 18px card
   body so it holds its own beside the 1.75rem step titles. */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .hwt-step p {
  font-size: 20px !important;
  line-height: 1.65 !important;
}
/* The active-step icon badge fades in on top of the ghost step
   number — drop it so the number stays readable. */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .hwt-step-icon {
  display: none !important;
}

/* Header STACK spacing — homepage rhythm: eyebrow →(1.25rem, carried
   by the eyebrow rule above)→ heading →(20px)→ intro; header block
   →(4rem)→ section content (2.5rem ≤768). */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
  .ac-capp-scenarios__header,
  .ac-capp-cases__header,
  .hwt-header,
  .ac-roi-embed__header
) {
  margin-bottom: 4rem !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
  .ac-capp-cases .wp-block-heading,
  .ac-capp-faq .wp-block-heading,
  .ac-capp-related .wp-block-heading
) {
  margin: 0 0 4rem !important;
}
@media (max-width: 768px) {
  body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
    .ac-capp-scenarios__header, .ac-capp-cases__header, .hwt-header, .ac-roi-embed__header
  ) {
    margin-bottom: 2.5rem !important;
  }
  body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
    .ac-capp-cases .wp-block-heading,
    .ac-capp-faq .wp-block-heading,
    .ac-capp-related .wp-block-heading
  ) {
    margin: 0 0 2.5rem !important;
  }
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
  .ac-capp-scenarios__title,
  .ac-capp-cases__title,
  .hwt-header h2,
  .ac-roi-embed__header h2
) {
  margin: 0 !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
  .ac-capp-scenarios__subtitle,
  .ac-capp-cases__subtitle,
  .hwt-header p,
  .ac-roi-embed__header p
) {
  margin: 20px 0 0 !important;
}
/* Grids right after a standalone heading — the 4rem gap is carried
   by the heading, so their own top margins go. */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
  .ac-capp-cases__grid,
  .ac-capp-related__grid,
  .ac-capp-faq__list
) {
  margin-top: 0 !important;
}

/* "More ways we can help" related strip is a small companion
   strip under the detail section, not a full section — sub-heading
   scale, tighter gap to its cards, and less vertical padding. Placed
   after the unified type/spacing rules above so it wins the tie. */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-related .wp-block-heading {
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  margin: 0 0 2rem !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-related {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
/* Its heading is margin:0 (hugs the left gutter) — keep the card grid on
   the same left edge instead of the WP auto-centring. */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-related__grid {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Section headers → LEFT ALIGNED (homepage convention). The centred
   ROI calculator and final CTA are conversion panels and keep their
   centred composition, same as the homepage. */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
  .ac-capp-scenarios__header,
  .ac-capp-cases .wp-block-heading,
  .ac-capp-faq .wp-block-heading,
  .ac-capp-related .wp-block-heading
) {
  text-align: left !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-scenarios__header {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* FAQ eyebrow's wrapper div is centred inline — flip it (also keeps
   the accordion left) */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-faq > div {
  text-align: left !important;
}

/* ============================================================
   3. COLOUR — light theme below the hero
   ============================================================ */

/* ── Challenge (already light) — retone legacy #1A1A1A/#717171 ── */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-challenge {
  background: var(--lt-page) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
  .ac-capp-challenge__title,
  .ac-capp-challenge__problem-title,
  .ac-capp-challenge__quote-text
) { color: var(--lt-ink) !important; }
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-challenge__problem-desc {
  color: var(--lt-grey) !important;
}

/* ── Challenge typography — 20px body standard, titles stepped up to keep
      hierarchy over the larger body text ── */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
  .ac-capp-challenge__desc,
  .ac-capp-challenge__problem-desc
) {
  font-size: 20px !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-challenge__problem-title {
  font-size: 1.5rem !important;
}

/* ── Solution / typing quote (#010D12 band + dark photo → white).
      The teal-gradient .garage-highlight keeps working on white. ── */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-solution {
  background: var(--lt-page) !important;
  background-image: none !important;
  color: var(--lt-ink) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-solution::before {
  display: none !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-bigquote__text {
  color: var(--lt-ink) !important;
}

/* ── What we deliver (already light) — retone card text ── */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-detail {
  background: var(--lt-page) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-detail__card-title {
  color: var(--lt-ink) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-detail__card-desc {
  color: var(--lt-grey) !important;
}

/* ── How we transform (#080d12 dark band → white). The cyan flow
      lines / node glows read as soft halos on white; text flips
      to ink/grey; the node tiles become white cards. ── */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
  .ac-capp-method,
  .wp-block-group.ac-capp-method,
  .hwt-outer,
  .hwt-section
) {
  background: var(--lt-page) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .hwt-node {
  background: #FFFFFF !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .hwt-content {
  color: var(--lt-ink) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(.hwt-header h2, .hwt-step h3) {
  color: var(--lt-ink) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .hwt-step p {
  color: var(--lt-grey) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .hwt-step {
  border-left-color: rgba(8, 34, 46, 0.10) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .hwt-step.active {
  border-left-color: #00b4d8 !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .hwt-step-num {
  color: rgba(8, 34, 46, 0.05) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .hwt-step.active .hwt-step-num {
  color: rgba(0, 180, 216, 0.12) !important;
}

/* ── Scenarios (already light) ── */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-scenarios {
  background: var(--lt-page) !important;
}
/* card titles/badges pick up ink automatically via the --ac-text-dark /
   --ac-bg retone in the palette block */

/* ── Mini case studies (white) — homepage industry-tag coral ── */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-cases {
  background: var(--lt-page) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
  .ac-capp-cases .wp-block-heading,
  .ac-capp-cases__title
) {
  color: var(--lt-ink) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-case-card__tag {
  color: var(--lt-attn-strong) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-case-card__desc {
  color: var(--lt-grey) !important;
}

/* ── FAQ (dark band → white, homepage FAQ treatment) ── */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-faq {
  background: var(--lt-page) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-faq .wp-block-heading {
  color: var(--lt-ink) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-faq__trigger {
  color: var(--lt-ink) !important;
}
/* Question text joins the unified card-title size (1.375rem — same as the
   challenge/deliver/scenario card titles beside 20px body copy). */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-faq__question {
  font-size: 1.375rem !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-faq__trigger:hover {
  color: var(--ac-primary) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-faq__answer p {
  color: var(--lt-grey) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-faq__item,
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-faq__item:first-child {
  border-color: var(--lt-border) !important;
}
/* Homepage FAQ design (ac-home-faq 2-column layout) on the light ground —
   same retone ac-homepage-light.css applies on the front page. */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-home-faq__heading {
  color: var(--lt-ink) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-home-faq__more-label {
  color: var(--lt-ink) !important;
}

/* ── Related capabilities (white) ── */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-related {
  background: var(--lt-page) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-related .wp-block-heading {
  color: var(--lt-ink) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-related-card__desc {
  color: var(--lt-grey) !important;
}

/* ── ROI calculator — stays a DARK feature panel (no light variant
      exists anywhere on the site) but retoned #010D12 → #08222E per
      the dark-tone standard. ── */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-roi-embed {
  background: #08222E !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-roi-s-row input[type=range]::-webkit-slider-thumb {
  border-color: #08222E !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-roi-s-row input[type=range]::-moz-range-thumb {
  border-color: #08222E !important;
}

/* ── CTA (dark panel → soft cyan brand panel, homepage treatment) ── */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-cta-wrapper-bg {
  background: var(--lt-page) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-cta {
  background: linear-gradient(180deg, #EAF6FA 0%, #DCEFF4 45%, #CDE7EF 100%) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-cta__glow {
  display: none !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
  .ac-cta__title, .ac-cta__heading, .ac-cta__subtitle, .ac-cta__reassurance, .ac-cta-note
) {
  color: var(--lt-ink) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-cta .ac-btn--outline {
  color: var(--lt-ink) !important;
  border-color: var(--lt-border-brand) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-cta .ac-btn--outline:hover {
  color: var(--ac-primary) !important;
  border-color: var(--ac-primary) !important;
}
/* Coral conversion moment — same as the homepage final CTA */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-cta .ac-btn--cta-white {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #FF6B5E 0%, var(--lt-attn) 100%) !important;
  border-color: transparent !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-cta .ac-btn--cta-white:hover {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, var(--lt-attn) 0%, var(--lt-attn-strong) 100%) !important;
  box-shadow: 0 10px 30px rgba(229, 72, 77, 0.35) !important;
  border-color: transparent !important;
}

/* ── Footer — homepage light footer treatment ── */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-footer {
  background: #FFFFFF !important;
  color: var(--lt-ink) !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
  .ac-footer__heading,
  .ac-footer__desc,
  .ac-footer__reach-cta
) { color: var(--lt-ink) !important; }
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-footer__brand .ac-logo span { color: var(--lt-ink) !important; }
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-footer a { color: var(--lt-ink) !important; }
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-footer a:hover { color: var(--ac-primary) !important; }
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-footer a.ac-footer__email-link,
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-footer a.ac-footer__phone { color: var(--lt-ink) !important; }
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-footer__email svg { stroke: var(--lt-ink) !important; }
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-footer a.ac-pill-cta.ac-footer__map-pill {
  color: var(--lt-ink) !important;
  border: 1.5px solid rgba(8, 34, 46, 0.18);
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-footer__linkedin svg path { fill: var(--lt-ink) !important; }
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-footer__linkedin--min { border-color: var(--lt-ink) !important; }
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-footer__linkedin--min:hover { border-color: var(--ac-primary) !important; }
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-footer__linkedin--min:hover svg path { fill: var(--ac-primary) !important; }
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-footer__divider {
  background-color: var(--lt-border) !important;
  color: var(--lt-border) !important;
  opacity: 1 !important;
}

/* ============================================================
   5. HERO LAYOUT — match the homepage hero (2026-07-09 request).
      Homepage recipe (ac-homepage.unmin.css .ac-hero/.ac-hero__*):
      full-viewport band (calc(100vh/0.80), capped 1125px) with the
      copy vertically centred; ONE left-aligned copy column
      (max-width 1160px) hugging the left gutter — no right-hand
      visual; title clamp(2.2rem,5vw,64px)/800/1.11 →1.25rem→
      subtitle 1.75rem/1.5 (max 900px) →3.5rem→ CTA row (circle-
      arrow primary + Google-review + address badges, in the
      pattern markup); the trusted-by carousel is pinned absolute
      at the hero's bottom edge (bottom 2.5rem, 9rem gutters),
      exactly like the homepage. The two-column grid collapses and
      the right-hand image + floating chips are hidden.
      Fixed height + pinned bottom apply ≥961px only — below that
      the hero keeps its natural stacked flow (and the base 9rem
      top padding that clears the fixed nav), like the homepage's
      own mobile fallback.
   ============================================================ */

/* Single left column — the visual goes, the grid becomes the
   homepage copy column */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-hero__visual {
  display: none !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-hero__grid {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  max-width: 1160px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  gap: 0 !important;
}
/* Copy stack — margins carry the homepage rhythm, not the flex gap */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-hero__content {
  gap: 0 !important;
  width: 100%;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-hero__content h1 {
  font-size: clamp(2.2rem, 5vw, 64px) !important;
  font-weight: 800 !important;
  line-height: 1.11 !important;
  letter-spacing: -0.02em !important;
  max-width: 1160px !important;
  margin: 0 0 1.25rem !important;
  text-align: left !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-hero__content > p {
  font-size: 1.75rem !important;
  line-height: 1.5 !important;
  max-width: 900px !important;
  margin: 0 0 3.5rem !important;
  text-align: left !important;
}
/* Homepage hero CTA cut — trailing circle badge with arrow-swap hover.
   The circle/arrow element styles are global (ac-homepage.unmin.css);
   only the padding cut is scoped to .ac-hero there, so restate it. */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-hero .ac-hero-btn-primary {
  padding: 8px 8px 8px 28px;
  gap: 12px;
}
/* The circle holds a DIAGONAL ↗ arrow here (the button jumps to the
   #lead-form section, not down the page), so the swap hover travels
   bottom-left → top-right instead of the global top → bottom path. */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-hero .ac-hero-btn__arr--dup {
  transform: translate(-160%, 160%);
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-hero .ac-hero-btn-primary-wrap:hover .ac-hero-btn__arr--main {
  transform: translate(160%, -160%);
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-hero .ac-hero-btn-primary-wrap:hover .ac-hero-btn__arr--dup {
  transform: translate(0, 0);
}
/* Google-review + address badges grouped together at the right end of the
   CTA row (the global .ac-hero__ctas rule would otherwise push only the
   address badge across). */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-hero__badges {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-left: auto;
  /* Overhang past the 1160px copy column so the badges' right edge lands on
     the hero's 9rem right gutter — same derivation as the homepage
     .ac-hero__ctas .ac-hero__address-badge rule (1160px + 2×9rem = 1448px,
     125vw = full width under body{zoom:0.80}). */
  margin-right: min(0px, calc(1448px - 125vw));
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-hero__badges .ac-hero__address-badge {
  /* The global .ac-hero__ctas rule gives the address badge its own auto
     left margin AND its own min(0px, 1448px − 125vw) overhang. The GROUP
     already carries that overhang — left on the badge too it doubles up
     and pushes both badges past the viewport (clipped by body
     overflow-x:clip). Zero BOTH margins here. */
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Match the homepage badge position: the Google-review + address badges
   sit grouped immediately after the CTA button (as in the centred homepage
   .ac-hero__ctas row) instead of being flung to the hero's right gutter.
   Overrides the auto/overhang push above. */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-hero__badges {
  margin-left: 0;
  margin-right: 0;
}
/* Tighten the gap between the subheading and the CTA row (the shared
   capability rule sets margin-top: 2rem). */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-hero__ctas {
  margin-top: 1rem !important;
}
/* Trusted-by label — crisp full white with a soft shadow so it stays easily
   readable over the hero photograph (matches the homepage's #fff label). */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-hero .ac-trust-carousel__label {
  color: #ffffff !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
/* Gutter alignment. ac-capabilities.css caps these
   inner wrappers at max-width:1200 and centres them, so their headings sat
   inset well past the 9rem gutter — unlike hero/scenarios/cases/related/faq,
   whose content fills the 1680 measure and hugs the gutter. Widen the content
   grids to the same measure, and anchor the narrow section headers to the
   gutter while keeping their reading width. */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
  .ac-capp-challenge__grid,
  .ac-capp-detail__layout,
  .ac-capp-scenarios__grid,
  .ac-capp-leaders__grid
) {
  max-width: 1680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
  .ac-capp-scenarios__header,
  .ac-capp-leaders__header
) {
  margin-left: 0 !important;
  margin-right: auto !important;
}
/* Trusted-by carousel — flow position below the copy (<961px, homepage
   mobile behaviour; ≥961px the block below pins it to the hero's bottom).
   The carousel's edge fades (::before/::after) paint solid var(--ac-bg),
   which shows as dark patches over the hero photo — replace with a
   transparency mask, same fix as the homepage/firm heroes. */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-hero .ac-trust-carousel {
  margin-top: 3.5rem !important;
  max-width: none !important;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-hero .ac-trust-carousel::before,
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-hero .ac-trust-carousel::after {
  display: none !important;
}

@media (min-width: 961px) {
  /* Full-viewport hero, copy vertically centred (homepage values,
     incl. the body{zoom:0.80} 100vh/0.80 correction) */
  body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-hero {
    height: calc(100vh / 0.80) !important;
    min-height: calc(100vh / 0.80) !important;
    max-height: min(calc(100vh / 0.80), 1125px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }
  /* Nudge the copy below the fixed nav pill — homepage
     .ac-hero__center-content margin-top:2rem equivalent */
  body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-hero__grid {
    margin-top: 2rem;
  }
  /* Trust carousel pinned at the hero's BOTTOM edge, on the same 9rem
     gutters — exactly the homepage `.ac-hero > .ac-trust-carousel`
     treatment (ac-hero-tri.css). Absolute children ignore the hero's
     padding, so the gutters are restated as insets. */
  body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-hero .ac-trust-carousel {
    position: absolute !important;
    left: 9rem !important;
    right: 9rem !important;
    bottom: 2.5rem !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: 2;
  }
}

/* ============================================================
   4. SECTION DIVIDERS — the homepage's inset hairline between
      bands (transparent for the first/last 9rem, matching the
      gutters). White-on-white boundaries only; the band straight
      after the hero is omitted, exactly like the homepage, and
      the dark ROI / cyan CTA panels separate themselves.
   ============================================================ */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) { --ac-divider-inset: 9rem; }
@media (max-width: 960px) { body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) { --ac-divider-inset: 2rem; } }
@media (max-width: 600px) { body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) { --ac-divider-inset: 1.5rem; } }

body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
  .ac-capp-solution,
  .ac-capp-detail,
  .ac-capp-method,
  .ac-capp-scenarios,
  .ac-capp-cases,
  .ac-capp-faq,
  .ac-capp-related
) {
  border-top: 1px solid transparent;
  border-image: linear-gradient(
    to right,
    transparent var(--ac-divider-inset),
    rgba(9, 32, 42, 0.22) var(--ac-divider-inset),
    rgba(9, 32, 42, 0.22) calc(100% - var(--ac-divider-inset)),
    transparent calc(100% - var(--ac-divider-inset))
  ) 1;
}
/* No hairline between the lead form and the FAQ — the FAQ reads as a
   companion to the form band. The hairline sits between the FAQ and the
   related strip instead (the shared rule above covers it). */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-faq {
  border-top: none !important;
  border-image: none !important;
}

/* Testimonials band (shared homepage pattern) — its gutters/rhythm come
   from body.ac-homepage rules in ac-homepage-system.css, which never match
   on capability pages. Restate them here: 9rem gutters + 7rem rhythm,
   inner stripped of its own gutter and widened to the 1680 measure. */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-testimonials {
  padding: 7rem 9rem !important;
  margin: 0 !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-testimonials__inner {
  padding-left: 0;
  padding-right: 0;
  max-width: 1680px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 960px) {
  body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-testimonials {
    padding: 5rem 3rem !important;
  }
}
@media (max-width: 600px) {
  body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-testimonials {
    padding: 3.5rem 1.25rem !important;
  }
}

/* ============================================================
   5. SINGLE CASE STUDY — when the cases band holds exactly ONE
      impact card, recompose as two columns: card on the left,
      header (heading + subtitle) vertically centred beside it.
      Applies automatically via :has(); add a second card and the
      band reverts to the standard header-above + scroll-strip
      design with no markup change.
   ============================================================ */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-cases:has(.ac-impact__list > .ac-impact-card:only-child) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: center;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-cases:has(.ac-impact__list > .ac-impact-card:only-child) .ac-impact__list {
  order: 2;
  display: block;
  overflow: visible;
  margin: 0;
  padding: 0;
  /* Explicit width: the WP constrained layout puts auto side margins on the
     group's children, which kills grid stretch — the list would shrink-wrap
     around a 100%-of-parent card and collapse to 0. */
  width: 100%;
  min-width: 0;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-cases:has(.ac-impact__list > .ac-impact-card:only-child) .ac-capp-cases__header {
  order: 1;
  margin: 0;
  max-width: 640px;
}
/* The strip sizes cards for a horizontal scroller (min(680px, 86%)) —
   in the column the card fills its track instead. */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-cases:has(.ac-impact__list > .ac-impact-card:only-child) .ac-impact-card {
  width: 100%;
  min-width: 0;
}
@media (max-width: 960px) {
  body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-cases:has(.ac-impact__list > .ac-impact-card:only-child) {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  /* Stacked: header reads first, card follows (standard band order). */
  body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-cases:has(.ac-impact__list > .ac-impact-card:only-child) .ac-capp-cases__header {
    order: 1;
  }
  body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .ac-capp-cases:has(.ac-impact__list > .ac-impact-card:only-child) .ac-impact__list {
    order: 2;
  }
}

/* ============================================================
   Card typography standard — 20px body text on every card,
   titles stepped to 1.5rem so hierarchy survives the larger
   body (challenge cards get the same treatment further up).
   Placed at end of file to win the cascade over per-pattern
   inline styles and the post-389 flattened template. Case-study
   impact cards excluded — their desc is already 1.3rem (~21px).
   ============================================================ */
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
  .ac-capp-detail__card-desc,
  .ac-capp-detail__sidebar-desc,
  .ac-capp-scenarios__card-desc,
  .ac-capp-related-card__desc,
  .ac-capp-leaders__bio
) {
  font-size: 20px !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) .hwt-step p {
  font-size: 20px !important;
}
body:is(.page-template-page-capability-transformation-strategy, .page-template-page-capability-workflow-automation, .page-template-page-capability-ai-customer-service, .page-template-page-capability-digital-transformation) :is(
  .ac-capp-detail__card-title,
  .ac-capp-scenarios__card-title,
  .ac-capp-related-card__title
) {
  font-size: 1.5rem !important;
}