:root{
  --bg:#080c14; --bg2:#0d1520;
  --fg:#eaf2f4; --fg2:#a3b4bd; --fg3:#6e8189;
  --acc:#3fd9c4; --acc2:#7aa5ff;
  --glass:rgba(255,255,255,.055); --glass-2:rgba(255,255,255,.085);
  --edge:rgba(255,255,255,.12); --edge-2:rgba(255,255,255,.22);
  --shadow:0 10px 40px rgba(0,0,0,.42);
  --r:20px;
  --b1:#1f4fd8; --b2:#0f9e8c; --b3:#8a2fb0; --b4:#c9531f;
}
:root[data-theme="light"]{
  --bg:#eef3f7; --bg2:#e2eaf2;
  --fg:#0d1a1f; --fg2:#42565f; --fg3:#7b8d95;
  --acc:#0b7d6d; --acc2:#3558c4;
  --glass:rgba(255,255,255,.55); --glass-2:rgba(255,255,255,.72);
  --edge:rgba(255,255,255,.75); --edge-2:rgba(13,26,31,.10);
  --shadow:0 10px 36px rgba(28,52,70,.14);
  --b1:#6f9dff; --b2:#63d8c4; --b3:#c78ce0; --b4:#ffb37a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; color:var(--fg); background:var(--bg); font-family:'Manrope',system-ui,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.68; -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important} }

.bgwrap{position:fixed; inset:0; z-index:-2; overflow:hidden; background:radial-gradient(120% 90% at 80% 0%, var(--bg2), var(--bg) 62%)}
.blob{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; will-change:transform}
:root[data-theme="light"] .blob{opacity:.42; filter:blur(80px)}
.b1{width:46vw;height:46vw;left:-8vw;top:-6vw;background:var(--b1);animation:f1 34s ease-in-out infinite alternate}
.b2{width:40vw;height:40vw;right:-6vw;top:8vw;background:var(--b2);animation:f2 42s ease-in-out infinite alternate}
.b3{width:38vw;height:38vw;left:24vw;top:48vh;background:var(--b3);animation:f3 38s ease-in-out infinite alternate}
.b4{width:30vw;height:30vw;right:14vw;bottom:-8vw;background:var(--b4);animation:f1 46s ease-in-out infinite alternate-reverse}
@keyframes f1{to{transform:translate3d(6vw,7vh,0) scale(1.14)}}
@keyframes f2{to{transform:translate3d(-8vw,10vh,0) scale(.88)}}
@keyframes f3{to{transform:translate3d(9vw,-9vh,0) scale(1.1)}}
.grain{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.14;
  background-image:radial-gradient(rgba(255,255,255,.5) .5px, transparent .5px); background-size:3px 3px}
:root[data-theme="light"] .grain{opacity:.09; background-image:radial-gradient(rgba(0,0,0,.4) .5px, transparent .5px)}

h1,h2,h3{font-family:'Unbounded','Manrope',sans-serif; line-height:1.16; margin:0}
h1{font-weight:500; font-size:clamp(2rem,5.2vw,3.5rem); letter-spacing:-.035em}
h2{font-weight:500; font-size:clamp(1.38rem,2.8vw,1.9rem); letter-spacing:-.028em; margin:0 0 .75em}
h3{font-family:'Manrope',sans-serif; font-weight:700; font-size:1.08rem; letter-spacing:-.012em; margin:0 0 .45em}
h4{font-family:'Manrope',sans-serif; font-weight:700; font-size:.95rem; margin:0 0 .3em; color:var(--fg)}
p{margin:0 0 1.1em; max-width:68ch; color:var(--fg2)}
a{color:var(--acc); text-decoration:none; border-bottom:1px solid transparent}
a:hover{border-bottom-color:var(--acc)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--acc); outline-offset:3px; border-radius:8px}
ul,ol{color:var(--fg2); max-width:68ch; padding-left:1.15em}
li{margin:.35em 0}
strong{color:var(--fg); font-weight:700}
code{font-family:ui-monospace,Menlo,monospace; font-size:.85em; background:var(--glass); border:1px solid var(--edge); padding:.1em .42em; border-radius:6px; color:var(--fg)}
.lede{font-size:1.1rem; color:var(--fg2); max-width:66ch}
.eyebrow{font-size:.79rem; font-weight:600; color:var(--fg3); margin:0 0 10px}
mark.todo{background:none; color:#ff9a6b; font-weight:600; border-bottom:2px dotted #ff9a6b; padding:0 1px}
:root[data-theme="light"] mark.todo{color:#c04a12; border-bottom-color:#c04a12}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:99; background:var(--glass-2); backdrop-filter:blur(14px); border:1px solid var(--edge); padding:10px 16px; border-radius:12px}

.glass{background:var(--glass); -webkit-backdrop-filter:blur(20px) saturate(155%); backdrop-filter:blur(20px) saturate(155%);
  border:1px solid var(--edge); border-radius:var(--r); box-shadow:var(--shadow)}
.card{padding:24px 26px}
.grid{display:grid; gap:16px}
@media (min-width:720px){ .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} }
@media (min-width:600px) and (max-width:719px){ .g3{grid-template-columns:repeat(2,1fr)} }
.tag{display:inline-block; padding:5px 13px; border-radius:99px; background:var(--glass); border:1px solid var(--edge);
  font-size:.76rem; font-weight:600; color:var(--fg2); margin:0 6px 7px 0}
a.tag{color:var(--fg2)} a.tag:hover{color:var(--acc); border-color:var(--acc)}

/* ---------- header ---------- */
.hd{position:sticky; top:0; z-index:40; padding:13px clamp(16px,4vw,42px) 11px;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid var(--edge-2)}
.hd .in{max-width:1120px; margin:0 auto; display:flex; align-items:center; gap:18px}
.brandmark{display:flex; align-items:center; gap:10px; border:0; flex:none}
.brandmark img{width:38px;height:38px;flex:none;border-radius:12px;object-fit:cover;border:1px solid var(--edge-2)}
.brandmark b{font-family:'Unbounded'; font-size:.8rem; font-weight:500; letter-spacing:-.025em; line-height:1.25; color:var(--fg); white-space:nowrap}
.brandmark small{display:block; font-family:'Manrope'; font-weight:500; font-size:.66rem; color:var(--fg3); white-space:nowrap}
nav.menu{display:flex; gap:3px; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none}
nav.menu::-webkit-scrollbar{display:none}
nav.menu a{flex:none; padding:7px 13px; border-radius:11px; border:0; color:var(--fg2); font-size:.875rem;
  font-weight:600; letter-spacing:-.012em; white-space:nowrap; transition:background .16s,color .16s}
nav.menu a:hover{color:var(--fg); background:var(--glass)}
nav.menu a[aria-current="page"]{color:var(--acc); background:var(--glass-2); box-shadow:inset 0 0 0 1px var(--edge)}
.ctls{display:flex; gap:6px; flex:none}
.ctl{background:var(--glass); border:1px solid var(--edge); border-radius:11px; padding:7px 12px; color:var(--fg2);
  font-family:'Manrope'; font-weight:700; font-size:.76rem; cursor:pointer; line-height:1.4}
.ctl:hover{color:var(--fg); background:var(--glass-2)}
@media (max-width:900px){
  .hd .in{flex-wrap:wrap; gap:10px}
  nav.menu{order:3; flex-basis:100%; margin:0 calc(-1 * clamp(16px,4vw,42px)); padding:0 clamp(16px,4vw,42px)}
  .brandmark{flex:1; min-width:0}
  .brandmark b{font-size:.76rem}
}
@media (max-width:420px){ .brandmark small{display:none} }

/* ---------- layout ---------- */
main{padding:0 0 90px}
.wrap{max-width:900px; margin:0 auto; padding:0 clamp(16px,4vw,42px)}
.wrap.wide{max-width:1120px}
.route{display:none}
.route.on{display:block}
.band{padding:52px 0 0}
.band:first-of-type{padding-top:30px}

/* ---------- hero ---------- */
.stage{position:relative; width:100%; height:clamp(380px,60vh,560px); border-radius:26px; overflow:hidden;
  border:1px solid var(--edge); background:var(--glass); box-shadow:var(--shadow)}
.stage canvas{position:absolute; inset:0; display:block; width:100%; height:100%}
.fallback{position:absolute; inset:0; display:none; place-items:center; padding:20px}
.fallback.on{display:grid}
.fbwrap{max-width:560px; width:100%}
.fbwrap .fbimg{width:100%; border-radius:18px; border:1px solid var(--edge); display:block}
.fbgrid{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:14px}
.fbgrid span{width:52px;height:52px;border-radius:15px;overflow:hidden;border:1px solid var(--edge);display:block}
.fbgrid img{width:100%;height:100%;object-fit:cover;display:block}
.heroname{margin-top:30px}
.heroname h1{margin-bottom:.2em}
.role{font-family:'Unbounded'; font-weight:400; font-size:clamp(.98rem,2.2vw,1.28rem); color:var(--acc); letter-spacing:-.02em; margin:0 0 .45em}
.post{font-size:.98rem; color:var(--fg3); margin:0}

/* ---------- tables, timeline ---------- */
.facts{width:100%; border-collapse:collapse; font-size:.94rem}
.facts th,.facts td{text-align:left; padding:10px 2px; border-bottom:1px solid var(--edge-2); vertical-align:top}
.facts th{font-weight:600; color:var(--fg3); width:40%; font-size:.87rem}
.facts td{color:var(--fg); font-weight:600}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:0}
.tl{list-style:none; padding:0; margin:0}
.tl li{display:flex; gap:16px; padding:13px 0; border-bottom:1px solid var(--edge-2); margin:0}
.tl li:last-child{border-bottom:0}
.tl .yr{flex:none; width:128px; font-weight:700; color:var(--acc); font-size:.86rem; padding-top:2px}
.tl .what{color:var(--fg); font-weight:600; font-size:.97rem}
.tl .what small{display:block; font-weight:500; color:var(--fg3); font-size:.84rem; margin-top:2px}
.tl li.now .yr{color:var(--acc2)}
@media (max-width:560px){ .tl li{flex-direction:column; gap:3px} .tl .yr{width:auto} }

/* ---------- accordion ---------- */
details.acc{background:var(--glass); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--edge); border-radius:var(--r); margin:0 0 12px; overflow:hidden; box-shadow:var(--shadow)}
details.acc summary{cursor:pointer; list-style:none; padding:17px 22px; font-weight:700; font-size:1rem; display:flex; align-items:center; gap:12px; color:var(--fg)}
details.acc summary::-webkit-details-marker{display:none}
.chev{flex:none; width:24px;height:24px;border-radius:8px;background:var(--glass-2);border:1px solid var(--edge);display:grid;place-items:center;color:var(--acc);font-size:.8rem;transition:transform .22s}
details.acc[open] .chev{transform:rotate(45deg)}
.accbody{padding:0 22px 20px}
.accbody p:last-child,.accbody ul:last-child{margin-bottom:0}

/* ---------- entries ---------- */
.src{margin:0 0 24px}
.src h3{display:flex; align-items:baseline; gap:9px; margin-bottom:11px}
.src h3 .n{font-size:.77rem; font-weight:600; color:var(--fg3)}
.entry{background:var(--glass); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--edge); border-radius:15px; padding:15px 18px; margin-bottom:9px}
.entry .t{font-weight:700; font-size:.97rem; color:var(--fg); display:block; border:0; margin-bottom:4px}
.entry .t:hover{color:var(--acc)}
.entry .m{font-size:.8rem; color:var(--fg3); margin:0}
.entry p.d{font-size:.89rem; margin:6px 0 0}

/* ---------- photos ---------- */
figure{margin:0}
.photo{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--edge); background:var(--glass); box-shadow:var(--shadow)}
.photo img{display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/5}
.photo.wide img{aspect-ratio:16/9}
.photo.sq img{aspect-ratio:1/1}
.photo.r43 img{aspect-ratio:4/3}
figcaption{font-size:.79rem; color:var(--fg3); margin-top:8px}
.gal{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
@media (min-width:760px){ .gal{grid-template-columns:repeat(3,1fr)} }

/* ---------- expertise cards ---------- */
.exp{display:grid; gap:14px}
@media (min-width:680px){ .exp{grid-template-columns:1fr 1fr} }
.exp .it{background:var(--glass); border:1px solid var(--edge); border-radius:16px; padding:18px 20px;
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px)}
.exp .it h3{margin-bottom:.35em; font-size:1rem}
.exp .it p{font-size:.9rem; margin:0; color:var(--fg2)}
.exp .it a{font-size:.85rem; font-weight:600; display:inline-block; margin-top:9px}

/* ---------- checklist ---------- */
ol.check{list-style:none; padding:0; margin:0; counter-reset:c}
ol.check li{counter-increment:c; display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--edge-2); margin:0; color:var(--fg2)}
ol.check li:last-child{border-bottom:0}
ol.check li::before{content:counter(c); flex:none; width:26px; height:26px; border-radius:9px; background:var(--glass-2);
  border:1px solid var(--edge); display:grid; place-items:center; font-size:.76rem; font-weight:700; color:var(--acc)}
ol.check b{display:block; color:var(--fg); font-size:.96rem; margin-bottom:2px}
ol.check span{font-size:.9rem}

/* ---------- quote ---------- */
blockquote.q{margin:0; padding:26px 28px; background:var(--glass); border:1px solid var(--edge); border-radius:var(--r);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); box-shadow:var(--shadow)}
blockquote.q p{font-size:1.02rem; color:var(--fg); line-height:1.65; max-width:72ch}
blockquote.q p:first-of-type::before{content:'“'; font-family:'Unbounded'; font-size:2.6rem; line-height:0; color:var(--acc);
  vertical-align:-.28em; margin-right:.12em}
blockquote.q footer{display:flex; align-items:center; gap:12px; margin-top:16px; padding-top:15px; border-top:1px solid var(--edge-2)}
blockquote.q footer .nm{font-weight:700; font-size:.92rem; color:var(--fg)}
blockquote.q footer .rl{font-size:.8rem; color:var(--fg3)}

/* ---------- video ---------- */
.vid{display:grid; gap:18px; align-items:start}
@media (min-width:760px){ .vid{grid-template-columns:300px 1fr} }
.vid video{width:100%; border-radius:18px; border:1px solid var(--edge); display:block; background:#000; box-shadow:var(--shadow)}

/* ---------- social ---------- */
.soc{display:grid; grid-template-columns:repeat(2,1fr); gap:9px}
@media (min-width:620px){ .soc{grid-template-columns:repeat(3,1fr)} }
.soc a{display:flex; align-items:center; gap:11px; padding:12px 15px; border-radius:14px; border:1px solid var(--edge);
  background:var(--glass); color:var(--fg2); font-weight:600; font-size:.9rem; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
.soc a:hover{color:var(--fg); border-color:var(--acc)}
.soc a.todo-link{opacity:.55}
.soc .ic{flex:none; width:26px; height:26px; border-radius:8px; overflow:hidden; display:grid; place-items:center;
  background:var(--glass-2); border:1px solid var(--edge); font-size:.72rem; font-weight:700; color:var(--fg3)}
.soc .ic img{width:100%;height:100%;object-fit:cover;display:block}
.soc small{display:block; font-weight:500; font-size:.73rem; color:var(--fg3)}

/* ---------- copy blocks ---------- */
.copy{position:relative; margin:0 0 12px}
.copy .box{background:var(--glass); border:1px solid var(--edge); border-radius:15px; padding:16px 18px 44px;
  font-size:.93rem; color:var(--fg); line-height:1.6; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px)}
.copy .cbtn{position:absolute; right:10px; bottom:10px; background:var(--glass-2); border:1px solid var(--edge); border-radius:10px;
  padding:5px 12px; font-family:'Manrope'; font-weight:700; font-size:.75rem; color:var(--fg2); cursor:pointer}
.copy .cbtn:hover{color:var(--acc)}
.namebox{font-family:ui-monospace,Menlo,monospace; font-size:.88rem; line-height:2}

/* ---------- footer ---------- */
footer{padding:40px clamp(16px,4vw,42px) 56px; margin-top:56px; border-top:1px solid var(--edge-2)}
footer .fwrap{max-width:900px; margin:0 auto}
footer p{font-size:.84rem; color:var(--fg3); max-width:72ch}
nav.sec{display:flex; flex-wrap:wrap; gap:4px 2px; margin-bottom:20px}
nav.sec a{padding:5px 12px; border-radius:10px; border:0; color:var(--fg2); font-size:.83rem; font-weight:600}
nav.sec a:hover{color:var(--acc); background:var(--glass)}
.legal{background:var(--glass); border:1px solid var(--edge); border-radius:15px; padding:14px 17px; margin-bottom:20px;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
.legal p{margin:0 0 .6em; font-size:.81rem}
.legal p:last-child{margin-bottom:0}
[data-lang]{display:none}
[data-lang].on{display:block}