/* ==========================================================================
   about.css
   The four-page About sequence: About Royce (/profile), Royce Group
   (/royce-group), Regulation & Licences (/regulation-licensing) and Global
   Locations (/locations). Ported from update/stage6/About.

   ALSO THE BASE LAYER FOR css/partners.css. The tokens (--ab-*), hero, section
   shell, heads, eyebrows, buttons, sub-nav, note and closing band below are
   the shared editorial page kit, and the three Partners pages load this file
   before their own. The `ab-` prefix is historical — it is not About-specific
   any more, so check both sequences before changing anything above section 7.

   WHAT CHANGED IN THE PORT, and why — read before reconciling with the source:

   - The source is dark-only and hardcodes #111111 / #0B1628 / #D6A61C. This
     site has a theme toggle, so every colour here is a token with a light
     counterpart. A section that only declares its colour inside the dark set
     ships an unreadable light theme.
   - The source sets Marcellus for every display line. Nothing here declares a
     font-family: the site is Ping AR + LT, which covers Arabic, and pulling an
     Arabic-less webfont in would break NFR-10. Display weight comes from size,
     weight and letter-spacing instead.
   - The source ships its own IntersectionObserver behind .rz-reveal. This file
     uses .animate-on-scroll, which js/general.js already observes site-wide —
     one observer, not two.
   - --ab-gold in light theme is #8a6a0f, not Royce Gold. #d6a61c measures
     2.25:1 on ivory and misses both the 4.5:1 text floor and the 3:1 non-text
     floor (NFR-03). The value is the same deep gold accounts.css and the hero
     engraving already use, and carries the same caveat: it sits outside the
     BRD §9.1 table and wants design sign-off. Editorial Grey #2e3137 is the
     in-palette fallback if that sign-off does not come.
   ========================================================================== */

:root {
  --ab-base: #111111;
  --ab-alt: #0b1628;
  --ab-panel: #0f1b2e;
  --ab-ink: #f8f8f8;
  --ab-ink-muted: rgba(248, 248, 248, 0.72);
  --ab-ink-quiet: rgba(248, 248, 248, 0.55);
  --ab-platinum: #c8c8c8;
  --ab-line: rgba(214, 166, 28, 0.22);
  --ab-line-soft: rgba(248, 248, 248, 0.1);
  --ab-gold: #d6a61c;
  --ab-gold-hover: #e6be4a;
  --ab-glow: rgba(214, 166, 28, 0.12);

  --ab-pad: 104px;
  --ab-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-bs-theme='light'] {
  --ab-base: #f8f8f8;
  --ab-alt: #ffffff;
  --ab-panel: #ffffff;
  --ab-ink: #111111;
  --ab-ink-muted: rgba(46, 49, 55, 0.82);
  --ab-ink-quiet: rgba(46, 49, 55, 0.66);
  --ab-platinum: #2e3137;
  --ab-line: rgba(17, 17, 17, 0.14);
  --ab-line-soft: rgba(17, 17, 17, 0.07);
  --ab-gold: #8a6a0f;
  --ab-gold-hover: #6f5509;
  --ab-glow: rgba(138, 106, 15, 0.08);
}

/* --------------------------------------------------------------------------
   1. About sub-nav
   The four About pages read as a sequence, so each one carries the whole set.
   Same technique as .account-tabs in accounts.css: the border-top IS the flow
   spacer that clears the fixed bar, and because it belongs to the sticky
   element it travels with it — which is why this sticks at top: 0 with no
   margin-top. --nav-h is published on :root by js/layout.js.
   -------------------------------------------------------------------------- */
.ab-tabs {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ab-base);
  border-top: var(--nav-h, 78px) solid var(--ab-base);
  border-bottom: 1px solid var(--ab-line);
}

.ab-tabs__inner {
  display: flex;
  gap: 0;
  /* Four uppercase labels do not fit a 360px phone. Scrolling beats wrapping
     into two rows and shoving the page down. */
  overflow-x: auto;
  scrollbar-width: none;
}

.ab-tabs__inner::-webkit-scrollbar {
  display: none;
}

.ab-tabs a {
  flex: 0 0 auto;
  padding: 16px 26px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ab-ink-quiet);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease;
}

.ab-tabs a:hover,
.ab-tabs a:focus-visible {
  color: var(--ab-gold);
}

.ab-tabs a.active {
  color: var(--ab-gold);
  border-bottom-color: var(--ab-gold);
}

/* Arabic sets no letter-spacing anywhere on this site — the script is joined
   and spacing breaks the ligatures. */
.rtl .ab-tabs a,
.rtl .ab-eyebrow,
.rtl .ab-metric .l,
.rtl .ab-reg .k,
.rtl .ab-loc__sub,
.rtl .ab-comp__sub,
.rtl .ab-cta-link,
.rtl .ab-eco__node .place,
.rtl .ab-eco__crown .net {
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   2. Section shell
   .ab-band--alt is the alternating surface. In dark it is navy against black;
   in light it is white against ivory. Same relationship, inverted.
   -------------------------------------------------------------------------- */
.ab-page {
  background: var(--ab-base);
  color: var(--ab-ink);
}

.ab-section {
  position: relative;
  padding: var(--ab-pad) 0;
  background: var(--ab-base);
}

.ab-band--alt {
  background: var(--ab-alt);
}

.ab-eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ab-gold);
}

.ab-head {
  max-width: 760px;
  margin-bottom: 52px;
}

.ab-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.ab-head .ab-eyebrow {
  margin-bottom: 16px;
}

.ab-head h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  font-weight: 500;
  line-height: 1.14;
  color: var(--ab-ink);
}

.ab-head p {
  margin: 16px 0 0;
  color: var(--ab-ink-muted);
}

/* --------------------------------------------------------------------------
   3. Hero
   Not .market-hero: that one is a full-bleed photographic hero with a scrim,
   and these three pages open on type. The grid wash and the corner glow are
   the whole treatment.
   -------------------------------------------------------------------------- */
/* Plain padding, NOT calc(--nav-h + …): .ab-tabs sits above every hero on
   these pages and its border-top is already the flow spacer that clears the
   fixed bar. Adding --nav-h again here pushed the first headline most of a
   bar-height down the page. Same reason .acct-hero in accounts.css is a flat
   80px under .account-tabs. */
.ab-hero {
  position: relative;
  overflow: hidden;
  padding: 80px 0 82px;
  background: var(--ab-base);
}

.ab-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(90% 70% at 84% 0%, var(--ab-glow), transparent 55%);
}

.ab-hero > .container-xl {
  position: relative;
  z-index: 2;
}

.ab-hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: linear-gradient(var(--ab-line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--ab-line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 60% at 72% 15%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 60% at 72% 15%, #000, transparent 75%);
}

.ab-hero__top {
  max-width: 760px;
}

.ab-hero .ab-eyebrow {
  margin-bottom: 18px;
}

.ab-hero h1 {
  margin: 0;
  font-size: clamp(2.2rem, 4.8vw, 3.5rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--ab-ink);
}

/* The one-line positioning statement between the h1 and the body copy —
   larger and lighter than the lead, platinum rather than muted ink.
   css/partners.css defines .pt-hero__sub with identical declarations; that is
   the older name for this rule and should be folded in here the next time the
   partner pages are touched. */
.ab-hero__sub {
  max-width: 640px;
  margin: 18px 0 0;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.4;
  color: var(--ab-platinum);
}

.ab-hero__lead {
  margin: 22px 0 0;
  max-width: 620px;
  color: var(--ab-ink-muted);
}

.ab-hero__lead + .ab-hero__lead {
  margin-top: 14px;
}

.ab-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* --------------------------------------------------------------------------
   4. Buttons and inline actions
   .ab-btn used to carry its own box here, on the reasoning that the bar's
   buttons "would read as chips at page scale". That reasoning is what produced
   thirteen different button sizes; the box is shared now and lives in
   css/buttons.css. Only motion stays.
   -------------------------------------------------------------------------- */
.ab-btn {
  transition:
    background-color 0.22s var(--ab-ease),
    color 0.22s var(--ab-ease),
    border-color 0.22s var(--ab-ease);
}

/* Gold as a FILL, not a foreground — black on #d6a61c is 8.4:1 and survives
   the theme flip, which gold as text does not. */
.ab-btn--gold {
  background: var(--royce-gold);
  border-color: var(--royce-gold);
  color: var(--royce-black);
}

.ab-btn--gold:hover,
.ab-btn--gold:focus-visible {
  background: var(--royce-gold-hover);
  border-color: var(--royce-gold-hover);
  color: var(--royce-black);
}

.ab-btn--outline {
  background: transparent;
  border-color: var(--ab-line);
  color: var(--ab-ink);
}

.ab-btn--outline:hover,
.ab-btn--outline:focus-visible {
  border-color: var(--ab-gold);
  color: var(--ab-gold);
}

.ab-btn .arw {
  flex-shrink: 0;
  transition: transform 0.22s var(--ab-ease);
}

.ab-btn:hover .arw,
.ab-btn:focus-visible .arw {
  transform: translateX(4px);
}

.rtl .ab-btn:hover .arw,
.rtl .ab-btn:focus-visible .arw {
  transform: translateX(-4px);
}

.rtl .ab-btn .arw {
  transform: scaleX(-1);
}

.rtl .ab-btn:hover .arw {
  transform: scaleX(-1) translateX(4px);
}

.ab-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ab-gold);
  text-decoration: none;
  transition: gap 0.2s var(--ab-ease);
}

.ab-cta-link:hover,
.ab-cta-link:focus-visible {
  gap: 14px;
  color: var(--ab-gold-hover);
}

.rtl .ab-cta-link .arw {
  transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   5. About Royce — numbered principles, sequence, technology, values
   -------------------------------------------------------------------------- */
.ab-principles {
  border-top: 1px solid var(--ab-line);
}

.ab-principle {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  align-items: start;
  padding: 36px 0;
  border-bottom: 1px solid var(--ab-line);
}

.ab-principle__n {
  padding-top: 5px;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  color: var(--ab-gold);
  font-variant-numeric: tabular-nums;
}

.ab-principle h3 {
  margin: 0 0 10px;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--ab-ink);
}

.ab-principle p {
  margin: 0;
  max-width: 640px;
  color: var(--ab-ink-muted);
}

/* Container draws border-top + border-left, cells draw border-right +
   border-bottom. Full rows compose into a complete box with single hairlines.

   This used to be `gap: 1px` over a line-coloured container background, which
   works only while every row is full: at the 1199px breakpoint these five
   cells drop to two columns, and the empty half of the third row rendered the
   container's gold background as a solid slab. Cells paint no background now,
   so a short row is simply absent. Same technique as the card grids in
   css/partners.css — change one, check the other. */
.ab-seq {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--ab-line);
  border-left: 1px solid var(--ab-line);
}

.rtl .ab-seq,
.rtl .ab-values,
.rtl .ab-caps,
.rtl .ab-eco__nodes {
  border-left: 0;
  border-right: 1px solid var(--ab-line);
}

/* The cell keeps its own surface — these read as raised panels against the
   section, and that is independent of how the rules are drawn. What matters
   is that the CONTAINER no longer paints the line colour, so an empty track
   shows the section behind it rather than a gold slab. */
.ab-seq__item {
  padding: 32px 26px;
  background: var(--ab-panel);
  border-right: 1px solid var(--ab-line);
  border-bottom: 1px solid var(--ab-line);
}

.ab-band--alt .ab-seq__item,
.ab-band--alt .ab-cap {
  background: var(--ab-alt);
}

.rtl .ab-seq__item,
.rtl .ab-value,
.rtl .ab-cap,
.rtl .ab-eco__node {
  border-right: 0;
  border-left: 1px solid var(--ab-line);
}

.ab-seq__k {
  margin-bottom: 12px;
  font-size: 1.15rem;
  color: var(--ab-ink);
}

.ab-seq__item p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ab-ink-muted);
}

.ab-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}

.ab-split__lead h2 {
  margin: 0 0 16px;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 500;
  line-height: 1.16;
  color: var(--ab-ink);
}

.ab-split__lead p {
  margin: 0;
  color: var(--ab-ink-muted);
}

.ab-split__lead .ab-eyebrow {
  margin-bottom: 16px;
}

.ab-list {
  border-top: 1px solid var(--ab-line);
}

.ab-list__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ab-line);
}

.ab-list__row .mk {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: var(--ab-gold);
}

.ab-list__row .t {
  font-size: 1.05rem;
  color: var(--ab-ink);
}

.ab-intl {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 48px;
  align-items: center;
}

.ab-intl__body h2 {
  margin: 0 0 18px;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 500;
  line-height: 1.16;
  color: var(--ab-ink);
}

.ab-intl__body p {
  margin: 0 0 24px;
  color: var(--ab-ink-muted);
}

.ab-stats {
  border: 1px solid var(--ab-line);
}

.ab-stat {
  padding: 30px 34px;
  border-bottom: 1px solid var(--ab-line);
}

.ab-stat:last-child {
  border-bottom: none;
}

.ab-stat .v {
  font-size: 2.2rem;
  line-height: 1;
  color: var(--ab-gold);
}

.ab-stat .l {
  margin-top: 12px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ab-ink-muted);
}

.rtl .ab-stat .l {
  letter-spacing: 0;
}

.ab-values {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--ab-line);
  border-left: 1px solid var(--ab-line);
}

/* The :last-child rules this replaces cleared the border on the fifth cell
   only, which is correct in one row and wrong in every wrapped layout — at
   two columns the second and fourth cells kept a border with nothing beside
   them. Nothing is now conditional on position. */
.ab-value {
  padding: 34px 24px;
  border-right: 1px solid var(--ab-line);
  border-bottom: 1px solid var(--ab-line);
}

.ab-value h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ab-ink);
}

.ab-value p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--ab-ink-muted);
}

/* --------------------------------------------------------------------------
   6. Closing band
   -------------------------------------------------------------------------- */
.ab-closing {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.ab-closing > .container-xl {
  position: relative;
  z-index: 2;
}

.ab-closing h2 {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 500;
  line-height: 1.14;
  color: var(--ab-ink);
}

.ab-closing p {
  max-width: 600px;
  margin: 20px auto 34px;
  color: var(--ab-ink-muted);
}

.ab-closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   7. Royce Group — network diagram, entity panels, flow, capabilities

   The diagram is a CONCEPTUAL map of operating roles. It is not an org chart
   and implies no legal ownership; the note beneath it says so and is
   load-bearing, not decoration.
   -------------------------------------------------------------------------- */
.ab-eco {
  position: relative;
  overflow: hidden;
  padding: 56px 40px;
  border: 1px solid var(--ab-line);
  background: radial-gradient(120% 120% at 50% 0%, var(--ab-panel), var(--ab-alt) 72%);
}

.ab-eco__crown {
  margin-bottom: 8px;
  text-align: center;
}

.ab-eco__crown .brand {
  font-size: 2rem;
  letter-spacing: 0.14em;
  color: var(--ab-gold);
}

.ab-eco__crown .net {
  margin-top: 10px;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ab-ink-muted);
}

.ab-eco__svg {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 auto;
}

.ab-eco__line {
  fill: none;
  stroke: var(--ab-line);
  stroke-width: 1;
}

.ab-eco__line--flow {
  stroke-dasharray: 5 4;
  animation: ab-ecoflow 4.5s linear infinite;
}

@keyframes ab-ecoflow {
  to {
    stroke-dashoffset: -36;
  }
}

/* No border-top on purpose — the diagram sits directly above and closes that
   edge itself. Only the left edge comes from the container here. */
.ab-eco__nodes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-left: 1px solid var(--ab-line);
}

.ab-eco__node {
  padding: 32px 28px;
  background: var(--ab-panel);
  border-right: 1px solid var(--ab-line);
  border-bottom: 1px solid var(--ab-line);
}

.ab-eco__node .place {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ab-gold);
}

.ab-eco__node .name {
  margin-top: 10px;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--ab-ink);
}

.ab-eco__node .role {
  margin-top: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ab-ink-muted);
}

.rtl .ab-eco__node .role {
  letter-spacing: 0;
}

.ab-eco__node ul {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.ab-eco__node li {
  padding: 6px 0;
  font-size: 0.85rem;
  color: var(--ab-ink-muted);
  border-top: 1px solid var(--ab-line);
}

.ab-eco__note {
  max-width: 820px;
  margin: 20px 0 0;
  font-size: 0.8rem;
  color: var(--ab-ink-muted);
}

.ab-comp {
  display: grid;
  grid-template-columns: 0.34fr 0.66fr;
  border-top: 1px solid var(--ab-line);
}

.ab-comp:last-of-type {
  border-bottom: 1px solid var(--ab-line);
}

.ab-comp__side {
  padding: 44px 40px 44px 0;
  border-right: 1px solid var(--ab-line);
}

.rtl .ab-comp__side {
  padding: 44px 0 44px 40px;
  border-right: 0;
  border-left: 1px solid var(--ab-line);
}

.ab-comp__side .place {
  margin-top: 14px;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--ab-gold);
}

.ab-comp__side .coord {
  margin-top: 14px;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--ab-ink-muted);
}

.ab-comp__main {
  padding: 44px 0 44px 52px;
}

.rtl .ab-comp__main {
  padding: 44px 52px 44px 0;
}

.ab-comp__main h3 {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 500;
  line-height: 1.16;
  color: var(--ab-ink);
}

.ab-comp__sub {
  margin-top: 10px;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ab-gold);
}

.ab-comp__copy {
  max-width: 600px;
  margin: 18px 0 0;
  color: var(--ab-ink-muted);
}

.ab-comp__fns {
  margin-top: 18px;
  font-size: 0.82rem;
  color: var(--ab-platinum);
}

/* --------------------------------------------------------------------------
   8. Regulatory cell strip
   Shared by the Group entity panels and the Locations cards. Every cell is a
   labelled key/value: a licence number must never appear without the label
   that says which regulator issued it, and a company reference must never sit
   under a heading that reads as a licence (BRD §3.2).
   -------------------------------------------------------------------------- */
/* This began as an inline-flex strip of content-width cells, each with a
   border-right that was cancelled on :last-child. On a wide panel that breaks
   in two ways at once: the cells wrap into rows that stop short of the
   container's right edge, leaving a hole inside the outer border, and the
   border-right of whichever cell happens to end a row hangs in that hole with
   nothing beside it.

   Both faults come from the same cause — the cells were sized by their
   content and the rules belonged to the cells. Now the cells grow to fill
   whatever row they land in, and the 1px gap over a line-coloured background
   IS the rule. Wrapping can no longer produce an orphan border, and there is
   no :last-child bookkeeping to get wrong in either writing direction. */
.ab-reg {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin-top: 24px;
  background: var(--ab-line);
  border: 1px solid var(--ab-line);
}

/* Basis of a third settles the six-cell panels into a clean 3 x 2 matrix on a
   wide screen, while flex-grow lets a short final row fill the width rather
   than trail off. min-width is the floor that forces the wrap to 2-up and then
   1-up as the panel narrows, so a cell never gets too tight for its label. */
.ab-reg .cell {
  flex: 1 1 calc(33.333% - 1px);
  min-width: 190px;
  padding: 12px 20px;
  background: var(--ab-base);
}

.ab-band--alt .ab-reg .cell {
  background: var(--ab-alt);
}

.ab-reg .k {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ab-ink-muted);
}

.ab-reg .v {
  margin-top: 4px;
  font-size: 0.92rem;
  color: var(--ab-ink);
}

.ab-addr {
  margin-top: 22px;
  font-size: 0.88rem;
  line-height: 1.85;
  color: var(--ab-ink-muted);
}

/* --------------------------------------------------------------------------
   9. Flow and capabilities
   -------------------------------------------------------------------------- */
.ab-flow {
  max-width: 560px;
  margin: 0 auto;
}

.ab-flow__step {
  padding: 22px 28px;
  text-align: center;
  background: var(--ab-panel);
  border: 1px solid var(--ab-line);
}

.ab-flow__step .t {
  font-size: 1.15rem;
  color: var(--ab-ink);
}

.ab-flow__arrow {
  display: flex;
  justify-content: center;
  padding: 12px 0;
  color: var(--ab-gold);
}

.ab-note {
  max-width: 820px;
  margin: 36px auto 0;
  padding: 20px 26px;
  font-size: 0.86rem;
  color: var(--ab-ink-muted);
  background: var(--ab-panel);
  border: 1px solid var(--ab-line);
  border-left: 2px solid var(--ab-gold);
}

.rtl .ab-note {
  border-left: 1px solid var(--ab-line);
  border-right: 2px solid var(--ab-gold);
}

.ab-caps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ab-line);
  border-left: 1px solid var(--ab-line);
}

.ab-cap {
  padding: 30px 28px;
  background: var(--ab-panel);
  border-right: 1px solid var(--ab-line);
  border-bottom: 1px solid var(--ab-line);
}

.ab-band--alt .ab-flow__step,
.ab-band--alt .ab-note {
  background: var(--ab-alt);
}

.ab-cap .mk {
  display: block;
  width: 24px;
  height: 24px;
  margin-bottom: 14px;
  color: var(--ab-gold);
}

.ab-cap h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ab-ink);
}

/* --------------------------------------------------------------------------
   10. Locations — metrics, map, location cards, partner network

   THE MAP FRAME IS DARK IN BOTH THEMES. The base image is a dimmed night-side
   photograph; there is no light-theme counterpart of it, and gold markers over
   a dark plate is the only combination that reads. So everything inside
   .ab-map-frame re-declares its ink against the plate rather than inheriting
   the page tokens — the same reasoning that keeps the header's dropdown panels
   navy in both themes.
   -------------------------------------------------------------------------- */
.ab-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 60px;
  border-top: 1px solid var(--ab-line);
}

.ab-metric {
  padding: 34px 34px 0 0;
  border-right: 1px solid var(--ab-line);
}

.ab-metric:last-child {
  padding-right: 0;
  padding-left: 34px;
  border-right: none;
}

.ab-metric:nth-child(2) {
  padding-left: 34px;
}

.rtl .ab-metric {
  padding: 34px 0 0 34px;
  border-right: 0;
  border-left: 1px solid var(--ab-line);
}

.rtl .ab-metric:last-child {
  padding-left: 0;
  padding-right: 34px;
  border-left: none;
}

.ab-metric .v {
  font-size: clamp(2.2rem, 4.6vw, 3.1rem);
  line-height: 1;
  color: var(--ab-gold);
}

.ab-metric .l {
  max-width: 220px;
  margin-top: 14px;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ab-ink-muted);
}

.ab-map-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
  margin-bottom: 40px;
}

.ab-map-head h2 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 500;
  line-height: 1.16;
  color: var(--ab-ink);
}

.ab-map-head p {
  max-width: 560px;
  margin: 14px 0 0;
  color: var(--ab-ink-muted);
}

.ab-map-head__metric {
  text-align: right;
}

.rtl .ab-map-head__metric {
  text-align: left;
}

.ab-map-head__metric .v {
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: 0.9;
  color: var(--ab-gold);
}

.ab-map-head__metric .l {
  margin-top: 10px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ab-ink-muted);
}

.ab-map-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1680 / 944;
  background: #0b1628;
  border: 1px solid var(--ab-line);
}

/* The image's own baked-in city lights are NOT Royce offices. Dimming and
   desaturating is what keeps them reading as ambient reach rather than as
   plotted locations — the three markers below are the only Royce locations. */
.ab-map-frame__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.62) saturate(0.72) contrast(1.02);
}

.ab-map-frame__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 22, 40, 0.34), rgba(11, 22, 40, 0.5)), radial-gradient(120% 100% at 50% 0%, rgba(214, 166, 28, 0.06), transparent 60%);
}

.ab-map-overlay,
.ab-map-partners {
  position: absolute;
  inset: 0;
}

.ab-map-partners {
  pointer-events: none;
}

.ab-map-partners .ab-star {
  pointer-events: auto;
}

/* Positioned by % of the frame so the markers track the image at any size. */
.ab-marker {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.ab-marker__pin {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.ab-marker__pin::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 166, 28, 0.5), rgba(214, 166, 28, 0) 70%);
  opacity: 0.5;
  transition: opacity 0.25s var(--ab-ease);
}

.ab-marker__ring,
.ab-marker__ping {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--royce-gold);
  border-radius: 50%;
}

.ab-marker__ring {
  opacity: 0.85;
}

.ab-marker__ping {
  opacity: 0;
  animation: ab-ping 3.4s var(--ab-ease) infinite;
}

@keyframes ab-ping {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  70%,
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

.ab-marker__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--royce-gold);
  box-shadow: 0 0 8px 2px rgba(214, 166, 28, 0.6);
  transition: background-color 0.2s var(--ab-ease);
}

.ab-marker__lbl {
  margin-top: 8px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #f8f8f8;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.rtl .ab-marker__lbl {
  letter-spacing: 0;
}

.ab-marker:hover .ab-marker__pin::before,
.ab-marker:focus-visible .ab-marker__pin::before,
.ab-marker.is-active .ab-marker__pin::before {
  opacity: 1;
}

.ab-marker:hover .ab-marker__dot,
.ab-marker.is-active .ab-marker__dot {
  background: var(--royce-gold-hover);
}

/* Partner stars sit BELOW the Royce markers (z-index 1 vs 3) and are smaller
   and dimmer. A partner market is a relationship, not an office — the two must
   never read as the same class of thing. */
.ab-star {
  position: absolute;
  z-index: 1;
  padding: 0;
  line-height: 0;
  background: none;
  border: none;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.ab-star svg {
  display: block;
  width: 13px;
  height: 13px;
  filter: drop-shadow(0 0 3px rgba(214, 166, 28, 0.5));
  animation: ab-twinkle 4.5s ease-in-out infinite;
  transition:
    transform 0.2s var(--ab-ease),
    filter 0.2s var(--ab-ease);
}

.ab-star .fill {
  fill: var(--royce-gold);
  opacity: 0.72;
  transition: opacity 0.2s var(--ab-ease);
}

@keyframes ab-twinkle {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

.ab-star:hover svg,
.ab-star:focus-visible svg,
.ab-star.is-active svg {
  transform: scale(1.35);
  filter: drop-shadow(0 0 6px rgba(214, 166, 28, 0.9));
}

.ab-star:hover .fill,
.ab-star:focus-visible .fill,
.ab-star.is-active .fill {
  opacity: 1;
}

/* Arcs join the three Royce locations only. No partner arcs — a line between
   two partner markets would imply a route Royce does not operate. */
.ab-map-links {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ab-link {
  fill: none;
  stroke: var(--royce-gold);
  stroke-width: 0.4;
  stroke-dasharray: 2 2;
  opacity: 0;
  transition: opacity 0.4s var(--ab-ease);
}

.ab-map-frame.show-links .ab-link {
  opacity: 0.55;
}

.ab-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding: 18px 24px;
  background: var(--ab-panel);
  border: 1px solid var(--ab-line);
  border-top: none;
}

.ab-legend__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.76rem;
  color: var(--ab-ink-muted);
}

.ab-legend__sym {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.ab-legend__sym--royce::before {
  content: '';
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--royce-gold);
  box-shadow: 0 0 0 3px rgba(214, 166, 28, 0.2);
}

.ab-legend__sym--star svg {
  display: block;
  width: 15px;
  height: 15px;
}

.ab-tip {
  position: absolute;
  z-index: 6;
  max-width: 240px;
  padding: 14px 18px;
  pointer-events: none;
  background: #111111;
  border: 1px solid var(--royce-gold);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.ab-tip.show {
  opacity: 1;
  transform: translateY(0);
}

.ab-tip .t {
  font-size: 1rem;
  color: #f8f8f8;
}

.ab-tip .r {
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--royce-gold);
}

.ab-tip .a {
  margin-top: 6px;
  font-size: 0.72rem;
  color: rgba(248, 248, 248, 0.72);
}

.ab-map-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: 940px;
  margin-top: 24px;
  padding: 20px 26px;
  background: var(--ab-panel);
  border: 1px solid var(--ab-line);
  border-left: 2px solid var(--ab-gold);
}

.rtl .ab-map-note {
  border-left: 1px solid var(--ab-line);
  border-right: 2px solid var(--ab-gold);
}

.ab-map-note svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--ab-gold);
}

.ab-map-note p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ab-ink-muted);
}

.ab-loc {
  display: grid;
  grid-template-columns: 0.32fr 0.68fr;
  border-top: 1px solid var(--ab-line);
}

.ab-loc:last-of-type {
  border-bottom: 1px solid var(--ab-line);
}

.ab-loc__index {
  padding: 44px 40px 44px 0;
  border-right: 1px solid var(--ab-line);
}

.rtl .ab-loc__index {
  padding: 44px 0 44px 40px;
  border-right: 0;
  border-left: 1px solid var(--ab-line);
}

.ab-loc__index .num {
  font-size: 2.4rem;
  line-height: 1;
  color: var(--ab-gold);
  font-variant-numeric: tabular-nums;
}

.ab-loc__index .ab-eyebrow {
  margin-top: 18px;
}

.ab-loc__index .coord {
  margin-top: 14px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ab-ink-muted);
  font-variant-numeric: tabular-nums;
}

.ab-loc__body {
  padding: 44px 0 44px 52px;
}

.rtl .ab-loc__body {
  padding: 44px 52px 44px 0;
}

.ab-loc__body h3 {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
  line-height: 1.16;
  color: var(--ab-ink);
}

.ab-loc__entity {
  margin-top: 6px;
  font-size: 1.05rem;
  color: var(--ab-platinum);
}

.ab-loc__sub {
  margin-top: 12px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ab-gold);
}

.ab-loc__copy {
  max-width: 560px;
  margin: 18px 0 0;
  color: var(--ab-ink-muted);
}

.ab-loc__tags {
  margin-top: 16px;
  font-size: 0.8rem;
  color: var(--ab-platinum);
}

.ab-net {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--ab-line);
}

.ab-net__lead {
  padding: 52px;
  border-right: 1px solid var(--ab-line);
}

.rtl .ab-net__lead {
  border-right: 0;
  border-left: 1px solid var(--ab-line);
}

.ab-net__lead .ab-eyebrow {
  margin-bottom: 16px;
}

.ab-net__lead h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 500;
  line-height: 1.16;
  color: var(--ab-ink);
}

.ab-net__lead p {
  margin: 18px 0 0;
  color: var(--ab-ink-muted);
}

.ab-net__concepts {
  display: flex;
  flex-direction: column;
}

.ab-net__c {
  position: relative;
  padding: 34px 52px;
  border-bottom: 1px solid var(--ab-line);
}

.ab-net__c:last-child {
  border-bottom: none;
}

.ab-net__c::before {
  content: '';
  position: absolute;
  left: 0;
  top: 34px;
  bottom: 34px;
  width: 2px;
  background: var(--ab-gold);
  opacity: 0;
  transition: opacity 0.25s var(--ab-ease);
}

.rtl .ab-net__c::before {
  left: auto;
  right: 0;
}

.ab-net__c:hover::before {
  opacity: 0.7;
}

.ab-net__c h3 {
  margin: 0 0 9px;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--ab-ink);
}

.ab-net__c p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ab-ink-muted);
}

/* The 100+ figure is partner-network reach. The qualifying line beneath it is
   not optional dressing — the number is meaningless and misleading without it
   (BRD §3.2: no unqualified reach claims). */
.ab-sig {
  position: relative;
  overflow: hidden;
  text-align: center;
}

.ab-sig::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 80% at 50% 40%, var(--ab-glow), transparent 60%);
}

.ab-sig > .container-xl {
  position: relative;
  z-index: 2;
}

.ab-sig__num {
  font-size: clamp(4.5rem, 16vw, 12rem);
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: var(--ab-ink);
}

.ab-sig__num span {
  color: var(--ab-gold);
}

.ab-sig__cap {
  margin-top: 10px;
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  color: var(--ab-platinum);
}

.ab-sig__body {
  max-width: 600px;
  margin: 26px auto 0;
  color: var(--ab-ink-muted);
}

.ab-sig__clar {
  max-width: 640px;
  margin: 22px auto 0;
  padding-top: 20px;
  font-size: 0.8rem;
  color: var(--ab-ink-muted);
  border-top: 1px solid var(--ab-line);
}

/* --------------------------------------------------------------------------
   11. Motion and responsive
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ab-eco__line--flow,
  .ab-marker__ping,
  .ab-star svg {
    animation: none;
  }

  .ab-star svg {
    opacity: 0.8;
  }

  .ab-btn,
  .ab-btn .arw,
  .ab-cta-link,
  .ab-link,
  .ab-tip,
  .ab-net__c::before {
    transition: none;
  }
}

@media (max-width: 1199.98px) {
  :root {
    --ab-pad: 80px;
  }

  /* Five cells over two columns leaves the last row half empty. That is fine
     now: the cells paint no background, so the gap is absent rather than
     filled. The .ab-value border-bottom that used to be declared here is on
     the cell unconditionally. */
  .ab-seq,
  .ab-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ab-split,
  .ab-intl,
  .ab-caps,
  .ab-eco__nodes,
  .ab-net,
  .ab-metrics,
  .ab-map-head {
    grid-template-columns: 1fr;
  }

  .ab-split,
  .ab-intl {
    gap: 36px;
  }

  .ab-metric,
  .ab-metric:nth-child(2),
  .ab-metric:last-child,
  .rtl .ab-metric,
  .rtl .ab-metric:last-child {
    padding: 26px 0;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid var(--ab-line);
  }

  .ab-metric:last-child {
    border-bottom: none;
  }

  .ab-map-head__metric,
  .rtl .ab-map-head__metric {
    text-align: left;
  }

  .ab-net__lead,
  .rtl .ab-net__lead {
    padding: 40px 32px;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid var(--ab-line);
  }

  .ab-net__c {
    padding: 28px 32px;
  }
}

@media (max-width: 991.98px) {
  .ab-principle {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .ab-seq,
  .ab-values {
    grid-template-columns: 1fr;
  }

  .ab-comp,
  .ab-loc {
    grid-template-columns: 1fr;
  }

  .ab-comp__side,
  .ab-loc__index,
  .rtl .ab-comp__side,
  .rtl .ab-loc__index {
    padding: 30px 0;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid var(--ab-line);
  }

  .ab-comp__main,
  .ab-loc__body,
  .rtl .ab-comp__main,
  .rtl .ab-loc__body {
    padding: 30px 0;
  }

  /* One cell per row once the panel is full-width: at this size two 190px
     columns would put "Investment Dealer – Full Service Dealer, Excluding
     Underwriting" on five lines beside a one-word neighbour. */
  .ab-reg .cell {
    flex-basis: 100%;
  }

  .ab-hero__cta .ab-btn,
  .ab-closing__actions .ab-btn {
    width: 100%;
  }

  .ab-eco {
    padding: 36px 22px;
  }
}

/* The map is 16:9 and the three markers cluster in its right half. At phone
   width a full-bleed 16:9 plate is 200px tall and the labels collide, so the
   frame goes 4:3 and the image is pulled to the region the markers occupy. */
@media (max-width: 575.98px) {
  .ab-map-frame {
    aspect-ratio: 4 / 3;
  }

  .ab-map-frame__img {
    object-position: 62% center;
  }

  .ab-marker__lbl {
    font-size: 0.58rem;
  }

  .ab-legend {
    gap: 16px;
  }
}