#lt-nav{position:fixed;top:0;left:0;right:0;z-index:9999;display:flex;align-items:center;justify-content:space-between;padding:18px 34px;font-family:'Poppins',sans-serif;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .4s ease}
#lt-nav.lt-visible{opacity:1;visibility:visible}
#lt-nav::before{content:"";position:absolute;top:0;left:0;right:0;height:150px;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(21,21,21,.55),rgba(21,21,21,0));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);-webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent);mask-image:linear-gradient(to bottom,#000 40%,transparent)}
/* While a portfolio modal page is open, the modal has its own header/chrome
   sitting right under the nav; this blur backdrop was bleeding into it on
   both desktop and mobile. Remove the blur/gradient entirely (rather than
   just shrinking it) whenever html.lt-modal-open is set. */
html.lt-modal-open #lt-nav::before{height:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#lt-nav *{pointer-events:auto}
#lt-nav .lt-left{display:flex;align-items:center;gap:12px}
#lt-nav .lt-logo img{height:28.8px;width:auto;display:block}
#lt-nav .lt-word{font-family:'Poppins',sans-serif;font-weight:700;font-size:19.47px;letter-spacing:3px;color:#fff;text-decoration:none;white-space:nowrap}
#lt-nav .lt-side{display:flex;align-items:center;gap:28px;flex-wrap:nowrap;white-space:nowrap}
#lt-nav a{color:#fff;text-decoration:none;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;font-weight:500;white-space:nowrap;line-height:1}
#lt-nav a.lt-btn{padding:10px 26px;border:1px solid #fff;border-radius:999px;font-weight:700}
#lt-nav a.lt-btn:hover{background:#fff;color:#151515}
#lt-nav .lt-drop{position:relative;display:flex;align-items:center}
#lt-nav .lt-drop>a{display:inline-flex;align-items:center;line-height:1}
#lt-nav .lt-drop>a::after{content:"\25BE";margin-left:6px;font-size:10px;line-height:1;position:relative;top:1px}
#lt-nav .lt-panel{position:absolute;top:100%;right:0;margin-top:14px;background:rgba(21,21,21,.94);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:20px 26px;display:flex;align-items:flex-start;flex-wrap:nowrap;gap:26px;opacity:0;visibility:hidden;transition:opacity .2s ease;max-height:70vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
#lt-nav .lt-panel.open{opacity:1;visibility:visible}
#lt-nav .lt-panel-col{align-self:flex-start}
/* Every column heading — linked or not — shares the same .h4t element type
   (a or span) and the same rules, so the box model is identical and nothing
   sits higher/lower or gets clipped between columns. */
#lt-nav .lt-panel-col h4{margin:0 0 10px}
#lt-nav .lt-panel-col h4 .h4t{display:inline-block;color:#8a8a8a;text-decoration:none;letter-spacing:2px;font-size:11px;line-height:1.4;font-weight:600;text-transform:uppercase}
#lt-nav .lt-panel-col h4 a.h4t:hover{color:#fff}
#lt-nav .lt-panel-col a:not(.h4t){display:block;font-size:12px;letter-spacing:.5px;text-transform:none;font-weight:400;padding:5px 0;color:#ddd;white-space:nowrap}
#lt-nav .lt-panel-col a:not(.h4t):hover{color:#fff}
@media (max-width:900px){#lt-nav .lt-side{gap:16px}#lt-nav .lt-word{display:none}#lt-nav .lt-panel{flex-wrap:wrap;max-width:90vw}#lt-nav .lt-panel-col h4{margin-bottom:4px}#lt-nav .lt-panel-col a:not(.h4t){padding:2px 0}}
@media (max-width:640px){#lt-nav{padding:14px 18px}#lt-nav a{font-size:11px}#lt-nav .lt-logo img{height:24px}#lt-nav .lt-panel{position:fixed;top:auto;left:0;right:0;bottom:0;margin-top:0;max-width:none;border-radius:16px 16px 0 0;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:22px;padding:22px 24px calc(22px + env(safe-area-inset-bottom,0px));max-height:80vh}#lt-nav .lt-panel-col{width:100%;max-width:320px;align-self:center;text-align:center}#lt-nav .lt-panel-col h4{margin-bottom:8px}#lt-nav .lt-panel-col a:not(.h4t){padding:10px 0;font-size:13px}}