/* Contact card background: same as Product Design "What We Design" (#services): navy, drifting blue glow, orbit arcs + dot grid. */
.contact-card { background: #151d2b; isolation: isolate; }
.contact-card__glow, .contact-card__grid { display: none; }
.contact-card > :not(.contact-card__glow):not(.contact-card__grid) { position: relative; z-index: 1; }
.contact-card::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(34% 40% at 6% 18%, rgb(46 92 200 / 18%), transparent 70%),
    radial-gradient(30% 36% at 96% 88%, rgb(70 90 210 / 14%), transparent 70%);
  animation: ccBgDrift 22s ease-in-out infinite alternate;
}
.contact-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none'%3E%3Ccircle cx='-60' cy='120' r='300' stroke='%236f95ff' stroke-opacity='.35' stroke-width='1.2'/%3E%3Ccircle cx='-60' cy='120' r='360' stroke='%23ffca3a' stroke-opacity='.18'/%3E%3Ccircle cx='166' cy='330' r='4' fill='%23ffca3a'/%3E%3C/svg%3E") left -40px top -60px / 520px 520px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none'%3E%3Ccircle cx='460' cy='300' r='260' stroke='%236f95ff' stroke-opacity='.32' stroke-width='1.2'/%3E%3Ccircle cx='202' cy='290' r='4' fill='%23ffca3a'/%3E%3C/svg%3E") right -60px bottom -80px / 460px 460px no-repeat,
    radial-gradient(circle, rgb(150 175 235 / 16%) .8px, transparent 1.4px) 0 0 / 18px 18px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 14%, transparent 86%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 14%, transparent 86%, #000 100%);
  animation: ccBgPulse 9s ease-in-out infinite alternate;
}

@keyframes ccBgDrift { from { transform: translate(0, 0); } to { transform: translate(3%, -2%); } }
@keyframes ccBgPulse { from { opacity: .75; } to { opacity: 1; } }
@media (max-width: 720px) { .contact-card::after { opacity: .6; animation: none; } }
@media (prefers-reduced-motion: reduce) { .contact-card::before, .contact-card::after { animation: none; } }

/* Form stays the calendar's height (bottoms align); the goals textarea grows to fill the spare space. */
@media (min-width: 901px) {
  .contact-split > .contact-form { display: flex; flex-direction: column; }
  .contact-split > .contact-form .contact-form__fields { flex: 1 1 auto; flex-direction: column; }
  .contact-split > .contact-form .contact-field--area { flex: 1 1 auto; min-height: 110px; resize: none; }
}

/* Lift the card off the pale page: soft shadow + hairline stroke. */
.contact-card { box-shadow: 0 0 0 1px rgb(20 20 22 / 8%), 0 30px 60px -30px rgb(20 30 60 / 28%), 0 8px 20px -12px rgb(20 30 60 / 14%); }



/* Compact form + calendar so both columns are shorter and stay level. */
@media (min-width: 901px) {
  .contact-split { align-items: stretch; }
  .contact-form { padding: clamp(26px, 2.4vw, 36px); }
  .contact-form__title { margin-bottom: 8px; }
  .contact-form__lead { margin-bottom: 20px; }
  .contact-form__fields { gap: 10px; }
  .contact-form__names { gap: 10px; }
  .contact-field { height: 46px; font-size: 15px; }
  .contact-field--area { height: auto; min-height: 88px; padding: 12px 16px; }
  .booking { gap: 14px; padding: 0; }
  .booking__title { margin-bottom: 8px; }
  .booking__card { min-height: 0; padding: clamp(18px, 1.8vw, 26px); }
  .booking__bar { margin-bottom: 16px; }
  [data-booking-step='1'] .booking__rule, .booking__rule { margin-bottom: 14px; }
  .booking__week { margin-bottom: 8px; }
  .booking__week, .booking__days { gap: 6px; }
  .booking__days { justify-items: center; }
  .booking__day { width: 100%; max-width: 50px; font-size: 13px; }
}