/* The context panel's surface, with the profile editor's field treatment. */
.contact-page {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr);
  grid-template-areas:"form ." "form intro" "form links" "form .";
  column-gap:clamp(32px,5.5vw,70px);
  row-gap:0;
  align-items:center;
  padding-block:65px;
  min-height:70vh;
}
.contact-intro {grid-area:intro;min-width:0;max-width:450px;align-self:end}
.contact-intro p:not(.eyebrow) {color:var(--muted);font-size:var(--font-body);line-height:1.8;margin-top:24px}
.contact-links {grid-area:links;display:flex;flex-wrap:wrap;align-items:center;align-self:start;gap:10px;margin-top:26px;max-width:450px}
.contact-links .button.small {gap:8px;white-space:nowrap}
.contact-links .button.small .icon {width:16px;height:16px}
.contact-form {
  grid-area:form;
  display:grid;
  gap:22px;
  width:100%;
  max-width:560px;
  min-width:0;
  padding:28px;
  border:1px solid var(--line);
  border-radius:17px;
  background:var(--card);
}
.contact-form-row {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.contact-field,.contact-stage {min-width:0}
.contact-more-fields {display:grid;gap:22px}
.contact-field>label {
  display:block;
  margin:0 0 8px 2px;
  color:var(--muted);
  font-size:var(--font-caption);
  font-weight:650;
  letter-spacing:.08em;
  line-height:1.5;
  text-transform:uppercase;
}
.contact-field>label span {font-weight:400;letter-spacing:0;text-transform:none}
.contact-field :is(input,textarea,select),.contact-select-trigger {
  display:block;
  width:100%;
  min-width:0;
  min-height:48px;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface);
  color:var(--ink);
  font:inherit;
  font-size:var(--font-body);
  line-height:1.5;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.contact-field textarea {min-height:152px;resize:vertical}
.contact-field textarea::placeholder {color:var(--muted);opacity:1}
.contact-field select {cursor:pointer}
@media(hover:hover) {
  .contact-field :is(input,textarea,select):hover,.contact-select-trigger:hover {border-color:var(--muted)}
}
.contact-field :is(input,textarea,select):focus-visible,.contact-select-trigger:focus-visible {
  border-color:var(--accent);
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.contact-select-trigger[aria-expanded="true"] {border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.contact-select-trigger {display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;font-weight:550}
.contact-select-value {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contact-select-trigger .icon {width:16px;height:16px;color:var(--muted);transition:transform .16s ease}
.contact-select-trigger[aria-expanded="true"] .icon {transform:rotate(180deg)}
/* Body-level listbox follows the profile menu without importing Composer's shell. */
.contact-select-menu {
  position:fixed;
  z-index:100;
  overflow:auto;
  overscroll-behavior:contain;
  padding:5px;
  border:1px solid var(--line-strong);
  border-radius:13px;
  background:var(--panel-solid);
  color:var(--ink);
  box-shadow:0 8px 30px rgba(0,0,0,.13),0 2px 6px rgba(0,0,0,.06);
}
.contact-select-option {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:44px;
  padding:10px;
  border-radius:8px;
  color:var(--muted);
  font-size:var(--font-body);
  line-height:1.4;
  cursor:pointer;
}
.contact-select-option[aria-selected="true"] {color:var(--ink);font-weight:650}
.contact-select-option.is-active {background:var(--surface-active);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
.contact-select-option .icon {width:16px;height:16px;color:var(--accent);opacity:0}
.contact-select-option[aria-selected="true"] .icon {opacity:1}
.contact-form-footer {display:grid;gap:18px;border-top:1px solid var(--line);padding-top:22px}
.contact-form-footer p {color:var(--muted);font-size:var(--font-small);line-height:1.6}
.contact-form-footer .button {justify-self:start;min-width:180px}
@media(min-width:721px) and (max-width:1000px),(max-width:480px) {
  .contact-form-row {grid-template-columns:1fr;gap:22px}
}
@media(max-width:720px) {
  .contact-page {grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"intro" "form" "links";gap:32px;padding-block:30px 48px;min-height:0}
  .contact-intro {align-self:auto}
  .contact-intro p:not(.eyebrow) {font-size:20px;line-height:1.6}
  .contact-links {margin-top:0}
  .contact-form {max-width:none;padding:22px 20px}
  .contact-form-footer .button {justify-self:stretch;min-width:0}

  /* With JS, the form grows naturally as its rows expand from 0fr to 1fr.
     The inner overflow clip keeps unrevealed controls out of the layout;
     JS also makes them inert so they cannot receive focus. */
  html[data-contact-progressive] .contact-form {gap:0}
  html[data-contact-progressive] .contact-form-row {display:contents}
  html[data-contact-progressive] .contact-form-row>.contact-field {margin-top:22px}
  html[data-contact-progressive] .contact-stage {display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;pointer-events:none}
  html[data-contact-progressive] .contact-stage.is-revealed {grid-template-rows:1fr;opacity:1;visibility:visible;pointer-events:auto}
  html[data-contact-progressive] .contact-stage-inner {min-height:0;overflow:hidden}
  html[data-contact-progressive] .contact-stage[data-contact-stage="1"] .contact-stage-inner>.contact-field {padding-top:22px}
  html[data-contact-progressive] .contact-more-fields {padding-top:22px}
  html[data-contact-progressive] .contact-form-footer {margin-top:22px}
  html[data-contact-progressive][data-contact-motion="ready"] .contact-stage {transition:grid-template-rows .38s cubic-bezier(.22,.68,.25,1),opacity .25s ease,visibility 0s .38s}
  html[data-contact-progressive][data-contact-motion="ready"] .contact-stage.is-revealed {transition:grid-template-rows .38s cubic-bezier(.22,.68,.25,1),opacity .25s ease,visibility 0s}
}
@media(prefers-reduced-motion:reduce) {
  html[data-contact-progressive] .contact-stage {transition:none!important}
}
/* Leave room for the shared footer's labels when the system font is used. */
@media(max-width:360px) {.shop-footer .footer-nav {column-gap:8px}}
@media(forced-colors:active) {
  .contact-field :is(input,textarea,select),.contact-select-trigger,.contact-select-menu {border-color:ButtonText}
  .contact-select-option.is-active {outline:1px solid Highlight;outline-offset:-1px}
  .contact-select-option[aria-selected="true"] {color:Highlight}
}