/* ==========================================================================
   CONTACT PAGE — /contactus (November 2026 redesign)

   The supplier's custom design (contact.html + assets/css/contact.css),
   ported body-only: the site header and footer are the shared partials, as
   on every page, so the mockup's header, mobile menu, footer and theme
   button rules are not here. Behaviour is js/contact-page.js; sending is
   ctPost() in js/contact.js.

   What changed in the port, and why:

   1. SCOPE. Every rule hangs off .rzc (the <main>), including the tokens and
      the reset, so nothing here can reach the header, the footer or another
      page. Bootstrap's .container, .btn and .lead would have collided, so the
      page uses .rzc-container, .cf-submit and .intro-lead instead.

   2. THEME. The mockup switches on html[data-theme]; the site's toggle
      writes html[data-bs-theme], so the dark token set keys on that. Light
      is the default, dark the override, exactly as in the mockup.

   3. FONTS. Inter was never shipped (CLAUDE.md); body text is Royce Sans.
      Headings keep the mockup's Marcellus, self-hosted and Latin-ranged, and
      Arabic, Vietnamese and Chinese fall back to Royce Sans — same rule as
      /royce-x.

   4. BREAKPOINTS. The mockup's 680 / 699.98 / 900 / 1080 / 1100 widths are
      moved to the site ladder (docs/responsive-breakpoints.md): 768, 992 and
      1200. Container queries are kept as they were.

   5. HEADER OFFSET. The site header is fixed, not sticky: the intro reserves
      var(--nav-h) and the sticky panels clear it.
   ========================================================================== */

/* ---------- Tokens (light, the default) ---------- */
.rzc {
  --font-display: 'Marcellus', 'Royce Sans', Georgia, 'Times New Roman', serif;
  --font-body: 'Royce Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --max-w: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --control-h: 52px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ink-reversed: #f4f1ea;

  /* Navy band (telephone directory) — light text in both themes */
  --band-text: #f5f7fb;
  --band-text-2: #b8c4d8;
  --band-gold: #e6be4a;
  --band-success: #63d7a3;
  --band-line: rgba(245, 247, 251, 0.14);
  --band-raise: rgba(245, 247, 251, 0.06);
  --band-focus: #e6be4a;
  --whatsapp: #25d366;

  color-scheme: light;
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #eaf0f8;
  --band: #0b1628;
  --text: #17243b;
  --text-2: #55637a;
  --border: #d6dfea;
  --control-border: #7f8ba0;
  --control-border-hover: #5f6d84;
  --input-bg: #ffffff;
  --dial-bg: #f4f6fa;
  --placeholder: #66748b;
  --gold-bg: #d6a61c;
  --gold-bg-hover: #e6be4a;
  --on-gold: #0b1628;
  --gold: #8a6412;
  --sapphire: #255ad5;
  --on-sapphire: #ffffff;
  --teal: #0e766e;
  --success: #137a53;
  --error: #b42318;
  --gold-tint: #f7f1e3;
  --sapphire-tint: #ebf0fb;
  --teal-tint: #e7f2f1;
  --success-tint: #eaf3f0;
  --error-tint: #f8ebea;
  --focus: #255ad5;
  --focus-ring: rgba(37, 90, 213, 0.22);
  --shadow-sm: 0 1px 2px rgba(15, 30, 51, 0.05), 0 4px 14px rgba(15, 30, 51, 0.05);
  --shadow-md: 0 2px 6px rgba(15, 30, 51, 0.05), 0 14px 34px rgba(15, 30, 51, 0.08);
  --shadow-lg: 0 4px 12px rgba(15, 30, 51, 0.05), 0 28px 64px rgba(15, 30, 51, 0.12);
  --ambient-1: rgba(37, 90, 213, 0.14);
  --ambient-2: rgba(14, 118, 110, 0.12);
  --ambient-3: rgba(214, 166, 28, 0.16);
  --art-bg: #0b1628;
  --crest-ink: #111111;
  --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E");
  --i-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.3l2.8 2.8L16.2 9.5'/%3E%3C/svg%3E");
}

/* ---------- Dark theme ---------- */
html[data-bs-theme='dark'] .rzc {
  color-scheme: dark;
  --bg: #07111f;
  --surface: #0f1e33;
  --surface-2: #142841;
  --band: #091628;
  --text: #f5f7fb;
  --text-2: #b8c4d8;
  --border: #2c405c;
  --control-border: #5b7394;
  --control-border-hover: #7c93b3;
  --input-bg: #0a182b;
  --dial-bg: #0d1c31;
  --placeholder: #8d9bb2;
  --gold: #e6be4a;
  --sapphire: #8cb2ff;
  --on-sapphire: #0b1628;
  --teal: #43c8be;
  --success: #63d7a3;
  --error: #ff9c95;
  --gold-tint: #2a2b26;
  --sapphire-tint: #1c2e4b;
  --teal-tint: #133243;
  --success-tint: #16323c;
  --error-tint: #2e2638;
  --focus: #8cb2ff;
  --focus-ring: rgba(140, 178, 255, 0.28);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.3), 0 16px 36px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.3), 0 30px 70px rgba(0, 0, 0, 0.45);
  --ambient-1: rgba(37, 90, 213, 0.16);
  --ambient-2: rgba(67, 200, 190, 0.1);
  --ambient-3: rgba(214, 166, 28, 0.1);
  --art-bg: #050c17;
  --crest-ink: var(--ink-reversed);
}

/* Marcellus is Latin-ranged; these scripts read better on Royce Sans throughout. */
.rzc:lang(ar),
.rzc:lang(vi),
.rzc:lang(zh-hk),
.rzc:lang(zh-tw),
.rzc:lang(zh-cn) {
  --font-display: 'Royce Sans', system-ui, sans-serif;
}

/* ---------- Base ---------- */
.rzc,
.rzc *,
.rzc *::before,
.rzc *::after {
  box-sizing: border-box;
}
.rzc * {
  margin: 0;
  padding: 0;
}
.rzc {
  display: block;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
.rzc h1,
.rzc h2,
.rzc h3,
.rzc h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.rzc img,
.rzc svg {
  display: block;
  max-width: 100%;
}
.rzc a {
  color: inherit;
}
.rzc button,
.rzc input,
.rzc select,
.rzc textarea {
  font: inherit;
  color: inherit;
}
.rzc ul {
  list-style: none;
}
.rzc .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.rzc-container {
  width: 100%;
  max-width: calc(var(--max-w) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.rzc .flip-rtl {
  flex: none;
}
[dir='rtl'] .rzc .flip-rtl {
  transform: scaleX(-1);
}
.rzc [dir='ltr'],
.rzc .tel-number,
.rzc .channel-value {
  unicode-bidi: isolate;
}
.rzc :focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}
.rzc .on-band :focus-visible {
  outline-color: var(--band-focus);
}

.rzc .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-block-end: 12px;
}
.rzc .eyebrow::before {
  content: '';
  inline-size: 28px;
  block-size: 1px;
  background: currentColor;
}
.rtl .rzc .eyebrow,
.rtl .rzc .tel-line-label,
.rtl .rzc .opt,
.rtl .rzc .location-sub {
  letter-spacing: normal;
}

/* ---------- Links ---------- */
.rzc .text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sapphire);
  text-decoration: none;
}
.rzc .text-link svg {
  inline-size: 18px;
  block-size: 18px;
  transition: transform 0.2s ease;
}
.rzc .text-link:hover svg {
  transform: translateX(3px);
}
[dir='rtl'] .rzc .text-link:hover svg {
  transform: scaleX(-1) translateX(3px);
}
.rzc .text-link:hover span {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ==========================================================================
   INTRODUCTION
   ========================================================================== */
.rzc .intro {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: calc(var(--nav-h) + clamp(26px, 3.6vw, 44px)) clamp(22px, 3vw, 36px);
}
.rzc .ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.rzc .ambient span {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}
/* Glows sit behind the copy column and lower edge, clear of the gold eyebrow */
.rzc .ambient span:nth-child(1) {
  inline-size: min(560px, 62vw);
  block-size: 340px;
  inset-block-start: calc(var(--nav-h) - 190px);
  inset-inline-end: -6%;
  background: var(--ambient-1);
  animation: rzc-drift-b 26s ease-in-out infinite alternate;
}
.rzc .ambient span:nth-child(2) {
  inline-size: min(460px, 50vw);
  block-size: 280px;
  inset-block-end: -200px;
  inset-inline-end: 18%;
  background: var(--ambient-2);
  animation: rzc-drift-a 32s ease-in-out infinite alternate;
}
.rzc .ambient span:nth-child(3) {
  inline-size: min(380px, 44vw);
  block-size: 220px;
  inset-block-end: -170px;
  inset-inline-start: 34%;
  background: var(--ambient-3);
  animation: rzc-drift-a 38s ease-in-out infinite alternate-reverse;
}
@media (max-width: 767.98px) {
  .rzc .ambient {
    opacity: 0.7;
  }
  .rzc .ambient span:nth-child(1) {
    inset-inline-end: -30%;
  }
}
.rzc .intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px 56px;
  align-items: end;
}
.rzc .intro h1 {
  font-size: clamp(1.8rem, 1.3rem + 2.6vw, 3.1rem);
  line-height: 1.08;
  color: var(--text);
}
.rzc .intro-copy .intro-lead {
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
  color: var(--text);
  max-inline-size: 62ch;
}
.rzc .intro-copy .lead-secondary {
  margin-block-start: 6px;
  font-size: 0.9375rem;
  color: var(--text-2);
  max-inline-size: 62ch;
}
@media (min-width: 992px) {
  .rzc .intro-grid {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .rzc .intro h1 {
    white-space: nowrap;
  }
  .rzc .intro-copy {
    padding-block-end: 6px;
    justify-self: end;
    max-inline-size: 640px;
  }
}

/* ==========================================================================
   TELEPHONE DIRECTORY BAND
   ========================================================================== */
.rzc .tel-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(700px 240px at 8% 0%, rgba(37, 90, 213, 0.38), transparent 70%), radial-gradient(600px 240px at 96% 110%, rgba(14, 118, 110, 0.34), transparent 70%), radial-gradient(520px 200px at 60% -30%, rgba(214, 166, 28, 0.16), transparent 70%), var(--band);
  color: var(--band-text);
  border-block: 1px solid rgba(230, 190, 74, 0.35);
  box-shadow: 0 18px 40px -24px rgba(7, 17, 31, 0.55);
}
html[data-bs-theme='dark'] .rzc .tel-band {
  border-color: rgba(230, 190, 74, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(245, 247, 251, 0.06),
    0 24px 48px -20px rgba(0, 0, 0, 0.7);
}
.rzc .tel-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(245, 247, 251, 0.05) 45%, transparent 60%);
  background-size: 250% 100%;
  animation: rzc-sheen 14s ease-in-out infinite;
}
.rzc .tel-layout {
  display: grid;
  gap: 18px;
  padding-block: 22px 24px;
}
.rzc .tel-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.rzc .tel-head-ico {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-md);
  background: var(--gold-bg);
  color: var(--on-gold);
}
.rzc .tel-head-ico svg {
  inline-size: 22px;
  block-size: 22px;
}
.rzc .tel-head h2 {
  font-size: 1.5rem;
  color: var(--band-text);
}
.rzc .tel-head p {
  font-size: 0.9rem;
  color: var(--band-text-2);
  line-height: 1.45;
}
.rzc .tel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.rzc .tel-country {
  display: grid;
  gap: 8px;
  padding-block: 16px;
  border-block-start: 1px solid var(--band-line);
  min-inline-size: 0;
}
.rzc .tel-country-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rzc .tel-flag {
  flex: none;
  inline-size: 36px;
  block-size: 24px;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.28),
    0 4px 10px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.rzc .tel-country-head h3 {
  font-size: 1.15rem;
  color: var(--band-text);
  letter-spacing: 0.02em;
}
.rzc .tel-lines {
  display: grid;
  gap: 10px;
}
.rzc .tel-line {
  display: grid;
  align-items: center;
  column-gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'label feedback'
    'number copy';
}
.rzc .tel-line-label {
  grid-area: label;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--band-text-2);
}
/* Primary line (Kuwait Local Office): gold badge, navy text — 8:1 on #D6A61C */
.rzc .tel-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gold-bg);
  color: var(--on-gold);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.45;
  box-shadow: 0 4px 12px rgba(214, 166, 28, 0.22);
}
.rzc .tel-line + .tel-line {
  padding-block-start: 10px;
  border-block-start: 1px dashed var(--band-line);
}
.rzc .tel-line--secondary .tel-number {
  font-size: clamp(1.06rem, 1rem + 0.3vw, 1.2rem);
  font-weight: 600;
}
.rzc .tel-feedback {
  grid-area: feedback;
  justify-self: end;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--band-success);
  opacity: 0;
  transform: translateY(3px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.rzc .tel-feedback.show {
  opacity: 1;
  transform: none;
}
.rzc .tel-feedback.fail {
  color: #ffb4ae;
}
.rzc .tel-number {
  grid-area: number;
  justify-self: start;
  font-size: clamp(1.2rem, 1.05rem + 0.55vw, 1.42rem);
  font-weight: 600;
  letter-spacing: 0.015em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1.3;
  color: var(--band-text);
  text-decoration: none;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  transition: color 0.15s ease;
}
.rzc .tel-number:hover {
  color: var(--band-gold);
}
.rzc .tel-copy {
  grid-area: copy;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--band-line);
  background: var(--band-raise);
  color: var(--band-text-2);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background-color 0.15s ease,
    transform 0.15s ease;
}
.rzc .tel-copy svg {
  grid-area: 1 / 1;
  inline-size: 18px;
  block-size: 18px;
  transition:
    opacity 0.2s ease,
    transform 0.25s var(--ease);
}
.rzc .tel-copy .i-done {
  opacity: 0;
  transform: scale(0.5);
}
.rzc .tel-copy:hover {
  border-color: var(--band-gold);
  color: var(--band-gold);
}
.rzc .tel-copy:active {
  transform: scale(0.94);
}
.rzc .tel-copy.copied {
  border-color: var(--band-success);
  color: var(--band-success);
  background: rgba(99, 215, 163, 0.1);
}
.rzc .tel-copy.copied .i-copy {
  opacity: 0;
  transform: scale(0.5);
}
.rzc .tel-copy.copied .i-done {
  opacity: 1;
  transform: none;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .rzc .tel-country {
    grid-template-columns: minmax(170px, 0.8fr) minmax(0, 1.4fr);
    align-items: center;
    column-gap: 24px;
  }
}
@media (min-width: 1200px) {
  .rzc .tel-layout {
    grid-template-columns: minmax(200px, 0.78fr) repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    padding-block: 24px;
  }
  .rzc .tel-head {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    padding-inline-end: 24px;
  }
  .rzc .tel-grid {
    display: contents;
  }
  .rzc .tel-country {
    border-block-start: 0;
    border-inline-start: 1px solid var(--band-line);
    padding-block: 4px;
    padding-inline: 26px 8px;
    align-content: start;
    gap: 10px;
  }
}

/* ==========================================================================
   MAIN CONTACT AREA
   ========================================================================== */
.rzc .contact-main {
  padding-block: clamp(24px, 3.2vw, 40px) clamp(56px, 7vw, 96px);
  position: relative;
  isolation: isolate;
}
.rzc .contact-main::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 420px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(800px 360px at 85% 0%, var(--ambient-2), transparent 70%);
}
.rzc .main-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1200px) {
  .rzc .main-grid {
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    gap: 32px;
  }
  .rzc .assist-panel {
    position: sticky;
    inset-block-start: calc(var(--nav-h) + 24px);
  }
}

/* ---------- Form panel ---------- */
.rzc .form-panel {
  container: form / inline-size;
  position: relative;
  scroll-margin-block-start: calc(var(--nav-h) + 16px);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(20px, 3.4vw, 40px);
}
.rzc .form-panel::before {
  content: '';
  position: absolute;
  inset-inline: -1px;
  inset-block-start: -1px;
  block-size: 5px;
  border-start-start-radius: var(--radius-lg);
  border-start-end-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--gold-bg) 0%, var(--gold-bg) 22%, #255ad5 58%, #0e766e 100%);
}
[dir='rtl'] .rzc .form-panel::before {
  background: linear-gradient(270deg, var(--gold-bg) 0%, var(--gold-bg) 22%, #255ad5 58%, #0e766e 100%);
}
.rzc .form-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-block-end: 28px;
}
/* Royce icon — Primary (gold R + #111111 bird) on light surfaces, Reversed
   Ivory (gold R + #F4F1EA bird) on dark. Ink box 376.1 × 390.77. */
.rzc .crest {
  flex: none;
  inline-size: 50px;
  block-size: auto;
  aspect-ratio: 376.1 / 390.77;
  overflow: visible;
  color: var(--crest-ink);
  margin-block-start: 2px;
}
.rzc .form-head .eyebrow {
  margin-block-end: 6px;
}
.rzc .form-head h2 {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.05rem);
  color: var(--text);
  margin-block-end: 6px;
}
.rzc .form-head p {
  color: var(--text-2);
  max-inline-size: 60ch;
}

.rzc .form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
@container form (min-width: 540px) {
  .rzc .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
  }
}
.rzc .form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-inline-size: 0;
}
.rzc .form-field.full,
.rzc .consent-row,
.rzc .form-actions,
.rzc .form-status {
  grid-column: 1 / -1;
}
.rzc .form-field > label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.rzc .req {
  color: var(--gold);
}
.rzc .opt {
  margin-inline-start: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}
.rzc .field-error {
  display: none;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--error);
}
.rzc .field-error::before {
  content: '';
  flex: none;
  inline-size: 15px;
  block-size: 15px;
  margin-block-start: 2px;
  background: currentColor;
  -webkit-mask: var(--i-alert) center / contain no-repeat;
  mask: var(--i-alert) center / contain no-repeat;
}
.rzc .form-field.invalid .field-error {
  display: flex;
  animation: rzc-fade-in 0.2s ease both;
}
/* Off-screen, aria-hidden, tabindex="-1": invisible to a person, filled by a
   bot. Never display:none — some bots skip hidden fields. */
.rzc .hp-field {
  position: absolute;
  inset-inline-start: -9999px;
  opacity: 0;
  block-size: 0;
  overflow: hidden;
}

/* Control shell */
.rzc .cf-shell {
  position: relative;
  display: flex;
  align-items: stretch;
  min-inline-size: 0;
  block-size: var(--control-h);
  background: var(--input-bg);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-md);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}
.rzc .cf-shell:hover {
  border-color: var(--control-border-hover);
}
.rzc .cf-shell:focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 4px var(--focus-ring);
}
.rzc .form-field.invalid .cf-shell {
  border-color: var(--error);
  box-shadow: 0 0 0 3px var(--error-tint);
}
.rzc .form-field.verified .cf-shell {
  border-color: var(--success);
  box-shadow: 0 0 0 3px var(--success-tint);
}
.rzc .cf-shell input,
.rzc .cf-shell textarea {
  flex: 1;
  min-inline-size: 0;
  block-size: 100%;
  background: transparent;
  border: 0;
  outline: none;
  border-radius: var(--radius-md);
  padding-inline: 16px;
  font-size: 1rem;
  color: var(--text);
}
.rzc .cf-shell input::placeholder,
.rzc .cf-shell textarea::placeholder {
  color: var(--placeholder);
  opacity: 1;
}
.rzc .cf-shell input:focus-visible,
.rzc .cf-shell textarea:focus-visible {
  outline: none;
}
.rzc .cf-shell-area {
  block-size: auto;
}
.rzc .cf-shell-area textarea {
  block-size: 148px;
  min-block-size: 112px;
  max-block-size: 320px;
  padding-block: 14px;
  line-height: 1.6;
  resize: vertical;
}

/* Custom dropdown */
.rzc .cf-dd {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
}
.rzc .cf-dd-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  inline-size: 100%;
  block-size: 100%;
  padding-inline: 16px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  font-size: 1rem;
  color: var(--text);
  text-align: start;
  cursor: pointer;
}
.rzc .cf-dd-btn:focus-visible {
  outline: none;
}
.rzc .cf-dd-value {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rzc .cf-dd-value.cf-placeholder {
  color: var(--placeholder);
}
.rzc .cf-chevron {
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  border-right: 1.6px solid var(--text-2);
  border-bottom: 1.6px solid var(--text-2);
  transform: translateY(-2px) rotate(45deg);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}
.rzc .cf-dd.open .cf-chevron {
  transform: translateY(2px) rotate(-135deg);
  border-color: var(--focus);
}
.rzc .cf-dd-panel {
  position: absolute;
  z-index: 60;
  inset-inline: -1px;
  inset-block-start: calc(100% + 8px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease,
    visibility 0s linear 0.16s;
}
.rzc .cf-dd.drop-up .cf-dd-panel {
  inset-block-start: auto;
  inset-block-end: calc(100% + 8px);
  transform: translateY(4px);
}
.rzc .cf-dd.open .cf-dd-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.rzc .cf-dd-search {
  display: block;
  inline-size: 100%;
  block-size: 48px;
  padding-inline: 16px;
  background: var(--surface-2);
  border: 0;
  border-block-end: 1px solid var(--border);
  outline: none;
  font-size: 1rem;
  color: var(--text);
}
.rzc .cf-shell .cf-dd-search {
  flex: none;
  block-size: 48px;
  border-radius: 0;
  padding-inline: 16px;
  font-size: 1rem;
} /* outranks .cf-shell input */
.rzc .cf-dd-search::placeholder {
  color: var(--placeholder);
  opacity: 1;
}
.rzc .cf-dd-search:focus {
  box-shadow: inset 0 -2px 0 var(--focus);
}
.rzc .cf-dd-list {
  max-block-size: var(--dd-max, 264px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
}
.rzc .cf-dd-list:focus-visible {
  outline: none;
}
.rzc .cf-dd-list::-webkit-scrollbar {
  inline-size: 10px;
}
.rzc .cf-dd-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 10px;
  border: 3px solid var(--surface);
}
.rzc .cf-dd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 44px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.rzc .cf-dd-item .cf-dd-flag {
  flex: none;
  inline-size: 1.4em;
  text-align: center;
}
.rzc .cf-dd-item .cf-dd-meta {
  margin-inline-start: auto;
  font-size: 0.875rem;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.rzc .cf-dd-item:hover,
.rzc .cf-dd-item.active {
  background: var(--surface-2);
}
.rzc .cf-dd-item.selected {
  color: var(--sapphire);
  font-weight: 600;
}
.rzc .cf-dd-item.selected::after {
  content: '';
  inline-size: 16px;
  block-size: 16px;
  flex: none;
  margin-inline-start: 8px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rzc .cf-dd-empty {
  padding: 14px 12px;
  font-size: 0.9rem;
  color: var(--text-2);
}

/* Telephone: dial code + number + verify in one control; list spans the whole field */
.rzc .cf-phone .cf-dial {
  position: static;
  flex: none;
  inline-size: 92px;
  border-inline-end: 1px solid var(--border);
  background: var(--dial-bg);
  border-start-start-radius: 11px;
  border-end-start-radius: 11px;
}
.rzc .cf-phone .cf-dial .cf-dd {
  position: static;
}
.rzc .cf-phone .cf-dial .cf-dd-btn {
  padding-inline: 14px 10px;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.rzc .cf-phone input {
  padding-inline: 12px;
}

/* Inline verification — shown only when verification endpoints are configured */
.rzc .cf-vaction {
  flex: none;
  display: flex;
  align-items: center;
  padding-inline-end: 4px;
}
.rzc .cf-vaction[hidden],
.rzc .cf-otp[hidden] {
  display: none;
}
.rzc .cf-verify-btn {
  min-block-size: 44px;
  padding-inline: 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--sapphire);
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.rzc .cf-verify-btn:hover:not(:disabled) {
  background: var(--sapphire-tint);
}
.rzc .cf-verify-btn:disabled {
  color: var(--placeholder);
  cursor: default;
}
.rzc .cf-verified-chip {
  display: none;
  align-items: center;
  gap: 6px;
  padding-inline: 10px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--success);
  white-space: nowrap;
}
.rzc .cf-verified-chip svg {
  inline-size: 14px;
  block-size: 14px;
}
.rzc .form-field.verified .cf-verified-chip {
  display: flex;
  animation: rzc-pop 0.45s var(--ease) both;
}
.rzc .form-field.verified .cf-verify-btn {
  display: none;
}

.rzc .cf-otp {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  margin-block-start: -8px;
  transition:
    grid-template-rows 0.32s var(--ease),
    opacity 0.24s ease,
    margin 0.32s var(--ease),
    visibility 0s linear 0.32s;
}
.rzc .cf-otp.show {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  margin-block-start: 0;
  transition-delay: 0s;
}
.rzc .cf-otp-inner {
  min-block-size: 0;
  overflow: hidden;
}
.rzc .cf-otp-box {
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--sapphire);
}
.rzc .cf-otp-note {
  font-size: 0.9rem;
  color: var(--text-2);
  margin-block-end: 12px;
  overflow-wrap: anywhere;
}
.rzc .cf-otp-note strong {
  color: var(--text);
  font-weight: 600;
}
.rzc .cf-otp-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.rzc .cf-otp-input {
  inline-size: 9.5rem;
  block-size: 48px;
  flex: none;
  background: var(--input-bg);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  outline: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.rzc .cf-otp-input::placeholder {
  color: var(--placeholder);
  opacity: 1;
  letter-spacing: 0.3em;
}
.rzc .cf-otp-input:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 4px var(--focus-ring);
}
.rzc .cf-otp-confirm {
  block-size: 48px;
  padding-inline: 22px;
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--sapphire);
  border: 1px solid var(--sapphire);
  color: var(--on-sapphire);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition:
    filter 0.15s ease,
    opacity 0.15s ease;
}
.rzc .cf-otp-confirm:hover:not(:disabled) {
  filter: brightness(1.08);
}
.rzc .cf-otp-confirm:disabled {
  opacity: 0.45;
  cursor: default;
}
.rzc .cf-otp-resend {
  margin-inline-start: auto;
  min-block-size: 44px;
  padding-inline: 4px;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rzc .cf-otp-resend:hover:not(:disabled) {
  color: var(--text);
}
.rzc .cf-otp-resend:disabled {
  text-decoration: none;
  cursor: default;
  font-variant-numeric: tabular-nums;
}
.rzc .cf-otp-msg {
  display: none;
  font-size: 0.875rem;
  margin-block-start: 10px;
}
.rzc .cf-otp-msg.show {
  display: block;
}
.rzc .cf-otp-msg.err {
  color: var(--error);
}
.rzc .cf-otp-msg.info {
  color: var(--text-2);
}
@container form (max-width: 420px) {
  .rzc .cf-otp-resend {
    margin-inline-start: 0;
  }
  .rzc .form-head {
    gap: 14px;
  }
  .rzc .crest {
    inline-size: 38px;
  }
}

/* Consent */
.rzc .cf-consent {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 6px;
  align-items: start;
  position: relative;
}
.rzc .cf-consent input {
  position: absolute;
  opacity: 0;
  inline-size: 44px;
  block-size: 44px;
  inset-inline-start: -10px;
  inset-block-start: -9px;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}
.rzc .cf-box {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  margin-block-start: 1px;
  border: 1.5px solid var(--control-border);
  border-radius: 7px;
  background: var(--input-bg);
  color: var(--on-sapphire);
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease;
}
.rzc .cf-box svg {
  inline-size: 16px;
  block-size: 16px;
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity 0.15s ease,
    transform 0.2s var(--ease);
}
.rzc .cf-consent input:checked ~ .cf-box {
  background: var(--sapphire);
  border-color: var(--sapphire);
}
.rzc .cf-consent input:checked ~ .cf-box svg {
  opacity: 1;
  transform: none;
}
.rzc .cf-consent input:focus-visible ~ .cf-box {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.rzc .cf-consent.invalid .cf-box {
  border-color: var(--error);
  box-shadow: 0 0 0 3px var(--error-tint);
}
.rzc .cf-consent > label {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-2);
  cursor: pointer;
}
.rzc .cf-consent > label a {
  color: var(--sapphire);
  font-weight: 600;
  text-underline-offset: 3px;
}
.rzc .cf-consent .field-error {
  grid-column: 2;
}

/* Status notifications */
.rzc .form-status {
  display: none;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  line-height: 1.55;
  border: 1px solid;
}
.rzc .form-status::before {
  content: '';
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  margin-block-start: 1px;
  background: currentColor;
}
.rzc .form-status.success {
  display: flex;
  background: var(--success-tint);
  border-color: var(--success);
  color: var(--text);
}
.rzc .form-status.success::before {
  color: var(--success);
  -webkit-mask: var(--i-ok) center / contain no-repeat;
  mask: var(--i-ok) center / contain no-repeat;
}
.rzc .form-status.error {
  display: flex;
  background: var(--error-tint);
  border-color: var(--error);
  color: var(--text);
}
.rzc .form-status.error::before {
  color: var(--error);
  -webkit-mask: var(--i-alert) center / contain no-repeat;
  mask: var(--i-alert) center / contain no-repeat;
}
.rzc .form-status.success,
.rzc .form-status.error {
  animation: rzc-fade-in 0.25s ease both;
}

/* Submit — the mockup's .btn .btn-gold, as one class */
.rzc .form-actions {
  display: flex;
}
.rzc .cf-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-block-size: 54px;
  min-inline-size: 240px;
  padding: 12px 32px;
  border: 1px solid var(--gold-bg);
  border-radius: var(--radius-md);
  background: var(--gold-bg);
  color: var(--on-gold);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(214, 166, 28, 0.28);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.rtl .rzc .cf-submit {
  letter-spacing: normal;
}
.rzc .cf-submit:hover {
  background: var(--gold-bg-hover);
  border-color: var(--gold-bg-hover);
}
.rzc .cf-submit:disabled,
.rzc .cf-submit[aria-disabled='true'] {
  opacity: 0.55;
  cursor: progress;
  pointer-events: none;
}
.rzc .cf-submit svg {
  inline-size: 18px;
  block-size: 18px;
  transition: transform 0.2s ease;
}
.rzc .cf-submit:hover svg {
  transform: translateX(4px);
}
[dir='rtl'] .rzc .cf-submit:hover svg {
  transform: scaleX(-1) translateX(4px);
}
@container form (max-width: 480px) {
  .rzc .cf-submit {
    inline-size: 100%;
    min-inline-size: 0;
  }
}

/* ---------- Contact channels (supporting area) ---------- */
.rzc .assist-panel {
  container: assist / inline-size;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(20px, 2.6vw, 30px);
}
.rzc .assist-panel > h2 {
  font-size: 1.45rem;
  color: var(--text);
  margin-block-end: 6px;
}
.rzc .channel-list {
  display: grid;
}
.rzc .channel {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  padding-block: 20px;
  border-block-end: 1px solid var(--border);
}
.rzc .channel-ico {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--radius-md);
  background: var(--accent-tint);
  color: var(--accent);
}
.rzc .channel-ico svg {
  inline-size: 23px;
  block-size: 23px;
}
.rzc .channel-body {
  min-inline-size: 0;
}
.rzc .channel h3 {
  font-size: 1.15rem;
  color: var(--text);
  margin-block-end: 2px;
}
.rzc .channel-value {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent);
  overflow-wrap: anywhere;
  margin-block-end: 4px;
}
.rzc .channel-value:empty {
  display: none;
}
.rzc .channel-body > p {
  font-size: 0.9375rem;
  color: var(--text-2);
  line-height: 1.55;
}
.rzc .channel-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  margin-block-start: 4px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-radius: 6px;
}
.rtl .rzc .channel-action {
  letter-spacing: normal;
}
.rzc .channel-action svg {
  inline-size: 17px;
  block-size: 17px;
  transition: transform 0.2s ease;
}
.rzc .channel-action:hover span {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.rzc .channel-action:hover svg {
  transform: translateX(3px);
}
[dir='rtl'] .rzc .channel-action:hover svg {
  transform: scaleX(-1) translateX(3px);
}
.rzc .channel--general {
  --accent: var(--sapphire);
  --accent-tint: var(--sapphire-tint);
}
.rzc .channel--support {
  --accent: var(--teal);
  --accent-tint: var(--teal-tint);
}
.rzc .channel--whatsapp {
  --accent: var(--success);
  --accent-tint: var(--success-tint);
}
.rzc .channel--chat {
  --accent: var(--gold);
  --accent-tint: var(--gold-tint);
}
html[data-bs-theme='dark'] .rzc .channel--whatsapp .channel-ico {
  color: var(--whatsapp);
}
.rzc .security-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-block-start: 20px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--gold-tint);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text);
}
.rzc .security-note svg {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  color: var(--gold);
  margin-block-start: 1px;
}
@container assist (min-width: 640px) {
  .rzc .channel-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }
}

/* ==========================================================================
   LOCATIONS
   ========================================================================== */
.rzc .locations-section {
  padding-block: clamp(56px, 7vw, 96px);
  border-block-start: 1px solid var(--border);
}
.rzc .section-head {
  max-inline-size: 760px;
  margin-inline: auto;
  margin-block-end: clamp(28px, 4vw, 44px);
  text-align: center;
}
.rzc .section-head .eyebrow::before {
  display: none;
}
.rzc .section-head h2 {
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem);
  color: var(--text);
  margin-block-end: 12px;
}
.rzc .section-head p {
  color: var(--text-2);
}
.rzc .section-head .group-intro {
  margin-block-start: 10px;
  font-size: 0.9375rem;
}
.rzc .locations-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.rzc .location-card {
  container: loc / inline-size;
  --accent: var(--gold);
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.rzc .location-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
.rzc .location-card[data-office='labuan'] {
  --accent: var(--sapphire);
}
.rzc .location-card[data-office='mauritius'] {
  --accent: var(--teal);
}
.rzc .loc-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.rzc .loc-art {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--art-bg);
  border-block-end: 3px solid var(--accent);
  overflow: hidden;
}
.rzc .loc-art img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.rzc .location-card:hover .loc-art img {
  transform: scale(1.04);
}
.rzc .loc-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}
.rzc .location-card h3 {
  font-size: 1.35rem;
  color: var(--text);
}
.rzc .location-sub {
  display: block;
  margin-block: 2px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.rzc .loc-rows {
  display: grid;
  gap: 10px;
  margin-block-end: 16px;
}
.rzc .loc-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 0.9375rem;
  color: var(--text-2);
  line-height: 1.55;
}
.rzc .loc-row svg {
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: 3px;
  color: var(--accent);
}
.rzc .loc-row.wa svg {
  color: var(--success);
}
.rzc .loc-row a {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  border-radius: 4px;
}
.rzc .loc-row a:hover {
  color: var(--sapphire);
}
.rzc .loc-row p {
  overflow-wrap: anywhere;
}
.rzc .loc-label {
  font-weight: 600;
  color: var(--text);
}
.rzc .loc-row.primary svg {
  color: var(--gold);
}
.rzc .loc-row.primary a {
  font-weight: 600;
}
.rzc .loc-reg {
  margin-block-start: auto;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-2);
}
.rzc .loc-company {
  display: block;
  margin-block-start: 6px;
  font-weight: 500;
  color: var(--text);
}
@container loc (min-width: 600px) {
  .rzc .loc-layout {
    flex-direction: row;
  }
  .rzc .loc-art {
    flex: 0 0 40%;
    aspect-ratio: auto;
    min-block-size: 100%;
    border-block-end: 0;
    border-inline-end: 3px solid var(--accent);
  }
  .rzc .loc-body {
    min-block-size: 220px;
  }
}
/* Wide office rows: details beside the regulatory note */
@container loc (min-width: 980px) {
  .rzc .loc-art {
    flex-basis: 32%;
  }
  .rzc .loc-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 36px;
    align-content: start;
    padding: 26px 30px 26px;
  }
  .rzc .loc-body > h3,
  .rzc .loc-body > .location-sub {
    grid-column: 1 / -1;
  }
  .rzc .loc-body > .loc-rows {
    grid-column: 1;
    grid-row: 3;
    margin-block-end: 0;
  }
  .rzc .loc-body > .loc-reg {
    grid-column: 2;
    grid-row: 3 / span 2;
    margin-block-start: 0;
    align-self: start;
  }
  .rzc .loc-body--compact > .loc-reg {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

/* ==========================================================================
   REGULATED GROUP STRUCTURE
   ========================================================================== */
.rzc .reg-section {
  background: var(--surface-2);
  border-block: 1px solid var(--border);
  padding-block: clamp(48px, 6vw, 72px);
}
.rzc .reg-section h2 {
  text-align: center;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
  color: var(--text);
  margin-block-end: 28px;
}
.rzc .reg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 24px;
  max-inline-size: 1040px;
  margin-inline: auto;
  margin-block-end: 20px;
}
.rzc .reg-card {
  position: relative;
  overflow: hidden;
  padding: 26px 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.rzc .reg-card::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 4px;
  background: var(--sapphire);
}
.rzc .reg-card:nth-child(2)::before {
  background: var(--teal);
}
.rzc .reg-card h3 {
  font-size: 1.3rem;
  color: var(--text);
  margin-block-end: 10px;
}
.rzc .reg-card p {
  font-size: 0.9375rem;
  color: var(--text-2);
  margin-block-end: 6px;
}
.rzc .reg-card p:last-child {
  margin-block-end: 0;
}
.rzc .reg-strong {
  color: var(--gold);
  font-weight: 600;
}
.rzc .reg-link-row {
  text-align: center;
}

/* ==========================================================================
   MOTION
   ========================================================================== */
@keyframes rzc-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes rzc-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes rzc-pop {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  60% {
    opacity: 1;
    transform: scale(1.06);
  }
  100% {
    transform: none;
  }
}
@keyframes rzc-drift-a {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(60px, 30px, 0) scale(1.12);
  }
}
@keyframes rzc-drift-b {
  from {
    transform: translate3d(0, 0, 0) scale(1.05);
  }
  to {
    transform: translate3d(-70px, 26px, 0) scale(0.95);
  }
}
@keyframes rzc-sheen {
  0%,
  100% {
    background-position: 120% 0;
  }
  50% {
    background-position: -20% 0;
  }
}

.rzc .enter {
  animation: rzc-rise 0.75s var(--ease) both;
  animation-delay: calc(var(--d, 0) * 80ms);
}
/* Scroll reveals only engage once JS confirms support; content is visible otherwise. */
html.rzc-motion .rzc .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
  transition-delay: calc(var(--d, 0) * 80ms);
}
html.rzc-motion .rzc .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .rzc *,
  .rzc *::before,
  .rzc *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  html.rzc-motion .rzc .reveal {
    opacity: 1;
    transform: none;
  }
  .rzc .location-card:hover,
  .rzc .location-card:hover .loc-art img {
    transform: none;
  }
}
@media print {
  .rzc .ambient,
  .rzc .tel-copy {
    display: none !important;
  }
  html.rzc-motion .rzc .reveal,
  .rzc .enter {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}