/* ==========================================================================
   Contact page
   ========================================================================== */

.contact {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding: calc(var(--header-h) + 10px) var(--gutter) 100px;
  display: flex;
  justify-content: center;
}

.contact__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  text-align: center;
}

.contact__title {
  font-size: clamp(44px, 6.25vw, 80px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--track-display);
  color: var(--blue);
  white-space: nowrap;
  margin: 0 -50vw 14px;
}

.contact__intro {
  font-size: 18px;
  line-height: 1.55;
  max-width: 330px;
  margin: 0 auto 56px;
}

/* Soft brand circles drifting behind the form */
.contact__blob {
  position: absolute;
  border-radius: 50%;
  background: var(--blue-soft);
  pointer-events: none;
  z-index: 0;
}
.contact__blob--a { width: 320px; height: 320px; top: 18%; left: -90px; }
.contact__blob--b { width: 200px; height: 200px; top: 48%; right: 6%; }
.contact__blob--c { width: 120px; height: 120px; bottom: 10%; left: 18%; }

/* --------------------------------------------------------------------------
   Form: same language as the rest of the site. Soft card, 16px-radius
   fields with token borders, pill submit that fills on hover.
   -------------------------------------------------------------------------- */
.form {
  text-align: left;
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--n-200);
  box-shadow: 0 30px 60px -36px rgba(16, 18, 35, .25);
  backdrop-filter: blur(6px);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}

.field { position: relative; margin-bottom: var(--s-5); }

.field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--n-700);
  margin-bottom: var(--s-2);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--n-100);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 0 var(--s-4);
  height: 52px;
  outline: none;
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), background-color .3s var(--ease-out);
}
.field textarea {
  height: 128px;
  min-height: 104px;
  padding: 14px var(--s-4);
  line-height: 1.5;
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--n-400); }

.field input:hover,
.field textarea:hover,
.field select:hover { border-color: var(--n-300); }

.field input:focus,
.field textarea:focus,
.field select:focus {
  background-color: var(--white);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}

.field.is-invalid input,
.field.is-invalid textarea { border-color: var(--red); background-color: var(--white); }
.field.is-invalid input:focus,
.field.is-invalid textarea:focus { box-shadow: 0 0 0 3px rgba(171, 17, 17, .14); }

.field__error {
  font-size: 13px;
  color: var(--red);
  margin-top: 6px;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity .3s, height .3s;
}
.field.is-invalid .field__error { height: 18px; opacity: 1; }

/* Submit matches .btn--primary: pill, 56px, fill sweeps up, label stays still */
.form__submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  margin-top: var(--s-2);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--blue);
  color: var(--white);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}
.form__submit::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--blue-deep);
  transform: translateY(101%);
  transition: transform .5s var(--ease-out);
  z-index: -1;
}
.form__submit:hover::before,
.form__submit:focus-visible::before { transform: translateY(0); }
.form__submit:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--blue-soft); }
.form__submit:disabled { cursor: progress; }

.form__submit-spinner {
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: spin .7s linear infinite;
}
.form.is-sending .form__submit-text { opacity: 0; }
.form.is-sending .form__submit-spinner { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

.form__status {
  font-size: 14px;
  margin-top: 14px;
  min-height: 20px;
  color: var(--red);
  text-align: center;
}

.form__status:empty { display: none; }

/* --------------------------------------------------------------------------
   Success state
   -------------------------------------------------------------------------- */
.form-success { padding-top: 10px; }
.form-success__icon {
  width: 72px; height: 72px;
  margin: 0 auto 22px;
  display: block;
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.form-success__title {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: var(--track-heading);
  margin-bottom: 8px;
}
.form-success__text { font-size: 17px; line-height: 1.5; }

.contact-page .footer { margin-top: 0; }

@media (max-width: 600px) {
  .contact__title { white-space: normal; margin-left: 0; margin-right: 0; }
  .form__row { grid-template-columns: 1fr; gap: 0; }
  .form { padding: var(--s-5) var(--s-4); }
  .contact__blob--a { width: 220px; height: 220px; left: -120px; }
  .contact__blob--b { width: 140px; height: 140px; right: -50px; }
}

.contact__mascot { width: 128px; margin: 0 auto 6px; }

/* Engagement + budget selects (prefilled from ?type= on the home page plans) */
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
  background: var(--n-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23101223' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 16px center / 12px no-repeat;
}
.field label small { color: var(--n-500); font-size: 13px; font-weight: 400; }
.field.is-prefilled select { background-color: var(--white); border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }