/* ==========================================================================
   Contact Us — /contact-us/                           (2026-08-09)
   ==========================================================================
   The black/gold design language, same tokens as in-the-media.css and
   frontpage.css.

   🚨 THIS PAGE HAS NO JAVASCRIPT AND NO FETCHED FRAGMENT, and that is because
   of the form. The contact form is WPForms, rendered by the shortcode
   `[wpforms id="1309"]` — and a shortcode only runs if WordPress processes the
   text it sits in. Page CONTENT is processed; a file pulled in through
   `data-fetch-html` is served straight from uploads and never sees the
   shortcode parser, so the form would render as the literal string
   `[wpforms id="1309"]`. The whole page is therefore server-rendered content.

   Which is also why this sheet is enqueued server-side in Code Snippet #15
   (`is_page(...)`) rather than through `data-fetch-css`: the markup arrives in
   the first response, so a stylesheet that lands after first paint would show
   the page unstyled and then jump. Same reason /staff/ and /scholars/ are
   enqueued that way.

   ⚠️ WPForms brings its own stylesheet. Everything under `.cu-form` is written
   to sit on top of that rather than replace it — restyling a plugin's form
   wholesale breaks the next time it updates. Only spacing, colour and the
   submit button are touched.
   ========================================================================== */

.cu,
.cu-band {
  --cu-gold:     #B89642;
  --cu-ink:      #14171F;
  --cu-ink-soft: #4A4E58;
  --cu-line:     #D8D8D8;
  --cu-bg:       #EFEFEF;
}

/* ---------- title band ---------- */
/* The band stays INSIDE the measure and only its background escapes — the
   method insights.css settled on. Written the other way (`width: 100vw` with a
   fixed max-width inner) the title only lines up on a window at least as wide
   as that inner, and slides out of the gutter below it. */
.cu-band {
  position: relative !important;
  color: #fff !important;
}
.cu-band::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; bottom: 0 !important;
  left: 50% !important; width: 100vw !important; margin-left: -50vw !important;
  background: #000 !important;
}
.cu-band__inner {
  position: relative !important;
  padding: 64px 0 60px !important;
}
.cu-band__title {
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: clamp(34px, 3.4vw, 52px) !important;
  font-weight: 700 !important;
  line-height: 1.06 !important;
  letter-spacing: .01em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin: 0 !important;
}

/* ---------- ground ---------- */
.cu {
  position: relative !important;
  display: block !important;
  font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: var(--cu-ink) !important;
  padding-bottom: 72px !important;
}
.cu::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important; width: 100vw !important; margin-left: -50vw !important;
  top: 0 !important; bottom: 0 !important;
  background: var(--cu-bg) !important;
  z-index: -1 !important;
}

/* ---------- address / socials beside the map ---------- */
.cu-top {
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
  gap: 0 64px !important;
  align-items: start !important;
  padding: 56px 0 0 !important;
}
.cu-block + .cu-block { margin-top: 38px !important; }

.cu-h {
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  color: var(--cu-gold) !important;
  margin: 0 0 12px !important;
}
.cu-p {
  font-size: 17px !important;
  line-height: 1.75 !important;
  color: var(--cu-ink) !important;
  margin: 0 !important;
}
.cu-mail {
  color: var(--cu-ink) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--cu-gold) !important;
  padding-bottom: 1px !important;
}
.cu-mail:hover { color: var(--cu-gold) !important; }

/* ---------- socials ---------- */
/* Icons are INLINE SVG, lifted from the site footer so the two sets are the
   same drawing. Not <img>: the HKU WAF drops any page-content write carrying an
   absolute image src — verified on a probe page before this was written, along
   with the shortcode and the map iframe, both of which save fine. */
.cu-social {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
}
.cu-social__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  color: var(--cu-ink) !important;
  text-decoration: none !important;
  transition: color .18s ease, transform .18s ease !important;
}
.cu-social__link:hover { color: var(--cu-gold) !important; transform: translateY(-2px) !important; }
.cu-social__link svg { width: 22px !important; height: 22px !important; display: block !important; }
/* Rednote has no glyph in the set — the footer prints its wordmark, so this
   does too rather than inventing a mark for it. */
.cu-social__link span {
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* ---------- map ---------- */
.cu-map { position: relative !important; }
.cu-map__frame {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  border: 0 !important;
}

/* ---------- form ---------- */
.cu-form {
  margin-top: 64px !important;
  padding-top: 48px !important;
  border-top: 1px solid var(--cu-line) !important;
}
.cu-h--form {
  font-size: clamp(24px, 2.2vw, 34px) !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  color: var(--cu-ink) !important;
  margin-bottom: 26px !important;
}
/* WPForms' own markup below. Touched lightly on purpose — see the note at the
   top of this file. */
.cu-form .wpforms-container { max-width: none !important; margin: 0 !important; }
.cu-form .wpforms-field { padding: 0 0 18px !important; }
.cu-form .wpforms-field-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--cu-ink-soft) !important;
}
.cu-form input[type="text"],
.cu-form input[type="email"],
.cu-form select,
.cu-form textarea {
  border: 1px solid var(--cu-line) !important;
  border-radius: 0 !important;
  background: #fff !important;
  font-size: 16px !important;
  padding: 12px 14px !important;
}
.cu-form input:focus,
.cu-form select:focus,
.cu-form textarea:focus {
  outline: 2px solid var(--cu-gold) !important;
  outline-offset: 1px !important;
  border-color: var(--cu-gold) !important;
}
.cu-form button[type="submit"] {
  background: var(--cu-ink) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 13px 30px !important;
  font-family: "Poppins", "Noto Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}
.cu-form button[type="submit"]:hover { background: var(--cu-gold) !important; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .cu-top { gap: 0 40px !important; }
}
@media (max-width: 767px) {
  .cu-band__inner { padding: 44px 0 40px !important; }
  .cu-top {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 36px 0 !important;
    padding-top: 34px !important;
  }
  .cu-map__frame { aspect-ratio: 3 / 2 !important; }
  .cu-form { margin-top: 44px !important; padding-top: 34px !important; }
}