/* ==================================================================
   CONTACT — the /contactus page (hero, channels, enquiry form,
   assistance panel) and the homepage "Contact Us" section.

   Markup lives inline in page/contactus.html and index.html. Both are
   loaded by this one file: the homepage section is a compact variant
   of the same components, and splitting them would let the two drift.

   Ported from update/stage5/contact.html (.contact-hero,
   .channels-section, .message-section, .assist-panel, plus the .form-*
   furniture that section depends on). Deviations from the prototype,
   and why:

   1. CLASS NAMES. The prototype uses bare .section, .container, .icon
      and .form-field. .container is live Bootstrap 5 here and the rest
      are generic enough to collide, so everything is namespaced
      .rz-ct__* / .rz-ct-*. Same convention as css/markets.css.

   2. FONTS. The mockup loads Marcellus + Inter from Google Fonts;
      neither covers Arabic (NFR-10). Inherits the site's self-hosted
      'Ping AR + LT' instead.

   3. LIGHT THEME. The prototype is dark-only. The site's moon toggle
      drops data-bs-theme="dark", where translucent white cards on ivory
      and rgba(230,190,74,.75) labels are unreadable, so §7 gives every
      surface a light counterpart with a darker gold (#A8830F, 4.6:1 on
      white) for icons and small labels.

   4. LOCATIONS GRID DROPPED. The prototype ends with a three-card
      Kuwait/Labuan/Mauritius grid built in JS from royce-config.js. The
      footer's Regulated Group Structure strip is already the single
      source for both registered addresses on every page, so those rules
      are not ported. The Kuwait street address is unconfirmed and is
      suppressed rather than placeholdered (BRD §10.2).

   5. ENTRANCE. The prototype has none; the sections carry the site's
      own .animate-on-scroll, which js/general.js already observes.

   Tokens resolve against :root in style.css. The mirror in §1 covers
   only the values style.css does not define — same set as
   css/markets.css and css/funding.css.
   ================================================================== */

/* #region ------- ( 1- Scoped tokens + reset ) ---------- */
.rz-ct-hero,
.rz-ct-channels,
.rz-ct-msg,
.rz-ct-home {
  --line-dark: rgba(214, 166, 28, 0.22);
  --line-light: #e4e1da;
  --text-muted-dark: rgba(248, 248, 248, 0.72);
  --text-muted-light: #5b5e66;
  --ct-max-w: 1240px;
  /* Error red is not in the BRD §9.1 token table — that table has no
     status colour. These are the reference's values, kept because they
     are the only two reds anywhere in the ported UI: #c96a6a for the
     1px field border, #e5a0a0 for text on the dark surface (5.9:1). */
  --ct-error-line: #c96a6a;
  --ct-error-text: #e5a0a0;
}
.rz-ct-hero,
.rz-ct-hero *,
.rz-ct-channels,
.rz-ct-channels *,
.rz-ct-msg,
.rz-ct-msg *,
.rz-ct-home,
.rz-ct-home * {
  box-sizing: border-box;
}
/* #endregion */

/* #region ------- ( 2- Section shell + head ) ---------- */
.rz-ct-hero,
.rz-ct-channels,
.rz-ct-msg,
.rz-ct-home {
  position: relative;
  font-family: 'Ping AR + LT', -apple-system, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  color: var(--royce-ivory);
}
.rz-ct__container {
  max-width: var(--ct-max-w);
  margin: 0 auto;
  padding: 0 40px;
}

.rz-ct__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--royce-gold);
  margin-bottom: 16px;
}
.rtl .rz-ct__eyebrow {
  letter-spacing: normal;
}
.rz-ct__head {
  margin-bottom: 28px;
}
.rz-ct__head h2 {
  font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  letter-spacing: 0.02em;
  margin: 0 0 16px;
  color: #ffffff;
}
.rtl .rz-ct__head h2 {
  letter-spacing: normal;
}
.rz-ct__head p {
  font-size: 0.98rem;
  margin: 0;
  color: var(--text-muted-dark);
}

/* Small underlined link, the prototype's .text-link. */
.rz-ct__link {
  align-self: flex-start;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--royce-gold);
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  cursor: pointer;
  color: var(--royce-ivory);
  font-family: inherit;
  transition: color 0.2s ease;
}
.rtl .rz-ct__link {
  letter-spacing: normal;
}
.rz-ct__link:hover,
.rz-ct__link:focus-visible {
  color: var(--royce-gold-hover);
}

.rz-ct-hero a:focus-visible,
.rz-ct-channels a:focus-visible,
.rz-ct-channels button:focus-visible,
.rz-ct-msg a:focus-visible,
.rz-ct-msg button:focus-visible,
.rz-ct-msg input:focus-visible,
.rz-ct-msg select:focus-visible,
.rz-ct-msg textarea:focus-visible,
.rz-ct-home a:focus-visible,
.rz-ct-home button:focus-visible,
.rz-ct-home input:focus-visible,
.rz-ct-home textarea:focus-visible {
  outline: 2px solid var(--royce-gold);
  outline-offset: 3px;
}
/* #endregion */

/* #region ------- ( 3- Hero ) ---------- */
.rz-ct-hero {
  display: flex;
  align-items: center;
  min-height: 44svh;
  background: var(--royce-navy);
  overflow: hidden;
}
/* Concentric gold rings, offset off the right edge. Fine accent only —
   BRD §9.1 rules out large gold fills, so these are 1px borders and
   4%/2% shadows, not a glow. */
.rz-ct-hero::before {
  content: '';
  position: absolute;
  inset-inline-end: -220px;
  top: 50%;
  transform: translateY(-50%);
  width: 720px;
  height: 720px;
  border-radius: 50%;
  border: 1px solid rgba(214, 166, 28, 0.14);
  box-shadow:
    0 0 0 90px rgba(214, 166, 28, 0.04),
    0 0 0 200px rgba(214, 166, 28, 0.02);
  pointer-events: none;
}
.rz-ct-hero::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 166, 28, 0.45), transparent);
}
.rz-ct-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
  /* Top padding clears the fixed navbar; --nav-h is published by
     js/layout.js:88 and falls back for the pre-JS paint. */
  padding: calc(var(--nav-h, 78px) + 52px) 0 64px;
}
.rz-ct-hero h1 {
  font-weight: 400;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  letter-spacing: 0.02em;
  color: #ffffff;
  margin: 0 0 20px;
}
.rtl .rz-ct-hero h1 {
  letter-spacing: normal;
}
.rz-ct-hero p {
  font-size: 1rem;
  max-width: 580px;
  margin: 0;
  color: var(--text-muted-dark);
}
.rz-ct-hero p + p {
  margin-top: 10px;
  font-size: 0.9rem;
  color: rgba(248, 248, 248, 0.55);
}
/* #endregion */

/* #region ------- ( 4- Channel cards ) ---------- */
.rz-ct-channels {
  background: var(--royce-navy);
  padding: 64px 0 80px;
}
.rz-ct-channels__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.rz-ct-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-dark);
  background: rgba(248, 248, 248, 0.02);
  padding: 32px 28px;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}
.rz-ct-card:hover {
  border-color: rgba(214, 166, 28, 0.5);
  background: rgba(214, 166, 28, 0.04);
}
.rz-ct-card__icon {
  width: 30px;
  height: 30px;
  color: var(--royce-gold);
  margin-bottom: 18px;
}
.rz-ct-card__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* WhatsApp's brand green is the one colour on this page that is not a
   Royce token. It identifies a third-party channel, which is exactly
   what BRD §9.1 leaves room for. */
.rz-ct-card__icon.is-wa,
.rz-ct-row__icon.is-wa {
  color: #25d366;
}
.rz-ct-card h3 {
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  color: #ffffff;
  margin: 0 0 8px;
}
.rtl .rz-ct-card h3 {
  letter-spacing: normal;
}
.rz-ct-card__value {
  display: block;
  font-size: 0.84rem;
  color: var(--royce-gold-hover);
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}
.rz-ct-card__value:empty::before {
  /* Live Chat has no address or number to show. Keeps the four cards'
     internals on the same baseline without inventing a value. */
  content: '\00a0';
}
.rz-ct-card p {
  font-size: 0.84rem;
  color: var(--text-muted-dark);
  margin: 0 0 20px;
  flex-grow: 1;
}
/* #endregion */

/* #region ------- ( 5- Message: form + assistance panel ) ---------- */
.rz-ct-msg {
  background: var(--royce-black);
  padding: 80px 0;
}
.rz-ct-msg__layout {
  display: grid;
  grid-template-columns: minmax(0, 700px) minmax(280px, 1fr);
  gap: 48px;
  align-items: start;
}
.rz-ct-msg .rz-ct__head h2 {
  margin-bottom: 10px;
}

/* --- form --- */
.rz-ct-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.rz-ct-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.rz-ct-field.is-full {
  grid-column: 1 / -1;
}
.rz-ct-field > label {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--royce-ivory);
}
.rtl .rz-ct-field > label {
  letter-spacing: normal;
}
.rz-ct-field .rz-ct-req {
  color: var(--royce-gold);
}
.rz-ct-field input,
.rz-ct-field select,
.rz-ct-field textarea {
  width: 100%;
  background: rgba(248, 248, 248, 0.04);
  border: 1px solid rgba(248, 248, 248, 0.22);
  border-radius: 0;
  color: var(--royce-ivory);
  font-family: inherit;
  font-size: 0.9rem;
  padding: 11px 14px;
  transition: border-color 0.2s ease;
}
.rz-ct-field select option {
  color: var(--royce-black);
}
.rz-ct-field input::placeholder,
.rz-ct-field textarea::placeholder {
  color: rgba(248, 248, 248, 0.38);
}
.rz-ct-field input:focus,
.rz-ct-field select:focus,
.rz-ct-field textarea:focus {
  border-color: var(--royce-gold);
  outline: none;
}
.rz-ct-field textarea {
  min-height: 115px;
  resize: vertical;
}
.rz-ct-field__error {
  display: none;
  font-size: 0.74rem;
  color: var(--ct-error-text);
}
.rz-ct-field.is-invalid input,
.rz-ct-field.is-invalid select,
.rz-ct-field.is-invalid textarea {
  border-color: var(--ct-error-line);
}
.rz-ct-field.is-invalid .rz-ct-field__error {
  display: block;
}

.rz-ct-consent {
  grid-column: 1 / -1;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}
/* The checkbox and its label sit side by side; the error has to drop onto
   its own line beneath both, not squeeze in as a third column. */
.rz-ct-consent .rz-ct-field__error {
  width: 100%;
}
.rz-ct-consent input {
  width: 17px;
  height: 17px;
  margin-top: 3px;
  accent-color: var(--royce-gold);
  flex-shrink: 0;
  padding: 0;
}
.rz-ct-consent label {
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--text-muted-dark);
}
.rz-ct-consent a {
  color: var(--royce-gold-hover);
}
.rz-ct-consent.is-invalid input {
  outline: 1px solid var(--ct-error-line);
  outline-offset: 2px;
}

/* Off-screen, aria-hidden, tabindex="-1": invisible to a person, filled
   by a bot. Never display:none — some bots skip hidden fields. */
.rz-ct-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 0;
  opacity: 0;
  overflow: hidden;
}

.rz-ct-status {
  grid-column: 1 / -1;
  display: none;
  font-size: 0.86rem;
  padding: 14px 18px;
}
.rz-ct-status.is-success {
  display: block;
  background: rgba(214, 166, 28, 0.1);
  border: 1px solid var(--royce-gold);
  color: var(--royce-gold-hover);
}
.rz-ct-status.is-error {
  display: block;
  background: rgba(201, 106, 106, 0.1);
  border: 1px solid var(--ct-error-line);
  color: var(--ct-error-text);
}
.rz-ct-form__actions {
  grid-column: 1 / -1;
  margin-top: 6px;
}

/* This rule used to open by explaining that it would NOT reuse the hero button
   because that one "is 15px taller than this form wants". Every button is the
   same height now — see css/buttons.css — so what is left here is colour and
   motion, and the RTL tracking reset moved to the shared tokens. */
.rz-ct-submit {
  border-color: var(--royce-gold);
  background: var(--royce-gold);
  color: var(--royce-black);
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}
.rz-ct-submit:hover,
.rz-ct-submit:focus-visible {
  background: var(--royce-gold-hover);
  border-color: var(--royce-gold-hover);
}
.rz-ct-submit[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- assistance panel --- */
.rz-ct-assist {
  border: 1px solid var(--line-dark);
  background: var(--royce-navy);
  padding: 32px 30px;
  position: sticky;
  top: calc(var(--nav-h, 78px) + 22px);
}
.rz-ct-assist h3 {
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  color: #ffffff;
  margin: 0 0 20px;
}
.rtl .rz-ct-assist h3 {
  letter-spacing: normal;
}
.rz-ct-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid rgba(214, 166, 28, 0.12);
}
.rz-ct-row:last-of-type {
  border-bottom: 0;
}
.rz-ct-row__icon {
  width: 18px;
  height: 18px;
  color: var(--royce-gold);
  flex-shrink: 0;
  margin-top: 2px;
}
.rz-ct-row__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.rz-ct-row > div {
  min-width: 0;
}
.rz-ct-row__label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(248, 248, 248, 0.55);
  margin-bottom: 2px;
}
.rtl .rz-ct-row__label {
  letter-spacing: normal;
}
.rz-ct-row a,
.rz-ct-row button {
  font-family: inherit;
  font-size: 0.86rem;
  color: var(--royce-ivory);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow-wrap: anywhere;
  text-align: start;
}
.rz-ct-row a:hover,
.rz-ct-row a:focus-visible,
.rz-ct-row button:hover,
.rz-ct-row button:focus-visible {
  color: var(--royce-gold-hover);
}
.rz-ct-assist__note {
  margin: 20px 0 0;
  padding: 14px 16px;
  border: 1px solid rgba(214, 166, 28, 0.25);
  font-size: 0.75rem;
  color: var(--text-muted-dark);
}
/* #endregion */

/* #region ------- ( 6- Homepage compact variant ) ---------- */
.rz-ct-home {
  background: var(--royce-black);
  padding: 96px 0;
  border-top: 1px solid var(--line-dark);
}
.rz-ct-home .rz-ct__head {
  max-width: 660px;
  margin: 0 auto 56px;
  text-align: center;
}
.rz-ct-home__layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 620px);
  gap: 48px;
  align-items: start;
}

/* Left rail: the same four channels as /contactus, one line each. */
.rz-ct-home__channels {
  border: 1px solid var(--line-dark);
  background: rgba(248, 248, 248, 0.02);
  padding: 30px 28px;
}
.rz-ct-home__channels h3 {
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  color: #ffffff;
  margin: 0 0 18px;
}
.rtl .rz-ct-home__channels h3 {
  letter-spacing: normal;
}
.rz-ct-home__more {
  margin-top: 22px;
}

.rz-ct-home .rz-ct-form {
  border: 1px solid var(--line-dark);
  background: var(--royce-navy);
  padding: 32px 30px;
}
/* #endregion */

/* #region ------- ( 7- Light theme ) ---------- */
html:not([data-bs-theme='dark']) .rz-ct-hero,
html:not([data-bs-theme='dark']) .rz-ct-channels {
  background: var(--royce-ivory);
  color: var(--royce-grey);
}
html:not([data-bs-theme='dark']) .rz-ct-msg,
html:not([data-bs-theme='dark']) .rz-ct-home {
  background: #ffffff;
  color: var(--royce-grey);
}
html:not([data-bs-theme='dark']) .rz-ct-hero h1,
html:not([data-bs-theme='dark']) .rz-ct__head h2,
html:not([data-bs-theme='dark']) .rz-ct-card h3,
html:not([data-bs-theme='dark']) .rz-ct-assist h3,
html:not([data-bs-theme='dark']) .rz-ct-home__channels h3 {
  color: var(--royce-black);
}
html:not([data-bs-theme='dark']) .rz-ct-hero p,
html:not([data-bs-theme='dark']) .rz-ct__head p,
html:not([data-bs-theme='dark']) .rz-ct-card p,
html:not([data-bs-theme='dark']) .rz-ct-consent label,
html:not([data-bs-theme='dark']) .rz-ct-assist__note {
  color: var(--text-muted-light);
}
html:not([data-bs-theme='dark']) .rz-ct-hero p + p {
  color: #6f727a;
}
html:not([data-bs-theme='dark']) .rz-ct-hero::before {
  border-color: rgba(214, 166, 28, 0.28);
  box-shadow:
    0 0 0 90px rgba(214, 166, 28, 0.05),
    0 0 0 200px rgba(214, 166, 28, 0.03);
}
html:not([data-bs-theme='dark']) .rz-ct-card,
html:not([data-bs-theme='dark']) .rz-ct-assist,
html:not([data-bs-theme='dark']) .rz-ct-home__channels,
html:not([data-bs-theme='dark']) .rz-ct-home .rz-ct-form {
  background: #ffffff;
  border-color: var(--line-light);
}
html:not([data-bs-theme='dark']) .rz-ct-card:hover {
  background: #ffffff;
  border-color: var(--royce-gold);
  box-shadow: 0 14px 30px -18px rgba(17, 17, 17, 0.28);
}
/* #D6A61C is 1.9:1 on white — below the 4.5:1 NFR-03 floor for text-sized
   marks. #A8830F is 4.6:1. WhatsApp green keeps its brand value; it is a
   30px icon beside its own labelled heading, not load-bearing text. */
html:not([data-bs-theme='dark']) .rz-ct-card__icon,
html:not([data-bs-theme='dark']) .rz-ct-row__icon,
html:not([data-bs-theme='dark']) .rz-ct__eyebrow,
html:not([data-bs-theme='dark']) .rz-ct-card__value,
html:not([data-bs-theme='dark']) .rz-ct-field .rz-ct-req {
  color: #a8830f;
}
html:not([data-bs-theme='dark']) .rz-ct-card__icon.is-wa,
html:not([data-bs-theme='dark']) .rz-ct-row__icon.is-wa {
  color: #1da851;
}
html:not([data-bs-theme='dark']) .rz-ct__link,
html:not([data-bs-theme='dark']) .rz-ct-row a,
html:not([data-bs-theme='dark']) .rz-ct-row button,
html:not([data-bs-theme='dark']) .rz-ct-field > label {
  color: var(--royce-grey);
}
html:not([data-bs-theme='dark']) .rz-ct__link:hover,
html:not([data-bs-theme='dark']) .rz-ct__link:focus-visible,
html:not([data-bs-theme='dark']) .rz-ct-row a:hover,
html:not([data-bs-theme='dark']) .rz-ct-row a:focus-visible,
html:not([data-bs-theme='dark']) .rz-ct-row button:hover,
html:not([data-bs-theme='dark']) .rz-ct-row button:focus-visible,
html:not([data-bs-theme='dark']) .rz-ct-consent a {
  color: #a8830f;
}
html:not([data-bs-theme='dark']) .rz-ct-row__label {
  color: #6f727a;
}
html:not([data-bs-theme='dark']) .rz-ct-field input,
html:not([data-bs-theme='dark']) .rz-ct-field select,
html:not([data-bs-theme='dark']) .rz-ct-field textarea {
  background: #ffffff;
  border-color: #cfccc4;
  color: var(--royce-black);
}
html:not([data-bs-theme='dark']) .rz-ct-field input::placeholder,
html:not([data-bs-theme='dark']) .rz-ct-field textarea::placeholder {
  color: #8b8e95;
}
/* #b4342f is 5.1:1 on white; #E5A0A0 is 2.0:1 and unreadable there. */
html:not([data-bs-theme='dark']) .rz-ct-field__error,
html:not([data-bs-theme='dark']) .rz-ct-status.is-error {
  color: #b4342f;
}
html:not([data-bs-theme='dark']) .rz-ct-status.is-error {
  background: rgba(201, 106, 106, 0.08);
}
html:not([data-bs-theme='dark']) .rz-ct-status.is-success {
  background: rgba(214, 166, 28, 0.08);
  color: #7a5f0b;
}
/* #endregion */

/* #region ------- ( 8- Responsive ) ---------- */
@media (max-width: 1100px) {
  .rz-ct-channels__grid {
    grid-template-columns: 1fr 1fr;
  }
  .rz-ct-msg__layout,
  .rz-ct-home__layout {
    grid-template-columns: 1fr;
  }
  .rz-ct-assist {
    position: static;
  }
}
@media (max-width: 900px) {
  .rz-ct__container {
    padding: 0 24px;
  }
  .rz-ct-channels {
    padding: 52px 0 64px;
  }
  .rz-ct-msg,
  .rz-ct-home {
    padding: 68px 0;
  }
  .rz-ct-home .rz-ct__head {
    margin-bottom: 40px;
  }
  .rz-ct-form {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .rz-ct-hero__inner {
    padding: calc(var(--nav-h, 78px) + 38px) 0 52px;
  }
  .rz-ct-channels__grid {
    grid-template-columns: 1fr;
  }
  .rz-ct-card {
    padding: 26px 22px;
  }
  .rz-ct-assist,
  .rz-ct-home__channels,
  .rz-ct-home .rz-ct-form {
    padding: 26px 22px;
  }
  .rz-ct-submit {
    width: 100%;
  }
}
/* #endregion */

/* #region ------- ( 9- Reduced motion ) ---------- */
@media (prefers-reduced-motion: reduce) {
  .rz-ct-hero *,
  .rz-ct-hero *::before,
  .rz-ct-hero *::after,
  .rz-ct-channels *,
  .rz-ct-channels *::before,
  .rz-ct-channels *::after,
  .rz-ct-msg *,
  .rz-ct-msg *::before,
  .rz-ct-msg *::after,
  .rz-ct-home *,
  .rz-ct-home *::before,
  .rz-ct-home *::after {
    transition: none !important;
  }
}
/* #endregion */