:root{
  --blue:#2d628c;
  --blue-d:#1d4566;
  --pale:#a9bfd2;
  --ink:#0b1622;
  --white:#fff;
  --text:#5a6b7c;
  --line:rgba(45,98,140,.2);
  --holo:#3d8bff;
  --pad:clamp(20px,6.5vw,115px);
  --f:"Century Gothic","Didact Gothic",CenturyGothic,AppleGothic,sans-serif;
  --f-thin:"Josefin Sans","Century Gothic",sans-serif;
  --ease:cubic-bezier(.77,0,.18,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;background:#dfe5ea}
html.page-markets{background:#000}
body{font-family:var(--f);color:var(--blue);overflow-x:hidden;-webkit-font-smoothing:antialiased;background:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--blue);color:#fff}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:300;background:#eef2f5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;transition:opacity 1.2s var(--ease),visibility 1.2s}
.page-markets .loader{background:#05080d}
body.ready .loader{opacity:0;visibility:hidden}
.loader img{width:80px;animation:breathe 2.2s ease-in-out infinite}
@keyframes breathe{50%{opacity:.4}}
.loader-line{width:140px;height:1px;background:var(--line)}
.loader-line span{display:block;height:100%;width:0;background:var(--blue);transition:width .4s}
.page-markets .loader-line span{background:#fff}

/* ---------- canvas + fade ---------- */
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.fade{position:fixed;inset:0;z-index:1;pointer-events:none;background:#fff;opacity:0}
main{position:relative;z-index:2}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:30px var(--pad);transition:color .6s,transform .8s var(--ease)}
.top.hide{transform:translateY(-130%)}
.top .crumb{font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-weight:700}
.top-right{display:flex;align-items:center;gap:26px}
.menu-btn{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-weight:700}
.dots{display:flex;gap:4px}
.dots i{width:4px;height:4px;border-radius:50%;background:currentColor;transition:transform .5s var(--ease)}
.menu-btn:hover .dots i:first-child{transform:translateX(-3px)}
.menu-btn:hover .dots i:last-child{transform:translateX(3px)}
body.dark-ui .top,.page-markets .top{color:#fff}

/* ---------- menu ---------- */
.menu{position:fixed;inset:0;z-index:90;background:#fff;color:var(--blue);display:grid;grid-template-columns:1.2fr 1fr;clip-path:inset(0 0 0 100%);transition:clip-path 1.1s var(--ease)}
body.menu-open .menu{clip-path:inset(0 0 0 0)}
body.menu-open .top{color:var(--blue)}
.menu-main{padding:18vh var(--pad) 8vh;display:flex;flex-direction:column;justify-content:center}
.menu-main a{font-size:clamp(28px,3vw,42px);letter-spacing:.04em;text-transform:uppercase;line-height:1.55;color:var(--pale);transition:color .4s,letter-spacing .6s var(--ease-out)}
.menu-main a:hover,.menu-main a.on{color:var(--blue)}
.menu-main a:hover{letter-spacing:.08em}
.menu-side{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:8vh 5vw}
.menu-side::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 70% 20%,#fff,#dde6ee 60%,#c7d4e0)}
.menu-side>*{position:relative}
.menu-side img{width:90px;margin-bottom:auto;margin-top:12vh}
.menu-side .label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px;font-weight:700}
.menu-side p{font-size:14px;line-height:1.9;color:var(--text)}

/* ---------- floating buttons ---------- */
.fab{position:fixed;right:var(--pad);z-index:80;width:48px;height:48px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;color:var(--blue);transition:color .6s,opacity .5s,transform .5s var(--ease)}
.fab.sound{bottom:34px}
.fab.up{bottom:34px;opacity:0;transform:translateY(10px);pointer-events:none}
body.scrolled .fab.up{opacity:1;transform:none;pointer-events:auto}
.fab.sound span{width:16px;height:1px;background:currentColor}
body.sound-on .fab.sound span{height:10px;background:none;display:flex;gap:3px;align-items:center;justify-content:center}
body.sound-on .fab.sound span::before,body.sound-on .fab.sound span::after{content:"";width:1px;height:100%;background:currentColor;animation:eq .9s infinite ease-in-out}
body.sound-on .fab.sound span::after{animation-delay:-.4s}
@keyframes eq{50%{transform:scaleY(.3)}}
.fab.up svg{width:12px}
body.dark-ui .fab,.page-markets .fab{color:#fff}

/* ---------- shared type ---------- */
.big{font-weight:400;text-transform:uppercase;font-size:clamp(30px,4.2vw,66px);line-height:1.12;letter-spacing:.01em}
.lead{font-size:clamp(17px,1.5vw,23px);line-height:1.6;max-width:40ch}
.label{font-size:13px;letter-spacing:.02em}
.cta{display:inline-flex;align-items:center;gap:22px;font-size:14px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;padding-bottom:22px;position:relative}
.cta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.4;transform-origin:left;transition:transform .8s var(--ease)}
.cta i{width:52px;height:52px;border-radius:50%;background:#fff;color:var(--blue);display:grid;place-items:center;transition:transform .6s var(--ease-out);flex:none}
.cta i svg{width:14px}
.cta:hover i{transform:scale(1.12)}
.cta:hover::after{transform:scaleX(.6)}

.reveal{opacity:0;transform:translateY(60px);transition:opacity 1.4s var(--ease-out),transform 1.4s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.lines .ln{display:block;overflow:hidden;padding-bottom:.04em}
.lines .ln>span{display:block;transform:translateY(105%);transition:transform 1.3s var(--ease-out)}
.lines.in .ln>span{transform:none}

/* =========================================================
   HOME
   ========================================================= */
.hero{height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;text-align:center}
.hero-mark{width:clamp(80px,9vw,130px);opacity:0;transform:translateY(20px) scale(.9);transition:1.6s .3s var(--ease-out)}
.hero-name{margin-top:26px;position:relative;padding:18px 0}
.hero-name::before,.hero-name::after{content:"";position:absolute;left:50%;height:1px;width:112%;background:currentColor;opacity:.35;transform:translateX(-50%) scaleX(0);transition:transform 1.6s 1s var(--ease)}
.hero-name::before{top:0}.hero-name::after{bottom:0}
.hero-name h1{font-family:var(--f-thin);font-weight:200;font-size:clamp(40px,6.4vw,104px);letter-spacing:.32em;text-transform:uppercase;line-height:1;margin-right:-.32em}
.hero-name p{font-family:var(--f-thin);font-weight:300;font-size:clamp(13px,1.25vw,20px);letter-spacing:.7em;text-transform:uppercase;margin-top:16px;margin-right:-.7em}
.ch{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(.3em);transition:opacity 1.4s var(--ease-out),filter 1.4s var(--ease-out),transform 1.4s var(--ease-out)}
body.ready .ch{opacity:1;filter:none;transform:none}
body.ready .hero-mark{opacity:1;transform:none}
body.ready .hero-name::before,body.ready .hero-name::after{transform:translateX(-50%) scaleX(1)}
.swipe{position:absolute;left:var(--pad);bottom:40px;display:flex;align-items:center;gap:18px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.swipe svg{width:10px;animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(5px)}}

.intro{min-height:170vh;padding:30vh var(--pad) 10vh}
.intro .big{max-width:15ch}
.intro-sub{margin-top:30vh;margin-left:auto;max-width:620px}
.intro-sub .lead{max-width:none}
.intro-sub .cta{margin-top:60px}

.who{min-height:150vh;padding:20vh var(--pad);display:flex;flex-direction:column;justify-content:center}
.who .big{max-width:20ch}
.who .lead{margin:14vh 0 0 auto;max-width:520px;font-size:clamp(15px,1.2vw,18px);letter-spacing:.04em}

.divisions{padding:10vh var(--pad) 30vh;color:#fff}
.division{min-height:110vh;display:flex;flex-direction:column;justify-content:center;max-width:760px}
.division:nth-child(even){margin-left:auto}
.division .label{margin-bottom:26px;font-size:14px}
.division .big{margin-bottom:50px;text-shadow:0 2px 30px rgba(30,45,60,.35)}
.division .cta{width:max-content;max-width:100%}
.scroll-mid{display:grid;place-items:center;margin:0 auto;width:52px;height:52px;border-radius:50%;border:1px solid currentColor;color:var(--blue)}
.scroll-mid svg{width:12px}

.hubs{min-height:230vh;padding:40vh var(--pad) 20vh;color:#fff;position:relative}
.hubs .big{max-width:18ch;position:sticky;top:55vh}
.hubs .lead{margin-top:70vh;max-width:560px}
.hub-tag{position:fixed;left:0;top:0;z-index:3;display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#fff;pointer-events:none;opacity:0;transition:opacity .6s;white-space:nowrap}
.hub-tag::before{content:"";width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.18),0 0 24px #fff}

.ethos{padding:26vh var(--pad) 30vh;color:#fff}
.diamond{width:38px;height:38px;border:1px solid currentColor;transform:rotate(45deg);display:grid;place-items:center;margin-bottom:40px}
.diamond.reveal{transform:translateY(40px) rotate(45deg)}
.diamond.reveal.in{transform:rotate(45deg)}
.diamond span{transform:rotate(-45deg);font-size:12px}
.ethos-block{min-height:100vh;display:flex;flex-direction:column;justify-content:center;max-width:980px}
.ethos-block .big{margin-bottom:6vh}
.ethos-block .lead{font-size:clamp(15px,1.3vw,19px);letter-spacing:.06em;line-height:1.9;max-width:62ch}
.tabs{display:flex;gap:40px;flex-wrap:wrap;margin-bottom:6vh}
.tabs button{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding-bottom:16px;position:relative;opacity:.5;transition:opacity .4s;min-width:110px;text-align:left}
.tabs button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#fff;opacity:.3}
.tabs button.on{opacity:1}
.tabs button.on::after{opacity:1}
.tab-panel{display:none}
.tab-panel.on{display:block;animation:fadeIn .9s var(--ease-out)}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}}
.icons{display:flex;gap:26px;flex-wrap:wrap;margin-top:6vh}
.icons div{width:130px;text-align:center;font-size:11px;letter-spacing:.1em;text-transform:uppercase;line-height:1.6}
.icons svg{width:74px;height:74px;display:block;margin:0 auto 16px;border:1px solid rgba(255,255,255,.5);border-radius:50%;padding:22px}
.principle-list{list-style:none;border-top:1px solid rgba(255,255,255,.25)}
.principle-list li{display:grid;grid-template-columns:1fr 1.4fr;gap:30px;padding:28px 0;border-bottom:1px solid rgba(255,255,255,.25)}
.principle-list h3{font-weight:400;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(18px,1.6vw,24px)}
.principle-list p{letter-spacing:.04em;line-height:1.7;opacity:.85}

/* ---------- footer (both pages) ---------- */
.foot{position:relative;z-index:2;background:#fff;color:var(--blue);padding:14vh var(--pad) 40px}
.offices{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.office{padding-bottom:40px;border-bottom:1px solid var(--line)}
.office h2{font-weight:400;font-size:clamp(22px,2vw,30px);text-transform:uppercase;letter-spacing:.02em;line-height:1.3;margin-bottom:40px}
.office p{font-size:13px;letter-spacing:.06em;line-height:1.8;color:#7f95aa}
.office p+p{margin-top:18px;color:var(--blue)}
.disclaimer{margin-top:80px;max-width:1000px}
.disclaimer h4{font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px}
.disclaimer p{font-size:12px;line-height:1.8;color:#7f95aa;margin-bottom:10px}
.foot-brand{margin-top:80px;display:flex;align-items:center;gap:22px}
.foot-brand img{height:46px}
.foot-brand span{width:1px;height:40px;background:var(--line)}
.foot-brand b{font-family:var(--f-thin);font-weight:300;font-size:26px;letter-spacing:.3em}
.copy{margin-top:30px;font-size:11px;letter-spacing:.06em;color:var(--pale)}

/* =========================================================
   MARKETS (trading-style)
   ========================================================= */
.page-markets main{color:#fff}
.m-hero{height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;color:#fff}
.m-hero .hero-name h1{font-weight:100;letter-spacing:.34em}
.m-hero .hero-name p{letter-spacing:.9em;font-weight:200}
.m-hero .hero-name::before{display:none}
.black-in{height:95vh}
.m-intro{padding:20vh var(--pad) 10vh;min-height:130vh}
.m-intro .big{font-size:clamp(28px,3.6vw,56px)}
.m-intro .big .dim{color:rgba(255,255,255,.45)}
.m-intro .lead{margin:16vh 0 0 30%;max-width:620px;font-size:clamp(15px,1.25vw,19px);letter-spacing:.05em;line-height:1.85}
.more{width:44px;height:44px;border-radius:50%;border:1px solid var(--holo);color:#fff;display:grid;place-items:center;margin-top:40px;box-shadow:0 0 16px rgba(61,139,255,.35) inset;transition:transform .5s var(--ease)}
.more svg{width:10px}
.open .more{transform:rotate(180deg)}
.m-rule{height:1px;background:linear-gradient(90deg,var(--holo),rgba(61,139,255,.2));margin:0 var(--pad);box-shadow:0 0 12px var(--holo)}
.group{padding:16vh var(--pad) 10vh;position:relative}
.group-head{min-height:60vh}
.group-head .label{font-size:15px;letter-spacing:.03em}
.group-head h2{font-weight:400;font-size:clamp(36px,4vw,64px);text-transform:uppercase;letter-spacing:.02em;margin-top:22vh}
.group-head .lead{margin-top:12vh;font-size:clamp(15px,1.25vw,19px);letter-spacing:.05em;line-height:1.85;max-width:1100px}
.items{display:flex;flex-direction:column}
.item{min-height:70vh;display:flex;flex-direction:column;justify-content:center;width:min(470px,100%)}
.item:nth-child(odd){align-self:flex-end;margin-right:4vw}
.item:nth-child(even){align-self:flex-start}
.item h3{font-weight:400;font-size:clamp(19px,1.6vw,24px);margin-bottom:26px;letter-spacing:.01em}
.item p{font-size:15px;letter-spacing:.05em;line-height:1.85;color:rgba(255,255,255,.85);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.item.open p{-webkit-line-clamp:unset}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .menu{grid-template-columns:1fr}
  .menu-side{display:none}
  .offices{grid-template-columns:1fr}
  .items{grid-template-columns:1fr}
  .item:nth-child(n){align-self:flex-start;margin-right:0;min-height:55vh}
  .m-intro .lead{margin-left:0}
  .principle-list li{grid-template-columns:1fr;gap:8px}
  .division:nth-child(even){margin-left:0}
}
@media (max-width:600px){
  .top{padding:22px var(--pad)}
  .top .crumb{font-size:10px}
  .hero-name h1{letter-spacing:.22em;margin-right:-.22em}
  .hero-name p{letter-spacing:.45em;margin-right:-.45em}
  .fab{width:40px;height:40px}
  .fab.up{bottom:22px}
  .swipe{bottom:28px}
  .icons div{width:110px}
  .cta{letter-spacing:.18em;gap:16px}
  .cta i{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){.reveal,.ch,.lines .ln>span{transition:none;opacity:1;transform:none;filter:none}}

/* ---------- single-page info sections (dark) ---------- */
.info{padding:18vh var(--pad) 16vh;position:relative}
.info>.label{margin-bottom:6vh}
.info .big{max-width:18ch}
.info>.lead{margin:10vh 0 0 30%;max-width:640px;font-size:clamp(15px,1.25vw,19px);letter-spacing:.05em;line-height:1.85}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:14vh;border-top:1px solid rgba(61,139,255,.35)}
.info-grid.four{grid-template-columns:repeat(4,1fr)}
.info-grid article{padding:40px 30px 40px 0;min-height:280px;display:flex;flex-direction:column;position:relative}
.info-grid article+article{padding-left:30px;border-left:1px solid rgba(61,139,255,.2)}
.info-grid article:nth-child(2){transition-delay:.1s}.info-grid article:nth-child(3){transition-delay:.2s}.info-grid article:nth-child(4){transition-delay:.3s}
.info-grid span{width:40px;height:40px;border-radius:50%;border:1px solid var(--holo);display:grid;place-items:center;font-size:11px;letter-spacing:.1em;box-shadow:0 0 16px rgba(61,139,255,.35) inset}
.info-grid h3,.principle-rows h3{font-weight:400;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(18px,1.5vw,23px);margin:auto 0 14px}
.info-grid p,.principle-rows p{font-size:15px;letter-spacing:.05em;line-height:1.8;color:rgba(255,255,255,.75)}
.motto{margin-top:14vh;font-size:clamp(26px,3.2vw,50px);text-transform:uppercase;line-height:1.15;text-align:right}
.motto .dim,.big .dim{color:rgba(255,255,255,.45)}
.principle-rows{list-style:none;margin-top:30px;border-top:1px solid rgba(61,139,255,.35)}
.principle-rows li{display:grid;grid-template-columns:1fr 1.3fr;gap:30px;align-items:baseline;padding:30px 0;border-bottom:1px solid rgba(61,139,255,.2);transition:opacity 1.4s var(--ease-out),transform 1.4s var(--ease-out),padding .6s var(--ease-out)}
.principle-rows li:hover{padding-left:18px}
.principle-rows h3{margin:0}
.page-markets .cta i{background:#fff;color:#000}
.foot-title{font-weight:400;text-transform:uppercase;font-size:clamp(34px,4.4vw,70px);margin-bottom:10vh;letter-spacing:.01em}
@media (max-width:900px){
  .info>.lead{margin-left:0}
  .info-grid,.info-grid.four{grid-template-columns:1fr}
  .info-grid article,.info-grid article+article{padding:30px 0;border-left:0;border-bottom:1px solid rgba(61,139,255,.2);min-height:0}
  .info-grid h3{margin-top:22px}
  .principle-rows li{grid-template-columns:1fr;gap:8px}
  .motto{text-align:left}
  .page-markets .cta{margin-left:0!important}
}