/* ================================================================
   DESIGN SYSTEM: Shared corner geometry
   Every rectangular card and animated square uses one corner radius.
   Circular controls, pills, navigation and device mockups are excluded.
   ================================================================ */

:root {
  --df-card-radius: 28px;
}

/* Opening animation */
.story-orb {
  border-radius: var(--df-card-radius) !important;
}

/* Editorial, service and vision cards */
.about-card,
.service-detail-card,
.vision-card,
.process-grid article {
  border-radius: var(--df-card-radius) !important;
}

/* Portfolio cards and the in-section case-study viewer */
.work-card,
.case-viewer-panel,
.project-card,
.project-panel {
  border-radius: var(--df-card-radius) !important;
}

.case-viewer-panel {
  clip-path: inset(0 0 100% 0 round var(--df-card-radius)) !important;
}

.case-viewer.is-open .case-viewer-panel {
  clip-path: inset(0 0 0 0 round var(--df-card-radius)) !important;
}

/* Conversion and contact surfaces */
.mid-project-cta,
.contact-method,
.contact-card,
.contact-option,
.terminal-box,
.proposal-drop,
.proposal-file,
.brief-option,
.brief-field input,
.brief-field textarea {
  border-radius: var(--df-card-radius) !important;
}

/* DIY and supporting product cards */
.browser-card,
.template-card,
.custom-card,
.industry-card,
.service-card,
.split-panel,
.left-panel,
.right-panel {
  border-radius: var(--df-card-radius) !important;
}