/* R20: the live scene withdraws into a white-to-sky navigation space. */
/* transitions.dev panel timing, adapted to the existing horizontal scene reveal. */
:root{--menu-width:clamp(380px,40vw,650px);--menu-open-dur:400ms;--menu-close-dur:200ms;--menu-item-dur:250ms;--menu-stagger:40ms;--menu-ease:cubic-bezier(.22,1,.36,1)}
#menu-toggle{width:108px;min-height:40px;padding:0 15px;gap:15px;border:1px solid currentColor;border-radius:25px;letter-spacing:.12em;transition:width .5s var(--menu-ease),background .3s,color .3s;overflow:hidden;background:color-mix(in srgb,#d9f4f2 6%,transparent)}
#menu-toggle span{white-space:nowrap;font-size:10px;transition:opacity .15s,transform .4s var(--menu-ease)}
#menu-toggle i{width:12px;height:12px;position:relative;flex:none;font-size:0;transition:transform .65s var(--menu-ease)}
#menu-toggle i:before,#menu-toggle i:after{content:"";position:absolute;left:0;top:5px;width:12px;height:1px;background:currentColor}
#menu-toggle i:after{transform:rotate(90deg)}
body.menu-staged{background:#f7fcfd}
body.menu-staged .site-header>.brand,body.menu-staged .site-header>.language-switch{opacity:0;pointer-events:none;transition:opacity .2s}
body.menu-is-open #menu-toggle{width:42px;padding:0 14px;gap:0;background:#fff;color:#284e60;border-color:transparent}
body.menu-is-open #menu-toggle span{opacity:0;width:0;transform:translateX(-20px)}
body.menu-is-open #menu-toggle i{transform:rotate(135deg)}
.menu-scene-surface{transform-origin:0 var(--menu-origin-y);clip-path:var(--menu-clip-rest);transition:transform var(--menu-open-dur) var(--menu-ease),clip-path var(--menu-open-dur) var(--menu-ease);will-change:transform,clip-path;pointer-events:none!important}
body.menu-staged:not(.menu-is-open) .menu-scene-surface,body.menu-staged:not(.menu-is-open) #site-menu,body.menu-staged:not(.menu-is-open) #menu-page-return{transition-duration:var(--menu-close-dur)}
body.menu-staged:not(.menu-is-open) #site-menu *{transition-duration:var(--menu-close-dur);transition-delay:0s}
body.menu-is-open .menu-scene-surface{transform:translateX(var(--menu-shift)) scale(var(--menu-scale));clip-path:var(--menu-clip-open)}
body.menu-staged .locator{opacity:0;pointer-events:none}
#menu-page-return{position:fixed;z-index:24;inset:0 var(--menu-width) 0 0;width:auto;border:0;cursor:pointer;background:#e8f6fa;opacity:0;transition:opacity var(--menu-open-dur) var(--menu-ease);touch-action:none}
body.menu-is-open #menu-page-return{opacity:.09}
#site-menu{--menu-ink:#244c5b;--menu-muted:#627f8c;position:fixed;left:auto;right:0;top:0;bottom:0;z-index:25;width:var(--menu-width);padding:36px clamp(30px,4vw,72px) 30px;background:radial-gradient(ellipse at 108% 108%,#abdce9 0,rgba(206,235,244,.8) 28%,rgba(248,253,254,0) 62%),linear-gradient(165deg,#fff 0%,#fff 49%,#f5fbfd 78%,#eaf7fb 100%);color:var(--menu-ink);overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;justify-content:flex-start;gap:24px;transform:translateX(100%);transition:transform var(--menu-open-dur) var(--menu-ease);scrollbar-width:thin;scrollbar-color:#c6e0e9 transparent;box-shadow:none;text-align:left;isolation:isolate}
#site-menu[hidden],#menu-page-return[hidden]{display:none}
body.menu-is-open #site-menu{transform:translateX(0)}
#site-menu a{display:inline-flex;align-items:center;gap:0;padding:0;border:0;margin:0;text-decoration:none;color:inherit;font-size:inherit;line-height:inherit}
#site-menu a span{margin:0}
#site-menu button{font-family:inherit}
#site-menu a:focus-visible,#site-menu button:focus-visible{outline:2px solid #478296;outline-offset:7px;border-radius:4px}
#site-menu .menu-top{min-height:44px;padding-right:46px;flex:none}
#site-menu .menu-home{display:inline-flex;flex-direction:column;align-items:flex-start;gap:9px;font-size:14px;line-height:1.1;font-weight:600;letter-spacing:.19em}
#site-menu .menu-home span{font-size:7px;font-weight:400;letter-spacing:.19em;color:var(--menu-muted)}
#site-menu .menu-main{margin:auto 0;flex:none}
#site-menu .menu-links{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
#site-menu .menu-links>a{position:relative;min-height:54px;padding:3px 18px 5px 0;font-size:clamp(38px,5.6vh,58px);font-weight:300;line-height:1.22;letter-spacing:-.055em;opacity:0;transform:translate3d(18px,8px,0);transition:opacity var(--menu-item-dur) var(--menu-ease),transform var(--menu-item-dur) var(--menu-ease);white-space:nowrap}
body.menu-is-open #site-menu .menu-links>a{opacity:1;transform:translateZ(0);transition-delay:calc(60ms + var(--menu-i)*var(--menu-stagger))}
#site-menu .menu-label{position:relative;display:block;transition:transform .42s cubic-bezier(.2,.7,.2,1),color .35s}
#site-menu .menu-index{align-self:flex-start;padding:9px 0 0 14px;font-size:9px;font-weight:400;letter-spacing:.02em;line-height:1;color:#7897a1;transition:transform .4s,color .3s}
#site-menu .menu-links>a:before{content:"";position:absolute;left:-17px;top:50%;width:5px;height:5px;border-radius:50%;background:#69a5b1;opacity:0;transform:scale(.3);transition:opacity .3s,transform .4s}
#site-menu .menu-links>a:after{content:"";position:absolute;z-index:-1;inset:-12px -48px -12px -26px;background:radial-gradient(ellipse,#d5edf46b,transparent 70%);opacity:0;transform:scale(.8);transition:opacity .4s,transform .6s}
#site-menu .menu-links>a:is(:hover,:focus-visible,[aria-current]) .menu-label{color:#3f8498;transform:translateX(8px)}
#site-menu .menu-links>a:is(:hover,:focus-visible,[aria-current]) .menu-index{transform:translateX(8px);color:#598899}
#site-menu .menu-links>a:is(:hover,:focus-visible,[aria-current]):before{opacity:1;transform:scale(1)}
#site-menu .menu-links>a:is(:hover,:focus-visible):after{opacity:1;transform:scale(1)}
#site-menu .menu-secondary{display:flex;flex-wrap:wrap;column-gap:23px;row-gap:10px;margin-top:26px}
#site-menu .menu-secondary a{font-size:12px;line-height:1.6;color:#587580;transition:color .3s,transform .3s;min-height:25px}
#site-menu .menu-secondary a:is(:hover,:focus-visible,[aria-current]){color:#234e5e;transform:translateY(-2px)}
#site-menu .menu-experience{position:relative;width:100%;min-height:130px;margin-top:30px;isolation:isolate}
#site-menu .menu-experience:before{content:"";position:absolute;z-index:-1;inset:0 -22px;background:radial-gradient(ellipse at 79% 60%,#b8e1ec66,transparent 65%);opacity:.6;transition:opacity .5s,transform .6s}
#site-menu .menu-experience-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:20px 0}
#site-menu .menu-kicker{font-size:8px;letter-spacing:.18em;color:#557985}
#site-menu .menu-experience-title{font-size:clamp(17px,1.5vw,21px);font-weight:400;letter-spacing:-.045em;line-height:1.4}
#site-menu .menu-experience-detail{font-size:10px;letter-spacing:-.01em;color:#627e8a;line-height:1.5}
#site-menu .menu-portal{position:absolute;right:-3%;top:50%;width:135px;height:110px;transform:translateY(-50%);pointer-events:none;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
#site-menu .menu-portal i{position:absolute;left:9%;top:16%;width:82%;height:72%;border-radius:50%;background:linear-gradient(160deg,#fff 7%,#eaf9fcbc 32%,#a5cfdf85 58%,#fbffffd9 79%);box-shadow:inset 0 2px 2px #fff,inset 0 -2px 3px #79aabc70,0 9px 15px #659bb313;transform:rotate(-29deg) scaleY(.56);animation:menu-lens-drift 7s ease-in-out infinite;animation-play-state:paused}
#site-menu .menu-portal i:after{content:"";position:absolute;inset:13%;border-radius:50%;background:linear-gradient(150deg,#c2e0eb61,#f8ffffd6 58%,#fff);box-shadow:0 -1px 2px #83afbf3d}
#site-menu .menu-portal i:nth-child(2){top:29%;left:12%;width:75%;opacity:.75;animation-delay:-2s}
#site-menu .menu-portal i:nth-child(3){top:42%;left:17%;width:66%;opacity:.5;animation-delay:-4s}
#site-menu .menu-portal>span{position:absolute;right:0;top:17px;font-size:22px;line-height:1;font-weight:300;color:#376f83;transition:transform .5s}
body.menu-is-open #site-menu .menu-portal i{animation-play-state:running}
#site-menu .menu-experience:is(:hover,:focus-visible):before{opacity:1;transform:scale(1.12)}
#site-menu .menu-experience:is(:hover,:focus-visible) .menu-portal{transform:translateY(-50%) rotate(-8deg) scale(1.08)}
#site-menu .menu-experience:is(:hover,:focus-visible) .menu-portal>span{transform:translate(3px,-3px)}
@keyframes menu-lens-drift{0%,100%{transform:translateY(-3px) rotate(-29deg) scaleY(.56)}50%{transform:translateY(3px) rotate(-22deg) scaleY(.52)}}
#site-menu .menu-secondary,#site-menu .menu-experience,#site-menu .menu-bottom{opacity:0;transform:translateY(8px);transition:opacity var(--menu-item-dur) var(--menu-ease),transform var(--menu-item-dur) var(--menu-ease)}
body.menu-is-open #site-menu .menu-secondary,body.menu-is-open #site-menu .menu-experience,body.menu-is-open #site-menu .menu-bottom{opacity:1;transform:none;transition-delay:160ms}
body.menu-is-open #site-menu .menu-experience{transition-delay:200ms}
body.menu-is-open #site-menu .menu-bottom{transition-delay:240ms}
#site-menu .menu-bottom{flex:none}
#site-menu .menu-contact-row{display:flex;justify-content:space-between;align-items:center;gap:20px}
#site-menu .menu-contact{gap:22px;font-size:13px;letter-spacing:-.02em;min-height:40px}
#site-menu .menu-contact>span:last-child{font-size:17px;transition:transform .3s}
#site-menu .menu-contact:hover>span:last-child{transform:translate(3px,-3px)}
#site-menu .menu-language{display:flex;gap:6px;align-items:center;color:#91aab4;font-size:9px}
#site-menu .menu-language button{padding:8px 4px;min-height:32px;border:0;background:none;font-size:10px;letter-spacing:.03em;color:#627e8a;cursor:pointer}
#site-menu .menu-language button[aria-pressed=true]{color:#234c5b;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#73a6b6}
#site-menu .menu-socials{display:flex;gap:23px;margin-top:12px}
#site-menu .menu-socials a{font-size:10px;color:#547582;line-height:2;transition:color .25s}
#site-menu .menu-socials a:hover{color:#193e4e}
/* Keep the live particle pass and its foreground text in the same framed layer. */
body.menu-staged>#services.menu-scene-surface,body.menu-staged>#why.menu-scene-surface{z-index:8}
body.menu-staged .site-header #menu-toggle{visibility:hidden}
#menu-close{position:absolute;right:34px;top:30px;width:44px;height:44px;border:1px solid #b1d1db66;border-radius:50%;background:#ffffff65;color:#345e6e;display:grid;place-items:center;padding:0;cursor:pointer;font:300 24px/1 sans-serif;transition:transform .45s var(--menu-ease),background .3s}
#menu-close:hover{transform:rotate(90deg);background:#eaf6fa}
@media(max-height:760px){#site-menu{gap:18px;padding-top:27px;padding-bottom:22px}#site-menu .menu-links{gap:1px}#site-menu .menu-links>a{font-size:39px;min-height:47px}#site-menu .menu-secondary{margin-top:20px}#site-menu .menu-experience{min-height:108px;margin-top:17px}#site-menu .menu-portal{transform:translateY(-50%) scale(.88)}#menu-close{top:21px}}
@media(max-width:760px){:root{--menu-width:min(90vw,430px)}#menu-toggle{width:88px;min-height:36px;padding:0 11px;gap:11px}#menu-toggle span{font-size:9px}#site-menu{padding:26px 29px 24px;gap:26px}#site-menu .menu-top{min-height:34px}#site-menu .menu-home{font-size:12px;gap:8px}#site-menu .menu-home span{font-size:6px;letter-spacing:.16em}#site-menu .menu-links>a{font-size:clamp(34px,9.5vw,42px);min-height:51px;padding-right:12px}#site-menu .menu-index{font-size:8px;padding:7px 0 0 11px}#site-menu .menu-secondary{gap:7px 18px;margin-top:22px}#site-menu .menu-secondary a{font-size:11px;min-height:28px}#site-menu .menu-experience{min-height:121px;margin-top:22px}#site-menu .menu-experience-title{font-size:17px}#site-menu .menu-experience-detail{font-size:9px}#site-menu .menu-portal{right:-15px;width:110px;opacity:.7}#site-menu .menu-portal>span{right:6px;top:25px}#site-menu .menu-socials{gap:22px}#site-menu .menu-socials a{font-size:9px}#menu-close{right:20px;top:20px;width:36px;height:36px;font-size:22px}}
@media(max-width:760px) and (max-height:700px){#site-menu{gap:14px;padding-top:22px;padding-bottom:18px}#site-menu .menu-links>a{font-size:32px;min-height:44px}#site-menu .menu-links{gap:0}#site-menu .menu-secondary{margin-top:15px;row-gap:0}#site-menu .menu-experience{min-height:97px;margin-top:11px}#site-menu .menu-experience-copy{gap:6px;padding:12px 0}#site-menu .menu-experience-detail{display:none}#site-menu .menu-socials{margin-top:5px}#site-menu .menu-portal{transform:translateY(-50%) scale(.8);transform-origin:right center}}
@media(max-width:760px), (max-width:1100px) and (max-height:500px){
 #menu-toggle{min-height:44px}
 #menu-close{width:44px;height:44px}
 #menu-toggle span{font-size:14px;letter-spacing:.06em}
 .site-header .brand{display:inline-flex;align-items:center;min-width:44px;min-height:44px}
 .site-header .language-switch button{min-width:44px;min-height:44px;font-size:14px}
 #site-menu .menu-home{min-height:44px;font-size:14px}
 #site-menu .menu-secondary a,#site-menu .menu-contact,#site-menu .menu-socials a{min-width:44px;min-height:44px;font-size:14px}
 #site-menu .menu-language button{min-width:44px;min-height:44px;font-size:14px}
 #site-menu .menu-experience-detail{font-size:14px;line-height:1.5}
}
@media(max-width:760px){
 .site-header .language-switch{right:96px;gap:2px}
}
@media(prefers-reduced-motion:reduce){.menu-scene-surface,#site-menu,#menu-page-return,#menu-toggle,#menu-toggle i,#site-menu *{transition:none!important;animation:none!important}}