/* hextrust.com — styles. Values are the brand tokens (hex-trust-design/tokens.css);
 * radius 0 everywhere; rules, not cards; Archivo for words, JetBrains Mono for data. */

@font-face { font-family: "Archivo"; src: url("/fonts/archivo-latin-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin-var.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --navy-900:#001A43; --navy-700:#123461; --ghost-dark:#163A66; --ghost-light:#D5DEEA;
  --custody:#001A43; --custody-ink:#001A43; /* no hue: the house colour */
  --markets:#CD632D; --markets-ink:#A53E00;
  --payments:#008FD6; --payments-ink:#006AAF;
  --wealth:#00A28E; --wealth-ink:#007C6A; --aura:#14b8a6;
  --paper:#F2F5F7; --surface:#FFFFFF;
  --ink:#0D1626; --ink-soft:#4A5568; --ink-faint:#7C8798;
  --rule:#D5DCE6; --rule-soft:#E6EBF2;
  --positive:#2E9E52; --caution:#7A4D00;
  --sans:"Archivo",-apple-system,"Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px; --s16:64px; --s24:96px;
  --line:var(--rule); --line-ink:var(--ink); --line-bar:1px;
}
/* Light only: the site does not follow the OS dark setting (Alessio, 27 Oct 2026). The home page has its own navy chapters. */
:root { color-scheme:light; }
/* A line page wears its line: the 6px bar, the nav underline, the primary button. */
[data-page][data-line="custody"]  { --line:var(--custody);  --line-ink:var(--custody-ink);  --line-bar:6px; }
[data-page][data-line="markets"]  { --line:var(--markets);  --line-ink:var(--markets-ink);  --line-bar:6px; }
[data-page][data-line="payments"] { --line:var(--payments); --line-ink:var(--payments-ink); --line-bar:6px; }
[data-page][data-line="wealth"]   { --line:var(--wealth);   --line-ink:var(--wealth-ink);   --line-bar:6px; }
.lc[data-line-card="custody"]  { --lc:var(--custody);  --lc-ink:var(--custody-ink); }
.lc[data-line-card="markets"]  { --lc:var(--markets);  --lc-ink:var(--markets-ink); }
.lc[data-line-card="payments"] { --lc:var(--payments); --lc-ink:var(--payments-ink); }
.lc[data-line-card="wealth"]   { --lc:var(--wealth);   --lc-ink:var(--wealth-ink); }

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
.wrap { max-width:1120px; margin:0 auto; padding:0 var(--s6); }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
h1,h2,h3 { margin:0; text-wrap:balance; line-height:1.08; font-weight:700; letter-spacing:-0.035em; }
h1 { font-size:clamp(2.25rem,5.6vw,4rem); letter-spacing:-0.04em; }
h2 { font-size:clamp(1.5rem,3vw,2.125rem); }
h3 { font-size:1.125rem; font-weight:600; letter-spacing:-0.02em; }
p { margin:0; max-width:64ch; }
p + p { margin-top:var(--s3); }
.eyebrow { font-family:var(--mono); font-size:0.6875rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 var(--s3); }
.lede { font-size:1.1875rem; color:var(--ink-soft); }
.small { font-size:0.875rem; color:var(--ink-soft); margin-top:var(--s6); }
.skip { position:absolute; left:-999px; top:8px; background:var(--ink); color:var(--surface); padding:var(--s2) var(--s3); z-index:20; }
.skip:focus { left:8px; }

.btn { display:inline-flex; align-items:center; gap:var(--s2); font-size:0.9375rem; font-weight:600; letter-spacing:-0.01em; padding:var(--s3) var(--s6); border:1px solid; cursor:pointer; background:transparent; white-space:nowrap; transition:transform .18s ease, border-color .18s ease; }
.btn:hover { transform:translateY(-1px); }
.btn.solid { background:var(--line-ink); border-color:var(--line-ink); color:#FFFFFF; }
.btn.ghost { border-color:var(--rule); color:var(--ink); }
.btn.ghost:hover { border-color:var(--ink); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline:2px solid var(--line-ink); outline-offset:2px; }
.hero .btn.solid, .band .btn.solid { background:#FFFFFF; border-color:#FFFFFF; color:var(--navy-900); }
.hero .btn.ghost, .band .btn.ghost { border-color:var(--navy-700); color:#FFFFFF; }
.hero .btn.ghost { border-color:rgba(232,237,245,.6); }
.hero .btn.ghost:hover, .band .btn.ghost:hover { border-color:#FFFFFF; }

/* Header */
header.site { position:sticky; top:0; z-index:10; background:var(--surface); border-bottom:1px solid var(--rule); }
.site-in { display:flex; align-items:center; justify-content:space-between; gap:var(--s6); height:64px; }
.logo { display:flex; align-items:center; gap:var(--s3); font-size:1.0625rem; color:var(--ink); flex:0 0 auto; }
.logo svg { width:28px; height:28px; display:block; }
nav.main { display:flex; gap:20px; align-items:center; }   /* room between the four lines, so they read as four, not one phrase; 20 px keeps the header inside the 1120 px column */
nav.main a { font-size:0.875rem; font-weight:500; letter-spacing:-0.01em; color:var(--ink-soft); padding:var(--s2) 0; border-bottom:2px solid transparent; white-space:nowrap; }
nav.main a:hover { color:var(--ink); }
nav.main a[aria-current="page"] { color:var(--ink); border-bottom-color:var(--line-ink); }
nav.main .sep { width:1px; height:18px; background:var(--rule); margin:0 var(--s1); flex:0 0 1px; }
.nav-right { display:flex; align-items:center; gap:var(--s4); flex:0 0 auto; }
.nav-right .login { font-size:0.875rem; font-weight:500; color:var(--ink-soft); white-space:nowrap; }
.nav-right .btn { padding:var(--s2) var(--s4); font-size:0.875rem; }
.burger { display:none; background:none; border:1px solid var(--rule); padding:var(--s2) var(--s3); font-size:0.875rem; font-weight:500; cursor:pointer; color:var(--ink); }
/* Below 1240 px the header has no room for Client login, so the menu takes over and carries
   Client login and Talk to us itself (they were unreachable on phones and tablets before). */
@media (max-width:1120px) { nav.main { display:none; } .burger { display:block; } .nav-right .btn, .nav-right .login-menu { display:none; } }
.nav-m { display:none; }
/* Jurisdiction pages (/singapore, /ae): their own header, as on Webflow. The switcher sits in
   the menu; on narrow screens Login moves into the menu with Talk to us. */
.region-switch { display:inline-flex; gap:var(--s3); }
nav.main .region-switch a { color:var(--ink-faint); }
nav.main .region-switch a[aria-current="page"] { color:var(--ink); border-bottom-color:var(--line-ink); }
.foot .region-switch { display:flex; flex-wrap:wrap; gap:var(--s3); }
.foot .region-switch a[aria-current="page"] { font-weight:600; }
@media (max-width:1120px) { .nav-right a.login { display:none; } }
.jur-sec[id], .jur-contact { scroll-margin-top:80px; }
.region-licence { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--s4) var(--s8); }
.region-licence p { margin:0; }
@media (max-width:1120px) { nav.main.open .nav-m { display:block; } nav.main.open .nav-m-cta { font-weight:600; border-bottom:0; } }
nav.main.open { display:flex; position:absolute; top:64px; left:0; right:0; background:var(--surface); flex-direction:column; gap:0; border-bottom:1px solid var(--rule); padding:var(--s2) var(--s6) var(--s4); }
nav.main.open a { padding:var(--s3) 0; border-bottom:1px solid var(--rule-soft); }
nav.main.open .sep { display:none; }

/* Hero */
.hero { position:relative; background:var(--navy-900); color:#E8EDF5; padding:var(--s16) 0 var(--s12); overflow:hidden; }
.hero canvas { position:absolute; inset:0; width:100%; height:100%; display:block; opacity:.85;
  -webkit-mask-image:linear-gradient(97deg, transparent 30%, rgba(0,0,0,.28) 48%, rgba(0,0,0,.85) 78%, #000 100%);
  mask-image:linear-gradient(97deg, transparent 30%, rgba(0,0,0,.28) 48%, rgba(0,0,0,.85) 78%, #000 100%); }
.hero .wrap { position:relative; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--s16); align-items:center; }
@media (max-width:860px) { .hero-grid { grid-template-columns:1fr; gap:var(--s12); } }
.hero .eyebrow { color:#DCE6F5; text-shadow:0 1px 14px rgba(0,26,67,.6); }
.hero h1 { color:#FFFFFF; }
.hero h1 .sweep { -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .lede { color:#EEF2F8; margin-top:var(--s6); text-shadow:0 1px 14px rgba(0,26,67,.6); }
.hero .cta { display:flex; gap:var(--s3); margin-top:var(--s8); flex-wrap:wrap; }
.hero-mark { display:flex; justify-content:center; position:relative; }
.hero-mark::before { content:""; position:absolute; inset:-22% -16%; background:radial-gradient(ellipse at center, var(--navy-900) 36%, rgba(0,26,67,0.72) 58%, rgba(0,26,67,0) 76%); }
.hero-mark svg { width:clamp(220px,28vw,320px); height:auto; display:block; position:relative; }
.hero-strip { border-top:1px solid var(--navy-700); margin-top:var(--s12); padding-top:var(--s6); display:flex; gap:var(--s8); flex-wrap:wrap; }
.hero-strip div { font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.12em; text-transform:uppercase; color:#7E96B8; }
.hero-strip b { display:block; color:#FFFFFF; font-weight:500; letter-spacing:0; text-transform:none; font-size:1rem; margin-top:2px; }

/* Sections + reveal */
main > section, main > .band { padding:var(--s16) 0; }
main > section + section { border-top:1px solid var(--rule); }
.sec-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s8); align-items:end; margin-bottom:var(--s8); }
@media (max-width:760px) { .sec-head { grid-template-columns:1fr; gap:var(--s3); } }
.reveal { opacity:.35; transform:translateY(14px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }
html.no-ambient .reveal { opacity:1; transform:none; transition:none; }
html.no-ambient .btn, html.no-ambient .lc, html.no-ambient .lc::before, html.no-ambient .wall svg { transition:none; }
html.no-ambient { scroll-behavior:auto; }

/* Lines */
.lines { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (max-width:900px) { .lines { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .lines { grid-template-columns:1fr; } }
.lc { background:var(--surface); padding:var(--s6) var(--s4) var(--s4); display:flex; flex-direction:column; gap:var(--s3); min-height:260px; position:relative; transition:background .2s ease; }
.lc::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--lc); transform:scaleX(0); transform-origin:0 50%; transition:height .25s ease, transform .9s cubic-bezier(.55,.05,.35,1) .1s; }
.lc.in::before, html.no-ambient .lc::before { transform:scaleX(1); }
.lc:hover::before { height:10px; }
.lc:hover { background:var(--paper); }
.lc h3 { margin-top:var(--s2); }
.lc p { font-size:0.9375rem; color:var(--ink-soft); }
.lc .lic { font-family:var(--mono); font-size:0.6875rem; color:var(--ink-faint); letter-spacing:0.04em; margin-top:auto; padding-top:var(--s3); border-top:1px solid var(--rule-soft); }
.lc .go { font-size:0.875rem; font-weight:600; color:var(--lc-ink); }

/* Motion blocks */
.motion { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:var(--s12); align-items:center; }
.motion.flip { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
.motion.flip > div:first-child { order:2; }
.motion > div:first-child .btn { margin-top:var(--s6); }
@media (max-width:860px) { .motion, .motion.flip { grid-template-columns:1fr; } .motion.flip > div:first-child { order:0; } }
.stage { background:var(--navy-900); border:1px solid var(--navy-700); padding:var(--s6); min-height:260px; display:flex; flex-direction:column; justify-content:center; gap:var(--s4); color:#FFFFFF; }
.stage > svg { width:100%; height:auto; display:block; }
.stage .cap { font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.12em; text-transform:uppercase; color:#7E96B8; display:flex; justify-content:space-between; gap:var(--s4); }
.stage .cap b { color:#FFFFFF; font-weight:500; letter-spacing:0; text-transform:none; font-variant-numeric:tabular-nums; }
.verify { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s6); align-items:center; }
.verify .addr { font-family:var(--mono); font-size:0.9375rem; word-break:break-all; color:#CFE0F2; min-height:3.2em; line-height:1.6; }
.verify .addr .diff { color:#FF8A9B; text-decoration:underline; text-decoration-thickness:2px; }
.verify .state { font-family:var(--mono); font-size:0.75rem; letter-spacing:0.08em; margin-top:var(--s3); min-height:1.4em; }
.verify .state.ok { color:#87B651; } .verify .state.bad { color:#E0A94A; }
.ladder { width:100%; border-collapse:collapse; font-family:var(--mono); font-size:0.875rem; font-variant-numeric:tabular-nums; color:#CFE0F2; }
.ladder th { text-align:right; font-size:0.625rem; letter-spacing:0.14em; text-transform:uppercase; color:#7E96B8; padding:0 var(--s3) var(--s2) 0; border-bottom:1px solid var(--navy-700); font-weight:500; }
.ladder th:first-child, .ladder td:first-child { text-align:left; }
.ladder td { text-align:right; padding:var(--s2) var(--s3) var(--s2) 0; border-bottom:1px solid #0E2A55; transition:background .6s ease; }
.ladder td.up { color:#87B651; } .ladder td.dn { color:#EB8656; }
.ladder tr.tick td { background:rgba(255,255,255,0.06); transition:none; }

/* Licence proof strip, steps, teaser, platforms */
.lics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (max-width:900px) { .lics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .lics { grid-template-columns:1fr; } }
.lic-card { background:var(--surface); padding:var(--s6) var(--s4); display:flex; flex-direction:column; gap:var(--s2); }
.lic-card .j { font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); }
.lic-card b { font-size:1.0625rem; font-weight:600; letter-spacing:-0.02em; line-height:1.2; }
.lic-card p { font-size:0.875rem; color:var(--ink-soft); }
.lic-card .for { display:flex; gap:var(--s1); margin-top:auto; padding-top:var(--s3); }
.lic-card .for span { width:14px; height:14px; display:inline-block; }
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s6); }
@media (max-width:900px) { .steps { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .steps { grid-template-columns:1fr; } }
.step { border-top:2px solid var(--ink); padding-top:var(--s4); display:flex; flex-direction:column; gap:var(--s2); }
.step .n { font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.14em; color:var(--ink-faint); }
.step h3 { font-size:1.0625rem; }
.step p { font-size:0.9375rem; color:var(--ink-soft); }
.step svg { width:40px; height:40px; display:block; margin-top:auto; padding:0; }   /* border-box: padding here shrank the drawing, so spacing sits on the text */
.step p { padding-bottom:var(--s6); }
.teaser { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (max-width:820px) { .teaser { grid-template-columns:1fr; } }
.teaser a { background:var(--surface); padding:var(--s6) var(--s4); display:flex; flex-direction:column; gap:var(--s2); transition:background .2s ease; }
.teaser a:hover { background:var(--paper); }
.teaser .k, .item .k { font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); }
.teaser h3, .item h3 { font-size:1.0625rem; }
.teaser p, .item p { font-size:0.9375rem; color:var(--ink-soft); }
.teaser .d, .item .d { font-family:var(--mono); font-size:0.75rem; color:var(--ink-faint); margin-top:auto; padding-top:var(--s3); }
.plat { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (max-width:900px) { .plat { grid-template-columns:1fr; } }
.pc { background:var(--surface); padding:var(--s8) var(--s6); display:flex; flex-direction:column; gap:var(--s3); }
.pc .name { font-size:1.375rem; font-weight:700; letter-spacing:-0.025em; }
.pc .name i { font-style:normal; font-size:0.75rem; color:var(--ink-faint); margin-left:var(--s2); letter-spacing:0.04em; font-family:var(--mono); }
.pc-aura, .pc-hs, .pc-via { display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }
.pc-via svg { height:22px; width:auto; color:var(--payments); }
.pc-hs svg { flex:0 0 30px; }
.pc p { font-size:0.9375rem; color:var(--ink-soft); }
.pc .go { font-size:0.875rem; font-weight:600; color:var(--ink-soft); margin-top:var(--s2); }

/* Band */
.band { background:var(--navy-900); color:#FFFFFF; }
.band .wrap { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s8); align-items:center; }
@media (max-width:760px) { .band .wrap { grid-template-columns:1fr; } }
.band p { color:#9FB3CE; margin-top:var(--s3); }

/* Page hero + line pages */
.page-hero { border-top:var(--line-bar) solid var(--line); background:var(--surface); padding:var(--s16) 0 var(--s12); border-bottom:1px solid var(--rule); }
.page-hero .eyebrow { color:var(--line-ink); }
.page-hero .lede { margin-top:var(--s4); }
.page-hero .lic { font-family:var(--mono); font-size:0.8125rem; color:var(--ink-soft); margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid var(--rule); display:inline-block; }
.aura-badge { margin-top:var(--s6); padding-top:var(--s6); border-top:1px solid var(--rule); color:var(--ink); }
.caps { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); border-top:1px solid var(--rule); margin-top:var(--s8); }
.caps > div { padding:var(--s4) var(--s6) var(--s4) 0; border-bottom:1px solid var(--rule-soft); }
.caps h3 { font-size:1rem; }
.caps p { font-size:0.9375rem; color:var(--ink-soft); margin-top:var(--s1); }
.who { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--s4); margin-top:var(--s8); }
.who > div { border-top:2px solid var(--line-ink); padding-top:var(--s3); font-size:0.9375rem; color:var(--ink-soft); }
.who b { display:block; color:var(--ink); font-weight:600; margin-bottom:2px; }
.note-legal { font-size:0.8125rem; color:var(--ink-faint); border-left:2px solid var(--rule); padding-left:var(--s3); }
.aura { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s6); align-items:center; border:1px solid var(--rule); background:var(--surface); padding:var(--s6); }
@media (max-width:640px) { .aura { grid-template-columns:1fr; } }
.aura .sw { display:flex; align-items:center; justify-content:center; padding:var(--s4) var(--s6); border:1px solid var(--rule); color:var(--ink); }
.aura p { font-size:0.9375rem; color:var(--ink-soft); margin-top:var(--s2); }

/* Register, segments, wall, people, resources, contact */
.reg { border-top:1px solid var(--ink); margin-top:var(--s8); }
.reg-row { display:grid; grid-template-columns:10rem minmax(0,1fr) 14rem; gap:var(--s4); padding:var(--s4) 0; border-bottom:1px solid var(--rule-soft); align-items:baseline; }
@media (max-width:760px) { .reg-row { grid-template-columns:1fr; gap:var(--s1); } .reg-row .l { text-align:left; } }
.reg-row .j { font-family:var(--mono); font-size:0.8125rem; font-weight:500; }
.reg-row .w { color:var(--ink-soft); font-size:0.9375rem; }
.reg-row .l { font-family:var(--mono); font-size:0.75rem; color:var(--ink-faint); text-align:right; }
/* Licence register by entity (/licences#entities) */
.ent { border-top:1px solid var(--ink); margin-top:var(--s6); }
.ent-row { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,1fr) 9rem; gap:var(--s4); padding:var(--s4) 0; border-bottom:1px solid var(--rule-soft); align-items:start; font-size:0.9375rem; }
.ent-row .e b { display:block; font-weight:600; color:var(--ink); }
.ent-row .jd, .ent-row .au { display:block; color:var(--ink-faint); font-size:0.8125rem; margin-top:0.15rem; }
.ent-row .a { color:var(--ink-soft); }
.ent-row .n { font-family:var(--mono); font-size:0.75rem; color:var(--ink-soft); line-height:1.55; overflow-wrap:anywhere; }
.ent-row .k { text-align:right; font-size:0.875rem; }
@media (max-width:900px) { .ent-row { grid-template-columns:1fr 1fr; } .ent-row .k { text-align:left; } }
@media (max-width:560px) { .ent-row { grid-template-columns:1fr; gap:var(--s2); } }

.segs { display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:var(--s4); margin-top:var(--s8); }
.seg { background:var(--surface); border:1px solid var(--rule); padding:var(--s6) var(--s4); display:flex; flex-direction:column; gap:var(--s3); }
.seg h3 { font-size:1.0625rem; }
.seg p { font-size:0.9375rem; color:var(--ink-soft); }
.seg .uses { display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:auto; padding-top:var(--s3); }
.seg .uses span { font-family:var(--mono); font-size:0.6875rem; padding:2px var(--s2); border:1px solid var(--rule); color:var(--ink-soft); border-left:3px solid var(--u); }
.wall { display:grid; grid-template-columns:repeat(auto-fill,minmax(56px,1fr)); gap:var(--s2); background:var(--navy-900); padding:var(--s6); border:1px solid var(--navy-700); }
.wall svg { width:100%; height:auto; display:block; transition:transform .2s ease; }
.wall svg:hover { transform:scale(1.15); }
.people { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--s4); margin-top:var(--s8); }
.person { border-top:1px solid var(--rule); padding-top:var(--s3); display:flex; gap:var(--s3); align-items:flex-start; }
.person img { width:64px; height:64px; object-fit:cover; object-position:50% 12%; display:block; flex:0 0 64px; background:var(--rule-soft); }   /* headshots are 4:5 with the face in the top third; a centred square crop took the top of the head off */
.person svg { width:22px; height:22px; display:block; flex:0 0 22px; margin-left:auto; opacity:.9; }
.person b { display:block; font-weight:600; }
.person span { font-size:0.875rem; color:var(--ink-soft); }
.proto { font-family:var(--mono); font-size:0.75rem; color:var(--ink-faint); border:1px dashed var(--rule); padding:var(--s2) var(--s3); display:inline-block; }
.tabs { display:flex; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s6); }
.tabs button { font-size:0.875rem; font-weight:500; padding:var(--s2) var(--s4); border:1px solid var(--rule); background:transparent; color:var(--ink-soft); cursor:pointer; }
.tabs button[aria-selected="true"] { background:var(--ink); color:var(--surface); border-color:var(--ink); }
.list { border-top:1px solid var(--ink); }
.item { display:grid; grid-template-columns:8rem minmax(0,1fr) auto; gap:var(--s4); padding:var(--s4) 0; border-bottom:1px solid var(--rule-soft); align-items:baseline; }
@media (max-width:700px) { .item { grid-template-columns:1fr; gap:var(--s1); } }
.item .k { color:var(--line-ink); }
.item .d { white-space:nowrap; padding-top:0; }

/* The Hex Mark — live lab, on navy */
.labx { background:var(--navy-900); color:#E8EDF5; padding:var(--s16) 0 var(--s12); position:relative; overflow:hidden; }
.labx::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(50% 60% at 92% 18%, color-mix(in srgb, var(--payments) 22%, transparent), transparent 70%), radial-gradient(45% 55% at 6% 100%, color-mix(in srgb, var(--markets) 14%, transparent), transparent 70%); }
.labx .wrap { position:relative; z-index:1; }
.labx .eyebrow { color:#9FB3CE; } .labx h1 { color:#FFFFFF; } .labx .lede { color:#9FB3CE; margin-top:var(--s4); }
.lab2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s6); margin-top:var(--s12); align-items:stretch; }
@media (max-width:900px) { .lab2 { grid-template-columns:1fr; } }
.lab-in, .lab-out2 { border:1px solid var(--navy-700); background:rgba(255,255,255,0.025); display:flex; flex-direction:column; min-height:520px; }
.lab-input { display:flex; flex-direction:column; gap:var(--s2); padding:var(--s6) var(--s6) 0; }
.lab-input span { font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.14em; text-transform:uppercase; color:#7E96B8; }
.lab-input input { font:inherit; font-family:var(--mono); font-size:1.375rem; color:#FFFFFF; background:transparent; border:0; border-bottom:2px solid #FFFFFF; border-radius:0; padding:var(--s2) 0 var(--s3); width:100%; caret-color:#FFFFFF; }
.lab-input input:focus-visible { outline:none; border-bottom-color:var(--payments); }
.lab-tries { padding:var(--s4) var(--s6) 0; display:flex; gap:var(--s2); flex-wrap:wrap; }
.lab-tries button { font:inherit; font-family:var(--mono); font-size:0.6875rem; background:transparent; color:#9FB3CE; border:1px solid var(--navy-700); padding:3px var(--s2); cursor:pointer; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lab-tries button:hover { border-color:#FFFFFF; color:#FFFFFF; }
.trace { margin-top:var(--s6); border-top:1px solid var(--navy-700); flex:1; display:flex; flex-direction:column; min-height:0; }
.tr-h, .trace li { display:grid; grid-template-columns:2.6rem 2.2rem minmax(0,8.5rem) minmax(0,1fr); gap:var(--s3); font-family:var(--mono); font-size:0.75rem; padding:var(--s1) var(--s6); }
.tr-h { color:#7E96B8; letter-spacing:0.12em; text-transform:uppercase; font-size:0.625rem; border-bottom:1px solid var(--navy-700); padding:var(--s2) var(--s6); }
.trace ol { list-style:none; margin:0; padding:var(--s2) 0; max-height:320px; overflow:auto; flex:1; scrollbar-width:thin; }
.trace li { color:#CFE0F2; animation:tr-in .22s ease both; }
.trace li em { font-style:normal; color:#7E96B8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trace li.start { color:#7E96B8; }
.trace li.done i::after { content:" · the Mark"; color:#7E96B8; }
.trace li.done, .trace li.done b, .trace li.done em { color:#FFFFFF; }
.trace li b { color:#FFFFFF; font-weight:500; } .trace li span { color:#7E96B8; } .trace li i { font-style:normal; letter-spacing:0.04em; }
.trace li:last-child i { color:#FFFFFF; }
@keyframes tr-in { from { opacity:0; transform:translateX(-6px); } to { opacity:1; transform:none; } }
html.no-ambient .trace li { animation:none; }
.lab-mark { padding:var(--s8); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--navy-700); background:radial-gradient(ellipse at center, rgba(255,255,255,0.05), transparent 72%); min-height:280px; }
.lab-mark svg { width:min(100%, 250px); height:auto; display:block; }
.lab-read { padding:var(--s6); display:flex; flex-direction:column; gap:var(--s4); flex:1; }
.ring { position:relative; height:12px; margin-top:var(--s2); }
.ring-band { position:absolute; inset:0; }
.ring-red { position:absolute; top:0; bottom:0; background:rgba(0,26,67,0.78); }
.ring-pin { position:absolute; top:-6px; width:2px; height:24px; background:#FFFFFF; margin-left:-1px; transition:left .5s cubic-bezier(.2,.7,.2,1); box-shadow:0 0 0 2px var(--navy-900); }
.ring-pin[hidden] { display:none; }
.lab-facts2 { margin:0; border-top:1px solid var(--navy-700); }
.lab-facts2 > div { display:grid; grid-template-columns:7rem minmax(0,1fr); gap:var(--s3); padding:var(--s2) 0; border-bottom:1px solid #0E2A55; align-items:baseline; }
.lab-facts2 dt { font-family:var(--mono); font-size:0.625rem; letter-spacing:0.14em; text-transform:uppercase; color:#7E96B8; }
.lab-facts2 dd { margin:0; font-family:var(--mono); font-size:0.9375rem; color:#FFFFFF; word-break:break-all; }
.lab-facts2 .sw { display:inline-block; width:0.8em; height:0.8em; vertical-align:-1px; margin-right:var(--s2); }
.lab-bits { font-family:var(--mono); font-size:0.875rem; line-height:1.8; color:#4F6B92; }
.lab-bits i { font-style:normal; color:#7E96B8; margin-left:var(--s3); font-size:0.75rem; }
.lab-bits u { text-decoration:none; color:#FFFFFF; }
.lab-chip { display:flex; align-items:flex-start; gap:var(--s3); margin-top:auto; padding-top:var(--s4); border-top:1px solid var(--navy-700); }
.lab-chip span { font-family:var(--sans); font-size:0.8125rem; line-height:1.45; color:#9FB3CE; letter-spacing:normal; padding-top:2px; }
.lab-chip svg { width:44px; height:44px; display:block; }
.lab-note { margin-top:var(--s8); color:#9FB3CE; font-size:0.9375rem; max-width:72ch; }
.acct { width:100%; border-collapse:collapse; margin-top:var(--s8); font-size:0.9375rem; }
.acct th { text-align:left; font-family:var(--mono); font-size:0.625rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); padding:var(--s2) var(--s3) var(--s2) 0; border-bottom:1px solid var(--ink); }
.acct td { padding:var(--s3) var(--s3) var(--s3) 0; border-bottom:1px solid var(--rule-soft); vertical-align:middle; }
.acct td svg { width:28px; height:28px; display:block; }
.acct .ref { font-family:var(--mono); font-size:0.8125rem; color:var(--ink-faint); }
.acct .num, .acct th.num { font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; }
.tbl-wrap { overflow-x:auto; }

/* Footer */
footer.site { border-top:1px solid var(--rule); padding:var(--s12) 0 var(--s16); }
.foot { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:var(--s8); }
@media (max-width:900px) { .foot { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .foot { grid-template-columns:1fr; } }
.foot h4 { margin:0 0 var(--s3); font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; }
.foot a { display:block; font-size:0.9375rem; color:var(--ink-soft); padding:2px 0; }
.foot a:hover { color:var(--ink); }
.foot .logo { margin-bottom:var(--s4); }
.foot .hex { font-family:var(--mono); font-size:0.75rem; color:var(--ink-faint); margin-top:var(--s2); letter-spacing:0.06em; }
.foot .legal { font-size:0.8125rem; color:var(--ink-faint); max-width:44ch; }
.foot .legal a { display:inline; font-size:inherit; color:inherit; padding:0; text-decoration:underline; text-underline-offset:2px; }
.foot-bottom { border-top:1px solid var(--rule-soft); margin-top:var(--s8); padding-top:var(--s4); display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; font-family:var(--mono); font-size:0.6875rem; color:var(--ink-faint); }
.foot-bottom a { display:inline; color:var(--ink-faint); }
.motion-toggle { font-family:var(--mono); font-size:0.6875rem; background:none; border:1px solid var(--rule); color:var(--ink-faint); padding:2px var(--s2); cursor:pointer; }
.motion-toggle:hover { color:var(--ink); border-color:var(--ink); }
.preview { font-family:var(--mono); font-size:0.6875rem; color:var(--caution); margin-top:var(--s4); border:1px dashed var(--caution); padding:var(--s2) var(--s3); display:inline-block; }
[hidden] { display:none !important; }

/* ── Colour, where the ring earns it ──────────────────────────────────────
 * --sweep is set on the body element by the build: Markets → Custody → Wealth → Payments,
 * every line visited once. Text takes it by clipping; bars take it directly. */
.sweep { background-image:var(--sweep); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(55% 70% at 88% 55%, color-mix(in srgb, var(--payments) 22%, transparent), transparent 70%),
             radial-gradient(40% 55% at 62% 100%, color-mix(in srgb, var(--wealth) 14%, transparent), transparent 70%),
             radial-gradient(35% 50% at 20% 110%, color-mix(in srgb, var(--markets) 12%, transparent), transparent 70%); }
.hero canvas, .hero .wrap { z-index:1; }
.nums { border-top:1px solid var(--navy-700); margin-top:var(--s12); padding-top:var(--s6); display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--s4); position:relative; }
.nums::before { content:""; position:absolute; top:-1px; left:0; width:38%; height:2px; background:var(--sweep); }
@media (max-width:900px) { .nums { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:520px) { .nums { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.nums b { font-variant-numeric:tabular-nums; background-size:600% 100%; background-position:calc(var(--i, 0) * 20%) 0; display:block; font-size:clamp(1.5rem,2.6vw,2rem); font-weight:700; letter-spacing:-0.035em; line-height:1.1; font-variant-numeric:tabular-nums; }
.nums span { display:block; font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.12em; text-transform:uppercase; color:#7E96B8; margin-top:var(--s2); }
main .nums { border-top-color:var(--rule); }
main .nums span { color:var(--ink-faint); }
.band { position:relative; }
.band::before { content:""; position:absolute; top:0; left:0; right:0; height:6px; background:var(--sweep); }
footer.site { border-top:0; background-image:var(--sweep); background-size:100% 2px; background-repeat:no-repeat; padding-top:calc(var(--s12) + 2px); }
.page-hero { background:radial-gradient(60% 90% at 100% 0%, color-mix(in srgb, var(--line) 12%, transparent), transparent 70%) var(--surface); }
[data-page]:not([data-line]) .page-hero { background:var(--surface); }

/* The real thing, in cells */
.real .stage { padding:0; min-height:0; overflow:hidden; }
.real .stage img, .stage[data-motion="dots"] img { width:100%; height:auto; display:block; object-fit:cover; }
.real .motion { grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); }
@media (max-width:860px) { .real .motion { grid-template-columns:1fr; } }
/* Places: four photographs, the licence held in each */
.places { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); margin-bottom:var(--s8); }
@media (max-width:640px) { .places { grid-template-columns:1fr; } }
@media (max-width:520px) { .places { grid-template-columns:1fr; } }
.places figure { margin:0; background:var(--navy-900); position:relative; aspect-ratio:4/5; overflow:hidden; isolation:isolate; }
/* One grade for four very different photographs: desaturated and pulled toward navy, full colour on hover. */
.places .ph { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.7) contrast(1.06) brightness(.9); transition:transform .9s cubic-bezier(.55,.05,.35,1), filter .6s ease; }
.places figure::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,26,67,.55) 0%, rgba(0,26,67,0) 26%, rgba(0,26,67,0) 42%, rgba(0,26,67,.94) 100%), rgba(0,26,67,.18); mix-blend-mode:normal; pointer-events:none; z-index:1; transition:background-color .6s ease; }
.places figure:hover .ph { transform:scale(1.05); filter:saturate(1) contrast(1.04) brightness(.96); }
.places figure:hover::after { background-color:rgba(0,26,67,0); }
.pl-top { position:absolute; inset:0 0 auto 0; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:var(--s4); font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.12em; color:#FFFFFF; }
.pl-flag { display:inline-flex; align-items:center; gap:var(--s2); }
.pl-flag img { width:28px; height:21px; display:block; box-shadow:0 0 0 1px rgba(255,255,255,.4), 0 2px 8px rgba(0,0,0,.35); }
.pl-time { font-variant-numeric:tabular-nums; color:#CFE0F2; letter-spacing:0.06em; }
.places figcaption { position:absolute; inset:auto 0 0 0; z-index:2; padding:var(--s4); color:#FFFFFF; display:flex; flex-direction:column; gap:var(--s1); }
.places figcaption b { font-size:1.25rem; font-weight:600; letter-spacing:-0.025em; line-height:1.15; text-wrap:balance; }
.places figcaption > span:not(.pl-foot) { font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.04em; color:#CFE0F2; }
.pl-foot { display:flex; justify-content:space-between; align-items:center; gap:var(--s3); margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid rgba(207,224,242,.22); }
.places figcaption i { font-style:normal; font-family:var(--mono); font-size:0.625rem; letter-spacing:0.14em; text-transform:uppercase; color:#9FB3CE; }
.pl-lines { display:inline-flex; gap:3px; }
.pl-lines em { width:10px; height:10px; display:block; background:var(--c); box-shadow:0 0 0 1px rgba(255,255,255,.35); }
.stage[data-motion="dots"] { padding:0; min-height:0; }
.stage[data-motion="dots"] canvas { width:100%; display:block; }
.stage[data-motion="dots"] .cap { padding:var(--s3) var(--s4); }
.stage .drop { display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4); border-top:1px solid var(--navy-700); font-family:var(--mono); font-size:0.75rem; color:#9FB3CE; cursor:pointer; }
.stage .drop:hover { color:#FFFFFF; }
.stage .drop input { position:absolute; left:-9999px; }
.stage .drop b { font-weight:500; color:#FFFFFF; border:1px solid var(--navy-700); padding:2px var(--s2); }
.stage.over { outline:2px solid #FFFFFF; outline-offset:-2px; }

/* Clients: logos, quotes */
.logos { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--s6) var(--s8); background:var(--navy-900); border:1px solid var(--navy-700); padding:var(--s8) var(--s8); align-items:center; }
.logos img { width:100%; height:28px; object-fit:contain; display:block; filter:brightness(0) invert(1); opacity:.82; transition:opacity .2s ease; }
.logos img:hover { opacity:1; }
.quotes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:var(--s8); }
@media (max-width:820px) { .quotes { grid-template-columns:1fr; } }
.quotes blockquote { margin:0; background:var(--surface); padding:var(--s8) var(--s6); display:flex; flex-direction:column; gap:var(--s6); }
.quotes p { font-size:1.0625rem; line-height:1.5; letter-spacing:-0.01em; text-wrap:pretty; }
.quotes footer { display:flex; gap:var(--s3); align-items:center; margin-top:auto; font-size:0.875rem; color:var(--ink-soft); }
.quotes footer svg { flex:0 0 28px; }
.quotes footer b { display:block; color:var(--ink); font-weight:600; }

/* Company: about, offices, people groups, investors */
.about h2 { margin-top:var(--s2); }
.about .lede { margin-top:var(--s4); max-width:60ch; }
.about + .nums { margin-top:var(--s12); }
.offices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6); margin-top:var(--s8); }
@media (max-width:640px) { .offices { grid-template-columns:1fr; } }
.offices > div { border-top:2px solid var(--ink); padding-top:var(--s4); }
.offices .k { display:block; font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:var(--s3); }
.offices b { display:block; font-size:1.375rem; font-weight:700; letter-spacing:-0.03em; line-height:1.25; }
.people-h { margin-top:var(--s8); font-family:var(--mono); font-size:0.6875rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); }
.people-h + .people { margin-top:var(--s4); }
.inv { max-width:none; font-size:1.125rem; line-height:1.9; letter-spacing:-0.01em; }
.inv i { font-style:normal; color:var(--ink-faint); margin:0 var(--s3); }

/* Trust Center */
.assur { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media (max-width:1000px) { .assur { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .assur { grid-template-columns:1fr; } }
.assur > div { background:var(--surface); padding:var(--s6) var(--s4); display:flex; flex-direction:column; gap:var(--s2); }
.assur b { font-size:1.0625rem; font-weight:600; letter-spacing:-0.02em; line-height:1.2; }
.assur .d { font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.06em; color:var(--line-ink); }
.assur p { font-size:0.875rem; color:var(--ink-soft); margin-top:var(--s2); }
.docs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4); margin-top:var(--s8); }
@media (max-width:820px) { .docs { grid-template-columns:1fr; } }
.docs a { border:1px solid var(--rule); background:var(--surface); padding:var(--s6) var(--s4); display:flex; flex-direction:column; gap:var(--s2); transition:border-color .2s ease; }
.docs a:hover { border-color:var(--ink); }
.docs b { font-weight:600; letter-spacing:-0.02em; }
.docs span { font-size:0.875rem; color:var(--ink-soft); }

/* ── The film on the Mark page ───────────────────────────────────────────── */
.film-sec { background:var(--navy-900); color:#E8EDF5; padding:0 0 var(--s16); }
.film-sec .eyebrow { color:#9FB3CE; } .film-sec h2 { color:#FFFFFF; } .film-sec .lede { color:#9FB3CE; } .film-sec .small { color:#7E96B8; }
.film { border:1px solid var(--navy-700); background:#FFFFFF; display:flex; flex-direction:column; }
.film canvas { width:100%; display:block; aspect-ratio:1; }
.film .cap { font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.12em; text-transform:uppercase; color:#7E96B8; display:flex; align-items:center; gap:var(--s4); padding:var(--s3) var(--s4); background:var(--navy-900); border-top:1px solid var(--navy-700); }
.film .cap b { color:#FFFFFF; font-weight:500; letter-spacing:0; text-transform:none; flex:1; }
.film .replay { font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.12em; text-transform:uppercase; background:none; border:1px solid var(--navy-700); color:#9FB3CE; padding:2px var(--s2); cursor:pointer; }
.film .replay:hover { color:#FFFFFF; border-color:#FFFFFF; }

.aura-go { margin-top:var(--s4); }

/* ── Migrated archive: post pages and the resources index ────────────────── */
.tabs button .n { font-family:var(--mono); font-size:0.6875rem; opacity:0.55; margin-left:0.35em; }
a.item { text-decoration:none; color:inherit; transition:background .18s ease; }
a.item:hover { background:var(--paper); }
a.item:hover h3 { color:var(--line-ink,var(--ink)); }
.list { max-height:none; }

.post-hero .eyebrow a { color:inherit; text-decoration:none; border-bottom:1px solid currentColor; }
.post-hero .lede { max-width:none; }   /* article heroes share the column width of the body and the lead image */
.post-meta { font-family:var(--mono); font-size:0.8125rem; color:var(--ink-faint); margin-top:var(--s4); }
.post-figure { margin:var(--s8) auto 0; }
.post-figure img { width:100%; height:auto; display:block; border:1px solid var(--rule); }
.post-file { margin-top:var(--s6); }

.prose { max-width:none; }             /* full container width, matching the lead image */
.prose p, .prose li, .prose blockquote { max-width:none; }
.prose > * + * { margin-top:var(--s4); }
.prose h2 { font-size:1.5rem; margin-top:var(--s8); }
.prose h3 { font-size:1.1875rem; margin-top:var(--s6); }
.prose h4 { font-size:1rem; margin-top:var(--s6); }
.prose p, .prose li { font-size:1.0625rem; line-height:1.75; color:var(--ink-soft); }
.prose a { color:var(--line-ink,var(--ink)); text-decoration:underline; text-underline-offset:2px; }
.prose ul, .prose ol { padding-left:1.25em; }
.prose li + li { margin-top:var(--s2); }
.prose img { max-width:100%; height:auto; display:block; border:1px solid var(--rule); margin:var(--s6) 0; }
.prose figure { margin:var(--s6) 0; }
.prose figcaption { font-family:var(--mono); font-size:0.75rem; color:var(--ink-faint); margin-top:var(--s2); }
.prose blockquote { border-left:2px solid var(--line-ink,var(--ink)); padding-left:var(--s4); margin-left:0; font-size:1.125rem; }
.prose table { width:100%; border-collapse:collapse; font-size:0.9375rem; display:block; overflow-x:auto; }
.prose th, .prose td { border:1px solid var(--rule); padding:var(--s2) var(--s3); text-align:left; vertical-align:top; }
.prose th { font-family:var(--mono); font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-faint); font-weight:500; }
.prose code { font-family:var(--mono); font-size:0.875em; background:var(--paper); padding:0.1em 0.35em; }
.prose pre { background:var(--paper); padding:var(--s4); overflow-x:auto; }
.prose pre code { background:none; padding:0; }
.prose hr { border:0; border-top:1px solid var(--rule); margin:var(--s8) 0; }
.prose .embed a { font-family:var(--mono); font-size:0.875rem; }

/* ── Resources: tab counts, the archive link and the archive page ─────────── */
.archive-link { margin-top:var(--s8); padding-top:var(--s4); border-top:1px solid var(--rule); }
.archive-link a { font-family:var(--mono); font-size:0.8125rem; letter-spacing:0.04em; color:var(--ink-soft); }
.archive-link a:hover { color:var(--ink); }
.arc-jump { display:flex; flex-wrap:wrap; gap:var(--s2); padding-bottom:var(--s6); border-bottom:1px solid var(--rule); margin-bottom:var(--s16); }
.arc-jump a { font-family:var(--mono); font-size:0.8125rem; padding:4px 10px; border:1px solid var(--rule); color:var(--ink-soft); }
.arc-jump a:hover { border-color:var(--ink); color:var(--ink); }
.arc-year { margin-bottom:var(--s16); }
.arc-year + .arc-year { margin-top:var(--s16); }
.arc-year h2 { font-size:1.75rem; padding-bottom:var(--s3); border-bottom:1px solid var(--ink); margin-bottom:0; scroll-margin-top:var(--s8); }
.arc-year h2 .n { font-family:var(--mono); font-size:0.75rem; font-weight:400; color:var(--ink-faint); margin-left:0.5em; letter-spacing:0; }

/* ── Version seven: the 4FE1 mark and the address glyph ─────────────────────
 * The mark is one stroke on a tilted orbit (wider than tall); glyphs are round.
 * Colour for the header/footer mark follows the theme through the sprite's two
 * gradients. */
/* The wordmark is an outlined SVG (Onest 600, curved cut in the x, 1 Nov 2026), sized by its cap height.
 * The mark's box is 1.3 × cap; the gap is the approved lockup's 249 font units (0.352 × cap). */
.logo { --wm-cap:15.4px; gap:calc(var(--wm-cap) * .352); }
.logo svg.hxm { width:auto; height:calc(var(--wm-cap) * 1.3); }
.logo svg.wm, .sig svg.wm { width:auto; height:calc(var(--wm-cap) * 1.0099); }
.hxm-auto use { fill:url(#hx-w); }
footer.site .hxm-auto use { fill:url(#hx-w); }
/* The wordmark takes the mark's colour, never the link's text colour (footer links are grey). */
.logo svg.wm { color:var(--navy-900); }
body[data-page="home"] .logo svg.wm { color:#FFFFFF; }
.hero-mark svg.hxm { width:clamp(260px,34vw,440px); height:auto; }
.hxm-draw .ink { stroke-dasharray:1 1; stroke-dashoffset:1; animation:hx-ink 1.6s cubic-bezier(.55,.05,.35,1) .5s forwards; }
@keyframes hx-ink { to { stroke-dashoffset:0; } }
html.no-ambient .hxm-draw .ink { animation:none; stroke-dashoffset:0; }
@media (prefers-reduced-motion: reduce) { .hxm-draw .ink { animation:none; stroke-dashoffset:0; } }
svg.glyph { display:block; }
.step svg.hxm { width:46px; height:auto; aspect-ratio:30.24/23.13; align-self:flex-start; margin-bottom:5px; }   /* about the glyph's weight, centred on its line */
.pc-hs svg.hxm { flex:0 0 auto; width:auto; height:22px; }
.wall svg.glyph { width:100%; height:auto; }
.acct td svg.glyph { width:32px; height:32px; }
.glyph-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4) var(--s3); background:var(--navy-900); padding:var(--s6); border:1px solid var(--navy-700); }
.glyph-grid figure { margin:0; display:flex; flex-direction:column; align-items:center; gap:var(--s2); }
.glyph-grid svg { width:64px; height:64px; }
.glyph-grid figcaption { font-family:var(--mono); font-size:0.6875rem; color:#9FB3CE; }
/* The logo story film on /mark: poster, native controls, no autoplay. */
.story-video { margin:var(--s8) 0 0; border:1px solid var(--navy-700); background:var(--navy-900); }
.story-video video { display:block; width:100%; height:auto; aspect-ratio:16/9; background:#000; }
.story-video figcaption { display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; padding:var(--s3) var(--s4); font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.12em; text-transform:uppercase; color:#7E96B8; }
.story-video figcaption span:first-child { color:#FFFFFF; }
.hx-draw-row { display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:var(--s8); align-items:center; margin-top:var(--s8); }
.hx-draw-mark { background:var(--navy-900); display:flex; align-items:center; justify-content:center; padding:var(--s8); min-height:260px; }
.hx-draw-mark svg { width:100%; max-width:360px; height:auto; }
.caps4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.cons-wrap { margin-top:var(--s8); background:var(--surface); border:1px solid var(--rule); padding:var(--s6); overflow-x:auto; }
.cons { width:100%; min-width:640px; height:auto; display:block; }
.cons .t-hex { font:500 15px var(--mono); fill:var(--ink); } .cons .t-rule { stroke:var(--rule); }
.cons .b1 { fill:#032E84; } .cons .b0 { fill:var(--surface); stroke:var(--rule); }
.cons .t1 { font:500 13px var(--mono); fill:#fff; } .cons .t0 { font:500 13px var(--mono); fill:var(--ink-faint); }
.cons .t-guide { stroke:var(--rule); stroke-dasharray:2 3; } .cons .t-cap { font:500 10.5px var(--mono); letter-spacing:1.4px; fill:var(--ink-faint); } .cons .t-arrow { stroke:var(--ink-faint); stroke-width:1.4; fill:none; }
.gl-facts { margin-top:var(--s6); }
.gl-facts dd { font-family:var(--mono); }
#labSmall svg { width:24px; height:24px; }
.labx h2 { color:#FFFFFF; }
.mark-story { padding-top:var(--s16); }
.gl-facts dt { color:#7E96B8; } .gl-facts dd { color:#E8EDF5; }
@media (max-width:820px) { .hx-draw-row { grid-template-columns:1fr; } .glyph-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .caps4 { grid-template-columns:1fr; } }


/* ── Version seven motion pass ───────────────────────────────────────────────
 * One orchestrated moment on the home hero: eyebrow, headline written left to
 * right, lede, buttons, and the mark drawing on beside them, all on the one
 * writing curve. Everything rests visible once it has run; motion off shows
 * the finished state at once. */
.hero .eyebrow { animation:hx-rise .6s cubic-bezier(.55,.05,.35,1) 0s both; }
.hero h1 { clip-path:inset(-12% 100% -12% -2%); animation:hx-wipe 1.1s cubic-bezier(.55,.05,.35,1) .15s forwards; }
.hero .lede { animation:hx-rise .7s cubic-bezier(.55,.05,.35,1) .8s both; }
.hero .cta { animation:hx-rise .7s cubic-bezier(.55,.05,.35,1) 1s both; }
@keyframes hx-wipe { to { clip-path:inset(-12% -4% -12% -2%); } }
@keyframes hx-rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
html.no-ambient .hero :is(.eyebrow, h1, .lede, .cta) { animation:none; clip-path:none; opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .hero :is(.eyebrow, h1, .lede, .cta) { animation:none; clip-path:none; opacity:1; transform:none; } }

/* The construction on /mark, played when it scrolls into view: the sixteen
 * bits light in order, the unrolled stroke is written under them, then the
 * mark is written from it. `armed` is set by script only when motion is on,
 * so without script or with motion off the drawing is simply complete. */
.cons.armed .b1 { fill:var(--surface); stroke:var(--rule); } .cons.armed .t1 { fill:var(--ink-faint); }
.cons.armed.go .b1 { animation:cons-bit .22s cubic-bezier(.55,.05,.35,1) calc(var(--i) * 80ms) forwards; }
.cons.armed.go .t1 { animation:cons-t .22s cubic-bezier(.55,.05,.35,1) calc(var(--i) * 80ms) forwards; }
@keyframes cons-bit { to { fill:#032E84; stroke:#032E84; } } @keyframes cons-t { to { fill:#FFFFFF; } }
.cons.armed .cons-band { clip-path:inset(-6% 100% -6% -1%); } .cons.armed.go .cons-band { animation:cons-wipe 1.3s cubic-bezier(.55,.05,.35,1) 1.45s forwards; }
@keyframes cons-wipe { to { clip-path:inset(-6% -1% -6% -1%); } }
.cons.armed .t-arrow { opacity:0; } .cons.armed.go .t-arrow { animation:hx-fade .4s ease 2.7s forwards; } @keyframes hx-fade { to { opacity:1; } }
.cons.armed .cons-ink { stroke-dasharray:1 1; stroke-dashoffset:1; } .cons.armed.go .cons-ink { animation:hx-ink 1.6s cubic-bezier(.55,.05,.35,1) 2.9s forwards; }
.cons-bar { display:flex; justify-content:space-between; align-items:center; gap:var(--s4); margin-top:var(--s3); flex-wrap:wrap; }
.cons-bar .lab { font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint); }
.cons-replay { font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.12em; text-transform:uppercase; background:none; border:1px solid var(--rule); color:var(--ink-soft); padding:4px var(--s3); cursor:pointer; }
.cons-replay:hover { color:var(--ink); border-color:var(--ink); }
html.no-ambient .cons-replay { display:none; }
.wall svg.glyph { cursor:default; }

/* ── Convert-to-Pay (Payments page) ── rules, not cards; the line's blue for state, navy for Hex Trust. */
.c2p .motion { align-items:start; }
.c2p .motion h2 + .lede { margin-top:var(--s4); }
/* Payments hero: copy on the left, the step-by-step conversion on the right. */
.c2p-hero .c2p-hero-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,0.85fr); gap:var(--s12); align-items:start; }
.c2p-hero .lic { display:block; margin-top:var(--s6); }
.c2p-usps4 { margin-top:var(--s8); grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s6); }
.c2p-ctas { display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6); }
.c2p-ctas .btn { margin-top:0 !important; }
.c2p-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4); margin-top:var(--s8); padding-top:var(--s4); border-top:1px solid var(--rule); position:relative; }
.c2p-stats::before { content:""; position:absolute; top:-1px; left:0; width:38%; height:2px; background:var(--line); }
.c2p-stats b { display:block; font-family:var(--mono); font-weight:500; font-size:2rem; line-height:1; letter-spacing:-0.02em; color:var(--ink); font-variant-numeric:tabular-nums; }
.c2p-stats span { display:block; font-size:0.8125rem; color:var(--ink-soft); margin-top:var(--s2); line-height:1.4; }

.c2p-rfq { background:var(--navy-900); border:1px solid var(--navy-700); color:#FFFFFF; padding:var(--s6); display:flex; flex-direction:column; gap:var(--s4); }
.c2p-rfq-top { display:flex; justify-content:space-between; gap:var(--s4); font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.12em; text-transform:uppercase; color:#7E96B8; }
.c2p-rfq-top span:first-child { display:inline-flex; align-items:center; gap:var(--s2); color:#FFFFFF; }
.c2p-live { width:7px; height:7px; border-radius:50%; background:var(--payments); }
.c2p-quote { container-type:inline-size; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--s3); border:1px solid var(--navy-700); padding:var(--s4); }
.c2p-quote small, .c2p-addr small { display:block; font-family:var(--mono); font-size:0.625rem; letter-spacing:0.12em; text-transform:uppercase; color:#7E96B8; margin-bottom:var(--s1); }
.c2p-quote b { white-space:nowrap; font-family:var(--mono); font-weight:500; font-size:clamp(1.0625rem, 6.4cqi, 1.5rem); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.c2p-quote b em { font-style:normal; font-size:0.875rem; color:#9FB3CE; letter-spacing:0; }
.c2p-quote > div:last-child { text-align:right; }
.c2p-arrow { width:32px; height:32px; display:grid; place-items:center; background:var(--payments); color:var(--navy-900); font-weight:700; }
.c2p-addr { display:flex; align-items:center; gap:var(--s3); font-size:0.8125rem; color:#C4D0E3; }
.c2p-addr svg { width:32px; height:32px; flex:0 0 auto; }
.c2p-tl { list-style:none; margin:0; padding:0; display:grid; gap:var(--s2); }
.c2p-tl li { display:grid; grid-template-columns:24px 1fr auto; gap:var(--s3); align-items:center; font-size:0.875rem; color:#C4D0E3; }
.c2p-tl .d { width:24px; height:24px; display:grid; place-items:center; border:1px solid var(--navy-700); font-family:var(--mono); font-size:0.6875rem; color:#7E96B8; transition:background .18s ease, border-color .18s ease, color .18s ease; }
.c2p-tl .t { font-family:var(--mono); font-size:0.75rem; color:#7E96B8; font-variant-numeric:tabular-nums; }
.c2p-tl li.done { color:#FFFFFF; }
.c2p-tl li.done .d { background:var(--payments); border-color:var(--payments); color:var(--navy-900); }
.c2p-tl li.now .d { border-color:var(--payments); color:#FFFFFF; box-shadow:0 0 0 3px rgba(0,143,214,.25); }
.c2p-foot { font-size:0.75rem; color:#7E96B8; border-top:1px solid var(--navy-700); padding-top:var(--s3); }
.c2p-scs { display:grid; }
.c2p-sc { grid-area:1 / 1; display:flex; flex-direction:column; gap:var(--s4); opacity:0; visibility:hidden; transition:opacity .4s ease, visibility 0s linear .4s; }
.c2p-sc.on { opacity:1; visibility:visible; transition:opacity .4s ease .1s; }
.c2p-pager { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--s1); margin-top:calc(var(--s2) * -1); }
.c2p-pager button { border:0; background:none; padding:var(--s2) 0; cursor:pointer; }
.c2p-pager i { display:block; height:2px; background:var(--navy-700); transition:background .2s ease; }
.c2p-pager button.seen i { background:#3E5A85; }
.c2p-pager button[aria-pressed="true"] i { background:var(--payments); }
.c2p-pager button:hover i { background:#7E96B8; }
.c2p-pager button:focus-visible { outline:1px solid var(--payments); outline-offset:2px; }
html.no-ambient .c2p-sc { transition:none; }
@media (prefers-reduced-motion: reduce) { .c2p-sc { transition:none; } }


.c2p-finder { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s6); border:1px solid var(--rule); background:var(--surface); padding:var(--s4) var(--s6); margin-bottom:var(--s6); }
.c2p-finder p { flex:1 1 320px; font-weight:600; letter-spacing:-0.01em; }
.c2p-seg { display:inline-flex; border:1px solid var(--rule); }
.c2p-seg button { font:600 0.875rem var(--sans); border:0; padding:var(--s2) var(--s4); background:transparent; color:var(--ink-soft); cursor:pointer; }
.c2p-seg button + button { border-left:1px solid var(--rule); }
.c2p-seg button[aria-pressed="true"] { background:var(--line-ink); color:#FFFFFF; }
.c2p-ans { flex-basis:100%; font-size:0.875rem; font-weight:600; color:var(--line-ink); min-height:0; }
.c2p-ans:empty { display:none; }
.c2p-models { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6); }
.c2p-model { background:var(--surface); border:1px solid var(--rule); border-top:var(--line-bar) solid var(--line); padding:var(--s6); display:flex; flex-direction:column; gap:var(--s4); transition:opacity .18s ease, border-color .18s ease; }
.c2p-model.pick { border-color:var(--line-ink); }
.c2p-model.dim { opacity:.5; }
.c2p-model-top { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s3); flex-wrap:wrap; }
.c2p-model h3 { font-size:1.375rem; }
.c2p-model-top p { font-size:0.9375rem; color:var(--ink-soft); margin-top:var(--s1); }
.c2p-chip { font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.06em; padding:3px var(--s2); background:var(--line); color:#FFFFFF; white-space:nowrap; }
.c2p-chip.soon { background:transparent; color:var(--line-ink); border:1px solid var(--line-ink); }
.c2p-flow { display:grid; grid-template-columns:1fr 16px 1fr 16px 1fr; gap:var(--s1); align-items:stretch; text-align:center; font-size:0.8125rem; }
.c2p-flow > span { display:grid; place-items:center; color:var(--line-ink); font-weight:700; }
.c2p-flow > div { border:1px solid var(--rule); padding:var(--s2) var(--s1); display:flex; flex-direction:column; justify-content:center; gap:2px; line-height:1.3; }
.c2p-flow small { font-size:0.6875rem; color:var(--ink-faint); }
.c2p-flow .ht { background:var(--navy-900); border-color:var(--navy-900); color:#FFFFFF; }
.c2p-flow .ht small { color:#9FB3CE; }
.c2p-ticks { list-style:none; margin:0; padding:0; display:grid; gap:var(--s2); }
.c2p-ticks li { position:relative; padding-left:var(--s6); font-size:0.9375rem; color:var(--ink-soft); }
.c2p-ticks li::before { content:""; position:absolute; left:2px; top:0.55em; width:10px; height:2px; background:var(--line); }
.c2p-ticks b { color:var(--ink); font-weight:600; }

.c2p-legal { margin-top:var(--s12); max-width:80ch; }

@media (max-width:960px) {
  .c2p-hero .c2p-hero-grid { grid-template-columns:1fr; gap:var(--s8); }   /* must match the base rule's specificity, or phones keep two columns */
  .c2p-usps4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px) {
  .c2p-models, .c2p-usps4 { grid-template-columns:1fr; }
  .c2p-stats b { font-size:1.625rem; }
  .c2p-flow { grid-template-columns:1fr; }
  .c2p-flow > span { transform:rotate(90deg); height:14px; }
}
.c2p-partners { margin-top:var(--s12); font-size:0.875rem; color:var(--ink-soft); }
.c2p-partners + .c2p-legal { margin-top:var(--s4); }

/* Line cards with points, the five-across services row, the eight-cell grid and the comparison. */
.lc-pts { list-style:none; margin:0; padding:0; display:grid; gap:var(--s2); }
.lc-pts li { position:relative; padding-left:var(--s4); font-size:0.875rem; line-height:1.45; color:var(--ink-soft); }
.lc-pts li::before { content:""; position:absolute; left:0; top:0.6em; width:8px; height:2px; background:var(--lc); }
/* Flex, not grid: a short last row stretches to the full width, so every row ends at the same edge. */
.caps.caps5 { display:flex; flex-wrap:wrap; }
.caps.caps5 > div { flex:1 1 20%; min-width:0; padding-right:var(--s4); }
@media (max-width:1000px) { .caps.caps5 > div { flex-basis:33.33%; } }
@media (max-width:640px) { .caps.caps5 > div { flex-basis:100%; } }
.cells4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:var(--s8); }
.cells4 > div { background:var(--surface); padding:var(--s6) var(--s4); display:flex; flex-direction:column; gap:var(--s2); }
.cells4 h3 { font-size:1.0625rem; line-height:1.25; }
.cells4 p { font-size:0.9375rem; color:var(--ink-soft); }
@media (max-width:960px) { .cells4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .cells4 { grid-template-columns:1fr; } }
.compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s8); margin-top:var(--s8); }
.compare > div { border-top:var(--line-bar) solid var(--line); padding-top:var(--s4); }
.compare .k { display:block; font-family:var(--mono); font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--line-ink); margin-bottom:var(--s3); }
.compare p { font-size:1.125rem; line-height:1.5; color:var(--ink); max-width:46ch; }
@media (max-width:720px) { .compare { grid-template-columns:1fr; } }

/* Wealth: the accent phrase in the line's hue, the Aura line under the hero, six services in threes, how it works. */
.page-hero h1 .accent { color:var(--line-ink); }
.page-hero .aura-lic { display:inline-flex; flex-direction:column; align-items:flex-start; gap:var(--s8); text-decoration:none; color:var(--ink-soft); }
.page-hero .aura-lic svg { color:var(--ink); }
.page-hero .aura-lic:hover { color:var(--ink); }
/* The colour lockup fills its viewBox, so these two are the gap you actually see. */
body[data-page="wealth"] .page-hero { padding-bottom:var(--s8); }
/* Wealth's section headings link to Aura; they stay headings until you hover one. */
.h2-aura { color:inherit; text-decoration:none; }
.h2-aura:hover { color:var(--line-ink); text-decoration:underline; text-underline-offset:0.12em; }
/* The Wealth band's two calls to action are Aura's green, not outlines on the navy. */
body[data-page="wealth"] .band .btn { background:var(--line-ink); border-color:var(--line-ink); color:#FFFFFF; }
body[data-page="wealth"] .band .btn:hover { background:color-mix(in srgb, var(--line-ink) 82%, #FFFFFF); border-color:color-mix(in srgb, var(--line-ink) 82%, #FFFFFF); }
.caps.caps3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:760px) { .caps.caps3 { grid-template-columns:1fr; } }
.caps .soon { font-family:var(--mono); font-size:0.625rem; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--line-ink); border:1px solid var(--line-ink); padding:1px 6px; vertical-align:middle; margin-left:var(--s1); }
/* Wealth — how it works: two joined boxes, each with bullets and an illustrative
   panel (RM conversation / Aura app screen). Replaces .how2, per the reviewed
   wealth mock, 27 Oct 2026. Both panels are decorative: no real client data. */
.duo { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:var(--s8); }
.duo > div { background:var(--surface); padding:var(--s8) var(--s6) var(--s12); display:flex; flex-direction:column; gap:var(--s2); min-width:0; }
.duo h3 { font-size:1.25rem; }
.duo p { color:var(--ink-soft); max-width:52ch; }
@media (max-width:720px) { .duo { grid-template-columns:1fr; } }

.ticks { list-style:none; margin:var(--s3) 0 0; padding:0; display:grid; gap:var(--s2); font-size:0.9375rem; }
.ticks li { display:flex; gap:var(--s3); align-items:baseline; }
.ticks li::before { content:""; flex:0 0 7px; height:7px; background:var(--wealth-ink); transform:translateY(-1px); }

.duo-chat { margin-top:var(--s6); flex:1 1 auto; background:var(--paper); border:1px solid var(--rule); display:flex; flex-direction:column; gap:var(--s2); padding-bottom:var(--s3); }
.dc-head { display:flex; align-items:center; gap:var(--s3); padding:9px var(--s4); background:var(--surface); border-bottom:1px solid var(--rule); }
.dc-av { width:28px; height:28px; flex:0 0 28px; border-radius:50%; background:var(--wealth-ink); color:#fff; display:grid; place-items:center; font-size:0.6875rem; font-weight:700; }
.dc-who { font-size:0.8125rem; font-weight:600; line-height:1.3; }
.dc-who span { display:block; font-size:0.71875rem; font-weight:400; color:var(--ink-faint); }
.dc-on { margin-left:auto; width:7px; height:7px; border-radius:50%; background:var(--wealth-ink); box-shadow:0 0 0 3px rgba(0,124,106,0.15); }
.dc-b { margin:0; max-width:min(62%,250px); padding:8px 11px; font-size:0.78125rem; line-height:1.45; color:var(--ink); }
.dc-rm { background:rgba(0,124,106,0.10); align-self:flex-start; margin-left:var(--s4); }
.dc-cl { background:var(--surface); border:1px solid var(--rule); align-self:flex-end; margin-right:var(--s4); }
.dc-typing { display:flex; gap:4px; padding:12px 13px; }
.dc-typing i { width:6px; height:6px; border-radius:50%; background:var(--wealth-ink); animation:dc-blink 1.2s infinite; }
.dc-typing i:nth-child(2) { animation-delay:0.2s; } .dc-typing i:nth-child(3) { animation-delay:0.4s; }
@keyframes dc-blink { 0%,80%,100% { opacity:0.25; } 40% { opacity:1; } }

.duo-app { margin-top:var(--s6); flex:1 1 auto; border:1px solid var(--rule); background:var(--surface); display:flex; flex-direction:column; font-size:0.8125rem; }
.da-top { display:flex; align-items:center; gap:var(--s3); padding:10px var(--s4); border-bottom:1px solid var(--rule); font-weight:600; }
.da-dots { display:flex; gap:4px; }
.da-dots i { width:7px; height:7px; border-radius:50%; background:var(--rule); }
.da-total { display:flex; justify-content:space-between; align-items:baseline; padding:var(--s2) var(--s4) 2px; color:var(--ink-soft); }
.da-total b { font-size:1.25rem; color:var(--ink); letter-spacing:0.04em; }
.da-rows { display:grid; gap:2px; padding:0 var(--s4) var(--s1); flex:1; }
.da-row { display:grid; grid-template-columns:24px 1fr 90px; align-items:center; gap:var(--s3); padding:4px 0; border-bottom:1px solid var(--rule-soft); }
.da-row:last-child { border-bottom:0; }
.da-tok { width:24px; height:24px; border-radius:50%; color:#fff; display:grid; place-items:center; font-size:0.75rem; font-weight:700; }
.da-alloc { height:5px; background:var(--rule); display:block; }
.da-alloc i { display:block; height:100%; background:var(--wealth-ink); }
.da-tabs { display:grid; grid-template-columns:repeat(5,1fr); background:var(--paper); border-top:1px solid var(--rule); padding:9px 6px 8px; }
.da-tabs span { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:0.65625rem; color:var(--ink-faint); }
.da-tabs svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.da-tabs .on { color:var(--ink); font-weight:600; }
@media (prefers-reduced-motion:reduce) { .dc-typing i { animation:none; } }
.band-ctas { display:flex; flex-wrap:wrap; gap:var(--s3); }

/* wXRP: the contract table, each address with its glyph; audits as ruled links. */
.tbl-x { overflow-x:auto; border:1px solid var(--rule); background:var(--surface); }
table.wx { width:100%; border-collapse:collapse; font-size:0.9375rem; }
table.wx td { padding:var(--s4); border-bottom:1px solid var(--rule-soft); vertical-align:middle; }
table.wx tr:last-child td { border-bottom:0; }
table.wx td.g { width:56px; }
table.wx td.g svg { width:32px; height:32px; display:block; }
table.wx td.addr code { font-family:var(--mono); font-size:0.875rem; letter-spacing:0.02em; word-break:break-all; color:var(--ink); background:none; padding:0; }
table.wx a, .caps .more { color:var(--line-ink); font-weight:600; text-decoration:none; white-space:nowrap; }
table.wx a:hover, .caps .more:hover { text-decoration:underline; }
.caps .more { font-size:0.875rem; white-space:normal; }
.audits { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:var(--s4); }
.audits a { background:var(--surface); padding:var(--s4); display:flex; flex-direction:column; gap:var(--s1); text-decoration:none; color:var(--ink); }
.audits a:hover { background:var(--paper); }
.audits .k { font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint); }
.audits span:last-child { font-size:0.875rem; color:var(--line-ink); margin-top:auto; padding-top:var(--s2); }
@media (max-width:900px) { .audits { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .audits { grid-template-columns:1fr; } }

/* Cookie consent (shown only when GA4 is configured). */
.consent { position:fixed; left:var(--s4); right:var(--s4); bottom:var(--s4); z-index:50; max-width:720px; margin:0 auto; background:var(--surface); color:var(--ink); border:1px solid var(--rule); border-top:3px solid var(--navy-900); box-shadow:0 8px 32px rgba(0,26,67,.18); padding:var(--s4) var(--s6); display:flex; gap:var(--s4) var(--s6); align-items:center; justify-content:space-between; flex-wrap:wrap; }
.consent p { font-size:0.875rem; color:var(--ink-soft); flex:1 1 320px; }
.consent p a { color:var(--ink); }
.consent div { display:flex; gap:var(--s2); }
.consent .btn { padding:var(--s2) var(--s4); font-size:0.875rem; }

/* Press kit grid. */
/* Flex, so a short last row stretches to the full width: every row ends at the same edge. */
.pk-grid { --pk-b:20%; display:flex; flex-wrap:wrap; gap:1px; padding:1px; }
.pk-grid > .pk { flex:1 1 calc(var(--pk-b) - 1px); min-width:0; }
.pk-grid-3 { --pk-b:33.33%; }
@media (max-width:1000px) { .pk-grid { --pk-b:33.33%; } }
@media (max-width:640px) { .pk-grid { --pk-b:50%; } .pk-grid-wide { --pk-b:100%; } }
.pk { margin:0; background:var(--surface); outline:1px solid var(--rule); display:flex; flex-direction:column; }
.pk-p { height:150px; display:flex; align-items:center; justify-content:center; padding:var(--s6); background:#FFFFFF; }
.pk-p.navy { background:var(--navy-900); }
.pk-p img { max-width:100%; max-height:100%; display:block; }
.pk figcaption { padding:var(--s3) var(--s4) var(--s4); display:flex; flex-direction:column; gap:var(--s1); }
.pk figcaption b { font-size:0.875rem; font-weight:600; }
.pk figcaption span { font-family:var(--mono); font-size:0.75rem; color:var(--ink-faint); }
.pk figcaption a { color:var(--line-ink); text-decoration:none; font-weight:500; }
.pk figcaption a:hover { text-decoration:underline; }
/* Press kit v9: grounds, don'ts, clear space, swatches, type. */
.pk-cta { margin-top:var(--s8); display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4); }
.pk-cta span { font-family:var(--mono); font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); }
.pk-grid.pk-grid-wide { --pk-b:50%; }
@media (max-width:640px) { .pk-grid.pk-grid-wide { --pk-b:100%; } }
.pk-p.wide { padding:var(--s6) var(--s8); }
.pk-p.paper { background:var(--paper); }
.pk-p.bleed { padding:0; background:var(--navy-900); }
.pk-p.bleed img { height:100%; }
.pk-p.photo { background:linear-gradient(rgba(0,26,67,0.6),rgba(0,26,67,0.6)),#0B2350 url("/img/hong-kong-harbour.jpg") center/cover; }
.pk-p.low { background:var(--navy-700); }
.pk-p img[src*="lockup"] { max-height:48px; }
.pk-p.wide img { max-height:40px; }
.pk-p img[src*="stacked"] { max-height:100%; }
.pk-dont figcaption b { color:#B4233A; }
.pk-dont figcaption b::before { content:"✕"; margin-right:var(--s2); }
.pk-dont .pk-p img, .pk-dont .pk-mask, .pk-hex { width:72px; height:72px; }
.pk-x-stretch { transform:scaleX(1.7); }
.pk-x-rotate { transform:rotate(-35deg); }
.pk-mask { display:block; -webkit-mask:url("/press-kit/hex-trust-mark-navy.svg") center/contain no-repeat; mask:url("/press-kit/hex-trust-mark-navy.svg") center/contain no-repeat; }
.pk-hex { display:flex; align-items:center; justify-content:center; width:96px !important; height:96px !important; background:var(--navy-900); clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%); }
.pk-hex img { width:52px !important; height:52px !important; }
.pk-space { background:var(--surface); outline:1px solid var(--rule); padding:var(--s12) var(--s6); display:flex; justify-content:center; }
.pk-space-box { --h:56px; padding:var(--h); outline:1px dashed var(--ink-faint); background:repeating-linear-gradient(45deg,transparent 0 6px,var(--rule-soft) 6px 7px); }
.pk-space-box img { height:var(--h); display:block; background:var(--surface); }
@media (max-width:640px) { .pk-space-box { --h:28px; } }
.pk-sw { display:flex; flex-wrap:wrap; gap:var(--s6); }
.pk-sw > div { flex:1 1 calc(20% - var(--s6)); min-width:0; display:flex; flex-direction:column; gap:2px; }
@media (max-width:1000px) { .pk-sw > div { flex-basis:calc(33.33% - var(--s6)); } }
@media (max-width:640px) { .pk-sw > div { flex-basis:calc(50% - var(--s6)); } }
.pk-sw span { display:block; height:88px; outline:1px solid var(--rule); margin-bottom:var(--s3); }
.pk-sw b { font-size:0.9375rem; font-weight:600; }
.pk-sw code { font-family:var(--mono); font-size:0.8125rem; color:var(--ink-soft); }
.pk-sw small { font-size:0.8125rem; color:var(--ink-faint); }
.pk-files { margin-top:var(--s8); font-size:0.9375rem; }
.pk-files a { color:var(--line-ink); font-weight:500; }
.pk-type { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s8); }
.pk-type > div { border-top:1px solid var(--rule); padding-top:var(--s6); display:flex; flex-direction:column; gap:var(--s1); }
.pk-type-a { font-size:4.5rem; font-weight:600; letter-spacing:-0.035em; line-height:1; margin-bottom:var(--s4); }
.pk-type-m { font-family:var(--mono); font-size:3.5rem; font-weight:500; line-height:1; margin-bottom:var(--s4); }
.pk-type small { color:var(--ink-soft); font-size:0.9375rem; }
.pk-about { margin:0; border-left:2px solid var(--navy-900); padding:var(--s2) 0 var(--s2) var(--s6); max-width:72ch; }
.pk-about p { font-size:1.125rem; }
.foot-bottom span:first-child a { margin-left:0; }

/* Legal & privacy index. */
.lgs { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--s8); }
.lg { border-top:2px solid var(--ink); padding-top:var(--s3); display:flex; flex-direction:column; gap:var(--s1); }
.lg h3 { font-family:var(--mono); font-size:0.75rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:var(--s2); }
.lg a { font-size:0.9375rem; color:var(--ink); text-decoration:none; padding:3px 0; }
.lg a:hover { text-decoration:underline; }
.prose.legal { max-width:80ch; }
.prose.legal table { width:100%; border-collapse:collapse; font-size:0.9375rem; display:block; overflow-x:auto; }
.prose.legal td, .prose.legal th { border:1px solid var(--rule); padding:var(--s2) var(--s3); vertical-align:top; text-align:left; }

/* ── Home, 14 Oct 2026: navy-first, type-led, the stroke as the spine ──────
 * The home page sits on navy from the header to the footer. Two white islands
 * (the four lines, the licence cards) sit in it. A vertical 4FE1 stroke band
 * runs down the left gutter and is written as the reader scrolls; the mark
 * re-draws at the head of each chapter when the spine reaches it. */
:root { --bleed:max(var(--s6), calc((100vw - 1120px) / 2)); --spine-x:max(var(--s4), calc((100vw - 1120px) / 2 - 44px)); }
main { overflow-x:clip; position:relative; }
[data-page="home"] { --hp-ink:#E8EDF5; --hp-soft:#B7C6DC; --hp-faint:#7E96B8; --hp-rule:#1E3C6C; }
[data-page="home"] body, body[data-page="home"] { background:var(--navy-900); color:var(--hp-ink); }
body[data-page="home"] main > section.ch { background:var(--navy-900); color:var(--hp-ink); border-top:0; padding:var(--s24) 0; position:relative; }   /* top padding, not a heading margin: a margin collapsed out of the section and showed the page ground as a navy ribbon above every white chapter */
/* Light chapters: the section itself turns white; the spine and its nodes turn navy. */
body[data-page="home"] main > section.ch.light { background:var(--surface); color:var(--ink); }
body[data-page="home"] .ch.light h2, body[data-page="home"] .ch.light h3 { color:var(--ink); }
body[data-page="home"] .ch.light .eyebrow { color:var(--ink-faint); }
body[data-page="home"] .ch.light .lede, body[data-page="home"] .ch.light p, body[data-page="home"] .ch.light .sub-head p { color:var(--ink-soft); }
body[data-page="home"] .ch.light .btn.ghost { border-color:var(--rule); color:var(--ink); }
body[data-page="home"] .ch.light .btn.ghost:hover { border-color:var(--ink); }
body[data-page="home"] .ch.light .sec-head.reveal::after { background:var(--rule); }
body[data-page="home"] .ch.light .spine svg path { fill:var(--navy-900); }
body[data-page="home"] .ch.light .spine-node svg { background:var(--surface); }
body[data-page="home"] main > section.ch + section.ch { border-top:0; }
body[data-page="home"] .ch h2, body[data-page="home"] .ch h3 { color:#FFFFFF; }
body[data-page="home"] .ch .eyebrow { color:var(--hp-faint); }
body[data-page="home"] .ch .lede, body[data-page="home"] .ch p, body[data-page="home"] .sub-head p { color:var(--hp-soft); }
body[data-page="home"] .ch .btn.ghost { border-color:var(--hp-rule); color:#FFFFFF; }
body[data-page="home"] .ch .btn.ghost:hover { border-color:#FFFFFF; }

/* Header and footer follow the page. */
body[data-page="home"] header.site { background:var(--navy-900); border-bottom-color:var(--hp-rule); }
body[data-page="home"] .logo, body[data-page="home"] nav.main a:hover, body[data-page="home"] nav.main a[aria-current="page"], body[data-page="home"] .burger { color:#FFFFFF; }
body[data-page="home"] nav.main a, body[data-page="home"] .nav-right .login { color:var(--hp-soft); }
body[data-page="home"] nav.main .sep, body[data-page="home"] .burger { border-color:var(--hp-rule); background-color:var(--hp-rule); }
body[data-page="home"] .burger { background:none; }
body[data-page="home"] nav.main.open { background:var(--navy-900); border-bottom-color:var(--hp-rule); }
body[data-page="home"] nav.main.open a { border-bottom-color:var(--hp-rule); }
body[data-page="home"] .nav-right .btn.solid { background:#FFFFFF; border-color:#FFFFFF; color:var(--navy-900); }
body[data-page="home"] header .hxm-auto use, body[data-page="home"] footer .hxm-auto use { fill:url(#hx-n); }
body[data-page="home"] footer.site { background-color:var(--navy-900); color:var(--hp-soft); }
body[data-page="home"] .foot a, body[data-page="home"] .foot-bottom, body[data-page="home"] .foot-bottom a, body[data-page="home"] .foot .legal, body[data-page="home"] .foot .hex, body[data-page="home"] .foot h4 { color:var(--hp-faint); }
body[data-page="home"] .foot a:hover { color:#FFFFFF; }
body[data-page="home"] .foot .logo { color:#FFFFFF; }
body[data-page="home"] .foot-bottom { border-top-color:var(--hp-rule); }
body[data-page="home"] .motion-toggle { border-color:var(--hp-rule); color:var(--hp-faint); }
body[data-page="home"] .consent { background:#FFFFFF; color:#0D1626; }

/* Room for the spine on the left at desktop. */
@media (min-width:980px) { body[data-page="home"] .wrap { padding-left:calc(var(--s6) + 28px); } }
.spine { position:absolute; top:0; bottom:0; left:var(--spine-x); width:6px; pointer-events:none; z-index:2; }
.spine svg { display:block; width:100%; height:100%; clip-path:inset(0 0 calc((1 - var(--spine, 0)) * 100%) 0); }
.spine svg path { fill:#FFFFFF; opacity:.9; }
.spine-node { position:absolute; left:calc(var(--spine-x) - 50% + 3px); top:0; width:auto; display:block; z-index:3; transform:translateX(-50%); pointer-events:none; }
.wrap { position:relative; }
.ch .wrap > .spine-node { top:var(--s16); left:calc(var(--spine-x) - var(--bleed) + 3px); }
.hero .wrap > .spine-node { top:calc(-1 * var(--s2)); left:calc(var(--spine-x) - var(--bleed) + 3px); }
.spine-node svg { width:auto; height:26px; display:block; background:var(--navy-900); padding:4px 6px; box-sizing:content-box; }
.spine-node .hxm-draw .ink { animation:none; stroke-dashoffset:1; }
.spine-node.go .hxm-draw .ink { animation:hx-ink 1.2s cubic-bezier(.55,.05,.35,1) forwards; }
@media (max-width:979px) { .spine, .spine-node { display:none; } }
html.no-ambient .spine svg { clip-path:none; } html.no-ambient .spine-node .hxm-draw .ink { animation:none; stroke-dashoffset:0; }

/* Type: editorial scale. The hero is a two-column grid: copy stacked on the left,
   the mark on the right at half the size it had in September, drawing on. */
body[data-page="home"] .hero { padding:var(--s24) 0 var(--s12); }
body[data-page="home"] .hero-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:var(--s12); align-items:center; }
body[data-page="home"] .hero h1 { font-size:clamp(2.5rem,5vw,4.25rem); font-weight:600; letter-spacing:-0.045em; line-height:0.98; max-width:18ch; }
body[data-page="home"] .hero .lede { font-size:clamp(1.125rem,1.5vw,1.3125rem); max-width:46ch; margin-top:var(--s6); }
body[data-page="home"] .hero .cta { margin-top:var(--s8); }
body[data-page="home"] .hero-mark svg.hxm { width:clamp(170px,19vw,250px); height:auto; }
@media (max-width:860px) { body[data-page="home"] .hero { padding:var(--s16) 0 var(--s12); } body[data-page="home"] .hero-grid { grid-template-columns:1fr; gap:var(--s8); } body[data-page="home"] .hero-mark { justify-content:flex-start; } body[data-page="home"] .hero-mark svg.hxm { width:150px; } }
body[data-page="home"] .hero canvas { opacity:1; -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.08) 30%, rgba(0,0,0,.4) 60%, rgba(0,0,0,.9) 100%); mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.08) 30%, rgba(0,0,0,.4) 60%, rgba(0,0,0,.9) 100%); }
body[data-page="home"] .hero::after { background:radial-gradient(50% 60% at 100% 100%, color-mix(in srgb, var(--payments) 18%, transparent), transparent 70%), radial-gradient(40% 50% at 70% 110%, color-mix(in srgb, var(--wealth) 10%, transparent), transparent 70%); }
body[data-page="home"] .hero .nums { margin-top:var(--s16); border-top-color:var(--hp-rule); }
body[data-page="home"] .ch h2 { font-size:clamp(2rem,4.4vw,3.5rem); font-weight:600; letter-spacing:-0.04em; line-height:1.02; }
body[data-page="home"] .sec-head { margin-top:0; margin-bottom:var(--s12); align-items:end; }
body[data-page="home"] .sec-head .lede.sub { font-size:1.1875rem; margin-top:var(--s4); padding-bottom:0; }
body[data-page="home"] .sec-head .lede { font-size:1.1875rem; max-width:44ch; padding-bottom:var(--s2); }
body[data-page="home"] .motion { margin-top:var(--s24); }
@media (max-width:760px) { body[data-page="home"] main > section.ch { padding:var(--s16) 0; } }

/* Reveals that write. */
.reveal { opacity:.001; transform:translateY(18px); transition:opacity .55s ease, transform .8s cubic-bezier(.55,.05,.35,1); }
.reveal.in { opacity:1; transform:none; }
.sec-head.reveal h2, .motion.reveal h2, .sub-head.reveal h3 { clip-path:inset(-12% 100% -12% -2%); }
.sec-head.reveal.in h2, .motion.reveal.in h2, .sub-head.reveal.in h3 { animation:hx-wipe 1s cubic-bezier(.55,.05,.35,1) .1s forwards; }
.sec-head.reveal::after { content:""; display:block; grid-column:1 / -1; height:1px; background:var(--hp-rule); transform:scaleX(0); transform-origin:0 50%; transition:transform 1.2s cubic-bezier(.55,.05,.35,1) .2s; }
.sec-head.reveal.in::after { transform:scaleX(1); }
html.no-ambient :is(.sec-head, .motion, .sub-head).reveal :is(h2, h3) { clip-path:none; animation:none; }
html.no-ambient .sec-head.reveal::after { transform:none; transition:none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none; } .sec-head.reveal h2, .motion.reveal h2, .sub-head.reveal h3 { clip-path:none; animation:none; } .spine svg { clip-path:none; } }

/* The four lines as a vertical list, each with its line's full-height bar. */
.linelist { display:grid; border-top:1px solid var(--rule); }
.lrow { display:grid; grid-template-columns:8px minmax(0,0.9fr) minmax(0,1.4fr) auto; gap:0 var(--s8); align-items:center; padding:var(--s8) var(--s8) var(--s8) 0; border-bottom:1px solid var(--rule); color:#0D1626; transition:background .25s ease; position:relative; }
.lrow:last-child { border-bottom:0; }
.lrow .bar { align-self:stretch; background:var(--lc); transform:scaleY(0); transform-origin:50% 0; transition:transform 1.1s cubic-bezier(.55,.05,.35,1) .1s; }
.lrow.in .bar, html.no-ambient .lrow .bar { transform:scaleY(1); }
.lrow .lname { padding-left:var(--s6); }
.lrow h3 { font-size:clamp(1.5rem,2.4vw,2rem); font-weight:600; letter-spacing:-0.03em; color:#0D1626; transition:color .2s ease; }
.lrow .lic { display:block; font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.04em; color:#7C8798; margin-top:var(--s2); }
.lrow .lc-pts li { color:#4A5568; }
.lrow .go { font-size:0.875rem; font-weight:600; color:var(--lc-ink); white-space:nowrap; }
.lrow:hover { background:color-mix(in srgb, var(--lc) 6%, #FFFFFF); }
.lrow:hover h3 { color:var(--lc-ink); }
.lrow[data-line-card="payments"] { --lc:#008FD6; --lc-ink:#006AAF; } .lrow[data-line-card="custody"] { --lc:#001A43; --lc-ink:#001A43; } .lrow[data-line-card="markets"] { --lc:#CD632D; --lc-ink:#A53E00; } .lrow[data-line-card="wealth"] { --lc:#00A28E; --lc-ink:#007C6A; }
@media (max-width:860px) { .lrow { grid-template-columns:6px minmax(0,1fr); gap:var(--s3) var(--s4); padding:var(--s6) var(--s4) var(--s6) 0; } .lrow .lname { padding-left:var(--s4); } .lrow .lc-pts, .lrow .go { grid-column:2; } }

/* Written in hex on the navy ground. */
.hexgrid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr); gap:var(--s12); align-items:center; }
.ch-hex .stage { --glyph-size:168px; border:0; padding:0; background:none; min-height:0; }
.ch-hex .verify { gap:var(--s8); }
.ch-hex .verify .addr { font-size:1rem; }
.hextext { display:flex; flex-direction:column; gap:var(--s4); }
.hextext h3 { font-size:1.5rem; letter-spacing:-0.025em; }
.hextext .btn { align-self:flex-start; margin-top:var(--s2); }
.glyph-strip { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--s4) var(--s3); margin-top:var(--s12); padding-top:var(--s8); border-top:1px solid var(--hp-rule); }
.glyph-strip figure { margin:0; display:flex; flex-direction:column; align-items:center; gap:var(--s2); min-width:0; }
.glyph-strip figcaption { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.glyph-strip svg { width:40px; height:40px; }
.glyph-strip figcaption { font-family:var(--mono); font-size:0.625rem; color:var(--hp-faint); }
.ch-hex .glyph-grid { border:0; padding:0; background:none; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s6) var(--s4); }
.ch-hex .glyph-grid svg { width:72px; height:72px; }
.hexverify { display:flex; flex-direction:column; gap:var(--s4); }
.hexverify h3 { font-size:1.5rem; letter-spacing:-0.025em; }
.hexverify .stage { border:0; padding:var(--s6) 0; background:none; min-height:0; }
.hexverify .btn { align-self:flex-start; }
@media (max-width:860px) { .hexgrid { grid-template-columns:1fr; } .ch-hex .stage { --glyph-size:120px; } .glyph-strip { grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* How it starts, platforms, resources sit on light chapters: site defaults apply. */
.sub-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s8); align-items:end; margin:var(--s16) 0 var(--s6); }
.sub-head h3 { font-size:1.5rem; letter-spacing:-0.025em; }
@media (max-width:760px) { .sub-head { grid-template-columns:1fr; gap:var(--s3); } }
body[data-page="home"] .ch.light .teaser h3 { color:var(--ink); }
body[data-page="home"] .ch.light .teaser a, body[data-page="home"] .ch.light .pc { color:var(--ink); }

/* The signature: the full lockup, large, in the home page's closing band. */
.sig { --wm-cap:43px; display:flex; align-items:center; gap:calc(var(--wm-cap) * .352); margin-bottom:var(--s8); color:#FFFFFF; }
.sig svg { height:calc(var(--wm-cap) * 1.3); width:auto; display:block; }
body[data-page="home"] .band .wrap { align-items:end; }

/* Archive images that are not on the review host: a quiet caption, not a broken icon. */
.img-ph { display:block; margin:var(--s6) 0; padding:var(--s4) var(--s6); border:1px dashed var(--rule); color:var(--ink-faint); font-size:0.875rem; line-height:1.5; }

/* Home hero: Hong Kong from the logo film (clean plate, no caption), looping quietly behind the copy. Navy
   tint keeps the headline legible; the bottom fades to solid navy under the numbers. */
.hero-reel { position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; opacity:0; filter:saturate(.6); z-index:0; pointer-events:none; transition:opacity .9s ease; }
.hero-bg.on { opacity:.5; }
/* A navy scrim on the copy side keeps the headline, the line under it and the eyebrow readable over any clip. */
.hero-reel::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,26,67,.82) 0%, rgba(0,26,67,.62) 42%, rgba(0,26,67,.18) 78%, rgba(0,26,67,0) 100%); pointer-events:none; }
@media (max-width:860px) { .hero-reel::after { background:rgba(0,26,67,.6); } }
@media (prefers-reduced-motion: reduce) { .hero-bg { transition:none; } }
body[data-page="home"] .hero::before { content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(0,26,67,.2) 0%, rgba(0,26,67,.1) 40%, rgba(0,26,67,.88) 80%, var(--navy-900) 100%), linear-gradient(90deg, rgba(0,26,67,.78) 0%, rgba(0,26,67,.6) 34%, rgba(0,26,67,.2) 60%, rgba(0,26,67,.05) 100%); pointer-events:none; }
/* Motion off (toggle or OS): site.js pauses the loop on its first frame, so the city stays as a still. */
body[data-page="home"] .hero .spine-node svg { background:transparent; }
/* No navy halo behind the hero mark on the home page: the city shows through. */
body[data-page="home"] .hero-mark::before { display:none; }

/* Jurisdiction pages (/singapore, /ae): regulatory text in readable measure; the MAS risk gate. */
.jur-sec .who { margin-top:var(--s6); }
.jur-prose { max-width:72ch; margin-top:var(--s6); }
.jur-prose p + p { margin-top:var(--s4); }
.jur-risk { background:var(--paper); }
.jur-risk ol { padding-left:1.25em; display:grid; gap:var(--s3); margin-top:var(--s4); }
.jur-links { margin-top:var(--s6); font-size:0.9375rem; color:var(--ink-soft); }
.jur-gate { position:fixed; inset:0; z-index:100; background:rgba(0,26,67,.72); display:grid; place-items:center; padding:var(--s4); }
.jur-gate[hidden] { display:none; }
.jur-gate-box { background:var(--surface); color:var(--ink); max-width:720px; width:100%; max-height:calc(100vh - 32px); overflow:auto; padding:var(--s8); border-top:var(--line-bar) solid var(--navy-900); }
.jur-gate-box h2 { font-size:1.5rem; letter-spacing:-0.02em; }
.jur-gate-body { margin-top:var(--s4); font-size:0.9375rem; color:var(--ink-soft); }
.jur-gate-body p + p, .jur-gate-body ol { margin-top:var(--s3); }
.jur-gate-body ol { padding-left:1.25em; display:grid; gap:var(--s2); }
.jur-gate-act { display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s6); }
.jur-gate-act .btn { margin-top:0; }
/* Singapore visitors: a small notice pointing to the MAS entity's page. */
.geo-note { position:fixed; left:var(--s4); right:var(--s4); bottom:var(--s4); z-index:90; max-width:520px; margin-left:auto; background:var(--surface); color:var(--ink); border:1px solid var(--rule); border-top:3px solid var(--navy-900); padding:var(--s4) var(--s6); box-shadow:0 20px 40px -20px rgba(0,26,67,.45); display:flex; flex-wrap:wrap; gap:var(--s3) var(--s4); align-items:center; }
.geo-note p { flex:1 1 260px; font-size:0.9375rem; }
.geo-note b { display:block; }
.geo-note .btn { margin-top:0; }
.geo-note button.x { background:none; border:0; color:var(--ink-soft); font:600 0.875rem var(--sans); cursor:pointer; padding:var(--s2); }
/* The home page's spine indents every .wrap by 28 px, header included, so its menu needs a tighter gap to fit. */
@media (min-width:1241px) { body[data-page="home"] nav.main { gap:var(--s4); } }

/* Roma's thank-you line, restyled from its inline green to the site's own voice. */
[data-page="contact"] .roma-form-success { color:var(--ink) !important; text-align:left !important; padding:var(--s8) 0 var(--s2) !important; font-size:clamp(1.5rem,3vw,2rem) !important; font-weight:600 !important; letter-spacing:-0.02em; border-top:var(--line-bar) solid var(--navy-900); outline:none; }
[data-page="contact"] .contact-next { color:var(--ink-soft); font-size:1.0625rem; padding-bottom:var(--s16); }
[data-page="contact"] .contact-next a { display:block; margin-top:var(--s3); color:var(--ink); font-weight:600; }

/* Resources on the home page: three titles with a navy rule, not three thin boxes. */
.ch-res .teaser { gap:var(--s6); background:none; border:0; }
.ch-res .teaser a { background:none; padding:var(--s4) 0 0; border-top:3px solid var(--navy-900); gap:var(--s3); }
.ch-res .teaser a:hover { background:none; } .ch-res .teaser a:hover h3 { color:var(--navy-700); }
.ch-res .teaser h3 { font-size:1.25rem; letter-spacing:-0.02em; line-height:1.25; }
.ch-res .teaser .d { padding-top:var(--s4); }
/* Steps: the drawing sits beside the title, so all four columns end level. */
.step-h { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); min-height:34px; }   /* same height with or without a drawing, so the four titles sit level */
.step .step-h svg { width:30px; height:30px; margin:0; flex:0 0 auto; }
.step .step-h svg.hxm { width:34px; height:auto; margin:0; }
.step p { padding-bottom:0; }

/* ── Client login menu (Safe, Aura) ───────────────────────────────────────── */
.login-menu { position:relative; }
.login-menu .login { background:none; border:0; font:inherit; color:inherit; cursor:pointer; padding:0; }
.login-menu .login::after { content:""; display:inline-block; width:6px; height:6px; margin-left:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-3px) rotate(45deg); }
.login-pop { position:absolute; right:0; top:calc(100% + 12px); min-width:200px; background:var(--surface); color:var(--ink); border:1px solid var(--rule); box-shadow:0 12px 32px rgba(0,26,67,.18); padding:var(--s2) 0; z-index:30; }
.login-pop a { display:flex; justify-content:space-between; align-items:baseline; gap:var(--s4); padding:var(--s3) var(--s4); color:var(--ink); text-decoration:none; }
.login-pop a:hover, .login-pop a:focus-visible { background:var(--rule-soft); }
.login-pop a span { font-family:var(--mono); font-size:0.6875rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); }

/* ── Simplified footer (Ben, 23 Oct 2026) ─────────────────────────────────── */
footer.site .foot-simple { grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr)); }
@media (max-width:860px) { footer.site .foot-simple { grid-template-columns:repeat(2,minmax(0,1fr)); } }
footer.site .entities { font-size:0.8125rem; color:var(--ink-faint); max-width:none; margin:var(--s8) 0 0; }
footer.site .entities a { color:inherit; text-decoration:underline; text-underline-offset:2px; }

/* ── Client logo band under the home hero ─────────────────────────────────── */
.logo-band { background:var(--navy-900); color:#B7C6DC; padding:var(--s8) 0 var(--s12); border-top:1px solid var(--navy-700); }
.logo-band .lb-lead { font-size:0.9375rem; margin:0 0 var(--s6); color:#B7C6DC; }
.logo-band .lb-marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logo-band .lb-track { display:flex; width:max-content; animation:lb-roll 90s linear infinite; }
.logo-band .lb-marquee:hover .lb-track { animation-play-state:paused; }
.logo-band .lb-row { display:flex; align-items:center; gap:var(--s12); padding-right:var(--s12); }
.logo-band img { flex:none; width:150px; height:30px; object-fit:contain; object-position:center; display:block; filter:brightness(0) invert(1); opacity:.78; transition:opacity .2s ease; }
.logo-band img:hover { opacity:1; }
@keyframes lb-roll { to { transform:translateX(-50%); } }
/* Motion off (toggle or OS): the band stands still as a wrapped grid of one set. */
html.no-ambient .logo-band .lb-marquee { -webkit-mask-image:none; mask-image:none; }
html.no-ambient .logo-band .lb-track { width:auto; animation:none; }
html.no-ambient .logo-band .lb-row { flex-wrap:wrap; gap:var(--s8) var(--s12); padding-right:0; }
html.no-ambient .logo-band .lb-row[aria-hidden] { display:none; }
@media (max-width:520px) { .logo-band img { width:120px; height:26px; } .logo-band .lb-row { gap:var(--s8); padding-right:var(--s8); } }

/* ── Hero film pause: a round frosted button with the clip's progress ring ── */
.reel-pause { position:absolute; right:var(--s6); bottom:var(--s6); z-index:3; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#FFFFFF; padding:0; cursor:pointer; display:grid; place-items:center; }
.reel-pause svg { width:36px; height:36px; display:block; }
.reel-pause .ring-bg { fill:none; stroke:rgba(255,255,255,.22); stroke-width:2; }
.reel-pause .ring { fill:none; stroke:#FFFFFF; stroke-width:2; stroke-dasharray:100; stroke-dashoffset:100; transform:rotate(-90deg); transform-origin:50% 50%; }
.reel-pause .ico-pause, .reel-pause .ico-play { fill:#FFFFFF; }
.reel-pause .ico-play { display:none; }
.reel-pause[aria-pressed="true"] .ico-pause { display:none; }
.reel-pause[aria-pressed="true"] .ico-play { display:block; }
.reel-pause:hover { background:rgba(255,255,255,.2); }
.reel-pause:focus-visible { outline:2px solid #FFFFFF; outline-offset:3px; }

footer.site .foot a.logo { display:inline-flex; align-items:center; gap:var(--s3); }
/* Convert-to-Pay quote on phones: stack pay over receive, the arrow pointing down, so six-figure amounts never overflow. */
@media (max-width:520px) {
  .c2p-quote { grid-template-columns:1fr; justify-items:start; }
  .c2p-quote > div:last-child { text-align:left; }
  .c2p-arrow { transform:rotate(90deg); width:24px; height:24px; }
  .c2p-quote b { font-size:1.375rem; }
}