/* =========================================================
   v2.8.35 — Contact page: match global HairSense page/form style
   Scope: contact/kontakt page only.
   This is intentionally an override layer because v2.8.32/2.8.34
   introduced contact-specific sizing that visually diverged from
   Services/Technology/Knowledge.
   ========================================================= */

.hs-contact-page-v2832,
.hs-contact-page-v2832 * {
  box-sizing: border-box;
}

.hs-contact-page-v2832 {
  font-family: inherit !important;
  color: inherit;
}

/* Same page rhythm and centered container behavior as the other content pages. */
.hs-contact-page-v2832 .contact-hero,
.hs-contact-page-v2832 .clean-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.hs-contact-page-v2832 .contact-hero {
  padding-top: clamp(56px, 7vw, 96px) !important;
  padding-bottom: clamp(56px, 7vw, 96px) !important;
}

.hs-contact-page-v2832 .clean-section {
  padding-top: clamp(64px, 7vw, 104px) !important;
  padding-bottom: clamp(72px, 8vw, 120px) !important;
}

.hs-contact-page-v2832 .container {
  width: min(1180px, calc(100% - 48px)) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Header typography: do not use a custom contact scale. */
.hs-contact-page-v2832 .contact-hero h1 {
  max-width: 760px !important;
  margin: 0 0 22px !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

.hs-contact-page-v2832 .contact-hero .lead {
  max-width: 780px !important;
  margin: 0 !important;
  color: #304563 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: 1.65 !important;
}

/* Same two-column content behavior as the normal page cards. */
.hs-contact-page-v2832 .contact-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.72fr) !important;
  gap: clamp(34px, 5vw, 72px) !important;
  align-items: stretch !important;
}

.hs-contact-page-v2832 .contact-panel {
  height: 100% !important;
  border: 1px solid #C7D7EE !important;
  border-radius: 28px !important;
  background: #FFFFFF !important;
  padding: clamp(42px, 5vw, 66px) !important;
  box-shadow: 0 22px 70px rgba(15, 27, 45, 0.055) !important;
}

/* Card text should inherit the same visual scale as service cards. */
.hs-contact-page-v2832 .contact-panel h2 {
  margin: 0 0 26px !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

.hs-contact-page-v2832 .contact-panel p,
.hs-contact-page-v2832 .contact-info-item span,
.hs-contact-page-v2832 .contact-info-item a {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: 1.65 !important;
  color: #304563;
}

.hs-contact-page-v2832 .contact-info-item strong {
  display: block;
  margin-bottom: 8px;
  color: #0F1B2D;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 800;
}

/* Forms: exact same calmer, rectangular input feel as newsletter/contact forms. */
.hs-contact-page-v2832 .contact-form {
  margin-top: 34px !important;
}

.hs-contact-page-v2832 .form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 30px 36px !important;
}

.hs-contact-page-v2832 .form-field--full {
  grid-column: 1 / -1 !important;
}

.hs-contact-page-v2832 label {
  display: block !important;
  margin: 0 0 12px !important;
  color: #0F1B2D !important;
  font-family: inherit !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.15em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.hs-contact-page-v2832 input,
.hs-contact-page-v2832 textarea {
  display: block !important;
  width: 100% !important;
  border: 1px solid #C7D7EE !important;
  border-radius: 0 !important;
  background: #F7FAFE !important;
  color: #0F1B2D !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: 1.45 !important;
  padding: 18px 22px !important;
  box-shadow: none !important;
  outline: none !important;
}

.hs-contact-page-v2832 input {
  min-height: 58px !important;
}

.hs-contact-page-v2832 textarea {
  min-height: 210px !important;
  resize: vertical !important;
}

.hs-contact-page-v2832 input:focus,
.hs-contact-page-v2832 textarea:focus {
  border-color: #1857B8 !important;
  box-shadow: 0 0 0 3px rgba(24, 87, 184, 0.10) !important;
}

/* Buttons: use the global HairSense feel, not the oversized custom contact button. */
.hs-contact-page-v2832 .form-actions {
  margin-top: 34px !important;
}

.hs-contact-page-v2832 .btn,
.hs-contact-page-v2832 button {
  min-height: 58px !important;
  min-width: 190px !important;
  border-radius: 999px !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  padding: 16px 32px !important;
}

.hs-contact-page-v2832 .quick-actions {
  display: grid !important;
  gap: 16px !important;
  margin-top: 34px !important;
}

.hs-contact-page-v2832 .quick-actions .btn {
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
}

.hs-contact-page-v2832 .quick-actions .btn-secondary {
  background: transparent !important;
  color: #0F1B2D !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

.hs-contact-page-v2832 .quick-actions .btn-secondary:hover {
  color: #1857B8 !important;
}

@media (max-width: 920px) {
  .hs-contact-page-v2832 .contact-layout {
    grid-template-columns: 1fr !important;
  }

  .hs-contact-page-v2832 .contact-panel {
    height: auto !important;
  }
}

@media (max-width: 760px) {
  .hs-contact-page-v2832 .container {
    width: min(100% - 40px, 1180px) !important;
  }

  .hs-contact-page-v2832 .contact-hero {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  .hs-contact-page-v2832 .clean-section {
    padding-top: 48px !important;
    padding-bottom: 64px !important;
  }

  .hs-contact-page-v2832 .contact-panel {
    padding: 30px !important;
    border-radius: 22px !important;
  }

  .hs-contact-page-v2832 .form-grid {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  .hs-contact-page-v2832 .form-field--full {
    grid-column: auto !important;
  }

  .hs-contact-page-v2832 .btn,
  .hs-contact-page-v2832 button {
    width: 100% !important;
    min-width: 0 !important;
  }
}