/* DeepCiphers / Module 5: buttons and CTAs only.
   Component backgrounds and primary/secondary hierarchy stay with their
   original styles. Shared geometry and states override legacy CTA rules.
   Hero bays, card navigation and scroll-driven transforms keep their layout. */
@layer dc-buttons {
  :root {
    --dc-button-height: 50px;
    --dc-button-compact-height: 44px;
    --dc-button-pad: 20px;
    --dc-button-pad-block: 8px;
    --dc-button-gap: 12px;
    --dc-button-icon: 32px;
    --dc-button-pill-radius: 999px;
    --dc-button-control-radius: 12px;
    --dc-button-focus: #26D06A;
    --dc-button-accent: #26D06A;
    --dc-button-shadow: 0 5px 16px rgb(0 41 94 / .12);
    --dc-button-ease: cubic-bezier(.22, 1, .36, 1);
  }

  /* Explicit CTA roles: never apply pill geometry to menu toggles, tabs,
     carousels, process cards or whole-card links. */
  :where(.dc-master-btn:not(.top-svg-section *), .primaryBtn, .secondaryBtn,
    .whoCta, .aiSignalLink, .aiFirstMoreBtn, .beforeAfterCtaBtn,
    .problemProductCta, .aiAppsCaseBtn, .amazingTeamLink,
    .featuredCaseStudyRefButton, .insightsReadMore, .insightsViewAll,
    .nextMoveButton, .finalCtaButton, .pill-button, .pp-pill,
    .careers-page-body .pill, .details-button, .job-detail > a,
    .career-back-button, .career-apply-bar, .career-application-submit,
    [data-dc-button='pill'], .dc-home-services-cta-inner > button) {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-flow: row nowrap !important;
    gap: var(--dc-button-gap) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: var(--dc-button-height) !important;
    max-height: none !important;
    padding: var(--dc-button-pad-block) 8px var(--dc-button-pad-block) var(--dc-button-pad) !important;
    border-radius: var(--dc-button-pill-radius) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-style: normal !important;
    line-height: 20px !important;
    letter-spacing: -.01em !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    vertical-align: middle !important;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 200ms ease, color 200ms ease,
      border-color 200ms ease, box-shadow 220ms var(--dc-button-ease),
      transform 220ms var(--dc-button-ease) !important;
  }

  /* Labels can wrap inside their action, instead of disappearing behind an
     end circle. Keep existing text, arrow artwork and link destinations. */
  :where(.dc-master-btn:not(.top-svg-section *), .primaryBtn, .secondaryBtn,
    .whoCta, .aiSignalLink, .aiFirstMoreBtn, .beforeAfterCtaBtn,
    .problemProductCta, .aiAppsCaseBtn, .featuredCaseStudyRefButton,
    .insightsReadMore, .insightsViewAll, .nextMoveButton, .finalCtaButton,
    .pill-button, .career-application-submit, [data-dc-button='pill']) > span:first-child:not([aria-hidden='true']) {
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    text-align: left;
  }

  /* Existing circles get one protected size; free-standing arrows keep a
     quieter 20px size. No new icon is introduced. */
  :where(.dc-master-btn:not(.top-svg-section *), .primaryBtn, .secondaryBtn, .whoCta,
    .aiSignalLink, .aiFirstMoreBtn, .beforeAfterCtaBtn, .problemProductCta,
    .aiAppsCaseBtn, .insightsReadMore, .insightsViewAll, .nextMoveButton,
    .pill-button, .careers-page-body .pill, .details-button, .job-detail > a,
    [data-dc-button='pill']) :where(.top-dev-arrow, .build-arrow-svg,
      .mobile-link-arrow, .arrow-circle, .circleArrow, .secondaryArrowCircle, .aiFirstMoreBtnIcon,
      .beforeAfterCtaBtnIcon, .problemProductCtaIcon, .aiAppsCaseBtnIcon,
      .insightsReadMoreIcon, .insightsViewAllIcon,
      [data-dc-button-icon], i:has(svg)) {
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    width: var(--dc-button-icon) !important;
    height: var(--dc-button-icon) !important;
    min-width: var(--dc-button-icon) !important;
    min-height: var(--dc-button-icon) !important;
    flex: 0 0 var(--dc-button-icon) !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }
  :where(.dc-master-btn:not(.top-svg-section *), .whoCta, .pill-button)
    :where(.service-button-arrow, .portfolio-arrow-svg, .pill-button-arrow),
  .whoCta > img {
    display: block !important;
    width: var(--dc-button-icon) !important;
    height: var(--dc-button-icon) !important;
    min-width: var(--dc-button-icon) !important;
    min-height: var(--dc-button-icon) !important;
    max-width: var(--dc-button-icon) !important;
    max-height: var(--dc-button-icon) !important;
    flex: 0 0 var(--dc-button-icon) !important;
    object-fit: contain !important;
    margin: 0 !important;
  }
  :where(.top-dev-arrow, .build-arrow-svg, .mobile-link-arrow, .arrow-circle,
    .aiFirstMoreBtnIcon) > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  :where(.dc-master-btn:not(.top-svg-section *), .aiSignalLink,
    .beforeAfterCtaBtn, .problemProductCta, .aiAppsCaseBtn,
    .insightsReadMore, .insightsViewAll, .nextMoveButton,
    .careers-page-body .pill, .details-button, .job-detail > a,
    [data-dc-button='pill']) :where(.arrow-circle, .beforeAfterCtaBtnIcon,
      .problemProductCtaIcon, .aiAppsCaseBtnIcon, .insightsReadMoreIcon,
      .insightsViewAllIcon, [data-dc-button-icon], i) > svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    margin: 0 !important;
  }
  :where(.aiSignalLink, .nextMoveButton) > svg {
    box-sizing: border-box !important;
    width: var(--dc-button-icon) !important;
    height: var(--dc-button-icon) !important;
    flex: 0 0 var(--dc-button-icon) !important;
    padding: 7px !important;
  }
  :where(.pp-pill, .finalCtaButton, .featuredCaseStudyRefButton,
    .career-application-submit, .dc-home-services-cta-inner > button)
    :where(.pp-arrow, .finalCtaButtonIcon, .featuredCaseStudyButtonIcon,
      .career-application-submit__arrow, [aria-hidden='true']) {
    flex-shrink: 0 !important;
    width: 24px !important;
    height: 24px !important;
    display: inline-grid !important;
    place-items: center !important;
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }

  @media (min-width: 768px) {
    :where(.aiFirstMoreBtn, .insightsViewAll) { width: fit-content !important; }
  }

  /* Text-only actions and rectangular form controls use balanced padding. */
  :where(.secondaryBtn, .amazingTeamLink, .meeting-btn, .letsb-sub-btn,
    .pp-pill, .career-back-button, .career-apply-bar, .career-application-submit,
    .finalCtaButton, .dc-home-services-cta-inner > button) {
    padding-inline: var(--dc-button-pad) !important;
  }
  :where(.meeting-btn, .letsb-sub-btn, .career-apply-bar, .career-application-submit) {
    justify-content: center !important;
    border-radius: var(--dc-button-control-radius) !important;
    text-align: center !important;
  }
  :where(.meeting-btn, .letsb-sub-btn) > span:first-child {
    text-align: center !important;
  }

  /* Compact utility buttons keep their own hierarchy and backgrounds. */
  :where(.search-button, .channel-actions > a, .channel-actions > button,
    .reset-filters, .career-resume-actions button, .pp-copy-action) {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: var(--dc-button-compact-height) !important;
    padding: 10px 14px !important;
    border-radius: var(--dc-button-control-radius) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 20px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    touch-action: manipulation;
    transition: background-color 200ms ease, color 200ms ease,
      border-color 200ms ease, box-shadow 200ms ease !important;
  }
  .channel-actions > .icon-only {
    width: var(--dc-button-compact-height) !important;
    flex: 0 0 var(--dc-button-compact-height) !important;
    padding: 10px !important;
  }
  :where(.search-button, .channel-actions > a, .channel-actions > button) > svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }

  /* Non-home Hero CTAs are fitted into existing illustrated bays. Preserve
     visibility, placement and dimensions; remove clipped label rules only. */
  .top-svg-section .top-dev-cta > span:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
  }

  /* Keep the original measured height inside the pinned service sequence. */
  .dc-home-services-cta-inner > button {
    min-height: 56px !important;
    transition: background-color 200ms ease, color 200ms ease,
      border-color 200ms ease, box-shadow 220ms var(--dc-button-ease) !important;
  }
  @media (max-width: 767px) {
    .dc-home-services-cta-inner > button { min-height: 50px !important; }
    .fullcycle-section .build-btn { min-height: 58px !important; }
  }

  /* Keep the Portfolio arrow circle fully inside its 44px action, without
     rotating the whole image outside its tap target. */
  .case-study-link .case-arrow-icon {
    width: var(--dc-button-icon) !important;
    height: var(--dc-button-icon) !important;
    min-width: var(--dc-button-icon) !important;
    min-height: var(--dc-button-icon) !important;
    max-width: var(--dc-button-icon) !important;
    max-height: var(--dc-button-icon) !important;
    flex: 0 0 var(--dc-button-icon) !important;
    object-fit: contain !important;
    transform: none !important;
    filter: none !important;
    transition: transform 200ms var(--dc-button-ease) !important;
  }
  @media (hover: hover) and (pointer: fine) {
    .case-study-link:where(:hover, :focus-visible) .case-arrow-icon {
      transform: translate(1px, -1px) !important;
    }
  }

  /* Text links and panel CTAs retain their composition. */
  :where(.case-study-link, .back-link, .pp-text-link, .developmentProcessCta) {
    min-height: var(--dc-button-compact-height) !important;
    align-items: center !important;
    touch-action: manipulation;
  }
  :where(.case-study-link, .back-link, .pp-text-link) > svg {
    flex-shrink: 0 !important;
  }
  :where(.dc-master-btn, .primaryBtn, .secondaryBtn, .whoCta, .aiSignalLink,
    .aiFirstMoreBtn, .beforeAfterCtaBtn, .problemProductCta, .aiAppsCaseBtn,
    .amazingTeamLink, .featuredCaseStudyRefButton, .insightsReadMore,
    .insightsViewAll, .nextMoveButton, .finalCtaButton, .pill-button,
    .pp-pill, .pp-copy-action, .careers-page-body .pill, .details-button,
    .job-detail > a, .career-back-button, .career-apply-bar,
    .career-application-submit, .search-button, .reset-filters,
    .channel-actions > a, .channel-actions > button, .case-study-link,
    .back-link, .pp-text-link, .pp-closing-button, .final-action,
    .developmentProcessCta, [data-dc-button],
    .dc-home-services-cta-inner > button):focus-visible {
    outline: 2px solid var(--dc-button-focus) !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 2px #fff !important;
  }
  :where(.dc-master-btn, .career-application-submit, .pp-pill):disabled {
    cursor: not-allowed !important;
    opacity: .65 !important;
    box-shadow: none !important;
  }

  @media (hover: hover) and (pointer: fine) {
    :where(.dc-master-btn:not(.top-svg-section *), .primaryBtn, .secondaryBtn,
      .whoCta, .aiFirstMoreBtn, .beforeAfterCtaBtn, .problemProductCta,
      .aiAppsCaseBtn, .amazingTeamLink, .insightsReadMore, .insightsViewAll,
      .nextMoveButton, .finalCtaButton, .pill-button, .pp-pill,
      .careers-page-body .pill, .details-button, .job-detail > a,
      .career-application-submit, .search-button,
      [data-dc-button='pill']):hover:not(:disabled) {
      box-shadow: var(--dc-button-shadow) !important;
    }
  }
  /* A quiet arrow nudge replaces the legacy -45deg/3px lift. No outer
     button transform is changed, including scroll-controlled CTA reveals. */
  .dc-master-btn :where(.service-button-arrow, .portfolio-arrow-svg,
    .build-arrow-svg > img, .top-dev-arrow > img, .mobile-link-arrow > img,
    .arrow-circle > img, .arrow-circle > svg) {
    will-change: auto !important;
    transition: transform 200ms var(--dc-button-ease) !important;
  }
  .dc-master-btn:where(:hover, :focus-visible) :where(.service-button-arrow,
    .portfolio-arrow-svg, .build-arrow-svg > img, .top-dev-arrow > img,
    .mobile-link-arrow > img, .arrow-circle > img, .arrow-circle > svg) {
    transform: translateX(2px) !important;
  }

  @media (max-width: 767px) {
    :root { --dc-button-height: 48px; --dc-button-pad-block: 7px; --dc-button-pad: 16px; --dc-button-gap: 10px; }
    :where(.dc-master-btn:not(.top-svg-section *), .primaryBtn, .secondaryBtn,
      .whoCta, .aiSignalLink, .aiFirstMoreBtn, .beforeAfterCtaBtn,
      .problemProductCta, .aiAppsCaseBtn, .amazingTeamLink,
      .featuredCaseStudyRefButton, .insightsReadMore, .insightsViewAll,
      .nextMoveButton, .finalCtaButton, .pill-button, .pp-pill,
      .careers-page-body .pill, .details-button, .job-detail > a,
      .career-back-button, .career-apply-bar, .career-application-submit,
      [data-dc-button='pill'], .dc-home-services-cta-inner > button) {
      font-size: 14px !important;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    :where(.dc-master-btn, .primaryBtn, .secondaryBtn, .whoCta, .aiSignalLink,
      .aiFirstMoreBtn, .beforeAfterCtaBtn, .problemProductCta, .aiAppsCaseBtn,
      .amazingTeamLink, .featuredCaseStudyRefButton, .insightsReadMore,
      .insightsViewAll, .nextMoveButton, .finalCtaButton, .pill-button,
      .pp-pill, .details-button, .career-application-submit,
      .search-button, .channel-actions > a, .channel-actions > button,
      [data-dc-button], .dc-home-services-cta-inner > button),
    .dc-master-btn :where(img, svg) {
      transition-duration: 0s !important;
    }
    .dc-master-btn:where(:hover, :focus-visible) :where(.service-button-arrow,
      .portfolio-arrow-svg, .build-arrow-svg > img, .top-dev-arrow > img,
      .mobile-link-arrow > img, .arrow-circle > img, .arrow-circle > svg) {
      transform: none !important;
    }
  }
}