/* Shared navigation: reveal on upward scrolling, native service disclosures. */
:root{--site-header-height:100px;--header-offset:var(--site-header-height)}
html.header-hidden{--header-offset:0px}
html{scroll-padding-top:calc(var(--site-header-height) + 16px)}
body{--nav-bg:var(--ink);--nav-ink:var(--paper);--nav-accent:var(--acid);--nav-line:var(--line)}
body:is(.next-chapter,.service-theme){--nav-bg:var(--paper);--nav-ink:var(--ink);--nav-accent:var(--st-accent,var(--blue));--nav-line:var(--line)}
body .site-header{position:fixed;z-index:70;background:var(--nav-bg);color:var(--nav-ink);transform:translateY(0);transition:transform .3s cubic-bezier(.22,.8,.25,1)}
html.header-hidden .site-header{transform:translateY(-100%);pointer-events:none}
body .desktop-nav{align-self:stretch;align-items:center}
.nav-services{position:relative;height:100%}
.nav-services>summary{height:100%;display:flex;align-items:center;gap:9px;list-style:none;cursor:pointer;white-space:nowrap}
.nav-services>summary::-webkit-details-marker{display:none}
.nav-chevron{display:block;width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.nav-services[open]>summary{color:var(--nav-accent)}
.nav-services[open] .nav-chevron{transform:rotate(225deg) translate(-1px,-1px)}
.service-dropdown{position:absolute;right:-24px;top:100%;width:340px;max-height:calc(100dvh - var(--site-header-height) - 16px);overflow-y:auto;overscroll-behavior:contain;padding:10px;background:var(--nav-bg);color:var(--nav-ink);border:1px solid var(--nav-line);box-shadow:0 14px 28px #1722390d}
.nav-services[open]>.service-dropdown{animation:nav-dropdown-in .2s ease-out both}
body .service-dropdown>a{display:grid;grid-template-columns:24px 1fr 18px;align-items:center;gap:12px;min-height:68px;padding:13px 14px;white-space:normal;border-left:2px solid transparent;transition:background .18s,color .18s}
body .service-dropdown>a::after{display:none}
.service-dropdown .nav-service-number{font:9px/1.4 Syne,Pretendard,sans-serif;color:var(--nav-accent);opacity:.7}
.nav-service-label{display:grid;gap:5px}
.nav-service-label b{font:600 15px/1.3 Syne,Pretendard,sans-serif}
.nav-service-label small{font:11px/1.5 Pretendard,sans-serif;opacity:.65;letter-spacing:0}
.nav-service-arrow{display:grid;place-items:center;font-size:16px;color:var(--nav-accent)}
body .service-dropdown>a:is(:hover,:focus-visible,[aria-current]){background:color-mix(in srgb,var(--nav-accent) 8%,var(--nav-bg));color:var(--nav-ink)}
body .service-dropdown>a[aria-current]{border-left-color:var(--nav-accent)}
body .service-dropdown>.nav-service-overview{display:flex;justify-content:space-between;min-height:44px;margin-top:5px;border-top:1px solid var(--nav-line);font-size:11px;color:var(--nav-accent)}
.site-header :is(a,button,summary):focus-visible,.mobile-menu :is(a,button,summary):focus-visible{outline-color:var(--nav-accent);outline-offset:3px}
.si-integrated .si-content-nav{top:var(--header-offset);transition:top .3s cubic-bezier(.22,.8,.25,1)}
@keyframes nav-dropdown-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){
 :root{--site-header-height:80px}
 body .mobile-menu:not([hidden]){top:var(--site-header-height);bottom:0;padding:18px var(--pad) 28px;overflow-y:auto;overscroll-behavior:contain;background:var(--nav-bg);color:var(--nav-ink)}
 .mobile-menu>*{flex-shrink:0}
 .mobile-menu>.nav-services{height:auto;border-bottom:1px solid var(--nav-line)}
 .mobile-menu>.nav-services>summary{height:auto;justify-content:space-between;padding:18px 0;font-size:28px;font-weight:500;letter-spacing:-.04em}
 .mobile-menu .nav-chevron{width:9px;height:9px;margin-right:6px}
 .mobile-menu .service-dropdown{position:static;width:auto;max-height:none;overflow:visible;padding:0 0 12px;border:0;box-shadow:none;animation:none}
 body .mobile-menu .service-dropdown>a{padding:10px 12px;min-height:60px;gap:9px}
 body .mobile-menu .service-dropdown .nav-service-label{font-family:Pretendard,sans-serif;color:var(--nav-ink)}
 .mobile-menu .nav-service-label b{font-size:15px}
 body .mobile-menu>a{font-size:28px;padding:18px 0;border-color:var(--nav-line)}
 body .mobile-menu>button{font-size:22px;padding:23px 0;color:var(--nav-accent)}
 body .mobile-menu>small{padding-top:22px;line-height:1.7;flex-shrink:0}
}
@media(prefers-reduced-motion:reduce){body .site-header,.si-integrated .si-content-nav,.nav-chevron{transition:none}.nav-services[open]>.service-dropdown{animation:none}}
