/* ========================================================================
   DeepCiphers master button geometry
   Home Hero buttons remain the sizing reference. Existing button artwork,
   arrow styles, arrow colors, backgrounds, borders and hover effects are
   intentionally left to each original component stylesheet.
   ======================================================================== */

:root {
  --dc-master-btn-radius: 999px;
  --dc-master-btn-min-height: 48px;
  --dc-master-btn-padding-block: 6px;
  --dc-master-btn-padding-end: 6px;
  --dc-master-btn-padding-start: clamp(16px, 2.5vw, 28px);
  --dc-master-btn-gap: 10px;
}

/* The ID branch contributes enough specificity to override legacy geometry
   without changing a button's existing visual theme or functionality. */
html body :is(#dc-master-button-reference#dc-master-button-reference-2#dc-master-button-reference-3#dc-master-button-reference-4#dc-master-button-reference-5, .dc-master-btn) {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-flow: row nowrap !important;
  gap: var(--dc-master-btn-gap) !important;

  height: auto !important;
  min-height: var(--dc-master-btn-min-height) !important;
  max-height: none !important;
  padding: var(--dc-master-btn-padding-block) var(--dc-master-btn-padding-end)
           var(--dc-master-btn-padding-block) var(--dc-master-btn-padding-start) !important;
  border-radius: var(--dc-master-btn-radius) !important;

  font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 20px !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

@media (max-width: 767px) {
  :root {
    --dc-master-btn-padding-start: 16px;
  }

  html body :is(#dc-master-button-reference#dc-master-button-reference-2#dc-master-button-reference-3#dc-master-button-reference-4#dc-master-button-reference-5, .dc-master-btn) {
    font-size: 14px !important;
    line-height: 20px !important;
  }
}

@media (max-width: 420px) {
  html body :is(#dc-master-button-reference#dc-master-button-reference-2#dc-master-button-reference-3#dc-master-button-reference-4#dc-master-button-reference-5, .dc-master-btn) {
    justify-content: space-between !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body :is(#dc-master-button-reference#dc-master-button-reference-2#dc-master-button-reference-3#dc-master-button-reference-4#dc-master-button-reference-5, .dc-master-btn) {
    transition-duration: 0s !important;
  }
}

/* ========================================================================
   Shared arrow interaction
   Keep every button's existing artwork and geometry, while making its actual
   arrow turn upward and lift slightly on hover/keyboard focus.
   ======================================================================== */
html body :is(#dc-master-button-reference#dc-master-button-reference-2#dc-master-button-reference-3#dc-master-button-reference-4#dc-master-button-reference-5, .dc-master-btn)
  :is(
    .ph-cta-icon > svg,
    .wcu-button-arrow,
    .fi-btn-arrow,
    .ind2-btn-arrow,
    .top-dev-arrow > img,
    .build-arrow-svg > img,
    .portfolio-arrow-svg,
    .mobile-link-arrow > img,
    .service-button-arrow,
    .arrow-circle > img,
    .arrow-circle > svg
  ) {
  transform-origin: center !important;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: transform;
}

@media (hover: hover) {
  html body :is(#dc-master-button-reference#dc-master-button-reference-2#dc-master-button-reference-3#dc-master-button-reference-4#dc-master-button-reference-5, .dc-master-btn):hover
    :is(
      .ph-cta-icon > svg,
      .wcu-button-arrow,
      .fi-btn-arrow,
      .ind2-btn-arrow,
      .top-dev-arrow > img,
      .build-arrow-svg > img,
      .portfolio-arrow-svg,
      .mobile-link-arrow > img,
      .service-button-arrow,
      .arrow-circle > img,
      .arrow-circle > svg
    ) {
    transform: translateY(-3px) rotate(-45deg) !important;
  }
}

html body :is(#dc-master-button-reference#dc-master-button-reference-2#dc-master-button-reference-3#dc-master-button-reference-4#dc-master-button-reference-5, .dc-master-btn):focus-visible
  :is(
    .ph-cta-icon > svg,
    .wcu-button-arrow,
    .fi-btn-arrow,
    .ind2-btn-arrow,
    .top-dev-arrow > img,
    .build-arrow-svg > img,
    .portfolio-arrow-svg,
    .mobile-link-arrow > img,
    .service-button-arrow,
    .arrow-circle > img,
    .arrow-circle > svg
  ) {
  transform: translateY(-3px) rotate(-45deg) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body :is(#dc-master-button-reference#dc-master-button-reference-2#dc-master-button-reference-3#dc-master-button-reference-4#dc-master-button-reference-5, .dc-master-btn)
    :is(
      .ph-cta-icon > svg,
      .wcu-button-arrow,
      .fi-btn-arrow,
      .ind2-btn-arrow,
      .top-dev-arrow > img,
      .build-arrow-svg > img,
      .portfolio-arrow-svg,
      .mobile-link-arrow > img,
      .service-button-arrow,
      .arrow-circle > img,
      .arrow-circle > svg
    ) {
    transition-duration: 0s !important;
  }
}

/* ========================================================================
   Service + About HERO CTA — geometry-only adjustment
   Preserve every original colour, font, height, arrow asset and hover state.
   Only make the hero CTA width fit its content cleanly on desktop.
   ======================================================================== */
@media (min-width: 769px) {
  :is(html.page-service, html.page-web-development) body .top-svg-section .top-dev-cta.dc-master-btn,
  html body.about-page .about-app-hero-scope .top-svg-section .top-dev-cta.dc-master-btn {
    width: max-content !important;
    max-width: calc(100% - 32px) !important;
    min-width: 0 !important;
  }
}

/* ========================================================================
   Service + About HERO CTA — restore the component's original height only.
   Width-fit adjustment above remains intact. No colour, font, arrow asset,
   hover styling, or non-hero button styling is changed here.
   ======================================================================== */
@media (min-width: 1024px) {
  :is(html.page-service, html.page-web-development) body .top-svg-section .top-svg-inner > .top-dev-cta.dc-master-btn,
  html body.about-page .about-app-hero-scope .top-svg-section .top-svg-inner > .top-dev-cta.dc-master-btn {
    height: clamp(52px, 4.8vw, 72px) !important;
    min-height: clamp(52px, 4.8vw, 72px) !important;
    max-height: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :is(html.page-service, html.page-web-development) body .top-svg-section .top-svg-inner > .top-dev-cta.dc-master-btn,
  html body.about-page .about-app-hero-scope .top-svg-section .top-svg-inner > .top-dev-cta.dc-master-btn {
    height: clamp(54px, 5.2vw, 62px) !important;
    min-height: 54px !important;
    max-height: none !important;
  }

  :is(html.page-service, html.page-web-development) body .top-svg-section .uploaded-mobile-svg-wrap .tablet-top-dev-cta.dc-master-btn,
  html body.about-page .about-app-hero-scope .top-svg-section .uploaded-mobile-svg-wrap .tablet-top-dev-cta.dc-master-btn {
    height: clamp(42px, 4.5vw, 46px) !important;
    min-height: 42px !important;
    max-height: none !important;
  }
}

/* ========================================================================
   Service hero mobile CTA guard
   Service page CSS files contain older conflicting rules that can re-enable
   .top-dev-cta on phones. Keep the hero pill CTA off phone layouts while
   preserving tablet/desktop CTAs and the SVG/mobile visual arrow.
   ======================================================================== */
@media (max-width: 767px) {
  html.page-service body .top-svg-section .top-dev-cta,
  html.page-service body .top-svg-section a.top-dev-cta,
  html.page-service body .top-svg-section .tablet-top-dev-cta,
  html.page-web-development body .top-svg-section .top-dev-cta,
  html.page-web-development body .top-svg-section a.top-dev-cta {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}