/* ═══════════════════════════════════════════════════════════
   GLOBAL UI DESIGN — card surfaces across all sections
   Applied via body.ui-style--{id} from meta.uiStyle
   ═══════════════════════════════════════════════════════════ */

.ui-card-surface,
.stat-metric,
.cost-card,
.pillar-card,
.why-card,
.exposure-card,
.diligence-card,
.outcome-card,
.process-step-card,
.trust-card,
.service-card-3d {
  /* layout lives in presentation.css; surfaces overridden below */
}

/* ─── Shared resets for non-glass styles ─── */
.ui-style--neomorphism :is(.stat-metric, .cost-card, .pillar-card, .why-card, .exposure-card, .diligence-card, .outcome-card, .process-step-card, .trust-card, .service-card-3d),
.ui-style--skeuomorphism :is(.stat-metric, .cost-card, .pillar-card, .why-card, .exposure-card, .diligence-card, .outcome-card, .process-step-card, .trust-card, .service-card-3d),
.ui-style--claymorphism :is(.stat-metric, .cost-card, .pillar-card, .why-card, .exposure-card, .diligence-card, .outcome-card, .process-step-card, .trust-card, .service-card-3d),
.ui-style--bento :is(.stat-metric, .cost-card, .pillar-card, .why-card, .exposure-card, .diligence-card, .outcome-card, .process-step-card, .trust-card, .service-card-3d) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ui-style--neomorphism :is(.cost-card::before, .process-step-card::before, .diligence-card::before),
.ui-style--skeuomorphism :is(.cost-card::before, .process-step-card::before, .diligence-card::before),
.ui-style--claymorphism :is(.cost-card::before, .process-step-card::before, .diligence-card::before),
.ui-style--bento :is(.cost-card::before, .process-step-card::before, .diligence-card::before) {
  opacity: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   GLASSMORPHISM (default — matches current site styling)
   ═══════════════════════════════════════════════════════════ */
.ui-style--glassmorphism .why-card {
  background: color-mix(in srgb, var(--theme-bg-card) 72%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid color-mix(in srgb, var(--theme-border) 80%, transparent);
}

.ui-style--glassmorphism .why-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--theme-accent), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.ui-style--glassmorphism .why-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, var(--theme-accent-glow, rgba(201, 169, 98, 0.12)), transparent 55%);
  pointer-events: none;
  opacity: 0.65;
}

.ui-style--glassmorphism .why-card:hover,
.ui-style--glassmorphism .why-card:active {
  border-color: var(--theme-border-accent);
  background: color-mix(in srgb, var(--theme-bg-card-hover) 78%, transparent);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
}

.ui-style--glassmorphism .why-card:hover::before,
.ui-style--glassmorphism .why-card:active::before {
  opacity: 1;
}

.ui-style--glassmorphism .why-card--featured {
  background: linear-gradient(145deg, color-mix(in srgb, var(--theme-bg-card-hover) 85%, transparent), color-mix(in srgb, var(--theme-bg-card) 70%, transparent));
  border-color: var(--theme-border-accent);
  box-shadow: 0 0 24px var(--theme-accent-glow);
}

.ui-style--glassmorphism .why-card--featured .why-card-title {
  color: var(--theme-accent);
}

.ui-style--glassmorphism .exposure-card {
  background: color-mix(in srgb, var(--theme-bg-card) 72%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ui-style--glassmorphism .outcome-card {
  background: color-mix(in srgb, var(--theme-bg-card) 75%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ui-style--glassmorphism .service-card-3d {
  background: var(--theme-bg-soft, #1e293b);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ui-style--glassmorphism .service-card-body,
.ui-style--glassmorphism .service-card-peek {
  background: var(--theme-bg-soft, #1e293b) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.ui-style--glassmorphism .service-card-3d.is-active {
  box-shadow:
    0 28px 56px rgba(0, 0, 0, 0.28),
    0 0 0 1px var(--theme-border-accent);
}

/* ═══════════════════════════════════════════════════════════
   NEOMORPHISM
   ═══════════════════════════════════════════════════════════ */
.ui-style--neomorphism {
  --ui-neo-bg: var(--theme-bg-card);
  --ui-neo-shadow:
    6px 6px 14px rgba(0, 0, 0, 0.28),
    -4px -4px 12px rgba(255, 255, 255, 0.04);
  --ui-neo-shadow-hover:
    8px 8px 18px rgba(0, 0, 0, 0.32),
    -5px -5px 14px rgba(255, 255, 255, 0.05);
}

.ui-style--neomorphism :is(.stat-metric, .cost-card, .pillar-card, .why-card, .exposure-card, .diligence-card, .outcome-card, .process-step-card, .trust-card) {
  background: var(--ui-neo-bg);
  border: none !important;
  box-shadow: var(--ui-neo-shadow);
}

.ui-style--neomorphism .service-card-3d {
  border: none !important;
  box-shadow: var(--ui-neo-shadow);
}

.ui-style--neomorphism .service-card-body {
  background: var(--theme-bg-soft, #1e293b) !important;
  backdrop-filter: none;
}

.ui-style--neomorphism .service-card-3d.is-peek {
  box-shadow: var(--ui-neo-shadow);
}

.ui-style--neomorphism .service-card-peek {
  background: var(--ui-neo-bg);
  border-bottom-color: transparent;
}

.ui-style--neomorphism :is(.stat-metric, .cost-card, .pillar-card, .why-card, .exposure-card, .diligence-card, .outcome-card, .process-step-card, .trust-card):hover {
  transform: translateY(-2px);
  box-shadow: var(--ui-neo-shadow-hover);
}

.ui-style--neomorphism :is(.stat-metric, .cost-card, .pillar-card, .why-card, .exposure-card, .diligence-card, .outcome-card, .process-step-card, .trust-card):active {
  box-shadow:
    inset 4px 4px 10px rgba(0, 0, 0, 0.22),
    inset -3px -3px 8px rgba(255, 255, 255, 0.03);
  transform: translateY(0);
}

.ui-style--neomorphism .why-card--featured .why-card-title {
  color: var(--theme-accent);
}

/* ═══════════════════════════════════════════════════════════
   SKEUOMORPHISM
   ═══════════════════════════════════════════════════════════ */
.ui-style--skeuomorphism :is(.stat-metric, .cost-card, .pillar-card, .why-card, .exposure-card, .diligence-card, .outcome-card, .process-step-card, .trust-card) {
  border: 1px solid color-mix(in srgb, var(--theme-accent) 35%, #1a1208) !important;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--theme-bg-card-hover) 90%, #3d2914) 0%,
    color-mix(in srgb, var(--theme-bg-card) 95%, #1c140c) 48%,
    color-mix(in srgb, var(--theme-bg-card) 80%, #0a0704) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 4px rgba(0, 0, 0, 0.35),
    0 6px 14px rgba(0, 0, 0, 0.35);
}

.ui-style--skeuomorphism .service-card-3d {
  border: 1px solid color-mix(in srgb, var(--theme-accent) 35%, #1a1208) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 20px rgba(0, 0, 0, 0.38);
}

.ui-style--skeuomorphism .service-card-body {
  background: color-mix(in srgb, var(--theme-bg-soft, #1e293b) 92%, #1c140c) !important;
  backdrop-filter: none;
}

.ui-style--skeuomorphism :is(.pillar-title, .why-card-title, .trust-title, .diligence-card-title, .process-step-title, .cost-card-text, .outcome-text) {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.ui-style--skeuomorphism :is(.stat-metric, .cost-card, .pillar-card, .why-card, .exposure-card, .diligence-card, .outcome-card, .process-step-card, .trust-card):hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 4px rgba(0, 0, 0, 0.3),
    0 10px 22px rgba(0, 0, 0, 0.42);
}

.ui-style--skeuomorphism .why-card--featured {
  border-color: color-mix(in srgb, var(--theme-accent) 55%, #5c4018) !important;
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--theme-accent) 22%, var(--theme-bg-card-hover)) 0%,
    color-mix(in srgb, var(--theme-bg-card) 90%, #2a1c0e) 100%
  );
}

/* ═══════════════════════════════════════════════════════════
   CLAYMORPHISM
   ═══════════════════════════════════════════════════════════ */
.ui-style--claymorphism .page-wrap {
  position: relative;
}

.ui-style--claymorphism .page-wrap::before,
.ui-style--claymorphism .page-wrap::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}

.ui-style--claymorphism .page-wrap::before {
  width: 280px;
  height: 280px;
  top: 18%;
  right: -6%;
  background: var(--theme-accent);
}

.ui-style--claymorphism .page-wrap::after {
  width: 240px;
  height: 240px;
  bottom: 12%;
  left: -8%;
  background: var(--theme-orb-2, rgba(99, 102, 241, 0.55));
}

.ui-style--claymorphism :is(.stat-metric, .cost-card, .pillar-card, .why-card, .exposure-card, .diligence-card, .outcome-card, .process-step-card, .trust-card) {
  border: 2px solid color-mix(in srgb, #fff 12%, transparent) !important;
  border-radius: clamp(18px, 4vw, 26px);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--theme-accent) 18%, var(--theme-bg-card-hover)),
    color-mix(in srgb, var(--theme-bg-card) 92%, var(--theme-accent) 8%)
  );
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.18),
    inset 0 2px 8px rgba(255, 255, 255, 0.12),
    inset 0 -4px 10px rgba(0, 0, 0, 0.08);
}

.ui-style--claymorphism .service-card-3d {
  border: 2px solid color-mix(in srgb, #fff 12%, transparent) !important;
  border-radius: clamp(20px, 4vw, 28px);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.2),
    inset 0 2px 8px rgba(255, 255, 255, 0.1);
}

.ui-style--claymorphism .service-card-body {
  background: var(--theme-bg-soft, #1e293b) !important;
  backdrop-filter: none;
}

.ui-style--claymorphism .service-card-peek {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--theme-accent) 20%, var(--theme-bg-card-hover)),
    var(--theme-bg-card)
  );
  border-bottom: none;
}

.ui-style--bento .service-card-body {
  background: var(--theme-bg-soft, #1e293b) !important;
}
  border-color: var(--theme-border-accent);
}

.ui-style--bento .service-card-3d.is-peek .service-card-peek {
  display: flex;
  border-radius: 0;
}

@media (min-width: 769px) {
  .ui-style--bento .service-card-3d.is-peek .service-card-peek {
    display: none;
  }
}

.ui-style--claymorphism :is(.stat-metric, .cost-card, .pillar-card, .why-card, .exposure-card, .diligence-card, .outcome-card, .process-step-card, .trust-card):hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    inset 0 3px 10px rgba(255, 255, 255, 0.16),
    inset 0 -4px 10px rgba(0, 0, 0, 0.06);
}

.ui-style--claymorphism .why-card--featured .why-card-title {
  color: var(--theme-accent);
}

/* ═══════════════════════════════════════════════════════════
   BENTO GRID — asymmetric tile spans per section
   ═══════════════════════════════════════════════════════════ */
.ui-style--bento :is(.why-grid, .cost-grid, .diligence-grid, .process-grid, .stats-metrics, .pillars-grid, .exposure-grid, .trust-grid) {
  grid-auto-flow: dense;
}

.ui-style--bento .why-grid {
  gap: 0.55rem;
}

.ui-style--bento .why-card {
  background: var(--theme-bg-card);
  border: 1px solid var(--theme-border);
  border-radius: 16px;
  min-height: 72px;
}

.ui-style--bento .why-card--featured:first-child {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 148px;
  padding: 0.85rem 0.75rem;
  background: linear-gradient(145deg, var(--theme-bg-card-hover), var(--theme-bg-card));
  border-color: var(--theme-border-accent);
}

.ui-style--bento .why-card--featured:last-child {
  grid-column: span 2;
  min-height: 88px;
  background: linear-gradient(135deg, var(--theme-bg-card), var(--theme-bg-card-hover));
  border-color: var(--theme-border-accent);
}

.ui-style--bento .why-card--featured .why-card-title {
  color: var(--theme-accent);
}

.ui-style--bento .why-card--featured:first-child .why-card-title {
  font-size: clamp(1rem, 3.5vw, 1.35rem);
}

.ui-style--bento .diligence-card:first-child {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 168px;
}

.ui-style--bento .process-step-card:first-child {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 168px;
}

.ui-style--bento .stat-metric:nth-child(2) {
  grid-column: span 2;
}

.ui-style--bento .pillar-card:first-child {
  grid-column: span 1;
}

.ui-style--bento .exposure-card:first-child {
  grid-column: span 2;
  min-height: 88px;
}

.ui-style--bento .trust-card:first-child {
  grid-column: span 1;
}

.ui-style--bento :is(.why-card, .cost-card, .exposure-card, .diligence-card, .process-step-card, .stat-metric, .pillar-card, .outcome-card, .trust-card):hover {
  transform: scale(1.02);
  border-color: var(--theme-border-accent);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

@media (min-width: 768px) {
  .ui-style--bento .why-card--featured:first-child {
    min-height: 210px;
  }

  .ui-style--bento .diligence-card:first-child,
  .ui-style--bento .process-step-card:first-child {
    min-height: 220px;
  }

  .ui-style--bento .pillar-card:first-child {
    grid-column: span 2;
  }

  .ui-style--bento .trust-card:first-child {
    grid-column: span 2;
  }

  .ui-style--bento .process-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .ui-style--bento .process-step-card:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
}

@media (min-width: 1024px) {
  .ui-style--bento .why-card--featured:first-child {
    min-height: 236px;
  }
}