:root {
  --contact-ink: #171323;
  --contact-muted: #696174;
  --contact-paper: #f7f5f1;
  --contact-purple: #7448f4;
  --contact-coral: #ff685d;
  --contact-yellow: #ffd752;
  --contact-mint: #a8ead1;
  --contact-line: rgba(23, 19, 35, .13);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-x: clip;
  color: var(--contact-ink);
  background: var(--contact-paper);
  font-family: "Manrope", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

button,
input,
textarea { font: inherit; }

.contact-page {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(circle at 91% 9%, rgba(255, 104, 93, .22), transparent 26rem),
    radial-gradient(circle at 7% 55%, rgba(116, 72, 244, .15), transparent 24rem),
    linear-gradient(180deg, #fbfaf7 0%, #f6f1ff 58%, #fff7e2 100%);
}

.contact-page::before,
.contact-page::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border: 2px solid rgba(23, 19, 35, .09);
  border-radius: 50%;
}

.contact-page::before { width: 220px; height: 220px; top: 136px; right: -88px; }
.contact-page::after { display: none; }

.contact-sidekick {
  position: relative;
  min-height: 245px;
  margin-top: 32px;
  display: flex;
  align-items: center;
}

.contact-character-peek {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: min(-32px, calc((1280px - 100vw) / 2));
  margin-left: clamp(-28px, -1.7vw, -18px);
  width: clamp(300px, 28vw, 460px);
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 28px 36px rgba(61, 44, 106, .2));
  transform: translateY(-50%) rotate(-2deg);
  transform-origin: 16% 50%;
  animation: character-watch 5.4s ease-in-out infinite;
}

@keyframes character-watch {
  0%, 100% { transform: translateY(-50%) translateX(0) rotate(-2deg); }
  50% { transform: translateY(-50%) translateX(-4px) rotate(0); }
}

.nav-actions a[aria-current="page"] {
  color: var(--contact-purple);
  position: relative;
}

.nav-actions a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--contact-coral);
}

.contact-main {
  width: min(1280px, calc(100% - 64px));
  flex: 1;
  margin: 0 auto;
  padding: clamp(58px, 7vw, 104px) 0 96px;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(500px, 1.18fr);
  gap: clamp(48px, 7vw, 92px);
  align-items: start;
  position: relative;
  z-index: 2;
}

.contact-intro h1 {
  max-width: 610px;
  margin: 0 0 24px;
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(52px, 6vw, 82px);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.065em;
}

.contact-intro h1 em {
  color: var(--contact-purple);
  font-family: Georgia, serif;
  font-weight: 400;
}

.contact-intro > p {
  max-width: 510px;
  margin: 0;
  color: var(--contact-muted);
  font-size: 17px;
  line-height: 1.7;
}

.contact-note {
  position: relative;
  z-index: 2;
  width: min(390px, calc(100% - clamp(110px, 12vw, 170px)));
  margin: 0 0 0 clamp(110px, 12vw, 170px);
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 22px;
  background: rgba(255, 255, 255, .67);
  box-shadow: 0 16px 42px rgba(79, 57, 122, .1);
  backdrop-filter: blur(14px);
}

.contact-note span { display: block; color: #877f90; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.contact-note a { display: inline-block; margin-top: 8px; color: var(--contact-ink); font-size: 16px; font-weight: 800; text-decoration-color: var(--contact-coral); text-underline-offset: 4px; }

.form-card {
  position: relative;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 32px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 30px 85px rgba(65, 44, 112, .16);
  backdrop-filter: blur(20px);
}

.form-head { margin-bottom: 27px; }
.form-head h2 { margin: 0; font: 700 30px/1.08 "Space Grotesk", ui-sans-serif, system-ui, sans-serif; letter-spacing: -.04em; }
.form-head p { margin: 8px 0 0; color: var(--contact-muted); font-size: 13px; line-height: 1.55; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { min-width: 0; display: grid; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { color: #4f4758; font-size: 12px; font-weight: 850; }
.required-mark { color: var(--contact-coral); font-weight: 900; }

.field input,
.field textarea,
.select-trigger {
  width: 100%;
  color: var(--contact-ink);
  border: 1px solid var(--contact-line);
  border-radius: 15px;
  outline: none;
  background: #f9f7fb;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.field input { height: 52px; padding: 0 16px; }
.field textarea { min-height: 158px; padding: 15px 16px; line-height: 1.55; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #a39ba9; }
.field input:focus,
.field textarea:focus,
.select-trigger:focus-visible,
.select-trigger[aria-expanded="true"] {
  border-color: rgba(116, 72, 244, .58);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(116, 72, 244, .1);
}

.custom-select { position: relative; }
.select-trigger {
  height: 52px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #8d8493;
  text-align: left;
  cursor: pointer;
}
.select-trigger.has-value { color: var(--contact-ink); }
.custom-select[data-invalid="true"] .select-trigger { border-color: var(--contact-coral); box-shadow: 0 0 0 4px rgba(255, 104, 93, .11); }
.select-chevron { width: 18px; height: 18px; flex: none; color: var(--contact-purple); transition: transform .2s ease; }
.select-trigger[aria-expanded="true"] .select-chevron { transform: rotate(180deg); }

.select-menu {
  position: absolute;
  right: 0;
  left: 0;
  top: calc(100% + 8px);
  z-index: 30;
  overflow: hidden;
  padding: 7px;
  border: 1px solid rgba(116, 72, 244, .2);
  border-radius: 16px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 20px 48px rgba(44, 31, 77, .2);
  backdrop-filter: blur(20px);
}
.select-menu[hidden] { display: none; }
.select-option {
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #615968;
  border: 0;
  border-radius: 11px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.select-option:hover,
.select-option:focus-visible { color: var(--contact-ink); outline: none; background: rgba(116, 72, 244, .08); }
.select-option[aria-selected="true"] { color: var(--contact-ink); font-weight: 800; background: rgba(168, 234, 209, .4); }
.select-option[aria-selected="true"]::after { content: "✓"; color: #238a67; font-weight: 900; }

.consent-row { margin-top: 20px; display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; color: #746c7c; font-size: 12px; line-height: 1.55; }
.consent-row input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--contact-purple); cursor: pointer; }
.privacy-link {
  padding: 0;
  color: #5b35c6;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(91, 53, 198, .35);
  text-underline-offset: 3px;
  cursor: pointer;
}
.privacy-link:hover,
.privacy-link:focus-visible { color: #7448f4; outline: none; text-decoration-color: currentColor; }
.submit-row { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.submit-note { max-width: 310px; margin: 0; color: #968e9d; font-size: 10px; line-height: 1.5; }
.submit-button { min-width: 138px; height: 50px; padding: 0 22px; color: #fff; border: 0; border-radius: 15px; background: var(--contact-purple); box-shadow: 0 12px 25px rgba(116, 72, 244, .22); font-size: 13px; font-weight: 900; cursor: pointer; transition: translate .2s ease, box-shadow .2s ease, opacity .2s ease; }
.submit-button:not(:disabled):hover { translate: 0 -2px; box-shadow: 0 17px 32px rgba(116, 72, 244, .3); }
.submit-button:disabled { color: #aaa3b0; border: 1px solid var(--contact-line); background: #ece8ef; box-shadow: none; cursor: not-allowed; opacity: .82; }

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

@media (max-width: 980px) {
  .contact-main { grid-template-columns: 1fr; gap: 46px; padding-top: 52px; }
  .contact-intro h1,
  .contact-intro > p,
  .contact-note { max-width: 720px; }
  .contact-sidekick { min-height: 230px; margin-top: 26px; }
  .contact-character-peek { left: -32px; width: 330px; opacity: .96; }
  .contact-note { width: min(540px, calc(100% - 140px)); margin-left: 140px; }
}

@media (max-width: 640px) {
  .contact-main { width: min(100% - 32px, 1280px); padding: 42px 0 64px; }
  .contact-sidekick { min-height: 218px; margin-top: 22px; }
  .contact-character-peek { left: -16px; width: 250px; margin-left: -15px; opacity: .92; }
  .contact-note { width: calc(100% - 66px); margin-left: 66px; padding: 20px 18px; }
  .contact-intro h1 { font-size: clamp(45px, 14vw, 62px); }
  .contact-intro > p { font-size: 15px; }
  .form-card { padding: 28px 18px 22px; border-radius: 24px; }
  .field-grid { grid-template-columns: 1fr; gap: 16px; }
  .field.full { grid-column: auto; }
  .submit-row { align-items: stretch; flex-direction: column; }
  .submit-note { max-width: none; }
  .submit-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-character-peek,
  .select-chevron,
  .submit-button,
  .field input,
  .field textarea,
  .select-trigger { transition-duration: .01ms !important; }
}