/* =====================================================
   CONTACT PAGE — Full Layout
===================================================== */
.contact-page {
  padding-block: var(--space-10); /* was clamp(5rem, 10vw, 8rem) */
}

.contact-page__inner {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: var(--space-8);  /* was clamp(3rem, 6vw, 6rem) */
  align-items: start;
}

/* Left column */
.contact-page__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-4); /* was 2rem */
}

.contact-page__intro {
  font-size: var(--text-base);  /* was 1.0625rem */
  line-height: 1.8;
  color: var(--color-muted);
}

.contact-page__intro strong {
  color: var(--color-ink);
}

/* Detail items */
.contact-page__details {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-border);
}

.contact-page__detail {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);                     /* was 1rem */
  padding: var(--space-2) var(--space-3);  /* was 1.25rem 1.5rem */
  border-bottom: 1px solid var(--color-border);
}

.contact-page__detail:last-child {
  border-bottom: none;
}

.contact-page__detail-icon {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  display: grid;
  place-items: center;
  color: var(--color-accent); /* 10% interactive role */
  flex-shrink: 0;
  margin-top: var(--space-1); /* was 0.1rem */
}

.contact-page__detail-icon svg {
  width: 14px;
  height: 14px;
}

.contact-page__detail-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1); /* was 0.2rem */
}

.contact-page__detail-label {
  font-size: var(--text-sm);          /* was 0.5625rem */
  font-weight: var(--weight-regular); /* was 500 */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.contact-page__detail-value {
  font-size: var(--text-base); /* was 0.9375rem */
  color: var(--color-ink);
}

.contact-page__detail-value a {
  color: var(--color-accent); /* 10% interactive role */
  transition: opacity var(--transition-base);
}

.contact-page__detail-value a:hover {
  opacity: 0.75;
}

/* Guarantee box */
.contact-page__guarantee {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);                     /* was 0.875rem */
  padding: var(--space-2) var(--space-3);  /* was 1.25rem 1.5rem */
  background-color: var(--color-secondary); /* was var(--color-surface); 30% role */
  border: 1px solid var(--color-border);
}

.contact-page__guarantee-dot {
  width: 6px;
  height: 6px;
  background: var(--color-accent); /* 10% interactive role */
  flex-shrink: 0;
  margin-top: var(--space-1); /* was 0.45rem */
}

.contact-page__guarantee-text {
  font-size: var(--text-sm);  /* was 0.875rem — exact match */
  line-height: 1.6;
  color: var(--color-muted);
}

.contact-page__guarantee-text strong {
  display: block;
  color: var(--color-ink);
  margin-bottom: var(--space-1); /* was 0.25rem */
}

/* Right column — Form */
.contact-page__form-wrap {
  position: sticky;
  top: 92px; /* nav height (--space-8) + 28px buffer — functional, not arbitrary */
}

/* Form */
.form {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
}

.form__field {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--color-border);
}

.form__field:last-of-type {
  border-bottom: none;
}

.form__label {
  font-size: var(--text-sm);          /* was 0.5625rem */
  font-weight: var(--weight-regular); /* was 500 */
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding: var(--space-2) var(--space-2) 0; /* was 1rem 1.25rem 0 */
}

.form__input,
.form__textarea {
  font-family: var(--font-sans);
  font-size: var(--text-base);        /* was 0.9375rem */
  font-weight: var(--weight-regular); /* was 400 */
  color: var(--color-ink);
  background: transparent;
  border: none;
  outline: none;
  padding: var(--space-1) var(--space-2) var(--space-2); /* was 0.5rem 1.25rem 1rem */
  width: 100%;
  resize: none;
  transition: background-color var(--transition-base);
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: var(--color-border);
}

.form__input:focus,
.form__textarea:focus {
  background-color: var(--color-snowmelt);
}

.form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.form__grid .form__field:first-child {
  border-right: 1px solid var(--color-border);
}

.form__grid .form__field {
  border-bottom: none;
}

.form__grid-wrapper {
  border-bottom: 1px solid var(--color-border);
}

.form__textarea {
  min-height: 130px;
}

.form__submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);  /* was 1.25rem */
  gap: var(--space-2);      /* was 1rem */
}

.form__privacy {
  font-size: var(--text-sm);  /* was 0.6875rem */
  color: var(--color-muted);
}

.form__submit-row .btn {
  white-space: nowrap;
  padding: var(--space-1) var(--space-3); /* was 0.75rem 1.75rem */
}

/* Suppress border on a specific form field (use instead of inline style) */
.form__field--no-border {
  border-bottom: none;
}

/* =====================================================
   RESPONSIVE — CONTACT PAGE
===================================================== */
@media (max-width: 900px) {
  .contact-page__inner {
    grid-template-columns: 1fr;
  }
  .contact-page__form-wrap {
    position: static;
  }
  .form__grid {
    grid-template-columns: 1fr;
  }
  .form__grid .form__field:first-child {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
  .form__submit-row {
    flex-direction: column;
    align-items: flex-start;
  }
}