/* House of Salons — bridal atelier layer over Tailwind CDN.
   Porcelain / deep plum / rose clay / champagne. Marcellus + Karla. */

body {
  font-family: "Karla", -apple-system, sans-serif;
  font-weight: 300;
  background: #faf6f2;
  color: #3d2231;
}
.font-display { font-family: "Marcellus", Georgia, serif !important; font-weight: 400; }

[hidden] { display: none !important; }

/* hairlines */
.hairline { border-color: rgba(217, 191, 162, 0.55) !important; }
.hairline-t { border-top: 1px solid rgba(217, 191, 162, 0.55); }
.hairline-b { border-bottom: 1px solid rgba(217, 191, 162, 0.55); }

/* buttons */
.btn-solid {
  display: inline-block; text-align: center;
  background: #3d2231; color: #faf6f2;
  border-radius: 9999px; padding: 0.8rem 2.2rem;
  font-weight: 600; font-size: 0.92rem; letter-spacing: 0.04em;
  transition: background 0.2s, transform 0.15s;
}
.btn-solid:hover { background: #c98a7d; color: #3d2231; transform: translateY(-1px); }
.btn-solid:disabled { opacity: 0.55; cursor: wait; transform: none; }
.btn-ghost {
  display: inline-block; text-align: center;
  border: 1px solid #c98a7d; color: #3d2231;
  border-radius: 9999px; padding: 0.55rem 1.5rem;
  font-weight: 600; font-size: 0.9rem;
  transition: all 0.18s;
}
.btn-ghost:hover { background: #c98a7d; color: #faf6f2; }

/* eyebrow */
.eyebrow {
  font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: #c98a7d; font-weight: 700;
}

/* form fields */
.field {
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(217, 191, 162, 0.7);
  border-radius: 0.65rem;
  padding: 0.72rem 0.95rem;
  color: #3d2231;
  font-weight: 400;
}
.field::placeholder { color: rgba(61, 34, 49, 0.4); }
.field:focus { outline: 2px solid #c98a7d; outline-offset: 1px; border-color: transparent; }
label.lbl { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #7a5568; margin-bottom: 0.35rem; }

/* duotone-warm imagery */
.duo { position: relative; overflow: hidden; }
.duo img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.18) saturate(0.9) contrast(0.98); }
.duo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(201, 138, 125, 0.14), rgba(61, 34, 49, 0.10));
  pointer-events: none;
}

/* time slot buttons */
.slot {
  border: 1px solid rgba(217, 191, 162, 0.8); border-radius: 0.55rem;
  padding: 0.55rem 0; font-size: 0.9rem; font-weight: 600; color: #3d2231;
  background: #fff; transition: all 0.15s; width: 100%;
}
.slot:hover { border-color: #c98a7d; background: #fdf1ec; }
.slot.on { background: #3d2231; color: #faf6f2; border-color: #3d2231; }

/* process timeline */
.steps { counter-reset: step; }
.step { position: relative; padding-left: 4rem; padding-bottom: 2.5rem; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -0.2rem;
  font-family: "Marcellus", serif; font-size: 1.6rem; color: #c98a7d;
}
.step::after {
  content: ""; position: absolute; left: 1.15rem; top: 2rem; bottom: 0.4rem;
  width: 1px; background: rgba(217, 191, 162, 0.7);
}
.step:last-child::after { display: none; }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.in { opacity: 1; transform: none; }

/* collapse chevron */
.chev { transition: transform 0.25s; }
[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* soft glow accents */
.blush {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(201, 138, 125, 0.16), transparent 68%);
  filter: blur(30px);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}