/* =====================================================================
   QA Madness - Contact Us page (redesign)
   ---------------------------------------------------------------------
   SCOPING RULE: every selector is prefixed with `.contact-us` (the page's
   <main> wrapper) so nothing here can affect other templates. The shared
   redesign header chrome lives in shared/home-header.css (one file shared by
   all redesign pages). Design tokens (--h-*) are defined there on
   body.qm-redesign-header and inherit into this page's content; both files
   load together. Enqueued only on page-contact-us.php.
   ===================================================================== */

/* ---------- Fonts (self-hosted, shipped with the theme) ---------- */
@font-face {
  font-family: "GT Sectra Display";
  src: url("../../fonts/GTSectraDisplaySuper.woff2") format("woff2"),
       url("../../fonts/GTSectraDisplaySuper.woff") format("woff");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Wrapper base ---------- */
.contact-us {
  --cu-green: var(--h-green, #3fe3b6);
  --cu-green-solid: var(--ds-green-solid, #00cca6);
  --cu-green-grad: var(--h-green-grad, linear-gradient(135deg, #45e6ba 0%, #16bc8f 100%));
  --cu-purple: var(--h-purple, #8e6cff);
  --cu-purple-grad: var(--h-purple-grad, linear-gradient(135deg, #9170ff 0%, #6a47f0 100%));
  --cu-lilac: var(--h-lilac, #cbbcff);
  --cu-on-light: var(--h-on-light, #1a1430);
  --cu-band: #0a0910;
  --cu-band-alt: #060509;
  --cu-card: rgba(255, 255, 255, 0.03);
  --cu-border: rgba(255, 255, 255, 0.09);
  --cu-border-strong: rgba(255, 255, 255, 0.16);
  --cu-text: var(--h-text, #ffffff);
  --cu-muted: var(--h-muted, #cccbd2);
  --cu-muted-2: var(--h-muted-2, #6f6f80);
  --cu-radius: var(--h-radius, 14px);
  --cu-radius-lg: var(--h-radius-lg, 22px);
  --cu-pill: var(--h-pill, 999px);
  --cu-dark-purple: #5336A1;

  font-family: var(--h-font, "Noto Sans", Arial, sans-serif);
  color: var(--cu-text);
  background: #110d1a;
  font-size: 15px;
  line-height: 1.6;
  overflow-x: clip;
}
/* Page canvas behind the transparent overlapping header matches the hero. */
body.contact-us-page { background: #110d1a; }

.contact-us *,
.contact-us *::before,
.contact-us *::after { box-sizing: border-box; }
.contact-us img { max-width: 100%; height: auto; }
.contact-us h1,
.contact-us h2,
.contact-us h3,
.contact-us h4 {
  margin: 0;
  color: var(--cu-text);
  font-family: var(--h-font, "Noto Sans", Arial, sans-serif);
  font-weight: 700;
  line-height: 1.14;
}
.contact-us p { margin: 0; }
.contact-us a { color: inherit; text-decoration: none; }

/* Rich-text (WYSIWYG) containers: the editor wraps content in <p>, which would
   otherwise pick up font-size/weight from a global `p` rule instead of the
   container (the cause of text resizing after a field was filled in). Force the
   inner <p> to inherit the container's font so filled == empty, and normalize
   paragraph spacing; underline any links. */
.contact-us .cu-hero__sub p,
.contact-us .cu-formcard__note p,
.contact-us .cu-methodcard__text p,
.contact-us .cu-team__sub p,
.contact-us .cu-person__desc p {
  margin: 0 0 0.6em;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  font-family: inherit;
  color: inherit;
}
.contact-us .cu-hero__sub p:last-child,
.contact-us .cu-formcard__note p:last-child,
.contact-us .cu-methodcard__text p:last-child,
.contact-us .cu-team__sub p:last-child,
.contact-us .cu-person__desc p:last-child { margin-bottom: 0; }
.contact-us .cu-hero__sub a,
.contact-us .cu-formcard__note a,
.contact-us .cu-methodcard__text a,
.contact-us .cu-team__sub a,
.contact-us .cu-person__desc a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Layout primitives ---------- */
.contact-us .cu-container {
  width: 100%;
  max-width: var(--h-container, 1200px);
  margin-inline: auto;
  padding-inline: 20px;
}
.contact-us .cu-section { padding: 72px 0; position: relative; }

/* ---------- Accent spans ---------- */
.contact-us .cu-accent {
  background: linear-gradient(120deg, #a98bff 0%, #7d51f1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.contact-us .cu-accent--green { color: var(--cu-green); }

/* ---------- Hero ---------- */
.contact-us .cu-hero { padding: 92px 0 26px; text-align: center; }
.contact-us .cu-hero__head { max-width: 760px; margin: 0 auto; }
.contact-us .cu-hero .cu-h {
  font-size: 48px;
  letter-spacing: -0.01em;
  line-height: 1.417; /* 48/68 */
}
.contact-us .cu-hero__sub {
  margin-top: 16px;
  color: var(--cu-text);
  font-size: 18px;
}

/* ---------- Main two-column layout ---------- */
.contact-us .cu-main { padding-top: 20px; }
.contact-us .cu-main__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: start;
}

/* ---------- Form card ---------- */
.contact-us .cu-formcard {
  position: relative;
  padding: 40px;
  border-radius: var(--cu-radius-lg);
  border: 1px solid rgba(63, 227, 182, 0.28);
  /* Form gradient: #15111E @50% -> #00886F @50% (from design). */
  background: linear-gradient(135deg, rgba(21, 17, 30, 0.5) 0%, rgba(0, 136, 111, 0.5) 100%);
}
.contact-us .cu-formcard__title { font-size: 48px; line-height: 1.417; letter-spacing: -0.01em; } /* 48/68 */
.contact-us .cu-formcard__note { margin-top: 8px; color: var(--cu-text); font-size: 18px; }

.contact-us .cu-form { margin-top: 26px; }
.contact-us .cu-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-us .cu-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-us .cu-form__field { margin-bottom: 18px; }
.contact-us .cu-form__row .cu-form__field { margin-bottom: 18px; }

.contact-us .cu-form__field label,
.contact-us .cu-form__services legend {
  display: block;
  margin-bottom: 8px;
  color: var(--cu-green);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.contact-us .cu-req { color: var(--cu-green); }

.contact-us .cu-form input[type="text"],
.contact-us .cu-form input[type="email"],
.contact-us .cu-form textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--cu-radius);
  border: 1px solid rgba(104, 220, 199, 0.5);
  background: rgba(13, 26, 24, 0.5);
  color: var(--cu-text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  transition: border-color var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)), box-shadow var(--ds-dur, 200ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.contact-us .cu-form textarea { resize: vertical; min-height: 120px; }
.contact-us .cu-form input::placeholder,
.contact-us .cu-form textarea::placeholder { color: rgba(104, 220, 199, 0.5); opacity: 1; }
.contact-us .cu-form input:focus,
.contact-us .cu-form textarea:focus {
  outline: none;
  border-color: var(--cu-green);
  box-shadow: 0 0 0 3px rgba(63, 227, 182, 0.18);
}
/* Autofill: WebKit repaints the field with its own light bg + text colour,
   wiping the dark styling. Mask the bg with an inset box-shadow, force the
   text/caret colour, and defer the native bg repaint with a long transition.
   Mirrors the AA form fix (#0d1a18 = the opaque form of the input bg). */
.contact-us .cu-form input:-webkit-autofill,
.contact-us .cu-form textarea:-webkit-autofill,
.contact-us .cu-form input:-webkit-autofill:hover,
.contact-us .cu-form textarea:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--cu-text);
  caret-color: var(--cu-text);
  -webkit-box-shadow: 0 0 0 1000px #0d1a18 inset;
  box-shadow: 0 0 0 1000px #0d1a18 inset;
  transition: background-color 9999s ease-in-out 0s;
}
.contact-us .cu-form input:-webkit-autofill:focus,
.contact-us .cu-form textarea:-webkit-autofill:focus {
  border-color: var(--cu-green);
  -webkit-box-shadow: 0 0 0 1000px #0d1a18 inset, 0 0 0 3px rgba(63, 227, 182, 0.18);
  box-shadow: 0 0 0 1000px #0d1a18 inset, 0 0 0 3px rgba(63, 227, 182, 0.18);
}
/* Chrome autofill PREVIEW (shown while hovering a dropdown suggestion) uses
   internal pseudo-classes distinct from :-webkit-autofill. Kept in SEPARATE
   rules so an unrecognized pseudo in one Chrome version can't invalidate the
   other. Non-Chrome browsers ignore these unknown pseudo-classes. */
.contact-us .cu-form input:-internal-autofill-previewed,
.contact-us .cu-form textarea:-internal-autofill-previewed {
  -webkit-text-fill-color: var(--cu-text) !important;
  box-shadow: 0 0 0 1000px #0d1a18 inset !important;
}
.contact-us .cu-form input:-internal-autofill-selected,
.contact-us .cu-form textarea:-internal-autofill-selected {
  -webkit-text-fill-color: var(--cu-text) !important;
  box-shadow: 0 0 0 1000px #0d1a18 inset !important;
}
/* Standard cross-browser catch-all. */
.contact-us .cu-form input:autofill,
.contact-us .cu-form textarea:autofill {
  -webkit-text-fill-color: var(--cu-text) !important;
  box-shadow: 0 0 0 1000px #0d1a18 inset !important;
}
/* Validation: invalid fields are highlighted red (no inline message text). */
.contact-us .cu-form__field.has-error label { color: #ff8f8f; }
.contact-us .cu-form__field.has-error .cu-req { color: #ff5c5c; }
.contact-us .cu-form__field.has-error input,
.contact-us .cu-form__field.has-error textarea {
  border-color: #ff5c5c;
  background: rgba(255, 92, 92, 0.08);
}
.contact-us .cu-form__field.has-error input::placeholder,
.contact-us .cu-form__field.has-error textarea::placeholder { color: rgba(255, 140, 140, 0.7); }
.contact-us .cu-form__field.has-error input:focus,
.contact-us .cu-form__field.has-error textarea:focus {
  border-color: #ff5c5c;
  box-shadow: 0 0 0 3px rgba(255, 92, 92, 0.18);
}
.contact-us .cu-check--consent.has-error .cu-check__box { border-color: #ff5c5c; }
.contact-us .cu-check--consent.has-error .cu-check__label { color: #ff8f8f; }

/* Service checkboxes */
.contact-us .cu-form__services { border: 0; margin: 4px 0 20px; padding: 0; }
.contact-us .cu-form__hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: #fff;
  font-size: 13px;
}
.contact-us .cu-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.contact-us .cu-check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}
.contact-us .cu-checks .cu-check {
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid rgba(104, 220, 199, 0.5);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color var(--ds-dur-fast, 150ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)), background var(--ds-dur-fast, 150ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.contact-us .cu-checks .cu-check__box { border-color: rgba(104, 220, 199, 0.5); }
/* Hover: smoothly fill the chip with the same color as the form inputs. */
.contact-us .cu-checks .cu-check:hover { background: rgba(13, 26, 24, 0.5); }
.contact-us .cu-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.contact-us .cu-check__box {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1.5px solid var(--cu-border-strong);
  background: transparent;
  position: relative;
  transition: border-color var(--ds-dur-fast, 150ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)), background var(--ds-dur-fast, 150ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.contact-us .cu-check__box::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 4px;
  height: 8px;
  border: solid #05231b;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
  opacity: 0;
  transition: opacity var(--ds-dur-fast, 150ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.contact-us .cu-check__label { color: #fff; font-size: 14px; }
.contact-us .cu-checks .cu-check__label { color: rgba(104, 220, 199, 0.5); font-weight: 500; }
.contact-us .cu-check input:checked ~ .cu-check__box {
  background: var(--cu-green);
  border-color: var(--cu-green);
}
.contact-us .cu-check input:checked ~ .cu-check__box::after { opacity: 1; }
.contact-us .cu-checks .cu-check:has(input:checked) {
  border-color: var(--cu-green);
  background: rgba(63, 227, 182, 0.10);
}
.contact-us .cu-check input:focus-visible ~ .cu-check__box {
  outline: 2px solid var(--cu-green);
  outline-offset: 2px;
}
/* Keyboard focus ring for links + buttons (mirrors the AI page's global rule). */
.contact-us a:focus-visible,
.contact-us button:focus-visible {
  outline: 2px solid var(--cu-green, #3fe3b6);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Consent */
.contact-us .cu-check--consent { align-items: flex-start; margin: 6px 0 22px; }
.contact-us .cu-check--consent .cu-check__box { margin-top: 2px; }
.contact-us .cu-check--consent .cu-check__label { font-size: 14px; line-height: 1.5; }
.contact-us .cu-check--consent a { color: var(--cu-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Legal note */
.contact-us .cu-form__legal { margin-top: 16px; color: rgba(104, 220, 199, .5); font-size: 12px; text-align: center; }
.contact-us .cu-form__legal a { color: rgba(104, 220, 199); text-decoration: underline; }

/* Notices */
.contact-us .cu-notice { margin: 4px 0 20px; padding: 13px 16px; border-radius: var(--cu-radius); font-size: 14px; }
.contact-us .cu-notice--ok { background: rgba(63, 227, 182, 0.12); border: 1px solid rgba(63, 227, 182, 0.4); color: #a9f2dc; }
.contact-us .cu-notice--err { background: rgba(255, 92, 92, 0.1); border: 1px solid rgba(255, 92, 92, 0.4); color: #ffb4b4; }

/* Cloudflare Turnstile widget + async form status message. */
.contact-us .cu-form__turnstile { min-height: 65px; margin: 4px 0 18px; }
.contact-us .cu-form__status { width: fit-content; max-width: 100%; margin: 16px auto 0; padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; text-align: center; }
/* Success: neutral dark pill (the green checkmark on the button carries the tone). */
.contact-us .cu-form__status.is-success { background: rgba(6, 20, 17, 0.72); border: 1px solid rgba(104, 220, 199, 0.3); color: #cfeee6; }
/* Error: red highlight. */
.contact-us .cu-form__status.is-error { background: rgba(229, 72, 77, 0.14); border: 1px solid rgba(229, 72, 77, 0.55); color: #ffb4b4; }

/* ---------- Buttons (arrow animation ported from the homepage .home-btn) ----------
   On hover: the gap between the label and the trailing arrow widens (stretching the
   button), the arrow slides, and a gradient sheen fades in from the arrow end -
   the same choreography as the homepage buttons. */
.contact-us .cu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border: 0;
  border-radius: var(--cu-pill);
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  position: relative;
  z-index: 0;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.3s ease,
              gap 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-us .cu-btn svg { flex: 0 0 auto; }
/* Hover: the gap between the centred label and the arrow widens, so the button
   itself stretches wider (homepage green-button mechanic). Content-sized buttons
   grow; the label stays centred within them. */
.contact-us .cu-btn:hover { transform: translateY(-1px); gap: 24px; }
/* Gradient sheen overlay - fades in on hover (delayed so it lands after the
   stretch), brightest toward the arrow. z-index:-1 keeps it below the label. */
.contact-us .cu-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.5s ease 0.18s;
}
.contact-us .cu-btn:hover::after { opacity: 1; }


.contact-us .cu-btn--green { background: var(--cu-green-grad); color: #05231b; }
.contact-us .cu-btn--green::after,
.contact-us .cu-person--green .cu-person__btn::after {
  background: linear-gradient(to right, rgba(69, 230, 186, 0) 35%, rgba(69, 230, 186, 0.95) 100%);
}

.contact-us .cu-btn--lilac { background: var(--cu-lilac); color: var(--cu-on-light); }
.contact-us .cu-btn--lilac::after,
.contact-us .cu-person--lilac .cu-person__btn::after {
  background: linear-gradient(to right, rgba(227, 219, 255, 0) 35%, rgba(227, 219, 255, 0.95) 100%);
}
/* Andrew's purple button: lighter-purple sheen. */
.contact-us .cu-person--purple .cu-person__btn::after {
  background: linear-gradient(to right, rgba(185, 166, 255, 0) 35%, rgba(185, 166, 255, 0.95) 100%);
}

/* Send button stays centred (per the form design); the arrow still slides. */
.contact-us .cu-form__btn { width: 100%; padding: 15px 22px; justify-content: center; }
/* In-flight state: grey/dim the button + spinner (the arrow icon is hidden).
   (.cu-btn::after is the hover sheen, so the spinner uses ::before.) */
.contact-us .cu-btn.is-loading { cursor: progress; opacity: 0.7; }
.contact-us .cu-btn.is-loading:hover { transform: none; gap: 8px; }
.contact-us .cu-btn.is-loading svg { display: none; }
.contact-us .cu-btn.is-loading::before {
  content: "";
  order: 1; /* push the spinner to the right, where the arrow/check/cross sit */
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: cuBtnSpin 0.7s linear infinite;
}
@keyframes cuBtnSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .contact-us .cu-btn.is-loading::before { animation: none; }
}

/* Result icons in the submit button: only the arrow shows at rest; loading swaps
   in the spinner (above); success/error swap in an animated check / cross. */
.contact-us .cu-btn__ico--check,
.contact-us .cu-btn__ico--cross { display: none; }
.contact-us .cu-btn.is-success .cu-btn__ico--arrow,
.contact-us .cu-btn.is-error .cu-btn__ico--arrow { display: none; }
.contact-us .cu-btn.is-success .cu-btn__ico--check,
.contact-us .cu-btn.is-error .cu-btn__ico--cross { display: inline-block; }

/* Success stays green (its checkmark draws in); error turns red with a cross. */
.contact-us .cu-btn.is-success,
.contact-us .cu-btn.is-error { cursor: default; opacity: 1; }
.contact-us .cu-btn.is-success:hover,
.contact-us .cu-btn.is-error:hover { transform: none; gap: 8px; }
.contact-us .cu-btn.is-error { background: linear-gradient(135deg, #ff6b6b, #e5484d); color: #fff; }
.contact-us .cu-btn.is-error::after { opacity: 0; }

/* Draw-in animation for the check / cross strokes + a small pop of the icon. */
.contact-us .cu-btn__ico--check path { stroke-dasharray: 30; stroke-dashoffset: 30; }
.contact-us .cu-btn.is-success .cu-btn__ico--check { animation: cuIcoPop 0.32s ease; }
.contact-us .cu-btn.is-success .cu-btn__ico--check path { animation: cuIcoDraw 0.4s ease 0.05s forwards; }
.contact-us .cu-btn__ico--cross .cu-x1,
.contact-us .cu-btn__ico--cross .cu-x2 { stroke-dasharray: 16; stroke-dashoffset: 16; }
.contact-us .cu-btn.is-error .cu-btn__ico--cross { animation: cuIcoPop 0.32s ease; }
.contact-us .cu-btn.is-error .cu-btn__ico--cross .cu-x1 { animation: cuIcoDraw 0.2s ease forwards; }
.contact-us .cu-btn.is-error .cu-btn__ico--cross .cu-x2 { animation: cuIcoDraw 0.2s ease 0.16s forwards; }
@keyframes cuIcoDraw { to { stroke-dashoffset: 0; } }
@keyframes cuIcoPop { 0% { transform: scale(0.4); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .contact-us .cu-btn__ico--check path,
  .contact-us .cu-btn__ico--cross .cu-x1,
  .contact-us .cu-btn__ico--cross .cu-x2 { stroke-dashoffset: 0; animation: none; }
  .contact-us .cu-btn.is-success .cu-btn__ico--check,
  .contact-us .cu-btn.is-error .cu-btn__ico--cross { animation: none; }
}

/* ---------- Aside contact-method cards ---------- */
.contact-us .cu-aside { display: grid; gap: 20px; }
.contact-us .cu-methodcard {
  padding: 26px 24px;
  border-radius: var(--cu-radius-lg);
  border: 1px solid var(--cu-dark-purple);
  background: var(--cu-card);
  text-align: center;
}
.contact-us .cu-methodcard__title { font-size: 18px; font-weight: 700; }
.contact-us .cu-methodcard__text { margin-top: 8px; color: var(--cu-text); font-size: 16px; font-weight: lighter; }
.contact-us .cu-methodcard__btn { margin-top: 18px; }

.contact-us .cu-pill {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 20px;
  border-radius: var(--cu-pill);
  border: 1px solid var(--cu-lilac);
  background: var(--cu-lilac);
  color: var(--cu-on-light);
  font-weight: 600;
  font-size: 14px;
  transition: filter var(--ds-dur-fast, 150ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.contact-us .cu-pill:hover { filter: brightness(1.05); }

/* Phones */
.contact-us .cu-phones { list-style: none; width: fit-content; margin: 16px auto 0; padding: 0; display: grid; gap: 14px; }
.contact-us .cu-phones__item { display: flex; align-items: center; justify-content: flex-start; gap: 14px; }
.contact-us .cu-phones__badge {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: #5336a1;
  color: #cbb9f9;
  font-size: 15px;
  font-weight: 700;
}
.contact-us .cu-phones__num { color: var(--cu-lilac); font-size: 18px; font-weight: 700; transition: color var(--ds-dur-fast, 150ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)); }
.contact-us .cu-phones__num:hover { color: #ffffff; }

/* ---------- Team / routing ---------- */
.contact-us .cu-team { background: #08070e; padding: 84px 0 92px; }
.contact-us .cu-team__head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.contact-us .cu-team__head .cu-h { font-size: 48px; line-height: 1.417; letter-spacing: -0.01em; } /* 48/68 */
.contact-us .cu-team__sub { margin-top: 16px; color: var(--cu-text); font-size: 18px; font-weight: 700; }

.contact-us .cu-team__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.contact-us .cu-person {
  display: flex;
  flex-direction: column;
  border-radius: var(--cu-radius-lg);
  border: 1px solid var(--cu-border);
  background: var(--cu-card);
  overflow: hidden;
}
/* Per-person card background + border (Andrew=purple, Mike=lilac, Anastasia=green). */
.contact-us .cu-person--purple,
.contact-us .cu-person--lilac { background: #15111e; border-color: #5336a1; }
.contact-us .cu-person--green { background: rgba(13, 26, 24, 0.5); border-color: #00886f; }
.contact-us .cu-person__photo {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 18px 18px 0;
  border-radius: var(--cu-radius);
  border: 1px solid transparent;
  overflow: hidden;
}
.contact-us .cu-person__photo img { width: 100%; height: 100%; object-fit: cover; }
.contact-us .cu-person__initial { font-size: 72px; font-weight: 800; color: rgba(255, 255, 255, 0.85); font-family: var(--h-serif, Georgia, serif); }
/* Photo tile background + framing border per tone (restores the stroke the SVGs carried). */
.contact-us .cu-person--purple .cu-person__photo { background: var(--cu-purple-grad); border-color: #7d51f1; }
.contact-us .cu-person--green .cu-person__photo  { background: linear-gradient(135deg, #45e6ba 0%, #12b489 100%); border-color: #1ed9a6; }
.contact-us .cu-person--lilac .cu-person__photo  { background: linear-gradient(135deg, #d7c9ff 0%, #b7a2f7 100%); border-color: #cbb9f9; }

.contact-us .cu-person__body { padding: 22px 22px 26px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.contact-us .cu-person__name { font-size: 24px; }
.contact-us .cu-person--purple .cu-person__name { color: var(--cu-purple); }
.contact-us .cu-person--green .cu-person__name  { color: var(--cu-green); }
.contact-us .cu-person--lilac .cu-person__name  { color: var(--cu-lilac); }
.contact-us .cu-person__role { margin-top: 6px; font-weight: 700; font-size: 18px; }
.contact-us .cu-person__desc { margin-top: 12px; color: var(--cu-text); font-size: 14px; line-height: 1.55; }
.contact-us .cu-person__btn { margin-top: 20px; }
.contact-us .cu-person--purple .cu-person__btn { background: #7d51f1; color: #fff; }
.contact-us .cu-person--lilac .cu-person__btn { background: var(--cu-lilac); color: var(--cu-on-light); }
.contact-us .cu-person--green .cu-person__btn { background: var(--cu-green-grad); color: #05231b; }
.contact-us .cu-person__email { margin-top: 16px; color: var(--cu-text); font-size: 13px; transition: color var(--ds-dur-fast, 150ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)), transform var(--ds-dur-fast, 150ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)); }
/* Email hover: scales up slightly (transform, so it doesn't reflow the card) and
   takes the person's name colour. */
.contact-us .cu-person__email:hover { transform: scale(1.08); }
.contact-us .cu-person--purple .cu-person__email:hover { color: var(--cu-purple); }
.contact-us .cu-person--green .cu-person__email:hover { color: var(--cu-green); }
.contact-us .cu-person--lilac .cu-person__email:hover { color: var(--cu-lilac); }
/* LinkedIn: grey badge + grey label at rest. On hover the label takes the
   person's name colour + bold, and the badge cross-fades from grey to that
   person's gradient icon (an ::after overlay so it animates smoothly). */
.contact-us .cu-person__linkedin { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; color: var(--cu-text); font-size: 13px; transition: color var(--ds-dur-fast, 150ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1)); }
.contact-us .cu-person__li-badge {
  width: 26px; height: 26px; flex: 0 0 auto; position: relative;
  background: url("../images/contact-us/linkedin-rest.svg") center/contain no-repeat;
}
.contact-us .cu-person__li-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--li-hover) center/contain no-repeat;
  opacity: 0;
  transition: opacity var(--ds-dur-fast, 150ms) var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.contact-us .cu-person--purple .cu-person__li-badge { --li-hover: url("../images/contact-us/linkedin-purple.svg"); }
.contact-us .cu-person--green  .cu-person__li-badge { --li-hover: url("../images/contact-us/linkedin-green.svg"); }
.contact-us .cu-person--lilac  .cu-person__li-badge { --li-hover: url("../images/contact-us/linkedin-lilac.svg"); }
.contact-us .cu-person__linkedin:hover .cu-person__li-badge::after { opacity: 1; }
.contact-us .cu-person__linkedin:hover > span:last-child { font-weight: 700; }
.contact-us .cu-person--purple .cu-person__linkedin:hover { color: var(--cu-purple); }
.contact-us .cu-person--green .cu-person__linkedin:hover { color: var(--cu-green); }
.contact-us .cu-person--lilac .cu-person__linkedin:hover { color: var(--cu-lilac); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .contact-us .cu-main__grid { grid-template-columns: minmax(0, 1fr); }
  .contact-us .cu-formcard { min-width: 0; }
  .contact-us .cu-hero .cu-h { font-size: 42px; }
  .contact-us .cu-team__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}
@media (max-width: 620px) {
  .contact-us .cu-section { padding: 56px 0; }
  .contact-us .cu-hero { padding: 74px 0 18px; }
  .contact-us .cu-hero .cu-h { font-size: 34px; }
  .contact-us .cu-formcard { padding: 26px 20px; }
  .contact-us .cu-formcard__title { font-size: 27px; }
  .contact-us .cu-form__row { grid-template-columns: 1fr; gap: 0; }
  .contact-us .cu-team__head .cu-h { font-size: 30px; }
  /* Service options stack as full-width rows on mobile (per the mobile design). */
  .contact-us .cu-checks { flex-direction: column; gap: 12px; }
  .contact-us .cu-checks .cu-check { width: 100%; }
  /* Form header is centred on mobile (per the mobile design); labels stay left. */
  .contact-us .cu-formcard__title,
  .contact-us .cu-formcard__note { text-align: center; }
  /* Cloudflare Turnstile ("flexible" size) has a 300px minimum width. When the
     card is narrower than that (small phones) the widget rendered wider than its
     box and forced the page wide (shrink-to-fit "stretch" after the async widget
     loaded). Pin it to max(300px,100%) and centre it so it fills the card when
     there's room but sits centred at 300px when narrower, no longer overflowing. */
  .contact-us .cu-form__turnstile {
    width: max(300px, 100%);
    margin-inline: auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ---------- Reduced motion ----------
   Honour prefers-reduced-motion for the page's hover/micro-interactions (the
   shared scroll-reveal and the header chrome already bail on this query). Make
   transitions instant and neutralise the button gap-stretch, arrow slide, and
   email scale so no motion is triggered on hover/focus. */
@media (prefers-reduced-motion: reduce) {
  .contact-us *,
  .contact-us *::before,
  .contact-us *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .contact-us .cu-btn:hover { gap: 8px; transform: none; }
  .contact-us .cu-person__email:hover { transform: none; }
}

/* Pressed state - see the note on .home-btn:active in shared/home-header.css.
   translateY(0) settles the 1px hover lift; the mobile block that already sets
   `transform: none` on hover is unaffected because the two compute alike. */
.contact-us .cu-btn:active:not(:disabled):not(.is-loading):not(.is-success):not(.is-error) {
  transform: translateY(0);
  filter: brightness(0.93);
  transition-duration: var(--ds-dur-fast, 150ms);
}

/* Balanced display headings - see the note in css/home.css. `.cu-h` is the
   shared heading class (hero + team head); the form card names its own. */
.contact-us .cu-h,
.contact-us .cu-formcard__title {
  text-wrap: balance;
}