/* ARTVERSE · enquire.css · /enquire only (loaded after site.css) */

/* 1. Hero --------------------------------------------------------------------------
   LUOMU spirit without a figure: giant thin ENQUIRE glowing on a misty ground, the
   Bodoni caps h1 and the copy right under it, so the form starts close to the top.
   ≥1000px: copy left, a short aside right. <1000px: one column.
   The Concrete veil starts clear under the header so VERSE never sits on mid-grey. */
.enq-hero { position: relative; }
.enq-hero__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(58% 60% at 50% 70%, rgba(244, 244, 243, .9) 0%, rgba(244, 244, 243, 0) 70%),
    linear-gradient(180deg, rgba(139, 142, 146, 0) 0, rgba(139, 142, 146, 0) 90px, rgba(139, 142, 146, .34) 30%, rgba(139, 142, 146, .12) 55%, rgba(139, 142, 146, 0) 80%),
    var(--mist);
}
.enq-hero__giant {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--header-h) + clamp(.5rem, 2vw, 1.5rem));
  z-index: 0;
  margin: 0;
  text-align: center;
  color: var(--white);
  text-shadow: 0 0 .03em rgba(255, 255, 255, .95), 0 0 .12em rgba(255, 255, 255, .7), 0 0 .3em rgba(255, 255, 255, .45);
  user-select: none;
  pointer-events: none;
}
.enq-hero__content {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 2.5rem;
  padding-top: calc(var(--header-h) + clamp(.5rem, 2vw, 1.5rem) + .9 * var(--fs-hero-thin) + .75rem);
  padding-bottom: clamp(2.75rem, 6vw, 4.5rem);
}
.enq-hero__copy { display: grid; gap: 1.4rem; justify-items: start; max-width: 36rem; }
.enq-hero__copy .lede { color: var(--graphite); max-width: 40ch; }
.enq-hero__title { max-width: 16em; }
.enq-hero__need { font-family: var(--f-mono); font-size: .9375rem; line-height: 1.5; color: var(--graphite); max-width: 44ch; margin-top: -.4rem; }
.enq-hero__aside { display: grid; gap: 1.1rem; justify-items: start; align-content: start; }
.enq-hero__alt {
  font-family: var(--f-display);
  font-size: 1.25rem;
  line-height: 1.12;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.enq-hero__aside .tag-pair { position: relative; padding-left: 3.25rem; }
.enq-hero__aside .tag-pair::before { content: ""; position: absolute; left: 0; top: .8em; width: 2.25rem; height: 1px; background: var(--black); }
.enq-hero__aside .tag-pair__en { color: var(--graphite); white-space: nowrap; }

@media (min-width: 700px) {
  .enq-hero__content { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 3rem; }
  .enq-hero__aside { padding-bottom: .5rem; padding-right: max(0px, calc(84px - var(--gutter))); } /* clear of the WhatsApp button */
}
@media (min-width: 900px) {
  .enq-hero__aside { padding-right: max(0px, calc(68px - var(--gutter))); }
}
@media (max-width: 699.98px) {
  .enq-hero__aside { display: none; } /* decorative; on phones the form comes first */
}

/* 2. Body: form + aside ---------------------------------------------------------------- */
.enq-body { padding-top: clamp(4rem, 8vw, 7.5rem); }
.enq-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(3rem, 6vw, 7rem);
  align-items: start;
}
.enq-main { min-width: 0; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.enq-main__head { display: grid; gap: 1.5rem; justify-items: start; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.enq-main__head .lede { max-width: 48ch; }
@media (max-width: 999.98px) {
  /* On phones and tablets the hero already introduces the form: go straight to it. */
  .enq-main__head { display: none; }
}

/* 3. Form ------------------------------------------------------------------------------ */
.enq-form { display: grid; gap: clamp(2.5rem, 4.5vw, 3.5rem); container-type: inline-size; }
.enq-group { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 1.5rem; }
.enq-group__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.25rem;
  width: 100%;
  margin: 0 0 1.25rem;
  padding: 0 0 .9rem;
  border-bottom: 1px solid var(--rule);
}
.enq-group__legend .field__cn { font-size: .9375rem; }
.enq-group__hint { margin-top: -.25rem; }
.enq-group > .field__hint, .enq-group > .field__error { max-width: 52ch; }

.field__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.field__cn { font-family: var(--f-cn); font-weight: 400; font-size: .875rem; letter-spacing: .08em; text-transform: none; color: var(--graphite); }
.field__req {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: .8125rem;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--graphite);
}
.field__hint { color: var(--graphite); line-height: 1.45; }
.field__error { margin-top: .1rem; }
.enq-guide-link { display: block; width: fit-content; margin-top: .35rem; color: var(--black); }
.field__input[aria-invalid="true"] { border-bottom: 2px solid var(--ember); }
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--black);
  -webkit-box-shadow: 0 0 0 100px var(--white) inset;
  caret-color: var(--black);
}
/* Every field is a clear white box with a full border, so it reads as somewhere to type. */
.enq-form .field__input {
  min-height: 56px;
  padding: .85rem 1rem;
  border: 1px solid rgba(17, 17, 18, .45);
  background: var(--white);
  box-shadow: inset 0 1px 2px rgba(17, 17, 18, .06);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.enq-form .field__input::placeholder { color: rgba(17, 17, 18, .38); opacity: 1; }
.enq-form .field__input:hover { border-color: var(--black); }
.enq-form .field__input:focus { border-color: var(--black); box-shadow: 0 0 0 1px var(--black), 0 0 0 4px rgba(217, 119, 63, .28); }
.enq-form .field__input:focus-visible { outline: none; }
.enq-form .field__input[aria-invalid="true"],
.enq-form .field.is-invalid .field__input { border: 2px solid var(--ember); }
.enq-form .field__label { color: var(--black); }
textarea.field__input {
  min-height: 10rem;
  line-height: 1.6;
  resize: vertical;
}
textarea.field__input::-webkit-resizer { background: transparent; }

.enq-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem clamp(1.5rem, 3vw, 2.5rem); align-items: start; }

/* Interest: real radio inputs, styled as hairline tiles (number + ring over the name). */
.enq-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.choice { position: relative; display: grid; min-width: 0; cursor: pointer; }
.choice input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choice__box {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 84px;
  padding: .9rem 2.6rem 1rem 1.1rem;
  border: 1px solid rgba(17, 17, 18, .45);
  background: var(--white);
  color: var(--black);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.choice__box::after {
  content: "";
  position: absolute;
  top: .95rem;
  right: 1rem;
  width: 14px;
  height: 14px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.choice__name { min-width: 0; font-family: var(--f-display); font-size: clamp(1.125rem, .95rem + .4vw, 1.375rem); line-height: 1.12; }
.choice:hover .choice__box { border-color: var(--black); }
.choice input:checked + .choice__box { background: var(--black); color: var(--white); border-color: var(--black); }
.choice input:checked + .choice__box::after { background: var(--ember); border-color: var(--ember); box-shadow: inset 0 0 0 3px var(--black); }
.choice input:focus-visible + .choice__box { outline: 2px solid var(--black); outline-offset: 3px; }
@container (max-width: 539.98px) {
  .enq-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice__box { min-height: 72px; padding: .8rem 2.4rem .9rem .9rem; }
  .choice__box::after { top: .85rem; right: .9rem; }
}

/* Submit + status */
.enq-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--black);
}
.enq-submit__btn { min-width: 13.5rem; min-height: 52px; }
.enq-submit__btn[aria-busy="true"]::after {
  content: "";
  width: .9em;
  height: .9em;
  border: 1px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: enq-spin .9s linear infinite;
}
@keyframes enq-spin { to { transform: rotate(360deg); } }
.enq-submit__note { color: var(--graphite); max-width: 32ch; }
.enq-status:empty { display: none; }
.enq-status { display: grid; gap: .9rem; justify-items: start; color: var(--black); }
.enq-status:focus { outline: none; }
.enq-status p { margin: 0; }
@container (max-width: 539.98px) {
  .enq-submit { flex-direction: column; align-items: stretch; }
  .enq-submit__btn { width: 100%; }
  .enq-submit__note { max-width: none; }
}

/* Success state: replaces the form */
.enq-success { display: grid; gap: 1.5rem; justify-items: start; padding-top: .25rem; }
.enq-success__title { font-size: var(--fs-display-xl); line-height: .9; }
.enq-success__title:focus { outline: none; }
.enq-success__title:focus-visible { outline: 2px solid var(--black); outline-offset: 6px; }
.enq-success__copy { color: var(--black); max-width: 36ch; font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.55; }
.enq-success__links {
  display: grid;
  justify-items: start;
  gap: .35rem;
  width: 100%;
  margin-top: 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--black);
}

/* 4. Aside ------------------------------------------------------------------------------- */
.enq-aside { display: grid; gap: clamp(3rem, 5vw, 4.5rem); min-width: 0; }
.enq-aside__title { padding-bottom: .9rem; border-bottom: 1px solid var(--black); }
.enq-guide__list { margin: 0; }
.enq-guide__item {
  position: relative;
  display: grid;
  align-content: start;
  gap: .6rem;
  padding: 1.25rem 0 1.35rem 0;
  border-bottom: 1px solid var(--rule);
  transition: padding .4s var(--ease);
}
.enq-guide__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.25rem;
  bottom: 1.35rem;
  width: 2px;
  background: var(--ember);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .4s var(--ease);
}
.enq-guide__item dt { --lockup-size: 1.25rem; }
.enq-guide__item dd { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--graphite); max-width: 44ch; }
.enq-guide__name {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: .75rem;
  line-height: 1.6;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.enq-guide__item.is-active { padding-left: 1.1rem; }
.enq-guide__item.is-active::before { transform: scaleY(1); }
.enq-guide__item.is-active dd { color: var(--black); }

/* What happens next: three short lines in order, no numbers or arrows (nothing here is a link). */
.enq-next__list { display: grid; }
.enq-next__list li {
  display: grid;
  gap: .25rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
}
.enq-next__step { font-family: var(--f-display); font-size: 1.25rem; line-height: 1.3; }
.enq-next__text { font-size: .9375rem; line-height: 1.55; color: var(--graphite); }

/* 5. Responsive ---------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .enq-guide-link { display: none; } /* the guide sits beside the form */
}
@media (max-width: 1099.98px) {
  .enq-layout { column-gap: 3rem; }
}
@media (max-width: 899.98px) {
  .enq-layout { grid-template-columns: 1fr; }
  .enq-aside { padding-top: clamp(1rem, 4vw, 2rem); }
  .enq-guide { scroll-margin-top: calc(var(--header-h) + 1rem); }
}
@media (min-width: 700px) and (max-width: 899.98px) {
  .enq-guide__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
}
@media (max-width: 639.98px) {
  .enq-pair { grid-template-columns: 1fr; }
}
/* Fallback for browsers without container queries. */
@supports not (container-type: inline-size) {
  @media (max-width: 639.98px) {
    .enq-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .enq-submit { flex-direction: column; align-items: stretch; }
    .enq-submit__btn { width: 100%; }
  }
}

/* Direct contact, above the interest guide. */
.enq-direct__list { display: grid; gap: .9rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.enq-direct__list li { display: grid; gap: .2rem; }
.enq-direct__label { font-family: var(--f-mono); font-size: .8125rem; color: var(--graphite); }
.enq-direct__link { width: fit-content; font-size: clamp(1.125rem, 1rem + .35vw, 1.3rem); font-weight: 500; line-height: 1.35; color: var(--black); text-decoration: none; border-bottom: 1px solid var(--rule-strong); overflow-wrap: anywhere; }
.enq-direct__link:hover { border-bottom-color: var(--ember); }

/* 6. Bilingual (English + 简体中文) --------------------------------------------------------
   Chinese sits straight under (or beside) its English. Block-level Chinese inside a single
   element (hints, notes, guide paragraphs, next-step text, error lines) uses .zh-p as a span. */
.field__hint .zh-p,
.enq-submit__note .zh-p,
.enq-guide__item dd .zh-p,
.enq-next__text .zh-p { display: block; }
.field__hint .zh-p, .enq-submit__note .zh-p { margin-top: .2em; line-height: 1.6; font-size: .95rem; }
.enq-guide__item dd .zh-p { margin-top: .4em; font-size: .9375rem; line-height: 1.75; }
.enq-next__text .zh-p { margin-top: .25em; font-size: .9375rem; line-height: 1.7; }
.enq-guide-link .zh-i { font-size: 1em; }

/* Paragraph pairs inside grids: pull the Chinese up to its English. */
.enq-hero__copy > .zh-p { margin-top: -1rem; color: var(--graphite); max-width: 36rem; }
.enq-hero__copy > .enq-hero__need + .zh-p { margin-top: -1.1rem; font-size: .9375rem; }
.enq-main__head > .zh-p { margin-top: -1.1rem; max-width: 48ch; }
.enq-success > .zh-p { margin-top: -1.1rem; }
.enq-hero__alt .zh-sub { font-size: .95rem; letter-spacing: .12em; }

/* Error and status lines: the Chinese on its own line, in the Chinese face. */
.field__error .zh-i,
.enq-status p .zh-i { display: block; margin: .15em 0 0; font-size: .95rem; letter-spacing: .04em; line-height: 1.6; }
.field__req .zh-i { margin-left: .35em; font-size: 1em; letter-spacing: .08em; }

/* Interest tiles: English name with its Chinese line under it. */
.choice__cn { display: block; margin: .3rem 0 0; font-size: .9375rem; line-height: 1.4; letter-spacing: .1em; opacity: .75; }
.choice input:checked + .choice__box .choice__cn { opacity: .85; }

/* Guide names (Pageant / Something else) and the eyebrow asides keep the Chinese close. */
.enq-guide__name .zh-i { font-size: 1.2em; letter-spacing: .1em; }
.enq-direct__label .zh-i { margin-left: .4em; }
.enq-next__step .zh-i { font-size: .8em; letter-spacing: .08em; }

/* Bilingual placeholders and hints need more room than two half-width fields give in a
   narrow form column (tablet, small laptop): stack phone and email there. */
@container (max-width: 619.98px) {
  .enq-pair { grid-template-columns: 1fr; }
}
.enq-pair .field__hint .zh-i { white-space: nowrap; }

/* Phones: let the tile names use the full tile width; the ring sits above the name. */
@container (max-width: 539.98px) {
  .choice__box { padding: 2.1rem .9rem .9rem; }
}