/* DeepCiphers / Module 3: card surfaces only.
   Keep content, type, foreground colours, layout, padding and motion intact.
   Intentional connected, transparent and sculpted compositions retain
   their own shapes; shared tokens control their borders and depth. */
@layer dc-cards {
  :root {
    --dc-card-line: #909090;
    --dc-card-line-strong: #000;
    --dc-card-line-muted: #909090;
    --dc-card-line-dark: rgb(255 255 255 / .24);
    --dc-card-line-active: rgb(38 208 106 / .65);
    --dc-card-radius-small: 28px;
    --dc-card-radius: 28px;
    --dc-card-radius-large: 28px;
    --dc-card-radius-panel: 28px;
    --dc-card-radius-offset: 28px;
    --dc-card-shadow-soft: none;
    --dc-card-shadow-raised: none;
    --dc-card-shadow-hover: none;
    --dc-card-shadow-dark: 0 8px 24px rgb(7 21 34 / .16);
    --dc-card-shadow-offset: none;
  }

  /* Outlines keep their existing widths and open/connected edges. */
  :where(.dc-home-service-card, .service-card, .tech-card, .model-card,
    .trust-card, .mv-card, .stats-card, .benefit-card, .job-card,
    .culture-card, .next-card, .pp-value-card, .statement, .stat,
    .career-detail-card, .aiAppsCaseCard, .testimonialCard,
    .whoConnectedGroupSingleImage, .whoConnectedGroupSingleImage .whoCard,
    .costConnectedGroup, .portrait-wrap) {
    border-color: var(--dc-card-line) !important;
  }
  :where(.dc-home-service-card, .service-card, .trust-card, .mv-card,
    .stats-card, .benefit-card, .culture-card, .statement,
    .career-detail-card, .aiAppsCaseCard, .pp-value-card, .portrait-wrap) {
    box-shadow: var(--dc-card-shadow-soft) !important;
  }
  :where(.dc-home-service-card, .service-card, .trust-card, .mv-card,
    .benefit-card, .culture-card, .career-detail-card, .aiAppsCaseCard,
    .pp-value-card) {
    border-radius: var(--dc-card-radius-large) !important;
  }
  :where(.job-card, .stat) { border-radius: var(--dc-card-radius-small) !important; }
  :where(.stats-card, .next-card, .testimonialCard) {
    border-radius: var(--dc-card-radius) !important;
  }
  :where(.statement) { border-radius: var(--dc-card-radius-large) !important; }

  /* Standalone service and pricing cards follow the full rounded reference edge. */
  .tech-card {
    border-radius: var(--dc-card-radius-panel) !important;
    box-shadow: none !important;
  }
  .model-card {
    border-radius: var(--dc-card-radius-panel) !important;
    box-shadow: none !important;
  }
  .project-card { box-shadow: var(--dc-card-shadow-raised) !important; }
  .value-card { border-color: var(--dc-card-line-active) !important; }

  /* Large panels remain composed surfaces rather than separate boxed cards. */
  :where(.whoConnectedGroupSingleImage, .costConnectedGroup, .cta-card,
    .intrapreneurship-card, .cob-card) {
    border-radius: var(--dc-card-radius-panel) !important;
    box-shadow: var(--dc-card-shadow-raised) !important;
  }
  .whoConnectedGroupSingleImage .whoCard {
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .intrapreneurship-card { border-radius: var(--dc-card-radius-large) !important; }

  /* Use flat reference outlines on Home projects and process steps. */
  [data-dc-card='offset'] {
    border-color: var(--dc-card-line) !important;
    border-radius: var(--dc-card-radius-offset) !important;
    box-shadow: var(--dc-card-shadow-offset) !important;
  }
  #process [data-active='true'] [data-dc-card='offset'] {
    border-color: #000 !important;
  }

  [data-dc-card='dark'] {
    border-color: var(--dc-card-line-dark) !important;
    border-radius: var(--dc-card-radius) !important;
    box-shadow: none !important;
  }
  [data-dc-card='dark'][aria-current='step'] {
    border-color: var(--dc-card-line-active) !important;
    box-shadow: var(--dc-card-shadow-dark) !important;
  }
  .ns-card {
    box-shadow: inset 0 0 0 1px var(--dc-card-line-dark), var(--dc-card-shadow-dark) !important;
  }
  .ns-card.is-active {
    box-shadow: inset 0 0 0 1px var(--dc-card-line-active), var(--dc-card-shadow-dark) !important;
  }

  /* Portfolio stays transparent. Only the existing mockup stage is framed. */
  .portfolio-page :where(.case-image) {
    border-color: var(--dc-card-line) !important;
    border-radius: var(--dc-card-radius-large) !important;
    box-shadow: var(--dc-card-shadow-soft) !important;
  }
  .portfolio-page .case-card-main-link {
    border-radius: var(--dc-card-radius-large) var(--dc-card-radius-large) 4px 4px !important;
  }

  /* Existing active states remain distinct; no control styling is changed. */
  :where(.job-card.open, .model-card.active, .model-card.is-hovered) {
    border-color: var(--dc-card-line-strong) !important;
  }
  .job-card.open { box-shadow: var(--dc-card-shadow-soft) !important; }
  .dc-home-service-card:focus-visible {
    box-shadow: inset 0 0 0 3px var(--pill), var(--dc-card-shadow-soft) !important;
  }
  :where(.app-service-featured-card.service-card, .faster-devops-card-exact.service-card,
    .cipher-card.is-discovered .portrait-wrap) {
    border-color: var(--dc-card-line-active) !important;
  }
  @media (hover: hover) and (pointer: fine) {
    :where(.dc-home-service-card, .service-card, .trust-card, .mv-card,
      .benefit-card, .pp-value-card, .portrait-wrap):hover {
      border-color: var(--dc-card-line-active) !important;
      box-shadow: var(--dc-card-shadow-hover) !important;
    }
    :where(.tech-card, .model-card):hover { border-color: var(--dc-card-line-strong) !important; }
    .job-card:hover { border-color: var(--dc-card-line-active) !important; }
    .team-card:is(:hover, :focus-within) .portrait-wrap {
      border-color: var(--dc-card-line-active) !important;
      box-shadow: var(--dc-card-shadow-hover) !important;
    }
    [data-dc-card='dark']:hover { border-color: var(--dc-card-line-active) !important; }
    .portfolio-page .case-card:is(:hover, :focus-within) .case-image {
      border-color: var(--dc-card-line-active) !important;
      box-shadow: var(--dc-card-shadow-raised) !important;
    }
  }

  @media (max-width: 700px) {
    :root {
      --dc-card-radius: 28px;
      --dc-card-radius-large: 28px;
      --dc-card-radius-panel: 28px;
      --dc-card-radius-offset: 28px;
      --dc-card-shadow-offset: none;
    }
  }
}

/* Reference edge treatments only. No sizing, spacing, display or motion overrides. */
@layer dc-cards {
  .model-card { border: 1px solid #000 !important; }
  /* Inset ink completes formerly open technology edges without adding layout pixels. */
  .tech-card {
    border-color: #000 !important;
    outline: 1px solid #000 !important;
    outline-offset: -1px !important;
  }
  :where(.dc-home-service-card, .portfolio-page .case-image) { border-color: #000 !important; }
  :where(.trust-card, .benefit-card, .mv-card, .culture-card, .pp-value-card,
    [data-dc-card='offset']) { border: 1px solid #909090 !important; }
  :where(.aiAppsCaseCard, .testimonialCard, .aiAppsTestimonialCard,
    .beforeAfterCtaCard, .webCaseStudiesPanel, .insightsCtaPanel,
    .industryImageWrap, .postLaunchImageWrap, .insightsImageWrap,
    .testimonialImageWrap, .webCaseStudiesImageWrap, .aiAppsProjectImageWrap,
    .featuredCaseStudyRefCard) {
    border-radius: 28px !important;
  }
  :where(.aiAppsCaseCard, .testimonialCard, .aiAppsTestimonialCard,
    .beforeAfterCtaCard, .webCaseStudiesPanel) { box-shadow: none !important; }
  .beforeAfterCtaCard { border: 1px solid #000 !important; }
  :where(.insightsReadMore, .aiAppsCaseBtn, .secondaryBtn:not(.hero *)) {
    border-color: #000 !important;
  }
  :where(.insightsReadMore, .aiAppsCaseBtn) { background: transparent !important; }
}

@layer dc-cards {
  /* Existing case-study copy panels and Partnership closing shell. */
  :where(.overview-copy, .problem-copy, .solution-copy,
    .pp-closing-panel) {
    border-color: #909090 !important;
    border-radius: 28px !important;
  }
  .costConnectedGroup { border-color: var(--accent-soft, #CAFCE5) !important; }
}

/* Complete the remaining existing Home panel corners without layout changes. */
@layer dc-cards {
  :where(.aiSignalPanel, .finalCtaCard) {
    border-radius: var(--dc-card-radius-panel) !important;
  }
  /* Preserve the joined active-tab shape at the top of the engagement panel. */
  .industryPanel {
    border-bottom-left-radius: var(--dc-card-radius-panel) !important;
    border-bottom-right-radius: var(--dc-card-radius-panel) !important;
  }
}

/* Restore the original mint backing on offset cards. The shared wash stays
   inside the other card surfaces, so card geometry and image fills stay intact. */
@property --dc-card-wash {
  syntax: '<number>';
  inherits: false;
  initial-value: .06;
}
@layer dc-cards {
  :root {
    --dc-card-backing: #97E1B3;
    --dc-card-offset: 12px;
  }
  [data-dc-card='offset'] {
    box-shadow: var(--dc-card-offset) var(--dc-card-offset) 0 var(--dc-card-backing),
      inset 0 -40px 48px -32px rgb(87 217 125 / var(--dc-card-wash, .06)) !important;
    transition-property: border-color, box-shadow, transform, background-color;
  }
  :is(.dc-home-service-card, .service-card, .tech-card, .model-card,
    .trust-card, .mv-card, .stats-card, .benefit-card, .job-card,
    .pp-value-card, .career-detail-card, .overview-copy,
    .problem-copy, .solution-copy) {
    box-shadow: inset 0 -40px 48px -32px rgb(87 217 125 / var(--dc-card-wash, .06)) !important;
    transition-property: border-color, background-color, box-shadow, transform;
    transition-duration: .35s;
    transition-timing-function: ease;
  }
  .dc-home-service-card:focus-visible {
    box-shadow: inset 0 0 0 3px var(--pill),
      inset 0 -40px 48px -32px rgb(87 217 125 / .18) !important;
  }
  :is(.dc-home-service-card, .service-card, .tech-card, .model-card,
    .trust-card, .mv-card, .stats-card, .benefit-card, .job-card,
    .pp-value-card, .career-detail-card, .overview-copy,
    .problem-copy, .solution-copy):focus-within {
    --dc-card-wash: .18;
  }
  @media (hover: hover) and (pointer: fine) {
    :is(.dc-home-service-card, .service-card, .tech-card, .model-card,
      .trust-card, .mv-card, .stats-card, .benefit-card, .job-card,
      .pp-value-card, .career-detail-card, .overview-copy,
      .problem-copy, .solution-copy):hover {
      --dc-card-wash: .18;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    #process [data-active='true'] [data-dc-card='offset'],
    [data-dc-card='offset']:focus-within {
      animation: dc-card-background-breathe 8s ease-in-out infinite alternate;
    }
    @media (hover: hover) and (pointer: fine) {
      :is(.dc-home-service-card, .service-card, .tech-card, .model-card,
        .trust-card, .mv-card, .stats-card, .benefit-card, .job-card,
        .pp-value-card, .career-detail-card, .overview-copy,
        .problem-copy, .solution-copy):hover {
        animation: dc-card-background-breathe 8s ease-in-out infinite alternate;
      }
    }
  }
  @keyframes dc-card-background-breathe {
    from { --dc-card-wash: .08; }
    to { --dc-card-wash: .20; }
  }
  @media (max-width: 700px) {
    :root { --dc-card-offset: 10px; }
  }
  @media (prefers-reduced-motion: reduce) {
    :is([data-dc-card='offset'], .dc-home-service-card, .service-card,
      .tech-card, .model-card, .trust-card, .mv-card, .stats-card,
      .benefit-card, .job-card, .pp-value-card, .career-detail-card,
      .overview-copy, .problem-copy, .solution-copy) {
      animation: none !important;
      transition: none !important;
    }
  }
}