/* Shared header for every Krevvi page: centre nav pill + right CTA.
   Desktop: the pill opens to both sides when the mouse comes near (studio/nav-pill.js). */
/* Nav pill: one small pill in the centre; it opens to both sides when the pointer comes near */
.pill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;height:44px;padding:0 6px;border-radius:999px;color:#252448;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.2));-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);border:1px solid rgba(255,255,255,.75);box-shadow:0 0 0 1px rgba(37,36,72,.08),0 8px 24px rgba(37,36,72,.10),inset 0 1px 0 rgba(255,255,255,.9);font:600 14px/1 'Open Sans',system-ui,sans-serif}
.pill-label{display:flex;align-items:center;padding:0 18px;white-space:nowrap;overflow:hidden;max-width:120px;transition:max-width .35s cubic-bezier(.2,.8,.2,1),opacity .2s,padding .35s}
.pill-items{display:grid;grid-template-columns:0fr;transition:grid-template-columns .45s cubic-bezier(.2,.8,.2,1)}
.pill-track{display:flex;overflow:hidden;min-width:0}
.pill-track a{flex:none;padding:10px 14px;border-radius:999px;color:#252448;text-decoration:none;opacity:0;transform:scale(.9);transition:opacity .2s,transform .3s,background-color .15s}
.pill-track a:hover,.pill-track a:focus-visible{background:rgba(37,36,72,.07)}
.pill-track a:focus-visible{outline:2px solid #57499a;outline-offset:-2px}
.pill.open .pill-label{max-width:0;opacity:0;padding:0}
.pill.open .pill-items{grid-template-columns:1fr}
.pill.open .pill-track a{opacity:1;transform:none;transition-delay:calc(.08s + var(--d) * .05s)}
.pill .pill-cta{display:none}
@media(prefers-reduced-motion:reduce){.pill *,.pill-label,.pill-items{transition:none!important}}
.kv-cta{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;border-radius:999px;background:#57499a;color:#fff;font:700 13px/1 'Open Sans',system-ui,sans-serif;text-decoration:none;white-space:nowrap;transition:background-color .15s,opacity .2s}
.kv-cta:hover{background:#43377f}
.kv-cta:focus-visible{outline:2px solid #57499a;outline-offset:3px}

/* Service pages (old header markup): same size, logo and hairline behaviour as the homepage */
.site-header{border-bottom-color:transparent;transition:border-color .2s}
.site-header.scrolled{border-bottom-color:#d9d7d1}
.site-header .nav-inner{position:relative;min-height:76px}
.site-header .brand img{width:118px}
.pill-track a[aria-current]{background:rgba(87,73,154,.12);color:#57499a}
@media(min-width:761px) and (max-width:1000px){
 .pill-track a{padding:10px 10px}
 .nav-inner:has(.pill.open) .kv-cta,.top-inner:has(.pill.open) .kv-cta{opacity:0;pointer-events:none}
}
@media(max-width:800px){
 .site-header .pill{display:none}
 .site-header .nav-inner{min-height:64px}
 .site-header .brand img{width:104px}
}
@media(max-width:760px){.site-header .kv-cta{display:none}}
@media(max-width:800px){
 .site-header .menu-toggle{width:44px;height:44px;background:#fff;border:1px solid #d9d7d1}
 .site-header .menu-bars i{width:18px;height:2px;background:#252448}
}
/* Service pages: mobile menu styled like the homepage menu */
.site-header .mobile-nav{gap:0;background:#fffdf7;padding:8px 30px 20px;border-bottom:1px solid #d9d7d1}
.site-header .mobile-nav a{display:block;padding:12px 0;border-bottom:1px solid #d9d7d1;font:600 18px/1 'Open Sans',system-ui,sans-serif;color:#252448;text-decoration:none}
.site-header .mobile-nav a[aria-current]{color:#57499a}
.site-header .mobile-nav .kv-cta{display:flex;margin-top:16px;min-height:48px;border:0;color:#fff;font-size:14px}
@media(max-width:620px){.site-header .mobile-nav{padding-inline:18px}}
.site-header .menu-bars i{transition:transform .2s}
.site-header .menu-toggle[aria-expanded=true] .menu-bars i:first-child{transform:translateY(4px) rotate(45deg)}
.site-header .menu-toggle[aria-expanded=true] .menu-bars i:last-child{transform:translateY(-4px) rotate(-45deg)}

/* Glass needs something to frost: let the header itself be lightly see-through on every page */
header.top,header.site-header{background:rgba(255,253,247,.72);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .pill{background:rgba(255,255,255,.92)}
 header.top,header.site-header{background:rgba(255,253,247,.97)}
}

/* ---- v2: plain centred text links, always visible (no pill, no border, no show/hide) ---- */
.pill{background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;height:auto;padding:0;gap:0}
.pill .pill-label{display:none}
.pill .pill-items{grid-template-columns:1fr!important;transition:none}
.pill .pill-track{gap:clamp(18px,2.6vw,40px);overflow:visible}
.pill .pill-track a{opacity:1!important;transform:none!important;transition:color .15s!important;padding:8px 0;border-radius:0;background:none!important;font:600 14px/1 'Open Sans',system-ui,sans-serif;color:#252448;position:relative}
.pill .pill-track a:hover{color:#57499a}
.pill .pill-track a[aria-current]{color:#252448}
.pill .pill-track a[aria-current]:after{content:'';position:absolute;left:50%;bottom:-4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#57499a}
.pill .pill-track a:focus-visible{outline:2px solid #57499a;outline-offset:4px;border-radius:4px}
/* right button: dark ink pill with arrow, like the reference */
.kv-cta{background:#252448;gap:8px}
.kv-cta:hover{background:#3a3866}
.kv-cta:after{content:'↗';font-size:14px;line-height:1}
@media(min-width:761px) and (max-width:1000px){
 .pill .pill-track{gap:16px}
 .pill .pill-track a{font-size:13px}
 .nav-inner:has(.pill.open) .kv-cta,.top-inner:has(.pill.open) .kv-cta{opacity:1;pointer-events:auto}
}