/* Contact (Figma 461:14622): intro + underline form card with a rainbow glow, then 4 contact cards. */
.p-contact { padding-bottom: var(--space-16); }
.p-contact__grid { display: grid; gap: var(--space-12); max-width: 1032px; }
.p-contact__intro { display: flex; flex-direction: column; gap: var(--space-8); }
.p-contact__details { display: grid; gap: var(--space-4); font-style: normal; font-weight: var(--fw-medium); font-size: var(--body-md-size); line-height: 1.3; color: var(--text-strong); }
.p-contact__lines { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.p-contact__lines a { display: inline-flex; align-items: center; gap: var(--space-2); }
.p-contact__lines a:hover { color: var(--amber-800); }
.p-contact__lines svg { width: 16px; height: 16px; }
.p-contact__sep { width: 1px; height: 16px; background: var(--border-thin); }
.p-contact__meeting { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: auto; font-weight: var(--fw-medium); font-size: var(--body-md-size); color: var(--text-medium); }
.p-contact__meeting svg { width: 16px; height: 16px; }
.p-contact__meeting:hover { color: var(--text-strong); }

.p-contact__form-wrap { position: relative; }
.p-contact__glow { position: absolute; inset: auto 0 -14% 0; height: 45%; background: radial-gradient(30% 50% at 25% 60%, rgb(255 105 0 / 0.16), transparent 70%), radial-gradient(30% 50% at 55% 60%, rgb(253 199 0 / 0.16), transparent 70%), radial-gradient(30% 50% at 85% 60%, rgb(0 188 125 / 0.14), transparent 70%); filter: blur(24px); }
.p-contact__form { position: relative; display: grid; gap: var(--space-3); padding: var(--space-8) var(--space-6); border: 1px solid var(--border-thin); border-radius: var(--radius-xl); background: var(--stone-50); }
.p-contact__form .field { gap: var(--space-1); }
.p-contact__form .field__label { font-size: var(--body-md-size); }
.p-contact__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-4); }
.p-contact__status { flex: 1 1 200px; font-size: var(--body-sm-size); color: var(--emerald-600); }
.p-contact__submit { margin-left: auto; }

.p-contact__more { padding-block: var(--space-8) var(--space-20); }
.p-contact__cards { display: grid; gap: var(--space-4); max-width: 986px; margin-inline: auto; }
.p-contact__card { display: flex; flex-direction: column; padding: var(--space-8); }
.p-contact__card-title { margin-top: var(--space-4); }
.p-contact__card-text { margin-top: var(--space-6); max-width: 340px; color: var(--text-medium); }
.p-contact__card-link { margin-top: auto; padding-top: var(--space-5); align-self: flex-start; }
@media (min-width: 768px) {
  .p-contact__cards { grid-template-columns: 1fr 1fr; }
  .p-contact__card { min-height: 250px; }
}
@media (min-width: 1024px) {
  .p-contact { padding-top: calc(var(--header-h) + var(--space-16)); }
  .p-contact__grid { grid-template-columns: 1fr 494px; gap: var(--space-16); padding-inline: var(--space-12); margin-inline: auto; }
  .p-contact__intro { padding-top: var(--space-10); padding-bottom: var(--space-12); }
  .p-contact__form { padding: var(--space-12) var(--space-10) var(--space-10); }
}

/* Figma QC: floating labels. The label sits on the line like a placeholder and lifts when the field is focused or filled. */
.p-contact__form { gap: 0; }
.p-contact__form .field { position: relative; display: block; }
.p-contact__form .field__label { position: absolute; left: 0; top: 30px; font-size: var(--body-md-size); line-height: 18px; pointer-events: none; transition: top var(--dur) var(--ease), font-size var(--dur) var(--ease), color var(--dur) var(--ease); }
.p-contact__form .input--line { height: 60px; padding: 24px 0 8px; }
.p-contact__form .textarea--line { display: block; min-height: 186px; height: 186px; padding: 30px 0 8px; resize: none; }
.p-contact__form .input::placeholder, .p-contact__form .textarea::placeholder { color: transparent; transition: color var(--dur) var(--ease); }
.p-contact__form .input:focus::placeholder, .p-contact__form .textarea:focus::placeholder { color: var(--text-weak); }
.p-contact__form .field:has(.input:focus, .input:not(:placeholder-shown), .textarea:focus, .textarea:not(:placeholder-shown)) .field__label { top: 6px; font-size: 13px; color: var(--text-medium); }
.p-contact__form .field__error { min-height: 0; }
.p-contact__form .field__error:not(:empty) { margin-top: 4px; }
.p-contact__actions { margin-top: 34px; }
.p-contact__meeting { min-height: 44px; }

@media (min-width: 1024px) {
  .p-contact { padding-top: calc(var(--header-h) + 80px); padding-bottom: 102px; }
  .p-contact__grid { grid-template-columns: minmax(0, 495px) minmax(0, 513px); gap: 16px; max-width: calc(1024px + var(--gutter) * 2); padding-inline: var(--gutter); }
  .p-contact__intro { padding-block: 40px; gap: 40px; }
  .p-contact__form { min-height: 532px; padding: 40px; }
  .p-contact__submit { height: 52px; min-width: 189px; justify-content: center; }
  .p-contact__meeting { min-height: 50px; }
  .p-contact__more { padding-block: 0 173px; }
  .p-contact__cards { max-width: 1024px; column-gap: 16px; row-gap: 16px; }
  .p-contact__card { min-height: 260px; padding: 33px; }
  .p-contact__card .card__icon { width: 20px; height: 20px; margin: 6px; }
  .p-contact__card-title { margin-top: 12px; }
  .p-contact__card-text { margin-top: 24px; max-width: 350px; }
  .p-contact__card-link { margin-top: auto; padding-top: 0; height: 50px; }
  .p-contact__card { min-height: 0; height: 260px; }
}