* { box-sizing: border-box; }
html, body {
  min-height: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}
.contact-page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: #fff;
  color: #171a20;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}
@media (min-width: 561px) {
  html,
  body.contact-page {
    height: 100%;
    height: 100svh;
    overflow-y: hidden;
    overscroll-behavior: none;
  }
}
.contact-page::before {
  content: none;
}
.contact-page .glass-header {
  background: rgba(248, 252, 255, .34);
  border-color: rgba(255, 255, 255, .42);
  box-shadow: 0 8px 28px rgba(15, 23, 42, .06), inset 0 1px rgba(255, 255, 255, .7);
}
.contact-page .glass-header::before {
  background: linear-gradient(110deg, rgba(255, 255, 255, .62), transparent 34% 72%, rgba(255, 255, 255, .2));
}
.contact-page .glass-header .header-logo { filter: brightness(0) opacity(.78); }
.contact-page .glass-header nav a { color: #273143; text-shadow: none; }
.contact-page .glass-header nav a:hover { background: rgba(15, 23, 42, .055); }
.contact-page .glass-header nav a.contact-button { color: #fff; background: #015abf; }
.contact-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  gap: clamp(36px, 4vw, 64px);
  width: min(1200px, calc(100% - 96px));
  margin: 0 auto;
  padding: 92px 0 0;
}
.contact-intro {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 3vh 0 0;
}
.contact-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  margin-top: 8px;
}
.contact-kicker {
  margin: 0 0 22px;
  color: #45505e;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
}
.contact-copy h1 {
  margin: 0 0 14px;
  font-size: clamp(36px, 3.6vw, 52px);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .99;
}
.intro-text {
  max-width: 540px;
  margin: 0;
  color: #38414c;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.45;
}
.contact-direct { display: grid; gap: 5px; margin-top: 18px; font-size: 12px; }
.contact-direct span { color: #4f5865; }
.contact-direct a { color: #015abf; text-decoration: none; }
.icon { display: inline-block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.mail-icon { margin-right: 6px; }
.chat-preview { display: grid; gap: 5px; max-width: 310px; margin-top: auto; padding-top: 24px; }
.chat-bubble { width: fit-content; max-width: 88%; margin: 0; padding: 7px 10px; border-radius: 12px; overflow-wrap: anywhere; font-size: 10px; line-height: 1.3; }
.chat-outgoing { justify-self: end; border-bottom-right-radius: 5px; background: #0874e8; color: #fff; }
.chat-incoming { justify-self: start; border-bottom-left-radius: 5px; background: #f0f2f5; color: #303844; }
.sms-contact { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.sms-qr-link { display: block; flex: 0 0 62px; padding: 4px; border: 1px solid #e3e6eb; border-radius: 8px; background: #fff; }
.sms-qr-link.is-disabled { pointer-events: none; cursor: default; }
.sms-qr { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.sms-qr-link.is-disabled .sms-qr { filter: blur(1.5px); opacity: .42; }
.sms-copy { min-width: 0; }
.sms-copy p { margin: 0 0 3px; color: #68717e; overflow-wrap: anywhere; font-size: 9px; line-height: 1.3; }
.sms-copy .sms-number { color: #202733; font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.masked-number { display: inline-block; filter: blur(4px); user-select: none; }
.sms-copy .sms-coming-soon { color: #aeb5bd; font-size: 9px; font-weight: 500; }
.sms-disclosure { max-width: 340px; margin: 6px 0 0; color: #737c88; font-size: 8px; line-height: 1.35; }
.sms-disclosure a { color: #596879; text-decoration: underline; text-underline-offset: 2px; }
.form-side { padding-top: 12px; }
.contact-form {
  width: 100%;
  max-width: 640px;
  margin-left: auto;
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid #e1e4e8;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 55px rgba(24, 39, 57, .08);
}
.form-heading { margin-bottom: 19px; }
.form-heading .contact-kicker { margin-bottom: 11px; color: #627080; }
.form-heading h2 {
  margin: 0 0 8px;
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.15;
}
.form-heading>p:last-child { margin: 0; color: #6c7480; font-size: 13px; line-height: 1.5; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 12px; }
.field-grid label { display: grid; gap: 7px; min-width: 0; color: #303844; font-size: 11px; font-weight: 500; }
.field-grid .full-field { grid-column: 1 / -1; }
.field-grid input,.field-grid select,.field-grid textarea {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #c8cdd4;
  border-radius: 7px;
  outline: none;
  background: #fff;
  color: #242a33;
  font: 400 13px/1.4 Inter, "Helvetica Neue", Arial, sans-serif;
  transition: border-color .15s, box-shadow .15s;
}
.field-grid textarea { min-height: 68px; resize: vertical; }
.field-grid input::placeholder,.field-grid textarea::placeholder { color: #8a9099; }
.field-grid input:focus,.field-grid select:focus,.field-grid textarea:focus { border-color: #2873c6; box-shadow: 0 0 0 3px rgba(1, 90, 191, .12); }
.check-row { display: flex; align-items: flex-start; gap: 9px; margin-top: 11px; color: #3f4752; font-size: 10.5px; line-height: 1.42; }
.check-row input { flex: 0 0 auto; width: 17px; height: 17px; margin: 1px 0 0; accent-color: #015abf; }
.check-row a { color: #015abf; }
.optional-row { margin-top: 8px; }
.submit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin-top: 16px;
  border: 0;
  border-radius: 7px;
  background: #0566e9;
  color: #fff;
  cursor: pointer;
  font: 500 14px Inter, "Helvetica Neue", Arial, sans-serif;
}
.submit-button:hover { background: #015abf; }
.submit-button .icon { width: 17px; height: 17px; vertical-align: -4px; transition: transform .18s ease; }
.submit-button:hover .send-icon { transform: translate(2px, -2px); }
.form-note,.form-status { margin: 9px 0 0; color: #777f89; font-size: 9.5px; line-height: 1.45; }
.form-status:not(:empty) { color: #175d3c; }
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: minmax(0, .88fr) minmax(270px, 1.12fr); gap: clamp(12px, 2vw, 20px); width: calc(100% - 32px); }
  .contact-intro { min-height: 0; }
  .contact-form { max-width: none; margin-left: 0; padding: 20px; }
  .contact-copy h1 { font-size: clamp(34px, 5vw, 48px); }
  .chat-preview { margin-top: auto; }
  .sms-contact { margin-top: 14px; }
}
@media (max-width: 560px) {
  .contact-page::before { height: 355px; min-height: 0; }
  .contact-layout { display: flex; flex-direction: column; gap: 28px; width: calc(100% - 32px); padding: 88px 0 16px; }
  .contact-intro { min-height: 0; padding: 0 4px; }
  .contact-copy { margin-top: 16px; }
  .contact-copy h1 { margin-bottom: 14px; font-size: clamp(34px, 9vw, 44px); }
  .intro-text { font-size: 14px; }
  .contact-direct { margin-top: 16px; }
  .chat-preview { max-width: none; margin-top: 32px; padding-top: 0; }
  .sms-contact { max-width: 380px; }
  .form-side { padding: 0; }
  .contact-form { max-width: none; padding: 24px 20px; border-radius: 18px; }
  .form-heading { margin-bottom: 20px; }
  .field-grid { gap: 13px 10px; }
}
@media (max-width: 420px) {
  .contact-form { padding: 22px 16px; }
}