/* First contact: an idea, a way to reply, and optional context. */
.contact-page .contact-form { padding: clamp(24px,3vw,40px); border-color: #ac89d33b; border-radius: 14px; background: radial-gradient(ellipse at 100% 0,#9360bb13,transparent 46%),linear-gradient(155deg,#17131f,#0e1017 62%); box-shadow: inset 0 1px #e4c7ff0c,0 24px 60px #0004; }
/* A broad, quiet reflection inside the form surface; content stays on its own layer. */
.contact-page .contact-form::before { content: ''; display: block; position: absolute; z-index: 0; inset: 36px 36px auto; height: min(620px,65%); border-radius: 50%; background: radial-gradient(ellipse at center,#b47bdf30 0%,#9662c719 36%,transparent 70%); pointer-events: none; opacity: .7; transform: translate(-18px,-22px) scale(.94); animation: contact-light-drift 28s ease-in-out infinite alternate; animation-play-state: paused; }
.motion-ready:not(.motion-paused):not(.motion-suspended):not(.motion-fallback) .contact-form.is-ambient-visible::before { animation-play-state: running; }
@keyframes contact-light-drift {
  from { transform: translate(-18px,-22px) scale(.94); opacity: .7; }
  to { transform: translate(18px,34px) scale(1.03); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-page .contact-form::before { animation: none; }
}
.contact-page .form-card-header { margin-bottom: 22px; padding-bottom: 18px; }
.contact-page .form-card-header .kicker { font-size: .69rem; letter-spacing: .15em; color: #b59acc; }
.contact-page .form-card-header h2 { margin: 10px 0 12px; max-width: none; font-size: clamp(1.85rem,2.5vw,2.1rem); letter-spacing: -.045em; line-height: 1.15; }
.contact-page .form-card-header > p:last-child { max-width: 44ch; margin: 0; color: #b8adca; font-size: .95rem; line-height: 1.75; }
.contact-start-main { min-width: 0; }
.contact-page .contact-start-message { margin-bottom: 20px; }
.contact-page .contact-start-message textarea { min-height: 112px; padding: 14px 16px; border-radius: 7px; border-color: #b99ad147; background: #080b114d; font-size: .97rem; line-height: 1.7; }
.contact-page .contact-start-message textarea:focus { border-color: #c6a2ed; box-shadow: 0 0 0 3px #b588e110; }
.contact-page .contact-start-message .form-hint { margin-top: 5px; max-width: 62ch; color: #aa9eb7; font-size: .79rem; line-height: 1.65; }
.contact-page .contact-start-main .form-row { margin-bottom: 10px; }
.contact-page .contact-start-main input { border-radius: 7px; background: #080b114d; min-height: 48px; }
.contact-page .contact-required-note { margin: 0; max-width: 56ch; color: #a99bb6; font-size: .72rem; line-height: 1.6; }
.contact-more { min-width: 0; margin: 20px 0 0; border-top: 1px solid #bca0da2c; border-bottom: 1px solid #bca0da2c; }
.contact-more summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 78px; padding: 16px 0; list-style: none; cursor: pointer; }
.contact-more summary::-webkit-details-marker { display: none; }
.contact-more summary strong { display: block; font-size: .88rem; font-weight: 600; color: #e1d5ed; }
.contact-more-caption { display: block; margin-top: 4px; color: #9f91ad; font-size: .74rem; line-height: 1.5; }
.contact-more-icon { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border: 1px solid #b99bd53b; border-radius: 50%; color: #c3a0e4; font: 22px/1 system-ui,sans-serif; transition: transform .35s,border-color .3s,background-color .3s; }
.contact-more[open] .contact-more-icon { transform: rotate(45deg); background: #b891dc0e; }
.contact-more summary:hover .contact-more-icon { border-color: #c3a0e4; }
.contact-more summary:focus-visible { outline: 2px solid #d6b5ff; outline-offset: 5px; border-radius: 4px; }
.contact-more-body { padding: 0 0 8px; }
.contact-more-intro { margin: 0 0 22px; color: #b6a8c3; font-size: .82rem; line-height: 1.7; }
.contact-page .contact-more-body label { font-size: .81rem; }
.contact-page .contact-phone-preference { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 7px; color: #b8abc6; font-size: .76rem; line-height: 1.5; cursor: pointer; }
.contact-page .contact-phone-preference.is-pending { display: none; }
.contact-page .contact-phone-preference input { flex: 0 0 auto; width: 18px; min-height: 18px; margin: 0; accent-color: #a96ed4; cursor: pointer; }
.contact-page .contact-phone-preference input:focus-visible { outline: 2px solid #d6b5ff; outline-offset: 3px; }
.contact-page .contact-choice-note { margin: 12px 0 0; padding-left: 12px; border-left: 2px solid #b28bd9; color: #c6aedc; font-size: .75rem; line-height: 1.65; }
.contact-send-zone { margin-top: 28px; }
.contact-readiness { margin-bottom: 20px; }
.contact-readiness[hidden], .contact-choice-note[hidden] { display: none; }
.contact-readiness-track { display: flex; gap: 10px; }
.contact-readiness-track > span { position: relative; flex: 1; min-width: 0; padding-top: 10px; color: #a195ae; font-size: .67rem; line-height: 1.4; transition: color .3s; }
.contact-readiness-track > span::before, .contact-readiness-track > span::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: #a184b62b; }
.contact-readiness-track > span::after { background: #b997dd; transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.contact-readiness-track > span.is-ready { color: #d6bdeb; }
.contact-readiness-track > span.is-ready::after { transform: scaleX(1); }
.contact-page .contact-readiness-text { min-height: 1.65em; margin: 9px 0 0; color: #a99ab9; font-size: .75rem; line-height: 1.65; }
.contact-page .contact-submit { display: flex; width: 100%; justify-content: space-between; min-height: 56px; padding-inline: 22px; border-radius: 7px; box-shadow: 0 8px 24px #6c31a921,inset 0 1px #f6e4ff19; }
.contact-page .contact-form.is-start-ready .contact-submit { border-color: #cda6ed99; box-shadow: 0 9px 28px #8f4bd335,inset 0 1px #f6e4ff30; }
.contact-page .contact-form.is-start-ready .contact-readiness-text { color: #d2b6e9; }
.contact-page .contact-send-zone .form-next-step { margin: 14px 0 0; max-width: 56ch; color: #b8abc6; font-size: .79rem; line-height: 1.7; }
.contact-page .contact-form > .form-help { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid #bca0da1c; color: #9d91aa; font-size: .7rem; }
@media (max-width: 600px) {
  .contact-page .contact-form { padding: 24px 20px; }
  .contact-page .form-card-header { margin-bottom: 22px; }
  .contact-page .form-card-header h2 { font-size: 1.85rem; }
  .contact-page .contact-start-main .form-row { grid-template-columns: 1fr; gap: 16px; }
  .contact-page .contact-start-message textarea { min-height: 112px; font-size: 16px; padding: 14px; }
  .contact-page .contact-more-body .form-row { grid-template-columns: 1fr; gap: 16px; }
  .contact-page .contact-start-message { margin-bottom: 23px; }
  .contact-send-zone { margin-top: 24px; }
}