/* =========================================================
   Consultation page styles — depends on styles.css being loaded first.
   ========================================================= */

/* ---------- Full-viewport hero / form section ---------- */
.consultation-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(120px, 14vw, 180px) clamp(20px, 5vw, 80px) clamp(64px, 8vw, 96px);

  /* ===== BACKGROUND ===========================================
     Final macro/zoomed-in product image, full-bleed.
     To swap later, just update the url() below. */
  background-image: image-set(
    url("assets/images/consultation-bg.webp") type("image/webp"),
    url("assets/images/consultation-bg.jpg") type("image/jpeg")
  );
  background-repeat: no-repeat;
  background-size: cover;          /* fill both dimensions — no tan bars */
  background-position: 42% center; /* shift slightly left so bubbles flank the form */
  background-color: #f0d9b3;       /* warm amber fallback while the image loads */
}

/* Subtle warm overlay so the form card stays readable on the lighter parts of the image
   without darkening the warm amber/white scientific look. */
.consultation-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(45, 30, 15, 0.18) 0%, rgba(45, 30, 15, 0.06) 50%, rgba(45, 30, 15, 0) 100%);
  pointer-events: none;
}

/* ---------- Glass form card ---------- */
.consultation-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 600px;
  margin-left: clamp(0px, 6vw, 80px);
  padding: clamp(24px, 3vw, 36px);
  border-radius: 24px;

  /* Liquid-glass surface — tuned for the warm amber bg */
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 24px 60px rgba(80, 50, 20, 0.22);
}

.consultation-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: rgba(29, 40, 54, 0.7);
  margin-bottom: 8px;
}

.consultation-title {
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  color: var(--color-navy);
  margin-bottom: 8px;
}

.consultation-intro {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(29, 40, 54, 0.82);
  margin-bottom: 20px;
  max-width: 50ch;
}

/* ---------- Form ---------- */
.consultation-form {
  display: grid;
  gap: 10px;
}

.consultation-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(29, 40, 54, 0.72);
}

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-navy);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(29, 40, 54, 0.18);
  border-radius: 10px;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(29, 40, 54, 0.45);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: rgba(29, 40, 54, 0.55);
  background: rgba(255, 255, 255, 0.75);
}
.field textarea {
  resize: vertical;
  min-height: 64px;
}

/* Submit button — full width, brand green */
.consultation-form .btn--primary {
  width: 100%;
  padding: 14px 24px;
  margin-top: 4px;
}

/* Reassurance + contact block */
.consultation-reassure {
  text-align: center;
  font-size: 13px;
  color: rgba(29, 40, 54, 0.65);
  margin-top: 6px;
}

.consultation-contact {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(29, 40, 54, 0.18);
  text-align: center;
  color: rgba(29, 40, 54, 0.85);
  font-size: 14px;
  line-height: 1.6;
}
.consultation-contact strong {
  display: block;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(29, 40, 54, 0.65);
  margin-bottom: 8px;
}
.consultation-contact a {
  color: var(--color-navy);
  text-decoration: none;
  border-bottom: 1px solid rgba(29, 40, 54, 0.35);
  transition: border-color 0.2s ease;
}
.consultation-contact a:hover {
  border-color: var(--color-navy);
}

/* ---------- Page-scoped: consultation header divider ---------- */
.page-consultation .site-header:not(.is-scrolled) .site-nav__list a,
.page-consultation .site-header:not(.is-scrolled) .btn--outline {
  color: var(--color-navy);
}
.page-consultation .site-header:not(.is-scrolled) .btn--outline {
  border-color: rgba(29, 40, 54, 0.45);
}
.page-consultation .site-header:not(.is-scrolled) .btn--outline:hover {
  background: rgba(29, 40, 54, 0.08);
}
.page-consultation .site-header:not(.is-scrolled) .nav-toggle span {
  background: var(--color-navy);
}
.page-consultation .site-header:not(.is-scrolled)::after {
  background: rgba(29, 40, 54, 0.25);
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .consultation-card {
    margin-inline: auto;        /* center on tablet */
  }
}

@media (max-width: 767px) {
  .consultation-hero {
    padding-top: clamp(96px, 22vw, 140px);
  }
  .consultation-form__row {
    grid-template-columns: 1fr; /* stack first/last name on mobile */
  }
  .consultation-card {
    margin-inline: auto;
    border-radius: 18px;
  }
}