/* ==========================================================================
   legal-and-policies.css
   The Legal & Policy Centre at /legal-and-policies, ported from
   update/LegalCenterr/…/production/css/royce-legal-policy-centre.css (v07).

   EVERYTHING IS SCOPED UNDER .rz-legal-root — the <main> wrapper. The package
   already namespaced every selector (no element rules, no :root, no Bootstrap
   class redefined), which is why the class names came across unchanged.

   What did not come across, and why:

   Type: the package set Marcellus for display and Inter for body. Neither is
   shipped here; every font-family is removed so the page inherits the site's
   self-hosted Ping AR + LT, which also covers Arabic (NFR-10). Under RTL every
   letter-spacing is zeroed, because tracking breaks Arabic letter joining.

   Header offset: the package measured the site header at runtime and wrote
   --rzl-sticky-top from it. On this site the resting height is the CSS token
   --nav-h (css/royce-header.css), and measuring the bar is wrong — it shrinks
   on scroll. The hero's top reserve and the anchor scroll margins read the
   token directly. The filter bar itself is no longer sticky (20 September
   2026 review) — see section 3.

   Breakpoints: 1180 / 1024 / 900 / 767 / 400 are remapped to the ladder in
   docs/responsive-breakpoints.md (1199.98 / 991.98 / 767.98 / 399.98).

   Theme: the package was dark only. The light set below it is the site's own —
   Ivory ground, white cards, Royce Black type, deep gold for gold-as-text —
   gated on html[data-bs-theme='light'] like every other page sheet. The hero
   stays dark in both themes: it is a photograph under a scrim, and its type
   reads the --rzl-hero-* tokens, which are never redefined. Nothing after the
   token blocks names a theme.

   Direction: written in logical properties wherever a block mirrors. The hero
   photo and its scrim are authored for a left-hand copy column, so under RTL
   they are mirrored together, as css/royce-home-hero.css does.

   Palette: navy, gold, ivory and platinum are the BRD §9.1 values. The four
   category accents (cobalt, turquoise, violet, coral) are the package's own
   extension and are recorded as pending design sign-off in
   docs/legal-and-policies.md.

   Images: the hero files live in /image/ (root-absolute, like every asset on
   the site), not beside the stylesheet.
   ========================================================================== */

.rz-legal-root {
  /* base */
  --rzl-deep: #060c16;
  --rzl-navy: #0b1628;
  --rzl-navy-2: #0f1e36;
  --rzl-navy-3: #142845;
  --rzl-ivory: #f8f8f8;
  --rzl-platinum: #c3cad6;
  --rzl-muted: #8e9aad;
  --rzl-line: rgba(195, 202, 214, 0.16);
  --rzl-line-strong: rgba(195, 202, 214, 0.34);

  /* surfaces and washes */
  --rzl-wash: rgba(248, 248, 248, 0.04);
  --rzl-card-a: rgba(248, 248, 248, 0.055);
  --rzl-card-b: rgba(248, 248, 248, 0.018);
  --rzl-well: rgba(6, 12, 22, 0.42);
  --rzl-field: rgba(6, 12, 22, 0.55);
  --rzl-field-focus: rgba(6, 12, 22, 0.85);
  --rzl-gold-wash: rgba(214, 166, 28, 0.07);
  --rzl-gold-line: rgba(214, 166, 28, 0.42);
  --rzl-gold-glow: rgba(214, 166, 28, 0.13);
  --rzl-restricted-wash: rgba(210, 82, 60, 0.07);
  --rzl-ok-wash: rgba(23, 168, 160, 0.06);
  --rzl-shadow: rgba(0, 0, 0, 0.9);
  --rzl-btn-gold-ink: #0a1020;

  /* category accents: -l for lines/fills, -t for text on the page ground */
  --rzl-gold-l: #d6a61c;
  --rzl-gold-t: #eac356;
  --rzl-cobalt-l: #3f7be8;
  --rzl-cobalt-t: #86adff;
  --rzl-turq-l: #17a8a0;
  --rzl-turq-t: #4cd8cb;
  --rzl-violet-l: #7a5ad1;
  --rzl-violet-t: #b49aff;
  --rzl-coral-l: #d2523c;
  --rzl-coral-t: #ff9c85;

  /* the accent a section is currently painted with */
  --rzl-accent-l: var(--rzl-gold-l);
  --rzl-accent-t: var(--rzl-gold-t);

  /* hero — dark in both themes, never redefined */
  --rzl-hero-void: #060c16;
  --rzl-hero-ink: #f8f8f8;
  --rzl-hero-sub: #c3cad6;
  --rzl-hero-accent: #eac356;
  --rzl-hero-line: rgba(248, 248, 248, 0.34);

  /* Below the site header's own stacking level (css/royce-header.css: 100).
     Unused since the toolbar stopped being sticky; kept for the record. */
  --rzl-z-toolbar: 10;

  --rzl-shell: 1240px;
  --rzl-gutter: 40px;
  --rzl-section: 96px;
  --rzl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  color: var(--rzl-ivory);
  background: var(--rzl-navy);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

html[data-bs-theme='light'] .rz-legal-root {
  --rzl-deep: #ece9e2;
  --rzl-navy: #f8f8f8;
  --rzl-navy-2: #f1efea;
  --rzl-navy-3: #e7e4dc;
  --rzl-ivory: #111111;
  --rzl-platinum: #2e3137;
  --rzl-muted: #5b6068;
  --rzl-line: rgba(17, 17, 17, 0.1);
  --rzl-line-strong: rgba(17, 17, 17, 0.22);

  --rzl-wash: rgba(17, 17, 17, 0.03);
  --rzl-card-a: #ffffff;
  --rzl-card-b: #ffffff;
  --rzl-well: rgba(17, 17, 17, 0.03);
  --rzl-field: #ffffff;
  --rzl-field-focus: #ffffff;
  --rzl-gold-wash: rgba(214, 166, 28, 0.1);
  --rzl-gold-line: rgba(138, 106, 15, 0.4);
  --rzl-gold-glow: rgba(214, 166, 28, 0.18);
  --rzl-restricted-wash: rgba(210, 82, 60, 0.06);
  --rzl-ok-wash: rgba(23, 168, 160, 0.07);
  --rzl-shadow: rgba(0, 0, 0, 0.18);

  /* gold-as-text: #d6a61c is 1.8:1 on ivory; the deep gold clears 4.5:1, as
     css/style.css does for the light hero eyebrow. The other -t values are
     darkened the same way. */
  --rzl-gold-t: #8a6a0f;
  --rzl-cobalt-t: #2456b8;
  --rzl-turq-t: #0f7a74;
  --rzl-violet-t: #5a3fb0;
  --rzl-coral-t: #b3402c;
}

.rz-legal-root *,
.rz-legal-root *::before,
.rz-legal-root *::after {
  box-sizing: border-box;
}

.rz-legal-root :focus-visible {
  outline: 2px solid var(--rzl-gold-l);
  outline-offset: 3px;
}

html.rtl .rz-legal-root,
html.rtl .rz-legal-root * {
  letter-spacing: 0;
}

/* accent themes applied per category section ------------------------------ */
.rz-legal-theme-gold {
  --rzl-accent-l: var(--rzl-gold-l);
  --rzl-accent-t: var(--rzl-gold-t);
}
.rz-legal-theme-cobalt {
  --rzl-accent-l: var(--rzl-cobalt-l);
  --rzl-accent-t: var(--rzl-cobalt-t);
}
.rz-legal-theme-turquoise {
  --rzl-accent-l: var(--rzl-turq-l);
  --rzl-accent-t: var(--rzl-turq-t);
}
.rz-legal-theme-violet {
  --rzl-accent-l: var(--rzl-violet-l);
  --rzl-accent-t: var(--rzl-violet-t);
}

/* shell -------------------------------------------------------------------- */
.rz-legal-shell {
  width: 100%;
  max-width: var(--rzl-shell);
  margin-inline: auto;
  padding-inline: var(--rzl-gutter);
}

.rz-legal-section {
  padding-block: var(--rzl-section);
  position: relative;
}

/* In-page anchors must land below the fixed header. */
.rz-legal-root [id] {
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

.rz-legal-kicker {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rzl-accent-t);
  margin: 0 0 14px;
  font-weight: 500;
}

.rz-legal-h2 {
  font-weight: 400;
  font-size: clamp(1.9rem, 1.2rem + 2.1vw, 2.85rem);
  line-height: 1.14;
  letter-spacing: -0.005em;
  margin: 0 0 16px;
  color: var(--rzl-ivory);
}

.rz-legal-lede {
  max-width: 62ch;
  color: var(--rzl-platinum);
  margin: 0;
  font-size: 1.0625rem;
}

.rz-legal-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   1. Hero
   ========================================================================== */
.rz-legal-hero {
  position: relative;
  background: var(--rzl-hero-void);
  color: var(--rzl-hero-ink);
  isolation: isolate;
  overflow: hidden;
  /* The bar is fixed; the hero starts under it and reserves the token, plus
     a gap so the copy does not sit against the bar's edge (the photo and
     scrim are absolute and still run up behind it). The other inner pages'
     .hero reserves --nav-h + 3rem; this one asked for "slightly". */
  padding-top: calc(var(--nav-h) + 2rem);
}

.rz-legal-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('/image/royce-legal-centre-hero.jpg');
  background-image: -webkit-image-set(url('/image/royce-legal-centre-hero.webp') type('image/webp'), url('/image/royce-legal-centre-hero.jpg') type('image/jpeg'));
  background-image: image-set(url('/image/royce-legal-centre-hero.webp') type('image/webp'), url('/image/royce-legal-centre-hero.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: 72% 62%;
  background-repeat: no-repeat;
}

/* Text-safe scrim. Dense on the copy side, clear on the other so the
   architecture stays visible. */
.rz-legal-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(6, 12, 22, 0.95) 0%, rgba(6, 12, 22, 0.9) 26%, rgba(8, 18, 34, 0.62) 48%, rgba(10, 22, 40, 0.18) 68%, rgba(10, 22, 40, 0.04) 100%), linear-gradient(to top, rgba(6, 12, 22, 0.72) 0%, rgba(6, 12, 22, 0) 42%);
}

/* RTL: the photo and its scrim are authored for a left-hand copy column —
   mirror both together so the copy, now on the right, still sits on the dense
   side and the building keeps the clear one. */
html.rtl .rz-legal-hero-media,
html.rtl .rz-legal-hero-scrim {
  transform: scaleX(-1);
}

.rz-legal-hero-inner {
  position: relative;
  z-index: 2;
  min-height: clamp(520px, 62vh, 680px);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  padding-block: 104px;
}

.rz-legal-hero-copy {
  max-width: 40rem;
}

.rz-legal-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rzl-hero-accent);
  margin: 0 0 22px;
  font-weight: 500;
}
.rz-legal-hero-eyebrow::before {
  content: '';
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--rzl-gold-l), rgba(214, 166, 28, 0));
}
html.rtl .rz-legal-hero-eyebrow::before {
  background: linear-gradient(270deg, var(--rzl-gold-l), rgba(214, 166, 28, 0));
}

.rz-legal-hero-title {
  font-weight: 400;
  font-size: clamp(2.6rem, 1.5rem + 3.6vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 22px;
  color: var(--rzl-hero-ink);
}
html.rtl .rz-legal-hero-title {
  line-height: 1.25;
}

.rz-legal-hero-text {
  color: var(--rzl-hero-sub);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.175rem);
  max-width: 34rem;
  margin: 0 0 34px;
}

.rz-legal-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* The hero's ghost button sits on the photo in both themes. */
.rz-legal-hero .rz-legal-btn-ghost {
  color: var(--rzl-hero-ink);
  border-color: var(--rzl-hero-line);
  background: rgba(248, 248, 248, 0.04);
}
.rz-legal-hero .rz-legal-btn-ghost:hover {
  color: var(--rzl-hero-accent);
  border-color: var(--rzl-gold-l);
}

/* horizon rule: the one decorative flourish, tying gold to cobalt */
.rz-legal-hero-rule {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  z-index: 3;
  background: linear-gradient(90deg, var(--rzl-gold-l) 0%, var(--rzl-cobalt-l) 38%, var(--rzl-turq-l) 62%, var(--rzl-violet-l) 84%, rgba(122, 90, 209, 0) 100%);
}
html.rtl .rz-legal-hero-rule {
  background: linear-gradient(270deg, var(--rzl-gold-l) 0%, var(--rzl-cobalt-l) 38%, var(--rzl-turq-l) 62%, var(--rzl-violet-l) 84%, rgba(122, 90, 209, 0) 100%);
}

/* ==========================================================================
   2. Buttons
   ========================================================================== */
.rz-legal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: 0;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.25s var(--rzl-ease),
    border-color 0.25s var(--rzl-ease),
    color 0.25s var(--rzl-ease),
    transform 0.25s var(--rzl-ease);
}

.rz-legal-btn-gold {
  background: var(--rzl-gold-l);
  color: var(--rzl-btn-gold-ink);
  border-color: var(--rzl-gold-l);
}
.rz-legal-btn-gold:hover {
  background: #e6be4a;
  border-color: #e6be4a;
  color: var(--rzl-btn-gold-ink);
}

.rz-legal-btn-ghost {
  background: var(--rzl-wash);
  color: var(--rzl-ivory);
  border-color: var(--rzl-line-strong);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.rz-legal-btn-ghost:hover {
  border-color: var(--rzl-gold-l);
  color: var(--rzl-gold-t);
}

.rz-legal-btn-quiet {
  background: transparent;
  color: var(--rzl-platinum);
  border-color: var(--rzl-line);
  min-height: 42px;
  padding: 9px 18px;
  font-size: 0.875rem;
}
.rz-legal-btn-quiet:hover {
  color: var(--rzl-ivory);
  border-color: var(--rzl-line-strong);
}

.rz-legal-btn[aria-disabled='true'],
.rz-legal-btn:disabled {
  background: var(--rzl-wash);
  color: var(--rzl-muted);
  border-color: var(--rzl-line);
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   3. Filter toolbar
   ========================================================================== */
/* In flow, not sticky. The package pinned this bar under the header
   (position: sticky at a measured offset); the reviewer asked for it to be
   unpinned (20 September 2026), so it scrolls away with the hero. */
.rz-legal-toolbar-wrap {
  background: linear-gradient(180deg, var(--rzl-navy) 0%, var(--rzl-navy-2) 100%);
  border-bottom: 1px solid var(--rzl-line);
}

.rz-legal-toolbar {
  padding-block: 22px;
}

.rz-legal-filter-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) repeat(2, minmax(140px, 1fr)) auto;
  gap: 12px;
  align-items: end;
}

.rz-legal-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.rz-legal-field-label {
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--rzl-muted);
  font-weight: 500;
}

.rz-legal-input,
.rz-legal-select {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--rzl-line-strong);
  border-radius: 0;
  background: var(--rzl-field);
  color: var(--rzl-ivory);
  font: inherit;
  font-size: 0.9375rem;
  transition:
    border-color 0.22s var(--rzl-ease),
    background-color 0.22s var(--rzl-ease);
}
.rz-legal-input::placeholder {
  color: var(--rzl-muted);
}
.rz-legal-input:hover,
.rz-legal-select:hover {
  border-color: rgba(214, 166, 28, 0.5);
}
.rz-legal-input:focus,
.rz-legal-select:focus {
  border-color: var(--rzl-gold-l);
  background: var(--rzl-field-focus);
}

.rz-legal-select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--rzl-platinum) 50%), linear-gradient(135deg, var(--rzl-platinum) 50%, transparent 50%);
  background-position:
    calc(100% - 19px) 21px,
    calc(100% - 13px) 21px;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
}
html.rtl .rz-legal-select {
  background-position:
    19px 21px,
    13px 21px;
}
.rz-legal-select option {
  background: var(--rzl-navy-2);
  color: var(--rzl-ivory);
}

.rz-legal-toolbar-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rzl-line);
}

.rz-legal-count {
  font-size: 0.9rem;
  color: var(--rzl-platinum);
  margin: 0;
}
.rz-legal-count b {
  color: var(--rzl-gold-t);
  font-weight: 600;
}

.rz-legal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rz-legal-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  font-size: 0.8rem;
  color: var(--rzl-platinum);
  background: var(--rzl-wash);
  border: 1px solid var(--rzl-line);
}

/* mobile filter disclosure */
.rz-legal-filter-toggle {
  display: none;
  width: 100%;
}
.rz-legal-filter-panel {
  display: block;
}

/* ==========================================================================
   4. Policy directory
   ========================================================================== */
.rz-legal-category {
  padding-block: 72px;
  border-top: 1px solid var(--rzl-line);
}
.rz-legal-category:first-of-type {
  border-top: 0;
}

.rz-legal-category-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 34px;
  padding-inline-start: 22px;
  position: relative;
}
.rz-legal-category-head::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: linear-gradient(180deg, var(--rzl-accent-l), rgba(255, 255, 255, 0));
}

.rz-legal-category-tally {
  font-size: 0.8rem;
  color: var(--rzl-muted);
  white-space: nowrap;
  padding-bottom: 6px;
}

.rz-legal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 20px;
}

.rz-legal-policy-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 26px 24px;
  background: linear-gradient(160deg, var(--rzl-card-a) 0%, var(--rzl-card-b) 100%);
  border: 1px solid var(--rzl-line);
  transition:
    border-color 0.3s var(--rzl-ease),
    transform 0.3s var(--rzl-ease),
    box-shadow 0.3s var(--rzl-ease),
    background-color 0.3s var(--rzl-ease);
}
.rz-legal-policy-card::before {
  content: '';
  position: absolute;
  inset-inline-start: -1px;
  top: -1px;
  width: 0;
  height: 2px;
  background: var(--rzl-accent-l);
  transition: width 0.42s var(--rzl-ease);
}
.rz-legal-policy-card:hover,
.rz-legal-policy-card:focus-within {
  border-color: color-mix(in srgb, var(--rzl-accent-l) 55%, transparent);
  transform: translateY(-3px);
  box-shadow: 0 18px 42px -26px var(--rzl-shadow);
}
.rz-legal-policy-card:hover::before,
.rz-legal-policy-card:focus-within::before {
  width: calc(100% + 2px);
}

/* The title is the official document's own English title, so it keeps its
   direction and alignment inside an RTL card. */
.rz-legal-policy-title {
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.25;
  margin: 0;
  color: var(--rzl-ivory);
}
html.rtl .rz-legal-policy-title {
  direction: ltr;
  text-align: end;
}

.rz-legal-policy-desc {
  margin: 0;
  color: var(--rzl-platinum);
  font-size: 0.9375rem;
  line-height: 1.62;
}

.rz-legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rz-legal-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  letter-spacing: 0.015em;
  color: var(--rzl-platinum);
  border: 1px solid var(--rzl-line);
  background: var(--rzl-well);
}
.rz-legal-tag-accent {
  color: var(--rzl-accent-t);
  border-color: color-mix(in srgb, var(--rzl-accent-l) 42%, transparent);
}
.rz-legal-tag-official {
  color: var(--rzl-gold-t);
  border-color: var(--rzl-gold-line);
  background: var(--rzl-gold-wash);
}
.rz-legal-tag-official::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--rzl-gold-l);
  flex: none;
}

.rz-legal-dates {
  margin: 0;
  font-size: 0.8rem;
  color: var(--rzl-muted);
}

.rz-legal-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--rzl-line);
}

.rz-legal-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 0;
  color: var(--rzl-accent-t);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    border-color 0.25s var(--rzl-ease),
    color 0.25s var(--rzl-ease);
}
.rz-legal-link:hover {
  border-bottom-color: currentColor;
  color: var(--rzl-accent-t);
}

.rz-legal-link-icon {
  flex: none;
  transition: transform 0.3s var(--rzl-ease);
}
html.rtl .rz-legal-link-icon {
  transform: scaleX(-1);
}
.rz-legal-link:hover .rz-legal-link-icon {
  transform: translateX(3px);
}
html.rtl .rz-legal-link:hover .rz-legal-link-icon {
  transform: scaleX(-1) translateX(3px);
}

.rz-legal-empty {
  padding: 56px 32px;
  text-align: center;
  border: 1px dashed var(--rzl-line-strong);
  background: var(--rzl-well);
}
.rz-legal-empty h3 {
  font-weight: 400;
  font-size: 1.35rem;
  margin: 0 0 10px;
  color: var(--rzl-ivory);
}
.rz-legal-empty p {
  color: var(--rzl-platinum);
  margin: 0 0 20px;
}

/* Fallback list — shown when JavaScript is off or the data cannot load.
   Plain, complete and readable; it is a real answer, not an apology. */
.rz-legal-fallback {
  padding-block: 56px;
}
.rz-legal-fallback h2 {
  margin-bottom: 12px;
}
.rz-legal-fallback-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.rz-legal-fallback-group {
  grid-column: 1 / -1;
  margin-top: 10px;
  color: var(--rzl-platinum);
}
.rz-legal-fallback-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 13px 16px;
  border: 1px solid var(--rzl-line);
  background: var(--rzl-wash);
  color: var(--rzl-ivory);
  text-decoration: none;
  font-size: 0.9375rem;
}
.rz-legal-fallback-list a::before {
  content: '';
  width: 3px;
  align-self: stretch;
  background: var(--rzl-gold-l);
  flex: none;
}
.rz-legal-fallback-list a:hover {
  border-color: var(--rzl-gold-l);
  color: var(--rzl-ivory);
}
.rz-legal-note {
  margin: 26px 0 0;
  color: var(--rzl-platinum);
  font-size: 0.9375rem;
  max-width: 82ch;
}

/* ==========================================================================
   5. Official Document Language notice
   One panel, deliberately the brightest non-hero surface on the page. It is
   an assurance, not a warning: gold seal, warm field, no alert iconography.
   ========================================================================== */
.rz-legal-doclang {
  background: radial-gradient(120% 180% at 6% 0%, var(--rzl-gold-glow) 0%, rgba(214, 166, 28, 0) 62%), linear-gradient(180deg, var(--rzl-navy-2) 0%, var(--rzl-navy) 100%);
  border-block: 1px solid var(--rzl-line);
}

.rz-legal-doclang-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  padding: 40px 44px;
  border: 1px solid var(--rzl-gold-line);
  background: linear-gradient(140deg, var(--rzl-gold-wash) 0%, var(--rzl-card-b) 46%, var(--rzl-card-b) 100%);
  position: relative;
}
.rz-legal-doclang-panel::before {
  content: '';
  position: absolute;
  inset-inline-start: -1px;
  top: -1px;
  bottom: -1px;
  width: 3px;
  background: linear-gradient(180deg, var(--rzl-gold-l) 0%, rgba(214, 166, 28, 0.15) 100%);
}

.rz-legal-doclang-seal {
  color: var(--rzl-gold-l);
  flex: none;
  line-height: 0;
  padding-top: 6px;
}

.rz-legal-doclang-body .rz-legal-h2 {
  margin-bottom: 14px;
}

/* The notice is the approved English wording and stays English under every
   locale until approved copy for that locale exists (data/royce-document-
   language.json). It keeps its own direction inside an RTL page. */
.rz-legal-doclang-text {
  margin: 0;
  color: var(--rzl-platinum);
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 68ch;
}
html.rtl .rz-legal-doclang-body[lang='en'] {
  direction: ltr;
  text-align: start;
}

/* ==========================================================================
   6. Service availability
   ========================================================================== */
.rz-legal-availability {
  background: var(--rzl-navy);
}

.rz-legal-country-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  max-width: 620px;
  margin-top: 34px;
}

.rz-legal-country-result {
  margin-top: 26px;
  padding: 26px 28px;
  border: 1px solid var(--rzl-line-strong);
  background: var(--rzl-well);
  border-inline-start-width: 3px;
}
.rz-legal-country-result[hidden] {
  display: none;
}
.rz-legal-country-result[data-tone='coral'] {
  border-inline-start-color: var(--rzl-coral-l);
}
.rz-legal-country-result[data-tone='cobalt'] {
  border-inline-start-color: var(--rzl-cobalt-l);
}
.rz-legal-country-result[data-tone='turquoise'] {
  border-inline-start-color: var(--rzl-turq-l);
}
.rz-legal-country-result[data-tone='gold'] {
  border-inline-start-color: var(--rzl-gold-l);
}

.rz-legal-country-name {
  font-weight: 400;
  font-size: 1.5rem;
  margin: 0 0 6px;
  color: var(--rzl-ivory);
}
.rz-legal-country-status {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 14px;
  font-weight: 500;
}
.rz-legal-country-result[data-tone='coral'] .rz-legal-country-status {
  color: var(--rzl-coral-t);
}
.rz-legal-country-result[data-tone='cobalt'] .rz-legal-country-status {
  color: var(--rzl-cobalt-t);
}
.rz-legal-country-result[data-tone='turquoise'] .rz-legal-country-status {
  color: var(--rzl-turq-t);
}
.rz-legal-country-result[data-tone='gold'] .rz-legal-country-status {
  color: var(--rzl-gold-t);
}
.rz-legal-country-msg {
  margin: 0 0 20px;
  color: var(--rzl-ivory);
  font-size: 1.0625rem;
  max-width: 62ch;
}
.rz-legal-country-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.rz-legal-restricted {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--rzl-line);
}
.rz-legal-restricted h3 {
  font-weight: 400;
  font-size: 1.35rem;
  margin: 0 0 8px;
  color: var(--rzl-ivory);
}

.rz-legal-country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.rz-legal-country-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--rzl-line);
  background: var(--rzl-restricted-wash);
  font-size: 0.9375rem;
}
.rz-legal-country-cell::before {
  content: '';
  width: 3px;
  align-self: stretch;
  background: var(--rzl-coral-l);
  flex: none;
}

.rz-legal-restricted-statement {
  max-width: 74ch;
}

.rz-legal-restriction-basis {
  margin: 20px 0 0;
  padding: 16px 20px;
  border-inline-start: 2px solid var(--rzl-line-strong);
  background: var(--rzl-well);
  color: var(--rzl-muted);
  font-size: 0.875rem;
  line-height: 1.7;
  max-width: 82ch;
}

.rz-legal-country-basis {
  margin: 0 0 20px;
  color: var(--rzl-muted);
  font-size: 0.85rem;
  line-height: 1.65;
  max-width: 68ch;
}

.rz-legal-region-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
}
.rz-legal-region-bar .rz-legal-field {
  min-width: 240px;
}
.rz-legal-region-bar .rz-legal-count {
  padding-bottom: 12px;
}

.rz-legal-country-grid-ok {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
  padding-inline-end: 6px;
}
.rz-legal-country-grid-ok .rz-legal-country-cell {
  background: var(--rzl-ok-wash);
  padding: 11px 14px;
  font-size: 0.875rem;
}
.rz-legal-country-grid-ok .rz-legal-country-cell::before {
  background: var(--rzl-turq-l);
}

.rz-legal-country-region {
  margin-inline-start: auto;
  color: var(--rzl-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.rz-legal-factors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px 26px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  color: var(--rzl-platinum);
  font-size: 0.9rem;
}
.rz-legal-factors li {
  padding-inline-start: 16px;
  position: relative;
}
.rz-legal-factors li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.68em;
  width: 6px;
  height: 1px;
  background: var(--rzl-cobalt-l);
}

/* ==========================================================================
   7. Closing CTA
   ========================================================================== */
.rz-legal-cta {
  background: radial-gradient(110% 150% at 14% 0%, rgba(63, 123, 232, 0.2) 0%, rgba(63, 123, 232, 0) 58%), radial-gradient(90% 130% at 88% 100%, rgba(122, 90, 209, 0.2) 0%, rgba(122, 90, 209, 0) 60%), linear-gradient(180deg, var(--rzl-navy-2) 0%, var(--rzl-deep) 100%);
  border-top: 1px solid var(--rzl-line);
}

.rz-legal-cta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 40px;
}

.rz-legal-cta-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px 22px;
  border: 1px solid var(--rzl-line);
  background: var(--rzl-well);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.28s var(--rzl-ease),
    transform 0.28s var(--rzl-ease),
    background-color 0.28s var(--rzl-ease);
}
.rz-legal-cta-card:hover {
  border-color: var(--rzl-gold-l);
  background: var(--rzl-gold-wash);
  transform: translateY(-3px);
  color: inherit;
}
.rz-legal-cta-card h3 {
  font-weight: 400;
  font-size: 1.3rem;
  margin: 0;
  color: var(--rzl-ivory);
}
.rz-legal-cta-card p {
  margin: 0;
  color: var(--rzl-platinum);
  font-size: 0.9rem;
}
.rz-legal-cta-card span[data-rzl-arrow] {
  margin-top: 8px;
  color: var(--rzl-gold-t);
  font-size: 0.875rem;
  font-weight: 500;
}

.rz-legal-disclaimer {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--rzl-line);
  color: var(--rzl-muted);
  font-size: 0.85rem;
  max-width: 86ch;
  line-height: 1.7;
}

/* ==========================================================================
   8. Responsive — every width is on the ladder (docs/responsive-breakpoints.md)
   ========================================================================== */
@media (max-width: 1199.98px) {
  .rz-legal-root {
    --rzl-gutter: 32px;
  }
  .rz-legal-filter-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .rz-legal-filter-grid > .rz-legal-field:first-child {
    grid-column: 1 / -1;
  }
  .rz-legal-filter-grid > .rz-legal-clear {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .rz-legal-hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .rz-legal-hero-copy {
    max-width: 36rem;
  }
  .rz-legal-hero-scrim {
    background: linear-gradient(100deg, rgba(6, 12, 22, 0.95) 0%, rgba(6, 12, 22, 0.88) 34%, rgba(8, 18, 34, 0.55) 62%, rgba(10, 22, 40, 0.16) 100%), linear-gradient(to top, rgba(6, 12, 22, 0.7) 0%, rgba(6, 12, 22, 0) 46%);
  }
}

@media (max-width: 991.98px) {
  .rz-legal-root {
    --rzl-section: 68px;
    --rzl-gutter: 24px;
  }
  .rz-legal-category {
    padding-block: 52px;
  }
  .rz-legal-category-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .rz-legal-category-tally {
    padding-bottom: 0;
  }
  .rz-legal-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .rz-legal-country-search {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
  }
  .rz-legal-doclang-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 32px 26px;
  }
}

@media (max-width: 767.98px) {
  /* hero: image reads as a deliberate crop above the copy, no cramped overlay */
  .rz-legal-hero-inner {
    min-height: 0;
    padding-block: 0;
    grid-template-columns: minmax(0, 1fr);
  }
  .rz-legal-hero-media {
    position: relative;
    inset: auto;
    height: 240px;
    margin-inline: calc(var(--rzl-gutter) * -1);
    background-image: url('/image/royce-legal-centre-hero-portrait.jpg');
    background-image: -webkit-image-set(url('/image/royce-legal-centre-hero-portrait.webp') type('image/webp'), url('/image/royce-legal-centre-hero-portrait.jpg') type('image/jpeg'));
    background-image: image-set(url('/image/royce-legal-centre-hero-portrait.webp') type('image/webp'), url('/image/royce-legal-centre-hero-portrait.jpg') type('image/jpeg'));
    background-position: 62% 52%;
  }
  .rz-legal-hero-scrim {
    inset: auto 0 auto 0;
    height: 240px;
    margin-inline: calc(var(--rzl-gutter) * -1);
    background: linear-gradient(to bottom, rgba(6, 12, 22, 0.3) 0%, rgba(6, 12, 22, 0.55) 62%, var(--rzl-hero-void) 100%);
  }
  .rz-legal-hero-copy {
    max-width: none;
    padding-block: 34px 56px;
  }
  .rz-legal-hero-actions .rz-legal-btn {
    flex: 1 1 100%;
  }

  .rz-legal-toolbar-wrap {
    position: static;
  }
  .rz-legal-filter-toggle {
    display: inline-flex;
  }
  .rz-legal-filter-panel[hidden] {
    display: none;
  }
  .rz-legal-filter-panel {
    margin-top: 16px;
  }
  .rz-legal-filter-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .rz-legal-filter-grid > .rz-legal-clear {
    justify-self: stretch;
  }
  .rz-legal-clear .rz-legal-btn {
    width: 100%;
  }

  .rz-legal-policy-card {
    padding: 24px 20px 20px;
  }
  .rz-legal-card-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .rz-legal-country-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .rz-legal-country-grid-ok {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    max-height: 320px;
  }
  .rz-legal-region-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .rz-legal-region-bar .rz-legal-count {
    padding-bottom: 0;
  }
  .rz-legal-doclang-panel {
    padding: 26px 20px;
  }
  .rz-legal-cta-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 399.98px) {
  .rz-legal-root {
    --rzl-gutter: 18px;
  }
}

/* ==========================================================================
   9. Motion, print and forced colours
   ========================================================================== */
.rz-legal-reveal {
  opacity: 0;
  transform: translateY(14px);
}
.rz-legal-reveal.rz-legal-is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.62s var(--rzl-ease),
    transform 0.62s var(--rzl-ease);
}

@media (prefers-reduced-motion: reduce) {
  .rz-legal-root *,
  .rz-legal-root *::before,
  .rz-legal-root *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .rz-legal-reveal {
    opacity: 1;
    transform: none;
  }
  .rz-legal-policy-card:hover {
    transform: none;
  }
  .rz-legal-cta-card:hover {
    transform: none;
  }
}

@media (forced-colors: active) {
  .rz-legal-doclang-panel,
  .rz-legal-policy-card,
  .rz-legal-cta-card,
  .rz-legal-country-cell {
    border: 1px solid CanvasText;
  }
}