.contact-page {
  --contact-panel: #131020;
  --contact-choice: #1e1a2c;
  --contact-focus: #c4b1ff;
  --glass-flat: #231b35;
  --glass-fill: linear-gradient(135deg, #b09bff38, #3a2a5570 54%, #2b8b8640);
  --glass-edge: #bba7ff62;
}

[data-theme='light'] .contact-page {
  --contact-panel: #fdfcff;
  --contact-choice: #f5f1ff;
  --contact-focus: #6542c4;
  --glass-flat: #eee7fc;
  --glass-fill: linear-gradient(135deg, #ffffffdd, #e7d9fbc0 54%, #ccefebae);
  --glass-edge: #7762ad75;
}

[data-theme='light'] .contact-page .eyebrow { color: #087063; }

.contact-page::before {
  background: radial-gradient(ellipse at 14% 29%, #8057f74d, transparent 43%),
              radial-gradient(ellipse at 93% 67%, #41c7c736, transparent 35%);
}

.contact-page .theme { margin-inline-start: auto; flex: 0 0 auto; }
.contact-page .site-head .service-nav + .theme { margin-inline-start: 0; }
.contact-page .logo > span:last-child { color: var(--ink); }
.contact-page .logo > span:last-child > span { color: var(--muted); }
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 6vw, 88px);
  padding-block: clamp(116px, 11vw, 164px) 72px;
}

.contact-intro h1 { font-size: clamp(3.1rem, 5.45vw, 5rem); line-height: 1.02; margin-block: 19px; }
.contact-intro .display-accent { font-size: 1.17em; white-space: nowrap; }
.contact-lead { max-width: 40ch; color: var(--muted); font-size: 1.05rem; }
.contact-direct { display: grid; gap: 11px; margin-block: 30px 15px; max-width: 410px; }
.glass-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1px 12px;
  min-height: 65px;
  padding: 12px 18px;
  border: 1px solid var(--glass-edge);
  border-radius: 20px;
  background: var(--glass-flat);
  box-shadow: inset 0 1px 0 #fff3, inset 0 -1px 0 #b5e7f123, 0 12px 24px #0a07132b;
  transition: transform .2s, border-color .2s;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-contact { background: var(--glass-fill); -webkit-backdrop-filter: blur(15px) saturate(1.45); backdrop-filter: blur(15px) saturate(1.45); }
}

.glass-contact span { color: var(--muted); font-size: .78rem; }
.glass-contact strong { grid-column: 1; font: 500 1rem var(--display-heading); overflow-wrap: anywhere; }
.glass-contact i { grid-column: 2; grid-row: 1 / 3; font-style: normal; font-size: 1.15rem; }
.glass-contact:hover { border-color: var(--contact-focus); transform: translateY(-2px); }
.contact-note { color: var(--muted); font-size: .83rem; }
.contact-note a, .draft-actions a { text-decoration: underline; text-underline-offset: .2em; }

.contact-finder, .contact-draft {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--contact-panel);
  color: var(--ink);
  padding: clamp(20px, 3.1vw, 40px);
  box-shadow: 0 20px 70px #09071724;
}

.contact-finder { scroll-margin-top: 76px; }
.contact-finder h2, .contact-draft h2 { font: 500 clamp(1.85rem, 3.2vw, 2.7rem)/1.1 var(--display-heading); letter-spacing: -.05em; margin-block: 10px; }
.finder-intro, .contact-draft p:not(.eyebrow) { color: var(--muted); }
.contact-finder form:not([hidden]) { display: grid; gap: 18px; margin-block-start: 23px; }
.contact-finder fieldset { border: 0; min-width: 0; }
.contact-finder legend { font: 500 1rem/1.3 var(--display-heading); margin-block-end: 8px; }
.contact-finder legend span { color: var(--contact-focus); margin-inline-end: .38em; font-size: .75rem; }
.contact-options { display: flex; flex-wrap: wrap; gap: 7px; }
.contact-options label { position: relative; cursor: pointer; }
.contact-options input { position: absolute; inset: 50% auto auto 10px; opacity: 0; }
.contact-options label span {
  display: flex; align-items: center; min-height: 44px; padding: 6px 11px;
  border: 1px solid var(--line); border-radius: 99px; background: var(--contact-choice);
  color: var(--ink); font-size: .82rem;
}

.contact-options input:checked + span { border-color: var(--contact-focus); box-shadow: inset 0 0 0 1px var(--contact-focus); }
.contact-options input:checked + span::before { content: '✓'; margin-inline-end: 6px; }
.contact-page :is(a,button,textarea):focus-visible, .contact-options input:focus-visible + span { outline: 2px solid var(--contact-focus); outline-offset: 3px; }
.contact-primary {
  display: inline-flex; justify-content: center; align-items: center; gap: 12px;
  min-height: 48px; padding: 9px 16px; border: 0; border-radius: 99px;
  background: var(--grad); color: #0a0712; cursor: pointer;
  font: 600 .94rem var(--display-heading);
}

.contact-draft { position: fixed; margin: auto; width: min(580px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; }
.contact-draft::backdrop { background: #080610bf; }
.draft-close { float: right; min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--contact-choice); color: var(--ink); font-size: 1.4rem; cursor: pointer; }
.contact-draft label { display: block; margin-block: 12px 4px; }
.contact-draft textarea { display: block; width: 100%; resize: vertical; border: 1px solid var(--line); border-radius: 12px; background: var(--contact-choice); color: var(--ink); padding: 12px; font: inherit; }
.draft-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-block: 14px 8px; }
html:has(.contact-draft[open]) { overflow: hidden; }

@media (max-width: 800px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .contact-intro h1 { font-size: clamp(2.65rem, 9vw, 4rem); }
}

@media (max-width: 430px) {
  .contact-layout { padding-inline: 18px; }
  .contact-finder { border-radius: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-page, .glass-contact { transition: none; }
  .glass-contact:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .glass-contact { background: var(--glass-flat); -webkit-backdrop-filter: none; backdrop-filter: none; }
}