/* ════════════════════════════════════════════════════
   coaching.css — 1:1 Coaching section + enquiry form
   Edit this file to change: step layout, form field
   styling, AI response card, spin animation
════════════════════════════════════════════════════ */

/* ── Two-column layout ───────────────────────────── */
.coaching-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:         88px;
  align-items: flex-start;
  margin-top:  68px;
}

/* ── Process steps ───────────────────────────────── */
.steps { margin-top: 36px; }

.step {
  display:  flex;
  gap:      22px;
  padding:  24px 0;
  border-bottom: 1px solid var(--border);
}
.step:last-child { border-bottom: none; }

.step-n {
  font-size:      11px;
  color:          var(--sage);
  font-family:    'DM Mono', monospace;
  letter-spacing: 0.1em;
  flex-shrink:    0;
  margin-top:     4px;
}

.step-c h4 {
  font-family: 'Fraunces', serif;
  font-size:   18px;
  font-weight: 400;
  color:       var(--text);
  margin-bottom: 6px;
}
.step-c p {
  font-size:   14px;
  color:       var(--text-muted);
  line-height: 1.72;
}

/* ── Enquiry form card ───────────────────────────── */
.cform {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--r);
  overflow:      hidden;
  box-shadow:    var(--shadow-md);
}

.cform-head {
  padding:    28px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sage);
}
.cform-head h3 {
  font-family: 'Fraunces', serif;
  font-size:   20px;
  font-weight: 400;
  color:       var(--text);
}
.cform-head p {
  font-size:   12px;
  color:       var(--text-muted);
  margin-top:  4px;
  font-family: 'Geist', monospace;
}

.cform-body { padding: 32px; }

/* Form fields */
.field { margin-bottom: 20px; }

.field label {
  display:        block;
  font-size:      10px;
  color:          var(--sage);
  font-family:    'DM Mono', monospace;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom:  8px;
}

.field input,
.field textarea {
  width:       100%;
  background:  var(--bg);
  border:      1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding:     14px 16px;
  color:       var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size:   15px;
  outline:     none;
  transition:
    border-color 0.2s,
    background   0.2s;
  resize: none;
}
.field input:focus,
.field textarea:focus {
  border-color: var(--sage);
  background:   #fff;
}
.field input::placeholder,
.field textarea::placeholder {
  color:      var(--text-light);
  font-style: italic;
}

/* ── AI response card ────────────────────────────── */
.ai-resp-box {
  margin-top:    20px;
  background:    linear-gradient(135deg, rgba(90,148,112,0.08), rgba(192,120,96,0.05));
  border:        1px solid var(--border-sage);
  border-radius: var(--r-sm);
  padding:       24px;
  font-size:     14px;
  color:         var(--text-muted);
  line-height:   1.85;
}

.ai-lbl {
  font-size:      9px;
  color:          var(--sage);
  font-family:    'DM Mono', monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom:  12px;
}

/* Loading spinner */
.spin {
  display:       inline-block;
  width:         14px;
  height:        14px;
  border:        2px solid rgba(90, 148, 112, 0.3);
  border-top-color: var(--sage);
  border-radius: 50%;
  animation:     spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right:  8px;
}