/* ============================================================
   CLINIQUE DIRECT — Design System CSS
   "The Clinical Concierge" — Editorial Precision
   ============================================================ */

:root {
  --cd-primary:         #b8972a;
  --cd-primary-dim:     #d4b554;
  --cd-on-primary:      #ffffff;
  --cd-secondary:       #4a5f80;
  --cd-surface:         #f9f9ff;
  --cd-surface-low:     #f0f3ff;
  --cd-surface-lowest:  #ffffff;
  --cd-on-surface:      #021c39;
  --cd-inverse-surface: #1b314f;
  --cd-gradient:        linear-gradient(135deg, #b8972a 0%, #d4b554 100%);
  --cd-shadow:          0 20px 40px rgba(2,28,57,0.06);
  --cd-shadow-card:     0 10px 30px rgba(0,0,0,0.08);
  --cd-shadow-hover:    0 20px 40px rgba(0,0,0,0.12);
  --cd-radius-md:       0.75rem;
  --cd-radius-xl:       3rem;
}

/* Global */
body.page-template-elementor_canvas {
  font-family: 'Inter', sans-serif;
  background: var(--cd-surface);
  color: var(--cd-on-surface);
  -webkit-font-smoothing: antialiased;
}

/* Hero Background Canvas */
#cd-hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.cd-hero-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(0,0,0,0.28) 0%, transparent 60%);
  pointer-events: none;
}

/* Badge */
.cd-badge {
  display: inline-block;
  padding: 0.25rem 0.875rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.30);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Buttons */
.cd-btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--cd-gradient);
  color: #fff;
  padding: 1rem 2rem;
  border-radius: var(--cd-radius-md);
  font-family: 'Manrope', sans-serif;
  font-weight: 700; font-size: 1.05rem;
  border: none; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  transition: box-shadow 0.3s, transform 0.2s;
  text-decoration: none;
}
.cd-btn-primary:hover { box-shadow: 0 14px 32px rgba(0,0,0,0.24); transform: translateY(-2px); }

.cd-btn-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: var(--cd-radius-md);
  font-family: 'Manrope', sans-serif;
  font-weight: 700; font-size: 1.05rem;
  color: #fff;
  background: rgba(0,0,0,0.10);
  border: 1px solid rgba(255,255,255,0.40);
  backdrop-filter: blur(6px);
  cursor: pointer; text-decoration: none;
  transition: background 0.3s;
}
.cd-btn-ghost:hover { background: rgba(255,255,255,0.18); }

.cd-btn-link {
  background: none; border: none;
  color: var(--cd-primary);
  font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.15em; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
  transition: text-decoration 0.2s;
}
.cd-btn-link:hover { text-decoration: underline; }

/* Service Cards */
.cd-service-card {
  background: #fff;
  border-radius: 0.5rem;
  padding: 4rem 2.5rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  min-height: 500px;
  box-shadow: var(--cd-shadow-card);
  border: 1px solid rgba(0,0,0,0.03);
  transition: transform 0.3s, box-shadow 0.3s;
}
.cd-service-card:hover { transform: translateY(-10px) !important; box-shadow: var(--cd-shadow-hover); }
.cd-service-card-1 { transform: translateY(40px); }
.cd-service-card-2 { transform: translateY(-40px); }
.cd-service-card-3 { transform: translateY(40px); }

/* Section Labels */
.cd-label-sm {
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cd-primary);
}

/* Content Cards */
.cd-card {
  background: var(--cd-surface-lowest);
  border-radius: 1.875rem; padding: 2.5rem;
  transition: box-shadow 0.3s;
}
.cd-card:hover { box-shadow: var(--cd-shadow); }
.cd-card-gold { background: var(--cd-gradient); color: #fff; border-radius: 1.875rem; padding: 2.5rem; }

/* Stats */
.cd-stats-section { background: var(--cd-inverse-surface); padding: 5rem 2rem; }
.cd-stat-number {
  font-family: 'Manrope', sans-serif;
  font-size: 3rem; font-weight: 800;
  color: var(--cd-primary); line-height: 1; margin-bottom: 0.5rem;
}
.cd-stat-label {
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* Form */
.cd-form-left {
  background: var(--cd-gradient); color: #fff;
  padding: 5rem 3rem;
  display: flex; flex-direction: column; justify-content: space-between;
}
.cd-input {
  width: 100%; box-sizing: border-box;
  background: var(--cd-surface-low); border: none;
  border-radius: var(--cd-radius-md);
  padding: 1rem 1.25rem; font-size: 0.95rem;
  color: var(--cd-on-surface); outline: none;
  font-family: 'Inter', sans-serif;
  transition: background 0.2s, box-shadow 0.2s;
}
.cd-input:focus {
  background: var(--cd-surface-lowest);
  box-shadow: 0 0 0 1px rgba(184,151,42,0.4);
}
.cd-submit-btn {
  width: 100%;
  background: var(--cd-gradient); color: #fff;
  border: none; border-radius: var(--cd-radius-md);
  padding: 1.1rem;
  font-family: 'Manrope', sans-serif; font-size: 1rem; font-weight: 700;
  cursor: pointer; box-shadow: 0 8px 24px rgba(184,151,42,0.25);
  transition: filter 0.2s;
}
.cd-submit-btn:hover { filter: brightness(1.08); }

/* Material Icons */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  font-style: normal; display: inline-block;
  line-height: 1; white-space: nowrap;
}

/* Value prop icon boxes */
.cd-value-icon {
  flex-shrink: 0; width: 3.5rem; height: 3.5rem;
  border-radius: 1rem;
  background: rgba(184,151,42,0.10);
  display: flex; align-items: center; justify-content: center;
}

/* Nav scroll effect */
.cd-nav-scrolled {
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(14px);
}

@media (max-width:768px) {
  .cd-service-card-1,.cd-service-card-2,.cd-service-card-3 { transform: none; }
}