@property --cx-contact-rim-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

html.cx-contact-ready { scrollbar-gutter: stable; }
html.cx-contact-scroll-lock { overflow: hidden; }
.cx-contact-mobile-trigger { display: none; }

.cx-contact-dialog {
  --cx-contact-border: #8f7950;
  --cx-contact-surface: #100f0c;
  --cx-contact-gold: var(--chx-gold-300, #d1b37a);
  box-sizing: border-box;
  width: min(680px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 2px;
  border: 0;
  border-radius: 26px;
  background: transparent;
  color: var(--chx-limestone-100, #f1eadc);
  font-family: var(--chx-sans, "Manrope", sans-serif);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--cx-contact-border) var(--cx-contact-surface);
}

.cx-contact-dialog:not([open]) { display: none; }
.cx-contact-dialog::backdrop {
  background: rgb(0 0 0 / .68);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.cx-contact-panel {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  padding: 80px 40px 40px;
  border: 1px solid var(--cx-contact-border);
  border-radius: 24px;
  background: linear-gradient(140deg, rgb(209 179 122 / .055), transparent 38%, rgb(209 179 122 / .025)), var(--cx-contact-surface);
  box-shadow: inset 0 0 24px rgb(209 179 122 / .025);
  opacity: 1;
  transform: none;
}

.cx-contact-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cx-contact-gold);
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease;
}
.cx-contact-close:hover { color: #fff1c2; background: rgb(209 179 122 / .065); }
.cx-contact-close-icon { display: block; width: 24px; height: 24px; }

.cx-contact-heading {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 10px;
  margin: 0 0 30px;
}
.cx-contact-heading-icon {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  place-items: center;
  align-self: center;
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  border: 1px solid var(--cx-contact-gold);
  border-radius: 50%;
  color: var(--cx-contact-gold);
}
.cx-contact-dialog-icon { display: block; width: 30px; height: 30px; }
.cx-contact-title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  min-width: 0;
  margin: 0;
  color: var(--chx-limestone-100, #f1eadc);
  font-family: var(--chx-serif, "Cormorant Garamond", Georgia, serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.cx-contact-description {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  margin: 0;
  color: var(--chx-limestone-400, #a99f8f);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: break-word;
}
.cx-contact-actions {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cx-contact-item { min-width: 0; margin: 0; padding: 0; }
.cx-contact-action {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 20px;
  gap: 20px;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 64px;
  padding: 14px 24px;
  border: 1px solid rgb(209 179 122 / .7);
  border-radius: 18px;
  background: linear-gradient(115deg, rgb(209 179 122 / .07), rgb(209 179 122 / .015) 70%);
  color: var(--chx-limestone-100, #f1eadc);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.cx-contact-action:hover { border-color: var(--cx-contact-gold); background-color: rgb(209 179 122 / .045); }
.cx-contact-action > .chx-contact-icon {
  display: block;
  width: 28px;
  height: 28px;
  margin: 0;
  color: var(--cx-contact-gold);
}
.cx-contact-action-text { display: block; min-width: 0; overflow-wrap: break-word; }
.cx-contact-arrow { display: block; width: 20px; height: 20px; color: var(--cx-contact-gold); }
.cx-contact-action:focus-visible, .cx-contact-close:focus-visible {
  outline: 2px solid #fff1c2;
  outline-offset: 4px;
}

.cx-contact-dialog[open][data-state="opening"] .cx-contact-panel { animation: cx-contact-enter 250ms cubic-bezier(.22, .61, .36, 1) both; }
.cx-contact-dialog[open][data-state="opening"]::backdrop { animation: cx-contact-backdrop-enter 250ms ease both; }
.cx-contact-dialog[open][data-state="closing"] .cx-contact-panel { animation: cx-contact-leave 170ms ease both; }
.cx-contact-dialog[open][data-state="closing"]::backdrop { animation: cx-contact-backdrop-leave 170ms ease both; }

@supports (mask-composite: exclude) {
  .cx-contact-dialog[open][data-rim-motion="on"]:not([data-state="closing"]) .cx-contact-panel::before {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    background: conic-gradient(from var(--cx-contact-rim-angle), transparent 0deg, transparent 285deg, rgb(202 166 91 / .15) 305deg, #d6b778 329deg, #fff1c2 341deg, #d6b778 348deg, transparent 360deg);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: cx-contact-rim-turn 9s linear infinite;
  }
}

@keyframes cx-contact-rim-turn { to { --cx-contact-rim-angle: 360deg; } }
@keyframes cx-contact-enter { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes cx-contact-leave { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px) scale(.99); } }
@keyframes cx-contact-backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes cx-contact-backdrop-leave { from { opacity: 1; } to { opacity: 0; } }

@media (max-width: 1000px) {
  .hub-nav[data-open] .cx-contact-mobile-trigger { display: block; }
}
@media (max-width: 600px) {
  .cx-contact-panel { padding: 72px 24px 28px; }
  .cx-contact-heading { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 12px; margin-bottom: 26px; }
  .cx-contact-heading-icon { width: 48px; height: 48px; }
  .cx-contact-dialog-icon { width: 26px; height: 26px; }
  .cx-contact-title { font-size: 32px; line-height: 1.1; }
  .cx-contact-description { font-size: 14px; }
  .cx-contact-action { gap: 14px; padding: 14px 16px; font-size: 15px; }
}
@media (max-width: 400px) {
  .cx-contact-panel { padding-inline: 20px; }
  .cx-contact-title { font-size: 30px; }
  .cx-contact-description { grid-column: 1 / -1; }
  .cx-contact-action { gap: 12px; padding-inline: 14px; }
}
@media (max-height: 560px) {
  .cx-contact-dialog { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .cx-contact-panel { padding-top: 64px; padding-bottom: 24px; }
  .cx-contact-heading { margin-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-contact-dialog[open][data-state] .cx-contact-panel,
  .cx-contact-dialog[open][data-state]::backdrop,
  .cx-contact-dialog[open][data-rim-motion="on"] .cx-contact-panel::before { animation: none; transform: none; }
  .cx-contact-action, .cx-contact-close { transition: none; }
}