/* ============================================================
   CAPABILITIES INDEX — homepage design-system rollout
   Applies the homepage light theme to /capabilities/ (template
   page-capabilities-index, body.page-template-page-capabilities-index):

     - Light grounds + #08222E ink below the hero; the HERO stays
       dark and untouched (same hands-off rule as the homepage).
     - The ROI calculator band deliberately stays DARK — it is the
       page's contrast band, matching the treatment on the light
       capability pages (ac-capp-system.css) and the homepage
       lead-form band.
     - One eyebrow spec (plain ink caps, no pill) outside the hero
       and the dark ROI band.
     - Footer + insights + CTA retoned with the same rules as
       ac-firm-system.css.

   Loads AFTER ac-capabilities.css; body-scoped selectors +
   !important beat the patterns' in-body <style> blocks and inline
   style attrs. Fully reversible: delete this file + its
   wp_enqueue_style(). Applied 2026-07-27.
   ============================================================ */

body.page-template-page-capabilities-index {
  --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;

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

/* HANDS OFF THE HERO — it stays dark exactly like the homepage hero.
   (The hero uses the homepage .ac-hero structure since 2026-07-27.) */
body.page-template-page-capabilities-index .ac-hero { color: #FFFFFF !important; }

/* ============================================================
   9REM SIDE GUTTERS on every band (hero included, horizontal
   only) — homepage spec: 9rem, →3rem ≤960px, →1.25rem ≤600px.
   ============================================================ */
body.page-template-page-capabilities-index :is(
  .ac-hero,
  .ac-cap-core,
  .ac-cap-other,
  .ac-cap-orbit,
  .ac-cap-products,
  .ac-insights-posts,
  .ac-lead-form,
  .ac-footer
) {
  padding-left: 9rem !important;
  padding-right: 9rem !important;
}
@media (max-width: 960px) {
  body.page-template-page-capabilities-index :is(
    .ac-hero, .ac-cap-core, .ac-cap-other, .ac-cap-orbit,
    .ac-cap-products, .ac-insights-posts, .ac-lead-form, .ac-footer
  ) {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}
@media (max-width: 600px) {
  body.page-template-page-capabilities-index :is(
    .ac-hero, .ac-cap-core, .ac-cap-other, .ac-cap-orbit,
    .ac-cap-products, .ac-insights-posts, .ac-lead-form, .ac-footer
  ) {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* ============================================================
   CONTENT INNERS → 1680px (homepage spec) so section content
   actually runs gutter-to-gutter instead of stopping at the
   patterns' own 1100/1340px centred caps.
   ============================================================ */
body.page-template-page-capabilities-index :is(
  .ac-cap-core__inner,
  .ac-cap-other > div,
  .ac-tools__inner,
  .ac-cap-products > div
) {
  max-width: 1680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   EYEBROWS — one homepage spec (plain Inter caps, ink, no pill).
   Hero and the dark ROI band keep their own styling.
   ============================================================ */
body.page-template-page-capabilities-index
  :is(.ac-cap-core__badge, .ac-insights-posts__label):not(:is(.ac-hero *, .ac-roi-embed *)) {
  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;
  color: var(--lt-ink) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 1.25rem !important;
  display: inline-block;
}

/* ============================================================
   HEADER STACK RHYTHM — eyebrow →16px→ heading →16px→ subheading,
   matching the insights section ("How we think") exactly.
   ============================================================ */
body.page-template-page-capabilities-index .ac-cap-core__badge {
  margin: 0 0 16px !important;
}
body.page-template-page-capabilities-index .ac-cap-core__title {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}
body.page-template-page-capabilities-index .ac-cap-core__desc {
  margin: 0 !important;
  max-width: 820px;
}
body.page-template-page-capabilities-index .ac-tools__heading {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}
body.page-template-page-capabilities-index .ac-tools__sub { margin: 0 !important; }
body.page-template-page-capabilities-index .ac-garage-split__left .ac-cap-products__title {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}
body.page-template-page-capabilities-index .ac-garage-split__left .ac-cap-products__intro {
  margin-top: 0 !important;
}

/* ============================================================
   CORE CAPABILITIES ("Five ways we get you moving") — dark mesh
   band → white; glass panel → homepage light card.
   ============================================================ */
body.page-template-page-capabilities-index .ac-cap-core {
  background: #FFFFFF !important;
}
body.page-template-page-capabilities-index .ac-cap-core__title { color: var(--lt-ink) !important; }
body.page-template-page-capabilities-index .ac-cap-core__desc { color: var(--lt-grey) !important; }

/* Tab rail — premium treatment: solid ink text, gradient accent bar
   + soft tint sweep on the active tab, gentle slide on hover. */
body.page-template-page-capabilities-index .ac-cap-core__nav-item {
  position: relative;
  color: rgba(8, 34, 46, 0.62) !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 0.85rem 1.4rem !important;
  margin-left: 0 !important;
  transition: color 0.25s ease, background 0.25s ease,
              transform 0.25s ease, box-shadow 0.25s ease !important;
}
body.page-template-page-capabilities-index .ac-cap-core__nav-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #07A9D1, #06CFC3);
  opacity: 0;
  transition: opacity 0.25s ease;
}
body.page-template-page-capabilities-index .ac-cap-core__nav-item:hover {
  color: var(--lt-ink) !important;
  background: rgba(7, 169, 209, 0.06) !important;
  transform: translateX(4px);
}
body.page-template-page-capabilities-index .ac-cap-core__nav-item.is-active {
  color: var(--lt-ink) !important;
  font-weight: 700 !important;
  background: linear-gradient(90deg, rgba(7, 169, 209, 0.14), rgba(6, 207, 195, 0.03)) !important;
  transform: translateX(4px);
  box-shadow: 0 8px 22px rgba(7, 169, 209, 0.12) !important;
}
body.page-template-page-capabilities-index .ac-cap-core__nav-item.is-active::before {
  opacity: 1;
}

/* Card CTAs — the "All insights" pill component in its dark variant:
   navy pill, white text, white circle badge whose arrow swaps through
   and the disc turns red on hover (base .ac-pill-cta styles come from
   ac-homepage.unmin.css). */
body.page-template-page-capabilities-index .ac-pill-cta--dark {
  background: #08222E !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 18px rgba(12, 27, 36, 0.18) !important;
}
body.page-template-page-capabilities-index .ac-pill-cta--dark:hover {
  box-shadow: 0 8px 26px rgba(12, 27, 36, 0.28) !important;
}
body.page-template-page-capabilities-index .ac-pill-cta--dark .ac-pill-cta__circle {
  background: #FFFFFF;
}
body.page-template-page-capabilities-index .ac-pill-cta--dark .ac-pill-cta__arr {
  stroke: #08222E;
  transition: transform 0.3s ease, stroke 0.3s ease;
}
body.page-template-page-capabilities-index .ac-pill-cta--dark:hover .ac-pill-cta__circle {
  background: #C62B30;
}
body.page-template-page-capabilities-index .ac-pill-cta--dark:hover .ac-pill-cta__arr {
  stroke: #FFFFFF;
}

/* Glass panel → light card */
body.page-template-page-capabilities-index .ac-cap-core__panel {
  background: var(--lt-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--lt-border) !important;
  box-shadow: 0 4px 20px rgba(12, 40, 55, 0.06) !important;
}
body.page-template-page-capabilities-index .ac-cap-core__panel-title { color: var(--lt-ink) !important; }
body.page-template-page-capabilities-index .ac-cap-core__panel-desc { color: var(--lt-grey) !important; }

/* ============================================================
   TOOLKIT — #f8fafb band → the white page ground. Reads as an
   appendix of the Core section (2026-07-27): small left-aligned
   heading one step below the section-heading hierarchy, pulled
   up tight beneath the core switcher, no divider between them.
   ============================================================ */
body.page-template-page-capabilities-index .ac-cap-core { padding-bottom: 2.5rem !important; }
body.page-template-page-capabilities-index .ac-cap-other {
  background: #FFFFFF !important;
  padding-top: 1.5rem !important;
  padding-bottom: 5rem !important;
}
body.page-template-page-capabilities-index .ac-cap-other__title {
  color: var(--lt-ink) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  text-align: left !important;
  margin: 0 !important;
}
body.page-template-page-capabilities-index .ac-tk-grid { margin-top: 1.75rem !important; }

/* ============================================================
   ORBIT ("We don't have a preferred vendor") — dark → white
   ============================================================ */
body.page-template-page-capabilities-index .ac-cap-orbit {
  background: #FFFFFF !important;
}
body.page-template-page-capabilities-index .ac-orbit__center {
  background: radial-gradient(ellipse at center, #FFFFFF 60%, transparent 100%) !important;
}
body.page-template-page-capabilities-index .ac-orbit__title { color: var(--lt-ink) !important; }
body.page-template-page-capabilities-index .ac-orbit__text { color: var(--lt-grey) !important; }
body.page-template-page-capabilities-index .ac-orbit__sub { color: var(--lt-grey) !important; }
body.page-template-page-capabilities-index .ac-orbit__pill {
  background: #FFFFFF !important;
  border-color: rgba(9, 32, 42, 0.12) !important;
  color: var(--lt-ink) !important;
  box-shadow: 0 2px 10px rgba(12, 40, 55, 0.07) !important;
}
body.page-template-page-capabilities-index .ac-orbit__ring {
  border-color: rgba(7, 169, 209, 0.15) !important;
}

/* ============================================================
   INSIGHTS — #08222E band → white, homepage card treatment
   (mirrors ac-firm-system.css)
   ============================================================ */
body.page-template-page-capabilities-index .ac-insights-posts { background: #FFFFFF !important; }
body.page-template-page-capabilities-index .ac-insights-posts__title { color: var(--lt-ink) !important; }
body.page-template-page-capabilities-index .ac-post-card {
  background: var(--lt-surface) !important;
  border-color: var(--lt-border) !important;
  box-shadow: 0 4px 20px rgba(12, 40, 55, 0.06) !important;
}
body.page-template-page-capabilities-index .ac-post-card:hover {
  border-color: var(--lt-border-brand) !important;
  box-shadow: 0 10px 32px rgba(7, 169, 209, 0.14) !important;
}
body.page-template-page-capabilities-index :is(
  .ac-post-card__title,
  .ac-post-card__excerpt,
  .ac-post-card__date,
  .ac-post-card__read-time
) { color: var(--lt-ink) !important; }
body.page-template-page-capabilities-index .ac-post-card__footer { border-top-color: var(--lt-border) !important; }
body.page-template-page-capabilities-index .ac-post-card__category {
  color: var(--lt-ink) !important;
  border-color: var(--lt-border) !important;
}

/* ============================================================
   CTA — dark panel → soft cyan brand panel (homepage treatment,
   mirrors ac-firm-system.css)
   ============================================================ */
body.page-template-page-capabilities-index .ac-cta-wrapper-bg { background: #FFFFFF !important; }
body.page-template-page-capabilities-index .ac-cta {
  background: linear-gradient(180deg, #EAF6FA 0%, #DCEFF4 45%, #CDE7EF 100%) !important;
}
body.page-template-page-capabilities-index .ac-cta__glow { display: none !important; }
body.page-template-page-capabilities-index :is(
  .ac-cta__title, .ac-cta__heading, .ac-cta__subtitle,
  .ac-cta__reassurance, .ac-cta-note, .ac-cta__support-text
) {
  color: var(--lt-ink) !important;
}
body.page-template-page-capabilities-index .ac-cta .ac-btn--outline {
  color: var(--lt-ink) !important;
  border-color: var(--lt-border-brand) !important;
}
body.page-template-page-capabilities-index .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.page-template-page-capabilities-index .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.page-template-page-capabilities-index .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 (mirrors
   ac-firm-system.css)
   ============================================================ */
body.page-template-page-capabilities-index .ac-footer {
  background: #FFFFFF !important;
  color: var(--lt-ink) !important;
}
body.page-template-page-capabilities-index :is(
  .ac-footer__heading,
  .ac-footer__desc,
  .ac-footer__reach-cta
) { color: var(--lt-ink) !important; }
body.page-template-page-capabilities-index .ac-footer__brand .ac-logo span { color: var(--lt-ink) !important; }
body.page-template-page-capabilities-index .ac-footer a { color: var(--lt-ink) !important; }
body.page-template-page-capabilities-index .ac-footer a:hover { color: var(--ac-primary) !important; }
body.page-template-page-capabilities-index .ac-footer a.ac-footer__email-link,
body.page-template-page-capabilities-index .ac-footer a.ac-footer__phone { color: var(--lt-ink) !important; }
body.page-template-page-capabilities-index .ac-footer__email svg { stroke: var(--lt-ink) !important; }
body.page-template-page-capabilities-index .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.page-template-page-capabilities-index .ac-footer__linkedin svg path { fill: var(--lt-ink) !important; }
body.page-template-page-capabilities-index .ac-footer__linkedin--min { border-color: var(--lt-ink) !important; }
body.page-template-page-capabilities-index .ac-footer__linkedin--min:hover { border-color: var(--ac-primary) !important; }
body.page-template-page-capabilities-index .ac-footer__linkedin--min:hover svg path { fill: var(--ac-primary) !important; }
body.page-template-page-capabilities-index .ac-footer__divider {
  background-color: var(--lt-border) !important;
  color: var(--lt-border) !important;
  opacity: 1 !important;
}

/* ============================================================
   SECTION DIVIDERS — the homepage's inset hairline between
   consecutive light bands.
   ============================================================ */
body.page-template-page-capabilities-index { --ac-divider-inset: 9rem; }
@media (max-width: 960px) { body.page-template-page-capabilities-index { --ac-divider-inset: 2rem; } }
@media (max-width: 600px) { body.page-template-page-capabilities-index { --ac-divider-inset: 1.5rem; } }

body.page-template-page-capabilities-index :is(
  .ac-cap-orbit,
  .ac-cap-products
) {
  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;
}