/* ==========================================================================
   ROYCE CAPITALS — shared header, navigation, mobile drawer and theme chrome
   File: css/royce-header.css   (global; loaded on every page)

   Ported September 2026 from update/heroSection/css/royce-header.css. Every
   selector is namespaced `rz-` (plus the .lang-trigger overrides at the end).
   No element resets, no `body`/`html` rules other than the scroll-lock class
   the drawer toggles. Theme state is html[data-bs-theme="dark|light"], written
   by js/general.js.

   Three deliberate departures from the package:
   - Fonts are inherited. The package asked for Marcellus + Inter as "the
     site's existing local faces"; the site ships only Ping AR + LT
     (assets/font/), which is what covers Arabic (NFR-10).
   - Buttons carry no geometry here. .rz-btn is registered in css/buttons.css,
     the one place every text button gets its box; this file owns colour only.
   - The wide/compact switch is a breakpoint, not a measurement. Below 1200px
     the bar is compact by media query, from the first paint, with no class
     involved. From 1200px up it is the full bar unless js/royce-header.js
     measures that it does not fit and adds .is-compact — JS may only
     downgrade, never widen. The ladder is docs/responsive-breakpoints.md.
   ========================================================================== */

:root {
  /* Palette */
  --rz-obsidian: #0a0e14; /* deepest black — page base            */
  --rz-black: #111111; /* Royce black                           */
  --rz-charcoal: #16181d; /* hero placeholder charcoal             */
  --rz-navy: #0b1628; /* institutional navy                    */
  --rz-gold: #d6a61c; /* Royce gold accent                     */
  --rz-gold-hover: #e6be4a;
  --rz-ivory: #f8f8f8; /* warm ivory — primary text on dark     */
  --rz-ivory-soft: rgba(248, 248, 248, 0.74);
  --rz-platinum: #c8c8c8;
  --rz-line-dark: rgba(214, 166, 28, 0.22);
  --rz-line-faint: rgba(248, 248, 248, 0.12);
  /* Layout */
  --rz-max-w: 1240px;
  --rz-gutter: 40px;
  /* Header proportions for the wide tier (1400px up). Fluid rather than
     stepped, so the bar grows into a full executive height on large screens
     instead of jumping. The tops are the package's; the floors are what the
     package gave 1400-1519 (its own 1519.98 tier, which the ladder has no
     slot for), so the six-menu bar still fits at 1400 and the fit check in
     js/royce-header.js has no reason to downgrade it. The floors were lowered
     once (16 September 2026) to meet the condensed tier at 1400; the
     reviewer's 20 September notes read that as the bar having shrunk, and
     the step at 1400 is the lesser evil. */
  --rz-header-h: clamp(96px, 7.2vw, 118px); /* over the hero        */
  --rz-header-h-sm: clamp(78px, 5.4vw, 92px); /* scrolled            */
  --rz-header-pad: clamp(28px, 3vw, 56px); /* outer gutter        */
  --rz-header-gap: clamp(64px, 4.4vw, 88px); /* logo <-> nav <-> controls */
  --rz-nav-gap: clamp(32px, 2.1vw, 40px); /* between nav items   */
  --rz-ctrl-h: clamp(50px, 3.6vw, 56px); /* every right control */
  --rz-ctrl-gap: clamp(14px, 0.9vw, 15px); /* between controls    */
  /* --nav-h is the bar's RESTING height, and every page-top offset on the
     site reads it (the account bands, the contact hero, the sticky comparison
     header, the homepage docks). It is a token, not a measurement, so it is
     right at the first paint with no fetch and no script involved, and it
     follows the width tiers below because they redefine the header tokens.
     Every page but the homepage opens on its own surface with the bar already
     scrolled (.rz-header--solid), so the resting height there is the short
     one; the homepage alone (body.rz-home, index.html) rests on the tall
     transparent bar over its hero. The bar itself shrinks on scroll and
     must never be measured for this. */
  --nav-h: var(--rz-header-h-sm);
  /* Motion */
  --rz-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --rz-ease-soft: cubic-bezier(0.22, 1, 0.36, 1); /* drawer + accordion */
  --rz-dur: 520ms;
  /* Restrained WhatsApp accent — used only for the icon and a faint
     hover edge, never as a fill. */
  --rz-whatsapp: #25d366;
  /* ---- HERO IMAGE FOCAL POINTS ----------------------------------------
     Each breakpoint has its own focal point so the aviation / skyline
     image can be re-framed per device WITHOUT touching layout.
     Format: <horizontal> <vertical>  (object-position)
     Source image is 1672x941 (16:9): open sky and apron fill the left
     third, the skyline sits centre-right, the aircraft at ~70-85%.
     Holding the focal point around 65-70% keeps the aircraft, runway
     lighting and skyline in frame while the left stays clear for type.
     -------------------------------------------------------------------- */
  /* Hero height. There is deliberately no pixel floor on desktop: a fixed
     720px minimum is what pushed the CTAs below the fold on any laptop
     running OS scaling, where the CSS viewport is far shorter than the
     panel's advertised resolution. The floor now applies on phones only,
     where scrolling the hero is expected. */
  /* Vertical rhythm inside the hero. Every one of these steps down on
     shorter viewports, fluidly, in the height media queries below. */
}

:root,
html[data-bs-theme='dark'] {
  --rz-page: #0a0e14;
  --rz-surface: #0b1628; /* dark navy header        */
  --rz-surface-glass: rgba(11, 22, 40, 0.82);
  --rz-drawer-bg: rgba(10, 17, 30, 0.96);
  --rz-fg: #f8f8f8;
  --rz-fg-dim: rgba(248, 248, 248, 0.72);
  --rz-hairline: rgba(214, 166, 28, 0.22);
  --rz-hairline-soft: rgba(248, 248, 248, 0.09);
  --rz-outline: rgba(248, 248, 248, 0.3);
  --rz-hover-wash: rgba(248, 248, 248, 0.055);
  --rz-header-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  --rz-panel-shadow: 0 26px 60px rgba(0, 0, 0, 0.52);
  --rz-panel-bg: rgba(9, 18, 33, 0.94);
  --rz-drawer-foot: rgba(9, 16, 28, 0.985);
  --rz-accent-wash: rgba(214, 166, 28, 0.07);
  --rz-accent-wash-hover: rgba(214, 166, 28, 0.13);
}

html[data-bs-theme='light'] {
  --rz-page: #fbfaf6;
  --rz-surface: #f5f2ea; /* warm ivory header       */
  --rz-surface-glass: rgba(250, 247, 240, 0.88);
  --rz-drawer-bg: rgba(250, 247, 240, 0.97);
  --rz-fg: #0b1628; /* deep navy text          */
  --rz-fg-dim: rgba(11, 22, 40, 0.68);
  --rz-hairline: rgba(174, 132, 14, 0.3);
  --rz-hairline-soft: rgba(11, 22, 40, 0.1);
  --rz-outline: rgba(11, 22, 40, 0.26);
  --rz-hover-wash: rgba(11, 22, 40, 0.045);
  --rz-header-shadow: 0 16px 40px rgba(28, 26, 20, 0.13);
  --rz-panel-shadow: 0 24px 54px rgba(28, 26, 20, 0.16);
  --rz-panel-bg: rgba(252, 250, 246, 0.97);
  --rz-drawer-foot: rgba(250, 247, 240, 0.99);
  --rz-accent-wash: rgba(174, 132, 14, 0.09);
  --rz-accent-wash-hover: rgba(174, 132, 14, 0.16);
}

.rz-header,
.rz-drawer,
.rz-nav__panel,
.rz-theme {
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: 220ms;
  transition-timing-function: var(--rz-ease);
}

/* The components assume border-box. The site's Bootstrap reset provides it
   globally; this makes the components correct on their own without adding a
   universal rule. */
.rz-header,
.rz-header *,
.rz-header *::before,
.rz-header *::after,
.rz-drawer,
.rz-drawer *,
.rz-drawer *::before,
.rz-drawer *::after,
.rz-hero,
.rz-hero *,
.rz-hero *::before,
.rz-hero *::after {
  box-sizing: border-box;
}

/* Page scroll lock while the drawer is open (class toggled by royce-header.js) */
body.rz-no-scroll {
  overflow: hidden;
}

.rz-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--rz-header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;

  /* state 1 — over the hero */
  --hdr-fg: #f8f8f8;
  --hdr-fg-t : #69d6e9;
  --hdr-dim: rgba(248, 248, 248, 0.76);
  --hdr-bd: rgba(248, 248, 248, 0.3);
  --hdr-hover: rgba(248, 248, 248, 0.06);

  transition:
    height var(--rz-dur) var(--rz-ease),
    background var(--rz-dur) var(--rz-ease),
    border-color var(--rz-dur) var(--rz-ease),
    box-shadow var(--rz-dur) var(--rz-ease);
}

.rz-header.is-scrolled {
  height: var(--rz-header-h-sm);
  background: var(--rz-surface-glass);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  backdrop-filter: saturate(150%) blur(18px);
  border-bottom-color: var(--rz-hairline);
  box-shadow: var(--rz-header-shadow);

  --hdr-fg: var(--rz-fg);
  --hdr-dim: var(--rz-fg-dim);
  --hdr-bd: var(--rz-outline);
  --hdr-hover: var(--rz-hover-wash);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rz-header.is-scrolled {
    background: var(--rz-surface);
  }
}

.rz-header__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--rz-header-gap);
  width: 100%;
  max-width: 1760px;
  margin-inline: auto;
  /* Physical sides on purpose: the notch insets are physical, and the gutter
     is symmetric so RTL needs nothing different. viewport-fit=cover in the
     page's viewport meta is what makes the env() values non-zero. */
  padding-left: max(var(--rz-header-pad), env(safe-area-inset-left, 0px));
  padding-right: max(var(--rz-header-pad), env(safe-area-inset-right, 0px));
  /* Stretching to the full header height makes `top: 100%` on the mega
     panel land exactly on the header's bottom edge. */
  align-self: stretch;
  position: relative;
}

.rz-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  line-height: 0;
}

.rz-logo__img {
  width: clamp(126px, 11vw, 170px);
  height: auto; /* preserves the 3048:1054 ratio */
  display: block;
  transition:
    width var(--rz-dur) var(--rz-ease),
    opacity 200ms var(--rz-ease);
}

.rz-header.is-scrolled .rz-logo__img {
  width: clamp(116px, 9.6vw, 150px);
}

.rz-logo:hover .rz-logo__img {
  opacity: 0.86;
}

.rz-logo__img--light {
  display: none;
}

html[data-bs-theme='light'] .rz-header.is-scrolled .rz-logo__img--dark {
  display: none;
}

html[data-bs-theme='light'] .rz-header.is-scrolled .rz-logo__img--light {
  display: block;
}

.rz-nav {
  /* Centres the list in its column with padding alone: 50% is half the grid
     area, the constant is half the six-label English list at this tier. A
     longer label set (Arabic) sits off-centre by half the difference. */
  padding-block-start: 5px;
  padding-inline-start: max(0px, calc(50% - 350px));
  display: flex;
  align-items: center;
  min-width: 0;
  justify-self: start; /* slack collects between nav and controls */
}

.rz-nav__list {
  display: flex;
  align-items: center;
  gap: var(--rz-nav-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.rz-nav__item {
  position: relative;
}

.rz-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px; /* label <-> chevron, kept as one unit */
  color: var(--hdr-dim);
  text-decoration: none;
  font-family: inherit;
  font-size: clamp(14.5px, 1vw, 15px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  /* Comfortable hit area without widening the visual rhythm */
  padding: 15px 2px;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: color 240ms var(--rz-ease);
}

.rz-nav__label {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.rz-nav__label::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -7px;
  height: 1px;
  background: var(--rz-gold);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform 300ms var(--rz-ease);
}

.rz-nav__link:hover,
.rz-nav__link:focus-visible,
.rz-nav__item.is-open .rz-nav__link,
.rz-nav__item.is-current .rz-nav__link {
  color: var(--hdr-fg);
}

.rz-nav__link:hover .rz-nav__label::after,
.rz-nav__link:focus-visible .rz-nav__label::after,
.rz-nav__item.is-open .rz-nav__link .rz-nav__label::after,
.rz-nav__item.is-current .rz-nav__link .rz-nav__label::after {
  transform: scaleX(1);
}

/* Current section: the label itself turns gold and stays gold while the
   dropdown is closed, open, hovered or focused — so "you are here" never
   reads as a plain hover (hover / open are ivory + gold underline). */
.rz-nav__item.is-current .rz-nav__link,
.rz-nav__item.is-current.is-open .rz-nav__link {
  color: var(--rz-gold);
}

.rz-nav__item.is-current .rz-nav__link:hover,
.rz-nav__item.is-current .rz-nav__link:focus-visible {
  color: var(--rz-gold-hover);
}

.rz-nav__item.is-current .rz-nav__chev {
  opacity: 1;
}

.rz-nav__chev {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
  transition: transform 260ms var(--rz-ease);
}

.rz-nav__item.is-open .rz-nav__chev {
  transform: rotate(180deg);
}

.rz-nav__panel {
  position: absolute;
  top: calc(100% + 1px);
  inset-inline-start: -18px;
  min-width: 286px;
  padding: 28px 14px;
  background: var(--rz-panel-bg);
  -webkit-backdrop-filter: saturate(150%) blur(22px);
  backdrop-filter: saturate(150%) blur(22px);
  border: 1px solid var(--rz-hairline);
  box-shadow: var(--rz-panel-shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 200ms var(--rz-ease),
    transform 200ms var(--rz-ease),
    visibility 0s linear 200ms;
}

.rz-nav__item.is-open > .rz-nav__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

.rz-nav__item--mega {
  position: static;
}

.rz-nav__panel--mega {
  inset-inline-start: 50%;
  transform: translate(-50%, 8px);
  width: min(1140px, calc(100vw - 48px));
  min-width: 0;
  padding: 28px 30px;
}

.rz-nav__item--mega.is-open > .rz-nav__panel--mega {
  transform: translate(-50%, 0);
}

[dir='rtl'] .rz-nav__panel--mega {
  transform: translate(50%, 8px);
}

[dir='rtl'] .rz-nav__item--mega.is-open > .rz-nav__panel--mega {
  transform: translate(50%, 0);
}

.rz-nav__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Columns stretch to the tallest so the dividers between them run the
     same length; content still flows from the top of each one. */
  align-items: stretch;
  gap: 0 28px;
}

.rz-nav__cols > * + * {
  padding-inline-start: 28px;
  border-inline-start: 1px solid var(--rz-hairline-soft);
}

.rz-nav__colhead {
  margin: 0 0 20px;
  padding-inline: 16px;
  /* Two lines exactly — enough for a wrapping heading ("Funding &
     Withdrawals") to keep its column aligned with the others, with no
     spare height left over to inflate the panel. */
  min-height: 28px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rz-gold);
}

.rz-nav__collist,
.rz-nav__panel > .rz-nav__collist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px; /* separation between rows, not inside them */
}

.rz-nav__sub {
  display: flex;
  align-items: center;
  min-height: 40px; /* clickable row, unchanged font size */
  padding: 9px 16px;
  color: var(--rz-fg-dim);
  text-decoration: none;
  font-size: 14.5px;
  line-height: 1.35;
  border-inline-start: 2px solid transparent;
  transition:
    color 200ms var(--rz-ease),
    background 200ms var(--rz-ease),
    border-color 200ms var(--rz-ease);
}

.rz-nav__sub:hover,
.rz-nav__sub:focus-visible {
  color: var(--rz-fg);
  background: var(--rz-hover-wash);
  border-inline-start-color: var(--rz-gold);
}

/* Current page — gold marker + a gold-tinted wash + a small gold point at
   the end of the row. Hover/focus use the neutral wash, so the two states
   never look alike. Nothing here changes the row's size or position. */
.rz-nav__sub[aria-current='page'] {
  color: var(--rz-fg);
  font-weight: 500;
  background: var(--rz-accent-wash);
  border-inline-start-color: var(--rz-gold);
}

.rz-nav__sub[aria-current='page']::after {
  content: '';
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-inline-start: auto;
  border-radius: 50%;
  background: var(--rz-gold);
  box-shadow: 0 0 0 3px var(--rz-accent-wash);
}

.rz-nav__sub[aria-current='page']:hover,
.rz-nav__sub[aria-current='page']:focus-visible {
  background: var(--rz-accent-wash-hover);
  border-inline-start-color: var(--rz-gold-hover);
}

/* Live Support is a <button> (it opens the chat widget, it does not
   navigate). Zero-specificity reset of the UA button box so it sits in the
   list exactly like its sibling links; every .rz-nav__sub / .rz-drawer__sublink
   rule above and below still wins. */
:where(button.rz-nav__sub, button.rz-drawer__sublink) {
  appearance: none;
  width: 100%;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.rz-nav__sub--accent {
  margin-top: 10px; /* + the 4px list gap = 14px below the row above */
  color: var(--rz-gold);
  font-weight: 500;
  background: var(--rz-accent-wash);
  border-inline-start-color: var(--rz-hairline);
}

.rz-nav__sub--accent:hover,
.rz-nav__sub--accent:focus-visible {
  color: var(--rz-gold-hover);
  background: var(--rz-accent-wash-hover);
  border-inline-start-color: var(--rz-gold);
}

.rz-controls {
  display: flex;
  align-items: center;
  gap: var(--rz-ctrl-gap);
  justify-self: end;
  min-width: 0;
}

.rz-utility {
  display: flex;
  align-items: center;
  gap: var(--rz-ctrl-gap);
  flex: 0 0 auto;
}

.rz-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rz-ctrl-h);
  height: var(--rz-ctrl-h);
  padding: 0;
  background: transparent;
  border: 1px solid var(--hdr-bd);
  border-radius: 0;
  color: var(--hdr-fg);
  cursor: pointer;
  transition:
    color 220ms var(--rz-ease),
    border-color 220ms var(--rz-ease),
    background 220ms var(--rz-ease);
}

.rz-theme:hover {
  border-color: var(--rz-gold);
  background: var(--hdr-hover);
}

.rz-theme svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rz-theme__sun {
  display: none;
}

html[data-bs-theme='light'] .rz-theme__sun {
  display: block;
}

html[data-bs-theme='light'] .rz-theme__moon {
  display: none;
}

.rz-actions {
  display: flex;
  align-items: center;
  gap: var(--rz-ctrl-gap);
  flex: 0 0 auto;
}

/* Geometry (height, padding, type) comes from css/buttons.css, where .rz-btn
   is in the base list. Only colour, hover and motion live here. The header
   pair takes a narrower pad through the token rather than its own padding,
   and its height from --rz-ctrl-h, so it is the same box as the theme button
   and language trigger beside it at every tier (the shared 52px only met the
   control token by coincidence, at one width). */
.rz-actions {
  --btn-pad-x: 24px;
  --btn-height: var(--rz-ctrl-h);
}

/* One line, so min-height IS the height. The fit check in royce-header.js
   measures width and downgrades the bar if a label set does not fit; a label
   that wrapped instead would fit narrower and stand taller than its neighbours. */
.rz-actions .rz-btn {
  white-space: nowrap;
}

.rz-btn {
  transition:
    background 300ms var(--rz-ease),
    color 300ms var(--rz-ease),
    border-color 300ms var(--rz-ease),
    box-shadow 300ms var(--rz-ease),
    transform 300ms var(--rz-ease);
}

.rz-btn--login {
  color: var(--hdr-fg);
  border-color: var(--hdr-bd);
  background: transparent;
}

.rz-btn--login:hover {
  border-color: var(--rz-gold);
  background: var(--hdr-hover);
}

.rz-btn--gold {
  background: var(--rz-gold);
  color: #0a0e14;
  border-color: var(--rz-gold);
  box-shadow: 0 10px 30px rgba(214, 166, 28, 0.18);
}

.rz-btn--gold:hover {
  background: var(--rz-gold-hover);
  border-color: var(--rz-gold-hover);
  box-shadow: 0 14px 38px rgba(214, 166, 28, 0.28);
  transform: translateY(-1px);
}

.rz-btn--whatsapp {
  gap: 11px;
  color: var(--rz-ivory);
  border-color: rgba(248, 248, 248, 0.28);
  background: rgba(10, 14, 20, 0.32);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.rz-btn--whatsapp .rz-btn__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: var(--rz-whatsapp);
  opacity: 0.82; /* keeps the green from shouting */
  transition: opacity 300ms var(--rz-ease);
}

.rz-btn--whatsapp:hover {
  border-color: rgba(37, 211, 102, 0.42);
  background: rgba(10, 14, 20, 0.48);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(37, 211, 102, 0.1);
}

.rz-btn--whatsapp:hover .rz-btn__icon {
  opacity: 1;
}

.rz-burger {
  display: none;
  width: var(--rz-ctrl-h);
  height: var(--rz-ctrl-h);
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--hdr-bd);
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color 260ms var(--rz-ease);
}

.rz-burger:hover {
  border-color: var(--rz-gold);
}

.rz-burger__box {
  position: relative;
  width: 18px;
  height: 12px;
}

.rz-burger__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--hdr-fg);
  transition:
    transform 320ms var(--rz-ease),
    opacity 200ms linear;
}

.rz-burger__bar:nth-child(1) {
  top: 0;
}

.rz-burger__bar:nth-child(2) {
  top: 50%;
}

.rz-burger__bar:nth-child(3) {
  top: 100%;
}

.rz-burger[aria-expanded='true'] .rz-burger__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.rz-burger[aria-expanded='true'] .rz-burger__bar:nth-child(2) {
  opacity: 0;
}

.rz-burger[aria-expanded='true'] .rz-burger__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.rz-drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  padding: calc(var(--rz-header-h-sm) + 20px) 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--rz-drawer-bg);
  -webkit-backdrop-filter: saturate(140%) blur(22px);
  backdrop-filter: saturate(140%) blur(22px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    opacity 200ms var(--rz-ease-soft),
    transform 280ms var(--rz-ease-soft),
    visibility 0s linear 280ms;
}

.rz-drawer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}

.rz-drawer__inner {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  --rz-drawer-pad: clamp(18px, 5vw, 32px);
  padding: 0 var(--rz-drawer-pad) calc(48px + env(safe-area-inset-bottom));
  padding-left: max(var(--rz-drawer-pad), env(safe-area-inset-left, 0px));
  padding-right: max(var(--rz-drawer-pad), env(safe-area-inset-right, 0px));
}

.rz-drawer__nav {
  display: block;
  padding-bottom: var(--rz-drawer-tail, 6px);
}

.rz-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rz-drawer__group {
  border-bottom: 1px solid var(--rz-hairline-soft);
}

.rz-drawer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 58px;
  padding: 14px 2px;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--rz-fg);
  font-family: inherit;
  font-size: clamp(20px, 5.2vw, 24px);
  text-align: start;
  cursor: pointer;
  transition: color 200ms var(--rz-ease);
}

.rz-drawer__toggle:hover,
.rz-drawer__toggle[aria-expanded='true'] {
  color: var(--rz-gold-hover);
}

.rz-drawer__group {
  position: relative;
}

.rz-drawer__group::before {
  content: '';
  position: absolute;
  inset-block: 0 auto;
  inset-inline-start: -12px;
  width: 2px;
  height: 58px;
  background: var(--rz-gold);
  opacity: 0;
  transition: opacity 220ms var(--rz-ease-soft);
}

.rz-drawer__group.is-open::before {
  opacity: 1;
}

/* Section containing the current page: gold heading, whether the section
   is expanded or not, and a half-strength marker while it is collapsed. */
.rz-drawer__group.is-current > .rz-drawer__toggle {
  color: var(--rz-gold);
}

.rz-drawer__group.is-current > .rz-drawer__toggle:hover,
.rz-drawer__group.is-current > .rz-drawer__toggle[aria-expanded='true'] {
  color: var(--rz-gold-hover);
}

.rz-drawer__group.is-current::before {
  opacity: 0.5;
}

.rz-drawer__group.is-current.is-open::before {
  opacity: 1;
}

.rz-drawer__toggle svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 260ms var(--rz-ease-soft);
}

.rz-drawer__toggle[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

.rz-drawer__sub {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    grid-template-rows 260ms var(--rz-ease-soft),
    opacity 200ms var(--rz-ease-soft),
    transform 260ms var(--rz-ease-soft);
}

.rz-drawer__subinner {
  overflow: hidden; /* clips only while the row is collapsing */
  min-height: 0;
  padding-bottom: 18px;
}

.rz-drawer__group.is-open > .rz-drawer__sub {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
}

.rz-drawer__sub.is-settled > .rz-drawer__subinner {
  overflow: visible;
}

.rz-drawer__subhead {
  margin: 14px 0 6px;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rz-gold);
}

.rz-drawer__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rz-drawer__sublink {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding-block: 8px;
  padding-inline: 16px 0;
  color: var(--rz-fg-dim);
  text-decoration: none;
  font-size: 15.5px;
  border-inline-start: 1px solid var(--rz-hairline-soft);
  transition:
    color 200ms var(--rz-ease),
    border-color 200ms var(--rz-ease);
}

.rz-drawer__sublink:hover,
.rz-drawer__sublink:focus-visible {
  color: var(--rz-fg);
  border-inline-start-color: var(--rz-gold);
}

/* Current page in the drawer — the desktop row's treatment: a 2px gold
   marker (drawn as an inset shadow so nothing shifts), on a gold wash that
   fades out along the row, with a gold point at the end. */
.rz-drawer__sublink[aria-current='page'] {
  color: var(--rz-fg);
  font-weight: 500;
  border-inline-start-color: var(--rz-gold);
  box-shadow: inset 2px 0 0 var(--rz-gold);
  background: linear-gradient(90deg, var(--rz-accent-wash-hover), var(--rz-accent-wash) 45%, transparent);
  padding-inline-end: 12px;
}

[dir='rtl'] .rz-drawer__sublink[aria-current='page'] {
  box-shadow: inset -2px 0 0 var(--rz-gold);
  background: linear-gradient(270deg, var(--rz-accent-wash-hover), var(--rz-accent-wash) 45%, transparent);
}

.rz-drawer__sublink[aria-current='page']::after {
  content: '';
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-inline-start: auto;
  border-radius: 50%;
  background: var(--rz-gold);
  box-shadow: 0 0 0 3px var(--rz-accent-wash);
}

.rz-drawer__sublink--accent {
  color: var(--rz-gold);
  font-weight: 500;
  background: var(--rz-accent-wash);
  border-inline-start-color: var(--rz-hairline);
}

.rz-drawer__sublink--accent:hover {
  color: var(--rz-gold-hover);
  background: var(--rz-accent-wash-hover);
}

.rz-drawer__actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
  padding: 16px 0 calc(16px + env(safe-area-inset-bottom));
  background: var(--rz-drawer-foot);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--rz-hairline);
}

.rz-drawer__actions .rz-btn {
  width: 100%;
}

.rz-drawer__wa {
  gap: 10px;
  color: var(--rz-fg);
  border-color: var(--rz-outline);
  background: transparent;
}

.rz-drawer__wa .rz-btn__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: var(--rz-whatsapp);
  opacity: 0.85;
  transition: opacity 260ms var(--rz-ease-soft);
}

.rz-drawer__wa:hover {
  border-color: rgba(37, 211, 102, 0.45);
  background: var(--rz-hover-wash);
}

.rz-drawer__wa:hover .rz-btn__icon {
  opacity: 1;
}

@media (max-height: 720px) {
  .rz-drawer__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 18px;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  }
  .rz-drawer__actions {
    --btn-pad-x: 10px;
  }
  .rz-drawer__actions .rz-drawer__wa {
    grid-column: 1 / -1;
  }
}

.rz-drawer__login {
  color: var(--rz-fg);
  border-color: var(--rz-outline);
  background: transparent;
}

.rz-drawer__login:hover {
  border-color: var(--rz-gold);
  background: var(--rz-hover-wash);
}

@media (min-width: 768px) {
  .rz-drawer__inner {
    max-width: 900px;
  }
}

/* ==========================================================================
   Width tiers. One ladder for the whole site — docs/responsive-breakpoints.md.

   1400 up      the fluid tokens in :root above
   1200-1399    condensed: a shorter bar with tighter gaps, the language
                trigger down to globe + code. Estimated need at 1200 is
                ~1083px against ~1161px available, which leaves ~80px for
                the Arabic label set.
   under 1200   compact: burger, no inline nav or actions. Decided here, by
                the media query, so the first paint is already right.
   ========================================================================== */
@media (max-width: 1399.98px) {
  :root {
    --rz-header-h: 84px;
    --rz-header-h-sm: 74px;
    --rz-header-pad: clamp(16px, 1.6vw, 24px);
    --rz-header-gap: 32px;
    --rz-nav-gap: 18px;
    --rz-ctrl-h: 44px;
    --rz-ctrl-gap: 8px;
  }
  .rz-logo__img {
    width: clamp(100px, 8.4vw, 112px);
  }
  .rz-header.is-scrolled .rz-logo__img {
    width: clamp(96px, 8vw, 106px);
  }
  .rz-nav {
    /* padding-block-start: 5px; */
    padding-inline-start: max(0px, calc(50% - 270px));
  }
  .rz-nav__link {
    font-size: 13.5px;
    padding-block: 12px;
  }
  .rz-actions {
    --btn-pad-x: 14px;
  }
  /* Globe and code only; the word comes back on the wide tier */
  .rz-utility .lang-trigger {
    padding: 0 12px;
  }
  .rz-utility .lang-trigger-sep,
  .rz-utility .lang-trigger-word {
    display: none;
  }
}

/* The compact bar. Two rules carry the same declarations on purpose: the
   media query is the contract (under 1200px the bar is compact, full stop),
   and .is-compact is the one override js/royce-header.js may apply ABOVE it,
   when it measures that the full bar does not fit — a long Arabic label set,
   a very large font. JS never adds a "wide" class; it can only downgrade. */
.rz-header.is-compact {
  --rz-header-pad: clamp(20px, 2.6vw, 40px);
  --rz-ctrl-gap: 10px;
}

.rz-header.is-compact .rz-header__inner {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
}

.rz-header.is-compact .rz-nav,
.rz-header.is-compact .rz-actions {
  display: none;
}

.rz-header.is-compact .rz-burger {
  display: inline-flex;
}

@media (max-width: 1199.98px) {
  :root {
    --rz-header-h: 84px;
    --rz-header-h-sm: 72px;
    --rz-header-pad: clamp(20px, 2.6vw, 40px);
    --rz-ctrl-h: 48px;
    --rz-ctrl-gap: 10px;
  }
  .rz-header .rz-header__inner {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
  }
  .rz-header .rz-nav,
  .rz-header .rz-actions {
    display: none;
  }
  .rz-header .rz-burger {
    display: inline-flex;
  }
}

/* The fit measurement lays the full bar out hidden for one frame. The
   !important is what lets it see through .is-compact. */
.rz-header.rz-measuring .rz-nav,
.rz-header.rz-measuring .rz-actions {
  display: flex !important;
  visibility: hidden;
}

.rz-header.rz-measuring .rz-burger {
  display: none !important;
}

.rz-header.rz-measuring .rz-nav__panel {
  display: none;
}

.rz-header.rz-measuring .rz-header__inner {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  column-gap: var(--rz-header-gap) !important;
}

@media (max-width: 991.98px) {
  :root {
    --rz-gutter: 24px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --rz-header-h: 76px;
    --rz-header-h-sm: 68px;
    --rz-ctrl-h: 44px;
  }
  .rz-logo__img {
    width: clamp(112px, 32vw, 138px);
  }
  .rz-header.is-scrolled .rz-logo__img {
    width: clamp(104px, 29vw, 126px);
  }
}

.rz-header :where(a, button):focus-visible,
.rz-drawer :where(a, button):focus-visible {
  outline: 2px solid var(--rz-gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .rz-header *,
  .rz-header *::before,
  .rz-header *::after,
  .rz-drawer *,
  .rz-drawer *::before,
  .rz-drawer *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Separator between a section's core links and its supplementary item
   (Markets -> Global Market Hours), mirroring the staging IA. */
.rz-nav__divider {
  height: 1px;
  margin: 8px 16px;
  background: var(--rz-hairline-soft);
}

/* ==========================================================================
   Language trigger inside the bar. The control itself (markup, panel, note,
   rows) is the existing mega-menu — see partials/header.html, js/lang.js and
   the "Language mega-menu" block in css/style.css. These rules only size and
   colour the trigger to the header's control box and surface tokens.
   ========================================================================== */
.rz-utility .lang-trigger {
  min-height: var(--rz-ctrl-h);
  padding: 0 14px;
  color: var(--hdr-fg-t);
  border-color: var(--hdr-bd);
}

.rz-utility .lang-trigger:hover,
.rz-utility .lang-trigger:focus-visible,
.rz-utility .lang-trigger[aria-expanded='true'] {
  color: var(--hdr-fg);
  border-color: var(--rz-gold);
  background: var(--hdr-hover);
}

.rz-utility .lang-trigger:focus-visible {
  outline-color: var(--rz-gold);
}

/* The globe and chevron are box-centred; the text needs the same optical
   cap-shift css/buttons.css gives every button label (see --btn-cap-shift
   there — Ping AR + LT's 1.6em glyph box centres space Latin caps never
   occupy). The token is already zero on .rtl. */
.rz-utility .lang-trigger-code,
.rz-utility .lang-trigger-sep,
.rz-utility .lang-trigger-word {
  position: relative;
  top: var(--btn-cap-shift);
}

/* Tracking (0.14em, css/style.css) trails the last letter too, so it lands in
   the gap or padding after each text run; pull it back so the group is
   centred whichever spans the tier shows. */
.rz-utility .lang-trigger-code,
.rz-utility .lang-trigger-word {
  margin-inline-end: -0.14em;
}

.rtl .rz-utility .lang-trigger-code,
.rtl .rz-utility .lang-trigger-word {
  margin-inline-end: 0;
}

@media (max-width: 767.98px) {
  /* Globe and code only, and no chevron either, like the old compact trigger */
  .rz-utility .lang-trigger {
    padding: 0 10px;
  }
  .rz-utility .lang-trigger-sep,
  .rz-utility .lang-trigger-word,
  .rz-utility .lang-trigger-chev {
    display: none;
  }
}

/* The homepage is the one page that rests on the tall transparent bar over
   its hero (see --nav-h in :root above). index.html carries the class. */
body.rz-home {
  --nav-h: var(--rz-header-h);
}

/* A page with no homepage hero (.rz-hero) opens on its own surface, so
   js/royce-header.js keeps the bar in its scrolled state from the first frame
   and marks it --solid. No settle-in animation on those pages: the bar is
   born scrolled, and a 520ms shrink from the tall transparent state on every
   internal page load would be motion with nothing to announce. */
.rz-header--solid,
.rz-header--solid .rz-logo__img {
  transition: none;
}