/* Offerings page specific layout */

.page-offerings .hero .hero-content { padding-top: 18vh; padding-bottom: 8vh; }

.services-detail .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-24) var(--space-6);
}

.services-intro { text-align: center; max-width: 900px; margin: 0 auto var(--space-20); }

.service-detail {
  border: 1px solid rgba(240,231,216,0.18);
  border-radius: var(--space-4);
  /* increased frost/glass */
  background: linear-gradient(135deg, rgba(240,231,216,0.08), rgba(240,231,216,0.03));
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  padding: var(--space-12);
  margin-bottom: var(--space-10);
  box-shadow: 0 10px 30px -12px rgba(240,231,216,0.15), inset 0 1px 0 rgba(255,255,255,0.05);
}

.service-detail:hover {
  background: linear-gradient(135deg, rgba(240,231,216,0.1), rgba(240,231,216,0.04));
  border-color: rgba(240,231,216,0.24);
}

.service-head { margin-bottom: var(--space-6); }
.service-name { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 300; color: var(--accent); letter-spacing: -0.02em; }
.service-blurb { color: rgba(245,240,232,0.85); margin-top: var(--space-2); }
.service-meta { color: var(--text-tertiary); margin-top: var(--space-2); font-size: var(--text-sm); letter-spacing: 0.06em; text-transform: uppercase; }

.service-body { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-10); }
.service-body h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; margin-bottom: var(--space-4); }

.deliverables ul { list-style: none; padding: 0; margin: 0; }
.deliverables li { padding: var(--space-2) 0; color: var(--text-secondary); }

.process-steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: var(--space-4); padding: 0; margin: 0; }
.process-steps li { position: relative; padding: var(--space-4); border: 1px dashed rgba(240,231,216,0.18); border-radius: var(--space-2); background: rgba(240,231,216,0.03); }
.process-steps li span { display: block; font-family: var(--font-display); color: var(--accent); font-size: var(--text-base); letter-spacing: -0.01em; }
.process-steps li em { display: block; color: var(--text-secondary); font-style: normal; font-size: var(--text-sm); margin-top: 4px; }

@media (max-width: 900px) {
  .service-body { grid-template-columns: 1fr; }
}